:root {
  --page: #071411;
  --page-deep: #030a08;
  --panel: #0d211b;
  --panel-deep: #06100d;
  --emerald: #4df5b0;
  --cyan: #7fe7ff;
  --text: #f1fff8;
  --muted: #a7c8bb;
  --line: rgba(77, 245, 176, .2);
  --warning: #ffd278;
  --shadow: 0 18px 48px rgba(0, 0, 0, .34);
}
* { box-sizing: border-box; }
html { background: #111815; scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: radial-gradient(circle at 50% 0%, rgba(77,245,176,.08), transparent 30%), #111815; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.58; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.app-shell { position: relative; width: 100%; max-width: 480px; min-height: 100vh; margin: 0 auto; overflow: hidden; padding-bottom: calc(76px + env(safe-area-inset-bottom)); background: var(--page); box-shadow: var(--shadow); }
.topbar { position: sticky; z-index: 30; top: 0; display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; min-height: 62px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: rgba(3,10,8,.95); backdrop-filter: blur(14px); }
.menu-button, .drawer-close { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 13px; color: var(--emerald); background: var(--panel); font: inherit; font-size: 1.2rem; cursor: pointer; }
.brand { min-width: 0; color: var(--emerald); font-size: 1.55rem; font-style: italic; font-weight: 950; letter-spacing: -.055em; text-shadow: 0 0 18px rgba(77,245,176,.32); }
.auth-actions { display: flex; gap: 5px; }
.auth-link { display: grid; min-height: 40px; padding: 0 10px; place-items: center; border: 1px solid var(--emerald); border-radius: 999px; font-size: .66rem; font-weight: 850; white-space: nowrap; }
.auth-link.primary { color: #042017; background: var(--emerald); }
.drawer { --shell-gutter: max(0px, calc((100vw - 480px) / 2)); position: fixed; z-index: 60; top: 0; bottom: 0; left: max(0px, calc(50% - 240px)); width: min(88vw, 350px); overflow-y: auto; padding: 18px; border-right: 1px solid var(--line); background: rgba(3,10,8,.99); transform: translateX(calc(-110% - var(--shell-gutter))); transition: transform .2s ease; box-shadow: 18px 0 48px rgba(0,0,0,.42); }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.drawer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.drawer-nav a { display: flex; min-height: 48px; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: .72rem; font-weight: 800; }
.drawer-nav a[aria-current="page"] { color: #042017; background: var(--emerald); }
.section-nav { display: flex; gap: 7px; overflow-x: auto; padding: 8px 10px; scrollbar-width: none; }
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a { display: inline-flex; min-height: 36px; flex: 0 0 auto; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--panel); font-size: .65rem; font-weight: 850; white-space: nowrap; }
.section-nav a[aria-current="page"] { color: #042017; border-color: var(--emerald); background: var(--emerald); }
main { padding: 0 10px 18px; }
.breadcrumb { display: flex; gap: 6px; margin: 4px 2px 9px; color: var(--muted); font-size: .68rem; }
.breadcrumb a { color: var(--emerald); }
.page-hero { position: relative; overflow: hidden; padding: 22px 16px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(90deg, rgba(2,10,7,.97), rgba(2,10,7,.78) 58%, rgba(2,10,7,.3)), url("/static/windd/windd-hero-mobile.webp") center/cover no-repeat; }
.eyebrow { margin: 0 0 7px; color: var(--emerald); font-size: .65rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 390px; margin: 0; font-size: clamp(1.7rem, 7.8vw, 2.25rem); line-height: 1.06; letter-spacing: -.045em; }
.lead { max-width: 365px; margin: 10px 0 15px; color: #c5ddd3; font-size: .82rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.primary-cta, .secondary-cta { display: grid; min-height: 46px; min-width: 138px; padding: 8px 13px; place-items: center; border: 1px solid var(--emerald); border-radius: 999px; font-size: .72rem; font-weight: 900; }
.primary-cta { color: #042017; background: var(--emerald); }
.secondary-cta { background: rgba(3,10,8,.74); }
.page-hero small { display: block; margin-top: 11px; color: var(--warning); font-size: .66rem; font-weight: 800; }
.quick-summary, .faq-section, .related-section { margin-top: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); }
.quick-summary h2, .faq-section h2, .related-section h2 { margin: 0 0 10px; font-size: 1.16rem; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.summary-card { min-width: 0; padding: 9px 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-deep); }
.summary-card b { color: var(--emerald); }
.summary-card p { margin: 5px 0 0; color: var(--muted); font-size: .67rem; line-height: 1.4; }
.article-body { display: grid; gap: 10px; margin-top: 11px; }
.topic-section { padding: 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); }
.topic-section h2 { margin: 0 0 8px; padding-left: 10px; border-left: 4px solid var(--emerald); font-size: 1.18rem; line-height: 1.25; }
.topic-section p { margin: .75em 0; color: #d5ece2; font-size: .82rem; }
.topic-section ul { margin: .8em 0 0; padding-left: 1.15rem; color: var(--muted); font-size: .77rem; }
.topic-section li + li { margin-top: .35em; }
.reading-note { padding: 9px 10px; border-left: 3px solid var(--cyan); background: rgba(127,231,255,.05); }
.reading-note strong { color: var(--cyan); }
.notice-card { margin-top: 11px; padding: 13px; border: 1px solid rgba(255,210,120,.23); border-radius: 15px; color: var(--muted); background: rgba(255,210,120,.06); font-size: .76rem; }
.notice-card strong { color: var(--warning); }
.notice-card p { margin: 6px 0 0; }
.faq-item { padding: 10px 0; border-top: 1px solid var(--line); }
.faq-item h3 { margin: 0; color: var(--text); font-size: .88rem; }
.faq-item p { margin: 5px 0 0; color: var(--muted); font-size: .77rem; }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.related-card { display: grid; min-height: 84px; align-content: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-deep); }
.related-card > span { color: var(--emerald); font-size: 1rem; }
.related-card strong { margin-top: 4px; font-size: .8rem; }
.related-card small { color: var(--muted); font-size: .63rem; }
.site-footer { margin: 0 10px 14px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; color: var(--muted); background: var(--panel-deep); font-size: .7rem; text-align: center; }
.site-footer strong { color: var(--emerald); font-size: 1rem; }
.site-footer p { margin: 5px 0 0; }
.bottom-nav { position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(100%, 480px); min-height: 64px; margin: 0 auto; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(3,10,8,.97); backdrop-filter: blur(14px); }
.nav-item { display: grid; min-height: 56px; place-items: center; align-content: center; gap: 2px; color: var(--muted); font-size: .58rem; font-weight: 800; text-align: center; }
.nav-item b { color: var(--emerald); font-size: 1rem; line-height: 1; }
@media (max-width: 360px) {
  .auth-link { padding: 0 7px; font-size: .59rem; }
  .summary-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .drawer { transition: none; }
}