.tetris-page{--tet-1:#5de8f6;--tet-2:#61a0f4;--tet-3:#f6922e;--tet-4:#dee54c;--tet-5:#5fd37f;--tet-6:#b48df4;--tet-7:#f75936;padding:2rem var(--page-gutter) 2.5rem;background-image:radial-gradient(var(--color-dot) 1.5px, transparent 1.5px);background-size:22px 22px}@supports (color:lab(0% 0 0)){.tetris-page{--tet-1:lab(84.807% -35.7059 -19.0016);--tet-2:lab(64.4107% -1.76641 -48.881);--tet-3:lab(70.3313% 33.71 65.3029);--tet-4:lab(88.4381% -15.977 69.7698);--tet-5:lab(76.5065% -48.1818 31.6252);--tet-6:lab(65.4352% 30.79 -46.8461);--tet-7:lab(59.9358% 60.2897 53.0365)}}.tetris-page__inner{gap:1.5rem;max-width:96rem;margin-inline:auto;display:grid}.tetris-intro{gap:.5rem;max-width:65ch;display:grid}.tetris-intro h1{color:var(--color-ink);margin:0;font-size:2rem}.tetris-intro p{margin:0;line-height:1.6}.tetris-hint{color:var(--color-muted);font:600 .6875rem / 1.5 var(--font-mono);letter-spacing:.04em;text-transform:uppercase}.tetris-boot{font:600 .875rem / 1 var(--font-mono);color:var(--color-muted);padding:3rem 0}.tetris-layout{grid-template-columns:minmax(0,1fr);align-items:start;gap:1.5rem;display:grid}.tetris-board-card{order:1}.tetris-side{order:2}.tetris-studio{order:3}.tetris-trace{order:4}@media (min-width:46rem){.tetris-layout{grid-template-columns:auto minmax(15rem,22rem);justify-content:center}.tetris-studio,.tetris-trace{grid-column:1/-1}}@media (min-width:78rem){.tetris-layout{grid-template-columns:auto minmax(14rem,17rem) minmax(28rem,1fr);justify-content:stretch}.tetris-layout .tetris-studio{contain:size;grid-area:1/3;align-self:stretch;height:auto}}.tetris-board-card{border:2px solid var(--color-ink);background:var(--color-surface);box-shadow:0 6px 0 var(--color-ink);border-radius:14px;padding:.9rem;position:relative;transform:rotate(-.5deg)}.tetris-board{border:2px solid var(--color-ink);background:var(--color-paper-2);border-radius:8px;grid-template-rows:repeat(20,1.6rem);grid-template-columns:repeat(10,1.6rem);gap:2px;padding:4px;display:grid}.tetris-board.is-over{filter:saturate(.35)opacity(.7)}.tetris-cell{background:var(--color-paper);border-radius:3px}.tetris-cell.c1{background:var(--tet-1)}.tetris-cell.c2{background:var(--tet-2)}.tetris-cell.c3{background:var(--tet-3)}.tetris-cell.c4{background:var(--tet-4)}.tetris-cell.c5{background:var(--tet-5)}.tetris-cell.c6{background:var(--tet-6)}.tetris-cell.c7{background:var(--tet-7)}.tetris-board .tetris-cell.c1,.tetris-board .tetris-cell.c2,.tetris-board .tetris-cell.c3,.tetris-board .tetris-cell.c4,.tetris-board .tetris-cell.c5,.tetris-board .tetris-cell.c6,.tetris-board .tetris-cell.c7{border:1.5px solid var(--color-ink);box-shadow:inset 0 -3px #0000001f}.tetris-board .tetris-cell.ghost{border:1.5px dashed var(--color-ink);box-shadow:none;opacity:.45;background:0 0}.tetris-board .tetris-cell.clearing{animation:tetris-flash .28s var(--ease-out) both}@keyframes tetris-flash{0%{background:var(--color-surface)}50%{background:var(--color-pear);border-color:var(--color-ink)}to{background:var(--color-surface);opacity:.2}}.tetris-overlay{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.tetris-overlay-card{border:2px solid var(--color-ink);box-shadow:0 5px 0 var(--color-ink);font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-ink);border-radius:12px;justify-items:center;gap:.5rem;padding:1.1rem 1.6rem;font-size:1.4rem;font-weight:700;display:grid;transform:rotate(-2deg)}.tetris-overlay-card span{font:600 .6875rem / 1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--color-ink-soft)}.tetris-overlay-card--pear{background:var(--color-pear)}.tetris-overlay-card--coral{background:var(--color-accent);color:var(--color-accent-ink)}.tetris-side{align-content:start;gap:1rem;display:grid}.tetris-jars{flex-wrap:wrap;gap:.6rem;display:flex}.tetris-jar{border:1.5px solid var(--color-ink);background:var(--color-surface);box-shadow:0 2px 0 var(--color-ink);font:600 .75rem / 1 var(--font-mono);color:var(--color-muted);white-space:nowrap;border-radius:999px;align-items:center;gap:.4rem;padding:.35rem .75rem;display:inline-flex}.tetris-jar b{color:var(--color-ink);font-weight:700}.tetris-panel{border:2px solid var(--color-ink);background:var(--color-surface);box-shadow:0 4px 0 var(--color-ink);border-radius:12px;gap:.6rem;padding:.9rem 1rem;display:grid}.tetris-panel:nth-of-type(odd){transform:rotate(.4deg)}.tetris-panel:nth-of-type(2n){transform:rotate(-.4deg)}.tetris-panel-label{border:1.5px solid var(--color-ink);background:var(--color-cyan);color:var(--color-cyan-ink);font:700 .625rem / 1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;justify-self:start;padding:.2rem .55rem}.tetris-panel-note{color:var(--color-ink-soft);margin:0;font-size:.78rem;line-height:1.55}.tetris-queue{gap:.75rem;display:flex}.tetris-preview{grid-template-rows:repeat(2,.9rem);grid-template-columns:repeat(4,.9rem);gap:2px;display:grid}.tetris-preview .tetris-cell{background:0 0;border-radius:2px}.tetris-preview .tetris-cell.c1,.tetris-preview .tetris-cell.c2,.tetris-preview .tetris-cell.c3,.tetris-preview .tetris-cell.c4,.tetris-preview .tetris-cell.c5,.tetris-preview .tetris-cell.c6,.tetris-preview .tetris-cell.c7{border:1.5px solid var(--color-ink)}.tetris-state-strip{flex-wrap:wrap;gap:.4rem;display:flex}.tetris-state-chip{border:1.5px solid var(--color-ink);background:var(--color-paper);color:var(--color-muted);font:700 .6875rem / 1 var(--font-mono);border-radius:999px;padding:.22rem .6rem}.tetris-state-chip.is-active{background:var(--color-accent);color:var(--color-accent-ink);box-shadow:0 2px 0 var(--color-ink);transform:rotate(-2deg)}.tetris-pad{flex-wrap:wrap;gap:.6rem;display:flex}.tetris-studio{border:2px solid var(--color-ink);background:var(--color-surface);box-shadow:0 6px 0 var(--color-ink);border-radius:14px;height:35rem;overflow:hidden}.tetris-studio-loading{height:100%;color:var(--color-muted);font:600 .8125rem / 1 var(--font-mono);justify-content:center;align-items:center;display:flex}.tetris-trace{border:2px solid var(--color-ink);background:var(--color-band);box-shadow:0 6px 0 var(--color-ink);color:var(--color-band-ink);border-radius:12px;overflow:hidden;transform:rotate(.3deg)}.tetris-trace-bar{border-bottom:2px solid var(--color-band-shadow);background:var(--color-band-2);justify-content:space-between;align-items:center;gap:.75rem;padding:.6rem 1rem;display:flex}.tetris-trace-title{color:var(--color-band-label);font:700 .6875rem / 1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.tetris-trace-sticker{border:1.5px solid var(--color-band-label);color:var(--color-code-cyan);font:700 .625rem / 1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:.15rem .5rem;transform:rotate(2deg)}.tetris-trace-log{height:10.5rem;font:400 .71875rem / 1.7 var(--font-mono);padding:.75rem 1rem;overflow-y:auto}.tetris-trace-line{white-space:nowrap}.tetris-trace-number{color:var(--color-band-muted);margin-inline-end:.75rem;display:inline-block}.tetris-code{border:2px solid var(--color-ink);background:var(--color-surface);box-shadow:0 6px 0 var(--color-ink);border-radius:14px;overflow:hidden}.tetris-code summary{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.9rem;padding:.8rem 1rem;list-style:none;display:flex}.tetris-code summary::-webkit-details-marker{display:none}.tetris-code summary:after{content:"▸";color:var(--color-muted);transition:transform var(--dur-micro) var(--ease-out);margin-inline-start:auto}.tetris-code[open] summary:after{transform:rotate(90deg)}.tetris-code-note{font:600 .71875rem / 1.4 var(--font-mono);color:var(--color-muted)}.tetris-code-body{border-top:2px solid var(--color-ink);background:var(--color-band);max-height:32rem;color:var(--color-band-ink);overflow:auto}.tetris-code-body pre{font:400 .71875rem / 1.6 var(--font-mono);white-space:pre;margin:0;padding:1rem 1.25rem}@media (max-width:46rem){.tetris-board{grid-template-rows:repeat(20,min(1.6rem,7.6vw));grid-template-columns:repeat(10,min(1.6rem,7.6vw))}}@media (prefers-reduced-motion:reduce){.tetris-board .tetris-cell.clearing{opacity:.2;animation:none}}
