/* ============================================================================
   apple.css — дизайн-система проекта (из DESIGN-apple.md)
   Единый акцент Action Blue #0066cc · SF Pro / Inter · премиальный white space ·
   ноль теней на UI · чередование light/dark плиток как ритм.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root{
  /* colors */
  --primary:#0066cc; --primary-focus:#0071e3; --primary-on-dark:#2997ff;
  --ink:#1d1d1f; --canvas:#ffffff; --parchment:#f5f5f7; --pearl:#fafafc;
  --tile1:#272729; --tile2:#2a2a2c; --tile3:#252527; --black:#000000;
  --hairline:#e0e0e0; --divider:#f0f0f0; --muted80:#333333; --muted48:#595961;
  --on-dark:#ffffff; --body-muted:#e8e8ea; --chip-gray:#d2d2d7;
  /* type */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* radius */
  --r-sm:8px; --r-md:11px; --r-lg:18px; --r-pill:9999px;
  /* spacing */
  --s-xxs:4px; --s-xs:8px; --s-sm:12px; --s-md:17px; --s-lg:24px; --s-xl:32px; --s-xxl:48px; --s-section:80px;
  /* the one product shadow */
  --shadow-product:0 5px 30px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font); font-size:17px; line-height:1.47; letter-spacing:-.374px;
  color:var(--ink); background:var(--canvas);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ---- typography helpers ---- */
.eyebrow{font:600 14px/1.29 var(--font); letter-spacing:-.224px; color:var(--muted48); text-transform:none}
.hero{font:600 56px/1.07 var(--font-display); letter-spacing:-.28px; margin:0}
.display{font:600 40px/1.1 var(--font-display); letter-spacing:0; margin:0}
.display-md{font:600 34px/1.12 var(--font); letter-spacing:-.374px; margin:0}
.lead{font:400 28px/1.18 var(--font-display); letter-spacing:.196px; margin:0; color:var(--muted80)}
.tagline{font:600 21px/1.19 var(--font-display); letter-spacing:.231px; margin:0}
.body{font:400 17px/1.47 var(--font); letter-spacing:-.374px}
.strong{font-weight:600}
.caption{font:400 14px/1.43 var(--font); letter-spacing:-.224px; color:var(--muted80)}
.fine{font:400 12px/1.3 var(--font); letter-spacing:-.12px; color:var(--muted48)}
.muted{color:var(--muted48)}
.accent{color:var(--primary)}
.center{text-align:center}

/* ---- global nav (slim black) ---- */
.nav{position:fixed; top:0; left:0; right:0; height:44px; z-index:100;
  background:var(--black); color:var(--on-dark);
  display:flex; align-items:center; gap:18px; padding:0 22px;
  font:400 12px/1 var(--font); letter-spacing:-.12px;
  overflow-x:auto; white-space:nowrap; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav .brand{font-weight:600; letter-spacing:-.2px; color:var(--on-dark); flex:0 0 auto}
.nav a{color:var(--on-dark); opacity:.82; flex:0 0 auto}
.nav a:hover{opacity:1; text-decoration:none}
.nav a.active{opacity:1}
.nav .spacer{flex:1 0 auto}

/* ---- buttons (pill primary is the signature) ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--primary); color:#fff; border:0; cursor:pointer;
  font:400 17px/1 var(--font); letter-spacing:-.374px;
  border-radius:var(--r-pill); padding:11px 22px; transition:transform .12s ease}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.95)}
.btn:focus-visible{outline:2px solid var(--primary-focus); outline-offset:2px}
.btn:disabled{opacity:.45; cursor:default}
.btn-ghost{background:transparent; color:var(--primary); border:1px solid var(--primary)}
.btn-dark{background:var(--ink); color:#fff; border-radius:var(--r-sm); padding:8px 15px;
  font:400 14px/1.29 var(--font); letter-spacing:-.224px}
.btn-lg{font:300 18px/1 var(--font); padding:14px 28px}
.on-dark .btn-ghost{color:#fff; border-color:rgba(255,255,255,.5)}

/* ---- chips / badges ---- */
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--canvas);
  border:1px solid var(--hairline); color:var(--ink);
  font:400 14px/1.43 var(--font); letter-spacing:-.224px;
  border-radius:var(--r-pill); padding:8px 14px}
.badge{display:inline-block; background:var(--parchment); color:var(--ink);
  border:1px solid var(--hairline); font:600 12px/1 var(--font); letter-spacing:-.12px;
  border-radius:var(--r-pill); padding:6px 12px}
.badge.blue{background:rgba(0,102,204,.08); border-color:rgba(0,102,204,.35); color:var(--primary)}

/* ---- cards / surfaces ---- */
.card{background:var(--canvas); border:1px solid var(--hairline);
  border-radius:var(--r-lg); padding:var(--s-lg)}
.parchment{background:var(--parchment)}
.container{max-width:1024px; margin:0 auto; padding:0 24px}
.container.wide{max-width:1280px}

/* ---- tables ---- */
table.t{width:100%; border-collapse:collapse; font:400 15px/1.4 var(--font)}
table.t th,table.t td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--hairline); vertical-align:top}
table.t th{font-weight:600; color:var(--muted80); font-size:13px}
.on-dark table.t th,.on-dark table.t td{border-color:rgba(255,255,255,.16)}
.on-dark table.t th{color:var(--body-muted)}

/* ============================================================================
   DECK — полноэкранные плитки + scroll-snap (включается на <html class="deck-mode">)
   ============================================================================ */
html.deck-mode{scroll-snap-type:y mandatory; scroll-behavior:smooth; scroll-padding-top:0}
html.deck-mode body{background:var(--canvas)}

.tile{min-height:100vh; scroll-snap-align:start; display:flex; align-items:center;
  padding:104px 24px 80px; position:relative}
.tile-inner{max-width:1024px; margin:0 auto; width:100%}
.tile.center .tile-inner{text-align:center; max-width:900px; margin:0 auto}

/* surface modes — цвет = разделитель, без бордеров */
.tile.light{background:var(--canvas); color:var(--ink)}
.tile.parchment{background:var(--parchment); color:var(--ink)}
.tile.dark{background:var(--tile1); color:var(--on-dark)}
.tile.dark2{background:var(--tile2); color:var(--on-dark)}
.tile.black{background:var(--black); color:var(--on-dark)}
.tile.dark .lead,.tile.dark2 .lead,.tile.black .lead{color:var(--body-muted)}
.tile.dark .caption,.tile.dark2 .caption,.tile.black .caption{color:var(--body-muted)}
.tile.dark a,.tile.dark2 a,.tile.black a{color:var(--primary-on-dark)}
.tile.dark .card,.tile.dark2 .card,.tile.black .card{
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); color:var(--on-dark)}
.tile.dark .chip,.tile.dark2 .chip,.tile.black .chip{
  background:transparent; border-color:rgba(255,255,255,.28); color:var(--on-dark)}

/* progress dots */
.deck-dots{position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:90;
  display:flex; flex-direction:column; gap:10px}
.deck-dots .dot{width:8px; height:8px; border-radius:50%; background:var(--chip-gray);
  border:0; padding:0; cursor:pointer; opacity:.55; transition:opacity .2s,transform .2s}
.deck-dots .dot.active{opacity:1; background:var(--primary); transform:scale(1.3)}

/* deck helpers */
.kicker{font:600 14px/1.29 var(--font); letter-spacing:-.224px; color:var(--primary); margin:0 0 14px}
.tile.dark .kicker,.tile.dark2 .kicker,.tile.black .kicker{color:var(--primary-on-dark)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.stack>*+*{margin-top:16px}
.mono{font-family:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px}
pre.flow{background:var(--parchment); border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:18px; overflow:auto; font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:13px; line-height:1.5; letter-spacing:0; color:var(--ink)}
.tile.dark pre.flow,.tile.dark2 pre.flow,.tile.black pre.flow{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:var(--on-dark)}

/* Q&A блоки (process deck) */
.qa{border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden}
.qa .q{padding:16px 20px; background:var(--parchment); font:600 17px/1.3 var(--font); letter-spacing:-.374px}
.qa .opts{display:grid; gap:10px; padding:16px 20px}
.opt{display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid var(--hairline);
  border-radius:var(--r-md); color:var(--muted80); font-size:15px}
.opt .mark{width:18px; height:18px; border-radius:50%; border:1.5px solid var(--chip-gray); flex:0 0 auto}
.opt.chosen{border-color:var(--primary); background:rgba(0,102,204,.05); color:var(--ink); font-weight:600}
.opt.chosen .mark{border-color:var(--primary); background:var(--primary); position:relative}
.opt.chosen .mark::after{content:""; position:absolute; inset:4px; background:#fff; border-radius:50%}
.opt .pick{margin-left:auto; font:600 12px/1 var(--font); color:var(--primary); letter-spacing:-.12px}

/* user request bubble (process deck) */
.req{background:var(--primary); color:#fff; border-radius:var(--r-lg); border-bottom-right-radius:6px;
  padding:16px 20px; font-size:16px; line-height:1.4; max-width:760px}
.ans{background:var(--parchment); color:var(--ink); border-radius:var(--r-lg); border-bottom-left-radius:6px;
  padding:16px 20px; font-size:16px; line-height:1.45; border:1px solid var(--hairline)}

/* footer */
.footer{background:var(--parchment); color:var(--muted80); padding:48px 24px}
.footer .container{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between}

/* ---- responsive ---- */
@media (max-width:834px){
  .hero{font-size:38px} .display{font-size:30px} .display-md{font-size:26px} .lead{font-size:22px}
  .grid2,.grid3{grid-template-columns:1fr}
  .tile{padding:88px 18px 56px}
  .deck-dots{display:none}
}
@media (max-width:480px){ .hero{font-size:30px} body{font-size:16px} }