:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#ecf7ff;background:#081420}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit}#view{position:fixed;inset:0;width:100%;height:100%;display:block}header{position:fixed;top:0;left:0;right:0;z-index:2;height:70px;padding:0 30px;display:flex;align-items:center;gap:28px;background:linear-gradient(#07111de8,#07111d7a);border-bottom:1px solid #ffffff20}.brand{font-size:12px;letter-spacing:.18em;font-weight:800;white-space:nowrap}.brand:first-letter{color:#ff704f}.brand span{color:#73bcb4}.grade{font-size:18px;font-weight:900;letter-spacing:.12em;color:#94f0d3}.shot{margin-left:auto;font-size:11px;letter-spacing:.14em;color:#a7bdd1}.panel{position:fixed;z-index:2;top:88px;left:20px;width:325px;max-height:calc(100dvh - 115px);overflow:auto;padding:23px;border:1px solid #8fb0ca4a;border-radius:17px;background:#0a1a2bdb;box-shadow:0 22px 55px #0008;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);scrollbar-width:thin}.eyebrow{font-size:10px;letter-spacing:.18em;color:#71dec2;font-weight:800}h1{font-size:29px;line-height:1.08;letter-spacing:-.04em;margin:12px 0}.panel p{font-size:12px;line-height:1.55;color:#aac0d2}.panel button{background:#1b4058;border:1px solid #5b899f;color:#eefaff;border-radius:8px;padding:9px 12px;cursor:pointer;margin:7px 7px 10px 0;font-size:12px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:12px 0 18px}.stats div{background:#143047;border:1px solid #2f566a;border-radius:8px;padding:10px 5px;text-align:center}.stats strong{display:block;font-size:24px}.stats span{font-size:9px;letter-spacing:.12em;color:#78cbbb}details{border-top:1px solid #ffffff25;padding-top:14px}summary{cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.08em;margin-bottom:10px}label{display:block;font-size:11px;color:#a9c0d1;margin:10px 0}label select,label input[type=number]{display:block;width:100%;margin-top:5px;background:#132b40;color:#fff;border:1px solid #4b718b;border-radius:7px;padding:7px}label input[type=checkbox]{vertical-align:middle}.hint{border-top:1px solid #ffffff25;padding-top:12px}.bottom{position:fixed;right:24px;bottom:25px;z-index:1;color:#d5e9f3b0;font-size:10px;letter-spacing:.18em;font-weight:800}.bottom span{color:#79ebc7;margin:0 8px}@media(max-width:700px){header{padding:0 12px;height:52px;gap:10px}.brand{font-size:9px}.grade{font-size:11px}.shot{display:none}.panel{top:auto;bottom:8px;left:8px;width:min(320px,calc(100vw - 16px));max-height:50vh;padding:15px}.bottom{display:none}}.phone-pairing{display:grid;justify-items:center;gap:8px;padding:14px;margin:14px 0;background:#142a39;border:1px solid #63d4c477;border-radius:14px;text-align:center}.phone-pairing p{margin:0;font-weight:700;color:#e8faff}.phone-pairing canvas{width:150px!important;height:150px!important;box-sizing:content-box;border:6px solid white;border-radius:8px;background:#fff}.phone-pairing a{font-size:10px;overflow-wrap:anywhere;color:#85f2dc}.phone-pairing small{color:#b7cbd5}body.booting #practice-panel,body.booting #panel-toggle,body.booting .bottom,body.booting #start-prompt,body.booting .view-controls,body.booting #lineup-root,body.booting .practice-hbtn{visibility:hidden}.phone-pairing[hidden]{display:none}.phone-pairing.connected canvas,.phone-pairing.connected a{display:none}.swing-mark{position:fixed;z-index:3;right:24px;top:86px;padding:7px 11px;border-radius:8px;background:#154f4a;color:#d5ffec;font-size:11px;font-weight:900;letter-spacing:.1em}body:not(.debug) .swing-mark,body:not(.debug) .shot,body:not(.debug) .grade:not(.smash){display:none}.start-prompt{position:fixed;z-index:4;left:50%;top:19%;transform:translate(-50%);padding:14px 18px;border-radius:12px;background:#0a1a2bef;color:#e8faff;text-align:center;font-weight:800}.start-prompt button{display:block;margin:10px auto 0;padding:9px 16px;border:1px solid #63d4c4;border-radius:8px;background:#16625a;color:#fff;cursor:pointer}.stats.warmup{grid-template-columns:repeat(2,1fr)}.targets-summary{padding:12px;border:1px solid #6bd5bf;border-radius:10px;background:#102f3b;font-size:12px;line-height:1.7}.targets-summary h2{margin:0 0 8px;font-size:17px}.targets-summary small{display:block;overflow-wrap:anywhere;margin-top:9px;color:#9fead8}.play-match{margin-left:auto;color:#09222a;background:#f5ac72;border-radius:8px;padding:9px 14px;font-weight:900;text-decoration:none;white-space:nowrap}@media(max-width:900px)and (orientation:landscape){.view-controls{display:none!important}.panel{top:52px;bottom:8px;max-height:none;width:min(290px,45vw)}.start-prompt{max-width:80vw}.panel button,#mouse-start,#panel-toggle{min-height:44px}}.practice-hbtn{min-height:40px;min-width:44px;padding:8px 14px;border:1px solid #ffffff40;border-radius:8px;background:#0a1a2bcc;color:#eefaff;font-weight:900;cursor:pointer;white-space:nowrap}.practice-hbtn[hidden]{display:none}@media(max-width:900px)and (orientation:landscape){header{gap:10px}.practice-hbtn{min-height:44px}}