:root{font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;color:#24343c;background:#d4dfe3;font-synthesis:none;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #74643b;outline-offset:3px}[hidden]{display:none!important}.scene-shell{height:100%;height:100dvh;width:100%;position:relative;overflow:hidden}#dna-scene{display:block;width:100%;height:100%;touch-action:none;outline-offset:-4px}.topbar{position:absolute;left:clamp(18px,4vw,56px);right:clamp(18px,4vw,56px);top:max(24px,env(safe-area-inset-top));display:flex;align-items:flex-start;justify-content:space-between;gap:12px;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:.2em;color:#5b6b73;margin:0 0 10px}h1{font-size:clamp(23px,3.2vw,38px);line-height:1.25;letter-spacing:.02em;font-weight:550;margin:0}.caption{font-size:13px;color:#556970;margin:10px 0 0}.back-link{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border:1px solid #62757d66;border-radius:6px;background:#e6ececb8;color:#24343c;font-size:13px;text-decoration:none;white-space:nowrap;pointer-events:auto}.back-link:hover{background:#f5f6ef}.bottom-panel{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);text-align:center}.hint{font-size:12px;margin:0 0 12px;color:#4a6069;text-shadow:0 1px 10px #f1f2e9}.controls{display:flex;align-items:center;gap:6px;padding:6px;border-radius:10px;border:1px solid #6f858a55;background:#e9eeedeb;box-shadow:0 8px 32px #233b4614;backdrop-filter:blur(12px)}.controls button{border:0;border-radius:6px;min-width:44px;min-height:44px;padding:0 13px;font-size:13px;color:#31464f;background:transparent;white-space:nowrap}.controls button:hover{background:#d4dfdd}.controls button[aria-pressed=true]{background:#334f57;color:#f5f1e4}.controls button:disabled{opacity:.4;cursor:wait}#zoom-in,#zoom-out{font-size:21px;padding:0;width:44px}#loading{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);padding:16px 22px;background:#eff2eced;border:1px solid #83939166;border-radius:8px;max-width:calc(100% - 32px);text-align:center;font-size:14px;color:#31464f}#retry{display:block;margin:12px auto 0;min-height:44px;border:1px solid #62757d88;border-radius:5px;padding:0 18px;background:#f4f5ef;color:#31464f}@media(max-width:600px){.topbar{top:max(20px,env(safe-area-inset-top));gap:8px}.eyebrow{font-size:8px;letter-spacing:.1em}h1{font-size:22px}.caption{font-size:11px;margin-top:8px}.back-link{padding:0 9px;font-size:11px}.bottom-panel{bottom:max(18px,env(safe-area-inset-bottom))}.hint{font-size:11px}.controls button{padding:0 10px;font-size:12px}}@media(max-height:520px) and (orientation:landscape){.topbar{top:14px}.eyebrow{margin-bottom:5px}h1{font-size:23px}.caption{margin-top:5px}.bottom-panel{bottom:12px;left:auto;right:16px;transform:none}.hint{margin-bottom:5px;font-size:10px}.controls{padding:4px}}