.device{position:relative;z-index:1;min-width:0}
.board{position:relative;padding:96px 32px 88px 56px;border-radius:var(--r-lg);background:radial-gradient(120% 70% at 18% 0%,var(--hl-face),var(--clear) 62%),linear-gradient(160deg,var(--board-a),var(--board-b));box-shadow:var(--shadow-board)}
.stage{position:relative;min-width:0}
.win{position:relative;overflow:hidden;border-radius:var(--r-win);background:var(--bg-panel);border:1px solid var(--border);box-shadow:var(--shadow-win);transform:rotate(2deg)}
.win::before{content:"";position:absolute;z-index:2;left:6%;right:6%;top:0;height:1px;background:linear-gradient(90deg,var(--clear),var(--white),var(--clear))}
.win__bar{display:flex;align-items:center;gap:16px;height:44px;padding:0 14px;background:linear-gradient(180deg,var(--bg-panel),var(--bg));border-bottom:1px solid var(--border)}
.dots{display:flex;gap:6px;flex:none}
.dots i{display:block;width:10px;height:10px;border-radius:var(--r-circle)}
.dots i:nth-child(1){background:var(--error)}.dots i:nth-child(2){background:var(--warn)}.dots i:nth-child(3){background:var(--success)}
.win__tabs{display:flex;align-self:flex-end;gap:4px}
.wtab{display:flex;align-items:center;height:32px;padding:0 16px;font-size:12.5px;font-weight:var(--weight-semibold);color:var(--text-muted);border:1px solid var(--clear);border-bottom:0;border-radius:var(--r-sm) var(--r-sm) 0 0}
.wtab.is-on{height:33px;margin-bottom:-1px;background:var(--bg-panel);border-color:var(--border);color:var(--accent-dark)}
.win__lock{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:var(--weight-semibold);color:var(--accent-dark);white-space:nowrap}
.win__body{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:12px;padding:14px}
.win__body>*{min-width:0}
.routes__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;height:24px;margin-bottom:8px;padding:0 4px}
.routes__head b{font-size:12.5px;font-weight:var(--weight-bold)}
.routes__head span{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);white-space:nowrap}
.routes{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.route{display:flex;align-items:center;gap:10px;min-height:42px;padding:6px 10px;border:1px solid var(--clear);border-radius:var(--r-md);font-size:13px;line-height:1.3;color:var(--text-muted);min-width:0}
.route b{font-weight:var(--weight-bold);color:var(--text)}
.route__name{flex:1;min-width:0}
.route.is-sel{background:var(--accent-tint-2);border-color:var(--accent-a24);box-shadow:inset 0 1px 0 var(--white),0 4px 10px var(--accent-a08)}
.route.is-sel b{color:var(--accent-dark)}
.line{flex:none;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:11px;font-weight:var(--weight-semibold);white-space:nowrap}
.line::before{content:"";width:6px;height:6px;border-radius:var(--r-circle);background:currentColor;flex:none}
.line--iepl{background:var(--accent-tint);color:var(--accent-dark)}
.line--relay{background:var(--bg-panel-2);color:var(--text-muted)}
.line--direct{background:var(--success-tint);color:var(--success)}
.detail{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--border);box-shadow:inset 0 1px 3px var(--accent-a08)}
.conn{padding:10px 12px;border-radius:var(--r-md);background:var(--bg-panel);border:1px solid var(--border);box-shadow:inset 0 1px 0 var(--white),0 4px 10px var(--accent-a08)}
.conn__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.conn__state{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:var(--weight-bold);line-height:1.3}
.dot-ok{display:block;width:8px;height:8px;border-radius:var(--r-circle);background:var(--success);box-shadow:0 0 0 3px var(--success-tint);flex:none}
.switch{position:relative;flex:none;display:block;width:40px;height:22px;border-radius:var(--r-pill);background:var(--accent);box-shadow:inset 0 1px 2px var(--shade)}
.switch::after{content:"";position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:var(--r-circle);background:var(--white);box-shadow:0 1px 3px var(--shade)}
.conn__route{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;line-height:1.4;color:var(--text-muted)}
.conn__route b{color:var(--text);font-weight:var(--weight-semibold)}
.eyebrow{display:block;margin-bottom:6px;font-size:10.5px;font-weight:var(--weight-semibold);letter-spacing:.08em;line-height:1.3;color:var(--text-muted)}
.protos{display:flex;flex-wrap:wrap;gap:6px}
.protos span{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-xs);background:var(--bg-panel);border:1px solid var(--border);font-family:var(--font-mono);font-size:10.5px;font-weight:var(--weight-semibold);color:var(--text)}
.lockbadge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 12px 4px 10px;border-radius:var(--r-pill);background:var(--accent-tint);color:var(--accent-dark);font-size:12px;font-weight:var(--weight-bold);box-shadow:inset 0 0 0 1px var(--accent-a24)}
.plan{padding-top:10px;border-top:1px dashed var(--border);line-height:1.35}
.plan b{display:block;font-size:14px;font-weight:var(--weight-bold);color:var(--text)}
.plan small{display:block;margin-top:2px;font-size:11.5px;color:var(--text-muted)}
.devrow{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:var(--weight-semibold);line-height:1.35;color:var(--text)}
.devrow svg{color:var(--accent)}
.win__foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:34px;padding:6px 14px;border-top:1px solid var(--border);background:var(--bg);font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted)}
.win__foot b{font-family:var(--font-body);font-size:11px;font-weight:var(--weight-semibold);color:var(--text)}
.pill{position:absolute;z-index:3;top:-50px;left:-36px;isolation:isolate;display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 22px 0 9px;border:2px solid var(--clear);border-radius:var(--r-pill);background:linear-gradient(var(--white),var(--white)) padding-box,linear-gradient(100deg,var(--accent),var(--accent-2)) border-box;box-shadow:0 0 0 5px var(--accent-a08),0 0 22px var(--accent-a24),0 14px 32px var(--sky-a24)}
.pill::before{content:"";position:absolute;z-index:-1;inset:-8px;border-radius:var(--r-pill);background:linear-gradient(100deg,var(--accent),var(--accent-2));opacity:.14;filter:blur(12px)}
.pill__ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:var(--r-circle);background:var(--accent-tint);color:var(--accent)}
.pill__txt{font-size:12.5px;font-weight:var(--weight-bold);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-dark);white-space:nowrap}
.float-refund{position:absolute;z-index:3;right:-24px;bottom:-34px;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:var(--r-md);background:var(--bg-panel);border:1px solid var(--border);box-shadow:var(--shadow-float);line-height:1.3}
.float-refund__ic{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--r-sm);background:var(--success-tint);color:var(--success)}
.float-refund b{display:block;font-size:13.5px;font-weight:var(--weight-bold);color:var(--text)}
.float-refund small{display:block;margin-top:2px;font-size:11.5px;color:var(--text-muted)}
.float-chip{position:absolute;z-index:2;left:24px;bottom:24px;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 14px 6px 10px;border-radius:var(--r-pill);background:var(--accent-tint);color:var(--accent-dark);font-size:12.5px;font-weight:var(--weight-semibold);box-shadow:inset 0 0 0 1px var(--accent-a24),0 8px 18px var(--accent-a12);max-width:calc(100% - 48px)}
.feat{background:var(--bg);border-top:1px solid var(--border);padding-top:48px;padding-bottom:80px}
.feat h2{margin:0;text-align:center;font-weight:var(--weight-heading);font-size:40px;line-height:1.2;letter-spacing:-.025em;color:var(--text)}
.feat__tabs{margin-top:40px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.ftab{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-panel);font-family:var(--font-body);font-size:16px;font-weight:var(--weight-semibold);color:var(--text);text-align:left;cursor:pointer;white-space:nowrap}
.ftab__ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-sm);background:var(--accent-tint);color:var(--accent)}
.ftab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--white)}
.ftab[aria-selected="true"] .ftab__ic{background:var(--white);color:var(--accent)}
[role="tablist"]{min-width:0}
.tab-strip{display:flex;gap:12px;overflow-x:auto;padding:4px 3px 12px;max-width:100%}
.tab-strip [role="tab"]{flex-shrink:0}
.tab-panel{margin-top:32px;min-width:0}
.feature-detail{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:stretch}
.feature-copy{display:flex;flex-direction:column;gap:24px}
.feature-copy h3{margin:0}.feature-copy p{margin:0}
.feature-fact{margin-top:auto;padding:24px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-panel);box-shadow:var(--shadow-fact);color:var(--accent-dark);font-size:15px}
.feature-scene{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:24px;padding:56px 32px;border-radius:var(--r-lg);background:linear-gradient(145deg,var(--board-b),var(--hero-bottom));min-width:0}
.dialog-card{padding:24px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-panel);box-shadow:var(--shadow-float);min-width:0}
.dialog-card:nth-child(2){margin-top:48px}
.dialog-card h4{margin:0 0 16px;font-size:16px}.dialog-card p{font-size:15px;margin:0 0 12px}
.dialog-bubble{padding:12px;border-radius:var(--r-sm);background:var(--accent-tint-2);font-size:14px}
.toc-tabs{position:sticky;top:var(--toc-offset);z-index:20;display:flex;gap:8px;overflow-x:auto;max-width:100%;padding:10px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-fact);scrollbar-width:thin}
.toc-tabs a{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:40px;padding:8px 16px;border-radius:var(--r-sm);white-space:nowrap;font-size:14px;font-weight:var(--weight-semibold)}
.toc-tabs a:hover{background:var(--bg-panel-2)}
.toc-tabs a.is-current{background:var(--accent);color:var(--white)}
.toc-tabs.toc-static{position:static}
body:has(.toc-tabs) section[id]{scroll-margin-top:var(--anchor-offset)}
.faq{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-panel);box-shadow:var(--shadow-fact);margin-bottom:12px}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:18px 24px;cursor:pointer;font-weight:var(--weight-semibold);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;color:var(--accent-dark);font-family:var(--font-mono);font-size:22px}
.faq[open] summary::after{content:"−"}
.faq-answer{padding:0 24px 24px;color:var(--text-muted)}.faq-answer p:last-child{margin-bottom:0}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.plan-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:32px 24px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-panel);box-shadow:var(--shadow-fact)}
.plan-card h3{margin:8px 0 16px}
.plan-card.is-current{border-color:var(--accent);box-shadow:inset 0 1px 0 var(--white),0 16px 40px var(--accent-a12)}
.plan-card .btn{margin-top:auto;align-self:flex-start}
.plan-card ul{padding-left:20px;margin-bottom:32px}
.plan-price{font-family:var(--font-mono);font-size:36px;font-weight:var(--weight-heading);line-height:1.3;margin-bottom:12px}
.plan-price small{font-family:var(--font-body);font-size:15px;font-weight:var(--weight-medium);color:var(--text-muted)}
.badge{display:inline-flex;align-items:center;gap:6px;min-height:28px;max-width:100%;overflow:hidden;padding:4px 10px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--accent-tint);color:var(--accent-dark);font-size:12px;font-weight:var(--weight-bold);overflow-wrap:anywhere}
.badge--best{align-self:flex-start;background:var(--accent);border-color:var(--accent);color:var(--white)}
.plan-period{display:block;font-size:14px;color:var(--text-muted)}
.table-scroll{overflow-x:auto;max-width:100%;min-width:0;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-panel);margin-top:24px;margin-bottom:24px}
.data-table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px;text-align:left}
.data-table caption{text-align:left;padding:16px 20px;font-weight:var(--weight-bold);color:var(--text)}
.data-table th,.data-table td{padding:16px 20px;border-bottom:1px solid var(--border);word-break:keep-all}
.table-scroll th,.data-table th{background:var(--bg-panel-2);color:var(--text);font-weight:var(--weight-bold);white-space:nowrap}
.data-table td:first-child{color:var(--text);font-weight:var(--weight-semibold)}
.data-table tr:last-child td{border-bottom:0}
.data-table .region-row th{background:var(--accent-tint);color:var(--accent-dark)}
.prose>.data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
.platform-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.platform-card{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:24px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-fact);min-width:0}
.platform-card .platform-icon{width:32px;height:32px;color:var(--text)}
.platform-card h3{margin:0;font-size:20px}.platform-card p{margin:0;font-size:15px;color:var(--text-muted)}
.platform-card .btn{margin-top:auto}
.platform-marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;color:var(--text);padding-top:32px;padding-bottom:32px}
.platform-mark{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:var(--weight-bold);min-width:0}
.platform-mark .platform-icon{width:28px;height:28px}
.article-card{display:flex;flex-direction:column;padding:24px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-panel);box-shadow:var(--shadow-fact);min-width:0}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;color:var(--text-muted);margin-bottom:16px}
.article-card h3{margin:0 0 16px;font-size:22px}
.article-card p{color:var(--text-muted);font-size:15px}
.article-card>a:last-child{margin-top:auto;min-height:32px;display:inline-flex;align-items:center;color:var(--accent-dark);font-weight:var(--weight-semibold)}
.article-hero{position:relative;overflow-x:clip;background:var(--bg-panel);border-radius:var(--r-md);padding:40px 112px 40px 32px}
.article-hero::after{content:"BZ";position:absolute;right:24px;top:24px;width:64px;height:64px;display:grid;place-items:center;border:3px double var(--accent-dark);border-radius:var(--r-circle);transform:rotate(-11deg);font-family:var(--font-mono);font-weight:var(--weight-bold);color:var(--accent-dark)}
.callout{margin:24px 0;padding:24px;border-left:4px solid var(--accent);border-radius:var(--r-sm);background:var(--accent-tint-2);color:var(--text)}
.callout p:last-child{margin-bottom:0}
.promo-block{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;padding:32px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-panel);box-shadow:var(--shadow-fact);margin-top:48px}
.promo-copy{flex:1;min-width:180px}
.promo-copy strong{display:block;font-size:24px;font-weight:var(--weight-heading)}
.promo-copy p{margin:8px 0 0;color:var(--text-muted)}
.promo-block .btn{flex-shrink:0;white-space:nowrap}
.cta-band{background:var(--ink);color:var(--white);padding-top:48px;padding-bottom:48px}
.cta-band__in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px}
.cta-band h2{margin:0 0 12px;font-size:32px}.cta-band p{margin:0;color:var(--ink-text)}
.preview-section{padding-top:56px;padding-bottom:56px;border-top:1px solid var(--border)}
.preview-section h2{margin:0 0 32px}
.swatch-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.swatch{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--bg-panel);min-width:0}
.swatch__paint{height:64px;border-bottom:1px solid var(--border)}
.swatch code{display:block;padding:10px;font-size:12px}
.sw-bg{background:var(--bg)}.sw-panel{background:var(--bg-panel)}.sw-panel2{background:var(--bg-panel-2)}.sw-border{background:var(--border)}
.sw-accent{background:var(--accent)}.sw-dark{background:var(--accent-dark)}.sw-sky{background:var(--accent-2)}
.sw-text{background:var(--text)}.sw-muted{background:var(--text-muted)}.sw-success{background:var(--success)}.sw-warn{background:var(--warn)}.sw-error{background:var(--error)}
.sw-ink{background:var(--ink)}.sw-inktext{background:var(--ink-text)}.sw-white{background:var(--white)}
.sw-top{background:var(--hero-top)}.sw-bottom{background:var(--hero-bottom)}.sw-boarda{background:var(--board-a)}.sw-boardb{background:var(--board-b)}
.sw-tint{background:var(--accent-tint)}.sw-tint2{background:var(--accent-tint-2)}.sw-ok{background:var(--success-tint)}
.sw-a04{background:var(--accent-a04)}.sw-a06{background:var(--accent-a06)}.sw-a08{background:var(--accent-a08)}.sw-a12{background:var(--accent-a12)}.sw-a16{background:var(--accent-a16)}.sw-a24{background:var(--accent-a24)}
.sw-s04{background:var(--sky-a04)}.sw-s24{background:var(--sky-a24)}.sw-hl{background:var(--hl)}.sw-hlsoft{background:var(--hl-soft)}.sw-hlface{background:var(--hl-face)}
.sw-shade{background:var(--shade)}.sw-ring{background:var(--flag-ring)}.sw-red{background:var(--flag-red)}.sw-blue{background:var(--flag-blue)}.sw-navy{background:var(--flag-navy)}.sw-flagwhite{background:var(--flag-white)}.sw-veil{background:var(--veil)}.sw-clear{background:var(--clear)}
.button-samples{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.type-display{font-family:var(--font-display);font-size:64px;font-weight:var(--weight-display);line-height:1.1;letter-spacing:var(--tracking-display)}
.state-hover{box-shadow:var(--shadow-float);transform:translateY(-1px)}
.state-focus{outline:2px solid var(--accent);outline-offset:3px}
.state-active{transform:translateY(1px)}
@media(max-width:1100px){
  .win{transform:none}
  .feat__tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .ftab{flex:0 0 auto;min-width:200px;scroll-snap-align:start}
}
@media(max-width:800px){
  .feature-detail{grid-template-columns:minmax(0,1fr);gap:24px}
  .plan-grid{grid-template-columns:minmax(0,1fr)}
  .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  .board{padding:20px}
  .stage{display:flex;flex-direction:column;gap:16px}
  .pill,.float-refund,.float-chip{position:static}
  .pill{order:-1;align-self:flex-start;margin:6px 0 0 6px;max-width:100%}
  .float-refund{align-self:flex-start}
  .float-chip{margin-top:16px;max-width:100%}
  .win__body{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .win{transform:none}.device{max-width:100%}.board{padding:16px}
  .pill{height:auto;min-height:52px;padding:8px 12px 8px 8px;gap:8px;margin-left:0}
  .pill__txt{letter-spacing:.12em;font-size:11.5px;white-space:normal}
  .win__bar{gap:8px;padding-inline:10px}.wtab{padding-inline:10px}.win__lock{font-size:10px}
  .win__body{padding:10px}.route{gap:8px;padding-inline:8px}
  .feat h2{font-size:28px}.feature-scene{padding:24px 16px;gap:16px;grid-template-columns:minmax(0,1fr)}
  .dialog-card:nth-child(2){margin-top:0}
  .platform-grid{grid-template-columns:minmax(0,1fr)}
  .platform-marks{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .platform-mark{font-size:17px}
  .swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .type-display{font-size:38px}
  .article-hero{padding:104px 24px 24px}
  .article-hero::after{top:20px;right:20px}
  .promo-block{padding:24px}.promo-copy{min-width:0;flex-basis:100%}
  .faq summary{padding-inline:20px}.faq-answer{padding-inline:20px}
}