:root{--bg:#000;--panel:#080a0dd1;--panel-2:#0e1115eb;--line:#ffffff1a;--line-2:#ffffff0f;--ink:#fff;--ink-2:#b8bcc4;--ink-3:#8a9099;--ink-4:#4b5058;--turquoise:#33a6a0;--turquoise-bright:#5cc3ba;--turquoise-deep:#1d6f6b;--turquoise-glow:#33a6a029;--warning:#e8a87c;--font-sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--ease:cubic-bezier(.16, 1, .3, 1);--ease-out:cubic-bezier(.23, 1, .32, 1);--radius:14px;--radius-sm:9px;--gutter:20px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--shadow:0 18px 44px -18px #000000bf, 0 2px 6px #00000059}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);font-family:var(--font-sans);font-feature-settings:"ss01", "cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;margin:0;overflow:hidden}::selection{background:var(--turquoise);color:#04100f}:focus-visible{outline:2px solid var(--turquoise-bright);outline-offset:3px}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0}button:active{transform:scale(.97)}svg{display:block}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.app{position:fixed;inset:0}.canvas{touch-action:none;cursor:grab;width:100%;height:100%;display:block;position:absolute;inset:0}.app[data-dragging=true] .canvas{cursor:grabbing}.app[data-hover=disc] .canvas{cursor:pointer}.labels{pointer-events:none;position:absolute;inset:0;overflow:hidden}.labels>div{pointer-events:none}.brand{align-items:center;gap:12px;display:flex}.brand__mark{object-fit:contain;filter:drop-shadow(0 4px 10px #33a6a059);width:34px;height:30px;display:block}.brand__text{flex-direction:column;line-height:1.15;display:flex}.brand__text strong{letter-spacing:-.01em;font-size:17px;font-weight:800}.brand__text span{color:var(--ink-3);font-size:12px;font-weight:600}.brand--lg .brand__mark{width:48px;height:43px}.brand--lg .brand__text strong{font-size:21px}.brand--sm .brand__mark{width:30px;height:27px}.brand--sm .brand__text span{display:none}.loader{background:radial-gradient(ellipse 70% 50% at 50% 46%, #33a6a01a, transparent 70%), var(--bg);z-index:40;transition:opacity .6s var(--ease), visibility .6s;place-items:center;display:grid;position:absolute;inset:0}.loader--hidden{opacity:0;visibility:hidden}.loader__inner{flex-direction:column;gap:26px;width:min(360px,100vw - 48px);display:flex}.loader__bar{background:#ffffff14;border-radius:3px;height:3px;overflow:hidden}.loader__fill{background:linear-gradient(90deg, var(--turquoise-deep), var(--turquoise-bright));width:0%;height:100%;transition:width .32s var(--ease-out);border-radius:3px}.loader__status{color:var(--ink-3);margin:0;font-size:13px;font-weight:600}.intro{z-index:30;padding:var(--gutter);padding-bottom:calc(var(--gutter) + var(--safe-bottom));transition:opacity .52s var(--ease), visibility .52s;background:linear-gradient(90deg,#000000b8 0%,#00000059 45%,#0000 75%);place-items:end start;display:grid;position:absolute;inset:0}.intro--hidden{opacity:0;visibility:hidden;pointer-events:none}.intro__card{opacity:0;width:min(460px,100%);transition:opacity .7s var(--ease) .12s, transform .7s var(--ease) .12s;flex-direction:column;gap:18px;display:flex;transform:translateY(10px)}.intro:not(.intro--hidden) .intro__card{opacity:1;transform:none}.intro h1{letter-spacing:-.03em;text-wrap:balance;margin:6px 0 0;font-size:clamp(34px,5.2vw,52px);font-weight:800;line-height:1.02}.intro__lede{color:var(--ink-2);text-wrap:pretty;max-width:48ch;margin:0;font-size:15.5px;line-height:1.6}.intro__actions{flex-direction:column;gap:8px;margin-top:6px;display:flex}.intro__note{color:var(--ink-3);margin:4px 0 0;font-size:12.5px;line-height:1.5}.btn{border-radius:var(--radius-sm);background:var(--panel-2);border:1px solid var(--line-2);text-align:left;transition:background .18s var(--ease-out), border-color .18s var(--ease-out), transform .16s var(--ease-out);-webkit-backdrop-filter:blur(14px);align-items:center;gap:14px;padding:12px 16px;display:flex}.btn svg{width:22px;height:22px;color:var(--turquoise-bright);flex:none}.btn>span{flex-direction:column;gap:2px;display:flex}.btn strong{font-size:15px;font-weight:700}.btn small{color:var(--ink-3);font-size:12.5px;font-weight:500}.btn--primary{background:var(--turquoise);border-color:var(--turquoise);color:#04100f}.btn--primary svg,.btn--primary small{color:#04100fb8}.btn--compact{border-radius:999px;gap:10px;width:max-content;padding:9px 14px}.btn--compact svg{width:18px;height:18px}@media (hover:hover) and (pointer:fine){.btn:hover{border-color:var(--line);background:#181c22f2}.btn--primary:hover{background:var(--turquoise-bright);border-color:var(--turquoise-bright)}}.icon-btn{width:38px;height:38px;color:var(--ink-2);transition:background .16s var(--ease-out), color .16s var(--ease-out), border-color .16s var(--ease-out);border:1px solid #0000;border-radius:10px;place-items:center;display:grid}.icon-btn svg{width:20px;height:20px}.icon-btn--primary{background:var(--turquoise);color:#04100f}@media (hover:hover) and (pointer:fine){.icon-btn:hover{color:var(--ink);background:#ffffff12}.icon-btn--primary:hover{background:var(--turquoise-bright);color:#04100f}}.text-btn{color:var(--turquoise-bright);white-space:nowrap;border-radius:8px;padding:8px 10px;font-size:13px;font-weight:700}.chip{background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);-webkit-backdrop-filter:blur(14px);transition:background .16s var(--ease-out), color .16s var(--ease-out), border-color .16s var(--ease-out);white-space:nowrap;border-radius:999px;align-items:center;gap:8px;padding:8px 12px;font-size:13px;font-weight:700;display:inline-flex}.chip small{color:var(--ink-3);font-weight:600}.chip[aria-pressed=true]{background:var(--turquoise);border-color:var(--turquoise);color:#04100f}.chip[aria-pressed=true] small{color:#04100fb3}.chip--ghost{color:var(--ink-3)}.topbar{top:calc(var(--gutter) * .7 + var(--safe-top));left:var(--gutter);right:var(--gutter);z-index:20;transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;display:grid;position:absolute}.topbar--hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px)}.topbar__actions{background:var(--panel);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(14px);border-radius:12px;justify-content:flex-end;justify-self:end;gap:4px;padding:3px;display:flex}.modes{background:var(--panel);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(14px);border-radius:12px;gap:2px;padding:3px;display:flex}.modes__btn{color:var(--ink-3);transition:background .18s var(--ease-out), color .18s var(--ease-out);border-radius:9px;align-items:center;gap:8px;padding:8px 14px;font-size:13.5px;font-weight:700;display:flex}.modes__btn svg{width:18px;height:18px}.modes__btn[aria-pressed=true]{color:var(--ink);background:#ffffff14}.modes__btn[aria-pressed=true] svg{color:var(--turquoise-bright)}@media (hover:hover) and (pointer:fine){.modes__btn:hover{color:var(--ink)}}.context{top:calc(var(--gutter) * .7 + var(--safe-top) + 58px);left:var(--gutter);border-radius:var(--radius);background:var(--panel);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(14px);z-index:15;width:290px;transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;padding:16px 18px;position:absolute}.context--hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-10px)}.context__head{flex-wrap:wrap;align-items:baseline;gap:8px;display:flex}.context__client{letter-spacing:-.01em;font-size:18px;font-weight:800}.context__project{color:var(--turquoise-bright);font-size:13px;font-weight:600}.context__tagline{color:var(--ink-3);margin:4px 0 12px;font-size:13px;line-height:1.5}.context__note{color:var(--ink-4);margin:10px 0 0;font-size:11px}.stages{grid-template-columns:repeat(4,1fr);gap:4px;margin:0 0 12px;padding:0;list-style:none;display:grid}.stages li{color:var(--ink-4);letter-spacing:.02em;padding-top:8px;font-size:10.5px;font-weight:700;position:relative}.stages li:before{content:"";background:#ffffff1a;border-radius:2px;height:3px;position:absolute;top:0;left:0;right:0}.stages li[data-on=true]{color:var(--ink-2)}.stages li[data-on=true]:before{background:var(--turquoise)}.telemetry{flex-direction:column;display:flex}.telemetry__row{border-top:1px solid var(--line-2);grid-template-columns:1fr auto;align-items:baseline;gap:10px;padding:7px 0;font-size:13px;display:grid}.telemetry__row:first-child{border-top:0}.telemetry__label{color:var(--ink-3);font-weight:600}.telemetry__value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);font-size:14px;font-weight:500}.telemetry__value small{color:var(--ink-3);margin-left:4px;font-size:11px}.telemetry__row[data-warn=true] .telemetry__value{color:var(--warning)}.telemetry--sheet{background:#ffffff08;border-radius:10px;margin-top:6px;padding:4px 14px}.client-logo{object-fit:contain;background:#fff;border-radius:8px;width:auto;max-width:140px;height:36px;margin-bottom:8px;padding:5px 9px;display:block}.client-logo[hidden]{display:none}.client-logo--sm{vertical-align:middle;width:auto;height:26px;margin:0 8px 0 0;padding:3px 7px;display:inline-block}.joystick{left:calc(var(--gutter) + 8px);bottom:calc(var(--gutter) + var(--safe-bottom) + 70px);z-index:18;touch-action:none;width:124px;height:124px;transition:opacity .24s var(--ease);display:none;position:absolute}.joystick--hidden{opacity:0;pointer-events:none}@media (pointer:coarse){.joystick{display:block}}.joystick__base{-webkit-backdrop-filter:blur(10px);background:#080a0d8c;border:1px solid #ffffff24;border-radius:50%;position:absolute;inset:0}.joystick__base:before{content:"";border:1px dashed #5cc3ba59;border-radius:50%;position:absolute;inset:30%}.joystick__knob{background:var(--turquoise);width:52px;height:52px;transition:background .14s var(--ease-out);border-radius:50%;margin:-26px 0 0 -26px;position:absolute;top:50%;left:50%;box-shadow:0 6px 18px -6px #000000b3}.joystick--active .joystick__knob{background:var(--turquoise-bright)}.zones{left:var(--gutter);right:var(--gutter);bottom:calc(var(--gutter) + var(--safe-bottom));z-index:15;transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;align-items:center;gap:8px;display:flex;position:absolute}.zones--hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px)}.zones__chips{scrollbar-width:none;gap:8px;padding:2px;display:flex;overflow-x:auto}.zones__chips::-webkit-scrollbar{display:none}.hint{left:50%;bottom:calc(var(--gutter) + var(--safe-bottom));background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);-webkit-backdrop-filter:blur(14px);z-index:15;white-space:nowrap;transition:opacity .32s var(--ease), visibility .32s;border-radius:999px;align-items:center;gap:10px;padding:10px 16px;font-size:13px;font-weight:600;display:flex;position:absolute;transform:translate(-50%)}.hint svg{width:18px;height:18px;color:var(--turquoise-bright)}.hint--hidden{opacity:0;visibility:hidden;pointer-events:none}.app[data-mode=walk] .hint{bottom:calc(var(--gutter) + var(--safe-bottom) + 60px)}.tour{left:var(--gutter);bottom:calc(var(--gutter) + var(--safe-bottom));width:min(440px, calc(100vw - var(--gutter) * 2));border-radius:var(--radius);background:var(--panel);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow);z-index:16;transition:opacity .36s var(--ease), transform .36s var(--ease), visibility .36s;padding:18px 20px 14px;position:absolute}.tour--hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px)}.tour__meta{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;display:flex}.tour__chapter{color:var(--turquoise-bright);font-size:12px;font-weight:700}.tour__count{color:var(--ink-4);font-size:11.5px}.tour__title{letter-spacing:-.02em;text-wrap:balance;margin:0 0 8px;font-size:21px;font-weight:800;line-height:1.15}.tour__body{color:var(--ink-2);text-wrap:pretty;min-height:3lh;margin:0 0 14px;font-size:14px;line-height:1.58}.tour__bar{background:#ffffff14;border-radius:2px;height:2px;margin-bottom:10px;overflow:hidden}.tour__progress{background:var(--turquoise-bright);transform-origin:0;width:0%;height:100%}.tour__controls{align-items:center;gap:4px;display:flex}.tour__peek{color:var(--ink-4);align-items:center;gap:6px;margin-left:8px;font-size:12px;font-weight:600;display:inline-flex}.tour__peek svg{width:16px;height:16px}.tour__controls .text-btn{margin-left:auto}.tour.is-swapping .tour__title,.tour.is-swapping .tour__body{opacity:0;filter:blur(3px);transform:translateY(4px)}.tour__title,.tour__body{transition:opacity .26s var(--ease-out), filter .26s var(--ease-out), transform .26s var(--ease-out)}.sheet{top:calc(var(--gutter) * .7 + var(--safe-top) + 58px);right:var(--gutter);bottom:calc(var(--gutter) + var(--safe-bottom));width:min(380px, calc(100vw - var(--gutter) * 2));border-radius:var(--radius);background:var(--panel-2);border:1px solid var(--line-2);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);z-index:25;transition:opacity .32s var(--ease), transform .36s var(--ease), visibility .36s;flex-direction:column;display:flex;position:absolute}.sheet--hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translate(16px)}.sheet__handle{display:none}.sheet__close{z-index:2;position:absolute;top:10px;right:10px}.sheet__scroll{scrollbar-width:thin;scrollbar-color:#ffffff29 transparent;overscroll-behavior:contain;padding:20px 22px 22px;overflow-y:auto}.sheet__scroll::-webkit-scrollbar{width:8px}.sheet__scroll::-webkit-scrollbar-thumb{background:#ffffff29 padding-box padding-box;border:2px solid #0000;border-radius:8px}.sheet__meta{align-items:center;gap:8px;margin-bottom:12px;padding-right:40px;display:flex}.tag{font-family:var(--font-mono);color:var(--turquoise-bright);letter-spacing:.04em;border:1px solid #5cc3ba59;border-radius:6px;padding:4px 8px;font-size:11.5px;font-weight:500}.stage-pill{color:var(--ink-3);background:#ffffff0f;border-radius:999px;padding:4px 9px;font-size:11.5px;font-weight:700}.sheet__title{letter-spacing:-.02em;text-wrap:balance;margin:0 0 4px;font-size:22px;font-weight:800;line-height:1.15}.sheet__zone{color:var(--ink-3);margin:0 0 14px;font-size:13px;font-weight:600}.sheet__body p{color:var(--ink-2);text-wrap:pretty;margin:0 0 12px;font-size:14px;line-height:1.6}.specs{border-top:1px solid var(--line-2);grid-template-columns:auto 1fr;gap:0;margin:6px 0 16px;display:grid}.specs dt,.specs dd{border-bottom:1px solid var(--line-2);margin:0;padding:8px 0;font-size:13px}.specs dt{color:var(--ink-3);padding-right:14px;font-weight:600}.specs dd{color:var(--ink);font-weight:600}.figure{background:#ffffff0a;border-radius:10px;margin:0 0 14px;overflow:hidden}.figure[hidden]{display:none}.figure img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;display:block}.figure figcaption{color:var(--ink-3);padding:10px 12px;font-size:12px;line-height:1.45}.sheet__actions{margin-top:14px}.sheet__source{color:var(--ink-4);margin:18px 0 0;font-size:11.5px;line-height:1.5}.dialog{z-index:35;padding:var(--gutter);transition:opacity .24s var(--ease);background:#0000008c;place-items:center;display:grid;position:absolute;inset:0}.dialog--hidden{opacity:0;visibility:hidden;pointer-events:none}.dialog__card{width:min(560px,100%);max-height:calc(100vh - var(--gutter) * 2);background:var(--panel-2);border:1px solid var(--line-2);box-shadow:var(--shadow);transition:transform .26s var(--ease);border-radius:16px;padding:20px 24px 24px;overflow-y:auto;transform:scale(.97)}.dialog:not(.dialog--hidden) .dialog__card{transform:none}.dialog__head{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.dialog__head h2{letter-spacing:-.02em;margin:0;font-size:20px}.help{gap:18px;display:grid}.help h3{color:var(--turquoise-bright);margin:0 0 8px;font-size:13px;font-weight:800}.help table{border-collapse:collapse;width:100%;font-size:13.5px}.help td{border-top:1px solid var(--line-2);vertical-align:top;color:var(--ink-2);padding:7px 0}.help td:first-child{width:46%;color:var(--ink);padding-right:12px;font-weight:700}.help kbd{font-family:var(--font-mono);border:1px solid var(--line-2);color:var(--ink);background:#ffffff14;border-radius:5px;padding:2px 6px;font-size:11.5px}.toast{left:50%;top:calc(var(--gutter) * .7 + var(--safe-top) + 62px);background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink-2);opacity:0;pointer-events:none;z-index:30;transition:opacity .22s var(--ease-out), transform .22s var(--ease-out);white-space:nowrap;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:600;position:absolute;transform:translate(-50%,-6px)}.toast--on{opacity:1;transform:translate(-50%)}.pin{pointer-events:auto;opacity:0;transition:opacity .24s var(--ease-out), transform .24s var(--ease-out);flex-direction:column;align-items:center;display:flex;position:relative;transform:translateY(-50%)}.pin--on{opacity:1}.pin__bubble{background:var(--panel-2);color:var(--ink);white-space:nowrap;transition:background .16s var(--ease-out), border-color .16s var(--ease-out), transform .16s var(--ease-out);border:1px solid #5cc3ba59;border-radius:999px;align-items:center;gap:7px;padding:5px 9px 5px 6px;font-size:12px;font-weight:700;display:flex;box-shadow:0 8px 20px -10px #000c}.pin__dot{background:var(--turquoise-bright);border-radius:50%;flex:none;width:8px;height:8px;box-shadow:0 0 0 3px #5cc3ba38}.pin__tag{font-family:var(--font-mono);color:var(--turquoise-bright);letter-spacing:.04em;font-size:11px;font-weight:500}.pin__name{display:none}.pin__stem{background:linear-gradient(#5cc3ba99,#5cc3ba00);width:1px;height:22px}.pin--near .pin__name{display:inline}.pin--active .pin__bubble{background:var(--turquoise);border-color:var(--turquoise);color:#04100f}.pin--active .pin__tag,.pin--active .pin__dot{color:#04100f;background:#04100f}.pin--active .pin__tag{background:0 0}@media (hover:hover) and (pointer:fine){.pin:hover .pin__bubble{border-color:var(--turquoise-bright);background:#181e24fa;transform:translateY(-1px)}}.zlabel{pointer-events:auto;border:1px solid var(--line-2);color:var(--ink);text-align:center;opacity:0;transition:opacity .26s var(--ease-out), background .16s var(--ease-out);-webkit-backdrop-filter:blur(10px);background:#080a0db3;border-radius:12px;flex-direction:column;align-items:center;gap:1px;padding:8px 14px;display:flex}.zlabel--on{opacity:1}.zlabel strong{letter-spacing:-.01em;font-size:15px;font-weight:800}.zlabel span{color:var(--turquoise-bright);font-size:11.5px;font-weight:600}@media (hover:hover) and (pointer:fine){.zlabel:hover{background:#12161ce6}}@media (max-width:860px){:root{--gutter:14px}.topbar{grid-template-columns:auto 1fr auto}.modes{left:50%;bottom:calc(var(--gutter) + var(--safe-bottom));z-index:22;position:fixed;transform:translate(-50%)}.modes__btn{white-space:nowrap;padding:9px 11px;font-size:12.5px}.context{top:calc(var(--gutter) * .7 + var(--safe-top) + 52px);width:min(250px, calc(100vw - var(--gutter) * 2));padding:12px 14px}.context__tagline,.stages,.context__note{display:none}.telemetry__row{padding:5px 0;font-size:12px}.context .telemetry__row:nth-child(n+3){display:none}.zones{bottom:calc(var(--gutter) + var(--safe-bottom) + 58px)}.app[data-mode=walk] .zones{left:calc(var(--gutter) + 140px)}.app[data-mode=walk] .hint{display:none}.hint{bottom:calc(var(--gutter) + var(--safe-bottom) + 58px);font-size:12px}.tour{left:var(--gutter);right:var(--gutter);width:auto;bottom:calc(var(--gutter) + var(--safe-bottom) + 58px);padding:14px 16px 12px}.tour__title{font-size:18px}.tour__body{min-height:auto;max-height:4lh;font-size:13px;overflow:hidden}.tour__peek{display:none}.sheet{width:100%;max-height:62vh;transition:opacity .26s var(--ease), transform .36s cubic-bezier(.32, .72, 0, 1), visibility .36s;border-radius:18px 18px 0 0;inset:auto 0 0;transform:none}.sheet--hidden{transform:translateY(100%)}.sheet__handle{background:#ffffff2e;border-radius:4px;width:40px;height:4px;margin:10px auto 0;display:block}.sheet__scroll{padding:14px 18px calc(18px + var(--safe-bottom))}.sheet__close{top:12px}.intro{background:linear-gradient(#0000 0%,#00000080 50%,#000000d9 100%);place-items:end stretch}.intro h1{font-size:32px}.intro__lede{-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:14px;display:-webkit-box;overflow:hidden}.toast{top:auto;bottom:calc(var(--gutter) + var(--safe-bottom) + 62px);transform:translate(-50%,6px)}.toast--on{transform:translate(-50%)}}@media (max-height:520px) and (orientation:landscape){.context{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
