*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft Yahei",sans-serif;background:#15222b;color:#ebffff}body:not(.replay){height:100dvh;overflow:hidden}#source{position:fixed;opacity:0;pointer-events:none;width:1px;height:1px}#live{position:fixed;inset:0;width:100%;height:100%;z-index:0;background:#b5bdc2}#hud{position:fixed;z-index:4;top:env(safe-area-inset-top);left:0;right:0;background:linear-gradient(rgba(4,21,30,.89),rgba(4,21,30,.67));padding:8px 13px 11px;font-size:12px;display:grid;gap:4px;pointer-events:none}#hud strong{font-size:14px}#status{color:#c3d9e2}.stats{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:#a0f4e7}.stats #gesture{font-weight:750;color:#fff}#notice{color:#eceac0;font-size:10px;line-height:1.4}#aim{position:fixed;z-index:2;border:2px solid #fff8aa;box-shadow:0 0 8px #ffcf7b;width:28px;height:28px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;display:none}#aim:before,#aim:after{content:"";position:absolute;background:#fff8aa;left:50%;top:50%;transform:translate(-50%,-50%)}#aim:before{width:2px;height:33px}#aim:after{height:2px;width:33px}#explain{position:fixed;z-index:2;left:12px;right:12px;top:25%;padding:13px 16px;background:rgba(4,24,37,.62);border:1px solid rgba(186,255,240,.5);border-radius:16px;display:grid;gap:9px;pointer-events:none}#explain strong{font-size:19px}#explain small{font-size:11px;color:#ddf6ee}body.active #explain{display:none}.controls{position:fixed;z-index:7;bottom:calc(env(safe-area-inset-bottom) + 5px);left:6px;right:6px;display:flex;align-content:flex-end;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px;padding:9px 6px;background:rgba(4,24,37,.86);border:1px solid rgba(122,228,220,.28);border-radius:14px;font-size:11px}button,.controls a,.controls summary{background:#15485b;border:1px solid #63b8c0;color:#fff;padding:10px 12px;border-radius:12px;font-weight:700;font-size:12px;min-height:45px;cursor:pointer;text-decoration:none}button.primary{background:#13728b;border-color:#a4f2ed}button:disabled{opacity:.48;cursor:default}.record-toggle{display:flex;gap:4px;align-items:center;background:rgba(14,64,77,.78);padding:8px;border-radius:10px}.record-toggle input{width:20px;height:20px}#tune-box{width:100%;max-width:600px}#tunes{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:8px;padding:7px 0}.tuner{display:grid;gap:3px}.tuner span{color:#b6e7ee}.tuner input{width:100%}#cue{position:fixed;top:25%;left:7%;right:7%;z-index:3;display:grid;gap:9px;text-align:center;padding:25px 10px;border-radius:24px;background:rgba(2,29,38,.60);box-shadow:0 0 20px rgba(4,38,43,.32)}#cue strong{font-size:40px;color:#fff2bd;text-shadow:0 0 12px #fabf67}#cue small{font-size:12px}.replay{background:#eaf3f4;color:#0d2932;min-height:100vh}.replay header{padding:20px;background:#153f51;color:#fff}.replay header a{color:#d1fce4;margin-right:18px}.replay main{padding:18px;max-width:850px;margin:auto}.replay .file{display:block;padding:15px;border:1px dashed #447b8e}.replay #tunes{grid-template-columns:repeat(2,minmax(110px,1fr))}.replay #tunes input{max-width:100%}.replay .tuner span{color:#304a5a}.replay #result{margin:15px 0;font-size:16px;font-weight:700;white-space:pre-wrap}.replay pre{overflow-wrap:anywhere;white-space:pre-wrap;background:#f7fbfb;border:1px solid #bdd4d5;padding:12px;border-radius:8px;font-size:12px}