:root{color-scheme:dark}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#030305;color:#eee;font-family:Inter,ui-sans-serif,system-ui,sans-serif}body{letter-spacing:.02em}header,footer{position:fixed;z-index:5;left:0;right:0;display:flex;justify-content:space-between;padding:22px 28px;font:10px ui-monospace,SFMono-Regular,monospace;letter-spacing:.18em;color:#777}header{top:0;border-bottom:1px solid #ffffff0d}.brand{color:#eee}.brand span{color:#666;margin-left:14px}.hud{position:fixed;z-index:5;left:28px;right:28px;bottom:42px;display:grid;grid-template-columns:1fr auto auto;gap:30px;align-items:end}.emotion small,.sticks small{display:block;color:#666;font:9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.2em}.emotion strong{display:block;font-size:clamp(2rem,5vw,5rem);letter-spacing:-.07em;font-weight:500;margin:2px 0 12px}.meter{width:min(440px,42vw);height:3px;background:#222;overflow:hidden}.meter i{display:block;height:100%;width:0;background:#fff;box-shadow:0 0 20px #fff;transition:width .08s}.emotion small:last-child{margin-top:8px}.sticks{display:flex;gap:24px}.sticks b{display:block;margin-top:6px;font:12px ui-monospace,SFMono-Regular,monospace;color:#bbb}.controls{display:flex;gap:8px}button{appearance:none;border:1px solid #ffffff22;background:#ffffff08;color:#ddd;padding:11px 13px;font:9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.12em;cursor:pointer}button:hover{background:#fff;color:#000}button.active{background:#fff;color:#000}footer{bottom:0;padding-top:10px;color:#555}#stage{width:100%;height:100%;display:block}#status{color:#777}canvas{outline:none}