:where(html){--shadow-color:220 3% 15%;--shadow-strength:1%;--shadow-strength-3:calc(var(--shadow-strength) + 2%);--shadow-strength-4:calc(var(--shadow-strength) + 3%);--shadow-strength-5:calc(var(--shadow-strength) + 4%);--shadow-strength-6:calc(var(--shadow-strength) + 5%);--shadow-strength-7:calc(var(--shadow-strength) + 6%);--shadow-strength-8:calc(var(--shadow-strength) + 7%);--shadow-strength-10:calc(var(--shadow-strength) + 9%);--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 rgba(0,0,0,.067);--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/var(--shadow-strength-10));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 7px 14px -5px hsl(var(--shadow-color)/var(--shadow-strength-6));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/var(--shadow-strength-3)),0 1px 2px -5px hsl(var(--shadow-color)/var(--shadow-strength-3)),0 2px 5px -5px hsl(var(--shadow-color)/var(--shadow-strength-5)),0 4px 12px -5px hsl(var(--shadow-color)/var(--shadow-strength-6)),0 12px 15px -5px hsl(var(--shadow-color)/var(--shadow-strength-8));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/var(--shadow-strength-3)),0 1px 1px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 2px 2px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 5px 5px -2px hsl(var(--shadow-color)/var(--shadow-strength-5)),0 9px 9px -2px hsl(var(--shadow-color)/var(--shadow-strength-6)),0 16px 16px -2px hsl(var(--shadow-color)/var(--shadow-strength-7));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/var(--shadow-strength-3)),0 2px 1px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 5px 5px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 10px 10px -2px hsl(var(--shadow-color)/var(--shadow-strength-5)),0 20px 20px -2px hsl(var(--shadow-color)/var(--shadow-strength-6)),0 40px 40px -2px hsl(var(--shadow-color)/var(--shadow-strength-8));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/var(--shadow-strength-3)),0 3px 2px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 7px 5px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 12px 10px -2px hsl(var(--shadow-color)/var(--shadow-strength-5)),0 22px 18px -2px hsl(var(--shadow-color)/var(--shadow-strength-6)),0 41px 33px -2px hsl(var(--shadow-color)/var(--shadow-strength-7)),0 100px 80px -2px hsl(var(--shadow-color)/var(--shadow-strength-8));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/var(--shadow-strength-10));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/var(--shadow-strength-10)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/var(--shadow-strength-10)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/var(--shadow-strength-10)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/var(--shadow-strength-10)),var(--inner-shadow-highlight)}@media(prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%;--inner-shadow-highlight:inset 0 -.5px 0 0 hsla(0,0%,100%,.067),inset 0 .5px 0 0 rgba(0,0,0,.467)}}:root{--ui-bg: oklch(15% .01 245);--ui-surface: oklch(17% .01 245 / .64);--ui-surface-solid: oklch(17% .01 245);--ui-raised: oklch(100% 0 0 / .07);--ui-hairline: oklch(100% 0 0 / .11);--ui-hairline-soft: oklch(100% 0 0 / .06);--ui-text: oklch(97% .004 90);--ui-dim: oklch(97% .004 90 / .62);--ui-faint: oklch(97% .004 90 / .4);--ui-accent: oklch(87% .11 86);--ui-accent-dim: oklch(87% .11 86 / .14);--ui-good: oklch(82% .11 150);--ui-warn: oklch(84% .12 70);--ui-bad: oklch(72% .14 25);--ui-r-sm: 6px;--ui-r: 10px;--ui-r-lg: 14px;--ui-blur: blur(18px) saturate(130%);--ui-ease: cubic-bezier(.25, 0, .3, 1);--ui-shadow: 0 1px 1px oklch(0% 0 0 / .18), 0 14px 36px -12px oklch(0% 0 0 / .5);--ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ui-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", "Songti SC", serif;--ui-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace}:root{--bg: var(--ui-bg);--panel: var(--ui-surface);--panel2: var(--ui-raised);--line: var(--ui-hairline);--rim: var(--ui-hairline);--cy: var(--ui-accent);--cy-hot: var(--ui-accent);--ink: var(--ui-text);--dim: var(--ui-dim);--dimmer: var(--ui-faint);--accent: var(--ui-accent);--accent2: var(--ui-good);--hot: var(--ui-bad);--side: 336px;--glass: none}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font:13px/1.5 var(--ui-font);overflow:hidden;-webkit-font-smoothing:antialiased}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}#app{display:grid;height:100%;grid-template-columns:var(--side) 1fr;grid-template-rows:1fr auto;grid-template-areas:"side stage" "side transport"}#side{grid-area:side;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px;padding:14px 12px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}#side::-webkit-scrollbar{width:7px}#side::-webkit-scrollbar-thumb,#exp-list::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:4px}#side::-webkit-scrollbar-track{background:transparent}#brand h1{margin:0;font-size:17px;letter-spacing:.02em;font-weight:650}#brand .sub{margin:2px 0 0;color:var(--dim);font-size:11.5px}#brand .sub i{color:var(--accent2);font-style:italic}.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;backdrop-filter:var(--ui-blur);-webkit-backdrop-filter:var(--ui-blur);box-shadow:var(--ui-shadow);padding:10px 11px;display:flex;flex-direction:column;gap:7px;flex:none}.card:before,.card:after{content:"";position:absolute;width:8px;height:8px;pointer-events:none}.card:before{top:3px;right:3px;border-top:2px solid var(--cy);border-right:2px solid var(--cy)}.card:after{bottom:3px;left:3px;border-bottom:2px solid var(--cy);border-left:2px solid var(--cy)}.eyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy);opacity:.85;font-weight:600}.dim{color:var(--dimmer)}#exp-label{margin:0;font-size:14.5px;font-weight:620;line-height:1.25}.note{margin:0;font-size:11.5px;color:var(--dim);line-height:1.45}.stats{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px}.stat{display:flex;justify-content:space-between;font-size:11px}.stat b{font-family:ui-monospace,monospace;font-weight:600;color:var(--ink)}.stat span{color:var(--dimmer)}#highlights{display:flex;flex-direction:column;gap:3px;max-height:168px;overflow-y:auto}.hl{display:flex;align-items:baseline;gap:6px;font-size:11px;cursor:pointer;padding:2px 5px;border-radius:5px;border:1px solid transparent}.hl:hover{background:#ffffff12;border-color:var(--line)}.hl .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hl.named .nm{color:var(--hot);font-weight:600}.hl .t{font-family:ui-monospace,monospace;color:var(--dimmer);font-size:10px}#filter{background:#ffffff0f;border:1px solid var(--line);border-radius:999px;color:var(--ink);padding:6px 11px;font-size:11.5px;outline:none}#filter:focus{border-color:var(--accent)}#exp-list{overflow-y:auto;display:flex;flex-direction:column;gap:1px;margin:-2px -4px 0;padding:0 4px;max-height:300px;scrollbar-width:thin}.grp{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dimmer);margin:7px 0 2px;font-weight:600}.exp{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:6px;cursor:pointer;border:1px solid transparent;font-size:11.5px}.exp:hover{background:#ffffff0f}.exp.on{background:linear-gradient(90deg,#f4cf7d33,#f4cf7d08 70%);border-color:var(--rim);clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%)}.exp .dot{width:6px;height:6px;border-radius:50%;flex:none}.exp .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.exp .ct{font-family:ui-monospace,monospace;font-size:9.5px;color:var(--dimmer)}#legend{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}.lg{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--dim)}.lg i{width:7px;height:7px;border-radius:50%;flex:none}.prov{margin:4px 0 0;font-size:9.5px;color:var(--dimmer);line-height:1.4}.prov a{color:var(--dimmer)}#stage{grid-area:stage;position:relative;overflow:hidden}#canvas-host{position:absolute;inset:0}#canvas-host canvas{display:block;width:100%;height:100%}#tooltip{position:absolute;pointer-events:none;z-index:5;background:#0c1014f0;border:1px solid var(--line);border-radius:7px;padding:7px 9px;font-size:11px;max-width:260px;backdrop-filter:blur(6px);box-shadow:var(--ui-shadow)}#tooltip .tt-t{font-weight:640;margin-bottom:2px}#tooltip .tt-r{color:var(--dim);font-size:10.5px}#tooltip .tt-id{font-family:ui-monospace,monospace;font-size:9.5px;color:var(--dimmer)}#tooltip .tt-go{color:var(--accent);font-size:10px;margin-top:3px}#hud{position:absolute;left:14px;bottom:12px;font-size:10.5px;color:var(--dimmer);pointer-events:none;line-height:1.55;transition:opacity .3s ease}#hud kbd{font-family:ui-monospace,monospace;background:#ffffff12;border:1px solid var(--line);border-radius:3px;padding:0 4px;color:var(--dim)}#story{position:absolute;left:50%;transform:translate(-50%);bottom:26px;z-index:6;background:#0c1014ed;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:9px;padding:11px 16px;max-width:560px;backdrop-filter:blur(8px);box-shadow:var(--ui-shadow)}#story .st-step{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600}#story .st-text{font-size:13px;margin-top:3px;line-height:1.5}#guided{position:absolute;right:14px;top:14px;z-index:6}#to-pet,#to-how,#to-play{position:absolute;right:14px;z-index:6;text-decoration:none;display:inline-block}#to-pet{top:50px}#to-how{top:86px}#to-play{top:122px}#to-pet:hover,#to-how:hover,#to-play:hover{border-color:var(--accent);color:var(--accent)}button.ghost,a.ghost{background:#0c10149e;border:1px solid var(--line);color:var(--ink);border-radius:3px;padding:6px 11px;font-size:11.5px;cursor:pointer;backdrop-filter:blur(6px);font-family:inherit;letter-spacing:.03em;transition:border-color .15s,box-shadow .15s}button.ghost:hover,a.ghost:hover{border-color:var(--cy)}button.ghost.on{border-color:var(--accent);color:var(--accent)}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:11px;background:var(--bg);z-index:20;color:var(--dim);font-size:12px;transition:opacity .45s ease}#loading.gone{opacity:0;pointer-events:none}.spinner{width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--accent2);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#transport{grid-area:transport;background:var(--panel);border-top:1px solid var(--line);padding:9px 14px 7px;display:flex;flex-direction:column;gap:6px}#transport .row{display:flex;align-items:center;gap:10px}#transport button{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:999px;width:34px;height:32px;cursor:pointer;font-size:13px;font-family:inherit;transition:border-color .15s,box-shadow .15s}#transport button:hover{border-color:var(--cy)}#transport button.primary{background:var(--ui-accent-dim);border-color:var(--rim)}#scrub{flex:1;height:9px;background:#ffffff14;border:1px solid var(--line);border-radius:0;position:relative;cursor:pointer}#scrub-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);box-shadow:none}#scrub-head{position:absolute;top:50%;left:0;width:3px;height:16px;margin-top:-8px;background:#fff;border-radius:2px;box-shadow:0 0 0 2px #0c101499}#clock{font-size:11px;color:var(--dim);min-width:122px;text-align:right}.speed{font-size:10.5px;color:var(--dimmer);display:flex;align-items:center;gap:5px}.speed select{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:5px;padding:3px 5px;font-size:10.5px;outline:none}#raster{width:100%;height:92px;display:block;border-radius:6px;background:#040609}.raster-axis{display:flex;justify-content:space-between;font-size:9.5px;color:var(--dimmer);font-family:ui-monospace,monospace}@media(max-width:900px){#app{grid-template-columns:1fr;grid-template-areas:"stage" "transport"}#side{display:none}}#loading.failed .spinner{display:none}#loading.failed #loading-msg{color:var(--hot);max-width:440px;text-align:center;line-height:1.55}
