/* The content pages built on guide.css: features, support, what's new, press and 404. */
.guide.wide { max-width: 1120px; }
.guide.wide > header { max-width: 44rem; }

/* Jump links under a page's title. */
.guide .toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.guide .toc li { margin: 0; }
.guide .toc a {
  display: block;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink-2);
  text-decoration: none;
  font: 600 14px/1 var(--font);
}
.guide .toc a:hover { color: var(--ink); }

/* Features: one group per area, a grid of short items. */
.fgroup { scroll-margin-top: 80px; }
.guide .fgroup > h2 { margin-top: 64px; }
.fgroup > p { max-width: 44rem; margin: 0; }

.guide .fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.guide .fgrid li {
  margin: 0;
  padding: 0 0 18px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.fgrid h3 { margin: 0; padding: 14px 18px 0; font-size: 17px; line-height: 1.3; }
.guide .fgrid h3 { margin: 0; color: var(--ink); }
.fgrid p { margin: 6px 0 0; padding: 0 18px; font-size: 15px; line-height: 1.45; }

/* Feature drawings: one small sketch on paper per card, drawn in the app's own pen and
   accent colours. Shared patterns, icons and glyphs live in the hidden .defs svg. */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.defs .x-lat { fill: none; stroke: var(--line); stroke-width: 0.7; }
.defs .x-faint { stroke-dasharray: 2 2; }
.defs .x-dot { fill: var(--dot); }
.defs .x-latl { fill: none; stroke: #DAD4C5; stroke-width: 0.7; }
.defs .x-latd { fill: none; stroke: #3C4B44; stroke-width: 0.7; }

.fgrid .ill {
  --ok: #2E9E4F;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 240 / 150;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-2);
  font-family: var(--font);
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-color-scheme: dark) { .fgrid .ill { --ok: #5FD98A; } }

.ill :where(path, circle, rect, ellipse) { fill: none; }
.ill .k { stroke: var(--pen); stroke-width: 2.2; }
.ill .k1 { stroke: var(--pen); stroke-width: 1.5; }
.ill .hand { stroke-width: 1.8; }
.ill .thin { stroke: var(--line); stroke-width: 1.4; }
.ill .gh { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0.8; }
.ill .mk { stroke: var(--blue); stroke-width: 6; opacity: 0.45; }
.ill .gr { stroke: var(--ink-2); stroke-width: 1.3; stroke-dasharray: 0.6 1.6; }
.ill .hl { stroke: var(--sun); stroke-width: 10; opacity: 0.55; stroke-linecap: butt; }
.ill .hl2 { stroke: var(--sun); stroke-width: 7; opacity: 0.6; }
.ill .fl { fill: var(--sun); opacity: 0.45; }
.ill .fl2 { fill: var(--sun); opacity: 0.4; }
.ill .ar { stroke: var(--accent); stroke-width: 1.6; }
.ill .af { fill: var(--accent); }
.ill .d { stroke: var(--ink-2); stroke-width: 0.9; }
.ill .tk { stroke-width: 1.2; }
.ill .add { stroke: var(--accent); fill: none; }
.ill text.add { fill: var(--accent); stroke: none; }
.ill .guide { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 2.5; }
.ill .guide2 { stroke: var(--ink-2); stroke-width: 0.9; }
.ill .gd { stroke: var(--accent); stroke-width: 1; }
.ill .trim { stroke: var(--red); stroke-width: 2.2; stroke-dasharray: 4 3; }
.ill .off { stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 2.5; }
.ill .acc2 { stroke: var(--accent); stroke-width: 1.4; }
.ill .ul { stroke: none; }
.ill .rg { stroke: var(--accent); stroke-width: 1.4; }
.ill .pf { fill: var(--accent); }
.ill .wd { fill: var(--card); stroke: var(--pen); stroke-width: 1.4; }
.ill .grip { stroke: var(--accent); stroke-width: 1.4; }
.ill .fg { fill: var(--finger); stroke: var(--finger-ring); stroke-width: 1; }
.ill .hold { stroke: var(--accent); stroke-width: 1.4; }
.ill .faint { opacity: 0.45; }
.ill .tap { stroke: var(--accent); stroke-width: 1.4; }
.ill .sq { stroke: var(--accent); stroke-width: 1.6; }
.ill .ecur { stroke: var(--ink-2); stroke-width: 1.2; fill: var(--card); fill-opacity: 0.5; }
.ill .lso { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 3; }
.ill .drag { stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 2 3; }
.ill .snp { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.ill .snp2 { stroke: var(--accent); stroke-width: 1.6; }
.ill .sq { stroke: var(--accent); }
.ill rect.sq { stroke-width: 1; }
.ill .sh2 { fill: var(--ink); opacity: 0.12; }
.ill .hm { stroke: var(--accent); stroke-width: 1.8; }
.ill .hw { fill: var(--accent); font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; font-weight: 600; }
.ill .ok { stroke: var(--ok); stroke-width: 2.2; }
.ill .okf { fill: var(--ok); }
.ill .selbox { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; }
.ill .hdl { fill: var(--card); stroke: var(--accent); stroke-width: 1.2; }
.ill .caret { stroke: var(--accent); stroke-width: 1.2; }
.ill .slash { stroke: var(--red); stroke-width: 2; }
.ill .none { stroke: none; }
.ill .pick { stroke: var(--accent); stroke-width: 6; opacity: 0.28; }
.ill use.cgi { color: var(--accent); }

/* Pencil: white body, grey cone, graphite tip. */
.ill .pb { fill: #FFFFFF; stroke: rgba(31, 30, 27, 0.35); stroke-width: 0.8; }
.ill .pt { fill: #E7E4DC; stroke: rgba(31, 30, 27, 0.35); stroke-width: 0.8; }
.ill .pg { fill: #3A3A3C; }

/* Popovers, chips and fields, as in the app. */
.ill .cd { fill: var(--card); stroke: var(--hairline); stroke-width: 1; filter: drop-shadow(0 1px 2px rgba(40, 35, 20, 0.12)); }
.ill .field { fill: var(--card); stroke: var(--accent); stroke-width: 1.2; }
.ill .row { fill: var(--paper-2); }
.ill .btn { fill: var(--accent); }
.ill .segon { fill: var(--paper-2); stroke: var(--hairline); }
.ill .dv { stroke: var(--line); stroke-width: 1; }
.ill .ic { fill: var(--ink-2); color: var(--ink-2); }
.ill .ion { fill: #FFFFFF; color: #FFFFFF; }
.ill .icn { stroke: var(--ink-2); stroke-width: 1.3; }
.ill .icf { fill: var(--ink-2); }
.ill .cb { fill: var(--card); stroke: var(--accent); stroke-width: 1; }
.ill .cba { fill: var(--card); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 1.5; }
.ill .cbbad { fill: var(--red); }
.ill use.cg { color: var(--accent); }
.ill use.cgw { color: #FFFFFF; }
.ill .cba + use.cg { color: var(--accent); }

/* Swatches: the app's pen colours. */
.ill .sw { stroke: var(--hairline); stroke-width: 1; }
.ill .s1 { fill: var(--pen); }
.ill .s2 { fill: #C0392B; }
.ill .s3 { fill: #2F80ED; }
.ill .s4 { fill: #27AE60; }
.ill .s5 { fill: var(--sun); }
.ill .s6 { fill: #9B9488; }
.ill .s7 { fill: #FFFFFF; }
.ill .s8 { fill: #FF5555; }
.ill .s9 { fill: #55FFFF; }

/* Paper, devices and files. */
.ill .sh { fill: var(--card); stroke: var(--line); stroke-width: 1; }
.ill .sh.back { fill: var(--paper-2); }
.ill .sh.sel { stroke: var(--accent); stroke-width: 2; }
.ill .shp { fill: var(--card); stroke: var(--line); stroke-width: 1; }
.ill .pg { fill: #3A3A3C; }
.ill rect.pg { fill: var(--card); stroke: var(--line); stroke-width: 1; }
.ill .view { stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 5 3; }
.ill .tile { fill: var(--paper); }
.ill .tileo { stroke: var(--line); stroke-width: 1; }
.ill .bz { fill: var(--bezel); stroke: var(--line); stroke-width: 1; }
.ill .scr { fill: var(--paper); }
.ill .photo { fill: #C9A97E; }
.ill .scanl { stroke: #8A6E4B; stroke-width: 1.4; opacity: 0.7; }
.ill .scanc { stroke: var(--accent); stroke-width: 2; }
.ill .graphite { stroke: #5C4A35; stroke-width: 1.6; }
.ill .rul, .ill .rulp { fill: #E9E4D6; stroke: #B9B19E; stroke-width: 1; }
.ill .rt { stroke: #8A836F; stroke-width: 1; }
.ill .doc { fill: var(--card); stroke: var(--ink-2); stroke-width: 1.4; }
.ill .l1 { stroke: #C0392B; stroke-width: 2; }
.ill .l2 { stroke: #2F80ED; stroke-width: 1.4; }
.ill .l3 { stroke: #27AE60; stroke-width: 2; }
.ill .bar { fill: var(--pen); }
.ill .baro { fill: var(--card); stroke: var(--pen); stroke-width: 1; }
.ill .cadbg { fill: #1E2328; }
.ill .cl1 { stroke: #FFFFFF; stroke-width: 1.6; }
.ill .cl2 { stroke: #55FFFF; stroke-width: 1.2; }
.ill .cl3 { stroke: #FF5555; stroke-width: 1.6; }
.ill .png { fill: #D9E7F5; }
.ill .pngm { fill: #6B9AC4; }
.ill .pngs { fill: var(--sun); }
.ill .bub { fill: #2F80ED; }
.ill .cloud, .ill .cloud2 { fill: var(--card); stroke: var(--ink-2); stroke-width: 1.4; }
.ill .cloud2 { stroke: #2F80ED; }
.ill .wifi { stroke: var(--ink-2); stroke-width: 2.4; }
.ill .wifif { fill: var(--ink-2); }
.ill .litebg { fill: #FAF7F0; stroke: var(--line); stroke-width: 1; }
.ill .darkbg { fill: #23282B; stroke: var(--line); stroke-width: 1; }
.ill .margin { stroke: #D98C84; stroke-width: 1.2; }
.ill .inkl { stroke: #21385C; stroke-width: 1.8; }
.ill .inkd { stroke: #EFEDE3; stroke-width: 1.8; }
.ill .lockb { fill: var(--accent); }
.ill .lock { stroke: var(--accent); stroke-width: 3.2; }
.ill .lockh { fill: var(--card); }
.ill .tickw { stroke: #FFFFFF; stroke-width: 1.6; }

/* Labels. */
.ill text { stroke: none; text-anchor: middle; dominant-baseline: middle; }
.ill .t { fill: var(--ink); font-size: 9.5px; font-weight: 600; }
.ill .tl, .ill .tcl, .ill .tcl2, .ill .tcad { text-anchor: start; }
.ill .tl { fill: var(--ink); font-size: 10px; font-weight: 600; }
.ill .tl2 { fill: var(--ink); font-size: 10px; font-weight: 600; }
.ill .ts { fill: var(--ink-2); font-size: 8.5px; font-weight: 600; }
.ill .tson { fill: var(--ink); font-size: 8.5px; font-weight: 700; }
.ill .tbig { fill: var(--ink); font-size: 13px; font-weight: 700; }
.ill .big { fill: var(--ink-2); font-size: 9px; font-weight: 800; letter-spacing: 0.04em; }
.ill .m, .ill .ms { fill: var(--muted); font-size: 8.5px; font-weight: 500; }
.ill .tx { fill: var(--pen); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.ill .txs { fill: var(--pen); font-size: 8.5px; font-weight: 500; }
.ill .tbtn { fill: #FFFFFF; font-size: 10px; font-weight: 700; }
.ill .tcl { fill: var(--ink); font-size: 8.5px; font-weight: 700; }
.ill .mcl { fill: var(--muted); font-size: 7.5px; text-anchor: start; }
.ill .tcl2 { fill: var(--ink); font-size: 8px; }
.ill .tclr { fill: var(--accent); font-size: 8px; font-weight: 700; text-anchor: end; }
.ill .tsc { fill: var(--muted); font-size: 8px; font-weight: 600; }
.ill .tcad { fill: #EFEDE3; font-size: 7.5px; }
.ill .tcad2 { fill: #9AA19C; font-size: 7.5px; }
.ill .code { fill: var(--ink-2); font: 500 8px ui-monospace, "SF Mono", Menlo, monospace; }
.ill .tiny { fill: var(--ink-2); font-size: 6px; font-weight: 600; }

/* Keyboard shortcuts and fact sheets. */
.keys, .facts { width: 100%; max-width: 44rem; border-collapse: collapse; margin: 22px 0 0; font-size: 15.5px; }
.keys th, .keys td, .facts th, .facts td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.keys th, .facts th { font-weight: 600; color: var(--ink); width: 40%; padding-right: 18px; }
.keys td, .facts td { color: var(--ink-2); }

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--hairline), 0 1px 0 var(--hairline);
  font: 600 13px/1.3 var(--font);
  text-align: center;
  color: var(--ink);
}

/* Support: the contact card. */
.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin: 36px 0 0;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.contact div { flex: 1 1 18rem; }
.guide .contact h2 { margin: 0 0 4px; font-size: 20px; }
.contact p { margin: 0; font-size: 15.5px; line-height: 1.45; }
.guide .contact .button {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font: 600 15px/1 var(--font);
}

/* Support's questions reuse the home page's FAQ markup. */
.guide .faq article { padding: 20px 0; border-top: 1px solid var(--hairline); }
.guide .faq article:last-child { border-bottom: 1px solid var(--hairline); }
.guide .faq h3 { margin: 0 0 6px; }
.guide .faq p { margin: 0; }

/* What's new: release notes. */
.release { margin-top: 44px; }
.release .tag {
  display: inline-block;
  padding: 6px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font: 650 13px/1 var(--font);
  letter-spacing: 0.02em;
}
.guide .release h2 { margin-top: 14px; }

/* Press: icon downloads. */
.icons { display: flex; flex-wrap: wrap; gap: 20px; margin: 22px 0 0; }
.icons figure { margin: 0; text-align: center; }
.icons img { width: 128px; height: 128px; border-radius: 28px; box-shadow: var(--shadow); }
.icons figcaption { margin-top: 10px; font-size: 14.5px; }

.guide blockquote {
  margin: 18px 0 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
}

/* 404 */
.lost { text-align: center; max-width: 34rem; padding-top: 96px; padding-bottom: 120px; }
.lost .icon { width: 96px; height: 96px; margin: 0 auto 28px; border-radius: 22px; box-shadow: var(--shadow); }
.guide.lost .lede { margin: 16px auto 0; }
.guide.lost .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.guide.lost .links li { margin: 0; }
.guide.lost .links a {
  display: block;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  font: 600 15px/1 var(--font);
}

@media (max-width: 600px) {
  .keys th, .facts th { width: 46%; }
  .icons img { width: 104px; height: 104px; border-radius: 23px; }
}

/* Cut, for makers (features). Operation colours match the making guides' figures in guide.css;
   each operation also has its own line style, so colour isn't the only cue. Exported files are
   drawn on white in both modes, the way the file itself looks. */
.fgrid .ill {
  --op-cut: #D93A2B;
  --op-score: #2F6FDE;
  --op-draw: #2E8B57;
  --op-eng: #8A5A00;
  --warn: #D9A21B;
}
@media (prefers-color-scheme: dark) {
  .fgrid .ill {
    --op-cut: #F0806F;
    --op-score: #84AEF2;
    --op-draw: #73C99A;
    --op-eng: #E2B65C;
    --warn: #F2C84B;
  }
}
.ill .oc { stroke: var(--op-cut); stroke-width: 2; }
.ill .os { stroke: var(--op-score); stroke-width: 1.6; stroke-dasharray: 4 3; }
.ill .od { stroke: var(--op-draw); stroke-width: 1.6; }
.ill .oe { fill: var(--op-eng); fill-opacity: 0.55; }
.ill .oel { stroke: var(--op-eng); stroke-width: 2.4; }
.ill .osk { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 0.5 3; }
.ill .ocf { fill: var(--op-cut); }
.ill .osf { fill: var(--op-score); }
.ill .odf { fill: var(--op-draw); }
.ill .oef { fill: var(--op-eng); }
.ill .cons { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ill .mat { fill: var(--card); stroke: var(--ink-2); stroke-width: 1.2; }
.ill .matg { stroke: var(--line); stroke-width: 0.6; }
.ill .stock { fill: var(--paper-2); stroke: var(--line); stroke-width: 1; }
.ill .tab { stroke: var(--accent); stroke-width: 5; stroke-linecap: butt; opacity: 0.55; }
.ill .fitk { fill: var(--card); stroke: var(--pen); stroke-width: 1.2; }
.ill .tp { stroke: var(--accent); stroke-width: 1.3; stroke-dasharray: 4 3; }
.ill .tpl { stroke: var(--accent); stroke-width: 1; opacity: 0.85; }
.ill .bitc { fill: var(--accent); }
.ill .warn { stroke: var(--warn); stroke-width: 1.6; }
.ill .warnf { fill: var(--warn); }
.ill .trk { fill: var(--line); }
.ill .trkd { fill: #3C4B44; }
.ill .barp { fill: var(--pen); }
.ill .tgon { fill: var(--ok); }
.ill .tgoff { fill: var(--line); }
.ill .knob { fill: #FFFFFF; filter: drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.25)); }
.ill .selr { stroke: var(--accent); stroke-width: 1.8; }
.ill .tgrid rect { fill: var(--op-eng); stroke: var(--op-cut); stroke-width: 0.8; }
.ill .shank { fill: var(--line); stroke: var(--ink-2); stroke-width: 0.8; }
.ill .cutter { fill: var(--ink-2); }
.ill .flute { stroke: var(--card); stroke-width: 1.2; }
.ill .fldr { fill: #2F80ED; }
.ill .adp { stroke: #2F80ED; stroke-width: 1.8; }
.ill .adpf { fill: #2F80ED; }
.ill .metal { fill: color-mix(in srgb, var(--ink-2) 12%, var(--card)); stroke: var(--pen); stroke-width: 1.5; }
.ill .newf { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 3; }
.ill .bend { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 7 4; }
.ill .cbend { stroke: #FFFF55; stroke-width: 1.2; stroke-dasharray: 5 3; }
.ill .cbsw { fill: #FFFF55; }
.ill .fsheet { fill: #FFFFFF; stroke: var(--line); stroke-width: 1; }
.ill .fd { stroke: #6B6B6B; stroke-width: 0.8; }
.ill .lbc { stroke: #FF0000; stroke-width: 1.6; }
.ill .lbs { stroke: #0000FF; stroke-width: 1.4; }
.ill .lbe { fill: #000000; }
.ill .fstk { stroke: #1F1E1B; stroke-width: 1.6; }
.ill .ffill { fill: #1F1E1B; }
.ill .crk { fill: #000000; }
.ill .crs { stroke: #2D6BE0; stroke-width: 1.8; }
.ill .crsf { fill: #2D6BE0; }
.ill .cre { fill: #808080; }
.ill .hair { stroke: #000000; stroke-width: 0.5; }
.ill .trail { fill: var(--ink-2); font-size: 7.5px; font-weight: 600; text-anchor: start; }
.ill .trailon { fill: #FFFFFF; font-size: 7.5px; font-weight: 700; text-anchor: start; }
.ill .tst { fill: var(--ink); font-size: 7.5px; font-weight: 600; text-anchor: start; }
.ill .tr { fill: var(--muted); font-size: 7.5px; font-weight: 500; text-anchor: end; }
.ill .tbtn2 { fill: #FFFFFF; font-size: 6.5px; font-weight: 700; }
.ill .tb { fill: var(--accent); font-size: 8px; font-weight: 700; }
.ill .ftx { fill: #3A3A3C; font-size: 7.5px; font-weight: 600; }
.ill .glyph { fill: var(--pen); font-size: 30px; font-weight: 600; }
.ill .glypho { fill: none; stroke: var(--pen); stroke-width: 0.9; font-size: 26px; font-weight: 700; }