:root{--ink:#edf5ff;--muted:#9cacc6;--line:#293451;--cream:#080d1d;--white:#111b31;--mint:#153b42;--green:#52f1c5;--orange:#ffa86a;--blue:#192849;--red:#ff6888;--shadow:0 24px 60px #0004}
html,body,#app,.app-shell{min-height:100%;background:#080d1d}
body{color:#edf5ff;font-family:'Pretendard Variable',Pretendard,Inter,Arial,sans-serif;background:radial-gradient(circle at 17% 8%,#123044 0,transparent 31%),radial-gradient(circle at 91% 84%,#171c42 0,transparent 37%),#080d1d}
button,input,textarea,select{font-family:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #66f0d1;outline-offset:2px}
.topbar{height:64px;background:#0b1224dd;border-bottom:1px solid #253451;padding:0 clamp(16px,2.6vw,42px);position:relative;z-index:3}
.brand{font-size:18px;letter-spacing:-.45px;color:#f0f7ff}
.brand-mark{background:linear-gradient(135deg,#55f4cc,#678dff 70%,#ad6aff);color:#071523;border-radius:11px;box-shadow:0 0 24px #4affc04f}
.tag{background:#122f36;color:#78efd1;border:1px solid #2b756d;letter-spacing:0}
.lang-toggle{background:#172039;border:1px solid #2b3755}
.lang-toggle button{color:#a6b2ce}
.lang-toggle button.active{background:#314260;color:white;box-shadow:none}
.eyebrow{color:#5cf6d0;letter-spacing:1.6px}
.ghost-btn,.secondary-btn,.pill-btn,.speed-select,.text-input{background:#121d34;color:#e9f3ff;border-color:#354766}
.ghost-btn:hover,.secondary-btn:hover,.pill-btn:hover{background:#1b2b48;border-color:#58d8c4}
.primary-btn{background:linear-gradient(120deg,#59f0c8,#70d8f0);color:#071a24;box-shadow:0 9px 24px #50eac145}
.primary-btn:hover{background:linear-gradient(120deg,#85ffdf,#8ee5fa)}
.text-input::placeholder,textarea::placeholder{color:#74849f}
.text-input:focus,textarea:focus{border-color:#55eec9;box-shadow:0 0 0 3px #55eec920}
.helper,.notice,.footnote{color:#9daec8}
.notice{background:#30261d;color:#ffcb9e}.notice.error{background:#361e2a;color:#ffb2bd}
.home-page{max-width:1440px;height:calc(100dvh - 64px);min-height:0;margin:auto;padding:clamp(14px,2.3vw,32px);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(12px,1.8vw,24px);overflow:hidden}
.home-story{min-height:0;position:relative;isolation:isolate;overflow:hidden;border:1px solid #2c4165;border-radius:24px;background:radial-gradient(circle at 87% 79%,#3a2c76 0,transparent 36%),radial-gradient(circle at 18% 12%,#194c59 0,transparent 44%),linear-gradient(150deg,#101f39,#0c1228 77%);padding:clamp(28px,4vw,64px);display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow)}
.home-story:after{content:'◉';position:absolute;font-size:clamp(220px,37vw,550px);line-height:1;right:-.13em;bottom:-.17em;color:#51ebd10b;z-index:-1}
.home-story h1{font-size:clamp(37px,4vw,67px);line-height:1.14;letter-spacing:-2.3px;margin:24px 0 22px;max-width:630px}
.home-story p{max-width:510px;color:#b7c7de;line-height:1.75;font-size:clamp(14px,1vw,17px)}
.story-steps{display:flex;gap:7px;flex-wrap:wrap;margin-top:clamp(18px,4vh,50px)}
.story-steps span{border:1px solid #3b5670;border-radius:100px;padding:8px 12px;color:#64e7cc;font-size:11px;font-weight:800;white-space:nowrap}.story-steps b{color:#d9ebf7;margin-left:5px;font-weight:600}
.story-orbit{position:absolute;pointer-events:none;border:1px solid #57f6cd16;border-radius:50%;z-index:-1}.orbit-one{width:450px;height:450px;right:-230px;top:-180px}.orbit-two{width:340px;height:340px;left:-180px;bottom:-200px}
.neon-load{min-height:0;margin:0;border-radius:24px;background:#101a2e;border:1px solid #30405e;box-shadow:var(--shadow);padding:clamp(22px,2.4vw,36px);display:flex;flex-direction:column;overflow:hidden}
.load-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex:none}.load-head h2{font-size:clamp(23px,2vw,32px);letter-spacing:-1px;margin:8px 0 5px}.load-head p{color:#9eb0c9;font-size:12px;margin:0;line-height:1.4}.load-number{font-size:14px;color:#5df1cb;background:#153a40;padding:9px 11px;border-radius:10px;font-weight:800}
.load-switch{display:flex;gap:5px;background:#0b1426;border:1px solid #263755;padding:4px;border-radius:12px;margin-top:clamp(12px,2vh,24px);flex:none}.load-switch button{flex:1;background:none;border:0;border-radius:9px;color:#98a9c4;padding:9px 10px;font-weight:800;font-size:12px}.load-switch button.active{color:#071b23;background:linear-gradient(90deg,#5bdfc7,#76d5f6)}
.load-mode{min-height:0;flex:1;display:flex;flex-direction:column;justify-content:center}.drop-zone{margin:12px 0 10px;border:1.5px dashed #487081;background:#0c1b2d;padding:clamp(12px,2vh,25px);min-height:0}.drop-zone.drag{border-color:#55efc9;background:#123a42}.upload-icon{background:#183a45;color:#58eac8;margin-bottom:8px;height:43px;width:43px;font-size:23px}.drop-zone strong{font-size:14px}.drop-zone p{margin:3px 0 10px;color:#93a5bf}.file-status{margin:0;gap:5px}.file-line{background:#15223a;color:#e9f2ff;padding:7px 11px}.file-line span{color:#61e6cf;font-size:10px;font-weight:800}
.url-mode{gap:11px;padding:10px 0}.url-mode label{font-size:11px;font-weight:800;color:#aabbd5;display:grid;gap:6px}.url-mode .helper{font-size:11px}.load-bottom{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-top:12px;flex:none}.scope-label{display:block;color:#a9bad3;font-size:11px;font-weight:800;margin:0 0 6px}.load-bottom .text-input{height:44px}.load-bottom .primary-btn{height:44px;min-width:132px}.load-bottom .primary-btn span{margin-left:8px}.load-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex:none}.load-footer span{font-size:10px;color:#8292ab;line-height:1.4;text-align:right}.sample-link{color:#66eed0;padding:3px 0;flex:none}
.practice-page{max-width:1600px;height:calc(100dvh - 64px);min-height:0;margin:auto;padding:14px clamp(14px,2.2vw,34px);display:flex;flex-direction:column;overflow:hidden}
.practice-head{margin:0 0 12px;display:flex;align-items:center;justify-content:space-between;flex:none;min-height:47px}.practice-head .eyebrow{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58vw}.practice-head h1{margin:3px 0 0;font-size:23px;letter-spacing:-.7px;white-space:nowrap}.practice-head h1 span{color:#68efd0}.practice-head h1 i{color:#768bab;font-style:normal;font-weight:500}.head-buttons{flex:none}.head-buttons .ghost-btn{padding:9px 11px;font-size:11px}
.session-strip{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,auto);gap:8px;align-items:center;flex:none;background:#101a2f;border:1px solid #293c5b;border-radius:13px;padding:9px 13px;margin-bottom:11px}.session-progress{padding-right:10px}.session-progress>span{font-size:10px;color:#9aacc4;display:flex;justify-content:space-between;gap:10px}.session-progress b{color:#5cf3ca}.session-progress .progress-track{height:5px;margin:7px 0 0;background:#2b3650}.session-progress .progress-fill{background:linear-gradient(90deg,#5cefd0,#56b4ff)}.strip-stat{border-left:1px solid #2b3b59;min-width:80px;text-align:center;padding:1px 6px}.strip-stat small{display:block;font-size:10px;color:#8da1bc}.strip-stat b{font-size:16px;letter-spacing:-.3px}
.workbench{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:12px;flex:1;min-height:0}.listen-surface,.insight-surface{min-width:0;min-height:0;background:#111b30;border:1px solid #344461;border-radius:19px;box-shadow:var(--shadow)}.listen-surface{display:flex;flex-direction:column;padding:clamp(14px,1.6vw,25px);overflow:hidden}.insight-surface{display:flex;flex-direction:column;overflow:hidden;background:#101b31}
.cue-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}.cue-label{font-size:10px;color:#62edd0;font-weight:800;letter-spacing:1px}.cue-bar h2{font-size:23px;margin:4px 0 0;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:35vw}.cue-navigation{display:flex;gap:3px;align-items:center;border:1px solid #334867;background:#0d162a;border-radius:10px;padding:3px}.cue-navigation button{background:none;color:#a7bfde;border:0;width:29px;height:27px;border-radius:6px}.cue-navigation button:hover{background:#263b57;color:#5df1cb}.cue-navigation select{border:0;color:#e6f2ff;background:#0d162a;font-size:11px;font-weight:700;max-width:90px}.cue-time{font-size:11px;color:#8ca2be;margin:6px 0 10px;flex:none}.cue-time span{color:#3f7281;margin:0 4px}
.player{display:grid;grid-template-columns:43px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;background:#0b1a2c;border:1px solid #28545c;border-radius:12px;margin:0;flex:none}.play-button{width:42px;height:42px;background:linear-gradient(140deg,#5af0c6,#5bc8e8);color:#071a25;font-size:17px;box-shadow:0 0 21px #4cf4c04b}.wave{height:38px;gap:3px}.wave i{background:#4a8f95}.wave.active i{background:#5ef4c7}.player-time{font-size:11px;color:#b2cce0}.play-options{display:flex;align-items:center;gap:6px;margin:8px 0 0;flex:none}.pill-btn,.speed-select{font-size:10px;padding:6px 9px;background:#16233b;border:1px solid #334767;color:#abc3dd}.pill-btn.active{background:#174747;border-color:#3aaf9a;color:#77f8d7}.timer-pill{margin-left:auto}.speed-select{border-radius:99px}
.sample-note{font-size:10px;color:#d8aa7f;background:#2d251e;border-radius:7px;padding:5px 8px;margin-top:6px;flex:none}.write-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:clamp(9px,1.6vh,17px) 0 7px;flex:none}.write-label span{font-size:14px;font-weight:800}.write-label small{font-size:10px;color:#91a3bf;text-align:right}.listen-surface textarea{flex:1;min-height:70px;resize:none;background:#0c1629;border:1px solid #334564;border-radius:11px;color:#ecf7ff;padding:11px 13px;font-size:14px;line-height:1.55}.write-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:9px;flex:none}.write-actions>div{display:flex;gap:7px}.write-actions .secondary-btn,.write-actions .primary-btn{padding:10px 13px;font-size:11px}.ai-caution{font-size:10px;color:#81a8b0;white-space:nowrap}
.tool-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:6px;gap:5px;background:#0b1427;border-bottom:1px solid #2a3c5b;flex:none}.tool-tabs button{position:relative;border:0;background:transparent;border-radius:8px;padding:10px 4px;color:#8fa3c0;font-size:11px;font-weight:800;white-space:nowrap}.tool-tabs button.active{background:#1b3c4c;color:#6bffdc;box-shadow:inset 0 0 0 1px #327c81}.tool-tabs i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#68f4cb;margin-left:4px;vertical-align:middle}.tool-content{flex:1;min-height:0;overflow:auto;padding:clamp(14px,1.6vw,24px);scrollbar-color:#35536a transparent;scrollbar-width:thin}.tool-intro,.shadow-intro{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.tool-kicker{color:#e8f4ff;font-size:14px;font-weight:800}.tool-intro strong{font-size:11px;color:#879dbb;white-space:nowrap}.tool-intro em{font-style:normal;color:#65f7d4;font-size:16px}.hint-spotlight{margin-top:clamp(13px,3vh,28px);border:1px solid #386778;border-radius:16px;background:radial-gradient(circle at 50% 30%,#23504e 0,#102638 56%,#0d1e31);box-shadow:inset 0 0 28px #60ffca0d;min-height:155px;display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:3px;padding:9px}.hint-arrow{background:#1b364a;color:#6ffbd6;border:1px solid #396775;border-radius:9px;width:31px;height:34px;font-size:18px}.hint-center{text-align:center;min-width:0}.hint-center>span{font-size:10px;color:#7edecb;letter-spacing:1.3px;font-weight:800}.hint-center small{font-size:10px;color:#8a9fb7}.hint-answer{font-size:clamp(25px,3vw,43px);color:#ecffff;font-weight:800;letter-spacing:3px;margin:13px 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hint-answer.revealed{color:#70f6d3;text-shadow:0 0 20px #57f7c981;letter-spacing:0}.hint-stages{display:flex;justify-content:center;gap:5px}.hint-stages i{height:4px;width:19px;background:#40556c;border-radius:99px}.hint-stages i.on{background:#69f1d1;box-shadow:0 0 8px #66eacb}.reveal-btn{width:100%;margin-top:11px;border:1px solid #68e5c4;border-radius:10px;background:#1c5c58;color:#dffff4;padding:10px 12px;font-size:12px;font-weight:800;display:flex;justify-content:center;gap:12px}.reveal-btn span{background:#194643;padding:1px 6px;border-radius:5px;color:#9afde0}.reveal-btn:disabled{background:#203445;border-color:#344d60}.hint-map{display:flex;gap:5px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#3b6a70 transparent;padding:13px 0 4px}.hint-map button{width:26px;height:26px;min-width:26px;border-radius:7px;border:1px solid #344c65;background:#14233b;color:#9eb1c9;font-size:10px;font-weight:800}.hint-map button.current{border-color:#6ef3d3;background:#20574f;color:#e4fff5}.hint-map button.used:not(.current){color:#6bddc6}.tool-note{font-size:11px;color:#849db8;line-height:1.45;margin:12px 0 0}
.compact-write-tab{display:none!important}
.empty-panel{height:100%;min-height:200px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#9db1c9;gap:12px}.empty-panel>span{font-size:40px;color:#4ed7c6}.empty-panel b{font-size:13px;color:#e1edf7}.empty-panel p{font-size:11px;line-height:1.5;max-width:300px}.review-head{display:flex;gap:17px;align-items:center;margin:3px 0 18px}.review-ring{width:90px;height:90px;border-radius:50%;background:conic-gradient(#ff9c77 var(--score),#293b55 0);padding:7px;flex:none}.review-ring.passed{background:conic-gradient(#68f0ca var(--score),#293b55 0)}.review-ring strong{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:#101b31;font-size:25px}.review-ring small{font-size:12px}.review-head>div:last-child{display:grid;gap:4px}.review-head span,.review-head small{font-size:10px;color:#9eafc8}.review-head b{font-size:17px}.review-reference{background:#0c1629;border:1px solid #314361;border-radius:11px;padding:13px}.review-reference span{font-size:10px;color:#63e7ca;font-weight:800;letter-spacing:1px}.review-reference p{font-size:13px;line-height:1.6;margin:8px 0;color:#e5f1fb}
.shadow-intro p{font-size:11px;color:#94a7c2;line-height:1.5;margin:6px 0 0}.demo-badge{font-size:9px;background:#382a24;color:#ffc493;white-space:nowrap}.shadow-controls{display:flex;align-items:center;gap:6px;margin-top:15px;flex-wrap:wrap}.record-btn{border:1px solid #ff7d9b;background:#3b2137;color:#ffbbca;border-radius:9px;padding:9px 12px;font-size:11px;font-weight:800;display:flex;align-items:center;gap:7px}.record-btn i{width:8px;height:8px;background:#ff7090;border-radius:50%;box-shadow:0 0 9px #ff668f}.record-btn.recording i{animation:recordPulse .8s infinite alternate}@keyframes recordPulse{to{opacity:.25}}.shadow-controls audio{height:32px;max-width:190px;flex:1}.download-btn{border:1px solid #37536e;border-radius:8px;padding:7px 10px;text-decoration:none;color:#79efd3}.score-trigger{border:0;background:#1c464e;color:#7ff4dd;border-radius:8px;padding:9px 12px;font-size:11px;font-weight:800;margin-top:10px}.shadow-placeholder{display:flex;align-items:center;gap:12px;color:#94a9c1;background:#0c172b;border:1px dashed #344761;border-radius:12px;padding:17px;margin-top:16px;font-size:11px;line-height:1.5}.shadow-placeholder:first-letter{font-size:28px;color:#5ce7ce}.score-heading{display:flex;justify-content:space-between;align-items:center;margin:12px 0 8px;padding-top:10px;border-top:1px solid #31405b}.score-heading span{font-size:10px;color:#9aacc7}.score-heading strong{color:#6aefcb;font-size:19px}.score-heading small{font-size:10px;color:#8496ac}.score-flow{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;max-height:clamp(70px,19vh,180px);overflow:auto;padding:4px 1px;scrollbar-width:thin}.score-word{display:grid;justify-items:center;gap:2px;padding:5px 8px;border-radius:8px;color:var(--tone);border:1px solid color-mix(in srgb,var(--tone) 48%,transparent);background:color-mix(in srgb,var(--tone) 13%,#101b31);line-height:1.1}.score-word b{font-size:12px;font-weight:750}.score-word small{font-size:9px;opacity:.9}.score-legend{margin-top:9px}.legend-gradient{height:6px;border-radius:99px;background:linear-gradient(90deg,#ff657f 0%,#ffad73 28%,#e5d873 50%,#a5eb9c 74%,#5becdc 100%)}.legend-labels{display:flex;justify-content:space-between;gap:6px;margin-top:5px;color:#8fa5bd;font-size:9px}.legend-labels span:nth-child(2){color:#9ceaac}
.summary-hero{background:radial-gradient(circle at 80% 20%,#264f56,transparent 36%),#15223b;border:1px solid #346179}.summary-list,.summary-grid .stat{background:#111b30;border:1px solid #30425f;color:#eaf4ff}.summary-row{border-color:#2a3a57}.summary-hero p,.summary-list .panel-head span{color:#9db4ca}
@media(max-width:1050px){.home-page{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.home-story{padding:28px}.home-story h1{font-size:40px}.home-story p{font-size:13px}.workbench{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}.tool-content{padding:14px}}
@media(max-width:760px){.topbar{height:55px;padding:0 11px}.brand{font-size:15px}.brand-mark{width:30px;height:30px;font-size:18px}.tag{display:none}.lang-toggle button{font-size:10px;padding:6px 8px}.home-page,.practice-page{height:calc(100dvh - 55px);padding:9px}.home-page{display:flex;flex-direction:column;gap:8px}.home-story{flex:none;height:clamp(145px,24vh,205px);padding:16px 19px;border-radius:16px;justify-content:center}.home-story .eyebrow{font-size:9px}.home-story h1{font-size:clamp(25px,6vw,38px);margin:8px 0 6px;line-height:1.14;letter-spacing:-1px}.home-story p{font-size:11px;line-height:1.45;margin:0;max-width:460px}.story-steps{margin-top:9px}.story-steps span{padding:5px 7px;font-size:9px}.neon-load{flex:1;padding:14px;border-radius:16px;overflow:hidden}.load-head h2{font-size:19px;margin:3px 0}.load-head p{font-size:10px}.load-head .eyebrow{font-size:9px}.load-number{font-size:11px;padding:6px 8px}.load-switch{margin-top:8px;padding:3px}.load-switch button{padding:7px}.drop-zone{padding:9px;margin:7px 0}.upload-icon{width:30px;height:30px;font-size:18px;margin-bottom:3px}.drop-zone strong{font-size:12px}.drop-zone p{font-size:10px;margin:2px 0 7px}.drop-zone .secondary-btn{font-size:10px;padding:6px 8px}.file-line{padding:5px 8px;font-size:10px}.load-bottom{margin-top:6px}.load-bottom .text-input,.load-bottom .primary-btn{height:38px;padding:8px;font-size:11px}.scope-label{font-size:10px;margin-bottom:3px}.load-footer{margin-top:6px}.load-footer span{font-size:9px}.sample-link{font-size:10px}.practice-head{margin-bottom:7px;min-height:38px}.practice-head .eyebrow{font-size:8px;max-width:53vw}.practice-head h1{font-size:17px}.head-buttons{gap:4px;margin:0}.head-buttons .ghost-btn{font-size:10px;padding:6px 7px}.head-buttons .ghost-btn span{display:none}.session-strip{padding:6px 8px;gap:3px;margin-bottom:7px}.strip-stat{min-width:57px;padding:1px 2px}.strip-stat small{font-size:8px}.strip-stat b{font-size:12px}.session-progress>span{font-size:8px}.session-progress .progress-track{margin-top:5px}.workbench{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.08fr) minmax(0,.92fr);gap:7px}.listen-surface,.insight-surface{border-radius:13px}.listen-surface{padding:10px}.cue-label{font-size:8px}.cue-bar h2{font-size:17px;margin-top:2px;max-width:45vw}.cue-time{font-size:9px;margin:3px 0 5px}.cue-navigation button{height:23px;width:23px}.cue-navigation select{font-size:10px;max-width:82px}.player{padding:6px;grid-template-columns:34px minmax(0,1fr) auto;gap:6px}.play-button{width:32px;height:32px;font-size:13px}.wave{height:27px}.wave i:nth-child(n+30){display:none}.player-time{font-size:9px}.play-options{margin-top:5px}.pill-btn,.speed-select{font-size:9px;padding:4px 7px}.sample-note{font-size:8px;padding:3px 5px;margin-top:3px}.write-label{margin:6px 0 4px}.write-label span{font-size:11px}.write-label small{font-size:8px}.listen-surface textarea{font-size:12px;line-height:1.35;padding:8px;min-height:42px}.write-actions{margin-top:5px}.write-actions .secondary-btn,.write-actions .primary-btn{font-size:10px;padding:7px 9px}.ai-caution{font-size:8px}.tool-tabs{padding:4px;gap:3px}.tool-tabs button{font-size:10px;padding:6px 2px}.tool-content{padding:10px}.tool-kicker{font-size:11px}.tool-intro strong{font-size:9px}.tool-intro em{font-size:12px}.hint-spotlight{margin-top:7px;min-height:75px;grid-template-columns:25px 1fr 25px;padding:5px}.hint-arrow{height:25px;width:24px;font-size:13px}.hint-center>span,.hint-center small{font-size:8px}.hint-answer{font-size:21px;margin:5px 0;line-height:1.1}.hint-stages i{height:3px;width:13px}.reveal-btn{margin-top:6px;padding:6px;font-size:10px}.hint-map{padding:7px 0 2px}.hint-map button{height:21px;min-width:21px;width:21px;font-size:8px}.tool-note{margin-top:5px;font-size:9px}.shadow-intro p{font-size:9px;margin:2px 0}.demo-badge{font-size:7px;padding:4px 5px;white-space:normal;text-align:center}.shadow-controls{margin-top:7px}.record-btn{font-size:9px;padding:6px 8px}.shadow-controls audio{height:27px;max-width:135px}.shadow-placeholder{padding:9px;font-size:9px;margin-top:8px}.score-trigger{margin-top:5px;padding:5px;font-size:9px}.score-heading{margin:5px 0 3px;padding-top:4px}.score-heading strong{font-size:14px}.score-flow{max-height:clamp(45px,10vh,80px);gap:3px}.score-word{padding:3px 5px}.score-word b{font-size:10px}.score-word small{font-size:8px}.score-legend{margin-top:4px}.legend-labels{font-size:7px}.review-head{margin:0 0 6px}.review-ring{width:55px;height:55px;padding:4px}.review-ring strong{font-size:17px}.review-head b{font-size:12px}.review-reference{padding:8px}.review-reference p{font-size:10px;margin:4px 0}.empty-panel{min-height:0}.empty-panel>span{font-size:25px}.empty-panel b{font-size:10px}.empty-panel p{font-size:9px}}
@media(max-width:760px) and (max-height:660px){.home-story{height:120px}.home-story p,.story-steps{display:none}.home-story h1{font-size:25px}.load-head p{display:none}.practice-head{min-height:31px}.session-strip{margin-bottom:5px}.workbench{grid-template-rows:minmax(0,1.13fr) minmax(0,.87fr)}.cue-time{margin:1px 0 3px}.write-label{margin:3px 0}.play-options{margin-top:3px}.listen-surface textarea{min-height:35px}}
@media(max-width:760px) and (min-height:950px){.home-page{justify-content:center}.neon-load{flex:none;min-height:430px;max-height:540px}.load-mode{flex:none}.home-story{height:220px}}
@media(max-width:760px) and (max-height:660px){
 .workbench{display:block;position:relative;min-height:0}
 .listen-surface{height:calc(100% - 34px)}
 .insight-surface{position:absolute;bottom:0;left:0;right:0;height:34px;border-radius:10px;z-index:2}
 .insight-surface .tool-tabs{height:33px;grid-template-columns:repeat(4,minmax(0,1fr));padding:2px}
 .insight-surface .tool-tabs button{font-size:9px;padding:4px 1px}
 .insight-surface .tool-tabs .compact-write-tab{display:block!important}
 .insight-surface .tool-content{display:none}
 .workbench.compact-tool-open .listen-surface{display:none}
 .workbench.compact-tool-open .insight-surface{height:100%;border-radius:13px}
 .workbench.compact-tool-open .tool-content{display:block;overflow:auto}
 .workbench.compact-tool-open .tool-tabs .compact-write-tab{color:#68efd0}
}
/* Word-length transcription and coordinated hints */
.listen-surface #answer.hidden{display:none!important}
.word-entry{flex:1;min-height:56px;overflow:auto;display:flex;flex-wrap:wrap;align-content:flex-start;gap:9px 6px;padding:10px;background:#0c1629;border:1px solid #334564;border-radius:11px;scrollbar-color:#35536a transparent}
.word-slot{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;width:clamp(58px,calc(var(--slot-width) + 25px),165px);min-width:0;max-width:100%;padding:6px 7px 5px;background:#15233b;border:1px solid #334b69;border-radius:8px;transition:border-color .15s,background .15s}
.word-slot:focus-within{border-color:#74d7ff;box-shadow:0 0 0 2px #65bfff29}
.word-slot.correct{border-color:#46cc9c;background:#123b3a}
.word-slot.revealed{border-color:#547da6;background:#19304a}
.word-slot .slot-number{font-size:9px;color:#8096b8;font-weight:800}
.word-slot .word-input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#f2f8ff;font-size:13px;font-weight:750;padding:1px 0;box-shadow:none}
.word-slot.correct .word-input{color:#72f4c2}
.word-slot.revealed .word-input{color:#83caff;-webkit-text-fill-color:#83caff;opacity:1;user-select:none;-webkit-user-select:none;cursor:default}
.word-slot .word-input::placeholder{color:#627693;letter-spacing:1px;opacity:1}
.slot-length{color:#a1b5cd;font-size:9px;white-space:nowrap}
.word-slot.correct .slot-length{color:#72f4c2}
.word-slot.revealed .slot-length,.word-slot.revealed .slot-number{color:#89c9ff}
.hint-word-list{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;max-height:44%;overflow:auto;margin:13px 0 10px;padding:1px;scrollbar-color:#35536a transparent}
.hint-word{display:flex;align-items:center;gap:6px;min-height:32px;max-width:100%;border:1px solid #3a4b68;background:#17243c;color:#b8cce4;border-radius:8px;padding:5px 8px;text-align:left}
.hint-word small{font-size:9px;opacity:.65}.hint-word b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hint-word.current{border-color:#80cfff;box-shadow:0 0 0 1px #80cfff44}
.hint-word.correct{color:#79f4c3;border-color:#43bc93;background:#153c39}
.hint-word.system-shown{color:#89c9ff;border-color:#547da6;background:#19304a}
.hint-focus{border:1px solid #3c5875;border-radius:11px;background:#112840;padding:12px;display:grid;gap:8px}
.hint-focus small{color:#a7bdd5;font-size:10px}.hint-focus-word{font-size:clamp(20px,2.5vw,29px);font-weight:800;color:#dceeff;letter-spacing:2px;line-height:1.25;word-break:break-word}.hint-focus-word.correct{color:#78f3bf;letter-spacing:0}.system-letter{color:#83caff;text-shadow:0 0 13px #4dafff55}
.hint-focus .reveal-btn{margin:0;justify-content:center;background:#24466b;border-color:#5e9ddd;color:#d4eaff}
.hint-focus .reveal-btn:disabled{opacity:.6}
.legend-gradient{position:relative;background:linear-gradient(90deg,hsl(0 92% 66%) 0%,hsl(55 92% 66%) 25%,hsl(110 92% 66%) 50%,hsl(165 92% 66%) 75%,hsl(220 92% 66%) 100%)}
.pass-marker{position:absolute;left:80%;top:-4px;height:14px;width:2px;background:#fff;border-radius:2px;box-shadow:0 0 6px #fff;transform:translateX(-50%)}
.legend-labels{position:relative;min-height:18px}.legend-labels .pass-label{position:absolute;left:80%;transform:translateX(-50%);white-space:nowrap;color:#9dc8ff}.legend-labels span:last-child{margin-left:auto}.legend-labels span:nth-child(2){color:#9dc8ff}
@media(max-width:760px){.word-entry{padding:6px;gap:5px;min-height:35px}.word-slot{padding:3px 5px;min-width:max(39px,var(--slot-width))}.word-slot .word-input{font-size:11px}.slot-length,.word-slot .slot-number{font-size:8px}.hint-word-list{max-height:42%;margin:7px 0}.hint-word{min-height:26px;padding:3px 6px}.hint-word b{font-size:10px}.hint-focus{padding:8px;gap:5px}.hint-focus-word{font-size:19px}.hint-focus .reveal-btn{font-size:10px;padding:6px}.legend-labels .pass-label{left:80%}}
@media(max-width:760px){
 .workbench{display:block;position:relative;min-height:0}
 .listen-surface{height:calc(100% - 34px)}
 .insight-surface{position:absolute;bottom:0;left:0;right:0;height:34px;border-radius:10px;z-index:2}
 .insight-surface .tool-tabs{height:33px;grid-template-columns:repeat(4,minmax(0,1fr));padding:2px}
 .insight-surface .tool-tabs button{font-size:9px;padding:4px 1px}
 .insight-surface .tool-tabs .compact-write-tab{display:block!important}
 .insight-surface .tool-content{display:none}
 .workbench.compact-tool-open .listen-surface{display:none}
 .workbench.compact-tool-open .insight-surface{height:100%;border-radius:13px}
 .workbench.compact-tool-open .tool-content{display:block;overflow:auto}
 .workbench.compact-tool-open .tool-tabs .compact-write-tab{color:#68efd0}
}
/* Student-first summary and rich HTML export */
.summary-v2{max-width:980px;margin:0 auto;padding-top:28px;padding-bottom:50px}
.summary-v2-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:12px}
.summary-v2-head h1{font-size:clamp(24px,3vw,35px);margin:5px 0 4px;color:#ecf8ff}
.summary-v2-head p{font-size:12px;line-height:1.5;color:#a2bad0;margin:0}
.summary-copy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;border:1px solid #71d9c8;border-radius:11px;background:#205856;color:#e8fff9;font-size:12px;font-weight:800;padding:11px 14px;box-shadow:0 0 18px #4cddc125}
.summary-copy-btn:hover{background:#26736b}.summary-copy-btn svg{display:block}
.copy-status{min-height:18px;color:#7bf0c9;font-size:11px;text-align:right;margin:0 0 5px}
.summary-export{color:#173b43}.summary-export p:last-child{border-bottom:0!important}
.summary-compact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 9px}
.summary-compact>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;background:#111e32;border:1px solid #314762;border-radius:10px;padding:10px 13px}
.summary-compact small{color:#90abc5;font-size:10px}.summary-compact b{color:#e8faff;font-size:16px;white-space:nowrap}
.summary-details{background:#101b30;border:1px solid #30435e;border-radius:10px;padding:0 13px;color:#dceaf7}.summary-details summary{cursor:pointer;font-size:11px;font-weight:800;padding:10px 0;color:#9ddfdb}.summary-details .summary-list{border:0;background:transparent;border-radius:0;padding:0 0 8px}.summary-details .summary-row{padding:7px 0;font-size:11px}
.summary-v2-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:15px}.summary-v2-actions [data-action="returnPractice"]{margin-right:auto}.summary-v2-actions .secondary-btn,.summary-v2-actions .primary-btn{padding:9px 12px;font-size:11px}
.summary-v2 .footnote{margin:12px 0 0;color:#849db7;font-size:10px}
@media(max-width:760px){.summary-v2{padding:17px 10px 30px}.summary-v2-head{align-items:flex-start}.summary-v2-head h1{font-size:23px}.summary-v2-head p{font-size:10px}.summary-copy-btn{padding:9px 10px;font-size:10px}.summary-copy-btn svg{width:15px;height:15px}.summary-compact>div{display:block;padding:8px}.summary-compact small{display:block;font-size:9px}.summary-compact b{display:block;font-size:13px;margin-top:2px}}
/* Segment playback with restart and a draggable timeline */
.listen-surface .player{grid-template-columns:42px 36px minmax(0,1fr) auto;gap:9px}
.restart-button{width:36px;height:36px;display:grid;place-items:center;border:1px solid #3c7180;border-radius:10px;background:#172c40;color:#9ae7db;font-size:16px;line-height:1}
.restart-button:hover{background:#21465b;border-color:#79d9c9}.restart-button:focus-visible,.seek-bar:focus-visible{outline:2px solid #7af0d0;outline-offset:3px}
.seek-bar{appearance:none;-webkit-appearance:none;min-width:0;width:100%;height:7px;padding:0;margin:0;border:0;border-radius:99px;background:linear-gradient(90deg,#5ef2c9 0%,#5ef2c9 var(--seek-pct),#385b6a var(--seek-pct),#385b6a 100%);cursor:pointer;touch-action:none}
.seek-bar::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border:3px solid #d7fff2;border-radius:50%;background:#4fd3b6;box-shadow:0 0 0 3px #58e4c634,0 0 10px #46e0bf80}
.seek-bar::-moz-range-thumb{width:12px;height:12px;border:3px solid #d7fff2;border-radius:50%;background:#4fd3b6;box-shadow:0 0 0 3px #58e4c634}
.player-time{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:760px){.listen-surface .player{grid-template-columns:32px 29px minmax(0,1fr) auto;gap:6px}.restart-button{width:29px;height:29px;font-size:14px;border-radius:8px}.seek-bar::-webkit-slider-thumb{width:16px;height:16px}.player-time{font-size:9px}}