@font-face{font-family:DM;src:url('assets/fonts/dm-sans-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Instrument;src:url('assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
:root{color-scheme:dark;--ink:#e8e8f3;--muted:#a2a2b8;--line:rgba(213,212,255,.12);--lilac:#c5b8ff;--mint:#b8f4e8;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%;background:#080910;color:var(--ink);font-family:DM,system-ui,sans-serif}body{overflow-x:hidden}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:5px}button:disabled{cursor:wait;opacity:.55}button{border:0}button, a{transition:background .2s,color .2s,border-color .2s,transform .2s}button:hover,a:hover{color:#fff}button:active,.try-button:active{transform:translateY(1px)}[hidden]{display:none!important}
.playground-shell{height:100svh;min-height:650px;display:grid;grid-template-rows:84px minmax(335px,1fr) auto;background:radial-gradient(ellipse at 50% 40%,#141024 0,rgba(10,12,20,.8) 38%,#080910 72%)}
.playground-header{display:flex;align-items:center;justify-content:space-between;padding:0 42px;z-index:2}.wordmark{display:flex;gap:12px;align-items:center}.wordmark h1{font-size:15px;font-weight:500;letter-spacing:-.03em;margin:0}.edition{font-size:9px;letter-spacing:.1em;color:#a4a0bc;border:1px solid var(--line);border-radius:5px;padding:3px 5px;align-self:center}.buddy-mark{width:29px;height:29px;border-radius:50%;background:radial-gradient(circle at 32% 23%,rgba(200,179,255,.14),rgba(132,179,235,.04));border:1px solid #80759c;display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 0 18px #bd9aff0a}.buddy-mark i{height:6px;width:3px;border-radius:50%;background:#ddd5ff}.journey-links{display:flex;gap:28px;font-size:12px;color:#9c98ad}.journey-links span{margin-left:4px;color:#656275}
.playground-stage{position:relative;isolation:isolate;min-height:0;overflow:hidden}.stage-glow{position:absolute;left:50%;top:52%;width:min(650px,100%);height:420px;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 70% 70%,#ec989d08,transparent 47%),radial-gradient(ellipse at 22% 34%,#8accff0b,transparent 43%),radial-gradient(ellipse,#bb8eff0a,transparent 65%)}#playground-canvas{display:block;width:100%;height:100%;touch-action:pan-y}.pointer-hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.055em;color:#a19bb4;white-space:nowrap;pointer-events:none}.pointer-spark{font-size:17px;vertical-align:-1px;margin-right:7px;color:#c8badf}.error-message{position:absolute;inset:30% 20%;text-align:center;color:#f2b2b8;font-size:16px;line-height:1.6}
.controls{width:min(890px,calc(100% - 80px));justify-self:center;padding:0 0 max(26px,env(safe-area-inset-bottom));z-index:3}.control-topline{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:11px}.category-tabs{display:flex;gap:24px}.category-tabs button{position:relative;padding:12px 0;background:none;color:#8d8ba1;font-size:13px}.category-tabs button[aria-selected=true]{color:#eeebff}.category-tabs button[aria-selected=true]::after{content:'';position:absolute;bottom:-12px;left:0;right:0;height:2px;background:#c6b7f5;box-shadow:0 -2px 15px #c4b3fa50}.mode-switch{display:flex;gap:3px;padding:3px;border-radius:20px;border:1px solid var(--line);background:#0c0d14}.mode-switch button{padding:7px 14px;border-radius:18px;background:transparent;color:#868295;font-size:10px;letter-spacing:.035em}.mode-switch button[aria-pressed=true]{background:#282437;color:#e5ddff;box-shadow:inset 0 0 0 1px #c7b6ff15}
.option-panel{display:flex;align-items:stretch;justify-content:center;gap:10px;padding:20px 0 19px;min-height:105px}.option-card{position:relative;display:flex;flex:1;max-width:140px;min-width:0;align-items:center;justify-content:center;gap:9px;flex-direction:column;background:rgba(255,255,255,.018);border:1px solid rgba(208,201,247,.05);border-radius:11px;color:#8e899f;padding:13px 9px 11px}.option-card:hover{background:#b8aaff09;border-color:#c9b7ff30}.option-card[aria-pressed=true]{background:linear-gradient(150deg,#a68fec18,#cfa9ea08);color:#e8e0ff;border-color:#c9b7ff5c;box-shadow:0 0 28px #a995ff05,inset 0 1px 0 #deceff08}.option-card[aria-pressed=true]::after{content:'';position:absolute;top:7px;right:8px;width:3px;height:3px;border-radius:50%;background:#d6c5ff;box-shadow:0 0 7px #d6c5ff60}.option-card svg{display:block;width:29px;height:25px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}.option-card .option-label{font-size:10px;letter-spacing:.03em}.action-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding-top:3px}.name-field{position:relative;justify-self:start;display:flex;align-items:center;gap:9px;max-width:200px;color:#8e879f}.name-field>svg{height:13px;width:13px;fill:none;stroke:currentColor;stroke-width:1.4;flex-shrink:0}.name-field input{border:0;border-bottom:1px solid #d1c7f525;background:transparent;border-radius:0;color:#d6cee7;font-size:12px;padding:8px 0;width:100px;min-width:0;transition:border-color .2s}.name-field input:focus{border-color:#a79bc0;outline-offset:3px}.name-field input::placeholder{color:#81798f}#saved-state{position:absolute;bottom:-10px;left:22px;white-space:nowrap;font-size:8px;color:#aec4b9;letter-spacing:.03em}#saved-state[data-error=true]{color:#edb6b9}.replay-button{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid var(--line);border-radius:25px;background:#0d0d16;color:#b8b0ca;font-size:11px;white-space:nowrap}.replay-button:hover{border-color:#c8b3fa55;background:#181421}.replay-button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.try-button{display:flex;align-items:center;gap:19px;justify-self:end;background:#d6cbef;color:#292332;padding:13px 20px;border:1px solid #d6cbef;border-radius:25px;font-size:11px}.try-button:hover{background:#e6dcfa;color:#292332;border-color:#e6dcfa;box-shadow:0 0 25px #c9aff315}.try-button span{font-size:15px;line-height:1}
@media(min-width:1600px){.playground-shell{grid-template-rows:100px minmax(335px,1fr) auto}.controls{padding-bottom:38px}.option-panel{padding-top:24px;padding-bottom:24px}.option-card{padding-top:17px;padding-bottom:14px}}
@media(max-width:700px){.playground-header{padding:0 22px}.playground-shell{grid-template-rows:70px minmax(340px,1fr) auto;min-height:710px}.wordmark{gap:8px}.wordmark h1{font-size:13px}.buddy-mark{width:25px;height:25px}.edition{font-size:8px}.journey-links{gap:14px;font-size:10px}.journey-links span{display:none}.controls{width:calc(100% - 36px);padding-bottom:max(22px,env(safe-area-inset-bottom))}.category-tabs{gap:21px}.category-tabs button{font-size:12px;padding:10px 0}.mode-switch button{padding:6px 11px;font-size:9px}.control-topline{padding-bottom:10px}.category-tabs button[aria-selected=true]::after{bottom:-11px}.option-panel{gap:6px;padding:16px 0;min-height:96px}.option-card{padding:11px 3px 10px;gap:9px;border-radius:9px}.option-card svg{width:25px;height:22px}.option-card .option-label{font-size:9px;letter-spacing:0}.action-row{gap:10px}.name-field{gap:7px}.name-field input{width:65px;font-size:11px}.name-field>svg{width:12px;height:12px}.replay-button{font-size:10px;padding:11px 12px;gap:6px}.try-button{font-size:10px;padding:11px 14px;gap:9px}.pointer-hint{bottom:12px;font-size:9px}.option-panel[data-category=shapes]{flex-wrap:wrap;gap:6px;min-height:147px}.option-panel[data-category=shapes] .option-card{flex:0 0 calc(25% - 5px);flex-direction:row;max-width:none;padding:10px 4px;gap:5px}.option-panel[data-category=shapes] .option-card svg{width:20px;height:20px}.option-panel[data-category=shapes] .option-card[aria-pressed=true]::after{top:5px;right:5px;width:2px;height:2px}}
@media(max-width:360px){.journey-links{gap:10px}.journey-links a:first-child{display:none}.name-field input{width:53px}.action-row{gap:6px}.try-button{padding:11px 12px}.replay-button{padding:11px 10px}.wordmark h1{font-size:12px}.controls{width:calc(100% - 28px)}}
@media(pointer:coarse){.pointer-hint{font-size:0}.pointer-hint::after{content:'Touch the light';font-size:10px}.pointer-spark{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
.stage-glow{mask-image:radial-gradient(ellipse at center,#000 25%,transparent 70%)}