/* ============================================================
   QR STUDIO — Noir Atelier
   graphite #0A0A0B · bone #F2F0EA · signal lime #D4FF5E
   type: Geologica (display) · Cormorant Garamond italic (accent)
         Onest (interface) · JetBrains Mono (data)
   ============================================================ */
:root{
  --bg:#09090A;
  --bg-2:#0E0E10;
  --surface:#121214;
  --surface-2:#17171A;
  --elev:#1E1E22;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.11);
  --line-3:rgba(255,255,255,.18);
  --fill:rgba(255,255,255,.035);
  --fill-2:rgba(255,255,255,.06);
  --fill-3:rgba(255,255,255,.1);

  --tx:#F2F0EA;
  --tx-2:#BDBAB2;
  --tx-3:#85837C;
  --tx-4:#5E5D58;

  --accent:#D4FF5E;
  --accent-hi:#E3FF8F;
  --accent-ink:#0A0A0B;
  --accent-soft:rgba(212,255,94,.09);

  --good:#6BE3A0;
  --warn:#F5C451;
  --bad:#FF7A6B;

  --paper:#EAE8E2;

  --r-2xl:30px;
  --r-xl:24px;
  --r-lg:18px;
  --r-md:14px;
  --r-sm:11px;

  --f-disp:'Geologica', 'Onest', system-ui, sans-serif;
  --f-serif:'Cormorant Garamond', 'Times New Roman', serif;
  --f-body:'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --nav-h:80px;
  --wrap:1320px;
  --pad:clamp(14px, 3.4vw, 40px);
  --ease:cubic-bezier(.2,.75,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 8px);background:var(--bg);color-scheme:dark;}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:var(--f-body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;padding:0;}
a{color:inherit;}
code{font-family:var(--f-mono);font-size:.86em;background:var(--fill-2);padding:1px 6px;border-radius:6px;color:var(--tx-2);}
::selection{background:var(--accent);color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}
[hidden]{display:none !important;}
em{font-style:normal;}

.ic{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle;}
.mono{font-family:var(--f-mono);letter-spacing:0;}
.mono,.stats dt,.counter,.hex,.cat i,.fg-head i,.range-row .mono,.ab-meta{font-variant-numeric:tabular-nums;}
.micro{font-size:12.5px;color:var(--tx-3);line-height:1.45;margin:0;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--accent);color:var(--accent-ink);padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600;}
.skip:focus{top:12px;}
.grow{flex:1;}

.grain{
  position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* serif-italic accent inside display headings */
h1 em, h2 em{
  font-family:var(--f-serif);font-style:italic;font-weight:500;letter-spacing:-.01em;
  font-size:1.12em;line-height:.9;
  background:linear-gradient(100deg, var(--tx) 10%, var(--accent) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.06em;
}

/* ---------- BUTTONS ---------- */
.btn{
  --h:44px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:var(--h);padding:0 20px;border-radius:999px;
  font-weight:600;font-size:14.5px;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;
  transition:transform .25s var(--ease), background .25s, box-shadow .25s, color .2s, opacity .2s;
  user-select:none;
}
.btn:active{transform:scale(.97);}
.btn .ic{width:17px;height:17px;}
.btn-sm{--h:38px;padding:0 16px;font-size:13.5px;}
.btn-lg{--h:56px;padding:0 28px;font-size:16px;}
.btn-accent{
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 0 0 1px rgba(212,255,94,.4), 0 10px 30px -10px rgba(212,255,94,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-accent:hover{background:var(--accent-hi);box-shadow:0 0 0 1px rgba(212,255,94,.6), 0 14px 40px -10px rgba(212,255,94,.7), inset 0 1px 0 rgba(255,255,255,.6);}
.btn-ghost{background:var(--fill);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line-2);}
.btn-ghost:hover{background:var(--fill-2);box-shadow:inset 0 0 0 1px var(--line-3);}
.btn-accent::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:250% 100%;background-position:120% 0;
  mix-blend-mode:soft-light;transition:background-position .9s var(--ease-out);
}
.btn-accent:hover::after{background-position:-20% 0;}
.btn-next{--h:40px;padding:0 14px 0 18px;background:var(--tx);color:var(--accent-ink);font-size:13.5px;}
.btn-next:hover{background:#fff;}
.btn-next .ic{width:15px;height:15px;transition:transform .25s var(--ease);}
.btn-next:hover .ic{transform:translateX(3px);}
.btn-quiet{--h:38px;color:var(--tx-3);padding:0 10px;}
.btn-quiet:hover{color:var(--tx);background:var(--fill);}
.btn.is-busy,.icon-btn.is-busy{pointer-events:none;opacity:.55;}

.icon-btn{
  position:relative;width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:var(--fill);color:var(--tx-2);box-shadow:inset 0 0 0 1px var(--line);transition:.2s;
}
.icon-btn:hover{background:var(--fill-2);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line-3);}
.icon-btn .ic{width:19px;height:19px;}
.icon-btn[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);
  background:var(--tx);color:var(--accent-ink);font-size:12px;font-weight:600;padding:5px 9px;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:.2s var(--ease);
}
.icon-btn[data-tip]:hover::after{opacity:1;transform:translate(-50%,0);}

/* ---------- NAV ---------- */
.nav{position:fixed;top:14px;left:0;right:0;z-index:100;padding:0 var(--pad);pointer-events:none;}
.nav-in{
  pointer-events:auto;max-width:1120px;margin:0 auto;height:56px;padding:0 8px 0 18px;
  display:flex;align-items:center;gap:24px;border-radius:999px;
  background:rgba(18,18,20,.62);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  box-shadow:inset 0 0 0 1px var(--line-2), 0 20px 50px -24px rgba(0,0,0,.9);
  transition:background .3s, box-shadow .3s;
}
.nav.scrolled .nav-in{background:rgba(14,14,16,.84);}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;}
.brand-mark{
  width:26px;height:26px;border-radius:8px;display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:5px;
  background:linear-gradient(145deg,#26262A,#141416);box-shadow:inset 0 0 0 1px var(--line-3);
}
.brand-mark i{border-radius:2px;background:var(--tx);}
.brand-mark i:nth-child(2){background:transparent;box-shadow:inset 0 0 0 1.5px var(--tx);}
.brand-mark i:nth-child(4){background:var(--accent);}
.brand-name{font-family:var(--f-disp);font-weight:500;font-size:16px;letter-spacing:-.02em;}
.nav-links{position:relative;display:flex;gap:2px;margin:0 auto;}
.nav-links a{position:relative;z-index:1;}
.nav-links a.active{color:var(--tx);}
.nav-ind{
  position:absolute;z-index:0;top:0;height:100%;left:0;width:0;border-radius:999px;background:var(--fill-2);
  box-shadow:inset 0 0 0 1px var(--line);opacity:0;transition:transform .5s var(--ease-out), width .5s var(--ease-out), opacity .3s;
}
.nav-ind.on{opacity:1;}
.nav-links a{padding:8px 14px;border-radius:999px;color:var(--tx-3);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s, background .2s;}
.nav-links a:hover{color:var(--tx);background:var(--fill);}
.nav-cta{--h:40px;}
.lang-switch{
  display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:999px;margin-right:4px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--tx-3);text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--line-2);transition:color .2s, background .2s, box-shadow .2s;
}
.lang-switch:hover{color:var(--tx);background:var(--fill);box-shadow:inset 0 0 0 1px var(--line-3);}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:calc(var(--nav-h) + clamp(48px, 8vw, 104px)) var(--pad) clamp(44px, 6vw, 72px);text-align:center;isolation:isolate;overflow-x:clip;}
.hero-glow{
  position:absolute;left:50%;top:-10%;width:min(1200px,140vw);height:760px;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 45% at 50% 30%, rgba(212,255,94,.13), transparent 70%),
    radial-gradient(30% 35% at 28% 45%, rgba(94,210,255,.07), transparent 70%),
    radial-gradient(30% 35% at 74% 42%, rgba(255,190,120,.06), transparent 70%);
  filter:blur(10px);
}
.hero-grid{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:72px 72px;background-position:center top;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 20%, #000, transparent 75%);mask-image:radial-gradient(60% 70% at 50% 20%, #000, transparent 75%);
  opacity:.6;
}
.hero-in{position:relative;max-width:1180px;margin:0 auto;}
.announce{
  display:inline-flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;margin-bottom:28px;border-radius:999px;
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--tx-2);text-decoration:none;font-size:13.5px;font-weight:500;
  transition:background .2s, box-shadow .2s;
}
body:not([data-page=home]) .announce{display:none;}
.announce:hover{background:var(--fill-2);box-shadow:inset 0 0 0 1px var(--line-3);color:var(--tx);}
.announce-tag{background:var(--accent);color:var(--accent-ink);font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.01em;}
.announce .ic{width:14px;height:14px;color:var(--tx-3);transition:transform .25s var(--ease);}
.announce:hover .ic{transform:translateX(3px);}
.hero-title{
  font-family:var(--f-disp);font-weight:500;letter-spacing:-.045em;line-height:.98;
  font-size:clamp(42px, 7vw, 96px);margin:0;text-wrap:balance;
}
.h1-kicker{
  display:block;font-family:var(--f-mono);font-size:clamp(11.5px,1.1vw,13px);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-3);margin-bottom:18px;
}
.h1-kicker::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);margin-right:9px;vertical-align:middle;}
.crumbs{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;font-size:13px;color:var(--tx-3);}
.crumbs a{text-decoration:none;color:var(--tx-3);transition:color .2s;}
.crumbs a:hover{color:var(--accent);}
.crumbs .ic{width:13px;height:13px;opacity:.5;}
.crumbs span{color:var(--tx-2);}
.noscript{
  max-width:var(--wrap);margin:calc(var(--nav-h) + 12px) auto 0;padding:14px 18px;border-radius:14px;
  background:rgba(245,196,81,.1);box-shadow:inset 0 0 0 1px rgba(245,196,81,.3);color:var(--warn);font-size:14px;
}
.hero-lede{font-size:clamp(16px, 1.55vw, 19px);color:var(--tx-2);max-width:620px;margin:26px auto 0;line-height:1.6;text-wrap:pretty;}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:34px;}
.hero-trust{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:13.5px;color:var(--tx-3);}
.hero-trust li{display:inline-flex;align-items:center;gap:7px;}
.hero-trust .ic{width:15px;height:15px;color:var(--accent);}
.hero-in > *{animation:rise .9s var(--ease-out) both;}
.hero-in > :nth-child(2){animation-delay:.07s}
.hero-in > :nth-child(3){animation-delay:.14s}
.hero-in > :nth-child(4){animation-delay:.21s}
.hero-in > :nth-child(5){animation-delay:.28s}
@keyframes rise{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* floating stickers */
.showcase{position:absolute;inset:0;pointer-events:none;z-index:-1;max-width:1480px;margin:0 auto;}
.sticker{
  position:absolute;background:#fff;border-radius:20px;pointer-events:auto;cursor:pointer;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1);
  transform:rotate(var(--r));transition:transform .6s var(--ease-out);
  animation:stickIn 1.1s var(--ease-out) both, float 7s ease-in-out infinite;
}
.sticker:hover{transform:rotate(0deg) scale(1.05);}
.sticker-stage{position:absolute;left:50%;top:50%;width:84%;aspect-ratio:inherit;transform:translate(-50%,-50%);}
.sticker-stage img,.sticker-stage .art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.sticker-stage .art svg{display:block;width:100%;height:100%;}
.sticker-stage .sq{position:absolute;}
.sticker-stage .sq canvas{width:100% !important;height:100% !important;display:block;}
.s1{width:clamp(150px,12vw,190px);aspect-ratio:1/1;left:max(1.5%, calc(50% - 720px));top:calc(var(--nav-h) + 150px);--r:-11deg;animation-delay:.3s, 0s;}
.s2{width:clamp(124px,10vw,158px);aspect-ratio:900/1260;right:max(3%, calc(50% - 690px));top:calc(var(--nav-h) + 50px);--r:9deg;animation-delay:.45s, -2s;}
.s3{width:clamp(110px,8.5vw,136px);aspect-ratio:940/1180;right:max(9%, calc(50% - 560px));top:calc(var(--nav-h) + 360px);--r:-4deg;animation-delay:.6s, -4s;}
@keyframes stickIn{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* ============================================================
   STUDIO APP
   ============================================================ */
.studio{position:relative;padding:0 var(--pad);}
.studio::before{
  content:"";position:absolute;left:50%;top:-40px;width:min(1100px,90vw);height:300px;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(212,255,94,.09), transparent 70%);pointer-events:none;filter:blur(20px);
}
.app{
  position:relative;max-width:var(--wrap);margin:0 auto;
  height:clamp(680px, calc(100vh - 96px), 900px);
  display:flex;flex-direction:column;border-radius:var(--r-2xl);overflow:clip;
  background:linear-gradient(180deg,#141416 0%,#0F0F11 100%);
  box-shadow:0 0 0 1px var(--line-2), 0 1px 0 0 rgba(255,255,255,.08) inset, 0 60px 140px -40px rgba(0,0,0,.95), 0 30px 60px -30px rgba(0,0,0,.6);
  animation:rise 1s .25s var(--ease-out) both;
}
.app-bar{
  flex:none;height:46px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.012);
}
.ab-left,.ab-right{display:flex;align-items:center;gap:12px;min-width:0;}
.ab-dots{display:flex;gap:6px;}
.ab-dots i{width:10px;height:10px;border-radius:50%;background:#28282C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);}
.ab-title{font-size:13px;font-weight:600;color:var(--tx-2);}
.ab-sep{width:1px;height:14px;background:var(--line-2);}
.ab-meta{font-size:12px;color:var(--tx-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ab-private{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tx-3);}
.ab-private .ic{width:14px;height:14px;color:var(--good);}
.ab-right{gap:6px;}
.ab-right .ab-sep{margin:0 6px;}
.ab-btn{
  position:relative;height:30px;min-width:30px;padding:0 7px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  color:var(--tx-2);font-size:12.5px;font-weight:600;transition:background .2s, color .2s, opacity .2s;
}
.ab-btn .ic{width:16px;height:16px;}
.ab-btn:hover{background:var(--fill-2);color:var(--tx);}
.ab-btn:disabled{opacity:.3;pointer-events:none;}
.ab-wide{padding:0 11px 0 9px;box-shadow:inset 0 0 0 1px var(--line);}
.ab-accent{color:var(--accent);box-shadow:inset 0 0 0 1px rgba(212,255,94,.3);background:rgba(212,255,94,.05);}
.ab-accent:hover{background:rgba(212,255,94,.12);color:var(--accent);}
.ab-btn[data-tip]::after{
  content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;z-index:20;
  background:var(--tx);color:var(--accent-ink);font-size:11.5px;font-weight:600;padding:5px 9px;border-radius:8px;white-space:nowrap;
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:.2s var(--ease);
}
.ab-btn[data-tip]:hover::after{opacity:1;transform:none;}

.app-body{flex:1;min-height:0;display:grid;grid-template-columns:86px 404px minmax(0,1fr);}

/* ---- rail ---- */
.rail{display:flex;flex-direction:column;gap:4px;padding:12px 9px;border-right:1px solid var(--line);}
.tab{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 9px;border-radius:14px;
  color:var(--tx-3);transition:color .2s, background .2s;
}
.tab:hover{color:var(--tx);background:var(--fill);}
.tab-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;transition:background .3s var(--ease), color .3s, box-shadow .3s;}
.tab-ic .ic{width:20px;height:20px;}
.tab-l{font-size:11.5px;font-weight:500;letter-spacing:.01em;}
.tab.active{color:var(--tx);}
.tab.active .tab-ic{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 26px -10px rgba(212,255,94,.7), inset 0 1px 0 rgba(255,255,255,.5);}
.tab-dot{position:absolute;top:9px;right:13px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #121214, 0 0 10px rgba(212,255,94,.6);opacity:0;transform:scale(.3);transition:.35s var(--ease-out);}
.tab.done .tab-dot{opacity:1;transform:none;}
.tab.active .tab-dot{opacity:0;}
.tab.active::before{content:"";position:absolute;left:-9px;top:18px;width:3px;height:26px;border-radius:0 3px 3px 0;background:var(--accent);}

/* ---- panel ---- */
.panel{
  min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(0,0,0,.18) 34%);
}
.panel-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#2C2C31 transparent;}
.panel-scroll::-webkit-scrollbar{width:10px;}
.panel-scroll::-webkit-scrollbar-thumb{background:#2A2A2F;border-radius:10px;border:3px solid transparent;background-clip:padding-box;}
.tab-panel{min-height:100%;display:flex;flex-direction:column;padding:22px 22px 0;animation:panelIn .45s var(--ease-out);}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ph{margin:0 0 20px;}
.ph-step{font-size:11px;color:var(--accent);letter-spacing:.06em;}
.ph h2{font-family:var(--f-disp);font-weight:500;font-size:23px;letter-spacing:-.03em;line-height:1.15;margin:6px 0 5px;}
.ph p{margin:0;font-size:13.5px;color:var(--tx-3);}
.panel-foot{
  position:sticky;bottom:0;z-index:3;margin:auto -22px 0;padding:14px 22px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(16,16,18,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);
}

.tip{
  display:flex;gap:12px;align-items:flex-start;margin:auto 0 18px;padding:14px 16px;border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(212,255,94,.06),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px var(--line);
}
.tip .ic{width:16px;height:16px;color:var(--accent);margin-top:2px;}
.tip p{margin:0;font-size:13px;color:var(--tx-2);line-height:1.5;}
.tip + .panel-foot{margin-top:0;}

/* ---- type grid ---- */
.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.type{
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 2px 10px;border-radius:var(--r-md);
  font-size:12px;font-weight:500;color:var(--tx-2);background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .2s, box-shadow .2s, color .2s;
}
.type .ic{width:21px;height:21px;color:var(--tx-3);transition:color .2s;}
.type:hover{background:var(--fill-2);color:var(--tx);}
.type:hover .ic{color:var(--tx);}
.type.active{background:var(--accent-soft);color:var(--tx);box-shadow:inset 0 0 0 1.5px var(--accent);}
.type.active .ic{color:var(--accent);}

/* ---- fields ---- */
.fields{margin:20px 0 22px;}
.pane{display:none;}
.pane.active{display:block;animation:panelIn .35s var(--ease-out);}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;}
.row-2.tight{gap:0 16px;}
.field{display:block;margin-bottom:12px;}
.lbl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;font-weight:500;color:var(--tx-2);margin-bottom:7px;}
.counter{font-size:11px;color:var(--tx-4);font-weight:400;}
input[type=text],input[type=url],input[type=tel],input[type=email],input[type=datetime-local],textarea,select{
  width:100%;height:46px;padding:0 14px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);outline:none;font-size:15px;color:var(--tx);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
textarea{height:auto;padding:12px 14px;resize:vertical;line-height:1.5;min-height:46px;}
select{
  appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23BDBAB2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
select option{background:#17171A;color:var(--tx);}
input::placeholder,textarea::placeholder{color:var(--tx-4);}
input:hover,textarea:hover,select:hover{border-color:var(--line-3);}
input:focus,textarea:focus,select:focus{background:rgba(255,255,255,.05);border-color:var(--accent);box-shadow:0 0 0 4px rgba(212,255,94,.12);}

.check{display:flex;align-items:center;gap:10px;align-self:end;height:46px;margin-bottom:12px;font-size:14px;color:var(--tx-2);cursor:pointer;}
.check input{position:absolute;opacity:0;pointer-events:none;}
.check .box{width:22px;height:22px;border-radius:7px;box-shadow:inset 0 0 0 1.5px var(--line-3);display:grid;place-items:center;color:var(--accent-ink);transition:.2s;}
.check .box .ic{width:14px;height:14px;opacity:0;transform:scale(.6);transition:.2s var(--ease);}
.check input:checked + .box{background:var(--accent);box-shadow:none;}
.check input:checked + .box .ic{opacity:1;transform:none;}
.check input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:2px;}

/* ---- frame search ---- */
.search{
  position:relative;display:flex;align-items:center;gap:10px;height:42px;padding:0 10px 0 13px;margin:0 0 10px;border-radius:12px;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .2s, background .2s;
}
.search:focus-within{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--accent), 0 0 0 4px rgba(212,255,94,.12);}
.search .ic{width:16px;height:16px;color:var(--tx-3);flex:none;}
.search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;box-shadow:none;font-size:14px;}
.search input:focus{box-shadow:none;background:none;border:0;}
.search input::-webkit-search-cancel-button{filter:invert(1) opacity(.5);}
.search kbd{font-size:11px;color:var(--tx-4);padding:1px 7px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-2);}
.search:focus-within kbd{display:none;}
.frame-empty{grid-column:1/-1;padding:28px 12px;text-align:center;color:var(--tx-3);font-size:13.5px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);}

/* ---- frames ---- */
.cat-sections{
  display:flex;gap:2px;padding:3px;margin:0 0 10px;border-radius:13px;overflow-x:auto;scrollbar-width:none;
  background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px var(--line);
}
.cat-sections::-webkit-scrollbar{display:none;}
.cat-sections .seg-opt{flex:1 0 auto;height:34px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.cat-sections .seg-opt i{font-style:normal;font-family:var(--f-mono);font-size:10px;color:var(--tx-4);font-variant-numeric:tabular-nums;}
.cat-sections .seg-opt.active i{color:var(--tx-3);}
.cat-row{
  display:flex;gap:6px;overflow-x:auto;margin:0 -22px 2px;padding:1px 22px 12px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 40px),transparent);
}
.cat-row::-webkit-scrollbar{display:none;}
.cat-row.expanded{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;row-gap:6px;}
.cat-toggle{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--tx-3);}
.cat-toggle .ic{width:13px;height:13px;transform:rotate(90deg);transition:transform .3s var(--ease-out);}
.cat-row.expanded .cat-toggle .ic{transform:rotate(-90deg);}
.cat-toggle:hover{color:var(--tx);}
.cat{
  flex:none;height:34px;padding:0 13px;border-radius:999px;font-size:13px;font-weight:500;color:var(--tx-2);
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);display:inline-flex;align-items:center;gap:7px;transition:.2s;
}
.cat:hover{background:var(--fill-2);color:var(--tx);}
.cat i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:var(--tx-4);}
.cat.active{background:var(--tx);color:var(--accent-ink);box-shadow:none;}
.cat.active i{color:rgba(10,10,11,.5);}
.cat[data-cat=fav]{box-shadow:inset 0 0 0 1px rgba(212,255,94,.35);}
.cat[data-cat=fav].active{box-shadow:none;}
.cat.reco::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);}
.cat.active.reco::before{background:var(--accent-ink);box-shadow:none;}
.reco{
  display:flex;align-items:center;gap:10px;margin:4px 0 14px;padding:10px 10px 10px 14px;border-radius:12px;
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);color:var(--tx-2);font-size:13px;
}
.reco button{margin-left:auto;flex:none;font-weight:600;font-size:12.5px;color:var(--accent-ink);background:var(--accent);padding:5px 11px;border-radius:999px;}
.frame-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px;}
.frame-tile{
  display:flex;flex-direction:column;gap:6px;padding:5px 5px 8px;border-radius:var(--r-md);text-align:left;
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .2s, box-shadow .2s, transform .3s var(--ease);animation:panelIn .4s var(--ease-out) both;
}
.frame-tile:hover{background:var(--fill-2);transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line-3);}
.ft-thumb{
  aspect-ratio:1/1;border-radius:10px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(176deg,#F8F7F3 0%,#EDEBE4 100%);
  box-shadow:inset 0 0 0 1px rgba(17,18,16,.06), inset 0 -14px 22px -16px rgba(17,18,16,.4);
}
.th{position:relative;display:block;}
.th img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;}
.frame-grid .th img:not(.th-qr){opacity:0;transition:opacity .45s var(--ease);}
.frame-grid .th img.rdy{opacity:1;}
.th .th-qr{inset:auto;}
.th > svg{position:absolute;inset:0;width:100%;height:100%;}
.ft-none .ft-thumb{color:var(--tx-3);background:repeating-linear-gradient(45deg,#1A1A1D 0 7px,#151517 7px 14px);box-shadow:inset 0 0 0 1px var(--line);}
.ft-none .ft-thumb .ic{width:26px;height:26px;}
.ft-name{font-size:11.5px;color:var(--tx-3);padding:0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.frame-tile{position:relative;}
.frame-tile.active{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);}
.ft-star{
  position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(14,14,16,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--tx-2);
  opacity:0;transform:scale(.8);transition:opacity .2s, transform .25s var(--ease-out), color .2s, background .2s;
}
.ft-star .ic{width:14px;height:14px;}
.frame-tile:hover .ft-star,.frame-tile:focus-within .ft-star,.ft-star.on{opacity:1;transform:none;}
.ft-star:hover{background:rgba(14,14,16,.8);color:var(--accent);}
.ft-star.on{color:var(--accent);background:rgba(14,14,16,.7);}
.ft-star.on .ic{fill:var(--accent);}

/* разделы каталога */
.fg-head{
  grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:14px 0 2px;padding-top:12px;
  border-top:1px solid var(--line);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-3);
}
.fg-head:first-child{margin-top:2px;border-top:0;padding-top:0;}
.fg-head b{font-weight:600;color:var(--tx-2);letter-spacing:.06em;}
.fg-head i{font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--tx-4);}
.fg-head::after{content:"";flex:1;height:1px;background:var(--line);}
.fg-more{
  grid-column:1/-1;height:44px;border-radius:var(--r-md);margin-top:6px;
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);color:var(--tx-2);font-size:13.5px;font-weight:600;transition:.2s;
}
.fg-more:hover{background:var(--fill-2);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line-3);}
.frame-tile.active .ft-name{color:var(--tx);font-weight:600;}

/* ---- studio presets & logo backgrounds ---- */
.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
.pcard{
  display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:14px;text-align:left;
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s var(--ease-out), box-shadow .2s, background .2s;
}
.pcard svg,.pcard img{display:block;flex:none;width:44px;height:44px;border-radius:9px;}
.pcard:hover{transform:translateY(-2px);background:var(--fill-2);box-shadow:inset 0 0 0 1px var(--line-3);}
.pc-n{font-size:12.5px;font-weight:600;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcard.active{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent), 0 14px 30px -18px rgba(212,255,94,.5);}
.pcard.active .pc-n{color:var(--accent);}
.bg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px;}
.bgo{display:flex;flex-direction:column;gap:5px;padding:5px 5px 7px;border-radius:12px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);transition:.2s;}
.bgo img{width:100%;aspect-ratio:1;border-radius:8px;}
.bgo span{font-size:10.5px;font-weight:600;color:var(--tx-3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bgo:hover{background:var(--fill-2);transform:translateY(-2px);}
.bgo.active{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);}
.bgo.active span{color:var(--accent);}
.frame-tile.ft-custom .ft-thumb{
  flex-direction:column;gap:6px;color:var(--tx-2);background:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.75' y='.75' width='calc(100%25 - 1.5px)' height='calc(100%25 - 1.5px)' rx='10' fill='none' stroke='%23ffffff40' stroke-width='1.5' stroke-dasharray='5 5'/%3E%3C/svg%3E");
}
.frame-tile.ft-custom .ft-thumb b{font-size:11.5px;font-weight:600;}
.frame-tile.ft-custom:hover .ft-thumb{color:var(--accent);}
.stage-wrap.pop .stage{animation:stagePop .5s var(--ease-out);}
@keyframes stagePop{0%{scale:1}40%{scale:.95}100%{scale:1}}

/* ---- caption editor ---- */
.cap-editor{
  margin:2px 0 16px;padding:14px 14px 12px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(212,255,94,.08),rgba(212,255,94,.02));box-shadow:inset 0 0 0 1px rgba(212,255,94,.22);
  animation:panelIn .35s var(--ease-out);
}
.cap-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.cap-head .ic{color:var(--accent);width:17px;height:17px;}
.cap-head b{font-weight:600;font-size:14px;}
.cap-head .micro{flex-basis:100%;}
.cap-chips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px;}
.cap-chip{height:28px;padding:0 10px;border-radius:999px;background:var(--fill-2);font-size:11.5px;font-weight:500;color:var(--tx-2);box-shadow:inset 0 0 0 1px var(--line);transition:.2s;}
.cap-chip:hover{color:var(--tx);box-shadow:inset 0 0 0 1px var(--line-3);}
.cap-chip.active{background:var(--tx);color:var(--accent-ink);box-shadow:none;}
.cap-fonts .seg-opt{font-size:13px;}
.cap-editor .row-2{grid-template-columns:1fr;}

/* ---- style groups ---- */
.group{padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid var(--line);}
.tab-panel .group:last-of-type{border-bottom:0;margin-bottom:6px;}
.group-title{font-family:var(--f-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-3);margin:0 0 12px;}
.group > .micro{margin:-4px 0 12px;}
.group .seg + .micro{margin-top:10px;}

.preset-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.preset{
  display:flex;align-items:center;gap:9px;padding:6px 8px 6px 6px;border-radius:var(--r-md);
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;font-weight:500;color:var(--tx-2);transition:.2s;text-align:left;
}
.preset:hover{background:var(--fill-2);color:var(--tx);}
.preset svg{width:34px;height:34px;flex:none;border-radius:8px;}
.preset.active{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--tx);background:var(--accent-soft);}

.opt-row{display:flex;flex-wrap:wrap;gap:6px;}
.opt{
  width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--tx-2);
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);transition:.2s;
}
.opt svg{width:28px;height:28px;}
.opt:hover{background:var(--fill-2);color:var(--tx);}
.opt.active{background:var(--tx);color:var(--accent-ink);box-shadow:none;}

.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.color{
  position:relative;display:flex;align-items:center;gap:11px;padding:7px;border-radius:var(--r-md);
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:background .2s, opacity .2s;
}
.color:hover{background:var(--fill-2);}
.color input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.color .sw{width:34px;height:34px;border-radius:9px;flex:none;background:var(--c,#000);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}
.color-txt{display:flex;flex-direction:column;line-height:1.25;}
.color-txt .lbl{margin:0;font-size:11.5px;color:var(--tx-3);}
.hex{font-size:12.5px;text-transform:uppercase;color:var(--tx);}
.color.is-off{opacity:.35;pointer-events:none;}

.switches{margin-top:10px;display:grid;}
.switch-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;font-size:14px;color:var(--tx-2);cursor:pointer;}
.switch{
  appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:999px;margin:0;flex:none;
  background:#2A2A2F;position:relative;cursor:pointer;transition:background .25s;box-shadow:inset 0 0 0 1px var(--line);
}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#8C8A84;
  transition:transform .3s var(--ease-out), background .25s;
}
.switch:checked{background:var(--accent);}
.switch:checked::after{transform:translateX(18px);background:var(--accent-ink);}

.logo-icons{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:0 0 10px;}
.logo-ic{
  aspect-ratio:1;border-radius:12px;display:grid;place-items:center;
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);color:var(--tx-2);transition:.2s;
}
.logo-ic .ic{width:19px;height:19px;}
.logo-ic:hover{background:var(--fill-2);color:var(--tx);}
.logo-ic.active{background:var(--tx);color:var(--accent-ink);box-shadow:none;}

.upload-row{display:flex;gap:6px;align-items:stretch;}
.drop{
  flex:1;display:flex;align-items:center;gap:13px;padding:9px;border-radius:var(--r-md);cursor:pointer;position:relative;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.75' y='.75' width='calc(100%25 - 1.5px)' height='calc(100%25 - 1.5px)' rx='13' fill='none' stroke='%23ffffff33' stroke-width='1.5' stroke-dasharray='6 6'/%3E%3C/svg%3E");
  transition:background-color .2s;
}
.drop input{position:absolute;opacity:0;width:1px;height:1px;}
.drop:hover,.drop.drag{
  background-color:var(--accent-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.75' y='.75' width='calc(100%25 - 1.5px)' height='calc(100%25 - 1.5px)' rx='13' fill='none' stroke='%23D4FF5E' stroke-width='1.5' stroke-dasharray='6 6'/%3E%3C/svg%3E");
}
.drop:focus-within{outline:2px solid var(--accent);outline-offset:2px;}
.drop-thumb{width:46px;height:46px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--fill-2);color:var(--tx-3);overflow:hidden;}
.drop-thumb img{width:100%;height:100%;object-fit:contain;background:#fff;}
.drop-txt{display:flex;flex-direction:column;gap:2px;font-size:14px;}
.drop-txt b{font-weight:600;}
.upload-row .icon-btn{width:48px;height:auto;}
.upload-row .icon-btn:hover{color:var(--bad);background:rgba(255,122,107,.1);}
.range-row{display:flex;align-items:center;gap:14px;margin-top:12px;font-size:13.5px;color:var(--tx-2);}
.range-row input{flex:1;accent-color:var(--accent);}
.range-row .mono{width:40px;text-align:right;font-size:12.5px;color:var(--tx-3);}

.seg{display:flex;padding:3px;border-radius:13px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.035);gap:2px;}
.seg-opt{flex:1;height:36px;border-radius:10px;font-size:13px;font-weight:500;color:var(--tx-3);transition:.2s;white-space:nowrap;padding:0 8px;}
.seg-opt:hover{color:var(--tx);}
.seg-opt.active{background:var(--elev);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line-2), 0 4px 10px -4px rgba(0,0,0,.6);}
.seg-sm .seg-opt{height:34px;}

/* ---- canvas ---- */
.canvas{min-width:0;min-height:0;display:flex;flex-direction:column;padding:0 18px;}
.canvas-top{flex:none;height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ct-left{display:flex;align-items:center;gap:10px;min-width:0;}
.ct-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-4);}
.pv-title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.badge{flex:none;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(245,196,81,.12);color:var(--warn);box-shadow:inset 0 0 0 1px rgba(245,196,81,.25);}

.ct-right{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0;}
.ct-right .readability{flex:0 1 auto;min-width:0;}
.ct-right .rd-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bg-toggle{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px var(--line);}
.bgt{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;transition:background .2s;}
.bgt:hover{background:var(--fill-2);}
.bgt i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}
.bgt-light i{background:var(--paper);}
.bgt-dark i{background:#1B1B1E;}
.bgt-checker i{background:repeating-conic-gradient(#d9d8d2 0 25%, #fff 0 50%) 0 0/7px 7px;}
.bgt.active{background:var(--elev);box-shadow:inset 0 0 0 1px var(--line-3);}
.readability{
  display:inline-flex;align-items:center;gap:9px;padding:7px 12px 7px 11px;border-radius:999px;flex:none;
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;font-weight:500;color:var(--tx-2);
  transition:background .3s, color .3s, box-shadow .3s;
}
.rd-meter{display:flex;gap:2px;}
.rd-meter i{width:10px;height:5px;border-radius:3px;background:var(--fill-3);transition:background .3s;}
.readability[data-level=great] i{background:var(--good);}
.readability[data-level=good] i:nth-child(-n+3){background:var(--good);}
.readability[data-level=risky] i:nth-child(-n+2){background:var(--warn);}
.readability[data-level=bad] i:nth-child(1){background:var(--bad);}
.readability[data-level=great],.readability[data-level=good]{color:var(--good);box-shadow:inset 0 0 0 1px rgba(107,227,160,.22);background:rgba(107,227,160,.06);}
.readability[data-level=risky]{color:var(--warn);box-shadow:inset 0 0 0 1px rgba(245,196,81,.25);background:rgba(245,196,81,.07);}
.readability[data-level=bad]{color:var(--bad);box-shadow:inset 0 0 0 1px rgba(255,122,107,.3);background:rgba(255,122,107,.08);}
.readability[data-level=info] i{background:var(--tx-4);}
.rd-ok{display:none;width:15px;height:15px;padding:2px;border-radius:50%;background:var(--good);color:#06150c;}
.readability[data-verified] .rd-ok{display:inline-block;}
.readability[data-verified] .rd-meter{display:none;}
.rd-text{transition:opacity .2s;}
.readability.is-checking .rd-text{opacity:.55;}

.stage-wrap{
  position:relative;flex:1;min-height:0;border-radius:20px;overflow:hidden;display:grid;place-items:center;
  background-color:var(--paper);
  background-image:radial-gradient(rgba(17,18,16,.11) 1px, transparent 1.3px), radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.55), transparent 60%);
  background-size:18px 18px, 100% 100%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -60px 100px -60px rgba(0,0,0,.12);
}
.stage-wrap{transition:background-color .4s var(--ease);}
.stage-wrap.bg-dark{background-color:#18181B;background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.3px), radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.04), transparent 60%);}
.stage-wrap.bg-checker{background-color:#fff;background-image:repeating-conic-gradient(#E8E7E1 0 25%, #fff 0 50%);background-size:22px 22px;}
.stage-wrap.bg-dark .stage-frame{filter:drop-shadow(0 22px 30px rgba(0,0,0,.5));}
.stage-wrap.bg-dark .stage-frame.is-raster{mix-blend-mode:normal;}
.stage{position:relative;transition:width .45s var(--ease-out), height .45s var(--ease-out), transform .45s var(--ease-out);}
.stage-frame{position:absolute;inset:0;width:100%;height:100%;z-index:1;filter:drop-shadow(0 22px 30px rgba(17,18,16,.18));}
/* мягкая опорная тень под объектом — «съёмочный стол», а не парящая картинка */
.stage::after{
  content:"";position:absolute;left:6%;right:6%;bottom:-5%;height:10%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(17,18,16,.26), rgba(17,18,16,0) 70%);
  opacity:.75;transition:opacity .4s var(--ease);
}
.stage-wrap.bg-dark .stage::after{background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.6), rgba(0,0,0,0) 70%);}
.stage-frame > img,.stage-frame > svg{display:block;width:100%;height:100%;}
.stage-frame.is-raster{filter:none;mix-blend-mode:multiply;}
.stage-frame.swap{animation:frameIn .34s var(--ease-out);}
@keyframes frameIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.stage-qr{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;}

/* ---- наложения: текст и картинки, которые двигает сам пользователь ---- */
.stage-over{position:absolute;inset:0;z-index:3;}
.ov{
  position:absolute;transform:translate(-50%,-50%);cursor:grab;touch-action:none;user-select:none;
  line-height:1.1;white-space:pre;display:block;padding:2px 4px;border-radius:6px;
  outline:1.5px dashed transparent;outline-offset:3px;transition:outline-color .15s;
}
.ov:hover{outline-color:rgba(17,18,16,.25);}
.ov.sel{outline-color:var(--accent);outline-style:solid;}
.ov:active{cursor:grabbing;}
.ov img{display:block;width:100%;height:auto;pointer-events:none;}
.ov-handle{
  position:absolute;right:-9px;bottom:-9px;width:14px;height:14px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.35);cursor:nwse-resize;
}
.ov-guides{position:absolute;inset:0;z-index:4;pointer-events:none;}
.ov-guides i{position:absolute;opacity:0;transition:opacity .12s;background:var(--accent);}
.ov-guides .gv{left:50%;top:0;bottom:0;width:1px;}
.ov-guides .gh{top:50%;left:0;right:0;height:1px;}
.ov-guides.v .gv,.ov-guides.h .gh{opacity:.9;}
.stage-wrap.bg-dark .ov:hover{outline-color:rgba(255,255,255,.3);}
.ov-band-row{margin-bottom:12px;transition:opacity .2s;}
.ov-band-row .lbl{margin-bottom:6px;}
.ov-band-row.is-off{opacity:.4;pointer-events:none;}
.ov-add{display:flex;gap:6px;margin-bottom:10px;}
.ov-add .btn{flex:1;}
.ov-add label.btn{cursor:pointer;}
.ov-list{display:grid;gap:5px;margin-bottom:10px;}
.ov-row{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:11px;text-align:left;
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--tx-2);transition:.2s;
}
.ov-row:hover{background:var(--fill-2);color:var(--tx);}
.ov-row.active{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--tx);}
.ov-row .ic{width:15px;height:15px;color:var(--tx-3);flex:none;}
.ov-row b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ov-props{padding-top:4px;}
.ov-actions{display:flex;gap:6px;margin-top:10px;}
.ov-actions .btn{flex:1;padding:0 8px;}
.ov-empty{font-size:12.5px;color:var(--tx-4);padding:2px 0 4px;}
.stage-qr canvas{width:100% !important;height:100% !important;display:block;}
.stage.no-frame .stage-qr{border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(17,18,16,.45), 0 0 0 1px rgba(17,18,16,.04);}
.stage.no-frame.is-transparent .stage-qr{box-shadow:none;}
.beam{
  position:absolute;left:-6%;right:-6%;top:0;height:2px;border-radius:2px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,#9BD41A 30%,#C6FF3A 50%,#9BD41A 70%,transparent);
  box-shadow:0 0 22px 6px rgba(160,220,30,.35);
}
.stage.scanning .beam{animation:beam 1.1s var(--ease) 1;}
@keyframes beam{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
.stage.is-busy{opacity:.6;transition:opacity .2s;}

.pv-colors{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:4;
  opacity:.62;transition:opacity .3s var(--ease), transform .35s var(--ease-out);
  display:flex;align-items:center;gap:12px;padding:6px 8px 6px 14px;border-radius:999px;white-space:nowrap;
  background:rgba(14,14,16,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px var(--line-2), 0 18px 40px -16px rgba(0,0,0,.6);
}
.stage-wrap:hover .pv-colors,.pv-colors:focus-within{opacity:1;}
.stage-wrap:not(:hover) .pv-colors:not(:focus-within){transform:translateX(-50%) translateY(4px);}
.pv-colors .lbl{margin:0;font-size:12px;color:var(--tx-3);letter-spacing:.01em;}
@media (hover:none){.pv-colors{opacity:1;}.stage-wrap:not(:hover) .pv-colors:not(:focus-within){transform:translateX(-50%);}}
.swatches{display:flex;gap:5px;}
.swatch{width:24px;height:24px;border-radius:50%;background:var(--c);position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .2s var(--ease);}
.swatch:hover{transform:scale(1.15);}
.swatch.active{box-shadow:0 0 0 2px #0E0E10, 0 0 0 3.5px var(--tx);}
.swatch.custom{background:conic-gradient(#ff5f5f,#ffd84d,#5be39a,#4db8ff,#8f6bff,#ff5fc8,#ff5f5f);overflow:hidden;}
.swatch.custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}

.export-bar{flex:none;height:78px;display:flex;align-items:center;gap:8px;}
.export-bar .seg{width:188px;flex:none;}
.size-pick select{height:40px;width:118px;border-radius:12px;font-size:13.5px;background-color:rgba(0,0,0,.3);border-color:var(--line);}
.size-pick.is-off{opacity:.35;pointer-events:none;}
.btn-dl{--h:46px;padding:0 22px;min-width:168px;}
.btn-dl.is-done{background:var(--good);box-shadow:0 0 0 1px rgba(107,227,160,.5), 0 10px 30px -10px rgba(107,227,160,.6);}
.btn-dl.is-done .ic{animation:pop .45s var(--ease-out);}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ============================================================
   ARTICLE — уникальный текст посадочной страницы
   ============================================================ */
.art-wrap{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start;}
.art-wrap .sec-head{margin:0;position:sticky;top:calc(var(--nav-h) + 24px);}
.art-body{max-width:72ch;color:var(--tx-2);font-size:16px;line-height:1.72;}
.art-body h3{font-family:var(--f-disp);font-weight:500;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.02em;line-height:1.25;color:var(--tx);margin:38px 0 12px;text-wrap:balance;}
.art-body h3:first-child{margin-top:0;}
.art-body p{margin:0 0 14px;text-wrap:pretty;}
.art-body ul,.art-body ol{margin:0 0 18px;padding-left:22px;display:grid;gap:8px;}
.art-body li::marker{color:var(--accent);}
.art-body b,.art-body strong{color:var(--tx);font-weight:600;}
.art-body a{color:var(--accent);text-underline-offset:3px;}
.art-table{overflow-x:auto;margin:6px 0 20px;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line-2);}
.art-table table{width:100%;border-collapse:collapse;font-size:14.5px;}
.art-table th,.art-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
.art-table th{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);background:var(--fill);}
.art-table tr:last-child td{border-bottom:0;}
.art-table td:first-child{color:var(--tx);font-weight:500;}
.art-note{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(212,255,94,.22);color:var(--tx);margin:18px 0 22px !important;}
.art-note .ic{width:18px;height:18px;color:var(--accent);margin-top:3px;flex:none;}
.art-related{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);}
.art-related b{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);margin-right:6px;}
.art-related a{padding:7px 13px;border-radius:999px;font-size:13.5px;text-decoration:none;color:var(--tx-2);box-shadow:inset 0 0 0 1px var(--line-2);transition:.2s;}
.art-related a:hover{color:var(--tx);background:var(--fill-2);}
@media (max-width:900px){
  .art-wrap{grid-template-columns:1fr;}
  .art-wrap .sec-head{position:static;}
}

/* ============================================================
   GUIDES — раздел «Руководства»
   ============================================================ */
.guide-page main{padding-top:calc(var(--nav-h) + 40px);}
.guide{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) clamp(64px,8vw,110px);}
.guide-hero{max-width:860px;margin:0 0 clamp(36px,5vw,56px);}
.guide-hero .crumbs{display:flex;flex-wrap:wrap;row-gap:4px;}
.guide-title{font-family:var(--f-disp);font-weight:500;font-size:clamp(32px,4.6vw,56px);letter-spacing:-.035em;line-height:1.06;margin:14px 0 18px;text-wrap:balance;}
.guide-lede{font-size:clamp(16px,1.5vw,19px);color:var(--tx-2);line-height:1.6;margin:0;max-width:62ch;text-wrap:pretty;}
.guide-meta{margin:18px 0 0;font-size:12px;color:var(--tx-4);letter-spacing:.04em;}
.guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(32px,5vw,72px);align-items:start;}
.guide-aside{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);}
.guide-aside b{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);margin-bottom:4px;}
.guide-aside a:not(.btn){color:var(--tx-2);text-decoration:none;font-size:14.5px;padding:6px 0;border-bottom:1px solid var(--line);transition:color .2s;}
.guide-aside a:not(.btn):hover{color:var(--accent);}
.guide-aside .btn{margin-top:8px;justify-content:center;}
.guide-faq,.guide-more{margin-top:clamp(56px,7vw,88px);}
.guide-faq h2,.guide-more h2{font-family:var(--f-disp);font-weight:500;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;margin:0 0 22px;}
.guide-faq .faq-list{max-width:860px;}
.guide-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.guide-card{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r-lg);text-decoration:none;background:linear-gradient(180deg,#131315,#0E0E10);box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s var(--ease), box-shadow .2s;}
.guide-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--line-3);}
.guide-card b{font-family:var(--f-disp);font-weight:500;font-size:18px;letter-spacing:-.02em;line-height:1.25;color:var(--tx);}
.guide-card span{font-size:14px;color:var(--tx-3);line-height:1.5;}
.guide-page .foot{margin-top:0;}
@media (max-width:900px){
  .guide-layout{grid-template-columns:1fr;}
  .guide-aside{position:static;}
}

/* ============================================================
   3D-ПРИМЕРКА — код в интерьере
   ============================================================ */
.stage-3d{
  position:absolute;top:12px;left:12px;z-index:5;display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 13px 0 10px;border-radius:999px;font-size:13px;font-weight:600;color:var(--accent-ink);
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(17,18,16,.08), 0 8px 22px -10px rgba(17,18,16,.4);transition:transform .25s var(--ease), background .2s;
}
.stage-3d .ic{width:16px;height:16px;}
.stage-tools{position:absolute;top:12px;left:12px;z-index:5;display:flex;gap:8px;flex-wrap:wrap;}
.stage-tools .stage-3d{position:relative;top:auto;left:auto;text-decoration:none;}
.stage-tools .stage-edit::after{display:none;}
.stage-3d:hover{background:#fff;transform:translateY(-1px);}
.stage-3d::after{content:"";position:absolute;inset:-3px;border-radius:inherit;box-shadow:0 0 0 2px var(--accent);opacity:0;animation:pulse3d 2.8s 1.5s var(--ease-out) 2;}
@keyframes pulse3d{0%{opacity:.9;transform:scale(.96)}100%{opacity:0;transform:scale(1.18)}}
.stage-wrap.bg-dark .stage-3d{background:rgba(30,30,34,.86);color:var(--tx);box-shadow:0 0 0 1px var(--line-2);}

.dlg-3d{width:min(1340px, calc(100vw - 24px));}
.mock-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:0;}
.mock-opts{display:grid;align-content:start;gap:14px;padding:16px 18px 18px;border-left:1px solid var(--line);overflow-y:auto;max-height:min(68dvh, 680px);scrollbar-width:thin;}
.mo-row[hidden]{display:none;}
.mo-row .lbl{margin-bottom:6px;}
.mock-opts .switch-row{padding:4px 0;}
.mock-opts .seg-grid{grid-template-columns:repeat(4,1fr);}
.mock-opts .mo-grid3{grid-template-columns:repeat(3,1fr);}
.mock-opts .seg-grid .seg-opt{padding:0 4px;font-size:12.5px;}
.mo-swatches{display:flex;flex-wrap:wrap;gap:9px;padding:2px;}
.mo-sw{position:relative;width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:box-shadow .2s, transform .2s;}
.mo-sw:hover{transform:scale(1.06);}
.mo-sw.active{box-shadow:inset 0 0 0 1px rgba(0,0,0,.2), 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);}
.mo-sw-pick{overflow:hidden;cursor:pointer;background:conic-gradient(#ff5a5a, #ffd25a, #6bdc7a, #5ac8ff, #7a6bff, #ff5ad2, #ff5a5a);}
.mo-sw-pick input{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);opacity:0;cursor:pointer;}
.mo-file{margin-top:7px;}
.mock-stage.transparent{background-color:#ECECEE;background-image:conic-gradient(#D6D6DA 25%, transparent 0 50%, #D6D6DA 0 75%, transparent 0);background-size:24px 24px;}
.mock-stage.studio{background:var(--studio, #E6E0D6);}
@media (max-width:980px){
  .mock-body{grid-template-columns:1fr;}
  .mock-opts{border-left:0;border-top:1px solid var(--line);max-height:none;overflow:visible;padding:14px 16px;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));column-gap:22px;}
  .dlg-3d .dlg-in{overflow-y:auto;}
  .dlg-3d .mock-body, .dlg-3d .dlg-head{flex-shrink:0;}
  .dlg-3d .mock-foot{position:sticky;bottom:0;z-index:3;background:#111113;}
}
.dlg-3d .dlg-head{gap:14px;}
.mock-scenes{margin-left:auto;max-width:100%;overflow-x:auto;scrollbar-width:none;}
.mock-scenes::-webkit-scrollbar{display:none;}
.mock-scenes .seg-opt{padding:0 14px;flex:0 0 auto;}
.mock-stage{position:relative;height:min(68dvh, 680px);background:#1a1a1d;overflow:hidden;touch-action:none;cursor:grab;}
.mock-stage:active{cursor:grabbing;}
.mock-stage canvas{display:block;width:100%;height:100%;}
.mock-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--tx-2);font-size:14px;background:#141416;transition:opacity .4s;}
.mock-loading.hide{opacity:0;pointer-events:none;}
.mock-loading.soft{background:rgba(16,16,18,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity .25s;}
.mock-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--accent);animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.mock-hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);margin:0;padding:7px 14px;border-radius:999px;white-space:nowrap;
  font-size:12.5px;color:#fff;background:rgba(10,10,12,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .5s;pointer-events:none;
}
.mock-hint.hide{opacity:0;}
.mock-foot{display:flex;align-items:center;gap:10px;padding:14px 16px 16px 24px;border-top:1px solid var(--line);}
.mock-foot .micro{margin-right:auto;}
@media (max-width:720px){
  .dlg-3d .dlg-head{flex-wrap:wrap;}
  .mock-scenes{order:3;margin-left:0;width:100%;flex-wrap:wrap;overflow:visible;}
  .mock-scenes .seg-opt{flex:1 1 30%;}
  .mock-stage{height:52dvh;}

  .mock-foot{flex-wrap:wrap;padding:12px 16px 16px;}
  .mock-foot .micro{flex-basis:100%;}
  .mock-foot .btn{flex:1;}
  .mock-hint{font-size:11.5px;white-space:normal;text-align:center;width:max-content;max-width:calc(100% - 24px);}
}

.mk-grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.mk-card{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:#1a1a1d;box-shadow:inset 0 0 0 1px var(--line);isolation:isolate;}
.mk-card.mk-wide{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}
.mk-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out);}
.mk-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,8,10,.72));pointer-events:none;}
.mk-card span{position:absolute;left:14px;bottom:12px;z-index:1;font-weight:600;font-size:14px;color:#fff;display:inline-flex;align-items:center;gap:8px;}
.mk-card span::after{content:"3D";font-family:var(--f-mono);font-size:10px;padding:2px 6px;border-radius:6px;background:var(--accent);color:var(--accent-ink);}
.mk-card:hover img{transform:scale(1.05);}
.mk-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.mk-cta{max-width:var(--wrap);margin:22px auto 0;display:flex;justify-content:center;}
@media (max-width:900px){
  .mk-grid{grid-template-columns:repeat(2,1fr);}
  .mk-card.mk-wide{grid-row:auto;aspect-ratio:4/3;}
}

/* ============================================================
   STATS
   ============================================================ */
.stats{max-width:var(--wrap);margin:26px auto 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);}
.stats div{padding:22px 24px;border-left:1px solid var(--line);}
.stats div:first-child{border-left:0;}
.stats dt{font-family:var(--f-disp);font-weight:400;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.04em;line-height:1;}
.stats dd{margin:8px 0 0;font-size:13px;color:var(--tx-3);}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:clamp(96px,12vw,160px) var(--pad) 0;}
.sec-head{max-width:var(--wrap);margin:0 auto clamp(36px,5vw,56px);}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--tx-3);margin-bottom:18px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);}
.sec-head h2{text-wrap:balance;
  font-family:var(--f-disp);font-weight:400;letter-spacing:-.045em;line-height:1.02;
  font-size:clamp(34px, 5.4vw, 68px);margin:0;max-width:16ch;text-wrap:balance;
}
.sec-head p{color:var(--tx-2);font-size:clamp(15.5px,1.4vw,18px);max-width:54ch;margin:20px 0 0;line-height:1.6;}

/* ---- compare ---- */
.compare-grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center;}
.compare-sec .sec-head{margin:0;}
.compare-points{list-style:none;padding:0;margin:28px 0 32px;display:grid;gap:12px;}
.compare-points li{display:flex;align-items:center;gap:12px;color:var(--tx-2);font-size:15px;}
.compare-points .ic{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(212,255,94,.3);}
.compare{
  position:relative;border-radius:var(--r-2xl);overflow:hidden;aspect-ratio:1/1.02;isolation:isolate;
  background-color:var(--paper);background-image:radial-gradient(rgba(17,18,16,.1) 1px, transparent 1.3px);background-size:18px 18px;
  box-shadow:0 0 0 1px var(--line-2), 0 60px 120px -40px rgba(0,0,0,.9);
  user-select:none;touch-action:pan-y;
}
.cmp-stage{position:absolute;left:50%;top:50%;height:80%;aspect-ratio:760/1010;transform:translate(-50%,-50%);}
.cmp-layer{position:absolute;inset:0;}
.cmp-layer svg{display:block;width:100%;height:100%;overflow:visible;}
.cmp-after{clip-path:inset(0 0 0 var(--cut, 50%));}
.cmp-before svg{filter:drop-shadow(0 20px 30px rgba(17,18,16,.12));}
.cmp-after svg{filter:drop-shadow(0 26px 34px rgba(17,18,16,.22));}
.cmp-tag{position:absolute;top:18px;z-index:3;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:999px;}
.cmp-tag-l{left:18px;background:rgba(17,18,16,.08);color:#3b3b36;}
.cmp-tag-r{right:18px;background:var(--bg);color:var(--accent);}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;z-index:3;background:var(--bg);pointer-events:none;}
.cmp-handle span{
  position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;
  background:var(--bg);color:var(--accent);box-shadow:0 0 0 4px rgba(10,10,11,.12), 0 14px 30px -10px rgba(0,0,0,.6);transition:transform .3s var(--ease-out);
}
.compare:hover .cmp-handle span{transform:translate(-50%,-50%) scale(1.08);}
.cmp-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;}
.cmp-range:focus-visible ~ .cmp-handle span,.compare:focus-within .cmp-handle span{box-shadow:0 0 0 3px var(--accent), 0 14px 30px -10px rgba(0,0,0,.6);}

/* ---- 404 ---- */
.e404{min-height:100dvh;display:grid;place-items:center;padding:60px var(--pad);position:relative;isolation:isolate;overflow:hidden;}
.e404::before{
  content:"";position:absolute;left:50%;top:-10%;width:min(1000px,120vw);height:700px;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(40% 45% at 50% 30%, rgba(212,255,94,.12), transparent 70%);
}
.e404-in{max-width:720px;text-align:center;}
.e404-in .hero-lede{margin-left:auto;margin-right:auto;}
.e404-in .hero-actions{justify-content:center;}
.e404-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:38px;}
.e404-links a{
  padding:9px 14px;border-radius:999px;font-size:13.5px;color:var(--tx-2);text-decoration:none;
  background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);transition:.2s;
}
.e404-links a:hover{color:var(--accent);box-shadow:inset 0 0 0 1px rgba(212,255,94,.4);}

/* ---- type cards (internal links) ---- */
.type-cards{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.type-card{
  display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-lg);text-decoration:none;
  background:linear-gradient(180deg,#131315,#0E0E10);box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .35s var(--ease-out), box-shadow .3s, background .3s;
}
.type-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(212,255,94,.4), 0 24px 48px -28px rgba(0,0,0,.9);}
.tc-ic{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;background:var(--fill-2);color:var(--accent);box-shadow:inset 0 0 0 1px var(--line);}
.tc-ic .ic{width:20px;height:20px;}
.tc-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
.tc-copy b{font-weight:600;font-size:15px;}
.tc-copy span{font-size:13px;color:var(--tx-3);}
.tc-go{width:16px;height:16px;margin-left:auto;color:var(--tx-4);flex:none;transition:transform .3s var(--ease-out), color .3s;}
.type-card:hover .tc-go{transform:translateX(4px);color:var(--accent);}
.type-card[aria-current=page]{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);}
.type-card[aria-current=page] .tc-ic{background:var(--accent);color:var(--accent-ink);box-shadow:none;}

/* ---- guide ---- */
.guide-grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start;}
.guide .sec-head{margin:0;position:sticky;top:calc(var(--nav-h) + 24px);}
.guide .sec-head .btn{margin-top:28px;}
.guide-body{display:grid;gap:14px;}
.g-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:g;}
.g-step{
  display:flex;gap:20px;padding:24px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#131315,#0E0E10);box-shadow:inset 0 0 0 1px var(--line);
}
.g-step .st-n{font-size:40px;line-height:1;}
.g-step h3{font-family:var(--f-disp);font-weight:500;font-size:19px;letter-spacing:-.025em;margin:2px 0 8px;}
.g-step p{margin:0;color:var(--tx-3);font-size:14.5px;line-height:1.6;}
.g-check{
  padding:22px 24px;border-radius:var(--r-lg);background:rgba(107,227,160,.05);box-shadow:inset 0 0 0 1px rgba(107,227,160,.22);
}
.g-check b{display:block;font-family:var(--f-disp);font-weight:500;font-size:16px;margin-bottom:12px;}
.g-check ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.g-check li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--tx-2);}
.g-check .ic{width:17px;height:17px;padding:2px;border-radius:50%;background:var(--good);color:#06150c;flex:none;}

/* ---- scenarios ---- */
.scn-grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.scn{
  position:relative;display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:center;padding:14px 18px 14px 14px;
  border-radius:var(--r-xl);text-align:left;overflow:hidden;
  background:linear-gradient(180deg,#131315,#0E0E10);box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .45s var(--ease-out), box-shadow .3s;
}
.scn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at 20% 50%, rgba(212,255,94,.10), transparent 70%);}
.scn:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(212,255,94,.45), 0 30px 60px -30px rgba(0,0,0,.9);}
.scn:hover::after{opacity:1;}
.scn-art{aspect-ratio:1;border-radius:16px;background:var(--paper);display:grid;place-items:center;overflow:hidden;}
.scn-art .th{transition:transform .6s var(--ease-out);}
.scn:hover .scn-art .th{transform:scale(1.07) rotate(-2deg);}
.scn-copy{display:flex;flex-direction:column;gap:6px;min-width:0;}
.scn-tag{align-self:flex-start;font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-3);padding:3px 8px;border-radius:999px;background:var(--fill-2);}
.scn h3{margin:2px 0 0;font-family:var(--f-disp);font-weight:500;font-size:19px;letter-spacing:-.025em;}
.scn p{margin:0;color:var(--tx-3);font-size:13.5px;line-height:1.45;}
.scn-go{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:600;color:var(--accent);}
.scn-go .ic{width:14px;height:14px;transition:transform .3s var(--ease-out);}
.scn:hover .scn-go .ic{transform:translateX(4px);}

/* ---- gallery ---- */
.gallery{overflow:hidden;padding-left:0;padding-right:0;}
.gallery .sec-head{padding:0 var(--pad);}
.marquee{display:grid;gap:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marq 90s linear infinite;}
.marquee-track.reverse{animation-direction:reverse;animation-duration:100s;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marq{to{transform:translateX(-50%)}}
.mq-item{
  flex:none;width:196px;height:196px;border-radius:var(--r-lg);background:#F3F2EE;padding:20px;display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);transition:transform .45s var(--ease-out), box-shadow .3s;
}
.mq-item:hover{transform:translateY(-8px) rotate(-1.5deg);box-shadow:0 0 0 2px var(--accent), 0 30px 60px -20px rgba(0,0,0,.8);}

/* ---- bento ---- */
.bento{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(250px,auto);gap:14px;}
.bn{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(22px,2.4vw,32px);
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  background:linear-gradient(180deg,#131315,#0E0E10);box-shadow:inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.05);
}
.bn::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(212,255,94,.075), transparent 60%);
}
.bn::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;border-radius:inherit;padding:1px;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%), rgba(212,255,94,.55), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.bn:hover::before,.bn:hover::after{opacity:1;}
.bn > *{position:relative;z-index:1;}
.bn h3{text-wrap:balance;font-family:var(--f-disp);font-weight:500;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.03em;line-height:1.2;margin:0 0 8px;max-width:22ch;}
.bn p{margin:0;color:var(--tx-3);font-size:14.5px;max-width:46ch;}
.bn-frames{grid-column:span 4;grid-row:span 2;}
.bn-scan{grid-column:span 2;grid-row:span 2;}
.bn-presets,.bn-caption,.bn-export{grid-column:span 2;}
.bn-types,.bn-private{grid-column:span 3;}
.bn-private{flex-direction:row;align-items:center;}
.bento-presets{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.bento-presets svg,.bento-presets img{width:100%;height:auto;aspect-ratio:1;border-radius:9px;box-shadow:0 14px 30px -18px rgba(0,0,0,.9);transition:transform .5s var(--ease-out);}
.bn-presets:hover .bento-presets > *:nth-child(odd){transform:translateY(-6px) rotate(-3deg);}
.bn-presets:hover .bento-presets > *:nth-child(even){transform:translateY(4px) rotate(3deg);}

.collage{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 12px;}
.cl{
  aspect-ratio:1;border-radius:16px;background:#F3F2EE;display:grid;place-items:center;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.9);transition:transform .6s var(--ease-out);
}
.cl:nth-child(odd){transform:translateY(10px);}
.bn-frames:hover .cl:nth-child(odd){transform:translateY(-4px) rotate(-1.5deg);}
.bn-frames:hover .cl:nth-child(even){transform:translateY(4px) rotate(1.5deg);}

.scan-demo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding-top:12px;}
.scan-card{position:relative;width:min(200px,70%);aspect-ratio:1;border-radius:18px;background:#fff;padding:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9);}
.scan-card img{width:100%;height:100%;}
.scan-line{position:absolute;left:8px;right:8px;top:12%;height:2px;background:var(--accent);box-shadow:0 0 18px 4px rgba(212,255,94,.55);animation:scanY 2.6s ease-in-out infinite;}
@keyframes scanY{0%,100%{top:10%}50%{top:88%}}
.sc{position:absolute;width:22px;height:22px;border:3px solid var(--accent);}
.sc-tl{left:-10px;top:-10px;border-right:0;border-bottom:0;border-radius:8px 0 0 0;}
.sc-tr{right:-10px;top:-10px;border-left:0;border-bottom:0;border-radius:0 8px 0 0;}
.sc-bl{left:-10px;bottom:-10px;border-right:0;border-top:0;border-radius:0 0 0 8px;}
.sc-br{right:-10px;bottom:-10px;border-left:0;border-top:0;border-radius:0 0 8px 0;}
.chip-ok{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--good);background:rgba(107,227,160,.08);box-shadow:inset 0 0 0 1px rgba(107,227,160,.25);}
.chip-ok .ic{width:16px;height:16px;padding:2px;border-radius:50%;background:var(--good);color:#06150c;}

.cap-demo{display:flex;flex-direction:column;gap:14px;}
.cap-demo-t{
  align-self:flex-start;font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(16px,1.5vw,21px);letter-spacing:-.01em;
  background:var(--tx);color:var(--accent-ink);padding:12px 18px;border-radius:14px;box-shadow:0 20px 40px -20px rgba(0,0,0,.8);
  transform:rotate(-2deg);
}
.cap-demo-f{display:flex;gap:8px;}
.cap-demo-f b{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:18px;color:var(--tx);background:var(--fill-2);box-shadow:inset 0 0 0 1px var(--line);}

.fmt-demo{display:flex;flex-wrap:wrap;gap:8px;}
.fmt-demo span{font-family:var(--f-mono);font-size:13px;padding:9px 13px;border-radius:12px;background:var(--fill-2);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--tx-2);}
.fmt-demo .hl{background:var(--accent);color:var(--accent-ink);box-shadow:none;}

.types-demo{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.types-demo .ic{width:100%;height:auto;aspect-ratio:1;padding:11px;border-radius:12px;background:var(--fill-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--tx-2);transition:color .3s;}
.bn-types:hover .types-demo .ic:nth-child(3n+1){color:var(--accent);}

.trust-row{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:10px;}
.trust-row li{display:flex;align-items:baseline;gap:8px;padding:10px 16px;border-radius:14px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--tx-3);}
.trust-row b{font-family:var(--f-disp);font-weight:400;font-size:24px;color:var(--tx);letter-spacing:-.03em;line-height:1;}
.bn-private{min-height:0;}
.private-mark{margin-left:auto;flex:none;width:120px;height:120px;border-radius:32px;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%, rgba(107,227,160,.2), rgba(107,227,160,.03));box-shadow:inset 0 0 0 1px rgba(107,227,160,.2);}
.private-mark .ic{width:52px;height:52px;color:var(--good);}

/* ---- steps ---- */
.steps-list{max-width:var(--wrap);margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.steps-list li{padding:26px 4px 0;border-top:1px solid var(--line-2);position:relative;}
.steps-list li::before{content:"";position:absolute;left:0;top:-1px;width:44px;height:1px;background:var(--accent);}
.st-n{display:block;font-family:var(--f-disp);font-weight:400;font-size:64px;line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(242,240,234,.28);transition:-webkit-text-stroke-color .4s, color .4s;}
.steps-list li:hover .st-n{-webkit-text-stroke-color:var(--accent);}
.steps-list h3{font-family:var(--f-disp);font-weight:500;font-size:24px;letter-spacing:-.03em;margin:14px 0 8px;}
.steps-list p{margin:0;color:var(--tx-3);max-width:34ch;}

/* ---- faq ---- */
.faq-grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start;}
.faq .sec-head{margin:0;position:sticky;top:calc(var(--nav-h) + 24px);}
.faq-list{border-top:1px solid var(--line-2);}
.faq details{border-bottom:1px solid var(--line-2);}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 56px 24px 0;position:relative;
  font-family:var(--f-disp);font-weight:400;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.02em;transition:color .2s;
}
.faq summary:hover{color:var(--accent);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:4px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;
  background:var(--fill-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23F2F0EA' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat;
  box-shadow:inset 0 0 0 1px var(--line-2);transition:transform .35s var(--ease-out), background-color .2s;
}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--accent-soft);}
.faq details p{margin:0;padding:0 56px 26px 0;color:var(--tx-3);max-width:62ch;animation:panelIn .35s var(--ease-out);}

/* ---- CTA ---- */
.cta{padding:clamp(96px,12vw,160px) var(--pad) clamp(40px,5vw,64px);}
.cta-in{
  position:relative;overflow:hidden;isolation:isolate;max-width:var(--wrap);margin:0 auto;border-radius:var(--r-2xl);
  padding:clamp(56px,8vw,112px) var(--pad);text-align:center;
  background:linear-gradient(180deg,#131315,#0C0C0E);box-shadow:inset 0 0 0 1px var(--line-2);
}
.cta-glow{
  position:absolute;left:50%;bottom:-60%;width:120%;height:120%;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(40% 50% at 50% 50%, rgba(212,255,94,.22), transparent 70%);
}
.cta-in::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(50% 60% at 50% 100%, #000, transparent);mask-image:radial-gradient(50% 60% at 50% 100%, #000, transparent);
}
.cta h2{font-family:var(--f-disp);font-weight:400;letter-spacing:-.045em;line-height:1.02;font-size:clamp(34px,5.4vw,72px);margin:0 auto;max-width:14ch;text-wrap:balance;}
.cta p{color:var(--tx-2);margin:18px 0 32px;font-size:17px;}

/* ---- footer ---- */
.foot{padding:28px var(--pad) calc(28px + env(safe-area-inset-bottom));overflow:hidden;}
.foot-mark{
  max-width:var(--wrap);margin:0 auto -0.08em;text-align:center;white-space:nowrap;pointer-events:none;
  font-family:var(--f-disp);font-weight:500;letter-spacing:-.06em;line-height:.8;font-size:clamp(64px, 17vw, 250px);
  background:linear-gradient(180deg, rgba(242,240,234,.10), rgba(242,240,234,0) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.foot-in{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:32px;padding:40px 0 32px;border-top:1px solid var(--line);}
.foot-brand p{margin:14px 0 0;color:var(--tx-3);max-width:36ch;font-size:14px;}
.foot-col{display:flex;flex-direction:column;gap:4px;}
.foot-col h3{margin:0 0 8px;font-family:var(--f-mono);font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--tx-4);}
.foot-col a{
  position:relative;align-self:flex-start;color:var(--tx-2);text-decoration:none;font-size:14px;padding:4px 0;transition:color .2s;
}
.foot-col a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out);
}
.foot-col a:hover{color:var(--accent);}
.foot-col a:hover::after{transform:scaleX(1);}
.foot-base{max-width:var(--wrap);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--tx-4);}

/* ---- toast ---- */
.toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:160;
  transform:translate(-50%,16px) scale(.96);opacity:0;pointer-events:none;
  background:var(--tx);color:var(--accent-ink);padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9);transition:opacity .3s, transform .4s var(--ease-out);max-width:calc(100vw - 32px);
}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1);}
.toast{display:flex;align-items:center;gap:10px;}
.toast .ic{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--accent-ink);color:var(--accent);}

/* ---- scroll reveal (only when JS is running) ---- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);transition-delay:calc(var(--d, 0) * 80ms);}
.js .reveal.in{opacity:1;transform:none;}

/* ============================================================
   PRINT DIALOG
   ============================================================ */
.dlg{
  border:0;padding:0;border-radius:var(--r-xl);background:#111113;color:var(--tx);
  width:min(860px, calc(100vw - 24px));max-height:calc(100dvh - 24px);
  box-shadow:0 0 0 1px var(--line-2), 0 60px 140px -30px rgba(0,0,0,1);
}
.dlg::backdrop{background:rgba(5,5,6,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.dlg[open]{animation:dlgIn .45s var(--ease-out);}
@keyframes dlgIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.dlg-in{display:flex;flex-direction:column;max-height:inherit;}
.dlg-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 14px 24px;border-bottom:1px solid var(--line);}
.dlg-head h3{margin:0;font-family:var(--f-disp);font-weight:500;font-size:19px;letter-spacing:-.02em;}
.dlg-head .icon-btn{width:40px;height:40px;}
.dlg-body{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;padding:22px 24px 24px;overflow:auto;}
.sheet-wrap{background:#1A1A1D;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;padding:20px;min-height:360px;box-shadow:inset 0 0 0 1px var(--line);}
.sheet{background:#fff;padding:2.6%;flex:none;display:grid;box-shadow:0 24px 50px -20px rgba(0,0,0,.8);}
.sheet span{position:relative;min-width:0;min-height:0;overflow:hidden;}
.sheet.cut span{outline:1px dashed #C9C8BF;outline-offset:-.5px;}
.sheet img{position:absolute;left:7%;top:7%;width:86%;height:86%;object-fit:contain;}
.dlg-side{display:flex;flex-direction:column;gap:12px;}
.dlg-side .lbl{margin:0;}
.seg-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.dlg-side .switches{margin:0;}

/* ---- batch dialog ---- */
.dlg-batch{width:min(900px, calc(100vw - 24px));}
.dlg-batch textarea{min-height:260px;font-family:var(--f-mono);font-size:13px;line-height:1.6;}
.batch-main .micro{margin-top:4px;}
.link-like{color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.batch-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;border-radius:var(--r-md);background:#1A1A1D;box-shadow:inset 0 0 0 1px var(--line);min-height:96px;}
.batch-preview span{aspect-ratio:1;border-radius:9px;background:var(--paper);display:grid;place-items:center;overflow:hidden;animation:panelIn .35s var(--ease-out) both;}
.batch-preview span img{width:88%;height:88%;object-fit:contain;}
.batch-preview em{grid-column:1/-1;align-self:center;text-align:center;font-size:12.5px;color:var(--tx-4);}
.batch-progress{position:relative;height:34px;border-radius:10px;overflow:hidden;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px var(--line);}
.batch-progress i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,rgba(212,255,94,.25),rgba(212,255,94,.5));transition:width .25s var(--ease);}
.batch-progress span{position:relative;display:flex;align-items:center;justify-content:center;height:100%;font-size:12px;color:var(--tx);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1439px){
  .showcase{display:none;}
}
@media (max-width:1240px){
  .app-body{grid-template-columns:78px 364px minmax(0,1fr);}
  .preset-row{grid-template-columns:repeat(2,1fr);}
  .logo-icons{grid-template-columns:repeat(4,1fr);}
  .type-grid{grid-template-columns:repeat(3,1fr);}
  .export-bar .seg{width:150px;}
  .size-pick select{width:104px;}
  .btn-dl{min-width:0;}
}

@media (max-width:980px){
  :root{--nav-h:72px;}
  .nav{top:10px;}
  .nav-in{height:52px;}
  .nav-links{display:none;}
  .nav-cta{margin-left:auto;}
  .hero{padding-top:calc(var(--nav-h) + 48px);}

  .studio{padding:0 10px;}
  .app{height:auto;overflow:visible;border-radius:24px;}
  .app-bar{border-radius:24px 24px 0 0;}
  .ab-private,.ab-right .ab-sep{display:none;}
  .ab-wide span{display:none;}
  .ab-wide{padding:0 8px;}
  .ab-btn[data-tip]::after{display:none;}
  .app-body{display:flex;flex-direction:column;}

  .canvas{
    order:0;position:sticky;top:var(--nav-h);z-index:30;padding:0 10px 10px;
    background:#111113;border-bottom:1px solid var(--line);
  }
  .canvas-top{height:48px;}
  .ct-label{display:none;}
  .stage-wrap{flex:none;height:clamp(190px, 30vh, 320px);border-radius:16px;}
  .pv-colors{bottom:8px;padding:4px 6px;}
  .pv-colors .lbl{display:none;}
  .swatch{width:22px;height:22px;}
  .export-bar{height:auto;padding-top:10px;gap:6px;}
  .export-bar .seg{width:auto;flex:1;}
  .size-pick{display:none;}
  .export-bar .grow{display:none;}
  .export-bar .icon-btn{width:40px;height:40px;}
  .btn-dl{--h:40px;padding:0 16px;}
  .icon-btn[data-tip]::after{display:none;}

  .rail{
    order:1;position:sticky;top:calc(var(--nav-h) + var(--pv-h, 330px));z-index:29;
    flex-direction:row;gap:4px;padding:6px 8px;border-right:0;border-bottom:1px solid var(--line);
    background:rgba(17,17,19,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  }
  .tab{flex:1;flex-direction:row;justify-content:center;gap:8px;padding:6px 4px;}
  .tab-ic{width:30px;height:30px;border-radius:9px;}
  .tab-ic .ic{width:16px;height:16px;}
  .tab-l{font-size:13px;}
  .tab.active::before{display:none;}
  .tab.active{background:var(--fill);}

  .panel{order:2;border-right:0;background:none;}
  .panel-scroll{overflow:visible;}
  .tab-panel{padding:20px 16px 0;min-height:0;}
  .panel-foot{position:static;margin:8px -16px 0;padding:14px 16px 18px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
  .cat-row{margin:0 -16px 2px;padding-left:16px;padding-right:16px;}

  .stats{grid-template-columns:repeat(2,1fr);margin-top:12px;}
  .stats div:nth-child(3){border-left:0;}
  .stats div{padding:18px 16px;}

  .bento{grid-template-columns:repeat(2,1fr);}
  .bn-frames,.bn-private,.bn-scan{grid-column:span 2;grid-row:auto;}
  .bn-caption,.bn-export{grid-column:span 1;}
  .bn-types,.bn-presets{grid-column:span 2;}
  .foot-in{grid-template-columns:1fr 1fr;}
  .foot-brand{grid-column:span 2;}
  .faq-grid{grid-template-columns:1fr;}
  .faq .sec-head{position:static;}
  .scn-grid{grid-template-columns:repeat(2,1fr);}
  .compare-grid{grid-template-columns:1fr;}
  .guide-grid{grid-template-columns:1fr;}
  .guide .sec-head{position:static;}
  .type-cards{grid-template-columns:repeat(2,1fr);}
  .compare{max-width:560px;width:100%;margin:0 auto;}
  .tip{margin-top:4px;}
  .tab-dot{top:6px;right:8px;}
  .bg-toggle{display:none;}
  .dlg-body{grid-template-columns:1fr;}
  .sheet-wrap{min-height:0;}
}

@media (max-width:640px){
  body{font-size:14.5px;}
  .brand-name{font-size:15px;}
  .nav-cta{--h:38px;padding:0 14px;font-size:13px;}
  .hero-trust{gap:6px 14px;font-size:12.5px;}
  .announce{font-size:12.5px;}
  .ab-meta,.ab-sep{display:none;}
  .type-grid{grid-template-columns:repeat(3,1fr);}
  .row-2{grid-template-columns:1fr;}
  .tab-l{font-size:12.5px;}
  .tab-ic{display:none;}
  .tab{padding:9px 4px;border-radius:10px;}
  .tab.active{background:var(--tx);color:var(--accent-ink);}
  .preset-row{grid-template-columns:repeat(2,1fr);}
  .logo-icons{grid-template-columns:repeat(6,1fr);}
  .readability{padding:6px 10px;font-size:11.5px;}
  .badge{display:none;}
  .btn-dl span{display:none;}
  .btn-dl{width:40px;padding:0;}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto;}
  .bn{gap:18px;}
  .bn-frames,.bn-private,.bn-scan,.bn-caption,.bn-export,.bn-types,.bn-presets{grid-column:auto;}
  .bg-grid .bgo span{display:none;}
  .bn-private{flex-direction:column;align-items:flex-start;}
  .private-mark{margin-left:0;width:84px;height:84px;border-radius:24px;}
  .collage{gap:8px;}
  .steps-list{grid-template-columns:1fr;gap:28px;}
  .mq-item{width:150px;height:150px;padding:14px;}
  .faq summary{padding-right:48px;}
  .faq details p{padding-right:0;}
  .foot-in{grid-template-columns:1fr 1fr;gap:24px;}
  .scn-grid{grid-template-columns:1fr;}
  .type-cards{grid-template-columns:1fr;}
  .g-step{gap:14px;padding:20px;}
  .g-step .st-n{font-size:30px;}
  .scn{grid-template-columns:108px minmax(0,1fr);}
  .hero-actions .btn{--h:50px;padding:0 20px;font-size:15px;}
  .st-n{font-size:48px;}
  .trust-row b{font-size:20px;}
}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .marquee{overflow-x:auto;}
}

/* ============================================================
   РЕДАКТОР МАКЕТОВ — меню, таблички, постеры, соцсети
   ============================================================ */
.ed-page{height:100dvh;overflow:hidden;background:var(--bg);}
.ed-page input.input, .ed-page select.input{
  width:100%;height:36px;padding:0 10px;border-radius:9px;font-size:13px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-2);color:var(--tx);outline:none;
}
.ed-page select.input{padding-right:30px;background-position:right 10px center;}
.ed-page input.input:focus, .ed-page select.input:focus{border-color:rgba(212,255,94,.55);}
.ed-page input[type=range].range{width:100%;accent-color:var(--accent);}
.ed-top{
  position:relative;z-index:20;height:60px;display:flex;align-items:center;gap:10px;padding:0 14px;
  border-bottom:1px solid var(--line);background:#0E0E10;
}
.ed-divider{width:1px;height:24px;background:var(--line-2);flex:none;}
.ed-name{
  width:210px;height:36px;padding:0 10px;border-radius:9px;border:1px solid transparent;background:transparent;
  font-size:14px;font-weight:600;color:var(--tx);outline:none;transition:border-color .2s, background .2s;
}
.ed-name:hover{border-color:var(--line-2);}
.ed-name:focus{border-color:rgba(212,255,94,.55);background:rgba(255,255,255,.03);}
.ed-saved{white-space:nowrap;}
.ed-saved.warn{color:#FFB38A;}
.ed-tools{display:flex;align-items:center;gap:4px;margin-left:6px;}
.ed-top .icon-btn, .ed-props .icon-btn{width:36px;height:36px;border-radius:10px;}
.ed-top .icon-btn .ic, .ed-props .icon-btn .ic{width:17px;height:17px;}
.ed-top .icon-btn:disabled{opacity:.35;pointer-events:none;}
.ed-props .icon-btn[data-tip]::after{bottom:auto;top:calc(100% + 6px);z-index:5;}
.ed-zoom{min-width:58px;height:36px;border-radius:10px;font-size:12.5px;color:var(--tx-2);}
.ed-zoom:hover{background:var(--fill);color:var(--tx);}
.ed-export{position:relative;}
.ed-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:268px;padding:6px;border-radius:14px;display:grid;gap:2px;
  background:#17171A;box-shadow:0 0 0 1px var(--line-2), 0 24px 60px -12px rgba(0,0,0,.85);
}
.ed-menu[hidden]{display:none;}
.ed-menu button, .ed-menu-file{display:grid;gap:1px;text-align:left;padding:9px 12px;border-radius:10px;cursor:pointer;color:var(--tx);}
.ed-menu b{font-size:13.5px;font-weight:600;}
.ed-menu span{font-size:12px;color:var(--tx-3);}
.ed-menu button:hover, .ed-menu-file:hover{background:var(--fill-2);}

.ed-app{height:calc(100dvh - 60px);display:grid;grid-template-columns:78px 300px minmax(0, 1fr) 284px;}
.ed-app:has(.ed-drawer.closed){grid-template-columns:78px 0 minmax(0, 1fr) 284px;}
.ed-rail{display:flex;flex-direction:column;gap:4px;padding:10px 8px;border-right:1px solid var(--line);background:#0E0E10;overflow-y:auto;scrollbar-width:none;}
.ed-rail-btn{display:grid;justify-items:center;gap:5px;padding:10px 0;border-radius:12px;color:var(--tx-3);font-size:10.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:.2s;}
.ed-rail-btn .ic{width:21px;height:21px;}
.ed-rail-btn:hover{color:var(--tx);background:var(--fill);}
.ed-rail-btn.active{color:var(--tx);background:var(--fill-2);box-shadow:inset 0 0 0 1px var(--line-2);}
.ed-rail-btn.active .ic{color:var(--accent);}
.ed-drawer, .ed-props{background:#111113;overflow-y:auto;padding:18px 16px 30px;scrollbar-width:thin;}
.ed-drawer{border-right:1px solid var(--line);}
.ed-drawer.closed{display:none;}
.ed-props{border-left:1px solid var(--line);}
.ed-panel{display:none;}
.ed-panel.active{display:block;animation:edIn .25s var(--ease-out);}
@keyframes edIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.ed-h{margin:0 0 14px;font-family:var(--f-disp);font-size:17px;font-weight:500;letter-spacing:-.01em;}
.ed-sub{margin:22px 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-3);}
.ed-stack{display:grid;gap:8px;margin-bottom:10px;}
.ed-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.ed-chip{height:30px;padding:0 12px;border-radius:999px;font-size:12.5px;color:var(--tx-2);box-shadow:inset 0 0 0 1px var(--line-2);transition:.2s;}
.ed-chip:hover{color:var(--tx);}
.ed-chip.active{background:var(--tx);color:var(--accent-ink);box-shadow:none;}
.ed-tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;align-items:start;}
.ed-tpl{display:grid;gap:6px;text-align:left;}
.ed-tpl[hidden]{display:none;}
.ed-tpl-img{display:block;width:100%;border-radius:7px;overflow:hidden;background:var(--fill);box-shadow:0 0 0 1px var(--line);transition:transform .25s var(--ease), box-shadow .25s;}
.ed-tpl-img img{display:block;width:100%;height:100%;object-fit:cover;}
.ed-tpl:hover .ed-tpl-img{transform:translateY(-2px);box-shadow:0 0 0 2px var(--accent), 0 16px 30px -14px rgba(0,0,0,.9);}
.ed-tpl-ph{display:block;width:100%;height:100%;background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%) rgba(255,255,255,.03);background-size:220% 100%;animation:edShimmer 1.3s linear infinite;}
@keyframes edShimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.ed-tpl-name{font-size:12.5px;font-weight:500;line-height:1.3;color:var(--tx-2);}
.ed-tpl-fmt{margin-top:-4px;font-size:10.5px;color:var(--tx-4);}
.ed-add-text{display:grid;gap:4px;text-align:left;padding:14px;border-radius:12px;color:var(--tx);background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);transition:.2s;}
.ed-add-text:hover{background:var(--fill-2);box-shadow:inset 0 0 0 1px var(--line-3);}
.ed-row-demo{display:flex;align-items:baseline;gap:8px;font:600 14px Montserrat, sans-serif;}
.ed-row-demo i{flex:1;border-bottom:2px dotted var(--tx-3);transform:translateY(-3px);}
.ed-grid4{display:grid;grid-template-columns:repeat(4, 1fr);gap:8px;}
.ed-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.ed-el{aspect-ratio:1;display:grid;place-items:center;border-radius:12px;color:var(--tx-2);background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);transition:.2s;}
.ed-el svg{width:28px;height:28px;}
.ed-el:hover{color:var(--tx);background:var(--fill-2);transform:translateY(-1px);}
.ed-badge-btn{display:grid;place-items:center;min-height:74px;padding:10px 6px;border-radius:12px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);transition:.2s;}
.ed-badge-btn:hover{background:var(--fill-2);}
.ed-badge-btn span{padding:6px 12px;color:#FFFFFF;font:800 10.5px Montserrat, sans-serif;letter-spacing:.12em;white-space:nowrap;}
.ed-drop{display:grid;justify-items:center;gap:6px;text-align:center;margin-bottom:14px;padding:26px 16px;border-radius:14px;border:1.5px dashed var(--line-3);cursor:pointer;transition:.2s;}
.ed-drop:hover{border-color:var(--accent);background:rgba(212,255,94,.04);}
.ed-drop .ic{width:26px;height:26px;color:var(--accent);}
.ed-drop b{font-size:14px;}
.ed-thumb{aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);}
.ed-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ed-colors{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;}
.ed-swatches{display:grid;grid-template-columns:repeat(8, 1fr);gap:7px;margin-bottom:12px;}
.ed-sw{aspect-ratio:1;border-radius:8px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:transform .15s;}
.ed-sw:hover{transform:scale(1.1);}
.ed-grads{grid-template-columns:repeat(4, 1fr);}
.ed-grads .ed-sw{aspect-ratio:1.25;}
.ed-swatches-sm{grid-template-columns:repeat(12, 1fr);gap:5px;margin-top:-2px;}
.ed-swatches-sm .ed-sw{border-radius:6px;}
.ed-file-btn{position:relative;margin-bottom:12px;cursor:pointer;}
.ed-formats{display:grid;gap:6px;}
.ed-format{display:grid;grid-template-columns:44px 1fr;column-gap:10px;align-items:center;text-align:left;padding:8px 10px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);transition:.2s;}
.ed-format i{grid-row:span 2;justify-self:center;border:1.5px solid var(--tx-3);border-radius:3px;}
.ed-format b{font-size:13.5px;font-weight:600;}
.ed-format span{font-size:12px;color:var(--tx-3);}
.ed-format:hover{background:var(--fill);}
.ed-format.active{background:var(--fill-2);box-shadow:inset 0 0 0 1px rgba(212,255,94,.6);}
.ed-format.active i{border-color:var(--accent);}
.ed-custom-size{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--tx-3);}
.ed-custom-size .input{width:78px;}
.ed-layers{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:3px;}
.ed-layer{display:grid;grid-template-columns:18px minmax(0, 1fr) 30px 30px;align-items:center;gap:8px;padding:4px 4px 4px 10px;border-radius:10px;font-size:13px;color:var(--tx-2);cursor:pointer;}
.ed-layer .ic{width:16px;height:16px;}
.ed-layer:hover{background:var(--fill);}
.ed-layer.active{background:var(--fill-2);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line-3);}
.ed-layer.off{opacity:.45;}
.ed-layer.over{box-shadow:inset 0 2px 0 var(--accent);}
.ed-layer.dragging{opacity:.35;}
.ed-layer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ed-layer-btn{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--tx-3);}
.ed-layer-btn:hover{background:var(--fill-2);color:var(--tx);}

.ed-work{
  position:relative;overflow:hidden;background-color:#18181B;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);background-size:22px 22px;
}
.ed-work.drop{box-shadow:inset 0 0 0 3px var(--accent);}
.ed-work .canvas-container{position:absolute !important;inset:0;}
.ed-empty-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:rgba(10,10,12,.72);white-space:nowrap;pointer-events:none;}
.ed-props-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
.ed-props-head .ed-h{margin:0;}
.ed-props-page .ed-stack{margin-top:14px;}
.ed-tips{display:grid;gap:6px;margin-top:20px;}
.ed-tips p{margin:0;}
.ed-icon-row{display:flex;align-items:center;gap:4px;}
.ed-icon-row[hidden], .ed-props [hidden]{display:none !important;}
.ed-wrap{flex-wrap:wrap;margin:8px 0 12px;}
.ed-sec{padding:14px 0;border-top:1px solid var(--line);}
.ed-row2{display:grid;grid-template-columns:1fr 84px;gap:8px;margin:8px 0;}
.ed-toggle{width:36px;height:34px;border-radius:9px;font:600 14px Onest, sans-serif;color:var(--tx-2);box-shadow:inset 0 0 0 1px var(--line-2);transition:.2s;}
.ed-toggle:hover{color:var(--tx);}
.ed-toggle[aria-pressed="true"]{background:var(--tx);color:var(--accent-ink);box-shadow:none;}
#p-align .seg-opt{padding:0 9px;}
#p-align .ic{width:16px;height:16px;}
.ed-num-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0;}
.ed-num-grid label{display:grid;grid-template-columns:16px 1fr;align-items:center;gap:6px;font-size:12px;color:var(--tx-3);}
.ed-align{justify-content:space-between;}
.ed-seg4 .seg-opt{font-size:12px;padding:0 2px;}
.ed-sec .field{margin:10px 0 0;}
.ed-panel .field .input{height:40px;}
.ed-panel .seg{margin-bottom:10px;}
.ed-panel .switch-row{padding:8px 0;}
.ed-failed .ed-app::before{content:"Не удалось загрузить редактор. Обновите страницу.";position:fixed;inset:60px 0 0;display:grid;place-items:center;color:var(--tx-2);}
@media (max-width:1180px){
  .ed-app{grid-template-columns:72px 270px minmax(0, 1fr) 256px;}
  .ed-saved{display:none;}
}
@media (max-width:900px){
  .ed-top{gap:6px;padding:0 10px;}
  .ed-top .brand-name, .ed-top > .ed-divider, .ed-tools .ed-divider, #ed-zoom-out, #ed-zoom-in, .ed-top .lang-switch{display:none;}
  .ed-name{width:auto;flex:1;min-width:0;}
  #ed-3d span, #ed-download span{display:none;}
  #ed-3d, #ed-download{padding:0 12px;}
  .ed-app, .ed-app:has(.ed-drawer.closed){grid-template-columns:1fr;grid-template-rows:minmax(0, 1fr) auto;}
  .ed-work{grid-row:1;}
  .ed-rail{grid-row:2;flex-direction:row;gap:2px;padding:6px;border-right:0;border-top:1px solid var(--line);overflow-x:auto;}
  .ed-rail-btn{min-width:64px;padding:7px 2px;}
  .ed-drawer, .ed-props{
    position:fixed;left:0;right:0;bottom:66px;z-index:15;max-height:54dvh;border:0;border-radius:18px 18px 0 0;
    box-shadow:0 -1px 0 var(--line-2), 0 -24px 60px -10px rgba(0,0,0,.75);
  }
  .ed-props{display:none;max-height:46dvh;}
  .ed-has-sel .ed-props{display:block;}
  .ed-has-sel .ed-drawer{display:none;}
  .ed-props-page{display:none;}
  .ed-empty-hint{display:none;}
}
/* редактор: страницы, темы, эффекты, контекстное меню */
.ed-pages{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:4;display:flex;align-items:flex-end;gap:10px;
  max-width:calc(100% - 24px);padding:8px 10px;border-radius:16px;overflow-x:auto;scrollbar-width:none;
  background:rgba(14,14,16,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 1px var(--line-2), 0 16px 40px -16px rgba(0,0,0,.8);
}
.ed-pages::-webkit-scrollbar{display:none;}
.ed-page-thumb{position:relative;display:grid;justify-items:center;gap:4px;flex:none;}
.ed-page-img{display:block;height:64px;border-radius:5px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line-2);transition:box-shadow .2s, transform .2s;}
.ed-page-img img{display:block;width:100%;height:100%;object-fit:cover;}
.ed-page-img:hover{transform:translateY(-2px);}
.ed-page-thumb.active .ed-page-img{box-shadow:0 0 0 2px var(--accent);}
.ed-page-num{font-size:10.5px;color:var(--tx-3);}
.ed-page-thumb.active .ed-page-num{color:var(--accent);}
.ed-page-acts{
  position:absolute;left:50%;top:-34px;transform:translate(-50%, 4px);display:flex;gap:2px;padding:3px;border-radius:10px;
  background:#1B1B1E;box-shadow:0 0 0 1px var(--line-2), 0 10px 24px -10px #000;opacity:0;pointer-events:none;transition:.18s;
}
.ed-page-thumb:hover .ed-page-acts, .ed-page-thumb:focus-within .ed-page-acts{opacity:1;pointer-events:auto;transform:translate(-50%, 0);}
.ed-page-acts button{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--tx-2);font-size:17px;line-height:1;}
.ed-page-acts button:hover{background:var(--fill-2);color:var(--tx);}
.ed-page-acts button:disabled{opacity:.3;pointer-events:none;}
.ed-page-acts .ic{width:14px;height:14px;}
.ed-page-add{height:64px;min-width:52px;margin-bottom:17px;padding:0 10px;border-radius:6px;display:grid;place-items:center;align-content:center;gap:2px;font-size:10.5px;color:var(--tx-3);border:1.5px dashed var(--line-3);transition:.2s;}
.ed-page-add .ic{width:16px;height:16px;}
.ed-page-add:hover{color:var(--accent);border-color:var(--accent);}
.ed-empty-hint{bottom:auto;top:12px;}
.ed-multi .ed-empty-hint{display:none;}
.ed-tpl{position:relative;}
.ed-tpl-pages{position:absolute;top:6px;right:6px;padding:2px 7px;border-radius:999px;font-size:10px;color:var(--accent-ink);background:var(--accent);}
.ed-note{margin:-4px 0 10px;}
.ed-sub-first{margin-top:4px;}
.ed-wide{width:100%;justify-content:center;margin-top:4px;}
.ed-textarea{
  width:100%;min-height:150px;margin-bottom:10px;padding:10px 12px;border-radius:10px;resize:vertical;
  font:13px/1.5 'JetBrains Mono', monospace;color:var(--tx);background:rgba(255,255,255,.03);border:1px solid var(--line-2);outline:none;
}
.ed-textarea:focus{border-color:rgba(212,255,94,.55);}
.ed-themes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px;}
.ed-theme{display:grid;gap:6px;padding:7px;border-radius:12px;text-align:left;background:var(--fill);box-shadow:inset 0 0 0 1px var(--line);transition:.2s;}
.ed-theme:hover{background:var(--fill-2);box-shadow:inset 0 0 0 1px var(--line-3);transform:translateY(-1px);}
.ed-theme-sw{display:grid;grid-template-columns:repeat(5, 1fr);height:26px;border-radius:7px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.ed-theme-sw i{display:block;}
.ed-theme-name{font-size:12px;color:var(--tx-2);padding-left:2px;}
.ed-fx{margin-top:10px;display:grid;}
.ed-fx .switch-row{padding:6px 0;font-size:13px;}
.ed-fx-opts{display:flex;align-items:center;gap:10px;margin:2px 0 6px;}
.ed-fx-opts[hidden]{display:none;}
.ed-color-sm{padding:4px;flex:none;}
.ed-color-sm .sw{width:28px;height:28px;border-radius:7px;}
.ed-shadow-row{padding:0 0 8px;font-size:13px;}
.ed-ctx{
  position:fixed;z-index:60;min-width:224px;padding:6px;border-radius:12px;display:grid;gap:1px;
  background:#18181B;box-shadow:0 0 0 1px var(--line-2), 0 24px 50px -12px rgba(0,0,0,.9);
}
.ed-ctx[hidden], .ed-ctx [hidden]{display:none;}
.ed-ctx button{display:flex;align-items:center;justify-content:space-between;gap:18px;height:32px;padding:0 10px;border-radius:8px;font-size:13px;color:var(--tx);text-align:left;}
.ed-ctx button:hover{background:var(--fill-2);}
.ed-ctx button:disabled{opacity:.4;pointer-events:none;}
.ed-ctx kbd{font:11px 'JetBrains Mono', monospace;color:var(--tx-3);}
.ed-ctx hr{margin:4px 6px;border:0;border-top:1px solid var(--line);}
@media (max-width:900px){
  .ed-pages{bottom:8px;padding:6px 8px;}
  .ed-page-img, .ed-page-add{height:48px;}
  .ed-page-acts{display:none;}
}
.ed-empty-hint{transition:opacity .6s;}
.ed-empty-hint.gone{opacity:0;}