:root{color-scheme:dark;--ink:#f7f4ec;--muted:#aaa9b5;--panel:#171722;--line:#343344;--accent:#9fffca;--yellow:#ffd85a;--red:#ff647c;--blue:#5e8cff}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 0,#2d2540 0,transparent 36%),radial-gradient(circle at 90% 20%,#153a36 0,transparent 30%),#0c0c12;color:var(--ink);font:16px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.shell{width:min(1180px,calc(100% - 28px));margin:auto;padding:42px 0 24px}header,.puzzle-head,.section-title,.actions{display:flex;align-items:center;justify-content:space-between;gap:18px}h1{font:800 clamp(2.25rem,6vw,5.2rem)/.9 ui-sans-serif,system-ui,sans-serif;letter-spacing:-.07em;margin:.12em 0}.eyebrow,.label{color:var(--accent);font-weight:800;font-size:.76rem;letter-spacing:.14em;margin:0}.lede,#hint{color:var(--muted);max-width:690px}.progress{min-width:112px;border:1px solid var(--line);background:#111119;padding:14px 16px;display:grid;gap:3px;text-align:right}.progress span,.section-title span{color:var(--muted);font-size:.76rem}.workspace{margin-top:32px;border:1px solid var(--line);background:linear-gradient(145deg,#1a1925e8,#101018f2);box-shadow:0 28px 80px #0008}.puzzle-head{padding:24px;border-bottom:1px solid var(--line)}h2,h3{font-family:ui-sans-serif,system-ui,sans-serif;margin:.15em 0}h2{font-size:1.6rem}label{color:var(--muted);font-size:.8rem;display:grid;gap:6px}select,button{font:inherit;color:var(--ink);background:#232231;border:1px solid #48475a;border-radius:4px;padding:9px 12px}button{cursor:pointer;font-weight:800}button:hover:not(:disabled),button:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px #9fffca22}button:disabled{opacity:.4;cursor:not-allowed}.boards{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:center;padding:28px 24px 20px}.boards article{min-width:0}.board{height:240px;border:1px dashed #4b4a5b;background:linear-gradient(#0a0a10aa,#11121aaa),repeating-linear-gradient(90deg,transparent 0 42px,#ffffff05 43px);display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,2vw,24px);padding:20px 12px 28px;overflow:hidden}.board.goal{border-style:solid;border-color:#9fffca66;background:linear-gradient(#10221daa,#0b1210aa)}.stack{display:flex;flex-direction:column-reverse;gap:4px}.cube{width:clamp(28px,5vw,48px);aspect-ratio:1;border-radius:5px;border:2px solid #ffffff55;box-shadow:inset -8px -9px 0 #0002,inset 5px 5px 0 #fff2,0 7px 12px #0005}.cube.yellow{background:var(--yellow)}.cube.red{background:var(--red)}.cube.blue{background:var(--blue)}.arrow{font-size:1.7rem;color:var(--muted)}.status{margin:0 24px;padding:12px 15px;border-left:3px solid #69687a;background:#0c0c13;color:var(--muted)}.status.solved{border-color:var(--accent);color:var(--accent);background:#102019}.composer{display:grid;grid-template-columns:1fr 1.2fr;border-top:1px solid var(--line);margin-top:24px}.composer>section{padding:24px}.composer>section+section{border-left:1px solid var(--line)}.function-shelf,.program{display:flex;flex-wrap:wrap;gap:9px;align-content:flex-start;min-height:124px;margin-top:12px}.function{position:relative;background:#292838;text-align:left}.function small{display:block;color:var(--muted);font-weight:400}.program{border:1px dashed #464557;padding:12px;background:#0c0c12}.program:empty:after{content:'Your composed functions appear here';color:#676677;padding:10px}.program .function{padding-right:34px}.remove{position:absolute;right:7px;top:50%;translate:0 -50%;padding:0;border:0;background:transparent;color:#aaa}.actions{justify-content:flex-end;margin-top:14px}.actions .secondary{background:transparent}.actions #next{background:var(--accent);color:#07120d;border-color:var(--accent)}footer{text-align:center;color:#777788;font-size:.75rem;padding:24px}a{color:var(--accent)}@media(max-width:790px){header{align-items:flex-start}.progress{display:none}.boards{grid-template-columns:1fr;gap:8px}.arrow{rotate:90deg;text-align:center}.board{height:190px}.composer{grid-template-columns:1fr}.composer>section+section{border-left:0;border-top:1px solid var(--line)}.puzzle-head{align-items:flex-start}.shell{padding-top:24px}}@media(prefers-reduced-motion:no-preference){.cube{animation:arrive .25s ease-out}@keyframes arrive{from{opacity:.2;translate:0 -12px;scale:.9}}}
