/* Стиль по референсу: голубой фон, розовые и жёлтые бумажные заметки со скотчем, волнистые края, моноширинный «печатный» текст.
     Заголовки: Cormorant (вместо Anticva), текст: IBM Plex Mono, рукописные подписи: Marck Script.
     Страница намеренно одна светлая тема: это цветная коллажная лаборатория. */
  :root{
    --blue:#5A98D6; --blue-d:#3F78B4; --navy:#1F3B63; --pink:#F6B5CF; --pink-d:#E58DB0; --brick:#E3A8A0;
    --yellow:#FFF27A; --yellow-d:#F2D84A; --cream:#FBF4E6; --mint:#BFE6CF; --sky:#BFD9F2; --ink:#1F3B63; --muted:#4A5F80;
    --good:#1D7A4E; --bad:#B3261E;
    --display:'Anticva','Cormorant','Playfair Display',Georgia,serif;
    --mono:'AA Stetica','IBM Plex Mono','Courier New',monospace;
    --script:'Marck Script','Segoe Script',cursive;
    color-scheme:light;
  }
  *{ box-sizing:border-box; }
  html{ font-size:16px; scroll-behavior:smooth; color-scheme:light; }
  html[data-size="1"]{ font-size:18px; } html[data-size="2"]{ font-size:20px; }
  body{ margin:0; background:var(--blue); color:var(--ink); font-family:var(--mono); font-weight:400; line-height:1.6;
    background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 2px,transparent 2px 7px);
    padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); padding-block:0; overflow-x:hidden; }
  body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:30; background:var(--cream); }
  h1,h2,h3,h4{ overflow-wrap:anywhere; hyphens:auto; font-family:var(--display); font-weight:700; margin:0; text-wrap:balance; line-height:1.05; text-transform:uppercase; letter-spacing:.02em; }
  p{ margin:0 0 .7em; } b,strong{ font-weight:600; }
  a{ color:var(--navy); font-weight:600; text-underline-offset:3px; }
  button{ font:inherit; color:inherit; cursor:pointer; }
  :focus-visible{ outline:3px solid var(--navy); outline-offset:3px; border-radius:8px; }
  .wrap{ max-width:1000px; margin:0 auto; }
  .script{ font-family:var(--script); font-weight:400; text-transform:none; letter-spacing:0; }
  .small{ font-size:.78rem; opacity:.85; }
  .white{ color:#fff; text-shadow:0 2px 0 rgba(31,59,99,.35); }

  /* верх */
  .top{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; background:var(--cream); border-bottom:2px solid var(--navy);
    margin:0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    padding:6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px)); }
  .top .in{ max-width:1000px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
  .brand{ display:flex; align-items:center; gap:6px; font-family:var(--display); font-weight:700; font-size:1.25rem; text-transform:uppercase; background:none; border:0; padding:2px 4px; letter-spacing:.04em; }
  .nav{ display:flex; flex-wrap:wrap; gap:4px; margin-left:auto; }
  .nav button,.tool{ background:none; border:2px solid transparent; border-radius:999px; padding:6px 12px; font-weight:600; font-size:.72rem; min-height:40px; text-transform:uppercase; letter-spacing:.04em; }
  .nav button[aria-current="page"]{ background:var(--yellow); border-color:var(--navy); }
  .nav button:hover,.tool:hover{ border-color:var(--navy); }
  .tool{ border-color:rgba(31,59,99,.25); }
  main{ display:block; padding-bottom:0; }
  #app.enter{ animation:screenIn .6s cubic-bezier(.2,.9,.3,1) both; }
  @keyframes screenIn{ from{ opacity:0; transform:translateY(34px) rotate(.8deg); } to{ opacity:1; transform:none; } }

  /* кнопки и мелочи */
  .btn{ display:inline-flex; align-items:center; gap:8px; justify-content:center; background:var(--yellow); color:var(--blue-d); border:0; border-radius:999px;
    padding:12px 26px; font-weight:600; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; min-height:48px; text-decoration:none; transition:transform .15s, box-shadow .15s;
    box-shadow:0 4px 0 var(--navy); border:2px solid var(--navy); color:var(--navy); }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--navy); }
  .btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--navy); }
  .btn.pink{ background:var(--pink); } .btn.ghost{ background:#fff; } .btn.dark{ background:var(--navy); color:#fff; box-shadow:0 4px 0 rgba(0,0,0,.35); }
  .btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:0 2px 0 var(--navy); }
  .say{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:2px solid var(--navy); border-radius:999px; padding:6px 16px 6px 8px; font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; min-height:40px; }
  .say::before{ content:""; width:24px; height:24px; border-radius:50%; background:var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9v6h3l5 4V5L8 9z' fill='%231F3B63'/%3E%3Cpath d='M16 9a4 4 0 010 6' stroke='%231F3B63' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; }
  .say.on{ background:var(--yellow); } .say.on::before{ animation:pulse 1s infinite; }
  @keyframes pulse{ 50%{ transform:scale(1.25); } }
  .chip{ display:inline-block; font-weight:600; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:4px 11px; border-radius:999px; border:2px solid var(--navy); background:#fff; white-space:nowrap; }
  .chip.ok{ background:var(--mint); } .chip.todo{ background:var(--yellow); } .chip.lock{ background:var(--sky); }

  /* полосы-экраны */
  .band{ --bg:var(--blue); position:relative; background:var(--bg); margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    padding:44px max(16px, env(safe-area-inset-right, 0px)) 44px max(16px, env(safe-area-inset-left, 0px)); }
  .band > .in{ max-width:1000px; margin:0 auto; }
  .band + .band::before{ content:""; position:absolute; left:0; right:0; top:-11px; height:12px; background:radial-gradient(circle at 12px 12px, var(--bg) 11px, transparent 12px) 0 0/24px 12px repeat-x; }
  .b-blue{ --bg:var(--blue); color:#fff; } .b-blue .note,.b-blue .card,.b-blue .fb{ color:var(--navy); }
  .b-pink{ --bg:var(--pink); } .b-yellow{ --bg:var(--yellow); } .b-cream{ --bg:var(--cream); } .b-sky{ --bg:var(--sky); }
  .band h2{ font-size:clamp(1.9rem,6vw,3rem); }
  .band .script{ display:block; font-size:1.3rem; margin:2px 0 16px; }
  .b-blue .script{ color:var(--yellow); }
  .b-pink .script,.b-yellow .script,.b-cream .script,.b-sky .script{ color:#B23F6B; }
  .b-yellow .script{ color:#9A3B1E; }

  /* бумажные заметки */
  .note{ position:relative; color:var(--navy); padding:30px 22px 24px 22px; margin:6px 0; font-size:.94rem; min-width:0;
    clip-path:polygon(0 1.5%,4% 0,9% 1.5%,15% 0,22% 1.5%,30% 0,38% 1.5%,46% 0,55% 1.5%,63% 0,72% 1.5%,80% 0,88% 1.5%,95% 0,100% 1.5%,100% 98.5%,94% 100%,86% 98.5%,77% 100%,68% 98.5%,58% 100%,49% 98.5%,40% 100%,31% 98.5%,22% 100%,13% 98.5%,6% 100%,0 98.5%); }
  .n1{ background:var(--pink) repeating-linear-gradient(transparent 0 25px,rgba(31,59,99,.13) 25px 26px); transform:rotate(-.8deg); }
  .n2{ background:var(--yellow); transform:rotate(.7deg); }
  .n3{ background:var(--cream); transform:rotate(-.5deg); }
  .n4{ background:var(--brick); transform:rotate(.9deg); }
  .notes{ display:grid; grid-template-columns:1fr; gap:14px 22px; margin-top:6px; }
  @media (min-width:860px){ .notes{ grid-template-columns:1fr 1fr; } .notes .note:nth-child(odd){ margin-top:0; } .notes .note:nth-child(even){ margin-top:22px; } }
  .note .no{ position:absolute; top:16px; left:14px; width:32px; height:32px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:600; font-size:.85rem; }
  .note.numd{ padding-left:60px; }
  .note p:last-child{ margin-bottom:0; }
  .note u{ text-decoration:underline wavy var(--pink-d); text-decoration-thickness:3px; text-underline-offset:5px; font-weight:600; }
  .n1 u{ text-decoration-color:var(--blue-d); } .n2 u{ text-decoration-color:var(--pink-d); }
  .note mark{ background:linear-gradient(transparent 55%,rgba(255,242,122,.9) 55%); color:inherit; }
  sup.fn{ font-family:var(--script); color:#B23F6B; font-size:1.05rem; margin-left:1px; font-weight:400; }
  .rev{ opacity:0; transform:translateY(26px) rotate(0deg); transition:opacity .6s, transform .6s; } .rev.in{ opacity:1; transform:none; }
  .tape{ position:absolute; top:3px; left:50%; width:84px; height:16px; background:rgba(255,255,255,.55); transform:translateX(-50%) rotate(-3deg); border:1px dashed rgba(31,59,99,.25); z-index:1; }
  .speaking{ animation:glow 1.2s ease-in-out infinite; }
  @keyframes glow{ 50%{ filter:brightness(1.12) saturate(1.2); transform:scale(1.015); } }
  ol.fns{ margin:16px 0 0; padding-left:1.4em; font-family:var(--script); font-size:1.12rem; color:var(--yellow); line-height:1.35; }
  .goal{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:8px; }
  .goal li{ position:relative; padding:9px 14px 9px 42px; background:#fff; color:var(--navy); border-radius:16px; border:2px solid var(--navy); font-size:.9rem; }
  .goal li::before{ content:"★"; position:absolute; left:12px; top:6px; font-size:1.2rem; color:var(--pink-d); }

  /* шапка урока */
  .crumbs{ font-size:.78rem; margin-bottom:12px; } .crumbs button{ background:none; border:0; padding:0; color:var(--yellow); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
  .lh h1{ font-size:clamp(2.1rem,8vw,4.6rem); color:#fff; text-shadow:0 3px 0 rgba(31,59,99,.3); }
  .steps{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; padding:0; list-style:none; }
  .steps a{ display:inline-flex; align-items:center; gap:6px; border:2px solid var(--navy); border-radius:999px; padding:6px 14px; font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; text-decoration:none; color:var(--navy); background:#fff; }
  .steps a[data-d="1"]{ background:var(--mint); }
  .stage-top{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:10px; margin-bottom:6px; }

  /* карусель кадров */
  .carousel{ margin-top:6px; }
  .track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 4px 18px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
  .slide{ flex:0 0 min(100%,560px); scroll-snap-align:center; margin:0; background:var(--cream); border:2px solid var(--navy); border-radius:22px; overflow:hidden; box-shadow:0 5px 0 var(--navy); transition:transform .3s; }
  .slide.cur{ transform:translateY(-3px); }
  .slide .pic{ aspect-ratio:360/220; background:var(--sky); } .slide .pic svg,.slide .pic img{ display:block; width:100%; height:100%; object-fit:cover; }
  .slide figcaption{ padding:12px 16px 16px; font-size:.88rem; } .slide figcaption b{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:#B23F6B; margin-bottom:2px; }
  .cnav{ display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap; }
  .cnav button.arrow{ width:44px; height:44px; border-radius:50%; border:2px solid var(--navy); background:#fff; font-weight:600; font-size:1.1rem; }
  .dots{ display:flex; gap:7px; } .dots i{ width:11px; height:11px; border-radius:50%; background:#fff; border:2px solid var(--navy); } .dots i.on{ background:var(--navy); }
  .vidreal video{ width:100%; border-radius:18px; border:2px solid var(--navy); margin-bottom:12px; }

  /* игры */
  .game{ min-height:240px; }
  .gtop{ display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; margin-bottom:12px; }
  .guide{ display:flex; gap:12px; align-items:flex-end; margin:6px 0 14px; }
  .guide svg{ flex:none; width:82px; height:82px; }
  .bubble{ position:relative; background:#fff; border:2px solid var(--navy); border-radius:20px 20px 20px 4px; padding:12px 16px; margin:8px 0; max-width:64ch; color:var(--navy); animation:bpop .35s both; }
  .bubble.me2{ border-radius:20px 20px 4px 20px; background:var(--pink); margin-left:auto; }
  .bubble.alert{ background:var(--brick); }
  .bubble small{ display:block; font-weight:600; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; opacity:.7; margin-bottom:2px; }
  @keyframes bpop{ from{ opacity:0; transform:translateY(10px) scale(.96); } to{ opacity:1; transform:none; } }
  .gl{ font-weight:600; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; margin:14px 0 6px; }
  .opts{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px; }
  .opt{ background:#fff; border:2px solid var(--navy); border-radius:16px; padding:9px 14px; font-weight:500; font-size:.82rem; min-height:44px; text-align:left; display:inline-flex; align-items:center; gap:8px; }
  .opt[aria-pressed="true"]{ background:var(--navy); color:#fff; } .opt:hover{ transform:translateY(-2px); }
  .opt svg{ width:32px; height:32px; flex:none; }
  .orderc{ background:#fff; border:2px dashed var(--navy); border-radius:20px; padding:14px 18px; margin:6px 0 10px; }
  .orderc .tag{ font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#B23F6B; }
  .stars{ font-size:1.9rem; letter-spacing:5px; color:var(--yellow-d); text-shadow:0 1px 0 var(--navy), 0 -1px 0 var(--navy), 1px 0 0 var(--navy), -1px 0 0 var(--navy); }
  .fb{ padding:12px 16px; border-radius:16px; margin:10px 0; border:2px solid var(--navy); background:#fff; color:var(--navy); animation:bpop .3s both; }
  .fb.good{ background:var(--mint); } .fb.bad{ background:var(--brick); animation:shake .4s; }
  @keyframes shake{ 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
  .prog{ height:12px; border-radius:8px; border:2px solid var(--navy); background:#fff; overflow:hidden; margin:8px 0 14px; } .prog i{ display:block; height:100%; background:var(--pink-d); transition:width .4s; }
  .sent{ display:inline; padding:2px 4px; border-radius:6px; cursor:pointer; background:none; border:0; text-align:left; font-size:.92rem; line-height:1.9; }
  .sent:hover{ background:var(--yellow); } .sent.sus{ background:var(--yellow); outline:2px dashed var(--navy); } .sent.fake{ background:var(--brick); text-decoration:line-through wavy var(--bad); } .sent.ok{ background:var(--mint); }
  .evid{ display:flex; gap:8px; margin:6px 0 12px; } .evid i{ width:34px; height:34px; border-radius:50%; border:2px solid var(--navy); background:#fff; display:grid; place-items:center; font-style:normal; font-weight:600; }
  .evid i.y{ background:var(--mint); } .evid i.n{ background:var(--brick); } .evid i.c{ background:var(--yellow); }
  .chat{ display:grid; gap:4px; }
  .stop{ background:var(--bad); color:#fff; border-color:var(--navy); }
  .case{ background:#fff; border:2px solid var(--navy); border-radius:22px; padding:16px 18px; margin:8px 0; }
  .row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:12px; }

  /* карточки */
  .card{ position:relative; background:var(--pink) repeating-linear-gradient(transparent 0 27px,rgba(31,59,99,.12) 27px 28px); color:var(--navy); border:2px solid var(--navy); border-radius:6px 24px 6px 24px; padding:22px 22px 18px; margin-top:16px; }
  .card:nth-of-type(even){ background-color:var(--yellow); }
  .card h3{ font-size:1.5rem; margin-bottom:8px; }
  .field{ margin:12px 0; } .field label{ display:block; font-weight:600; font-size:.78rem; margin-bottom:2px; }
  .field textarea,.input{ width:100%; font:inherit; font-family:var(--script); font-size:1.3rem; color:var(--navy); background:rgba(255,255,255,.55); border:0; border-bottom:2px solid var(--navy); border-radius:8px 8px 0 0; padding:6px 8px; min-height:44px; resize:vertical; }
  .field textarea:focus{ outline:none; background:#fff; }
  .input{ font-family:var(--mono); font-size:1rem; border:2px solid var(--navy); border-radius:14px; background:#fff; }
  .check{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:2px dashed rgba(31,59,99,.3); }
  .check input{ width:26px; height:26px; accent-color:var(--navy); flex:none; margin-top:2px; }

  /* награды */
  .medals{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:20px; }
  .mcell{ text-align:center; padding:14px 10px; border:2px solid var(--navy); border-radius:22px; background:var(--cream); color:var(--navy); } .mcell svg{ width:96px; height:auto; } .mcell.off svg{ filter:grayscale(1); opacity:.35; }
  .cert{ position:relative; border:4px double var(--navy); background:var(--yellow); color:var(--navy); padding:36px 24px; text-align:center; margin-top:18px; border-radius:6px; }
  .cert h2{ font-size:clamp(1.8rem,5vw,2.6rem); } .cert .nick{ font-family:var(--script); font-size:2.6rem; color:#B23F6B; margin:8px 0; }
  .cert.locked{ filter:grayscale(1); opacity:.55; }
  .pop{ animation:popm .8s cubic-bezier(.2,1.6,.4,1); } @keyframes popm{ 0%{ transform:scale(.2) rotate(-25deg); opacity:0; } 100%{ transform:none; opacity:1; } }

  /* главная */
  .hero{ display:grid; grid-template-columns:1.25fr .75fr; gap:20px 30px; align-items:center; }
  @media (max-width:760px){ .hero{ grid-template-columns:1fr; } }
  .hero h1{ font-size:clamp(2.1rem,8vw,5rem); color:#fff; text-shadow:0 3px 0 rgba(31,59,99,.3); }
  .hero .script{ color:var(--yellow); font-size:1.5rem; margin:0 0 6px; }
  .hero p{ color:#fff; max-width:44ch; }
  .trust{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; } .trust li{ font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; border:2px solid var(--navy); border-radius:999px; padding:4px 12px; background:#fff; color:var(--navy); }
  .me{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; color:#fff; }
  .ring{ position:relative; width:150px; height:150px; } .ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
  .ring .num{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:1.8rem; color:#fff; }
  .path{ display:grid; grid-template-columns:1fr; gap:24px 20px; margin-top:6px; }
  @media (min-width:720px){ .path{ grid-template-columns:1fr 1fr; } }
  .folder{ position:relative; text-align:left; width:100%; border:2px solid var(--navy); border-radius:4px 22px 22px 22px; padding:26px 20px 18px; background:var(--pink); color:var(--navy); margin-top:20px; transition:transform .2s; }
  .folder:nth-child(even){ background:var(--yellow); }
  .folder::before{ content:attr(data-tab); position:absolute; left:-2px; top:-24px; background:inherit; border:2px solid var(--navy); border-bottom:0; border-radius:14px 14px 0 0; padding:3px 16px 2px; font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
  .folder:hover:not([data-s="locked"]):not([data-s="soon"]){ transform:translateY(-4px) rotate(-.5deg); }
  .folder h3{ font-size:1.7rem; } .folder p{ margin:6px 0 10px; font-size:.82rem; }
  .folder[data-s="locked"],.folder[data-s="soon"]{ background:var(--sky); filter:saturate(.7); }
  .author{ display:grid; grid-template-columns:220px 1fr; gap:26px; align-items:center; }
  .author .ph{ position:relative; } .author .ph::before{ content:""; position:absolute; inset:12% 2% 0 6%; background:var(--pink); border-radius:48% 52% 8% 8%/36% 34% 8% 8%; }
  .author img{ position:relative; display:block; width:100%; height:auto; }
  @media (max-width:600px){ .author{ grid-template-columns:1fr; } .author .ph{ max-width:230px; } }

  /* знакомство с героем */
  .ob{ max-width:760px; margin:0 auto; } .ob h1{ font-size:clamp(2.2rem,8vw,3.6rem); color:#fff; text-shadow:0 3px 0 rgba(31,59,99,.3); }
  .favs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; margin:14px 0; }
  .fav{ background:#fff; border:2px solid var(--navy); border-radius:22px; padding:10px 6px 8px; text-align:center; font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--navy); transition:transform .15s; }
  .fav svg{ width:82px; height:82px; display:block; margin:0 auto 4px; } .fav[aria-pressed="true"]{ background:var(--yellow); box-shadow:0 4px 0 var(--navy); transform:translateY(-3px); }
  .offer{ display:flex; align-items:center; justify-content:center; gap:10px; margin:10px 0; }
  .offer .arrow{ width:48px; height:48px; border-radius:50%; border:2px solid var(--navy); background:#fff; font-size:1.2rem; font-weight:600; }
  .offer .big svg{ width:min(52vw,230px); height:auto; animation:bob 2.6s ease-in-out infinite; }
  @keyframes bob{ 50%{ transform:translateY(-8px) rotate(1.5deg); } }
  .bob{ animation:bob 2.6s ease-in-out infinite; }
  .facepick{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
  .facepick button{ width:92px; height:92px; border-radius:24px; border:2px solid var(--navy); background:#fff; padding:2px; } .facepick button[aria-pressed="true"]{ background:var(--yellow); box-shadow:0 4px 0 var(--navy); }
  .facepick svg{ width:100%; height:100%; }

  /* подвал, окна, эффекты */
  footer.foot{ margin:0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0; background:var(--navy); color:#fff; position:relative;
    padding:34px max(16px, env(safe-area-inset-right, 0px)) calc(30px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  footer .in{ max-width:1000px; margin:0 auto; display:grid; gap:10px; } footer a{ color:var(--yellow); } footer .soc{ display:flex; flex-wrap:wrap; gap:8px 24px; font-size:1rem; }
  footer .small{ opacity:.8; }
  .ov{ position:fixed; inset:0; z-index:80; background:rgba(31,59,99,.6); display:grid; place-items:center; padding:16px; }
  .dlg{ background:var(--cream); color:var(--navy); border:2px solid var(--navy); border-radius:26px; padding:24px; max-width:430px; width:100%; box-shadow:0 8px 0 var(--navy); animation:bpop .3s both; } .dlg h2{ font-size:1.8rem; margin-bottom:8px; }
  .toast{ position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:90; background:var(--navy); color:#fff; padding:12px 20px; border-radius:999px; font-weight:600; font-size:.82rem; max-width:92vw; text-align:center; border:2px solid var(--yellow); }
  .confetti{ position:fixed; inset:0; z-index:85; pointer-events:none; overflow:hidden; } .confetti i{ position:absolute; top:-20px; width:10px; height:16px; border-radius:2px; animation:fall 2.4s ease-in forwards; }
  @keyframes fall{ to{ transform:translateY(110vh) rotate(720deg); } }
  .wipe{ position:fixed; inset:0; z-index:70; background:var(--yellow); pointer-events:none; display:grid; place-items:center; will-change:transform; }
  .wipe::after{ content:""; position:absolute; top:0; bottom:0; right:-24px; width:24px; background:radial-gradient(circle at 0 12px,var(--yellow) 11px,transparent 12px) 0 0/24px 24px repeat-y; }
  .wipe::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:30%; background:var(--pink); }
  .wipe svg{ position:relative; width:140px; height:140px; }
  .method{ max-width:760px; margin:0 auto; background:var(--cream); color:var(--navy); border:2px solid var(--navy); border-radius:24px; padding:24px clamp(16px,4vw,32px); }
  .method h2{ font-size:2.2rem; margin-bottom:8px; } .method h3{ font-size:1.4rem; margin:20px 0 6px; } .method p,.method li{ font-size:.92rem; } .method ul,.method ol{ padding-left:1.2em; }
  .tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; } .tabs button{ border:2px solid var(--navy); background:#fff; border-radius:999px; padding:8px 16px; font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; min-height:44px; color:var(--navy); } .tabs button[aria-selected="true"]{ background:var(--yellow); }
  .panel{ background:var(--cream); color:var(--navy); border:2px solid var(--navy); border-radius:24px; padding:20px clamp(16px,3vw,28px); margin-top:16px; }
  .svc h3{ font-size:1.6rem; } .svc dl{ margin:10px 0 0; display:grid; grid-template-columns:150px 1fr; gap:6px 14px; } @media (max-width:560px){ .svc dl{ grid-template-columns:1fr; } }
  .svc dt{ font-weight:600; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#B23F6B; } .svc dd{ margin:0 0 6px; font-size:.88rem; }
  .setrow{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:2px dashed rgba(31,59,99,.3); }
  .linkrow{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; border-bottom:2px dashed rgba(31,59,99,.3); }
  .cert,.mcell,.panel,.method,.dlg,.card,.note,.fb,.bubble,.case,.orderc{ overflow-wrap:anywhere; }
  .tbl{ overflow-x:auto; }
  .band,#game{ scroll-margin-top:70px; } .need{ outline:3px dashed var(--bad); outline-offset:5px; border-radius:12px; animation:needp 1.2s ease-in-out 3; } @keyframes needp{ 50%{ outline-color:transparent; } }
  @media (max-width:760px){ .top{ position:static; } .band,#game{ scroll-margin-top:12px; } }
  @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } .confetti,.wipe{ display:none; } .rev{ opacity:1; transform:none; } }
  html[data-calm] *{ animation:none !important; transition:none !important; } html[data-calm] .confetti{ display:none; } html[data-calm] .rev{ opacity:1; transform:none; }


/* ===== общие стили сайта (формы, таблицы, админка) ===== */
a.btn,a.brand{ text-decoration:none; }
a.brand{ color:var(--navy); }
.nav .navlink{ display:inline-flex; align-items:center; background:none; border:2px solid transparent; border-radius:999px; padding:6px 12px; font-weight:600; font-size:.72rem; min-height:40px; text-transform:uppercase; letter-spacing:.04em; color:var(--navy); text-decoration:none; }
.nav .navlink:hover,.nav .navlink[aria-current="page"]{ border-color:var(--navy); }
.nav .navlink[aria-current="page"]{ background:var(--yellow); }
.form{ display:grid; gap:14px; max-width:460px; }
.form label{ display:grid; gap:6px; font-weight:600; font-size:.85rem; }
.form input[type=email],.form input[type=password],.form input[type=text],.form input[type=number],.form input[type=url]{ font:inherit; padding:12px 14px; border:2px solid var(--navy); border-radius:14px; background:#fff; color:var(--navy); min-height:48px; width:100%; box-sizing:border-box; }
.form input:focus{ outline:3px solid var(--yellow-d); outline-offset:2px; }
.form .chk{ display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:.8rem; line-height:1.5; }
.form .chk input{ width:22px; height:22px; margin-top:2px; flex:none; accent-color:var(--navy); }
.err{ color:#8a1f1f; background:#fde4e0; border:2px solid #e3a8a0; border-radius:12px; padding:10px 14px; font-size:.85rem; }
.okmsg{ color:#14532d; background:#dcf5e5; border:2px solid #8ccaa3; border-radius:12px; padding:10px 14px; font-size:.85rem; }
.price{ font-family:Cormorant,serif; font-weight:700; font-size:clamp(2.4rem,8vw,3.6rem); line-height:1; }
.hero2{ display:grid; gap:28px; grid-template-columns:1.2fr .8fr; align-items:center; }
@media (max-width:820px){ .hero2{ grid-template-columns:1fr; } }
.cols3{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.cols3 > *{ min-width:0; }
.tablewrap{ overflow-x:auto; border:2px solid var(--navy); border-radius:14px; background:#fff; }
table.t{ border-collapse:collapse; width:100%; font-size:.78rem; }
table.t th,table.t td{ padding:9px 12px; border-bottom:1px solid #d6dfec; text-align:left; vertical-align:top; white-space:nowrap; }
table.t th{ background:var(--sky); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; position:sticky; top:0; }
table.t td.wrap{ white-space:normal; min-width:200px; }
.kpis{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.kpi{ background:#fff; border:2px solid var(--navy); border-radius:14px; padding:12px 14px; }
.kpi b{ color:var(--navy); display:block; font-family:Cormorant,serif; font-size:2rem; line-height:1.1; }
.kpi span{ font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.bar{ display:grid; grid-template-columns:minmax(110px,170px) 1fr 70px; gap:10px; align-items:center; margin:8px 0; font-size:.8rem; }
.bar i{ display:block; height:16px; border-radius:8px; background:var(--pink-d); min-width:2px; }
.bar em{ font-style:normal; text-align:right; font-weight:600; }
.spark{ display:flex; align-items:flex-end; gap:3px; height:90px; margin:8px 0; }
.spark i{ flex:1; background:var(--blue-d); border-radius:3px 3px 0 0; min-width:3px; }
.row2{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.mini{ font:inherit; font-size:.72rem; padding:5px 10px; border:2px solid var(--navy); border-radius:999px; background:#fff; color:var(--navy); cursor:pointer; min-height:32px; }
.mini:hover{ background:var(--yellow); }
.mini.warn:hover{ background:#f4a6a0; }
.stat{ display:inline-block; padding:2px 10px; border-radius:999px; border:2px solid var(--navy); font-size:.7rem; font-weight:600; background:#fff; }
.stat.paid{ background:var(--mint); } .stat.review{ background:var(--yellow); } .stat.refunded,.stat.pending{ background:var(--pink); }
.legal h2{ font-size:1.5rem; margin:26px 0 6px; } .legal p,.legal li{ line-height:1.65; font-size:.9rem; }
.legal{min-width:0;overflow-wrap:anywhere}
.legal table.t{width:100%;table-layout:fixed}
.legal table.t th,.legal table.t td{white-space:normal;overflow-wrap:anywhere}
.todo{ background:var(--yellow); border:2px dashed var(--navy); border-radius:12px; padding:12px 16px; font-size:.85rem; margin:0 0 20px; }
.page{ max-width:980px; margin:0 auto; padding:28px 0 40px; }
.page.narrow{ max-width:560px; }
.box{ background:var(--cream); border:2px solid var(--navy); border-radius:18px; padding:22px; box-shadow:6px 6px 0 var(--navy); }
.box h1,.box h2{ margin-top:0; }
.kbpanel[hidden]{ display:none; }

.box{ color:var(--navy); text-shadow:none; }
.box h1,.box h2,.box h3{ color:var(--navy); text-shadow:none; }
.box .small{ color:var(--muted); }

.chip,.say{ color:var(--navy); text-shadow:none; }

  footer.foot{ padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }