:root {
  color: #e9eef0;
  background: #101820;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; overflow-x: clip; }
a { color: inherit; }
.lab-shell { position: relative; z-index: 1; min-height: 100vh; padding: 32px clamp(22px, 6vw, 96px) 24px; display: flex; flex-direction: column; }
.lab-header, .lab-footer { display: flex; justify-content: space-between; gap: 24px; color: #8fa3a7; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.lab-mark { color: #f6c84c; }
.lab-header-actions { display: flex; align-items: center; gap: 18px; }
.lab-status { display: inline-flex; align-items: center; gap: 8px; }
.lab-status i { width: 7px; height: 7px; border-radius: 50%; background: #a6d98b; box-shadow: 0 0 14px #a6d98b; }
.motion-toggle { display: none; padding: 5px 8px; border: 1px solid rgba(233, 238, 240, .2); color: #9fb0b4; background: transparent; font: inherit; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.motion-ready .motion-toggle { display: inline-block; }
.motion-toggle:hover, .motion-toggle:focus-visible { border-color: #a6d98b; color: #e9eef0; outline: none; }
.lab-hero { position: relative; max-width: 840px; padding: clamp(88px, 14vh, 168px) 0 124px; }
.splash-cursor { position: fixed; z-index: 0; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
.lab-section-label, .experiment-index { color: #f6c84c; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.lab-hero h1 { margin: 20px 0 26px; max-width: 760px; color: #f1f5f4; font: 500 clamp(54px, 9vw, 124px)/.92 Georgia, 'Times New Roman', serif; letter-spacing: -.055em; }
.lab-hero h1 em { color: #9fb9be; font-weight: 400; }
.particle-text { position: relative; display: inline-block; max-width: 100%; white-space: nowrap; }
.particle-text__canvas { position: absolute; inset: -.16em -.18em; width: calc(100% + .36em); height: 1.32em; pointer-events: none; opacity: 0; overflow: visible; }
.particle-text.is-running .particle-text__canvas { opacity: 1; }
.particle-text.is-running .particle-text__label { color: transparent; }
.lab-intro { max-width: 430px; color: #9fb0b4; font-size: 15px; line-height: 1.7; }
.lab-experiments { width: 100%; max-width: 1100px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lab-section-label { grid-column: 1 / -1; margin-bottom: 10px; color: #8fa3a7; }
.experiment-card { --electric-color: #d7ffd1; --preview-fill: rgba(16, 24, 32, .08); position: relative; min-height: 500px; padding: 24px; display: flex; flex-direction: column; overflow: visible; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; isolation: isolate; }
.experiment-card:hover, .experiment-card:focus-visible { transform: translateY(-5px); box-shadow: 0 18px 45px rgba(0,0,0,.24); }
.experiment-card:focus-visible { outline: 3px solid #e9eef0; outline-offset: 4px; }
.electric-border__canvas { position: absolute; z-index: 2; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); pointer-events: none; opacity: 0; transition: opacity .16s ease; }
.experiment-card:hover .electric-border__canvas, .experiment-card:focus-visible .electric-border__canvas { opacity: 1; }
.experiment-card:hover::after, .experiment-card:focus-visible::after { content: ''; position: absolute; z-index: -1; inset: -2px; border: 2px solid color-mix(in srgb, var(--electric-color) 60%, transparent); filter: blur(4px); pointer-events: none; }
.experiment-card-board { color: #101820; background: #f6c84c; }
.experiment-card-debugger { --preview-fill: rgba(233, 238, 240, .06); color: #e9eef0; background: #243b43; }
.experiment-card-orbit { color: #101820; background: #9fd3c7; }
.experiment-card-chess { --preview-fill: rgba(233, 238, 240, .06); color: #e9eef0; background: #6b4f3a; }
.experiment-card-bench { --preview-fill: rgba(233, 238, 240, .07); color: #e9eef0; background: #1f4d3a; }
.experiment-card-present { --preview-fill: rgba(233, 238, 240, .07); color: #e9eef0; background: #402545; }
.experiment-card-sculpt { --preview-fill: rgba(16, 24, 32, .1); color: #101820; background: #d9a06b; }
.experiment-card-guide { --preview-fill: rgba(233, 238, 240, .07); color: #e9eef0; background: #2f3f66; }
.experiment-card-meter { --preview-fill: rgba(16, 24, 32, .1); color: #101820; background: #c9d86a; }
/* 9 cards fill the grid evenly: 3 x 3 at 1280px+. With 2 columns (681px to 1279px) the last card
   spans both columns, so no card sits alone next to an empty cell. At 1 column (680px and under)
   a span is meaningless, so it is reset. */
.experiment-card-meter { grid-column: span 2; }
@media (min-width: 1280px) { .lab-experiments { max-width: 1400px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .experiment-card-meter { grid-column: span 1; } }
.experiment-index { color: inherit; opacity: .66; }
.experiment-preview { display: block; height: 164px; margin: 25px -4px 24px; color: inherit; }
.experiment-preview svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.experiment-preview path, .experiment-preview rect, .experiment-preview circle, .experiment-preview ellipse, .experiment-preview g { transform-box: fill-box; transform-origin: center; }
.preview-guide, .orbit-sweep, .chess-move, .pinch-measure, .sculpt-guide { opacity: .42; stroke-dasharray: 5 6; }
.board-note rect, .orbit-object path, .guide-board, .meter-panel, .chess-squares, .debug-hand > path, .bench-part rect, .present-chart, .sculpt-blob, .sculpt-pull { fill: var(--preview-fill); }
.board-note--back { opacity: .38; }
.board-note--middle { opacity: .62; }
.board-note--active { opacity: .9; }
.preview-cursor { fill: currentColor; stroke: none; opacity: .7; }
.orbit-ring { opacity: .3; stroke-dasharray: 4 7; }
.orbit-ring--inner { opacity: .18; }
.orbit-object { opacity: .85; }
.orbit-sweep { stroke-dasharray: 8 8; }
.chess-board { opacity: .45; }
.chess-squares { stroke: none; opacity: .22; }
.chess-move { marker-end: none; }
.chess-piece { fill: var(--preview-fill); }
.chess-piece--ghost { opacity: .25; }
.chess-piece--moving { opacity: .9; }
.debug-hand { opacity: .84; }
.pinch-point { fill: currentColor; }
.pinch-measure { stroke-dasharray: 3 5; }
.debug-signal { opacity: .48; }
.debug-signal circle { fill: currentColor; stroke: none; }
.bench-board { opacity: .45; }
.bench-hole { opacity: .4; }
.bench-part--done { opacity: .38; }
.bench-part--todo { opacity: .62; }
.bench-part--active { opacity: .9; }
.bench-spark { fill: currentColor; stroke: none; opacity: .75; }
.present-slide { opacity: .45; }
.present-content { opacity: .6; }
.present-chart { opacity: .5; }
.present-laser { fill: currentColor; stroke: none; opacity: .85; }
.sculpt-blob { opacity: .55; }
.sculpt-pull { opacity: .8; }
.sculpt-pinch { fill: currentColor; stroke: none; opacity: .85; }
.guide-board { opacity: .45; }
.guide-step { opacity: .5; }
.guide-step--active { opacity: .95; }
.guide-chip { fill: var(--preview-fill); opacity: .7; }
.guide-chip--active { opacity: 1; }
.guide-check { opacity: .9; stroke-width: 2; }
.meter-panel { opacity: .35; }
.meter-grid { opacity: .3; }
.meter-trace { stroke-width: 2.2; opacity: .95; }
.meter-mark { opacity: .5; stroke-dasharray: 4 5; }
.meter-dot { fill: currentColor; stroke: none; }
.meter-bolt { fill: currentColor; stroke: none; opacity: .8; }
.meter-bar { stroke-width: 3; opacity: .55; stroke-linecap: round; }
.experiment-title { display: block; font: 500 clamp(29px, 3.2vw, 44px)/.96 Georgia, 'Times New Roman', serif; letter-spacing: -.04em; }
.experiment-copy { display: block; max-width: 310px; margin-top: 15px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .78; }
.experiment-input { display: block; margin: 14px 0 24px; font-size: 10px; line-height: 1.55; letter-spacing: .07em; text-transform: uppercase; opacity: .68; }
.experiment-input b { font-weight: 700; }
.experiment-open { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 18px; border-top: 1px solid currentColor; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.experiment-open i { font-style: normal; font-size: 20px; line-height: 1; transition: transform .2s ease; }
.experiment-card:hover .experiment-open i, .experiment-card:focus-visible .experiment-open i { transform: translate(3px, -3px); }
.motion-ready:not(.motion-disabled) .experiment-card:hover .board-note--active, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .board-note--active { animation: board-note-move 2.2s ease-in-out infinite alternate; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .preview-cursor, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .preview-cursor { animation: board-cursor-move 2.2s ease-in-out infinite alternate; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .orbit-object, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .orbit-object { animation: orbit-object-turn 3.6s ease-in-out infinite alternate; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .orbit-sweep, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .orbit-sweep { animation: preview-dash 2.2s linear infinite; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .chess-piece--moving, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .chess-piece--moving { animation: chess-piece-move 1.8s cubic-bezier(.22, 1, .36, 1) infinite alternate; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .chess-move, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .chess-move { animation: preview-dash 1.4s linear infinite; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .pinch-point, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .pinch-point { animation: pinch-pulse 1.3s ease-in-out infinite alternate; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .pinch-measure, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .pinch-measure { animation: preview-dash 1.2s linear infinite; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .bench-part--active, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .bench-part--active { animation: bench-part-glow 1.8s ease-in-out infinite alternate; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .bench-spark, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .bench-spark { animation: pinch-pulse 1.3s ease-in-out infinite alternate; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .present-laser, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .present-laser { animation: present-laser-move 2s ease-in-out infinite alternate; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .sculpt-pull, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .sculpt-pull { animation: sculpt-pull-stretch 1.8s ease-in-out infinite alternate; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .sculpt-pinch, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .sculpt-pinch { animation: pinch-pulse 1.3s ease-in-out infinite alternate; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .sculpt-guide, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .sculpt-guide { animation: preview-dash 1.6s linear infinite; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .meter-dot, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .meter-dot { animation: meter-dot-pulse 1.4s ease-in-out infinite alternate; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .meter-mark, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .meter-mark { animation: preview-dash 1.6s linear infinite; }
.motion-ready:not(.motion-disabled) .experiment-card:hover .guide-chip--active, .motion-ready:not(.motion-disabled) .experiment-card:focus-visible .guide-chip--active { animation: guide-chip-glow 1.6s ease-in-out infinite alternate; }
.lab-support { max-width: 640px; padding: 28px 0 50px; border-top: 1px solid rgba(233, 238, 240, .12); margin-top: 72px; }
.lab-support-copy { max-width: 460px; margin: 14px 0 20px; color: #9fb0b4; font-size: 14px; line-height: 1.7; }
.lab-support-link { color: #f6c84c; font-size: 14px; letter-spacing: .04em; text-decoration: none; }
.star-border { position: relative; display: inline-block; padding: 1px 0; border-radius: 999px; overflow: hidden; }
.star-border__light { position: absolute; width: 300%; height: 55%; border-radius: 50%; opacity: .72; background: radial-gradient(circle, #f6c84c, transparent 11%); animation: star-movement 8s linear infinite alternate; pointer-events: none; }
.star-border__light--bottom { right: -250%; bottom: -12px; }
.star-border__light--top { top: -12px; left: -250%; animation-name: star-movement-top; }
.star-border__content { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border: 1px solid rgba(246, 200, 76, .26); border-radius: 999px; background: #101820; }
.lab-support-link:hover .star-border__content, .lab-support-link:focus-visible .star-border__content { border-color: rgba(246, 200, 76, .68); outline: none; }
.lab-support-link:focus-visible { border-radius: 999px; outline: 2px solid #e9eef0; outline-offset: 3px; }
.motion-ready .animated-content { opacity: 0; transform: translateY(18px); }
.motion-ready .animated-content.is-visible { opacity: 1; transform: translateY(0); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.motion-disabled .animated-content { opacity: 1; transform: none; transition: none; }
.motion-disabled .splash-cursor, .motion-disabled .electric-border__canvas, .motion-disabled .star-border__light, .motion-disabled .particle-text__canvas { display: none; }
.motion-disabled .particle-text__label { color: inherit; }
.motion-disabled .experiment-preview *, .motion-disabled .experiment-open i { animation: none !important; transition: none; transform: none; }
.motion-disabled .experiment-card:hover, .motion-disabled .experiment-card:focus-visible { transform: none; transition: none; }
.lab-footer { margin-top: auto; padding-top: 84px; }
@keyframes star-movement { from { transform: translateX(0); opacity: .8; } to { transform: translateX(-100%); opacity: 0; } }
@keyframes star-movement-top { from { transform: translateX(0); opacity: .8; } to { transform: translateX(100%); opacity: 0; } }
@keyframes board-note-move { to { transform: translate(-20px, 20px) rotate(-2deg); } }
@keyframes board-cursor-move { to { transform: translate(28px, -28px); } }
@keyframes orbit-object-turn { to { transform: rotate(7deg) skewY(-3deg); } }
@keyframes chess-piece-move { to { transform: translateY(-54px); } }
@keyframes pinch-pulse { to { transform: scale(1.8); opacity: .35; } }
@keyframes bench-part-glow { to { opacity: 1; transform: scale(1.06); } }
@keyframes present-laser-move { to { transform: translate(150px, -18px); } }
@keyframes sculpt-pull-stretch { to { transform: scale(1.18) translate(5px, -5px); } }
@keyframes meter-dot-pulse { to { transform: scale(1.6); } }
@keyframes guide-chip-glow { to { opacity: 1; transform: scale(1.12); } }
@keyframes preview-dash { to { stroke-dashoffset: -28; } }
@media (max-width: 680px) {
  .lab-shell { padding-top: 22px; }
  .lab-header, .lab-footer { font-size: 9px; }
  .lab-status { display: none; }
  .lab-hero { padding: 100px 0 78px; }
  .lab-hero h1 { font-size: clamp(37px, 13.5vw, 58px); }
  .lab-experiments { grid-template-columns: 1fr; }
  .experiment-card-meter { grid-column: span 1; }
  .experiment-card { min-height: 470px; }
  .experiment-preview { height: 150px; }
  .lab-support { padding: 26px 0 36px; margin-top: 56px; }
  .lab-footer { flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .experiment-card { transition: none; }
  .experiment-card:hover, .experiment-card:focus-visible { transform: none; }
  .experiment-preview * { animation: none !important; }
  .animated-content { opacity: 1 !important; transform: none !important; transition: none !important; }
  .splash-cursor, .electric-border__canvas, .star-border__light, .particle-text__canvas { display: none !important; }
  .particle-text__label { color: inherit !important; }
}