/* =========================================================
   x_devnull — IT-Human
   ink #3f3c3b  ·  flame #e85722
   ========================================================= */

:root{
  --ink:        #3f3c3b;
  --ink-deep:   #2b2928;
  --ink-abyss:  #1e1c1c;
  --ink-lift:   #565250;
  --flame:      #e85722;
  --flame-hot:  #ff7a45;
  --flame-dim:  rgba(232,87,34,.14);
  --paper:      #f4f1ee;
  --paper-dim:  rgba(244,241,238,.58);
  --paper-faint:rgba(244,241,238,.28);
  --hair:       rgba(244,241,238,.10);
  --hair-warm:  rgba(244,241,238,.18);

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
  --gut: clamp(20px, 5vw, 64px);
  --max: 1240px;
  --mx: 0px;  /* mouse x - 50%  */
  --my: 0px;  /* mouse y - 50%  */
  --paw: 0;    /* easter-egg blend */
}

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

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

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(232,87,34,.10), transparent 60%),
    radial-gradient(900px 620px at 8% 108%, rgba(232,87,34,.06), transparent 62%),
    linear-gradient(180deg, #464341 0%, var(--ink) 38%, var(--ink-deep) 74%, var(--ink-abyss) 100%);
  background-attachment: fixed;
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  font-weight:350;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition: filter .9s var(--ease);
}

/* paw mode shifts the whole palette */
body.paw-mode{ --flame-dim: rgba(255,196,64,.18); }
body.paw-mode #constellation{ opacity:.55; }

::selection{ background:var(--flame); color:#fff; }

a{ color:inherit; text-decoration:none; }

/* ── scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--ink-abyss); }
::-webkit-scrollbar-thumb{ background:#565150; border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:var(--flame); }

/* =========================================================
   AMBIENT LAYERS
   ========================================================= */

.grain{
  position:fixed; inset:-120px; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-14px,8px) } 40%{ transform:translate(9px,-13px) }
  60%{ transform:translate(-7px,-8px) } 80%{ transform:translate(12px,10px) }
}

.scanlines{
  position:fixed; inset:0; z-index:8998; pointer-events:none; opacity:.16;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.42) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}

.cursor-glow{
  position:fixed; z-index:0; pointer-events:none; opacity:0;
  width:640px; height:640px; left:0; top:0; margin:-320px 0 0 -320px;
  background:radial-gradient(circle closest-side, rgba(232,87,34,.20), rgba(232,87,34,.07) 45%, transparent 72%);
  transition:opacity .6s var(--ease);
  will-change:transform;
}
body.has-pointer .cursor-glow{ opacity:1; }

.constellation{
  position:fixed; inset:0; z-index:0; width:100%; height:100%;
  pointer-events:none; opacity:.85;
}

.parallax-field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.plx{ position:absolute; border-radius:50%; filter:blur(46px); will-change:transform; }
.plx--1{ width:520px; height:520px; top:-8%;  right:-6%;  background:rgba(232,87,34,.16); }
.plx--2{ width:420px; height:420px; top:38%;  left:-10%;  background:rgba(232,87,34,.10); }
.plx--3{ width:320px; height:320px; bottom:-6%; right:26%; background:rgba(255,122,69,.10); }

/* =========================================================
   BOOT OVERLAY
   ========================================================= */

.boot{
  position:fixed; inset:0; z-index:9500; background:var(--ink-abyss);
  display:grid; place-items:center; font-family:var(--mono);
  transition:opacity .7s var(--ease), visibility .7s;
  /* Failsafe: the boot screen lifts itself even if JS never runs, throws, or
     is blocked. Normally the `is-loading` class is removed long before 7s. */
  animation:bootFailsafe .7s var(--ease) 7s forwards;
}
@keyframes bootFailsafe{ to{ opacity:0; visibility:hidden; } }
.boot__inner{ font-size:13px; letter-spacing:.08em; color:var(--paper-dim); }
.boot__cmd{ color:var(--flame); }
.caret{ color:var(--flame); animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0 } }

body:not(.is-loading) .boot{ opacity:0; visibility:hidden; }

/* =========================================================
   NAV
   ========================================================= */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--gut);
  transition:padding .45s var(--ease), background .45s var(--ease), backdrop-filter .45s;
}
.nav.is-stuck{
  padding:12px var(--gut);
  background:rgba(43,41,40,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--hair);
}
.nav__brand{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:14px; }
.nav__glyph{ color:var(--flame); font-weight:700; transition:transform .4s var(--ease); }
.nav__brand:hover .nav__glyph{ transform:translateX(4px); }
.nav__name{ letter-spacing:-.01em; }

.nav__links{ display:flex; align-items:center; gap:6px; }
.nav__links a{
  position:relative; font-family:var(--mono); font-size:12.5px; color:var(--paper-dim);
  padding:8px 14px; border-radius:99px; transition:color .3s, background .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:5px; height:1px;
  background:var(--flame); transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--ease);
}
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__links .nav__pill{
  border:1px solid var(--hair-warm); color:var(--paper);
}
.nav__links .nav__pill::after{ display:none; }
.nav__links .nav__pill:hover{ background:var(--flame); border-color:var(--flame); }

@media (max-width:640px){
  .nav__links a[data-nav]{ display:none; }
  .nav__links .nav__pill{ display:inline-block; }
}

/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative; z-index:2;
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:140px var(--gut) 80px;
}
.hero__wrap{
  width:100%; max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,6vw,80px); align-items:center;
}
.hero__copy > * + *{ margin-top:26px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin:0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-dim);
}
.eyebrow em{ color:var(--flame); font-style:normal; }
.pulse{
  width:7px; height:7px; border-radius:50%; background:var(--flame); position:relative;
}
.pulse::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--flame); animation: ping 2.1s var(--ease) infinite;
}
@keyframes ping{ 0%{transform:scale(.6);opacity:.9} 100%{transform:scale(2.1);opacity:0} }

.title{
  margin:0; font-weight:600; letter-spacing:-.045em;
  font-size:clamp(58px, 12.5vw, 158px); line-height:.9;
}
.title .ch{
  display:inline-block; color:var(--paper);
  transform:translateY(1.05em) rotateX(-72deg); opacity:0;
  transition:transform .95s var(--ease), opacity .8s var(--ease);
}
.title .ch--f{ color:var(--flame); }
.title.is-in .ch{ transform:none; opacity:1; }
.title .ch--f{ position:relative; }
.title .ch--f::after{
  content:""; position:absolute; left:.06em; right:.06em; bottom:.04em; height:.055em;
  background:var(--flame); border-radius:2px; transform:scaleX(0); transform-origin:left;
}
.title.is-in .ch--f::after{ animation: strike .9s var(--ease) .75s forwards; }
@keyframes strike{ to{ transform:scaleX(1) } }

.lede{
  margin:0; max-width:50ch; font-size:clamp(15.5px,1.6vw,19px); color:var(--paper-dim);
  font-weight:300;
}
.lede em{ color:var(--paper); font-family:var(--mono); font-style:normal; font-size:.94em; }

.cta{ display:flex; flex-wrap:wrap; gap:12px; }

.btn{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:14px 24px; border-radius:99px; font-family:var(--mono); font-size:13px;
  letter-spacing:.01em; overflow:hidden; will-change:transform;
  transition:transform .38s var(--ease), background .38s, color .38s, border-color .38s, box-shadow .38s;
}
.btn span,.btn i{ position:relative; z-index:2; }
.btn i{ font-style:normal; transition:transform .38s var(--ease); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:radial-gradient(120px circle at var(--bx,50%) var(--by,50%), rgba(255,255,255,.28), transparent 60%);
  opacity:0; transition:opacity .35s;
}
.btn:hover::before{ opacity:1; }

.btn--primary{ background:var(--flame); color:#fff; box-shadow:0 10px 34px -14px rgba(232,87,34,.9); }
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 18px 44px -14px rgba(232,87,34,1); }
.btn--primary:hover i{ transform:translateX(5px); }
.btn--ghost{ border:1px solid var(--hair-warm); color:var(--paper); }
.btn--ghost:hover{ transform:translateY(-3px); border-color:var(--flame); color:var(--flame); }

.facts{
  display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,40px); margin:6px 0 0;
  padding-top:22px; border-top:1px solid var(--hair);
}
.facts div{ display:flex; flex-direction:column; gap:2px; }
.facts dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-faint); }
.facts dd{ margin:0; font-family:var(--mono); font-size:13.5px; color:var(--paper); }

/* ── avatar ─────────────────────────────────────────── */
.hero__visual{
  position:relative; display:grid; place-items:center;
  aspect-ratio:1; max-width:520px; width:100%; margin-inline:auto;
  will-change:transform;
}

.orbit{ position:absolute; inset:0; display:grid; place-items:center; will-change:transform; }
.orbit__ring{
  position:absolute; border:1px solid var(--hair-warm); border-radius:50%;
  inset:6%; border-top-color:var(--flame); border-right-color:rgba(232,87,34,.4);
  animation: spin 18s linear infinite;
}
.orbit__ring--2{ inset:16%; border-top-color:transparent; border-left-color:rgba(232,87,34,.5); animation: spin 13s linear infinite reverse; }
.orbit__dot{ position:absolute; top:-4px; left:50%; width:8px; height:8px; border-radius:50%; background:var(--flame); box-shadow:0 0 16px 3px rgba(232,87,34,.75); }
.orbit__dot--b{ top:auto; bottom:-4px; animation: spin 22s linear infinite reverse; opacity:.55; }
.orbit__dot{ transform-origin:0 calc(50% + 6px); }
@keyframes spin{ to{ transform:rotate(360deg) } }

.avatar{
  position:relative; width:min(66%,330px); aspect-ratio:1; padding:0; border:0; background:none; cursor:pointer;
  border-radius:50%; display:block;
}
.avatar__frame{
  position:relative; display:block; width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:var(--ink-abyss); box-shadow:0 30px 70px -28px rgba(0,0,0,.9), 0 0 0 1px var(--hair);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.avatar__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .7s var(--ease), transform .8s var(--ease), filter .7s var(--ease);
  filter:grayscale(.35) contrast(1.06) brightness(.94);
}
.avatar__img--b{ opacity:0; transform:scale(1.12) rotate(3deg); }
.avatar:hover .avatar__frame{ transform:translateY(-6px) scale(1.02); box-shadow:0 40px 90px -30px rgba(0,0,0,1), 0 0 0 1px rgba(232,87,34,.55); }
.avatar:active .avatar__frame{ transform:scale(.97); }

.avatar__glitch{
  position:absolute; inset:0; border-radius:50%; pointer-events:none; opacity:0;
  background:
    linear-gradient(180deg, rgba(232,87,34,.0) 48%, rgba(232,87,34,.5) 50%, rgba(232,87,34,0) 52%);
}
body.paw-mode .avatar__img--a{ opacity:0; transform:scale(1.12) rotate(-3deg); }
body.paw-mode .avatar__img--b{ opacity:1; transform:none; filter:none; }
body.paw-mode .avatar__frame{ box-shadow:0 30px 70px -20px rgba(255,196,64,.55), 0 0 0 2px rgba(255,196,64,.6); }
body.paw-mode .avatar__img--a{ animation: shake .5s var(--ease); }
@keyframes shake{
  0%,100%{ transform:none } 20%{ transform:translate(6px,-3px) }
  40%{ transform:translate(-5px,3px) } 60%{ transform:translate(4px,2px) } 80%{ transform:translate(-3px,-2px) }
}

.chip{
  position:absolute; font-family:var(--mono); font-size:11px; color:var(--paper-dim);
  padding:6px 12px; border-radius:99px; background:rgba(30,28,28,.6);
  border:1px solid var(--hair); backdrop-filter:blur(8px);
  white-space:nowrap; will-change:transform;
  animation: float 6s ease-in-out infinite;
}
.chip--1{ top:10%;  left:-2%; }
.chip--2{ top:46%;  right:-4%; animation-delay:-2s; }
.chip--3{ bottom:12%; left:6%;  animation-delay:-4s; }
@keyframes float{ 50%{ translate:0 -11px } }

.avatar__hint{
  position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper-faint); opacity:0; transition:opacity .5s var(--ease); pointer-events:none; white-space:nowrap;
}
.hero__visual:hover .avatar__hint{ opacity:.8; }

.scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--paper-faint); transition:color .3s;
}
.scroll:hover{ color:var(--flame); }
.scroll span{ width:1px; height:42px; background:linear-gradient(180deg,var(--flame),transparent); animation: drop 2.4s var(--ease-io) infinite; }
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top } 51%{ transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }

@media (max-width:900px){
  .hero__wrap{ grid-template-columns:1fr; }
  .hero__visual{ order:-1; max-width:300px; }
  .scroll{ display:none; }
  .chip--1,.chip--2{ display:none; }
}

/* =========================================================
   TICKER
   ========================================================= */

.ticker{
  position:relative; z-index:2; overflow:hidden; padding:16px 0;
  border-block:1px solid var(--hair); background:rgba(30,28,28,.35);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__row{ display:flex; width:max-content; animation: slide 42s linear infinite; }
.ticker:hover .ticker__row{ animation-play-state:paused; }
.ticker__row span{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper-faint); padding:0 26px; white-space:nowrap; display:flex; align-items:center; gap:26px;
}
.ticker__row span::after{ content:"◆"; color:var(--flame); font-size:7px; }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* =========================================================
   SECTIONS
   ========================================================= */

.section{ position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:clamp(80px,11vw,150px) var(--gut); }
.section--tight{ padding-block:clamp(50px,7vw,90px); }

.section__head{ margin-bottom:clamp(34px,5vw,58px); max-width:60ch; }
.section__head h2{
  margin:0; font-size:clamp(28px,4.4vw,48px); font-weight:500; letter-spacing:-.035em; line-height:1.08;
  display:flex; align-items:baseline; gap:16px;
}
.section__head .idx{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--flame);
  font-weight:400; padding-top:.4em;
}
.section__head p{ margin:14px 0 0 0; color:var(--paper-dim); font-size:16px; font-weight:300; }

/* ── stack grid ─────────────────────────────────────── */
.stack{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.stack__col{ background:rgba(43,41,40,.5); padding:26px 24px 24px; transition:background .45s var(--ease); }
.stack__col:hover{ background:rgba(43,41,40,.9); }
.stack__col h3{
  margin:0 0 16px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--flame); font-weight:500;
}
.stack__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.stack__col li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--paper-dim); transition:color .3s, transform .35s var(--ease); }
.stack__col li::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--paper-faint); transition:background .3s, transform .35s; }
.stack__col li:hover{ color:var(--paper); transform:translateX(5px); }
.stack__col li:hover::before{ background:var(--flame); transform:scale(1.8); }

/* ── cards ──────────────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:clamp(14px,2vw,22px); }
.card{
  position:relative; padding:32px 28px 34px; border:1px solid var(--hair); border-radius:4px;
  background:linear-gradient(160deg, rgba(86,82,80,.28), rgba(43,41,40,.5));
  overflow:hidden; will-change:transform;
  transition:border-color .5s var(--ease), background .5s var(--ease);
}
.card::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s;
  background:radial-gradient(340px circle at var(--mx) var(--my), rgba(232,87,34,.16), transparent 62%);
}
.card:hover{ border-color:rgba(232,87,34,.45); }
.card:hover::after{ opacity:1; }
.card__n{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--flame); }
.card h3{ margin:14px 0 10px; font-size:25px; font-weight:500; letter-spacing:-.03em; }
.card p{ margin:0; color:var(--paper-dim); font-size:14.5px; font-weight:300; }
.card__line{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--flame); transition:width .6s var(--ease); }
.card:hover .card__line{ width:100%; }

/* ── terminal ───────────────────────────────────────── */
.term{ border:1px solid var(--hair); border-radius:8px; overflow:hidden; background:rgba(30,28,28,.72); box-shadow:0 30px 70px -34px rgba(0,0,0,.9); }
.term__bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--hair); background:rgba(43,41,40,.7); }
.term__bar i{ width:10px; height:10px; border-radius:50%; background:#5c5857; }
.term__bar i:first-child{ background:var(--flame); }
.term__bar span{ margin-left:8px; font-family:var(--mono); font-size:11.5px; color:var(--paper-faint); }
.term__body{
  margin:0; padding:24px; font-family:var(--mono); font-size:13.5px; line-height:1.85;
  color:var(--paper-dim); white-space:pre-wrap; word-break:break-word; min-height:210px;
}
.term__body .p{ color:var(--flame); }
.term__body .k{ color:var(--paper); }
.term__body .o{ color:rgba(244,241,238,.42); }
.term__body .g{ color:#8fd18b; }
.term__body .y{ color:#f0c674; }

/* ── banner ─────────────────────────────────────────── */
.banner{
  position:relative; text-align:center; padding:clamp(44px,6vw,76px) clamp(24px,4vw,50px);
  border:1px solid var(--hair); border-radius:6px; overflow:hidden;
  background:linear-gradient(150deg, rgba(86,82,80,.3), rgba(30,28,28,.6));
}
.banner__glow{
  position:absolute; left:50%; top:-60%; width:640px; height:640px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(232,87,34,.24), transparent 62%); pointer-events:none;
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe{ 50%{ transform:translateX(-50%) scale(1.22); opacity:.6 } }
.banner h2{ position:relative; margin:0 0 12px; font-size:clamp(26px,4.2vw,44px); font-weight:500; letter-spacing:-.035em; }
.banner p{ position:relative; margin:0 0 30px; color:var(--paper-dim); font-weight:300; }
.banner .btn{ position:relative; }

/* =========================================================
   FOOTER
   ========================================================= */

.foot{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:26px var(--gut); border-top:1px solid var(--hair);
  font-family:var(--mono); font-size:11.5px; color:var(--paper-faint); flex-wrap:wrap;
}
.foot__l{ display:flex; align-items:center; gap:9px; }
.foot__mark{ color:var(--flame); font-weight:700; }
.foot__r{ display:flex; align-items:center; gap:10px; }
.foot__r a{ transition:color .3s; }
.foot__r a:hover{ color:var(--flame); }
@media (max-width:640px){ .foot__c{ order:3; width:100%; text-align:center; } }

/* =========================================================
   REVEAL + TOAST + RAIN
   ========================================================= */

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.1s }
.reveal[data-delay="2"]{ transition-delay:.2s }
.reveal[data-delay="3"]{ transition-delay:.3s }

.toast{
  position:fixed; left:50%; bottom:34px; transform:translate(-50%,140%); z-index:9200;
  padding:13px 22px; border-radius:99px; background:var(--flame); color:#fff;
  font-family:var(--mono); font-size:12.5px; box-shadow:0 20px 50px -18px rgba(232,87,34,1);
  transition:transform .65s var(--ease); max-width:calc(100vw - 40px); text-align:center;
}
.toast.is-on{ transform:translate(-50%,0); }

.rain{ position:fixed; inset:0; z-index:9100; pointer-events:none; opacity:0; transition:opacity .8s var(--ease); }
.rain.is-on{ opacity:1; }

/* =========================================================
   PASTE MODE
   ========================================================= */

.paste{ max-width:1180px; margin:0 auto; padding:120px var(--gut) 70px; position:relative; z-index:2; }
.paste__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:22px; flex-wrap:wrap; margin-bottom:26px; }
.paste__head h1{ margin:0; font-size:clamp(30px,5.4vw,56px); font-weight:500; letter-spacing:-.04em; line-height:1; }
.paste__head p{ margin:10px 0 0; color:var(--paper-dim); font-weight:300; }

.editor{ display:grid; grid-template-columns:1fr 292px; gap:1px; background:var(--hair); border:1px solid var(--hair); }
.editor__main{ background:rgba(43,41,40,.55); }
.editor__side{ background:rgba(43,41,40,.4); padding:22px; display:flex; flex-direction:column; gap:20px; }

.field{ display:flex; flex-direction:column; gap:8px; }
.field > label, .field > .label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--paper-faint);
}

input[type=text], select, textarea{
  width:100%; font-family:var(--mono); font-size:13.5px; color:var(--paper);
  background:rgba(30,28,28,.85); border:1px solid var(--hair); border-radius:4px;
  padding:11px 13px; outline:none; transition:border-color .3s, box-shadow .3s;
}
input[type=text]:focus, select:focus, textarea:focus{ border-color:var(--flame); box-shadow:0 0 0 3px var(--flame-dim); }
select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23e85722' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:32px; }
select option{ background:var(--ink-deep); color:var(--paper); }

/* ── editor: highlight layer under a transparent textarea ── */
.editor__stack{ position:relative; }
.editor__stack textarea,
.editor__hl{
  font-family:var(--mono);
  font-size:13.5px;
  line-height:1.75;
  tab-size:2;
  padding:18px 20px;
  margin:0;
  border:0;
  white-space:pre;
  word-wrap:normal;
  overflow-wrap:normal;
}
.editor__stack textarea{
  position:relative; z-index:2; display:block; width:100%; min-height:420px;
  background:transparent; color:transparent; caret-color:var(--flame);
  border-radius:0; resize:vertical; overflow:auto;
}
.editor__stack textarea::placeholder{ color:var(--paper-faint); }
.editor__stack textarea:focus{ box-shadow:none; }
.editor__hl{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  pointer-events:none; color:#d9d3ce; background:transparent; border-radius:0;
}
.editor__hl code{ font:inherit; }

#editorText{ min-height:420px; }

.pwrow{ display:flex; gap:8px; }
.pwrow input{ flex:1; min-width:0; }
.pwrow .mini{ flex:none; }
.hint{ font-size:12px; color:var(--paper-faint); line-height:1.5; }

.secretbox{
  display:flex; flex-direction:column; gap:8px; padding:14px 16px; margin-top:4px;
  border:1px dashed var(--flame); border-radius:5px; background:rgba(232,87,34,.06);
}
.secretbox span{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--paper-dim); }
.secretbox code{
  font-family:var(--mono); font-size:15px; color:var(--flame-hot);
  user-select:all; word-break:break-all;
}

/* ── password gate ─────────────────────────────────── */
.lock{
  max-width:460px; margin:40px auto; text-align:center;
  padding:38px 34px; border:1px solid var(--hair-warm); border-radius:8px;
  background:linear-gradient(160deg, rgba(86,82,80,.26), rgba(30,28,28,.62));
}
.lock__badge{
  display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--flame);
  border:1px solid var(--flame); border-radius:99px; padding:5px 14px; margin-bottom:16px;
}
.lock__body{ font-size:20px; font-weight:500; letter-spacing:-.02em; margin-bottom:12px; word-break:break-word; }
.lock__note{ margin:0 0 22px; font-family:var(--mono); font-size:12.5px; color:var(--paper-dim); }
.lock__note--bad{ color:var(--flame-hot); }
.lock form{ display:flex; gap:8px; }
.lock form input{ flex:1; min-width:0; text-align:left; }
.lock form .btn{ flex:none; }
.lock form input:disabled, .lock form .btn:disabled{ opacity:.45; pointer-events:none; }
.lock__hint{ margin:20px 0 0; font-family:var(--mono); font-size:11px; color:var(--paper-faint); }

@media (max-width:560px){
  .lock form{ flex-direction:column; }
  .lock form .btn{ justify-content:center; }
}

.seg{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.seg button{
  font-family:var(--mono); font-size:11.5px; padding:9px 6px; cursor:pointer;
  background:rgba(30,28,28,.8); color:var(--paper-dim);
  border:1px solid var(--hair); border-radius:4px; transition:all .28s var(--ease);
}
.seg button:hover{ color:var(--paper); border-color:var(--hair-warm); }
.seg button.on{ background:var(--flame); border-color:var(--flame); color:#fff; }

.toggles{ display:flex; flex-direction:column; gap:11px; }
.tg{ display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; }
.tg span{ font-size:13.5px; color:var(--paper-dim); }
.tg input{ appearance:none; width:38px; height:21px; border-radius:99px; background:rgba(30,28,28,.9); border:1px solid var(--hair-warm); position:relative; cursor:pointer; transition:background .3s, border-color .3s; flex:none; }
.tg input::after{ content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:var(--paper-dim); transition:transform .3s var(--ease), background .3s; }
.tg input:checked{ background:var(--flame); border-color:var(--flame); }
.tg input:checked::after{ transform:translateX(17px); background:#fff; }

.editor__foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 22px; background:rgba(43,41,40,.65); border-top:1px solid var(--hair); flex-wrap:wrap; }
.count{ font-family:var(--mono); font-size:11.5px; color:var(--paper-faint); }
.count b{ color:var(--paper-dim); font-weight:400; }

.result{
  margin-top:22px; border:1px solid var(--flame); border-radius:6px; background:rgba(232,87,34,.08);
  padding:20px 22px; display:flex; flex-direction:column; gap:14px;
}
.result[hidden]{ display:none; }
.result .url{ display:flex; gap:10px; }
.result .url input{ flex:1; }
.result .meta{ display:flex; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; color:var(--paper-dim); }

@media (max-width:880px){
  .editor{ grid-template-columns:1fr; }
  .editor__stack textarea{ min-height:300px; }
}

/* ── paste view ─────────────────────────────────────── */
.view{ max-width:1000px; margin:0 auto; padding:120px var(--gut) 70px; position:relative; z-index:2; }
.view__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 20px; border:1px solid var(--hair); border-radius:6px 6px 0 0; background:rgba(43,41,40,.7);
  font-family:var(--mono); font-size:11.5px; color:var(--paper-dim);
}
.view__acts{ display:flex; gap:8px; }
.mini{
  font-family:var(--mono); font-size:11.5px; padding:7px 13px; border-radius:5px; cursor:pointer;
  background:rgba(30,28,28,.85); color:var(--paper-dim); border:1px solid var(--hair); transition:all .28s;
}
.mini:hover{ color:var(--paper); border-color:var(--flame); }
.mini--go{ background:var(--flame); color:#fff; border-color:var(--flame); }
.mini--go:hover{ filter:brightness(1.1); color:#fff; }

.code{
  margin:0; padding:24px 22px; overflow-x:auto; background:rgba(30,28,28,.8);
  border:1px solid var(--hair); border-top:0; border-radius:0 0 6px 6px;
  font-family:var(--mono); font-size:13.5px; line-height:1.8; color:#d9d3ce; min-height:180px;
}
.code code{ font:inherit; }
.tok-com{ color:#6f6a67; font-style:italic; }
.tok-str{ color:#8fd18b; }
.tok-num{ color:#f0c674; }
.tok-kw{ color:#ff7a45; }
.tok-fn{ color:#8ab4d8; }
.tok-tag{ color:#e85722; }
.tok-attr{ color:#f0c674; }
.tok-op{ color:#a49e99; }
.tok-var{ color:#c8a2c8; }

.burn{
  margin:0 auto; max-width:520px; text-align:center; padding:70px 30px;
  border:1px solid var(--hair); border-radius:6px; background:rgba(30,28,28,.6);
}
.burn h2{ margin:0 0 10px; font-size:24px; font-weight:500; letter-spacing:-.02em; }
.burn p{ margin:0 0 24px; color:var(--paper-dim); font-size:14.5px; }

.notfound{ text-align:center; padding:80px 20px; }
.notfound h1{ font-size:clamp(48px,10vw,110px); margin:0 0 8px; letter-spacing:-.05em; font-weight:600; color:var(--flame); }
.notfound p{ color:var(--paper-dim); margin:0 0 26px; }

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