:root{color-scheme:dark}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:#04060d}#app{position:fixed;top:0;right:0;bottom:0;left:0}canvas{display:block}#ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,PingFang TC,Microsoft JhengHei,sans-serif;color:#e8eefc}#title{position:absolute;top:22px;left:24px;text-shadow:0 2px 18px rgba(0,0,0,.8);max-width:min(420px,calc(100vw - 96px));opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}.brand{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;text-decoration:none;color:#ffffffe6;font-size:14px;font-weight:600;letter-spacing:.5px;pointer-events:auto;transition:color .2s ease,opacity .2s ease}.brand-dot{width:18px;height:18px;flex:0 0 auto;background:url(/favicon.png) center/contain no-repeat}.brand:hover{color:#fff;opacity:.9}#title h1{font-size:24px;font-weight:800;letter-spacing:0;line-height:1.15;background:linear-gradient(135deg,#fff 30%,#a9eaff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}.subtitle{font-size:13px;color:#9aa6b6;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}#experimentIntro,#title .science-note{display:none}#hint{position:absolute;bottom:20px;left:24px;max-width:min(600px,calc(100vw - 260px));padding:8px 11px;border:1px solid rgba(87,230,255,.16);border-radius:8px;background:#040a1675;font-size:11.5px;color:#8ea4c8;line-height:1.45;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}#hint b{color:#bcd0f0;font-weight:600}#hint br,#hintLine2:empty{display:none}.exp-close{position:absolute;top:18px;right:20px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(87,230,255,.32);border-radius:50%;color:#c8f6ff;background:#040a166b;box-shadow:0 6px 24px #00000059;pointer-events:auto}.exp-close:hover{color:#fff;border-color:#57e6ff9e;background:#128fb838}.exp-close svg{width:18px;height:18px}#timer{position:absolute;top:68px;right:22px;text-align:right;pointer-events:none;text-shadow:0 2px 18px rgba(0,0,0,.85);white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}#timerLabel{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:#7f93b8;font-weight:650}#elapsedTime{display:block;margin-top:3px;font-size:30px;line-height:1;font-weight:650;color:#e8fbff;font-variant-numeric:tabular-nums}#timer.done #timerLabel{color:#8ff2ff}#timer.done #elapsedTime{color:#57e6ff}#legend{position:absolute;bottom:20px;right:20px;min-width:170px;font-size:11px;color:#8fa3c6;text-align:right;line-height:1.6;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}#legend .legend-head,#legend .legend-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}#legend .legend-head{color:#a9bad9}#legend .legend-foot{color:#7f93b8}#legend .legend-foot span:last-child{color:#c8f6ff}#legend .bar{width:170px;height:8px;border-radius:4px;margin:5px 0 3px auto;background:linear-gradient(90deg,#0d1a3d,#128fb8 45%,#57e6ff 80%,#f2faff)}body.experiment-running #title,body.experiment-running #hint,body.experiment-running #timer,body.experiment-running #legend{opacity:1;visibility:visible}.start-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:30;pointer-events:auto;background:radial-gradient(circle at 50% 42%,#0a1226a3,#04060de6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.start-overlay[hidden]{display:none}.start-panel{width:min(500px,100%);max-height:calc(100vh - 48px);overflow-y:auto;padding:32px 30px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:#070c1ae0;box-shadow:0 24px 70px #0009;text-align:center}.start-eyebrow{margin-bottom:12px;color:#57e6ff;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase}.start-panel h2{margin-bottom:14px;font-size:34px;font-weight:800;line-height:1.05;letter-spacing:0;background:linear-gradient(135deg,#fff 25%,#a9eaff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.start-lede,.start-note{color:#9fb2d4;font-size:14px;line-height:1.6}.start-lede{margin-bottom:22px}.start-note{margin:-4px 0 22px;color:#c9d8f4;font-size:12.5px}.start-best{display:flex;width:fit-content;align-items:center;gap:10px;margin:0 auto 22px;padding:10px 18px;border-radius:999px;background:#57e6ff14;border:1px solid rgba(87,230,255,.28)}.start-best[hidden]{display:none}.start-best-label{color:#9aaad0;font-size:10px;letter-spacing:1.5px;text-transform:uppercase}.start-best-value{color:#8ff2ff;font-size:20px;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(87,230,255,.35)}.start-how{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;text-align:left}.start-how-item{display:flex;align-items:center;gap:12px}.start-how-key{flex:0 0 auto;min-width:70px;padding:6px 8px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:#ffffff12;color:#fff;font-size:11px;font-weight:800;letter-spacing:.6px;text-align:center;text-transform:uppercase}.start-how-key--absorb{border-color:#ffc6586b;background:#ffc6581a;color:#ffd27b}.start-how-key--goal{border-color:#57e6ff6b;background:#57e6ff1a;color:#8ff2ff}.start-how-text{color:#9aaad0;font-size:13px;line-height:1.45}.start-button{min-width:150px;padding:13px 30px;border:1px solid transparent;border-radius:8px;background:linear-gradient(135deg,#8ff2ff,#57e6ff);box-shadow:0 8px 24px #57e6ff47;color:#052033;cursor:pointer;font:inherit;font-size:15px;font-weight:800;transition:transform .12s ease,box-shadow .2s ease}.start-button:hover,.start-button:focus-visible{transform:translateY(-2px);box-shadow:0 12px 30px #57e6ff66;outline:none}.start-button:active{transform:translateY(0)}@media (max-width: 720px){#title{top:14px;left:16px;right:58px;max-width:none}.brand{margin-bottom:8px;font-size:13px}.brand-dot{width:16px;height:16px}#title h1{font-size:18px}.subtitle{margin-bottom:8px;font-size:11px;letter-spacing:1px}#experimentIntro,#hint,#legend,#title .science-note{display:none}.exp-close{top:12px;right:14px;width:34px;height:34px}#timer{top:auto;right:auto;bottom:20px;left:16px;text-align:left}#timerLabel{font-size:10px;letter-spacing:1px}#elapsedTime{font-size:23px}.start-overlay{padding:16px}.start-panel{max-height:calc(100vh - 32px);padding:26px 22px}.start-panel h2{font-size:28px}.start-lede{font-size:13.5px}.start-how-key{min-width:64px}.start-button{width:100%}}