/* DV Photo — site styles (checker page and guides).
   World: a print proof. Paper ground, graphite ink, a neutral gray card for the
   photo, non-photo blue for every guide mark (marks that never enter the photo). */

:root{
  color-scheme: light;

  --paper:    oklch(0.985 0.003 250);
  --paper-2:  oklch(0.962 0.006 250);
  --paper-3:  oklch(0.935 0.008 250);
  --ink:      oklch(0.22 0.018 255);
  --ink-2:    oklch(0.42 0.018 255);
  --ink-3:    oklch(0.53 0.014 255);
  --rule:     oklch(0.885 0.008 255);
  --rule-2:   oklch(0.80 0.010 255);

  --stage:      oklch(0.47 0.006 250);
  --stage-2:    oklch(0.43 0.006 250);
  --on-stage:   oklch(0.975 0.004 250);
  --on-stage-2: oklch(0.89 0.006 250);
  --photo-paper: oklch(0.992 0.002 90);
  --tpl-fill:    oklch(0.82 0.006 250);
  --photo-shadow: 0 1px 2px oklch(0.15 0.01 250 / .28), 0 10px 28px oklch(0.15 0.01 250 / .22);

  --guide:      oklch(0.84 0.10 222);
  --guide-ink:  oklch(0.50 0.13 243);
  --guide-wash: oklch(0.80 0.10 222 / .20);

  --action:       oklch(0.50 0.17 250);
  --action-hover: oklch(0.44 0.16 252);
  --on-action:    oklch(0.99 0.003 250);
  --action-glow:  oklch(0.50 0.17 250 / .35);

  --pass:        oklch(0.50 0.12 152);
  --pass-strong: oklch(0.40 0.10 152);
  --pass-wash:   oklch(0.958 0.032 152);
  --pass-edge:   oklch(0.86 0.06 152);
  --warn:        oklch(0.50 0.11 62);
  --warn-strong: oklch(0.42 0.10 60);
  --warn-mark:   oklch(0.77 0.15 76);
  --warn-wash:   oklch(0.965 0.040 88);
  --warn-edge:   oklch(0.87 0.08 82);
  --fail:        oklch(0.53 0.18 27);
  --fail-strong: oklch(0.44 0.16 27);
  --fail-wash:   oklch(0.962 0.024 25);
  --fail-edge:   oklch(0.87 0.06 25);

  --pass-on-stage: oklch(0.88 0.13 150);
  --warn-on-stage: oklch(0.88 0.13 86);
  --fail-on-stage: oklch(0.84 0.10 25);

  --focus:  oklch(0.55 0.15 243);
  --select: oklch(0.86 0.08 222 / .55);

  --font-ui: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-measure: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r1: 3px; --r2: 6px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

:root.dark{
  color-scheme: dark;
  --paper:    oklch(0.195 0.012 255);
  --paper-2:  oklch(0.232 0.013 255);
  --paper-3:  oklch(0.27 0.014 255);
  --ink:      oklch(0.95 0.006 255);
  --ink-2:    oklch(0.80 0.010 255);
  --ink-3:    oklch(0.69 0.012 255);
  --rule:     oklch(0.32 0.014 255);
  --rule-2:   oklch(0.42 0.014 255);
  --stage:      oklch(0.39 0.005 250);
  --stage-2:    oklch(0.35 0.005 250);
  --photo-paper: oklch(0.93 0.002 90);
  --tpl-fill:    oklch(0.74 0.006 250);
  --photo-shadow: 0 1px 2px oklch(0 0 0 / .4), 0 12px 30px oklch(0 0 0 / .35);
  --guide-ink:  oklch(0.52 0.13 243);
  --action:       oklch(0.72 0.13 235);
  --action-hover: oklch(0.78 0.11 232);
  --on-action:  oklch(0.18 0.02 255);
  --action-glow:  oklch(0.72 0.13 235 / .30);
  --pass:        oklch(0.78 0.13 152);
  --pass-strong: oklch(0.86 0.10 152);
  --pass-wash:   oklch(0.27 0.035 152);
  --pass-edge:   oklch(0.40 0.06 152);
  --warn:        oklch(0.84 0.12 82);
  --warn-strong: oklch(0.89 0.10 86);
  --warn-mark:   oklch(0.80 0.14 78);
  --warn-wash:   oklch(0.28 0.035 80);
  --warn-edge:   oklch(0.42 0.06 80);
  --fail:        oklch(0.76 0.13 25);
  --fail-strong: oklch(0.84 0.10 25);
  --fail-wash:   oklch(0.27 0.045 25);
  --fail-edge:   oklch(0.42 0.08 25);
  --focus:  oklch(0.78 0.12 232);
  --select: oklch(0.55 0.12 240 / .5);
}

/* Script faces join the stack only where the page language needs them, so an
   English or Russian page never downloads Arabic, Devanagari or Ethiopic files. */
:lang(ar),:lang(fa){--font-ui:"Vazirmatn", "Geologica", system-ui, sans-serif;font-family:var(--font-ui)}
:lang(ne){--font-ui:"Geologica", "Noto Sans Devanagari", system-ui, sans-serif;font-family:var(--font-ui)}
:lang(am){--font-ui:"Geologica", "Noto Sans Ethiopic", system-ui, sans-serif;font-family:var(--font-ui)}
/* The language menu names each language in its own script, and a select measures
   every option to size itself. A system face draws those names, so the closed menu
   never downloads the Arabic, Cyrillic or other script files for a hidden word. */
#langSelect option{font-family:system-ui,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-color:var(--rule-2) var(--paper);accent-color:var(--ink)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:1rem;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--select);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
a{color:inherit;text-decoration-line:underline;text-decoration-color:var(--rule-2);text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .18s var(--ease)}
a:hover{text-decoration-color:currentColor}
img,svg{display:block;max-width:100%}
button,select,input{font:inherit;color:inherit}
input,textarea{caret-color:var(--focus)}
h1,h2,h3,h4{margin:0;font-weight:640;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.num{font-family:var(--font-measure);font-stretch:87.5%;font-variant-numeric:tabular-nums;letter-spacing:0}
.wrap{width:min(100% - 2 * var(--gutter), var(--max));margin-inline:auto}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .icon.flip{transform:scaleX(-1)}
[hidden]{display:none!important}

.skip{position:absolute;inset-inline-start:var(--s4);top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:var(--r1);text-decoration:none}
.skip:focus{top:var(--s3)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border-radius:var(--r1);border:1px solid transparent;font-weight:600;font-size:1rem;line-height:1.2;cursor:pointer;text-decoration:none;background:transparent;transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .12s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--action);color:var(--on-action)}
.btn-primary:hover{background:var(--action-hover)}
.btn-secondary{border-color:var(--rule-2);color:var(--ink)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-quiet{color:var(--ink-2);padding-inline:12px}
.btn-quiet:hover{color:var(--ink);background:var(--paper-2)}
.btn-lg{min-height:56px;padding:0 28px;font-size:1.0625rem}
.btn-xl{min-height:60px;padding:0 32px;font-size:1.125rem;font-weight:640;gap:12px;box-shadow:0 1px 2px oklch(0.25 0.05 250 / .25),0 10px 24px -8px var(--action-glow)}
.btn-xl .icon{width:22px;height:22px}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex;align-items:center;gap:var(--s5);min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:660;font-size:1.0625rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink);min-height:44px}
.brand svg{width:32px;height:32px;flex:none}
.nav{display:flex;gap:var(--s5);margin-inline-start:auto}
.nav a{font-size:.9375rem;color:var(--ink-2);text-decoration:none;padding:12px 2px}
.nav a:hover{color:var(--ink)}
.head-tools{display:flex;align-items:center;gap:var(--s2)}
.lang{position:relative;display:flex;align-items:center}
.lang .icon{position:absolute;inset-inline-start:11px;width:18px;height:18px;color:var(--ink-3);pointer-events:none}
.lang select{appearance:none;-webkit-appearance:none;min-height:44px;padding-block:0;padding-inline:36px 32px;border:1px solid var(--rule);border-radius:var(--r1);background:transparent;font-size:.9375rem;cursor:pointer;max-width:11.5rem}
.lang::after{content:"";position:absolute;inset-inline-end:13px;width:7px;height:7px;border-inline-end:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:translateY(-2px) rotate(45deg);pointer-events:none}
.lang select:hover{border-color:var(--rule-2)}
.icon-btn{inline-size:44px;block-size:44px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:var(--r1);background:transparent;cursor:pointer;color:var(--ink-2)}
.icon-btn:hover{border-color:var(--rule-2);color:var(--ink)}
.icon-btn .i-sun{display:none}
:root.dark .icon-btn .i-sun{display:block}
:root.dark .icon-btn .i-moon{display:none}
.head-cta{display:none;min-height:44px;padding:0 16px;font-size:.9375rem;gap:8px}
.head-cta .icon{width:18px;height:18px}
@media (min-width:1000px){:root[data-cta] .head-cta{display:inline-flex}}
@media (max-width:820px){.nav{display:none}.head-tools{margin-inline-start:auto}}
/* Phones: the name stays on one line. The picker drops its globe and the gap
   tightens, so the name, the picker and the theme button share a row at 360px.
   Below that only the mark stays; the link keeps its accessible name. */
.site-head .brand{white-space:nowrap}
@media (max-width:420px){.site-head .wrap{gap:var(--s3)}.lang .icon{display:none}.lang select{padding-inline:12px 30px}}
@media (max-width:359px){.site-head .brand span{display:none}}
.float-cta{position:fixed;z-index:40;inset-inline:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:none;justify-content:center;pointer-events:none}
.float-cta .btn{pointer-events:auto;min-height:56px;padding:0 28px;box-shadow:0 2px 6px oklch(0.2 0.03 250 / .25),0 14px 32px -10px oklch(0.2 0.05 250 / .45)}
@media (max-width:999px){:root[data-cta] .float-cta{display:flex}}
@media (max-width:380px){.lang select{max-width:8.5rem}}

/* ---------- Tool (first viewport) ---------- */
.tool{padding-block:clamp(24px,5vw,64px) clamp(56px,8vw,112px)}
.tool > .wrap{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"lead" "side" "rest";row-gap:var(--s6)}
.lead{grid-area:lead}
.rest{grid-area:rest;display:grid;gap:var(--s6);align-content:start}
/* The answers form and the score open .rest (see the page). Hidden blocks leave no gap. */
.rest > .declare,.rest > .qscore{margin-top:0}
.side{grid-area:side;display:grid;gap:var(--s5);align-content:start}
@media (min-width:1000px){
  .tool > .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"lead side" "rest side";grid-template-rows:auto 1fr;column-gap:clamp(40px,5vw,80px);row-gap:var(--s7);align-items:start}
  .tool[data-mode="result"] .side{position:sticky;top:88px}
  /* The form under the verdict belongs to it: a normal gap, not a section gap. */
  .tool[data-mode="result"] > .wrap{row-gap:var(--s5)}
}

.tool[data-mode="intro"] [data-when]:not([data-when~="intro"]),
.tool[data-mode="result"] [data-when]:not([data-when~="result"]){display:none}

.lead h1{font-size:clamp(2.25rem,1.5rem + 2.3vw,3.375rem);line-height:1.04;letter-spacing:-.03em;font-weight:680;font-variation-settings:"SHRP" 32;max-width:15ch}
.lede{margin-top:var(--s5);font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.55;color:var(--ink-2);max-width:44ch}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s6)}
.cta-note{font-size:.875rem;color:var(--ink-3)}

.notice{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:var(--s3);row-gap:6px;align-items:start;padding:var(--s5);border-radius:var(--r2);background:var(--warn-wash);border:1px solid var(--warn-edge);line-height:1.5}
.notice .icon{width:22px;height:22px;grid-column:1}
.notice .notice-icon{color:var(--warn)}
.notice .promise-icon{color:var(--pass)}
.notice strong{grid-column:2;color:var(--warn-strong);font-weight:640;font-size:1rem;line-height:22px}
.notice p{grid-column:2;margin:0;color:var(--ink-2);font-size:.9375rem;text-align:start}
.notice .notice-rule{grid-column:1 / -1;height:0;margin:8px 0 6px;border:0;border-top:1px solid var(--warn-edge)}
.notice .notice-promise{color:var(--ink)}
.notice .notice-promise b{font-weight:640}
.alert{display:grid;grid-template-columns:24px 1fr;gap:var(--s3);margin-top:var(--s5);padding:var(--s4) var(--s5);border-radius:var(--r2);background:var(--fail-wash);border:1px solid var(--fail-edge);max-width:52ch}
.alert .icon{color:var(--fail);width:22px;height:22px;margin-top:2px}
.alert strong{display:block;color:var(--fail-strong);font-weight:640}
.alert p{color:var(--ink-2);margin-top:2px;font-size:.9375rem}

.promises{list-style:none;border-top:1px solid var(--rule)}
.promises li{display:grid;grid-template-columns:24px 1fr;gap:var(--s4);padding-block:var(--s4);border-bottom:1px solid var(--rule)}
.promises .icon{color:var(--guide-ink);margin-top:2px}
.promises strong{display:block;font-weight:620}
.promises span{display:block;color:var(--ink-2);font-size:.9375rem;margin-top:2px;max-width:52ch}

/* ---------- Stage: the gray card that holds the photo ---------- */
.stage{--pad:16px;--fh:420px;--top:14%;--chin:74%;--eye:41%;--ar:1;
  container:stage / inline-size;background:var(--stage);color:var(--on-stage);border-radius:var(--r2);position:relative;overflow:hidden}
.stage-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;padding:var(--s2) var(--pad)}
.stage-title{font-size:.875rem;color:var(--on-stage-2);display:flex;align-items:center;gap:var(--s2)}
.regmark{width:18px;height:18px;color:var(--on-stage-2);opacity:.75}
.stage-tools{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
/* One "New Photo" action: the one under the verdict opens the picker at once. The
   older reset button stays in the page for its script, out of sight. */
#newPhotoBtn{display:none!important}
.stage-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:var(--r1);border:1px solid oklch(0.97 0 0 / .32);background:transparent;color:var(--on-stage);font-size:.875rem;font-weight:560;cursor:pointer}
.stage-btn:hover{background:oklch(1 0 0 / .08);border-color:oklch(0.97 0 0 / .55)}
.stage-btn[aria-pressed="true"]{background:var(--on-stage);color:var(--stage-2);border-color:var(--on-stage)}
.stage-btn .icon{width:18px;height:18px}
.stage :focus-visible{outline-color:var(--guide)}

.switch{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding-inline:4px;font-size:.875rem;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch-track{width:32px;height:18px;border-radius:9px;background:oklch(1 0 0 / .22);position:relative;transition:background-color .18s var(--ease)}
.switch-track::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:14px;height:14px;border-radius:50%;background:var(--on-stage);transition:transform .22s var(--ease)}
.switch input:checked + .switch-track{background:var(--guide-ink)}
.switch input:checked + .switch-track::after{transform:translateX(14px)}
[dir="rtl"] .switch input:checked + .switch-track::after{transform:translateX(-14px)}
.switch input:focus-visible + .switch-track{outline:2px solid var(--guide);outline-offset:2px}

.board{--m:30px;--gap:10px;display:grid;grid-template-columns:var(--m) auto var(--m);grid-template-rows:auto auto;column-gap:var(--gap);justify-content:center;padding:var(--s3) var(--pad) 0}
@container stage (min-width:600px){
  .board{--m:116px;--gap:12px}
}
@container stage (max-width:420px){
  .board{--m:22px;--gap:8px;padding-inline:12px}
  .readouts{margin-inline:12px}
}

.frame-wrap{position:relative;grid-column:2;grid-row:1}
.frame{position:relative;display:block;width:min(calc(100cqi - 2 * var(--m) - 2 * var(--gap) - 2 * var(--pad) - 4px), calc(var(--fh) * var(--ar)));aspect-ratio:var(--ar);background:var(--photo-paper);box-shadow:var(--photo-shadow);overflow:hidden;touch-action:none;transition:outline-color .18s var(--ease)}
.frame-media,.frame-media > svg,.frame-media > img{position:absolute;inset:0;width:100%;height:100%}
.frame-media > img{object-fit:contain;background:var(--stage-2)}
.tool[data-mode="intro"] .frame{cursor:pointer;outline:2px dashed var(--guide);outline-offset:7px;transition:outline-color .2s var(--ease),outline-offset .3s var(--ease)}
.tool[data-mode="intro"] .frame:hover{outline-style:solid}
.frame.is-over{outline:3px solid var(--guide)!important;outline-offset:4px!important}
.frame.is-over .frame-media{opacity:.35}
.frame-cue{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 20px);padding-block:6px;padding-inline:6px 16px;border-radius:999px;background:var(--photo-paper);border:1px solid oklch(0.22 0.018 255 / .12);box-shadow:0 2px 4px oklch(0.2 0.02 250 / .10),0 10px 24px -10px oklch(0.2 0.03 250 / .35);pointer-events:none;transition:transform .3s var(--ease)}
.cue-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--action);color:var(--on-action)}
.cue-icon .icon{width:18px;height:18px}
.cue-text{display:flex;flex-direction:column;min-width:0;text-align:start;line-height:1.2}
.tool[data-mode="intro"] .frame:hover .frame-cue,.frame.is-over .frame-cue{transform:translateX(-50%) translateY(-3px)}
.cue-main{font-size:.9375rem;font-weight:650;color:oklch(0.22 0.018 255)}
.cue-sub{font-size:.8125rem;color:oklch(0.42 0.018 255)}
.cue-release,.cue-coarse{display:none}
.frame.is-over .cue-drop,.frame.is-over .cue-sub{display:none}
.frame.is-over .cue-release{display:block}
@media (pointer:coarse){.cue-drop,.cue-fine{display:none}.cue-coarse{display:block}}
@container stage (max-width:420px){.frame-cue{bottom:3%;padding-block:4px;padding-inline:4px 12px;gap:8px}.cue-icon{width:30px;height:30px}.cue-main{font-size:.875rem}.cue-sub{font-size:.75rem}}
.frame.is-error{outline:2px dashed var(--fail-on-stage);outline-offset:6px}

.schematic .figure{fill:var(--tpl-fill)}

/* crop marks around the sheet, drawn on the gray card like a print proof */
.cm{position:absolute;width:16px;height:16px;border-color:var(--on-stage);border-style:solid;border-width:0;opacity:.9;transition:transform .5s var(--ease),opacity .3s var(--ease)}
.cm-tl{left:-24px;top:-24px;border-right-width:1px;border-bottom-width:1px}
.cm-tr{right:-24px;top:-24px;border-left-width:1px;border-bottom-width:1px}
.cm-bl{left:-24px;bottom:-24px;border-right-width:1px;border-top-width:1px}
.cm-br{right:-24px;bottom:-24px;border-left-width:1px;border-top-width:1px}
.frame-wrap.is-over .cm-tl{transform:translate(6px,6px)}
.frame-wrap.is-over .cm-tr{transform:translate(-6px,6px)}
.frame-wrap.is-over .cm-bl{transform:translate(6px,-6px)}
.frame-wrap.is-over .cm-br{transform:translate(-6px,-6px)}
.stage.has-crop .cm{opacity:0}
@container stage (max-width:420px){.cm{display:none}}

/* guide lines inside the photo */
.eye-band{position:absolute;inset-inline:0;top:31%;height:13%;background:var(--guide-wash);border-block:1px dotted oklch(0.55 0.12 240 / .55);pointer-events:none}
.gline{position:absolute;inset-inline:0;top:var(--y);height:0;border-top:1px dashed var(--guide-ink);filter:drop-shadow(0 1px 0 oklch(1 0 0 / .55));transform-origin:left center}
[dir="rtl"] .gline{transform-origin:right center}
.gl-top{--y:var(--top)} .gl-eye{--y:var(--eye)} .gl-chin{--y:var(--chin)}
.gl-eye{border-top-style:solid}
.knob{position:absolute;inset-inline-end:10px;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--guide-ink);display:none;cursor:grab;touch-action:none}
.knob::before{content:"";position:absolute;inset:-14px}
.knob:focus-visible{outline:2px solid var(--guide-ink);outline-offset:2px}
.stage.is-adjusting .knob{display:block}
.stage.is-adjusting .gline{border-top-width:2px}
.stage.guides-off .gline,.stage.guides-off .eye-band,.stage.guides-off .ann,.stage.guides-off .cropbox{visibility:hidden}

.cropbox{position:absolute;left:var(--crop-x);top:var(--crop-y);width:var(--crop-w);height:var(--crop-h);outline:1px dashed oklch(1 0 0 / .95);box-shadow:0 0 0 100vmax oklch(0.2 0.01 250 / .46);display:none;pointer-events:none}
.stage.has-crop .cropbox{display:block}
.cropbox i{position:absolute;width:14px;height:14px;border:0 solid var(--on-stage)}
.cropbox .c1{left:-7px;top:-7px;border-left-width:2px;border-top-width:2px}
.cropbox .c2{right:-7px;top:-7px;border-right-width:2px;border-top-width:2px}
.cropbox .c3{left:-7px;bottom:-7px;border-left-width:2px;border-bottom-width:2px}
.cropbox .c4{right:-7px;bottom:-7px;border-right-width:2px;border-bottom-width:2px}
.crop-tag{position:absolute;left:0;bottom:calc(100% + 6px);font-size:.75rem;padding:3px 7px;border-radius:2px;background:oklch(0.2 0.01 250 / .78);color:oklch(0.97 0 0);white-space:nowrap}

/* dimension annotations in the margins */
.ann{position:relative;grid-row:1;min-height:100%}
.ann-head{grid-column:1}
.ann-eye{grid-column:3}
.bracket{position:absolute;top:var(--top);bottom:calc(100% - var(--chin));inset-inline-end:6px;width:0;border-inline-end:1px solid var(--guide);transform-origin:center}
.band{position:absolute;top:31%;height:13%;inset-inline-start:6px;width:8px;border:1px solid var(--guide);border-inline-end:0;background:oklch(0.84 0.10 222 / .16);transform-origin:center}
.tick{position:absolute;height:0;border-top:1px solid var(--guide);width:calc(var(--gap) + 2px)}
.bracket .tick{inset-inline-start:-6px;width:calc(var(--gap) + 6px - 3px)}
.bracket .t1{top:0} .bracket .t2{bottom:0}
.eye-marker{position:absolute;top:var(--eye);inset-inline-start:-3px;width:0;height:0;margin-top:-5px;border-block:5px solid transparent;border-inline-end:7px solid var(--on-stage)}
.ann-label{display:none;position:absolute;top:calc((var(--top) + var(--chin)) / 2);transform:translateY(-50%);inset-inline-end:22px;inset-inline-start:0;text-align:end;line-height:1.25}
.ann-eye .ann-label{top:37.5%;inset-inline-start:24px;inset-inline-end:0;text-align:start}
@container stage (min-width:600px){.ann-label{display:block}}
.ann-name{display:block;font-size:.8125rem;color:var(--on-stage-2)}
.ann-reading{display:none;align-items:center;gap:6px;justify-content:flex-end;margin-top:2px}
.ann-eye .ann-reading{justify-content:flex-start}
.ann-value{font-size:1.25rem;font-weight:500;color:var(--on-stage)}
.ann-rule{display:block;font-size:1.0625rem;color:var(--on-stage);margin-top:2px}
.ann-sub{display:block;font-size:.75rem;color:var(--on-stage-2);margin-top:1px}
.tool[data-mode="result"] .ann-reading{display:flex}
.tool[data-mode="result"] .ann-rule{font-size:.75rem;color:var(--on-stage-2)}
.tool[data-mode="intro"] .ann-rule [data-i18n="rule_word"]{display:none}

.dim-x{grid-column:2;grid-row:2;display:flex;align-items:center;gap:10px;height:14px;margin-top:18px;border-inline:1px solid var(--guide);font-size:.75rem;color:var(--on-stage-2)}
.dim-x::before,.dim-x::after{content:"";flex:1;height:0;border-top:1px solid var(--guide)}


.readouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin:var(--s5) var(--pad) 0;padding-top:var(--s3);border-top:1px solid oklch(1 0 0 / .16)}
@container stage (min-width:600px){.readouts{display:none}}
.readouts div{min-width:0}
.readouts dt{font-size:.75rem;color:var(--on-stage-2)}
.readouts dd{margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 5px;font-size:.9375rem;color:var(--on-stage);min-width:0}
.readouts dd .num{min-width:0;overflow-wrap:anywhere}
@container stage (max-width:420px){.readouts dd{font-size:.8125rem}}
.readouts .rule{display:block;font-size:.6875rem;color:var(--on-stage-2);margin-top:1px}
.readouts .glyph{--gs:15px}

.slug{display:flex;justify-content:space-between;gap:var(--s3);margin-top:var(--s5);padding:10px var(--pad);background:var(--stage-2);font-size:.75rem;color:var(--on-stage-2);min-height:40px;align-items:center}
.slug span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.slug span:last-child{flex:none}

.busy-bar{position:absolute;inset-inline:0;top:0;height:2px;overflow:hidden;display:none}
.stage.is-busy .busy-bar{display:block}
.stage.is-busy .stage-tools{visibility:hidden}
.busy-bar::after{content:"";position:absolute;top:0;bottom:0;width:30%;background:var(--guide);animation:busy 1.3s var(--ease) infinite}
@keyframes busy{from{transform:translateX(-100%)}to{transform:translateX(340%)}}

/* the drafting moment: guides draw themselves when a result lands */
.stage.will-draw .gline{transform:scaleX(0)}
.stage.will-draw .bracket,.stage.will-draw .band{transform:scaleY(0)}
.stage.will-draw .cropbox,.stage.will-draw .ann-label,.stage.will-draw .eye-marker,.stage.will-draw .eye-band{opacity:0}
.stage.will-draw .cropbox{transform:scale(1.06)}
.stage.is-drawn .gline{transform:scaleX(1);transition:transform .7s var(--ease)}
.stage.is-drawn .gl-eye{transition-delay:.08s}
.stage.is-drawn .gl-chin{transition-delay:.16s}
.stage.is-drawn .eye-band{opacity:1;transition:opacity .5s var(--ease) .2s}
.stage.is-drawn .bracket{transform:scaleY(1);transition:transform .7s var(--ease) .22s}
.stage.is-drawn .band{transform:scaleY(1);transition:transform .7s var(--ease) .3s}
.stage.is-drawn .eye-marker{opacity:1;transition:opacity .4s var(--ease) .5s}
.stage.is-drawn .cropbox{opacity:1;transform:scale(1);transition:opacity .45s var(--ease) .55s,transform .7s var(--ease) .55s}
.stage.is-drawn .ann-label{opacity:1;transition:opacity .5s var(--ease) .6s}

/* ---------- Result panel ---------- */
.panel{container:panel / inline-size}
.panel-enter{animation:enter .42s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.glyph{display:inline-flex;flex:none;width:var(--gs,20px);height:var(--gs,20px)}
.glyph svg{width:100%;height:100%}
.g-pass{color:var(--pass)}
.g-warn{color:var(--warn-mark);--glyph-on:oklch(0.26 0.04 70)}
.g-fail{color:var(--fail);--glyph-on:oklch(0.99 0 0)}
.g-manual{color:var(--ink-3)}
:root.dark .g-fail{--glyph-on:oklch(0.2 0.03 25)}
.stage .g-pass{color:var(--pass-on-stage)}
.stage .g-warn{color:var(--warn-on-stage)}
.stage .g-fail{color:var(--fail-on-stage);--glyph-on:oklch(0.3 0.05 25)}

.verdict{padding:var(--s5);border-radius:var(--r2);background:var(--v-wash);border:1px solid var(--v-edge)}
.verdict[data-tone="fail"]{--v-wash:var(--fail-wash);--v-edge:var(--fail-edge);--v-strong:var(--fail-strong)}
.verdict[data-tone="warn"]{--v-wash:var(--warn-wash);--v-edge:var(--warn-edge);--v-strong:var(--warn-strong)}
.verdict[data-tone="pass"]{--v-wash:var(--pass-wash);--v-edge:var(--pass-edge);--v-strong:var(--pass-strong)}
.verdict[data-tone="busy"]{--v-wash:var(--paper-2);--v-edge:var(--rule);--v-strong:var(--ink)}
.verdict h2{display:flex;align-items:flex-start;gap:var(--s3);font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);line-height:1.18;letter-spacing:-.015em;color:var(--v-strong);font-weight:660;font-variation-settings:"SHRP" 24}
.verdict h2 .glyph{--gs:28px;margin-top:1px}
.verdict p{margin-top:var(--s2);color:var(--ink-2);max-width:52ch;padding-inline-start:40px}
.verdict .progress{margin-top:var(--s4);margin-inline-start:40px;height:2px;background:var(--rule);overflow:hidden;position:relative}
.verdict .progress::after{content:"";position:absolute;inset-block:0;width:30%;background:var(--guide-ink);animation:busy 1.3s var(--ease) infinite}
.spinner{width:24px;height:24px;flex:none;margin:3px 2px 0;border-radius:50%;border:2px solid var(--rule-2);border-top-color:var(--ink);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.next{margin-top:var(--s5);display:grid;gap:var(--s3)}
.fine{font-size:.875rem;color:var(--ink-2);max-width:60ch}
.fine strong{color:var(--ink);font-weight:600}
.score{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule);font-size:.875rem;color:var(--ink-3)}
.score b{font-weight:500;color:var(--ink)}

.retake{margin-top:var(--s5);padding:var(--s5);border:1px solid var(--rule);border-radius:var(--r2)}
.retake h3{font-size:1.0625rem;font-weight:630}
.retake ul{margin-top:var(--s3);list-style:none;display:grid;gap:var(--s2)}
.retake li{display:grid;grid-template-columns:20px 1fr;gap:var(--s3);color:var(--ink-2)}
.retake li .icon{width:18px;height:18px;color:var(--guide-ink);margin-top:3px}
.retake .warn-line{display:grid;grid-template-columns:20px 1fr;gap:var(--s3);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule);font-size:.9375rem;color:var(--ink-2)}
.retake .warn-line .icon{width:18px;height:18px;color:var(--warn);margin-top:3px}
.retake .warn-line b{color:var(--ink);font-weight:600}
.retake a{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s4);font-weight:560}
.retake a .icon{width:18px;height:18px}

.declare{margin-top:var(--s5);padding:var(--s5);border:1px solid var(--rule);border-radius:var(--r2)}
.declare > h3{font-size:1.0625rem;font-weight:630}
.declare > p{margin-top:4px;font-size:.875rem;color:var(--ink-2)}
.declare fieldset{border:0;margin:var(--s5) 0 0;padding:0;min-width:0}
.declare legend{padding:0;font-weight:600;font-size:.9375rem;margin-bottom:var(--s2)}
.declare .flag{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:.8125rem;color:var(--warn);margin-inline-start:8px}
.opts{display:grid;gap:6px}
.opt{display:grid;grid-template-columns:20px 1fr;gap:var(--s3);align-items:start;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r1);cursor:pointer;transition:border-color .18s var(--ease),background-color .18s var(--ease)}
.opt:hover{border-color:var(--rule-2)}
.opt:has(input:checked){border-color:var(--ink);background:var(--paper-2)}
.opt input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:2px 0 0;border-radius:50%;border:1.5px solid var(--ink-3);background:var(--paper);cursor:pointer}
.opt input:checked{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 3.5px var(--paper)}
.opt input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.declare-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s5)}
.declare-foot a{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;color:var(--ink-2)}
.declare-foot a .icon{width:16px;height:16px}

.checks{margin-top:0}
.checks-head h2{font-size:1.25rem;font-weight:640;letter-spacing:-.01em}
.checks-head p{margin-top:4px;font-size:.875rem;color:var(--ink-3)}
.checks-head p b{font-weight:500;color:var(--ink-2)}
.group{margin-top:var(--s6)}
.group[data-tone="fail"]{--g-wash:var(--fail-wash);--g-edge:var(--fail-edge);--g-ink:var(--fail-strong)}
.group[data-tone="warn"]{--g-wash:var(--warn-wash);--g-edge:var(--warn-edge);--g-ink:var(--warn-strong)}
.group[data-tone="pass"]{--g-wash:var(--pass-wash);--g-edge:var(--pass-edge);--g-ink:var(--pass-strong)}
.group[data-tone="manual"]{--g-wash:var(--paper-2);--g-edge:var(--rule);--g-ink:var(--ink)}
.group-title,.group-fold > summary{display:flex;align-items:center;gap:var(--s2);min-height:44px;padding:8px 12px;border-radius:var(--r1);background:var(--g-wash);border:1px solid var(--g-edge);color:var(--g-ink);font-size:.9375rem;font-weight:630;margin-bottom:2px}
.group-title .glyph{--gs:18px}
.group-title .count,.group-fold > summary .count{font-size:.8125rem;font-weight:500;opacity:.8}
.group-fold > summary{list-style:none;cursor:pointer}
.group-fold > summary::-webkit-details-marker{display:none}
.group-fold > summary .group-title{all:unset;display:flex;align-items:center;gap:var(--s2);flex:1}
.group-fold > summary .chev{transition:transform .25s var(--ease);color:var(--g-ink)}
.group-fold[open] > summary .chev{transform:rotate(90deg)}
[dir="rtl"] .group-fold > summary .chev{transform:scaleX(-1)}
[dir="rtl"] .group-fold[open] > summary .chev{transform:rotate(90deg)}

.check{border-bottom:1px solid var(--rule)}
.check > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:20px minmax(0,1fr) fit-content(24ch) minmax(0,17ch) 16px;align-items:center;gap:4px 14px;padding:13px 2px;min-height:48px}
.check > summary::-webkit-details-marker{display:none}
.check > summary:hover .check-name{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:.22em}
.check-name{font-weight:560;min-width:0;overflow-wrap:break-word}
.check-value{font-size:.875rem;color:var(--ink);text-align:end;min-width:0;overflow-wrap:anywhere}
.check[data-status="fail"] .check-value{color:var(--fail-strong)}
.check[data-status="warn"] .check-value{color:var(--warn-strong)}
.check[data-status="manual"] .check-value{color:var(--ink-3)}
.check-rule{font-size:.8125rem;color:var(--ink-3);text-align:end;line-height:1.35}
.check .chev{width:16px;height:16px;color:var(--ink-3);transition:transform .25s var(--ease)}
.check[open] .chev{transform:rotate(90deg)}
[dir="rtl"] .check .chev{transform:scaleX(-1)}
[dir="rtl"] .check[open] .chev{transform:rotate(90deg)}
.check-body{padding:0 2px 16px 34px;display:grid;gap:6px;font-size:.9375rem;color:var(--ink-2);max-width:62ch}
[dir="rtl"] .check-body{padding:0 34px 16px 2px}
.check-body b{color:var(--ink);font-weight:600}
.fixtag{display:inline-flex;align-items:center;gap:6px;width:fit-content;margin-top:2px;padding:3px 8px;border-radius:2px;background:var(--paper-3);color:var(--ink);font-size:.8125rem;font-weight:560}
.fixtag .icon{width:14px;height:14px;color:var(--guide-ink)}
@container panel (max-width:520px){
  .check > summary{grid-template-columns:20px minmax(0,1fr) 16px;grid-template-rows:auto auto}
  .check > summary .glyph{grid-row:1 / span 2;align-self:start;margin-top:2px}
  .check-name{grid-column:2}
  .check .chev{grid-column:3;grid-row:1}
  .check-value,.check-rule{grid-column:2;text-align:start}
  .check-value{grid-row:2;display:inline}
  .check-rule{grid-row:3}
}

.privacy-line{display:flex;gap:var(--s3);margin-top:var(--s6);font-size:.875rem;color:var(--ink-2)}
.privacy-line .icon{width:18px;height:18px;color:var(--guide-ink);margin-top:2px}

/* ---------- Sections ---------- */
.sec{padding-block:clamp(64px,9vw,128px);border-top:1px solid var(--rule)}
.sec h2{font-size:clamp(1.875rem,1.3rem + 1.9vw,2.75rem);line-height:1.08;letter-spacing:-.025em;font-weight:650;font-variation-settings:"SHRP" 30;max-width:20ch}
.sec .intro,.fold-body .intro{margin-top:var(--s4);color:var(--ink-2);font-size:1.0625rem;max-width:52ch}
.sec .intro + .intro,.fold-body .intro + .intro{margin-top:var(--s3)}
.fold-body .aside > .intro:first-child{margin-top:0}
.split{display:grid;gap:var(--s7)}

.folds{padding-block:clamp(40px,6vw,80px);border-top:1px solid var(--rule)}
.fold{border-bottom:1px solid var(--rule)}
.fold:first-child{border-top:1px solid var(--ink)}
.fold > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:32px minmax(0,1fr) 44px;column-gap:var(--s4);align-items:center;padding:clamp(18px,2.4vw,28px) 4px;transition:background-color .2s var(--ease)}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary:hover{background:var(--paper-2)}
.fold-icon{width:28px;height:28px;color:var(--guide-ink);stroke-width:1.6;align-self:start;margin-top:clamp(0px,.3vw,4px)}
.fold-head{min-width:0}
.fold h2{font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);line-height:1.2;letter-spacing:-.018em;font-weight:640;font-variation-settings:"SHRP" 24;max-width:none}
.fold-sub{display:block;margin-top:4px;color:var(--ink-2);font-size:.9375rem}
.fold-toggle{position:relative;width:44px;height:44px;border:1px solid var(--rule-2);border-radius:50%;justify-self:end}
.fold-toggle::before,.fold-toggle::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:0;border-top:1.75px solid var(--ink);transform:translate(-50%,-50%);transition:transform .3s var(--ease)}
.fold-toggle::after{transform:translate(-50%,-50%) rotate(90deg)}
.fold[open] .fold-toggle::after{transform:translate(-50%,-50%) rotate(0deg)}
.fold[open] > summary .fold-toggle{background:var(--ink);border-color:var(--ink)}
.fold[open] > summary .fold-toggle::before,.fold[open] > summary .fold-toggle::after{border-top-color:var(--paper)}
.fold-body{padding:var(--s4) 0 clamp(40px,5vw,72px)}
.fold-body .faq{max-width:820px}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .fold::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
  .fold[open]::details-content{block-size:auto}
}
@media (max-width:560px){.fold > summary{grid-template-columns:24px minmax(0,1fr) 40px;column-gap:var(--s3)}.fold-icon{width:24px;height:24px}.fold-toggle{width:40px;height:40px}}
@media (min-width:1000px){
  .split{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(48px,6vw,96px);align-items:start}
  .split > .aside{position:sticky;top:96px}
}

.legend{list-style:none;margin-top:var(--s6);display:grid;gap:var(--s4)}
.legend li{display:grid;grid-template-columns:24px 1fr;gap:var(--s3)}
.legend .icon{color:var(--guide-ink);margin-top:2px}
.legend strong{display:block;font-weight:600}
.legend span{display:block;font-size:.9375rem;color:var(--ink-2)}
.ext{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s6);font-weight:560}
.ext .icon{width:16px;height:16px}

.spec{width:100%;border-collapse:collapse;font-size:.9375rem}
.spec thead th{font-size:.8125rem;font-weight:500;color:var(--ink-3);text-align:start;padding:0 12px 10px 0;border-bottom:1px solid var(--ink)}
.spec tbody th[scope="colgroup"]{text-align:start;font-size:1.0625rem;font-weight:640;padding:var(--s6) 0 var(--s2);border-bottom:1px solid var(--rule-2)}
.spec tbody:first-of-type th[scope="colgroup"]{padding-top:var(--s5)}
.spec td,.spec tbody th[scope="row"]{padding:13px 12px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top;text-align:start}
[dir="rtl"] .spec td,[dir="rtl"] .spec tbody th[scope="row"],[dir="rtl"] .spec thead th{padding-left:12px;padding-right:0}
.spec tbody th[scope="row"]{font-weight:560;width:26%}
.spec td.val{color:var(--ink)}
.spec td.by{width:30%;color:var(--ink-2);font-size:.875rem}
.by-tag{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.by-tag .icon{width:16px;height:16px;color:var(--guide-ink)}
.by-note{display:block;margin-top:2px;color:var(--ink-3);font-size:.8125rem}
.spec-note{margin-top:var(--s5);font-size:.875rem;color:var(--ink-3);max-width:62ch}
@media (max-width:680px){
  .spec thead{display:none}
  .spec,.spec tbody,.spec tr{display:block}
  .spec tr{padding:12px 0;border-bottom:1px solid var(--rule)}
  .spec tbody th[scope="colgroup"]{display:block;border-bottom:1px solid var(--rule-2)}
  .spec td,.spec tbody th[scope="row"]{display:block;border:0;padding:0;width:auto}
  .spec td.val{margin-top:2px}
  .spec td.by{margin-top:6px}
  .spec tr.grp-head{padding:0;border:0}
}

/* the fix section: proof of a crop */
.fix-figure{background:var(--stage);color:var(--on-stage);border-radius:var(--r2);padding:clamp(20px,3vw,36px);display:grid;grid-template-columns:minmax(0,3fr) auto minmax(0,4fr);align-items:center;gap:clamp(12px,2.5vw,32px)}
.print{position:relative;overflow:hidden;box-shadow:var(--photo-shadow);background:var(--photo-paper)}
.print svg{width:100%;height:auto}
.print .cropbox{display:block}
.fig-arrow{color:var(--guide);width:28px;height:28px}
.fig-cap{margin-top:12px;font-size:.75rem;color:var(--on-stage-2);line-height:1.5}
.fig-cap b{display:block;font-family:var(--font-ui);font-size:.875rem;font-weight:560;color:var(--on-stage)}
.fig-label{grid-column:1 / -1;font-size:.75rem;color:var(--on-stage-2);display:flex;justify-content:space-between;gap:12px;border-top:1px solid oklch(1 0 0 / .16);padding-top:12px}
@media (max-width:560px){
  .fix-figure{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fig-arrow{display:none}
}
.does{display:grid;gap:var(--s6);margin-top:var(--s7)}
@media (min-width:720px){.does{grid-template-columns:1fr 1fr}}
.does h3{font-size:1.0625rem;font-weight:630;padding-bottom:var(--s2);border-bottom:1px solid var(--ink)}
.does ul{list-style:none}
.does li{display:grid;grid-template-columns:22px 1fr;gap:var(--s3);padding:12px 0;border-bottom:1px solid var(--rule)}
.does .yes .icon{color:var(--pass)}
.does .no .icon{color:var(--fail)}
.fix-note{margin-top:var(--s7);display:grid;grid-template-columns:24px 1fr;gap:var(--s3);padding:var(--s5);border-radius:var(--r2);background:var(--warn-wash);border:1px solid var(--warn-edge);color:var(--ink-2)}
.fix-note > .icon{color:var(--warn);margin-top:2px}
.fix-note strong{display:block;color:var(--warn-strong);font-weight:640;font-size:1.0625rem}
.fix-note p{margin-top:6px;max-width:64ch}
.fix-note a{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s3);color:var(--ink);font-weight:560}
.fix-note a .icon{width:16px;height:16px}

/* privacy band: the one inverted region */
.band-sec{background:var(--ink);color:var(--paper);padding-block:clamp(64px,8vw,112px)}
.band-sec .wrap{display:grid;gap:var(--s6)}
@media (min-width:900px){.band-sec .wrap{grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:var(--s6)}}
.band-sec .shield{width:44px;height:44px;color:var(--guide);stroke-width:1.5}
.band-sec h2{font-size:clamp(1.75rem,1.2rem + 1.9vw,2.625rem);line-height:1.12;letter-spacing:-.022em;font-weight:620;max-width:26ch}
.band-facts{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin-top:var(--s5);color:oklch(from var(--paper) l c h / .78)}
.band-facts li{display:inline-flex;align-items:center;gap:8px}
.band-facts .icon{width:18px;height:18px;color:var(--guide)}
:root.dark .band-sec .shield,:root.dark .band-facts .icon{color:var(--guide-ink)}

.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 20px;gap:var(--s4);align-items:center;padding:18px 0;font-weight:580;font-size:1.0625rem;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{position:relative;width:14px;height:14px}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;inset-inline:0;top:50%;border-top:1.5px solid var(--ink-2);transition:transform .25s var(--ease)}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq details p{padding:0 0 20px;color:var(--ink-2);max-width:64ch}

.guides{list-style:none;border-top:1px solid var(--ink)}
.guide-row{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:var(--s5);align-items:center;padding:22px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.guide-row strong{display:block;font-size:1.1875rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.guide-row span{display:block;margin-top:4px;color:var(--ink-2);font-size:.9375rem;max-width:68ch}
.guide-row .icon{color:var(--ink-3);transition:transform .25s var(--ease),color .2s var(--ease)}
.guide-row:hover strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.guide-row:hover .icon{color:var(--ink);transform:translateX(4px)}
[dir="rtl"] .guide-row:hover .icon{transform:scaleX(-1) translateX(4px)}
.all-link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s5);font-weight:560}
.all-link .icon{width:18px;height:18px}

.support .actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.wallets-title{margin-top:var(--s7);font-size:1.0625rem;font-weight:630;padding-bottom:var(--s2);border-bottom:1px solid var(--ink)}
.wallets{list-style:none;max-width:760px}
.wallet{display:grid;grid-template-columns:112px minmax(0,1fr) auto;grid-template-areas:"qr label copy" "qr address copy";column-gap:var(--s5);row-gap:6px;align-items:center;padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.wallet-qr{grid-area:qr;width:112px;height:112px;padding:6px;background:#fff;border:1px solid var(--rule);border-radius:var(--r1);image-rendering:pixelated}
.wallet-label{grid-area:label;align-self:end;font-weight:600;font-size:1rem}
.wallet-label .net{font-weight:400;font-size:.8125rem;color:var(--ink-3);margin-inline-start:6px}
.wallet-address{grid-area:address;align-self:start;font-family:var(--font-measure);font-stretch:87.5%;font-size:.8125rem;color:var(--ink-2);overflow-wrap:anywhere;user-select:all}
.copy{grid-area:copy;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--rule-2);border-radius:var(--r1);background:transparent;cursor:pointer;font-size:.875rem;font-weight:560}
.copy:hover{border-color:var(--ink)}
.copy .icon{width:16px;height:16px}
.copy.is-done{border-color:var(--pass-edge);background:var(--pass-wash);color:var(--pass-strong)}
.wallets-note{margin-top:var(--s4);font-size:.875rem;color:var(--ink-3);max-width:64ch}
@media (max-width:560px){
  .wallet{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"qr label" "qr address" "qr copy";column-gap:var(--s4)}
  .wallet-qr{width:96px;height:96px}
  .copy{justify-self:start}
}

.site-foot{background:var(--paper-2);border-top:1px solid var(--rule);padding-block:var(--s7) var(--s8);font-size:.875rem;color:var(--ink-2)}
.site-foot .wrap{display:grid;gap:var(--s5)}
@media (min-width:900px){.site-foot .wrap{grid-template-columns:minmax(0,1fr) auto;align-items:start}}
.site-foot p{max-width:70ch}
.foot-links{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.foot-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.foot-links .icon{width:14px;height:14px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .busy-bar::after,.verdict .progress::after{animation:none;width:100%;opacity:.5}
}

/* ======================================================================
   Checker page: elements that the live script renders or toggles.
   ====================================================================== */

/* Status shapes, drawn in CSS so the render functions stay self-contained. */
.glyph{display:inline-block;flex:none;width:var(--gs,20px);height:var(--gs,20px);background:currentColor;
  -webkit-mask:var(--glyph) center/contain no-repeat;mask:var(--glyph) center/contain no-repeat}
.g-pass{color:var(--pass);--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M10 1.75a8.25 8.25 0 1 1 0 16.5 8.25 8.25 0 0 1 0-16.5Zm0 1.5a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5Zm3.6 3.7 1.1 1-5.6 6-3.2-3.2 1.06-1.06 2.1 2.1Z'/%3E%3C/svg%3E")}
.g-warn{color:var(--warn-mark);--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' fill-rule='evenodd' d='M10 2.2 18.6 17.2H1.4Zm-.95 5.2v4.8h1.9V7.4Zm0 6.3v1.9h1.9v-1.9Z'/%3E%3C/svg%3E")}
.g-fail{color:var(--fail);--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' fill-rule='evenodd' d='M10 1a9 9 0 1 1 0 18 9 9 0 0 1 0-18Zm-3.1 4.5L5.5 6.9 8.6 10l-3.1 3.1 1.4 1.4 3.1-3.1 3.1 3.1 1.4-1.4-3.1-3.1 3.1-3.1-1.4-1.4-3.1 3.1Z'/%3E%3C/svg%3E")}
.g-manual{color:var(--ink-3);--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='10' cy='10' r='8.25' stroke-dasharray='2.6 2.4'/%3E%3Ccircle cx='10' cy='10' r='2.2' fill='black' stroke='none'/%3E%3C/svg%3E")}
.g-locked{color:var(--ink-3);--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='4' y='9' width='12' height='8.5' rx='1.5'/%3E%3Cpath d='M6.8 9V6.6a3.2 3.2 0 0 1 6.4 0V9'/%3E%3C/svg%3E")}
.stage .g-pass{color:var(--pass-on-stage)}
.stage .g-warn{color:var(--warn-on-stage)}
.stage .g-fail{color:var(--fail-on-stage)}

/* Header: account widget (hidden unless metering is on). */
.head-tools .btn-quiet{min-height:40px;padding:0 10px;font-size:.875rem}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--rule);font-size:.8125rem;color:var(--ink-2)}
#validateBtn{display:none!important}

/* Upload errors from the page itself (HEIC, not an image, too large). */
.upload-error{margin-top:var(--s5);padding:var(--s4) var(--s5);border-radius:var(--r2);background:var(--fail-wash);border:1px solid var(--fail-edge);color:var(--fail-strong);font-size:.9375rem;max-width:56ch}
.tool[data-mode="result"] .upload-error{margin:0 0 var(--s5)}

/* The verdict: tinted block; its status shape comes from CSS. */
.verdict{padding:var(--s5);border-radius:var(--r2);background:var(--v-wash);border:1px solid var(--v-edge)}
.verdict.fail{--v-wash:var(--fail-wash);--v-edge:var(--fail-edge);--v-strong:var(--fail-strong)}
.verdict.warn{--v-wash:var(--warn-wash);--v-edge:var(--warn-edge);--v-strong:var(--warn-strong)}
.verdict.pass{--v-wash:var(--pass-wash);--v-edge:var(--pass-edge);--v-strong:var(--pass-strong)}
.verdict.busy{--v-wash:var(--paper-2);--v-edge:var(--rule);--v-strong:var(--ink)}
.verdict-title{display:flex;align-items:flex-start;gap:var(--s3);margin:0;font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);line-height:1.18;letter-spacing:-.015em;color:var(--v-strong);font-weight:660;font-variation-settings:"SHRP" 24}
.verdict-title::before{content:"";flex:none;width:28px;height:28px;margin-top:1px;background:currentColor;-webkit-mask:var(--glyph) center/contain no-repeat;mask:var(--glyph) center/contain no-repeat}
.verdict.fail .verdict-title::before{--glyph:var(--g-fail-mask);color:var(--fail)}
.verdict.warn .verdict-title::before{--glyph:var(--g-warn-mask);color:var(--warn-mark)}
.verdict.pass .verdict-title::before{--glyph:var(--g-pass-mask);color:var(--pass)}
.verdict.busy .verdict-title::before{-webkit-mask:none;mask:none;background:none;width:24px;height:24px;margin:3px 2px 0;border-radius:50%;border:2px solid var(--rule-2);border-top-color:var(--ink);animation:spin .8s linear infinite}
.verdict-sub{margin-top:var(--s2);color:var(--ink-2);max-width:52ch;padding-inline-start:40px}
.verdict-sub:empty{display:none}
:root{
  --g-pass-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M10 1.75a8.25 8.25 0 1 1 0 16.5 8.25 8.25 0 0 1 0-16.5Zm0 1.5a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5Zm3.6 3.7 1.1 1-5.6 6-3.2-3.2 1.06-1.06 2.1 2.1Z'/%3E%3C/svg%3E");
  --g-warn-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' fill-rule='evenodd' d='M10 2.2 18.6 17.2H1.4Zm-.95 5.2v4.8h1.9V7.4Zm0 6.3v1.9h1.9v-1.9Z'/%3E%3C/svg%3E");
  --g-fail-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' fill-rule='evenodd' d='M10 1a9 9 0 1 1 0 18 9 9 0 0 1 0-18Zm-3.1 4.5L5.5 6.9 8.6 10l-3.1 3.1 1.4 1.4 3.1-3.1 3.1 3.1 1.4-1.4-3.1-3.1 3.1-3.1-1.4-1.4-3.1 3.1Z'/%3E%3C/svg%3E");
}
/* The short list of what failed, inside the verdict. */
#banners{margin-top:var(--s3);padding-inline-start:40px}
.banner + .banner{margin-top:var(--s3)}
.banner-title{font-weight:620;font-size:.9375rem;color:var(--ink)}
.banner ul{margin:4px 0 0;padding-inline-start:1.1em;color:var(--ink-2);font-size:.9375rem}
.banner li{margin:2px 0}
.banner li::marker{color:var(--ink-3)}

/* Paid results (hidden unless the paywall is on). */
.unlock-cta{margin-top:var(--s5);padding:var(--s5);border-radius:var(--r2);border:1px solid var(--rule);background:var(--paper-2);font-size:.9375rem}
.unlock-cta b{font-size:1.0625rem}
.unlock-cta .btn{margin-top:var(--s4);width:100%}
.btn.brand{background:var(--action);color:var(--on-action);border-color:transparent}
.btn.brand:hover{background:var(--action-hover)}

/* Next action: download the fix, and what the fix did. */
.next{margin-top:var(--s5);display:grid;gap:var(--s3)}
#downloadFixBtn::before{content:"";width:20px;height:20px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5 12 15l4.5-4.5M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5 12 15l4.5-4.5M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15'/%3E%3C/svg%3E") center/contain no-repeat}
#fixDisclosure{font-size:.9375rem;color:var(--ink-2)}
#fixDisclosure > div{padding:var(--s3) var(--s4);border-radius:var(--r2);background:var(--warn-wash);border:1px solid var(--warn-edge);color:var(--warn-strong)}

/* Declarations: glasses and head coverings. */
.declare select{display:block;width:100%;min-height:48px;margin:6px 0 var(--s4);padding:0 40px 0 14px;border:1px solid var(--rule-2);border-radius:var(--r1);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/18px;color:var(--ink);font-size:.9375rem;-webkit-appearance:none;appearance:none;cursor:pointer}
[dir="rtl"] .declare select{padding:0 14px 0 40px;background-position:left 12px center}
.declare select:hover{border-color:var(--ink-3)}
.declare label{display:block;font-weight:600;font-size:.9375rem}
.declare .check-line{display:flex;align-items:flex-start;gap:10px;margin:var(--s2) 0;font-weight:400}
.declare .check-line input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--action)}
.declare legend{padding:0;font-size:1.0625rem;font-weight:630}
.declare .note{margin:4px 0 var(--s4);font-size:.875rem;color:var(--ink-2)}
#accessoryReviewStatus{margin:0 0 var(--s4);font-size:.875rem;color:var(--ink-2)}
#accessoryReviewStatus:empty{display:none}
.declare-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5)}
.declare-foot a{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;color:var(--ink-2)}

/* Quality score: a quiet line, not a verdict. */
.qscore{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule)}
.qlabel{display:flex;align-items:baseline;gap:10px;font-size:.875rem;color:var(--ink-3)}
.qlabel .pct{font-family:var(--font-measure);font-stretch:87.5%;color:var(--ink);font-weight:500}
.qbar{display:none}
.qnote{margin-top:2px;font-size:.8125rem;color:var(--ink-3)}

/* Checklist header: how many checks ran, and on what. */
#checkCount{margin-top:4px;font-size:.875rem;color:var(--ink-3)}
#checkDepth{margin-top:var(--s2);font-size:.875rem}
#checkDepth summary{cursor:pointer;color:var(--ink-2);min-height:36px;display:flex;align-items:center}
#checkDepth > div{padding:var(--s3) var(--s4);border:1px solid var(--rule);border-radius:var(--r2);display:grid;gap:var(--s3)}
.depth-group{color:var(--ink)}
.depth-group > div + div{color:var(--ink-2);margin-top:2px}
#depthNote{color:var(--ink-2)}

/* Rows rendered by renderRows(). */
.rows-empty{padding:var(--s6) 0;color:var(--ink-3);text-align:center}
.check .chev{width:16px;height:16px;background:var(--ink-3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5 15.5 12 9 18.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5 15.5 12 9 18.5'/%3E%3C/svg%3E") center/contain no-repeat}
.group-fold > summary .chev{width:16px;height:16px;margin-inline-start:auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5 15.5 12 9 18.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5 15.5 12 9 18.5'/%3E%3C/svg%3E") center/contain no-repeat}
.check[data-status="skipped"] .check-value{color:var(--ink-3)}
.check[data-status="warning"] .check-value{color:var(--warn-strong)}
.check-body p{margin:0}
.check-body .fix b{color:var(--ink);font-weight:600}
.background-notice{padding:var(--s2) var(--s3);border-radius:var(--r1);background:var(--paper-2);color:var(--ink-2)}
.locked-block{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) 2px;border-bottom:1px solid var(--rule)}
.locked-block .bars{display:flex;flex-wrap:wrap;gap:6px 10px;flex:1}
.locked-block .bars i{display:block;height:10px;border-radius:5px;flex:1 1 84px;min-width:60px;background:repeating-linear-gradient(90deg,var(--rule-2) 0 9px,transparent 9px 15px);filter:blur(1.4px)}
.results{-webkit-user-select:none;user-select:none}
.disclaimer{margin-top:var(--s3);font-size:.8125rem;color:var(--ink-3)}

/* The photo inside the frame, and the manual line editor over it. */
.preview-wrap{position:absolute;inset:0}
.preview-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
#overlay{position:absolute;inset:0;z-index:3;touch-action:none}
.tool[data-mode="result"] .schematic{display:none}
.tool[data-mode="intro"] .preview-wrap{display:none!important}
.gline,.eye-band,.cropbox{z-index:2}
.gl-cx{position:absolute;top:0;bottom:0;left:var(--cx,50%);width:0;border-left:1px dashed var(--guide-ink);display:none;z-index:2;pointer-events:none}
.stage.is-adjusting .gl-cx{display:block}
.stage.is-adjusting .cropbox{display:none!important}
.gtag{position:absolute;inset-inline-start:8px;top:-22px;display:none;padding:1px 6px;border-radius:2px;background:oklch(0.22 0.018 255 / .78);color:oklch(0.98 0 0);font-size:.6875rem;white-space:nowrap;pointer-events:none}
.stage.is-adjusting .gtag{display:block}
.frame.drag-over{outline:3px solid var(--guide)!important;outline-offset:4px!important}
.frame.drag-over .cue-drop,.frame.drag-over .cue-sub{display:none}
.frame.drag-over .cue-release{display:block}

/* Tips, as renderTips() builds them. */
.support-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.support-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border-radius:var(--r1);background:var(--action);color:var(--on-action);font-weight:600;text-decoration:none}
.support-link:hover{background:var(--action-hover)}
.wallet-list{margin-top:var(--s6);max-width:760px;border-top:1px solid var(--ink)}
.wallet{display:grid;grid-template-columns:minmax(72px,auto) minmax(0,1fr) auto;gap:var(--s4);align-items:center;padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.wallet--with-qr{grid-template-columns:112px minmax(0,1fr) auto;grid-template-areas:"qr label copy" "qr address copy";column-gap:var(--s5);row-gap:6px}
.wallet-qr{grid-area:qr;width:112px;height:112px;padding:6px;background:#fff;border:1px solid var(--rule);border-radius:var(--r1);image-rendering:pixelated}
.wallet-label{font-weight:600}
.wallet--with-qr .wallet-label{grid-area:label;align-self:end}
.wallet-address{font-family:var(--font-measure);font-stretch:87.5%;font-size:.8125rem;color:var(--ink-2);overflow-wrap:anywhere;user-select:all}
.wallet--with-qr .wallet-address{grid-area:address;align-self:start}
.wallet-copy{min-height:44px;padding:0 14px;border:1px solid var(--rule-2);border-radius:var(--r1);background:transparent;color:var(--ink);cursor:pointer;font-size:.875rem;font-weight:560}
.wallet-copy:hover{border-color:var(--ink)}
.wallet--with-qr .wallet-copy{grid-area:copy}
@media (max-width:560px){
  .wallet{grid-template-columns:1fr auto}
  .wallet-address{grid-column:1 / -1;grid-row:2}
  .wallet--with-qr{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"qr label" "qr address" "qr copy";column-gap:var(--s4)}
  .wallet--with-qr .wallet-qr{width:96px;height:96px}
  .wallet--with-qr .wallet-address{grid-column:auto;grid-row:auto}
  .wallet--with-qr .wallet-copy{justify-self:start}
}

/* Reference panels: the text is English; other languages see a short note. */
.en-note{margin:0 0 var(--s4);padding:var(--s2) var(--s3);border-radius:var(--r1);background:var(--paper-2);color:var(--ink-2);font-size:.875rem}

/* The declarations box: the legend sits inside the border, like a heading. */
fieldset.declare{min-width:0}
.declare > legend{float:left;width:100%;margin-bottom:4px}
.declare > legend + *{clear:both}