.grammar-command{max-width:1160px;margin:2rem auto 0;padding:clamp(22px,4vw,42px);display:grid;grid-template-columns:1.25fr 1fr auto;gap:clamp(20px,4vw,48px);align-items:center;background:linear-gradient(135deg,#fff 0%,#fffaf4 55%,#f8eee7 100%);border:1px solid color-mix(in srgb,var(--red) 16%,var(--border));border-radius:22px;box-shadow:0 22px 70px rgba(73,45,29,.1);position:relative;overflow:hidden}.grammar-command::after{content:'学';position:absolute;right:-18px;top:-55px;font:900 180px/1 'Noto Serif JP',serif;color:rgba(190,52,40,.045);pointer-events:none}.grammar-eyebrow{display:block;color:var(--red);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}.grammar-command h2{font:700 clamp(24px,3vw,38px)/1.2 'Noto Serif JP',serif;max-width:620px}.grammar-command__intro p{color:var(--ink-soft);max-width:590px;margin-top:10px;font-size:14px}.grammar-command__progress{display:flex;align-items:center;gap:18px}.grammar-ring{--progress:0deg;width:112px;height:112px;flex:0 0 112px;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle 43px,var(--white) 96%,transparent 100%),conic-gradient(var(--red) var(--progress),var(--border) 0);box-shadow:inset 0 0 0 1px var(--border)}.grammar-ring strong{font-size:22px;line-height:1}.grammar-ring span{font-size:10px;color:var(--ink-soft);margin-top:4px}.grammar-level-progress{display:grid;gap:7px;min-width:145px}.grammar-level-row{display:grid;grid-template-columns:24px 1fr 35px;gap:7px;align-items:center;font-size:10px;font-weight:800;color:var(--ink-soft)}.grammar-level-track{height:6px;border-radius:99px;background:var(--border);overflow:hidden}.grammar-level-track i{display:block;height:100%;background:var(--red);border-radius:inherit}.grammar-command__actions{display:grid;gap:8px;position:relative;z-index:1}.grammar-command button,.grammar-viewbar button{cursor:pointer;font-weight:800;border-radius:10px;padding:10px 15px}.grammar-primary{background:var(--red);border:1px solid var(--red);color:#fff;box-shadow:0 8px 22px rgba(190,52,40,.2)}.grammar-quiet{background:var(--white);border:1px solid var(--border-mid);color:var(--ink)}.grammar-viewbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:12px 0 18px;padding:10px;background:color-mix(in srgb,var(--cream) 70%,transparent);border:1px solid var(--border);border-radius:12px}.grammar-viewbar label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink-soft)}.grammar-viewbar select{border:1px solid var(--border-mid);background:var(--white);color:var(--ink);border-radius:8px;padding:8px 10px}.grammar-viewbar button{border:1px solid var(--border-mid);background:var(--white);color:var(--ink-mid);padding:8px 11px;font-size:12px}.grammar-viewbar button[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}#grammarResultSummary{margin-left:auto;font-size:12px;color:var(--ink-soft)}.grammar-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.grammar-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(55,39,28,.1);border-color:color-mix(in srgb,var(--red) 28%,var(--border))}.grammar-card.is-mastered{background:linear-gradient(145deg,var(--white),color-mix(in srgb,#3aa76d 6%,var(--white)));border-color:rgba(35,145,87,.28)}.grammar-card-actions{display:flex;gap:7px;margin-top:auto;padding-top:4px}.grammar-card-actions button{flex:1;border:1px solid var(--border-mid);background:var(--white);color:var(--ink-mid);border-radius:8px;padding:7px;font-size:11px;font-weight:800;cursor:pointer}.grammar-card-actions .is-active{background:#eaf8ef;border-color:#85c99e;color:#167b40}.grammar-empty{grid-column:1/-1;text-align:center;padding:52px 20px;border:1px dashed var(--border-mid);border-radius:16px;color:var(--ink-soft)}.grammar-dialog{width:min(650px,calc(100vw - 28px));border:0;border-radius:20px;padding:0;background:var(--white);color:var(--ink);box-shadow:0 28px 100px rgba(0,0,0,.3)}.grammar-dialog::backdrop{background:rgba(20,17,15,.65);backdrop-filter:blur(5px)}.grammar-dialog__body{padding:clamp(22px,5vw,42px)}.grammar-dialog__top{display:flex;align-items:center;justify-content:space-between;gap:15px}.grammar-dialog__pattern{font:700 clamp(29px,6vw,45px)/1.2 'Noto Serif JP',serif;margin:14px 0 6px}.grammar-dialog__meaning{font-size:17px;font-weight:700;color:var(--red)}.grammar-dialog__structure{margin:22px 0;background:var(--cream);border:1px solid var(--border);padding:13px 15px;border-radius:10px}.grammar-dialog__example{border-left:4px solid var(--red);padding:4px 0 4px 16px}.grammar-dialog__example .jp{font-size:19px}.grammar-dialog__footer{display:flex;gap:9px;margin-top:25px}.grammar-dialog button{border:1px solid var(--border-mid);border-radius:9px;padding:9px 14px;background:var(--white);color:var(--ink);font-weight:800;cursor:pointer}.grammar-dialog .close-dialog{font-size:20px;width:38px;height:38px;padding:0}.grammar-dialog .master-dialog{background:var(--red);color:#fff;border-color:var(--red)}
@media(max-width:900px){.grammar-command{margin:1rem 5vw 0;grid-template-columns:1fr 1fr}.grammar-command__intro{grid-column:1/-1}.grammar-command__actions{align-self:stretch}.grammar-command__actions button{height:100%}}@media(max-width:620px){.grammar-command{grid-template-columns:1fr;border-radius:16px}.grammar-command__progress{justify-content:space-between}.grammar-command__actions{grid-template-columns:1fr 1fr}.grammar-command__intro{grid-column:auto}.grammar-ring{width:96px;height:96px;flex-basis:96px}.grammar-viewbar{align-items:stretch}.grammar-viewbar label{width:100%;justify-content:space-between}.grammar-viewbar select{flex:1;min-width:0}#grammarResultSummary{width:100%;margin:0}.toolbar{top:60px}.filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px}.filters button{flex:0 0 auto}}
.grammar-dialog__footer{align-items:center}.grammar-dialog a.grammar-quiet{display:inline-flex;align-items:center;border:1px solid var(--border-mid);border-radius:9px;padding:9px 14px;background:var(--white);font-size:13px;font-weight:800}
.grammar-review-launch{background:var(--ink);border-color:var(--ink);box-shadow:none}.grammar-review-head{display:flex;align-items:center;justify-content:space-between;color:var(--red);font-size:11px;font-weight:900;letter-spacing:.1em}.grammar-review-bar{height:5px;background:var(--border);border-radius:99px;overflow:hidden;margin:12px 0 32px}.grammar-review-bar i{display:block;height:100%;background:var(--red);border-radius:inherit;transition:width .25s ease}.grammar-review-prompt{font-size:13px;color:var(--ink-soft)}.grammar-review-dialog .grammar-dialog__pattern{font-size:clamp(36px,8vw,58px);margin:10px 0 30px}.grammar-review-answer{margin-top:22px}.grammar-review-question{font-size:12px;font-weight:800;color:var(--ink-soft);margin:22px 0 8px}.grammar-review-ratings{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.grammar-review-ratings button{padding:9px 4px;font-size:12px}.grammar-review-ratings small{font-size:9px;color:var(--ink-soft)}.grammar-review-complete{text-align:center}.grammar-review-complete .close-dialog{display:block;margin-left:auto}.grammar-review-icon{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;margin:8px auto 18px;background:var(--red-pale);color:var(--red);font:700 38px 'Noto Serif JP',serif}.grammar-review-complete h2{font:700 28px 'Noto Serif JP',serif}.grammar-review-complete>strong{display:block;color:var(--red);font-size:18px;margin:10px 0}.grammar-review-complete>p{color:var(--ink-soft);margin:8px auto 20px;max-width:430px}
@media(prefers-reduced-motion:reduce){.grammar-card{transition:none}}
.grammar-review-metrics{display:flex;gap:9px;margin-top:10px}.grammar-review-metrics span{font-size:9px;color:var(--ink-soft);white-space:nowrap}.grammar-review-metrics strong{color:var(--ink);font-size:11px}.grammar-detail-tools{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}.grammar-detail-tools button{font-size:11px;padding:7px 10px}.grammar-note{display:grid;gap:6px;margin:18px 0}.grammar-note>span,.grammar-related>strong{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}.grammar-note textarea{width:100%;min-height:90px;resize:vertical;border:1px solid var(--border-mid);border-radius:10px;background:var(--cream);color:var(--ink);padding:11px;font:13px/1.6 'DM Sans',sans-serif}.grammar-note small{font-size:9px;color:var(--ink-soft);text-align:right}.grammar-related{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:18px 0}.grammar-related>strong{grid-column:1/-1}.grammar-related button{text-align:left;padding:9px}.grammar-related button span,.grammar-related button small{display:block}.grammar-related button span{font-family:'Noto Serif JP',serif;font-weight:800}.grammar-related button small{margin-top:3px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grammar-compare-tray{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:180;width:min(720px,calc(100vw - 26px));display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--ink);color:var(--white);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3)}.grammar-compare-tray[hidden]{display:none}.grammar-compare-tray>div{display:grid;min-width:0;margin-right:auto}.grammar-compare-tray span{font-size:11px;color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grammar-compare-tray button{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;border-radius:8px;padding:7px 10px;font-weight:800;cursor:pointer}.grammar-compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:10px;margin-top:22px}.grammar-compare-grid article{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--cream)}.grammar-compare-grid h3{font:800 22px 'Noto Serif JP',serif;margin:12px 0 6px}.grammar-compare-grid article>strong{font-size:12px;color:var(--red)}.grammar-compare-grid article>p{font-size:11px;color:var(--ink-soft);margin:10px 0}.grammar-compare-grid blockquote{border-left:3px solid var(--red);padding-left:9px;font-size:12px}.grammar-compare-grid blockquote span,.grammar-compare-grid blockquote small{display:block}.grammar-compare-grid blockquote small{color:var(--ink-soft);margin-top:5px}@media(max-width:620px){.grammar-related{grid-template-columns:1fr}.grammar-command__actions{grid-template-columns:1fr}.grammar-review-ratings{grid-template-columns:1fr 1fr}.grammar-compare-tray{bottom:68px}.grammar-compare-tray>div{display:none}.grammar-compare-tray button:first-of-type{flex:1}.grammar-dialog__footer{flex-wrap:wrap}}
.grammar-explanation{display:grid;gap:10px;margin:22px 0}.grammar-explanation section{padding:14px 15px;border:1px solid var(--border);border-radius:11px;background:color-mix(in srgb,var(--cream) 55%,var(--white))}.grammar-explanation section>span,.grammar-example-label{display:block;margin-bottom:5px;color:var(--red);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.grammar-explanation section p{font-size:13px;line-height:1.75;color:var(--ink-mid)}.grammar-explanation-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grammar-explanation .grammar-warning{border-color:rgba(211,139,31,.26);background:rgba(255,246,226,.55)}.grammar-explanation .grammar-warning>span{color:#9a6416}.grammar-example-label{margin:18px 0 7px}@media(max-width:620px){.grammar-explanation-grid{grid-template-columns:1fr}.grammar-explanation section{padding:12px}}
.grammar-specific{border:1px solid color-mix(in srgb,var(--red) 24%,var(--border));border-radius:13px;overflow:hidden;background:var(--white)}.grammar-specific-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--red-pale)}.grammar-specific-title b{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--red)}.grammar-specific-title em{font-style:normal;font-size:12px;font-weight:800;color:var(--ink)}.grammar-specific dl{margin:0}.grammar-specific dl>div{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:12px 14px;border-top:1px solid var(--border)}.grammar-specific dt{font-size:11px;font-weight:900;color:var(--ink)}.grammar-specific dd{margin:0;font-size:12px;line-height:1.7;color:var(--ink-mid)}@media(max-width:620px){.grammar-specific-title{align-items:flex-start;flex-direction:column}.grammar-specific dl>div{grid-template-columns:1fr;gap:3px}}
.grammar-variants{margin:20px 0;border:1px solid var(--border);border-radius:12px;background:var(--cream);overflow:hidden}.grammar-variants>div{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;border-bottom:1px solid var(--border)}.grammar-variants>div strong{font-size:11px;text-transform:uppercase;letter-spacing:.06em}.grammar-variants>div span{font-size:10px;color:var(--ink-soft)}.grammar-variants article{display:grid;grid-template-columns:auto 1fr;gap:11px;padding:12px 13px;border-top:1px solid var(--border)}.grammar-variants article:first-of-type{border-top:0}.grammar-variants article b,.grammar-variants article small,.grammar-variants article em{display:block}.grammar-variants article b{font-size:12px;color:var(--red)}.grammar-variants article small,.grammar-variants article em{font-size:10px;color:var(--ink-soft);font-style:normal}.grammar-variants article p{margin:6px 0 2px;font-family:'Noto Serif JP',serif;font-size:14px}
.grammar-particle-examples{padding-left:22px;margin:10px 0}.grammar-particle-examples li{padding:10px 0;border-bottom:1px solid var(--border)}.grammar-particle-examples p[lang="ja"]{font-family:'Noto Serif JP',serif;font-size:17px}.grammar-particle-examples small{display:block;color:var(--ink-soft);font-size:12px;line-height:1.7}.grammar-particle-quiz{padding:15px;border:1px solid var(--border);border-radius:12px;background:var(--cream)}.grammar-particle-quiz [role="group"]{display:grid;gap:7px;margin:12px 0}.grammar-particle-quiz button{text-align:left;font-weight:600}.grammar-particle-quiz button[aria-pressed="true"]{border-color:var(--red);background:var(--red-pale)}.grammar-particle-feedback[data-result="correct"]{color:var(--ink);font-weight:700}.grammar-particle-quiz details{font-size:12px;line-height:1.8}.grammar-particle-quiz summary{cursor:pointer;font-weight:700}.grammar-particle-quiz ul{padding-left:20px}