:root{--sky:#8FE3FF;--sea:#0A3D7A;--deep:#062A57;--foam:#F4FBFF;--sun:#FFD23F;--ink:#0B1F3A;--coral:#FF6B4A;--mute:#4F6480;}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{min-height:100dvh;display:flex;flex-direction:column;background:var(--sea);color:var(--ink);font-family:"Figtree",system-ui,sans-serif;font-weight:500;overflow-x:clip}main{flex:1;display:flex;flex-direction:column}.sky{background:var(--sky);position:relative;padding:calc(env(safe-area-inset-top) + 14px) max(18px,env(safe-area-inset-right)) 30px max(18px,env(safe-area-inset-left))}.sea{background:var(--sea);color:var(--foam);flex:1;position:relative;padding:14px max(18px,env(safe-area-inset-right)) 18px max(18px,env(safe-area-inset-left))}.wrap{max-width:1040px;margin:0 auto;position:relative}.top{display:flex;align-items:center;gap:12px;margin-bottom:12px}.top img{width:clamp(56px,8vw,96px);height:auto;aspect-ratio:1;border-radius:18px;display:block;box-shadow:0 0 0 3px var(--foam)}.top span{font-weight:700;font-size:clamp(0.95rem,0.9rem + 0.3vw,1.1rem);letter-spacing:.02em}h1{font-family:"Modak",system-ui,sans-serif;font-weight:400;font-size:clamp(2.05rem,1.2rem + 4.2vw,4.4rem);line-height:.86;letter-spacing:.005em;color:var(--ink);max-width:14ch;padding-top:.12em}h1 em{font-style:normal;color:var(--sea)}.lede{margin-top:10px;font-size:clamp(0.95rem,0.9rem + 0.25vw,1.1rem);line-height:1.4;max-width:34rem}.wave{position:absolute;left:0;right:0;top:-15px;height:16px;width:100%;display:block}.bob{position:absolute;right:max(26px,8vw);top:-34px;width:30px;height:40px}.tool{display:grid;gap:12px}.q{font-weight:700;font-size:clamp(0.85rem,0.82rem + 0.15vw,0.95rem);letter-spacing:.02em}.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:16px;background:var(--deep)}.seg button{-webkit-tap-highlight-color:transparent;appearance:none;border:0;cursor:pointer;min-height:46px;border-radius:12px;background:transparent;color:var(--foam);font:700 clamp(0.88rem,0.84rem + 0.2vw,1rem)/1.1 "Figtree",sans-serif;display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 6px;transition:background-color .12s ease,color .12s ease,transform .12s ease}.seg button svg{width:18px;height:18px;flex:none}.seg button .tick{display:none}.seg button[aria-pressed="true"]{background:var(--foam);color:var(--ink)}.seg button[aria-pressed="true"] .tick{display:block;color:var(--sea)}.seg button[aria-pressed="true"] .ico{display:none}.seg button:active{transform:scale(.96)}.seg button:focus-visible{outline:3px solid var(--sun);outline-offset:2px}.card{background:var(--foam);color:var(--ink);border-radius:20px;padding:14px 14px 12px}.card h2{font:700 clamp(0.78rem,0.75rem + 0.1vw,0.85rem)/1 "Figtree",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}.fish{list-style:none;display:flex;flex-wrap:wrap;gap:6px}.fish li{font-size:clamp(0.8rem,0.78rem + 0.15vw,0.92rem);font-weight:700;line-height:1;padding:7px 10px;border-radius:999px;border:1.5px solid #C9DCEB;color:var(--mute);background:transparent;transition:transform .18s ease,opacity .18s ease}.fish li.on{background:var(--sea);border-color:var(--sea);color:var(--foam)}.fish li.pop{animation:pop .22s ease}@keyframes pop{from{transform:scale(.92);opacity:.6}to{transform:scale(1);opacity:1}}.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;padding-top:10px;border-top:1.5px solid #DCE9F3}.fields dt{font-size:clamp(0.72rem,0.7rem + 0.1vw,0.8rem);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}.fields dd{font-size:clamp(0.84rem,0.8rem + 0.15vw,0.95rem);line-height:1.3;margin-top:3px}.cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 20px;border-radius:16px;background:var(--sun);color:var(--ink);text-decoration:none;font:700 clamp(1.02rem,0.95rem + 0.35vw,1.2rem)/1.1 "Figtree",sans-serif;-webkit-tap-highlight-color:transparent;transition:transform .12s ease}.cta svg{width:20px;height:20px;flex:none}.cta:active{transform:scale(.98)}.cta:focus-visible{outline:3px solid var(--foam);outline-offset:3px}.after{font-size:clamp(0.82rem,0.8rem + 0.12vw,0.92rem);line-height:1.4;color:#D3E6F7;text-align:center}.hint{display:none;font-size:clamp(0.92rem,0.9rem + 0.1vw,1rem);line-height:1.45;color:#D3E6F7}footer{background:var(--sea);color:#BFD6EE;font-size:clamp(0.74rem,0.72rem + 0.1vw,0.8rem);line-height:1.4;text-align:center;padding:6px 18px calc(env(safe-area-inset-bottom) + 14px)}@media (hover: hover) and (pointer: fine){.seg button:not([aria-pressed="true"]):hover{background:rgba(244,251,255,.12)}.cta:hover{transform:translateY(-2px)}}@media (min-width: 900px){.sky{padding:24px 40px 48px}.sea{padding:30px 40px 24px}.top{margin-bottom:16px}h1{max-width:20ch;font-size:clamp(2.6rem,1.4rem + 3vw,4rem)}.tool{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);grid-template-areas:"q card" "seg card" "hint card" ". cta" ". after";grid-template-rows:auto auto 1fr auto auto;column-gap:40px;row-gap:12px;align-items:start}.q{grid-area:q;align-self:end}.seg{grid-area:seg}.card{grid-area:card;padding:18px 18px 16px}.cta{grid-area:cta}.after{grid-area:after;text-align:left}.hint{grid-area:hint;display:block}.wave{top:-23px;height:24px}.bob{top:-38px;width:38px;height:50px}}@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}