:root{
  --bg:#0d0418; --bg2:#150826; --panel:rgba(38,18,74,.72); --panel2:rgba(24,10,48,.85);
  --line:rgba(168,120,255,.35); --line2:rgba(168,120,255,.18);
  --txt:#f3edff; --dim:#c9b8f2; --faint:#9d86d6;
  --acc:#8b5cf6; --acc2:#a855f7; --good:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --gold:#e9c767;
  --radius:18px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
html{background:#0d0418; overscroll-behavior-y:none}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--txt); min-height:100vh;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(800px 600px at -10% 30%, rgba(76,29,149,.45), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(168,85,247,.22), transparent 60%),
    linear-gradient(180deg,#170a2e 0%, var(--bg) 55%, #0a0314 100%);
  background-attachment:fixed;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top, 0px));
  position:sticky; top:0; z-index:40;
  background:#100620;
  border-bottom:1px solid var(--line2);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-logo{width:52px; height:52px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(192,132,252,.55), 0 0 18px rgba(168,85,247,.5); flex:none}
.brand-text{min-width:0}
.brand-title{font-size:clamp(17px,4.6vw,24px); margin:0; line-height:1.15; font-weight:800; letter-spacing:.2px}
.brand-amp{color:var(--dim); font-weight:600}
.brand-sub{margin:2px 0 0; color:var(--faint); font-size:12.5px}
.lang-toggle{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; flex:none}
.lang-btn{background:transparent; color:var(--dim); border:0; padding:7px 13px; font-size:13px; font-weight:700; cursor:pointer}
.lang-btn.active{background:var(--acc); color:#fff}

/* ---------- console layout ---------- */
.console{display:flex; flex-direction:column; gap:14px; padding:14px; max-width:1560px; margin:0 auto}
.rail{order:1}
.workspace{order:2; min-width:0}
.inspector{order:3}
@media (min-width:1024px){
  .console{display:grid; grid-template-columns:250px minmax(0,1fr) 360px; align-items:start; gap:18px; padding:20px}
  .rail{position:sticky; top:92px}
  .inspector{position:sticky; top:92px}
}

/* ---------- section tiles ---------- */
.rail-title{margin:2px 2px 10px; color:var(--faint); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase}
.tiles{display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none}
.tiles::-webkit-scrollbar{display:none}
.tile{
  flex:1 0 128px; max-width:170px; text-align:left; cursor:pointer; color:var(--txt);
  background:var(--panel); border:1px solid var(--line2); border-radius:var(--radius);
  padding:12px; display:flex; flex-direction:column; gap:4px;
}
.tile.active{border-color:var(--acc2); box-shadow:0 0 0 1px var(--acc2), 0 8px 24px rgba(139,92,246,.25)}
.tile-ico{font-size:21px}
.tile-name{font-weight:700; font-size:14.5px; line-height:1.25; overflow-wrap:anywhere}
.tile-tag{font-size:11.5px; color:var(--good); font-weight:700}
.tile-tag.soon{color:var(--faint)}
@media (min-width:1024px){
  .tiles{flex-direction:column; overflow:visible}
  .tile{max-width:none; flex:none}
}
.about-box{margin-top:14px; padding:10px 12px; border:1px dashed var(--line2); border-radius:12px}
.about-line{margin:0; font-size:11.5px; color:var(--faint)}

/* ---------- workspace ---------- */
.view{display:none}
.view.active{display:block}
.ws-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.ws-title{margin:0; font-size:clamp(16px,4.2vw,21px); font-weight:800; line-height:1.25}
.mode-tabs{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.mode-btn{background:transparent; color:var(--dim); border:0; padding:8px 14px; font-size:13.5px; font-weight:700; cursor:pointer}
.mode-btn.active{background:var(--acc); color:#fff}

/* ---------- simulated phone ---------- */
.phone-wrap{display:flex; justify-content:center}
.phone{
  position:relative; width:min(400px,100%); height:min(760px, calc(100vh - 240px)); min-height:520px;
  border-radius:34px; overflow:hidden; flex:none;
  border:1px solid rgba(196,141,255,.45);
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 6px #1c0b38, 0 0 44px rgba(139,92,246,.28);
  background:#12062a;
}
.phone.shimmer::after{
  content:""; position:absolute; inset:0; z-index:60; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(216,180,254,.30) 50%, transparent 70%);
  animation:shimmer .9s ease-in-out;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* simulated feed */
.sim-feed{
  position:absolute; inset:0; padding:12px 14px 96px; overflow:hidden;
  background:
    radial-gradient(340px 260px at 80% 0%, rgba(147,51,234,.5), transparent 65%),
    radial-gradient(300px 320px at 8% 38%, rgba(109,40,217,.45), transparent 65%),
    radial-gradient(380px 300px at 55% 100%, rgba(192,38,211,.22), transparent 65%),
    linear-gradient(180deg,#1d0b3d,#12062a 60%,#0d0418);
  transition:filter .4s;
}
.sim-feed.halloween{
  background:
    radial-gradient(340px 260px at 80% 0%, rgba(234,88,12,.42), transparent 65%),
    radial-gradient(300px 320px at 8% 38%, rgba(124,45,18,.5), transparent 65%),
    radial-gradient(380px 300px at 55% 100%, rgba(147,51,234,.3), transparent 65%),
    linear-gradient(180deg,#241031,#160a24 60%,#0d0418);
}
.sim-topbar{display:flex; align-items:center; gap:10px}
.sim-burger{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line); cursor:pointer; flex:none;
  background:rgba(46,20,92,.85); color:#fff; font-size:19px; line-height:1;
}
.sim-brand{display:flex; align-items:center; gap:7px; font-weight:800; font-size:17px; margin-right:auto}
.sim-brand img{width:30px; height:30px; border-radius:50%; object-fit:cover}
.sim-brand sup{font-size:9px; color:var(--dim)}
.sim-avatar{
  width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(145deg,#7c3aed,#4c1d95); font-weight:800; border:2px solid rgba(216,180,254,.6);
}
.sim-search{
  margin-top:12px; padding:11px 14px; border-radius:999px; font-size:14px; color:var(--dim);
  background:rgba(30,14,64,.75); border:1px solid var(--line2);
}
.sim-story-row{margin-top:14px}
.sim-story{display:flex; flex-direction:column; align-items:center; gap:5px; width:64px; font-size:11.5px; color:var(--dim)}
.sim-story-ring{
  position:relative; width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#2a1152; font-weight:800; font-size:18px; border:2px solid var(--acc2);
}
.sim-plus{position:absolute; right:-2px; bottom:-2px; width:18px; height:18px; border-radius:50%; background:var(--acc2); color:#fff; font-size:13px; display:grid; place-items:center; border:2px solid #170a2e}
.sim-moments{
  margin-top:14px; padding:13px 15px; border-radius:20px; display:flex; align-items:center; gap:10px;
  background:rgba(88,28,175,.38); border:1px solid rgba(196,141,255,.4);
}
.sim-moments-txt{display:flex; flex-direction:column; gap:2px; margin-right:auto}
.sim-moments-txt strong{letter-spacing:.12em; font-size:15px}
.sim-moments-txt span{font-size:12px; color:var(--dim)}
.sim-chevron{font-size:24px; color:var(--dim)}
.sim-waitlist-banner{
  margin-top:12px; padding:10px 13px; border-radius:14px; font-size:13px; font-weight:700; line-height:1.35;
  background:rgba(74,222,128,.16); border:1px solid rgba(74,222,128,.55); color:#bbf7d0;
}
.sim-card{margin-top:14px; padding:14px; border-radius:20px; background:rgba(26,11,54,.78); border:1px solid var(--line2)}
.sim-card-head{display:flex; align-items:center; gap:9px; font-size:14px}
.sim-card-ava{width:32px; height:32px; border-radius:50%; background:linear-gradient(145deg,#7c3aed,#4c1d95); display:grid; place-items:center; font-weight:800; flex:none}
.sim-card p{margin:9px 0 0; font-size:13.5px; color:var(--dim); line-height:1.45}
.sim-halloween-deco{position:absolute; left:0; right:0; top:118px; pointer-events:none; text-align:center}
.sim-halloween-deco .deco{position:absolute; font-size:26px; opacity:.9}
.sim-halloween-deco .d1{left:14px; top:170px}
.sim-halloween-deco .d2{right:20px; top:64px; font-size:20px}
.sim-halloween-deco .d3{right:16px; top:250px}
.sim-halloween-sign{
  display:inline-block; margin-top:2px; padding:6px 14px; border-radius:999px; font-size:13px; font-weight:800;
  background:rgba(234,88,12,.22); border:1px solid rgba(251,146,60,.65); color:#ffedd5;
}
.sim-pagebtn{position:absolute; left:50%; bottom:16px; transform:translateX(-50%); text-align:center}
.sim-ring{
  width:86px; height:86px; border-radius:50%; margin:0 auto; display:grid; place-items:center; overflow:hidden;
  border:3px solid rgba(216,180,254,.75);
  box-shadow:0 0 0 5px rgba(88,28,175,.5), 0 0 30px rgba(168,85,247,.55);
  background:#170a2e; transition:box-shadow .4s, border-color .4s;
}
.sim-ring img{width:100%; height:100%; object-fit:cover}
.sim-feed.halloween .sim-ring{border-color:rgba(251,146,60,.85); box-shadow:0 0 0 5px rgba(124,45,18,.55), 0 0 30px rgba(249,115,22,.55)}
.sim-ring-label{display:block; margin-top:5px; font-size:12px; font-weight:700; color:var(--dim)}

/* simulated drawer */
.sim-scrim{position:absolute; inset:0; background:rgba(5,2,12,.45); z-index:20}
.sim-drawer{
  position:absolute; top:0; bottom:0; left:0; width:min(320px,86%); z-index:30;
  transform:translateX(-105%); transition:transform .32s ease;
  background:rgba(21,8,43,.66); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-right:1px solid var(--line); display:flex; flex-direction:column;
}
.sim-drawer.open{transform:translateX(0)}
.drawer-head{display:flex; align-items:center; gap:8px; padding:14px 16px 4px; font-weight:800; font-size:16px}
.drawer-head img{width:28px; height:28px; border-radius:50%; object-fit:cover}
.drawer-head sup{font-size:9px; color:var(--dim)}
.drawer-lang{padding:2px 16px 10px; font-size:12.5px; color:var(--faint)}
.drawer-lang .on{color:#fff; font-weight:700}
.drawer-lang .sep{margin:0 6px}
.drawer-scroll{overflow-y:auto; padding:0 10px 18px; flex:1; -webkit-overflow-scrolling:touch}
.d-row{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:0; border-bottom:1px solid rgba(168,120,255,.10);
  color:var(--txt); font-size:14.5px; padding:11px 8px; line-height:1.3;
}
.d-row span{overflow-wrap:anywhere}
.d-row.disabled{opacity:.45; cursor:default}
.d-section{
  margin:14px 4px 4px; font-size:12px; font-weight:800; letter-spacing:.12em; color:#d8b4fe;
}
.switch-block{border-bottom:1px solid rgba(168,120,255,.10)}
.switch-row{border-bottom:0; justify-content:space-between}
.sw-name{font-weight:600}
.sw-state{margin-left:auto; font-weight:800; font-size:13px; color:var(--faint); white-space:nowrap; padding-left:8px}
.sw-state.on{color:var(--good)}
.sw-state.kit{font-weight:600; font-size:12px; white-space:nowrap; flex:none; text-align:right}
.d-row>span{min-width:0}
.sw-note{margin:0; padding:0 8px 9px 40px; font-size:12px; color:var(--faint); line-height:1.4}
.sw-note.warn{color:var(--warn); font-weight:700}
.drawer-foot{padding:12px 8px 0; font-size:11.5px; color:var(--faint)}

/* pulse on the correct target */
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
  50%{box-shadow:0 0 0 3px rgba(74,222,128,.85), 0 0 22px rgba(74,222,128,.5)}
}
.pulsing{animation:pulseGlow 1.05s ease-in-out infinite; border-radius:14px}
.sim-burger.pulsing{border-radius:50%}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.shake{animation:shake .28s ease-in-out 2}
@keyframes downNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.scroll-hint-arrow{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:5;
  font-size:22px; color:var(--good); animation:downNudge .8s ease-in-out infinite; pointer-events:none;
}

/* toast */
.sim-toast{
  position:absolute; left:14px; right:14px; bottom:16px; z-index:50;
  background:rgba(13,4,24,.94); border:1px solid var(--acc2); color:#fff;
  padding:12px 14px; border-radius:14px; font-size:13.5px; line-height:1.4;
  box-shadow:0 12px 32px rgba(0,0,0,.5); animation:toastIn .25s ease;
}
@keyframes toastIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---------- action bar ---------- */
.action-bar{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; justify-content:center}
.act-btn{
  border:1px solid var(--line); background:var(--panel); color:var(--txt); cursor:pointer;
  border-radius:999px; padding:10px 16px; font-size:14px; font-weight:700; line-height:1.2;
}
.act-btn:active{transform:scale(.97)}
.act-btn.primary{background:linear-gradient(145deg,#8b5cf6,#6d28d9); border-color:transparent; color:#fff}
.act-btn.ghost{background:transparent; color:var(--dim)}
.apply-status{
  margin:12px auto 0; max-width:560px; text-align:center; font-size:13.5px; line-height:1.45;
  padding:10px 14px; border-radius:12px; background:rgba(74,222,128,.13); border:1px solid rgba(74,222,128,.5); color:#d1fae5;
}

/* ---------- inspector ---------- */
.insp-card{
  background:var(--panel); border:1px solid var(--line2); border-radius:var(--radius);
  padding:16px;
}
.insp-card + .insp-card{margin-top:14px}
.insp-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.insp-badge{background:var(--acc); color:#fff; font-weight:800; font-size:12px; padding:5px 11px; border-radius:999px; letter-spacing:.06em; white-space:nowrap}
.insp-dots{display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end}
.insp-dots i{width:9px; height:9px; border-radius:50%; background:rgba(168,120,255,.3); display:block}
.insp-dots i.done{background:var(--good)}
.insp-dots i.now{background:#fff; box-shadow:0 0 0 2px var(--acc2)}
.insp-title{margin:12px 0 8px; font-size:18px; line-height:1.3}
.insp-script{margin:0; font-size:15.5px; line-height:1.55}
.insp-expect{margin:12px 0 0; font-size:13.5px; line-height:1.5; color:var(--dim); border-left:3px solid var(--acc2); padding-left:10px}
.insp-hint{
  margin:12px 0 0; font-size:13.5px; line-height:1.5; color:#fde68a;
  background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.5); border-radius:12px; padding:10px 12px;
}
.insp-nav{display:flex; gap:9px; margin-top:14px; flex-wrap:wrap}
.insp-done{margin-top:14px; padding:13px; border-radius:14px; background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.55)}
.insp-done p{margin:0; font-size:14px; line-height:1.5}
.insp-done .done-big{font-size:17px; font-weight:800; margin-bottom:5px}

/* ---------- videos ---------- */
.video-card{background:var(--panel); border:1px solid var(--line2); border-radius:var(--radius); padding:14px}
.guide-video{width:100%; border-radius:12px; background:#000; aspect-ratio:9/16; max-height:560px; display:block; margin:0 auto}
.video-fallback{position:relative; border-radius:12px; overflow:hidden; max-width:330px; margin:0 auto}
.video-fallback img{width:100%; display:block; opacity:.85}
.video-fallback-title{position:absolute; left:12px; right:12px; bottom:38px; font-weight:800; font-size:15px; margin:0; text-shadow:0 2px 8px #000}
.video-fallback-note{position:absolute; left:12px; right:12px; bottom:12px; font-size:12.5px; color:var(--dim); margin:0; text-shadow:0 2px 8px #000}
.video-title{font-weight:800; font-size:16px; margin:13px 2px 4px}
.video-desc{margin:0 2px; color:var(--dim); font-size:13.5px; line-height:1.5}
.video-list{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:9px}
.video-list li{
  background:var(--panel); border:1px solid var(--line2); border-radius:14px; padding:12px 14px;
  font-size:14.5px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; line-height:1.4;
}
.video-list em{margin-left:auto; color:var(--faint); font-style:normal; font-size:12px; font-weight:700}

/* ---------- soon ---------- */
.soon-card{background:var(--panel); border:1px solid var(--line2); border-radius:var(--radius); padding:22px 18px; text-align:center}
.soon-big{font-size:19px; font-weight:800; margin:0 0 8px; line-height:1.35}
.soon-note{color:var(--dim); font-size:14px; line-height:1.55; margin:0 auto 16px; max-width:460px}

/* ---------- decoding workspace ---------- */
.decode-card{background:var(--panel); border:1px solid var(--line2); border-radius:var(--radius); padding:16px}
.decode-result-title{font-size:16px; margin:0 0 10px}
.decode-card + .decode-card{margin-top:14px}
.decode-hint{margin:0 0 12px; font-size:14.5px; line-height:1.55; color:var(--dim)}
#decodeInput{
  width:100%; resize:vertical; min-height:110px; border-radius:14px; padding:13px 14px;
  background:#0d0418; color:var(--txt); border:1px solid var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:15.5px; line-height:1.55;
}
#decodeInput:focus{outline:2px solid var(--acc2); outline-offset:1px}
.decode-live{margin:12px 0 0; font-size:15px; line-height:1.55; color:var(--dim); background:rgba(74,222,128,.10); border:1px solid rgba(74,222,128,.4); border-radius:12px; padding:10px 13px; overflow-wrap:anywhere}
.decode-live strong{color:#d1fae5}
.decode-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.decode-chip{
  border:1px solid var(--line); background:rgba(24,10,48,.85); color:var(--txt); cursor:pointer;
  border-radius:999px; padding:8px 13px; font-size:13.5px; font-weight:600; line-height:1.25;
}
.decode-chip:active{transform:scale(.97)}
.decode-actions{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px}
.decode-mic-note{margin:12px 0 0; font-size:13.5px; line-height:1.5; color:var(--warn)}
.decode-label{margin:0 0 5px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.decode-raw{margin:0 0 14px; font-size:14.5px; line-height:1.5; color:var(--dim); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; overflow-wrap:anywhere}
.decode-fixed{margin:0 0 8px; font-size:18px; line-height:1.55; font-weight:700; overflow-wrap:anywhere}
.decode-done-list{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:7px}
.decode-done-list li{font-size:14.5px; line-height:1.45; background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.45); color:#d1fae5; border-radius:11px; padding:9px 12px}
.decode-done-list li.warn{background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.55); color:#fde68a}
.decode-log{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.decode-log li{font-size:14px; line-height:1.5; padding:9px 12px; border-radius:11px; background:rgba(24,10,48,.7); border:1px solid var(--line2); overflow-wrap:anywhere}
.decode-log .decode-log-time{color:var(--faint); font-size:12px; font-weight:700; margin-right:7px}
.decode-log li.decode-log-empty{background:transparent; border:0; color:var(--faint); padding:2px 0}

/* ---------- display overlay ---------- */
.display-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(6,2,14,.96);
  display:flex; flex-direction:column; padding:14px;
}
.display-head{display:flex; align-items:center; justify-content:space-between; gap:10px; max-width:1100px; width:100%; margin:0 auto 12px; font-weight:800; font-size:16px}
.display-stage{flex:1; display:flex; justify-content:center; overflow:hidden; width:100%}
.display-stage .phone{height:100%; max-height:820px}

/* michingon section */
.mich-card{background:var(--panel); border:1px solid var(--line2); border-radius:var(--radius); padding:18px; margin-bottom:14px}
.mich-hero{font-size:24px; font-weight:800; letter-spacing:.5px; margin:0 0 4px}
.mich-sub{color:var(--muted); margin:0 0 4px; font-size:15px}
.mich-url{color:var(--violet2,#b79cff); font-weight:700; margin:0 0 12px}
.mich-list{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:9px}
.mich-list li{font-size:15px; line-height:1.45}
.mich-prices{font-size:14.5px; line-height:1.5; margin:0 0 8px}
.mich-mail{font-size:14.5px; margin:0 0 14px}
.mich-open{display:inline-block; text-decoration:none}
.mich-h{margin:0 0 12px; font-size:17px}
.mich-note{color:var(--muted); font-size:13.5px; line-height:1.5; margin:0}

/* idea preview element inside the simulated phone */
.sim-idea{display:flex; align-items:center; gap:10px; margin:10px 12px; padding:12px 14px; border-radius:16px;
  background:linear-gradient(135deg, rgba(139,92,246,.35), rgba(236,72,153,.22)); border:1.5px dashed rgba(216,180,254,.85);
  animation:ideaPulse 1.6s ease-in-out infinite}
.sim-idea-ico{font-size:22px}
.sim-idea-label{font-weight:800; font-size:16px; flex:1}
.sim-idea-tag{font-size:10px; font-weight:800; letter-spacing:.6px; background:#f59e0b; color:#1c1005; padding:3px 7px; border-radius:99px}
@keyframes ideaPulse{0%,100%{box-shadow:0 0 0 0 rgba(216,180,254,.0)}50%{box-shadow:0 0 0 5px rgba(216,180,254,.18)}}

/* code layer */
.decode-code-wrap{margin-top:14px}
.decode-code{background:#07030f; border:1px solid rgba(74,222,128,.4); border-radius:12px; padding:13px 14px;
  color:#86efac; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12.8px; line-height:1.65;
  white-space:pre-wrap; overflow-wrap:anywhere; margin:0}
.decode-code-note{color:var(--muted); font-size:13px; line-height:1.5; margin:9px 0 0}