/* ==========================================================================
   ide-home.css — 首頁內容（pages/home-ide）。外框在 ide-shell.css。
   ========================================================================== */
html[data-theme="light"] :is(.term,.cmd,.ps,.idea-head){--chrome:#0B1C2E; --editor:#0A1929; --panel:#0E2136; --panel-2:#12283F;
  --line:#1C3652; --line-soft:#15304A;
  --fg:#EAF3FA; --fg-2:#B9CCDB; --muted:#8AA1B5; --dim:#4F6882;
  --accent:#3CC6F2; --accent-ink:#04121D; --accent-soft:rgba(60,198,242,.10); --accent-line:rgba(60,198,242,.42);
  --ok:#4ADE80; --data:#2DD4BF; --kw:#C792EA; --str:#A5D86E;
  color:var(--fg-2);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:10px;font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,filter .15s ease,border-color .15s ease,background .15s ease;white-space:nowrap}
.btn .ic{width:18px;height:18px;transition:transform .2s ease}
.btn:hover .ic{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 28px -12px var(--accent)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--fg);background:transparent}
.btn-ghost:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.btn-ghost:hover .ic{transform:none}
.btn-lg{height:54px;padding:0 26px;font-size:16px}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.link{color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.link .ic{width:16px;height:16px;transition:transform .2s}
.link:hover .ic{transform:translateX(3px)}
.eyebrow{display:flex;align-items:center;gap:10px;font:500 12.5px/1.4 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.stepline{display:flex;align-items:center;gap:12px;font:600 12.5px/1.4 var(--font-mono);letter-spacing:.12em;color:var(--accent);margin-bottom:16px}
.stepline .of{color:var(--muted);letter-spacing:.04em}
.stepline i{width:40px;height:1px;background:var(--line)}
.stepline .nm{color:var(--fg-2);letter-spacing:.04em;font-family:var(--font-sans);font-weight:600}
.cmdline{font:500 13px/1.4 var(--font-mono);color:var(--muted);margin-bottom:12px}
.cmdline .p{color:var(--accent)}
.sec-head{display:grid;gap:14px 40px;margin-bottom:32px;align-items:end}
@container (min-width:820px){
  .sec-head.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.sec-head h2{font-size:clamp(1.65rem,1.1rem + 2.1cqi,2.4rem);font-weight:800;line-height:1.28;letter-spacing:-.01em;text-wrap:balance}
.sec-head .aside{display:flex;flex-direction:column;gap:10px}
.sec-head .aside p{font-size:15.5px;line-height:1.8;color:var(--fg-2);text-wrap:pretty}
.sec-head .tagline{font:500 12px var(--font-mono);color:var(--muted);letter-spacing:.08em}
.sec-sub{font:13px var(--font-mono);color:var(--muted);margin-top:10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--card-shadow)}
.next{display:flex;align-items:center;gap:14px;margin-top:44px;padding:16px 20px;border:1px dashed var(--line);border-radius:12px;color:var(--fg);transition:border-color .2s,background .2s}
.next:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.next .lbl{font:12.5px var(--font-mono);color:var(--muted)}
.next .go{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15.5px}
.next .n{font:600 12px var(--font-mono);color:var(--accent)}
.next .hint{margin-left:auto;font-size:13.5px;color:var(--muted);text-align:right}
.next .ic{width:18px;height:18px;color:var(--accent);transform:rotate(90deg);transition:transform .2s}
.next:hover .ic{transform:rotate(90deg) translateX(3px)}
@container (max-width:560px){
  .next{flex-wrap:wrap}
  .next .hint{display:none}
  .next .ic{margin-left:auto}
}
.hero-grid{display:grid;gap:44px}
@container (min-width:880px){
  .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:center;gap:52px}
}
.hero h1{font-size:clamp(2rem,10cqi,3.9rem);font-weight:900;line-height:1.14;letter-spacing:-.015em;margin-bottom:24px}
@container (min-width:880px){
  .hero h1{font-size:clamp(2.3rem,5.3cqi,3.9rem)}
}
.hero h1 .line{display:block;white-space:nowrap}
.hl{color:var(--accent)}
html[data-theme="dark"] .hl{text-shadow:0 0 28px rgba(60,198,242,.38)}
.lead{font-size:clamp(1rem,.94rem + .35cqi,1.13rem);line-height:1.85;color:var(--fg-2);max-width:36em;margin-bottom:30px;text-wrap:pretty}
.lead strong{color:var(--fg);font-weight:700}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.tour-hint{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;color:var(--muted);transition:color .15s}
.tour-hint b{color:var(--accent);font-weight:600}
.tour-hint .ic{width:16px;height:16px;color:var(--accent);transform:rotate(90deg)}
.tour-hint:hover{color:var(--fg)}
.trust{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;margin:30px 0 0;padding-top:24px;border-top:1px dashed var(--line)}
.trust div{padding:0 28px;border-left:1px solid var(--line-soft)}
.trust div:first-child{padding-left:0;border-left:0}
.trust dt{font:800 clamp(1.5rem,1.2rem + 1cqi,1.9rem)/1.1 var(--font-sans);color:var(--fg);font-variant-numeric:tabular-nums}
.trust dt span{color:var(--accent)}
.trust dd{margin:6px 0 0;font-size:13px;color:var(--muted)}
.hero-panel{position:relative;background:var(--chrome);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.hp-tabs{display:flex;align-items:stretch;height:46px;border-bottom:1px solid var(--line-soft);padding:0 6px}
.hp-tab{text-decoration:none;display:flex;align-items:center;gap:8px;padding:0 14px;border:0;background:none;color:var(--muted);font:600 12.5px var(--font-mono);letter-spacing:.06em;cursor:pointer;position:relative;white-space:nowrap}
.hp-tab:hover{color:var(--fg)}
.hp-tab .ic{width:15px;height:15px}
.hp-tab.is-on{color:var(--fg)}
.hp-tab.is-on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}
.hp-note{margin-left:auto;align-self:center;font-size:12px;color:var(--muted);padding-right:10px;white-space:nowrap}
.hp-body{position:relative}
.hp-pane{transition:opacity .25s}
.hp-pane:not(.is-on){opacity:0;visibility:hidden}
#pane-prev{padding:14px 14px 16px}
.browser{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
.browser-bar{display:flex;align-items:center;gap:10px;height:30px;padding:0 10px;background:#EDF2F7;border-bottom:1px solid #DCE4EC}
.browser-bar .dots{display:flex;gap:5px}
.browser-bar .dots i{width:8px;height:8px;border-radius:50%;background:#F87171}
.browser-bar .dots i:nth-child(2){background:#FBBF24}
.browser-bar .dots i:nth-child(3){background:#34D399}
.browser-bar .url{flex:1;max-width:250px;margin:0 auto;height:18px;border-radius:6px;background:#fff;font:10.5px/18px var(--font-mono);color:#64748B;text-align:center;box-shadow:inset 0 0 0 1px #E2E8F0}
.stage{position:relative;aspect-ratio:16/10;background:#fff;color:#0B1B2B;overflow:hidden;container-type:inline-size;font-family:var(--font-sans)}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.scene.is-on{opacity:1;visibility:visible}
.ms-nav{display:flex;align-items:center;gap:3cqi;height:11cqi;padding:0 4cqi;border-bottom:1px solid #EEF2F6}
.ms-nav img{height:5cqi;width:auto}
.ms-links{display:flex;gap:2.2cqi;margin-left:auto}
.ms-links i{display:block;width:6cqi;height:1.1cqi;border-radius:2px;background:#CBD5E1}
.ms-btn{font-size:clamp(7px,2cqi,11px);font-weight:700;color:#fff;background:#0B2545;padding:.8cqi 2cqi;border-radius:1cqi;white-space:nowrap}
.ms-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:4cqi;padding:5cqi 4cqi;height:calc(100% - 11cqi)}
.ms-copy{display:flex;flex-direction:column;gap:2.4cqi;min-width:0}
.ms-h{display:grid;font-weight:900;font-size:clamp(11px,4.9cqi,26px);line-height:1.22;border-radius:1cqi;padding:.6cqi 1cqi;margin:-.6cqi -1cqi}
.ms-h>span{grid-area:1/1;transition:opacity .45s ease,transform .45s ease,color .3s}
.ms-new{opacity:0;transform:translateY(8px)}
.ms-new b{color:#0A74AE;font-weight:900}
.ms-lines{display:flex;flex-direction:column;gap:1.3cqi}
.ms-lines i{display:block;height:1.2cqi;border-radius:3px;background:#E2E8F0;width:92%}
.ms-lines i+i{width:70%}
.ms-cta{align-self:flex-start;font-size:clamp(7px,2.1cqi,11px);font-weight:700;color:#fff;background:#0A74AE;padding:1.1cqi 2.4cqi;border-radius:1.2cqi}
.ms-art{border-radius:1.8cqi;background:
  linear-gradient(#8DB9D6,#6D9FC2) 0 100%/100% 30% no-repeat,
  linear-gradient(100deg,transparent 20%,#FFFFFF 20% 47%,#D9E3EC 47% 55%,#274259 55% 66%,transparent 66%) 0 40%/100% 46% no-repeat,
  linear-gradient(180deg,#BFDDF1,#EDF5FB)}
.ms-diff{position:absolute;right:4cqi;top:14.5cqi;font:600 clamp(8px,2.1cqi,11px) var(--font-mono);color:#334155;background:#F1F5F9;border:1px solid #E2E8F0;border-radius:99px;padding:.6cqi 2cqi;opacity:0;transform:translateY(6px);transition:.35s}
.ms-diff em{font-style:normal}
.ms-diff .add{color:#15803D}
.ms-diff .del{color:#DC2626}
.sc-web.run .ms-old{opacity:.4;color:#DC2626;text-decoration:line-through;text-decoration-thickness:2px}
.sc-web.done .ms-old{opacity:0;transform:translateY(-8px)}
.sc-web.done .ms-new{opacity:1;transform:none}
.sc-web.done .ms-h{animation:flash 1.4s ease}
.sc-web.done .ms-diff{opacity:1;transform:none}
@keyframes flash{0%{background:rgba(60,198,242,.30)}100%{background:transparent}}
.sc-flow{padding:3.6cqi 4.5cqi;display:flex;flex-direction:column;gap:2.8cqi;background:linear-gradient(#fff,#F6F9FC)}
.fl-title{font:600 clamp(8px,2.2cqi,12px) var(--font-mono);color:#64748B;display:flex;align-items:center;gap:1.4cqi}
.fl-title::before{content:"";width:1.6cqi;height:1.6cqi;border-radius:50%;background:#CBD5E1;transition:background .3s}
.sc-flow.run .fl-title::before{background:#22C55E}
.fl-nodes{display:grid;grid-template-columns:1fr 3.2cqi 1fr 3.2cqi 1fr 3.2cqi 1fr;align-items:center}
.fl-node{display:flex;flex-direction:column;align-items:center;gap:1cqi;padding:2cqi 1cqi;border:1px solid #E2E8F0;border-radius:2cqi;background:#fff;text-align:center;transition:border-color .3s,background .3s,box-shadow .3s;transition-delay:calc(var(--d)*150ms)}
.fl-node b{font-size:clamp(8px,2.3cqi,12.5px);font-weight:700;color:#0F172A;white-space:nowrap}
.fl-ic{width:7cqi;height:7cqi;border-radius:1.6cqi;display:grid;place-items:center;background:#F1F5F9;color:#64748B;transition:inherit}
.fl-ic svg{width:4cqi;height:4cqi}
.fl-link{height:2px;background:#E2E8F0;position:relative;overflow:hidden}
.fl-link::after{content:"";position:absolute;inset:0;background:#0A74AE;transform:scaleX(0);transform-origin:left;transition:transform .3s;transition-delay:calc(var(--d)*150ms)}
.sc-flow.run .fl-node{border-color:#7CC4EA;background:#F0F8FD;box-shadow:0 .8cqi 2.4cqi -1cqi rgba(10,116,174,.35)}
.sc-flow.run .fl-ic{background:#0A74AE;color:#fff}
.sc-flow.run .fl-link::after{transform:scaleX(1)}
.fl-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1cqi;max-width:66%}
.fl-log li{display:flex;align-items:center;gap:2cqi;font:500 clamp(8px,2.3cqi,12.5px) var(--font-mono);color:#334155;padding:1cqi 2.2cqi;border-radius:1.4cqi;background:#fff;border:1px solid #EEF2F6;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s;transition-delay:calc(var(--d)*170ms)}
.fl-log time{color:#94A3B8}
.fl-log i{margin-left:auto;font-style:normal;color:#16A34A;font-weight:700}
.sc-flow.done .fl-log li{opacity:1;transform:none}
.sc-crm{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5cqi;padding:4.5cqi;background:linear-gradient(#fff,#F6F9FC)}
.crm-chat,.crm-table{border:1px solid #E2E8F0;border-radius:2cqi;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.cc-head,.ct-head{font:600 clamp(8px,2.1cqi,11.5px) var(--font-mono);color:#64748B;padding:1.8cqi 2.6cqi;border-bottom:1px solid #EEF2F6;white-space:nowrap}
.cc-body{display:flex;flex-direction:column;gap:1.8cqi;padding:2.6cqi}
.cc-msg{font-size:clamp(8px,2.3cqi,12.5px);line-height:1.5;padding:1.4cqi 2.2cqi;border-radius:1.8cqi;max-width:92%}
.cc-msg.me{align-self:flex-end;background:#0A74AE;color:#fff;border-bottom-right-radius:.5cqi}
.cc-msg.bot{align-self:flex-start;background:#F1F5F9;color:#0F172A;border-bottom-left-radius:.5cqi;opacity:0;transform:translateY(5px);transition:.35s .2s}
.sc-crm.run .cc-msg.bot{opacity:1;transform:none}
.ct-rows{display:flex;flex-direction:column}
.ct-row{display:grid;grid-template-columns:1fr auto;gap:1cqi 2cqi;align-items:center;padding:2cqi 2.6cqi;border-bottom:1px solid #F1F5F9;font-size:clamp(8px,2.3cqi,12.5px)}
.ct-row.new{background:#F0F8FD;opacity:0;transform:translateY(-6px);transition:.4s .45s}
.ct-row.new b{color:#0F172A}
.st{font:600 clamp(7px,1.9cqi,10.5px) var(--font-mono);color:#0A74AE;background:#E0F2FE;padding:.4cqi 1.6cqi;border-radius:99px;white-space:nowrap}
.ln{grid-column:1/-1;font:600 clamp(7px,1.9cqi,10.5px) var(--font-mono);color:#16A34A;display:flex;align-items:center;gap:1cqi;opacity:0;transition:opacity .3s}
.ln svg{width:2.6cqi;height:2.6cqi}
.ct-row.ghost i{display:block;height:1.2cqi;border-radius:3px;background:#EEF2F6;width:70%}
.ct-row.ghost i+i{width:9cqi;justify-self:end}
.sc-crm.run .ct-row.new{opacity:1;transform:none}
.sc-crm.done .ln{opacity:1}
.cmd{position:relative;z-index:2;margin:-40px 12px 0 auto;width:min(90%,390px);display:grid;grid-template-columns:30px minmax(0,1fr) 36px;gap:12px;align-items:center;padding:12px 12px 12px 14px;background:var(--panel);border:1px solid var(--accent-line);border-radius:14px;box-shadow:0 20px 44px -16px rgba(0,0,0,.5);color:var(--fg-2)}
.cmd-ico{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:var(--ok);transition:border-color .2s}
.cmd-ico svg{width:15px;height:15px;opacity:0;transition:opacity .2s}
.cmd-ico.busy{border-color:var(--accent);border-top-color:transparent;animation:spin .8s linear infinite}
.cmd-ico.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.cmd-ico.ok svg{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.cmd-text{color:var(--fg);font-weight:700;font-size:14.5px;line-height:1.4;min-height:1.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ide-caret{display:inline-block;width:2px;height:1.05em;background:var(--accent);vertical-align:-3px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.cmd-status{font-size:12.5px;color:var(--muted);min-height:1.35em;margin-top:2px;transition:color .2s}
.cmd-status.ok{color:var(--ok)}
.cmd-send{width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.cmd-send svg{width:17px;height:17px}
.scene-meta{padding:16px 2px 0}
.pills-q{font:500 12.5px var(--font-mono);color:var(--muted);margin-bottom:10px}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--fg-2);font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s}
.pill:hover{color:var(--fg);border-color:var(--accent-line)}
.pill .n{font:500 11px var(--font-mono);color:var(--muted)}
.pill[aria-selected="true"]{color:var(--fg);border-color:var(--accent-line);background:var(--accent-soft)}
.pill[aria-selected="true"] .n{color:var(--accent)}
.meta-stack{display:grid;margin-top:14px}
.meta{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.meta.is-on{opacity:1;visibility:visible}
.meta .cap{font:500 12px var(--font-mono);color:var(--accent)}
.meta h3{font-size:16.5px;font-weight:800;margin:4px 0 6px}
.meta p{font-size:14px;line-height:1.75;color:var(--fg-2);margin-bottom:10px;text-wrap:pretty}
.meta p b{color:var(--fg)}
.meta-links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.meta-links a:not(.link){color:var(--fg-2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.meta-links a:not(.link):hover{color:var(--fg)}
.term{background:var(--chrome);border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 4px)}
.term-head{display:flex;align-items:stretch;gap:18px;height:38px;padding:0 18px;font:600 12px var(--font-mono);letter-spacing:.1em;color:var(--muted);border-bottom:1px solid var(--line-soft)}
.term-head span{display:flex;align-items:center}
.term-head .on{color:var(--fg);position:relative}
.term-head .on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.term-head .win{margin-left:auto;gap:16px;opacity:.7}
.term-head .win svg{width:13px;height:13px}
.term-body{padding:16px 22px 20px;font:14px/1.9 var(--font-mono)}
.term-body .path{color:var(--muted)}
.term-body .p{color:var(--ok)}
.term-cmd{color:var(--fg)}
.term-note{color:var(--muted);font-size:13px}
.tour{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;margin-top:10px}
.tour a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px;border-radius:9px;border:1px solid var(--line);color:var(--fg-2);font:600 13.5px var(--font-sans);transition:.15s}
.tour a .n{font:600 11.5px var(--font-mono);color:var(--accent)}
.tour a:hover,.tour a.is-active{border-color:var(--accent-line);color:var(--fg);background:var(--accent-soft)}
.tour .ar{color:var(--dim);font-size:13px}
.cases{display:grid;gap:18px}
@container (min-width:720px){
  .cases{grid-template-columns:1fr 1fr}
}
.case{padding:22px;display:flex;flex-direction:column;gap:16px;transition:border-color .2s,transform .2s}
.case:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.case-top{display:flex;align-items:center;gap:12px}
.case-top img{width:40px;height:40px;padding:5px;border-radius:10px;background:var(--accent-soft);border:1px solid var(--line-soft)}
.case-no{font:500 12.5px var(--font-mono);color:var(--accent)}
.case-top .rule{flex:1;height:1px;background:var(--line)}
.case-top .file{font:12px var(--font-mono);color:var(--muted)}
.diff{border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;flex:1}
.diff-row{display:grid;grid-template-columns:30px minmax(0,1fr)}
.diff-row .sign{font:700 15px/1 var(--font-mono);display:flex;justify-content:center;padding-top:15px;user-select:none}
.diff-row .txt{padding:12px 16px 14px 0}
.diff-row.minus{background:var(--pain-soft)}
.diff-row.plus{background:var(--solve-soft);flex:1;border-top:1px solid var(--line-soft)}
.minus .sign,.minus .tag{color:var(--pain)}
.plus .sign,.plus .tag{color:var(--solve)}
.tag{font:600 12px var(--font-mono);letter-spacing:.06em;margin-bottom:5px}
.pain-q{color:var(--fg);font-weight:700;font-size:15.5px;line-height:1.65}
.plus p{font-size:15px;line-height:1.75;color:var(--fg-2)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:12px var(--font-mono);padding:3px 10px;border:1px solid var(--line);border-radius:99px;color:var(--muted)}
.sec-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft);font-size:14.5px}
.sec-foot .note{color:var(--fg-2)}
.sec-foot .note .c{font-family:var(--font-mono);color:var(--muted)}
.sec-foot .note b{color:var(--fg)}
.svc-grid{display:grid;gap:16px}
@container (min-width:540px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:860px){
  .svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.svc{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 22px 24px;transition:border-color .2s,transform .2s,background .2s}
.svc:hover{border-color:var(--accent-line);transform:translateY(-3px)}
.svc-no{display:flex;align-items:center;gap:10px;font:500 13px var(--font-mono);color:var(--accent)}
.svc-no::after{content:"";width:26px;height:1px;background:currentColor;opacity:.5}
.svc-badge{margin-left:auto;font:600 11px var(--font-mono);padding:2px 9px;border-radius:99px;background:var(--accent);color:var(--accent-ink)}
.svc-head{display:flex;align-items:center;gap:14px}
.svc-head img{width:46px;height:46px;flex:none}
.svc h3{font-size:18px;font-weight:800;line-height:1.35;word-break:keep-all;text-wrap:balance}
.svc-arrow{margin-left:auto;color:var(--accent);transition:transform .2s}
.svc:hover .svc-arrow{transform:translateX(4px)}
.svc p{font-size:15px;line-height:1.75;color:var(--fg-2)}
.svc.is-featured{border-color:var(--accent-line);background:linear-gradient(160deg,var(--accent-soft),transparent 55%),var(--panel)}
.branch{display:flex;align-items:center;gap:12px;margin:44px 0 16px;font:500 12.5px var(--font-mono);color:var(--muted)}
.branch::before{content:"";width:22px;height:22px;border-left:2px solid var(--line);border-bottom:2px solid var(--line);border-bottom-left-radius:8px;margin-top:-14px}
.branch b{color:var(--data);font-weight:600}
.rh{display:grid;gap:30px;padding:clamp(24px,4.4cqi,44px);border-radius:18px;border:1px solid color-mix(in srgb,var(--data) 38%,transparent);background:radial-gradient(90% 120% at 100% 0%,var(--data-soft),transparent 60%),var(--panel);box-shadow:var(--card-shadow);scroll-margin-top:calc(var(--nav-h) + 16px)}
@container (min-width:860px){
  .rh{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center;gap:44px}
}
.rh .eyebrow{color:var(--data);letter-spacing:.16em}
.rh h3{font-size:clamp(1.5rem,1.05rem + 1.8cqi,2.1rem);font-weight:800;line-height:1.3;margin-bottom:16px;text-wrap:balance}
.rh h3 .t{color:var(--data)}
.rh p{font-size:15.5px;line-height:1.85;margin-bottom:24px;text-wrap:pretty}
.rh p b{color:var(--fg)}
.btn-teal{background:var(--data);color:var(--data-ink)}
.btn-teal:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-teal-ghost{border-color:color-mix(in srgb,var(--data) 50%,transparent);color:var(--data)}
.btn-teal-ghost:hover{border-color:var(--data);background:var(--data-soft)}
.ps{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--editor)}
.ps-head{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line-soft);font:12.5px var(--font-mono);color:var(--muted)}
.ps-head .p{color:var(--data)}
.ps-grid{display:grid;grid-template-columns:1fr 1fr}
.ps-cell{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.ps-cell:nth-child(odd){border-right:1px solid var(--line-soft)}
.ps-cell:nth-last-child(-n+2){border-bottom:0}
.ps-cell img{width:34px;height:34px;border-radius:9px;background:#fff;flex:none}
.ps-cell b{display:block;color:var(--fg);font-size:14.5px;line-height:1.3}
.ps-cell span{font:12px var(--font-mono);color:var(--muted)}
.proof-stats{display:flex;flex-wrap:wrap;gap:12px 36px}
.proof-stats b{display:block;font:800 clamp(1.7rem,1.3rem + 1.6cqi,2.3rem)/1.1 var(--font-sans);color:var(--fg);font-variant-numeric:tabular-nums}
.proof-stats b .s{color:var(--accent)}
.proof-stats .lbl{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.posts{display:grid;gap:18px}
@container (min-width:640px){
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:920px){
  .posts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.post{display:flex;flex-direction:column;overflow:hidden;transition:border-color .2s,transform .2s}
.post:hover{border-color:var(--accent-line);transform:translateY(-3px)}
.post-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel-2)}
.post-media img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s ease}
.post:hover .post-media img{transform:scale(1.04)}
.ovl{position:absolute;top:10px;font:11px var(--font-mono);padding:3px 8px;border-radius:6px;background:rgba(4,14,26,.78);color:#CFE6F5;backdrop-filter:blur(4px)}
.ovl.l{left:10px}
.ovl.r{right:10px}
.post-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-cat{font:500 11.5px var(--font-mono);letter-spacing:.12em;color:var(--accent)}
.post h3{font-size:17.5px;font-weight:800;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post p{font-size:14px;line-height:1.75;color:var(--fg-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post .chips{margin-top:auto;padding-top:4px}
.post-more{font:600 13px var(--font-mono);color:var(--accent)}
.links-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;margin-top:28px}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));counter-reset:none}
@container (min-width:700px){
  .flow{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container (min-width:1000px){
  .flow{grid-template-columns:repeat(6,minmax(0,1fr))}
}
.flow li{position:relative;padding:18px 18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--card-shadow)}
.flow .n{font:600 12px var(--font-mono);color:var(--accent)}
.flow b{display:block;font-size:18px;color:var(--fg);margin:10px 0 2px}
.flow span:last-child{font-size:13.5px;color:var(--muted)}
.flow li.key{border-color:color-mix(in srgb,var(--data) 45%,transparent);background:linear-gradient(160deg,var(--data-soft),transparent 60%),var(--panel)}
.flow li.key .n{color:var(--data)}
@container (min-width:1000px){
  .flow li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;width:6px;height:6px;border-top:2px solid var(--dim);border-right:2px solid var(--dim);transform:translateY(-50%) rotate(45deg)}
}
.handoff{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:16px 18px;border-radius:12px;background:var(--data-soft);border:1px solid color-mix(in srgb,var(--data) 28%,transparent);font-size:15px;line-height:1.8;color:var(--fg-2)}
.handoff .ic{color:var(--data);margin-top:4px}
.handoff b{color:var(--fg)}
.faq{overflow:hidden}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;display:grid;grid-template-columns:42px minmax(0,1fr) 20px;align-items:center;gap:6px;padding:19px 22px;cursor:pointer;color:var(--fg);font-weight:700;font-size:16px;line-height:1.55;transition:background .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--panel-2)}
.faq .qn{font:500 12.5px var(--font-mono);color:var(--accent)}
.pm{position:relative;width:14px;height:14px;justify-self:end}
.pm::before,.pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--muted);border-radius:2px;transition:transform .2s,opacity .2s}
.pm::after{transform:rotate(90deg)}
.faq details[open] .pm::after{transform:rotate(0);opacity:0}
.faq details[open] summary{color:var(--accent)}
.faq .ans{padding:0 22px 22px 70px;color:var(--fg-2);font-size:15px;line-height:1.85;text-wrap:pretty}
@container (max-width:560px){
  .faq .ans{padding-left:22px}
  .faq summary{grid-template-columns:34px minmax(0,1fr) 16px}
}
.start-grid{display:grid;gap:18px}
@container (min-width:860px){
  .start-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
}
.start-card{padding:clamp(22px,3.4cqi,34px);display:flex;flex-direction:column;gap:14px}
.route{font:600 12.5px var(--font-mono);color:var(--accent);letter-spacing:.04em}
.start-card h3{font-size:clamp(1.3rem,1rem + 1.1cqi,1.65rem);font-weight:800;line-height:1.4;text-wrap:balance}
.start-card p{font-size:15px;line-height:1.8}
.start-card.primary{border-color:var(--accent-line);background:radial-gradient(90% 90% at 0% 0%,var(--accent-soft),transparent 60%),var(--panel)}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.checks li{display:flex;gap:10px;align-items:flex-start}
.checks .ic{width:18px;height:18px;color:var(--ok);margin-top:4px}
.start-card .cta-row{margin-top:auto;padding-top:10px}
.start-card.idea{padding:0;overflow:hidden;gap:0}
.idea-head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line-soft);font:13.5px var(--font-mono);background:var(--chrome)}
.idea-head .p{color:var(--ok)}
.kw{color:var(--kw)}
.str{color:var(--str)}
.idea-head .badge{margin-left:auto;font-size:11.5px;letter-spacing:.08em;color:var(--accent)}
.idea-body{padding:clamp(22px,3.4cqi,34px);display:flex;flex-direction:column;gap:12px}
.idea-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.field{flex:1 1 280px;min-width:0;display:flex;align-items:center;gap:10px;height:54px;padding:0 16px;border:1px solid var(--line);border-radius:11px;background:var(--editor);font:14px var(--font-mono);color:var(--muted);transition:border-color .15s,box-shadow .15s}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field .p{color:var(--accent)}
.field input{flex:1;min-width:0;width:0;border:0;background:transparent;color:var(--fg);font:15.5px var(--font-sans);outline:none}
.field input::placeholder{color:var(--muted)}
.idea-form .btn{height:54px}
@container (max-width:460px){
  .field .lbl{display:none}
  .idea-form .btn{flex:1 1 100%}
}
.examples{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:12.5px var(--font-mono);color:var(--muted)}
.examples button{font:13px var(--font-sans);padding:4px 12px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--fg-2);cursor:pointer}
.examples button:hover{border-color:var(--accent-line);color:var(--fg)}
.idea-out{margin-top:6px;padding:16px 18px;border:1px dashed var(--accent-line);border-radius:11px;background:var(--accent-soft);font-size:14.5px}
.idea-out .o{font:12.5px var(--font-mono);color:var(--muted);margin-bottom:6px}
.idea-out p{margin-bottom:8px}
.start-alt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:20px;font-size:15px;color:var(--fg-2)}
.start-alt .c{font-family:var(--font-mono);color:var(--muted)}
.start-alt a{color:var(--data);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.start-alt a .ic{width:16px;height:16px}
html[data-theme="light"] .hl{background:linear-gradient(transparent 60%,rgba(30,154,209,.22) 60% 90%,transparent 90%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .04em}
html[data-theme="light"] .hero-panel{background:#fff}
html[data-theme="light"] .btn-ghost{background:#fff}
html[data-theme="light"] .next{background:rgba(255,255,255,.6)}
html[data-theme="light"] .next:hover{background:#fff}
html[data-theme="light"] .cmd{box-shadow:0 20px 40px -18px rgba(4,18,29,.55)}
html[data-theme="light"] :is(.statusbar .cur{color:#fff}
@media (max-width:719px){
  .term-body{padding:14px 16px 18px;font-size:13px}
  .term-head{padding:0 16px}
  .tour .ar{display:none}
  .trust div{padding:0 16px}
  .cmd{margin:-30px 8px 0 auto;width:calc(100% - 16px)}
  .hp-note{display:none}
  .ps-grid{grid-template-columns:1fr}
  .ps-cell:nth-child(odd){border-right:0}
  .ps-cell:nth-last-child(2){border-bottom:1px solid var(--line-soft)}
}
@media (max-width:440px){
  .term-head .opt{display:none}
  .btn-lg{height:50px;padding:0 20px;font-size:15px}
  .cta-row .btn{flex:1 1 100%}
  .hp-tab{padding:0 10px}
}
.idea-log{margin-top:4px;max-height:420px;overflow-y:auto;font-size:14.5px;line-height:1.85;color:var(--fg-2);white-space:pre-wrap;word-wrap:break-word;scrollbar-width:thin}
.idea-log strong{color:var(--fg)}
.idea-log em{font-style:normal;color:var(--accent)}
.idea-log .thinking{font-family:var(--font-mono);color:var(--muted)}
.idea-log .err,.idea-msg.err{color:var(--pain)}
.idea-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
#idea-email-form{margin-top:12px}
.idea-msg{margin-top:10px;font-size:14px}
.idea-msg.ok{color:var(--ok)}