/* FLOW — 5 designs. Zine / Terminal / Paper / Abyss / Candy. */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--ink);background:var(--bg);
  font-family:var(--f-body, "Manrope", system-ui, sans-serif);
  overflow-x:hidden;
  transition:background .45s ease,color .45s ease;
}

/* ============ TOKENS PER DESIGN ============ */
[data-design="zine"]{
  --bg:#0A0A0B; --paper:#131315; --ink:#F4F1E8; --muted:#A9A69B; --line:#F4F1E8;
  --acid:#D8FF3D; --acid-ink:#0C0C00; --red:#FF4B2E;
  --tape:rgba(222,214,180,.85);
  --hard:5px 5px 0 var(--ink); --hard-sm:3px 3px 0 var(--ink);
  --grid:rgba(244,241,232,.07); --ghost:rgba(244,241,232,.07);
  --card-shadow:7px 7px 0 rgba(244,241,232,.9);
  --grain-op:.13; --ticker-bg:var(--acid); --ticker-ink:#111;
  --r-card:0px; --r-link:0px; --r-btn:12px;
  --f-display:"Unbounded",sans-serif; --f-body:"Manrope",sans-serif;
  --bw:2px; color-scheme:dark;
}
[data-design="terminal"]{
  --bg:#040704; --paper:#070C07; --ink:#B9E8B9; --muted:#5F7F60; --line:#2BD96A;
  --acid:#33FF66; --acid-ink:#031003; --red:#FFB000;
  --tape:transparent;
  --hard:none; --hard-sm:none;
  --grid:rgba(51,255,102,.06); --ghost:rgba(51,255,102,.1);
  --card-shadow:0 0 24px rgba(51,255,102,.14);
  --grain-op:.16; --ticker-bg:#031003; --ticker-ink:var(--acid);
  --r-card:6px; --r-link:6px; --r-btn:6px;
  --f-display:"IBM Plex Mono",monospace; --f-body:"IBM Plex Mono",monospace;
  --bw:1px; color-scheme:dark;
}
[data-design="beton"]{
  --bg:#C9C4B8; --paper:#D6D1C5; --ink:#141414; --muted:#5B574D; --line:#141414;
  --acid:#141414; --acid-ink:#D6D1C5; --red:#C22E1F;
  --tape:rgba(120,115,100,.5);
  --hard:6px 6px 0 var(--ink); --hard-sm:3px 3px 0 var(--ink);
  --grid:rgba(20,20,20,.1); --ghost:rgba(20,20,20,.12);
  --card-shadow:8px 8px 0 var(--ink);
  --grain-op:.14; --ticker-bg:#141414; --ticker-ink:#D6D1C5;
  --r-card:0px; --r-link:0px; --r-btn:0px;
  --f-display:"Unbounded",sans-serif; --f-body:"IBM Plex Mono",monospace;
  --bw:3px; color-scheme:light;
}
[data-design="ghoul"]{
  --bg:#070708; --paper:#0E0E12; --ink:#D9D6D1; --muted:#6E6A66; --line:rgba(217,214,209,.2);
  --acid:#D00000; --acid-ink:#070708; --red:#D00000;
  --tape:transparent;
  --hard:4px 4px 0 #000; --hard-sm:2px 2px 0 #000;
  --grid:rgba(217,214,209,.05); --ghost:rgba(208,0,0,.14);
  --card-shadow:0 0 60px rgba(0,0,0,.8);
  --grain-op:.22; --ticker-bg:#000; --ticker-ink:#D00000;
  --r-card:0px; --r-link:0px; --r-btn:50%;
  --f-display:"Unbounded",sans-serif; --f-body:"IBM Plex Mono",monospace;
  --bw:1px; color-scheme:dark;
}
[data-design="rave"]{
  --bg:#080008; --paper:#100A18; --ink:#F4EDFF; --muted:#9C8FC0; --line:#FF2BD6;
  --acid:#D4FF00; --acid-ink:#0A0A00; --red:#FF2BD6;
  --tape:rgba(255,43,214,.4);
  --hard:5px 5px 0 var(--red); --hard-sm:3px 3px 0 var(--red);
  --grid:rgba(255,43,214,.08); --ghost:rgba(255,43,214,.14);
  --card-shadow:0 0 34px rgba(255,43,214,.25);
  --grain-op:.12; --ticker-bg:var(--red); --ticker-ink:#0A0A00;
  --r-card:18px; --r-link:14px; --r-btn:14px;
  --f-display:"Unbounded",sans-serif; --f-body:"Manrope",sans-serif;
  --bw:2px; color-scheme:dark;
}
[data-design="pixel"]{
  --bg:#14102A; --paper:#1E1742; --ink:#F2EDFF; --muted:#8F86C0; --line:#F2EDFF;
  --acid:#FFD23F; --acid-ink:#14102A; --red:#FF5C5C;
  --tape:transparent;
  --hard:none; --hard-sm:none;
  --grid:rgba(242,237,255,.07); --ghost:rgba(255,210,63,.12);
  --card-shadow:none;
  --grain-op:.1; --ticker-bg:var(--acid); --ticker-ink:#14102A;
  --r-card:0px; --r-link:0px; --r-btn:0px;
  --f-display:"Rubik Mono One",monospace; --f-body:"IBM Plex Mono",monospace;
  --bw:3px; color-scheme:dark;
}
[data-design="blue"]{
  --bg:#0E3A8F; --paper:#1550AC; --ink:#EAF1FF; --muted:#A9C2EE; --line:#EAF1FF;
  --acid:#FFFFFF; --acid-ink:#0E3A8F; --red:#FFD23F;
  --tape:rgba(234,241,255,.5);
  --hard:5px 5px 0 rgba(6,20,50,.55); --hard-sm:3px 3px 0 rgba(6,20,50,.55);
  --grid:rgba(234,241,255,.12); --ghost:rgba(234,241,255,.14);
  --card-shadow:6px 6px 0 rgba(6,20,50,.55);
  --grain-op:.06; --ticker-bg:#0A2C6E; --ticker-ink:#EAF1FF;
  --r-card:4px; --r-link:4px; --r-btn:4px;
  --f-display:"IBM Plex Mono",monospace; --f-body:"IBM Plex Mono",monospace;
  --bw:1.5px; color-scheme:dark;
}
[data-design="poster"]{
  --bg:#C1271B; --paper:#141414; --ink:#F5EFE0; --muted:#E3BFAE; --line:#141414;
  --acid:#141414; --acid-ink:#F5EFE0; --red:#141414;
  --tape:rgba(230,220,190,.9);
  --hard:6px 6px 0 var(--ink); --hard-sm:3px 3px 0 var(--ink);
  --grid:rgba(20,20,20,.12); --ghost:rgba(20,20,20,.2);
  --card-shadow:8px 8px 0 var(--ink);
  --grain-op:.12; --ticker-bg:#141414; --ticker-ink:#F5EFE0;
  --r-card:0px; --r-link:0px; --r-btn:0px;
  --f-display:"Rubik Mono One",monospace; --f-body:"Manrope",sans-serif;
  --bw:3px; color-scheme:dark;
}
[data-design="abyss"]{
  --bg:#04090F; --paper:rgba(13,26,42,.66); --ink:#E7F2FF; --muted:#8CA3BB; --line:rgba(231,242,255,.16);
  --acid:#5EEAD4; --acid-ink:#04292A; --red:#7DD3FC;
  --tape:transparent;
  --hard:none; --hard-sm:none;
  --grid:rgba(125,211,252,.06); --ghost:rgba(125,211,252,.08);
  --card-shadow:0 24px 80px rgba(0,0,0,.55), 0 0 40px rgba(94,234,212,.08);
  --grain-op:.08; --ticker-bg:rgba(94,234,212,.08); --ticker-ink:#9FD8CC;
  --r-card:24px; --r-link:16px; --r-btn:50%;
  --f-display:"Unbounded",sans-serif; --f-body:"Manrope",sans-serif;
  --bw:1px; color-scheme:dark;
}
[data-design="candy"]{
  --bg:#EFE3FF; --paper:#FFFFFF; --ink:#2B2145; --muted:#7C7396; --line:#2B2145;
  --acid:#7C5CFF; --acid-ink:#FFFFFF; --red:#FF6BD6;
  --tape:rgba(255,180,220,.9);
  --hard:6px 6px 0 var(--ink); --hard-sm:3px 3px 0 var(--ink);
  --grid:rgba(43,33,69,.07); --ghost:rgba(124,92,255,.1);
  --card-shadow:8px 8px 0 var(--ink);
  --grain-op:.05; --ticker-bg:var(--red); --ticker-ink:#fff;
  --r-card:28px; --r-link:20px; --r-btn:16px;
  --f-display:"Unbounded",sans-serif; --f-body:"Manrope",sans-serif;
  --bw:2.5px; color-scheme:light;
}

::selection{background:var(--acid);color:var(--acid-ink)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.mono{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* ============ BACKGROUND LAYERS ============ */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(80% 70% at 50% 30%,#000 40%,transparent 100%);}
.orb{display:none;position:fixed;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:0;opacity:.5}
.orb-a{width:520px;height:520px;left:-140px;top:-120px;background:#0E5A52;animation:drift1 18s ease-in-out infinite alternate}
.orb-b{width:620px;height:620px;right:-180px;bottom:-180px;background:#1B3A7A;animation:drift2 22s ease-in-out infinite alternate}
[data-design="abyss"] .orb{display:block}
[data-design="candy"] .orb{display:block;opacity:.55}
[data-design="candy"] .orb-a{background:#FFB3E2}
[data-design="candy"] .orb-b{background:#B9A5FF}
@keyframes drift1{to{transform:translate(70px,50px) scale(1.08)}}
@keyframes drift2{to{transform:translate(-60px,-60px) scale(1.05)}}
[data-design="candy"] .bg-grid{background-image:radial-gradient(var(--grid) 1.6px,transparent 1.6px);background-size:22px 22px}
[data-design="terminal"] .bg-grid{background-image:repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px 3px);background-size:auto}

.ghost{position:fixed;z-index:0;top:44%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);
  font-family:var(--f-display);font-weight:900;font-size:clamp(90px,22vw,260px);
  color:transparent;-webkit-text-stroke:2px var(--ghost);letter-spacing:-.04em;pointer-events:none;white-space:nowrap}
[data-design="terminal"] .ghost{transform:translate(-50%,-50%);font-family:"IBM Plex Mono",monospace}
[data-design="abyss"] .ghost{transform:translate(-50%,-50%)}
[data-design="candy"] .ghost{transform:translate(-50%,-50%) rotate(4deg)}

.scanlines{display:none;position:fixed;inset:0;z-index:6;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);}
[data-design="terminal"] .scanlines{display:block}
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:var(--grain-op);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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ============ TOPBAR ============ */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(10px);border-bottom:var(--bw) solid var(--line)}
.logo{font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:15px;letter-spacing:.02em;
  background:var(--ink);color:var(--bg);padding:7px 12px;transform:rotate(-1.5deg);box-shadow:var(--hard-sm);border-radius:4px}
[data-design="terminal"] .logo{background:transparent;color:var(--acid);border:1px solid var(--acid);box-shadow:0 0 12px rgba(51,255,102,.3);transform:none}
[data-design="abyss"] .logo{background:rgba(255,255,255,.06);color:var(--ink);border:1px solid var(--line);box-shadow:none;transform:none;border-radius:999px;backdrop-filter:blur(12px)}
[data-design="candy"] .logo{background:var(--ink);color:#fff;transform:rotate(-2deg);border-radius:12px}
.logo-sub{opacity:.6;font-weight:400}
.top-right{display:flex;align-items:center;gap:12px}
.clock{border:var(--bw) solid var(--line);padding:7px 10px;background:var(--paper);transform:rotate(1deg);border-radius:6px}
[data-design="terminal"] .clock{transform:none;box-shadow:0 0 12px rgba(51,255,102,.2)}
.clock{border-radius:6px}
[data-design="abyss"] .clock{transform:none;border-radius:999px;background:rgba(255,255,255,.06);backdrop-filter:blur(12px)}
[data-design="candy"] .clock{border-radius:12px}

/* brush button */
.theme-btn{width:44px;height:44px;border-radius:var(--r-btn);cursor:pointer;display:grid;place-items:center;
  background:var(--acid);color:var(--acid-ink);border:var(--bw) solid var(--line);box-shadow:var(--hard-sm);
  transition:transform .25s}
.theme-btn:hover{transform:rotate(-8deg) scale(1.06)}
.theme-btn:active{transform:translate(2px,2px)}
[data-design="terminal"] .theme-btn{background:#031003;color:var(--acid);box-shadow:0 0 14px rgba(51,255,102,.35)}
[data-design="abyss"] .theme-btn{background:rgba(94,234,212,.14);color:var(--acid);backdrop-filter:blur(12px);box-shadow:0 0 18px rgba(94,234,212,.25)}

/* fullscreen design screen */
.design-screen{position:fixed;inset:0;z-index:100;overflow:auto;display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  animation:fadein .25s ease}
.design-screen[hidden]{display:none}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.screen-inner{max-width:1100px;margin:auto;padding:26px 18px 44px;width:100%}
.screen-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.menu-title{margin:0;opacity:.75}
.screen-close{width:46px;height:46px;flex-shrink:0;border-radius:var(--r-btn);cursor:pointer;
  background:var(--acid);color:var(--acid-ink);border:var(--bw) solid var(--line);
  box-shadow:var(--hard-sm);font-size:18px;line-height:1;transition:transform .25s}
.screen-close:hover{transform:rotate(90deg)}
.menu-hint{margin:16px 4px 0;opacity:.5;text-align:center}
.design-list{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:1100px){.design-list{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
@media (max-width:560px){.design-list{grid-template-columns:repeat(2,1fr);gap:12px}}
.pv-card{position:relative;display:grid;gap:12px;align-content:start;cursor:pointer;color:var(--ink);
  background:transparent;
  border:2px solid transparent;
  border-radius:20px;padding:14px;text-align:left;font:inherit;
  transition:transform .16s,border-color .16s;
  animation:cardin .45s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes cardin{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.pv-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ink) 45%,transparent)}
.pv-card.active{border-color:var(--acid)}
.pv-screen{display:grid;gap:10px;align-content:start;min-height:220px;
  background:var(--pv-bg);border-radius:var(--pv-r);padding:16px}
.pv-top{display:flex;gap:8px;align-items:center}
.pv-ava{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--pv-accent)}
.pv-lines{flex:1;display:grid;gap:5px}
.pv-lines b{display:block;height:8px;border-radius:4px;background:var(--pv-ink);opacity:.9}
.pv-lines b.sh{width:55%;opacity:.45}
.pv-title{font-family:var(--pv-font);font-weight:800;font-size:30px;line-height:1.1;color:var(--pv-ink);letter-spacing:-.01em;margin-top:2px}
.pv-bar{display:block;height:22px;border-radius:calc(var(--pv-r)/2.5 + 3px);border:2px solid color-mix(in srgb,var(--pv-ink) 55%,transparent)}
.pv-bar.hot{background:var(--pv-accent);border-color:transparent}
.pv-meta strong{display:block;font-size:16px;font-weight:800}
.pv-meta small{display:block;font-family:"IBM Plex Mono",monospace;font-size:12px;opacity:.6;margin-top:2px}
.pv-check{position:absolute;top:20px;right:20px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-size:16px;font-weight:900;
  background:var(--acid);color:var(--acid-ink);opacity:0;transform:scale(.5);transition:all .2s}
.pv-card.active .pv-check{opacity:1;transform:scale(1)}

/* ============ TICKER ============ */
.ticker{border-bottom:var(--bw) solid var(--line);background:var(--ticker-bg);color:var(--ticker-ink);overflow:hidden;position:relative;z-index:10}
.ticker-bottom{border-bottom:0;border-top:var(--bw) solid var(--line);margin-top:34px}
.ticker-track{display:flex;width:max-content;animation:marq 18s linear infinite;
  font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:13px;letter-spacing:.08em;padding:9px 0}
.ticker-track.rev{animation-direction:reverse}
@keyframes marq{to{transform:translateX(-50%)}}
[data-design="abyss"] .ticker-track{animation-duration:30s}
[data-design="terminal"] .ticker-track{color:var(--acid);text-shadow:0 0 8px rgba(51,255,102,.6)}
[data-design="candy"] .ticker{transform:rotate(-.6deg)}

/* ============ LAYOUT ============ */
.wrap{position:relative;z-index:5;max-width:640px;margin:0 auto;padding:30px 18px 10px}
.hero{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start;
  background:var(--paper);border:var(--bw) solid var(--line);box-shadow:var(--card-shadow);
  padding:22px 20px;transform:rotate(-.6deg);border-radius:var(--r-card)}
[data-design="terminal"] .hero{transform:none}
[data-design="abyss"] .hero{transform:none;backdrop-filter:blur(20px)}
[data-design="candy"] .hero{transform:rotate(.6deg)}
.hero-left{display:grid;gap:10px;justify-items:center}
.avatar-block{position:relative;width:132px;height:132px;transform:rotate(-3deg)}
[data-design="terminal"] .avatar-block,[data-design="abyss"] .avatar-block{transform:none}
[data-design="candy"] .avatar-block{transform:rotate(3deg)}
.avatar{width:132px;height:132px;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:44px;
  color:var(--acid);background:#1B1B1D;border:var(--bw) solid var(--line)}
img.avatar{display:block;object-fit:cover;padding:0}
[data-design="terminal"] .avatar{background:#031003;color:var(--acid);border-radius:var(--r-card);text-shadow:0 0 12px var(--acid)}
[data-design="abyss"] .avatar{background:linear-gradient(145deg,#0E2233,#0A3D37);border-radius:50%;box-shadow:0 0 28px rgba(94,234,212,.35)}
[data-design="candy"] .avatar{background:#2B2145;color:#FFC7EC;border-radius:38% 62% 55% 45%/45% 40% 60% 55%}
.tape{position:absolute;width:64px;height:20px;background:var(--tape);opacity:.9;top:-10px;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.tape-tl{left:-16px;transform:rotate(-38deg)}
.tape-tr{right:-16px;transform:rotate(38deg)}
[data-design="terminal"] .tape,[data-design="abyss"] .tape{display:none}
.stamp{position:absolute;right:-24px;bottom:-18px;width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;text-align:center;
  font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:11px;line-height:1.2;
  color:var(--red);border:2.5px solid var(--red);transform:rotate(12deg);
  background:color-mix(in srgb,var(--paper) 60%,transparent)}
[data-design="terminal"] .stamp,[data-design="abyss"] .stamp{display:none}
.hand{font-family:"Caveat",cursive;font-size:21px;line-height:1;color:var(--red);transform:rotate(-5deg);margin:6px 0 0;text-align:center}
[data-design="terminal"] .hand,[data-design="abyss"] .hand{display:none}
.hand-links{text-align:left;font-size:24px;margin:22px 4px 10px;transform:rotate(-2deg)}
[data-design="candy"] .hand{color:var(--acid)}

.mega{margin:0;line-height:.88;letter-spacing:-.03em}
.row{display:block;font-family:var(--f-display);font-weight:900;font-size:clamp(52px,11vw,78px)}
.row-solid{color:var(--ink)}
[data-design="terminal"] .row{font-weight:700;font-size:clamp(34px,8vw,52px);letter-spacing:0}
[data-design="terminal"] .row-solid{color:var(--acid);text-shadow:0 0 14px rgba(51,255,102,.55)}
[data-design="terminal"] .row-solid::before{content:"> "}
.row-outline{color:transparent;-webkit-text-stroke:2.5px var(--ink)}
[data-design="terminal"] .row-outline{color:transparent;-webkit-text-stroke:1.5px var(--acid)}
.row-outline.glitching{color:var(--acid);-webkit-text-stroke:2.5px var(--acid)}
.sub{margin:14px 0 0;color:var(--muted);font-size:12px;line-height:1.7;max-width:36ch}
[data-design="terminal"] .sub{color:var(--muted)}
[data-design="terminal"] .sub::before{content:"$ "}
.tag{background:var(--red);color:#fff;padding:2px 6px;font-weight:700}
[data-design="abyss"] .tag{border-radius:999px;padding:2px 8px}
.stickers{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
[data-design="abyss"] .stickers{display:none}
.st{font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:11px;letter-spacing:.08em;
  border:var(--bw) solid var(--line);padding:7px 11px;box-shadow:var(--hard-sm)}
.st-acid{background:var(--acid);color:var(--acid-ink);transform:rotate(-2deg)}
.st-ghost{background:transparent;color:var(--ink);transform:rotate(1.5deg)}
.st-red{background:var(--red);color:#fff;border-color:var(--red);transform:rotate(-1deg)}
[data-design="terminal"] .st{transform:none;border-radius:4px;box-shadow:none;background:transparent;color:var(--acid);border-color:var(--acid)}
[data-design="terminal"] .st-red{color:var(--red);border-color:var(--red)}
[data-design="candy"] .st{border-radius:999px}

/* links */
.links{display:grid;gap:12px;margin-top:2px}
.link{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;text-decoration:none;color:var(--ink);
  background:var(--paper);border:var(--bw) solid var(--line);box-shadow:var(--hard);
  padding:14px 10px;transform:rotate(calc(var(--i) * .28deg - .5deg));border-radius:var(--r-link);
  transition:transform .18s,box-shadow .18s,background .18s;
  animation:pop .5s both;animation-delay:calc(var(--i)*60ms)}
.link:nth-child(even){transform:rotate(.5deg)}
[data-design="terminal"] .link,[data-design="terminal"] .link:nth-child(even){transform:none}
[data-design="abyss"] .link,[data-design="abyss"] .link:nth-child(even){transform:none;backdrop-filter:blur(16px);background:rgba(255,255,255,.045)}
[data-design="candy"] .link:nth-child(even){transform:rotate(.7deg)}
.link:hover{transform:translate(-2px,-2px) rotate(0deg);box-shadow:7px 7px 0 var(--acid)}
[data-design="terminal"] .link:hover{box-shadow:0 0 18px rgba(51,255,102,.35);background:rgba(51,255,102,.07)}
[data-design="abyss"] .link:hover{box-shadow:0 0 26px rgba(94,234,212,.22);border-color:var(--acid)}
.link:active{transform:translate(3px,3px)}
.link .num{font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:13px;opacity:.55;text-align:center;
  border-right:2px dashed color-mix(in srgb,var(--ink) 40%,transparent);padding-right:6px}
.link .txt strong{display:block;font-family:var(--f-display);font-weight:800;font-size:16px;letter-spacing:-.01em}
[data-design="terminal"] .link .txt strong{font-family:"IBM Plex Mono",monospace;font-size:14px}
[data-design="terminal"] .link .txt strong::before{content:"> open ";opacity:.6;font-weight:400}
.link .txt small{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:3px;font-family:"IBM Plex Mono",monospace}
.link .arr{font-size:24px;font-weight:900;text-align:center;border:var(--bw) solid var(--line);width:44px;height:44px;
  display:grid;place-items:center;margin-left:auto;background:var(--ink);color:var(--bg);transition:all .18s}
[data-design="abyss"] .link .arr{border-radius:50%}
[data-design="candy"] .link .arr{border-radius:50%}
.link:hover .arr{background:var(--acid);color:var(--acid-ink);transform:rotate(45deg)}
.link.acid{background:var(--acid);color:var(--acid-ink);border-color:var(--acid-ink)}
[data-design="terminal"] .link.acid{border-color:var(--acid)}
[data-design="abyss"] .link.acid{background:linear-gradient(135deg,#5EEAD4,#7DD3FC);border-color:transparent}
.link.acid .txt small{color:color-mix(in srgb,var(--acid-ink) 72%,transparent)}
.link.red{background:var(--red);border-color:var(--red);color:#fff}
[data-design="terminal"] .link.red{background:transparent;border-color:var(--red);color:var(--red)}

@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1}}

/* footer */
.foot{margin-top:24px;border:var(--bw) solid var(--line);background:var(--paper);box-shadow:var(--hard);padding:14px;transform:rotate(.5deg);border-radius:var(--r-card)}
[data-design="terminal"] .foot,[data-design="abyss"] .foot{transform:none}
[data-design="abyss"] .foot{backdrop-filter:blur(16px)}
.barcode{height:44px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 10px);opacity:.9}
.foot-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;color:var(--muted)}
.foot-row .x{color:var(--red);font-weight:700}

@media (max-width:560px){
  .hero{grid-template-columns:1fr;transform:rotate(0)}
  .hero-left{grid-auto-flow:column;align-items:center;gap:16px}
  .hand{text-align:left}
  .ghost{font-size:28vw}
  .clock{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .ticker-track{animation:none}
}

/* превью-карточки: сетка задана выше, в .design-screen */

/* ============ BETON — сырой бетон ============ */
[data-design="beton"] .bg-grid{background-size:44px 44px}
[data-design="beton"] .ghost{font-size:clamp(120px,30vw,340px);transform:translate(-50%,-50%)}
[data-design="beton"] .logo,[data-design="beton"] .clock,[data-design="beton"] .theme-btn{transform:none;border-radius:0}
[data-design="beton"] .ticker-track{font-size:14px}
[data-design="beton"] .hero{transform:none;border-radius:0}
[data-design="beton"] .avatar-block{transform:none}
[data-design="beton"] .avatar{background:#141414;color:#D6D1C5;border-radius:0;filter:grayscale(1) contrast(1.2)}
[data-design="beton"] .tape,[data-design="beton"] .stamp,[data-design="beton"] .hand,[data-design="beton"] .stickers{display:none}
[data-design="beton"] .row{font-size:clamp(60px,13vw,92px);letter-spacing:-.04em}
[data-design="beton"] .row-outline{-webkit-text-stroke:3px var(--ink)}
[data-design="beton"] .sub{font-family:"IBM Plex Mono",monospace}
[data-design="beton"] .link,[data-design="beton"] .link:nth-child(even){transform:none;border-radius:0}
[data-design="beton"] .link .txt strong{font-size:19px;letter-spacing:-.02em;text-transform:uppercase}
[data-design="beton"] .link:hover{box-shadow:8px 8px 0 var(--red);background:var(--ink);color:var(--bg)}
[data-design="beton"] .link:hover .txt small{color:var(--bg);opacity:.7}
[data-design="beton"] .link:hover .num{color:var(--bg)}
[data-design="beton"] .link .arr{border-radius:0}
[data-design="beton"] .link:hover .arr{background:var(--bg);color:var(--ink)}
[data-design="beton"] .link.acid .arr{background:var(--acid-ink);color:var(--acid)}
[data-design="beton"] .foot{transform:none;border-radius:0}

/* ============ NOIR — тихий люкс ============ */
/* GHOUL — dead channel: static, EKG, X-eyes, RGB-split */
[data-design="ghoul"] .bg-grid{background-size:26px 26px;mask-image:none;opacity:.7}
[data-design="ghoul"] .orb{display:none}
[data-design="ghoul"] .scanlines{display:block;opacity:.55}
[data-design="ghoul"] .ghost{transform:translate(-50%,-50%);font-weight:900}
[data-design="ghoul"] .topbar{border-bottom:1px solid rgba(208,0,0,.4)}
[data-design="ghoul"] .logo{background:#000;color:var(--red);border:1px solid var(--red);box-shadow:none;transform:rotate(-1deg);border-radius:0}
[data-design="ghoul"] .logo-sub{color:var(--muted)}
[data-design="ghoul"] .clock{background:#000;color:var(--muted);border:1px solid var(--line);transform:none;border-radius:0}
[data-design="ghoul"] .theme-btn{background:#000;color:var(--red);border-color:var(--red);box-shadow:0 0 14px rgba(208,0,0,.35)}
[data-design="ghoul"] .ticker{border-bottom:1px solid rgba(208,0,0,.4)}
[data-design="ghoul"] .ticker-bottom{border-top:1px solid rgba(208,0,0,.4)}
[data-design="ghoul"] .ticker-track{letter-spacing:.16em}
[data-design="ghoul"] .hero{transform:none;background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:none;border-radius:0;padding:30px 6px 26px;animation:lamp 9s linear infinite}
@keyframes lamp{0%,100%{opacity:1}91%{opacity:1}92%{opacity:.55}93%{opacity:1}96%{opacity:.72}97%{opacity:1}}
[data-design="ghoul"] .avatar-block{transform:none}
[data-design="ghoul"] .avatar{background:#000;color:var(--red);border-radius:50%;border:2px solid var(--red);box-shadow:0 0 0 4px #000,0 0 30px rgba(208,0,0,.5)}
[data-design="ghoul"] .tape,[data-design="ghoul"] .hand,[data-design="ghoul"] .stickers{display:none}
[data-design="ghoul"] .stamp{border-color:var(--red);color:var(--red)}
[data-design="ghoul"] .row{font-size:clamp(54px,12vw,84px)}
[data-design="ghoul"] .row-solid{color:var(--ink);text-shadow:2px 0 0 rgba(208,0,0,.85),-2px 0 0 rgba(0,180,190,.45)}
[data-design="ghoul"] .row-outline{-webkit-text-stroke:1.5px var(--muted)}
[data-design="ghoul"] .row-outline.glitching{color:var(--red);-webkit-text-stroke:1.5px var(--red)}
[data-design="ghoul"] .sub{color:var(--muted)}
[data-design="ghoul"] .sub::before{content:"# ";color:var(--red)}
[data-design="ghoul"] .tag{background:transparent;color:var(--red);border:1px solid var(--red)}
[data-design="ghoul"] .wrap::before{content:"dead inside — signal lost — 死";position:absolute;left:-64px;top:30px;writing-mode:vertical-rl;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.4em;color:rgba(208,0,0,.6);pointer-events:none}
[data-design="ghoul"] .hand-links{display:block;height:36px;margin:20px 4px 14px;font-size:0;color:transparent;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40'%3E%3Cpath d='M0 20 H118 l7 -7 7 7 H178 l7 -20 9 34 8 -14 H300' fill='none' stroke='%23D00000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.9}
[data-design="ghoul"] .links{gap:8px}
[data-design="ghoul"] .link,[data-design="ghoul"] .link:nth-child(even){transform:none;background:transparent;border:1px solid var(--line);box-shadow:none;border-radius:0;padding:14px 12px}
[data-design="ghoul"] .link .num{color:var(--muted);font-size:13px;border-color:rgba(217,214,209,.25)}
[data-design="ghoul"] .link .txt strong{font-size:16px;letter-spacing:.06em;font-weight:700}
[data-design="ghoul"] .link .arr{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:50%}
[data-design="ghoul"] .link:hover{background:var(--ink);border-color:var(--ink);box-shadow:none;animation:deadshake .22s linear infinite}
[data-design="ghoul"] .link:hover .txt strong{color:#000}
[data-design="ghoul"] .link:hover .txt small{color:#333}
[data-design="ghoul"] .link:hover .num{color:#000;border-color:rgba(0,0,0,.3)}
[data-design="ghoul"] .link:hover .arr{background:#000;color:var(--ink);border-color:#000}
@keyframes deadshake{0%,100%{transform:translate(0)}25%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,1px)}}
[data-design="ghoul"] .link.acid{background:var(--ink);border-color:var(--ink);color:#000}
[data-design="ghoul"] .link.acid .txt strong{color:#000}
[data-design="ghoul"] .link.acid .txt small{color:#333}
[data-design="ghoul"] .link.acid .num{color:#000;border-color:rgba(0,0,0,.3)}
[data-design="ghoul"] .link.acid .arr{background:#000;color:var(--ink);border-color:#000}
[data-design="ghoul"] .link.red{background:transparent;border:1px dashed var(--red);color:var(--ink)}
[data-design="ghoul"] .link.red .txt strong{color:var(--red)}
[data-design="ghoul"] .foot{background:#000;border:1px solid var(--line);box-shadow:none;transform:none;border-radius:0}
[data-design="ghoul"] .foot .x{color:var(--muted)}
[data-design="ghoul"] .foot-row::after{content:"NO SIGNAL";font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.25em;color:var(--red);margin-left:auto;animation:pixelblink 1.4s steps(2) infinite}
@media (max-width:820px){[data-design="ghoul"] .wrap::before{display:none}}

/* ============ RAVE — неон ============ */
[data-design="rave"] .orb{display:block}
[data-design="rave"] .orb-a{background:#FF2BD6}
[data-design="rave"] .orb-b{background:#00E5FF}
[data-design="rave"] .ghost{transform:translate(-50%,-50%) rotate(-4deg)}
[data-design="rave"] .ticker-track{animation-duration:8s;font-size:14px}
[data-design="rave"] .logo{transform:rotate(1.5deg);background:#0A0A00;color:var(--acid);border-color:var(--acid)}
[data-design="rave"] .clock{transform:rotate(-1deg);background:#0A0A00;color:var(--acid);border-color:var(--acid)}
[data-design="rave"] .theme-btn{background:var(--red);color:#0A0A00;border-color:var(--red)}
[data-design="rave"] .hero{transform:rotate(.8deg);background:rgba(16,10,24,.86);backdrop-filter:blur(14px)}
[data-design="rave"] .avatar{background:#0A0A00;color:var(--acid);border-color:var(--acid);box-shadow:0 0 22px rgba(212,255,0,.5)}
[data-design="rave"] .row{transform:skewX(-4deg)}
[data-design="rave"] .row-solid{color:#fff;text-shadow:3px 3px 0 var(--red),-2px -2px 0 #00E5FF}
[data-design="rave"] .row-outline{-webkit-text-stroke:2px #00E5FF}
[data-design="rave"] .row-outline.glitching{color:var(--acid);-webkit-text-stroke:2px var(--acid)}
[data-design="rave"] .tag{background:var(--red);color:#0A0A00;animation:raveblink 1.1s steps(2) infinite}
@keyframes raveblink{50%{opacity:.5}}
[data-design="rave"] .st{border-radius:999px}
[data-design="rave"] .link{background:rgba(16,10,24,.92)}
[data-design="rave"] .link:hover{box-shadow:0 0 24px rgba(255,43,214,.5);border-color:var(--acid);background:rgba(212,255,0,.07)}
[data-design="rave"] .link .arr{border-radius:50%}
[data-design="rave"] .link.acid{background:var(--acid);border-color:var(--acid);box-shadow:0 0 26px rgba(212,255,0,.45)}
[data-design="rave"] .link.red{background:var(--red);border-color:var(--red);color:#0A0A00}
[data-design="rave"] .link.red .txt small{color:rgba(0,0,0,.65)}
[data-design="rave"] .link.red .arr{background:#0A0A00;color:var(--red);border-color:#0A0A00}
[data-design="rave"] .foot{transform:rotate(-.5deg);background:rgba(16,10,24,.92)}

/* ============ PIXEL — 8 бит ============ */
[data-design="pixel"] .bg-grid{background-size:24px 24px}
[data-design="pixel"] .ghost{font-family:"Rubik Mono One",monospace;font-weight:400}
[data-design="pixel"] .logo,[data-design="pixel"] .clock,[data-design="pixel"] .theme-btn{transform:none;border-radius:0}
[data-design="pixel"] .logo{background:var(--acid);color:var(--acid-ink)}
[data-design="pixel"] .clock::after{content:" ▮";animation:pixelblink 1s steps(2) infinite}
[data-design="pixel"] .ticker-track{font-size:14px}
[data-design="pixel"] .hero{transform:none;border-radius:0;
  clip-path:polygon(0 12px,12px 12px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 12px),0 calc(100% - 12px));
  filter:drop-shadow(6px 6px 0 rgba(0,0,0,.55))}
[data-design="pixel"] .avatar-block{transform:none}
[data-design="pixel"] .avatar{background:#0D0A24;color:var(--acid);border-radius:0}
[data-design="pixel"] .tape,[data-design="pixel"] .stamp,[data-design="pixel"] .hand{display:none}
[data-design="pixel"] .row{font-family:"Rubik Mono One",monospace;font-weight:400;font-size:clamp(32px,8vw,52px);letter-spacing:0}
[data-design="pixel"] .row-solid{text-shadow:4px 4px 0 var(--red)}
[data-design="pixel"] .row-outline{-webkit-text-stroke:2px var(--acid)}
[data-design="pixel"] .sub::before{content:"▶ "}
[data-design="pixel"] .tag{animation:pixelblink 1s steps(2) infinite}
@keyframes pixelblink{50%{opacity:0}}
[data-design="pixel"] .st{transform:none;border-radius:0;box-shadow:none;background:transparent;color:var(--acid);border-color:var(--acid)}
[data-design="pixel"] .st-red{color:var(--red);border-color:var(--red)}
[data-design="pixel"] .link,[data-design="pixel"] .link:nth-child(even){transform:none;border-radius:0;
  clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px));
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.55))}
[data-design="pixel"] .link:hover{filter:drop-shadow(6px 6px 0 var(--red));background:color-mix(in srgb,var(--paper) 70%,var(--acid) 14%)}
[data-design="pixel"] .link .txt strong{font-family:"Rubik Mono One",monospace;font-weight:400;font-size:13px}
[data-design="pixel"] .link .arr{border-radius:0}
[data-design="pixel"] .link.acid{background:var(--acid)}
[data-design="pixel"] .link.red{background:var(--red);border-color:var(--red)}
[data-design="pixel"] .foot{transform:none;border-radius:0;filter:drop-shadow(6px 6px 0 rgba(0,0,0,.55))}

/* ============ BLUE — синька ============ */
[data-design="blue"] .bg-grid{background-size:20px 20px}
[data-design="blue"] .ghost{transform:translate(-50%,-50%)}
[data-design="blue"] .topbar{border-bottom-style:dashed}
[data-design="blue"] .logo{background:transparent;color:#fff;border:1px dashed #fff;box-shadow:none;transform:none;border-radius:0}
[data-design="blue"] .clock{background:transparent;transform:none;border:1px dashed #fff;border-radius:0}
[data-design="blue"] .theme-btn{background:transparent;color:#fff;border-style:dashed}
[data-design="blue"] .ticker{border-bottom-style:dashed}
[data-design="blue"] .ticker-bottom{border-top-style:dashed}
[data-design="blue"] .hero{transform:none;background:rgba(10,44,110,.55);backdrop-filter:blur(6px);border-style:dashed}
[data-design="blue"] .avatar-block{transform:none}
[data-design="blue"] .avatar{background:#0A2C6E;color:#fff;border-style:dashed;border-radius:50%;outline:1px dashed rgba(255,255,255,.5);outline-offset:6px}
[data-design="blue"] .tape,[data-design="blue"] .stamp,[data-design="blue"] .hand{display:none}
[data-design="blue"] .row{font-size:clamp(40px,9vw,60px)}
[data-design="blue"] .row-solid{color:#fff}
[data-design="blue"] .row-outline{-webkit-text-stroke:2px #fff}
[data-design="blue"] .sub::before{content:"⎯ "}
[data-design="blue"] .tag{background:var(--red);color:#0E3A8F}
[data-design="blue"] .stickers .st{transform:none;border-radius:0;box-shadow:none;background:transparent;color:#fff;border:1px dashed #fff}
[data-design="blue"] .stickers .st-acid{background:#fff;color:#0E3A8F;border-style:solid}
[data-design="blue"] .stickers .st-red{color:var(--red);border-color:var(--red)}
[data-design="blue"] .link,[data-design="blue"] .link:nth-child(even){transform:none;background:transparent;border:1.5px dashed var(--line)}
[data-design="blue"] .link .num{border-right:1px dashed rgba(255,255,255,.5)}
[data-design="blue"] .link:hover{background:rgba(255,255,255,.12);box-shadow:none;border-style:solid}
[data-design="blue"] .link .arr{background:transparent;color:#fff;border:1px dashed #fff}
[data-design="blue"] .link:hover .arr{background:#fff;color:#0E3A8F;border-style:solid}
[data-design="blue"] .link.acid{background:#fff;color:#0E3A8F;border:1.5px solid #fff}
[data-design="blue"] .link.acid .txt small{color:#3A5BA8}
[data-design="blue"] .link.acid .arr{background:#0E3A8F;color:#fff;border-color:#0E3A8F}
[data-design="blue"] .link.red{background:transparent;border:1.5px dashed var(--red);color:var(--red)}
[data-design="blue"] .link.red .txt small{color:var(--muted)}
[data-design="blue"] .link.red .arr{background:transparent;border:1px dashed var(--red);color:var(--red)}
[data-design="blue"] .foot{transform:none;background:rgba(10,44,110,.55);border-style:dashed}

/* ============ POSTER — красный плакат ============ */
[data-design="poster"] .ghost{transform:translate(-50%,-50%) rotate(-6deg);font-family:"Rubik Mono One",monospace;font-weight:400}
[data-design="poster"] .logo{background:var(--ink);color:var(--bg);transform:rotate(1.5deg);border-radius:0;box-shadow:3px 3px 0 var(--bg)}
[data-design="poster"] .clock{background:var(--ink);color:var(--bg);transform:rotate(-1deg);border-radius:0}
[data-design="poster"] .theme-btn{background:var(--ink);color:var(--bg);border-radius:0}
[data-design="poster"] .ticker{transform:rotate(.5deg)}
[data-design="poster"] .ticker-bottom{transform:rotate(-.5deg);margin-top:40px}
[data-design="poster"] .hero{transform:rotate(-1.2deg);border-radius:0}
[data-design="poster"] .avatar{background:var(--ink);color:var(--bg);border-radius:0}
[data-design="poster"] .hand{color:var(--ink)}
[data-design="poster"] .row{font-family:"Rubik Mono One",monospace;font-weight:400;font-size:clamp(36px,9vw,60px);letter-spacing:0}
[data-design="poster"] .row-solid{text-shadow:4px 4px 0 #C1271B}
[data-design="poster"] .row-outline{-webkit-text-stroke:2px var(--ink)}
[data-design="poster"] .tag{background:var(--bg);color:var(--ink)}
[data-design="poster"] .st{border-radius:0}
[data-design="poster"] .st-acid{background:var(--bg);color:var(--ink);border-color:var(--bg)}
[data-design="poster"] .st-red{background:var(--ink);color:var(--bg);border-color:var(--ink)}
[data-design="poster"] .link,[data-design="poster"] .link:nth-child(even){transform:rotate(-.4deg)}
[data-design="poster"] .link:nth-child(even){transform:rotate(.4deg)}
[data-design="poster"] .link .txt strong{font-family:"Rubik Mono One",monospace;font-weight:400;font-size:15px}
[data-design="poster"] .link:hover{background:var(--ink);color:var(--bg);box-shadow:7px 7px 0 var(--bg)}
[data-design="poster"] .link:hover .txt small{color:var(--bg)}
[data-design="poster"] .link:hover .num{color:var(--bg);border-color:var(--bg)}
[data-design="poster"] .link .arr{border-radius:0}
[data-design="poster"] .link:hover .arr{background:var(--bg);color:var(--ink);border-color:var(--bg)}
[data-design="poster"] .link.acid{background:var(--bg);color:var(--ink);border-color:var(--ink)}
[data-design="poster"] .link.acid .txt small{color:var(--ink);opacity:.7}
[data-design="poster"] .link.acid .num{border-color:var(--ink)}
[data-design="poster"] .link.acid .arr{background:var(--ink);color:var(--bg);border-color:var(--ink)}
[data-design="poster"] .link.red{background:var(--ink);color:var(--bg);border-color:var(--ink)}
[data-design="poster"] .link.red .txt small{color:var(--bg);opacity:.7}
[data-design="poster"] .link.red .num{border-color:var(--bg)}
[data-design="poster"] .link.red .arr{background:var(--bg);color:var(--ink);border-color:var(--bg)}
[data-design="poster"] .foot{transform:rotate(.8deg);border-radius:0}
[data-design="poster"] .foot .x{color:var(--bg)}

/* ============ RADICAL STRUCTURE: у каждого свой скелет ============ */
/* ширина колонки */
[data-design="terminal"] .wrap{max-width:700px}
[data-design="beton"] .wrap{max-width:740px}
[data-design="ghoul"] .wrap{max-width:520px}
[data-design="rave"] .wrap{max-width:680px}
[data-design="pixel"] .wrap{max-width:620px}
[data-design="blue"] .wrap{max-width:700px}
[data-design="poster"] .wrap{max-width:720px}
[data-design="abyss"] .wrap{max-width:480px}
[data-design="candy"] .wrap{max-width:600px}

/* TERMINAL — компактная консоль */
[data-design="terminal"] .hero{grid-template-columns:64px 1fr;gap:16px;padding:18px;align-items:center}
[data-design="terminal"] .avatar-block,[data-design="terminal"] .avatar{width:64px;height:64px}
[data-design="terminal"] .avatar{font-size:20px}
[data-design="terminal"] .row-outline::after{content:"▮";color:var(--acid);-webkit-text-stroke:0;margin-left:10px;animation:pixelblink 1.1s steps(2) infinite}
[data-design="terminal"] .logo::after{content:" :~$";opacity:.6}
[data-design="terminal"] .link{grid-template-columns:44px 1fr 40px;padding:11px 10px}
[data-design="terminal"] .ticker-bottom,[data-design="terminal"] .foot .barcode{display:none}

/* BETON — плакатная полоса во всю ширину */
[data-design="beton"] .hero{grid-template-columns:1fr;padding:26px 22px}
[data-design="beton"] .hero-left{grid-auto-flow:column;justify-content:start;align-items:center}
[data-design="beton"] .avatar-block,[data-design="beton"] .avatar{width:88px;height:88px}
[data-design="beton"] .avatar{font-size:30px}
[data-design="beton"] .row{font-size:clamp(64px,15vw,108px)}
[data-design="beton"] .ticker-bottom{display:none}
[data-design="beton"] .link{padding:18px 14px}
[data-design="beton"] .link .num{font-size:22px}
[data-design="beton"] .link .arr{width:52px;height:52px}

/* NOIR — узкая центрированная колонна, тишина */
[data-design="ghoul"] .hero{grid-template-columns:1fr;text-align:center;justify-items:center}
[data-design="ghoul"] .hero-left{justify-items:center}
[data-design="ghoul"] .sub{margin-left:auto;margin-right:auto}

/* RAVE — хаос лесенкой */
[data-design="rave"] .hero{grid-template-columns:130px 1fr}
[data-design="rave"] .avatar-block,[data-design="rave"] .avatar{width:110px;height:110px}
[data-design="rave"] .row{font-size:clamp(56px,12vw,84px)}
[data-design="rave"] .links{gap:14px}
[data-design="rave"] .link:nth-child(odd){transform:rotate(-1deg) translateX(-6px)}
[data-design="rave"] .link:nth-child(even){transform:rotate(1deg) translateX(6px)}
[data-design="rave"] .link:hover{transform:translateY(-3px) rotate(0)}
[data-design="rave"] .foot{transform:rotate(.8deg)}

/* PIXEL — HUD + инвентарь 2 в ряд */
[data-design="pixel"] .logo::after{content:" [LVL 99]";color:var(--acid)}
[data-design="pixel"] .hero{grid-template-columns:1fr;text-align:center;justify-items:center;padding:26px 18px}
[data-design="pixel"] .hero-left{justify-items:center}
[data-design="pixel"] .avatar-block,[data-design="pixel"] .avatar{width:104px;height:104px}
[data-design="pixel"] .links{grid-template-columns:1fr 1fr;gap:14px}
[data-design="pixel"] .link{grid-template-columns:1fr;padding:14px 12px;text-align:center;justify-items:center;gap:8px}
[data-design="pixel"] .link .num{border:0;padding:0;font-size:12px}
[data-design="pixel"] .link .txt small{display:none}
[data-design="pixel"] .link .arr{display:none}
[data-design="pixel"] .link.red{grid-column:1/-1}
[data-design="pixel"] .link:last-child{grid-column:1/-1}
[data-design="pixel"] .ticker-bottom{display:none}
[data-design="pixel"] .foot{text-align:center}
[data-design="pixel"] .foot-row{justify-content:center}

/* BLUE — чертёж: аватар справа, двойная рамка */
[data-design="blue"] .hero{grid-template-columns:1fr 132px;outline:1px dashed rgba(255,255,255,.5);outline-offset:6px}
[data-design="blue"] .hero-left{order:2}
[data-design="blue"] .avatar-block,[data-design="blue"] .avatar{width:104px;height:104px}
[data-design="blue"] .link .num::before{content:"A-"}
[data-design="blue"] .logo::after{content:" · A-01 / 1:50";opacity:.7}
[data-design="blue"] .foot{outline:1px dashed rgba(255,255,255,.5);outline-offset:6px}

/* POSTER — агитация: всё огромное */
[data-design="poster"] .hero{grid-template-columns:150px 1fr;padding:26px 22px}
[data-design="poster"] .avatar-block,[data-design="poster"] .avatar{width:150px;height:150px}
[data-design="poster"] .avatar{font-size:52px}
[data-design="poster"] .row{font-size:clamp(48px,12vw,86px)}
[data-design="poster"] .links{gap:14px}
[data-design="poster"] .link{padding:18px 14px}
[data-design="poster"] .link:nth-child(odd){transform:rotate(-.8deg)}
[data-design="poster"] .link:nth-child(even){transform:rotate(.8deg)}
[data-design="poster"] .link .num{font-size:18px}
[data-design="poster"] .link .txt strong{font-size:19px}
[data-design="poster"] .link .arr{width:54px;height:54px;font-size:28px}
[data-design="poster"] .logo::after{content:" ★"}

/* ABYSS — спокойный центр */
[data-design="abyss"] .ticker{display:none}
[data-design="abyss"] .hero{grid-template-columns:1fr;text-align:center;justify-items:center;padding:34px 24px}
[data-design="abyss"] .avatar-block,[data-design="abyss"] .avatar{width:120px;height:120px}
[data-design="abyss"] .avatar{font-size:40px}
[data-design="abyss"] .sub{margin-left:auto;margin-right:auto}
[data-design="abyss"] .foot{text-align:center}
[data-design="abyss"] .foot .barcode{display:none}
[data-design="abyss"] .foot-row{justify-content:center}

/* CANDY — аватар справа, кнопки вразлёт */
[data-design="candy"] .hero{grid-template-columns:1fr 150px}
[data-design="candy"] .hero-left{order:2}
[data-design="candy"] .links{gap:14px}
[data-design="candy"] .link:nth-child(odd){transform:rotate(-1deg) translateX(-8px)}
[data-design="candy"] .link:nth-child(even){transform:rotate(1deg) translateX(8px)}
[data-design="candy"] .link:hover{transform:translateY(-3px) rotate(0)}
[data-design="candy"] .foot{transform:rotate(-.8deg)}

/* мобилки: двухколоночные герои схлопываются */
@media (max-width:560px){
  [data-design="blue"] .hero,[data-design="candy"] .hero{grid-template-columns:1fr}
  [data-design="blue"] .hero-left,[data-design="candy"] .hero-left{order:0}
  [data-design="pixel"] .links{grid-template-columns:1fr}
  [data-design="terminal"] .hero{grid-template-columns:56px 1fr}
  [data-design="ghoul"] .hero{padding:26px 18px}
}

/* ============ TRACKS PLAYER — в стиле текущей темы ============ */
.tracks-screen{position:fixed;inset:0;z-index:110;overflow:auto;display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:fadein .25s ease}
.tracks-screen[hidden]{display:none}
.tracks-inner{max-width:580px}
.tracks-list{display:grid;gap:10px}
.tr-row{position:relative;display:grid;grid-template-columns:56px 1fr 46px;gap:12px;align-items:center;width:100%;
  cursor:pointer;color:var(--ink);font:inherit;text-align:left;
  background:color-mix(in srgb,var(--paper) 60%,transparent);
  border:2px solid color-mix(in srgb,var(--ink) 18%,transparent);
  border-radius:var(--r-link,14px);padding:10px;overflow:hidden;
  transition:transform .15s,border-color .15s;
  animation:cardin .45s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*60ms)}
.tr-row:hover{transform:translateY(-2px);border-color:var(--acid)}
.tr-row.playing{border-color:var(--acid)}
.tr-cover{position:relative;width:56px;height:56px;border-radius:10px;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,hsl(var(--tile-h,280) 70% 55%),hsl(calc(var(--tile-h,280) + 45) 70% 38%));
  display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:24px;color:rgba(255,255,255,.92)}
.tr-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tr-meta{min-width:0}
.tr-meta strong{display:block;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-meta strong .eq{display:none}
.tr-row.playing .tr-meta strong .eq{display:inline-flex}
.tr-meta small{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;opacity:.6;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-meta .dur{opacity:.45}
.tr-play{width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:transparent;color:var(--ink);
  font-size:13px;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.tr-row.playing .tr-play{background:var(--acid);border-color:var(--acid);color:var(--acid-ink)}
.tr-seek{position:absolute;left:0;right:0;bottom:0;height:16px;display:flex;align-items:flex-end;cursor:pointer;touch-action:none}
.tr-prog{display:block;height:3px;width:0%;background:var(--acid);transition:width .25s linear}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px;margin-left:8px;vertical-align:baseline}
.eq i{width:3px;height:4px;background:var(--acid)}
.tr-row.playing .eq i{animation:eqb .7s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.15s}
.eq i:nth-child(3){animation-delay:.3s}
.eq i:nth-child(4){animation-delay:.45s}
@keyframes eqb{0%,100%{height:4px}50%{height:12px}}

/* ============ DESIGN MENU UPGRADE ============ */
.design-screen{background-image:radial-gradient(65% 42% at 50% 0%,color-mix(in srgb,var(--acid) 16%,transparent),transparent 70%)}
.screen-head{border-bottom:2px solid color-mix(in srgb,var(--ink) 22%,transparent);padding-bottom:14px}
.design-screen .menu-title{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,4.6vw,42px);letter-spacing:-.02em;text-transform:none;opacity:1;line-height:1}
.menu-hint{opacity:.55}
.pv-card:hover{box-shadow:0 14px 44px color-mix(in srgb,var(--acid) 28%,transparent)}
.pv-card.active{box-shadow:0 14px 44px color-mix(in srgb,var(--acid) 35%,transparent)}
.pv-screen{overflow:hidden}
.pv-tick{display:block;height:12px;margin:-16px -16px 0;background:var(--pv-accent)}
.pv-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pv-meta strong{font-family:var(--f-display);font-weight:800;font-size:15px;letter-spacing:-.01em}
.pv-no{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:11px;opacity:.5}

/* ============ PLAYER: громкость + живой эквалайзер ============ */
.vol-row{display:flex;align-items:center;gap:12px;margin:16px 4px 0;padding:12px 14px;
  border:2px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:var(--r-link,14px);
  background:color-mix(in srgb,var(--paper) 60%,transparent)}
.vol-ico{font-size:16px;color:var(--acid);line-height:1}
#vol{flex:1;appearance:none;-webkit-appearance:none;height:4px;border-radius:2px;outline:none;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 25%,transparent)}
#vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--acid);border:2px solid var(--acid-ink);cursor:pointer}
#vol::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--acid);border:2px solid var(--acid-ink);cursor:pointer}
#vol::-moz-range-track{height:4px;border-radius:2px;background:color-mix(in srgb,var(--ink) 25%,transparent)}
.vol-val{font-size:11px;min-width:30px;text-align:right;opacity:.7}
.tr-row.live .eq i{animation:none}