:root{--paper:#f2ead9;--ink:#20231f;--red:#ef4c2f;--blue:#2979a4;--line:#c9bea8;--white:#fffdf6;--muted:#706c62;--green:#28795d;--shadow:6px 6px 0 #20231f}*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;color:var(--ink);font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;background-image:linear-gradient(rgba(32,35,31,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(32,35,31,.035) 1px,transparent 1px);background-size:24px 24px;min-height:100vh}.topbar{height:76px;border-bottom:2px solid var(--ink);background:rgba(242,234,217,.94);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,64px);position:sticky;top:0;z-index:10}.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none}.brand-mark{display:grid;place-items:center;width:42px;height:42px;background:var(--ink);color:var(--paper);font-weight:900;font-size:23px}.brand b{font-size:19px;letter-spacing:.04em}.brand small{display:block;font-size:9px;letter-spacing:.18em;margin-top:2px}.progress-wrap{width:min(250px,30vw);font-size:11px;font-weight:700;letter-spacing:.08em}.progress-track{height:6px;border:1px solid var(--ink);margin-top:7px;background:var(--white)}.progress-track i{display:block;height:100%;background:var(--red);width:10%;transition:width .3s}.icon-button{border:2px solid var(--ink);background:transparent;border-radius:50%;font-weight:900;width:34px;height:34px;font-size:17px;cursor:pointer}.icon-button:hover{background:var(--ink);color:white}main{width:min(1400px,92vw);margin:0 auto;padding:54px 0 80px}.intro{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:35px}.eyebrow,.label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;letter-spacing:.14em;color:var(--red);font-size:11px;margin:0 0 9px}.intro h1{font-size:clamp(30px,4.2vw,58px);letter-spacing:-.055em;margin:0 0 12px;line-height:1}.intro>div>p:last-child{margin:0;max-width:620px;color:var(--muted);line-height:1.55}.level-stamp{border:2px solid var(--ink);width:92px;height:92px;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(2deg);background:var(--white);box-shadow:4px 4px 0 var(--red)}.level-stamp span{font:700 9px ui-monospace,monospace;letter-spacing:.15em}.level-stamp strong{font-size:38px;line-height:1}.workspace{display:grid;grid-template-columns:minmax(340px,1.2fr) minmax(270px,.9fr) minmax(230px,.7fr);border:2px solid var(--ink);background:var(--white);box-shadow:var(--shadow)}.workspace>article,.workspace>aside{padding:24px 28px;min-width:0}.workspace>*+*{border-left:2px solid var(--ink)}.card-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.card-heading .label{color:var(--muted);margin-bottom:4px}.card-heading h2{font-size:20px;margin:0}.text-button{border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;color:var(--muted);cursor:pointer;font-weight:700}.text-button:hover{color:var(--red)}.editor-shell{position:relative;width:min(100%,420px);margin:26px auto 20px;padding-left:22px;padding-bottom:22px}.pixel-grid{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:2px solid var(--ink);background:var(--ink);gap:2px}.pixel{min-width:0;background:var(--paper);border:0;padding:0;cursor:pointer;transition:background .08s,transform .08s}.pixel:hover{background:#f7bca9;transform:scale(.91)}.pixel.on{background:var(--red)}.pixel.wrong{background:repeating-linear-gradient(45deg,var(--red),var(--red) 4px,#6b2115 4px,#6b2115 7px)}.pixel.missed{background:var(--blue);box-shadow:inset 0 0 0 3px var(--white)}.axis{position:absolute;font:700 9px ui-monospace,monospace;color:var(--muted);display:grid}.axis-x{grid-template-columns:repeat(8,1fr);left:22px;right:0;bottom:2px;text-align:center}.axis-y{grid-template-rows:repeat(8,1fr);left:5px;top:0;bottom:22px;align-items:center}.tools{display:flex;gap:8px;flex-wrap:wrap}.tool{border:1px solid var(--line);background:transparent;padding:8px 11px;display:flex;align-items:center;gap:7px;cursor:pointer;font-weight:700;color:var(--muted)}.tool.active,.tool:hover{border-color:var(--ink);color:var(--ink);background:var(--paper)}.tool-dot{width:10px;height:10px;background:var(--red);display:block}.tool-dot.hollow{border:2px solid var(--ink);background:transparent}.mirror-icon{font-size:15px}.clue-card{background:#e2d7c3}.difficulty,.bit-order{font:800 9px ui-monospace,monospace;letter-spacing:.1em;border:1px solid var(--ink);padding:6px 7px;background:var(--white)}.visual-clue{width:min(100%,260px);margin:34px auto}.preview{pointer-events:none;gap:3px;border-width:0;background:transparent}.preview .pixel{background:#bdb19c}.preview .pixel.on{background:var(--blue)}.clue-hint{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:15px;line-height:1.5}.byte-clue{display:grid;gap:8px;margin:25px 0}.clue-byte{display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:10px;font:700 12px ui-monospace,monospace}.clue-byte i{height:8px;background:repeating-linear-gradient(90deg,var(--blue) 0,var(--blue) calc(12.5% - 2px),transparent calc(12.5% - 2px),transparent 12.5%)}.clue-byte code{color:var(--blue);font-size:14px}.trap-note{border:2px solid var(--red);padding:12px;margin:20px 0;background:#fff2e8}.trap-note b,.trap-note span{display:block}.trap-note b{color:var(--red);font-size:13px}.trap-note span{font-size:11px;line-height:1.5;margin-top:4px}.live-rows{display:grid;gap:8px}.live-row{display:grid;grid-template-columns:18px 1fr 38px;gap:7px;align-items:center;font:700 11px ui-monospace,monospace}.live-row>span:first-child{color:var(--muted)}.live-row code{letter-spacing:.04em;background:var(--paper);padding:6px 4px;text-align:center}.live-row b{color:var(--red);text-align:right}.byte-total{margin-top:19px;padding-top:15px;border-top:2px solid var(--ink);display:flex;justify-content:space-between;font:700 9px ui-monospace,monospace}.action-bar{display:flex;align-items:center;justify-content:space-between;margin-top:22px;border-bottom:2px solid var(--ink);padding:0 0 18px}.action-bar p{font-size:12px;font-weight:700;color:var(--muted)}.action-bar p i{display:inline-block;width:8px;height:8px;background:var(--green);border-radius:50%;margin-right:8px}.submit-button,.secondary-button{border:2px solid var(--ink);padding:14px 20px;font-weight:900;font-size:14px;cursor:pointer}.submit-button{background:var(--ink);color:white;box-shadow:4px 4px 0 var(--red)}.submit-button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--red)}.submit-button span{margin-left:25px}.secondary-button{background:transparent}.result{margin-top:50px;background:var(--white);border:2px solid var(--ink);padding:clamp(22px,4vw,50px);box-shadow:var(--shadow)}.result-head{display:flex;justify-content:space-between;align-items:center}.result-head h2{margin:0;font-size:32px}.score-ring{border:2px solid var(--ink);border-radius:50%;width:76px;height:76px;display:grid;place-content:center;text-align:center;background:var(--paper)}.score-ring strong{font-size:26px;line-height:1}.score-ring span{font-size:10px}.compare-grids{display:grid;grid-template-columns:minmax(150px,260px) 50px minmax(150px,260px);align-items:center;justify-content:center;gap:20px;margin:35px 0}.result-grid{margin-top:9px;gap:2px;pointer-events:none}.compare-arrow{text-align:center;font-size:30px}.diff-table-wrap{overflow-x:auto}.diff-table{width:100%;border-collapse:collapse;font:700 12px ui-monospace,monospace}.diff-table th,.diff-table td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.diff-table th{color:var(--muted);font-size:9px;letter-spacing:.08em}.diff-table .ok{color:var(--green)}.diff-table .bad{color:var(--red)}.result-actions{display:flex;justify-content:flex-end;gap:13px;margin-top:25px}dialog{border:2px solid var(--ink);box-shadow:8px 8px 0 var(--red);padding:35px;width:min(470px,calc(100vw - 30px));background:var(--white);color:var(--ink)}dialog::backdrop{background:rgba(32,35,31,.55)}dialog h2{font-size:31px;margin:0 0 22px}dialog ol{list-style:none;padding:0;margin:0;counter-reset:item}dialog li{display:grid;grid-template-columns:26px 1fr;gap:8px;border-top:1px solid var(--line);padding:13px 0;counter-increment:item}dialog li:before{content:counter(item,decimal-leading-zero);font:700 10px ui-monospace,monospace;color:var(--red)}dialog li b,dialog li span{grid-column:2}dialog li span{font-size:13px;color:var(--muted);margin-top:-4px}.dialog-close{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:27px;cursor:pointer}.dialog-note{font-size:11px;color:var(--muted);margin:15px 0 0}
@media(max-width:980px){.workspace{grid-template-columns:1fr 1fr}.byte-card{grid-column:1/-1;border-left:0!important;border-top:2px solid var(--ink)}.live-rows{grid-template-columns:1fr 1fr;gap:9px 25px}.byte-total{grid-column:1/-1}}
@media(max-width:650px){.topbar{height:64px}.brand small,.progress-wrap{display:none}main{width:min(92vw,520px);padding-top:30px}.intro{align-items:flex-start}.level-stamp{width:62px;height:62px;flex:none}.level-stamp strong{font-size:26px}.intro h1{font-size:34px;padding-right:12px}.workspace{display:block;box-shadow:4px 4px 0 var(--ink)}.workspace>*+*{border-left:0;border-top:2px solid var(--ink)}.workspace>article,.workspace>aside{padding:20px}.editor-shell{max-width:380px}.live-rows{grid-template-columns:1fr 1fr}.action-bar{align-items:stretch;flex-direction:column;gap:10px}.action-bar p{margin:0}.submit-button{width:100%}.compare-grids{grid-template-columns:1fr 1fr;gap:16px}.compare-arrow{display:none}.result-actions{flex-direction:column}.secondary-button{order:2}.result-actions button{width:100%}}
@media(max-width:400px){.live-rows{grid-template-columns:1fr}.tools .tool{flex:1;justify-content:center;padding:8px 4px}.compare-grids{gap:8px}.workspace>article,.workspace>aside{padding:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}