html,body{touch-action:none;background:#05070b;height:100%;margin:0;overflow:hidden}canvas#c{width:100%;height:100%;display:block;position:fixed;inset:0}body{color:#d8d2c6;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:Helvetica Neue,Hiragino Sans,Yu Gothic,sans-serif}button{font-family:inherit}#loading{z-index:10;background:#05070b;flex-direction:column;justify-content:center;align-items:center;gap:18px;transition:opacity 1.2s;display:flex;position:fixed;inset:0}#loading.done{opacity:0;pointer-events:none}.ld-title{letter-spacing:.6em;opacity:.8;padding-left:.6em;font-size:15px}.ld-bar{background:#fff2;width:160px;height:1px}.ld-bar i{background:#e8c9a0;width:0;height:100%;transition:width .3s;display:block}#ui{--sl:max(24px, env(safe-area-inset-left));--sr:max(22px, env(safe-area-inset-right));--st:max(20px, env(safe-area-inset-top));--sb:max(18px, env(safe-area-inset-bottom));pointer-events:none;transition:opacity 1s;position:fixed;inset:0}#ui.hidden,.hidden{opacity:0}.title{left:var(--sl);top:calc(var(--st) + 2px);text-shadow:0 1px 6px #0006;flex-direction:column;gap:4px;display:flex;position:absolute}.title b{letter-spacing:.45em;font-size:15px;font-weight:400}.title span{letter-spacing:.3em;opacity:.55;text-transform:uppercase;font-size:10px}#topbar{right:var(--sr);top:var(--st);pointer-events:auto;gap:10px;display:flex;position:absolute}#topbar button{color:#d8d2c6;letter-spacing:.12em;cursor:pointer;-webkit-backdrop-filter:blur(4px);background:#0003;border:1px solid #ffffff40;border-radius:16px;padding:6px 13px;font-size:11px}#bottombar{left:var(--sl);right:var(--sr);bottom:var(--sb);grid-template-columns:1fr auto 1fr;align-items:end;gap:18px;display:grid;position:absolute}.notes{flex-direction:column;gap:6px;min-width:0;display:flex}.hint{letter-spacing:.15em;opacity:.45;font-size:10px}.credit{letter-spacing:.08em;opacity:.3;font-size:9px}#sunbar{pointer-events:auto;letter-spacing:.18em;text-transform:uppercase;opacity:.75;white-space:nowrap;align-items:center;gap:10px;font-size:9px;display:flex}#sunbar input{accent-color:#e8b884;width:min(260px,40vw);margin:0}#views{pointer-events:auto;justify-self:end;gap:10px;display:flex}#views button{color:#d8d2c6;cursor:pointer;background:0 0;border:1px solid #ffffff40;border-radius:50%;width:26px;height:26px;padding:0;font-size:10px;transition:all .3s}#views button.on{background:#e8c9a033;border-color:#e8c9a0}#gyro{left:50%;bottom:calc(var(--sb) + 110px);pointer-events:auto;color:#d8d2c6;letter-spacing:.1em;background:#0008;border:1px solid #ffffff40;border-radius:18px;padding:9px 18px;font-size:12px;position:absolute;transform:translate(-50%)}#gyro.hidden,body.capture #ui,body.capture #loading{display:none}@media (pointer:coarse),(max-width:760px){#ui{--sl:max(16px, env(safe-area-inset-left));--sr:max(16px, env(safe-area-inset-right));--st:max(14px, env(safe-area-inset-top));--sb:max(14px, env(safe-area-inset-bottom))}#topbar{gap:8px}#topbar button{border-radius:20px;min-height:40px;padding:0 15px;font-size:13px}#bottombar{grid-template-columns:1fr;justify-items:center;gap:12px}#bottombar .notes{text-align:center;order:3;align-items:center;gap:4px}#sunbar{order:1;justify-content:center;gap:10px;width:100%;max-width:420px;font-size:9px}#sunbar input{flex:1;width:auto;height:32px}#views{order:2;justify-self:center;gap:8px}#views button{width:38px;height:38px;font-size:12px}.hint{letter-spacing:.1em;font-size:10px}.credit{font-size:8px}#gyro{top:calc(var(--st) + 64px);bottom:auto}}@media (max-width:360px){#views{gap:5px}#views button{width:36px;height:36px}}@media (pointer:coarse) and (orientation:landscape) and (max-height:520px){#bottombar{grid-template-columns:1fr auto;place-items:center stretch;gap:16px}#sunbar{order:1;justify-self:start;max-width:360px}#views{order:2}#bottombar .notes{display:none}.title b{font-size:13px}.title span{font-size:9px}}