:root{
  --black:#000000;
  --bg-0:#050505;
  --bg-1:#0b0b0c;
  --white:#ffffff;
  --grey-100:#f2f2f3;
  --grey-300:#c7c7cb;
  --grey-500:#8d8d93;
  --grey-700:#525258;
  --grey-900:#1c1c1f;

  --glass-bg:linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 45%, rgba(255,255,255,.05) 100%);
  --glass-bg-soft:rgba(255,255,255,.04);
  --glass-border:rgba(255,255,255,.14);
  --glass-border-strong:rgba(255,255,255,.34);
  --glass-shadow:0 30px 70px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.16);

  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

body{
  font-family:var(--font-body);
  background:var(--black);
  color:var(--white);
  overflow-x:hidden;
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
a{ color:inherit; text-decoration:none; }

::selection{ background:rgba(255,255,255,.24); color:#fff; }

:focus-visible{
  outline:2px solid var(--white);
  outline-offset:3px;
  border-radius:4px;
}

.atmosphere{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,255,255,.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--black) 55%, var(--bg-1) 100%);
}
.atmosphere__fog{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.5;
  mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
  will-change:transform;
}
.atmosphere__fog--a{ width:56vw; height:56vw; max-width:820px; max-height:820px; top:-18%; left:-14%; animation:fog-drift-a 46s ease-in-out infinite; }
.atmosphere__fog--b{ width:46vw; height:46vw; max-width:680px; max-height:680px; bottom:-16%; right:-12%; animation:fog-drift-b 58s ease-in-out infinite; opacity:.35; }
.atmosphere__fog--c{ width:36vw; height:36vw; max-width:520px; max-height:520px; top:32%; left:58%; animation:fog-drift-c 50s ease-in-out infinite; opacity:.28; }

@keyframes fog-drift-a{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(5vw,7vh) scale(1.1); } }
@keyframes fog-drift-b{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-4vw,-5vh) scale(1.06); } }
@keyframes fog-drift-c{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-3vw,4vh) scale(.95); } }

.atmosphere__grain{
  position:absolute;
  inset:0;
  opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events:none;
}

.cursor-glow{
  position:fixed;
  top:0; left:0;
  width:440px;
  height:440px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
  pointer-events:none;
  z-index:1;
  transform:translate(-50%,-50%);
  will-change:transform;
}
@media (hover:none){ .cursor-glow{ display:none; } }

.loader{
  position:fixed;
  inset:0;
  z-index:400;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:26px;
  background:var(--black);
  transition:opacity .7s var(--ease-out), visibility .7s var(--ease-out);
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__ring{
  position:relative;
  width:86px; height:86px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
}
.loader__ring::before{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:#fff;
  border-right-color:rgba(255,255,255,.5);
  animation:loader-spin 1.1s linear infinite;
}
@keyframes loader-spin{ to{ transform:rotate(360deg); } }
.loader__text{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.05em;
  color:var(--grey-300);
  display:flex;
  gap:2px;
}
.loader__text span{ animation:dot-pulse 1.3s ease-in-out infinite; opacity:.25; }
.loader__text span:nth-child(2){ animation-delay:.15s; }
.loader__text span:nth-child(3){ animation-delay:.3s; }
@keyframes dot-pulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

.glass{
  position:relative;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-top-color:var(--glass-border-strong);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(26px) saturate(140%);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
  box-shadow:var(--glass-shadow);
  overflow:hidden;
}
.glass::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 45%, rgba(255,255,255,.03) 52%, transparent 68%);
  pointer-events:none;
  mix-blend-mode:overlay;
}
.glass::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle 60px at 8% 8%, rgba(255,255,255,.35), transparent 70%),
    radial-gradient(circle 70px at 94% 92%, rgba(255,255,255,.22), transparent 70%);
  opacity:.55;
}

.view{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:none;
}
.view.is-active{ display:block; }

.intro{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
}
.intro__card{
  width:100%;
  max-width:440px;
  padding:44px 34px 38px;
  text-align:center;
  opacity:0;
  transform:translateY(24px) scale(.98);
  animation:card-in .9s var(--ease-out) .1s forwards;
}
@keyframes card-in{ to{ opacity:1; transform:translateY(0) scale(1); } }

.intro__mark{
  width:76px; height:76px;
  margin:0 auto 22px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.6rem;
  letter-spacing:-.02em;
  background:var(--glass-bg);
  border:1px solid var(--glass-border-strong);
  box-shadow:var(--glass-shadow);
  position:relative;
  opacity:0;
  animation:reveal-up .8s var(--ease-out) .2s forwards;
}

.intro__eyebrow{
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--grey-500);
  margin-bottom:10px;
  opacity:0;
  animation:reveal-up .8s var(--ease-out) .3s forwards;
}
.intro__name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.7rem, 6vw, 2.3rem);
  letter-spacing:-.02em;
  line-height:1.15;
  opacity:0;
  animation:reveal-up .8s var(--ease-out) .38s forwards;
}
.intro__role{
  margin-top:10px;
  color:var(--grey-500);
  font-size:.95rem;
  opacity:0;
  animation:reveal-up .8s var(--ease-out) .46s forwards;
}

.intro__socials{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:28px;
  opacity:0;
  animation:reveal-up .8s var(--ease-out) .56s forwards;
}
.social-btn{
  width:46px; height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .35s var(--ease-out), border-color .35s;
}
.social-btn svg{ width:19px; height:19px; stroke:var(--grey-300); transition:stroke .3s; }
.social-btn:hover{ transform:translateY(-4px); border-color:var(--glass-border-strong); }
.social-btn:hover svg{ stroke:var(--white); }

.intro__enter{
  margin-top:32px;
  opacity:0;
  animation:reveal-up .8s var(--ease-out) .66s forwards;
}
.intro__foot{
  margin-top:22px;
  font-size:.74rem;
  color:var(--grey-700);
  opacity:0;
  animation:reveal-up .8s var(--ease-out) .76s forwards;
}

@keyframes reveal-up{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

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

.navbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  margin:14px 14px 0;
  border-radius:18px;
}
.navbar__back{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:12px;
  font-size:.85rem;
  font-weight:600;
  color:var(--grey-300);
  transition:color .25s, background .25s;
}
.navbar__back svg{ width:16px; height:16px; }
.navbar__back:hover{ color:var(--white); background:rgba(255,255,255,.06); }
.navbar__brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.01em;
}
.navbar__spacer{ width:40px; }

.tool{
  max-width:640px;
  margin:0 auto;
  padding:36px 20px 90px;
}
.tool__head{
  text-align:center;
  margin-bottom:34px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grey-300);
  padding:7px 16px;
  border-radius:999px;
  margin-bottom:20px;
}
.tag::before{
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 8px #fff;
  animation:dot-blink 2s ease-in-out infinite;
}
@keyframes dot-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

.tool__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.7rem, 5.5vw, 2.5rem);
  letter-spacing:-.02em;
}
.tool__sub{
  margin-top:12px;
  color:var(--grey-500);
  font-size:.95rem;
  max-width:420px;
  margin-left:auto;
  margin-right:auto;
}

.stage{
  padding:10px;
}
.stage + .stage{ margin-top:22px; }

.dropzone{
  position:relative;
  border:1.5px dashed rgba(255,255,255,.22);
  border-radius:var(--radius-md);
  padding:52px 26px;
  text-align:center;
  cursor:pointer;
  transition:border-color .35s var(--ease-out), background .35s var(--ease-out);
}
.dropzone:hover,
.dropzone.is-dragover{
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.03);
}
.dropzone.is-dragover{ transform:scale(1.01); }

.dropzone__icon{
  width:58px; height:58px;
  margin:0 auto 18px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--glass-border);
  position:relative;
}
.dropzone__icon svg{ width:26px; height:26px; stroke:#fff; }
.dropzone__icon::after{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.18);
  animation:icon-pulse 2.6s ease-in-out infinite;
}
@keyframes icon-pulse{ 0%,100%{ transform:scale(1); opacity:.6; } 50%{ transform:scale(1.12); opacity:0; } }

.dropzone__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.05rem;
  margin-bottom:6px;
}
.dropzone__hint{ color:var(--grey-500); font-size:.85rem; }
.dropzone__hint b{ color:var(--white); font-weight:600; }
.dropzone input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }

.preview{
  display:none;
  align-items:center;
  gap:16px;
  padding:14px;
  text-align:left;
}
.preview.is-active{ display:flex; }
.preview__thumb{
  width:64px; height:64px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid var(--glass-border);
  flex-shrink:0;
}
.preview__meta{ flex:1; min-width:0; }
.preview__name{
  font-size:.9rem;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.preview__details{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  margin-top:6px;
  font-size:.74rem;
  color:var(--grey-500);
}
.preview__details span{ display:inline-flex; align-items:center; gap:4px; }
.preview__details span::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--grey-500); }
.preview__details span:first-child::before{ display:none; }

.actions{
  display:flex;
  gap:12px;
  margin-top:20px;
  padding:0 4px 4px;
  flex-wrap:wrap;
}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  font-size:.92rem;
  font-weight:600;
  font-family:var(--font-body);
  border-radius:13px;
  border:1px solid transparent;
  overflow:hidden;
  isolation:isolate;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), opacity .3s, background .3s;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; }

.btn--primary{
  flex:1;
  color:#000;
  background:#fff;
  box-shadow:0 10px 26px -10px rgba(255,255,255,.35);
}
.btn--primary:hover{ box-shadow:0 14px 34px -10px rgba(255,255,255,.5); transform:translateY(-2px); }

.btn--ghost{
  color:var(--grey-300);
  background:rgba(255,255,255,.04);
  border-color:var(--glass-border);
}
.btn--ghost:hover{ color:var(--white); border-color:var(--glass-border-strong); background:rgba(255,255,255,.07); }

.btn--icon{ padding:11px 18px; }
.btn svg{ width:16px; height:16px; }

.btn .ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  transform:scale(0);
  animation:ripple-pop .6s ease-out forwards;
  pointer-events:none;
  mix-blend-mode:overlay;
}
@keyframes ripple-pop{ to{ transform:scale(2.6); opacity:0; } }

.processing{
  display:none;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:50px 24px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.processing.is-active{ display:flex; opacity:1; transform:translateY(0); }

.processing__ring-wrap{ position:relative; width:150px; height:150px; margin-bottom:26px; }
.processing__ring-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); }
.processing__ring-bg{ fill:none; stroke:rgba(255,255,255,.14); stroke-width:4; }
.processing__ring-fill{
  fill:none;
  stroke:#fff;
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:402;
  stroke-dashoffset:402;
  transition:stroke-dashoffset .35s var(--ease-out);
  filter:drop-shadow(0 0 8px rgba(255,255,255,.6));
}
.processing__pct{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:700;
}
.processing__core{
  position:absolute; top:50%; left:50%;
  width:60px; height:60px;
  margin:-30px 0 0 -30px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
  animation:core-pulse 1.8s ease-in-out infinite;
}
@keyframes core-pulse{ 0%,100%{ transform:scale(.85); opacity:.5; } 50%{ transform:scale(1.15); opacity:1; } }

.processing__title{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; margin-bottom:6px; }
.processing__step{ color:var(--grey-500); font-size:.85rem; min-height:1.2em; }
.processing__eta{ margin-top:14px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-500); }

.scan-frame{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  margin-top:28px;
  max-width:280px;
  border:1px solid var(--glass-border);
}
.scan-frame img{ width:100%; display:block; filter:grayscale(1) brightness(.8); }
.scan-frame::after{
  content:'';
  position:absolute;
  left:0; right:0;
  height:40%;
  top:-40%;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.7), transparent);
  animation:scan-sweep 2s ease-in-out infinite;
  filter:blur(2px);
}
@keyframes scan-sweep{ 0%{ top:-40%; } 100%{ top:100%; } }

.result-section{
  max-width:640px;
  margin:22px auto 0;
  display:none;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.result-section.is-active{ display:block; opacity:1; transform:translateY(0); }
.result-section .stage__head{
  text-align:center;
  margin-bottom:18px;
}
.stage__eyebrow{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--grey-500);
  display:block;
  margin-bottom:8px;
}
.stage__title{ font-family:var(--font-display); font-weight:700; font-size:1.35rem; }
.stage__sub{ color:var(--grey-500); margin-top:8px; font-size:.88rem; }

.compare{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  max-height:520px;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:
    linear-gradient(45deg, #161616 25%, transparent 25%) 0 0/24px 24px,
    linear-gradient(-45deg, #161616 25%, transparent 25%) 0 0/24px 24px,
    linear-gradient(45deg, transparent 75%, #161616 75%) 0 0/24px 24px,
    linear-gradient(-45deg, transparent 75%, #161616 75%) 0 0/24px 24px,
    #0a0a0a;
  cursor:ew-resize;
  user-select:none;
}
.compare__before,
.compare__after{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}
.compare__before{ filter:grayscale(.15); }
.compare__handle{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:2px;
  background:rgba(255,255,255,.85);
  box-shadow:0 0 14px rgba(255,255,255,.5);
  transform:translateX(-1px);
}
.compare__grip{
  position:absolute;
  top:50%; left:50%;
  width:40px; height:40px;
  margin:-20px 0 0 -20px;
  border-radius:50%;
  background:rgba(10,10,10,.85);
  border:1px solid rgba(255,255,255,.32);
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(8px);
}
.compare__grip svg{ width:16px; height:16px; stroke:#fff; }
.compare__label{
  position:absolute;
  bottom:12px;
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.6);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(8px);
  pointer-events:none;
}
.compare__label--before{ left:12px; }
.compare__label--after{ right:12px; }

.result__actions{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; padding:0 4px 4px; }
.result__actions .btn{ flex:1; min-width:140px; }

.result__code{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:16px;
  font-size:.76rem;
  color:var(--grey-500);
}
.result__code-label{ text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; }
.result__code-value{
  font-family:var(--font-display);
  color:var(--white);
  letter-spacing:.04em;
  padding:2px 10px;
  border:1px solid var(--glass-border);
  border-radius:6px;
  background:rgba(255,255,255,.05);
}

.editor{ display:none; }
.editor.is-active{ display:block; }

.editor__canvas-wrap{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  max-height:520px;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:
    linear-gradient(45deg, #161616 25%, transparent 25%) 0 0/24px 24px,
    linear-gradient(-45deg, #161616 25%, transparent 25%) 0 0/24px 24px,
    linear-gradient(45deg, transparent 75%, #161616 75%) 0 0/24px 24px,
    linear-gradient(-45deg, transparent 75%, #161616 75%) 0 0/24px 24px,
    #0a0a0a;
  touch-action:none;
  cursor:none;
}
#editorCanvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.editor__brush-cursor{
  position:absolute;
  top:0; left:0;
  width:28px; height:28px;
  margin:-14px 0 0 -14px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 12px rgba(255,255,255,.4);
  pointer-events:none;
  z-index:5;
  display:none;
}
.editor__canvas-wrap:hover .editor__brush-cursor{ display:block; }

.editor__toolbar{ margin-top:18px; padding:0 4px; }
.editor__modes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.editor__mode-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 12px;
  font-size:.76rem;
  font-weight:600;
  font-family:var(--font-body);
  color:var(--grey-300);
  background:rgba(255,255,255,.03);
  border:1px solid var(--glass-border);
  border-radius:11px;
  cursor:pointer;
  transition:border-color .25s, color .25s, background .25s;
  text-align:left;
}
.editor__mode-btn svg{ width:16px; height:16px; flex-shrink:0; }
.editor__mode-btn:hover{ border-color:var(--glass-border-strong); color:var(--white); }
.editor__mode-btn.is-active{ color:#000; background:#fff; border-color:transparent; }

.editor__hint{ margin-top:14px; font-size:.82rem; color:var(--grey-500); text-align:center; min-height:1.3em; }

.editor__slider-row{ display:flex; align-items:center; gap:12px; margin-top:14px; font-size:.8rem; color:var(--grey-300); }
.editor__slider-row label{ flex-shrink:0; white-space:nowrap; }
.editor__slider-row input[type="range"]{ flex:1; accent-color:#fff; }
.editor__slider-row span{ flex-shrink:0; width:44px; text-align:right; color:var(--grey-500); font-family:var(--font-display); font-size:.76rem; }

.editor__actions{ display:flex; gap:10px; margin-top:16px; }
.editor__actions .btn{ flex:1; padding:10px 14px; font-size:.8rem; }

.toast-stack{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:500;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(92vw, 380px);
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(14,14,14,.92);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.85);
  font-size:.85rem;
  transform:translateY(16px) scale(.96);
  opacity:0;
  animation:toast-in .45s var(--ease-out) forwards;
}
.toast.is-leaving{ animation:toast-out .35s var(--ease-out) forwards; }
@keyframes toast-in{ to{ transform:translateY(0) scale(1); opacity:1; } }
@keyframes toast-out{ to{ transform:translateY(10px) scale(.95); opacity:0; } }
.toast__icon{ flex-shrink:0; width:18px; height:18px; margin-top:1px; stroke:#fff; }
.toast__msg{ flex:1; color:var(--grey-300); line-height:1.4; }
.toast__msg b{ color:var(--white); }

.about{
  max-width:640px;
  margin:22px auto 0;
  padding:26px 22px;
  text-align:center;
}
.about__title{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; margin-bottom:10px; }
.about__text{ color:var(--grey-500); font-size:.88rem; line-height:1.6; }

@media (max-width:480px){
  .intro__card{ padding:36px 22px 30px; }
  .dropzone{ padding:40px 18px; }
  .actions{ flex-direction:column; }
  .actions .btn{ width:100%; }
  .result__actions{ flex-direction:column; }
  .editor__modes{ grid-template-columns:1fr; }
}