:root{
  --bg:#FBFAF7; --surface:#FFFFFF; --ink:#1C1A14; --muted:#6B6754; --line:#DDD8C8;
  --moss:#3D4A2E; --moss-tint:#EEF1E7; --amber:#B7812C; --amber-soft:#F3E6CC; --sage:#8A9E6A;
  --serif:'Literata', Georgia, 'Times New Roman', serif;
  --sans:'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15160F; --surface:#1D1F16; --ink:#ECE6D6; --muted:#A6A08A; --line:#34372A;
    --moss:#A9BD86; --moss-tint:#252B1C; --amber:#DDAA55; --amber-soft:#3A2F1B; --sage:#8A9E6A;
  }
}
:root[data-theme="dark"]{
  --bg:#15160F; --surface:#1D1F16; --ink:#ECE6D6; --muted:#A6A08A; --line:#34372A;
  --moss:#A9BD86; --moss-tint:#252B1C; --amber:#DDAA55; --amber-soft:#3A2F1B; --sage:#8A9E6A;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:660px;margin:0 auto;padding:28px 22px 120px}
header.top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:26px}
.org{font-size:14px;color:var(--muted)}
.org strong{color:var(--ink);font-weight:600}
.theme-btn{background:none;border:1px solid var(--line);color:var(--muted);border-radius:6px;font:inherit;font-size:13px;padding:4px 9px;cursor:pointer}

/* dimension-line progress: the one bold element */
.dim{position:relative;height:30px;margin:0 0 34px;color:var(--amber)}
.dim .rule{position:absolute;left:0;right:0;top:14px;height:1px;background:var(--line)}
.dim .done{position:absolute;left:0;top:14px;height:1px;background:var(--amber);transition:width .45s ease}
.dim .tick{position:absolute;top:8px;width:1px;height:13px;background:var(--line)}
.dim .tick.on{background:var(--amber)}
.dim .end{position:absolute;top:4px;width:1px;height:21px;background:var(--amber)}
.dim .lbl{position:absolute;top:-4px;transform:translateX(-50%);background:var(--bg);padding:0 8px;font-size:12.5px;color:var(--amber);font-variant-numeric:tabular-nums;white-space:nowrap;transition:left .45s ease}

h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(30px,6vw,40px);line-height:1.15;margin-bottom:18px}
h2{font-size:clamp(23px,4.6vw,28px);line-height:1.25;margin-bottom:10px}
.lede{font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--ink);max-width:34em}
.hint{color:var(--muted);font-size:14.5px;margin:0 0 20px}
p{margin:0 0 14px}

fieldset{border:0;padding:0;margin:0}
.opts{display:grid;gap:9px;margin-top:6px}
.opt{position:relative;display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--sage)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.mark{flex:none;width:20px;height:20px;margin-top:2px;border:1.5px solid var(--muted);border-radius:50%;display:grid;place-items:center}
.opt.multi .mark{border-radius:5px}
.opt .txt{flex:1}
.opt .sub{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.opt:has(input:checked){border-color:var(--moss);background:var(--moss-tint)}
.opt:has(input:checked) .mark{border-color:var(--moss);background:var(--moss)}
.opt:has(input:checked) .mark::after{content:"";width:9px;height:5px;border-left:2px solid var(--bg);border-bottom:2px solid var(--bg);transform:rotate(-45deg) translate(1px,-1px)}
.opt:has(input:focus-visible){outline:2px solid var(--amber);outline-offset:2px}
.opt.statement .txt{font-family:var(--serif);font-size:16.5px;line-height:1.5}
.opt.disabled{opacity:.45;cursor:not-allowed}

textarea{width:100%;min-height:120px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;resize:vertical}
textarea:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.sublabel{display:block;margin:26px 0 8px;font-weight:600;font-size:15px}
select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit}

.bar{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(to top,var(--bg) 70%,transparent);padding:18px 22px calc(18px + env(safe-area-inset-bottom,0px))}
.bar .in{max-width:660px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px}
.btn{font:inherit;font-weight:600;font-size:15.5px;border-radius:9px;padding:12px 22px;cursor:pointer;border:1px solid transparent}
.btn.primary{background:var(--moss);color:var(--bg)}
.btn.primary[disabled]{opacity:.35;cursor:not-allowed}
.btn.ghost{background:none;border-color:var(--line);color:var(--ink)}
.btn.link{background:none;border:0;color:var(--muted);padding:12px 4px;text-decoration:underline;text-underline-offset:3px;font-weight:500}
.count{font-size:13.5px;color:var(--muted)}

.note{border-left:3px solid var(--amber);background:var(--amber-soft);padding:12px 16px;border-radius:0 8px 8px 0;font-size:14.5px;margin:22px 0}
.foot{margin-top:40px;font-size:13px;color:var(--muted)}

/* result */
.level{font-family:var(--serif);font-size:clamp(28px,6vw,36px);color:var(--moss);margin:4px 0 14px;line-height:1.15}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:18px 0 26px}
.scale span{height:8px;border-radius:2px;background:var(--line)}
.scale span.on{background:var(--moss)}
.scale span.here{background:var(--amber)}
.scale-lbls{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:-20px;margin-bottom:26px;font-size:11.5px;color:var(--muted);line-height:1.3}
.dev{display:grid;gap:14px;margin:6px 0 20px}
.dev div{border-top:1px solid var(--line);padding-top:12px}
.dev b{display:block;font-size:14px;color:var(--muted);font-weight:600;margin-bottom:3px}

/* readout */
.sample{display:inline-block;font-size:12.5px;font-weight:600;color:var(--amber);border:1px solid var(--amber);border-radius:5px;padding:2px 8px;margin-bottom:14px}
.panel{border-top:1px solid var(--line);padding:22px 0 8px}
.panel h3{font-family:var(--serif);font-weight:500;font-size:19px;margin:0 0 4px}
.panel .hint{margin-bottom:16px}
.pair{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;align-items:center;font-size:14px;margin-bottom:12px}
.pair .nm{color:var(--ink)}
.bars{display:grid;gap:3px}
.b{height:12px;border-radius:2px;display:flex;align-items:center}
.b i{display:block;height:100%;border-radius:2px}
.b.self i{background:var(--moss)} .b.mgr i{background:var(--amber)}
.b em{font-style:normal;font-size:11.5px;color:var(--muted);margin-left:6px;font-variant-numeric:tabular-nums}
.legend{display:flex;gap:18px;font-size:13px;color:var(--muted);margin-bottom:14px}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend .s::before{background:var(--moss)} .legend .m::before{background:var(--amber)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;margin-bottom:10px}
.stat .n{font-family:var(--serif);font-size:34px;line-height:1;color:var(--moss);font-variant-numeric:tabular-nums}
.stat .d{font-size:14px;color:var(--muted);margin-top:6px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:13px;padding:8px 10px 8px 0;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl-wrap{overflow-x:auto}
@media (max-width:520px){.pair{grid-template-columns:1fr}.pair .nm{margin-top:6px}}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
.draft{display:inline-block;font-size:12.5px;font-weight:600;color:var(--amber);border:1px solid var(--amber);border-radius:5px;padding:2px 8px;margin-bottom:16px}
.other-input{margin-top:10px;width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit}
.err{color:#B3261E;font-size:14.5px;margin-top:14px}
.linklist{display:grid;gap:8px;margin:8px 0 18px}
.linklist a{color:var(--moss);font-weight:600;text-underline-offset:3px}
.ph{background:var(--amber-soft);border-radius:4px;padding:0 4px}