/* ============================================================
   SEGFAULT://dzxpert  —  amber-phosphor debugger
   palette: monochrome amber + one danger red. nothing else.
   ============================================================ */

:root{
  --bg:        #080600;
  --bg-2:      #0d0a02;
  --panel:     #110c02;
  --panel-2:   #160f02;
  --line:      #3a2a06;
  --line-hot:  #5a3f08;

  --amber:     #ffb000;   /* primary phosphor */
  --amber-hi:  #ffd166;   /* highlight */
  --amber-lo:  #b87a12;   /* dim text */
  --amber-xlo: #6e4a08;   /* ghost text / gridlines */

  --danger:    #ff3b1d;   /* segfault / overflow */
  --danger-lo: #a3260f;

  --glow:      0 0 1px rgba(255,176,0,.7), 0 0 8px rgba(255,140,0,.35);
  --glow-soft: 0 0 6px rgba(255,140,0,.25);

  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --crt:  'VT323', monospace;
  --jp:   'Noto Sans JP', sans-serif;

  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); }
body{
  font-family:var(--mono);
  color:var(--amber);
  font-size:15px;
  line-height:1.55;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--amber); color:#1a0e00; }

a{ color:var(--amber-hi); text-decoration:none; }

/* ----- CRT overlay : scanlines + vignette + flicker ----- */
.crt-overlay{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
}
.crt-overlay::before{   /* scanlines */
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(
     to bottom,
     rgba(0,0,0,0) 0px,
     rgba(0,0,0,0) 2px,
     rgba(0,0,0,.28) 3px,
     rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
}
.crt-overlay::after{    /* vignette + warm bloom */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(255,150,0,.05), transparent 55%),
    radial-gradient(140% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%);
}
.flicker{ animation:flicker 5s infinite steps(1); }
@keyframes flicker{
  0%,97%,100%{ opacity:1; } 97.5%{ opacity:.82; } 98.5%{ opacity:.94; }
}
@media (prefers-reduced-motion: reduce){
  .flicker{ animation:none; }
}

/* ============================================================
   BOOT SCREEN
   ============================================================ */
#boot{
  position:fixed; inset:0; z-index:8000;
  background:var(--bg); color:var(--amber);
  padding:6vh max(5vw,28px);
  font-family:var(--mono); font-size:14px;
  overflow:hidden; cursor:default;
  display:flex; flex-direction:column;
}
#boot .boot-log{ white-space:pre-wrap; flex:1; text-shadow:var(--glow-soft); }
#boot .boot-log b{ color:var(--amber-hi); font-weight:700; }
#boot .boot-log .ok{ color:var(--amber); }
#boot .boot-log .err{ color:var(--danger); text-shadow:0 0 8px rgba(255,59,29,.5); }
#boot .boot-log .dim{ color:var(--amber-lo); }
.attach-wrap{ margin-top:24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.attach-btn{
  font-family:var(--crt); font-size:30px; line-height:1;
  background:transparent; color:var(--bg);
  background-color:var(--amber);
  border:none; padding:12px 26px 8px; cursor:pointer;
  letter-spacing:.04em; text-transform:uppercase;
  box-shadow:0 0 0 1px var(--amber), 0 0 22px rgba(255,150,0,.4);
  transition:transform .08s, box-shadow .2s;
}
.attach-btn:hover{ transform:translateY(-1px); box-shadow:0 0 0 1px var(--amber-hi), 0 0 34px rgba(255,160,0,.7); }
.attach-btn:active{ transform:translateY(1px); }
.attach-hint{ color:var(--amber-lo); font-size:12px; }
.attach-hint b{ color:var(--amber); }

#boot.gone{ animation:bootOut .5s forwards; }
@keyframes bootOut{ to{ opacity:0; visibility:hidden; transform:scale(1.02); } }

.cursor-blk{ display:inline-block; width:9px; height:1.1em; background:var(--amber);
  vertical-align:-2px; animation:blink 1s steps(1) infinite; box-shadow:var(--glow-soft); }
@keyframes blink{ 50%{ opacity:0; } }

/* ============================================================
   APP CHROME — top status bar + bottom audio bus
   ============================================================ */
#app{ opacity:1; }
#app[hidden]{ display:none; }

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:600;
  height:38px; display:flex; align-items:stretch;
  background:linear-gradient(var(--panel-2),var(--panel));
  border-bottom:1px solid var(--line-hot);
  font-size:12px; letter-spacing:.02em;
}
.topbar .seg{
  display:flex; align-items:center; gap:8px; padding:0 14px;
  border-right:1px solid var(--line); white-space:nowrap; color:var(--amber-lo);
}
.topbar .seg b{ color:var(--amber-hi); font-weight:700; }
.topbar .reg .v{ color:var(--amber); }
.topbar .reg.bad .v{ color:var(--danger); text-shadow:0 0 8px rgba(255,59,29,.45); }
.topbar .grow{ flex:1; border-right:none; }
.topbar .pid b{ color:var(--amber); }
.status-dot{ width:7px; height:7px; border-radius:50%; background:var(--danger);
  box-shadow:0 0 8px var(--danger); animation:pulseDot 1.2s infinite; }
@keyframes pulseDot{ 50%{ opacity:.35; } }
.topbar .jp{ font-family:var(--jp); font-size:11px; color:var(--amber-xlo); }

@media (max-width:880px){
  .topbar .seg.hide-sm{ display:none; }
}

/* bottom audio bus */
.audiobus{
  position:fixed; left:0; right:0; bottom:0; z-index:600;
  height:58px; display:flex; align-items:center; gap:14px;
  padding:0 16px;
  background:linear-gradient(var(--panel),var(--panel-2));
  border-top:1px solid var(--line-hot);
}
.audiobus .pp{
  width:38px; height:38px; flex:none; cursor:pointer;
  background:transparent; border:1px solid var(--line-hot); color:var(--amber);
  display:grid; place-items:center; font-size:16px;
  box-shadow:inset 0 0 12px rgba(255,150,0,.08);
  transition:.15s;
}
.audiobus .pp:hover{ border-color:var(--amber); box-shadow:0 0 14px rgba(255,150,0,.3), inset 0 0 12px rgba(255,150,0,.12); }
.audiobus .track{ font-size:12px; color:var(--amber-lo); white-space:nowrap; min-width:0; }
.audiobus .track b{ color:var(--amber); display:block; font-size:13px; }
.audiobus .track .marq{ color:var(--amber-xlo); }
#spectrum{ flex:1; height:40px; min-width:60px; display:block; }
.audiobus .vol{ display:flex; align-items:center; gap:8px; color:var(--amber-lo); font-size:11px; }
.audiobus input[type=range]{ width:84px; accent-color:var(--amber); }
@media (max-width:720px){
  .audiobus .track{ display:none; }
  .audiobus .vol{ display:none; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
main{ max-width:var(--maxw); margin:0 auto; padding:70px 22px 92px; }

/* generic window / pane */
.pane{
  border:1px solid var(--line-hot);
  background:
     linear-gradient(var(--panel),var(--panel-2));
  margin:26px 0;
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 18px 50px -30px rgba(0,0,0,.9);
  position:relative;
}
.pane-bar{
  display:flex; align-items:center; gap:10px;
  padding:7px 12px; border-bottom:1px solid var(--line);
  background:linear-gradient(var(--panel-2),var(--panel));
  font-size:12px; color:var(--amber-lo); letter-spacing:.04em;
}
.pane-bar .dot{ width:8px; height:8px; border-radius:50%; background:var(--line-hot); }
.pane-bar .addr{ color:var(--amber); }
.pane-bar .jp{ font-family:var(--jp); margin-left:auto; color:var(--amber-xlo); font-size:11px; }
.pane-body{ padding:22px; }

/* hazard stripe accent (eva/nerv) */
.hazard{ height:8px; width:100%;
  background:repeating-linear-gradient(45deg,var(--amber) 0 12px, #1a0e00 12px 24px);
  opacity:.85; }
.hazard.thin{ height:5px; opacity:.5; }

/* comment style */
.cmt{ color:var(--amber-xlo); }
.cmt::before{ content:"; "; }
.kw{ color:var(--danger); }
.fn{ color:var(--amber-hi); }
.num{ color:var(--amber); }

/* ============================================================
   HERO
   ============================================================ */
#hero .pane-body{ padding:0; }
.hero-grid{ display:grid; grid-template-columns:1.4fr .9fr; min-height:440px; }
@media (max-width:840px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-left{ padding:34px 30px; border-right:1px solid var(--line); position:relative; }
.hero-kicker{ font-size:12px; color:var(--amber-lo); letter-spacing:.18em; text-transform:uppercase; }
.hero-kicker .err{ color:var(--danger); }
.hero-title{
  font-family:var(--crt); font-size:clamp(54px,9vw,120px); line-height:.82;
  margin:14px 0 6px; color:var(--amber-hi); text-shadow:var(--glow);
  letter-spacing:.01em;
}
.hero-title .of{ color:var(--danger); text-shadow:0 0 12px rgba(255,59,29,.5); }
.hero-sub{ font-size:clamp(15px,2.2vw,19px); color:var(--amber); max-width:38ch; margin:8px 0 0; }
.hero-sub .hl{ color:var(--amber-hi); background:rgba(255,150,0,.08); padding:0 3px; }
.hero-meta{ margin-top:26px; font-size:12.5px; color:var(--amber-lo); display:grid; gap:3px; }
.hero-meta .line b{ color:var(--amber); }
.hero-glitch{ position:relative; display:inline-block; }

.hero-right{ position:relative; overflow:hidden; background:
   radial-gradient(120% 100% at 100% 0%, rgba(255,140,0,.06), transparent 60%); }
.stack-label{ position:absolute; top:12px; left:14px; right:14px; z-index:3;
  display:flex; justify-content:space-between; font-size:11px; color:var(--amber-lo);
  text-transform:uppercase; letter-spacing:.1em; pointer-events:none; }
.stack-canvas-wrap{ position:absolute; inset:0; }
#stackCanvas{ width:100%; height:100%; display:block; }
.buffer-line{ position:absolute; left:0; right:0; z-index:2; pointer-events:none;
  border-top:1px dashed var(--danger); }
.buffer-line span{ position:absolute; right:8px; top:-9px; font-size:10px; color:var(--danger);
  background:var(--bg-2); padding:0 4px; letter-spacing:.08em; }

/* ============================================================
   STRUCT / ABOUT
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1.25fr .85fr; gap:22px; }
@media (max-width:840px){ .about-grid{ grid-template-columns:1fr; } }

.code-block{ font-size:14px; line-height:1.7; white-space:pre-wrap; }
.code-block .ln{ color:var(--amber-xlo); user-select:none; display:inline-block; width:2.4em; }
.code-block .t{ color:var(--danger); }      /* type */
.code-block .m{ color:var(--amber); }        /* member */
.code-block .s{ color:var(--amber-hi); }     /* string */
.code-block .n{ color:var(--amber-hi); }     /* number */
.code-block .c{ color:var(--amber-xlo); }    /* comment */

/* character card */
.charcard{ border:1px solid var(--line-hot); background:var(--bg-2);
  display:flex; flex-direction:column; }
.charcard .avatar{ position:relative; aspect-ratio:1/1; overflow:hidden;
  background:repeating-linear-gradient(45deg,#140d01 0 8px,#0e0901 8px 16px);
  border-bottom:1px solid var(--line); }
.charcard image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.charcard .av-scan{ position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 3px, rgba(0,0,0,.3) 3px 4px);
  mix-blend-mode:multiply; }
.charcard .av-tag{ position:absolute; left:8px; bottom:8px; font-size:10px; z-index:2;
  background:var(--amber); color:#1a0e00; padding:1px 6px; letter-spacing:.08em; }
.charcard .av-jp{ position:absolute; right:8px; top:8px; font-family:var(--jp); font-size:11px;
  color:var(--amber-lo); z-index:2; }
.charcard .stats{ padding:14px; display:grid; gap:10px; }
.stat{ font-size:12px; }
.stat .lab{ display:flex; justify-content:space-between; color:var(--amber-lo); margin-bottom:3px; }
.stat .lab b{ color:var(--amber); }
.stat .bar{ height:8px; background:#1c1300; border:1px solid var(--line); position:relative; overflow:hidden; }
.stat .bar i{ position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--amber-lo),var(--amber));
  box-shadow:0 0 8px rgba(255,150,0,.4); }
.stat.crit .bar i{ background:linear-gradient(90deg,var(--danger-lo),var(--danger)); box-shadow:0 0 8px rgba(255,59,29,.5); }
.stat.crit .lab b{ color:var(--danger); }

/* ============================================================
   MEMORY MAP / PROJECTS
   ============================================================ */
.map-head{ display:grid; grid-template-columns:140px 1fr 110px 90px; gap:14px;
  font-size:11px; color:var(--amber-xlo); text-transform:uppercase; letter-spacing:.1em;
  padding:0 14px 8px; border-bottom:1px solid var(--line); }
@media (max-width:680px){ .map-head{ grid-template-columns:96px 1fr 70px; }
  .map-head .perm{ display:none; } }

.module{ border-bottom:1px solid var(--line); }
.mod-row{ display:grid; grid-template-columns:140px 1fr 110px 90px; gap:14px; align-items:center;
  padding:16px 14px; cursor:pointer; transition:background .15s; }
.mod-row:hover{ background:rgba(255,150,0,.05); }
@media (max-width:680px){ .mod-row{ grid-template-columns:96px 1fr 70px; }
  .mod-row .perm{ display:none; } }
.mod-base{ color:var(--amber); font-size:13px; }
.mod-base .lo{ color:var(--amber-xlo); }
.mod-name{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.mod-name b{ color:var(--amber-hi); font-size:16px; }
.mod-name .ext{ color:var(--amber-lo); font-size:12px; }
.mod-name .tags{ color:var(--amber-xlo); font-size:11px; }
.mod-size{ color:var(--amber-lo); font-size:12px; text-align:right; }
.mod-perm{ color:var(--amber-lo); font-size:12px; letter-spacing:.1em; }
.mod-perm .x{ color:var(--danger); }
.mod-chev{ transition:transform .2s; display:inline-block; color:var(--amber-lo); }
.module.open .mod-chev{ transform:rotate(90deg); color:var(--amber); }

.mod-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
.module.open .mod-body{ grid-template-rows:1fr; }
.mod-body-inner{ overflow:hidden; }
.disasm{ padding:6px 16px 22px; }
.disasm .desc{ color:var(--amber); font-size:14px; max-width:62ch; margin:6px 0 16px; }
.disasm .desc .hl{ color:var(--amber-hi); }
.disasm-code{ font-size:12.5px; line-height:1.75; color:var(--amber-lo); border-left:2px solid var(--line-hot); padding-left:14px; }
.disasm-code .a{ color:var(--amber-xlo); }   /* address */
.disasm-code .op{ color:var(--amber-hi); width:4em; display:inline-block; }  /* mnemonic */
.disasm-code .cc{ color:var(--amber-xlo); }  /* comment */
.disasm .stackrow{ display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; font-size:12px; }
.disasm .stackrow .k{ color:var(--amber-xlo); }
.disasm .stackrow .v{ color:var(--amber); }
.mod-links{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.btn{ font-family:var(--mono); font-size:12px; color:var(--amber); background:transparent;
  border:1px solid var(--line-hot); padding:7px 14px; cursor:pointer; letter-spacing:.03em;
  display:inline-flex; align-items:center; gap:8px; transition:.15s; text-transform:uppercase; }
.btn:hover{ border-color:var(--amber); background:rgba(255,150,0,.06); box-shadow:0 0 12px rgba(255,150,0,.18); }
.btn .ar{ color:var(--amber-lo); }

/* ============================================================
   SYSCALL / CONTACT
   ============================================================ */
.syscalls{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:680px){ .syscalls{ grid-template-columns:1fr; } }
.syscall{ border:1px solid var(--line-hot); background:var(--bg-2); padding:16px 18px;
  display:flex; align-items:center; gap:16px; transition:.15s; cursor:pointer; }
.syscall:hover{ border-color:var(--amber); background:rgba(255,150,0,.05); box-shadow:0 0 18px rgba(255,150,0,.15); }
.syscall .num{ font-family:var(--crt); font-size:34px; color:var(--amber-xlo); line-height:1; width:54px; }
.syscall:hover .num{ color:var(--amber); }
.syscall .body{ min-width:0; }
.syscall .call{ font-size:13px; color:var(--amber-lo); }
.syscall .call b{ color:var(--amber-hi); }
.syscall .ret{ font-size:12px; color:var(--amber-lo); }
.syscall .ret .v{ color:var(--amber); }
.syscall .arrow{ margin-left:auto; color:var(--amber-xlo); transition:.15s; }
.syscall:hover .arrow{ color:var(--amber); transform:translateX(3px); }

/* footer */
.foot{ text-align:center; color:var(--amber-xlo); font-size:11.5px; margin:34px 0 0; line-height:1.9; }
.foot b{ color:var(--amber-lo); }
.foot .hint{ color:var(--amber-xlo); }
.foot kbd{ border:1px solid var(--line-hot); padding:0 5px; border-radius:2px; color:var(--amber-lo); font-size:10px; }

/* section heading line */
.seclead{ display:flex; align-items:baseline; gap:14px; margin:46px 4px 2px; }
.seclead .idx{ font-family:var(--crt); font-size:26px; color:var(--amber-xlo); }
.seclead h2{ font-family:var(--mono); font-weight:700; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--amber); margin:0; }
.seclead .jp{ font-family:var(--jp); font-size:12px; color:var(--amber-xlo); margin-left:auto; }
.seclead .rule{ flex:1; height:1px; background:var(--line); align-self:center; }

/* ============================================================
   KONAMI :: kernel panic
   ============================================================ */
#panic{ position:fixed; inset:0; z-index:9500; display:none;
  background:#120100; color:var(--danger); padding:0; overflow:hidden; }
#panic.on{ display:block; }
#panicCanvas{ position:absolute; inset:0; width:100%; height:100%; }
.panic-msg{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; z-index:2; }
.panic-msg .big{ font-family:var(--crt); font-size:clamp(60px,13vw,180px); line-height:.85;
  color:var(--danger); text-shadow:0 0 20px rgba(255,59,29,.6); }
.panic-msg .jp{ font-family:var(--jp); font-size:clamp(22px,4vw,48px); color:var(--amber); margin-top:8px; }
.panic-msg .sub{ font-family:var(--mono); font-size:13px; color:var(--amber-lo); margin-top:18px; letter-spacing:.1em; }
.glitch-shake{ animation:shake .25s infinite; }
@keyframes shake{
  0%,100%{ transform:translate(0,0); }
  25%{ transform:translate(-3px,2px); }
  50%{ transform:translate(3px,-2px); }
  75%{ transform:translate(-2px,-2px); }
}

/* reveal: opacity flips instantly (CSS transitions freeze in this runtime);
   the decode-wipe overlay supplies the actual entrance animation */
.rise{ opacity:0; }
.rise.seen{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .rise{ opacity:1; } }

/* ============================================================
   SCROLL FX  (memory-seek rail · decode wipe · vsync tear)
   ============================================================ */

/* --- A. memory-seek address rail --- */
.addr-rail{
  position:fixed; left:0; top:38px; bottom:58px; width:66px; z-index:480;
  border-right:1px solid var(--line); background:linear-gradient(var(--panel),var(--bg-2));
  overflow:hidden; pointer-events:none;
  font-family:var(--mono); font-size:9.5px; color:var(--amber-xlo);
}
.addr-rail .strip{ position:absolute; left:0; right:0; top:0; will-change:transform; }
.addr-rail .tk{ height:24px; padding-left:9px; display:flex; align-items:center;
  border-bottom:1px solid rgba(58,42,6,.35); letter-spacing:.01em; white-space:nowrap; }
.addr-rail .tk.maj{ color:var(--amber-lo); }
.addr-rail .tk.bp{ color:var(--danger); }
.addr-rail .tk.bp::after{ content:"●"; margin-left:5px; font-size:7px; }
.rail-ip{
  position:fixed; left:0; width:66px; top:50%; transform:translateY(-50%); z-index:482;
  pointer-events:none; display:flex; flex-direction:column; align-items:flex-start;
}
.rail-ip .bar{ width:66px; height:24px; background:linear-gradient(90deg,rgba(255,176,0,.16),transparent);
  border-top:1px solid var(--amber); border-bottom:1px solid var(--amber);
  display:flex; align-items:center; padding-left:7px; box-shadow:0 0 16px rgba(255,150,0,.25); }
.rail-ip .tri{ color:var(--amber); font-size:11px; text-shadow:var(--glow); }
.rail-ip .cur{ position:absolute; left:70px; top:50%; transform:translateY(-50%);
  background:var(--amber); color:#1a0e00; font-size:10px; padding:1px 6px; white-space:nowrap;
  letter-spacing:.04em; box-shadow:0 0 14px rgba(255,150,0,.4); }
.rail-ip .cur::before{ content:"RIP ▸ "; opacity:.7; }
.addr-rail-spacer{ } /* main keeps its own max-width centering; rail floats over gutter */
@media (max-width:1180px){ .rail-ip .cur{ display:none; } }
@media (max-width:980px){ .addr-rail,.rail-ip{ display:none; } }

/* --- B. decode-on-arrival overlay --- */
.decode-fx{
  position:absolute; inset:0; z-index:40; pointer-events:none; overflow:hidden;
  background:var(--bg-2); color:var(--amber-lo);
  font-family:var(--mono); font-size:11px; line-height:1.35; letter-spacing:.06em;
  padding:10px 12px; white-space:pre-wrap; word-break:break-all;
  clip-path:inset(0 0 0 0);
  box-shadow:inset 0 -2px 0 rgba(255,200,80,.7), 0 0 26px rgba(255,150,0,.12);
}
.decode-fx.go{ animation:decodeWipe .62s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes decodeWipe{
  from{ clip-path:inset(0 0 0 0); }
  to{ clip-path:inset(100% 0 0 0); }
}
.decode-fx .hx{ position:absolute; inset:0; padding:10px 12px; overflow:hidden; }
.decode-fx .edge{ position:absolute; left:0; right:0; height:2px;
  background:var(--amber-hi); box-shadow:0 0 14px 3px rgba(255,170,0,.7); }
.decode-bar{
  position:absolute; top:0; left:0; right:0; z-index:42; pointer-events:none;
  background:var(--danger); color:#160300; font-size:11px; letter-spacing:.05em;
  padding:3px 12px; font-family:var(--mono); white-space:nowrap; overflow:hidden;
  box-shadow:0 0 18px rgba(255,59,29,.4);
}

/* --- C. vsync tear --- */
#tear{ position:fixed; inset:0; z-index:8600; pointer-events:none; opacity:0; }
#tear.on{ opacity:1; }
#tear .slice{ position:absolute; left:0; right:0; overflow:hidden; }
#tear .slice::before{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, rgba(255,176,0,.05) 0 2px, transparent 2px 4px); }
.tear-host{ animation:tearJit .18s steps(2) 1; }
@keyframes tearJit{
  0%{ transform:translate(0,0); filter:none; }
  30%{ transform:translate(-3px,0); }
  31%{ filter:drop-shadow(2px 0 0 rgba(255,59,29,.5)) drop-shadow(-2px 0 0 rgba(255,176,0,.4)); }
  60%{ transform:translate(2px,0); }
  100%{ transform:translate(0,0); filter:none; }
}
@media (prefers-reduced-motion: reduce){
  #tear{ display:none; } .tear-host{ animation:none; }
}