*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth;--sodo-chrome:#102635;--sodo-note:#183748;--sodo-ui:"Be Vietnam Pro",var(--tl-font-ui);--sodo-shodo:"Klee One","Klee",var(--tl-font-shodo)}
html[data-mode="dark"]{--sodo-chrome:#f7f1e7;--sodo-note:#e7edf0}
body{min-height:100dvh;margin:0;color:var(--tl-ink);font-family:var(--sodo-ui);background-color:#c9d9df;background-image:var(--tl-scene-veil),image-set(url('/anh-art/lesson-dawn-1672.avif') type('image/avif'),url('/anh-art/lesson-dawn-1672.webp') type('image/webp'));background-position:center;background-size:cover;background-attachment:fixed}
html[data-mode="dark"] body{background-color:#061628;background-image:var(--tl-scene-veil),image-set(url('/anh-art/lesson-night-1672.avif') type('image/avif'),url('/anh-art/lesson-night-1672.webp') type('image/webp'))}
.skip{position:fixed;left:12px;top:10px;z-index:90;min-height:44px;display:flex;align-items:center;transform:translateY(-160%);padding:10px 14px;border-radius:var(--tl-radius-control);background:var(--tl-paper);color:var(--tl-ink)}
.skip:focus{transform:none}
.site-header{position:static;padding:10px clamp(10px,3vw,24px) 0}
.header-inner{width:min(100%,980px);min-height:52px;margin:auto;display:flex;align-items:center;gap:12px}
.brand{min-height:44px;display:flex;align-items:center;gap:10px;color:var(--sodo-chrome);text-decoration:none;text-shadow:0 1px 16px rgba(255,255,255,.55)}
.brand .seal{display:grid;width:36px;height:36px;place-items:center;border:1px solid rgba(255,255,255,.44);border-radius:8px;background:var(--tl-seal);color:#fff;font:600 12px/1 var(--tl-font-jp);box-shadow:0 8px 20px rgba(34,30,24,.16)}
.brand b,.brand small{display:block}.brand b{font-size:15px;font-weight:600}.brand small{color:currentColor;font-size:11px;opacity:.72}
#settingsOpen{min-width:84px;min-height:44px;margin-left:auto;border:1px solid rgba(255,255,255,.56);border-radius:var(--tl-radius-control);background:color-mix(in srgb,var(--tl-glass) 56%,transparent);color:var(--sodo-chrome);font:600 13px/1 var(--sodo-ui);box-shadow:0 8px 26px rgba(25,45,56,.12);backdrop-filter:blur(12px);cursor:pointer}
html[data-mode="dark"] .brand{text-shadow:0 2px 16px rgba(0,0,0,.72)}
html[data-mode="dark"] #settingsOpen{border-color:rgba(255,255,255,.25)}
.page-shell{width:min(100%,980px);margin:auto;padding:6px clamp(8px,2vw,18px) 14px}
.sheet{overflow:hidden;border:1px solid rgba(255,255,255,.62);border-radius:var(--tl-radius-surface);background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 45%),rgba(250,252,249,.64);box-shadow:0 22px 70px rgba(27,47,66,.17),inset 0 1px rgba(255,255,255,.55);backdrop-filter:blur(18px) saturate(155%)}
html[data-mode="dark"] .sheet{border-color:rgba(186,224,255,.28);background:linear-gradient(135deg,rgba(130,205,255,.08),transparent 46%),rgba(5,22,42,.58);box-shadow:0 22px 80px rgba(0,5,15,.44),inset 0 1px rgba(186,224,255,.18)}
.intro{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(280px,42vh,350px);display:grid;place-items:center;padding:clamp(24px,5vw,54px);border:0;text-align:center}
.intro::before,.intro::after{content:"";position:absolute;z-index:-1;width:290px;height:290px;border-radius:50%;filter:blur(52px);opacity:.34;pointer-events:none}
.intro::before{left:9%;top:8%;background:rgba(232,137,119,.58)}
.intro::after{right:8%;bottom:2%;background:rgba(69,172,183,.46)}
html[data-mode="dark"] .intro::before,html[data-mode="dark"] .intro::after{opacity:.48}
.hero-constellations{position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:.5}.hero-constellations path{fill:none;stroke:url(#heroConstellationColor);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;filter:url(#heroConstellationGlow)}.hero-constellations circle{fill:#fff3d4;filter:url(#heroConstellationGlow)}.hero-cluster-lower{opacity:.72}html[data-mode="dark"] .hero-constellations{opacity:.68}
.intro h1{position:relative;z-index:2;display:grid;justify-items:center;gap:4px;margin:0;overflow:visible}
.intro h1 span{display:block;overflow:visible;padding:.06em .12em .12em;font:500 clamp(128px,20vw,210px)/1.02 var(--sodo-shodo);letter-spacing:-.06em;color:var(--tl-ink);background:linear-gradient(125deg,#172833 12%,#a53b2e 62%,#80582f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 12px 24px rgba(16,39,53,.14))}
html[data-mode="dark"] .intro h1 span{background:linear-gradient(125deg,#fff6e4 12%,#ff967f 60%,#e3c278);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 24px rgba(232,137,119,.22))}
.intro h1 i{color:var(--tl-seal);font:500 clamp(16px,2vw,21px)/1 var(--sodo-ui);letter-spacing:.05em}
.stations{position:relative;height:246px;border:0;background:transparent}
.station-guide{position:absolute;z-index:2;left:0;right:0;top:0;min-height:34px;display:grid;place-items:center;color:var(--tl-ink-soft);font:500 11px/1 var(--sodo-ui);letter-spacing:.12em;text-transform:uppercase}
.constellation{position:absolute;z-index:0;left:0;top:34px;width:100%;height:212px;overflow:visible;pointer-events:none}.constellation-halo,.constellation-path{fill:none;stroke:url(#sodoConstellationColor);stroke-linecap:round;stroke-linejoin:round}.constellation-halo{stroke-width:10;opacity:.12}.constellation-path{stroke-width:2;opacity:.86}.constellation-sparks{fill:#fff4d6;filter:drop-shadow(0 0 7px rgba(255,241,201,.9))}
.station{--level:#d7a85f;position:absolute;z-index:1;isolation:isolate;width:clamp(62px,9vw,96px);min-height:76px;display:grid;place-content:center;justify-items:center;gap:5px;transform:translate(-50%,-30%);border:0;border-radius:18px;color:var(--tl-ink);text-decoration:none}
.station:nth-of-type(1){left:10%;top:176px}.station:nth-of-type(2){--level:#df836d;left:30%;top:94px}.station:nth-of-type(3){--level:#5eb1aa;left:50%;top:170px}.station:nth-of-type(4){--level:#7a8fc9;left:70%;top:86px}.station:nth-of-type(5){--level:#b88ec8;left:90%;top:176px}
.station::before{content:"";position:absolute;z-index:-1;left:50%;top:27px;width:64px;height:64px;transform:translate(-50%,-50%);border-radius:50%;background:color-mix(in srgb,var(--level) 26%,transparent);filter:blur(15px);opacity:.86}
.station:hover,.station:focus-visible{background:color-mix(in srgb,var(--level) 10%,transparent);transform:translate(-50%,-30%) scale(1.04)}
.station-kanji{font:600 clamp(36px,4vw,48px)/1 var(--sodo-shodo);color:var(--level);text-shadow:0 0 18px color-mix(in srgb,var(--level) 62%,transparent)}
.station b{font:600 14px/1 var(--sodo-ui);letter-spacing:.06em}.station small{color:var(--tl-ink-soft);font:500 10px/1.2 var(--sodo-ui);white-space:nowrap}
.settings-dialog{width:min(420px,calc(100vw - 24px));padding:0;border:1px solid var(--tl-glass-border);border-radius:var(--tl-radius-panel);background:var(--tl-glass-strong);color:var(--tl-ink);box-shadow:var(--tl-shadow);backdrop-filter:blur(var(--tl-blur))}
.settings-dialog::backdrop{background:rgba(9,22,32,.45);backdrop-filter:blur(4px)}
.settings-dialog form{display:grid;gap:16px;padding:18px}.settings-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-dialog header span{color:var(--tl-sepia);font:700 10px/1 var(--tl-font-mono);letter-spacing:.15em}.settings-dialog h2{margin:3px 0 0;font:600 25px/1.1 var(--tl-font-jp)}
.settings-dialog header button{width:44px;height:44px;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control);background:transparent;color:var(--tl-ink);font-size:22px}.settings-dialog fieldset{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:14px;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-panel)}.settings-dialog legend{padding:0 6px;color:var(--tl-sepia);font:700 10px var(--tl-font-mono);letter-spacing:.12em;text-transform:uppercase}.settings-dialog fieldset button,.settings-dialog>a{min-height:48px;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control);background:var(--tl-glass);color:var(--tl-ink);font:700 13px var(--tl-font-ui)}.settings-dialog>a{display:flex;align-items:center;justify-content:center;text-decoration:none}
.settings-state{margin:0;color:var(--tl-ink-soft);font-size:11px;line-height:1.5;text-align:center}
:focus-visible{outline:3px solid var(--tl-focus);outline-offset:3px}
@media(max-width:620px){body{background-attachment:scroll;background-position:44% center}.site-header{padding-top:8px}.page-shell{padding-top:4px}.intro{min-height:clamp(270px,39vh,320px);padding:18px 12px}.intro::before,.intro::after{width:210px;height:210px}.hero-constellations{opacity:.42}.hero-cluster-lower{opacity:.38}.intro h1 span{font-size:clamp(116px,39vw,154px)}.intro h1 i{font-size:15px}.station-guide{font-size:10px}.station{width:clamp(58px,16vw,70px);min-height:72px;gap:4px}.station::before{top:24px;width:54px;height:54px}.station-kanji{font-size:31px}.station b{font-size:11px}.station small{font-size:8px}}
@media(max-width:340px){.brand small{display:none}.intro{min-height:260px}.intro h1 span{font-size:110px}.station{width:58px}.station-kanji{font-size:28px}.station small{font-size:7px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(prefers-reduced-transparency:reduce){.sheet,.settings-dialog{background:var(--tl-paper);backdrop-filter:none}.settings-dialog::backdrop{backdrop-filter:none}}