/* Demoted titles (one h1 per page): an h2.h1 starts from the browser h1 defaults, then takes every h1 rule below. */
:where(h2.h1){font-size:2em;margin-block:.67em}
:root{--ink:#17213e;--paper:#f4f0e6;--cobalt:#275dde;--coral:#ef6a56;--gold:#efba39;--mint:#62c7a5;--violet:#9a6ee6;--rose:#d16b91;--line:rgba(23,33,62,.2);font:16px/1.45 ui-sans-serif,system-ui,sans-serif;color:var(--ink);background:var(--paper);color-scheme:light}
*{box-sizing:border-box}
body{margin:0;min-width:300px;min-height:100vh;background:linear-gradient(135deg,rgba(39,93,222,.06) 25%,transparent 25%) 0 0/28px 28px,var(--paper)}
button,a,input{font:inherit;color:inherit}
button{cursor:pointer}
.skip{position:fixed;top:-5rem;left:1rem;background:#000;color:#fff;padding:.7rem;z-index:30}
.skip:focus{top:1rem}
:focus-visible{outline:4px solid var(--coral);outline-offset:3px}
header{height:76px;padding:10px clamp(14px,4vw,60px);display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid var(--ink);background:rgba(244,240,230,.92);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand>span{width:46px;height:46px;background:var(--cobalt);color:#fff;border-radius:10px 2px 10px 2px;display:grid;place-items:center;font-weight:900}
.brand b{font-size:1.1rem}
.brand small{display:block;font-size:0.75rem;text-transform:uppercase;letter-spacing:.15em;color:#69708a}
nav{display:flex;gap:8px}
nav button{width:auto;min-width:44px;height:44px;border:2px solid var(--ink);background:#fff;padding:0 13px}
main{max-width:1550px;margin:auto}
.home{padding:clamp(50px,8vw,120px) clamp(18px,6vw,90px)}
.kicker{font-size:0.75rem;text-transform:uppercase;letter-spacing:.22em;color:var(--cobalt);font-weight:850}
.home h1{font:900 clamp(3.1rem,8vw,7.8rem)/.9 ui-sans-serif,system-ui;letter-spacing:-.06em;margin:25px 0;max-width:13ch}
.home h1 em{font-style:normal;color:var(--coral)}
.home>p:not(.kicker){max-width:59ch;font-size:1.08rem}
.modes{display:grid;grid-template-columns:1.2fr 1fr;gap:11px;max-width:920px;margin-top:40px}
.modes button{min-height:180px;border:3px solid var(--ink);background:#fff;padding:20px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;box-shadow:7px 7px 0 var(--ink)}
.modes button:first-child{background:var(--cobalt);color:#fff}
.modes span{margin-bottom:auto;font-size:0.75rem;text-transform:uppercase;letter-spacing:.13em}
.modes b{font-size:1.5rem}
.modes small{margin-top:5px}
.archive-bar{display:flex;flex-wrap:wrap;gap:9px;align-items:end;max-width:920px;margin-top:20px;padding:12px;border:3px solid var(--ink);background:#fff;box-shadow:4px 4px 0 var(--ink)}
.archive-bar label{display:grid;gap:4px;flex:1;font-size:0.75rem;text-transform:uppercase;font-weight:850}
.archive-bar input{min-height:44px;border:2px solid var(--ink);padding:0 10px;background:var(--paper)}
.archive-bar button{min-height:44px;border:2px solid var(--ink);background:var(--gold);font-weight:900;padding:0 16px}
.archive-bar small{flex-basis:auto;width:100%;min-width:0;align-self:stretch;font-size:0.75rem;color:#5a6074;overflow-wrap:anywhere}
.career-strip{display:grid;grid-template-columns:repeat(3,1fr);max-width:920px;margin-top:18px;border:3px solid var(--ink);background:#fff}
.career-strip div{padding:12px;border-right:2px solid var(--ink)}
.career-strip div:last-child{border:0}
.career-strip b,.career-strip span{display:block}
.career-strip b{font-size:1.5rem;color:var(--cobalt)}
.career-strip span{font-size:0.75rem;text-transform:uppercase;font-weight:850}
.badge-case{max-width:920px;padding:13px 0;border-bottom:2px solid var(--ink)}
.badge-case summary{cursor:pointer;color:var(--cobalt);font-size:0.75rem;text-transform:uppercase;font-weight:900;letter-spacing:.1em}
.badge-case ul{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0;list-style:none}
.badge-case li{border:2px dashed var(--ink);padding:8px;opacity:.42;background:#fff}
.badge-case li.earned{opacity:1;border-style:solid;background:var(--gold)}
.badge-case b,.badge-case span{display:block}
.badge-case span{font-size:0.75rem}
.local-ledger{max-width:920px;margin-top:14px;border:3px solid var(--ink);background:#fff;padding:14px;box-shadow:4px 4px 0 var(--ink)}.local-ledger>div{display:grid;gap:3px}.local-ledger>div>span,.local-ledger summary{color:var(--cobalt);font-size:0.75rem;text-transform:uppercase;font-weight:900;letter-spacing:.1em}.local-ledger ul,.local-ledger ol{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:7px}.local-ledger li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:9px;min-width:0}.local-ledger li b,.local-ledger li span{display:block;overflow-wrap:anywhere}.local-ledger li span{font-size:0.75rem;color:#52586b}.local-ledger button,.dialog-actions button,#history-play{min-height:44px;border:2px solid var(--ink);background:transparent;padding:0 12px}.local-ledger [data-discard-draft]{color:var(--coral)}
.load-head{display:grid;grid-template-columns:160px 1fr auto;gap:20px;align-items:end;padding:24px clamp(12px,3vw,46px) 18px}
.load-head>button{border:0;background:none;text-align:left}
.load-head>div>span{font-size:0.75rem;color:var(--cobalt);text-transform:uppercase;font-weight:850}
.load-head h1,.load-head h2.h1{font-size:clamp(2.2rem,4vw,4.2rem);line-height:.95;letter-spacing:-.04em;margin:4px 0}
.load-head p{margin:6px 0}
.density{border:3px solid var(--ink);padding:9px 12px;background:#fff;box-shadow:4px 4px 0 var(--ink)}
.density span,.density b{display:block}
.density span{font-size:0.75rem;text-transform:uppercase}
.density b{font-size:1.6rem}
.workspace{display:grid;grid-template-columns:290px minmax(430px,1fr) 250px;gap:13px;padding:0 clamp(12px,3vw,46px) 60px}
.palette,.scanner{background:#fff;border:3px solid var(--ink);padding:13px;box-shadow:5px 5px 0 var(--ink);align-self:start}
.panel-title,.scanner>span{font-size:0.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--cobalt);font-weight:850;margin-bottom:12px}
.piece{width:100%;min-height:74px;border:1px solid var(--line);background:var(--paper);display:grid;grid-template-columns:55px 1fr auto;align-items:center;text-align:left;padding:8px;gap:7px;margin-bottom:7px}
.piece b,.piece small{display:block}
.piece small{font-size:0.75rem;color:#4d536b}
.piece i{font-style:normal;font-size:0.75rem;text-transform:uppercase;color:var(--cobalt)}
.piece.selected{box-shadow:inset 0 0 0 3px var(--coral)}
.piece.placed{background:#e7f4ed}
.mini{--w:3;--h:2;display:grid;grid-template-columns:repeat(var(--w),10px);grid-template-rows:repeat(var(--h),10px);gap:2px}
.mini i{background:transparent}
.mini i.on{background:var(--cobalt)}
.piece-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:13px}
.piece-controls button{min-height:44px;border:2px solid var(--ink);background:transparent;font-size:0.75rem}
.container-wrap{min-width:0}
.container-label{display:flex;justify-content:space-between;font-size:0.75rem;text-transform:uppercase;font-weight:850;margin-bottom:7px}
.container{--cols:6;display:grid;grid-template-columns:repeat(var(--cols),minmax(54px,1fr));gap:4px;background:var(--ink);border:12px solid #7b7f89;padding:7px;min-height:480px}
.grid-cell{aspect-ratio:1;border:1px dashed #858ca2;background:#eef0f5;min-width:0}
.container[data-door=south] .grid-cell.door-edge{box-shadow:inset 0 -3px 0 var(--coral)}
.container[data-door=north] .grid-cell.door-edge{box-shadow:inset 0 3px 0 var(--coral)}
.container[data-door=east] .grid-cell.door-edge{box-shadow:inset -3px 0 0 var(--coral)}
.container[data-door=west] .grid-cell.door-edge{box-shadow:inset 3px 0 0 var(--coral)}
.grid-cell.blocked{background:repeating-linear-gradient(135deg,#d9dbe2 0 7px,#aeb3c0 7px 11px);border-style:solid;color:#3f4553;cursor:not-allowed}
.grid-cell.chilled:not(.filled){background:#d9efff;border-color:#4d87b5}
.grid-cell.chilled:not(.filled) span{color:#326b96}
.grid-cell.filled{background:var(--piece);border:2px solid var(--ink)}
.grid-cell.active{box-shadow:inset 0 0 0 5px #fff,0 0 0 3px var(--coral)}
.grid-cell.hint-anchor{animation:anchor 1s infinite;background:var(--gold)}
.grid-cell.just-placed{animation:loaded .32s ease-out}
.grid-cell span{font-size:0.75rem;font-weight:900}
.container-wrap>p{font-size:0.75rem;color:#6b7184}
.scanner h2{font-size:1.45rem}
.scanner dl div{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:7px 0;font-size:0.75rem}
.scanner dd{margin:0;text-align:right}
.scanner>#issues{min-height:75px;background:#e5f5ed;padding:10px;font-size:0.75rem;margin:15px 0}
.scanner>#issues.warning{background:#fee0db;color:#7c1d12}
.scan-score{border:2px solid var(--cobalt);padding:10px}
.scan-score small,.scan-score b{display:block}
.scan-score b{font-size:1.8rem}
.scanner>#finish{width:100%;min-height:48px;border:0;background:var(--cobalt);color:#fff;font-weight:900;margin-top:10px}
.scanner>#finish:disabled{opacity:.35}
.sealed{margin:clamp(50px,8vw,120px) clamp(18px,8vw,120px);max-width:950px;border:3px solid var(--ink);padding:clamp(24px,5vw,56px);background:#fff;box-shadow:10px 10px 0 var(--cobalt)}
.sealed>span{color:var(--cobalt);text-transform:uppercase;letter-spacing:.15em;font-size:0.75rem;font-weight:900}
.sealed h1,.sealed h2.h1{font-size:clamp(3rem,7vw,7rem);line-height:.9;letter-spacing:-.05em}
.sealed>div{border-block:2px solid var(--ink);padding:18px 0;margin:25px 0}
.sealed>div b,.sealed>div small{display:block}
.sealed>div b{font-size:2.4rem;color:var(--coral)}
.sealed>.result-report{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;border:0;padding:0}
.result-report div{border:2px solid var(--ink);padding:10px;min-width:0}
.result-report div b,.result-report div span{display:block}
.result-report div b{font-size:1.05rem;color:var(--cobalt)}
.result-report div span{font-size:0.75rem;text-transform:uppercase;font-weight:850}
.new-badges{color:var(--cobalt);font-weight:850}
.sealed>.load-playback{border:2px solid var(--ink);padding:12px;background:var(--paper)}
.load-playback>div{display:flex;align-items:center;justify-content:space-between}
.load-playback button{min-height:44px;border:2px solid var(--ink);background:#fff;font-weight:850}
.load-playback ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;padding:0;list-style:none}
.load-playback li{display:grid;grid-template-columns:27px 1fr;padding:7px;border:1px solid var(--line);font-size:0.75rem;background:#fff}
.load-playback li span{grid-row:1/3;display:grid;place-items:center;background:var(--ink);color:#fff;margin-right:6px}
.load-playback li small{font-size:0.75rem}
.load-playback li.playing{background:var(--gold);transform:translateY(-3px)}
.sealed>button{min-height:48px;border:2px solid var(--ink);background:transparent;padding:0 18px;margin:4px}
.sealed>button:first-of-type{background:var(--cobalt);color:#fff}
footer{border-top:3px solid var(--ink);padding:21px clamp(14px,4vw,60px);display:flex;justify-content:space-between;font-size:0.75rem}
footer a{margin-left:14px}
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,12px);background:var(--ink);color:#fff;padding:10px 14px;opacity:0;transition:.2s;z-index:30}
.toast.show{opacity:1;transform:translate(-50%,0)}
dialog{width:min(590px,calc(100% - 24px));background:#fff;color:var(--ink);border:3px solid var(--ink);padding:27px;box-shadow:8px 8px 0 var(--cobalt)}
dialog::backdrop{background:rgba(23,33,62,.7)}
dialog form button{float:right;width:44px;height:44px;border:2px solid var(--ink);background:transparent}
dialog>span{color:var(--cobalt);text-transform:uppercase;font-size:0.75rem;font-weight:900}
dialog h2{font-size:2.2rem}
dialog>label{display:flex;align-items:center;gap:10px;min-height:46px;border-bottom:1px solid var(--line)}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dialog-actions button:first-child{background:var(--cobalt);color:#fff}.history-dialog ol{list-style:none;padding:0;display:grid;gap:7px}.history-dialog li{display:grid;grid-template-columns:30px 1fr;gap:7px;padding:10px;border:1px solid var(--line)}.history-dialog li small{grid-column:2;font-size:0.75rem}.history-dialog li span{grid-row:1/3;display:grid;place-items:center;background:var(--ink);color:#fff}.history-dialog li.playing{background:var(--gold)}
.data{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:18px}
.data button,.data label{min-height:44px;border:2px solid var(--ink);display:grid;place-items:center;background:transparent}
.data button:last-child{grid-column:1/-1;color:var(--coral)}
.data input{position:absolute;opacity:0}
html[data-contrast=high]{--ink:#000;--paper:#fff;--line:#000;--cobalt:#003cbe;--coral:#b92916}
html[data-large=yes]{font-size:19px}
html[data-motion=reduced] *{transition:none!important}
@keyframes anchor{50%{box-shadow:inset 0 0 0 5px #fff,0 0 0 4px var(--coral)}}
@keyframes loaded{50%{transform:scale(.9);filter:brightness(1.15)}}
html[data-motion=reduced] .grid-cell{animation:none!important}

@media(max-width:1150px){.workspace{grid-template-columns:270px 1fr}
.scanner{grid-column:1/-1}
}
@media(max-width:800px){.workspace{grid-template-columns:1fr}
.container-wrap{order:1}
.palette{order:2}
.scanner{order:3}
.load-head{grid-template-columns:1fr auto}
.load-head>button{grid-column:1/-1}
.modes{grid-template-columns:1fr}
.badge-case ul{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){header{height:68px}
.brand small{display:none}
nav button{padding-inline:9px}
.home{padding:40px 15px 55px}
.home h1{font-size:3.15rem}
.load-head{padding:18px 12px;grid-template-columns:1fr;gap:11px;align-items:start}
.load-head>button{grid-column:1/-1}
.load-head h1,.load-head h2.h1{font-size:2.35rem}
.density{display:flex;align-items:center;justify-content:space-between;width:100%}
.workspace{padding:0 9px 50px}
.container{grid-template-columns:repeat(var(--cols),48px);overflow:auto;min-height:390px;border-width:8px}
.container-wrap{overflow:auto}
.grid-cell{width:48px}
.sealed h1,.sealed h2.h1{font-size:3.5rem}
.archive-bar{flex-direction:column;align-items:stretch}
.local-ledger li{grid-template-columns:1fr 1fr}.local-ledger li div{grid-column:1/-1}.dialog-actions{grid-template-columns:1fr}
.career-strip{grid-template-columns:1fr}
.career-strip div{border-right:0;border-bottom:2px solid var(--ink)}
.badge-case ul,.sealed>.result-report{grid-template-columns:1fr 1fr}
footer{flex-direction:column;gap:10px}
}

@media(max-width:360px){header{padding-inline:10px}.brand b{display:none}.home{padding-inline:10px}.workspace{padding-inline:5px}.load-head{padding-inline:8px}.sealed{margin-inline:8px;padding-inline:18px}.container{grid-template-columns:repeat(var(--cols),44px)}.grid-cell{width:44px}}

@media(pointer:coarse){button{min-height:44px}}

/* Portfolio signature: dispatch manifest, parcel conveyor, and shipping-label result. */
.home[hidden]{display:none!important}
.dispatch-intro{min-width:0}.dispatch-intro>p:not(.kicker){max-width:59ch;font-size:1.08rem}.conveyor-preview{position:relative;min-height:170px;display:flex;align-items:center;gap:clamp(8px,2vw,22px);padding:24px;border:3px solid var(--ink);background:repeating-linear-gradient(90deg,#c4c7cc 0 24px,#9da2aa 25px 31px);overflow:hidden}
.conveyor-preview span{position:relative;z-index:1;width:74px;height:66px;display:grid;place-items:center;border:3px solid var(--ink);background:var(--gold);font-size:1.4rem;font-weight:900;box-shadow:5px 5px 0 var(--ink)}.conveyor-preview span:nth-child(2){background:var(--coral)}.conveyor-preview span:nth-child(3){background:#b8e5f5}.conveyor-preview span:nth-child(4){background:var(--mint)}
.conveyor-preview i{position:absolute;left:0;right:0;bottom:16px;height:12px;border-block:3px solid var(--ink);background:repeating-linear-gradient(90deg,var(--ink) 0 3px,transparent 3px 30px)}.conveyor-preview b{margin-left:auto;align-self:flex-start;background:#fff;border:2px solid var(--ink);padding:7px;font-size:0.75rem;letter-spacing:.16em}
.dispatch-ledger{display:grid;gap:13px;margin-top:24px}.dispatch-ledger>.archive-bar,.dispatch-ledger>.career-strip,.dispatch-ledger>.badge-case,.dispatch-ledger>.local-ledger{max-width:none;margin-top:0}
@media(min-width:900px){
  .home{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px 30px;align-items:start}.home>.dispatch-intro{grid-column:1/7}.dispatch-intro h1{font-size:clamp(3.2rem,6vw,6.5rem);margin-top:14px}.home>.conveyor-preview{grid-column:1/7}.home>.modes{grid-column:7/-1;grid-row:1/span 2;grid-template-columns:1fr;max-width:none;margin:0;padding:18px;border:3px solid var(--ink);background:#fff;box-shadow:9px 9px 0 var(--ink)}.home>.modes::before{content:"ACTIVE DISPATCH MANIFEST";font-size:0.75rem;font-weight:900;letter-spacing:.16em;border-bottom:2px dashed var(--ink);padding-bottom:12px}.home>.modes button{min-height:130px;box-shadow:none;border-width:2px;border-style:dashed;display:grid;grid-template-columns:110px 1fr;grid-template-rows:auto auto}.home>.modes button span{grid-row:1/3;margin:0;border-right:2px solid currentColor;align-self:stretch;display:flex;align-items:center}.home>.modes button b,.home>.modes button small{padding-left:16px}.home>.modes button:first-of-type{border-style:solid}
  .home>.dispatch-ledger{grid-column:1/-1;grid-template-columns:.9fr 1.1fr;border-top:3px solid var(--ink);padding-top:20px}.dispatch-ledger>.archive-bar{grid-column:1}.dispatch-ledger>.career-strip{grid-column:1}.dispatch-ledger>.badge-case{grid-column:1}.dispatch-ledger>.draft-ledger,.dispatch-ledger>.history-ledger{grid-column:2}.dispatch-ledger>.history-ledger{grid-row:1/span 3}
  .sealed{max-width:1280px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);gap:12px 26px;position:relative;background:linear-gradient(90deg,#fff 0 69%,#f4f0e6 69%)}.sealed::before{content:"|||| ||| || |||| | |||";position:absolute;right:28px;bottom:26px;max-width:220px;font:900 2.1rem/1 monospace;letter-spacing:-.12em;overflow:hidden;white-space:nowrap;color:var(--ink)}
  .sealed>span,.sealed>h1,.sealed>h2.h1,.sealed>p{grid-column:1}.sealed>h1,.sealed>h2.h1{margin-block:8px}.sealed>div:not(.result-report){grid-column:2;grid-row:1/span 3;display:flex;flex-direction:column;justify-content:center;border:3px solid var(--ink);padding:20px;margin:0;background:var(--gold);transform:rotate(2deg)}.sealed>div:not(.result-report) b{font-size:3rem;color:var(--ink)}
  .sealed>.result-report,.sealed>.new-badges,.sealed>.load-playback{grid-column:1/-1}.sealed>.load-playback{transform:none;display:block;background:#e8e2d5}.sealed>button{justify-self:start;margin-left:0}
}
@media(max-width:899px){.conveyor-preview{margin:25px 0}.dispatch-ledger{grid-template-columns:1fr}.home>.modes{max-width:none}.sealed{width:auto}}
@media(max-width:460px){.conveyor-preview{min-height:130px;padding:14px;gap:7px}.conveyor-preview span{width:48px;height:48px;box-shadow:3px 3px 0 var(--ink)}.conveyor-preview b{display:none}.dispatch-ledger{gap:10px}}

.badge-case summary,.local-ledger summary{min-height:44px;display:flex;align-items:center}

button{min-width:44px;min-height:44px}
header a,footer a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
dialog label,details>summary,.file-button{min-height:44px}

#archive-status{display:block;flex-basis:auto;align-self:stretch;width:100%;min-width:0;padding:8px 10px;border:2px dashed var(--ink);background:#fff;color:#3f465e;font-size:0.75rem;font-weight:750;overflow-wrap:anywhere}
.campaign-picker{max-width:920px;border:3px solid var(--ink);background:#fff;padding:12px;box-shadow:4px 4px 0 var(--ink)}.campaign-picker summary{color:var(--cobalt);font-size:0.75rem;text-transform:uppercase;font-weight:900;letter-spacing:.1em;cursor:pointer}.campaign-picker ol{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.campaign-picker li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:8px;border:2px dashed var(--ink);padding:7px;min-width:0}.campaign-picker li>span{width:32px;height:32px;display:grid;place-items:center;background:var(--gold);font-weight:900}.campaign-picker b,.campaign-picker small{display:block;overflow-wrap:anywhere}.campaign-picker small{font-size:0.75rem;color:#535a70}.campaign-picker button{border:2px solid var(--ink);background:var(--paper);font-weight:850;padding-inline:10px}.campaign-picker button:disabled{opacity:.35}.campaign-picker li.complete{border-style:solid;background:#e7f4ed}.dispatch-ledger>.campaign-picker{max-width:none;margin:0}.shortcut-help{font-size:0.75rem;font-weight:750;border-top:2px dashed var(--ink);padding-top:8px;color:#555c70}
@media(min-width:900px){.dispatch-ledger>.campaign-picker{grid-column:1}.dispatch-ledger>.history-ledger{grid-row:1/span 4}}
@media(max-width:650px){.campaign-picker ol{grid-template-columns:1fr}.campaign-picker li{grid-template-columns:34px minmax(0,1fr)}.campaign-picker button{grid-column:2;justify-self:start}}
.guide-page{width:min(1120px,100%);padding:clamp(38px,7vw,90px) clamp(14px,5vw,58px)}.guide-page article{border:3px solid var(--ink);background:#fff;box-shadow:10px 10px 0 var(--cobalt);padding:clamp(24px,5vw,56px)}.guide-kicker{color:var(--cobalt);font-size:0.75rem;text-transform:uppercase;font-weight:900;letter-spacing:.16em}.guide-page h1{font:900 clamp(2.8rem,7vw,6rem)/.9 ui-sans-serif,system-ui;margin:18px 0;letter-spacing:-.05em}.guide-page h1 em{font-style:normal;color:var(--coral)}.guide-lead{max-width:68ch;font-size:1.08rem}.guide-page section{margin-top:38px;padding-top:18px;border-top:3px solid var(--ink)}.guide-page h2{font-size:clamp(1.6rem,3vw,2.35rem)}.guide-page li{margin-block:.7rem}.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.guide-grid p,.guide-page details{border:2px dashed var(--ink);background:var(--paper);padding:14px;margin:8px 0}.guide-page details summary{cursor:pointer;color:var(--cobalt);font-weight:900}.guide-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px}.guide-actions a{min-height:48px;display:inline-flex;align-items:center;padding:0 16px;border:2px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:850}.guide-actions a:first-child{background:var(--cobalt);color:#fff}@media(max-width:600px){.guide-grid{grid-template-columns:1fr}.guide-page article{padding-inline:17px;box-shadow:6px 6px 0 var(--cobalt)}}
.more-games{max-width:920px;margin:34px auto 0;padding:20px;border:1px solid var(--line);border-radius:0}
.more-games h2{font-size:1rem;margin:0 0 6px}
.more-games p{margin:0 0 14px;font-size:0.82rem;opacity:.85}
.more-games ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.more-games li{display:grid;gap:2px;min-width:0}
.more-games li a{display:flex;align-items:center;min-height:44px;font-size:0.88rem;overflow-wrap:anywhere}
.more-games li span{font-size:0.75rem;opacity:.8}

.rules-panel{margin:.75rem 0;padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px}
.rules-panel>span{display:block;font-size:0.8125rem;letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin-bottom:.4rem}
#rule-list{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
#rule-list li{display:grid;grid-template-columns:1.5rem 1fr auto;gap:.5rem;align-items:start;font-size:0.8125rem;line-height:1.35}
#rule-list u{font-style:normal;text-decoration:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:5px;font-weight:700}
#rule-list li[data-state=met] u{background:#d6f0e4;color:#0f5d40}
#rule-list li[data-state=broken] u{background:#fbdad3;color:#8a2113}
#rule-list li[data-state=pending] u{background:#e7e3d7;color:#4a5165}
#rule-list small{font-size:0.75rem;color:#4a5165;white-space:nowrap}
#rule-list li[data-state=broken] small{color:#8a2113;font-weight:700}

.scan-score em{display:block;font-style:normal;font-size:0.8125rem;color:#4a5165;margin-top:.2rem}
.scan-score em.warning{color:#8a2113;font-weight:700}

.finish-help{margin:.5rem 0 0;font-size:0.8125rem;color:#2a3350}
.finish-help b{display:block;margin-bottom:.25rem}
.finish-help ul{margin:0;padding-left:1.1rem;display:grid;gap:.2rem}
.finish-help.warning{color:#8a2113}

.grid-cell.refused{animation:refuse .55s ease}
@keyframes refuse{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
html[data-motion=reduced] .grid-cell.refused{animation:none;box-shadow:inset 0 0 0 3px #8a2113}

.stats-board .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin:.75rem 0}
.stats-board .stat-grid div{padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px}
.stats-board .stat-grid b{display:block;font-size:1.35rem}
.stats-board .stat-grid span{font-size:0.8125rem;color:#4a5165}
.stat-grades{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.stat-grades li{display:grid;grid-template-columns:1fr auto;gap:.25rem .75rem;font-size:0.875rem;padding:.4rem .1rem;border-bottom:1px solid var(--line)}
.stat-grades li i{grid-column:1/-1;display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--cobalt) var(--share,0%),rgba(23,33,62,.12) var(--share,0%))}
.stat-grades li.empty{grid-template-columns:1fr;color:#4a5165}

.coach{position:sticky;bottom:1rem;z-index:5;margin:1rem auto 0;max-width:44rem;padding:1rem 1.1rem;border:3px solid var(--ink);background:#fff;box-shadow:5px 5px 0 var(--ink)}
.coach b{display:block;font-size:0.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);font-weight:850}
.coach p{margin:.4rem 0 .8rem;font-size:0.9375rem}
.coach div{display:flex;flex-wrap:wrap;gap:.6rem}
.coach button{min-height:44px;padding:0 1.1rem;border:2px solid var(--ink);background:#fff;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.coach button#coach-next{background:var(--cobalt);border-color:var(--ink);color:#fff;font-weight:900}
.coach-target{outline:3px dashed var(--coral);outline-offset:3px}

.keys{display:grid;gap:.45rem;margin:.75rem 0}
.keys div{display:grid;grid-template-columns:minmax(8rem,auto) 1fr;gap:.75rem;font-size:0.875rem;align-items:baseline}
.keys dt{font-weight:800;color:var(--cobalt)}
.keys dd{margin:0}
@media (max-width:520px){.keys div{grid-template-columns:1fr}}

.update-prompt{position:fixed;z-index:40;right:16px;bottom:16px;max-width:min(340px,calc(100vw - 32px));display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#ffffff;color:var(--ink);box-shadow:0 14px 40px rgba(0,0,0,.3)}
.update-prompt-text{margin:0;font-size:.875rem;line-height:1.45}
.update-prompt-actions{display:flex;flex-wrap:wrap;gap:8px}
.update-prompt button{min-width:44px;min-height:44px;padding:0 16px;border-radius:14px;font:inherit;font-size:.875rem;cursor:pointer}
.update-prompt-reload{border:1px solid transparent;background:var(--cobalt);color:#ffffff;font-weight:700}
.update-prompt-dismiss{border:1px solid var(--line);background:transparent;color:inherit}
@media(prefers-reduced-motion:no-preference){.update-prompt{animation:update-prompt-in .18s ease-out}
@keyframes update-prompt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media(max-width:560px){.update-prompt{left:12px;right:12px;bottom:84px;max-width:none}}

/* Wave 3 polish: legal-anchor marks, on-screen rotate, sealed views, share, archive strip. */
.grid-cell.legal-anchor:not(.filled){background:repeating-linear-gradient(45deg,#dff3e8 0 6px,#a9dcc4 6px 10px);border:2px solid #1f7a58}
.grid-cell.legal-anchor:not(.filled)::after{content:'+';display:block;font-size:0.875rem;font-weight:900;color:#12523a}
.selected-rotate{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin:.5rem 0 .2rem}
.selected-rotate button{min-height:44px;border:1px solid var(--ink);border-radius:8px;background:var(--paper);padding:0 14px;font-weight:750}
.selected-rotate button[disabled]{opacity:.55}
.selected-rotate span{font-size:0.8125rem;color:#3b456b}
.next-try{margin:.7rem auto 0;max-width:640px;padding:.7rem .85rem;border-left:4px solid var(--cobalt);background:rgba(39,93,222,.1);font-size:0.875rem;line-height:1.5;text-align:left}
.sealed-views{display:grid;gap:.9rem;margin:1rem auto 0;max-width:640px;padding:.85rem;border:1px solid var(--line);border-radius:12px;background:rgba(244,240,230,.9);text-align:left}
.sealed-views>b{font-size:0.875rem;letter-spacing:.06em;text-transform:uppercase;color:#3b456b}
.sealed-view h3{margin:0 0 .25rem;font-size:0.9375rem}
.sealed-view p{margin:0 0 .5rem;font-size:0.8125rem;line-height:1.55;color:#3b456b}
.top-view{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:2px;max-width:340px}
.top-view i{aspect-ratio:1;display:grid;place-items:center;font-style:normal;font-size:0.75rem;font-weight:900;border:1px solid var(--line);background:var(--piece);color:var(--ink)}
.top-view i.empty{background:#e7e3d7}
.top-view i.restraint{background:repeating-linear-gradient(135deg,#d9dbe2 0 6px,#aeb3c0 6px 10px);border-style:solid;font-size:0.875rem}
.top-view i.door{box-shadow:inset 0 -3px 0 var(--coral)}
.side-view{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.side-view li{display:grid;gap:.15rem;padding:.45rem .55rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-size:0.8125rem}
.side-view li span{font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:#3b456b}
.share-panel{margin:1rem auto 0;max-width:640px;padding:.85rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);display:grid;gap:.55rem;justify-items:start;text-align:left}
.share-panel>b{font-size:0.875rem;letter-spacing:.06em;text-transform:uppercase;color:#3b456b}
.share-panel pre{margin:0;width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-word;font:0.8125rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}
.share-panel button{min-height:44px;border:0;border-radius:8px;background:var(--cobalt);color:#fff;font-weight:850;padding:0 18px}
.share-panel span{font-size:0.8125rem;color:#1d3f96;min-height:1.2em}
.archive-strip{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0;padding:0;width:100%}
.archive-strip button{min-height:44px;min-width:44px;display:grid;gap:.1rem;justify-items:center;align-content:center;padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.archive-strip li[data-played=yes] button{border-color:var(--cobalt);background:rgba(39,93,222,.1)}
.archive-strip u{font-style:normal;text-decoration:none;font-size:0.75rem;line-height:1;color:var(--cobalt)}
.archive-strip span{font-size:0.75rem;color:#3b456b}
.archive-strip b{font-size:0.75rem;font-weight:850}

.share-panel[hidden],.depth-sum[hidden],.sealed-views[hidden]{display:none}
@media(min-width:900px){.sealed>.next-try,.sealed>.sealed-views,.sealed>.share-panel{grid-column:1/-1;max-width:none;align-self:start}.sealed>button{align-self:start}}
@media(min-width:900px){.sealed-views{grid-template-columns:1fr 1fr;align-items:start}.sealed-views>b{grid-column:1/-1}}

/* Play screen in one view: a compact load line, a container whose square cells fit both the width and the height
   left under the header, the parcels and rotate controls beside it (desktop) or under it (phone), and Seal the
   load in reach. A long manifest scrolls inside its own panel rather than pushing the container off screen. */
#game:not([hidden]){display:flex;flex-direction:column}
#game>.load-head{order:-1}
.load-head{padding:8px clamp(12px,3vw,46px) 6px;align-items:center}
.load-head h1,.load-head h2.h1{font-size:clamp(1.6rem,2.8vw,2.4rem);margin:2px 0 0}
.load-head p{margin:2px 0;font-size:.875rem}
.load-head>*{min-width:0}
.brief-more{display:none}
.density b{font-size:1.5rem}
.workspace{padding-bottom:20px}
.container-wrap{container-type:inline-size}
.container{--cell:min(calc((100cqw - 38px - (var(--cols) - 1) * 4px) / var(--cols)), calc((var(--ux-fit-h,480px) - 62px - (var(--rows,6) - 1) * 4px) / var(--rows,6)));grid-template-columns:repeat(var(--cols),var(--cell));grid-auto-rows:var(--cell);justify-content:center;min-height:0;width:max-content;max-width:100%;margin:0 auto}
.grid-cell{aspect-ratio:auto}
.container-wrap>p{margin:6px 0 0}
.palette,.scanner{padding:10px 12px}
.palette{display:flex;flex-direction:column}
.palette>.piece-controls{order:-1;margin:0 0 8px;grid-template-columns:1fr 1fr 1fr}
.palette>.panel-title{order:-2}
.piece{min-height:50px;padding:5px 8px;margin-bottom:5px}
.palette>.shortcut-help{display:none}
.scanner{display:flex;flex-direction:column}
.scanner>#issues{min-height:0;margin:8px 0}
.scanner>.scan-score{order:3}
.scanner>#finish{order:4}
.scanner>#finish-help{order:5}
.scanner>.rules-panel{order:6;margin-top:10px}
@media(min-width:801px){
.palette,.scanner{max-height:var(--ux-fit-h,520px);overflow:auto}
}
@media(max-width:800px){
.load-head{grid-template-columns:auto 1fr!important;gap:2px 10px}
.load-head>button{grid-column:1!important;grid-row:1}
.load-head>.density{grid-column:2;grid-row:1;justify-self:end;text-align:right}
.load-head>div:not(.density){grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px}
.load-head>div:not(.density)>#client,.load-head>div:not(.density)>#brief{grid-column:1/-1}
.load-head>div:not(.density)>h1,.load-head>div:not(.density)>h2.h1{grid-column:1;grid-row:2}
.load-head>div:not(.density)>.brief-more{grid-column:2;grid-row:2}
.load-head h1,.load-head h2.h1{font-size:1.35rem}
.load-head #brief{font-size:.75rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#game.brief-open .load-head #brief{display:block}
.brief-more{font-size:.75rem}
.brief-more{display:inline-flex!important;align-items:center;min-height:44px;padding:0;border:0;background:none;font:700 .75rem/1 inherit;text-decoration:underline;text-underline-offset:3px;color:inherit;cursor:pointer}
.workspace{padding:0 4px 40px;gap:3px}
.container{border-width:4px;padding:3px;gap:2px;overflow:visible;--cell:min(calc((100cqw - 14px - (var(--cols) - 1) * 2px) / var(--cols)), 50px)}
.container-wrap{overflow:visible}
.container-wrap>p,.container-label{display:none}
.palette{padding:4px}
.palette>.panel-title{display:none}
#pieces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
#pieces .piece{margin:0;min-height:48px;grid-template-columns:30px 1fr;padding:3px 4px;gap:4px}
#pieces .piece small,#pieces .piece>i{display:none}
#pieces .mini{grid-template-columns:repeat(var(--w),7px);grid-template-rows:repeat(var(--h),7px);gap:1px}
#pieces .piece b{font-size:.75rem;line-height:1.2}
.palette>.piece-controls{grid-template-columns:repeat(4,1fr);gap:4px;margin:0 0 6px}
.piece-controls button{font-size:.6875rem;padding:0 2px}
.scanner{padding:4px 6px}
.scanner>#finish{order:-1;margin:0 0 6px}
.scanner>span{display:none}
}