:root{--font:'Atkinson Hyperlegible','Noto Sans JP',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--serif:'Cormorant Garamond','Noto Serif JP',Georgia,serif;--r:6px;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark;--bg:#121011;--surface:#181516;--line:#2d282a;--ink:#efeaea;--muted:#ada4a6;--accent:#f28ba0}
html{height:100%;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 6rem);-webkit-text-size-adjust:100%}
[data-theme=dark]{color-scheme:dark;--bg:#121011;--surface:#181516;--line:#2d282a;--ink:#efeaea;--muted:#ada4a6;--accent:#f28ba0}
[data-theme=light]{color-scheme:light;--bg:#f6f5f1;--surface:#fbfaf7;--line:#dcd9d0;--ink:#1a1a18;--muted:#54544e;--accent:#a3141b}
[data-theme=sepia]{color-scheme:light;--bg:#f0e6d2;--surface:#f5ecda;--line:#d8c9a8;--ink:#2f261b;--muted:#5e4f3a;--accent:#85301a}
*,*::before,*::after{box-sizing:border-box}*{margin:0}[hidden]{display:none!important}
body{min-height:100%;font:1rem/1.7 var(--font);color:var(--ink);background:var(--bg)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:9}
button,input,textarea{font:inherit;color:inherit}button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;padding:.75rem 1rem;background:var(--ink);color:var(--bg);font-weight:700;z-index:20}.skip:focus{left:0}
.page{width:min(100% - 2rem,28rem);margin-inline:auto;min-height:100dvh;display:flex;flex-direction:column}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;padding:.5rem 0 .25rem;background:var(--bg)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.map{display:flex;align-items:center;gap:.5rem;min-height:2.5rem;color:var(--ink);font-size:.875rem;font-weight:700}
.map::after{content:'';width:.4rem;height:.4rem;margin-top:-.2rem;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.segs{display:grid;grid-template-columns:repeat(5,1fr);gap:.375rem}
.segs button{position:relative;height:1.75rem}
.segs button::before,.segs span{content:'';position:absolute;left:0;top:50%;height:2px;margin-top:-1px}
.segs button::before{right:0;background:var(--line)}
.segs span{background:var(--muted)}
.segs [aria-current=step] span{background:var(--accent);height:3px;margin-top:-1.5px}
#stage{flex:1;display:flex;flex-direction:column;padding:2rem 0 0;animation:in .3s ease}
@keyframes in{from{opacity:0}to{opacity:1}}
.kick{color:var(--muted);font-size:.875rem}
.meta{display:flex;align-items:center;gap:.75rem;margin:.25rem 0 1.25rem;font-size:.875rem;color:var(--muted)}
.pill--req{color:var(--accent);font-weight:700}
h1,h2{font-size:1.375rem;line-height:1.35;font-weight:700;outline:0}
h3{margin:2rem 0 .5rem;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hint{margin-top:.5rem;color:var(--muted)}
.tag{font:italic 500 1.625rem/1.45 var(--serif);max-width:20rem}
.intro>p{margin-top:1rem;color:var(--muted)}
.fields{display:grid;gap:1.5rem;margin-top:1.5rem}
.field{display:grid;gap:.35rem}.field>.lab{font-weight:700}
input[type=text],textarea{width:100%;min-height:3rem;padding:.6rem .8rem;border:1.5px solid var(--muted);border-radius:var(--r);background:var(--bg);font-size:1rem}
textarea{min-height:7rem;resize:none;line-height:1.6}
.opts{border-top:1px solid var(--line)}
.opt{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:3.25rem;padding:.5rem 0;border-bottom:1px solid var(--line);text-align:left}
.opt[aria-pressed=true]{font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.opt[aria-pressed=true]::after{content:'✓';color:var(--accent)}
.nav{position:sticky;bottom:env(safe-area-inset-bottom,0px);z-index:4;display:flex;gap:.75rem;margin-top:auto;padding:.75rem 0;border-top:1px solid var(--line);background:var(--bg)}
.btn{min-height:3rem;padding:0 1.25rem;border:1.5px solid var(--ink);border-radius:var(--r);font-weight:700}
.btn--primary{flex:1;background:var(--ink);color:var(--bg)}
.is-off{opacity:.45}
.sum{border-top:1px solid var(--line)}
.row{display:flex;align-items:center;gap:1rem;width:100%;min-height:3.25rem;padding:.5rem 0;border-bottom:1px solid var(--line);text-align:left}
.row[aria-current=true] .row__t{font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.row__n{flex:none;min-width:1.5rem;color:var(--muted);font-weight:700}
.row__t,.row__g{flex:1;display:grid}.row__g small{color:var(--muted);font-size:.875rem}
.row__s{flex:none;font-size:.8125rem;color:var(--muted)}.s-req{color:var(--accent);font-weight:700}.s-ok{color:var(--ink)}
.intro .row::after{content:'';flex:none;width:.5rem;height:.5rem;border:solid var(--muted);border-width:2px 2px 0 0;transform:rotate(45deg)}
.row--top{color:var(--muted)}
.warn{margin-top:1.25rem;padding:.25rem 0 .25rem 1rem;border-left:3px solid var(--accent)}.warn strong{display:block;margin-bottom:.5rem}
pre{max-height:36dvh;overflow:auto;margin-top:1.5rem;padding:1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font:.875rem/1.6 var(--font);white-space:pre-wrap}
.acts{display:grid;gap:.5rem;margin-top:1rem}.acts a.btn{display:grid;place-items:center;text-decoration:none}
.note{margin-top:1.25rem;color:var(--muted);font-size:.875rem}
dialog{width:min(100%,28rem);max-height:88dvh;margin:auto auto 0;padding:0;overflow:auto;border:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;background:var(--surface);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.sheet__head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:.5rem .5rem .5rem 1.25rem;border-bottom:1px solid var(--line);background:var(--surface)}
.sheet__head h2{font-size:1.125rem}.sheet__body{padding:0 1.25rem 1.5rem}
.x{min-width:2.75rem;min-height:2.75rem;font-size:1.5rem;color:var(--muted)}
@media (min-width:640px){dialog{margin:auto;border-radius:var(--r)}}
.dd{position:relative}
.dd summary{display:flex;align-items:center;gap:.5rem;min-height:2.5rem;color:var(--ink);font-size:.875rem;font-weight:700;cursor:pointer;list-style:none}
.dd summary::-webkit-details-marker{display:none}
.dd summary::after{content:'';width:.4rem;height:.4rem;margin-top:-.2rem;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.dd[open] summary::after{margin-top:.2rem;transform:rotate(-135deg)}
.dd summary svg,.dd__list svg{width:1.25rem;height:1.25rem}
.dd__list{position:absolute;top:100%;z-index:12;display:grid;margin-top:.25rem;padding:.25rem .75rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
#lang-dd .dd__list{left:0}#theme-dd .dd__list{right:0;justify-items:end}
.dd__list button{display:flex;align-items:center;gap:.75rem;min-height:2.75rem;color:var(--muted);font-size:.9375rem;white-space:nowrap}
.dd__list button[aria-pressed=true]{color:var(--ink);font-weight:700}
.dd__list button:disabled{opacity:.5;cursor:not-allowed}.dd__list small{font-size:.75rem}
#theme-dd .dd__list button{justify-content:center;width:2.75rem}
.dd__code{min-width:1.75rem;font-weight:700}
.dd svg,.dd svg *{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.hero{display:grid;justify-items:center;text-align:center;margin:1rem 0 1.5rem}
.logo{display:block;width:clamp(80px,28vw,104px);height:auto;aspect-ratio:316.1741/283.51282;stroke:none}
.logo__rl{fill:var(--ink)}.logo__dot{fill:var(--accent)}
.brandname{margin-top:1.5rem;font-size:.9375rem;font-weight:700;letter-spacing:.34em;margin-right:-.34em;text-transform:uppercase}
.hero .tag{margin-top:1.25rem}
.toast{position:fixed;left:50%;bottom:calc(5rem + env(safe-area-inset-bottom,0px));z-index:30;width:min(100% - 2rem,24rem);padding:.85rem 1.1rem;transform:translateX(-50%);border-radius:var(--r);background:var(--ink);color:var(--bg)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.gate{display:flex;flex-direction:column;flex:1}.gate .nav{margin-top:auto}
.gate input{letter-spacing:.08em}
:lang(ja) .tag{font-style:normal;font-size:1.375rem;letter-spacing:.1em}
:lang(ja) h3{letter-spacing:.06em}