:root{
  --bg:#f3fbf5;
  --bg2:#e8f7ec;
  --surface:#ffffff;
  --surface-soft:#f7fcf8;
  --surface-deep:#e1f2e6;
  --line:#c8e5d0;
  --line-strong:#a9d2b6;
  --text:#12321e;
  --text-strong:#0a2715;
  --muted:#64806d;
  --muted-2:#86a28e;
  --green-50:#effcf2;
  --green-100:#dff7e5;
  --green-200:#c7f0d2;
  --green-300:#a4e7b7;
  --green-400:#7ddd99;
  --green-500:#4fca78;
  --green-600:#31b965;
  --green-700:#199e50;
  --green-800:#11763c;
  --green-900:#0d542d;
  --shadow:0 24px 80px rgba(20,84,44,.12);
  --shadow-soft:0 12px 35px rgba(20,84,44,.08);
  --radius:22px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 0%,rgba(118,221,148,.22),transparent 30%),
    radial-gradient(circle at 90% 10%,rgba(168,240,187,.24),transparent 28%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background:
    linear-gradient(rgba(49,185,101,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(49,185,101,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 92%);
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}

.cursor-glow{
  position:fixed;
  width:320px;height:320px;
  border-radius:50%;
  pointer-events:none;
  z-index:2;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(74,202,120,.16),rgba(156,232,176,.08) 35%,transparent 70%);
  filter:blur(5px);
  mix-blend-mode:multiply;
}
.scroll-progress{
  position:fixed;left:0;top:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--green-500),var(--green-700));
  box-shadow:0 0 18px rgba(49,185,101,.3);
}
.ambient-particles{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.ambient-particles i{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:var(--green-300);
  box-shadow:0 0 12px rgba(79,202,120,.3);
  animation:float linear infinite;
}
@keyframes float{
  from{transform:translate3d(0,30vh,0);opacity:0}
  10%{opacity:.65}
  90%{opacity:.65}
  to{transform:translate3d(var(--dx),-115vh,0);opacity:0}
}

.site-header{
  position:sticky;top:0;z-index:50;
  min-height:76px;
  padding:12px clamp(18px,5vw,72px);
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  background:rgba(243,251,245,.82);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(141,194,157,.42);
  transition:.25s var(--ease);
}
.site-header.scrolled{
  background:rgba(243,251,245,.95);
  box-shadow:0 10px 35px rgba(25,118,60,.06);
}
.brand{display:flex;align-items:center;gap:12px;min-width:220px}
.brand-mark{
  width:38px;height:42px;display:grid;place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,var(--green-300),var(--green-500));
  box-shadow:0 10px 25px rgba(49,185,101,.18);
}
.brand-mark img{width:26px;height:32px;filter:brightness(.4) saturate(1.5)}
.brand-copy{display:flex;flex-direction:column;gap:1px}
.brand-copy strong{font-size:14px;letter-spacing:.16em;color:var(--text-strong)}
.brand-copy small{font-family:"DM Mono",monospace;font-size:9px;letter-spacing:.05em;color:var(--muted)}

.main-nav{display:flex;align-items:center;gap:4px}
.main-nav a{
  padding:10px 13px;border-radius:10px;color:var(--muted);font-size:13px;transition:.2s
}
.main-nav a:hover,.main-nav a.active{background:var(--green-100);color:var(--green-800)}

.header-actions{display:flex;align-items:center;gap:10px}
.network-pill{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.72);font-size:11px;color:var(--green-800)
}
.status-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--green-500);box-shadow:0 0 0 4px rgba(79,202,120,.12)
}
.chain-id{font-family:"DM Mono",monospace;color:var(--muted)}
.wallet-btn,.btn-primary{
  border:0;padding:12px 17px;border-radius:12px;
  font-size:12px;font-weight:800;color:white;
  background:linear-gradient(135deg,var(--green-600),var(--green-700));
  box-shadow:0 10px 24px rgba(25,158,80,.18);
  position:relative;overflow:hidden;transition:.2s var(--ease)
}
.wallet-btn:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 15px 30px rgba(25,158,80,.22)}
.wallet-btn.connected{background:linear-gradient(135deg,var(--green-500),var(--green-700))}
.wallet-btn:after,.btn-primary:after{
  content:"";position:absolute;left:-40%;top:-50%;width:28%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-20deg);transition:left .7s ease
}
.wallet-btn:hover:after,.btn-primary:hover:after{left:125%}

.mobile-nav-toggle{
  display:none;border:1px solid var(--line);background:white;color:var(--green-800);
  width:38px;height:38px;border-radius:11px
}

#app{min-height:calc(100vh - 150px)}
.page{
  width:min(1180px,calc(100% - 36px));
  margin:0 auto;
  padding:72px 0 95px;
}
.page-enter{animation:pageEnter .55s var(--ease)}
@keyframes pageEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero{
  min-height:calc(100vh - 76px);
  display:flex;flex-direction:column;justify-content:center;
  position:relative;
}
.hero:before{
  content:"";position:absolute;left:-12%;right:-12%;top:12%;height:55%;
  background:radial-gradient(circle,rgba(99,215,130,.12),transparent 63%);
  pointer-events:none;filter:blur(12px);
  animation:heroAura 8s ease-in-out infinite
}
@keyframes heroAura{0%,100%{transform:scale(.95);opacity:.55}50%{transform:scale(1.06);opacity:1}}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  padding:8px 12px;border:1px solid var(--line-strong);border-radius:999px;
  background:rgba(255,255,255,.76);
  color:var(--green-800);
  font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase
}
.hero h1{
  max-width:1000px;margin:24px 0 18px;
  font-size:clamp(52px,7vw,100px);line-height:.93;letter-spacing:-.07em;color:var(--text-strong);
  animation:heroIn .9s var(--ease)
}
.gradient-text{
  background:linear-gradient(100deg,var(--green-800),var(--green-600) 38%,var(--green-400) 74%,var(--green-700));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@keyframes heroIn{from{opacity:0;transform:translateY(26px) scale(.985);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.hero-copy{
  max-width:730px;color:var(--muted);font-size:17px;line-height:1.8;
  animation:fadeUp .75s .08s both var(--ease)
}
@keyframes fadeUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;animation:fadeUp .75s .16s both var(--ease)}
.btn-secondary{
  border:1px solid var(--line-strong);background:rgba(255,255,255,.74);color:var(--green-800);
  padding:12px 16px;border-radius:12px;font-weight:750;font-size:12px;
  transition:.2s var(--ease)
}
.btn-secondary:hover{transform:translateY(-1px);border-color:#86c39a;background:white}

.hero-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:930px;margin-top:34px}
.metric{
  padding:15px 16px;background:rgba(255,255,255,.67);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-soft);
  backdrop-filter:blur(14px)
}
.metric small{
  display:block;color:var(--muted-2);font-family:"DM Mono",monospace;font-size:9px;
  text-transform:uppercase;letter-spacing:.12em
}
.metric strong{display:block;margin-top:7px;font-size:19px;color:var(--text-strong)}
.metric .up{color:var(--green-700)}
.metric .mono{font-family:"DM Mono",monospace}

.eth-scene{
  position:relative;min-height:475px;margin-top:34px;overflow:hidden;
  border-radius:28px;border:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 48%,rgba(88,203,119,.16),transparent 19%),
    radial-gradient(circle at 50% 50%,rgba(189,244,204,.55),transparent 43%),
    linear-gradient(180deg,#f6fdf8,#deefe2);
  box-shadow:var(--shadow);
  animation:sceneIn .95s .12s both var(--ease);
}
@keyframes sceneIn{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
.eth-scene:before{
  content:"";position:absolute;inset:-25%;
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 28px,rgba(52,163,85,.05) 29px 30px);
  transform:rotate(8deg);animation:spin 26s linear infinite
}
.eth-scene:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 49.9%,rgba(64,171,91,.12) 50%,transparent 50.1%);
}
@keyframes spin{to{transform:rotate(368deg)}}
.eth-orbit{position:absolute;inset:0}
.orb{
  position:absolute;width:86px;height:86px;display:grid;place-items:center;
  border-radius:50%;border:1px solid #a5d4b2;
  background:rgba(255,255,255,.78);color:var(--green-800);font-weight:800;
  box-shadow:0 16px 32px rgba(35,117,60,.12);
  backdrop-filter:blur(10px);
  animation:orbFloat 5s ease-in-out infinite;
}
.orb:nth-child(1){left:11%;top:20%}
.orb:nth-child(2){right:13%;top:16%;animation-delay:-1.1s}
.orb:nth-child(3){left:18%;bottom:17%;animation-delay:-2.4s}
.orb:nth-child(4){right:18%;bottom:16%;animation-delay:-3.4s}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.center-eth{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:200px;height:235px;display:grid;place-items:center;
}
.center-eth .halo{
  position:absolute;width:166px;height:166px;border-radius:50%;
  border:1px solid #89cb9b;
  box-shadow:0 0 55px rgba(48,179,92,.15),inset 0 0 36px rgba(91,211,120,.12);
  animation:ethPulse 3.4s ease-in-out infinite;
}
@keyframes ethPulse{0%,100%{transform:scale(.96)}50%{transform:scale(1.04)}}
.center-eth .diamond{
  position:absolute;top:26px;
  width:0;height:0;
  border-left:58px solid transparent;border-right:58px solid transparent;
  border-bottom:104px solid var(--green-700);
  filter:drop-shadow(0 14px 20px rgba(25,118,60,.18))
}
.center-eth .diamond:after{
  content:"";position:absolute;left:-58px;top:104px;width:0;height:0;
  border-left:58px solid transparent;border-right:58px solid transparent;
  border-top:72px solid var(--green-500)
}
.center-eth .caption{
  position:absolute;bottom:0;
  font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--green-800)
}

.section-head{
  display:flex;align-items:end;justify-content:space-between;gap:18px;
  margin:88px 0 24px;
}
.kicker{
  font-family:"DM Mono",monospace;font-size:10px;color:var(--green-700);
  letter-spacing:.15em;text-transform:uppercase
}
h2{margin:8px 0;font-size:38px;letter-spacing:-.04em;color:var(--text-strong)}
h3{color:var(--text-strong)}
.section-copy{max-width:640px;color:var(--muted);line-height:1.75}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{
  position:relative;overflow:hidden;
  padding:24px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,252,248,.94));
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  transition:.35s var(--ease)
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--line-strong);
  box-shadow:0 28px 70px rgba(25,118,60,.11);
}
.card:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(112,217,142,.15),transparent 38%);
  transition:.2s
}
.card:hover:before{opacity:1}
.card .num{font-family:"DM Mono",monospace;color:var(--muted-2);font-size:11px}
.card h3{font-size:22px;margin:24px 0 10px}
.card p{color:var(--muted);line-height:1.65}

.basket-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.token-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--line)
}
.token-row:last-child{border-bottom:0}
.token-meta{display:flex;align-items:center;gap:12px}
.token-icon{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--green-300),var(--green-600));
  color:white;font-weight:900;box-shadow:0 9px 18px rgba(49,185,101,.12)
}
.progress{height:8px;border-radius:999px;background:#dff0e3;overflow:hidden;border:1px solid #cde5d3}
.progress i{display:block;width:73%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green-400),var(--green-700))}

.route-shell{
  padding:34px;border:1px solid var(--line);border-radius:24px;
  background:rgba(255,255,255,.88);box-shadow:var(--shadow)
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.input{
  width:100%;padding:14px 15px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface-soft);color:var(--text-strong);outline:none
}
.input:focus{border-color:#72ca90;box-shadow:0 0 0 3px rgba(49,185,101,.08)}
label{display:grid;gap:8px;color:var(--green-800);font-size:12px}
.full{grid-column:1/-1}
.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.preset{
  text-align:left;padding:15px;border-radius:15px;background:var(--surface-soft);
  border:1px solid var(--line);color:var(--text-strong);transition:.2s var(--ease)
}
.preset:hover{transform:translateY(-2px);border-color:var(--line-strong);background:white}

.list{display:grid;gap:10px}
.list .row{
  display:flex;justify-content:space-between;gap:20px;
  padding:14px 16px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface-soft)
}
.mono{font-family:"DM Mono",monospace;font-size:11px}
.address{color:var(--muted);font-family:"DM Mono",monospace;font-size:10px}
.warn{
  color:#765514;background:#fff9df;border:1px solid #eadca6;
  padding:12px 14px;border-radius:12px
}

.docs-layout{display:grid;grid-template-columns:240px 1fr;gap:18px;align-items:start}
.docs-sidebar{
  position:sticky;top:100px;padding:16px;border:1px solid var(--line);border-radius:18px;
  background:rgba(255,255,255,.86);box-shadow:var(--shadow-soft)
}
.docs-sidebar a{display:block;padding:10px 11px;border-radius:9px;color:var(--muted);font-size:12px}
.docs-sidebar a:hover,.docs-sidebar a.active{background:var(--green-100);color:var(--green-800)}
.docs-content{display:grid;gap:14px}
.docs-code{
  white-space:pre-wrap;padding:16px;border-radius:14px;
  background:#eef8f0;border:1px solid var(--line);
  color:var(--green-900);font-family:"DM Mono",monospace;font-size:11px;line-height:1.7
}
.docs-callout{
  padding:14px 16px;border-radius:14px;background:var(--green-50);
  border:1px solid var(--line-strong);color:var(--green-900);font-size:12px;line-height:1.65
}
.timeline{position:relative;padding-left:28px}
.timeline:before{
  content:"";position:absolute;left:5px;top:5px;bottom:5px;width:1px;
  background:linear-gradient(var(--green-500),rgba(49,185,101,.08))
}
.timeline-item{position:relative;padding-bottom:24px}
.timeline-item:before{
  content:"";position:absolute;left:-27px;top:2px;width:10px;height:10px;border-radius:50%;
  background:var(--green-500);box-shadow:0 0 0 5px rgba(79,202,120,.11)
}

.reveal{opacity:0;transform:translateY(25px);transition:.8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

.site-footer{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;
  padding:30px clamp(18px,5vw,72px);
  border-top:1px solid var(--line);
  background:rgba(235,248,239,.9);color:var(--muted);font-size:12px
}
.footer-brand{font-weight:850;letter-spacing:.15em;color:var(--green-900);margin-bottom:6px}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a:hover{color:var(--green-700)}
.footer-note{justify-self:end;text-align:right;display:flex;flex-direction:column;gap:7px;font-family:"DM Mono",monospace;font-size:10px}

.toast{
  position:fixed;right:18px;bottom:18px;z-index:90;
  max-width:340px;padding:13px 15px;border-radius:14px;
  background:#163923;color:#f3fff6;border:1px solid #3b8052;
  box-shadow:0 20px 50px rgba(12,79,39,.18);
  opacity:0;transform:translateY(10px);pointer-events:none;transition:.22s
}
.toast.show{opacity:1;transform:none}

@media(max-width:920px){
  .hero-metrics{grid-template-columns:repeat(2,1fr)}
  .steps,.basket-grid,.form-grid,.site-footer{grid-template-columns:1fr}
  .docs-layout{grid-template-columns:1fr}
  .docs-sidebar{position:static;display:flex;gap:6px;overflow:auto}
  .docs-sidebar a{white-space:nowrap}
  .footer-note{justify-self:start;text-align:left}
}
@media(max-width:720px){
  .mobile-nav-toggle{display:block}
  .site-header .brand{order:2;flex:1;min-width:0}
  .site-header .header-actions{order:3}
  .main-nav{
    order:4;display:none;width:100%;padding:8px;
    flex-direction:column;align-items:stretch;
    border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.96)
  }
  .main-nav.open{display:flex}
  .main-nav a{width:100%}
  .network-pill{display:none}
  .hero{min-height:auto;padding-top:56px}
  .hero-metrics{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .hero h1{font-size:50px}
  .hero-metrics{grid-template-columns:1fr}
  .page{width:calc(100% - 24px);padding-top:44px}
  .eth-scene{min-height:355px}
  .center-eth{transform:translate(-50%,-50%) scale(.78)}
  .orb{transform:scale(.75)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}


/* ===== Realistic simulator UI ===== */
.simulator-shell{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
}
.sim-panel{
  padding:22px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,251,246,.96));
  box-shadow:var(--shadow-soft);
}
.sim-header{
  display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px
}
.live-tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 9px;border-radius:999px;background:var(--green-100);
  color:var(--green-800);font:700 9px "DM Mono",monospace;letter-spacing:.1em
}
.live-tag i{width:6px;height:6px;border-radius:50%;background:var(--green-600);box-shadow:0 0 0 4px rgba(79,202,120,.12)}
.chart-wrap{
  height:235px;border-radius:15px;border:1px solid var(--line);
  background:
    linear-gradient(rgba(49,185,101,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(49,185,101,.06) 1px,transparent 1px),
    #f9fdf9;
  background-size:32px 32px;
  position:relative;overflow:hidden
}
.chart-wrap svg{width:100%;height:100%;display:block}
.chart-labels{
  display:flex;justify-content:space-between;margin-top:8px;
  color:var(--muted-2);font:10px "DM Mono",monospace
}
.sim-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.sim-stat{
  border:1px solid var(--line);border-radius:12px;padding:12px;
  background:var(--surface-soft)
}
.sim-stat small{display:block;color:var(--muted-2);font:9px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}
.sim-stat strong{display:block;margin-top:6px;font-size:16px;color:var(--green-900)}
.sim-controls{display:grid;gap:14px}
.control-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--green-900)}
.range{
  width:100%;appearance:none;height:6px;border-radius:999px;background:#dceee0;outline:none
}
.range::-webkit-slider-thumb{
  appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--green-600);border:3px solid white;box-shadow:0 2px 10px rgba(25,118,60,.18)
}
.range::-moz-range-thumb{
  width:17px;height:17px;border-radius:50%;
  background:var(--green-600);border:3px solid white
}
.sim-output{
  display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:4px
}
.output-box{
  padding:12px;border:1px solid var(--line);border-radius:12px;background:white
}
.output-box small{display:block;color:var(--muted-2);font:9px "DM Mono",monospace;text-transform:uppercase}
.output-box strong{display:block;margin-top:6px;color:var(--text-strong);font-size:15px}
.sim-log{
  margin-top:14px;border-top:1px solid var(--line);padding-top:14px;
  display:grid;gap:8px
}
.log-row{
  display:grid;grid-template-columns:84px 1fr auto;gap:8px;align-items:center;
  font:10px "DM Mono",monospace;color:var(--muted)
}
.log-dot{width:7px;height:7px;border-radius:50%;background:var(--green-500)}
.log-dot.pending{background:#e7b54a}.log-dot.done{background:var(--green-600)}
.sim-button-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.small-btn{
  border:1px solid var(--line-strong);border-radius:10px;background:white;
  color:var(--green-800);padding:9px 11px;font-size:10px;font-weight:800
}
.small-btn:hover{background:var(--green-50)}

.allocation-bars{display:grid;gap:11px;margin-top:10px}
.alloc-row{display:grid;grid-template-columns:90px 1fr 48px;align-items:center;gap:10px;font-size:11px}
.alloc-bar{height:7px;border-radius:999px;background:#e1f0e4;overflow:hidden}
.alloc-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green-300),var(--green-700));transition:width .35s var(--ease)}
.sim-note{
  margin-top:10px;color:var(--muted);font-size:10px;line-height:1.6
}

@media(max-width:920px){
  .simulator-shell{grid-template-columns:1fr}
}
@media(max-width:600px){
  .sim-stats{grid-template-columns:1fr}
  .sim-output{grid-template-columns:1fr}
  .log-row{grid-template-columns:70px 1fr}
}