:root{
  --sea:#00AEEF; --deep:#0A3D62; --foam:#E6F7FD; --paper:#FFFFFF; --page:#F3F9FC;
  --ink:#16303F; --muted:#557080; --line:#CFE3EC; --error:#B3261E; --onDeep:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sea:#3CC4F5; --deep:#8FD8F7; --foam:#0F3448; --paper:#0B2A3A; --page:#061C28;
    --ink:#E3F1F7; --muted:#9DB8C5; --line:#1F4B61; --error:#FF8A80; --onDeep:#061C28;
  }
}
:root[data-theme="dark"]{
  --sea:#3CC4F5; --deep:#8FD8F7; --foam:#0F3448; --paper:#0B2A3A; --page:#061C28;
  --ink:#E3F1F7; --muted:#9DB8C5; --line:#1F4B61; --error:#FF8A80; --onDeep:#061C28;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--page);color:var(--ink);font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.wrap{max-width:640px;margin:0 auto;padding:0 20px 120px;min-height:100vh}
.top{display:flex;align-items:center;justify-content:space-between;padding:18px 0 10px}
.logo{height:26px;width:auto;display:block}
.logoBox{background:#fff;border-radius:8px;padding:5px 8px;display:inline-flex}
.lang{display:flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.lang button{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:800;font-size:14px;padding:6px 14px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--deep);color:var(--onDeep)}
/* voyage progress */
.voyage{margin:6px 0 22px;overflow:hidden;padding-top:36px;margin-top:-30px}
.voyage svg{display:block;width:100%;height:44px;overflow:visible}
.voyage svg.boat{width:30px;height:30px}
.voyage .count{font-size:14px;color:var(--muted);margin-top:2px;display:flex;justify-content:space-between}
.boat{transition:left .5s cubic-bezier(.4,.1,.2,1)}
@media (prefers-reduced-motion: reduce){.boat{transition:none}}
h1{font-size:34px;line-height:1.1;margin:8px 0 16px;color:var(--deep);font-weight:800;letter-spacing:-.01em}
h2{font-size:25px;line-height:1.25;margin:0 0 8px;color:var(--deep);font-weight:800}
.sub{color:var(--muted);margin:0 0 20px;font-size:16px}
.intro p{margin:0 0 14px}
.facts{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.fact{background:var(--foam);color:var(--deep);border-radius:999px;padding:6px 14px;font-weight:600;font-size:15px}
.note{font-size:14px;color:var(--muted);border-left:3px solid var(--sea);padding:6px 0 6px 12px;margin-top:24px}
.qnum{color:var(--sea);font-weight:800;font-size:15px;margin-bottom:6px}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:var(--paper);color:var(--ink);border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;font:inherit;font-size:16px;cursor:pointer;min-height:52px}
.opt:hover{border-color:var(--sea)}
.opt[aria-checked="true"]{border-color:var(--sea);background:var(--foam);font-weight:600}
.mark{flex:0 0 22px;height:22px;border:2px solid var(--line);margin-top:1px;display:grid;place-items:center;background:var(--paper)}
.single .mark{border-radius:50%}
.multi .mark{border-radius:6px}
.opt[aria-checked="true"] .mark{border-color:var(--sea);background:var(--sea)}
.single .opt[aria-checked="true"] .mark::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.multi .opt[aria-checked="true"] .mark::after{content:"";width:10px;height:6px;border:2.5px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.mrow{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
.mrow.missing{border-color:var(--error)}
.mrow .rl{font-weight:700;margin-bottom:10px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{border:1.5px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:8px 13px;font:inherit;font-size:15px;cursor:pointer}
.pill[aria-checked="true"]{background:var(--deep);border-color:var(--deep);color:var(--onDeep);font-weight:700}
textarea{width:100%;min-height:140px;border:1.5px solid var(--line);border-radius:14px;padding:14px;font:inherit;background:var(--paper);color:var(--ink);resize:vertical}
.err{color:var(--error);font-weight:700;font-size:15px;margin:-8px 0 12px}
.err:empty{display:none}
.nav{position:fixed;left:0;right:0;bottom:0;background:var(--page);border-top:1px solid var(--line);padding:12px 20px calc(12px + env(safe-area-inset-bottom))}
.nav .in{max-width:640px;margin:0 auto;display:flex;gap:12px}
.btn{font:inherit;font-weight:800;font-size:17px;border-radius:14px;padding:14px 20px;cursor:pointer;border:1.5px solid var(--deep)}
.primary{background:var(--deep);color:var(--onDeep);flex:1}
.ghost{background:transparent;color:var(--deep)}
.btn:disabled{opacity:.35;cursor:default}
button:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--sea);outline-offset:2px}
.section{padding-top:30px}
.section .who{display:inline-block;background:var(--foam);color:var(--deep);font-weight:700;border-radius:999px;padding:5px 14px;font-size:15px;margin-bottom:16px}
.section p{font-size:18px}
.end .time{font-size:15px;color:var(--muted)}
details{margin-top:30px;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:4px 16px}
summary{cursor:pointer;font-weight:800;color:var(--deep);padding:12px 0}
.dim{margin:12px 0}
.dim .lab{display:flex;justify-content:space-between;font-size:15px}
.bar{height:10px;background:var(--foam);border-radius:99px;overflow:hidden;margin-top:4px}
.bar i{display:block;height:100%;background:var(--sea)}
.profile{font-size:26px;font-weight:800;color:var(--deep);margin:4px 0 2px}
.sig{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}
.sig span{border:1.5px solid var(--line);border-radius:8px;padding:3px 9px;font-size:14px}
.sig span.on{border-color:var(--sea);background:var(--foam);font-weight:700}
.small{font-size:14px;color:var(--muted)}
.hint{font-size:14px;color:var(--muted);margin:-10px 0 16px}
.othertxt,.field input,.field select{width:100%;border:1.5px solid var(--sea);border-radius:12px;padding:12px 14px;font:inherit;font-size:16px;background:var(--paper);color:var(--ink)}
.othertxt{margin:-2px 0 4px}
.field{margin:0 0 18px}.field label,.field .fl{display:block;font-weight:700;margin-bottom:8px}
.field input,.field select{border-color:var(--line)}
.cta{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--foam);border-radius:14px;padding:16px;margin:18px 0}
.cta p{margin:0;font-weight:600;color:var(--deep)}
.cta button{flex:0 0 auto}
.res h2{margin:26px 0 6px;font-size:20px}
.res .qh{font-weight:800;color:var(--deep);margin:18px 0 8px}
.rowbar{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin:0 0 4px;font-size:15px}
.rowbar .v{color:var(--muted);font-variant-numeric:tabular-nums}
.meter{height:9px;background:var(--foam);border-radius:99px;overflow:hidden;margin:0 0 10px}
.meter i{display:block;height:100%;background:var(--sea)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:10px;margin:10px 0 22px}
.tile{background:var(--foam);border-radius:14px;padding:14px}
.tile b{display:block;font-size:26px;color:var(--deep);line-height:1.1}
.tile span{font-size:13px;color:var(--muted)}
.resp{border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 10px;background:var(--paper)}
.resp summary{font-weight:700;color:var(--deep);cursor:pointer}
.resp dl{margin:10px 0 0;font-size:14px}
.resp dt{font-weight:700;margin-top:8px;color:var(--deep)}
.resp dd{margin:2px 0 0 0;color:var(--ink)}
.quote{border-left:3px solid var(--sea);padding:2px 0 2px 10px;margin:0 0 8px;font-size:15px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 18px}
.toolbar button{border:1.5px solid var(--deep);background:transparent;color:var(--deep);border-radius:12px;padding:9px 14px;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.reslink{display:block;width:100%;margin-top:14px;border:1.5px dashed var(--line);background:transparent;color:var(--deep);border-radius:12px;padding:11px;font:inherit;font-weight:700;cursor:pointer}