/* Navigation-only editorial hub; shared token values and existing Japanese scenery. */
*{box-sizing:border-box}
html{min-width:320px;color-scheme:light;background:#d9e1dc}
html[data-mode="dark"]{color-scheme:dark;background:#071524}
body{margin:0;min-height:100dvh;color:var(--tl-ink);font:400 16px/1.6 var(--tl-font-ui);background:linear-gradient(180deg,rgba(239,241,234,.18),rgba(225,231,226,.48)),url('/anh-art/nen-web-sang-1672.webp') center/cover fixed}
html[data-mode="dark"] body{background:linear-gradient(180deg,rgba(4,17,29,.36),rgba(5,20,34,.68)),url('/anh-art/nen-web-toi-1672.webp') center/cover fixed}
a{color:inherit}button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--tl-focus);outline-offset:4px}
.hub-skip{position:absolute;left:18px;top:8px;transform:translateY(-200%);z-index:100001;padding:12px 18px;background:var(--tl-glass-strong);border-radius:var(--tl-radius-control)}
.hub-skip:focus{transform:none}
.hub-paper{width:min(1040px,calc(100% - 52px));margin:26px auto 52px;border:1px solid var(--tl-glass-border);border-radius:var(--tl-radius-surface);background:var(--tl-glass);box-shadow:var(--tl-shadow);backdrop-filter:blur(var(--tl-blur));-webkit-backdrop-filter:blur(var(--tl-blur));overflow:clip}
.hub-header{display:flex;align-items:center;gap:18px;min-height:76px;padding:12px 72px 12px 26px;border-bottom:1px solid var(--tl-hair)}
.hub-brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;font:600 21px/1.3 var(--tl-font-jp)}
.hub-brand img{width:38px;height:38px;object-fit:contain;flex:none}
.hub-main{padding:26px 52px 38px}
.hub-intro{margin-bottom:26px}
.hub-intro h1{margin:0;color:var(--tl-ink);font:600 clamp(30px,4vw,46px)/1.2 var(--tl-font-jp);letter-spacing:-.02em}
.hub-intro h1::after{content:"";display:block;width:38px;height:3px;margin-top:12px;background:var(--tl-seal)}
.hub-intro p{margin:12px 0 0;color:var(--tl-ink-soft);font-size:18px}
.hub-switcher{display:none;margin:0 0 26px}
html[data-app="1"] .hub-switcher,.tl-inapp .hub-switcher,#hub-content[data-hub-context="app"] .hub-switcher{display:block}
.hub-switcher .tl-menu-tree{display:flex;flex-wrap:wrap;gap:8px}
.hub-switcher .tl-menu-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border-bottom:1px solid var(--tl-hair);text-decoration:none;font-size:16px}
.hub-switcher a[aria-current="page"]{color:var(--tl-seal);font-weight:700;border-bottom-color:var(--tl-seal)}
.hub-catalog .tl-menu-tree{display:block}
.hub-catalog .tl-menu-branch{margin:0;border:0;border-bottom:1px solid var(--tl-hair);border-radius:0;background:none}
.hub-catalog .tl-menu-branch>summary{display:flex;align-items:center;gap:18px;min-height:72px;padding:12px 0;font:600 22px/1.4 var(--tl-font-jp);cursor:pointer;list-style:none}
.hub-catalog .tl-menu-branch>summary::-webkit-details-marker{display:none}
.hub-catalog .tl-menu-branch>summary .tl-menu-chevron{margin-left:auto}
.hub-catalog .tl-menu-link{display:flex;align-items:center;gap:18px;min-height:72px;padding:12px 0;border-bottom:1px solid var(--tl-hair);text-decoration:none;font:600 22px/1.4 var(--tl-font-jp)}
.hub-catalog .tl-menu-children{margin:0 0 18px 72px;padding:0;border:0;background:none}
.hub-catalog .tl-menu-children .tl-menu-link,.hub-catalog .tl-menu-children .tl-menu-branch>summary{min-height:48px;padding:8px 0;font:500 16px/1.5 var(--tl-font-ui)}
.hub-catalog .tl-menu-children .tl-menu-children{margin-left:18px}
.hub-glyph{display:inline-grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%;color:var(--tl-seal);background:var(--tl-wash);font:600 34px/1 var(--tl-font-shodo)}
.hub-link-arrow{margin-left:auto;color:var(--tl-ink-soft);font:400 26px/1 var(--tl-font-jp)}
.hub-catalog .tl-menu-overview{color:var(--tl-seal)}
.hub-utilities{margin-top:38px}
.hub-utilities h2{margin:0 0 12px;font:600 24px/1.3 var(--tl-font-jp)}
.hub-utilities h2::after{content:"";display:block;width:26px;height:2px;margin-top:8px;background:var(--tl-seal)}
.hub-utilities .tl-menu-tree>.tl-menu-link,.hub-utilities .tl-menu-tree>.tl-menu-branch>summary{min-height:52px;font:500 17px/1.5 var(--tl-font-ui)}
.hub-app-note,.hub-empty{margin:18px 0 0;color:var(--tl-ink-soft);font-size:16px}
.hub-footer{padding:18px 26px;border-top:1px solid var(--tl-hair);font-size:14px;color:var(--tl-ink-soft)}
.hub-pending{padding:0;color:var(--tl-ink-soft);font-size:16px}
.hub-error{border-left:3px solid var(--tl-seal);padding-left:18px}
.hub-error a{display:inline-flex;align-items:center;min-height:44px;margin-top:8px}
@media(max-width:768px){.hub-paper{width:calc(100% - 26px);margin:12px auto 26px}.hub-main{padding:26px}.hub-header{padding:12px 72px 12px 18px}.hub-catalog .tl-menu-branch>summary,.hub-catalog .tl-menu-link{font-size:20px;min-height:66px}.hub-catalog .tl-menu-children{margin-left:18px}.hub-intro p{font-size:16px}}
@media(max-width:390px){.hub-paper{width:calc(100% - 18px);border-radius:22px}.hub-main{padding:18px}.hub-header{padding-left:12px;gap:12px}.hub-brand{font-size:18px;gap:8px}.hub-brand img{width:32px;height:32px}.hub-glyph{width:44px;height:44px;font-size:28px}.hub-catalog .tl-menu-branch>summary,.hub-catalog .tl-menu-link{gap:12px;font-size:18px}.hub-intro h1{font-size:30px}.hub-catalog .tl-menu-children .tl-menu-link,.hub-catalog .tl-menu-children .tl-menu-branch>summary{font-size:16px}.hub-footer{padding:18px}}
@media(prefers-reduced-transparency:reduce){.hub-paper{background:var(--tl-glass-strong);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* WV05: keep the hub within its actual viewport, including a vertical scrollbar. */
html[data-trilu-hub]{min-width:0}

/* Direct learner destinations: open editorial rows, same shared material and tokens. */
.hub-jlpt-study{margin:0 0 26px}
.hub-jlpt-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px}
.hub-jlpt-heading h2{margin:0;font:600 24px/1.4 var(--tl-font-jp)}
.hub-jlpt-heading>a,.hub-level-study a,.hub-learner-entry a{display:flex;align-items:center;min-width:44px;min-height:44px;text-decoration:none;font-size:16px}
.hub-jlpt-heading>a{color:var(--tl-ink-soft);padding:8px 0}
.hub-level-study{list-style:none;padding:0;margin:8px 0 0}
.hub-level-study li{display:grid;grid-template-columns:minmax(44px,.65fr) repeat(2,minmax(0,1fr));align-items:stretch;gap:8px 18px;border-top:1px solid var(--tl-hair);padding:4px 0}
.hub-level-study .hub-level-title{font:600 22px/1.4 var(--tl-font-jp)}
.hub-level-study a:not(.hub-level-title){color:var(--tl-seal);font-weight:500}
.hub-level-study a:hover,.hub-jlpt-heading a:hover,.hub-learner-entry a:hover{text-decoration:underline;text-underline-offset:4px}
.hub-jlpt-secondary .tl-menu-link{min-height:44px;font:400 16px/1.5 var(--tl-font-ui);padding:8px 0;color:var(--tl-ink-soft)}
.hub-learner-entry{margin:0 0 26px;padding:0 0 18px;border-bottom:1px solid var(--tl-hair)}
.hub-learner-entry h2{margin:0 0 8px;font:600 24px/1.4 var(--tl-font-jp)}
.hub-learner-entry a{color:var(--tl-seal);font-weight:600;padding:8px 0;gap:12px}
.hub-learner-entry p{margin:0 0 8px;color:var(--tl-ink-soft);font-size:16px}
@media(max-width:390px){.hub-level-study li{grid-template-columns:44px repeat(2,minmax(0,1fr));gap:8px}.hub-level-study a{font-size:16px}.hub-jlpt-heading h2,.hub-learner-entry h2{font-size:22px}}