/* The main study content and related cards share the available desktop width. */
.kanji-entry-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:none;margin-inline:auto;align-items:start}
.kanji-entry-grid .kanji-main,.kanji-entry-grid .kanji-sidebar{min-width:0}
.kanji-main>.panel,.kanji-main>.related,.kanji-sidebar>.panel{margin:0 0 24px}
.kanji-sidebar>.game-card{max-width:100%;margin-top:24px;background:linear-gradient(110deg,#17251cf2,#17251cae),url('/assets/home-game-20261004.webp') 75% center/cover}
.kanji-sidebar>.similar-kanji-panel .similar-kanji-list{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
.kanji-sidebar>.kanji-radical p{margin:10px 0 0}
.kanji-sidebar .linked-variants>p{margin-bottom:12px}
.kanji-sidebar .linked-variants li{padding-block:10px;gap:10px}
.kanji-extra>summary{font-size:1.15rem;font-weight:650;cursor:pointer}
.kanji-extra[open]>summary{margin-bottom:16px}
.kanji-extra .panel,.kanji-extra .other-languages{border:0;border-radius:0;box-shadow:none;background:none;padding:14px 0;margin:0;max-width:none;width:100%;border-top:1px solid #ffffff18}
.kanji-extra details>summary{cursor:pointer;overflow-wrap:anywhere}
.kanji-extra .research-panel>summary,.kanji-extra .reference-statistics>summary{font-size:1rem;line-height:1.5;padding:3px 0}
.kanji-extra .other-languages>summary{justify-content:flex-start;gap:12px;padding:3px 0;font-size:1rem}
.kanji-extra .other-languages-action{display:none}
.kanji-extra .other-languages>summary::before{content:'▸';color:var(--gold)}
.kanji-extra .other-languages[open]>summary::before{content:'▾'}
.kanji-extra .other-languages-body{padding-top:16px}
.kanji-extra .reading-frequency{border-top:0}
.kanji-extra .reading-frequency h2{font-size:1rem}
.kanji-extra summary:focus-visible,.composition-panel summary:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.kanji-readings .more-readings{margin-top:18px}
.kanji-readings .research-reading h3{font-size:.95rem}
.composition-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px}
.composition-heading h2{margin:0}
.composition-reset{background:none;color:var(--gold);border:1px solid #b5c3a348;border-radius:6px;padding:7px 11px;font:inherit;font-size:.8rem;cursor:pointer}
.composition-tree{display:flex;flex-direction:column;align-items:center;padding-top:22px;max-width:700px;margin:auto}
.composition-whole{width:164px;height:164px;padding:14px;border-radius:50%;background:#c8d3b409;overflow:visible}
.component-color-0{--component-color:#8ecebb}.component-color-1{--component-color:#dfb2e8}.component-color-2{--component-color:#e7c988}.component-color-3{--component-color:#92c6ed}.component-color-4{--component-color:#edae9b}.component-color-5{--component-color:#c1d692}
.component-ink,.component-node svg{fill:none;stroke:var(--component-color);stroke-width:3.25;stroke-linecap:round;stroke-linejoin:round}
.component-ink{cursor:pointer;pointer-events:stroke}
.component-outline{fill:none;stroke:#f4f5dc;stroke-width:4.25;stroke-linecap:round;stroke-linejoin:round;opacity:0;pointer-events:none}
.has-selection .component-shape:not(.is-selected){opacity:.2}
.component-shape.is-selected .component-outline{opacity:.85}
.composition-branches{display:flex;justify-content:center;align-items:stretch;max-width:100%;width:100%;padding-top:27px;position:relative}
.composition-branches::before{content:'';position:absolute;top:0;left:50%;height:28px;border-left:1px solid #93a48a66}
.composition-branch{position:relative;display:flex;justify-content:center;padding:23px 12px 0;flex:1;max-width:180px;min-width:0}
.composition-branch::before{content:'';position:absolute;top:0;left:0;right:0;border-top:1px solid #93a48a66}
.composition-branch:first-child::before{left:50%}.composition-branch:last-child::before{right:50%}
.composition-branch::after{content:'';position:absolute;top:0;left:50%;height:23px;border-left:1px solid #93a48a66}
.component-node{position:relative;display:block;width:94px;max-width:100%;aspect-ratio:1;padding:9px;border:2px solid transparent;border-radius:50%;background:#c8d3b409;cursor:pointer;color:var(--component-color)}
.component-node svg{display:block;width:100%;height:100%;pointer-events:none}
.component-node path{vector-effect:non-scaling-stroke;stroke-width:2.5}
.component-node:hover{background:#c8d3b414;border-color:#93a48a66}
.component-node[aria-pressed=true]{background:#c8d3b414;border-color:var(--component-color);box-shadow:0 0 0 3px #f0e7c629}
.component-node:focus-visible,.composition-reset:focus-visible{outline:3px solid #f0e7c6;outline-offset:4px}
.component-number{position:absolute;right:-3px;bottom:0;display:grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:#29342d;color:#f0e7c6;font-size:11px;border:1px solid #93a48a66}
.composition-hint{text-align:center;color:var(--muted,#bac5b7);font-size:.85rem;margin:18px 0}
.component-detail{border:1px solid #8ecebb55;border-radius:8px;background:#8ecebb08;padding:18px;margin:16px 0}
.component-detail h3{margin:0 0 8px;font-size:1.1rem}.component-detail p{margin:0 0 12px}
.component-detail a{font-size:.9rem}
.composition-about{border-top:1px solid #ffffff18;padding-top:14px;margin-top:18px}
.composition-about>summary{font-size:.9rem;color:var(--gold);cursor:pointer}
.composition-about dt{font-weight:600;margin-top:18px}.composition-about dd{margin:6px 0 0;color:#c2cbbd}
.composition-about li{overflow-wrap:anywhere}
[data-component-detail][hidden],[data-component-reset][hidden]{display:none!important}
.composition-trail{font-size:.85rem;color:var(--muted,#bac5b7);padding-top:16px;overflow-wrap:anywhere;line-height:1.8}
.composition-trail[hidden]{display:none}
.composition-trail button{border:0;padding:4px;background:none;color:var(--gold);font:inherit;text-decoration:underline;cursor:pointer}
.component-actions{display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap}
.component-actions button{background:#c8d3b410;border:1px solid #93a48a66;border-radius:6px;color:var(--gold);padding:9px 12px;font:inherit;font-size:.9rem;cursor:pointer}
.component-actions button:focus-visible,.composition-trail button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.component-clue{font-size:.82rem;color:#a5d9ca}.component-clue span{border-bottom:1px dotted #a5d9ca55}
.composition-branches{overflow-x:auto;justify-content:safe center;padding-bottom:6px}
.composition-branch{min-width:54px}.component-detail h3{overflow-wrap:anywhere}
@media(max-width:520px){.kanji-main>.panel,.kanji-sidebar>.panel{padding:22px 18px}.composition-whole{width:142px;height:142px}.composition-branch{padding-inline:2px}.component-node{width:82px;min-width:44px;padding:5px}.composition-heading{align-items:flex-start;flex-wrap:wrap}.kanji-extra>summary{font-size:1.05rem}.kanji-sidebar>.similar-kanji-panel .similar-kanji-list{grid-template-columns:repeat(auto-fit,minmax(76px,1fr))}}

/* Color identifies the current stroke without increasing its weight. */
.stroke-ink .is-current,.stroke-highlight{stroke-width:3}

/* Pending strokes are continuous; the writing-grid guides stay separate. */
.stroke-outline{stroke-dasharray:none}
@media(min-width:1000px){.kanji-entry-grid{grid-template-columns:minmax(0,1fr) minmax(290px,340px);gap:28px}.kanji-sidebar>.panel{padding:24px}.kanji-sidebar>.game-card{padding:28px 24px}.kanji-sidebar .linked-variants li{flex-wrap:wrap}.kanji-sidebar .linked-variants .reading{font-size:16px}}

.stroke-legend .stroke-key-pending{border-top-style:solid}