/* The app guide shares the landing page's ink, sage, landscape and device finish.
   Existing document IDs and class hooks keep routing and chapter tracking intact. */
#app.app-section {
  --app-ink: #193e3d;
  --app-soft: #58716a;
  --app-line: #d8e3da;
  --app-paper: #f7fbfc;
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 80px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--app-ink);
  background: var(--app-paper);
}
#app .app-glass-intro {
  max-width: none;
  margin: 0;
  padding: 64px 40px 72px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(90deg, #10373bf2 0, #10373be0 38%, #10373b40 100%), url('../assets/hero-distant-worlds-v1.jpg') center / cover, #10373b;
}
#app .app-guide-hero__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 72px; max-width: 1120px; margin: 0 auto; }
#app .app-guide-hero__copy { max-width: 600px; min-width: 0; }
#app .app-glass-intro__eyebrow { color: #c0d2c4; font-size: 10px; font-weight: 600; letter-spacing: .18em; margin: 0 0 28px; }
#app .app-glass-intro__title { color: #f1f4e8; font-family: 'Manrope', sans-serif; font-size: clamp(42px, 5.2vw, 76px); font-weight: 800; line-height: 1.05; letter-spacing: -.065em; margin: 0 0 26px; }
#app .app-glass-intro__title span { display: block; color: #c2ef88; }
#app .app-glass-intro__lead { max-width: 430px; color: #c1d1c9; font-size: 15px; line-height: 1.85; }
#app .app-guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 30px; }
#app .next-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 48px; padding: 14px 22px; border: 1px solid #244f40; border-radius: 10px; background: #244f40; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: none; }
#app .next-button:hover { background: #32654f; }
#app .app-guide-actions .next-button { color: #173c35; background: #c2ef88; border-color: #d5f4ac; }
#app .app-guide-actions .next-button:hover { background: #d5f4ac; }
#app .app-guide-download { color: #f1f4e8; font-size: 13px; text-decoration: none; border-bottom: 1px solid #91ada166; padding: 10px 0; }
#app .app-glass-layout { width: min(100% - 80px, 1200px); margin: 72px auto 0; display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 48px; align-items: start; }
#app .app-glass-toc { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 6px; padding: 0 18px 0 0; border: 0; border-right: 1px solid var(--app-line); border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; counter-reset: chapters; }
#app .app-glass-toc__label { padding: 0 10px; margin: 0 0 16px; color: var(--app-soft); font-size: 10px; font-weight: 600; letter-spacing: .16em; }
#app .app-glass-toc__link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px; border: 1px solid transparent; border-radius: 8px; color: var(--app-soft); font-size: 12px; font-weight: 500; line-height: 1.4; transition: none; counter-increment: chapters; }
#app .app-glass-toc__link::before { content: counter(chapters, decimal-leading-zero); font-size: 10px; opacity: .65; }
#app .app-glass-toc__link:hover { color: #244f40; background: #edf3ec; }
#app .app-glass-toc__link.is-active { color: #244f40; background: #e8f1e6; border-color: #c4d8bb; box-shadow: none; }
#app .app-glass-stream { display: grid; min-width: 0; gap: 28px; }
#app .app-glass-sheet { scroll-margin-top: 108px; padding: clamp(24px, 3.4vw, 44px); border: 1px solid var(--app-line); border-radius: 24px; background: #fff; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: none; }
#app .app-glass-sheet:nth-child(even) { background: #eef3eb; }
#app .app-glass-sheet:hover { transform: none; border-color: var(--app-line); box-shadow: none; }
#app .app-glass-sheet__grid, #app .app-glass-sheet--reverse .app-glass-sheet__grid, #app .app-glass-sheet__grid--skins { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: center; gap: 32px; }
#app .app-glass-sheet--reverse .app-glass-sheet__grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
#app .app-glass-sheet__grid > * { min-width: 0; }
#app .app-glass-sheet--reverse .app-glass-copy { order: 2; }
#app .app-glass-sheet--reverse .app-glass-device, #app .app-glass-sheet--reverse .app-glass-skin-rack { order: 1; }
#app .app-glass-copy { padding: 0; }
#app .app-glass-kicker { display: block; width: auto; margin: 0 0 20px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #587b64; font-size: 10px; font-weight: 600; letter-spacing: .13em; backdrop-filter: none; -webkit-backdrop-filter: none; }
#app .app-glass-copy h3 { max-width: 22ch; margin: 0 0 20px; font-family: 'Manrope', sans-serif; font-size: clamp(25px, 2.6vw, 35px); line-height: 1.18; letter-spacing: -.045em; color: var(--app-ink); }
#app .app-glass-copy p { color: var(--app-soft); font-size: 14px; line-height: 1.85; margin-bottom: 24px; }
#app .app-glass-bullets { list-style: none; display: grid; padding: 0; margin: 0; gap: 12px; }
#app .app-glass-bullets li { position: relative; padding-left: 20px; font-size: 12px; line-height: 1.7; color: var(--app-soft); }
#app .app-glass-bullets li::before { content: ''; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: #7ca269; }
#app .app-glass-device { position: relative; box-sizing: border-box; width: min(100%, 280px); margin: 0; justify-self: center; padding: 9px; border-radius: 42px; border: 1px solid #82918b; background: linear-gradient(110deg, #c5cec8, #26342f 6%, #0d1814 46%, #4c5e54 94%, #d5ddd8); box-shadow: inset 0 0 0 2px #a5b1a780, inset 0 0 0 5px #15231c, 0 28px 50px -16px #143a3540, 0 6px 14px #153a3520; backdrop-filter: none; -webkit-backdrop-filter: none; }
#app .app-glass-device:not(.app-glass-device--app-icon)::before { content: ''; position: absolute; z-index: 2; pointer-events: none; inset: 0 -4px; background: linear-gradient(#8c9a92, #263a30) left 84px / 3px 28px no-repeat, linear-gradient(#8c9a92, #263a30) left 122px / 3px 46px no-repeat, linear-gradient(#8c9a92, #263a30) right 118px / 3px 64px no-repeat; }
#app .app-glass-device:not(.app-glass-device--app-icon)::after { content: ''; position: absolute; z-index: 2; pointer-events: none; top: 16px; left: 50%; transform: translateX(-50%); width: 28%; height: 18px; border-radius: 20px; background: #0a100e; box-shadow: inset -8px 0 3px #1c2424; }
#app .app-glass-device img, #app .app-glass-device__video { display: block; width: 100%; max-width: none; height: auto; border: 0; border-radius: 34px; box-shadow: none; }
#app .app-guide-hero__device { width: min(100%, 250px); }
#app .app-glass-device--app-icon { padding: 26px; width: min(100%, 240px); background: #e2eddb; border: 1px solid #cfddc5; border-radius: 50%; box-shadow: none; }
#app .app-glass-device--app-icon::before, #app .app-glass-device--app-icon::after { content: none; }
#app .app-glass-device--app-icon img { width: 100%; max-width: none; border-radius: 0; box-shadow: none; }
#app .app-glass-skin-rack { padding: 0; border: 0; border-radius: 0; background: transparent; gap: 10px; backdrop-filter: none; -webkit-backdrop-filter: none; }
#app .app-glass-skin-cell { border: 1px solid #dce7d5; background: #edf3e8; border-radius: 14px; transition: none; }
#app .app-glass-skin-cell:hover { transform: none; background: #e2edd8; }
#app .app-guide-end { max-width: 640px; margin: 80px auto 0; padding: 0 24px; text-align: center; }
#app .app-guide-end h3 { margin: 0 0 18px; font-family: 'Manrope', sans-serif; font-size: clamp(32px, 4vw, 48px); line-height: 1.12; letter-spacing: -.05em; }
#app .app-guide-end > p:not(.app-glass-kicker) { margin: 0 auto 26px; max-width: 420px; color: var(--app-soft); font-size: 14px; line-height: 1.8; }
#app a:focus-visible { outline: 2px solid #538523; outline-offset: 5px; }
#app .app-glass-intro a:focus-visible { outline-color: #e0ffb6; }
@media (max-width: 1050px) {
  #app .app-glass-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #app .app-glass-toc { z-index: 5; top: 80px; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 10px 0; overflow-x: auto; background: #f7fbfc; border: 0; border-bottom: 1px solid var(--app-line); border-radius: 0; }
  #app .app-glass-toc__label { display: none; }
  #app .app-glass-toc__link { flex: 0 0 auto; min-width: 0; padding: 10px 14px; font-size: 12px; white-space: nowrap; }
  #app .app-glass-sheet { scroll-margin-top: 162px; }
}
@media (max-width: 760px) {
  #app.app-section { padding: 0 0 60px; }
  #app .app-glass-intro { padding: 44px 24px 48px; background-position: 62% center; }
  #app .app-guide-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  #app .app-glass-intro__title { font-size: clamp(39px, 10vw, 58px); }
  #app .app-glass-intro__lead { font-size: 14px; }
  #app .app-guide-hero__device, #app .app-glass-device { width: min(100%, 230px); }
  #app .app-guide-actions { gap: 20px; }
  #app .app-glass-layout { width: calc(100% - 40px); margin-top: 28px; }
  #app .app-glass-toc { top: 72px; }
  #app .app-glass-toc__link { min-height: 44px; }
  #app .app-glass-sheet { padding: 26px 22px; border-radius: 20px; }
  #app .app-glass-sheet__grid, #app .app-glass-sheet--reverse .app-glass-sheet__grid, #app .app-glass-sheet__grid--skins { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  #app .app-glass-sheet--reverse .app-glass-copy, #app .app-glass-sheet--reverse .app-glass-device, #app .app-glass-sheet--reverse .app-glass-skin-rack { order: initial; }
  #app .app-glass-copy h3 { font-size: 27px; }
  #app .app-glass-copy p { font-size: 14px; }
  #app .app-glass-bullets li { font-size: 12px; }
  #app .app-glass-skin-rack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #app .app-guide-end { margin-top: 60px; }
}