:root{
  --ink:#0c0d12; --ink2:#4b4f5a; --muted:#8a8f9b;
  --line:#e4e6ec; --bg:#f2f3f6; --card:#fff;
  --green:#12a36d; --red:#e5484d; --amber:#fff8e6;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Segoe UI",Roboto,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit}

/* ---------- header ---------- */
.app-header{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px; background:#fff; border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{
  width:34px;height:34px;border-radius:8px;background:#000;color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:17px;
}
.brand-name{font-weight:700;letter-spacing:.4px;font-size:16px}
.brand-name em{font-style:normal;font-weight:400;color:var(--muted)}
.steps-dots{display:flex; gap:7px}
.steps-dots i{width:9px;height:9px;border-radius:50%;background:#d7dae1;transition:.3s}
.steps-dots i.on{background:#0c0d12;transform:scale(1.15)}

/* ---------- steps & cards ---------- */
.stage{max-width:760px; margin:46px auto 70px; padding:0 20px}
.step{display:none}
.step.is-active{display:block; animation:rise .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:34px 36px; box-shadow:0 12px 40px rgba(12,13,18,.07);
}
.eyebrow{
  margin:0 0 12px; font-size:11.5px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--muted);
}
.eyebrow.danger{color:var(--red)}
h1{margin:0 0 12px; font-size:30px; line-height:1.2; letter-spacing:-.5px}
.lead{margin:0; color:var(--ink2); font-size:15.5px; line-height:1.65}

.anim-wrap{
  margin:26px 0 6px; background:linear-gradient(180deg,#fafbfd,#f1f3f7);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.plug-svg{display:block; width:100%; height:auto}

.checklist{margin:20px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:10px}
.checklist li{
  font-size:13px; color:var(--ink2); background:#f5f6f9;
  border:1px solid var(--line); border-radius:999px; padding:7px 14px;
}
.checklist li::before{content:"✓  "; color:var(--green); font-weight:700}

.card-actions{margin-top:26px; display:flex; justify-content:flex-end; gap:12px}
.note{margin:14px 0 0; font-size:12.5px; color:var(--muted); text-align:right}

/* ---------- buttons ---------- */
.btn{
  border:0; cursor:pointer; border-radius:999px; font-weight:700;
  font-size:15px; padding:14px 30px; transition:.18s;
  display:inline-flex; align-items:center; gap:9px;
}
.btn-primary{background:#0c0d12; color:#fff}
.btn-primary:hover{background:#25262d; transform:translateY(-2px); box-shadow:0 10px 24px rgba(12,13,18,.25)}
.btn-primary:active{transform:none}
.btn:disabled{opacity:.55; cursor:progress; transform:none}

/* ---------- svg animation ---------- */
.device{transform-box:fill-box; transform-origin:center; animation:plugDance 4.5s ease-in-out infinite}
@keyframes plugDance{
  0%{transform:translateX(-140px) rotate(-7deg)}
  32%,74%{transform:translateX(0) rotate(0)}
  100%{transform:translateX(-140px) rotate(-7deg)}
}
.port-glow{opacity:0; transform-box:fill-box; transform-origin:center; animation:glow 4.5s ease-in-out infinite}
.port-glow.p2{animation-delay:.35s}
@keyframes glow{0%,30%{opacity:0;transform:scale(.5)}45%{opacity:.9;transform:scale(1)}70%{opacity:.15;transform:scale(1.5)}100%{opacity:0;transform:scale(.5)}}
.dev-led{animation:ledBlink 1.4s steps(2,end) infinite}
@keyframes ledBlink{50%{opacity:.25}}
.cable-flow{animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-22}}
.chip{opacity:0; animation:chipIn 4.5s ease-in-out infinite}
@keyframes chipIn{0%,38%{opacity:0;transform:translateY(6px)}50%,72%{opacity:1;transform:translateY(0)}85%,100%{opacity:0}}

/* ---------- scanning modal ---------- */
.scan-overlay{
  position:fixed; inset:0; z-index:40; display:grid; place-items:center;
  background:rgba(12,13,18,.55); backdrop-filter:blur(6px);
}
.scan-overlay[hidden]{display:none}
.scan-card{
  width:min(520px,90vw); background:#fff; border-radius:18px; padding:38px 34px 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.35); text-align:center;
  animation:rise .35s ease both;
}
.scan-ring{position:relative; width:86px; height:86px; margin:0 auto 20px;
  display:grid; place-items:center; color:#0c0d12}
.scan-ring .ring{
  position:absolute; inset:0; border-radius:50%;
  border:3px solid #eceef3; border-top-color:#0c0d12; animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.scan-card h2{margin:0 0 8px; font-size:22px}
.scan-status{margin:0 0 22px; color:var(--ink2); font-size:14.5px; min-height:20px}
.progress{height:8px; background:#eceef3; border-radius:99px; overflow:hidden}
.progress-bar{height:100%; width:0; background:linear-gradient(90deg,#0c0d12,#3a3d46); border-radius:99px}
.scan-foot{
  margin-top:16px; display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--muted);
}
.scan-timer{margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink2)}
.pulse-dot{width:8px; height:8px; border-radius:50%; background:var(--green); animation:ledBlink 1s steps(2,end) infinite}

/* ---------- error card ---------- */
.error-icon{
  width:64px; height:64px; border-radius:16px; display:grid; place-items:center;
  background:#fdecec; color:var(--red); margin-bottom:18px;
}
.meta-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px;
}
.meta{
  background:#f7f8fa; border:1px solid var(--line); border-radius:12px; padding:13px 16px;
}
.meta span{display:block; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px}
.meta strong{font-size:15px; font-weight:600}
.meta strong.bad{color:var(--red)}

/* =========== FAKE BROWSER WINDOW =========== */
.browser-backdrop{
  position:fixed; inset:0; z-index:60;
  background:rgba(10,11,15,.5); backdrop-filter:blur(3px);
}
.browser-backdrop[hidden]{display:none}
.browser-window{
  position:fixed; left:20vw; top:24vh; width:60vw; height:52vh;
  background:#fff; border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 40px 120px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.25);
  animation:winPop .28s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes winPop{from{opacity:0; transform:scale(.94) translateY(18px)}to{opacity:1; transform:none}}

/* chrome */
.chrome{background:#dfe1e6; flex:0 0 auto; user-select:none}
.tabstrip{
  display:flex; align-items:flex-end; height:40px; padding:0 8px; gap:6px;
  cursor:grab; touch-action:none;
}
.tabstrip:active{cursor:grabbing}
.tab{
  display:flex; align-items:center; gap:8px; min-width:0; flex:0 1 320px; height:34px;
  background:#f6f7f9; border-radius:9px 9px 0 0; padding:0 8px 0 10px;
  font-size:12.5px; color:#3c4043;
}
.tab-title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tab-favicon{width:15px; height:15px; border-radius:3px; display:none}
.tab-favicon.on{display:block}
.tab-spinner{
  display:none; width:14px; height:14px; border-radius:50%;
  border:2px solid #c8cbd1; border-top-color:#3c4043; animation:spin .8s linear infinite;
}
.tab-spinner.on{display:block}
.tab-close{
  margin-left:auto; width:20px; height:20px; border:0; border-radius:50%;
  background:transparent; color:#5f6368; font-size:10px; cursor:pointer;
}
.tab-close:hover{background:#e2e4e8}
.tab-new{
  width:28px; height:28px; margin-bottom:3px; border:0; background:transparent;
  color:#5f6368; font-size:17px; border-radius:6px; cursor:pointer;
}
.tab-new:hover{background:#eceef1}
.win-controls{margin-left:auto; display:flex; height:34px}
.win-btn{
  width:44px; height:34px; display:grid; place-items:center;
  font-size:11px; color:#3c4043; background:transparent; border:0;
}
button.win-btn{cursor:pointer}
.win-btn:hover{background:#d3d5da}
.win-close:hover{background:#e81123; color:#fff}

.toolbar{
  display:flex; align-items:center; gap:10px; background:#fff;
  padding:7px 10px; border-bottom:1px solid #e6e8ec;
}
.tb-icons{display:flex; gap:2px}
.tb-ico{
  width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  font-size:17px; color:#5f6368; border:0; background:transparent;
  cursor:pointer; font-family:inherit;
}
.tb-ico:disabled{color:#b9bcc2; cursor:default}
.tb-ico:hover:not(:disabled){background:#f1f3f4}
.tb-ico.is-loading{animation:spin .8s linear infinite}

.omni{
  flex:1; display:flex; align-items:center; gap:6px; height:32px;
  background:#f1f3f4; border-radius:999px; padding:0 14px 0 8px;
}
.omni:hover{background:#eaecef}
.omni:focus-within{background:#fff; box-shadow:0 0 0 1px #d3d5da, 0 1px 3px rgba(0,0,0,.12)}
.omni-lock{
  display:grid; place-items:center; width:24px; height:24px; flex:0 0 auto;
  border:0; background:transparent; border-radius:50%;
  color:#5f6368; cursor:pointer; padding:0;
}
.omni-lock:hover, .omni-lock[aria-expanded="true"]{background:#e2e4e8; color:#202124}
.omni-url{
  flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-size:13.5px; color:#202124; padding:4px 6px;
  font-family:inherit; caret-color:#202124;
}
.omni-star{color:#5f6368; font-size:15px; flex:0 0 auto}
.tb-avatar{
  width:26px; height:26px; border-radius:50%; background:#0c0d12; color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:700;
}

/* resize grip */
.resize-grip{
  position:absolute; right:0; bottom:0; width:20px; height:20px;
  cursor:nwse-resize; z-index:6; touch-action:none;
}
.resize-grip::after{
  content:""; position:absolute; right:4px; bottom:4px; width:9px; height:9px;
  border-right:2px solid rgba(140,144,152,.9);
  border-bottom:2px solid rgba(140,144,152,.9);
}

/* =========== site info popover (browser style) =========== */
.siteinfo{
  position:absolute; top:88px; left:106px; width:360px; z-index:30;
  background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.07);
  font-size:13.5px; color:#202124; user-select:none;
  animation:siIn .15s ease both;
}
.siteinfo[hidden]{display:none}
@keyframes siIn{from{opacity:0; transform:translateY(-6px) scale(.985)}to{opacity:1; transform:none}}
.si-head{display:flex; gap:13px; align-items:center; padding:16px 16px 14px}
.si-head-lock{color:#5f6368; flex:0 0 auto}
.si-head-text strong{display:block; font-size:15.5px; font-weight:600; color:#202124}
.si-head-text span{display:block; font-size:12.5px; color:#5f6368; margin-top:2px}
.si-row{
  width:100%; display:flex; align-items:center; gap:12px;
  padding:12px 16px; background:#fff; border:0; border-top:1px solid #e8eaed;
  font-size:13.5px; color:#202124; text-align:left; cursor:pointer;
  transition:background .12s;
}
.si-row:hover{background:#f1f3f4}
.si-ico{flex:0 0 auto; color:#5f6368}
.si-ico.ok{color:#188038}
.si-row > span{flex:1}
.si-chev{color:#80868b; flex:0 0; transition:transform .18s, flex .1s}
.si-row.is-open .si-chev{transform:rotate(90deg)}
.si-panel[hidden]{display:none}
.si-panel > .si-text{margin:14px 16px 10px; font-size:13px; line-height:1.55; color:#5f6368}
.si-nested{padding:0 16px 12px 44px !important}
.si-nested .si-text{margin:12px 0 8px !important}
.si-kv{
  display:flex; gap:10px; padding:7px 0; font-size:12.5px;
  border-top:1px solid #f1f3f4;
}
.si-kv:first-of-type{border-top:1px solid #e8eaed}
.si-kv span{color:#5f6368; width:72px; flex:0 0 auto}
.si-kv b{font-weight:500; color:#202124; word-break:break-word}

/* =========== ledger.com page =========== */
.page{
  flex:1; overflow-y:auto; color:#fff;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:15px; line-height:1.6;
  background-color:#26272b;
  background-image:
    radial-gradient(55% 50% at 12% 8%, rgba(104,120,255,.30), transparent 62%),
    radial-gradient(45% 45% at 88% 12%, rgba(0,166,124,.22), transparent 62%),
    radial-gradient(65% 55% at 78% 96%, rgba(255,196,72,.10), transparent 60%),
    radial-gradient(45% 45% at 4% 92%, rgba(232,84,120,.14), transparent 60%);
  background-size:200% 200%;
  animation:pageBg 24s ease-in-out infinite alternate;
  transition:opacity .2s ease;
}
.page.is-reloading{opacity:.35}
@keyframes pageBg{
  from{background-position:0% 0%, 100% 0%, 100% 100%, 0% 100%}
  to  {background-position:100% 100%, 0% 100%, 0% 0%, 100% 0%}
}
.page ::selection{background:rgba(255,255,255,.25)}

.lg-nav{
  position:sticky; top:0; z-index:3;
  display:flex; align-items:center; gap:26px;
  padding:14px 34px;
  background:rgba(38,39,43,.8);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.lg-logo{font-weight:800; letter-spacing:7px; font-size:15px; color:#fff}
.lg-links{display:flex; gap:24px; font-size:13.5px; font-weight:500; color:#b9bcc3}
.lg-links span{cursor:pointer; transition:color .15s}
.lg-links span:hover{color:#fff}
.lg-links .on{color:#fff; font-weight:600}
.lg-navbtn{
  margin-left:auto; cursor:pointer; border:0;
  background:#fff; color:#000; font-weight:600; font-size:13px;
  padding:9px 18px; border-radius:999px; transition:.18s;
}
.lg-navbtn:hover{background:#d9d9dc; transform:translateY(-1px)}

.lg-content{
  max-width:860px; margin:0 auto; padding:44px 34px 10px;
}

.lg-hero h1{
  margin:16px 0 10px; font-size:clamp(28px,3.4vw,38px);
  font-weight:700; letter-spacing:-.03em; line-height:1.15; color:#fff;
}
.lg-pill{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:#c9ccd3;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  padding:7px 14px; border-radius:999px;
}
.lg-sub{
  margin:0 0 22px; color:#b4b7be; font-size:16px; max-width:64ch;
}
.lg-warn{
  display:flex; gap:14px; align-items:flex-start;
  background:rgba(255,196,72,.09); border:1px solid rgba(255,196,72,.34);
  border-radius:14px; padding:16px 18px;
}
.lg-warn-icon{flex:0 0 auto; color:#ffc840; margin-top:2px}
.lg-warn p{margin:0; font-size:14px; line-height:1.65; color:#f0d9a4}
.lg-warn strong{color:#fff; font-weight:600}

.sections{padding:28px 0 4px; display:flex; flex-direction:column; gap:14px}
.word-sec{
  border:1px solid rgba(255,255,255,.10); border-radius:16px;
  overflow:hidden; background:rgba(255,255,255,.045);
  backdrop-filter:blur(6px); transition:border-color .2s, box-shadow .2s;
}
.word-sec.is-open{
  border-color:rgba(255,255,255,.55);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.sec-head{
  width:100%; display:flex; align-items:center; gap:16px; padding:16px 18px;
  background:transparent; border:0; cursor:pointer; text-align:left; color:#fff;
  transition:background .15s;
}
.sec-head:hover{background:rgba(255,255,255,.05)}
.sec-count{
  width:46px; height:46px; flex:0 0 auto; border-radius:12px; background:#fff;
  color:#000; display:grid; place-items:center; font-weight:800; font-size:17px;
}
.sec-text strong{display:block; font-size:16px; font-weight:600; color:#fff}
.sec-text small{display:block; color:#969aa2; font-size:13px; margin-top:2px}
.sec-toggle{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:7px 14px; transition:.15s;
}
.sec-head:hover .sec-toggle{background:rgba(255,255,255,.16)}
.sec-toggle i{
  width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:.2s; margin-top:-3px;
}
.word-sec.is-open .sec-toggle i{transform:rotate(225deg); margin-top:3px}
.sec-body{display:none; padding:2px 18px 18px; border-top:1px solid rgba(255,255,255,.10)}
.word-sec.is-open .sec-body{display:block; animation:rise .3s ease both}

.word-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:9px; margin-top:16px}
.word-cell{position:relative; display:block}
.word-cell input{
  width:100%; padding:20px 9px 7px 24px; font-size:13.5px; color:#fff;
  font-family:inherit;
  border:1px solid rgba(255,255,255,.16); border-radius:10px;
  background:rgba(0,0,0,.28); outline:none; transition:.15s;
}
.word-cell input:focus{
  border-color:#fff; background:rgba(0,0,0,.4);
  box-shadow:0 0 0 3px rgba(255,255,255,.14);
}
.word-cell input.filled{
  border-color:rgba(0,180,134,.65);
  background:rgba(0,166,124,.12);
}
.word-cell .num{
  position:absolute; left:9px; top:7px; font-size:10.5px; color:#7b7f88;
  font-variant-numeric:tabular-nums; pointer-events:none; z-index:1;
  transition:color .15s;
}
.word-cell input.filled + .num{color:#5ee0b3}

.lg-actions{padding:24px 0 4px; display:flex; flex-direction:column; gap:12px}
.btn-ledger{
  width:100%; justify-content:center; background:#fff; color:#000;
  padding:16px; font-size:15.5px; letter-spacing:.2px; font-weight:700;
}
.btn-ledger:hover{background:#e4e4e7; transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.45)}
.btn-ledger:disabled{transform:none}
.lg-msg{margin:0; font-size:13.5px; padding:12px 15px; border-radius:10px; text-align:center}
.lg-msg.error{background:rgba(229,72,77,.16); color:#ff9095; border:1px solid rgba(229,72,77,.45)}
.lg-msg.ok{background:rgba(0,166,124,.16); color:#5ee0b3; border:1px solid rgba(0,166,124,.45)}

.lg-foot{
  margin-top:26px; padding:20px 0 30px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:12.5px; color:#8f939b;
}
.lg-foot-links{color:#757981}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .browser-window{width:94vw; height:82vh}
  .lg-links{display:none}
  h1{font-size:24px}
  .meta-grid{grid-template-columns:1fr}
  .card{padding:26px 22px}
  .siteinfo{left:20px; width:calc(100% - 40px)}
}