:root{--page: #eef1f3;--surface: #ffffff;--surface-soft: #f6f8f9;--ink: #1d2529;--muted: #69757b;--line: #d9e0e3;--teal: #13756f;--teal-soft: #e5f3f1;--red: #b5443b;--amber: #a66b12;--blue: #2c68a0;--shadow: 0 18px 46px rgba(31, 50, 58, .12)}*{box-sizing:border-box}body{min-height:100svh;margin:0;background:var(--page);color:var(--ink);font-family:Inter,Noto Sans SC,Noto Sans JP,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.app-shell{width:min(980px,100%);min-height:100svh;margin:0 auto;display:grid;grid-template-rows:auto auto 1fr auto;background:var(--surface-soft);border-inline:1px solid var(--line)}.topbar{min-height:76px;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--surface)}.brand-block{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:7px;background:var(--ink);color:#fff;font-family:"Noto Serif JP",serif;font-size:23px;font-weight:800}.eyebrow,h1,h2,p{margin-top:0}.eyebrow{margin-bottom:2px;color:var(--teal);font-size:11px;font-weight:800;letter-spacing:.08em}h1{margin-bottom:0;font-size:20px;letter-spacing:0}.icon-command,.close-button{width:40px;height:40px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font-size:25px;line-height:1}.study-toolbar{padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);background:#f9fafb}.language-switch{display:grid;grid-template-columns:1fr 1fr;width:260px;padding:3px;border:1px solid var(--line);border-radius:7px;background:#e9edef}.language-button{min-height:36px;border:0;border-radius:5px;background:transparent;color:var(--muted);font-weight:700}.language-button.active{background:#fff;color:var(--teal);box-shadow:0 1px 4px #1e2d3424}.session-stats{display:flex;gap:26px}.session-stats div{min-width:62px;display:grid;gap:2px;text-align:right}.session-stats span{color:var(--muted);font-size:11px}.session-stats strong{font-size:18px}.study-area{min-height:620px;padding:28px 22px 22px;display:grid;align-content:start;justify-items:center;gap:16px}.grammar-card{width:min(720px,100%);min-height:500px;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.card-topline{min-height:50px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.card-labels{display:flex;align-items:center;gap:7px}.level-badge{padding:4px 8px;border-radius:4px;background:var(--teal-soft);color:var(--teal);font-size:12px;font-weight:800}.preview-badge{padding:4px 8px;border-radius:4px;background:#fff0cf;color:#885900;font-size:12px;font-weight:800}.card-position{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.card-face{padding:34px clamp(22px,6vw,58px) 40px}.face-label,.section-label{margin-bottom:12px;color:var(--muted);font-size:12px;font-weight:800}.card-face h2{margin-bottom:20px;font-family:"Noto Serif JP",Georgia,serif;font-size:31px;line-height:1.25}.question-text{margin-bottom:18px;color:#39464c;line-height:1.65}.sentence-box{min-height:150px;padding:25px;display:grid;align-content:center;gap:10px;border-left:4px solid var(--teal);background:#f3f8f7}.sentence-main{margin-bottom:0;font-family:"Noto Serif JP",Georgia,serif;font-size:24px;font-weight:700;line-height:1.65}.sentence-hint{margin-bottom:0;color:var(--muted);font-size:13px}.show-answer{width:100%;min-height:48px;margin-top:25px;border:1px solid var(--teal);border-radius:6px;background:var(--teal);color:#fff;font-weight:800}.back-face{display:grid;gap:22px}.answer-summary{padding-bottom:20px;border-bottom:1px solid var(--line)}.answer-text{margin-bottom:8px;font-family:"Noto Serif JP",Georgia,serif;font-size:25px;font-weight:800;line-height:1.55}.meaning-text{margin-bottom:0;color:#405158;line-height:1.65}.grammar-grid{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.grammar-grid div{padding:14px;border:1px solid var(--line);background:var(--surface-soft)}dt{margin-bottom:6px;color:var(--teal);font-size:11px;font-weight:800}dd{margin:0;line-height:1.55}.example-section,.contrast-section{padding:16px 18px;background:#f7f9fa}.example-text{margin-bottom:7px;font-size:17px;font-weight:700;line-height:1.6}.translation,.contrast-section p:last-child{margin-bottom:0;color:var(--muted);line-height:1.55}.preview-panel{width:min(720px,100%);padding:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #e0c47f;border-radius:7px;background:#fff9e9}.preview-decisions{display:flex;gap:8px}.danger-command{color:var(--red)}.rating-panel{width:min(720px,100%);display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.rating-button{min-height:62px;display:grid;place-content:center;gap:2px;border:1px solid var(--line);border-radius:6px;background:#fff;font-weight:800}.rating-button small{color:var(--muted);font-size:11px;font-weight:500}.rating-button.again{border-color:#e2b2ae;color:var(--red)}.rating-button.hard{border-color:#dfc895;color:var(--amber)}.rating-button.good{border-color:#9ccfc9;color:var(--teal)}.rating-button.easy{border-color:#a9c4df;color:var(--blue)}.empty-state{width:min(720px,100%);min-height:470px;display:grid;place-content:center;justify-items:center;padding:30px;border:1px solid var(--line);background:#fff;text-align:center}.empty-glyph{width:70px;height:70px;margin-bottom:20px;display:grid;place-items:center;border-radius:50%;background:var(--teal-soft);color:var(--teal);font-size:27px;font-weight:900}.empty-state h2{margin-bottom:8px}.empty-state p{color:var(--muted)}.command-button,.secondary-command{min-height:42px;padding:0 18px;border-radius:6px;font-weight:800}.command-button{border:1px solid var(--teal);background:var(--teal);color:#fff}.secondary-command{border:1px solid var(--line);background:#fff;color:var(--ink)}.deck-footer{min-height:52px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:12px}.text-command{border:0;background:transparent;color:var(--red);font-weight:700}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;padding:18px;display:grid;place-items:center;background:#19252a8c}.editor-dialog{width:min(620px,100%);max-height:calc(100svh - 36px);overflow-y:auto;border-radius:8px;background:#fff;box-shadow:var(--shadow)}.editor-header{min-height:74px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.editor-header h2{margin-bottom:0;font-size:19px}.editor-form{padding:18px;display:grid;gap:14px}.editor-form label{display:grid;gap:6px;color:#49565c;font-size:12px;font-weight:800}.editor-form input,.editor-form select,.editor-form textarea{width:100%;padding:10px 11px;border:1px solid #cbd4d8;border-radius:5px;background:#fff;color:var(--ink);resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.generation-error{margin:0;padding:10px 12px;border-left:3px solid var(--red);background:#fff1f0;color:#922f28;font-size:12px;line-height:1.5}.generation-note{padding:11px 12px;border-left:3px solid var(--teal);background:var(--teal-soft);color:#42605d;font-size:12px;line-height:1.55}.command-button:disabled{opacity:.65;cursor:wait}.editor-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:4px}@media (max-width: 680px){.app-shell{border:0}.topbar,.study-toolbar,.deck-footer{padding-inline:14px}.study-toolbar{align-items:stretch;flex-direction:column}.language-switch{width:100%}.session-stats{justify-content:space-between;gap:8px}.session-stats div{text-align:center}.study-area{min-height:0;padding:14px}.grammar-card{min-height:520px}.card-face{padding:25px 19px 30px}.card-face h2{font-size:26px}.sentence-main{font-size:20px}.grammar-grid{grid-template-columns:1fr}.rating-panel{grid-template-columns:1fr 1fr}.preview-panel{align-items:stretch;flex-direction:column}.preview-panel>button,.preview-decisions,.preview-decisions button{width:100%}.rating-button{min-height:58px}.form-row{grid-template-columns:1fr}}