@font-face{font-family:Space Grotesk;src:url(/02-AI-Frontiers/8-photosphere/fonts/space-grotesk-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}:root{color-scheme:dark;--bg: #05070d;--panel: rgba(10, 13, 22, .66);--panel-hover: rgba(18, 23, 38, .85);--border: rgba(255, 255, 255, .09);--text: #eef2f8;--muted: #8a93a8;--gold: #e8c37a;--cyan: #7fd8e0;--font-sans: "Space Grotesk", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono: "SFMono-Regular", Consolas, Menlo, monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-sans);user-select:none;-webkit-user-select:none}#app{position:relative;width:100%;height:100%}#viewport{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}#viewport:active{cursor:grabbing}.hud-top{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:20px 28px;background:linear-gradient(180deg,rgba(5,7,13,.7),transparent);pointer-events:none}.hud-top>*{pointer-events:auto}.brand{display:flex;align-items:baseline;gap:14px}.brand-title{font-size:16px;font-weight:700;letter-spacing:.22em;background:linear-gradient(120deg,#fff 30%,var(--gold) 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.brand-badge{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--muted);border:1px solid var(--border);padding:4px 9px;border-radius:999px;background:#ffffff08}.btn-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .2s ease}.btn-icon:hover{background:var(--panel-hover);border-color:#ffffff40}.btn-icon.active{border-color:var(--gold);color:var(--gold)}.btn-icon svg{width:18px;height:18px}.btn-icon .wave{opacity:.25}.btn-icon.active .wave{opacity:1}.phase-panel{position:absolute;left:28px;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:14px}.panel-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;color:var(--muted);writing-mode:vertical-rl;text-orientation:mixed;height:0;overflow:visible}.phase-list{display:flex;flex-direction:column;gap:10px}.phase-btn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:148px;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:var(--panel);color:var(--text);text-align:left;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all .25s ease;position:relative;overflow:hidden}.phase-btn:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);opacity:0;transition:opacity .25s ease}.phase-btn:hover{background:var(--panel-hover);transform:translate(4px)}.phase-btn.active{border-color:#e8c37a80;background:linear-gradient(120deg,rgba(232,195,122,.12),var(--panel))}.phase-btn.active:before{opacity:1}.phase-num{font-family:var(--font-mono);font-size:10px;color:var(--gold);letter-spacing:.2em}.phase-name{font-size:15px;font-weight:600;letter-spacing:.08em}.phase-tag{font-size:10px;color:var(--muted);letter-spacing:.06em}.hud-bottom{position:absolute;bottom:0;left:0;right:0;z-index:10;display:flex;align-items:flex-end;justify-content:space-between;padding:20px 28px;background:linear-gradient(0deg,rgba(5,7,13,.72),transparent);pointer-events:none}.hint{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hint-key{font-family:var(--font-mono);font-size:10px;border:1px solid var(--border);border-radius:5px;padding:3px 7px;color:var(--text);background:#ffffff0a}.hint-sep{opacity:.4}.phase-readout{text-align:right}.phase-readout strong{display:block;font-size:20px;font-weight:700;letter-spacing:.14em}.phase-readout em{display:block;font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;color:var(--gold);margin-top:4px}.charge-ring{position:fixed;z-index:20;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;pointer-events:none;background:conic-gradient(var(--gold) calc(var(--charge, 0) * 360deg),rgba(255,255,255,.1) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));animation:ring-spin 2.4s linear infinite}.charge-fill{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 calc(var(--charge, 0) * 40px) #e8c37a99}@keyframes ring-spin{to{transform:rotate(360deg)}}.boot{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:var(--bg);transition:opacity .9s ease}.boot.hidden{opacity:0;pointer-events:none}.boot-inner{text-align:center}.boot-inner p{margin-top:22px;font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;color:var(--muted)}.boot-orb{width:64px;height:64px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe9b8,var(--gold) 40%,rgba(120,60,10,.4) 75%,transparent);box-shadow:0 0 60px #e8c37a80;animation:orb-breathe 2.2s ease-in-out infinite}@keyframes orb-breathe{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.12);filter:brightness(1.3)}}@media(max-width:720px){.hud-top{padding:16px 18px}.brand-badge{display:none}.phase-panel{inset:auto 12px 96px;transform:none;flex-direction:row;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}.panel-label{display:none}.phase-list{flex-direction:row;gap:8px}.phase-btn{min-width:116px;padding:10px 12px;flex-shrink:0}.phase-btn:hover{transform:none}.phase-name{font-size:13px}.hud-bottom{padding:14px 18px;flex-direction:column;align-items:flex-start;gap:10px}.phase-readout{text-align:left}.phase-readout strong{font-size:16px}.hint{font-size:11px}}@media(prefers-reduced-motion:reduce){.boot-orb,.charge-ring{animation:none}}
