:root{--paper:#fff;--ground:#fff;--ink:#17151f;--muted:#5f5d6b;--rail:#111119;--rail-2:#1e1e2b;--line:#b6b6c3;--focus:#986bf6;--accent:#826aed;--page-bg:#fff;--panel-bg:#fff;--panel-border:color-mix(in oklch, var(--ink), transparent 84%);--stage-paper:#fff;--ease-out:cubic-bezier(.16, 1, .3, 1)}@supports (color:lab(0% 0 0)){:root{--rail:lab(5.1321% 1.58397 -5.63537);--rail-2:lab(11.5865% 2.91564 -8.8551);--line:lab(74.3226% 1.74272 -6.53905);--focus:lab(55.1601% 41.3013 -64.6333)}}*{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}body{background:var(--page-bg);min-width:320px;color:var(--ink);margin:0;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}body:has(.artifact-shell.theme-white){--page-bg:#fff;--ink:#17151f;color:#17151f;background:#fff}body:has(.artifact-shell.theme-black){--page-bg:#050505;--ink:#f7f7f2;color:#f7f7f2;background:#050505}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}::selection{background:color-mix(in oklch, var(--focus), white 72%);color:var(--ink)}.artifact-shell{min-height:100svh;padding:max(clamp(12px, 2vw, 24px), env(safe-area-inset-top)) max(clamp(12px, 2vw, 24px), env(safe-area-inset-right)) max(clamp(12px, 2vw, 24px), env(safe-area-inset-bottom)) max(clamp(12px, 2vw, 24px), env(safe-area-inset-left));background:var(--page-bg);color:var(--ink)}.artifact-shell.theme-white{--page-bg:#fff;--panel-bg:#fff;--ink:#17151f;--muted:#5f5d6b;--panel-border:#17151f29;--stage-paper:#fff}@supports (color:lab(0% 0 0)){.artifact-shell.theme-white{--panel-border:lab(7.32838% 3.07534 -6.667/.16)}}.artifact-shell.theme-black{--page-bg:#050505;--panel-bg:#050505;--ink:#f7f7f2;--muted:#b9b5c6;--panel-border:#f7f7f238;--stage-paper:#050505}@supports (color:lab(0% 0 0)){.artifact-shell.theme-black{--panel-border:lab(97.1282% -.64972 2.4097/.22)}}.hero-panel{--focus:var(--glyph-color);--rail-active:var(--glyph-color);--rail-active-ink:#050505;border:1px solid var(--panel-border);background:var(--panel-bg);border-radius:14px;grid-template-rows:1fr;grid-template-columns:minmax(240px,.78fr) minmax(420px,1.34fr) minmax(224px,.55fr);gap:clamp(18px,2.4vw,32px);min-height:calc(100svh - clamp(24px,4vw,48px));display:grid;position:relative;overflow:hidden}.theme-white .hero-panel{--rail:color-mix(in oklch, var(--glyph-color), #fff 88%);--rail-2:color-mix(in oklch, var(--glyph-color), #fff 78%);--rail-ink:#17151f;--rail-muted:color-mix(in oklch, #17151f, var(--glyph-color) 12%);--rail-border:color-mix(in oklch, var(--glyph-color), #17151f 18%)}.theme-black .hero-panel{--rail:color-mix(in oklch, var(--glyph-color), #050505 82%);--rail-2:color-mix(in oklch, var(--glyph-color), #050505 74%);--rail-ink:#fff;--rail-muted:color-mix(in oklch, #fff, var(--glyph-color) 22%);--rail-border:color-mix(in oklch, var(--glyph-color), #fff 26%)}.intro{z-index:2;grid-area:1/1;align-self:center;max-width:560px;padding:clamp(30px,4.2vw,60px) 0 clamp(30px,4.2vw,60px) clamp(30px,4.2vw,60px)}.artifact-code{color:var(--muted);margin:0 0 24px;font-size:.86rem}h1{max-width:14ch;color:var(--ink);letter-spacing:0;text-wrap:balance;margin:0;font-size:clamp(2.5rem,5.2vw,4.25rem);font-weight:760;line-height:1}.intro-copy{max-width:42ch;color:var(--muted);text-wrap:pretty;margin:28px 0 0;font-size:clamp(1rem,1.5vw,1.17rem);line-height:1.65}.stage-wrap{grid-area:1/2;min-height:100%;position:relative}.stage{background:var(--stage-paper);position:absolute;inset:0;overflow:hidden}.stage:before{aspect-ratio:1;background:color-mix(in oklch, var(--glyph-color), transparent 88%);content:"";filter:blur(64px);border-radius:50%;width:min(44vw,620px);position:absolute;inset:auto 12% 8% auto}.stage:after{background:linear-gradient(90deg, var(--stage-paper) 0%, transparent 26%), linear-gradient(0deg, var(--stage-paper) 0%, transparent 22%, transparent 82%, var(--stage-paper) 100%);content:"";pointer-events:none;position:absolute;inset:0}.scene{opacity:0;transition:opacity .7s var(--ease-out);position:absolute;inset:0}.scene.is-ready{opacity:1}.ascii-canvas,.ascii-canvas canvas{width:100%;height:100%}.ascii-canvas{cursor:grab;touch-action:none}.ascii-canvas:active{cursor:grabbing}.artifact-placeholder,.webgl-fallback{background:var(--stage-paper);place-items:center;display:grid;position:absolute;inset:0}.artifact-placeholder div{aspect-ratio:1;border:1px solid color-mix(in oklch, var(--accent), transparent 74%);width:min(36vw,380px);animation:pulse 1.8s var(--ease-out) infinite;border-radius:50%}.webgl-fallback pre{max-width:100%;color:var(--accent);font-size:clamp(.8rem,2vw,1.35rem);line-height:1.15;overflow:hidden}.control-rail{z-index:3;border:1px solid var(--rail-border);background:var(--rail);color:var(--rail-ink);border-radius:8px;grid-area:1/3;align-self:end;gap:14px;margin:0 clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0;padding:14px;display:grid;position:relative}.control-group{grid-template-columns:1fr;align-items:start;gap:8px;min-width:0;display:grid}.control-label{color:var(--rail-muted);white-space:nowrap;margin:0;font-size:.875rem;line-height:1.25}.segmented{border:1px solid var(--rail-border);background:var(--rail-2);border-radius:8px;width:100%;min-width:0;display:flex}.select-control{border:1px solid var(--rail-border);background:var(--rail-2);width:100%;min-width:0;min-height:40px;color:var(--rail-ink);border-radius:8px;padding:0 34px 0 12px}.select-control option{color:#17151f;background:#fff}.segmented button{border:0;border-right:1px solid color-mix(in oklch, var(--rail-border), transparent 42%);min-width:64px;min-height:40px;color:var(--rail-muted);background:0 0;font-size:.92rem}.segmented button:last-child{border-right:0}.segmented.compact button{flex:1 1 0;min-width:0}.segmented button.is-active{background:var(--rail-active);color:var(--rail-active-ink)}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatches button{border:1px solid var(--rail-border);background:var(--rail-2);border-radius:8px;place-items:center;width:40px;height:40px;display:grid}.swatches button span{border:1px solid #ffffff94;border:1px solid lab(100% 0 0/.58);border-color:oklch(100% 5.96046e-8 none/.58) oklch(100% 5.96046e-8 none/.58) oklch(100% 5.96046e-8 none/.58) oklch(100% 5.96046e-8 none/.58);border-radius:50%;width:22px;height:22px}.swatches button.is-active{border-color:color-mix(in oklch, var(--rail-active), #fff 28%);background:color-mix(in oklch, var(--rail-active), #fff 12%)}.switch{min-height:40px;color:var(--rail-muted);white-space:nowrap;grid-template-columns:1fr auto;justify-content:space-between;align-items:center;gap:12px;font-size:.92rem;display:grid;position:relative}.switch input{opacity:0;pointer-events:none;position:absolute}.switch-track{border:1px solid var(--rail-border);background:var(--rail-2);border-radius:999px;width:48px;height:28px;position:relative}.switch-track:after{background:var(--rail-ink);content:"";width:20px;height:20px;transition:transform .18s var(--ease-out);border-radius:50%;position:absolute;top:3px;left:3px}.switch input:checked+.switch-track{background:var(--rail-active)}.switch input:checked+.switch-track:after{background:var(--rail-active-ink);transform:translate(20px)}.switch input:disabled+.switch-track{opacity:.55}.switch:has(input:focus-visible) .switch-track{outline:3px solid var(--focus);outline-offset:3px}.randomize-button{border:1px solid var(--rail-border);background:color-mix(in oklch, var(--rail-active), var(--rail-2) 68%);min-height:42px;color:var(--rail-ink);transition:background .18s var(--ease-out), border-color .18s var(--ease-out), transform .18s var(--ease-out);border-radius:8px;font-size:.92rem}.randomize-button:hover{border-color:var(--rail-active);background:color-mix(in oklch, var(--rail-active), var(--rail-2) 52%);transform:translateY(-1px)}.randomize-button:active{transform:translateY(0)}.readout{min-width:0;color:color-mix(in oklch, var(--rail-ink), var(--rail-active) 22%);flex-wrap:wrap;justify-content:flex-start;gap:10px;padding-top:2px;font-size:.875rem;line-height:1.35;display:flex}.readout span{white-space:nowrap}.readout span+span:before{content:"/";color:color-mix(in oklch, var(--rail-active), transparent 38%);margin-right:10px}@keyframes pulse{0%,to{opacity:.35;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}@media (max-width:1120px){.hero-panel{grid-template-rows:auto auto auto;grid-template-columns:1fr;min-height:auto}.intro{max-width:none;padding:28px 24px 0}.artifact-code{margin-top:clamp(20px,5vw,48px)}h1{max-width:12ch;font-size:clamp(3rem,15vw,5rem)}.stage-wrap{grid-area:2/1;min-height:clamp(360px,64svh,640px)}.stage:after{background:linear-gradient(0deg, var(--stage-paper) 0%, transparent 18%, transparent 86%, var(--stage-paper) 100%), linear-gradient(90deg, var(--stage-paper) 0%, transparent 18%, transparent 86%, var(--stage-paper) 100%)}.control-rail{grid-area:3/1;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 clamp(12px,2vw,24px) clamp(12px,2vw,24px);position:relative;inset:auto}.readout{grid-column:1/-1;justify-content:flex-start;width:100%;margin-left:0}}@media (max-width:620px){.artifact-shell{padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left))}.hero-panel{border-radius:10px}.intro{padding:22px 18px 0}.artifact-code{margin:18px 0;font-size:clamp(.78rem,3.4vw,.9rem);line-height:1.35}h1{max-width:min(100%,9ch);font-size:clamp(2.25rem,10.5vw,3rem);line-height:1.05}.intro-copy{max-width:31ch;margin-top:20px;font-size:clamp(.95rem,4.3vw,1.05rem);line-height:1.55}.stage-wrap{min-height:clamp(300px,48svh,460px);margin-top:-4px}.control-rail{grid-template-columns:1fr;gap:12px;margin:0 8px 8px;padding:10px}.control-group{grid-template-columns:1fr;align-items:flex-start;gap:8px;width:100%}.segmented,.select-control{width:100%}.segmented button{flex:1 1 0;min-width:0;padding-inline:6px;font-size:clamp(.78rem,3.4vw,.92rem)}.switch{justify-content:space-between;width:100%}}@media (max-height:620px) and (orientation:landscape){.intro{align-self:start}.stage-wrap{min-height:440px}}@media (hover:none),(pointer:coarse){.randomize-button:hover{transform:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}