@import "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Literata:opsz,wght@7..72,600;7..72,700&display=swap";:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#171612;--muted:#6a655d;--paper:#f7f4ed;--panel:#fffefa;--line:#d8d0c4;--mint:#40d3a2;--mint-dark:#08745b;--amber:#f2b544;--tomato:#ef5a45;--blue:#2378cf;--violet:#6353b6;--graphite:#25241f;--shadow:0 18px 50px #25241f1f}*{box-sizing:border-box}html{background:var(--paper);min-width:320px}body{min-width:320px;min-height:100vh;color:var(--ink);letter-spacing:0;background:linear-gradient(90deg,#1716120d 1px,#0000 1px) 0 0/42px 42px,linear-gradient(#1716120a 1px,#0000 1px) 0 0/42px 42px,linear-gradient(135deg,#f7f4ed 0%,#edf7f1 42%,#f9efe9 100%);margin:0;font-family:Atkinson Hyperlegible,Trebuchet MS,sans-serif}button,input,textarea{font:inherit;letter-spacing:0}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.46}.app-shell{grid-template-columns:286px minmax(0,1fr);min-height:100vh;display:grid}.sidebar{color:#fffefa;background:linear-gradient(#40d3a21a,#0000 36%),linear-gradient(130deg,#1f1e1a,#30302a 62%,#191815);border-right:1px solid #ffffff1f;flex-direction:column;gap:22px;height:100vh;padding:22px;display:flex;position:sticky;top:0}.brand{grid-template-columns:48px 1fr;align-items:center;gap:12px;display:grid}.brand-mark{width:48px;height:48px;color:var(--graphite);background:var(--mint);border:2px solid #ffffffa6;border-radius:8px;place-items:center;display:grid;box-shadow:5px 5px #f2b544}.brand strong{font-family:Literata,Georgia,serif;font-size:1.1rem;line-height:1.08;display:block}.brand span{color:#fffefaa8;margin-top:4px;font-size:.84rem;display:block}.nav-stack{gap:8px;display:grid}.nav-item,.ghost-button,.metric,.deck-list button,.scenario-list button,.verb-rail button{border-radius:8px}.nav-item{color:#fffefac7;text-align:left;background:0 0;border:1px solid #0000;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 12px;display:flex}.nav-item:hover,.nav-item.active{color:#fffefa;background:#ffffff17;border-color:#ffffff26}.side-metrics{gap:10px;margin-top:auto;display:grid}.metric{background:#ffffff14;border:1px solid #ffffff1f;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;padding:12px;display:grid}.metric span{color:#fffefaad;font-size:.86rem}.metric strong{color:var(--mint)}.ghost-button,.primary-button,.icon-button,.sound-button,.record-button,.rating-row button,.segmented button,.line-sound{border-radius:8px;justify-content:center;align-items:center;gap:8px;display:inline-flex}.ghost-button{color:#fffefac7;background:#ffffff0f;border:1px solid #ffffff21;min-height:42px;padding:10px 12px}.workspace{min-width:0;padding:30px}.topbar{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:24px;display:flex}.eyebrow{color:var(--mint-dark);text-transform:uppercase;margin:0 0 8px;font-size:.78rem;font-weight:700}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Literata,Georgia,serif}h1{margin-bottom:0;font-size:2.45rem;line-height:1.02}h2{margin-bottom:12px;font-size:2rem;line-height:1.08}.search-box{border:1px solid var(--line);background:#fffefac7;border-radius:8px;grid-template-columns:20px minmax(160px,280px);align-items:center;gap:8px;min-height:44px;padding:0 12px;display:grid;box-shadow:6px 6px #40d3a23d}.search-box input{width:100%;min-width:0;color:var(--ink);background:0 0;border:0;outline:0}.content-grid,.speaking-layout,.scenario-layout,.tenses-layout{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:18px;display:grid}.main-panel,.deck-panel,.sprint-panel,.prompt-card,.speech-check,.dialogue-panel,.tense-table,.verb-rail,.scenario-list{border:1px solid var(--line);box-shadow:var(--shadow);background:#fffefae0;border-radius:8px;padding:18px}.segmented{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.segmented button{min-height:36px;color:var(--muted);border:1px solid var(--line);background:#fffefa;padding:8px 11px}.segmented button.active{color:var(--ink);background:var(--amber);border-color:#c98310}.study-card{border:2px solid var(--graphite);min-height:420px;box-shadow:9px 9px 0 var(--graphite);background:linear-gradient(135deg,#40d3a238,#0000 42%),linear-gradient(45deg,#ef5a4524,#0000 58%),#fffefa;border-radius:8px;padding:26px;display:grid;position:relative;overflow:hidden}.study-card:after{content:"";opacity:.52;background-color:#0000;background-image:linear-gradient(90deg,#0000 47%,#25241f26 48% 52%,#0000 53%),linear-gradient(#0000 47%,#25241f26 48% 52%,#0000 53%);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:24px 24px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;width:142px;height:92px;position:absolute;bottom:18px;right:18px}.card-topline{color:var(--muted);justify-content:space-between;gap:12px;font-weight:700;display:flex}.sound-button{color:#fffefa;background:var(--graphite);border:0;width:44px;height:44px;position:absolute;top:62px;right:22px}.card-category{color:var(--tomato);align-self:end;margin:60px 0 10px;font-weight:700}.study-card h2{max-width:720px;margin-bottom:18px;font-size:3.1rem;line-height:1.03}.tag-row{flex-wrap:wrap;gap:8px;margin-bottom:28px;display:flex}.tag-row span{color:var(--graphite);background:#40d3a247;border:1px solid #08745b40;border-radius:999px;padding:5px 9px;font-size:.82rem}.primary-button{color:#fffefa;background:var(--blue);border:1px solid #155da4;width:fit-content;min-height:44px;padding:11px 14px;box-shadow:4px 4px #25241f2e}.answer-block{z-index:1;border:1px solid var(--line);background:#fffefadb;border-radius:8px;gap:12px;max-width:760px;padding:18px;display:grid;position:relative}.answer-block strong{font-size:1.35rem}.answer-block p{margin:0;font-size:1.25rem;line-height:1.45}.answer-block p.answer-placeholder{color:var(--muted);font-size:1rem;line-height:1.4}.answer-block small{color:var(--muted);font-size:.98rem}.card-action{background:#2378cf14;border:1px solid #2378cf2e;border-radius:8px;gap:12px;margin-top:6px;padding:14px;display:grid}.action-head{gap:4px;display:grid}.action-head span{color:var(--blue);text-transform:uppercase;font-size:.78rem;font-weight:700}.action-head strong{font-size:1rem}.card-action label{color:var(--muted);gap:8px;font-weight:700;display:grid}.card-action textarea{min-height:86px;color:var(--ink);border:1px solid var(--line);resize:vertical;background:#fffefa;border-radius:8px;padding:12px}.action-controls,.action-result{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.action-controls button,.action-result button{min-height:40px;color:var(--ink);border:1px solid var(--line);background:#fffefa;border-radius:8px;padding:9px 12px}.action-controls .primary-button{color:#fffefa;background:var(--blue);border-color:#155da4}.action-result{border:1px solid var(--line);background:#fffefad1;border-radius:8px;padding:12px}.action-result>div:nth-child(2){flex:260px}.action-result p{color:var(--muted);margin:4px 0 0;font-size:.98rem;line-height:1.35}.action-result button.success{color:#062f25;background:var(--mint);border-color:#0f9d78}.action-result button.danger{color:#fffefa;background:var(--tomato);border-color:#bd3a2a}.rating-row{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.rating-row button{min-height:42px;color:var(--ink);border:1px solid var(--line);background:#fffefa;padding:9px 12px}.rating-row button.success{color:#062f25;background:var(--mint);border-color:#0f9d78}.rating-row button.danger{color:#fffefa;background:var(--tomato);border-color:#bd3a2a}.deck-panel{gap:16px;display:grid}.deck-stat{grid-template-columns:90px 1fr;align-items:center;gap:10px;display:grid}.deck-stat strong{font-family:Literata,Georgia,serif;font-size:3.4rem}.deck-stat span{color:var(--muted)}.mini-map{background:#25241f;border-radius:8px;grid-template-columns:1fr 1fr;gap:12px;height:170px;padding:12px;display:grid;position:relative;overflow:hidden}.room{z-index:1;color:#fffefa;border:1px solid #ffffff47;border-radius:8px;place-items:center;font-size:.8rem;display:grid;position:relative}.room.light{background:#f2b54447}.room.climate{background:#2378cf47}.room.security{background:#40d3a238;grid-column:1/-1}.line{background:#fffefa80;position:absolute}.line.horizontal{height:1px;top:82px;left:32px;right:32px}.line.vertical{width:1px;top:32px;bottom:32px;left:50%}.deck-list{gap:8px;max-height:332px;display:grid;overflow:auto}.deck-list button{text-align:left;border:1px solid var(--line);background:#fffefa;gap:3px;padding:10px;display:grid}.deck-list small,.scenario-list small,.verb-rail span{color:var(--muted)}.sprint-panel{gap:18px;min-height:620px;display:grid}.sprint-question{color:#fffefa;background:linear-gradient(135deg, #40d3a23d, transparent 45%), var(--graphite);border-radius:8px;padding:24px}.sprint-question span{color:var(--mint);font-weight:700}.sprint-question h2{max-width:900px;margin:16px 0 8px;font-size:2.5rem}.sprint-question p{color:#fffefaad;margin-bottom:0}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.choice-grid button{text-align:left;border:2px solid var(--line);background:#fffefa;border-radius:8px;gap:8px;min-height:132px;padding:18px;display:grid}.choice-grid button.correct{background:#40d3a242;border-color:#0f9d78}.choice-grid button.wrong{color:#6b1b12;border-color:var(--tomato);background:#ef5a4529}.choice-grid small{color:var(--muted);line-height:1.35}.sprint-actions,.speaking-controls{align-items:center;gap:10px;display:flex}.icon-button{width:44px;height:44px;color:var(--ink);border:1px solid var(--line);background:#fffefa}.tenses-layout{grid-template-columns:300px minmax(0,1fr)}.verb-rail,.scenario-list{gap:10px;max-height:calc(100vh - 176px);display:grid;overflow:auto}.verb-rail button,.scenario-list button{text-align:left;border:1px solid var(--line);background:#fffefa;gap:5px;padding:14px;display:grid}.verb-rail button.active,.scenario-list button.active{border-color:var(--graphite);box-shadow:5px 5px 0 var(--amber)}.tense-head,.dialogue-head{color:#fffefa;background:var(--graphite);border-radius:8px;justify-content:space-between;gap:18px;padding:20px;display:flex}.tense-head h2,.dialogue-head h2{margin-bottom:6px}.tense-head span,.dialogue-head span{color:#fffefab3}.tense-row{border-bottom:1px solid var(--line);grid-template-columns:170px 42px minmax(0,1.2fr) minmax(0,1fr);align-items:start;gap:12px;padding:16px 0;display:grid}.tense-row:last-child{border-bottom:0}.tense-row strong{display:block}.tense-row small{color:var(--muted);margin-top:4px;line-height:1.35;display:block}.tense-row p{margin-bottom:0;font-weight:700;line-height:1.35}.tense-row span{color:var(--muted);line-height:1.35}.line-sound{width:34px;height:34px;color:var(--ink);border:1px solid var(--line);background:#fffefa}.speaking-layout{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}.prompt-card{color:#fffefa;background:linear-gradient(135deg, #6353b657, transparent 48%), linear-gradient(55deg, #ef5a4542, transparent 70%), var(--graphite);min-height:460px}.prompt-card span{color:var(--mint);font-weight:700}.prompt-card h2{overflow-wrap:anywhere;margin:42px 0 18px;font-size:2.05rem;line-height:1.12}.prompt-card p{color:#fffefab3;line-height:1.5}.record-button{color:#062f25;background:var(--mint);border:1px solid #0f9d78;min-height:48px;padding:12px 16px}.record-button.listening{color:#fffefa;background:var(--tomato);border-color:#bd3a2a}.speech-check{gap:16px;display:grid}.speech-check label{color:var(--muted);gap:8px;font-weight:700;display:grid}.speech-check textarea{min-height:142px;color:var(--ink);border:1px solid var(--line);resize:vertical;background:#fffefa;border-radius:8px;padding:14px}.score-strip{background:#2378cf17;border:1px solid #2378cf2e;border-radius:8px;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:14px;padding:14px;display:grid}.score-strip p{color:var(--muted);margin-bottom:0}.score-ring{background:radial-gradient(circle at center, #fffefa 56%, transparent 57%), conic-gradient(var(--mint) var(--score), #25241f21 0);border-radius:50%;grid-template-columns:auto auto;place-content:center;width:72px;height:72px;display:grid}.score-ring strong{font-size:1.42rem}.score-ring span{align-self:end;font-size:.82rem}.score-ring.compact{width:58px;height:58px}.score-ring.compact strong{font-size:1.12rem}.target-line{background:#f2b5442e;border:1px solid #c9831038;border-radius:8px;gap:6px;padding:14px;display:grid}.target-line span{color:var(--muted);font-size:.86rem;font-weight:700}.target-line strong{font-size:1.2rem}.scenario-layout{grid-template-columns:310px minmax(0,1fr)}.scenario-list button{grid-template-columns:22px 1fr;align-items:center}.scenario-list small{grid-column:2}.dialogue-lines{gap:12px;margin-top:16px;display:grid}.dialogue-line{border:1px solid var(--line);background:#fffefa;border-radius:8px;grid-template-columns:38px 80px minmax(0,1fr);align-items:start;gap:12px;padding:14px;display:grid}.dialogue-line.mine{background:#40d3a229;border-color:#08745b3d}.dialogue-line>span{color:var(--tomato);font-weight:700}.dialogue-line p{margin-bottom:4px;font-weight:700;line-height:1.38}.dialogue-line small{color:var(--muted);grid-column:3;line-height:1.35}@media (width<=1080px){.app-shell{grid-template-columns:1fr}.sidebar{height:auto;position:static}.nav-stack{grid-template-columns:repeat(5,minmax(0,1fr))}.nav-item{justify-content:center}.nav-item span{display:none}.side-metrics{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}.content-grid,.speaking-layout,.scenario-layout,.tenses-layout{grid-template-columns:1fr}.verb-rail,.scenario-list{max-height:none}.deck-panel{grid-template-columns:minmax(170px,.6fr) minmax(260px,1fr)}.deck-list{grid-column:1/-1}}@media (width<=740px){.workspace{padding:18px}.topbar{display:grid}h1{font-size:2rem}.search-box{grid-template-columns:20px minmax(0,1fr)}.side-metrics,.choice-grid,.deck-panel{grid-template-columns:1fr}.study-card{min-height:430px;box-shadow:5px 5px 0 var(--graphite);padding:18px}.study-card h2{font-size:2.2rem}.tense-row{grid-template-columns:42px minmax(0,1fr)}.tense-row div{grid-column:1/-1}.tense-row span{grid-column:2}.dialogue-line{grid-template-columns:38px minmax(0,1fr)}.dialogue-line>span{grid-column:2}.dialogue-line p,.dialogue-line small{grid-column:1/-1}.scenario-list button{grid-template-columns:22px minmax(0,1fr)}}
