@property --ember{syntax:'<angle>';initial-value:0deg;inherits:false}

:root{
  --paper:#EAE7E0;
  --steel-1:#FCFBF8; --steel-2:#EDEAE3; --steel-3:#DCD7CE;
  --brush:rgba(20,16,12,.045);
  --rivet:rgba(20,16,12,.22);
  --bevel-t:rgba(255,255,255,.9); --bevel-b:rgba(20,16,12,.16);
  --ink:#16130F; --soft:#6A635A; --edge:#B9B2A6;
  --spot:#D91E36; --spot-2:#1E5A9E;
  --hard:color-mix(in srgb,var(--spot) 78%,transparent);
  --halo:color-mix(in srgb,var(--spot) 20%,transparent);
  --hair:color-mix(in srgb,var(--ink) 15%,transparent);
  --fire-1:#FF7A18; --fire-2:#FFD166;
  --grain:.065; --blend:multiply; --emberop:.5;
}
html[data-theme="dark"]{
  --paper:#0E0D0C;
  --steel-1:#26231F; --steel-2:#1A1816; --steel-3:#131110;
  --brush:rgba(255,255,255,.035);
  --rivet:rgba(255,255,255,.16);
  --bevel-t:rgba(255,255,255,.12); --bevel-b:rgba(0,0,0,.6);
  --ink:#EFEAE1; --soft:#8B8379; --edge:#3B342D;
  --spot:#FF3B52; --spot-2:#6FB0EE;
  --halo:color-mix(in srgb,var(--spot) 40%,transparent);
  --grain:.04; --blend:screen; --emberop:.85;
}
html[data-theme="red"]{
  --paper:#0A0403;
  --steel-1:#3A0D0C; --steel-2:#210706; --steel-3:#140303;
  --brush:rgba(255,120,80,.06);
  --rivet:rgba(255,140,90,.3);
  --bevel-t:rgba(255,150,110,.22); --bevel-b:rgba(0,0,0,.75);
  --ink:#FFEAE4; --soft:#C08D84; --edge:#6B1414;
  --spot:#FF1130; --spot-2:#FF8A3D;
  --hard:var(--spot);
  --halo:color-mix(in srgb,var(--spot) 62%,transparent);
  --hair:color-mix(in srgb,var(--spot) 30%,transparent);
  --fire-1:#FF3B00; --fire-2:#FFC24A;
  --grain:.05; --blend:screen; --emberop:1;
}
@media (prefers-color-scheme:dark){
  html[data-theme="auto"]{
    --paper:#0E0D0C;
    --steel-1:#26231F; --steel-2:#1A1816; --steel-3:#131110;
    --brush:rgba(255,255,255,.035);
    --rivet:rgba(255,255,255,.16);
    --bevel-t:rgba(255,255,255,.12); --bevel-b:rgba(0,0,0,.6);
    --ink:#EFEAE1; --soft:#8B8379; --edge:#3B342D;
    --spot:#FF3B52; --spot-2:#6FB0EE;
    --halo:color-mix(in srgb,var(--spot) 40%,transparent);
    --grain:.04; --blend:screen; --emberop:.85;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;
  background:radial-gradient(78% 52% at 86% -12%,var(--halo) 0%,transparent 62%),var(--paper);
  color:var(--ink);
  font:400 14px/1.6 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,
       "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
  padding:26px 18px 34px;
  transition:background-color .4s ease,color .4s ease;
}
html[data-theme="red"] body{
  background:
    radial-gradient(92% 58% at 50% -14%,#54080F 0%,transparent 58%),
    radial-gradient(70% 46% at 50% 112%,#3A0508 0%,transparent 60%),
    var(--paper);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:97;
  opacity:var(--grain);mix-blend-mode:var(--blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="red"] body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:98;
  background:repeating-linear-gradient(0deg,rgba(255,20,50,.06) 0 1px,transparent 1px 3px);
}
.wrap{max-width:720px;margin:0 auto;position:relative;z-index:1}

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

/* ── панель ─────────────────────────────────────── */
.panel{
  position:relative;margin-top:18px;padding:22px 24px;border-radius:20px;
  border:1.5px solid var(--edge);
  background:
    radial-gradient(circle at 15px 15px,var(--rivet) 0 2.4px,transparent 3px),
    radial-gradient(circle at calc(100% - 15px) 15px,var(--rivet) 0 2.4px,transparent 3px),
    radial-gradient(circle at 15px calc(100% - 15px),var(--rivet) 0 2.4px,transparent 3px),
    radial-gradient(circle at calc(100% - 15px) calc(100% - 15px),var(--rivet) 0 2.4px,transparent 3px),
    repeating-linear-gradient(96deg,transparent 0 2px,var(--brush) 2px 3px),
    linear-gradient(168deg,var(--steel-1) 0%,var(--steel-2) 52%,var(--steel-3) 100%);
  box-shadow:
    inset 0 1.5px 0 var(--bevel-t),
    inset 0 -2px 0 var(--bevel-b),
    6px 6px 0 var(--hard),
    0 16px 34px -22px #000;
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.panel::after{
  content:"";position:absolute;inset:-1.5px;border-radius:inherit;pointer-events:none;
  padding:1.5px;opacity:var(--emberop);
  background:conic-gradient(from var(--ember),
    transparent 0 58%,
    color-mix(in srgb,var(--fire-1) 70%,transparent) 68%,
    var(--fire-2) 76%, var(--fire-1) 82%, transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.panel:nth-of-type(2)::after{animation-delay:-2.4s}
.panel:nth-of-type(3)::after{animation-delay:-4.1s}

/* ── шапка ──────────────────────────────────────── */
.head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:0;overflow:hidden}
.brand{position:relative;z-index:1;min-width:0}
.kicker{
  display:inline-block;margin:0 0 9px;padding:4px 11px;
  border:1.5px solid var(--spot);border-radius:999px;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--spot);
  box-shadow:0 0 14px var(--halo);
}
.wordmark{
  margin:0;font-family:"Arial Black","Helvetica Neue",Impact,system-ui,sans-serif;
  font-weight:900;font-size:clamp(1.75rem,6vw,2.9rem);line-height:.92;
  letter-spacing:-.03em;text-transform:uppercase;
  text-shadow:3px 3px 0 var(--hard),0 0 26px var(--halo);
}
.wordmark .b{color:var(--spot);text-shadow:3px 3px 0 color-mix(in srgb,var(--ink) 50%,transparent),0 0 24px var(--halo)}
.mark{
  flex:0 0 auto;width:clamp(74px,18vw,104px);color:var(--ink);position:relative;z-index:1;
  transform:rotate(-11deg);
  filter:drop-shadow(4px 5px 0 var(--hard)) drop-shadow(0 0 20px var(--halo));
}
.mark svg{display:block;width:100%;height:auto}

/* ── навигация ──────────────────────────────────── */
.nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;
  border:1.5px solid var(--hair);background:color-mix(in srgb,var(--steel-2) 70%,transparent);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--soft);text-decoration:none;
  transition:border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.chip:hover{border-color:var(--spot);color:var(--spot)}
.chip--on{border-color:var(--spot);color:var(--spot);box-shadow:0 0 16px var(--halo)}

/* ── заголовки и текст ──────────────────────────── */
.eyebrow{
  display:flex;align-items:center;gap:9px;margin:0 0 15px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  text-shadow:2px 2px 0 var(--hard),0 0 16px var(--halo);
}
.eyebrow::before{
  content:"";width:14px;height:3px;border-radius:2px;background:var(--spot);
  transform:skewX(-28deg);box-shadow:0 0 12px var(--halo);flex:0 0 auto;
}
.eyebrow span{color:var(--soft);font-weight:400;letter-spacing:.1em;text-transform:none;font-size:11px;text-shadow:none}
.lead{margin:0;font-size:13.5px;line-height:1.7}

/* ── карточки на главной ────────────────────────── */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.card{
  border:1.5px solid var(--hair);border-radius:15px;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.card a,.card{display:block;color:inherit;text-decoration:none}
.card a{padding:14px 16px}
.card--mute{padding:14px 16px;opacity:.6}
.card:not(.card--mute):hover{border-color:var(--spot);box-shadow:3px 3px 0 color-mix(in srgb,var(--spot) 32%,transparent)}
.card__t{display:block;font-size:13.5px;font-weight:700}
.card__d{display:block;margin-top:6px;font-size:11.5px;color:var(--soft);line-height:1.55}

/* ── анекдоты ───────────────────────────────────── */
.joke{
  border:1.5px solid var(--hair);border-radius:15px;padding:20px;min-height:132px;
  display:flex;align-items:center;
  background:color-mix(in srgb,var(--steel-1) 40%,transparent);
}
.joke__t{margin:0;white-space:pre-line;font-size:14.5px;line-height:1.75}
.joke[data-empty="1"] .joke__t{color:var(--soft);font-size:13px}
.joke.swap .joke__t{animation:swap .34s ease both}
@keyframes swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px}
.count{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--soft)}
.hint{margin:12px 0 0;font-size:11.5px;color:var(--soft);min-height:1.2em}
.hint.err{color:var(--spot)}

/* ── кнопки ─────────────────────────────────────── */
.btn{
  font:inherit;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:12px 17px;cursor:pointer;border-radius:12px;color:var(--paper);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 88%,#fff),var(--ink));
  border:1.5px solid var(--ink);
  transition:transform .1s ease,box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease;
}
.btn--big{padding:14px 24px;font-size:11.5px}
.btn:hover:not(:disabled){background:var(--spot);border-color:var(--spot);color:#fff;box-shadow:0 0 20px var(--halo);transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(1px) scale(.98)}
.btn:disabled{opacity:.45;cursor:default}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--edge)}
.btn--ghost:hover:not(:disabled){background:transparent;color:var(--spot);border-color:var(--spot)}
.btn.done{background:var(--spot);border-color:var(--spot);color:#fff}
.btn:focus-visible,a:focus-visible,.toggle:focus-visible{outline:2px solid var(--spot);outline-offset:3px}

/* ── низ ────────────────────────────────────────── */
.peace{text-align:center;margin:34px 0 6px;color:var(--ink)}
.peace svg{width:clamp(52px,13vw,74px);height:auto;opacity:.45;filter:drop-shadow(0 0 16px var(--halo))}
.peace p{margin:8px 0 0;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--soft)}
.foot{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding:0 6px;
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--soft);
}
.toggle{
  font:inherit;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  background:none;border:1.5px solid var(--hair);color:var(--soft);
  padding:8px 14px;border-radius:999px;cursor:pointer;min-width:104px;
  transition:border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.toggle:hover{border-color:var(--spot);color:var(--spot);box-shadow:0 0 16px var(--halo)}

/* ── смена гаммы ────────────────────────────────── */
.wipe{
  position:fixed;inset:-20% -40%;z-index:250;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 0%,var(--spot) 38%,var(--fire-2) 50%,var(--spot) 62%,transparent 100%);
  transform:translateX(-110%) skewX(-14deg);
}
.wipe.go{animation:sweep .62s cubic-bezier(.45,0,.4,1)}

@media (max-width:470px){
  .panel{padding:19px 16px;border-radius:17px}
  .btn--big{width:100%}
}

@keyframes ember{to{--ember:360deg}}
@keyframes sweep{0%{opacity:1;transform:translateX(-110%) skewX(-14deg)}100%{opacity:1;transform:translateX(110%) skewX(-14deg)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes stamp{from{transform:rotate(-36deg) scale(.76);opacity:0}to{transform:rotate(-11deg) scale(1);opacity:1}}
@keyframes breathe{0%,100%{opacity:.36}50%{opacity:.56}}

@media (prefers-reduced-motion:no-preference){
  .panel::after{animation:ember 9s linear infinite}
  .panel{animation:rise .5s cubic-bezier(.2,.9,.3,1) both}
  .panel:nth-of-type(2){animation-delay:.07s}
  .panel:nth-of-type(3){animation-delay:.14s}
  .mark{animation:stamp .58s cubic-bezier(.2,.9,.3,1.25) both .1s}
  .peace svg{animation:breathe 6s ease-in-out infinite}
}