/* =========================================================
   Скины «Вектора». Базовый — «Тетрадь» (style.css).
   Каждый скин переопределяет токены и пару характерных деталей.
   Переключается атрибутом <html data-skin="...">.
   ========================================================= */

.brand-mark rect{fill:var(--green)}
.brand-mark path{stroke:var(--on-accent)}

/* ---------- Переключатель стилей ---------- */
.skin-switch{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:5;
  display:flex;align-items:center;gap:6px;padding:6px 8px 6px 14px;
  background:var(--sheet);color:var(--ink);border:var(--border-w) solid var(--line);border-radius:999px;
  box-shadow:0 10px 30px -12px rgba(20,20,60,.35);font-size:13px;font-weight:600;
  backdrop-filter:blur(12px);
}
.skin-switch>span{margin-right:4px}
.skin-switch button{width:30px;height:30px;border-radius:50%;border:2px solid transparent;padding:0;background:var(--sw);background-clip:padding-box;position:relative}
.skin-switch button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--sheet) inset}
.skin-switch button[data-skin="notebook"]{--sw:linear-gradient(135deg,#FAFAF6 50%,#1E7358 50%)}
.skin-switch button[data-skin="orbit"]{--sw:radial-gradient(circle at 30% 30%,#FFB86B 0 18%,#6E4BFF 40%,#0E0B26 75%)}
.skin-switch button[data-skin="pop"]{--sw:conic-gradient(#FF4FA3 0 33%,#FFD23F 0 66%,#3D5BFF 0)}
.skin-switch button[data-skin="pixel"]{--sw:conic-gradient(#2E9E5B 0 25%,#FFC93C 0 50%,#2E9E5B 0 75%,#FFC93C 0);border-radius:4px}
@media (max-width:760px){.skin-switch{position:static;margin:0 16px 16px;justify-content:center;box-shadow:none}main{padding-bottom:0}}

/* место под плавающий переключатель */
main{padding-bottom:64px}

/* Линия маршрута «прорисовывается» при открытии — один общий момент анимации */
.vector .done{stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);animation:draw 1.1s .15s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* =========================================================
   ОРБИТА — ночное небо, маршрут как траектория кометы
   ========================================================= */
[data-skin="orbit"]{
  color-scheme:dark;
  --paper:#0E0B26; --sheet:rgba(34,27,82,.62); --ink:#F3EFFF; --ink-2:#B9B0DE;
  --line:rgba(185,170,255,.2); --green:#B79CFF; --green-dark:#CDB9FF; --green-soft:rgba(183,156,255,.16);
  --marker:#FFB86B; --margin:transparent; --amber-soft:rgba(255,184,107,.13); --amber-ink:#FFCF96;
  --tint:rgba(255,255,255,.08); --dash:rgba(200,190,255,.38); --dash-ink:#B9B0DE; --on-accent:#170F3D;
  --field:rgba(10,8,32,.6); --pie:#FFB86B; --header-bg:rgba(14,11,38,.7); --note-ink:#F2DCC0;
  --done-line:rgba(183,156,255,.5); --done-bg:rgba(183,156,255,.1); --current-line:#FFB86B; --warn-line:#FFB86B;
  --font-display:Unbounded,Onest,system-ui,sans-serif; --radius:16px;
}
[data-skin="orbit"] body{
  background-color:var(--paper);
  background-image:
    radial-gradient(1.2px 1.2px at 20px 30px,rgba(255,255,255,.75),transparent 2px),
    radial-gradient(1px 1px at 120px 80px,rgba(255,255,255,.5),transparent 2px),
    radial-gradient(1.5px 1.5px at 200px 160px,rgba(255,220,180,.7),transparent 2px),
    radial-gradient(1px 1px at 60px 190px,rgba(255,255,255,.45),transparent 2px),
    radial-gradient(60vw 50vh at 85% -5%,rgba(110,75,255,.42),transparent 70%),
    radial-gradient(50vw 45vh at 0% 100%,rgba(40,170,200,.22),transparent 70%),
    radial-gradient(40vw 40vh at 55% 55%,rgba(255,120,170,.10),transparent 70%);
  background-size:240px 240px,240px 240px,240px 240px,240px 240px,auto,auto,auto;
  background-attachment:fixed;
}
[data-skin="orbit"] .sidebar{background:rgba(14,11,38,.55);backdrop-filter:blur(16px)}
[data-skin="orbit"] .sheet,[data-skin="orbit"] .facts,[data-skin="orbit"] .topic{backdrop-filter:blur(14px)}
[data-skin="orbit"] h1{font-weight:700;letter-spacing:-.02em;background:linear-gradient(100deg,#FFFFFF 10%,#D9CCFF 55%,#FFC58F 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-skin="orbit"] .btn-primary{background:linear-gradient(100deg,#B79CFF,#FFB86B);color:var(--on-accent);box-shadow:0 8px 28px -8px rgba(183,156,255,.7)}
[data-skin="orbit"] .btn-primary:hover{filter:brightness(1.08)}
[data-skin="orbit"] .vector .done{filter:drop-shadow(0 0 6px #B79CFF) drop-shadow(0 0 14px rgba(183,156,255,.6))}
[data-skin="orbit"] .vector .head{fill:#FFB86B;filter:drop-shadow(0 0 8px #FFB86B)}
[data-skin="orbit"] .vector .axis{stroke:rgba(185,170,255,.25)}
[data-skin="orbit"] .stop .dot{background:#1B1548}
[data-skin="orbit"] .stop.is-done .dot{background:var(--green);color:var(--on-accent)}
[data-skin="orbit"] .stop.is-current .dot{background:#FFB86B;border-color:#FFE0B8;color:var(--on-accent);box-shadow:0 0 0 6px rgba(255,184,107,.25),0 0 30px 6px rgba(255,184,107,.65)}
[data-skin="orbit"] .stop .label{background:transparent}
[data-skin="orbit"] .stop.is-current .label{background:transparent;color:#FFCF96}
[data-skin="orbit"] .next{border-left:0;background:linear-gradient(120deg,rgba(110,75,255,.35),rgba(34,27,82,.55))}
[data-skin="orbit"] .bar i{background:linear-gradient(90deg,#B79CFF,#FFB86B)}
[data-skin="orbit"] .chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--on-accent)}
[data-skin="orbit"] .week span i.on{background:linear-gradient(180deg,#FFB86B,#B79CFF);box-shadow:0 0 12px rgba(255,184,107,.5)}
[data-skin="orbit"] .avatar{background:linear-gradient(135deg,#FFB86B,#B79CFF);color:var(--on-accent)}
[data-skin="orbit"] .tutor .bubble{background:rgba(183,156,255,.14)}
[data-skin="orbit"] .badge{background:rgba(255,184,107,.15);color:#FFCF96}

/* =========================================================
   СТИКЕРЫ — поп-скетчбук: толстые контуры, жёсткие тени, наклейки
   ========================================================= */
[data-skin="pop"]{
  --paper:#E6F0FF; --sheet:#FFFFFF; --ink:#16123D; --ink-2:#4A4573;
  --line:#16123D; --green:#3D5BFF; --green-dark:#2A43D6; --green-soft:#DDE3FF;
  --marker:#FFD23F; --margin:#FF4FA3; --amber-soft:#FFF0B8; --amber-ink:#5B4500;
  --tint:#EEF0FA; --dash:#8C88B8; --dash-ink:#4A4573; --on-accent:#FFFFFF; --field:#FFFFFF;
  --pie:#FF4FA3; --header-bg:rgba(230,240,255,.92); --note-ink:#3D3200;
  --done-line:#16123D; --done-bg:#D9FFE8; --current-line:#16123D; --warn-line:#FF4FA3;
  --font-display:"Dela Gothic One",Onest,system-ui,sans-serif; --font-body:Rubik,Onest,system-ui,sans-serif;
  --radius:14px; --border-w:2.5px; --shadow:5px 5px 0 var(--ink);
}
[data-skin="pop"] body{background-image:radial-gradient(#B9C9F0 1.6px,transparent 1.8px);background-size:22px 22px}
[data-skin="pop"] .sidebar{border-right:2.5px solid var(--ink)}
[data-skin="pop"] header{border-bottom:2.5px solid var(--ink)}
[data-skin="pop"] footer{border-top:2.5px solid var(--ink)}
[data-skin="pop"] h1{font-weight:400;letter-spacing:-.01em;text-shadow:3px 3px 0 var(--marker)}
[data-skin="pop"] h2,[data-skin="pop"] h3{font-weight:400;letter-spacing:0}
[data-skin="pop"] .facts{border:2.5px solid var(--ink);box-shadow:var(--shadow)}
[data-skin="pop"] .fact+.fact{border-left:2.5px solid var(--ink)}
[data-skin="pop"] .fact:nth-child(1) strong{color:#3D5BFF}
[data-skin="pop"] .fact:nth-child(2) strong{color:#FF4FA3}
[data-skin="pop"] .fact:nth-child(3) strong{color:#E08A00}
[data-skin="pop"] .btn,[data-skin="pop"] .chip{border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .08s,box-shadow .08s}
[data-skin="pop"] .btn:active,[data-skin="pop"] .chip:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
[data-skin="pop"] .btn-primary{background:#FF4FA3;color:#fff}
[data-skin="pop"] .btn-primary:hover{background:#F23893}
[data-skin="pop"] .chip{color:var(--ink)}
[data-skin="pop"] .chip[aria-pressed="true"]{background:var(--marker);color:var(--ink)}
[data-skin="pop"] .topic{border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
[data-skin="pop"] .topic:hover{transform:rotate(-1deg) translateY(-2px)}
[data-skin="pop"] .topic.is-current{background:#FFF6C9;box-shadow:4px 4px 0 #FF4FA3}
[data-skin="pop"] .next{border-left:2.5px solid var(--ink);background:#FFF6C9}
[data-skin="pop"] .note{background:#FFE0F0}
[data-skin="pop"] .note p{color:#4A1033}
[data-skin="pop"] .bar{border:2px solid var(--ink);height:12px;border-radius:7px;background:#fff}
[data-skin="pop"] .bar i{background:repeating-linear-gradient(-45deg,#3D5BFF 0 6px,#5C77FF 6px 12px);border-radius:0}
[data-skin="pop"] .vector .done{stroke:var(--ink);stroke-width:7}
[data-skin="pop"] .vector .todo{stroke:var(--ink);opacity:.45}
[data-skin="pop"] .vector .head{fill:#FF4FA3;stroke:var(--ink);stroke-width:2.5}
[data-skin="pop"] .stop .dot{border:2.5px solid var(--ink);color:var(--ink);background:#fff}
[data-skin="pop"] .stop.is-done .dot{background:#3D5BFF;color:#fff}
[data-skin="pop"] .stop .label{border:2px solid var(--ink);background:#fff;border-radius:8px;padding:3px 8px;box-shadow:2px 2px 0 var(--ink);transform:translateX(-50%) rotate(-3deg)}
[data-skin="pop"] .stop:nth-child(odd) .label{transform:translateX(-50%) rotate(2.5deg)}
[data-skin="pop"] .stop.is-todo .label{border-style:dashed;box-shadow:none;background:rgba(255,255,255,.7)}
[data-skin="pop"] .stop.is-current .label{background:var(--marker)}
[data-skin="pop"] .stop.is-current .dot{background:#FF4FA3;color:#fff;box-shadow:0 0 0 5px var(--marker),0 0 0 7.5px var(--ink)}
[data-skin="pop"] .slice{stroke:var(--ink);stroke-width:2.5}
[data-skin="pop"] .slice.eaten{stroke:var(--ink);stroke-dasharray:5 5}
[data-skin="pop"] .answer input,[data-skin="pop"] .field input,[data-skin="pop"] .field select{border:2.5px solid var(--ink)}
[data-skin="pop"] .feedback{border:2.5px solid var(--ink);background:#D9FFE8}
[data-skin="pop"] .feedback.bad{background:#FFF0B8;border-color:var(--ink)}
[data-skin="pop"] nav button[aria-current="page"]{background:var(--marker);color:var(--ink);border:2px solid var(--ink)}
[data-skin="pop"] .avatar{background:#FF4FA3;color:#fff;border:2.5px solid var(--ink)}
[data-skin="pop"] .badge{background:var(--marker);color:var(--ink);border:2px solid var(--ink)}
[data-skin="pop"] .week span i{border:2px solid var(--ink);background:#fff}
[data-skin="pop"] .week span i.on{background:#FF4FA3}
@media (max-width:760px){[data-skin="pop"] .stop .label,[data-skin="pop"] .stop:nth-child(odd) .label{transform:rotate(-1.5deg)}}

/* =========================================================
   ПИКСЕЛЬ — ретро-игра: пиксельный шрифт в заголовках,
   жёсткие ступенчатые тени, монетки-звёзды, блочные полоски
   ========================================================= */
[data-skin="pixel"]{
  --paper:#E4F2FF; --sheet:#FFFFFF; --ink:#1B1B3A; --ink-2:#45456A;
  --line:#1B1B3A; --green:#2E9E5B; --green-dark:#1E7A42; --green-soft:#D6F5E1;
  --marker:#FFC93C; --margin:#E4572E; --amber-soft:#FFF1C9; --amber-ink:#6B4A00;
  --tint:#E9EEF7; --dash:#8A93B8; --dash-ink:#45456A; --on-accent:#FFFFFF; --field:#FFFFFF;
  --pie:#FFC93C; --header-bg:rgba(228,242,255,.95); --note-ink:#4A3600;
  --done-line:#1B1B3A; --done-bg:#E8FBEF; --current-line:#1B1B3A; --warn-line:#E4572E;
  --font-display:"Press Start 2P",Rubik,system-ui,monospace; --font-body:Rubik,Onest,system-ui,sans-serif;
  --radius:0px; --border-w:3px; --shadow:5px 5px 0 #1B1B3A;
}
[data-skin="pixel"] body{
  background-color:var(--paper);
  background-image:linear-gradient(90deg,rgba(27,27,58,.06) 2px,transparent 2px),linear-gradient(rgba(27,27,58,.06) 2px,transparent 2px);
  background-size:32px 32px;
}
[data-skin="pixel"] h1{font-size:clamp(18px,2.2vw,24px);line-height:1.55;letter-spacing:0;font-weight:400}
[data-skin="pixel"] h2{font-size:15px;line-height:1.6;letter-spacing:0;font-weight:400}
[data-skin="pixel"] .hero-next h2{font-size:18px}
[data-skin="pixel"] h3{font-family:var(--font-body)}
[data-skin="pixel"] .brand{font-size:16px;letter-spacing:0}
[data-skin="pixel"] .fact strong,[data-skin="pixel"] .goal-ring b{font-size:18px;letter-spacing:0}
[data-skin="pixel"] .node-face{font-size:16px;border-radius:0}
[data-skin="pixel"] .node-btn{border-radius:0;background:conic-gradient(var(--green) calc(var(--p) * 1%),var(--tint) 0)}
[data-skin="pixel"] .node.is-current .node-btn{box-shadow:0 0 0 5px var(--marker),5px 5px 0 5px var(--ink)}
[data-skin="pixel"] .node-bubble{border-radius:0;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--font-body)}
[data-skin="pixel"] .node-bubble::after{border-top-color:var(--ink)}
[data-skin="pixel"] .node-label{border:2px solid var(--ink);background:#fff;border-radius:0}
[data-skin="pixel"] .path-line .done{stroke:var(--green);stroke-width:8;stroke-linecap:square}
[data-skin="pixel"] .path-line .todo{stroke:var(--ink);stroke-dasharray:6 8;stroke-width:4;stroke-linecap:square;opacity:.45}
[data-skin="pixel"] .sidebar{border-right:3px solid var(--ink)}
[data-skin="pixel"] header{border-bottom:3px solid var(--ink)}
[data-skin="pixel"] footer{border-top:3px solid var(--ink)}
[data-skin="pixel"] .btn,[data-skin="pixel"] .chip,[data-skin="pixel"] .step,[data-skin="pixel"] .segmented button[aria-pressed="true"]{border:3px solid var(--ink);border-radius:0;box-shadow:3px 3px 0 var(--ink);transition:transform .06s,box-shadow .06s}
[data-skin="pixel"] .btn:active,[data-skin="pixel"] .chip:active,[data-skin="pixel"] .step:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
[data-skin="pixel"] .btn-primary{background:var(--green)}
[data-skin="pixel"] .btn-primary:hover{background:var(--green-dark)}
[data-skin="pixel"] .segmented{border-radius:0;border:3px solid var(--ink);background:var(--tint)}
[data-skin="pixel"] .segmented button{border-radius:0}
[data-skin="pixel"] .step-n,[data-skin="pixel"] .mini-steps li span,[data-skin="pixel"] .avatar{border-radius:0}
[data-skin="pixel"] .facts{border:3px solid var(--ink);box-shadow:var(--shadow)}
[data-skin="pixel"] .fact+.fact{border-left:3px solid var(--ink)}
[data-skin="pixel"] .bar{height:14px;border:3px solid var(--ink);border-radius:0;background:#fff}
[data-skin="pixel"] .bar i{border-radius:0;background:repeating-linear-gradient(90deg,var(--green) 0 10px,#7FD69F 10px 12px)}
[data-skin="pixel"] .goal-ring{border-radius:0;background:conic-gradient(var(--green) calc(var(--p)*1%),var(--tint) 0)}
[data-skin="pixel"] .goal-ring::before{border-radius:0}
[data-skin="pixel"] .frac-input input,[data-skin="pixel"] .num-input input,[data-skin="pixel"] .field input,[data-skin="pixel"] .field select,[data-skin="pixel"] .chat-form input{border:3px solid var(--ink);border-radius:0}
[data-skin="pixel"] .fi-frac i{height:5px;border-radius:0}
[data-skin="pixel"] .msg-body,[data-skin="pixel"] .hint-zone .bubble,[data-skin="pixel"] .do-now,[data-skin="pixel"] .feedback,[data-skin="pixel"] .badge-card,[data-skin="pixel"] .toast,[data-skin="pixel"] .tour-tip{border-radius:0}
[data-skin="pixel"] .msg.assistant .msg-body{border:3px solid var(--ink)}
[data-skin="pixel"] .feedback{border:3px solid var(--ink)}
[data-skin="pixel"] .do-now{border:3px solid var(--ink)}
[data-skin="pixel"] .hud-item{border-radius:0;border:2px solid var(--ink);background:#fff}
[data-skin="pixel"] .hud-stars svg{fill:var(--marker);stroke:var(--ink)}
[data-skin="pixel"] nav button[aria-current="page"]{background:var(--marker);color:var(--ink);border-radius:0;box-shadow:inset 0 0 0 3px var(--ink)}
[data-skin="pixel"] .badge-card.on{border:3px solid var(--ink);background:var(--green-soft)}
[data-skin="pixel"] .slice{stroke:var(--ink);stroke-width:2}
[data-skin="pixel"] .fig-on,[data-skin="pixel"] .fig-off{stroke:var(--ink);stroke-width:2}
[data-skin="pixel"] .tour-hole{border-radius:0}
@media (max-width:760px){[data-skin="pixel"] nav{border-top:3px solid var(--ink)}}

@media (prefers-reduced-motion:reduce){
  .vector .done{animation:none;stroke-dashoffset:0}
  
}
/* на телефоне нижнее меню фиксировано: размытие фона у панели создало бы для него свою систему координат */
@media (max-width:760px){.sidebar{backdrop-filter:none!important;overflow:visible!important}[data-skin="orbit"] .sidebar{background:#120E30}}
@media (max-width:760px){[data-skin="orbit"] nav{background:#120E30}[data-skin="pop"] nav{border-top:2.5px solid var(--ink)}}