@font-face{font-family:"Plex JP";src:url(/assets/fonts/plex-jp-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex JP";src:url(/assets/fonts/plex-jp-700.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(/assets/fonts/plex-sans-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF}
@font-face{font-family:"Plex Sans";src:url(/assets/fonts/plex-sans-vi.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-024F,U+0259,U+0300-0323,U+1E00-1EFF,U+20AB,U+20A0-20AA}
@font-face{font-family:"Plex Sans";src:url(/assets/fonts/plex-sans-cyr.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0400-04FF,U+2116}
@font-face{font-family:"TA KR";src:url(/assets/fonts/noto-kr-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TA KR";src:url(/assets/fonts/noto-kr-700.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"TA SC";src:url(/assets/fonts/noto-sc-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TA SC";src:url(/assets/fonts/noto-sc-700.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"TA TC";src:url(/assets/fonts/noto-tc-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TA TC";src:url(/assets/fonts/noto-tc-700.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"TA Deva";src:url(/assets/fonts/noto-deva.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"TA Beng";src:url(/assets/fonts/noto-beng.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"TA Arab";src:url(/assets/fonts/noto-arab.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"TA Nastaliq";src:url(/assets/fonts/noto-nastaliq.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/assets/fonts/plex-mono.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--cyt:#00748F;--ink:#0B1F3A;--bg:#F5F7F8;--cy:#0096B8;--cyl:#3CC8E6;--gray:#9AA8B5;--mist:#E4F4F8;--sub:#55657A;--line:#DCE3E9;--r:14px;
--sans:"Plex Sans","Plex JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;--mono:"Plex Mono",ui-monospace,Menlo,monospace}
.lang-ja{--sans:"Plex JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.75}
a{color:var(--cyt);text-underline-offset:.18em}h1,h2,h3{line-height:1.3;margin:0}h2{font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-.01em;margin-bottom:24px}
h3{font-size:19px;font-weight:700}p{margin:0 0 1em}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.eyebrow{margin:0 0 14px;display:flex;align-items:center;gap:10px}.eyebrow::before{content:"";width:18px;height:2px;background:var(--cy)}
.skip{position:absolute;inset-inline-start:12px;top:-200px}.skip:focus{top:12px;background:#fff;color:var(--ink);padding:10px 14px;z-index:70;border:2px solid var(--ink);border-radius:8px}
.nav{position:sticky;top:0;z-index:5;background:rgba(245,247,248,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:24px}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-family:"Plex Sans",var(--sans);font-weight:600;font-size:19px;letter-spacing:-.01em}
.nav nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}.nav li a{color:var(--ink);text-decoration:none;font-size:14px}.nav li a:hover{color:var(--cy)}
.nav-r{display:flex;align-items:center;gap:18px}.lang{font-size:13px;color:var(--sub);text-decoration:none;padding:6px 4px;min-height:24px}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;text-decoration:none;border-radius:999px;padding:15px 28px;font-weight:700;font-size:17px;line-height:1.2;transition:transform .15s,background .15s}
.btn:hover{background:#163a66}.btn:active{transform:translateY(1px)}:focus-visible{outline:3px solid var(--cyt);outline-offset:3px;border-radius:4px}.dark :focus-visible,.final :focus-visible,.calc-out :focus-visible{outline-color:var(--cyl)}
.btn-s{padding:9px 18px;font-size:14px}.btn-dl{padding:12px 28px 12px 14px}.btn-dl svg{width:36px;height:36px}
.btn-share{display:none;background:var(--cyt)}
.cta-note{font-size:14px;color:var(--sub);margin:12px 0 0}.share-note{display:none}
.hero{position:relative;overflow:hidden;padding:clamp(56px,10vh,120px) 0 clamp(56px,9vh,100px);border-bottom:1px solid var(--line)}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000 30%,transparent 75%);opacity:.7}
.hero-in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-h{font-size:clamp(40px,7.2vw,96px);font-weight:700;letter-spacing:-.02em;line-height:1.18;margin:0 0 28px;min-height:2.36em}
.lang-en .hero-h{font-family:"Plex Sans",var(--sans);font-weight:600;letter-spacing:-.03em}
.ch{transition:opacity .18s ease-out}.ch.hid{opacity:0}
.caret{display:inline-block;width:.075em;height:.92em;background:var(--cy);vertical-align:-.1em;margin-inline-start:.06em;border-radius:1px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.rec{display:flex;align-items:center;gap:16px;margin-bottom:26px;min-height:52px}
.key{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:2px solid var(--ink);border-radius:11px;background:#fff;font-size:24px;box-shadow:0 4px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .12s;font-family:-apple-system,"Hiragino Sans",sans-serif;flex:none}
.is-rec .key{transform:translateY(3px);box-shadow:0 1px 0 var(--ink);background:var(--mist)}
.wave{display:inline-flex;align-items:center;gap:4px;height:40px;flex:none}.wave i{width:5px;border-radius:3px;background:var(--gray);height:calc(var(--h)*14px + 4px);transition:height .2s}
.is-rec .wave i,.wave.live i{background:var(--cy);animation:wv .9s ease-in-out var(--d) infinite alternate}
@keyframes wv{from{height:5px}to{height:calc(var(--h)*40px)}}
.rec-l,.demo-l{text-transform:none;letter-spacing:.02em;min-width:15em;text-align:start}
.lead{font-size:clamp(17px,1.6vw,20px);max-width:36em;color:#24364f;margin-bottom:30px}
.cta{display:flex;flex-direction:column;align-items:center}
.dark{background:var(--ink);color:#fff}.dark .mono{color:#9AB0C7}.dark .eyebrow::before{background:var(--cyl)}
.try{padding:110px 0}.try-in{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}.try-copy p{color:#C9D5E2}
.demo{background:#12294A;border:1px solid #23406a;border-radius:20px;padding:28px}
.tabs{display:flex;gap:8px;list-style:none;margin:0 0 22px;padding:0;flex-wrap:wrap}.tabs li{font-size:13px;border:1px solid #33507a;border-radius:999px;padding:4px 14px;color:#9AB0C7;transition:all .2s}.tabs li.on{background:var(--cyl);border-color:var(--cyl);color:var(--ink);font-weight:700}
.say{margin:0 0 4px}.script{font-size:24px;font-weight:700;margin:0 0 20px;min-height:2.6em}
.demo-rec{display:flex;align-items:center;gap:14px;margin-bottom:18px}.demo .key{background:#0B1F3A;color:#fff;border-color:#fff;box-shadow:0 4px 0 #fff}.demo.is-rec .key{box-shadow:0 1px 0 #fff;background:#1d4a7a}
.demo .wave i{background:#33507a}.demo.is-rec .wave i{background:var(--cyl)}
.field{background:#fff;color:var(--ink);border-radius:10px;padding:16px 18px;font-size:18px;min-height:64px;display:flex;align-items:center}
.out{transition:opacity .2s}.out.hid{opacity:0}
section.how,section.privacy,section.pricing,section.install,section.faq{padding:110px 0;border-bottom:1px solid var(--line)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px}.step .mono{display:block;margin:20px 0 6px;color:var(--cyt)}.step p{color:#33465e;margin:8px 0 0;font-size:16px}
.step-ill{height:64px;display:flex;align-items:center}.typed-ill{font-size:36px;font-weight:700;font-family:"Plex Sans",var(--sans)}
.apps{margin:36px 0 0;font-size:19px;color:#24364f}
.cards3{list-style:none;padding:0;margin:0 0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.cards3 li{border-top:2px solid var(--ink);padding-top:18px}.cards3 p{color:#33465e;font-size:16px;margin-top:8px}
.more{font-weight:700;text-decoration:underline;text-decoration-thickness:1px}
.beta-box{background:var(--mist);border:1px solid #bfe4ee;border-radius:var(--r);padding:20px 24px;margin-bottom:26px;font-size:16px}.beta-box b{color:var(--ink)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:18px}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px}.plan.pro{border:2px solid var(--ink)}
.price{font-size:38px;font-weight:700;margin:6px 0 14px;font-family:"Plex Sans",var(--sans)}.plan ul{margin:0 0 12px;padding:0;list-style:none}.plan li{padding-block:8px;padding-inline:26px 0;border-top:1px solid var(--line);position:relative;font-size:16px}
.plan li::before{content:"";position:absolute;inset-inline-start:2px;top:.95em;width:12px;height:2px;background:var(--cy)}
.small{font-size:14px;color:var(--sub)}
.inst-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:64px}
.inst{list-style:none;padding:0;margin:0 0 16px;counter-reset:s}.inst li{counter-increment:s;position:relative;padding-block:0 22px;padding-inline:56px 0}
.inst li::before{content:counter(s);position:absolute;inset-inline-start:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px}
.inst li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:17px;top:40px;bottom:4px;width:2px;background:var(--line)}
.inst p{margin:4px 0 0;font-size:16px;color:#33465e}
.req{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}.req ul{margin:8px 0 0;padding-inline-start:1.2em;font-size:16px}
.faq-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}summary{cursor:pointer;list-style:none;padding-block:20px;padding-inline:0 40px;font-weight:700;position:relative}
summary::-webkit-details-marker{display:none}summary::after{content:"+";position:absolute;inset-inline-end:6px;top:16px;font-family:var(--mono);font-size:22px;color:var(--cyt)}details[open] summary::after{content:"−"}
details p{margin:0 0 20px;color:#33465e}
.final{background:var(--ink);color:#fff;padding:110px 0}.final-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.final h2{margin:18px 0 30px}
.final .btn{background:#fff;color:var(--ink)}.final .btn-share{background:var(--cyl);color:var(--ink)}.final .cta-note{color:#9AB0C7}.final .cta-note a{color:var(--cyl)}
.foot{padding:48px 0 60px;font-size:14px;color:var(--sub)}.foot-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.foot ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}.foot li a{color:var(--sub)}.tm{font-size:12px;margin:0 0 6px}
.doc-in{max-width:780px;padding-top:56px;padding-bottom:80px}.doc h1{font-size:36px;margin-bottom:20px}.doc h3{margin:34px 0 10px}.doc li{margin-bottom:6px}.draft{color:#9A4F00}
.doc table{border-collapse:collapse}.doc td,.doc th{border:1px solid var(--line);padding:6px 10px}
@media (max-width:960px){.nav nav ul{display:none}.try-in,.inst-grid{grid-template-columns:minmax(0,1fr);gap:36px}.steps,.cards3{grid-template-columns:1fr}.plans{grid-template-columns:1fr}}
@media (max-width:760px){body{font-size:16px}.wrap{padding:0 20px}.nav-in{height:56px}.lang{display:none}
.hero{padding:44px 0 48px}.hero-in{text-align:start;align-items:flex-start}.hero-h{font-size:clamp(36px,10.5vw,48px);margin-bottom:22px}
.rec{gap:12px;margin-bottom:18px}.rec .key{width:40px;height:40px;font-size:20px}.rec .wave{height:30px}.rec-l{min-width:0;font-size:11px}
.lead{margin-bottom:22px}.cta{align-items:stretch;width:100%}.btn{justify-content:center}
.btn-dl{display:none}.btn-share{display:inline-flex}.dl-note{display:none}.share-note{display:block}
.try,section.how,section.privacy,section.pricing,section.install,section.faq,.final{padding:64px 0}.script{font-size:20px}.demo{padding:20px}.demo-l{min-width:0}
.foot-top{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.ch.hid,.out.hid{opacity:1}}
html:lang(ja) :is(h1,h2,h3,p,li,.lead,.script,summary){word-break:auto-phrase}
h2,.lead,.script{text-wrap:balance}p{text-wrap:pretty}
@media (max-width:760px){.hero-h{font-size:min(9.3vw,44px)}.rec-l{max-width:12em}}
.nw{white-space:nowrap}
/* ---- v2 sections ---- */
section.sec{padding:110px 0;border-bottom:1px solid var(--line)}
.sec-p{font-size:clamp(17px,1.5vw,19px);max-width:40em;color:#24364f;margin-bottom:40px}
.badges{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0 0;padding:0}
.badges li{font-size:14px;padding:6px 14px 6px 12px;border:1px solid var(--line);background:#fff;border-radius:999px;display:flex;align-items:center;gap:8px;color:#24364f}
.badges li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cy)}
.badges li:first-child{border-color:var(--ink);font-weight:700;color:var(--ink)}
/* clean */
.cmp{display:grid;grid-template-columns:1fr 64px 1fr;gap:20px;align-items:stretch;margin-bottom:40px}
.cmp>div{border-radius:var(--r);padding:26px 28px}
.cmp-raw{background:#EEF1F4;border:1px dashed #C3CDD7}.cmp-out{background:#fff;border:2px solid var(--ink)}
.cmp-l{margin:0 0 10px}.cmp-out .cmp-l{color:var(--cyt)}
.cmp-t{font-size:clamp(17px,1.6vw,21px);line-height:1.8;margin:0}.cmp-raw .cmp-t{color:#5d6d80}
.cmp-arrow{display:flex;align-items:center;justify-content:center;padding:0!important}.cmp-arrow svg{width:44px;height:44px}
.fl{background:rgba(214,96,64,.14);color:#a4472c;border-radius:3px;text-decoration:line-through;text-decoration-color:rgba(164,71,44,.7);text-decoration-thickness:2px}
.cmp-out .co{font-weight:600}
.pts4{list-style:none;padding:0;margin:0 0 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pts4 li{border-top:2px solid var(--ink);padding-top:16px}.pts4 h3{font-size:17px}.pts4 p{font-size:15px;color:#33465e;margin-top:6px}
/* offline */
.offline{padding:120px 0;background:radial-gradient(ellipse 80% 90% at 85% 40%,#123a63 0%,var(--ink) 60%)}
.off-in{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.off-h{font-size:clamp(34px,4.2vw,56px);letter-spacing:-.02em}
.off-copy p{color:#C9D5E2;font-size:18px}
.scenes{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}.scenes li{font-size:14px;border:1px solid #33507a;color:#d6e2ee;border-radius:999px;padding:5px 14px}
.off-demo{background:#12294A;border:1px solid #23406a;border-radius:18px;overflow:hidden}
.menubar{display:flex;align-items:center;gap:14px;height:38px;padding:0 16px;background:#0e2240;border-bottom:1px solid #23406a;color:#cfe0ef}
.menubar svg{width:16px;height:16px;display:block}.mb-sp{flex:1}
.mb-plane{color:var(--cyl);opacity:0;transition:opacity .4s}.mb-wifi{display:flex;align-items:center;gap:8px}.mb-wifi .mono{font-size:11px;color:#cfe0ef;text-transform:none;letter-spacing:.02em}
.wifi .slash{opacity:0;transition:opacity .3s}
.off-demo.off .wifi .slash{opacity:1}.off-demo.off .mb-plane{opacity:1}.off-demo.off .wifi{color:#8aa0b8}
.off-field{padding:26px}
.off-out{background:#fff;color:var(--ink);border-radius:10px;padding:16px 18px;font-size:19px;min-height:64px;margin:16px 0 0;display:flex;align-items:center}
.off-demo .key{background:#0B1F3A;color:#fff;border-color:#fff;box-shadow:0 4px 0 #fff}.off-demo.is-rec .key{box-shadow:0 1px 0 #fff;background:#1d4a7a;transform:translateY(3px)}
.off-demo .wave i{background:#33507a}.off-demo.is-rec .wave i{background:var(--cyl);animation:wv .9s ease-in-out var(--d) infinite alternate}
.oo{transition:opacity .2s}.oo.hid{opacity:0}
.off-note{grid-column:1/-1;font-size:14px;color:#9AB0C7;margin:0;max-width:56em}
/* on-device diagram */
.diag{display:grid;grid-template-columns:1fr 90px 180px;align-items:center;margin-bottom:48px}
.dmac{position:relative;border:2px solid var(--ink);border-radius:20px;padding:34px 28px 28px;background:#fff}
.dmac-l{position:absolute;top:-11px;inset-inline-start:22px;background:var(--bg);padding:0 8px;color:var(--ink)}
.dflow{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;gap:10px;position:relative}
.dflow::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:2px;background:var(--line)}
.dn{position:relative;background:var(--mist);border:1px solid #bfe4ee;border-radius:10px;padding:10px 14px;font-weight:700;font-size:15px;z-index:1;white-space:nowrap}
.dn:last-child{background:var(--ink);color:#fff;border-color:var(--ink)}
.pkt{position:absolute;top:calc(50% + 2px);left:12%;width:10px;height:10px;border-radius:50%;background:var(--cy);box-shadow:0 0 0 5px rgba(0,150,184,.18);z-index:2;opacity:0}
.diag.run .pkt{animation:pkt 3.2s ease-in-out infinite}
@keyframes pkt{0%{left:12%;opacity:0}8%{opacity:1}80%{left:86%;opacity:1}100%{left:86%;opacity:0}}
.dlink{position:relative;height:2px;margin:0 6px;background:repeating-linear-gradient(90deg,#B8C4CF 0 6px,transparent 6px 12px)}
.dx{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:var(--bg);border:2px solid #8695a5;color:#5F6F80;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;line-height:1}
.dserver{display:flex;flex-direction:column;align-items:center;gap:6px;color:#5F6F80;font-size:14px;text-align:center}
.dserver .mono{font-size:12px;text-transform:none;color:var(--cyt);letter-spacing:.02em}
.dsrv-ic{width:52px;height:60px;border:2px dashed #B8C4CF;border-radius:8px;background:repeating-linear-gradient(180deg,transparent 0 14px,#DCE3E9 14px 16px)}
/* how */
.how-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
.how-grid .steps{grid-template-columns:1fr;gap:14px}
.how-grid .step{padding:22px 26px;transition:border-color .3s,box-shadow .3s,opacity .3s}
.how-grid .step .mono{margin:0 0 4px}
.how-grid.run .step{opacity:.55}.how-grid.run .step.on{opacity:1;border-color:var(--ink);box-shadow:0 8px 24px rgba(11,31,58,.08)}
.mockwin{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(11,31,58,.12);overflow:hidden;position:relative}
.mw-bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;background:#F0F3F6;border-bottom:1px solid var(--line);font-size:13px;color:var(--sub)}
.mw-bar i{width:11px;height:11px;border-radius:50%;background:#D5DCE3}.mw-bar span{margin-inline-start:10px}
.mw-body{padding:22px 26px 96px;min-height:250px}.mw-to{font-size:14px;color:var(--sub);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:16px}
.mw-text{font-size:19px;margin:0}
.mw-hud{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:rgba(11,31,58,.92);padding:10px 16px;border-radius:999px;opacity:0;transition:opacity .25s}
.mw-hud .key{width:36px;height:36px;font-size:18px;background:#0B1F3A;color:#fff;border-color:#fff;box-shadow:0 3px 0 #fff;border-radius:9px}.mw-hud .wave{height:28px}.mw-hud .wave i{background:#33507a}
.how-grid.s1 .mw-hud,.how-grid.s2 .mw-hud{opacity:1}
.how-grid.s1 .mw-hud .key,.how-grid.s2 .mw-hud .key{transform:translateY(2px);box-shadow:0 1px 0 #fff;background:#1d4a7a}
.how-grid.s2 .mw-hud .wave i{background:var(--cyl);animation:wv .9s ease-in-out var(--d) infinite alternate}
/* speed */
.bars{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:18px}
.bars li{display:grid;grid-template-columns:minmax(180px,300px) 1fr 210px;gap:18px;align-items:center}
.bl{font-size:15px;font-weight:700}.bl sup,.small sup{font-size:10px;color:var(--cy);margin-inline-start:2px}
.bt{height:22px;background:#E8EDF1;border-radius:6px;overflow:hidden}.bf{display:block;height:100%;width:var(--w);background:var(--gray);border-radius:6px;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.bf.sp{background:var(--cy)}.bars.pre .bf{width:0}
.bv{white-space:nowrap;font-family:"Plex Sans",var(--sans);font-weight:700;font-size:20px}
.srcs{padding-inline-start:0;list-style:none;margin:6px 0 10px}.srcs li{margin-bottom:4px}.srcs a{color:var(--sub)}
/* calc */
.calc{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:0;border:2px solid var(--ink);border-radius:20px;overflow:hidden;background:#fff}
.calc-in{padding:32px}.calc-out{padding:32px;background:var(--ink);color:#fff}
.calc-h{font-size:24px;margin-bottom:4px}
.sl{display:block;margin:22px 0 0}.sl-top{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:700;margin-bottom:6px}.sl output{font-family:"Plex Sans",var(--sans);color:var(--cyt);white-space:nowrap}
input[type=range]{width:100%;accent-color:var(--cy);height:28px}
.presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.presets button{font:inherit;font-size:13px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;cursor:pointer;color:var(--ink)}.presets button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.res-big{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}.res-l{font-size:15px;color:#9AB0C7}.res-v{font-size:22px}.res-v b{font-family:"Plex Sans",var(--sans);font-size:clamp(56px,6vw,80px);line-height:1;color:var(--cyl);letter-spacing:-.02em}
.days-strip{display:grid;grid-template-columns:repeat(30,1fr);gap:3px;margin-bottom:22px}.days-strip i{height:22px;border-radius:3px;background:#23406a;transition:background .2s}.days-strip i.f{background:var(--cyl)}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 20px}.res-grid div{border-top:1px solid #33507a;padding-top:10px}.res-grid dt{font-size:13px;color:#9AB0C7}.res-grid dd{margin:2px 0 0;font-size:15px}.res-grid b{font-family:"Plex Sans",var(--sans);font-size:26px}
.calc-free{font-size:14px;color:#C9D5E2;background:#12294A;border-radius:10px;padding:12px 14px}
.assume summary{font-weight:700;font-size:14px;padding-block:12px;padding-inline:0 30px;color:#fff}.assume summary::after{top:8px;color:var(--cyl)}.assume{border-bottom:0}.assume ul{font-size:13px;color:#C9D5E2;padding-inline-start:1.2em;margin:0 0 6px}
/* synthesis */
.syn{padding:110px 0 120px}









.syn-h{font-size:clamp(28px,3.6vw,46px);margin:8px 0 14px}.syn-sub{color:#C9D5E2;margin-bottom:26px}
/* intro */
#intro{position:fixed;inset:0;z-index:60;background:var(--bg);overflow:hidden;transition:background-color .6s ease}
#intro .grid-bg{transition:opacity .5s}
.i-stage{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:22px;transition:opacity .25s}
.i-wave{display:flex;align-items:center;gap:7px;height:140px}.i-wave i{display:block;width:8px;height:140px;border-radius:3px;background:var(--cy);transform:scaleY(.06);transform-origin:center;transition:transform .07s linear}
.i-wave.collapse i{transition:transform .32s cubic-bezier(.5,0,.75,0),opacity .32s}
.i-label{position:absolute;top:calc(100% + 18px);left:0;right:0;text-align:center;text-transform:none;letter-spacing:.04em}
.i-key.key{transform:translateY(3px);box-shadow:0 1px 0 var(--ink);background:var(--mist)}
.i-skip{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:12px;color:var(--gray);text-transform:none}
.i-h{position:fixed;margin:0!important;min-height:0!important;z-index:61;pointer-events:none}

.i-h.move{transition:transform .75s cubic-bezier(.65,0,.25,1)}
html.intro .hero-h{visibility:hidden}
/* v4: reveal without an opacity fade, so text never sits at a half-faded (low-contrast) colour while the intro ends */
html.intro .hero .eyebrow,html.intro .hero .lead,html.intro .hero .cta,html.intro .hero .badges,html.intro .nav{visibility:hidden}
html.intro .hero .eyebrow,html.intro .hero .lead,html.intro .hero .cta,html.intro .hero .badges{transform:translateY(10px)}
html.intro .hero .eyebrow,html.intro .hero .lead,html.intro .hero .cta,html.intro .hero .badges,html.intro .nav,html.intro .hero-h{animation:ta-failsafe 0s linear 6s forwards}
@keyframes ta-failsafe{to{opacity:1;visibility:visible;transform:none}}
.hero .eyebrow,.hero .lead,.hero .cta,.hero .badges{transition:transform .5s ease}
html.intro-out .hero .eyebrow,html.intro-out .hero .lead,html.intro-out .hero .cta,html.intro-out .hero .badges,html.intro-out .nav{visibility:visible;transform:none}
@media (max-width:960px){.cmp{grid-template-columns:1fr}.cmp-arrow{height:40px}.pts4{grid-template-columns:1fr 1fr}.off-in,.how-grid,.calc{grid-template-columns:1fr}
.diag{grid-template-columns:1fr;gap:0}.dlink{width:2px;height:56px;margin:0 auto;background:repeating-linear-gradient(180deg,#B8C4CF 0 6px,transparent 6px 12px)}}
@media (max-width:760px){section.sec,.offline,.syn{padding:64px 0}.badges{justify-content:flex-start}.pts4{grid-template-columns:1fr}
.dflow{flex-direction:column;align-items:stretch;gap:12px}.dflow::before{left:50%;right:auto;top:6%;bottom:6%;width:2px;height:auto}.dn{text-align:center}
.pkt{left:calc(50% - 4px)!important}@keyframes pkt{0%{top:8%;opacity:0}8%{opacity:1}80%{top:88%;opacity:1}100%{top:88%;opacity:0}}
.bars li{grid-template-columns:1fr auto;gap:6px 12px}.bt{grid-column:1/-1;grid-row:2}.bl{font-size:14px}.bv{font-size:17px;text-align:end}
.calc-in,.calc-out{padding:22px}.res-grid{grid-template-columns:1fr 1fr 1fr}.res-grid b{font-size:20px}
.mw-body{padding:18px 18px 84px;min-height:220px}.mw-text{font-size:17px}

.i-wave{height:72px;gap:4px}.i-wave i{height:72px;width:5px}.cmp>div{padding:20px}}
@media (prefers-reduced-motion:reduce){.bars.pre .bf{width:var(--w)}#intro{display:none}}
.fl{transition:background .25s,color .25s,text-decoration-color .25s}.fl.pending{background:transparent;color:inherit;text-decoration-color:transparent}
.i-skip{transition:opacity .3s}

#intro .i-key.key{width:64px;height:64px;font-size:32px;border-radius:14px}.i-label{font-size:14px}
@media (max-width:760px){#intro .i-key.key{width:48px;height:48px;font-size:24px;border-radius:11px}}

html:lang(ja) .mono{text-transform:none}
.cc{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:22px 26px 0}
.cc-t{display:flex;align-items:center;gap:12px;background:#0e2240;border:1px solid #23406a;border-radius:14px;padding:14px;transition:background .35s,border-color .35s}
.cc-ic{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;transition:background .35s,color .35s}
.cc-ic svg{width:24px;height:24px;display:block}
.cc-tx{display:flex;flex-direction:column;line-height:1.3;min-width:0}.cc-tx b{font-size:15px}.cc-s,.cc-s2{font-size:13px;color:#9AB0C7}
.cc-wifi .cc-ic{background:var(--cy);color:#fff}.cc-plane .cc-ic{background:#23406a;color:#8aa0b8}
.sw{margin-inline-start:auto;width:40px;height:24px;border-radius:12px;background:var(--cy);position:relative;flex:none;transition:background .35s}.sw i{position:absolute;top:2px;left:18px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .35s}
.off-demo.off .cc-wifi .cc-ic{background:#23406a;color:#8aa0b8}.off-demo.off .sw{background:#33507a}.off-demo.off .sw i{left:2px}
.off-demo.off .cc-plane{border-color:var(--cyl)}.off-demo.off .cc-plane .cc-ic{background:#F29A3A;color:#fff}.off-demo.off .cc-s2{color:var(--cyl)}
.cc-s2{opacity:.0;transition:opacity .35s}.off-demo.off .cc-s2{opacity:1}
.off-out{font-size:20px}
@media (max-width:760px){.cc{grid-template-columns:1fr;padding:16px 16px 0}.off-field{padding:16px}.cc-t{padding:10px 12px}}
@media (prefers-reduced-motion:reduce){.off-demo .cc-s2{opacity:1}}

/* ---- v3: a11y, polish modes, skins, scene ---- */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main:focus{outline:none}
p a:not(.btn),li a:not(.btn),dd a{text-decoration:underline;text-decoration-thickness:1px}
.nav li a{display:inline-block;padding:4px 0}
.motion,.scene-pause{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 12px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.motion[hidden],.scene-pause[hidden]{display:none}
.motion-ic{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
[aria-pressed=true] .motion-ic{border:0;width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.motion[aria-pressed=true],.scene-pause[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
html.paused *,html.paused *::before,html.paused *::after{animation-play-state:paused!important}
/* modes */
.modes{margin:8px 0 48px;padding:32px;background:#fff;border:1px solid var(--line);border-radius:20px}
.modes-h{font-size:clamp(22px,2.2vw,28px);margin-bottom:8px}.modes-p{color:#33465e;margin-bottom:20px}
.m-say{background:#EEF1F4;border:1px dashed #A9B6C3;border-radius:12px;padding:14px 18px;margin-bottom:18px}
.mp-l{margin:0 0 4px;font-size:12px}.m-spoken{margin:0;font-size:17px;color:#33465e}
.mtabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.mtabs [role=tab]{font:inherit;font-size:15px;font-weight:700;min-height:40px;padding:6px 16px;border-radius:999px;border:1px solid #A9B6C3;background:#fff;color:var(--ink);cursor:pointer}
.mtabs [role=tab][aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.mtabs [role=tab][aria-selected=true]::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyl);margin-inline-end:8px;vertical-align:.12em}
.mpanels{display:grid;gap:14px}
.mpanel{border:2px solid var(--ink);border-radius:14px;padding:20px 22px}
.mp-name{font-size:18px;margin:0 0 4px}.mp-desc{color:#33465e;font-size:16px;margin:0 0 10px}.mp-pre{margin:0 0 8px}
.mp-out{background:var(--mist);border-radius:10px;padding:12px 16px}.mp-t{margin:0;font-size:18px;font-weight:600}.mp-t span{display:block}
.js-tabs .mpanel[hidden]{display:none}
.js-tabs .mpanel{animation:mpin .35s ease-out}@keyframes mpin{from{opacity:.4}to{opacity:1}}
/* skins */
.skin-grid{list-style:none;padding:0;margin:0 0 14px;display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.skin{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.sk-vis{height:112px;background:radial-gradient(ellipse at 50% 40%,#2a3a52,#141c28);display:flex;align-items:center;justify-content:center;overflow:hidden}
.sk-name{font-weight:700;font-size:14px;margin:10px 12px 0;line-height:1.35}.sk-plan{margin:2px 12px 12px;font-size:12px;font-family:var(--mono);color:var(--sub)}
.is-pro .sk-plan{color:var(--ink);font-weight:700}
.sk-wave{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.12);border:.5px solid rgba(255,255,255,.18);box-shadow:0 3px 10px rgba(23,26,32,.28);color:#fff}
.skw-bars{display:flex;align-items:center;gap:2px;height:20px}.skw-bars i{width:2.5px;border-radius:2px;height:calc(3px + 16px*var(--k));background:linear-gradient(200deg,#3D9BFF,#0A6CDC);animation:skw .5s ease-in-out var(--d) infinite alternate}
@keyframes skw{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
.skw-t{font-size:10px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.75)}.skw-esc{font-size:9px;color:rgba(255,255,255,.55)}
.sk-orb{position:relative;width:58px;height:58px}.sk-orb i{position:absolute;inset:0;border-radius:50%}
.o-glow{background:conic-gradient(#4073FF,#8C59FF,#F266BF,#4DD9FF,#4073FF);filter:blur(12px);opacity:.55;animation:spin 6s linear infinite}
.o-body{background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.75),transparent 45%),conic-gradient(from 40deg,#4073FF,#8C59FF,#F266BF,#4DD9FF,#4073FF);border:.6px solid rgba(255,255,255,.3);animation:spin 9s linear infinite reverse,breathe 3s ease-in-out infinite alternate}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes breathe{to{scale:1.06}}
.sk-3d{position:relative;width:70px;height:70px}.sk-3d i{position:absolute;border-radius:50%}
.sk-droplet i:nth-child(1){inset:8px 14px 4px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,#bfe6ff,#3D9BFF 45%,#0A4FB0);animation:breathe 2.4s ease-in-out infinite alternate}
.sk-rings i{inset:var(--o,6px);border:2px solid #6fa8ff;transform:rotateX(65deg) rotate(var(--r,0deg));animation:spin 5s linear infinite}
.sk-rings i:nth-child(2){--o:14px;border-color:#a98bff;animation-duration:7s}.sk-rings i:nth-child(3){--o:24px;border-color:#5fe0ff;animation-duration:4s}
.sk-particles i{inset:0;background:radial-gradient(circle,#8fd3ff 1.5px,transparent 2px) 0 0/12px 12px;mask:radial-gradient(circle,#000 40%,transparent 70%);-webkit-mask:radial-gradient(circle,#000 40%,transparent 70%);animation:spin 12s linear infinite}
.sk-particles i:nth-child(2){background-size:17px 17px;animation-direction:reverse;opacity:.7}.sk-particles i:nth-child(3){display:none}
.sk-planet i:nth-child(1){inset:14px;background:radial-gradient(circle at 35% 30%,#ffd9a8,#e8873f 50%,#7a2f1a)}.sk-planet i:nth-child(2){inset:28px -4px;border:3px solid rgba(255,220,170,.7);transform:rotate(-18deg);animation:breathe 3s ease-in-out infinite alternate}.sk-planet i:nth-child(3){display:none}
.sk-nebula i{inset:4px;background:radial-gradient(circle at 40% 45%,rgba(255,120,200,.8),transparent 55%),radial-gradient(circle at 62% 55%,rgba(90,140,255,.8),transparent 55%);filter:blur(4px);animation:spin 14s linear infinite}.sk-nebula i:nth-child(2){inset:18px;background:radial-gradient(circle,#fff 1px,transparent 2px) 0 0/9px 9px;filter:none;animation-direction:reverse}.sk-nebula i:nth-child(3){display:none}
.sk-import{margin-top:28px;border-top:2px solid var(--ink);padding-top:18px;max-width:46em}.sk-import p{color:#33465e;font-size:16px}
/* scene */
.scene{width:min(820px,100%);margin:14px auto 30px;display:flex;flex-direction:column;align-items:center;gap:12px}
.scene-vis{position:relative;width:100%}
.scene-svg{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.scene-l{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.scene-l li{position:absolute;white-space:nowrap;background:#fff;color:var(--ink);font-weight:700;font-size:14px;padding:7px 14px 7px 12px;border-radius:999px;box-shadow:0 8px 0 #B8C4CF,0 14px 24px rgba(0,0,0,.25);display:flex;align-items:center;gap:8px;animation:fl 4.5s ease-in-out infinite alternate}
.scene-l li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cy)}
.scene-l .sl1{right:2%;top:-4%;animation-delay:-1s}.scene-l .sl2{left:2%;top:30%;animation-delay:-2.5s}.scene-l .sl3{left:30%;bottom:-4%;animation-delay:-.5s}.scene-l .sl4{right:-1%;top:62%;animation-delay:-3.2s}
@keyframes fl{from{transform:translateY(0)}to{transform:translateY(-7px)}}
.final .scene-pause{background:transparent;color:#fff;border-color:#3a5a86}.final .scene-pause[aria-pressed=true]{background:#fff;color:var(--ink)}
.scene .bokeh{animation:drift 9s linear infinite alternate}@keyframes drift{to{transform:translateX(-60px)}}
.scene .sweep{animation:sweep 4.5s linear infinite}@keyframes sweep{0%{transform:translateX(0)}100%{transform:translateX(1100px)}}
.scene .lw{animation:lw 3s ease-in-out var(--d) infinite alternate}@keyframes lw{from{opacity:.35}to{opacity:.9}}
.scene .voice rect{transform-box:fill-box;transform-origin:center;animation:sv 9s linear infinite}
.scene .voice rect{animation:sv 9s linear infinite,svb .45s ease-in-out var(--d) infinite alternate}
@keyframes sv{0%,10%{opacity:0}14%,62%{opacity:1}68%,100%{opacity:0}}@keyframes svb{from{scale:1 .25}to{scale:1 1}}
.scene .flow{animation:flow 9s linear infinite}@keyframes flow{0%,12%{stroke-dashoffset:0;opacity:0}16%{opacity:1}64%{opacity:1;stroke-dashoffset:-96}70%,100%{opacity:0;stroke-dashoffset:-110}}
.scene .press{animation:pr 9s ease-out infinite}@keyframes pr{0%,8%{opacity:0;scale:.6}12%,62%{opacity:1;scale:1}66%,100%{opacity:0}}
.scene .press{transform-box:fill-box;transform-origin:center}
.scene .cmd{animation:cmd 9s linear infinite}@keyframes cmd{0%,8%,66%,100%{fill:#AAB6C2}12%,62%{fill:#3CC8E6}}
.scene .tl{transform-box:fill-box;transform-origin:left center}
.scene .tl1{animation:t1 9s linear infinite}.scene .tl2{animation:t2 9s linear infinite}.scene .tl3{animation:t3 9s linear infinite}.scene .tl4{animation:t4 9s linear infinite}
@keyframes t1{0%,30%{scale:0 1}40%,94%{scale:1 1}100%{scale:1 1;opacity:0}}
@keyframes t2{0%,40%{scale:0 1}50%,94%{scale:1 1}100%{scale:1 1;opacity:0}}
@keyframes t3{0%,50%{scale:0 1}59%,94%{scale:1 1}100%{scale:1 1;opacity:0}}
@keyframes t4{0%,59%{scale:0 1}66%,94%{scale:1 1}100%{scale:1 1;opacity:0}}
.scene .cur{animation:blink 1.1s steps(1) infinite}
.scene .mouth{transform-box:fill-box;transform-origin:center;animation:mo 9s linear infinite}@keyframes mo{0%,12%,64%,100%{scale:1 1}14%,20%,28%,36%,44%,52%,60%{scale:1 2.2}17%,24%,32%,40%,48%,56%{scale:1 .8}}
@media (max-width:960px){.skin-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){.modes{padding:20px 16px}.mpanel{padding:16px}.mp-t{font-size:16px}
.skin-grid{grid-template-columns:repeat(2,1fr)}
.scene-svg{border-radius:16px}.scene .city2,.scene .sweep{display:none}
.scene-l{position:static;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.scene-l li{position:static;font-size:13px;white-space:normal;justify-content:flex-start;box-shadow:0 4px 0 #B8C4CF;animation:none}}
@media (prefers-reduced-motion:reduce){.scene *,.skin *{animation:none!important}}
@media (forced-colors:active){
.key,.btn,.motion,.scene-pause,.mtabs [role=tab],.presets button,.skin,.mpanel,.plan,.calc,.demo,.off-demo,.dn{border:1px solid CanvasText;forced-color-adjust:auto}
.mtabs [role=tab][aria-selected=true],.presets button.on,.motion[aria-pressed=true]{background:Highlight;color:HighlightText;forced-color-adjust:none}
.wave i,.caret,.skw-bars i,.days-strip i.f,.bf.sp{background:CanvasText;forced-color-adjust:none}
.fl{text-decoration:line-through}.eyebrow::before{background:CanvasText}
:focus-visible{outline:3px solid Highlight}
.scene-svg,.sk-vis{forced-color-adjust:none}}
/* skin editor prototype */
.ed{padding:40px 0 80px}.ed-h{font-size:clamp(30px,4vw,44px);margin:6px 0 10px}
.ed-badge{display:inline-block;background:#9A4F00;color:#fff;border-radius:999px;padding:4px 12px;font-size:12px;letter-spacing:.06em}
.ed-warn{border-inline-start:4px solid #9A4F00;background:#FFF4E8;padding:12px 16px;border-radius:6px;max-width:52em}
.ed-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;margin-top:28px;align-items:start}
.ed-form fieldset{border:1px solid var(--line);border-radius:14px;padding:16px 18px 18px;margin:0 0 16px;background:#fff}
.ed-form legend{font-weight:700;padding:0 6px}
.ed-f{display:grid;gap:4px;margin:8px 0}.ed-f label,.ed-col label,.ed-sl label{font-weight:600;font-size:15px}
.ed-form input[type=text]{font:inherit;padding:10px 12px;border:1px solid #7A8899;border-radius:8px;min-height:44px;background:#fff;color:var(--ink)}
.ed-form input[aria-invalid=true]{border-color:#B3261E;border-width:2px}
.ed-bases{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ed-base{display:flex;align-items:center;gap:8px;border:1px solid #A9B6C3;border-radius:10px;padding:8px 10px;min-height:44px;cursor:pointer}
.ed-base:has(input:checked){border:2px solid var(--ink);background:var(--mist)}
.ed-plan{margin-inline-start:auto;font-family:var(--mono);font-size:11px;color:var(--sub)}
.ed-seg{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}.ed-seg label{display:flex;align-items:center;gap:6px;border:1px solid #A9B6C3;border-radius:999px;padding:6px 14px;min-height:40px;cursor:pointer}
.ed-seg label:has(input:checked){border:2px solid var(--ink);background:var(--mist)}
.ed-col{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:8px 0}.ed-col-in{display:flex;gap:8px;align-items:center}
.ed-col input[type=color]{width:44px;height:44px;border:1px solid #7A8899;border-radius:8px;padding:2px;background:#fff}
.ed-col .hex{width:7.5em;font-family:var(--mono)!important;text-transform:uppercase}
.ed-sl{display:grid;grid-template-columns:1fr auto;gap:2px 12px;margin:10px 0}.ed-sl input{grid-column:1/-1;width:100%;min-height:28px;accent-color:var(--cyt)}
.ed-sl output{font-family:var(--mono);color:var(--cyt);font-weight:700}
.ed-side{position:sticky;top:84px}.ed-ph{font-size:20px;margin:0 0 10px}
.ed-prev{height:220px;border-radius:18px;background:radial-gradient(ellipse at 50% 30%,#33445e,#0e1520);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ep-wave{display:none;align-items:center;gap:3px;height:40px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.08);border:.5px solid rgba(255,255,255,.14);box-shadow:0 0 var(--glow) var(--glowc),0 4px 12px rgba(0,0,0,.3);transform:scale(calc(var(--size)*1.4))}
.ep-wave i{width:3px;border-radius:2px;height:calc(3px + 21px*var(--k));background:var(--fill);background-attachment:fixed;animation:epw var(--spd) ease-in-out infinite alternate;animation-delay:calc(var(--k)*-1s)}
@keyframes epw{from{transform:scaleY(calc(1 - var(--amp)))}to{transform:scaleY(1)}}
.ep-t{color:rgba(255,255,255,.75);font-size:12px;margin-inline-start:6px}
.ep-blob{display:none;width:calc(110px*var(--size));height:calc(110px*var(--size));position:relative}
.ep-blob i{position:absolute;inset:0;border-radius:50%;background:var(--fill);box-shadow:0 0 calc(var(--glow)*2) var(--glowc);animation:breathe var(--spd) ease-in-out infinite alternate}
.ed-prev[data-base=wave] .ep-wave{display:flex}.ed-prev:not([data-base=wave]) .ep-blob{display:block}
.ed-prev[data-base=droplet] .ep-blob i{border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.ed-prev[data-base=rings] .ep-blob i{background:none;border:6px solid;border-color:var(--glowc);transform:rotateX(60deg)}
.ed-prev[data-base=particles] .ep-blob i,.ed-prev[data-base=nebula] .ep-blob i{filter:blur(6px)}
.ed-prev.still *{animation:none!important}
.ed-states{margin-top:12px}
.ed-status{margin:14px 0;padding:12px 14px;border-radius:10px;background:#E8F5EC;border:1px solid #2E7D4F}.ed-status.bad{background:#FDECEA;border-color:#B3261E}
.ed-status p,.ed-status ul{margin:0;font-size:14px}.ed-st-h{font-weight:700}.ed-status ul{padding-inline-start:1.2em;margin-top:6px}
.ed-act{display:flex;gap:10px;flex-wrap:wrap}
.ed-json pre{max-height:260px;overflow:auto;background:#0B1F3A;color:#E4F4F8;padding:12px;border-radius:10px;font-size:12px}
.ed-sec{font-size:15px;color:#33465e;padding-inline-start:1.2em}
@media (max-width:860px){.ed-grid{grid-template-columns:minmax(0,1fr)}.ed-side{position:static}}
.btn-ghost{background:#fff;color:var(--ink);border:2px solid var(--ink)}.btn-ghost:hover{background:var(--mist)}
/* skin grid (v9) */
.skin-grid{grid-template-columns:repeat(4,1fr)}
.sk-egg{width:56px;height:56px;border-radius:50%;border:2px dashed #9ab0c7;color:#cfe0ef;font:700 28px/52px var(--mono);text-align:center}
.is-egg .sk-name{letter-spacing:.1em}
.sk-more{max-width:46em;color:#33465e;font-size:16px;margin:4px 0 8px}
@media (max-width:1100px){.skin-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){.skin-grid{grid-template-columns:repeat(2,1fr)}}
/* signed install visual (SIGNED=True) */
.inst-vis{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:18px}
.iv-svg{width:100%;height:auto;display:block}
.iv-ghost{animation:ivg 3.2s ease-in-out infinite}@keyframes ivg{0%,10%{opacity:0;transform:translate(110px,40px)}25%{opacity:1}75%{opacity:1;transform:translate(255px,40px)}90%,100%{opacity:0;transform:translate(255px,40px)}}
.perm{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.perm li{display:flex;align-items:center;gap:6px;background:var(--mist);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600}
.pm-ic{width:16px;height:16px;border-radius:50%;border:2px solid var(--cyt);position:relative}
.pm-ic::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--cyt);border-width:0 2px 2px 0;transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.iv-ghost{animation:none;opacity:1;transform:translate(255px,40px)}}
.scene-l .sl3{bottom:7%;left:24%}.scene{gap:18px}
.ed-sl[hidden],[data-grad][hidden]{display:none}
.btn-s{white-space:nowrap}
@media (max-width:760px){.motion{padding:4px 10px;min-width:36px;justify-content:center}.motion .motion-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* a11y round 2 */
.how-grid.run .step{opacity:1;background:#F8FAFB}
.how-grid.run .step.on{background:#fff}
.bl sup,.small sup{color:var(--cyt)}
.final .eyebrow,.final-in .eyebrow{color:#9AB0C7}
/* reflow / targets round 2 */
.nav li a{min-width:24px;text-align:center}
.ed-form fieldset{min-width:0}.ed-f input{width:100%;box-sizing:border-box}
.ed-form input[type=radio]{width:20px;height:20px;accent-color:var(--ink);margin:0}
@media (max-width:400px){.nav-in{flex-wrap:wrap;row-gap:6px;padding-top:8px;padding-bottom:8px}.nav-r{gap:8px;flex-wrap:wrap}.btn-s{padding-inline-start:12px;padding-inline-end:12px}.nw{white-space:normal}}

/* ---- v4: locales, language switcher, RTL (2026-10-25) ---- */
.font-ko{--sans:"Plex Sans","TA KR","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif}
.font-zh-hans{--sans:"Plex Sans","TA SC","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif}
.font-zh-hant{--sans:"Plex Sans","TA TC","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif}
.font-hi{--sans:"Plex Sans","TA Deva","Kohinoor Devanagari","Noto Sans Devanagari",sans-serif}
.font-bn{--sans:"Plex Sans","TA Beng","Kohinoor Bangla","Noto Sans Bengali",sans-serif}
.font-ar{--sans:"TA Arab","Plex Sans","Geeza Pro","Noto Sans Arabic",Tahoma,sans-serif}
.font-ur{--sans:"TA Nastaliq","TA Arab","Plex Sans","Noto Nastaliq Urdu","Geeza Pro",sans-serif}
:is(.font-ko,.font-zh-hans,.font-zh-hant,.font-hi,.font-bn,.font-ar,.font-ur){--mono:"Plex Mono",var(--sans)}
/* scripts where letter-spacing or uppercase breaks the writing (joining, conjuncts) */
:is(.font-hi,.font-bn,.font-ar,.font-ur) :is(*,*::before,*::after){letter-spacing:0!important}
:is(.font-hi,.font-bn,.font-ar,.font-ur,.font-ko,.font-zh-hans,.font-zh-hant) .mono{text-transform:none}
.font-ko :is(h1,h2,h3,p,li,.lead,summary){word-break:keep-all}
.font-hi,.font-bn{line-height:1.85}.font-hi :is(h1,h2,h3),.font-bn :is(h1,h2,h3){line-height:1.45}
.font-ar{line-height:1.9}.font-ar :is(h1,h2,h3){line-height:1.5}
.font-ur{line-height:2.25}.font-ur :is(h1,h2,h3){line-height:1.9}.font-ur .hero-h{line-height:1.7}
/* long words (de, ru, vi) never push the page sideways */
:is(h1,h2,h3,.hero-h,.price,.sk-name,.res-l,.ec-h,dt){overflow-wrap:break-word;hyphens:auto}
.price-alt{font-size:.55em;font-weight:600;color:var(--sub);white-space:nowrap}
bdi[dir=ltr]{unicode-bidi:isolate}
/* language switcher (header) */
.lsw{position:relative}
.lsw>summary{display:flex;align-items:center;gap:6px;padding:6px 8px;min-height:32px;border-radius:8px;font-size:14px;font-weight:600;color:var(--ink);list-style:none;cursor:pointer;white-space:nowrap}
.lsw>summary::after{content:"";position:static;width:0;height:0;border-inline:4px solid transparent;border-top:5px solid currentColor;margin-inline-start:2px;font-size:0}
.lsw[open]>summary::after{content:"";transform:rotate(180deg)}
.lsw>summary:hover{background:var(--mist,#E4F4F8)}
.lsw-ic{width:18px;height:18px;flex:none}
.lsw-list{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:80;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(11,31,58,.16);min-width:12.5em;max-height:min(70vh,560px);overflow:auto;columns:2;column-gap:4px}
.lsw-list li{break-inside:avoid}
.lsw .lsw-list a{display:block;padding:8px 12px;min-height:24px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.4;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.lsw .lsw-list a:hover{background:var(--mist,#E4F4F8)}
.lsw .lsw-list a[aria-current]{font-weight:700;background:#E4F4F8;box-shadow:inset 3px 0 0 var(--cyt)}
[dir=rtl] .lsw .lsw-list a[aria-current]{box-shadow:inset -3px 0 0 var(--cyt)}
@media (max-width:760px){.lsw-cur{max-width:7.5em;overflow:hidden;text-overflow:ellipsis}.lsw-list{columns:1;min-width:11em}}
@media (max-width:420px){.lsw-cur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.lsw>summary{min-width:44px;min-height:44px;justify-content:center}}
/* footer language list */
.foot-lang{margin:4px 0 18px}.foot .foot-lang ul{gap:6px 16px}.foot-lang a{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;display:inline-block;padding:4px 0;min-height:24px}
.foot-lang a[aria-current]{color:var(--ink);font-weight:700;text-decoration:none}
/* RTL: mirror the flow, keep numbers, prices, keys and code left-to-right */
@media (min-width:761px){[dir=rtl] .diag.run .pkt{animation-name:pkt-rtl}}
@keyframes pkt-rtl{0%{left:86%;opacity:0}15%{opacity:1}80%{left:12%;opacity:1}100%{left:12%;opacity:0}}
[dir=rtl] :is(.price,.res-v b,.res-grid b,.ec-total,.ec-grid b,.bv,.sl output,.ed-sl output,.hex,pre,.key,code){unicode-bidi:isolate}
[dir=rtl] :is(.ec-num,.hex,pre){direction:ltr;text-align:start}
[dir=rtl] .scene-svg,[dir=rtl] .iv-svg{direction:ltr}
[dir=rtl] .more{display:inline-block}
.ed-grid pre{max-width:100%;overflow:auto}
/* v4: on narrow screens the language list hangs from the header itself (not the small button), so it always fits the screen in LTR and RTL */
@media (max-width:760px){.nav .lsw{position:static}.nav .lsw-list{inset-inline:12px;top:calc(100% - 4px);min-width:0;columns:2;max-height:calc(100vh - 140px)}}
.lsw .lsw-list a[aria-current]{font-family:var(--sans)} /* the page font covers its own language name */
.doc mark.tbd{background:#FFF1D6;color:#7A3E00;padding:0 3px;border-radius:3px}.doc blockquote{margin:0 0 20px;border-inline-start:3px solid var(--line);padding-inline-start:12px;color:#444}
/* v6: short Latin terms in parentheses inside RTL text, e.g. "(Merchant of Record)", stay on one line */
bdi.nw{white-space:nowrap}
/* v7: offline 90-day selling point */
.off90{margin:18px 0 0;padding:14px 18px;border:1px solid #2c5a86;border-radius:var(--r);background:rgba(60,200,230,.08);font-size:16px;color:#dbe8f3}.off90 strong{display:block;color:#fff;font-size:19px;margin-bottom:2px}
.off90-s{margin:18px 0 0;padding:14px 18px;background:var(--mist);border:1px solid #bfe4ee;border-radius:var(--r);font-size:15px}.off90-s strong{color:var(--ink)}