.letters-layout{display:grid;grid-template-columns:minmax(220px,.85fr) minmax(340px,1.35fr);gap:24px;align-items:start}.letters-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:16px 0}.letter-tile{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 4px;cursor:pointer;color:var(--ink);transition:transform .15s,background .15s;min-width:0}.letter-tile:hover,.letter-tile.selected{background:var(--sage);border-color:var(--green);transform:translateY(-2px)}.letter-tile b{display:block;font:28px 'Yu Mincho',serif}.letter-tile small{display:block;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:7px}.letters-pager{gap:8px;justify-content:space-between}.letters-pager .btn{font-size:11px;padding:10px}.letter-detail{position:sticky;top:20px;min-width:0}.letter-large{font:110px 'Yu Mincho',serif;color:var(--green);line-height:1.3}.kanji-title{display:flex;align-items:center;gap:25px;margin:12px 0}.kanji-title h2{font-size:24px;overflow-wrap:anywhere}.reading-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.reading-pair dt{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--muted)}.reading-pair dd{margin:8px 0 0;font-size:18px;overflow-wrap:anywhere}.kanji-visuals{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}.stroke-box{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}.stroke-diagram{width:100%;max-width:160px;fill:none}.stroke-guide{stroke:var(--line);stroke-width:.6;stroke-dasharray:3 3}.kanji-stroke{stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.stroke-box .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:8px}.stroke-box .btn{padding:6px 8px;font-size:10px}.memory-picture{margin:0;background:var(--sage);border-radius:14px;padding:14px;color:var(--green);font-size:12px;line-height:1.6}.memory-picture svg{display:block;max-width:115px;margin:auto;fill:none;stroke:currentColor;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}.memory-picture figcaption b{display:block;margin-top:10px;font-size:10px;text-transform:uppercase;letter-spacing:1px}.kanji-examples>div{border-bottom:1px solid var(--line);padding:12px 0}.kanji-examples b{font-size:24px;margin-right:15px}.kanji-examples span{font-size:13px}.kanji-examples p{margin:6px 0;font-size:13px}.letters-levels[hidden]{display:none}
.sidebar nav .nav-icon{display:flex;align-items:center;justify-content:center;flex:0 0 22px}.nav-icon svg{width:21px;height:21px;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;fill:none}.sidebar-bottom .nav-extra{display:flex;flex-direction:column;gap:10px;padding:18px 0;border-top:1px solid var(--line);margin-top:18px}.sidebar-bottom .nav-extra a{color:var(--muted);font-size:12px}.streak-flame{display:inline-flex;vertical-align:middle;width:40px;height:47px;margin-left:7px;filter:drop-shadow(0 4px 7px #e6a37944)}.streak-flame svg{width:100%;height:100%}.home-stats .stat:first-child strong{display:flex;align-items:center;gap:4px}.sidebar{overflow-y:auto}.sidebar-bottom{margin-top:auto}
@media(max-width:1100px){.letters-layout{grid-template-columns:1fr}.letter-detail{position:static}.letters-grid{grid-template-columns:repeat(10,minmax(0,1fr))}.sidebar nav a{gap:9px}}
@media(max-width:800px){.sidebar nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.sidebar nav a{justify-content:flex-start;padding:9px 10px;font-size:12px}.sidebar-bottom{display:block;margin-top:12px}.sidebar-bottom>.eyebrow,.sidebar-bottom>p,.sidebar-bottom>.profile{display:none}.sidebar-bottom>.small{font-size:10px}.sidebar-bottom .nav-extra{flex-direction:row;margin-top:8px;padding:8px 0 0;gap:20px}.letters-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:560px){.letters-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.kanji-title{gap:16px}.kanji-title h2{font-size:22px}.letter-large{font-size:88px}.kanji-visuals{gap:9px}.memory-picture{padding:10px}.reading-pair dd{font-size:16px}.streak-flame{width:28px;height:35px}.letters-pager .btn{font-size:11px}.letters-types{flex-wrap:wrap}}