/* ============================================================
   CORA.EXE — "glitch rom-com terminal" visual deep pass
   Y2K cyber-romance: hot pink + cyan on midnight violet.
   Pure CSS/SVG. Light theme via [data-theme="light"] on <html>.
   ============================================================ */
:root{
  --bg:#0a0514; --bg2:#120824; --panel:#160b2c; --panel2:#1d1038;
  --pink:#ff2e88; --pink-hot:#ff5da2; --pink-soft:#ff8fbd; --pink-deep:#c2185b;
  --cyan:#00e5ff; --cyan-dim:#8ff4ff; --cyan-deep:#0aa4c4;
  --violet:#9b5cf6; --gold:#ffcf6e;
  --text:#f7eefc; --dim:#c6aede; --faint:#8f76a8;
  --ink-line:rgba(255,46,136,.35);
  --card-bg:linear-gradient(165deg, rgba(29,16,56,.92), rgba(12,6,24,.94));
  --mono:"Chakra Petch","Courier New",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Silkscreen","Trebuchet MS","Segoe UI",Verdana,sans-serif;
  --body:"Chakra Petch","Trebuchet MS","Segoe UI",Verdana,sans-serif;
  --shadow-pink:0 0 22px rgba(255,46,136,.35);
  --shadow-cyan:0 0 22px rgba(0,229,255,.28);
  --radius:14px;
}
[data-theme="light"]{
  --bg:#fff6fa; --bg2:#fdeef5; --panel:#ffffff; --panel2:#fdf0f6;
  --pink:#d1006b; --pink-hot:#e83e8c; --pink-soft:#c2185b; --pink-deep:#a30057;
  --cyan:#0077a8; --cyan-dim:#0a8fc4; --cyan-deep:#005f86;
  --violet:#7a3fe0; --gold:#b57e00;
  --text:#2c1030; --dim:#5e3a68; --faint:#8a6a94;
  --ink-line:rgba(209,0,107,.35);
  --card-bg:linear-gradient(165deg, #ffffff, #fdf0f7);
  --shadow-pink:0 6px 26px rgba(209,0,107,.18);
  --shadow-cyan:0 6px 26px rgba(0,119,168,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); line-height:1.7; font-size:17px;
  background-image:
    radial-gradient(1100px 520px at 12% -6%, rgba(255,46,136,.16), transparent 62%),
    radial-gradient(950px 480px at 88% 8%, rgba(0,229,255,.12), transparent 62%),
    radial-gradient(900px 700px at 50% 112%, rgba(155,92,246,.13), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,46,136,.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(0,229,255,.04) 0 1px, transparent 1px 56px);
  background-attachment:fixed;
}
[data-theme="light"] body{
  background-image:
    radial-gradient(1100px 520px at 12% -6%, rgba(209,0,107,.10), transparent 62%),
    radial-gradient(950px 480px at 88% 8%, rgba(0,119,168,.08), transparent 62%),
    radial-gradient(900px 700px at 50% 112%, rgba(122,63,224,.08), transparent 60%),
    repeating-linear-gradient(90deg, rgba(209,0,107,.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(0,119,168,.045) 0 1px, transparent 1px 56px);
}
/* scanlines + vignette overlay */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 2px, transparent 2px 4px);
  mix-blend-mode:multiply;
}
[data-theme="light"] body::after{background:repeating-linear-gradient(0deg, rgba(90,20,60,.05) 0 2px, transparent 2px 4px)}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9998;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(5,2,12,.5) 100%);
}
[data-theme="light"] body::before{background:radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(120,20,70,.08) 100%)}

a{color:var(--cyan); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--pink-hot)}
::selection{background:var(--pink); color:#fff}
:focus-visible{outline:3px solid var(--cyan); outline-offset:3px; border-radius:6px}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--pink); color:#fff; font-family:var(--mono); font-weight:700;
  padding:.7rem 1.2rem; border-radius:0 0 10px 0; text-decoration:none;
}
.skip-link:focus{left:0}

/* ---------- header / nav ---------- */
.topbar{
  position:sticky; top:0; z-index:1000;
  background:rgba(10,5,20,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:2px solid var(--pink);
  box-shadow:var(--shadow-pink);
}
[data-theme="light"] .topbar{background:rgba(255,246,250,.92)}
.topbar-inner{max-width:1180px; margin:0 auto; padding:.55rem 1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.brand{
  font-family:var(--disp); font-weight:700; font-size:1.05rem; color:var(--text);
  text-decoration:none; white-space:nowrap; letter-spacing:.02em;
  text-shadow:0 0 14px rgba(255,46,136,.55);
}
.brand .c-pink{color:var(--pink)} .brand .c-cyan{color:var(--cyan)}
.brand .cursor{display:inline-block; width:.55em; height:1em; background:var(--cyan); vertical-align:-.12em; margin-left:.15em;
  animation:blink 1.1s steps(1) infinite; box-shadow:0 0 10px var(--cyan)}
@keyframes blink{50%{opacity:0}}
nav.main{display:flex; flex-wrap:wrap; gap:.2rem; margin-left:auto; align-items:center}
nav.main a{
  font-family:var(--mono); font-size:.8rem; text-decoration:none; color:var(--dim);
  padding:.4rem .65rem; border:1px solid transparent; border-radius:8px;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
nav.main a:hover{color:var(--cyan); border-color:var(--cyan); background:rgba(0,229,255,.08); text-shadow:0 0 8px var(--cyan)}
[data-theme="light"] nav.main a:hover{background:rgba(0,119,168,.08); text-shadow:none}
nav.main a.active{
  color:#fff; border-color:var(--pink);
  background:linear-gradient(120deg, rgba(255,46,136,.85), rgba(155,92,246,.85));
  box-shadow:0 0 14px rgba(255,46,136,.5); text-shadow:0 1px 2px rgba(0,0,0,.4);
}
/* theme toggle */
.theme-toggle{
  font-family:var(--mono); font-size:.8rem; cursor:pointer; line-height:1;
  color:var(--cyan); background:rgba(0,229,255,.07); border:1px solid var(--cyan);
  border-radius:8px; padding:.42rem .55rem; display:inline-flex; align-items:center; gap:.4rem;
  transition:color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.theme-toggle:hover{box-shadow:var(--shadow-cyan); color:var(--pink-hot); border-color:var(--pink)}
.theme-toggle svg{width:15px; height:15px; display:block}
.theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-sun{display:block}
[data-theme="light"] .theme-toggle .icon-moon{display:none}

/* ---------- layout ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:2.2rem 1rem 4.5rem}

/* ---------- hero (CRT bezel frame + scan sweep + corner brackets) ---------- */
.hero{
  position:relative; border:2px solid var(--pink); border-radius:var(--radius);
  overflow:hidden; margin:0 0 2.8rem;
  box-shadow:var(--shadow-pink), inset 0 0 60px rgba(255,46,136,.08);
  background:var(--panel);
}
.hero::before,.hero::after,
figure.fig.hero figcaption::before,figure.fig.hero figcaption::after{
  content:""; position:absolute; width:26px; height:26px; z-index:3; pointer-events:none;
}
.hero::before{top:10px; left:10px; border-top:3px solid var(--cyan); border-left:3px solid var(--cyan); filter:drop-shadow(0 0 6px var(--cyan))}
.hero::after{top:10px; right:10px; border-top:3px solid var(--cyan); border-right:3px solid var(--cyan); filter:drop-shadow(0 0 6px var(--cyan))}
figure.fig.hero figcaption::before{bottom:10px; left:10px; border-bottom:3px solid var(--cyan); border-left:3px solid var(--cyan); filter:drop-shadow(0 0 6px var(--cyan))}
figure.fig.hero figcaption::after{bottom:10px; right:10px; border-bottom:3px solid var(--cyan); border-right:3px solid var(--cyan); filter:drop-shadow(0 0 6px var(--cyan))}
.hero img{display:block; width:100%; height:auto; position:relative; z-index:1}
.hero .scan-sweep{
  position:absolute; left:0; right:0; top:-12%; height:12%; z-index:2; pointer-events:none;
  background:linear-gradient(transparent, rgba(0,229,255,.22), transparent);
  animation:sweep 7s linear infinite;
}
@keyframes sweep{to{transform:translateY(950%)}}
figure.fig.hero figcaption{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:3rem 1.6rem 1.3rem;
  background:linear-gradient(transparent, rgba(10,5,20,.93));}
[data-theme="light"] figure.fig.hero figcaption{background:linear-gradient(transparent, rgba(255,246,250,.94))}
figure.fig.hero figcaption p{margin:0; font-family:var(--mono); color:var(--cyan-dim); font-size:.85rem; text-shadow:0 1px 3px rgba(0,0,0,.6)}
[data-theme="light"] figure.fig.hero figcaption p{text-shadow:none}

/* ---------- glitch display heading ---------- */
h1{font-size:2.2rem; line-height:1.25; margin:0 0 1rem}
.glitch{
  font-family:var(--disp); font-weight:700; letter-spacing:.03em;
  position:relative; display:inline-block; color:var(--text);
  text-shadow:2px 0 var(--pink), -2px 0 var(--cyan);
  animation:glitch-jitter 5s infinite steps(1);
}
@keyframes glitch-jitter{
  0%,92%,100%{transform:translate(0)}
  93%{transform:translate(-3px,2px)} 95%{transform:translate(3px,-2px)} 97%{transform:translate(-2px,-1px)}
}
.glitch::before,.glitch::after{
  content:attr(data-t); position:absolute; left:0; top:0; width:100%; overflow:hidden;
}
.glitch::before{color:var(--pink); z-index:-1; animation:gl1 3.4s infinite linear alternate}
.glitch::after{color:var(--cyan); z-index:-2; animation:gl2 2.9s infinite linear alternate}
@keyframes gl1{
  0%{transform:translate(0); clip-path:inset(0 0 100% 0)}
  15%{transform:translate(-5px,2px); clip-path:inset(8% 0 62% 0)}
  30%{transform:translate(4px,-2px); clip-path:inset(58% 0 12% 0)}
  45%{transform:translate(-3px,1px); clip-path:inset(28% 0 48% 0)}
  60%,100%{transform:translate(0); clip-path:inset(0 0 100% 0)}
}
@keyframes gl2{
  0%{transform:translate(0); clip-path:inset(0 0 100% 0)}
  20%{transform:translate(5px,-2px); clip-path:inset(52% 0 28% 0)}
  40%{transform:translate(-4px,2px); clip-path:inset(18% 0 66% 0)}
  55%{transform:translate(2px,-1px); clip-path:inset(74% 0 6% 0)}
  70%,100%{transform:translate(0); clip-path:inset(0 0 100% 0)}
}

h2{
  font-size:1.45rem; font-family:var(--disp); font-weight:700; color:var(--pink-hot);
  margin:2.6rem 0 1rem; padding-bottom:.5rem; position:relative; letter-spacing:.02em;
}
h2::before{content:"// "; color:var(--cyan); text-shadow:0 0 10px var(--cyan)}
[data-theme="light"] h2::before{text-shadow:none}
h2::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--pink) 0%, var(--violet) 45%, transparent 100%);
  box-shadow:0 0 10px rgba(255,46,136,.4);
}
h3{color:var(--cyan-dim); font-family:var(--mono); font-size:1.05rem; margin:1.8rem 0 .6rem}
.lede{font-size:1.18rem; color:var(--dim); max-width:62ch}
.pixel-heart{color:var(--pink); text-shadow:0 0 10px var(--pink); display:inline-block; animation:heartbeat 1.6s ease-in-out infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)}12%{transform:scale(1.25)}24%{transform:scale(1)}36%{transform:scale(1.18)}48%{transform:scale(1)}}
.tag{
  display:inline-block; font-family:var(--mono); font-size:.75rem; font-weight:600;
  border:1px solid var(--cyan); color:var(--cyan);
  border-radius:20px; padding:.22rem .8rem; margin:.15rem .3rem .15rem 0;
  background:rgba(0,229,255,.06); box-shadow:inset 0 0 8px rgba(0,229,255,.12);
}
[data-theme="light"] .tag{background:rgba(0,119,168,.06)}
.tag.pink{border-color:var(--pink); color:var(--pink-soft); background:rgba(255,46,136,.07); box-shadow:inset 0 0 8px rgba(255,46,136,.14)}
[data-theme="light"] .tag.pink{background:rgba(209,0,107,.06)}

/* ---------- terminal window motif ---------- */
.term{
  border:1px solid var(--cyan); border-radius:12px; overflow:hidden; margin:1.8rem 0;
  background:rgba(4,22,34,.6); box-shadow:var(--shadow-cyan); position:relative;
}
[data-theme="light"] .term{background:#f2fbff}
.term.pink{border-color:var(--pink); box-shadow:var(--shadow-pink); background:rgba(34,6,22,.6)}
[data-theme="light"] .term.pink{background:#fff2f8}
.term-bar{
  display:flex; align-items:center; gap:.45rem; padding:.55rem .95rem;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-bottom:1px solid rgba(0,229,255,.4);
  font-family:var(--mono); font-size:.8rem; color:var(--dim);
}
.term.pink .term-bar{border-bottom-color:rgba(255,46,136,.4)}
.dot{width:.7rem; height:.7rem; border-radius:50%; box-shadow:0 0 6px currentColor}
.term-body{padding:1.1rem 1.3rem; font-family:var(--mono); font-size:.95rem; line-height:1.75}
.term-body::after{content:"▊"; color:var(--pink); animation:blink 1s steps(1) infinite; margin-left:.15em}
.term-body .p{color:var(--pink-hot)} .term-body .c{color:var(--cyan)} .term-body .d{color:var(--faint)}
.prompt{color:var(--cyan)} .prompt::before{content:"> "; color:var(--pink); font-weight:700}

/* ---------- cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1.3rem; margin:1.8rem 0}
.card{
  border:1px solid rgba(0,229,255,.45);
  border-radius:var(--radius); padding:1.35rem 1.3rem 1.2rem;
  background:var(--card-bg); position:relative; overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
[data-theme="light"] .card{border-color:rgba(0,119,168,.4)}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--pink), var(--violet), var(--cyan));
  opacity:.85;
}
.card::after{
  content:"♥"; position:absolute; right:.7rem; bottom:.35rem; font-size:1.4rem;
  color:rgba(255,46,136,.22); pointer-events:none;
}
[data-theme="light"] .card::after{color:rgba(209,0,107,.18)}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-cyan); border-color:var(--cyan)}
.card h3{margin:.2rem 0 .5rem}
.card p{color:var(--dim); font-size:.95rem; margin:.4rem 0 .8rem}
.card a.cta{font-family:var(--mono); font-size:.85rem; font-weight:700; text-decoration:none}
.card a.cta::after{content:" ▸"; transition:margin .18s ease}
.card a.cta:hover::after{margin-left:.25rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--mono); font-weight:700; text-decoration:none;
  color:#14060f !important;
  background:linear-gradient(100deg,var(--pink),var(--violet)); padding:.75rem 1.5rem;
  border-radius:10px; margin:.4rem .5rem .4rem 0; border:none; position:relative; overflow:hidden;
  box-shadow:var(--shadow-pink); transition:transform .18s ease, box-shadow .18s ease;
}
.btn::after{
  content:""; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg); transition:left .45s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 0 30px rgba(255,46,136,.65)}
.btn:hover::after{left:130%}
.btn.cyan{background:linear-gradient(100deg,var(--cyan),#7df3ff); box-shadow:var(--shadow-cyan)}
[data-theme="light"] .btn.cyan{color:#06222e !important}
.btn.ghost{background:transparent; color:var(--cyan) !important; border:2px solid var(--cyan); box-shadow:none}
.btn.ghost:hover{box-shadow:var(--shadow-cyan); background:rgba(0,229,255,.08)}
[data-theme="light"] .btn.ghost:hover{background:rgba(0,119,168,.08)}

/* ---------- figures / gallery ---------- */
figure{margin:0}
.fig{
  border:1px solid var(--ink-line); border-radius:var(--radius); overflow:hidden;
  background:var(--panel); box-shadow:var(--shadow-pink); position:relative;
}
.fig img{display:block; width:100%; height:auto}
.fig figcaption{padding:.8rem 1.1rem; font-family:var(--mono); font-size:.8rem; color:var(--dim); border-top:1px solid var(--ink-line)}
.fig figcaption .lbl{
  display:inline-block; color:#fff; background:linear-gradient(90deg,var(--pink),var(--violet));
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:.4rem; padding:.18rem .6rem; border-radius:20px;
}
.portrait{max-width:440px}
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem}
.gallery-grid .fig{transition:transform .22s ease, box-shadow .22s ease}
.gallery-grid .fig:hover{transform:translateY(-4px) scale(1.01); box-shadow:0 0 34px rgba(255,46,136,.45)}

/* ---------- quote blocks ---------- */
blockquote{
  border-left:5px solid var(--pink); margin:1.6rem 0; padding:1rem 1.4rem 1rem 3.2rem;
  background:linear-gradient(100deg, rgba(255,46,136,.09), transparent 70%);
  border-radius:0 var(--radius) var(--radius) 0; font-size:1.12rem; position:relative;
  box-shadow:inset 0 0 30px rgba(255,46,136,.05);
}
[data-theme="light"] blockquote{background:linear-gradient(100deg, rgba(209,0,107,.07), transparent 70%)}
blockquote::before{
  content:"♥"; position:absolute; left:1rem; top:.85rem; font-size:1.5rem; color:var(--pink);
  text-shadow:0 0 12px var(--pink);
}
[data-theme="light"] blockquote::before{text-shadow:none}
blockquote footer{font-family:var(--mono); font-size:.8rem; color:var(--faint); margin-top:.6rem}
blockquote footer::before{content:"— "}
.honest{
  font-family:var(--mono); font-size:.78rem; color:var(--faint);
  border:1px dashed var(--faint); border-radius:10px; padding:.7rem 1rem; margin:1.3rem 0;
  background:rgba(143,118,168,.07);
}
.honest::before{content:"[note] "; color:var(--cyan); font-weight:700}

/* ---------- quiz ---------- */
.quiz-q{
  border:1px solid rgba(155,92,246,.55);
  border-radius:12px; padding:1.1rem 1.3rem; margin:1.1rem 0;
  background:linear-gradient(160deg, rgba(155,92,246,.10), transparent);
  box-shadow:0 0 16px rgba(155,92,246,.12);
}
.quiz-q p{font-weight:700; margin-top:0; font-family:var(--mono)}
.quiz-q p::before{content:"Q ▸ "; color:var(--pink-hot)}
.quiz-q label{display:block; font-family:var(--mono); padding:.35rem .6rem; cursor:pointer; border-radius:8px; transition:background .15s ease}
.quiz-q label:hover{background:rgba(155,92,246,.12)}
.quiz-q input{accent-color:var(--pink); margin-right:.55rem}
#quiz-result{display:none}

/* ---------- tables & key-value ---------- */
table.spec{width:100%; border-collapse:separate; border-spacing:0; font-family:var(--mono); font-size:.9rem; margin:1.4rem 0;
  border:1px solid rgba(0,229,255,.4); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-cyan)}
[data-theme="light"] table.spec{border-color:rgba(0,119,168,.4)}
table.spec th,table.spec td{padding:.65rem .9rem; text-align:left; border-bottom:1px solid rgba(0,229,255,.18)}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:none}
table.spec th{background:linear-gradient(90deg, rgba(0,229,255,.16), rgba(155,92,246,.16)); color:var(--cyan); font-family:var(--disp); font-size:.8rem; letter-spacing:.05em}
[data-theme="light"] table.spec th{background:linear-gradient(90deg, rgba(0,119,168,.1), rgba(122,63,224,.1))}
table.spec tbody tr:nth-child(even){background:rgba(0,229,255,.04)}
table.spec tbody tr:hover{background:rgba(255,46,136,.07)}
table.spec td:first-child{color:var(--pink-hot); font-weight:600}
.kv{display:grid; grid-template-columns:190px 1fr; gap:.45rem 1.1rem; font-family:var(--mono); margin:1.3rem 0;
  border:1px solid var(--ink-line); border-radius:12px; padding:1.1rem 1.3rem; background:var(--panel)}
.kv dt{color:var(--cyan)} .kv dd{margin:0; color:var(--text)}
.kv dt::before{content:"▸ "; color:var(--pink)}

/* ---------- footer ---------- */
footer.site{
  border-top:2px solid var(--cyan); margin-top:3.5rem; padding:2.2rem 1rem;
  background:rgba(10,5,20,.9);
  box-shadow:0 0 26px rgba(0,229,255,.18); position:relative; overflow:hidden;
}
[data-theme="light"] footer.site{background:rgba(255,246,250,.94)}
footer.site::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--pink), var(--cyan), transparent);
  animation:footflow 6s linear infinite; background-size:200% 100%;
}
@keyframes footflow{to{background-position:200% 0}}
.foot-inner{max-width:1180px; margin:0 auto}
.foot-links{columns:3; column-gap:2rem; font-family:var(--mono); font-size:.82rem; margin:1.2rem 0}
.foot-links a{display:block; padding:.2rem 0; color:var(--dim); text-decoration:none}
.foot-links a:hover{color:var(--cyan); text-shadow:0 0 8px var(--cyan)}
[data-theme="light"] .foot-links a:hover{text-shadow:none}
.foot-note{font-family:var(--mono); font-size:.75rem; color:var(--faint); max-width:90ch}
.hearts{text-align:center; letter-spacing:.7rem; font-size:1.35rem; margin:1rem 0}
.hearts .pixel-heart:nth-child(2){animation-delay:.25s}
.hearts .pixel-heart:nth-child(3){animation-delay:.5s}

/* ---------- stream / social pack ---------- */
.mockup-banner{
  border:2px dashed var(--pink); border-radius:12px; padding:1.1rem 1.3rem;
  background:rgba(255,46,136,.07); font-family:var(--mono); margin:1.5rem 0;
  box-shadow:inset 0 0 24px rgba(255,46,136,.08);
}
[data-theme="light"] .mockup-banner{background:rgba(209,0,107,.05)}
.mockup-banner::before{content:"⚠ "; color:var(--pink-hot)}
.video-wrap{
  position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:var(--radius);
  border:2px solid var(--cyan); box-shadow:var(--shadow-cyan);
}
.video-wrap iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0}
.dl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.3rem}
.dl-card{text-align:center}
.dl-card img{border-radius:12px; border:1px solid var(--ink-line); transition:transform .22s ease, box-shadow .22s ease}
.dl-card img:hover{transform:translateY(-4px); box-shadow:var(--shadow-pink)}

/* ---------- misc ---------- */
hr{border:none; border-top:1px dashed var(--ink-line); margin:2.2rem 0}
ul li::marker{color:var(--pink)}
ol li::marker{color:var(--cyan); font-family:var(--mono)}

/* ---------- responsive ---------- */
@media(max-width:720px){
  .foot-links{columns:2}
  h1{font-size:1.55rem}
  h2{font-size:1.2rem}
  .kv{grid-template-columns:1fr}
  .wrap{padding:1.6rem 1rem 3.5rem}
  nav.main{gap:.1rem}
  nav.main a{font-size:.74rem; padding:.35rem .5rem}
  figure.fig.hero figcaption{padding:2.2rem 1rem 1rem}
}
@media(max-width:420px){
  .foot-links{columns:1}
  body{font-size:16px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .hero .scan-sweep{display:none}
}