.recorder{--wood:#ce9e65;--darkwood:#85562f;--rec-ink:var(--edu-ink,#18211a);--rec-paper:var(--edu-card,#fff);background:var(--rec-paper);color:var(--rec-ink);border:1px solid var(--edu-line,#ddd);border-radius:24px;padding:25px;max-width:1100px;margin:24px auto}.rec-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:18px}.rec-badge{margin-right:auto;font-size:10px;letter-spacing:1.8px;text-transform:uppercase}.rec-toolbar label{font-size:12px;display:flex;align-items:center;gap:10px}.rec-toolbar input{width:100px;accent-color:#8ba83c}.rec-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.rec-visual{height:580px;position:relative;max-width:420px;width:100%;margin:auto}.rec-body{position:absolute;top:18px;bottom:15px;width:77px;left:50%;transform:translate(-50%);background:linear-gradient(90deg,#79502f,#bd8c55 17%,#edc68c 38%,#d9b078 55%,#a5723e 84%,#69472b);border-radius:28px 28px 18px 18px;box-shadow:10px 12px 20px #32231325,inset 1px 0 2px #fff9}.rec-mouth{position:absolute;top:0;left:13px;right:13px;height:65px;border-radius:16px 16px 3px 3px;background:linear-gradient(90deg,#98673d,#e6be86,#ab7844);border-bottom:4px solid #714825}.rec-window{position:absolute;top:70px;left:26px;width:25px;height:25px;background:#533820;border:4px solid #b0804e;border-bottom:9px solid #f0cb8e;box-shadow:0 -2px #32200b}.rec-ring{position:absolute;left:-8px;right:-8px;height:19px;border-radius:9px;background:linear-gradient(90deg,#7c5738,#f2d29e,#a4774b);box-shadow:0 3px 3px #5a341855}.rec-ring.top{top:117px}.rec-ring.bottom{bottom:71px}.rec-foot{position:absolute;bottom:0;left:-13px;right:-13px;height:48px;border-radius:14px 14px 25px 25px;background:linear-gradient(90deg,#714e32,#e2ba80 35%,#c29963 65%,#7d5736);border-bottom:9px solid #885e38}.rec-front{position:absolute;top:166px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:4px}.rec-hole{width:48px;height:48px;background:none;border:0;padding:3px;position:relative;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--rec-ink);flex-shrink:0}.rec-dot{width:24px;height:24px;display:flex;align-items:center;justify-content:center;gap:3px;border:2px solid #654324;border-radius:50%;background:#281d14;box-shadow:inset 2px 3px 3px #0009;margin:auto}.rec-hole.closed .rec-dot{background:#e3bc8d;box-shadow:inset 0 0 0 2px #c49464,0 2px 3px #57341477}.rec-hole.half .rec-dot{background:linear-gradient(90deg,#e3bc8d 50%,#281d14 50%)}.rec-hole b{position:absolute;left:65px;top:15px;font-size:12px;font-weight:500}.rec-hole .rec-dot i{width:7px;height:10px;background:#16100c;border-radius:50%}.rec-hole.closed .rec-dot i{background:#d4a674}.rec-hole.guide-closed{outline:2px solid #85a340;outline-offset:-3px;border-radius:50%}.rec-hole.guide-open{outline:2px dashed #86a4af;outline-offset:-3px;border-radius:50%}.rec-hole.guide-half{outline:2px dotted #85a340;outline-offset:-3px;border-radius:50%}.rec-hole:focus-visible{outline:3px solid #42778a;border-radius:50%}.rec-rear{position:absolute;top:158px;left:0;display:flex;flex-direction:column;align-items:center;width:90px;gap:8px;font-size:10px}.rec-rear .rec-hole{background:#d9b078;border-radius:18px}.rec-rear .rec-hole b{left:50px}.rec-rear small{font-weight:700;letter-spacing:1px}.rec-hands{position:absolute;right:0;top:186px;display:flex;flex-direction:column;gap:140px;font-size:10px;color:var(--edu-muted,#666);line-height:1.8}.rec-console{padding:20px 0}.rec-note{font-size:64px;letter-spacing:-3px;font-weight:650;line-height:1.2}.rec-frequency{font-size:12px;color:var(--edu-muted,#666);min-height:20px}.rec-breath-label{display:flex;align-items:center;gap:12px;font-size:12px;margin:22px 0}.recorder select{border:1px solid var(--edu-line,#ddd);border-radius:9px;padding:10px;color:inherit;background:var(--rec-paper);max-width:100%}.rec-blow{width:100%;min-height:123px;border:0;border-radius:22px;background:#cef57a;color:#223019;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;touch-action:none;user-select:none;cursor:pointer;box-shadow:0 7px #9dbb5e;transition:transform .1s}.rec-blow>span{font-size:30px;line-height:1}.rec-blow strong{font-size:23px}.rec-blow small{font-size:11px}.is-blowing .rec-blow{transform:translateY(4px);box-shadow:0 3px #9dbb5e;background:#b8e75d}.rec-blow:disabled{opacity:.6;cursor:default}.rec-message{font-size:12px;min-height:40px;line-height:1.6;margin:18px 0}.rec-guide{background:var(--edu-bg,#f5f6ef);border:1px solid var(--edu-line,#ddd);padding:16px;border-radius:14px;font-size:12px}.rec-guide p{margin:7px 0;font-size:12px}.rec-guide small{font-size:10px;line-height:1.6;display:block}.rec-free-help{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px;margin:15px 0}.rec-key-help,.rec-explanation{font-size:12px;line-height:1.8}.rec-explanation p{font-size:12px}.rec-explanation a{text-decoration:underline}.recorder.is-no .rec-note{color:#ba583b}.recorder.is-ok .rec-note{color:#718d39}.rec-focus{position:fixed;inset:0;max-width:none;overflow:auto;z-index:2000;margin:0;border-radius:0;padding:20px max(15px,calc((100vw - 1000px)/2));overscroll-behavior:contain}.rec-focus .rec-layout{max-width:1050px;margin:auto}.rec-free-controls{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin:20px 0}.rec-free-controls label{display:flex;gap:10px;align-items:center}.mini-recorder{display:flex;gap:5px;padding:12px;border-radius:20px;background:#cba274}.mini-recorder i{width:12px!important;height:12px!important;background:#382a1c!important;opacity:1!important}.rec-entry{padding:26px;background:#e9efdd;color:#223019;border-radius:22px;margin:24px 0}.rec-entry h2{margin-top:0}@media(max-width:700px){.recorder{padding:15px}.rec-layout{grid-template-columns:minmax(165px,1fr) minmax(140px,1fr);gap:10px}.rec-visual{height:540px}.rec-body{width:62px}.rec-front{top:142px;gap:3px}.rec-hole{width:44px;height:44px}.rec-hole b{left:50px}.rec-rear{top:85px;left:0;width:48px}.rec-rear>span{display:none}.rec-rear small{font-size:8px}.rec-hands{display:none}.rec-note{font-size:43px}.rec-console{padding:0}.rec-breath-label{display:block}.rec-breath-label select{display:block;width:100%;margin-top:7px;font-size:11px;padding:8px}.rec-blow{min-height:110px}.rec-blow strong{font-size:19px}.rec-guide{padding:10px}.rec-toolbar{gap:10px}.rec-toolbar .edu-secondary{font-size:11px;padding:9px}.rec-key-help{font-size:11px}.rec-window{left:20px;width:22px}.rec-free-help{display:block}.rec-free-help label{display:block;margin:10px 0}.rec-free-help select{max-width:100px}.rec-frequency{font-size:10px}.rec-badge{font-size:8px}}@media(max-width:370px){.rec-layout{grid-template-columns:145px 1fr;gap:5px}.recorder{padding:9px}.rec-hole b{left:46px}.rec-rear{left:-5px}.rec-guide small{font-size:9px}}@media(prefers-reduced-motion:reduce){.rec-blow{transition:none}}.recorder.is-demo .rec-note{color:#397b91}.recorder.is-ok{border-color:#718d39}.recorder.is-no{border-color:#ba583b}html[data-theme=dark] .rec-guide{background:var(--edu-soft,#293727)}html[data-theme=dark] .rec-hole b{background:#202b20;color:#f0f2e7;padding:0 4px;border-radius:6px}