/* T-184f: the centering tool at gradevu.com/centering (docs/specs/CENTERING-TOOL.md). It builds on the landing's
   /styles.css (tokens, .bar, .section, buttons, the waitlist form, the footer) and adds only the tool's own parts.
   Design ground truth: Claude Design 24 (the T | B and L | R boxes, the selected-line bar with ‹ › and the lime pill,
   the lime selected line with end ticks), 45 (the share card) and 66 (the dashed inner frame and the worked ratio). */

@font-face{font-family:"Geist";src:url("/fonts/Geist-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/fonts/GeistMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --teal:#5EE0C1;
  --card:#141619;
  --card-2:#1A1D21;
  --lime-08:rgba(212,245,60,.08);
  --lime-16:rgba(212,245,60,.16);
  --amber-12:rgba(255,181,71,.12);
  --radius:20px;
}

/* Anything the script hides stays hidden, whatever display a component sets. */
.ct [hidden]{display:none!important}
/* The script places the page itself after each step (the result under the header, the card with its docked bar), so
   the browser's scroll anchoring must not move it again when the result redraws its chips (this file is the tool page's
   alone). */
html,body{overflow-anchor:none}

/* ---- the Sidekick lockup (assets/brand/README.md; the brand lane's .wordmark once wt/brand merges) ----------------- */
.ct-wordmark{display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;color:var(--text);font-weight:700;font-size:17px;line-height:1;letter-spacing:-.03em}
.ct-wordmark span{color:var(--lime)}
.ct-mark{width:1.128em;height:1.421em;margin-right:.3em;flex:none}
.ct-bar .nav{margin-left:auto}

/* ---- hero: short, so the upload card is above the fold at 390 × 844 (the simple flow) ------------------------------------ */
.ct-top{position:relative;z-index:1}
.ct-hero{position:relative;z-index:1;width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:28px calc(var(--gutter) + 4px) 0}
.ct-kicker{color:var(--lime);margin-bottom:14px}
.ct-h1{margin:0;max-width:14em;font-weight:500;font-size:clamp(32px,8.6vw,64px);line-height:1;letter-spacing:-.045em}
.ct-lead{max-width:36em;margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--text-2)}
.ct-privacy{display:flex;align-items:flex-start;gap:10px;max-width:40em;margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--text)}
.ct-lock{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:var(--lime);stroke-width:1.6}
@media (min-width:700px){.ct-hero{padding:56px calc(var(--gutter) + 16px) 0}.ct-lead{font-size:17px}.ct-privacy{font-size:15px}}
/* Desktop, before the first photo: the words left, the upload card right (the Higgsfield Upscale and remove-a-
   background pattern), both above the fold. */
@media (min-width:1024px){
  .ct-top.is-empty{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;column-gap:56px;width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:56px calc(var(--gutter) + 16px) 80px}
  .ct-top.is-empty .ct-hero,.ct-top.is-empty .ct-tool{max-width:none;margin:0;padding:0}
  .ct-top.is-empty .ct-intake{min-height:460px}
}

/* ---- the tool's frame --------------------------------------------------------------------------------------------------- */
.ct-tool{position:relative;z-index:1;width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:20px calc(var(--gutter) + 4px) 56px}
@media (min-width:700px){.ct-tool{padding:32px calc(var(--gutter) + 16px) 88px}}
.ct-faces{display:inline-flex;gap:4px;padding:4px;margin:0 0 14px;background:var(--card);border:1px solid var(--line);border-radius:999px}
.ct-face{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font:500 15px/1 var(--sans);cursor:pointer}
.ct-face[aria-selected="true"]{background:var(--text);color:var(--bg)}
.ct-face:not([aria-selected="true"]):hover{color:var(--text)}
.ct-face-mark{display:none;width:14px;height:14px;border-radius:50%;background:var(--lime) center/10px no-repeat}
.ct-face.is-done .ct-face-mark{display:inline-block;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2L8 3' fill='none' stroke='%230A0B0D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ct-face:focus-visible{outline-offset:2px}

.ct-work{display:grid;gap:14px}
.ct-media,.ct-side{min-width:0}
.ct-side{display:grid;gap:14px;align-content:start}
@media (min-width:600px) and (max-width:1023px){.ct-media,.ct-side,.ct-boxes{max-width:560px;width:100%;margin:0 auto}.ct-faces{display:flex;width:max-content;margin:0 auto 16px}
  .ct-tool.is-thumb .ct-work{max-width:560px;margin:0 auto}.ct-tool.is-thumb .ct-media,.ct-tool.is-thumb .ct-side,.ct-tool.is-thumb .ct-boxes{max-width:none;margin:0}}
/* The result on a phone (and up to 1023 px): the card as a picture beside its two ratios, the check line under them, then
   the estimates and Share; Adjust opens the card large (the Yuka and Tempo scan-result pattern). */
@media (max-width:1023px){
  .ct-tool.is-thumb .ct-work{grid-template-columns:minmax(0,40fr) minmax(0,60fr);grid-template-areas:"media boxes" "side side";column-gap:12px;align-items:start}
  .ct-tool.is-thumb .ct-media{grid-area:media}
  .ct-tool.is-thumb .ct-boxes{grid-area:boxes;grid-template-columns:1fr;align-content:start}
  .ct-tool.is-thumb .ct-side{grid-area:side}
  .ct-tool.is-thumb .ct-box{padding:10px 12px}
  .ct-tool.is-thumb .ct-box-v{font-size:clamp(20px,6.2vw,28px)}
  .ct-tool.is-thumb .ct-viewer{gap:8px}
}
@media (min-width:1024px){
  .ct-tool.is-split{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto auto 1fr;column-gap:40px;align-items:start}
  .ct-tool.is-split .ct-faces{grid-column:2;grid-row:1;justify-self:start;z-index:2;margin:0 0 14px}
  .ct-tool.is-split .ct-work{grid-column:1 / 3;grid-row:1 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;column-gap:40px;row-gap:0}
  .ct-tool.is-split .ct-boxes{grid-column:2;grid-row:2;margin-bottom:14px}
  .ct-tool.is-split .ct-media{grid-column:1;grid-row:1 / 4;max-width:760px;width:100%}
  .ct-tool.is-split .ct-side{grid-column:2;grid-row:3}
  .ct-tool:not(.is-split) .ct-side{display:none}
}
.ct-tool{scroll-margin-top:72px}

/* ---- buttons the tool adds ---------------------------------------------------------------------------------------------- */
.ct-btn-outline{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1px solid var(--line-3);border-radius:999px;background:transparent;color:var(--text);font:500 15px/1 var(--sans);text-decoration:none;cursor:pointer;transition:border-color .15s}
.ct-btn-outline:hover{border-color:var(--text)}
.ct-btn-text{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;border:0;background:none;color:var(--text-2);font:500 15px/1 var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-3)}
.ct-btn-text:hover{color:var(--text)}
.ct-btn-wide{width:100%}
.ct-btn-icon{flex:none;width:18px;height:18px;margin-right:8px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ct-adjust{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--text);font:500 14px/1 var(--sans);cursor:pointer;white-space:nowrap}
.ct-adjust svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.ct-adjust:hover{border-color:var(--line-3)}
.ct-adjust{max-width:100%}
@media (max-width:374px){.ct-adjust{padding:0 10px;font-size:13px}.ct-adjust svg{display:none}}
@media (pointer:coarse){.ct-adjust{min-height:44px}}
.ct-icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--text);cursor:pointer}
.ct-icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ct-icon-btn:hover{border-color:var(--line-3)}
.ct-chip-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--text);font:500 14px/1 var(--sans);cursor:pointer;white-space:nowrap}
.ct-chip-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ct-chip-btn:hover{border-color:var(--line-3)}
.ct-round{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--card-2);color:var(--text);cursor:pointer}
.ct-round svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-round.is-v svg{transform:rotate(90deg)}
.ct-round:disabled{opacity:.35;cursor:default}
.ct-pill{min-height:44px;padding:0 15px;border:0;border-radius:999px;background:var(--lime);color:var(--bg);font:500 15px/1 var(--sans);cursor:pointer;white-space:nowrap}
.ct-pill:hover{background:var(--lime-press)}
/* Re-detect and Detect replace the lines: a quiet outline, so the bar's lime pill is "Looks right" (round 1). */
.ct-pill-quiet{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-3)}
.ct-pill-quiet:hover{background:var(--card-2)}
/* Looks right clears a line's Check: amber like the Check it answers, so Done stays the bar's one lime action. */
.ct-pill-check{background:transparent;color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.ct-pill-check:hover{background:var(--amber-12)}
.ct-tag{display:inline-flex;align-items:center;min-height:20px;padding:0 8px;border:1px solid var(--line-3);border-radius:6px;font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.ct-tag-check{border-color:var(--amber);color:var(--amber);background:var(--amber-12)}
.ct-tag-close{border-color:var(--amber);color:var(--amber)}

/* ---- intake (4.1, 4.11) --------------------------------------------------------------------------------------------------- */
.ct-intake{display:grid;justify-items:center;align-content:center;gap:12px;padding:24px 18px 22px;border:1.5px dashed var(--line-3);border-radius:var(--radius);background:linear-gradient(180deg,rgba(243,244,246,.025),transparent);text-align:center;cursor:pointer;transition:border-color .15s}
.ct-intake:hover{border-color:var(--lime)}
.ct-demo{width:72px;height:auto;margin:2px 0 0;overflow:visible}
.ct-demo-edge{fill:rgba(243,244,246,.03);stroke:var(--teal);stroke-width:2}
.ct-demo-art{fill:rgba(243,244,246,.05);stroke:none}
.ct-demo-line{fill:none;stroke:var(--lime);stroke-width:1.4;stroke-dasharray:4 4}
.ct-intake-face{display:grid;gap:4px;margin:0}
.ct-intake-k{font:500 19px/1.2 var(--sans);letter-spacing:-.01em}
.ct-intake-not{font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.ct-intake-actions{display:grid;justify-items:center;gap:4px;width:100%;max-width:340px;margin-top:2px}
.ct-intake-actions .btn-primary{min-height:52px;font-size:16px}
.ct-take{justify-self:center}
.ct-drop-hint{display:none;margin:0;font-size:14px;color:var(--text-2)}
.ct-tips{max-width:30em;margin:0;font-size:13px;line-height:1.5;color:var(--text-3)}
@media (hover:hover) and (pointer:fine){
  #ct-take{display:none}
  .ct-drop-hint{display:block}
  .ct-intake{padding:48px 24px 40px;min-height:360px}
}

/* ---- the viewer ------------------------------------------------------------------------------------------------------------- */
.ct-viewer{display:grid;gap:12px;justify-items:center}
.ct-stage{position:relative;max-width:100%;overflow:hidden;border-radius:var(--radius);background:#060708;box-shadow:inset 0 0 0 1px var(--line);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ct-tool[data-state="decoding"] .ct-stage{width:100%;aspect-ratio:63/88;max-height:72vh}
.ct-stage.is-zoomed{cursor:grab}
.ct-canvas,.ct-overlay,.ct-handles{position:absolute;inset:0}
.ct-overlay{pointer-events:none;overflow:visible}
.ct-handles{pointer-events:none}
.ct-h{position:absolute;scroll-margin:88px 0 24px;pointer-events:auto;border-radius:12px;background:transparent;border:0;padding:0;outline:none;touch-action:none}
.ct-h-line{cursor:grab}
.ct-h-line:active,.ct-h-end:active,.ct-h-corner:active,.ct-h-edge:active{cursor:grabbing}
.ct-h:focus-visible{box-shadow:0 0 0 2px var(--lime),0 0 0 6px rgba(212,245,60,.18)}
.ct-h-corner{border-radius:50%;cursor:move}
.ct-h-end{border-radius:50%;cursor:crosshair}

/* lines and handles drawn over the card (lime border, teal edge, amber "Check"); never colour alone: dashed vs solid, tags */
.ct-ov-edge{fill:none;stroke:var(--teal);stroke-width:2}
.ct-ov-edge-under,.ct-ov-quad-under{fill:none;stroke:rgba(10,11,13,.55);stroke-width:4}
.ct-ov-under{stroke:rgba(10,11,13,.5);stroke-width:3.5}
.ct-ov-under.is-sel{stroke-width:5}
.ct-ov-line{stroke:var(--lime);stroke-width:1.5;stroke-dasharray:6 5}
.ct-ov-line.is-sel{stroke-width:2.5;stroke-dasharray:none}
.ct-ov-line.is-check{stroke:var(--amber)}
.ct-ov-knob{fill:rgba(10,11,13,.65);stroke:var(--lime);stroke-width:2}
.ct-ov-knob.is-sel{fill:var(--lime)}
.ct-ov-knob.is-check{stroke:var(--amber)}
.ct-ov-knob.is-check.is-sel{fill:var(--amber)}
.ct-ov-tick{stroke:var(--lime);stroke-width:2.5;stroke-linecap:round}
.ct-ov-tag rect{fill:var(--bg);stroke:var(--amber);stroke-width:1}
.ct-ov-tag text{fill:var(--amber);font:500 11px var(--mono);letter-spacing:.04em}
.ct-ov-quad{fill:rgba(94,224,193,.06);stroke:var(--teal);stroke-width:2}
.ct-ov-quad-sel{stroke:var(--teal);stroke-width:4;stroke-linecap:round}
/* Hollow rings, so the corner itself stays visible inside them (round 1). */
.ct-ov-corner{fill:none;stroke:var(--teal);stroke-width:3}
.ct-ov-corner-under{fill:none;stroke:rgba(10,11,13,.6);stroke-width:6}
.ct-ov-corner.is-sel{stroke:#F3F4F6}
.ct-ov-pill{fill:#F3F4F6;stroke:var(--teal);stroke-width:2}
.ct-ov-pill.is-sel{fill:var(--teal)}
.ct-ov-pill.is-check{stroke:var(--amber)}

.ct-loupe{position:absolute;width:120px;height:120px;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.92);transition:opacity .12s,transform .12s;box-shadow:0 10px 30px rgba(0,0,0,.55)}
.ct-loupe.is-on{opacity:1;transform:none}

.ct-busy{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--text);font-size:15px;text-align:center;background:rgba(10,11,13,.35)}
.ct-busy:focus{outline:none}
/* The result's card is a picture: a tap opens Adjust. */
.ct-tool[data-view="result"] .ct-stage{cursor:zoom-in}
.ct-tool.is-thumb .ct-stage{border-radius:14px}
.ct-spinner{width:28px;height:28px;border-radius:50%;border:2.5px solid var(--line-2);border-top-color:var(--lime);animation:ct-spin .9s linear infinite}
.ct-tool.is-shimmer .ct-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(212,245,60,.10) 50%,transparent 70%);background-size:220% 100%;animation:ct-shimmer 1.6s ease-in-out infinite}
@keyframes ct-spin{to{transform:rotate(360deg)}}
@keyframes ct-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.ct-spinner{animation:none;border-top-color:var(--lime)}.ct-loupe{transition:none}}

.ct-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;width:100%}
.ct-zoom{display:inline-flex;align-items:center;gap:6px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(20,22,25,.6)}
.ct-zoom .ct-icon-btn{width:36px;height:36px;border:0;background:transparent}
.ct-zoom .ct-icon-btn:hover{background:var(--card-2)}
.ct-zoom-v{min-width:34px;font:400 13px/1 var(--mono);color:var(--text-2);text-align:center}
.ct-zoom .is-idle{opacity:.4}
@media (max-width:399px){.ct-zoom-v{display:none}}
.ct-edges-btn .ct-tag{margin-left:2px}
@media (pointer:coarse){.ct-zoom .ct-icon-btn{width:42px;height:42px}.ct-chip-btn{min-height:44px}.ct-rotate{width:44px;height:44px}}

/* ---- the side panel: boxes, the selected line, notes, review ----------------------------------------------------------------- */
.ct-boxes{display:grid;grid-template-columns:1fr 1fr;gap:10px;scroll-margin-top:76px}
.ct-faces{scroll-margin-top:76px}
/* Lines the detector is unsure of, named beside the ratios with one tap into Adjust. */
.ct-checkbar{grid-column:1 / -1;display:flex;align-items:center;gap:6px;padding:6px 4px 6px 12px;border:1px solid rgba(255,181,71,.35);border-radius:14px;background:var(--amber-12)}
.ct-checkbar-t{flex:1 1 0;min-width:0;margin:0;font-size:13px;line-height:1.3;color:var(--amber)}
.ct-checkbar-btn{flex:none;min-height:36px;padding:0 10px;white-space:nowrap;border:0;border-radius:999px;background:transparent;color:var(--text);font:500 14px/1 var(--sans);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-3);cursor:pointer}
@media (pointer:coarse){.ct-checkbar-btn{min-height:44px}}
.ct-box{display:grid;gap:4px;padding:12px 14px 12px;border:1px solid var(--line-3);border-radius:16px;background:var(--bg)}
.ct-box-k{margin:0;font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--text-2)}
.ct-box-v{margin:0;font:500 clamp(24px,7vw,30px)/1.1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ct-box-n{margin:0;min-height:1.4em;font-size:13px;color:var(--text-2)}
.ct-tool.is-abstained .ct-box-v{color:var(--amber)}

.ct-linebar{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 14px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
/* Below 1024 px, docked to the bottom of the screen while the card is on it (design 24; round 1). */
.ct-linebar.is-docked{position:fixed;z-index:26;left:50%;bottom:calc(8px + env(safe-area-inset-bottom));width:min(560px,calc(100% - 24px));transform:translateX(-50%);box-shadow:0 12px 32px rgba(0,0,0,.6);border-color:var(--line-2)}
.ct-linebar-slot{display:block}
/* Undo travels with the bar (docked or not), as its last row. */
.ct-undo{display:flex;flex:1 1 100%;align-items:center;gap:6px;margin:0;font-size:14px;color:var(--text-2)}
.ct-undo .ct-btn-text{min-height:36px;color:var(--text)}
/* The line's name and hint on the first row; the nudges and the bar's actions on the second (round 1: with Re-detect
   and Looks right the bar no longer fits one row at 390 px or in the 380 px panel). */
.ct-linebar{flex-wrap:wrap;row-gap:8px}
/* Done sits in the bar's first row, so it is on screen with the card the whole time the lines are adjusted. */
.ct-linebar-top{display:flex;align-items:center;gap:10px;flex:1 1 100%;min-width:0}
.ct-linebar-t{flex:1 1 auto;min-width:0}
.ct-done{flex:none;padding:0 20px}
.ct-linebar #ct-redetect{margin-left:auto}
.ct-linebar-name{margin:0;font:500 15px/1.25 var(--sans);letter-spacing:-.01em}
.ct-linebar-hint{margin:2px 0 0;font-size:13px;line-height:1.35;color:var(--text-2)}
.ct-nudge{display:flex;gap:6px}
.ct-hint{margin:0;font-size:14px;line-height:1.5;color:var(--text-2)}
.ct-notes{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ct-note{display:flex;align-items:flex-start;gap:8px;padding:10px 6px 10px 14px;border:1px solid rgba(255,181,71,.35);border-radius:14px;background:var(--amber-12)}
.ct-note p{flex:1;margin:0;font-size:14px;line-height:1.45;color:var(--text)}
.ct-note-x{flex:none;width:32px;height:32px;border:0;background:transparent;color:var(--text-2)}
@media (pointer:coarse){.ct-note-x{width:44px;height:44px;margin:-6px -2px -6px 0}}
.ct-review{display:grid;gap:10px}
.ct-review-restart{justify-self:center}
.ct-checks{margin:0;font-size:14px;color:var(--amber)}
.ct-tool[data-mode="edges"] .ct-checks:empty{display:none}

/* ---- problems (4.8 to 4.10) ------------------------------------------------------------------------------------------------- */
.ct-problem{display:grid;gap:14px;margin-top:12px;padding:18px;border:1px solid rgba(255,181,71,.35);border-radius:18px;background:var(--amber-12)}
.ct-problem-t{margin:0;font-size:16px;line-height:1.5}
.ct-problem-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---- the result card (§6) ------------------------------------------------------------------------------------------------- */
.ct-result{display:grid;gap:14px;padding:16px 14px 10px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--card)}
.ct-result-t:focus{outline:none}
.ct-more{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:4px 12px;border-top:1px solid var(--line);padding-top:4px}
.ct-more .ct-details{flex:1 1 60%;border-top:0;padding-top:6px}
.ct-basis-link{color:var(--text-2);text-underline-offset:2px;white-space:nowrap}
.ct-basis-link:hover{color:var(--text)}
/* One compact row per face: both faces at a glance once the back is in. */
.ct-result-faces{display:grid;grid-template-columns:1fr;gap:6px}
.ct-rf{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.ct-rf.is-current{border-color:var(--line-3)}
.ct-rf-k{flex:0 0 3.4em;margin:0;font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.ct-rf-v{margin:0;font:500 14px/1.3 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-rf-none{flex:1 1 10em}
.ct-rf-ax{color:var(--text-2);font-weight:400}
.ct-rf-none{margin:0;font-size:13px;line-height:1.4;color:var(--text-2)}
.ct-details{border-top:1px solid var(--line);padding-top:10px}
.ct-details summary{cursor:pointer;font-size:14px;color:var(--text-2);list-style:none;display:flex;align-items:center;gap:8px;min-height:32px}
.ct-details summary::-webkit-details-marker{display:none}
.ct-details summary::after{content:"";width:8px;height:8px;border:solid var(--text-2);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.ct-details[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.ct-details p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--text-2)}
.ct-estimates{display:grid;gap:10px}
.ct-est-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px}
.ct-est-tags{display:inline-flex;flex-wrap:wrap;gap:6px}
.ct-tag-face{border-color:var(--line-3);color:var(--text)}
/* In the result the most serious note sits under the result card, not between the ratios and the estimates. */
.ct-tool[data-view="result"] .ct-notes{order:2}
.ct-est-t{margin:0;font:500 15px/1.2 var(--sans)}
.ct-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ct-chip{position:relative;display:grid;align-content:start;gap:3px;min-height:92px;padding:12px 12px 12px;border:1px solid var(--line-2);border-radius:16px;background:var(--bg);color:var(--text);text-align:left;cursor:pointer;font-family:var(--sans)}
.ct-chip:hover{border-color:var(--line-3)}
.ct-chip-co{font-size:13px;color:var(--text-2);font-weight:500}
.ct-chip-v{font:500 30px/1.05 var(--sans);letter-spacing:-.02em}
.ct-chip.is-none .ct-chip-v{color:var(--text-3)}
.ct-chip-sub{min-height:1.2em;font-size:12px;line-height:1.3;color:var(--text-2)}
.ct-chip-faces{font-size:12px;line-height:1.3;color:var(--text-3)}
.ct-chip .ct-tag-close{position:absolute;top:10px;right:30px;min-height:18px;padding:0 6px;font-size:10px}
.ct-chip-more{position:absolute;top:12px;right:10px;width:14px;height:14px;fill:none;stroke:var(--text-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-chip:hover .ct-chip-more{stroke:var(--text)}
.ct-chip-unchecked{font-size:12px;line-height:1.3;color:var(--amber)}
.ct-rf-tag{justify-self:start;margin-top:4px;white-space:normal}
.ct-basis{margin:0;font-size:12px;line-height:1.5;color:var(--text-3)}
.ct-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ct-actions .btn-primary,.ct-actions .ct-btn-outline{flex:1 1 140px;padding:0 16px;white-space:nowrap}
.ct-chip.is-face .ct-chip-faces{font:400 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
@media (min-width:600px) and (max-width:1023px){.ct-chips{grid-template-columns:repeat(4,1fr)}}

/* ---- dialogs: a bottom sheet on phones, centred on wide screens --------------------------------------------------------------- */
.ct-sheet{width:min(100%,560px);max-width:100%;max-height:92vh;margin:auto auto 0;padding:0 20px 24px;border:1px solid var(--line-2);border-bottom:0;border-radius:24px 24px 0 0;background:var(--bg-raised);color:var(--text);overflow:auto;overscroll-behavior:contain}
.ct-sheet::backdrop{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@media (min-width:700px){.ct-sheet{margin:auto;border-bottom:1px solid var(--line-2);border-radius:24px;max-height:88vh}}
.ct-sheet-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0 12px;background:var(--bg-raised)}
.ct-sheet-t{margin:0;font:500 20px/1.2 var(--sans);letter-spacing:-.015em}
.ct-sheet-tag{margin-left:6px;vertical-align:3px}
.ct-share-preview{display:grid;place-items:center;padding:12px;border-radius:18px;background:#060708}
.ct-share-preview img{display:block;max-width:100%;max-height:46vh;border-radius:10px}
.ct-formats{display:inline-flex;gap:4px;margin:14px 0 0;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.ct-format{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font:500 14px/1 var(--sans);cursor:pointer}
.ct-format[aria-checked="true"]{background:var(--text);color:var(--bg)}
.ct-share-actions{display:grid;gap:10px;margin-top:16px}
.ct-share-actions .ct-btn-text{justify-self:center}
.ct-share-status{min-height:1.4em;margin:8px 0 0;font-size:14px;color:var(--lime);text-align:center}
.ct-sheet-basis{margin:0;font-size:13px;color:var(--text-2)}
.ct-sheet-est{display:flex;align-items:baseline;gap:14px;margin:12px 0 4px}
.ct-sheet-v{margin:0;font:500 48px/1 var(--sans);letter-spacing:-.03em}
.ct-sheet-cap{margin:0;font-size:15px;line-height:1.4}
.ct-sheet-line{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--text-2)}
.ct-sheet-close{color:var(--amber)}
.ct-sheet-disc{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--text-3)}
.ct-ladder{margin:16px 0 0;padding:12px 12px 6px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.ct-ladder figcaption{font:400 12px/1.3 var(--mono);color:var(--text-2)}
.ct-ladder svg{display:block;width:100%;height:auto;margin-top:4px}
.ct-lad-track{stroke:var(--line-3);stroke-width:2;stroke-linecap:round}
.ct-lad-tick{stroke:var(--text-2);stroke-width:1.5}
.ct-lad-tick.is-mine{stroke:var(--lime);stroke-width:2.5}
.ct-lad-lead{stroke:var(--line-3);stroke-width:1}
.ct-lad-l{fill:var(--text);font:500 11px var(--sans)}
.ct-lad-l.is-mine{fill:var(--lime)}
.ct-lad-p{fill:var(--text-3);font:400 10px var(--mono)}
.ct-lad-m{fill:var(--lime);stroke:var(--bg);stroke-width:2}
.ct-lad-ml{fill:var(--lime);font:500 10px var(--mono)}
.ct-sheet-rows{width:100%;margin:16px 0 0;border-collapse:collapse;font-size:13px}
.ct-sheet-rows th,.ct-sheet-rows td{padding:8px 6px;border-top:1px solid var(--line);text-align:left;vertical-align:top;font-weight:400}
.ct-sheet-rows thead th{border-top:0;font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.ct-sheet-rows tbody th{color:var(--text)}
.ct-sheet-rows td{color:var(--text-2);font-variant-numeric:tabular-nums}
.ct-text-link{display:inline-block;margin-top:14px;color:var(--text);font-size:14px;text-underline-offset:3px}

/* ---- meets / misses ---------------------------------------------------------------------------------------------------------- */
.ct-verdict{display:inline-flex;align-items:center;margin-left:6px;padding:1px 7px;border-radius:999px;font:500 11px/1.5 var(--mono);letter-spacing:.04em;white-space:nowrap}
.ct-verdict.is-meets{background:var(--lime-16);color:var(--lime)}
.ct-verdict.is-misses{background:rgba(243,244,246,.06);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.ct-verdict[hidden]{display:none}

/* ---- the published-standards tables (§7) -------------------------------------------------------------------------------------- */
.ct-standards .section-head{margin-bottom:40px}
.ct-std-co{border-top:1px solid var(--line)}
.ct-std-co:last-child{border-bottom:1px solid var(--line)}
.ct-std-co>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:20px 40px 20px 0;cursor:pointer;list-style:none;position:relative}
.ct-std-co>summary::-webkit-details-marker{display:none}
.ct-std-co>summary::after{content:"+";position:absolute;right:4px;top:18px;font:300 24px/1 var(--mono);color:var(--text-2)}
.ct-std-co[open]>summary::after{content:"–"}
.ct-std-co[open]{padding-bottom:28px}
.ct-std-h{margin:0;font:500 22px/1.2 var(--sans);letter-spacing:-.02em}
.ct-std-sum{font:400 14px/1.4 var(--mono);color:var(--text-2)}
.ct-std-disc{max-width:52em;margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--text-2)}
.ct-std-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--bg-raised)}
.ct-std-scroll:focus-visible{outline-offset:2px}
.ct-std{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}
.ct-std caption{padding:12px 16px 6px;text-align:left;font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.ct-std th,.ct-std td{padding:10px 16px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.ct-std thead th{border-top:0;font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.ct-std tbody th{font-weight:500;color:var(--text);white-space:nowrap}
.ct-fig-v{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
.ct-fig-none .ct-fig-v{font-family:var(--sans);color:var(--text-2)}
.ct-std-gap th{color:var(--text-2)!important}
.ct-approx{margin-right:2px;color:var(--text-2)}
.ct-fig-note{display:block;margin-top:2px;font-size:12px;color:var(--text-3)}
.ct-noteref{margin-left:2px;font:400 11px var(--mono);color:var(--lime);vertical-align:super;text-decoration:none}
.ct-std-notes{margin:10px 0 0;padding-left:20px;font-size:13px;line-height:1.5;color:var(--text-2)}
.ct-src{display:block;color:var(--text-2);font-size:13px;line-height:1.5;text-underline-offset:2px;overflow-wrap:anywhere}
.ct-src:hover{color:var(--text)}
.ct-src-full{display:none}
@media (min-width:1024px){.ct-src-full{display:inline}.ct-src-short{display:none}}
.ct-std-pending{padding:20px 0}
.ct-std-pending .ct-std-h{margin-bottom:8px}
.ct-std-pending .ct-std-disc{margin:0}

/* ---- how it works ---------------------------------------------------------------------------------------------------------- */
.ct-how-grid{display:grid;gap:40px}
@media (min-width:900px){.ct-how-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:40px}}
.ct-example{margin:0;padding:24px;border-radius:var(--radius);background:var(--card);display:grid;justify-items:center;gap:12px;max-width:420px}
.ct-example svg{width:100%;max-width:260px;height:auto}
.ct-ex-edge{fill:none;stroke:#F3F4F6;stroke-width:2.5}
.ct-ex-border{fill:none;stroke:var(--lime);stroke-width:2;stroke-dasharray:5 4}
.ct-ex-gap{stroke:var(--teal);stroke-width:2}
.ct-ex-label{fill:var(--teal);font:500 15px var(--mono)}
.ct-ex-sum{padding:10px 16px;border-radius:12px;background:var(--bg);font:400 16px var(--mono);color:var(--text)}
.ct-ex-sum strong{font-weight:500;color:var(--lime)}
.ct-how-text .h3{margin-top:28px}
.ct-how-text .h3:first-child{margin-top:0}
.ct-tips-list{margin:12px 0 0;padding-left:20px;color:var(--text-2)}
.ct-tips-list li{margin:6px 0}
.ct-method{margin:28px 0 0;font:400 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--text-3)}

/* ---- questions ------------------------------------------------------------------------------------------------------------- */
.ct-faq-list{display:grid;border-top:1px solid var(--line)}
@media (min-width:900px){.ct-faq-list{margin-left:calc(33.333% + 13px)}}
.ct-q{border-bottom:1px solid var(--line)}
.ct-q summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;cursor:pointer;list-style:none;font:500 17px/1.35 var(--sans);letter-spacing:-.01em}
.ct-q summary::-webkit-details-marker{display:none}
.ct-q summary::after{content:"+";flex:none;font:300 22px/1 var(--mono);color:var(--text-2)}
.ct-q[open] summary::after{content:"–"}
.ct-q .body{margin:0 0 18px;max-width:46em}
.ct-q a{color:var(--text);text-underline-offset:3px}

/* ---- waitlist placement, the drop overlay and the phone's sticky bar --------------------------------------------------------- */
.ct-waitlist .index span:first-child{color:var(--lime)}
/* Moved under the result, out of the numbered sections: no "04" (round 1). */
.ct-waitlist.is-moved .index{display:none}
.ct-rule{margin-top:12px;font-size:14px;color:var(--text-3)}
.ct-dropzone{position:fixed;inset:12px;z-index:50;display:grid;place-items:center;border:2px dashed var(--lime);border-radius:28px;background:rgba(10,11,13,.86);pointer-events:none}
.ct-dropzone p{margin:0;font:500 clamp(22px,4vw,36px)/1.2 var(--sans);letter-spacing:-.02em}
.ct-dropzone[hidden]{display:none}
.ct-sticky{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;background:var(--lime);color:var(--bg);font:500 16px/1 var(--sans);text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.ct-sticky[hidden]{display:none}
@media (min-width:700px){.ct-sticky{display:none}}
[data-waitlist="closed"] .ct-sticky,[data-waitlist="joined"] .ct-sticky{display:none}

/* ---- reduced motion, forced colours, narrow screens ------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){.ct-tool.is-shimmer .ct-stage::after{animation:none;opacity:0}}
@media (forced-colors:active){
  .ct-ov-line,.ct-ov-tick,.ct-ov-knob{stroke:CanvasText}
  .ct-ov-line.is-sel,.ct-ov-knob.is-sel{stroke:Highlight}
  .ct-ov-edge,.ct-ov-quad,.ct-ov-corner,.ct-ov-pill{stroke:Highlight}
  .ct-h:focus-visible{outline:2px solid Highlight}
}
@media (max-width:359px){.ct-boxes{grid-template-columns:1fr}.ct-result-faces,.ct-chips{grid-template-columns:1fr}.ct-linebar{flex-wrap:wrap}}