/* Device Lab — página inicial e tutorial. Estética KirMoon (docs/estetica-kirmoon.md). */
.lab-landing{
  --void:#05070b;--void-2:#0b0f16;--lunar:#eceef1;--regolith:#9aa1ab;--dust:#7d8591;--glow:#c8d6e6;
  --ink-2:#c1cbd5;--line:rgba(236,238,241,.11);--line-2:rgba(236,238,241,.2);--line-strong:rgba(236,238,241,.55);
  --tick:#9fb6c8;--accent:#b8cbdf;--accent-soft:#b8cbdf26;--signal:#f08a7e;
  --display:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,56px);--maxw:1240px;--top:72px;
  --ease:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-soft:cubic-bezier(.22,1,.36,1);
  position:fixed;inset:0;z-index:60;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  color:var(--lunar);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;scroll-padding-top:var(--top);scrollbar-width:thin;scrollbar-color:#2a313b transparent;
  -webkit-user-select:text;user-select:text;
  background:
    radial-gradient(circle at 22px 18px,rgba(255,255,255,.62) 0 .8px,transparent 1.3px) 0 0/397px 283px,
    radial-gradient(circle at 142px 104px,rgba(208,222,240,.5) 0 .7px,transparent 1.2px) 0 0/513px 359px,
    radial-gradient(circle at 286px 46px,rgba(255,255,255,.42) 0 .9px,transparent 1.4px) 0 0/619px 421px,
    radial-gradient(ellipse 70% 60% at 72% 30%,#0e1520 0,transparent 70%) 0 0/100% 1100px no-repeat,
    var(--void);
  background-attachment:local;
  transition:opacity .45s var(--ease-soft),transform .45s var(--ease-soft);
}
.lab-landing[hidden]{display:none}
.lab-landing:focus{outline:none}
.lab-landing.is-leaving{opacity:0;transform:scale(1.015);pointer-events:none}
.lab-landing :where(*,*::before,*::after){box-sizing:border-box}
.lab-landing :where(h1,h2,h3,p,ol,ul,figure){margin:0}
.lab-landing :where(ol,ul){padding:0;list-style:none}
.lab-landing :where(a){color:inherit}
.lab-landing :where(button,input){font:inherit;color:inherit}
.lab-landing :where(code){font:.88em var(--mono);color:var(--lunar);background:rgba(236,238,241,.06);border:1px solid var(--line);border-radius:5px;padding:0 .35em}
.lab-landing :where(:focus-visible){outline:2px solid var(--glow);outline-offset:3px}
.lab-landing :where(svg:not(.dl-logo)){fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dl-wrap{width:100%;max-width:var(--maxw);margin-inline:auto}

/* ── Topo ─────────────────────────────────────────── */
.dl-top{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:var(--top);padding:0 var(--gutter);background:rgba(5,7,11,.0);border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s}
.lab-landing.is-scrolled .dl-top{background:rgba(5,7,11,.78);border-color:var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.dl-top-brand{display:inline-flex;align-items:center;min-height:44px;justify-self:start;border-radius:8px}
.dl-top-brand .dl-logo{display:block;height:44px;width:auto;overflow:visible}
.dl-top-nav{display:flex;gap:30px}
.dl-top-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;font:600 14px var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;opacity:.85}
.dl-top-nav a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--lunar);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.dl-top-nav a:hover{opacity:1}
.dl-top-nav a:hover::after,.dl-top-nav a[aria-current=true]::after{transform:scaleX(1)}
.dl-top-actions{justify-self:end;display:flex;align-items:center;gap:18px}
.dl-top-km{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--regolith);opacity:.8;transition:opacity .2s}
.dl-top-km img{width:96px;height:auto;display:block}
.dl-top-km:hover{opacity:1}
.dl-back{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:rgba(236,238,241,.04);cursor:pointer;font:600 13px var(--display);letter-spacing:.14em;text-transform:uppercase;transition:border-color .2s,background .2s}
.dl-back:hover{border-color:var(--line-strong);background:rgba(236,238,241,.08)}
.dl-back[hidden]{display:none}
@media(max-width:1023px){
  .lab-landing[data-mode="return"] .dl-top{grid-template-columns:minmax(0,1fr) auto}
  .lab-landing[data-mode="return"] .dl-top-nav{display:none}
}

/* ── Elementos comuns ─────────────────────────────── */
.dl-eyebrow{font:400 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--regolith);margin:0 0 18px}
.dl-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 30px;border:2px solid var(--lunar);border-radius:0;background:none;color:var(--lunar);font:600 15px var(--display);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:color .35s}
.dl-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lunar);transform:translateY(101%);transition:transform .35s var(--ease)}
.dl-btn:hover,.dl-btn:focus-visible{color:var(--void)}
.dl-btn:hover::before,.dl-btn:focus-visible::before{transform:none}
.dl-btn:disabled{opacity:.5;cursor:progress}
.dl-btn--small{min-height:46px;padding:0 20px;font-size:13px}
.dl-btn--ghost{border-width:1px;border-color:var(--line-2)}
.dl-btn--ghost:hover{border-color:var(--lunar)}
.dl-link{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 14px var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--lunar);opacity:.85}
.dl-link::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.dl-link:hover{opacity:1}
.dl-link:hover::after{transform:scaleX(1)}

/* ── Hero ─────────────────────────────────────────── */
.dl-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:center;gap:clamp(24px,4vw,64px);min-height:calc(100svh - var(--top));max-width:calc(var(--maxw) + var(--gutter) * 2);margin:0 auto;padding:clamp(20px,4vh,48px) var(--gutter) clamp(72px,10vh,104px)}
.dl-orbit{position:absolute;inset:0 calc(50% - 50vw);width:100vw;height:100%;pointer-events:none;z-index:0}
.dl-orbit path{fill:none;stroke:#c9ced6;stroke-width:1;stroke-opacity:.3;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:dl-draw 2.4s cubic-bezier(.3,.6,.2,1) .2s both}
.dl-hero-copy{position:relative;z-index:1;min-width:0}
.dl-hero-copy>*{animation:dl-rise .8s var(--ease) both}
.dl-hero-copy>:nth-child(2){animation-delay:.08s}
.dl-hero-copy>:nth-child(3){animation-delay:.16s}
.dl-hero-copy>:nth-child(4),.dl-hero-copy>:nth-child(5){animation-delay:.24s}
.dl-hero h1{font:700 clamp(48px,min(6.5vw,10.5vh),96px)/.88 var(--display);letter-spacing:-.015em;text-transform:uppercase;margin:0 0 22px}
.dl-hero h1 span{display:block}
.dl-lead{max-width:31em;font-size:18px;line-height:1.6;color:var(--ink-2);margin:0 0 30px}

.dl-launch{position:relative;display:grid;gap:14px;max-width:600px;padding:22px 22px 18px;border:1px solid rgba(236,238,241,.115);border-radius:20px;background:linear-gradient(180deg,rgba(13,17,24,.72),rgba(7,10,15,.56));box-shadow:0 16px 46px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dl-launch::after{content:"";position:absolute;inset:10px;pointer-events:none;opacity:.5;background:
  linear-gradient(var(--tick),var(--tick)) left top/10px 1px no-repeat,linear-gradient(var(--tick),var(--tick)) left top/1px 10px no-repeat,
  linear-gradient(var(--tick),var(--tick)) right top/10px 1px no-repeat,linear-gradient(var(--tick),var(--tick)) right top/1px 10px no-repeat,
  linear-gradient(var(--tick),var(--tick)) left bottom/10px 1px no-repeat,linear-gradient(var(--tick),var(--tick)) left bottom/1px 10px no-repeat,
  linear-gradient(var(--tick),var(--tick)) right bottom/10px 1px no-repeat,linear-gradient(var(--tick),var(--tick)) right bottom/1px 10px no-repeat}
.dl-launch-row{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:14px}
.dl-launch-label{display:flex;flex-direction:column;gap:2px;font:400 10.5px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--regolith)}
.dl-launch-label span{color:var(--dust);letter-spacing:.1em}
.dl-launch-label small{font-size:9.5px;letter-spacing:.12em;color:var(--dust);text-transform:none}
.dl-launch-field{position:relative;display:flex;align-items:center}
.dl-launch-field svg{position:absolute;left:14px;width:17px;height:17px;color:var(--dust);pointer-events:none}
.dl-launch-field input{width:100%;min-height:52px;padding:12px 14px 12px 42px;border:1px solid rgba(236,238,241,.12);border-radius:10px;background:rgba(255,255,255,.025);color:var(--lunar);font:400 15px var(--mono);letter-spacing:0;transition:border-color .2s,background .2s,box-shadow .2s}
.dl-launch-field input::placeholder{color:var(--dust);font-family:var(--body);font-size:15px}
.dl-launch-field input:focus{outline:0;border-color:rgba(236,238,241,.42);background:rgba(255,255,255,.04);box-shadow:0 0 0 3px rgba(200,214,230,.06)}
.dl-launch-hint{margin:-4px 0 4px 126px;font-size:13px;color:var(--regolith)}
.dl-launch-hint button{padding:0;border:0;background:none;color:var(--lunar);text-decoration:underline;text-decoration-color:rgba(236,238,241,.4);text-underline-offset:4px;cursor:pointer}
.dl-launch-hint button:hover{text-decoration-color:var(--lunar)}
.dl-chips{display:flex;flex-wrap:wrap;gap:8px}
.dl-chip{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 14px 0 12px;border:1px solid rgba(236,238,241,.14);border-radius:999px;background:rgba(255,255,255,.015);color:#b8c0cb;font:500 14px var(--body);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.dl-chip i{position:relative;width:8px;height:8px;border-radius:50%;border:1px solid rgba(236,238,241,.45);transition:background .2s,box-shadow .2s,border-color .2s}
.dl-chip:hover{border-color:rgba(236,238,241,.32);color:var(--lunar)}
.dl-chip[aria-pressed=true]{border-color:rgba(236,238,241,.5);background:rgba(236,238,241,.07);color:var(--lunar)}
.dl-chip[aria-pressed=true] i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dl-launch-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:6px}
.dl-launch-note{font-size:12.5px;line-height:1.55;color:var(--dust)}
.dl-launch-note.is-alert{color:#f3b2a8}
.dl-mobile-card{display:none}

.dl-hero-visual{position:relative;z-index:1;min-width:0;animation:dl-fade 1.1s var(--ease) .2s both}
.dl-fit{position:relative;width:100%}
.dl-fit>*{position:absolute;left:0;top:0;transform-origin:0 0}
.dl-scene{width:640px;height:540px}
.dl-scene .dl-floor{position:absolute;left:30px;right:30px;bottom:52px;height:84px;border-radius:50%;border:1px solid rgba(236,238,241,.12);background:radial-gradient(ellipse at 50% 50%,rgba(159,182,200,.16),transparent 70%)}
.dl-scene .dl-floor::after{content:"";position:absolute;inset:18px 60px;border-radius:50%;border:1px dashed rgba(236,238,241,.09)}
.dl-ticks{position:absolute;inset:0;pointer-events:none;opacity:.5;background:
  linear-gradient(var(--tick),var(--tick)) left top/12px 1px no-repeat,linear-gradient(var(--tick),var(--tick)) left top/1px 12px no-repeat,
  linear-gradient(var(--tick),var(--tick)) right top/12px 1px no-repeat,linear-gradient(var(--tick),var(--tick)) right top/1px 12px no-repeat,
  linear-gradient(var(--tick),var(--tick)) left bottom/12px 1px no-repeat,linear-gradient(var(--tick),var(--tick)) left bottom/1px 12px no-repeat,
  linear-gradient(var(--tick),var(--tick)) right bottom/12px 1px no-repeat,linear-gradient(var(--tick),var(--tick)) right bottom/1px 12px no-repeat}

/* ── Aparelhos ilustrados ─────────────────────────── */
.dl-dev{--s:.36;--vw:402;--vh:874;--pad:6px;--r:20px;--sr:15px;position:absolute;bottom:92px;padding:var(--pad);border-radius:var(--r);border:1px solid rgba(236,238,241,.22);background:linear-gradient(158deg,#1b2330,#0c111a);box-shadow:0 26px 54px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.07)}
.dl-dev--tablet{--vw:744;--vh:1133;--pad:9px;--r:16px;--sr:8px}
.dl-dev--android{--vw:360;--vh:780}
.dl-screen{position:relative;width:calc(var(--vw) * var(--s) * 1px);height:calc(var(--vh) * var(--s) * 1px);overflow:hidden;border-radius:var(--sr);background:#f4f1ea;container-type:inline-size;transition:width .7s var(--ease-soft),height .7s var(--ease-soft)}
.dl-dev--ios .dl-screen::before{content:"";position:absolute;z-index:3;top:5px;left:50%;width:30%;max-width:44px;height:9px;border-radius:9px;background:#05070b;transform:translateX(-50%)}
.dl-dev--android .dl-screen::before{content:"";position:absolute;z-index:3;top:6px;left:50%;width:6px;height:6px;border-radius:50%;background:#05070b;transform:translateX(-50%);transition:top .7s var(--ease-soft),left .7s var(--ease-soft)}
.dl-dev-label{position:absolute;left:50%;top:calc(100% + 16px);display:grid;justify-items:center;gap:2px;transform:translateX(-50%);white-space:nowrap;font:600 13px/1.1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--lunar)}
.dl-dev-label b{font:400 10px var(--mono);letter-spacing:.08em;color:var(--regolith)}
.dl-scene .dl-dev--tablet{left:26px}
.dl-scene .dl-dev--android{left:332px}
.dl-scene .dl-dev--ios{left:484px}
.dl-scene .dl-dev{animation:dl-float 7s ease-in-out infinite}
.dl-scene .dl-dev--android{animation-delay:-2.3s}
.dl-scene .dl-dev--ios{animation-delay:-4.6s}

/* Site de exemplo dentro das telas */
.dl-mock{--m-bg:#f7f1e7;--m-ink:#392b22;--m-soft:#e9decb;--m-card:#fffaf1;--m-brand:#524834;--m-line:rgba(65,45,28,.17);position:absolute;inset:0;display:flex;flex-direction:column;background:var(--m-bg);color:var(--m-ink);font-family:var(--body);text-align:left;transition:background-color .6s,color .6s}
.dl-mock :is(.m-nav,.m-hero,.m-menu-item,.m-btn){transition:background-color .6s,color .6s,box-shadow .4s}
.dl-mock>*{flex:none}
.m-nav{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px;border-bottom:1px solid var(--m-line);background:var(--m-bg);color:var(--m-ink);font:700 9px/1.1 Georgia,serif;letter-spacing:-.02em}
.dl-dev--ios .m-nav{padding-top:20px}
.dl-dev--android .m-nav{padding-top:17px}
.m-links{display:none;gap:8px;font:500 6px/1 var(--body);letter-spacing:0}
.m-burger{position:relative;flex:none;width:9px;height:7px;border-block:1px solid currentColor}
.m-burger i{position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor}
.m-hero{position:relative;padding:12px 10px 10px}
.m-kick{font:500 5px/1.4 var(--body);letter-spacing:.17em;text-transform:uppercase;margin:0 0 6px!important}
.m-h{position:relative;max-width:100%;font:400 18px/1.02 Georgia,serif;letter-spacing:-.045em;margin:0 0 7px!important;transition:box-shadow .4s}
.m-desc{max-width:28em;font:400 6px/1.5 var(--body);opacity:.8;margin:0 0 9px!important}
.m-btn{display:inline-block;padding:5px 8px;background:var(--m-brand);color:#fff8e9;font:500 5.5px/1 var(--body);letter-spacing:.04em}
.m-photo{display:block;width:100%;height:86px;object-fit:cover;object-position:50% 50%}
.m-menu-heading{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:11px 10px 5px}
.m-menu-heading b{font:400 12px/1.2 Georgia,serif;letter-spacing:-.03em}
.m-menu-heading span{font:400 5px/1 var(--body)}
.m-grid{display:grid;grid-template-columns:1fr;gap:0;padding:0 10px}
.m-menu-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 5px;padding:6px 0;border-bottom:1px solid var(--m-line)}
.m-menu-item b{font:600 7px/1.2 var(--body)}
.m-menu-item small{grid-column:1;font:400 5.5px/1.4 var(--body);opacity:.75}
.m-menu-item em{grid-column:2;grid-row:1/span 2;align-self:center;font:500 6px/1 var(--body)}
.m-visit{margin:10px!important;padding:8px 7px;background:var(--m-soft);font:400 6px/1.5 var(--body)}
.m-visit b{display:block;font-size:7px}
@container (min-width:180px){
  .m-links{display:flex}.m-burger{display:none}
  .m-nav{font-size:12px;padding:13px 16px}
  .m-hero{padding:17px 16px 14px}
  .m-kick{font-size:6px}
  .m-h{font-size:29px;max-width:85%}
  .m-desc{font-size:7px}
  .m-btn{font-size:6px;padding:6px 10px}
  .m-photo{height:115px}
  .m-menu-heading{padding:13px 16px 6px}
  .m-menu-heading b{font-size:16px}
  .m-grid{grid-template-columns:1fr 1fr;gap:0 13px;padding-inline:16px}
  .m-menu-item{padding-block:8px}
  .m-menu-item b{font-size:8px}
  .m-visit{margin:12px 16px!important}
}

/* ── Seções ───────────────────────────────────────── */
.dl-section{position:relative;padding:clamp(64px,8vw,112px) var(--gutter);border-top:1px solid var(--line)}
.dl-section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 48px;margin-bottom:clamp(32px,4vw,56px)}
.dl-section h2{font:700 clamp(42px,5.6vw,80px)/.9 var(--display);letter-spacing:-.012em;text-transform:uppercase}
.dl-section h2 span{display:block}
.dl-section-head>p{max-width:30em;font-size:17px;line-height:1.65;color:var(--ink-2)}

/* Como funciona */
.dl-how-grid{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.5fr);gap:clamp(24px,3.4vw,48px);align-items:start}
.dl-steps{display:grid;gap:10px}
.dl-step{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;width:100%;padding:16px 18px 18px 16px;border:1px solid rgba(236,238,241,.09);border-radius:18px;background:rgba(255,255,255,.015);color:var(--regolith);text-align:left;cursor:pointer;overflow:hidden;transition:border-color .3s,background .3s,color .3s}
.dl-step:hover{border-color:rgba(236,238,241,.2);color:var(--lunar)}
.dl-step[aria-selected=true]{border-color:rgba(236,238,241,.26);background:linear-gradient(145deg,rgba(236,238,241,.055),rgba(255,255,255,.01));color:var(--lunar)}
.dl-step-moon{grid-row:1/span 2;width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(236,238,241,.18);border-radius:50%;transition:border-color .3s,box-shadow .3s}
.dl-step[aria-selected=true] .dl-step-moon{border-color:rgba(236,238,241,.55);box-shadow:0 0 18px rgba(200,214,230,.18)}
.dl-step-moon svg{width:22px;height:22px;stroke:none}
.dl-step-moon .ring{fill:none;stroke:rgba(236,238,241,.42);stroke-width:1}
.dl-step-moon .new{fill:#0b0f16}
.dl-step-moon .lit,.dl-step-moon .full{fill:var(--lunar)}
.dl-step-moon .full{filter:drop-shadow(0 0 3px rgba(255,255,255,.4))}
.dl-step-title{align-self:center;font:700 24px/1.05 var(--display);letter-spacing:.01em;text-transform:uppercase}
.dl-step-text{display:none;margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.dl-step[aria-selected=true] .dl-step-text{display:block;animation:dl-fade .5s var(--ease) both}
.dl-step-progress{position:absolute;left:16px;right:18px;bottom:0;height:2px;background:rgba(236,238,241,.06);opacity:0}
.dl-step-progress i{display:block;height:100%;background:var(--glow);transform-origin:left;transform:scaleX(0)}
.dl-step[aria-selected=true] .dl-step-progress{opacity:1}
.dl-how.is-autoplay .dl-step[aria-selected=true] .dl-step-progress i{animation:dl-progress var(--dl-dur,7s) linear both}
.dl-how:is(.is-paused,.is-offscreen) .dl-step-progress i{animation-play-state:paused!important}

.dl-demo-col{display:grid;gap:18px;justify-items:start;min-width:0}
.dl-demo-card{width:100%;border:1px solid rgba(120,157,184,.24);border-radius:22px;overflow:hidden;background:radial-gradient(ellipse 60% 40% at 50% 100%,rgba(159,182,200,.08),transparent 70%),#09121b;box-shadow:0 30px 74px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)}
.dl-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;min-height:56px;padding:14px 22px;border-bottom:1px solid rgba(120,157,184,.2)}
.dl-card-title{display:inline-flex;align-items:center;gap:11px;font:400 12px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#dce6f0}
.dl-card-title svg{width:18px;height:18px;color:#b8c6d2}
.dl-fit--demo{margin:18px 0 20px}
.dl-demo-controls{display:flex;align-items:center;gap:10px;padding:0 22px 18px}
.dl-icon-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;background:none;cursor:pointer;transition:border-color .2s,background .2s}
.dl-icon-btn:hover{border-color:var(--line-strong);background:rgba(236,238,241,.05)}
.dl-icon-btn svg{width:18px;height:18px}
.dl-counter{min-width:64px;text-align:center;font:400 12px var(--mono);letter-spacing:.14em;color:var(--regolith)}
.dl-play{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-left:auto;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:none;cursor:pointer;font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--regolith);transition:border-color .2s,color .2s}
.dl-play:hover{border-color:var(--line-2);color:var(--lunar)}
.dl-play-icon{position:relative;width:10px;height:10px;border-inline:3px solid currentColor;box-sizing:border-box}
.dl-play[aria-pressed=true] .dl-play-icon{border:0;border-left:9px solid currentColor;border-block:5px solid transparent}
.dl-try{margin-left:2px}

/* Demonstração (bancada em miniatura) */
.dl-demo{--s:.28;width:760px;height:430px;display:grid;grid-template-rows:46px minmax(0,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#05070b;font-family:var(--body)}
.dl-demo-bar{display:flex;align-items:center;gap:8px;padding:0 10px 0 14px;border-bottom:1px solid var(--line);background:rgba(8,11,16,.96)}
.dl-demo-bar>svg{width:15px;height:15px;color:var(--dust);flex:none}
.dl-demo-url{flex:1;display:flex;align-items:center;min-width:0;height:30px;padding:0 10px;border:1px solid rgba(236,238,241,.12);border-radius:8px;background:rgba(255,255,255,.02);font:400 11.5px var(--mono);color:#dfe6ee;white-space:nowrap;overflow:hidden}
.dl-demo-type{display:inline-block;width:27ch;overflow:hidden;white-space:nowrap;vertical-align:bottom}
.dl-caret{flex:none;width:1px;height:14px;margin-left:2px;background:var(--lunar);opacity:0}
.dl-demo-open,.dl-demo-all{display:grid;place-items:center;height:30px;padding:0 12px;border-radius:7px;font:600 10.5px var(--display);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.dl-demo-open{border:1.5px solid var(--lunar);color:var(--lunar)}
.dl-demo-all{border:1px solid var(--line-2);color:#c9d1db}
.dl-demo-body{display:grid;grid-template-columns:176px minmax(0,1fr);min-height:0}
.dl-demo-side{display:flex;flex-direction:column;gap:7px;padding:12px;border-right:1px solid var(--line);background:linear-gradient(180deg,#080b10,#05070b)}
.dl-demo-kicker{margin:2px 0 1px;font:400 9px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--regolith)}
.dl-demo-list{display:grid;gap:5px}
.dl-demo-list li{padding:7px 9px;border:1px solid rgba(236,238,241,.1);border-radius:8px;background:rgba(255,255,255,.02)}
.dl-demo-list b{font:600 11px var(--display);letter-spacing:.06em;text-transform:uppercase;color:#d6dde6}
.dl-demo-list li.is-selected{border-color:rgba(236,238,241,.42);background:rgba(236,238,241,.05);box-shadow:inset 2px 0 var(--glow)}
.dl-demo-add{align-self:flex-start;padding:5px 9px;border:1px solid var(--line-2);border-radius:6px;font:600 9.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:#d6dde6}
.dl-demo-toggles{display:grid;gap:6px}
.dl-demo-toggles span{display:flex;align-items:center;justify-content:space-between;font:500 10.5px var(--body);color:#c1cbd5}
.dl-demo-toggles i{position:relative;flex:none;width:22px;height:12px;border-radius:99px;background:rgba(236,238,241,.14);transition:background .25s}
.dl-demo-toggles i::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:#9aa1ab;transition:transform .25s var(--ease-out),background .25s}
.dl-demo-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:18px;padding:36px 18px 22px;background:radial-gradient(ellipse 70% 30% at 50% 92%,rgba(159,182,200,.14),transparent 70%),radial-gradient(ellipse 60% 60% at 50% 40%,#0e1520,transparent 70%)}
.dl-demo-stage .dl-ticks{inset:10px}
.dl-demo .dl-dev{--s:.28;position:relative;bottom:auto;--pad:5px;--r:16px;--sr:11px;box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07)}
.dl-demo .dl-dev--tablet{--pad:7px;--r:13px;--sr:7px}
.dl-demo .m-nav{font-size:7px;padding-inline:7px}
.dl-demo .m-hero{padding:9px 7px}
.dl-demo .m-h{font-size:14px}
.dl-demo .m-photo{height:65px}
.dl-demo .m-menu-heading{padding:8px 7px 4px}
.dl-demo .m-menu-heading b{font-size:10px}
.dl-demo .m-grid{padding-inline:7px}
.dl-empty{position:absolute;inset:0;z-index:0;display:none;place-items:center;padding:12px;background:#0b0f16;color:var(--regolith);font:400 9px/1.4 var(--body);text-align:center}
.dl-load{position:absolute;z-index:4;left:0;top:0;height:2px;width:100%;background:var(--glow);transform:scaleX(0);transform-origin:left;opacity:0}
.dl-ruler{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(100% + 8px);height:10px;border-inline:1px solid var(--signal);opacity:0;transform:scaleX(0);transition:opacity .3s,transform .5s var(--ease-out)}
.dl-ruler::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--signal)}
.dl-ruler b{position:absolute;left:50%;top:50%;padding:1px 5px;transform:translate(-50%,-50%);background:#05070b;font:400 9px var(--mono);letter-spacing:.06em;color:#f6b8ae;white-space:nowrap}
.dl-safe{position:absolute;z-index:2;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:linear-gradient(rgba(240,138,126,.28),rgba(240,138,126,.28)) top/100% 17px no-repeat,linear-gradient(rgba(240,138,126,.28),rgba(240,138,126,.28)) bottom/100% 7px no-repeat}
.dl-safe::after{content:"";position:absolute;inset:17px 0 7px;border:1px dashed #f08a7e}
.dl-kbd{position:absolute;z-index:3;left:0;right:0;bottom:0;display:grid;gap:4px;align-content:start;height:44%;padding:8px 4px 0;background:#d1d5db;transform:translateY(102%);transition:transform .5s var(--ease-out)}
.dl-kbd i{height:13px;border-radius:2px;background:repeating-linear-gradient(90deg,#fff 0 8.2px,transparent 8.2px 10.4px)}
.dl-kbd i:nth-child(2){margin-inline:5px}
.dl-kbd i:nth-child(3){margin-inline:14px}
.dl-kbd i:nth-child(4){margin-inline:24px;background:#fff}

/* Versão compacta (telas estreitas): sem o painel lateral */
.dl-demo.is-compact{width:584px}
.dl-demo.is-compact .dl-demo-body{grid-template-columns:minmax(0,1fr)}
.dl-demo.is-compact .dl-demo-side{display:none}
.dl-demo.is-compact .dl-demo-all{display:none}
.dl-demo.is-compact .dl-demo-stage{gap:14px}

/* Fase 1 — colar o link */
.dl-demo[data-step="1"] :is(.dl-demo-b,.dl-demo-c){display:none}
.dl-demo[data-step="1"] .dl-demo-list li:nth-child(n+2){display:none}
.dl-demo[data-step="1"] .dl-demo-a .dl-empty{display:grid}
.dl-demo[data-step="1"] .dl-caret{animation:dl-blink 1s steps(1) infinite}
.dl-demo.is-playing[data-step="1"] .dl-demo-type{animation:dl-type 1.1s steps(27,end) .35s both}
.dl-demo.is-playing[data-step="1"] .dl-demo-open{animation:dl-press .55s var(--ease) 1.6s both}
.dl-demo.is-playing[data-step="1"] .dl-demo-a .dl-load{animation:dl-loadbar .6s var(--ease) 1.75s both}
.dl-demo.is-playing[data-step="1"] .dl-demo-a .dl-empty{animation:dl-out .25s 2.2s both}
.dl-demo.is-playing[data-step="1"] .dl-demo-a .dl-mock{animation:dl-in .6s var(--ease-out) 2.25s both}
/* Fase 2 — montar a bancada */
.dl-demo.is-playing[data-step="2"] .dl-demo-add{animation:dl-press2 1.3s var(--ease) .1s both}
.dl-demo.is-playing[data-step="2"] .dl-demo-list li:nth-child(2){animation:dl-slide .45s var(--ease-out) .3s both}
.dl-demo.is-playing[data-step="2"] .dl-demo-list li:nth-child(3){animation:dl-slide .45s var(--ease-out) .95s both}
.dl-demo.is-playing[data-step="2"] .dl-demo-b{animation:dl-rise .6s var(--ease-out) .45s both}
.dl-demo.is-playing[data-step="2"] .dl-demo-c{animation:dl-rise .6s var(--ease-out) 1.1s both}
/* Fase 3 — comparar */
.dl-demo[data-step="3"] .dl-ruler{opacity:1;transform:none}
.dl-demo[data-step="3"] .dl-demo-b .dl-ruler{transition-delay:.15s}
.dl-demo[data-step="3"] .dl-demo-c .dl-ruler{transition-delay:.3s}
.dl-demo[data-step="3"] .m-h{box-shadow:0 0 0 2px var(--m-soft),0 0 0 3.2px var(--signal);transition-delay:.8s}
.dl-demo.is-playing[data-step="3"] .dl-demo-all{animation:dl-press .55s var(--ease) .1s both}
/* Fase 4 — simular */
.dl-demo[data-step="4"] .dl-demo-toggles i{background:var(--glow)}
.dl-demo[data-step="4"] .dl-demo-toggles i::after{transform:translateX(10px);background:#05070b}
.dl-demo[data-step="4"] .dl-demo-toggles span:nth-child(2) i,.dl-demo[data-step="4"] .dl-demo-toggles span:nth-child(2) i::after{transition-delay:1s}
.dl-demo[data-step="4"] .dl-demo-toggles span:nth-child(3) i,.dl-demo[data-step="4"] .dl-demo-toggles span:nth-child(3) i::after{transition-delay:1.7s}
.dl-demo[data-step="4"] .dl-demo-toggles span:nth-child(4) i,.dl-demo[data-step="4"] .dl-demo-toggles span:nth-child(4) i::after{transition-delay:2.4s}
.dl-demo[data-step="4"] .dl-demo-toggles span:nth-child(1) i,.dl-demo[data-step="4"] .dl-demo-toggles span:nth-child(1) i::after{transition-delay:.2s}
.dl-demo[data-step="4"] .dl-dev{--s:.24}
.dl-demo[data-step="4"] .dl-demo-a{--vw:780;--vh:360}
.dl-demo[data-step="4"] .dl-demo-a .dl-screen{transition-delay:.3s}
.dl-demo[data-step="4"] .dl-demo-a .dl-screen::before{top:50%;left:7px;transition-delay:.3s}
.dl-demo[data-step="4"] .dl-demo-a .m-nav{padding-top:9px}
.dl-demo[data-step="4"] .dl-safe{opacity:1;transition-delay:1s}
.dl-demo[data-step="4"] .dl-kbd{transform:none;transition-delay:1.7s}
.dl-demo[data-step="4"] .dl-demo-c .dl-mock{--m-bg:#0f141b;--m-ink:#e8eef3;--m-soft:#1b2430;--m-card:#151c25;--m-brand:#05070b;--m-line:rgba(255,255,255,.14)}
.dl-demo[data-step="4"] .dl-demo-c :is(.dl-mock,.m-nav,.m-hero,.m-menu-item,.m-btn){transition-delay:2.4s}

.dl-step-detail{display:none;margin:4px 2px 0;font-size:15px;line-height:1.6;color:var(--ink-2)}

/* Recursos */
.dl-feat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dl-feat-grid li{position:relative;display:flex;flex-direction:column;gap:10px;min-height:230px;padding:22px 20px 22px;border:1px solid rgba(236,238,241,.1);border-radius:18px;background:linear-gradient(180deg,rgba(13,17,24,.55),rgba(7,10,15,.3));transition:border-color .3s,transform .4s var(--ease)}
.dl-feat-grid li:hover{border-color:rgba(236,238,241,.24);transform:translateY(-2px)}
.dl-feat-grid svg{width:34px;height:34px;color:var(--lunar);stroke-width:1.3;margin-bottom:10px}
.dl-feat-num{position:absolute;top:18px;right:20px;font:400 10px var(--mono);letter-spacing:.14em;color:var(--dust)}
.dl-feat-grid h3{font:700 21px/1.05 var(--display);letter-spacing:.02em;text-transform:uppercase}
.dl-feat-grid p{font-size:14.5px;line-height:1.6;color:var(--regolith)}
.dl-tag{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:6px;font:400 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#a4b2c0}
.dl-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:#8fb8de;box-shadow:0 0 0 3px rgba(143,184,222,.16)}

/* Limites */
.dl-limits-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.dl-limits-grid header>p:not(.dl-eyebrow){max-width:28em;margin:22px 0 14px;font-size:17px;line-height:1.65;color:var(--ink-2)}
.dl-limits-list li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:24px 0;border-bottom:1px solid var(--line)}
.dl-limits-list li:first-child{border-top:1px solid var(--line)}
.dl-limits-list span{font:400 11px/2.2 var(--mono);letter-spacing:.14em;color:var(--dust)}
.dl-limits-list h3{font:700 24px/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-bottom:8px}
.dl-limits-list p{font-size:15px;line-height:1.65;color:var(--regolith)}

/* Chamada final */
.dl-final{overflow:hidden;text-align:center;background:radial-gradient(ellipse 50% 60% at 50% 100%,rgba(118,145,180,.12),transparent 70%)}
.dl-final .dl-wrap{position:relative;display:grid;justify-items:center;gap:22px}
.dl-final .dl-wrap::before{content:"";position:absolute;z-index:-1;top:-30px;left:50%;width:260px;height:260px;margin-left:-130px;border-radius:50%;border:1px solid rgba(236,238,241,.08);box-shadow:inset -38px 0 0 -6px rgba(236,238,241,.035);opacity:.9}
.dl-final p{max-width:30em;font-size:18px;color:var(--ink-2)}

/* Rodapé */
.dl-footer{padding:34px var(--gutter) 40px;border-top:1px solid var(--line)}
.dl-footer-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 34px}
.dl-footer-km img{display:block;width:161px;height:39px;image-rendering:auto}
.dl-footer p{flex:1 1 280px;font-size:13.5px;color:var(--dust)}
.dl-footer nav{display:flex;gap:24px}
.dl-footer nav a{display:inline-flex;align-items:center;min-height:44px;font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--regolith)}
.dl-footer nav a:hover{color:var(--lunar)}

/* Indicador de rolagem */
.dl-scroll-cue{position:absolute;left:50%;bottom:22px;display:grid;place-items:center;width:44px;height:56px;transform:translateX(-50%);opacity:.7}
.dl-scroll-cue span{position:relative;width:1px;height:34px;background:linear-gradient(transparent,var(--lunar));animation:dl-cue 2.2s var(--ease-soft) infinite}
.dl-scroll-cue span::after{content:"";position:absolute;left:-4px;bottom:0;width:7px;height:7px;border-right:1px solid var(--lunar);border-bottom:1px solid var(--lunar);transform:rotate(45deg)}
.dl-scroll-cue:hover{opacity:1}

/* ── Animações ────────────────────────────────────── */
@keyframes dl-draw{to{stroke-dashoffset:0}}
@keyframes dl-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes dl-fade{from{opacity:0}}
@keyframes dl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes dl-beacon{0%,100%{box-shadow:0 0 0 3px var(--accent-soft)}50%{box-shadow:0 0 0 6px transparent}}
@keyframes dl-progress{to{transform:scaleX(1)}}
@keyframes dl-type{from{width:0}to{width:27ch}}
@keyframes dl-blink{50%{opacity:1}}
@keyframes dl-press{0%,100%{transform:none;box-shadow:none}35%{transform:scale(.92);box-shadow:0 0 0 5px rgba(200,214,230,.22)}}
@keyframes dl-press2{0%,100%,48%{transform:none;box-shadow:none}16%,64%{transform:scale(.92);box-shadow:0 0 0 5px rgba(200,214,230,.22)}}
@keyframes dl-loadbar{0%{opacity:1;transform:scaleX(0)}85%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes dl-out{to{opacity:0}}
@keyframes dl-in{from{opacity:0;transform:translateY(10px)}}
@keyframes dl-slide{from{opacity:0;transform:translateX(-10px)}}
@keyframes dl-cue{0%{transform:translateY(-6px);opacity:0}40%{opacity:1}100%{transform:translateY(6px);opacity:0}}

/* ── Responsivo ───────────────────────────────────── */
@media (max-width:1180px){
  .dl-feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dl-feat-grid li{min-height:0}
}
@media (max-width:960px){
  .dl-hero{grid-template-columns:1fr;min-height:0;padding-top:28px}
  .dl-hero-visual{max-width:640px;width:100%;justify-self:center}
}
@media (max-width:1100px){
  .dl-how-grid{grid-template-columns:1fr}
  .dl-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dl-step{grid-template-columns:1fr;row-gap:6px;padding:14px}
  .dl-step-moon{grid-row:auto}
  .dl-step[aria-selected=true] .dl-step-text{display:none}
  .dl-step-title{font-size:19px}
  .dl-step-detail{display:block}
}
@media (max-width:860px){
  .dl-top{grid-template-columns:1fr auto}
  .dl-top-nav{display:none}
  .dl-limits-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .lab-landing{--top:64px}
  .dl-top-brand .dl-logo{height:34px}
  .dl-top-km img{width:80px}
  .dl-hero h1{font-size:clamp(46px,14vw,64px)}
  .dl-lead{font-size:16.5px}
  .dl-launch-row{grid-template-columns:1fr;gap:8px}
  .dl-launch-label{flex-direction:row;gap:8px}
  .dl-launch-hint{margin-left:0}
  .dl-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dl-feat-grid{grid-template-columns:1fr}
  .dl-demo-controls{padding-inline:14px}
  .dl-card-head{padding-inline:16px}
  .dl-section-head>p{font-size:16px}
  .dl-scroll-cue{display:none}
}

/* Celular: a bancada abre só no computador */
.lab-landing.is-mobile .dl-launch,.lab-landing.is-mobile .dl-back{display:none}
.lab-landing.is-mobile .dl-mobile-card{display:grid;gap:14px;max-width:560px;padding:22px;border:1px solid rgba(236,238,241,.115);border-radius:18px;background:linear-gradient(180deg,rgba(13,17,24,.6),rgba(7,10,15,.4))}
.dl-mobile-card .dl-eyebrow{margin:0}
.dl-mobile-card h2{font:700 30px/1 var(--display);text-transform:uppercase}
.dl-mobile-card>p:not(.dl-eyebrow){font-size:15px;line-height:1.6;color:var(--ink-2)}
.dl-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.dl-copy input{min-width:0;min-height:46px;padding:10px 12px;border:1px solid rgba(236,238,241,.12);border-radius:10px;background:rgba(255,255,255,.025);color:var(--lunar);font:400 13px var(--mono)}
.lab-landing #copyLabLink{min-height:46px;padding:0 18px;border:2px solid var(--lunar);border-radius:0;background:none;color:var(--lunar);font:600 13px var(--display);letter-spacing:.16em;text-transform:uppercase;box-shadow:none}
.lab-landing #copyLabLink:hover{color:var(--void)}
.lab-landing.is-mobile .dl-try{display:none}
#copyLabStatus{min-height:1.4em;font-size:13px;color:var(--regolith)}
#copyLabStatus:empty{display:none}

@media (prefers-reduced-motion:reduce){
  .lab-landing{scroll-behavior:auto}
  .lab-landing *,.lab-landing *::before,.lab-landing *::after{animation:none!important;transition:none!important}
  .dl-orbit path{stroke-dashoffset:0}
}