.stroke-guide-card{margin:0 0 15px;padding:13px;border:1px solid #514173;border-radius:18px;background:linear-gradient(145deg,rgba(124,58,237,.12),rgba(8,11,18,.9))}.stroke-guide-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.stroke-guide-head b{font-size:.82rem}.stroke-guide-head span{color:#c4b5fd;font-size:.72rem}.stroke-diagram{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:240px;margin:auto;border-radius:15px;background:#f8f5ed;overflow:hidden}.stroke-diagram:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.7%,rgba(92,120,151,.18) 50%,transparent 50.3%),linear-gradient(transparent 49.7%,rgba(92,120,151,.18) 50%,transparent 50.3%);pointer-events:none}.stroke-diagram svg{position:relative;width:92%;height:92%}.stroke-diagram [data-strokesvg="shadows"]{fill:#d8dde7!important}.stroke-diagram [data-strokesvg="strokes"]{stroke:#5b21b6!important}.stroke-diagram.animate [data-strokesvg="strokes"]>*{--time:.62s;--gap:.72s;--delay:.25s;stroke-dasharray:3333;stroke-dashoffset:3333;animation:vilo-stroke var(--time) linear forwards calc(var(--i)*var(--gap) + var(--delay))}.stroke-label circle{fill:#0891b2;stroke:white;stroke-width:8}.stroke-label text{fill:white;font:700 58px Manrope,sans-serif;text-anchor:middle;dominant-baseline:central}.stroke-arrow{fill:#f97316}.stroke-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}.stroke-actions button{border:1px solid #55427a;border-radius:11px;background:#171124;color:#e9ddff;padding:8px 11px;font-weight:800;font-size:.72rem;cursor:pointer}.stroke-note{color:var(--muted);font-size:.7rem}.stroke-error{padding:24px;color:#6b7280;text-align:center;font-size:.78rem}@keyframes vilo-stroke{to{stroke-dashoffset:0}}
.beginner-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.beginner-lesson{padding:18px;border:1px solid var(--line);border-radius:19px;background:rgba(14,19,32,.85)}.beginner-lesson h3{margin:0 0 7px;font-size:.98rem}.beginner-lesson p{margin:0;color:var(--muted);font-size:.82rem}.easy-rule{display:inline-flex;margin-bottom:9px;padding:5px 9px;border-radius:999px;background:rgba(52,211,153,.1);color:#6ee7b7;font-size:.67rem;font-weight:800}.word-gloss{display:grid;gap:4px;margin-top:11px;padding:11px;border-radius:13px;background:#090d15}.word-gloss .jp{font-family:"Noto Sans JP";font-size:.9rem;color:white}.word-gloss .mn{color:#9aa5b8;font-size:.72rem}.rule-warning{margin-top:9px;padding-left:9px;border-left:2px solid #f59e0b;color:#d1d5db;font-size:.72rem}.grammar-card p{line-height:1.75}.grammar-card b{color:#e9ddff}.grammar-help{margin:0 0 16px;padding:15px 17px;border:1px solid #355166;border-radius:17px;background:linear-gradient(135deg,rgba(34,211,238,.09),rgba(52,211,153,.05));color:#cbd5e1;font-size:.82rem}.grammar-help strong{color:#67e8f9}
@media(max-width:900px){.beginner-map{grid-template-columns:1fr}}
@media(max-width:650px){.stroke-guide-card{padding:11px}.stroke-diagram{max-width:210px}.beginner-map{gap:9px}.beginner-lesson{padding:15px}.grammar-help{padding:13px}}
.stroke-arrow-path{fill:none;stroke:#f97316;stroke-width:12;stroke-linecap:round;stroke-dasharray:18 30;opacity:.65;pointer-events:none}