*,*:before,*:after{box-sizing:border-box}html.demo{height:100%;background:var(--stage-bg)}html.demo--portal{--stage-bg: linear-gradient( 180deg, #eef2f4 0%, #dce3e8 35%, #a7b2c2 55%, #3a4652 65%, #151c22 75%, #151c22 100% );--focus: #1b242b;--hover: rgba(27, 36, 43, .42);--menu-bg: rgba(255, 253, 249, .97);--menu-ink: #1b242b;--menu-line: rgba(27, 36, 43, .26);--btn-bg: rgba(255, 255, 255, .86);--btn-ink: #1b242b;--btn-line: rgba(27, 36, 43, .24)}html.demo--cosmic{--stage-bg: #050608;--focus: #f0ede8;--hover: rgba(240, 237, 232, .5);--menu-bg: rgba(12, 14, 18, .97);--menu-ink: #f0ede8;--menu-line: rgba(255, 255, 255, .22);--btn-bg: rgba(12, 14, 18, .84);--btn-ink: #f0ede8;--btn-line: rgba(255, 255, 255, .24)}html.demo--pixel{--stage-bg: #080a0f;--focus: #f0a64c;--hover: rgba(240, 166, 76, .58);--menu-bg: rgba(16, 12, 14, .97);--menu-ink: #f2e6d8;--menu-line: rgba(240, 166, 76, .32);--btn-bg: rgba(16, 12, 14, .86);--btn-ink: #f2e6d8;--btn-line: rgba(240, 166, 76, .68)}html.demo body{margin:0;min-height:100svh;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Noto Sans CJK SC,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}@media (min-width: 901px){html.demo--scroll body{overflow-x:hidden;overflow-y:auto;scrollbar-width:none}html.demo--scroll body::-webkit-scrollbar{width:0;height:0}}@media (max-width: 900px){html.demo--scroll body{overflow:hidden}}.scroll-track{position:relative;width:100%}@media (min-width: 901px){.scroll-track--explore{height:150svh}.scroll-track--explore .stage{position:sticky;top:0}}@media (max-width: 900px){.scroll-track--explore{height:100svh}.scroll-track--explore .stage{position:relative}}.stage{display:flex;align-items:center;justify-content:center;height:100vh;height:100svh;overflow:hidden;background:var(--stage-bg)}.art{position:relative;flex:0 0 auto;width:min(100%,150svh,1536px);aspect-ratio:3 / 2}.art img{display:block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.hotspot{position:absolute;display:block;margin:0;padding:0;border:0;border-radius:7px;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.hotspot:hover{outline:1px solid var(--hover);outline-offset:2px}.hotspot--menu[aria-expanded=true]{outline:2px solid var(--focus);outline-offset:3px}.hotspot:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.demo--pixel .hotspot:hover{outline:none}.demo--pixel .hotspot[data-nav]:after{content:"";position:absolute;left:50%;bottom:10px;width:10px;height:2px;background:#f0a64c;opacity:0;transform:translate(-50%);transition:opacity .12s linear;image-rendering:pixelated}.demo--pixel .hotspot[data-nav]:hover:after,.demo--pixel .hotspot[data-nav]:focus-visible:after,.demo--pixel .hotspot[data-nav][aria-expanded=true]:after{opacity:1}.demo--pixel .hotspot--menu[aria-expanded=true],.demo--pixel .hotspot--about[aria-expanded=true]{outline:none}.demo--pixel .hotspot--explore:before{content:"";position:absolute;left:62%;top:50%;width:4px;height:4px;background:#f0a64c;box-shadow:0 0 6px #f0a64c99;opacity:0;transform:translateY(-50%);transition:opacity .12s linear;image-rendering:pixelated}.demo--pixel .hotspot--explore:hover:before,.demo--pixel .hotspot--explore:focus-visible:before,.demo--pixel .hotspot--explore[aria-pressed=true]:before,body.is-exploring .hotspot--explore:before{opacity:1}.popover{opacity:0;transform:translateY(-4px);transition:opacity .26s ease,transform .26s ease}.popover.is-open{opacity:1;transform:translateY(0)}.demo-menu{position:absolute;top:calc(3.6% + 66px);right:2.5%;z-index:40;width:96px;padding:8px;border:1px solid var(--menu-line);border-radius:14px;background:var(--menu-bg);color:var(--menu-ink);box-shadow:0 16px 40px #00000057}.demo-menu[hidden]{display:none!important}.demo-menu__title{margin:4px 8px 6px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.8}.demo-menu a{display:flex;align-items:baseline;justify-content:flex-start;gap:10px;min-height:44px;padding:9px 10px;border-radius:8px;color:inherit;font-size:14px;line-height:1.3;text-decoration:none}.demo-menu a:hover{background:#7f7f7f29}.demo-menu a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.demo-menu small{font-size:11px;font-weight:400;opacity:.7;white-space:nowrap}.demo--pixel .demo-menu{border-radius:4px;border-color:#f0a64c8c;background:#0d0b10f7;color:#f2e6d8;box-shadow:5px 5px #00000073;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace}.demo--pixel .demo-menu__title{color:#f0a64c;opacity:1}.demo--pixel .demo-menu a:hover{background:#f0a64c1a;color:#f0a64c}.pixel-popover{position:absolute;z-index:45;width:min(240px,calc(100% - 24px));padding:14px 16px;border:1px solid rgba(240,166,76,.55);border-radius:3px;background:#0d0b10f7;box-shadow:5px 5px #00000073;color:#f2e6d8;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace}.pixel-popover[hidden]{display:none!important}.popover-close{position:absolute;top:7px;right:7px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid transparent;border-radius:3px;background:transparent;color:#f2e6d8d9;font:inherit;font-size:24px;line-height:1;cursor:pointer}.popover-close:hover{border-color:#f0a64c73;color:#f0a64c}.popover-close:focus-visible{outline:2px solid #f0a64c;outline-offset:2px}.pixel-popover--about{top:calc(3.6% + 66px);right:2.5%}.popover-kicker{margin:0 0 6px;color:#f0a64c;font-size:10px;font-weight:700;letter-spacing:.18em}.pixel-popover--about h2{margin:0 0 8px;color:#f2e6d8;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,sans-serif;font-size:20px;font-weight:700;letter-spacing:.01em}.about-bio{margin:0 0 14px;color:#cbbfb2;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,sans-serif;font-size:13px;line-height:1.7}.pixel-link{display:inline-flex;align-items:center;gap:6px;color:#f0a64c;font-size:12px;text-decoration:none;border-bottom:1px dashed rgba(240,166,76,.45);padding-bottom:2px}.pixel-link:hover{color:#ffc779;border-bottom-color:#ffc779}.pixel-link:focus-visible{outline:2px solid #f0a64c;outline-offset:3px}.explore-panel{left:32%;bottom:8%;width:290px}.explore-head{display:flex;align-items:center;gap:8px;padding-right:52px}.explore-head h2{margin:0;color:#f2e6d8;font-size:12px;font-weight:700;letter-spacing:.12em}.pixel-square{display:inline-block;width:6px;height:6px;background:#f0a64c;box-shadow:0 0 8px #f0a64c8c}.explore-hint{margin:9px 0 10px;color:#b9aa9b;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,sans-serif;font-size:12px;line-height:1.6}.explore-links{display:grid;gap:1px}.explore-links a{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:8px 6px;border-bottom:1px dashed rgba(240,166,76,.18);color:#f2e6d8;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,sans-serif;font-size:13px;text-decoration:none}.explore-links a span:last-child{color:#f0a64c}.explore-links a:hover{background:#f0a64c1a;color:#f0a64c}.explore-links a:focus-visible{outline:2px solid #f0a64c;outline-offset:2px}.explore-foot{margin:10px 0 0;color:#f2e6d8b3;font-size:10px;letter-spacing:.04em}.foot-mobile{display:none}body.is-exploring .zoom-hint{display:none!important}.mobile-actions{display:none}@media (max-width: 900px){.stage{display:block;overflow:auto;padding-block:max(24px,calc((100svh - 600px)/2));-webkit-overflow-scrolling:touch}.art{width:900px;max-width:none;margin:0}body.is-fit .stage{display:flex;align-items:center;justify-content:center;overflow:hidden;padding-block:0}body.is-fit .art{width:min(100%,150svh,1536px);max-width:100%;margin:0}.mobile-actions{position:fixed;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;justify-content:center;gap:8px;padding:0 12px}body.is-fit .mobile-actions{bottom:calc(50% - (min(100vw,100svh * 1.5,1536px)*.3333) - 56px)}.mobile-actions button{flex:0 0 auto;white-space:nowrap;min-height:44px;padding:9px 16px;border:1px solid var(--btn-line);border-radius:999px;background:var(--btn-bg);color:var(--btn-ink);font:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;-webkit-tap-highlight-color:transparent}.mobile-actions button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.explore-toggle{border-color:#f0a64c8c;color:#f0a64c}body.is-fit .nav-toggle{display:none}body.is-exploring .mobile-actions{bottom:calc(18px + env(safe-area-inset-bottom,0px))}.pixel-popover--about{position:fixed;top:205px;left:16px;right:16px;width:auto;max-width:240px;margin:0 auto}.demo-menu{position:fixed;top:170px;left:16px;right:16px;width:auto;max-width:100px;margin:0 auto}.demo--pixel .hotspot[data-nav]:after{display:none}.foot-desktop{display:none}.foot-mobile{display:inline}.explore-panel{position:fixed;left:16px;right:16px;bottom:calc(78px + env(safe-area-inset-bottom,0px));width:auto;max-width:320px;margin:0 auto}}.zoom-hint{position:fixed;left:50%;bottom:calc(82px + env(safe-area-inset-bottom,0px));z-index:50;display:none;margin:0;padding:4px 10px;border:1px solid var(--btn-line);border-radius:999px;background:var(--btn-bg);color:var(--btn-ink);font-size:11px;font-weight:600;line-height:1.4;opacity:.9;pointer-events:none;transform:translate(-50%)}@media (max-width: 900px){.zoom-hint{display:block}body.is-fit .zoom-hint{display:none}}@media (min-width: 901px){.mobile-actions,.zoom-hint{display:none!important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){.stage,.art,.hotspot,.demo-menu,.demo-menu a{scroll-behavior:auto}}
