@font-face{font-family:"Plex";src:url(../fonts/IBMPlexMono-Light.ttf);font-weight:300}
@font-face{font-family:"Plex";src:url(../fonts/IBMPlexMono-Regular.ttf);font-weight:400}
@font-face{font-family:"Plex";src:url(../fonts/IBMPlexMono-Thin.ttf);font-weight:100}
@font-face{font-family:"Instr";src:url(../fonts/InstrumentSerif-Italic.ttf);font-style:italic}
:root{--paper:#f3f2ed;--ink:#0b0b0c;--u:#2a2cff;--rule:rgba(11,11,12,.25)}
html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:Plex,ui-monospace,monospace;font-weight:300;font-size:13px}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.load{position:fixed;inset:0;z-index:20;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .6s}
.load .big{font-weight:100;font-size:min(32vw,260px);line-height:.8}
.load .lg{letter-spacing:.12em;font-size:12px}
.load .p{width:min(420px,70vw);height:2px;background:var(--rule)}.load .p i{display:block;height:100%;width:0;background:var(--u)}
.bar{position:fixed;left:0;right:0;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:stretch;background:rgba(243,242,237,.92);border-bottom:1px solid var(--rule)}
.bar .t{padding:10px 14px;letter-spacing:.1em;border-right:1px solid var(--rule)}.bar .t b{color:var(--u);font-weight:400}
.btn{font:inherit;font-size:12px;background:transparent;color:var(--ink);border:0;border-right:1px solid var(--rule);padding:10px 14px;cursor:pointer;letter-spacing:.06em}
.btn:hover,.btn.on{background:var(--ink);color:var(--paper)}.btn.hot{color:var(--u)}.btn.hot.on{background:var(--u);color:var(--paper)}
.panel{position:fixed;left:12px;top:52px;z-index:10;background:rgba(243,242,237,.95);border:1px solid var(--rule);padding:12px 14px;max-width:300px;line-height:1.6}
.panel label{display:flex;gap:8px;align-items:center;cursor:pointer}.panel input{accent-color:var(--u)}
.panel h4{margin:0 0 6px;font-weight:400;letter-spacing:.1em;color:var(--u);font-size:12px}
.tl{position:fixed;left:12px;right:12px;bottom:12px;z-index:10;display:flex;gap:10px;align-items:center;background:rgba(243,242,237,.95);border:1px solid var(--rule);padding:6px 10px}
.tl input{flex:1;accent-color:var(--u)}.tl .btn{border:1px solid var(--rule)}
.hud{position:fixed;right:12px;top:52px;z-index:10;width:250px;background:rgba(243,242,237,.95);border:1px solid var(--rule);padding:12px 14px}
.hud .row{display:flex;justify-content:space-between;margin:6px 0 4px}.hud b{font-weight:400;color:var(--u)}
.hud .m{height:4px;background:var(--rule)}.hud .m i{display:block;height:100%;width:0;background:var(--u)}
.hud input{width:100%;accent-color:var(--u)}
.name{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);z-index:9;pointer-events:none;font-family:Instr,serif;font-style:italic;font-size:min(9vw,110px);white-space:nowrap;text-align:center}
.name span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:opacity .3s}
.name span.on{color:var(--u)}
.msg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:15;background:var(--paper);border:1px solid var(--ink);padding:26px 30px;max-width:min(640px,86vw);max-height:84vh;overflow:auto;line-height:1.6;box-sizing:border-box}
.msg h3{font-family:Instr,serif;font-style:italic;font-weight:400;font-size:40px;margin:0 0 10px}.msg .btn{border:1px solid var(--ink);margin-top:14px}
.hint{position:fixed;left:12px;bottom:12px;z-index:9;font-size:11px;max-width:60vw;opacity:.75}
.fx{position:fixed;z-index:9;pointer-events:none;color:var(--u);font-size:13px;transition:transform 1s,opacity 1s}
[hidden]{display:none!important}