:root{--base:#ece8f5;--paper:#fbfaff;--white:#fff;--ink:#1e1530;--grey:#625a74;--line:#c9c2da;--orange:#ff8c1f;--violet:#c04bff;--mint:#2ee59d;--ink2:#3e3552;--ink3:#6f6585;--soft:#b3a9c9;--violet-light:#d98bff;--font:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;--inspector-w:420px;--radius:16px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--base);color:var(--ink);font:400 1rem/1.55 var(--font);-webkit-font-smoothing:antialiased;font-stretch:100%}button,input,textarea{font:inherit;color:inherit}a{color:var(--ink);-webkit-text-decoration-color:var(--violet);text-decoration-color:var(--violet);text-underline-offset:3px;font-weight:600;text-decoration-thickness:2px}:focus-visible{outline:3px solid var(--violet);outline-offset:2px}::selection{background:var(--mint)}.app{grid-template-columns:1fr var(--inspector-w);grid-template-rows:1fr auto;height:100dvh;display:grid}.viewport{background:var(--base);grid-area:1/1;min-height:0;position:relative;overflow:hidden}.viewport .canvas{z-index:1;inset:0;position:absolute!important}.viewport canvas{touch-action:none}.big-name{z-index:3;color:var(--ink);-webkit-text-stroke:.09em var(--paper);paint-order:stroke fill;text-shadow:.05em .05em 0 var(--violet);font:800 clamp(3.4rem, 9vw, 9.5rem)/.86 var(--font);letter-spacing:-.035em;pointer-events:none;margin:0;position:absolute;bottom:34px;left:28px;right:28px}.big-name .word{white-space:nowrap;display:block}.big-name .letter{will-change:transform;display:inline-block}.hud{z-index:2;pointer-events:none;position:absolute;top:26px;left:28px;right:64px}.hud-top{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.tag{font:800 1.15rem/1 var(--font);background:var(--orange);transform-origin:0;border-radius:999px;margin:0;padding:8px 16px 7px;transform:rotate(-3deg)}.code{text-align:right;font:600 .8rem/1.3 var(--font);font-variant-numeric:tabular-nums;color:var(--grey);margin:0;font-stretch:80%}.hud-pitch{max-width:23rem;font:500 1rem/1.45 var(--font);border-left:5px solid var(--mint);margin:14px 0 0;padding-left:12px}.block-stripe{z-index:0;aspect-ratio:1;background:var(--violet);border-radius:50%;width:clamp(200px,30vw,440px);position:absolute;top:6%;right:16%}.hud-hint{z-index:2;font:600 .82rem/1 var(--font);color:var(--grey);pointer-events:none;margin:0;position:absolute;bottom:12px;right:22px}.timeline{background:var(--ink);height:76px;color:var(--white);grid-area:2/1;grid-template-columns:22px auto 1fr auto;align-items:center;gap:18px;padding:0 24px 0 0;display:grid}.hazard{background:radial-gradient(circle, var(--orange) 3.5px, transparent 4px) 0 0 / 11px 11px;align-self:stretch}.play{background:var(--orange);cursor:pointer;border:0;border-radius:50%;place-items:center;width:46px;height:46px;transition:transform .16s cubic-bezier(.3,1.8,.5,1);display:grid}.play svg{width:16px;height:16px;fill:var(--ink)}.play:hover{background:var(--mint);transform:scale(1.08)}.play:active{transform:scale(.92)}.track{height:44px;position:relative}.barcode{position:absolute;inset:0}.barcode i{background:var(--ink2);border-radius:2px;width:2px;height:14px;position:absolute;bottom:8px;transform:translate(-50%)}.barcode i.major{background:var(--ink3);height:22px}.barcode i.key{background:var(--white);border-radius:3px;width:6px;height:34px}.barcode i.lit{background:var(--orange)}.barcode i.key.lit{background:var(--mint)}.barcode i.now{background:var(--violet);border-radius:3px;width:6px;height:44px;bottom:0}.track input[type=range]{opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;position:absolute;inset:0}.track:has(input:focus-visible){outline:3px solid var(--violet);outline-offset:4px}.frame-readout{flex-direction:column;align-items:flex-end;line-height:1;display:flex}.frame-readout span{font:800 2.2rem/.9 var(--font);font-variant-numeric:tabular-nums;color:var(--orange)}.frame-readout small{font:600 .72rem/1 var(--font);color:var(--soft);margin-top:4px;font-stretch:75%}.inspector{background:var(--base);border-left:2px solid var(--ink);grid-area:1/2/span 2;padding:18px 18px 36px;overflow-y:auto}.block{background:var(--paper);border-radius:var(--radius);overflow:hidden}.block-body{padding:16px 18px 20px}.bar{background:var(--ink);color:var(--white);justify-content:space-between;align-items:baseline;padding:9px 18px 8px;display:flex}.bar h2{font:800 1.1rem/1 var(--font);margin:0}.bar span{font:700 .78rem/1 var(--font);color:var(--ink);background:var(--mint);border-radius:999px;padding:3px 9px}.note{color:var(--grey);margin:0 0 14px;font-size:.9rem;line-height:1.5}.group{border:0;border-top:3px dotted var(--line);min-width:0;margin:0 0 6px;padding:10px 0 6px}.group legend{font:800 .85rem/1 var(--font);color:var(--ink);align-items:center;gap:6px;padding:0 8px 0 0;display:flex}.group legend:before{content:"";background:var(--violet);border-radius:50%;width:9px;height:9px}.attr{min-height:34px;font:700 .95rem/1 var(--font);grid-template-columns:4.6rem 1fr 3.8rem;align-items:center;gap:12px;display:grid}.attr.has-marks{align-items:start;padding-top:6px}.attr.has-marks>label,.attr.has-marks>.attr-value{padding-top:2px}.attr-value{text-align:right;font-variant-numeric:tabular-nums;font-size:.88rem}.range-wrap{min-width:0}.attr input[type=range]{appearance:none;cursor:pointer;--track:linear-gradient(to right, var(--line) 0 var(--lo), var(--orange) var(--lo) var(--hi), var(--line) var(--hi) 100%);background:0 0;width:100%;height:20px;margin:0;display:block}.attr input[type=range]::-webkit-slider-runnable-track{background:var(--track);border-radius:999px;height:6px}.attr input[type=range]::-moz-range-track{background:var(--track);border-radius:999px;height:6px}.attr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--paper);border:3px solid var(--ink);border-radius:50%;width:20px;height:20px;margin-top:-7px;transition:transform .16s cubic-bezier(.3,1.8,.5,1)}.attr input[type=range]::-moz-range-thumb{background:var(--paper);border:3px solid var(--ink);border-radius:50%;width:14px;height:14px}.attr input[type=range]:active::-webkit-slider-thumb{background:var(--mint);transform:scale(1.3)}.marks{font:600 .72rem/1 var(--font);color:var(--grey);justify-content:space-between;margin-top:3px;display:flex}.marks span.on{color:var(--ink);font-weight:800}.graph{background:var(--ink);border-radius:10px;width:100%;height:auto;margin:8px 0 4px;display:block}.graph-zero{stroke:var(--ink2);stroke-width:1px;stroke-dasharray:3 4}.graph-curve{fill:none;stroke:var(--mint);stroke-width:2.5px;stroke-linejoin:round}.graph-key{fill:var(--orange)}.graph-head{stroke:var(--violet);stroke-width:2px}.graph-dot{fill:var(--paper);stroke:var(--violet);stroke-width:2.5px}.models{grid-template-columns:repeat(5,1fr);gap:6px;margin-top:4px;display:grid}.model{cursor:pointer;background:var(--base);font:700 .78rem/1 var(--font);border:0;border-radius:12px;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;transition:transform .16s cubic-bezier(.3,1.8,.5,1),background .12s;display:flex}.model svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:26px;height:26px}.model svg .fill{fill:var(--base);stroke:none}.model:hover{background:var(--line)}.model[aria-checked=true]{background:var(--ink);color:var(--orange);transform:rotate(-3deg)translateY(-1px)}.model[aria-checked=true] svg .fill{fill:var(--ink)}.actions{gap:10px;margin:12px 0 0;display:flex}.dice{cursor:pointer;background:var(--violet);color:var(--ink);font:800 .95rem/1 var(--font);border:0;border-radius:999px;align-items:center;gap:8px;padding:9px 16px 8px 12px;transition:transform .16s cubic-bezier(.3,1.8,.5,1);display:inline-flex}.dice svg{width:18px;height:18px}.dice svg rect{fill:var(--ink)}.dice svg circle{fill:var(--violet)}.dice:hover{transform:rotate(-4deg)scale(1.05)}.dice:active svg{transition:transform .12s;transform:rotate(90deg)}.toggles{gap:24px;margin-top:4px;display:flex}.attr.toggle{grid-template-columns:auto auto;gap:8px}.attr.toggle input{appearance:none;cursor:pointer;border:2px solid var(--ink);background:var(--white);border-radius:6px;width:20px;height:20px;margin:0}.attr.toggle input:checked{background:var(--mint);box-shadow:inset 0 0 0 3px var(--white)}.selection{border:2px dashed var(--line);min-height:60px;font:600 .92rem/1.35 var(--font);font-variant-numeric:tabular-nums;color:var(--grey);border-radius:12px;flex-wrap:wrap;align-content:center;align-items:center;gap:2px 18px;margin-top:14px;padding:10px 14px;display:flex}.selection.active{background:var(--ink);color:var(--white);border:0}.selection strong{width:100%;font:800 1.05rem/1.2 var(--font);color:var(--violet-light)}.tabs{background:var(--paper);border-radius:999px;gap:6px;margin:18px 0 10px;padding:5px;display:flex}.tabs [role=tab]{cursor:pointer;font:800 1rem/1 var(--font);background:0 0;border:0;border-radius:999px;flex:1;padding:10px 8px 9px;transition:transform .16s cubic-bezier(.3,1.8,.5,1)}.tabs [role=tab]:hover{background:var(--base)}.tabs [role=tab][aria-selected=true]{background:var(--ink);color:var(--orange);transform:rotate(-2deg)}.prose p{max-width:62ch;margin:0 0 1rem}.prose h3{font:800 1.35rem/1.1 var(--font);border-bottom:3px dotted var(--violet);margin:1.6rem 0 .8rem;padding-bottom:6px}.work{margin:0;padding:0;list-style:none}.work li{border-top:1px solid var(--line);padding:14px 0}.work li:first-child{border-top:0;padding-top:2px}.work li:last-child{padding-bottom:0}.work a{justify-content:space-between;align-items:center;gap:12px;text-decoration:none;display:flex}.work a:hover .work-title{box-shadow:inset 0 -9px 0 var(--mint)}.work-title{font:800 1.3rem/1.15 var(--font)}.work-kind{white-space:nowrap;font:700 .8rem/1.2 var(--font);background:var(--chip);color:var(--chip-ink);border-radius:999px;padding:4px 11px}.work p{color:var(--grey);margin:6px 0 0;font-size:.93rem}.contact{flex-direction:column;display:flex}.email-row{font:800 1.15rem/1.2 var(--font);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.muted{color:var(--grey)}.contact>.muted{margin:4px 0 12px;font-size:.92rem}.contact label{font:700 .95rem/1 var(--font);margin:12px 0 6px}.contact input,.contact textarea{background:var(--white);border:2px solid var(--ink);resize:vertical;border-radius:12px;padding:10px 12px}.contact input:focus,.contact textarea:focus{box-shadow:4px 4px 0 var(--violet);outline:none}.ghost,.primary{cursor:pointer;font:800 .95rem/1 var(--font);border-radius:999px}.ghost{border:2px solid var(--ink);white-space:nowrap;background:0 0;padding:7px 10px}.ghost:hover{background:var(--ink);color:var(--white)}.primary{background:var(--orange);color:var(--ink);border:0;align-self:flex-start;margin-top:18px;padding:14px 22px 13px;transition:transform .16s cubic-bezier(.3,1.8,.5,1)}.primary:hover{background:var(--mint);transform:rotate(-2deg)scale(1.04)}.links{border-top:3px dotted var(--violet);flex-wrap:wrap;gap:8px 20px;margin:24px 0 0;padding:16px 0 0;list-style:none;display:flex}.links a{font:800 1rem/1.2 var(--font)}@media (width<=860px){.app{grid-template-rows:64svh auto auto;grid-template-columns:1fr;height:auto}.inspector{border-left:0;grid-area:3/1;padding:16px 14px 32px;overflow:visible}.big-name{font-size:clamp(2.6rem,14vw,5rem);bottom:26px;left:14px}.hud{top:14px;left:14px;right:40px}.hud-pitch{max-width:17rem;font-size:.9rem}.tag{font-size:.9rem}.block-stripe{width:170px;top:30%;right:-50px}.hud-hint{font-size:.75rem;bottom:9px;right:14px}.timeline{grid-template-columns:14px auto 1fr auto;gap:12px;height:64px;padding-right:14px}.barcode i:not(.key):not(.major):not(.now),.frame-readout small{display:none}}@media (prefers-reduced-motion:reduce){.play,.tabs [role=tab],.primary,.dice,.model{transition:none}.attr input[type=range]::-webkit-slider-thumb{transition:none}}