:root{font-family:ui-rounded,"Avenir Next",system-ui,-apple-system,sans-serif;color:#f5f6fa;background:#0c1425;color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,select{min-height:44px;border-radius:12px}button{cursor:pointer;border:1px solid transparent;padding:10px 16px;font-weight:650}button:disabled{opacity:.55;cursor:wait}button:hover{filter:brightness(1.1)}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #f5c46a;outline-offset:3px}select{background:#1e2d46;color:#f5f6fa;border:1px solid #3b4a63;padding:9px 32px 9px 12px;max-width:100%}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px max(20px,env(safe-area-inset-right));background:#152137;border-bottom:1px solid #29364b}.brand{display:flex;align-items:center;gap:12px}.brand-icon{font-size:34px;line-height:1;color:#f1c66f}.brand h1{font-size:21px;letter-spacing:-.6px;margin:0}.brand p{font-size:12px;color:#e0bd78;margin:4px 0 0;letter-spacing:1.2px}.brand p span{color:#95a1b4}.header-actions{display:flex;align-items:center;gap:10px}.light{background:#f5dbab;color:#253145}.secondary{background:#253650;color:#e6ecf6;border-color:#3b4b64}.primary{background:#f5c977;color:#17253b;min-width:122px}.small{font-size:12px;color:#b3bfd2}.toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;background:#101c30}.song-field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:220px;max-width:480px}.song-field>label{font-size:12px;color:#ccd8e9;font-weight:600}.song-field select{width:100%}.transport{display:flex;gap:8px}.tempo-field{min-width:140px}.tempo-field label{font-size:13px;display:block}.tempo-field strong{color:#f1c66f;margin-inline-start:5px}input[type=range]{accent-color:#f4c776;width:150px;min-height:32px;vertical-align:middle}.tempo-field input{width:140px}.stage-heading{padding:11px 22px;display:flex;justify-content:space-between;gap:10px;font-size:13px;background:#17243a;border-block:1px solid #293750}#songTitle{font-weight:700}#stage{height:48dvh;min-height:280px;position:relative;overflow:hidden;background:#111b30;direction:ltr}canvas{width:100%;height:100%;display:block}#countdown{position:absolute;inset:30% 0 auto;text-align:center;font-weight:800;font-size:60px;color:#f6d89a;text-shadow:0 2px 20px #10192b;pointer-events:none}#status{padding:12px 22px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;background:#142138;font-size:13px}#mic{color:#a9dacc}.play-tip{font-size:13px;text-align:center;color:#bdcce0;padding:0 18px;line-height:1.6}#cal{margin:14px 22px;border:1px solid #33425a;border-radius:12px;background:#142036}summary{cursor:pointer;padding:13px 16px;font-size:13px;color:#d9e3f4}.calibration{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:0 16px 14px}.calibration label{font-size:12px;display:flex;flex-direction:column;gap:4px}.calibration p{font-size:12px;line-height:1.6;margin:0;color:#c7d4e5;width:100%}#notice{color:#f1c66f;font-size:13px;text-align:center;margin:10px 20px}#notice:empty{display:none}footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 16px;padding:12px 18px 20px;color:#99aac2;font-size:11px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog{color-scheme:light;background:#fcf8ef;color:#26364a;border:none;border-radius:24px;padding:0;width:min(900px,calc(100% - 24px));max-height:92dvh;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#08111dd9;backdrop-filter:blur(5px)}.guide-top{display:flex;justify-content:space-between;align-items:center;padding:18px 24px 8px;position:sticky;top:0;background:#fcf8ef;z-index:2}.eyebrow{color:#797050;font-size:10px;font-weight:800;letter-spacing:2px}.icon-button{background:#eee8dc;color:#26364a;padding:8px;min-width:44px}.guide-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:26px;align-items:center;padding:12px 28px 28px}.guide-hero img{width:100%;height:auto;aspect-ratio:1.5;object-fit:cover;border-radius:18px}.guide-hero h2{font-size:33px;letter-spacing:-1px;line-height:1.15;margin:8px 0 14px}.guide-hero p{font-size:14px;line-height:1.8;color:#627083;margin:0}.guide-tag{font-size:10px;font-weight:800;color:#8b6843;letter-spacing:1.3px;text-transform:uppercase}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 28px 24px}.guide-card{border:1px solid #e1dfd4;border-radius:17px;padding:18px;background:#fffdf7}.guide-card .art{width:100%;height:105px;display:block;margin-bottom:12px}.guide-card h3{font-size:16px;margin:8px 0}.guide-card p{font-size:13px;line-height:1.8;color:#5c6876;margin:0}.step-number{font-size:10px;font-weight:800;letter-spacing:1px;color:#8b6843}.guide-note{margin:0 28px 20px;padding:17px 20px;background:#e9efe4;border-radius:14px;font-size:13px;line-height:1.8}.guide-note strong{display:block;color:#385b48;margin-bottom:3px}.guide-bottom{padding:0 28px 24px;font-size:12px;line-height:1.8;color:#6e7781}.guide-bottom strong{color:#33465d}.guide-language{display:flex;gap:6px;flex-wrap:wrap;margin:0 28px 22px}.guide-language button{font-size:12px;padding:8px 11px;background:#eee8db;color:#4e5b69;min-height:40px}.guide-language button[aria-pressed=true]{background:#2f5f5b;color:white}
@media(min-width:1200px){#stage{height:50dvh}.toolbar{gap:22px}}@media(max-width:700px){header{padding:13px 14px;gap:8px}.brand h1{font-size:17px}.brand p{font-size:10px}.brand-icon{display:none}.header-actions{gap:6px}.header-actions button{font-size:12px;padding:8px}.language select{font-size:12px;width:94px;padding-inline:7px}.toolbar{padding:13px;gap:12px}.song-field{max-width:none;min-width:100%;flex-basis:100%}.transport{flex:1}.transport button{padding:9px 12px;min-width:0}.tempo-field{min-width:110px}.tempo-field input{width:110px}#micbtn{font-size:12px;padding:8px 12px}.stage-heading{padding:10px 14px}#stage{height:46dvh;min-height:260px}#status{padding:10px 14px;font-size:12px}#cal{margin:12px}.calibration{gap:12px}.calibration input{width:130px}.guide-hero{grid-template-columns:1fr;padding:8px 20px 24px;gap:20px}.guide-hero img{grid-row:1}.guide-hero h2{font-size:29px}.guide-grid{grid-template-columns:1fr;padding:0 20px 20px}.guide-note{margin-inline:20px}.guide-bottom{padding-inline:20px}.guide-language{margin-inline:20px}.guide-top{padding-inline:20px}.guide-card .art{height:100px}}@media(max-height:550px) and (orientation:landscape){header{padding-block:8px}.toolbar{padding-block:8px;gap:12px}.song-field{min-width:190px;flex-basis:auto}.song-field>label,.song-field .small{display:none}#stage{height:58dvh;min-height:200px}.stage-heading{padding-block:7px}.play-tip,footer{display:none}.brand h1{font-size:16px}#cal{margin-block:8px}}