/* Seven distinct surfaces, sharing only the brand's typography and material. */
.studio-workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,1fr)}
.studio-stage{min-width:0;padding:28px 38px 30px;border-right:1px solid var(--line);background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--teal) 5%,var(--bg)),var(--bg) 80%)}
.studio-caption{font:9px/1.8 Consolas,monospace;letter-spacing:.12em;text-align:center;color:var(--muted);margin:0 0 26px}
.studio-board{width:100%;max-width:480px;margin:0 auto 28px}.studio-aside{padding:34px;min-width:0}.studio-aside>.puzzle-mono{display:block;margin-bottom:18px}.studio-aside h3{font-size:1.5rem;line-height:1.2;margin:0 0 15px}.studio-rule{font-size:.86rem;line-height:1.85;margin:0 0 25px;color:var(--muted)}.studio-notes{margin:20px 0}.studio-game .puzzle-status{font-size:.79rem;line-height:1.75;min-height:3em}.studio-game .puzzle-stats strong{font-size:1.8rem}.studio-game .puzzle-stats span{font-size:9px}.studio-game .puzzle-controls{flex-wrap:wrap}.studio-game .puzzle-result{animation:studio-appear .45s ease both}.studio-game button:focus-visible,.studio-game select:focus-visible{outline:3px solid var(--teal);outline-offset:4px;z-index:3}.studio-game button[aria-pressed=true]:not(.light-node):not(.nonogram-cell){box-shadow:0 0 0 2px var(--teal),0 5px 18px #071a4412}.studio-game button:disabled{cursor:default}.studio-target{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}.studio-target>span{font:9px/1.6 Consolas,monospace;letter-spacing:.1em;color:var(--muted);display:block}.studio-target>strong{display:block;font:500 2rem/1.5 var(--heading);color:var(--teal);margin:5px 0}.studio-target>p{font-size:.76rem;line-height:1.75;color:var(--muted);margin:0}.studio-segmented{display:flex;justify-content:center;gap:6px;margin-bottom:22px}.studio-segmented button{min-height:44px;background:var(--surface)}.studio-segmented button[aria-pressed=true]{color:var(--teal)}.studio-dragging{opacity:.7;transform:scale(.96);z-index:4}
/* A quiet deck of tactile cards. The fingerprint remains on every card back. */
.memory-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.memory-card{aspect-ratio:1/1.06;border:0;position:relative;background:transparent;padding:0;perspective:700px;color:var(--ink);border-radius:12px}.memory-front,.memory-back{position:absolute;inset:0;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;backface-visibility:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s,background .3s;overflow:hidden}.memory-back{background:linear-gradient(150deg,var(--surface),color-mix(in srgb,var(--teal) 5%,var(--surface)))}.memory-back:before{content:'';position:absolute;inset:8px;border:1px solid var(--line);border-radius:6px;opacity:.65}.memory-back .brand-fingerprint{width:25px;height:36px;opacity:.6}.memory-back small{position:absolute;bottom:12px;right:14px;font:8px Consolas,monospace;color:var(--muted)}.memory-front{background:var(--surface);transform:rotateY(180deg);gap:8px;padding:8px}.memory-front svg{width:42px;height:42px;max-width:48%}.memory-front circle{fill:var(--line)}.memory-front circle.dot-active{fill:var(--teal)}.memory-front strong{font-size:11px;line-height:1.3;font-weight:500}.memory-open .memory-front{transform:rotateY(0)}.memory-open .memory-back{transform:rotateY(-180deg)}.memory-matched .memory-front{background:color-mix(in srgb,var(--teal) 8%,var(--surface));border-color:color-mix(in srgb,var(--teal) 45%,var(--line))}.memory-matched .memory-front:after{content:'✓';position:absolute;right:7px;top:5px;font-size:10px;color:var(--teal)}.memory-card:hover:not(.memory-open) .memory-back{border-color:var(--teal);transform:translateY(-3px)}
/* Spatial route planning. Distances are visible on the next available stops. */
.tour-map{position:relative;aspect-ratio:1;background:radial-gradient(var(--line) 1px,transparent 1px) 0 0/18px 18px;border:1px solid var(--line);border-radius:50%;margin:0 0 24px}.tour-map>svg{width:100%;height:100%;overflow:visible;position:absolute;inset:0}.tour-map line{stroke:var(--line);stroke-width:.25;stroke-dasharray:1 2}.tour-route{stroke:var(--teal);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 1px color-mix(in srgb,var(--teal) 25%,transparent))}.tour-node{position:absolute;transform:translate(-50%,-50%);width:58px;height:58px;background:var(--surface);border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;box-shadow:0 4px 14px #071a4409;color:var(--ink);transition:border-color .2s,box-shadow .2s}.tour-node strong{font-size:14px;line-height:1.2}.tour-node small{font:8px/1.4 Consolas,monospace;color:var(--muted)}.tour-node:first-of-type strong{font-size:11px}.tour-node:hover:enabled{box-shadow:0 0 0 6px var(--tint);border-color:var(--teal)}.tour-visited{border-color:var(--teal)}.tour-current{background:var(--teal);color:var(--bg);box-shadow:0 0 0 6px color-mix(in srgb,var(--teal) 12%,transparent)}.tour-current small{color:inherit}.tour-trail{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;padding:0;margin:0;min-height:43px}.tour-trail li{display:flex;align-items:center;gap:4px;font-size:11px}.tour-trail li+li:before{content:'→';color:var(--muted);margin-right:4px}.tour-trail small{font:8px Consolas,monospace;color:var(--muted)}
/* A nonogram uses numeric evidence, not hidden random guesses. */
.nonogram-grid{display:grid;grid-template-columns:52px repeat(5,minmax(0,1fr));grid-template-rows:58px repeat(5,1fr);gap:5px;max-width:415px;margin:0 auto}.nonogram-cell{aspect-ratio:1;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:0;font-size:24px;line-height:1;color:var(--muted);transition:background .15s,box-shadow .15s}.nonogram-cell:hover{border-color:var(--teal)}.nonogram-filled{background:var(--teal);border-color:var(--teal);box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--bg) 10%,transparent)}.nonogram-cross{background:transparent;color:var(--muted)}.nonogram-clue{display:flex;align-items:center;justify-content:center;color:var(--muted);font:14px/1.4 Consolas,monospace;white-space:pre;transition:color .2s}.nonogram-col{flex-direction:column;gap:1px;align-self:end;padding-bottom:8px}.nonogram-row{padding-right:6px}.clue-valid{color:var(--teal);font-weight:bold}.nonogram-corner{background:linear-gradient(135deg,transparent 49%,var(--line) 50%,transparent 52%);margin:10px 10px 6px 4px}
/* The sequence is a vertical editorial stack, with live logical constraints. */
.sequence-board{display:grid;gap:10px}.sequence-card{display:flex;align-items:center;gap:17px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:17px 18px;color:var(--ink);transition:transform .2s,border-color .2s,box-shadow .2s;touch-action:pan-y}.sequence-card:hover{border-color:var(--teal)}.sequence-number{font:12px Consolas,monospace;color:var(--teal);min-width:22px}.sequence-copy{flex:1}.sequence-copy strong,.sequence-copy small{display:block}.sequence-copy strong{font-size:14px;font-weight:500}.sequence-copy small{color:var(--muted);font-size:11px;margin-top:4px;line-height:1.4}.sequence-grip{font-size:21px;color:var(--muted)}.sequence-rules{list-style:none;margin:0;padding:0}.sequence-rules li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);align-items:baseline}.sequence-rules li>span{font-size:14px;color:var(--muted)}.sequence-rules p{font-size:.78rem;line-height:1.6;margin:0;color:var(--muted)}.sequence-rules .rule-met>span{color:var(--teal)}.sequence-rules .rule-met p{color:var(--ink)}
/* A compact digital circuit and all eight test cases, visible together. */
.circuit-diagram{margin:0 auto 25px;max-width:395px}.circuit-inputs{display:flex;justify-content:space-around;padding-bottom:19px}.circuit-inputs span{display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:30px;height:30px;font:12px Consolas,monospace;background:var(--surface);position:relative}.circuit-inputs span:after{content:'';position:absolute;top:100%;height:18px;width:1px;background:var(--teal);opacity:.5}.circuit-first{display:flex;gap:25px;position:relative}.circuit-first:after{content:'';position:absolute;top:100%;left:25%;right:25%;height:13px;border:1px solid var(--teal);border-top:0;opacity:.5}.circuit-gate{display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px;flex:1;min-width:0}.circuit-gate>span{font:9px Consolas,monospace;color:var(--muted)}.circuit-gate select{min-height:38px;width:100%;max-width:115px;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--teal);font:13px Consolas,monospace;padding:7px 12px;cursor:pointer}.circuit-gate small{font-size:8px;color:var(--muted);letter-spacing:.05em}.circuit-last{position:relative;width:50%;margin:28px auto 0}.circuit-last:before{content:'';position:absolute;bottom:100%;height:15px;width:1px;background:var(--teal);left:50%;opacity:.5}.circuit-table{width:100%;border-collapse:collapse;text-align:center;font:12px/1.5 Consolas,monospace}.circuit-table caption{caption-side:bottom;padding:12px 0 0;font:10px/1.5 var(--body);color:var(--muted)}.circuit-table th{font-size:9px;font-weight:400;color:var(--muted);padding:8px 2px;border-bottom:1px solid var(--line)}.circuit-table td{padding:5px 2px;border-bottom:1px solid var(--line)}.circuit-table td:nth-child(4){background:color-mix(in srgb,var(--teal) 5%,var(--bg))}.circuit-table td:last-child{color:var(--muted)}.circuit-match td:last-child{color:var(--teal)}.logic-key{display:grid;grid-template-columns:auto 1fr;gap:14px 15px;align-items:baseline;margin:0}.logic-key dt{font:11px Consolas,monospace;color:var(--teal)}.logic-key dd{font-size:.75rem;line-height:1.7;margin:0;color:var(--muted)}
/* Reconstruct a two-dimensional navy-to-teal colour field. */
.palette-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:8px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.palette-tile{aspect-ratio:1;position:relative;border:1px solid #ffffff14;border-radius:7px;padding:0;transition:transform .2s,box-shadow .2s;touch-action:pan-y;opacity:1!important}.palette-tile:hover:enabled{transform:scale(.96)}.palette-lock{position:absolute;inset:0;display:grid;place-items:center;font:24px Consolas,monospace;color:white;text-shadow:0 1px 4px #071a4470}.palette-tile small{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);white-space:nowrap;font:9px Consolas,monospace;color:white;background:#071a44cf;padding:3px 5px;border-radius:3px}.palette-tile small:empty{display:none}.palette-values{display:block;margin:20px auto 0}.palette-key>span{font:9px Consolas,monospace;color:var(--muted);letter-spacing:.08em}.palette-key p{font-size:.76rem;line-height:1.8;color:var(--muted);margin-top:12px}.palette-ramp{height:30px;background:linear-gradient(90deg,#173663,#009a91);border-radius:6px;margin-top:14px}
/* Interdependent signals: a different spatial rule from all other boards. */
.lights-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.light-node{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--muted);padding:10px;transition:border-color .2s,background .2s,box-shadow .2s}.light-orbit{width:29px;height:29px;border:1px solid var(--line);border-radius:50%;position:relative;box-shadow:inset 0 0 0 5px var(--bg)}.light-orbit:after{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--line);transition:background .2s,box-shadow .2s}.light-node strong{font:11px Consolas,monospace;font-weight:normal}.light-node small{font:7px Consolas,monospace;letter-spacing:.07em}.light-on{background:color-mix(in srgb,var(--teal) 7%,var(--surface));border-color:color-mix(in srgb,var(--teal) 35%,var(--line));color:var(--teal)}.light-on .light-orbit{border-color:var(--teal)}.light-on .light-orbit:after{background:var(--teal);box-shadow:0 0 13px color-mix(in srgb,var(--teal) 45%,transparent)}.light-affected{outline:1px dashed var(--teal);outline-offset:3px}.lights-key{font:22px/1.5 Consolas,monospace;white-space:pre;text-align:center;color:var(--teal);margin:12px 0}
.service-card .card-link{line-height:1.6}.service-card .card-link .icon{flex-shrink:0}
@keyframes studio-appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){.studio-workspace{grid-template-columns:minmax(0,1.2fr) minmax(270px,1fr)}.studio-stage{padding:26px}.studio-aside{padding:28px 24px}.memory-board{gap:7px}.memory-front strong{font-size:10px}.light-node{gap:7px}.light-node small{font-size:6px}}
@media(max-width:760px){.studio-workspace{grid-template-columns:1fr}.studio-stage{border-right:0;border-bottom:1px solid var(--line);padding:26px 28px}.studio-aside{padding:27px}.studio-caption{font-size:8px;margin-bottom:22px}.studio-board{max-width:450px}.studio-game .puzzle-stats strong{font-size:1.65rem}.studio-rule{margin-bottom:20px}.studio-game .puzzle-topbar>.puzzle-mono{font-size:8px}.sequence-card{padding:15px}.circuit-table td{padding:7px 2px}}
@media(max-width:420px){.studio-stage{padding:24px 18px}.studio-aside{padding:25px 21px}.memory-board{gap:6px}.memory-card{aspect-ratio:1/1.15}.memory-back .brand-fingerprint{width:20px;height:27px}.memory-back small{font-size:7px;bottom:8px;right:9px}.memory-front{padding:5px;gap:5px}.memory-front strong{font-size:9px}.memory-front svg{width:33px;height:33px}.tour-node{width:46px;height:46px}.tour-node strong{font-size:12px}.tour-node small{font-size:7px}.tour-node:first-of-type strong{font-size:9px}.tour-trail{gap:6px}.tour-trail li{font-size:10px}.tour-trail small{font-size:7px}.tour-trail li+li:before{margin-right:0}.nonogram-grid{grid-template-columns:42px repeat(5,minmax(0,1fr));gap:4px}.nonogram-clue{font-size:12px}.palette-grid{gap:5px;padding:6px}.palette-tile small{font-size:8px;padding:2px 3px}.lights-grid{gap:8px}.light-node{border-radius:10px;gap:5px;padding:8px 3px}.light-orbit{width:24px;height:24px}.light-orbit:after{inset:7px}.sequence-card{gap:11px;padding:13px}.sequence-copy strong{font-size:13px}.sequence-copy small{font-size:10px}.circuit-first{gap:15px}.circuit-gate{padding:8px}.circuit-gate select{font-size:12px;padding:7px}.studio-game .puzzle-controls{gap:6px}.studio-game .puzzle-button{min-height:44px}.studio-aside h3{font-size:1.35rem}}
@media(prefers-reduced-motion:reduce){.studio-game *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
