@charset "UTF-8";
:root{--bg:#f6f5ef;--ink:#192c29;--muted:#738077;--green:#214e40;--line:#e1e5da;--soft:#e9ede4;--warm:#f3e8d5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0}button:disabled{opacity:.48;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b4c89e;outline-offset:3px}button,a{touch-action:manipulation}.site-header{max-width:1160px;margin:auto;padding:25px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{font-weight:750;display:flex;align-items:center;gap:12px}.brand-icon{display:grid;place-items:center;width:38px;height:38px;background:var(--green);color:#fff;border-radius:12px;font-size:25px}.brand-tag{font-size:10px;font-weight:500;letter-spacing:2px;color:var(--muted);margin-left:12px}.teacher-link{font-size:13px;color:var(--green)}main{max-width:1100px;padding:42px 24px 60px;margin:auto;min-height:75vh}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(34px,5vw,60px);line-height:1.16;letter-spacing:-2px;margin-bottom:20px}h2{font-size:26px;line-height:1.3}h3{font-size:19px;line-height:1.5;margin-bottom:8px}.eyebrow{color:var(--muted);font-size:11px;letter-spacing:3px;margin-bottom:16px}.muted,.note{color:var(--muted)}.note{font-size:13px;margin:14px 0 0}.hero{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:40px;margin-bottom:30px}.hero p{margin:0}.record{justify-self:end;position:relative;width:205px;height:205px;border-radius:50%;background:repeating-radial-gradient(circle,#214e40 0 3px,#2e5c4b 4px 5px);display:grid;place-items:center;box-shadow:16px 14px 0 #e5e8dc}.record::before{content:'MUSIC / CLASS';display:grid;place-items:center;background:#ebd9b6;border:6px solid #f5e9d0;color:var(--green);width:85px;height:85px;border-radius:50%;font-size:9px;letter-spacing:1px}.record::after{content:'';position:absolute;top:28px;right:-8px;width:92px;height:7px;background:#b8bcac;transform:rotate(42deg);border-radius:4px}.statusline,.row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.chip{padding:5px 12px;border-radius:30px;font-size:12px;background:var(--soft);color:var(--green);display:inline-block}.chip.warm{background:var(--warm);color:#765329}.banner{padding:12px 18px;border:1px solid #e6d7b9;background:#fcf5e7;border-radius:14px;color:#755d36;font-size:13px;margin-bottom:22px}.card{background:#fff;border:1px solid var(--line);padding:26px;border-radius:22px}.join{margin:25px 0}.groups{display:flex;gap:10px;margin:16px 0 6px}.group{min-height:48px;flex:1;border-radius:12px;background:var(--bg);border:1px solid var(--line);color:var(--ink);font-weight:650}.group.selected{background:var(--green);color:white;border-color:var(--green)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.module{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:260px}.module .module-no{font-size:11px;letter-spacing:2px;color:var(--muted);margin-bottom:30px}.module-icon{position:absolute;right:25px;top:20px;font-size:39px;color:#94aa94;line-height:1}.module p{color:var(--muted);font-size:14px}.module .actions{margin-top:auto}.primary,.secondary,.danger{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:12px;font-weight:600;font-size:14px;gap:8px}.primary{background:var(--green);color:white}.secondary{background:var(--soft);color:var(--green)}.danger{background:#f8e8e1;color:#8a3e2c}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.actions>*{flex-grow:1}.thin-link{font-size:13px;color:var(--green);text-decoration:underline;background:none;padding:8px}.narrow{max-width:700px;margin:auto}.back{font-size:13px;color:var(--muted);display:inline-block;margin-bottom:22px}.question-card{padding:30px;margin-top:20px}.steps{display:flex;gap:8px;margin:20px 0}.steps span{height:4px;background:#dfe5da;flex:1;border-radius:4px}.steps span.done{background:var(--green)}.player{background:var(--bg);border-radius:16px;padding:25px;text-align:center;margin:24px 0}.wave{height:50px;display:flex;align-items:center;justify-content:center;gap:5px;margin:10px}.wave i{width:5px;border-radius:8px;background:#8fa58a;height:var(--h)}.playing .wave i{animation:pulse .7s infinite alternate;animation-delay:var(--d)}@keyframes pulse{to{height:10px}}.player video{width:100%;max-height:340px;background:#142720;border-radius:10px}.clock{font-size:27px;font-weight:700;margin:14px 0}.clock small{font-size:14px;color:var(--muted);font-weight:400}progress{width:100%;height:6px;border:0;border-radius:10px;overflow:hidden;accent-color:var(--green)}progress::-webkit-progress-bar{background:#e2e7dc}progress::-webkit-progress-value{background:var(--green)}.options{display:grid;gap:12px}.option{display:flex;gap:14px;align-items:center;text-align:left;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);min-height:58px}.option b{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--bg);flex-shrink:0}.option.selected{border:2px solid var(--green);padding:15px;background:#f2f6ed}.option.selected b{background:var(--green);color:white}.score{font-size:68px;font-weight:750;line-height:1.3;color:var(--green)}.score small{font-size:20px;color:var(--muted)}.center{text-align:center}.summary{display:flex;gap:20px;justify-content:center;margin:20px 0}.summary span{font-size:13px;color:var(--muted)}label{display:block;font-size:14px;font-weight:600;margin-bottom:14px}input,textarea,select{width:100%;padding:11px 13px;border:1px solid #d7dece;background:#fff;border-radius:10px;color:var(--ink);margin-top:5px}input[type=checkbox]{width:auto;margin:0 8px 0 0}textarea{resize:vertical;min-height:75px}.rank-list{margin-top:22px;display:grid;gap:14px}.rank-card{display:grid;grid-template-columns:50px 1fr auto;gap:18px;align-items:center}.rank-no{font-size:24px;font-weight:700;color:#8a9b81}.rank-card h3{margin:0}.rank-points{font-size:30px;font-weight:700}.rank-points small{font-size:12px;font-weight:400;color:var(--muted)}.rank-card .detail{font-size:12px;color:var(--muted);margin-bottom:8px}.admin-tools{margin:20px 0}.config-question{padding:20px 0;border-top:1px solid var(--line);margin-top:18px}.config-options{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.empty{padding:60px 25px;text-align:center;color:var(--muted)}#notice{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#192c29;color:white;border-radius:14px;box-shadow:0 6px 30px #0002;max-width:90vw;width:max-content;padding:14px 20px;z-index:20;font-size:14px}footer{max-width:1100px;margin:auto;border-top:1px solid var(--line);padding:20px 24px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:12px}dialog{border:1px solid var(--line);border-radius:20px;width:min(90vw,430px);padding:25px;color:var(--ink)}dialog::backdrop{background:#14272080}dialog p{font-size:14px;color:var(--muted)}.stats-head{margin-bottom:22px}.saved{color:var(--green);font-size:13px}@media(max-width:650px){.site-header{padding:18px 20px}.brand-tag{display:none}main{padding:28px 18px 40px}.hero{grid-template-columns:1fr 90px;gap:12px}.record{width:80px;height:80px;box-shadow:6px 6px 0 #e5e8dc}.record::before{width:30px;height:30px;font-size:0;border-width:3px}.record::after{width:42px;right:-4px;top:12px;height:4px}h1{font-size:37px}.hero p{font-size:14px}.grid{grid-template-columns:1fr}.card{padding:21px}.module{min-height:215px}.module .module-no{margin-bottom:20px}.groups{gap:6px}.group{font-size:14px}.question-card{padding:20px}.player{padding:18px}.config-options{grid-template-columns:1fr}.rank-card{grid-template-columns:30px 1fr auto;gap:10px}.rank-points{font-size:25px}footer{flex-direction:column}.teacher-link{font-size:12px}}
@media(max-width:650px){.hero h1 span{font-size:27px;white-space:nowrap;letter-spacing:-1px}}@media(max-width:370px){.hero{grid-template-columns:1fr}.record{display:none}}