:root { --paper:#f2eee4; --ink:#151918; --muted:#626660; --line:#aaa99f; --red:#d94b35; --yellow:#f0b64b; --blue:#246b78; --serif:Georgia,"Times New Roman",serif; --sans:Inter,"Segoe UI",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.5; }
button,input { font:inherit; }
button,label { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
.skip-link { position:fixed; z-index:50; top:.5rem; left:.5rem; padding:.7rem 1rem; background:#fff; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.topbar { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 clamp(1rem,4vw,4rem); border-bottom:1px solid var(--ink); font-size:.75rem; font-weight:750; text-transform:uppercase; }
.topbar p { margin:0; }
.back { text-decoration:none; }
.intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,480px); gap:3rem; align-items:end; padding:clamp(4rem,9vw,9rem) clamp(1rem,6vw,7rem) clamp(3rem,6vw,6rem); border-bottom:1px solid var(--ink); }
.eyebrow { margin:0 0 1rem; color:#963421; font-size:.72rem; font-weight:850; text-transform:uppercase; }
.intro h1 { grid-column:1; margin:0; font:400 clamp(4rem,10vw,10rem)/.78 var(--serif); }
.lead { grid-column:2; grid-row:1/span 2; margin:0; font-size:clamp(1rem,1.6vw,1.3rem); }
.rules { padding:2rem clamp(1rem,6vw,7rem); background:var(--ink); color:#f7f1e6; }
.rules h2 { margin:0 0 1.2rem; font-size:.72rem; text-transform:uppercase; }
.rules ol { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:0; padding:0; list-style:none; background:#737570; counter-reset:step; }
.rules li { display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem; padding:1rem 1.2rem; background:var(--ink); counter-increment:step; }
.rules li::before { content:counter(step,decimal-leading-zero); color:var(--yellow); font-weight:900; }
.rules b { font-family:var(--serif); font-size:1.2rem; font-weight:400; }
.rules span { grid-column:2; color:#c6c5bd; font-size:.84rem; }
.workbench { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); min-height:760px; border-bottom:1px solid var(--ink); }
.controls { padding:clamp(2rem,5vw,5rem); border-right:1px solid var(--ink); }
.control-head { display:grid; grid-template-columns:42px 1fr; gap:1rem; align-items:start; margin-bottom:2.5rem; }
.panel-number { margin:.25rem 0 0; color:var(--red); font-size:.8rem; font-weight:900; }
.control-head h2 { margin:0; font:400 clamp(2.3rem,4vw,4.5rem)/.9 var(--serif); }
.phrase-label,legend { display:block; margin-bottom:.65rem; font-size:.73rem; font-weight:850; text-transform:uppercase; }
.phrase-row { display:grid; grid-template-columns:1fr 48px; gap:.5rem; margin-bottom:2.2rem; }
.phrase-row input { width:100%; min-width:0; height:50px; padding:0 .85rem; border:1px solid var(--ink); border-radius:0; background:#fffdf8; }
.dice { border:1px solid var(--ink); background:var(--yellow); font-size:1.3rem; cursor:pointer; }
fieldset { margin:0 0 1.7rem; padding:0; border:0; }
.segments { display:grid; grid-template-columns:repeat(3,1fr); }
.segments input,.swatches input { position:absolute; opacity:0; pointer-events:none; }
.segments label { min-height:44px; display:grid; place-items:center; padding:.5rem; border:1px solid var(--ink); border-right:0; background:#fffdf8; font-size:.78rem; cursor:pointer; }
.segments label:last-of-type { border-right:1px solid var(--ink); }
.segments input:checked+label { background:var(--ink); color:#fff; }
.segments input:focus-visible+label,.swatches input:focus-visible+label { outline:3px solid var(--blue); outline-offset:3px; }
.swatches { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.swatches label { min-height:64px; display:flex; align-items:center; gap:.55rem; padding:.55rem; border:1px solid var(--line); background:#fffdf8; cursor:pointer; font-size:.74rem; }
.swatches input:checked+label { border:3px solid var(--ink); padding:calc(.55rem - 2px); }
.swatches i { width:24px; height:38px; flex:0 0 auto; background:linear-gradient(#d94b35 0 33%,#f0b64b 33% 66%,#246b78 66%); }
.swatches i.print { background:linear-gradient(#e24c96 0 33%,#eac932 33% 66%,#138a9a 66%); }
.swatches i.night { background:linear-gradient(#111927 0 33%,#d66340 33% 66%,#dfe5cf 66%); }
.make,.result-actions button { min-height:50px; padding:.8rem 1rem; border:1px solid var(--ink); background:var(--red); color:#fff; font-weight:850; cursor:pointer; }
.make { width:100%; margin-top:.3rem; box-shadow:6px 6px 0 var(--ink); }
.make:hover { transform:translate(2px,2px); box-shadow:4px 4px 0 var(--ink); }
.status { min-height:1.5em; margin:1rem 0 0; color:var(--muted); font-size:.8rem; }
.result { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:1.2rem; padding:clamp(1.2rem,4vw,4rem); background:#cbc8bd; }
.result-head { display:flex; justify-content:space-between; align-items:end; }
.result-head p:last-child { margin:0; text-align:right; }
.result-head span,.result-head b { display:block; font-size:.72rem; text-transform:uppercase; }
#poster { display:block; width:min(100%,650px); height:auto; max-height:68vh; margin:auto; border:1px solid var(--ink); background:#fff; box-shadow:10px 12px 0 rgba(21,25,24,.18); }
.result-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:.7rem; }
.result-actions .plain { background:transparent; color:var(--ink); }
.explain { display:grid; grid-template-columns:60px minmax(0,820px); gap:1.2rem; padding:clamp(4rem,9vw,9rem) clamp(1rem,8vw,9rem); }
.explain h2 { margin:0 0 1.5rem; font:400 clamp(2.6rem,5vw,5.5rem)/.92 var(--serif); }
.explain p:last-child { max-width:680px; font-size:1.05rem; }
footer { display:flex; justify-content:space-between; gap:2rem; padding:2rem clamp(1rem,4vw,4rem); border-top:1px solid var(--ink); font-size:.78rem; }
footer p { margin:0; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
@media (max-width:840px) { .intro{display:block}.intro h1{margin-bottom:2rem;font-size:clamp(4rem,18vw,7rem)}.rules ol{grid-template-columns:1fr}.workbench{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid var(--ink)}.result{min-height:650px}#poster{max-height:none} }
@media (max-width:480px) { .topbar p{display:none}.rules{padding:1.5rem 1rem}.controls{padding:2.5rem 1rem}.segments label{font-size:.69rem}.swatches label{justify-content:center}.swatches span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.result{min-height:0;padding:1.2rem 1rem 2rem}.explain{grid-template-columns:36px 1fr;padding-left:1rem;padding-right:1rem}footer{display:block} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*{transition:none!important} }