:root{--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
 --pg:#F5F5F7;--card:#FFFFFF;--ink:#1D1D1F;--ink2:#6E6E73;--line:rgba(0,0,0,.09);--acc:#6A3DF0;--accsoft:rgba(106,61,240,.10);
 /* phone tokens */
 --bg:#FFFFFF;--gbg:#F2F2F7;--cell:#FFFFFF;--cell2:#F2F2F7;--label:#000;--label2:rgba(60,60,67,.6);--label3:rgba(60,60,67,.3);--sep:rgba(60,60,67,.29);
 --fill:rgba(120,120,128,.12);--red:#FF3B30;--green:#34C759;--orange:#FF9500;--blue:#007AFF;--glass:rgba(255,255,255,.78);--glassline:rgba(0,0,0,.08);--bubble:#6A3DF0;--dim:rgba(0,0,0,.22);--sheet:#FFFFFF}
[data-theme=dark]{--pg:#000;--card:#161618;--ink:#F5F5F7;--ink2:#A1A1A6;--line:rgba(255,255,255,.12);--acc:#A98BFF;--accsoft:rgba(169,139,255,.16);
 --bg:#000;--gbg:#000;--cell:#1C1C1E;--cell2:#2C2C2E;--label:#FFF;--label2:rgba(235,235,245,.6);--label3:rgba(235,235,245,.3);--sep:rgba(84,84,88,.6);
 --fill:rgba(118,118,128,.24);--red:#FF453A;--green:#30D158;--orange:#FF9F0A;--blue:#0A84FF;--glass:rgba(37,37,40,.78);--glassline:rgba(255,255,255,.1);--bubble:#A98BFF;--dim:rgba(0,0,0,.5);--sheet:#1C1C1E}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;padding-bottom:72px}
button{font-family:inherit}
.top{padding:40px 24px 8px}
.top-in,.sec,.group-h,.finish{max-width:1240px;margin:0 auto}
.top-in{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
h1{font-size:40px;line-height:1.1;letter-spacing:-.02em;margin:0 0 10px;font-weight:700}
.lede{font-size:17px;line-height:1.45;color:var(--ink2);margin:0 0 8px;max-width:720px}
.count{font-size:15px;color:var(--ink2);margin:0}.count b{color:var(--ink)}
.theme{flex:none;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:14px;font-weight:600;border-radius:20px;padding:9px 16px;cursor:pointer}
[data-theme=light] .t-d,[data-theme=dark] .t-l{display:none}
main{padding:0 24px}
.group-h{margin-top:40px;padding:0 4px}
.group-h h2{font-size:28px;letter-spacing:-.01em;margin:0 0 4px}
.group-h p{margin:0;color:var(--ink2);font-size:16px}
.sec{background:var(--card);border-radius:24px;margin-top:20px;padding:28px;border:1px solid var(--line)}
.sec-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sec-h h3{font-size:24px;line-height:1.2;margin:0;letter-spacing:-.01em}
.dn{font-size:13px;color:var(--ink2);font-weight:500}
.state{margin-left:auto;font-size:13px;font-weight:600;color:var(--acc);min-height:16px}
.why{font-size:16px;line-height:1.5;color:var(--ink2);margin:8px 0 0;max-width:820px}
.why b{color:var(--ink)}
.tag{display:inline-block;background:var(--acc);color:#fff;font-size:12px;font-weight:600;border-radius:10px;padding:3px 9px;vertical-align:2px}
[data-theme=dark] .tag{color:#1A1033}
.ok{display:grid;grid-template-columns:340px 1fr;gap:36px;align-items:start;margin-top:20px}
.ok .side{padding-top:4px}
.spec{margin:14px 0 0;padding:0;list-style:none;font-size:15px;line-height:1.5;color:var(--ink)}
.spec li{padding:7px 0;border-top:1px solid var(--line)}
.spec li:first-child{border-top:0}
.btns{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.btn{appearance:none;border:1px solid var(--line);background:var(--pg);color:var(--ink);font-size:16px;font-weight:600;border-radius:22px;padding:11px 22px;cursor:pointer;min-height:44px}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
[data-theme=dark] .btn.primary{color:#1A1033}
.btn.on{background:var(--acc);border-color:var(--acc);color:#fff}
[data-theme=dark] .btn.on{color:#1A1033}
.btn.big{font-size:17px;padding:14px 28px}
.note{display:none;width:100%;margin-top:12px;font:15px/1.4 var(--font);color:var(--ink);background:var(--pg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;resize:vertical;min-height:64px}
.note.show{display:block}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:22px}
.opt{border:1.5px solid var(--line);border-radius:20px;padding:18px 18px 18px;display:flex;flex-direction:column;align-items:center;background:var(--card);transition:border-color .2s,box-shadow .2s}
.opt.sel{border-color:var(--acc);box-shadow:0 0 0 3px var(--accsoft)}
.opt-h{width:100%;display:flex;align-items:center;gap:8px;min-height:24px;margin-bottom:14px}
.opt-h b{font-size:17px}
.opt-h .tag{margin-left:auto}
.opt p{font-size:14.5px;line-height:1.45;color:var(--ink2);margin:14px 0 14px;width:100%;flex:1}
.opt .btn{width:100%}
.sub-note{font-size:14px;color:var(--ink2);margin:16px 0 0;line-height:1.5}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:14px;color:var(--ink2);align-items:center}
.map{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:12px;max-width:760px}
.map th,.map td{text-align:left;padding:7px 10px;border-top:1px solid var(--line)}
.map th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);font-weight:600;border-top:0}
.map td.nb{color:var(--red);font-weight:600}
.map caption{text-align:left;font-weight:600;font-size:15px;padding-bottom:2px}
.rmt{display:inline-flex;gap:8px;align-items:center;font-size:14px;color:var(--ink2);margin-top:14px;cursor:pointer}
.finish{padding:40px 28px 24px;text-align:left}
.finish h2{font-size:28px;margin:0 0 6px}.finish p{color:var(--ink2);margin:0 0 16px;font-size:16px}
#summary{white-space:pre-wrap;font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:16px;display:none}
#summary.show{display:block}
.dock{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:14px;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--pg) 86%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line);font-size:15px;color:var(--ink2);z-index:10}
.dock .btn{padding:8px 18px;min-height:38px;font-size:15px}

/* ---------- phone ---------- */
.phone{width:100%;max-width:340px;aspect-ratio:468/984;position:relative;margin:0 auto;container-type:inline-size}
.dev{position:absolute;left:0;top:0;width:468px;height:984px;transform-origin:0 0;transform:scale(var(--k,.6410));border-radius:74px;background:#1B1B1F;padding:14px;box-shadow:0 0 0 2px #3A3A3F inset,0 18px 40px rgba(0,0,0,.18)}
[data-theme=dark] .dev{background:#2A2A2E;box-shadow:0 0 0 2px #48484E inset,0 18px 40px rgba(0,0,0,.6)}
.scr{position:relative;width:440px;height:956px;border-radius:60px;overflow:hidden;background:var(--bg);color:var(--label);font-family:var(--font);font-size:17px;line-height:22px;letter-spacing:-.4px}
.scr.g{background:var(--gbg)}
.island{position:absolute;left:157px;top:11px;width:126px;height:37px;border-radius:19px;background:#000;z-index:30}
.sb{position:absolute;left:0;right:0;top:0;height:54px;z-index:29;display:flex;align-items:center;justify-content:space-between;padding:6px 34px 0 52px;font-weight:600;font-size:17px;letter-spacing:-.3px}
.sb svg{display:block}
.hi{position:absolute;left:150px;bottom:8px;width:140px;height:5px;border-radius:3px;background:var(--label);z-index:31}
.body{position:absolute;left:0;right:0;top:0;bottom:0}
.nav{height:44px;margin-top:62px;display:flex;align-items:center;padding:0 16px;position:relative}
.nav .back{display:flex;align-items:center;gap:3px;color:var(--acc);font-size:17px}
.nav .ttl{position:absolute;left:90px;right:90px;text-align:center;font-weight:600;font-size:17px;line-height:20px}
.nav .ttl small{display:block;font-weight:400;font-size:12px;line-height:15px;color:var(--label2);letter-spacing:0}
.nav .tr{margin-left:auto;color:var(--acc)}
.circ{width:44px;height:44px;border-radius:22px;background:var(--glass);border:1px solid var(--glassline);display:flex;align-items:center;justify-content:center;color:var(--label)}
.lt{font-size:34px;line-height:41px;font-weight:700;letter-spacing:.2px;padding:3px 16px 0}
.lsub{font-size:15px;line-height:20px;color:var(--label2);padding:2px 16px 0;letter-spacing:-.2px}
.dot{display:inline-block;width:8px;height:8px;border-radius:4px;background:var(--green);margin-right:6px;vertical-align:1px}
.tabs{position:absolute;left:21px;right:21px;bottom:25px;height:62px;border-radius:31px;background:var(--glass);border:1px solid var(--glassline);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-around;padding:0 4px;z-index:20;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.tab{position:relative;width:76px;height:54px;border-radius:27px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--label2);font-size:10px;line-height:12px;font-weight:600;letter-spacing:0}
.tab.on{color:var(--acc);background:var(--fill)}
.tab svg{width:26px;height:26px}
.bdg{position:absolute;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-size:12px;line-height:18px;font-weight:600;text-align:center;padding:0 5px;letter-spacing:0}
.tab .bdg{left:42px;top:3px}
.tab .bdgd{position:absolute;left:44px;top:6px;width:8px;height:8px;border-radius:4px;background:var(--red)}
.cells{margin:0 16px;background:var(--cell);border-radius:26px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:0 16px;min-height:52px;position:relative}
.row+.row::before{content:"";position:absolute;top:0;right:0;left:var(--inset,16px);height:.5px;background:var(--sep)}
.gh{font-size:13px;line-height:18px;color:var(--label2);font-weight:600;padding:24px 32px 7px;letter-spacing:-.1px}
.chev{color:var(--label3);margin-left:auto;flex:none;display:flex;align-items:center}
.seg.ctr{justify-items:center}
.ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.ico svg{width:19px;height:19px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 16px 0}
.tile{background:var(--cell);border-radius:22px;padding:14px 16px 14px;min-height:96px}
.scr:not(.g) .tile{background:var(--cell2)}
[data-theme=light] .scr:not(.g) .tile{background:#F2F2F7}
.tile b{display:block;font-size:40px;line-height:46px;font-weight:700;letter-spacing:-.5px}
.tile span{font-size:15px;color:var(--label2)}
.sec2{font-size:20px;font-weight:700;line-height:25px;padding:24px 16px 8px;letter-spacing:-.3px}
.lrow{display:flex;gap:12px;padding:11px 16px;position:relative;align-items:center}
.lrow+.lrow::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--sep)}
.lrow .t{font-size:17px;font-weight:600;line-height:22px}
.lrow .s{font-size:15px;color:var(--label2);line-height:20px}
.lrow .m{margin-left:auto;text-align:right;font-size:15px;color:var(--label2);flex:none;align-self:flex-start;padding-top:1px}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bub{align-self:flex-end;max-width:310px;background:var(--bubble);color:#fff;border-radius:20px;padding:10px 14px;font-size:17px;line-height:22px}
[data-theme=dark] .bub{color:#14092E}
.ans{font-size:17px;line-height:24px;padding:0 4px}
.thread{position:absolute;left:0;right:0;top:150px;padding:4px 16px;display:flex;flex-direction:column;gap:14px}
.foot{display:flex;align-items:center;gap:8px;margin-top:8px;padding:0 4px;min-width:0}
.model{font-size:12px;line-height:16px;color:var(--label2);letter-spacing:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:14px;height:28px;padding:0 10px;background:var(--fill);font-size:13px;font-weight:600;letter-spacing:-.1px;flex:none;color:var(--label)}
.marks{display:inline-flex}
.mk{width:16px;height:16px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:700;box-shadow:0 0 0 1.5px var(--bg);letter-spacing:0}
.marks .mk+.mk{margin-left:-4px}
.inp{position:absolute;left:16px;right:16px;bottom:34px;height:48px;border-radius:24px;background:var(--glass);border:1px solid var(--glassline);display:flex;align-items:center;padding:0 6px 0 18px;color:var(--label2);font-size:17px;gap:10px;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.inp .mic{margin-left:auto;width:36px;height:36px;border-radius:18px;background:var(--acc);display:flex;align-items:center;justify-content:center;color:#fff}
[data-theme=dark] .inp .mic{color:#14092E}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--sheet);border-radius:38px 38px 0 0;z-index:25;box-shadow:0 -8px 30px rgba(0,0,0,.12)}
.grab{width:36px;height:5px;border-radius:3px;background:var(--label3);margin:6px auto 0}
.sh-h{display:flex;align-items:center;height:56px;padding:0 20px;position:relative}
.sh-h b{position:absolute;left:0;right:0;text-align:center;font-size:17px;font-weight:600;pointer-events:none}
.sh-h .done{margin-left:auto;color:var(--acc);font-weight:600;font-size:17px;position:relative}
.dimmer{position:absolute;inset:0;background:var(--dim);z-index:24}
.srow{display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;position:relative}
.srow+.srow::before{content:"";position:absolute;top:0;left:56px;right:0;height:.5px;background:var(--sep)}
.srow .mk{width:24px;height:24px;border-radius:12px;font-size:12px;box-shadow:none}
.srow .tt{font-size:15px;line-height:19px;font-weight:500}
.srow .st{font-size:13px;line-height:16px;color:var(--label2)}
.mini{width:32px;height:32px;border-radius:16px;background:var(--fill);display:flex;align-items:center;justify-content:center;color:var(--acc);flex:none}
.cap{height:30px;border-radius:15px;padding:0 14px;background:var(--fill);color:var(--acc);font-weight:600;font-size:15px;display:flex;align-items:center;flex:none}
.hero{height:50px;border-radius:25px;background:var(--acc);color:#fff;font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:center}
[data-theme=dark] .hero{color:#14092E}
.tbtn{height:44px;display:flex;align-items:center;justify-content:center;color:var(--acc);font-size:17px;font-weight:600}
.feat{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px}
.feat .fi{width:40px;height:40px;flex:none;color:var(--acc);display:flex;align-items:center;justify-content:center}
.feat .fi svg{width:30px;height:30px}
.feat b{display:block;font-size:17px;line-height:22px;font-weight:600}
.feat span{display:block;font-size:15px;line-height:20px;color:var(--label2)}
.blank{position:absolute;border:2px dashed var(--red);border-radius:18px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--red);font-size:13px;line-height:16px;font-weight:600;letter-spacing:0;background:color-mix(in srgb,var(--red) 6%,transparent)}
.blank.sm{border-radius:10px;border-width:1.5px;font-size:0}
.slot{position:relative;flex:none}
.fadein{transition:none}
.agrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 16px 0}
.acard{background:var(--cell);border-radius:24px;height:196px;position:relative;padding:0 14px}
[data-theme=light] .acard{background:#F2F2F7}
.acard .slot{position:absolute;left:0;right:0;top:4px;height:128px}
.acard .nm{position:absolute;left:14px;right:14px;top:134px;font-size:17px;font-weight:600;line-height:22px;text-align:center}
.acard .stt{position:absolute;left:8px;right:8px;top:158px;font-size:15px;line-height:20px;color:var(--label2);text-align:center;height:20px}
.seg{display:grid}.seg>*{grid-area:1/1}
.tl-legend{display:inline-flex;align-items:center;gap:8px}
.tl-legend i{display:inline-block;width:22px;height:16px;border:1.5px dashed var(--red);border-radius:5px}
@media (max-width:900px){.opts{grid-template-columns:1fr;gap:20px}.ok{grid-template-columns:1fr;gap:18px}.ok .phone{max-width:300px}}
@media (max-width:600px){.top{padding:28px 16px 4px}main{padding:0 12px}h1{font-size:32px}.sec{padding:20px 16px;border-radius:20px}.sec-h h3{font-size:21px}.state{margin-left:0;width:100%}.group-h{margin-top:30px}.finish{padding:32px 16px 20px}.top-in{flex-direction:column}.theme{order:-1;align-self:flex-end;margin-bottom:-8px}}
.state:empty{display:none}