.write-layout{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);gap:18px}.practice-side,.practice-board,.grammar-card,.grammar-table-wrap,.grammar-quiz{border:1px solid var(--line);background:linear-gradient(145deg,rgba(21,27,41,.96),rgba(13,18,29,.96));border-radius:22px}.practice-side{padding:18px}.practice-side h3,.grammar-card h3,.grammar-quiz h3{margin:0 0 8px}.practice-side p,.grammar-card p,.grammar-quiz p{color:var(--muted);font-size:.84rem}.practice-script{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:15px 0}.practice-letter-list{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;max-height:310px;overflow:auto;padding-right:4px}.practice-letter{border:1px solid var(--line);border-radius:12px;background:#0b101a;color:var(--text);font-family:"Noto Sans JP";font-size:1.25rem;aspect-ratio:1;cursor:pointer}.practice-letter.active{border-color:#8b5cf6;background:linear-gradient(135deg,#6d28d9,#4338ca);box-shadow:0 7px 22px rgba(109,40,217,.3)}.practice-board{padding:18px;display:grid;grid-template-columns:minmax(220px,420px) minmax(190px,1fr);gap:18px;align-items:center}.paper-wrap{width:100%;max-width:420px;margin:auto}.paper{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;background:#f7f2e9;box-shadow:inset 0 0 0 1px #d6cbbc,0 16px 44px rgba(0,0,0,.28);touch-action:none}.paper:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(72,105,144,.28) 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),rgba(72,105,144,.28) 50%,transparent calc(50% + .5px)),linear-gradient(45deg,transparent calc(50% - .5px),rgba(196,95,95,.16) 50%,transparent calc(50% + .5px)),linear-gradient(-45deg,transparent calc(50% - .5px),rgba(196,95,95,.16) 50%,transparent calc(50% + .5px));pointer-events:none}.trace-kana{position:absolute;inset:0;display:grid;place-items:center;color:rgba(75,85,99,.16);font:700 clamp(9rem,25vw,15rem)/1 "Noto Sans JP";pointer-events:none;user-select:none}.paper canvas{position:absolute;inset:0;width:100%;height:100%}.practice-actions{display:flex;gap:8px;margin-top:10px}.practice-actions button,.grammar-answer{border:1px solid var(--line);border-radius:12px;background:#111827;color:var(--text);padding:10px 13px;font-weight:800;cursor:pointer}.practice-actions .primary{border:0;background:linear-gradient(135deg,#7c3aed,#4f46e5)}.write-tips{display:grid;gap:10px}.tip-step{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}.tip-step b{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:rgba(139,92,246,.16);color:#c4b5fd}.tip-step span{font-size:.82rem;color:var(--muted)}.tip-step strong{display:block;color:var(--text);margin-bottom:2px}.practice-current{font-family:"Noto Sans JP";font-size:3.4rem;margin:0;color:white}.grammar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.grammar-card{padding:20px;position:relative;overflow:hidden}.grammar-card:before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:linear-gradient(var(--violet),var(--cyan))}.grammar-tag{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(34,211,238,.09);color:#67e8f9;font-size:.67rem;font-weight:800;letter-spacing:.06em;margin-bottom:10px}.jp-example{margin-top:12px;padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:#0a0e17;font-family:"Noto Sans JP";font-size:1rem}.jp-example small{display:block;margin-top:5px;color:var(--muted);font-family:Manrope,sans-serif}.grammar-table-wrap{margin:16px 0;padding:8px;overflow:auto}.grammar-table{width:100%;min-width:650px;border-collapse:collapse}.grammar-table th,.grammar-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;font-size:.8rem}.grammar-table th{color:#c4b5fd}.grammar-table td:first-child{font-family:"Noto Sans JP";font-size:1rem;color:white}.sentence-formula{padding:16px;border:1px dashed #58448a;border-radius:16px;background:rgba(124,58,237,.08);text-align:center;font-weight:800;line-height:1.8}.sentence-formula em{color:#67e8f9;font-style:normal}.particle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}.particle{padding:12px;border-radius:14px;background:#0a0e17;border:1px solid var(--line)}.particle b{font:700 1.35rem "Noto Sans JP";color:#c4b5fd}.particle span{display:block;color:var(--muted);font-size:.72rem;margin-top:3px}.grammar-quiz{margin-top:16px;padding:20px}.grammar-q{font-size:1.05rem;font-weight:800;margin:12px 0}.grammar-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.grammar-answer.correct{border-color:var(--green);background:rgba(52,211,153,.12)}.grammar-answer.wrong{border-color:var(--red);background:rgba(251,113,133,.12)}.grammar-feedback{min-height:24px;margin-top:10px;color:#c4b5fd;font-size:.82rem;font-weight:700}.nav-btn{min-width:0}
@media(max-width:900px){.write-layout{grid-template-columns:1fr}.practice-board{grid-template-columns:1fr}.grammar-grid{grid-template-columns:1fr}.particle-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.nav-btn{font-size:.6rem;padding:5px 2px}.nav-btn svg{width:18px;height:18px}.write-layout{gap:10px}.practice-side,.practice-board,.grammar-card,.grammar-quiz{padding:14px;border-radius:18px}.practice-letter-list{display:flex;overflow-x:auto;max-height:none;padding-bottom:5px}.practice-letter{min-width:44px;width:44px;height:44px;aspect-ratio:auto}.practice-board{gap:14px}.paper-wrap{max-width:330px}.trace-kana{font-size:10rem}.write-tips{gap:8px}.grammar-card{padding:16px}.grammar-grid{gap:10px}.particle-grid{grid-template-columns:repeat(2,1fr)}.grammar-options{grid-template-columns:1fr}.section-head h1 br.mobile-hide{display:none}}