:root{--bg:#1e1e1e;--panel:#2a2a2a;--text:#ddd;--muted:#999;--accent:#ffc800;--blue:#3b82f6;--green:#22c55e;--red:#ef4444;--yellow:#facc15;--orange:#fb923c}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,Hiragino Sans,Yu Gothic UI,sans-serif}.app{max-width:1000px;margin:0 auto;padding:16px}.site-about{max-width:1000px;color:var(--muted);margin:40px auto 24px;padding:0 16px;font-size:.9rem;line-height:1.7}.site-about h2{color:var(--text);margin:16px 0 4px;font-size:1rem}.site-about ul{margin:4px 0;padding-left:1.2em}.site-links{flex-wrap:wrap;gap:4px 16px;margin:8px 0;display:flex}.site-links a{color:#8ab4ff}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}h1{color:var(--accent);letter-spacing:.05em;margin:0;font-size:clamp(1.5rem,5vw,2.4rem)}.nav{flex-wrap:wrap;align-items:center;gap:4px 8px;display:flex}.nav-divider{background:#555;width:1px;height:1.2em}.muted{color:var(--muted)}.small{font-size:.85rem}.form{flex-direction:column;gap:12px;max-width:420px;display:flex}.form label{flex-direction:column;gap:4px;display:flex}.form input{color:var(--text);background:#1e1e1e;border:1px solid #555;border-radius:8px;padding:10px;font-size:1rem}.message-info{color:var(--accent)}.settings-group{border:1px solid #3a3a3a;border-radius:8px;margin:0 0 12px;padding:8px 12px 12px}.settings-group legend{padding:0 4px;font-weight:600}.quick-select{gap:8px;display:flex}.checkbox-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:4px 12px;display:grid}.checkbox{cursor:pointer;align-items:center;gap:6px;min-height:32px;display:flex}.checkbox input{width:18px;height:18px}.range{align-items:center;gap:8px;display:flex}.range select{min-height:40px;color:var(--text);background:#3a3a3a;border:1px solid #555;border-radius:8px;padding:0 8px;font-size:1rem}.choice,.answer-buttons{flex-wrap:wrap;gap:8px;display:flex}.start-button{width:100%}.quiz-header{justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:600;display:flex}.replay-button{margin-bottom:8px}.answer-group h3{margin:12px 0 6px;font-size:1rem}.trainer-quiz>.button-primary{width:100%;margin-top:12px}.contest-card{background:#1e1e1e;border-radius:8px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;padding:12px 16px;display:flex}.contest-card h3{margin:0;font-size:1.05rem}.contest-card p{margin:4px 0 0}.contest-buttons{gap:8px;display:flex}.section-title{margin-top:28px}.class-forms{margin-bottom:12px}.inline-form{flex-wrap:wrap;align-items:flex-end;gap:8px;margin-bottom:10px;display:flex}.inline-form label{flex-direction:column;gap:4px;font-size:.9rem;display:flex}.inline-form input,.inline-form select,.form input{min-height:44px;color:var(--text);background:#1e1e1e;border:1px solid #555;border-radius:8px;padding:0 10px;font-size:1rem}.contest-header{flex-wrap:wrap;justify-content:space-between;gap:8px;margin:16px 0;font-weight:700;display:flex}.message-right{color:var(--green)}.leaderboard th{text-align:left;color:var(--muted);padding:6px 4px;font-weight:600}.row-me td{color:var(--accent);font-weight:700}.room-code{letter-spacing:.2em;color:var(--accent);margin:0;font-size:2.4rem;font-weight:800}.live-scores{margin:8px 0 16px;padding:0;list-style:none}.live-scores li{border-bottom:1px solid #3a3a3a;justify-content:space-between;padding:6px 10px;display:flex}.standings li{font-size:1.2rem}.host-settings{flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:8px;display:flex}.host-settings label{flex-direction:column;gap:4px;font-size:.9rem;display:flex}.host-settings select{min-height:44px;color:var(--text);background:#1e1e1e;border:1px solid #555;border-radius:8px;padding:0 8px;font-size:1rem}.live-layout{grid-template-columns:minmax(0,1fr) 200px;gap:16px;display:grid}.live-layout aside h3{margin:16px 0 0}@media (width<=700px){.live-layout{grid-template-columns:minmax(0,1fr)}}.feed{margin:8px 0;padding:0;font-size:.95rem;list-style:none}.stats h3{margin:20px 0 8px;font-size:1rem}.stat-tiles{flex-wrap:wrap;gap:12px;display:flex}.stat-tile{text-align:center;color:var(--muted);background:#1e1e1e;border-radius:8px;flex:90px;padding:10px}.stat-value{color:var(--text);font-size:1.8rem;font-weight:700;display:block}.bar-row{grid-template-columns:4.5em 1fr auto;align-items:center;gap:8px;margin-bottom:6px;display:grid}.bar{background:#1e1e1e;border-radius:6px;height:12px;overflow:hidden}.bar-fill{background:var(--blue);height:100%}.bar-value{color:var(--muted);font-size:.9rem}.chip{background:#1e1e1e;border-radius:999px;margin:0 6px 6px 0;padding:2px 10px;display:inline-block}.table{border-collapse:collapse;width:100%;font-size:.9rem}.table td{border-top:1px solid #3a3a3a;padding:6px 4px}.link{color:var(--muted);cursor:pointer;background:0 0;border:none;padding:4px;font-size:.95rem}.link-active{color:var(--text);text-decoration:underline}.panel{background:var(--panel);border-radius:12px;margin-top:20px;padding:20px 24px;line-height:1.7}.panel h2{margin:0 0 4px;font-size:1.2rem}.panel ul{margin:0 0 16px;padding-left:1.2em}.game-over{text-align:center}.game-over h2{font-size:clamp(2rem,8vw,3.5rem)}.win{color:var(--green)}.lose{color:var(--red)}.button{color:var(--text);cursor:pointer;background:#3a3a3a;border:1px solid #555;border-radius:8px;min-height:44px;padding:10px 16px;font-size:1rem}.button:hover:not(:disabled){background:#474747}.button:disabled{opacity:.4;cursor:default}.button-active{border-color:var(--accent);color:var(--accent)}.button-primary{background:var(--accent);color:#1e1e1e;border-color:var(--accent);font-weight:600}.button-primary:hover:not(:disabled){background:#ffd84d}kbd{opacity:.7;border:1px solid;border-radius:4px;padding:0 4px;font-family:inherit;font-size:.75em}@media (pointer:coarse){kbd{display:none}}.scoreboard{justify-content:space-between;margin:16px 0;font-size:clamp(1.1rem,4vw,1.5rem);font-weight:700;display:flex}.score-points{color:var(--blue)}.score-mistakes{color:var(--red)}.key-selector{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;display:flex}.key-selector label{flex:220px;align-items:center;gap:8px;display:flex}.key-selector select{min-height:44px;color:var(--text);background:#3a3a3a;border:1px solid #555;border-radius:8px;flex:1;padding:0 8px;font-size:1rem}.mode-selector,.actions{flex-wrap:wrap;gap:8px;margin-bottom:8px;display:flex}.mode-selector .button,.actions .button{flex:1 1 0}.message{min-height:3em;margin:12px 0}.message-right{color:var(--green);font-weight:600}.message-octave{color:var(--orange);font-weight:600}.message-wrong,.message-error{color:var(--red)}.message-hint{color:var(--muted)}.piano-scroll{padding-bottom:8px;overflow-x:auto}.piano{-webkit-user-select:none;user-select:none;touch-action:manipulation;min-width:640px;height:clamp(180px,35vw,280px);position:relative}.key{cursor:pointer;border:1px solid #222;border-radius:0 0 6px 6px;justify-content:center;align-items:flex-end;padding:0 0 8px;transition:background-color .1s;display:flex;position:absolute;top:0}.key-white{color:#555;background:#fff;height:100%}.key-black{color:#eee;z-index:1;background:#111;height:58%}.key-label{pointer-events:none;font-size:.7rem}.key-selected{background:var(--blue);color:#fff}.key-correct{background:var(--green);color:#fff}.key-wrong{background:var(--red);color:#fff}.key-octave{background:var(--orange);color:#222}.key-missed{background:var(--yellow);color:#222}.count-picker{flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;display:flex}.count-picker .button{min-height:36px;padding:4px 12px}.count-picker input{width:5em;min-height:36px;color:var(--text);background:#1e1e1e;border:1px solid #555;border-radius:8px;padding:0 8px;font-size:1rem}.friends-start{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:12px;display:grid}.friends-option{background:#1e1e1e;border-radius:8px;padding:12px 16px}.friends-option h3{margin:0 0 4px}.button.button-correct,.button.button-correct:hover:not(:disabled){background:var(--green);border-color:var(--green);color:#fff}.button.button-wrong,.button.button-wrong:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}.share{margin-top:20px}.share-buttons{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px;display:flex}.share-buttons a.button{align-items:center;text-decoration:none;display:inline-flex}