/* Self-hosted WOFF2 subsets. 106 glyphs, latin only. No third-party request. */
@font-face{font-family:Inter;src:url(/assets/fonts/inter-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(/assets/fonts/instrument-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(/assets/fonts/instrument-400i.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/plex-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/plex-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
:root{
--g-900:#04382A;--g-700:#077453;--g-500:#19B98A;--g-300:#7FD9BC;--g-100:#DCF2E9;--g-050:#F0FAF5;
--a-800:#7A4A02;--a-700:#8A5200;--a-500:#E9A227;--a-100:#FCEFD6;
--t-skills:#0F5C5C;--t-ai:#077453;--t-copilot:#3D2F8F;--t-emerging:#7A4A02;--t-horizon:#6B1F5E;--t-play:#19B98A;
--paper:#F2F3F1;--card:#FFF;--sunk:#E9EBE6;--ink:#16181D;--slate:#5C6058;--hairline:#D6D8D3;--tint:var(--g-100);
--util:var(--g-900);--hdr:var(--g-700);--hdrrule:var(--g-500);
}
[data-theme=dark]{
--paper:#0E1512;--card:#161E1A;--sunk:#1E2823;--ink:#E8EDE9;--slate:#9BA79F;--hairline:#2C382F;
--tint:#12251E;--g-100:#12251E;--g-050:#101E19;--a-100:#2A2113;
--t-skills:#4FBDBD;--t-copilot:#9C8DF0;--t-emerging:#E9A227;--t-horizon:#D77BC4;
--util:#03251B;--hdr:var(--g-900);--hdrrule:var(--g-700);
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5}
img,svg,iframe,video{max-width:100%;display:block}
.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--paper);padding:12px 20px;z-index:100}
.skip:focus{left:16px;top:16px}
:focus-visible{outline:3px solid var(--g-700);outline-offset:2px}
[data-theme=dark] :focus-visible{outline-color:var(--g-500)}

/* masthead */
.util{background:var(--util)}
[data-theme=dark] .util{border-bottom:1px solid rgba(255,255,255,.10)}
.utilin{max-width:1200px;margin:0 auto;padding:9px 24px;display:flex;flex-wrap:wrap;gap:6px 26px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.utilin a{color:#fff;opacity:.72;text-decoration:none}
.utilin a:hover,.utilin a:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:3px}
.utilin .sp{margin-left:auto}
.hdr{background:var(--hdr);border-bottom:4px solid var(--hdrrule)}
.hdrin{max-width:1200px;margin:0 auto;padding:22px 24px;display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;justify-content:space-between}
.wm{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:19px;color:#fff;text-decoration:none;font-weight:500;letter-spacing:-.01em}
.wm i{display:inline-block;width:.55em;height:1em;background:var(--g-500);vertical-align:-.13em;margin-left:3px;animation:bl 1.06s steps(1,end) infinite}
@keyframes bl{0%,50%{opacity:1}51%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.wm i{animation:none}}
nav.main{display:flex;flex-wrap:wrap;gap:4px 26px;font-size:15px;align-items:center}
nav.main a{color:#fff;text-decoration:none;padding:5px 0;border-bottom:3px solid transparent}
nav.main a:hover,nav.main a[aria-current]{border-bottom-color:var(--g-500)}
nav.main a:focus-visible{outline-color:var(--g-500);outline-offset:4px}
.tt{display:flex;border:1px solid rgba(255,255,255,.45)}
.tt button{background:none;border:0;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:7px 12px;color:rgba(255,255,255,.8);cursor:pointer}
.tt button[aria-pressed=true]{background:#fff;color:var(--g-900)}

/* layout */
.shell{max-width:1200px;margin:0 auto;padding:0 24px}
.cols{display:grid;gap:48px;align-items:start}
@media(min-width:64rem){.cols{grid-template-columns:minmax(0,816px) 300px}}
.band{padding:56px 0}
.band+.band{border-top:1px solid var(--hairline)}
.prose{max-width:68ch;font-size:18px;line-height:1.55}
.prose p{margin-bottom:1.1em}.prose p:last-child{margin-bottom:0}
.serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400}
.mono,.lbl{font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.05em}
.lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);font-weight:500}
.lbl::before{content:"";display:inline-block;width:7px;height:7px;background:var(--g-700);margin-right:8px;vertical-align:.02em}
[data-theme=dark] .lbl::before{background:var(--g-500)}
.lbl.p::before{display:none}
a.lnk,.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a.lnk:hover,.prose a:hover{text-decoration-color:var(--g-700);text-decoration-thickness:2px}
[data-theme=dark] a.lnk:hover{text-decoration-color:var(--g-500)}
.dxl{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(2.6rem,7.5vw,5rem);line-height:1;letter-spacing:-.02em}
.dl{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1.04;letter-spacing:-.015em}
.dm{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.12;font-weight:400}
em.acc{font-style:italic}
.crumb{font-size:14px;color:var(--slate);padding-top:24px}
.crumb a{color:var(--slate)}

/* section bar */
.secbar{background:var(--g-700);color:#fff;font-size:22px;font-weight:700;line-height:1.2;padding:16px 24px}
.secbar.amber{background:var(--a-700)}
.secbar.bright{background:var(--g-500);color:#04382A}
.panel{background:var(--tint);padding:32px 24px}
.panel.amber{background:var(--a-100)}
.panel.bright{background:var(--g-500);color:#04382A}
.panel.bright a{color:#04382A}

.card{background:var(--card);border:1px solid var(--hairline);padding:28px}
.grid2{display:grid;gap:24px}@media(min-width:48rem){.grid2{grid-template-columns:1fr 1fr}}
.grid3{display:grid;gap:24px}@media(min-width:48rem){.grid3{grid-template-columns:repeat(3,1fr)}}

.chip{display:inline-block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;color:#fff;font-weight:500}
.chip.skills{background:var(--t-skills)}.chip.ai{background:var(--t-ai)}.chip.copilot{background:var(--t-copilot)}
.chip.emerging{background:var(--t-emerging)}.chip.horizon{background:var(--t-horizon)}.chip.play{background:var(--t-play);color:#04382A}
[data-theme=dark] .chip{color:#0E1512}

/* media */
figure{margin:0}
.ph{background:var(--sunk);border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--slate);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:16px;line-height:1.8}
.r169{aspect-ratio:16/9}.r43{aspect-ratio:4/3}
figcaption{font-size:14px;color:var(--slate);padding-top:10px;display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;border-top:1px solid var(--hairline);margin-top:10px}
figcaption .cred{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.video{background:var(--sunk);border:1px solid var(--hairline)}
.video .stage{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;border:0;width:100%;background:var(--sunk);padding:0}
.video .play{width:72px;height:72px;background:var(--g-700);display:flex;align-items:center;justify-content:center}
.video .play::after{content:"";border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:5px}
.video .dur{position:absolute;right:12px;bottom:12px;background:var(--ink);color:var(--paper);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;padding:4px 9px}
.vmeta{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;padding:12px 0 0;font-size:14px}

/* stats */
.stat{border-top:2px solid var(--ink);padding-top:20px}
.stat .n{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(2.6rem,6.5vw,4.2rem);line-height:.95;display:block;letter-spacing:-.02em}
.stat .w{font-size:17px;margin:12px 0 14px;max-width:36ch}
.stat .s{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);line-height:1.7}

/* lesson */
.draft{border:3px solid var(--a-700);padding:22px 24px;margin-bottom:32px;background:var(--a-100)}
[data-theme=dark] .draft{border-color:var(--a-500)}
.draft .lbl{color:var(--a-800)}
[data-theme=dark] .draft .lbl{color:var(--a-500)}
.draft .lbl::before{background:var(--a-700)}
.coursebar{border-top:3px solid var(--g-700);border-bottom:1px solid var(--hairline);padding:12px 0;display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
[data-theme=dark] .coursebar{border-top-color:var(--g-500)}
.outcome{border:1px solid var(--hairline);padding:26px;background:var(--card)}
.tryfirst{border:1px dashed var(--hairline);padding:26px;background:var(--card)}
.retr{border-left:3px solid var(--hairline);padding:2px 0 2px 20px;color:var(--slate)}
.dotoday{border:3px solid var(--g-700);padding:26px}
[data-theme=dark] .dotoday{border-color:var(--g-500)}
.dotoday .lbl{color:var(--g-700)}[data-theme=dark] .dotoday .lbl{color:var(--g-500)}
ol.steps{list-style:none;counter-reset:s;font-size:18px;line-height:1.55}
ol.steps li{counter-increment:s;padding-left:56px;position:relative;margin-bottom:24px}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-10px;font-family:'Instrument Serif',Georgia,serif;font-size:34px;color:var(--g-700)}
[data-theme=dark] ol.steps li::before{color:var(--g-500)}
ol.steps .see{display:block;color:var(--slate);font-size:16px;margin-top:6px}
ul.sq{list-style:none;font-size:17px}
ul.sq li{padding-left:20px;position:relative;margin-bottom:8px}
ul.sq li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--g-700)}
[data-theme=dark] ul.sq li::before{background:var(--g-500)}
.check{border-top:2px solid var(--ink);padding-top:16px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);line-height:1.95}
.check b{color:var(--ink);font-weight:500}
.nextcard{display:block;border:1px solid var(--hairline);padding:24px;text-decoration:none;color:inherit;background:var(--card)}
.nextcard:hover{border-color:var(--g-700)}
.sunkbox{background:var(--sunk);padding:20px 22px}
.wrongitem{margin-bottom:14px}

/* controls */
.btn{display:inline-block;background:var(--g-700);color:#fff;font-size:17px;font-weight:700;padding:16px 40px;text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.btn.act{background:var(--a-700)}
.btn.ter{background:var(--sunk);color:var(--ink)}
[data-theme=dark] .video .play{background:var(--g-500)}
[data-theme=dark] .video .play::after{border-left-color:#04382A}
[data-theme=dark] .btn{background:var(--g-500);color:#04382A}
[data-theme=dark] .btn.act{background:var(--a-500);color:#2A1D05}
[data-theme=dark] .btn.ter{background:var(--sunk);color:var(--ink)}
table.t{width:100%;border-collapse:collapse;font-size:16px}
table.t th{text-align:left;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);font-weight:500;border-bottom:2px solid var(--ink);padding:0 14px 10px 0}
table.t td{border-bottom:1px solid var(--hairline);padding:13px 14px 13px 0;vertical-align:top}
table.t tr:nth-child(even) td{background:var(--g-050)}
details.acc{border-top:1px solid var(--hairline);margin-top:-1px}
details.acc:last-of-type{border-bottom:1px solid var(--hairline)}
details.acc summary{list-style:none;cursor:pointer;padding:20px 0;font-size:18px;font-weight:700;display:flex;justify-content:space-between;gap:20px}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"+";font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:24px;color:var(--g-700);line-height:1}
details.acc[open] summary::after{content:"\2013"}
details.acc .b{padding-bottom:22px;max-width:68ch}
blockquote.q{border-left:4px solid var(--g-700);padding-left:24px}
blockquote.q p{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.2;font-style:italic}
.res{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.res a{border:1px solid var(--hairline);padding:16px 12px;text-align:center;text-decoration:none;color:var(--ink);font-size:14px;background:var(--card)}
.res a:hover{border-color:var(--g-700)}
.res a span{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.05em;color:var(--slate);margin-top:5px}
pre.code{background:var(--sunk);border-left:3px solid var(--g-700);padding:18px 20px;overflow-x:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px;line-height:1.75;color:var(--ink);white-space:pre-wrap}
.rail .blk{border-bottom:1px solid var(--hairline);padding-bottom:24px;margin-bottom:24px}
.rail .blk:last-child{border-bottom:0}
.rail h2,.rail h3{font-size:17px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.rail h2::after,.rail h3::after{content:"";flex:1;height:3px;background:var(--g-700)}
[data-theme=dark] .rail h2::after,[data-theme=dark] .rail h3::after{background:var(--g-500)}
.metarow{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hairline);font-size:15px}
.metarow:last-child{border-bottom:0}
.metarow b{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);font-weight:500;min-width:80px}
.rowlist a{display:block;border-bottom:1px solid var(--hairline);padding:22px 0;text-decoration:none;color:inherit}
.rowlist a:first-child{border-top:1px solid var(--hairline)}
.rowlist .t{font-family:'Instrument Serif',Georgia,serif;font-size:26px;line-height:1.15;display:block;margin:8px 0 6px}
.rowlist a:hover .t{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--g-700);text-decoration-thickness:2px}
.srcitem{border-bottom:1px solid var(--hairline);padding:22px 0}
.srcitem:first-of-type{border-top:1px solid var(--hairline)}

/* footer */
footer.site{background:var(--g-900);color:#E8EDE9;margin-top:72px;padding:52px 0 36px}
footer.site a{color:#E8EDE9;text-decoration:none;display:block;font-size:15px;margin-bottom:7px;opacity:.85}
footer.site a:hover{opacity:1;text-decoration:underline}
footer.site h2{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--g-300);font-weight:500;margin-bottom:12px}
.fg{display:grid;gap:32px}@media(min-width:48rem){.fg{grid-template-columns:repeat(4,1fr)}}
.fend{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--g-300);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.wave{display:block;width:100%;height:44px;margin:8px 0 0}

@media print{
 .util,.hdr,footer.site,.rail,.nextcard,.video,.tt,.skip{display:none!important}
 body{background:#fff;color:#000;font-size:11pt}
 .dotoday,.outcome,.tryfirst{border-color:#000!important}
 a[href^="/"]::after{content:" (howtobedigital.com" attr(href) ")";font-size:9pt;color:#444}
 .band{padding:12pt 0;border:0}
 ol.steps li{page-break-inside:avoid}
}

/* ---------------------------------------------------------------------------
   v3.1 — front page funnel and /start/ (the check).
   Added 22 August 2026. Square corners, no shadows, no icons, no gradients.
   --------------------------------------------------------------------------- */

.grid4{display:grid;gap:24px}
@media(min-width:48rem){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:68rem){.grid4{grid-template-columns:repeat(4,1fr)}}

.situation{font-size:14px;color:var(--slate);margin:16px 0 8px;line-height:1.5}
a.card{display:block;text-decoration:none;color:inherit}
a.card:hover{border-color:var(--g-700)}
[data-theme=dark] a.card:hover{border-color:var(--g-500)}
a.card .dm{display:block;font-size:24px;margin-top:2px}
a.card:hover .dm{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--g-700)}
[data-theme=dark] a.card:hover .dm{text-decoration-color:var(--g-500)}

.callout{border-left:4px solid var(--g-700);background:var(--sunk);padding:24px 26px}
[data-theme=dark] .callout{border-left-color:var(--g-500)}
.meta{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);display:block}
.slate{color:var(--slate)}
.small{font-size:14px;line-height:1.6}
.hidden{display:none}
hr.hairline{border:0;border-top:1px solid var(--hairline);margin:28px 0}

/* duotone photo slot: greyscale under a green screen, hairline frame */
.photo{border:1px solid var(--hairline);background:var(--sunk);position:relative;aspect-ratio:16/9;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.photo::after{content:"";position:absolute;inset:0;background:var(--g-700);mix-blend-mode:screen;opacity:.28;pointer-events:none}
[data-theme=dark] .photo::after{background:var(--g-900);mix-blend-mode:multiply;opacity:.4}
.photo .ph{position:absolute;inset:0;border:0}

/* ---- the check ---- */
.mode{display:inline-flex;border:1px solid var(--ink)}
.mode button{background:none;border:0;border-right:1px solid var(--ink);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.07em;text-transform:uppercase;padding:11px 20px;color:var(--ink);cursor:pointer}
.mode button:last-child{border-right:0}
.mode button[aria-pressed=true]{background:var(--ink);color:var(--paper)}

form fieldset{border:0;border-top:1px solid var(--hairline);padding:28px 0 4px;margin:0}
form fieldset:first-of-type{border-top:2px solid var(--ink)}
form legend{font-size:20px;line-height:1.3;padding:0;max-width:52ch}
.opts{display:grid;gap:10px;margin-top:18px;max-width:62ch}
.opts label{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--hairline);background:var(--card);padding:14px 16px;font-size:16px;line-height:1.45;cursor:pointer}
.opts label:hover{border-color:var(--g-700)}
[data-theme=dark] .opts label:hover{border-color:var(--g-500)}
.opts input{margin-top:.25em;accent-color:var(--g-700);width:18px;height:18px;flex:0 0 auto}
[data-theme=dark] .opts input{accent-color:var(--g-500)}
.opts label:has(input:checked){border-color:var(--g-700);border-width:2px;padding:13px 15px;background:var(--g-050)}
[data-theme=dark] .opts label:has(input:checked){border-color:var(--g-500);background:var(--tint)}
.opts input:focus-visible{outline:3px solid var(--g-700);outline-offset:2px}

.progress{height:6px;background:var(--sunk);margin-bottom:32px;position:sticky;top:0;z-index:5}
.progress b{display:block;height:100%;width:0;background:var(--g-700);transition:width .2s linear}
[data-theme=dark] .progress b{background:var(--g-500)}
@media (prefers-reduced-motion:reduce){.progress b{transition:none}}

.radar .grid{fill:none;stroke:var(--hairline);stroke-width:1}
.radar .axis{stroke:var(--hairline);stroke-width:1}
.radar text{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;fill:var(--slate)}
.radar .shape{fill:var(--g-700);fill-opacity:.18;stroke:var(--g-700);stroke-width:2}
.radar .dot{fill:var(--g-700)}
[data-theme=dark] .radar .shape{fill:var(--g-500);stroke:var(--g-500)}
[data-theme=dark] .radar .dot{fill:var(--g-500)}

.levels .row{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hairline)}
.levels .row:first-child{border-top:1px solid var(--hairline)}
.levels .bar{height:10px;background:var(--sunk)}
.levels .bar b{display:block;height:100%;background:var(--g-700)}
[data-theme=dark] .levels .bar b{background:var(--g-500)}
.levels .lv{grid-column:1/-1;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}

.band-scale{display:grid;gap:2px}
@media(min-width:44rem){.band-scale{grid-template-columns:repeat(5,1fr)}}
.band-scale div{background:var(--card);border:1px solid var(--hairline);padding:12px 14px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.band-scale div.on{background:var(--a-700);border-color:var(--a-700);color:#fff}
[data-theme=dark] .band-scale div.on{background:var(--a-500);border-color:var(--a-500);color:#2A1D05}

@media print{
 .mode,.progress,.noprint,form fieldset{display:none!important}
 .radar .shape{fill-opacity:.3}
}

/* the pointer-trail toggle. Same box as the theme control; one button, so
   aria-pressed carries the state rather than a pair of options. */
.tt.one{border:1px solid rgba(255,255,255,.45);background:none;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:7px 12px;color:rgba(255,255,255,.8);cursor:pointer}
.tt.one[aria-pressed=true]{background:#fff;color:var(--g-900)}
.tt.one[hidden]{display:none}

/* ---------------------------------------------------------------------------
   /agents/ — the magnetic poetry board.
   Tiles are buttons, not divs: everything the mouse can do, the keyboard can
   do. Dragging is a convenience on top, never the only way.
   --------------------------------------------------------------------------- */

.rail{border:3px solid var(--g-700);background:var(--card);padding:32px 28px}
[data-theme=dark] .rail{border-color:var(--g-500)}
.rail .sentence{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.4rem,3.4vw,2.3rem);line-height:1.3;display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.rail .fixed{color:var(--slate)}

.slot{display:inline-flex;align-items:center;justify-content:center;min-height:52px;min-width:min(100%,220px);max-width:100%;padding:8px 16px;border:2px dashed var(--hairline);background:var(--sunk);color:var(--slate);font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.3;text-align:left;cursor:pointer;font-weight:400}
.slot:hover,.slot:focus-visible{border-color:var(--g-700)}
[data-theme=dark] .slot:hover,[data-theme=dark] .slot:focus-visible{border-color:var(--g-500)}
.slot.full{border-style:solid;border-color:var(--ink);background:var(--card);color:var(--ink)}
.slot.over{border-color:var(--a-700);border-style:solid;background:var(--a-100)}
[data-theme=dark] .slot.over{border-color:var(--a-500);background:var(--sunk)}
.slot .hint{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase}

.tray{display:grid;gap:24px}
@media(min-width:52rem){.tray{grid-template-columns:repeat(2,1fr)}}
@media(min-width:76rem){.tray{grid-template-columns:repeat(4,1fr)}}
.pile h3{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);font-weight:500;padding-bottom:10px;border-bottom:2px solid var(--ink);margin-bottom:14px}
.pile .stack{display:flex;flex-wrap:wrap;gap:8px}

.tile{display:inline-block;border:1px solid var(--hairline);background:var(--card);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.35;padding:9px 13px;text-align:left;cursor:grab;touch-action:none;max-width:100%}
.tile:hover{border-color:var(--g-700)}
[data-theme=dark] .tile:hover{border-color:var(--g-500)}
.tile[aria-pressed=true]{border-color:var(--a-700);border-width:2px;padding:8px 12px;background:var(--a-100)}
[data-theme=dark] .tile[aria-pressed=true]{border-color:var(--a-500);background:var(--sunk)}
.tile.used{opacity:.35;cursor:default}
.tile.dragging{opacity:.4}
.tile.ghost{position:fixed;z-index:60;pointer-events:none;cursor:grabbing;border-color:var(--ink);border-width:2px}

.kept{list-style:none}
.kept li{border-bottom:1px solid var(--hairline);padding:18px 0;font-family:'Instrument Serif',Georgia,serif;font-size:20px;line-height:1.35;display:flex;gap:16px;justify-content:space-between;align-items:baseline}
.kept li:first-child{border-top:1px solid var(--hairline)}
.kept .drop{font-family:Inter,system-ui,sans-serif;font-size:14px;background:none;border:0;color:var(--slate);text-decoration:underline;text-underline-offset:3px;cursor:pointer;flex:0 0 auto}
.kept .drop:hover{color:var(--ink)}

.tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn.sm{font-size:15px;padding:12px 22px}

@media print{
 .tray,.tools,.noprint{display:none!important}
 .rail{border-color:#000}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}