*{box-sizing:border-box}
html{background:color-mix(in srgb,var(--tl-paper-soft) 88%,var(--tl-glass));scroll-behavior:smooth}
body.tl-hantu-roadmap{min-height:100dvh;margin:0;background:radial-gradient(circle at 14% 0,color-mix(in srgb,var(--tl-glass-strong) 78%,transparent),transparent 36%),linear-gradient(160deg,color-mix(in srgb,var(--tl-paper-soft) 92%,transparent),color-mix(in srgb,var(--tl-glass) 92%,transparent));color:var(--tl-ink);font-family:var(--tl-font-ui);font-size:var(--tl-text-body);line-height:1.55}
.htr-shell{container-type:inline-size;width:min(calc(100% - var(--tl-space-5)),960px);margin:0 auto;padding:var(--tl-space-4) 0 var(--tl-space-8)}
.htr-top{position:static;display:flex;align-items:center;gap:var(--tl-space-3);min-height:var(--tl-control-min);margin-bottom:var(--tl-space-4)}
.htr-back,.htr-settings{display:grid;flex:0 0 var(--tl-control-min);width:var(--tl-control-min);height:var(--tl-control-min);place-items:center;border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control);background:var(--tl-glass);color:var(--tl-ink);font:600 21px/1 var(--tl-font-ui);text-decoration:none;cursor:pointer;backdrop-filter:blur(var(--tl-blur))}
.htr-back:focus-visible,.htr-settings:focus-visible,.htr-next>a:focus-visible,.htr-card:focus-visible,.htr-settings-dialog button:focus-visible,.htr-group:focus-visible,.htr-group-return:focus-visible{outline:3px solid var(--tl-focus);outline-offset:3px}
.htr-brand{display:flex;flex:1;align-items:center;gap:var(--tl-space-3);min-width:0;min-height:var(--tl-control-min);color:var(--tl-ink);text-decoration:none}
.htr-brand span{display:grid;width:36px;height:36px;place-items:center;background:var(--tl-seal);color:color-mix(in srgb,var(--tl-paper) 94%,white);font:500 13px/1 var(--tl-font-jp)}
.htr-brand b{overflow:hidden;font:700 var(--tl-text-meta)/1 var(--tl-font-mono);letter-spacing:.16em;text-overflow:ellipsis;white-space:nowrap}
.htr-paper{overflow:hidden;border:1px solid var(--tl-glass-border);border-radius:var(--tl-radius-surface);background:var(--tl-paper);box-shadow:var(--tl-shadow);backdrop-filter:blur(var(--tl-blur))}
.htr-hero{display:grid;grid-template-columns:112px minmax(0,1fr) 190px;gap:var(--tl-space-5);align-items:center;padding:var(--tl-space-6)}
.htr-seal{display:grid;width:104px;height:104px;place-items:center;background:var(--tl-wash);border-left:4px solid var(--tl-seal);color:var(--tl-ink);font:600 58px/1 var(--tl-font-shodo)}
.htr-eyebrow{margin:0;color:var(--tl-sepia);font:700 var(--tl-text-meta)/1.4 var(--tl-font-mono);letter-spacing:.14em;text-transform:uppercase}
.htr-hero h1{margin:var(--tl-space-2) 0 0;font:600 var(--tl-text-title)/.98 var(--tl-font-shodo);letter-spacing:-.025em}
.htr-lead{max-width:560px;margin:var(--tl-space-3) 0 0;color:var(--tl-ink-soft);font-size:var(--tl-text-body)}
.htr-progress{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-left:var(--tl-space-5);border-left:1px solid var(--tl-hair)}
.htr-progress strong{color:var(--tl-success);font:600 38px/1 var(--tl-font-shodo)}
.htr-progress span{margin-top:var(--tl-space-2);color:var(--tl-ink-soft);font-size:13px}
.htr-progress>i{display:block;height:4px;margin-top:var(--tl-space-3);overflow:hidden;background:var(--tl-hair)}
.htr-progress>i>b{display:block;width:0;height:100%;background:var(--tl-success);transition:width .3s ease}
.htr-next{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:var(--tl-space-4);align-items:center;margin:0 var(--tl-space-6);padding:var(--tl-space-5) 0;border-top:1px solid var(--tl-hair);border-bottom:1px solid var(--tl-hair)}
.htr-next-mark{display:grid;width:68px;height:68px;place-items:center;background:var(--tl-wash);color:var(--tl-ink);font:600 38px/1 var(--tl-font-shodo)}
.htr-next-copy small{color:var(--tl-seal);font:700 var(--tl-text-meta)/1 var(--tl-font-mono);letter-spacing:.13em}.htr-next-copy h2{margin:var(--tl-space-2) 0 0;font-size:var(--tl-text-body-large)}.htr-next-copy p{margin:var(--tl-space-1) 0 0;color:var(--tl-ink-soft);font:500 15px/1.5 var(--tl-font-jp)}
.htr-next>a{display:flex;min-height:var(--tl-control-primary);align-items:center;justify-content:center;gap:var(--tl-space-3);padding:0 var(--tl-space-4);border-radius:var(--tl-radius-control);background:var(--tl-ink);color:var(--tl-paper);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}.htr-next>a span{font-size:18px}
.htr-stages{padding:0 var(--tl-space-6) var(--tl-space-6)}
.htr-stage{padding-top:var(--tl-space-6)}.htr-stage+.htr-stage{margin-top:var(--tl-space-6);border-top:1px solid var(--tl-hair)}
.htr-stage>header{display:grid;grid-template-columns:1fr auto;align-items:end;margin-bottom:var(--tl-space-3)}
.htr-stage>header span{grid-column:1/-1;color:var(--tl-sepia);font:700 var(--tl-text-meta)/1.4 var(--tl-font-mono);letter-spacing:.14em}.htr-stage>header h2{margin:var(--tl-space-2) 0 0;font:600 30px/1 var(--tl-font-shodo)}.htr-stage>header p{margin:0;color:var(--tl-ink-soft);font-size:13px}
.htr-grid{border-top:1px solid var(--tl-hair)}
.htr-card{display:grid;grid-template-columns:46px 62px minmax(0,1fr) 112px;gap:var(--tl-space-3);align-items:center;min-height:92px;padding:var(--tl-space-3) var(--tl-space-2);border-bottom:1px solid var(--tl-hair);color:var(--tl-ink);text-decoration:none;transition:background-color .18s ease}
.htr-card:hover{background:var(--tl-wash)}.htr-card:active{background:color-mix(in srgb,var(--tl-wash) 72%,var(--tl-paper-soft))}
.htr-card-no{font:600 12px/1 var(--tl-font-mono);color:var(--tl-ink-soft)}
.htr-card-glyph{display:grid;width:56px;height:56px;place-items:center;color:var(--tl-ink);font:600 31px/1 var(--tl-font-shodo)}
.htr-card-copy{min-width:0}.htr-card-copy small{display:block;color:var(--tl-ink-soft);font-size:12px}.htr-card-copy>b{display:block;margin-top:var(--tl-space-1);overflow:hidden;color:var(--tl-ink);font:500 17px/1.45 var(--tl-font-jp);text-overflow:ellipsis;white-space:nowrap}.htr-card-copy>i{display:block;height:3px;margin-top:var(--tl-space-2);overflow:hidden;background:var(--tl-hair)}.htr-card-copy>i>em{display:block;height:100%;background:var(--tl-success)}
.htr-card-action{display:flex;min-height:var(--tl-control-min);align-items:center;justify-content:flex-end;gap:var(--tl-space-2);color:var(--tl-focus);font-size:13px;font-weight:700;white-space:nowrap}.htr-card-action i{font-style:normal;font-size:17px}.htr-card.is-done .htr-card-glyph{color:var(--tl-success)}
.htr-settings-dialog{width:min(calc(100% - var(--tl-space-5)),460px);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))}
.htr-settings-dialog:not([open]){display:none}.htr-settings-dialog::backdrop{background:color-mix(in srgb,var(--tl-ink) 48%,transparent);backdrop-filter:blur(5px)}
.htr-settings-dialog>header{display:flex;align-items:center;justify-content:space-between;padding:var(--tl-space-4) var(--tl-space-5);border-bottom:1px solid var(--tl-hair)}.htr-settings-dialog h2{margin:0;font:600 26px/1 var(--tl-font-shodo)}
.htr-settings-dialog button{min-width:var(--tl-control-min);min-height:var(--tl-control-min);border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control);background:var(--tl-paper);color:var(--tl-ink);font:700 14px/1 var(--tl-font-ui);cursor:pointer}
.htr-settings-body{padding:var(--tl-space-5)}.htr-settings-body>div{display:flex;align-items:center;gap:var(--tl-space-4)}.htr-settings-body span{flex:1}.htr-settings-body b,.htr-settings-body small{display:block}.htr-settings-body small{margin-top:var(--tl-space-1);color:var(--tl-ink-soft);font-size:13px}.htr-settings-body button{padding:0 var(--tl-space-4)}
@container(max-width:700px){.htr-hero{grid-template-columns:82px 1fr;gap:var(--tl-space-4);padding:var(--tl-space-5)}.htr-seal{width:78px;height:78px;font-size:44px}.htr-progress{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:var(--tl-space-1) var(--tl-space-3);padding:var(--tl-space-4) 0 0;border-left:0;border-top:1px solid var(--tl-hair)}.htr-progress strong{grid-row:1/3}.htr-progress span{margin:0}.htr-progress>i{margin:var(--tl-space-1) 0 0}.htr-next{margin:0 var(--tl-space-5)}.htr-stages{padding-inline:var(--tl-space-5)}}
@container(max-width:470px){.htr-shell{width:calc(100% - var(--tl-space-4));padding-top:var(--tl-space-3)}.htr-top{margin-bottom:var(--tl-space-3)}.htr-brand b{font-size:10px;letter-spacing:.12em}.htr-paper{border-radius:var(--tl-radius-panel)}.htr-hero{grid-template-columns:64px 1fr;padding:var(--tl-space-4)}.htr-seal{width:60px;height:60px;border-left-width:3px;font-size:36px}.htr-hero h1{font-size:38px}.htr-lead{font-size:15px}.htr-progress strong{font-size:32px}.htr-next{grid-template-columns:58px minmax(0,1fr);gap:var(--tl-space-3);margin:0 var(--tl-space-4);padding:var(--tl-space-4) 0}.htr-next-mark{width:54px;height:54px;font-size:31px}.htr-next>a{grid-column:1/-1}.htr-stages{padding:0 var(--tl-space-4) var(--tl-space-5)}.htr-stage{padding-top:var(--tl-space-5)}.htr-card{grid-template-columns:34px 50px minmax(0,1fr);min-height:110px;padding:var(--tl-space-3) 0}.htr-card-glyph{width:48px;height:48px;font-size:28px}.htr-card-action{grid-column:3;justify-content:flex-start}.htr-stage>header{display:block}.htr-stage>header p{margin-top:var(--tl-space-2)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.htr-card,.htr-progress>i>b{transition:none}}
@media(prefers-reduced-transparency:reduce){.htr-paper,.htr-top>*{backdrop-filter:none}}

.htr-picker{display:grid;gap:var(--tl-space-4);margin:var(--tl-space-5) var(--tl-space-6);color:var(--tl-ink)}
.htr-group-intro p{margin:0;color:var(--tl-sepia);font:700 var(--tl-text-meta)/1.4 var(--tl-font-mono);letter-spacing:.14em}.htr-group-intro h2{margin:var(--tl-space-2) 0 0;font:600 30px/1 var(--tl-font-shodo)}.htr-group-intro span{display:block;margin-top:var(--tl-space-2);color:var(--tl-ink-soft);font-size:14px}
.htr-group-list{display:grid;border-top:1px solid var(--tl-hair)}
.htr-group{display:grid;grid-template-columns:minmax(0,1fr) var(--tl-control-min);gap:var(--tl-space-3);width:100%;min-height:var(--tl-control-min);align-items:center;padding:var(--tl-space-3) 0;border:0;border-bottom:1px solid var(--tl-hair);background:transparent;color:var(--tl-ink);font:inherit;text-align:left;cursor:pointer}.htr-group:hover,.htr-group.is-selected{background:var(--tl-wash)}.htr-group>span{min-width:0}.htr-group b,.htr-group small{display:block}.htr-group b{font:600 19px/1.2 var(--tl-font-shodo)}.htr-group small{margin-top:var(--tl-space-1);color:var(--tl-ink-soft);font-size:13px}.htr-group i{display:grid;width:var(--tl-control-min);height:var(--tl-control-min);place-items:center;color:var(--tl-focus);font:500 26px/1 var(--tl-font-ui);font-style:normal}
.htr-group-return{min-height:var(--tl-control-min);padding:0 var(--tl-space-3);border:1px solid var(--tl-hair);border-radius:var(--tl-radius-control);background:var(--tl-glass);color:var(--tl-ink);font:700 13px/1 var(--tl-font-ui);cursor:pointer}
@container(max-width:700px){.htr-picker{margin-inline:var(--tl-space-5)}}
@container(max-width:470px){.htr-picker{margin:var(--tl-space-4)}.htr-group b{font-size:18px}.htr-stage>header{gap:var(--tl-space-3)}.htr-group-return{width:100%;margin-top:var(--tl-space-3)}}