/* Страницы гайдов nanuli.app (NAN-89): /guides и /guides/<slug>.
   Цвета и шрифты те же, что на главной (стили главной встроены в site/index.html).
   Разметку пишет tools/guides.mjs из content/guides/*.md. Макет одобрен 04.10.2026. */
@font-face{font-family:'Fraunces';font-weight:900;font-display:swap;src:url(/fonts/Fraunces-900.woff2) format('woff2')}
@font-face{font-family:'Onest';font-weight:400 700;font-display:swap;src:url(/fonts/Onest.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-display:swap;src:url(/fonts/JetBrainsMono-700.woff2) format('woff2')}
:root{
  --display:"Fraunces",Georgia,serif;--sans:"Onest",-apple-system,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  --night:#0E1230;--night2:#141939;--card:#181E42;--line:#2C3363;--ink:#FFF7EC;--muted:#FFF7ECb8;--amber:#E8850F;--amber2:#F4A340;--cream:#FFF3DF;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--night);scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font:500 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a:focus-visible,.sheet:focus-visible{outline:2px solid var(--amber2);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--display);font-weight:900;font-variation-settings:"SOFT" 100,"opsz" 144;letter-spacing:-.01em;text-wrap:balance}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.kicker{font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber2);margin-bottom:16px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#0B0E23;border-radius:999px;padding:12px 20px;font:600 15px/1 var(--sans);transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:17px;height:17px;flex:none}
.btn.big{padding:17px 28px;font-size:17px;white-space:nowrap}
.btn.big svg{width:20px;height:20px}
.fine{margin:14px 0 0;color:var(--muted);font-size:14.5px;display:flex;gap:18px;flex-wrap:wrap}
.fine li::before{content:"✓";color:var(--amber2);margin-right:7px}
.sky{background-color:var(--night);background-image:
  radial-gradient(1.4px 1.4px at 12% 12%,#fff9 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 31% 7%,#fff8 50%,transparent 51%),
  radial-gradient(1.6px 1.6px at 47% 14%,#fffa 50%,transparent 51%),
  radial-gradient(1.3px 1.3px at 6% 88%,#fff8 50%,transparent 51%),
  radial-gradient(60% 70% at 78% 40%,#E0A77833,transparent 70%),
  linear-gradient(160deg,#6B4A63 0%,#2C2242 30%,#1B1F45 58%,#0E1230 100%)}

/* меню и подвал: как на главной */
body>nav{position:absolute;inset:0 0 auto 0;z-index:10}
body>nav .wrap{display:flex;align-items:center;gap:36px;height:84px}
.logo{display:flex;align-items:center;gap:10px;font:900 24px/1 var(--display);font-variation-settings:"SOFT" 100}
.logo img{width:34px;height:34px;border-radius:9px}
body>nav .links{display:flex;gap:28px;margin-left:auto;font-size:15px;color:var(--muted)}
body>nav .links a:hover{color:var(--ink)}
footer{padding:44px 0 56px;color:var(--muted);font-size:14.5px;border-top:1px solid var(--line)}
footer .wrap{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
footer a:hover{color:var(--ink)}
footer .sp{margin-left:auto}
footer .logo{font-size:20px}
footer .logo img{width:28px;height:28px}

/* шапка гайда */
.g-head{position:relative;padding:136px 0 72px}
.g-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:36px;align-items:center}
.g-head-text{grid-column:1 / span 7}
.g-cover{grid-column:8 / span 5;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px #0009;aspect-ratio:4/3;background:var(--card)}
.g-cover img{width:100%;height:100%;object-fit:cover}
.crumbs{font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber2);margin:0 0 22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs i{font-style:normal;opacity:.5}
.g-head h1{font-size:clamp(34px,4.4vw,56px);line-height:1.03}
.dek{color:var(--muted);font-size:20px;line-height:1.5;max-width:38ch;margin:20px 0 0}
.byline{margin:24px 0 0;color:var(--muted);font-size:14.5px;line-height:1.7}

/* текст гайда */
.g-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-block:72px 48px}
.prose{grid-column:1 / span 7;font-size:18.5px;line-height:1.7;color:#FFF7ECe6;min-width:0}
.prose > p{margin:0 0 1.15em}
.prose h2{font-size:clamp(26px,2.7vw,34px);line-height:1.1;margin:2.1em 0 .55em;scroll-margin-top:24px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:24px;line-height:1.15;margin:1.8em 0 .5em}
.prose a:not(.btn){color:var(--amber2);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink);font-weight:700}
.prose em{font-style:italic}
.prose code{font:700 .86em var(--mono)}
.prose ul.bullets{margin:0 0 1.25em;display:grid;gap:8px}
.prose ul.bullets li{position:relative;padding-left:22px}
.prose ul.bullets li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--amber2)}
.prose ol.steps{counter-reset:s;margin:0 0 1.25em;display:grid;gap:12px}
.prose ol.steps li{counter-increment:s;position:relative;padding-left:46px}
.prose ol.steps li::before{content:counter(s);position:absolute;left:0;top:.2em;width:30px;height:30px;border-radius:50%;background:var(--amber);color:#fff;font:700 13px/30px var(--mono);text-align:center}
.prose ul.checks{margin:0 0 1.25em;display:grid;gap:10px}
.prose ul.checks label{display:block;position:relative;padding-left:36px;cursor:pointer}
.prose ul.checks input{position:absolute;left:0;top:.28em;width:20px;height:20px;margin:0;-webkit-appearance:none;appearance:none;border:2px solid var(--amber2);border-radius:6px;background:transparent;cursor:pointer}
.prose ul.checks input:checked{border-color:var(--amber);background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.prose ul.checks input:focus-visible{outline:2px solid var(--amber2);outline-offset:3px}
.prose ul.checks li:has(input:checked) label{color:var(--muted)}

/* карточки-подсказки */
.dials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:1.6em 0 1.4em}
.dials li{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 18px 20px;font-size:16px;line-height:1.5}
.dial-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber2)}
.dials p{color:var(--muted)}
.dials p+p{margin-top:8px}
.dials b{color:var(--ink);font-weight:600}
.wave{display:flex;gap:2px;align-items:center;height:18px}
.wave i{display:block;width:2.5px;border-radius:2px;background:var(--amber2)}

/* таблица-шпаргалка */
.sheet{margin:1.7em 0 1.5em;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow-x:auto}
.sheet table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5;text-align:left}
.sheet thead th{padding:16px 18px 12px;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber2)}
.sheet tbody th,.sheet td{padding:16px 18px;vertical-align:top;border-top:1px solid var(--line);text-align:left}
.sheet tbody th{width:27%;font:900 19px/1.15 var(--display);font-variation-settings:"SOFT" 100;color:var(--ink)}
.sheet small{display:block;margin-top:6px;font:500 13px/1.35 var(--sans);color:var(--muted)}
.sheet td{color:var(--muted)}
.dial{display:block;width:max-content;max-width:100%;margin-bottom:7px;padding:5px 9px;border-radius:999px;background:#E8850F26;color:var(--amber2);font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.say{display:block;color:var(--ink);font-weight:600}
.prose p .say,.prose li .say{display:inline}
.hint{display:block;margin-top:6px;font-size:13.5px;color:var(--amber2);font-weight:500}

/* отрывок сказки по ролям */
.script{margin:2em 0;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px 26px 22px}
.script h3{font-size:25px;line-height:1.12;margin:0 0 14px}
.script .kicker{margin-bottom:12px}
.legend{display:flex;gap:10px 22px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-bottom:18px}
.legend li{display:flex;align-items:center;gap:8px}
.legend li::before{content:"";width:10px;height:10px;border-radius:50%;background:#FFF7EC66}
.legend li.kid::before{background:var(--amber)}
.lines{display:grid;gap:8px}
.line{display:grid;grid-template-columns:104px minmax(0,1fr);gap:4px 14px;align-items:baseline;padding:9px 14px;border-radius:12px;font-size:17px;line-height:1.5}
.line .who{font:700 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#FFF7EC8c}
.line p{color:#FFF7ECc9}
.line.kid{background:#E8850F24;box-shadow:inset 3px 0 0 var(--amber)}
.line.kid .who{color:var(--amber2)}
.line.kid p{color:var(--ink);font-weight:600}
.lines .scene{margin-top:12px;padding:16px 14px 2px;border-top:1px solid var(--line);font:700 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber2)}
.lines .scene:first-child{margin-top:0;padding-top:2px;border-top:0}
.cue{grid-column:2;font-size:13.5px;color:var(--amber2);font-weight:500}
.script .src{margin:18px 0 0;font-size:13.5px;line-height:1.5;color:#FFF7EC99}

/* кнопка App Store в конце гайда */
.g-cta{margin:2.6em 0 0;display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 28px;align-items:center;background:linear-gradient(150deg,#2C2242 0%,#181E42 60%);border:1px solid var(--line);border-radius:26px;padding:26px 28px 26px 22px;overflow:hidden}
.g-cta .shot{height:250px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.phone{width:170px;border-radius:30px;padding:6px;background:#05060F;box-shadow:0 26px 50px #000a,0 0 0 1.5px #3A3F63 inset;margin:22px auto 0}
.phone img{border-radius:25px;width:100%}
.g-cta h3{font-size:30px;line-height:1.08;margin:0 0 12px}
.g-cta p{font-size:16.5px;line-height:1.55;color:var(--muted);margin:0 0 20px}

/* правая колонка (компьютер) */
.g-side{grid-column:9 / span 4;position:sticky;top:24px;align-self:start;display:grid;gap:26px}
.toc{border-left:1px solid var(--line);padding-left:20px}
.toc h2{font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber2);margin:0 0 16px}
.toc ol{display:grid;gap:11px;font-size:15.5px;line-height:1.4;color:var(--muted)}
.toc a:hover{color:var(--ink)}
.g-app{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:2px 14px;align-items:center}
.g-app img{width:48px;height:48px;border-radius:12px;grid-row:span 2}
.g-app b{font:900 18px/1.1 var(--display);font-variation-settings:"SOFT" 100}
.g-app small{font-size:13.5px;color:var(--muted);line-height:1.35}
.g-app .btn{grid-column:1 / -1;margin-top:14px;justify-content:center}

/* «Читайте дальше» и карточки списка */
.g-more{padding:32px 0 96px}
.g-more h2{font-size:clamp(28px,3.2vw,40px);line-height:1.08}
.g-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.g-card a{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .15s,border-color .15s}
.g-card a:hover{transform:translateY(-2px);border-color:#4A538C}
.g-card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.g-card .t{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px}
.g-card small{font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber2)}
.g-card b{font:900 22px/1.12 var(--display);font-variation-settings:"SOFT" 100;text-wrap:balance}
.g-card span{color:var(--muted);font-size:14.5px}

/* список гайдов */
.hub-head{position:relative;padding:136px 0 56px}
.hub-head h1{font-size:clamp(38px,5vw,64px);line-height:1;max-width:16ch}
.hub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding-block:52px 96px}
.hub-feature{grid-column:1 / -1}
.hub-feature a{display:grid;grid-template-columns:1.25fr 1fr;background:var(--card);border:1px solid var(--line);border-radius:26px;overflow:hidden;transition:border-color .15s}
.hub-feature a:hover{border-color:#4A538C}
.hub-feature img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.hub-feature .t{padding:40px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.hub-feature small{font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber2)}
.hub-feature h2{font-size:clamp(28px,3.3vw,42px);line-height:1.06}
.hub-feature p{color:var(--muted);font-size:17.5px;line-height:1.55}
.hub-feature .go{font:600 15px/1 var(--sans);color:var(--ink);margin-top:6px}
.hub-feature .go::after{content:" →"}

@media (max-width:980px){
  .g-head-text{grid-column:1 / -1}
  .g-cover{grid-column:1 / -1;max-width:640px}
  .g-body{padding-block:56px 32px}
  .prose{grid-column:1 / -1}
  .g-side{display:none}
  .g-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .wrap{padding:0 20px}
  body>nav .links{display:none}
  body>nav .btn{margin-left:auto;padding:10px 15px;font-size:14px}
  .g-head{padding:108px 0 48px}
  .g-head h1{font-size:clamp(32px,9.2vw,44px)}
  .dek{font-size:18px}
  .prose{font-size:17.5px}
  .dials{grid-template-columns:1fr}
  .sheet{overflow:visible}
  .sheet thead{display:none}
  .sheet table,.sheet tbody,.sheet tr,.sheet tbody th,.sheet td{display:block}
  .sheet tr{padding:16px 18px;border-top:1px solid var(--line)}
  .sheet tr:first-child{border-top:0}
  .sheet tbody th,.sheet td{padding:0;border:0;width:auto}
  .sheet td{margin-top:12px}
  .sheet td::before{content:attr(data-label);display:block;margin-bottom:6px;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#FFF7EC8c}
  .script{padding:22px 18px 18px;border-radius:20px}
  .script h3{font-size:22px}
  .line{grid-template-columns:1fr;padding:10px 14px}
  .cue{grid-column:1}
  .g-cta{grid-template-columns:1fr;padding:22px 20px}
  .g-cta .shot{height:210px}
  .g-cta h3{font-size:26px}
  .g-cta .btn.big{width:100%;justify-content:center;font-size:16px;padding:16px 18px}
  .g-cards{grid-template-columns:1fr}
  .g-more{padding-bottom:64px}
  .hub-head{padding:108px 0 40px}
  .hub-grid{grid-template-columns:1fr;padding-block:36px 64px}
  .hub-feature a{grid-template-columns:1fr}
  .hub-feature .t{padding:24px 22px 28px}
  footer .sp{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.g-card a,.hub-feature a{transition:none}}