:root{
  --bg:#0a0a0e;
  --surface:#15151c;
  --surface-2:#1d1d26;
  --line:#2a2a36;
  --text:#ededf2;
  --muted:#8e8e9e;
  --accent:#ffd93d;
  --radius:20px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font:inherit;color:inherit}

/* Пятно подсветки в цвет активной колоды — единственный «эффект» в интерфейсе */
.glow{
  position:fixed; inset:-30% -10% auto -10%; height:70vh; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);
  transition:background 900ms var(--ease);
}

.screen{position:relative; z-index:1; max-width:860px; margin:0 auto; padding:clamp(24px,5vw,56px) 20px 40px}
.screen[hidden]{display:none}

/* ─── Главная ─── */
.hero{padding:clamp(20px,7vw,64px) 0 clamp(28px,5vw,44px)}
.eyebrow{
  margin:0 0 18px; color:var(--muted);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
h1{
  margin:0 0 16px; font-size:clamp(40px,10vw,76px); line-height:.98;
  letter-spacing:-.04em; font-weight:680;
}
.lede{margin:0; max-width:46ch; color:var(--muted); font-size:clamp(15px,2.2vw,18px)}

.decks{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.deck{
  --a:var(--accent);
  position:relative; overflow:hidden; text-align:left; cursor:pointer;
  padding:22px 22px 20px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface);
  transition:border-color .25s,transform .25s var(--ease),background .25s;
}
.deck::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--a);
  opacity:.75; transition:width .25s var(--ease),opacity .25s;
}
.deck:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--a) 45%,var(--line)); background:var(--surface-2)}
.deck:hover::before{width:5px; opacity:1}
.deck h3{margin:0 0 6px; font-size:20px; letter-spacing:-.02em; font-weight:620}
.deck .n{display:block; color:var(--muted); font-size:13px}
.deck .track{display:block; margin-top:16px; height:3px; border-radius:3px; background:var(--line); overflow:hidden}
.deck .track i{display:block; height:100%; background:var(--a); border-radius:3px; transition:width .5s var(--ease)}
.deck .pct{margin-top:8px; display:block; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}

.home-foot{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}

/* ─── Кнопки ─── */
.btn{
  border:1px solid var(--line); background:var(--surface); border-radius:999px;
  padding:13px 24px; cursor:pointer; font-weight:560; letter-spacing:-.01em;
  transition:transform .15s var(--ease),background .2s,border-color .2s,color .2s;
}
.btn:hover{transform:translateY(-2px); background:var(--surface-2)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent}
.btn-quiet{background:transparent; border-color:transparent; color:var(--muted)}
.btn-quiet:hover{color:var(--text); background:var(--surface)}
.btn-reveal{background:var(--accent); border-color:var(--accent); color:#10101a; font-weight:640}
.btn-reveal:hover{background:color-mix(in srgb,var(--accent) 86%,#fff)}
.btn-good{border-color:color-mix(in srgb,#5ddba4 42%,var(--line)); color:#7fe3b8}
.btn-good:hover{background:color-mix(in srgb,#5ddba4 14%,var(--surface))}
.btn-bad{border-color:color-mix(in srgb,#ff7a7a 38%,var(--line)); color:#ff9c9c}
.btn-bad:hover{background:color-mix(in srgb,#ff7a7a 12%,var(--surface))}
.icon-btn{
  width:40px; height:40px; flex:none; border:1px solid var(--line); background:var(--surface);
  border-radius:12px; cursor:pointer; font-size:17px; line-height:1;
  transition:background .2s,transform .15s var(--ease);
}
.icon-btn:hover{background:var(--surface-2); transform:translateX(-2px)}

/* ─── Шапка сессии ─── */
.bar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:clamp(18px,4vw,30px)}
.bar-meta{display:flex; align-items:baseline; gap:10px; margin-right:auto}
.bar-deck{font-weight:600; letter-spacing:-.01em}
.bar-count{color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums}
.progress{flex:1 1 140px; height:3px; border-radius:3px; background:var(--line); overflow:hidden}
.progress i{display:block; height:100%; width:0; background:var(--accent); transition:width .45s var(--ease)}

/* ─── Карточка ─── */
.scene{perspective:1800px}
.card{
  position:relative; height:min(62vh,560px); min-height:340px;
  transform-style:preserve-3d; cursor:pointer; outline:none;
  transition:transform .62s var(--ease);
}
.card.flipped{transform:rotateY(180deg)}
.card.swap{animation:swap .34s var(--ease)}
@keyframes swap{from{opacity:0; transform:translateY(14px) scale(.985)}}

.face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:clamp(24px,4.5vw,40px); display:flex; flex-direction:column;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9);
}
.face-front{align-items:flex-start; justify-content:center; gap:20px}
.face-back{transform:rotateY(180deg); padding-bottom:16px}

.chip{
  padding:5px 12px; border-radius:999px; font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
}
.question{
  margin:0; font-size:clamp(21px,3.6vw,33px); line-height:1.24;
  letter-spacing:-.025em; font-weight:600; text-wrap:balance;
}
.flip-hint{margin-top:auto; color:var(--muted); font-size:12.5px; letter-spacing:.02em}

.answer-scroll{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding-right:12px; margin-right:-6px;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 44px),transparent);
  mask-image:linear-gradient(#000 calc(100% - 44px),transparent);
}
.answer-scroll::-webkit-scrollbar{width:5px}
.answer-scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:5px}
.src{padding-top:10px; color:var(--muted); font-size:11.5px; letter-spacing:.04em}

/* Типографика ответа */
.answer-scroll>*:first-child{margin-top:0}
.answer-scroll p,.answer-scroll li{font-size:15.5px; line-height:1.68; color:#d9d9e3}
.answer-scroll h1,.answer-scroll h2,.answer-scroll h3,.answer-scroll h4{
  margin:1.5em 0 .5em; font-size:16px; letter-spacing:-.01em; color:var(--text);
}
.answer-scroll ul,.answer-scroll ol{padding-left:1.15em}
.answer-scroll li{margin:.3em 0}
.answer-scroll li::marker{color:var(--accent)}
.answer-scroll strong{color:#fff; font-weight:620}
.answer-scroll a{color:var(--accent)}
.answer-scroll code{
  font-family:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,monospace; font-size:.88em;
  background:#0e0e14; border:1px solid var(--line); border-radius:5px; padding:.1em .38em;
}
.answer-scroll pre.code{
  margin:14px 0; padding:14px 16px; overflow-x:auto;
  background:#0c0c11; border:1px solid var(--line); border-radius:12px;
}
.answer-scroll pre.code code{background:none; border:0; padding:0; font-size:13px; line-height:1.6}
.answer-scroll img{max-width:100%; border-radius:10px; border:1px solid var(--line)}
.answer-scroll .tw{overflow-x:auto; margin:14px 0}
.answer-scroll table{width:100%; border-collapse:collapse; font-size:14px}
.answer-scroll th,.answer-scroll td{border:1px solid var(--line); padding:7px 10px; text-align:left}
.answer-scroll th{background:var(--surface-2)}
.answer-scroll blockquote{
  margin:14px 0; padding:2px 0 2px 16px; border-left:2px solid var(--accent); color:var(--muted);
}

/* ─── Управление ─── */
.controls{display:flex; justify-content:center; margin-top:clamp(18px,3.5vw,28px); min-height:50px}
.verdict{display:flex; gap:10px}
.controls [hidden]{display:none!important}

/* ─── Итог ─── */
.done{text-align:center; padding:clamp(40px,12vh,110px) 0}
.done h2{margin:0 0 30px; font-size:clamp(28px,6vw,42px); letter-spacing:-.03em; text-wrap:balance}
.score{display:flex; justify-content:center; gap:44px; margin-bottom:22px}
.score-item b{display:block; font-size:clamp(40px,9vw,60px); letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.score-item:first-child b{color:#7fe3b8}
.score-item:last-child b{color:#ff9c9c}
.score-item span{color:var(--muted); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.done-note{color:var(--muted); margin:0 auto 28px; max-width:40ch}
.done-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

@media (max-width:520px){
  .card{height:min(66vh,520px)}
  .score{gap:30px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important; animation-duration:.01ms!important}
}