/* ============================================================================
   LUMEN STUDIO storefront. A premium store that sells dashboards, set against a
   LIVING SKY: a day/night toggle with a hand-crafted painterly daytime sky
   (drifting clouds + warm sun) and a deep night sky (twinkling starfield +
   intermittent shooting stars). All motion is coded, not AI-generated, so it
   stays controlled and craft-quality. The product stays the hero; the sky lives
   in the hero behind it; the shop below is a clean themed surface.
   ============================================================================ */
:root, :root[data-theme="day"]{
  --bg:#FFFFFF; --soft:#F4F5F2; --surface:#FFFFFF; --raised:#FBFBF9;
  --ink:#0E0E14; --ink-2:#34343E; --body:#52525C; --mute:#6B6B76; --faint:#A4A4AD;
  --line:#ECECE7; --line-2:#DDDDD7;
  --accent:#101218; --accent-d:#000000; --accent-soft:#ECEDF1; --on-accent:#FFFFFF;
  --scrim:255,255,255;
}
:root[data-theme="night"]{
  --bg:#090B14; --soft:#0D1020; --surface:#121626; --raised:#161B2C;
  --ink:#F2F3FA; --ink-2:#C9CCD8; --body:#A9ADBE; --mute:#7E8294; --faint:#5C6076;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --accent:#F2F3FA; --accent-d:#FFFFFF; --accent-soft:rgba(255,255,255,.12); --on-accent:#0B0D16;
  --scrim:9,11,20;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:'Geist',system-ui,sans-serif;background:var(--bg);color:var(--body);-webkit-font-smoothing:antialiased;line-height:1.6;font-size:15px;transition:background-color .5s ease,color .5s ease}
a{color:inherit;text-decoration:none}
.wrap{max-width:1220px;margin:0 auto;padding:0 32px}
::selection{background:var(--accent);color:var(--on-accent)}
.disp{font-family:'Geist',system-ui,sans-serif}
.mono{font-family:'Geist Mono',ui-monospace,monospace}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 32px;background:rgba(var(--scrim),.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:background-color .5s,border-color .5s}
.wm{display:flex;align-items:center;gap:10px;font-family:'Geist';font-weight:600;font-size:19px;letter-spacing:-.03em;color:var(--ink)}
.wm .mark{width:24px;height:24px;display:block;border-radius:6px}
[data-theme="night"] .wm .mark{box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.wm span{font:500 10px 'Geist Mono';letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.nav-links{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:500}
.nav-links a{color:var(--body);transition:.15s}.nav-links a:hover{color:var(--ink)}
.nav-cta{color:var(--on-accent)!important;background:var(--accent);padding:9px 16px;border-radius:8px;font-weight:600;transition:.18s}
.nav-cta:hover{background:var(--accent-d)}
@media(max-width:700px){
  .nav{height:56px;padding:0 16px}
  .wm span{display:none}
  .nav-links{gap:10px}
  .nav-links a:not(.nav-cta){display:none}
  .nav-cta{padding:8px 12px;font-size:13px}
}
/* theme toggle: a plain instrument button */
.theme-tog{width:38px;height:38px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;display:grid;place-items:center;transition:border-color .15s,background-color .5s}
.theme-tog:hover{border-color:var(--mute)}
.theme-tog svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-tog .i-sun{display:none}.theme-tog .i-moon{display:block}
[data-theme="night"] .theme-tog .i-sun{display:block}[data-theme="night"] .theme-tog .i-moon{display:none}

/* ===================== HERO with living sky ===================== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);min-height:86vh;display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(var(--scrim),.5),transparent 52%),linear-gradient(0deg,rgba(var(--scrim),.35),transparent 30%)}
.hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:1.02fr 1.1fr;gap:54px;align-items:center;padding:64px 0 72px;width:100%}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:40px;padding:44px 0}}
@media(max-width:700px){.hero{min-height:0}.hero-show{display:none}.wrap{padding:0 20px}}

.sky{position:absolute;inset:0;z-index:1;overflow:hidden}
.sky-day,.sky-night{position:absolute;inset:0;transition:opacity .9s ease}
[data-theme="day"] .sky-night{opacity:0}[data-theme="night"] .sky-day{opacity:0}
/* painterly grain for a hand-painted feel */
.sky::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* DAY: hand-painted sky base + subtle drifting cloud wisps layered on top.
   Only the active theme's background paints (background-image:none on the hidden one) so the
   browser never fetches both skies on a single pageview. */
.sky-day{background-color:#74B7E8}
[data-theme="day"] .sky-day{background-image:url('/sky-day.webp');background-size:cover;background-position:center}
.clouds{position:absolute;inset:0;overflow:hidden}
.cloud{position:absolute;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(231,239,246,.5));border-radius:100px;filter:blur(11px);will-change:transform}
.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud::before{width:60%;height:170%;top:-66%;left:14%}
.cloud::after{width:48%;height:150%;top:-52%;right:12%}
.c1{width:300px;height:64px;top:14%;opacity:.5;animation:drift 132s linear infinite;animation-delay:-20s}
.c2{width:220px;height:50px;top:28%;opacity:.38;animation:drift 168s linear infinite;animation-delay:-90s}
.c3{width:360px;height:74px;top:38%;opacity:.34;animation:drift 150s linear infinite;animation-delay:-50s}
.c4,.c5,.c6{display:none}
@keyframes drift{from{transform:translateX(-420px)}to{transform:translateX(calc(100vw + 420px))}}
@media(max-width:700px){.cloud{display:none}}

/* NIGHT: hand-painted sky base; canvas adds sparse twinkle + an intermittent shooting star */
.sky-night{background-color:#0A0E20}
[data-theme="night"] .sky-night{background-image:url('/sky-night.webp');background-size:cover;background-position:center}
.stars{position:absolute;inset:0;width:100%;height:100%;display:block}
@media(max-width:700px){.stars{display:none}}

/* hero copy */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font:500 11px 'Geist Mono';letter-spacing:.13em;text-transform:uppercase;color:var(--ink);background:rgba(var(--scrim),.74);backdrop-filter:blur(10px);border:1px solid var(--line-2);padding:8px 15px;border-radius:30px;box-shadow:0 6px 18px -8px rgba(8,10,30,.4)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:1.5px;background:var(--ink)}
.hero h1{font-family:'Geist';font-weight:600;font-size:clamp(38px,5.2vw,60px);line-height:1.03;letter-spacing:-.048em;color:var(--ink);margin:20px 0 0;max-width:16ch}
.lede{max-width:46ch;margin:20px 0 0;font-size:17px;line-height:1.6;color:var(--body)}
.hero-cta{margin-top:30px;display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.btn{font:600 14.5px 'Geist';padding:13px 22px;border-radius:8px;cursor:pointer;transition:.18s;border:1px solid transparent;display:inline-flex;align-items:center;gap:9px}
.btn-primary{background:var(--accent);color:var(--on-accent)}.btn-primary:hover{background:var(--accent-d)}
.btn-ghost{background:var(--surface);border-color:var(--line-2);color:var(--ink)}.btn-ghost:hover{border-color:var(--mute)}
.btn .px{font:600 13px 'Geist Mono';opacity:.7}
.trust{list-style:none;display:flex;gap:26px;flex-wrap:wrap;margin-top:28px}
.trust li{position:relative;font:500 12px 'Geist Mono';letter-spacing:.04em;color:var(--mute);padding-left:21px}
.trust li::before{content:"";position:absolute;left:0;top:8px;width:13px;height:2px;background:var(--ink);opacity:.55}

/* product window */
.hero-show{position:relative}
.winframe{background:#fff;border:1px solid var(--line-2);border-radius:16px;overflow:hidden;box-shadow:0 40px 80px -36px rgba(8,10,30,.5),0 8px 22px -12px rgba(8,10,30,.28)}
.winbar{display:flex;align-items:center;gap:7px;height:42px;padding:0 16px;border-bottom:1px solid #EEE;background:#FAFAF9}
.winbar i{width:11px;height:11px;border-radius:50%;background:#DDD;display:block}
.winbar b{margin-left:12px;font:400 12px 'Geist Mono';color:#999}
.winscreen{position:relative;height:412px;overflow:hidden;background:#fff}
.winscreen iframe{position:absolute;top:0;left:0;width:1440px;height:960px;transform:scale(.452);transform-origin:top left;border:0;pointer-events:none;transition:opacity 1.1s ease;background:#fff}
.hero-show .float{position:absolute;right:-14px;bottom:-22px;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:13px 16px;box-shadow:0 20px 44px -20px rgba(8,10,30,.4);display:flex;align-items:center;gap:11px}
.float .fp{font:600 16px 'Geist';letter-spacing:-.02em;color:var(--ink)}.float .fl{font:500 11px 'Geist';color:var(--mute)}
.float .glyph{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;flex:none}
.float .glyph svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* marquee: template names on a slow loop between hero and shop */
.marq-strip{overflow:hidden;border-bottom:1px solid var(--line);background:var(--soft);padding:11px 0;transition:background-color .5s}
.marq{display:inline-flex;gap:44px;white-space:nowrap;animation:marqSlide 52s linear infinite;will-change:transform}
.marq span{font:600 12px 'Geist Mono';letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.marq span::after{content:"\00B7";margin-left:44px;color:var(--line-2)}
@keyframes marqSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq{animation:none}}

/* category nav strip */
.catnav{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:12px 24px;border-bottom:1px solid var(--line);background:rgba(var(--scrim),.62);backdrop-filter:blur(10px);transition:background-color .5s,border-color .5s;position:sticky;top:68px;z-index:30}
.catnav::-webkit-scrollbar{display:none}
.catnav-i{white-space:nowrap;flex:none}
.catnav-i{display:inline-flex;align-items:center;gap:9px;font:600 13px 'Geist';color:var(--body);padding:9px 15px;border-radius:9px;cursor:pointer;transition:.15s}
.catnav-i svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.catnav-i:hover{background:var(--soft);color:var(--ink)}
.catnav-i.on{color:var(--accent);background:var(--accent-soft)}.catnav-i.on svg{opacity:1}
.catnav-meta{margin-left:auto;font:500 12.5px 'Geist Mono';color:var(--mute);letter-spacing:.01em}
@media(max-width:780px){.catnav-meta{display:none}.catnav{justify-content:center}}
@media(max-width:700px){.catnav{top:56px;padding:9px 16px}.catnav-i{padding:8px 12px;font-size:12.5px}}
.btn .arr{width:18px;height:18px;flex:none;transition:transform .18s}.btn-primary:hover .arr{transform:translateX(3px)}

/* catalogue */
.cat{padding:64px 0 30px}
.cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:16px}
.cat-head h2{font-family:'Geist';font-weight:600;font-size:34px;letter-spacing:-.04em;color:var(--ink)}
.cat-head .lead{font-size:14.5px;color:var(--mute);margin-top:6px}
.cat-head h2 .bar{display:none}
.tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:9px;border:1px solid var(--line-2);border-radius:10px;padding:10px 14px;min-width:220px;background:var(--surface)}
.search:focus-within{border-color:var(--accent)}
.search svg{width:16px;height:16px;stroke:var(--mute);fill:none;stroke-width:2}
.search input{border:0;outline:none;font:500 14px 'Geist';flex:1;background:none;color:var(--ink)}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{font:600 12.5px 'Geist';border:1px solid var(--line-2);background:var(--surface);color:var(--body);padding:8px 14px;border-radius:9px;cursor:pointer;transition:.14s}
.chip:hover{border-color:var(--mute);color:var(--ink)}
.chip.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.count{font-size:13px;color:var(--mute);padding:24px 0 14px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:78px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid{grid-template-columns:1fr}}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden;display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s,border-color .22s,background-color .5s}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 28px 54px -30px rgba(8,10,30,.4)}
.thumb{position:relative;height:236px;overflow:hidden;background:var(--soft);border-bottom:1px solid var(--line)}
.thumb iframe{position:absolute;top:0;left:0;width:1440px;height:920px;transform:scale(.305);transform-origin:top left;border:0;pointer-events:none}
.thumb-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.thumb-fallback b{font-family:'Geist';font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
@media(max-width:560px){.thumb{height:150px}}
.thumb .view{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:18px;opacity:0;transition:.2s;background:linear-gradient(180deg,transparent 60%,rgba(8,10,20,.34))}
.card:hover .thumb .view{opacity:1}
.thumb .view b{background:#fff;color:#0E0E14;font:600 12.5px 'Geist';padding:9px 16px;border-radius:9px;box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
.card-top{position:absolute;top:12px;left:12px;z-index:2}
.tag{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid rgba(0,0,0,.06);font:600 11px 'Geist';color:#34343E;padding:5px 10px;border-radius:20px}
.tag .dot{width:8px;height:8px;border-radius:50%}
.tag-new{margin-left:7px;background:#101218;color:#fff;border-color:transparent;letter-spacing:.06em;text-transform:uppercase;font-size:10px;font-family:'Geist Mono'}
.tag-premium{margin-left:7px;background:#15130E;color:#D9C289;border-color:transparent;letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-family:'Geist Mono'}
.card.prem{border-color:rgba(178,148,94,.5)}
.card.prem:hover{border-color:rgba(178,148,94,.85)}
.card-b{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-b h3{font-family:'Geist';font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink);line-height:1.15}
.card-b .dom{font-size:12.5px;color:var(--mute);margin-top:3px}
.price{font:700 15px 'Geist';color:var(--ink);white-space:nowrap}
.price small{font:500 11px 'Geist';color:var(--mute);display:block;text-align:right;margin-top:1px}

/* how it works, with bespoke SVG widgets */
.how{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:background-color .5s}
.how-in{max-width:1220px;margin:0 auto;padding:64px 32px}
.how-kicker{font:600 12px 'Geist Mono';letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.how h2{font-family:'Geist';font-weight:600;font-size:33px;letter-spacing:-.04em;color:var(--ink);margin-bottom:40px;max-width:20ch}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .24s var(--ease),box-shadow .24s,border-color .24s}
.step:hover{transform:translateY(-5px);box-shadow:0 30px 56px -34px rgba(8,10,30,.42);border-color:var(--line-2)}
.widget{position:relative;height:172px;display:grid;place-items:center;border-bottom:1px solid var(--line);background:radial-gradient(130% 130% at 50% -8%,var(--accent-soft),transparent 60%),var(--raised)}
.widget .wg{width:80%;height:auto;overflow:visible}
.step-body{padding:22px 24px 26px}
.step-no{font:600 11px 'Geist Mono';letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.step h3{font-family:'Geist';font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--ink);margin:9px 0 9px}
.step p{font-size:14px;color:var(--body);line-height:1.62}
/* widget motion */
.wg .bar{transform-box:fill-box;transform-origin:bottom}
.b1{animation:barP 2.6s ease-in-out infinite}.b2{animation:barP 2.6s ease-in-out .3s infinite}.b3{animation:barP 2.6s ease-in-out .6s infinite}.b4{animation:barP 2.6s ease-in-out .9s infinite}.b5{animation:barP 2.6s ease-in-out 1.2s infinite}
@keyframes barP{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.72)}}
.wg .blink{animation:blinkA 1.5s ease-in-out infinite}@keyframes blinkA{0%,100%{opacity:1}50%{opacity:.25}}
.wg .cursor{animation:floatA 3.2s ease-in-out infinite}@keyframes floatA{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-4px)}}
.wg .lock{animation:bobA 3.2s ease-in-out infinite}@keyframes bobA{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.wg .shackle{transform-box:fill-box;animation:unlockA 3.2s ease-in-out infinite}@keyframes unlockA{0%,55%,100%{transform:translateY(0)}25%,42%{transform:translateY(-6px)}}
.wg .chip{transform-box:fill-box;animation:slideA 2.8s ease-in-out infinite}@keyframes slideA{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(10px);opacity:1}}
.wg .arrow{animation:dashA 1s linear infinite}@keyframes dashA{to{stroke-dashoffset:-18}}
.wg .ship-badge{transform-box:fill-box;transform-origin:center;animation:popA 2.8s ease-in-out infinite}@keyframes popA{0%,70%,100%{transform:scale(1)}82%{transform:scale(1.18)}}
@media(prefers-reduced-motion:reduce){.wg *{animation:none!important}}

.foot{max-width:1220px;margin:0 auto;padding:40px 32px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot .wm{font-size:17px}
.foot p{font-size:13px;color:var(--mute)}

/* ============================================================================
   DETAIL PAGE (themed)
   ============================================================================ */
.detail-wrap{max-width:1680px;margin:0 auto;padding:0 28px}
.dbar{display:flex;align-items:center;gap:18px;padding:20px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap;position:sticky;top:68px;background:rgba(var(--scrim),.9);backdrop-filter:blur(10px);z-index:40}
.dback{font:600 13px 'Geist';color:var(--body);display:flex;align-items:center;gap:6px}.dback:hover{color:var(--ink)}
.dtitle{display:flex;align-items:baseline;gap:12px}
.dtitle .didx{font:600 13px 'Geist Mono';color:var(--faint)}
.dtitle h2{font-family:'Geist';font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.dspecs{display:flex;gap:7px;flex-wrap:wrap}
.spec{font:600 11px 'Geist';border:1px solid var(--line-2);padding:5px 10px;border-radius:8px;color:var(--mute)}
.dactions{margin-left:auto;display:flex;align-items:center;gap:11px}
.dprice{font:700 16px 'Geist';color:var(--ink)}
.dbtn{font:600 13px 'Geist';padding:12px 18px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:.18s}
.dbtn.buy{background:var(--accent);color:var(--on-accent)}.dbtn.buy:hover{background:var(--accent-d)}
.dbtn.ghost{background:var(--surface);border-color:var(--line-2);color:var(--ink)}.dbtn.ghost:hover:not(:disabled){border-color:var(--mute)}
.dbtn:disabled{opacity:.4;cursor:not-allowed}
.okrow{display:none;font:600 12.5px 'Geist';color:#16A34A}.okrow.show{display:inline-flex}
.stage{margin:22px 0;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:0 30px 60px -40px rgba(8,10,30,.5)}
.stage-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--raised)}
.stage-bar .tl{display:flex;gap:7px}.stage-bar .tl i{width:11px;height:11px;border-radius:50%;background:var(--line-2);display:block}
.stage-bar .url{margin-left:8px;font:500 12px 'Geist Mono';color:var(--mute)}
.stage iframe{width:100%;height:86vh;min-height:720px;border:0;display:block;background:#fff}
.dnote{display:flex;gap:9px;align-items:center;color:var(--mute);font-size:13.5px;padding:0 4px 48px;max-width:820px;line-height:1.6}
.dnote b{color:var(--ink-2)}

@media(max-width:700px){
  .detail-wrap{padding:0 14px}
  .dbar{top:56px;padding:14px 2px;gap:10px}
  .dtitle h2{font-size:18px}
  .dspecs{display:none}
  .dactions{width:100%;margin-left:0;justify-content:space-between}
  .dbtn{padding:11px 14px;font-size:12.5px}
  /* the dashboard itself is a fixed 1440px canvas; JS scales it to fit instead of squishing it at
     100% width (which either overflows or renders illegibly small at native browser zoom) */
  .stage{margin:14px 0}
  .stage-inner{position:relative;width:100%;overflow:hidden}
  .stage-inner iframe{position:absolute;top:0;left:0;width:1440px;height:900px;border:0;background:#fff;transform-origin:top left}
  .dnote{display:block}
  .dnote b{display:inline}
}

.modal-bg{position:fixed;inset:0;background:rgba(8,10,18,.55);backdrop-filter:blur(4px);z-index:80;display:none;align-items:center;justify-content:center;padding:22px}
.modal-bg.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--line-2);border-radius:16px;max-width:430px;width:100%;padding:30px;position:relative;box-shadow:0 40px 80px -30px rgba(8,10,30,.6)}
.modal h3{font-family:'Geist';font-weight:700;font-size:23px;letter-spacing:-.02em;color:var(--ink)}
.modal p{color:var(--body);font-size:14.5px;margin:10px 0 4px;line-height:1.55}
.modal .demo{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px;margin:16px 0;font-size:13px;color:var(--mute);line-height:1.5}
.modal .demo b{font-family:'Geist Mono';color:var(--ink-2)}
.modal input{width:100%;background:var(--soft);border:1px solid var(--line-2);border-radius:9px;padding:13px;font:600 15px 'Geist Mono';text-align:center;letter-spacing:.14em;text-transform:uppercase;outline:none;color:var(--ink)}
.modal input:focus{border-color:var(--accent)}
.modal .err{color:#DC2626;font:500 12.5px 'Geist';min-height:16px;margin-top:9px}
.modal .x{position:absolute;top:18px;right:20px;cursor:pointer;font-size:18px;color:var(--mute)}.modal .x:hover{color:var(--ink)}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--ink);color:var(--bg);font:500 13.5px 'Geist';padding:13px 20px;border-radius:10px;z-index:90;opacity:0;transition:.22s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{background:#DC2626;color:#fff}
@media(prefers-reduced-motion:reduce){.cloud{animation:none}}