*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#000;color:#e8e6e1;font:14px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;-webkit-user-select:none;user-select:none}
#c{position:fixed;inset:0;width:100%;height:100%;touch-action:none;display:block}
#loading{position:fixed;inset:0;display:grid;place-items:center;letter-spacing:.08em;color:#aaa;transition:opacity .8s;pointer-events:none}body.ready #loading{opacity:0}
header{position:fixed;top:calc(env(safe-area-inset-top) + 12px);left:16px;display:flex;gap:12px;align-items:baseline;pointer-events:none}
h1{margin:0;font:200 28px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.35em;text-transform:uppercase}
#stats{font-size:11px;opacity:.5;font-variant-numeric:tabular-nums}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.lbl{position:absolute;left:0;top:0;pointer-events:auto;background:none;border:0;padding:0;color:#fff;cursor:pointer;font-size:11px;white-space:nowrap;text-shadow:0 0 4px #000,0 0 2px #000}
.lbl i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;border:1px solid #fff;box-shadow:0 0 3px #000}
.lbl span{position:absolute;left:7px;top:-7px;padding:2px 4px}
.lbl.mare{font-style:italic;letter-spacing:.06em;color:#cfd8ff}.lbl.mare i{display:none}.lbl.mare span{left:0;transform:translateX(-50%)}
.lbl.site{color:#ffd27a}.lbl.site i{border-color:#ffd27a;border-radius:0;transform:rotate(45deg)}
#panel{position:fixed;right:14px;bottom:calc(env(safe-area-inset-bottom) + 14px);width:300px;padding:14px 16px 10px;border-radius:16px;background:rgba(20,22,28,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1)}
#panelToggle{position:absolute;top:-14px;right:-6px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#22252c;color:#fff;font-size:16px;cursor:pointer}
.phase{font-size:13px;margin-bottom:8px;color:#fff}
label{display:block;font-size:12px;opacity:.9;margin-bottom:6px}label b{float:right;font-weight:500;opacity:.7}
input[type=range]{width:100%;accent-color:#c9c4b8;height:26px;margin:2px 0 0}
.phases{display:flex;justify-content:space-between;margin:2px 0 8px}.phases button{background:none;border:0;font-size:20px;cursor:pointer;padding:2px}
.btns{display:flex;gap:6px}.btns button{flex:1;padding:8px 4px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#ddd;font-size:12px;cursor:pointer}
.btns button.on{background:#d9d4c7;color:#111}
.credit{font-size:10px;opacity:.45;margin-top:8px;text-align:center}
body.collapsed #panel .rows{display:none}body.collapsed #panel{width:auto;padding:0;border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}body.collapsed #panelToggle{position:static;width:44px;height:44px;font-size:20px}
@media (max-aspect-ratio:1/1){#panel{left:10px;right:10px;width:auto}body.collapsed #panel{left:auto}h1{font-size:22px}}