:root{color-scheme:dark;--bg:#030b13;--panel:#071724;--line:#164258;--cyan:#00d9ef;--muted:#8da8b6;--orange:#ff693c;--gold:#ffc34b}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 65% -10%,#0a2940 0,#030b13 40%);color:#edf9ff;font:15px/1.55 Arial,'Noto Sans JP',sans-serif}
.shell{max-width:1240px;margin:auto;padding:0 28px}header{min-height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:18px}.brand-mark{border:2px solid var(--cyan);width:53px;height:53px;display:grid;place-items:center;color:var(--cyan);font-weight:900;letter-spacing:-4px;box-shadow:0 0 15px #00d9ef44}.brand-mark span{font-size:10px;margin-left:2px}.brand small,.eyebrow,.section-head small{color:var(--cyan);font-size:11px;letter-spacing:3px;font-weight:700}.brand h1{margin:-3px 0 0;font-size:21px;letter-spacing:2px}.brand em{font-style:normal;color:var(--orange);font-size:10px;vertical-align:middle}.status,.badge{font-size:11px;letter-spacing:2px;color:var(--cyan);border:1px solid var(--line);padding:8px 12px}.status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-right:7px;box-shadow:0 0 8px var(--cyan)}
.hero{min-height:330px;display:flex;align-items:center;justify-content:space-between;gap:40px;border-bottom:1px solid var(--line);background:linear-gradient(100deg,transparent 50%,#09263777)}.hero h2{font-size:clamp(32px,5vw,61px);letter-spacing:2px;line-height:1.18;margin:15px 0}.hero h2 strong{color:var(--cyan)}.hero p{max-width:490px;color:var(--muted)}.hero-stat{text-align:center;min-width:220px;border-left:1px solid var(--line);padding:22px}.hero-stat b{display:block;font-size:76px;line-height:1;color:var(--cyan);font-variant-numeric:tabular-nums;text-shadow:0 0 20px #00d9ef77}.hero-stat span{font-size:10px;letter-spacing:3px;color:var(--muted)}
nav{display:flex;align-items:center;gap:28px;min-height:58px;border-bottom:1px solid var(--line)}nav a{font-size:12px;font-weight:700;letter-spacing:2px;color:#c5e2ee;text-decoration:none}nav a:hover{color:var(--cyan)}nav span{margin-left:auto;color:var(--muted);font-size:11px}
main{display:grid;gap:28px;padding:34px 0 55px}.panel{border:1px solid var(--line);background:linear-gradient(145deg,#091b29,#05111d);padding:26px 28px;box-shadow:inset 0 1px #22526b55}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px}.section-head h2{font-size:27px;letter-spacing:2px;margin:3px 0 0}.hint{color:var(--muted);font-size:12px}.controls{display:flex;gap:12px}label{display:grid;gap:5px;color:var(--muted);font-size:12px}select,input{background:#03111c;border:1px solid #286079;color:#eafaff;padding:10px;font:inherit;min-height:42px}select:focus,input:focus,button:focus{outline:2px solid var(--cyan);outline-offset:2px}.table-scroll{overflow:auto;margin-top:20px}table{width:100%;border-collapse:collapse;min-width:640px}th{text-align:left;color:var(--muted);letter-spacing:2px;font-size:10px;padding:12px;border-bottom:1px solid var(--line)}td{padding:16px 12px;border-bottom:1px solid #153649;font-size:13px}td:nth-child(3){font-size:20px;font-weight:800;color:var(--cyan);font-variant-numeric:tabular-nums}.rank{color:var(--gold);font-weight:800}.demo-pill{display:inline-block;color:var(--orange);border:1px solid var(--orange);padding:1px 5px;font-size:9px;margin-left:7px}button{background:#062a39;color:var(--cyan);border:1px solid var(--cyan);padding:10px 15px;cursor:pointer;font-weight:700;letter-spacing:1px}button:hover{background:#0b4353}button:disabled{opacity:.4;cursor:default}
.match-pickers{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:end;margin:25px 0}.match-pickers select{width:100%;font-size:15px}.vs{font-size:24px;font-weight:900;color:var(--orange);padding-bottom:8px}.match-screen{border:1px solid #245267;background:repeating-linear-gradient(0deg,transparent 0 47px,#16344655 48px),repeating-linear-gradient(90deg,transparent 0 74px,#16344655 75px),#03111b;padding:15px}.match-top{display:flex;justify-content:space-between;letter-spacing:2px;font-size:11px;color:var(--muted)}.match-top b{font-size:16px;color:white}.match-screen svg{width:100%;height:290px;display:block;overflow:visible}.lane-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lane{border-top:2px solid var(--cyan);display:flex;align-items:baseline;gap:15px;flex-wrap:wrap;padding:10px}.lane.b{border-color:var(--orange)}.lane strong{font-size:24px}.lane small{color:var(--muted);min-width:80px}.lane span{font-size:12px}.replay-controls{display:flex;align-items:center;gap:10px;margin-top:16px}.replay-controls input{flex:1;accent-color:var(--cyan);min-height:auto;padding:0}.replay-controls span{min-width:70px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:16px}.upload-grid p{max-width:480px;color:#ccdfeb}.upload-grid form{display:grid;gap:15px}.upload-grid input{width:100%}.upload-grid button{justify-self:start}.upload-grid #upload-message{margin:0;color:var(--cyan)}footer{border-top:1px solid var(--line);color:var(--muted);padding:25px 0 40px;font-size:11px;letter-spacing:2px;display:flex;justify-content:space-between}
@media(max-width:720px){.shell{padding:0 14px}header{min-height:75px}.brand-mark{width:42px;height:42px}.brand h1{font-size:15px}.status{display:none}.hero{min-height:300px}.hero-stat{display:none}nav{gap:14px;overflow:auto}nav span{display:none}.panel{padding:18px 13px}.section-head{align-items:start;flex-direction:column}.controls{width:100%}.controls label{flex:1}.controls select{width:100%}.match-pickers{grid-template-columns:1fr;gap:7px}.vs{text-align:center;padding:0}.upload-grid{grid-template-columns:1fr;gap:8px}.lane{gap:7px}.lane strong{font-size:18px}.replay-controls{flex-wrap:wrap}.replay-controls input{order:3;flex-basis:100%}}
.upload-preview{padding:14px;border:1px solid var(--cyan);background:#031b27;color:#eafaff;font-size:13px;line-height:1.7}
.share-check{display:flex;align-items:center;gap:10px;color:#eafaff}.share-check input{width:19px;min-height:19px;accent-color:var(--cyan)}
.my-uploads{margin-top:25px;padding-top:18px;border-top:1px solid var(--line)}.my-uploads h3{margin:0;color:var(--cyan)}
.my-upload-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.my-upload-row button{border-color:var(--orange);color:var(--orange)}#delete-message{color:var(--cyan)}