/* Telugu Panchangam website. Tokens are the app's locked palette (apps/panchangam/docs/BRAND.md); do not add colours.
   Mood: "the sky, measured for your town". A quiet ink page with one living sky on it: the Sky Ribbon.
   neeli = brand and the one primary action · pasupu = only the sun and good periods (never text) · kavi = only avoid.
   No letter-spacing or text-transform anywhere (Indic scripts break with either). Indic line height >= 1.55. */

@font-face{font-family:'Noto Sans Telugu';font-weight:400;font-display:swap;src:url(/assets/fonts/NotoSansTelugu-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans Telugu';font-weight:400;font-display:swap;src:url(/assets/fonts/NotoSansTelugu-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Sans Telugu';font-weight:400;font-display:swap;src:url(/assets/fonts/NotoSansTelugu-400-telugu.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0C00-0C7F,U+1CDA,U+1CF2,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Sans Telugu';font-weight:600;font-display:swap;src:url(/assets/fonts/NotoSansTelugu-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans Telugu';font-weight:600;font-display:swap;src:url(/assets/fonts/NotoSansTelugu-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Sans Telugu';font-weight:600;font-display:swap;src:url(/assets/fonts/NotoSansTelugu-600-telugu.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0C00-0C7F,U+1CDA,U+1CF2,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Sans Telugu';font-weight:700;font-display:swap;src:url(/assets/fonts/NotoSansTelugu-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans Telugu';font-weight:700;font-display:swap;src:url(/assets/fonts/NotoSansTelugu-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Sans Telugu';font-weight:700;font-display:swap;src:url(/assets/fonts/NotoSansTelugu-700-telugu.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0C00-0C7F,U+1CDA,U+1CF2,U+200C-200D,U+25CC}
@font-face{font-family:'Tiro Telugu';font-weight:400;font-display:swap;src:url(/assets/fonts/TiroTelugu-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Tiro Telugu';font-weight:400;font-display:swap;src:url(/assets/fonts/TiroTelugu-400-telugu.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0C00-0C7F,U+1CDA,U+1CF2,U+200C-200D,U+25CC}

:root{
  color-scheme:light dark;
  --canvas:#F3F5FA; --surface:#FFFFFF; --surface2:#E9EDF6; --ink:#121833; --muted:#4B5472; --hair:#7C859F; --hair-soft:#D9DEEA;
  --neeli:#233A8F; --on-neeli:#FFFFFF; --neeli-c:#E1E7FA; --on-neeli-c:#14235E;
  --pasupu:#E9A21B; --good:#6B4A00; --good-c:#FFF0C7; --on-good-c:#4A3300;
  --kavi:#9A2F22; --kavi-c:#FBE5E0; --on-kavi-c:#5E1A11;
  --chip-on-sky:rgba(255,255,255,.94);
  --shadow:0 1px 2px rgba(18,24,51,.06), 0 6px 18px rgba(18,24,51,.06);
  --script:'Nirmala UI';
  --f-body:'Noto Sans Telugu', var(--script), system-ui, sans-serif;
  --f-disp:'Tiro Telugu', 'Noto Sans Telugu', var(--script), serif;
  --skyline:linear-gradient(90deg, #E79A7E, #96C3EE 30%, #96C3EE 60%, #E79A7E 68%, #0A1030 80%, #0A1030);
}
@media (prefers-color-scheme: dark){
  :root{
    --canvas:#0B0F21; --surface:#151A31; --surface2:#1E2441; --ink:#E7EAF5; --muted:#A3ABC6; --hair:#5F6886; --hair-soft:#2A3150;
    --neeli:#A9B8FF; --on-neeli:#0D1847; --neeli-c:#26336E; --on-neeli-c:#DCE3FF;
    --pasupu:#F2B33D; --good:#F5C45E; --good-c:#3A2C05; --on-good-c:#FFE6A6;
    --kavi:#FF9B8B; --kavi-c:#4A1913; --on-kavi-c:#FFD8D1;
    --shadow:none;
  }
}
/* Scripts the app's fonts do not cover fall back to the phone's Noto font (BRAND "Type"). */
:lang(hi), :lang(mr){--script:'Noto Sans Devanagari','Nirmala UI'}
:lang(ta){--script:'Noto Sans Tamil','Nirmala UI'}
:lang(kn){--script:'Noto Sans Kannada','Nirmala UI'}
:lang(ml){--script:'Noto Sans Malayalam','Nirmala UI'}
:lang(bn){--script:'Noto Sans Bengali','Nirmala UI'}
:lang(gu){--script:'Noto Sans Gujarati','Nirmala UI'}
:lang(or){--script:'Noto Sans Oriya','Nirmala UI'}
:lang(pa){--script:'Noto Sans Gurmukhi','Nirmala UI'}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; background:var(--canvas); color:var(--ink); font:400 17px/1.6 var(--f-body); -webkit-font-smoothing:antialiased; overflow-wrap:anywhere}
h1,h2,h3{font-family:var(--f-body); font-weight:700; line-height:1.4; margin:0; text-wrap:balance}
:lang(en) h2, :lang(en) h3{line-height:1.3}
p{margin:0}
a{color:var(--neeli); text-decoration-thickness:1.5px; text-underline-offset:4px}
a:hover{text-decoration-thickness:2.5px}
a, summary{touch-action:manipulation; -webkit-tap-highlight-color:rgba(35,58,143,.16)}
:focus-visible{outline:3px solid var(--neeli); outline-offset:2px; border-radius:4px}
.num{font-variant-numeric:tabular-nums; white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
/* flex children with text may shrink and wrap (long words in 11 scripts) */
.facts li > span, .verdict > span, .item dt > span, .how > span, .srcline > span, .price > span, .band > div, .ribkey span, .lunar > div{min-width:0}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.icon{width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.icon.sm{width:18px; height:18px}
code{font:600 14px/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace; color:var(--muted); overflow-wrap:anywhere}

.skip{position:absolute; left:16px; top:-100px; z-index:50; background:var(--neeli); color:var(--on-neeli); padding:12px 16px; border-radius:12px; font-weight:600; text-decoration:none}
.skip:focus{top:12px}

.wrap{max-width:1100px; margin:0 auto; padding:0 16px}
@media (min-width:720px){ .wrap{padding:0 24px} }

/* ---------- header ---------- */
.top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding-top:12px; padding-bottom:12px}
.brand{display:flex; align-items:center; gap:10px; min-width:0; min-height:48px; color:var(--ink); text-decoration:none; overflow-wrap:break-word}
.brand svg{flex:none}
.brand b{display:block; font:400 21px/1.35 var(--f-disp)}
.brand small{display:block; font-size:14px; line-height:1.55; color:var(--muted)}
.brand:hover b{text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px}
.logo .lg-bg{fill:var(--neeli)}
.logo .lg-hor{stroke:var(--neeli-c); stroke-width:2; stroke-linecap:round}
.logo .lg-arc{fill:none; stroke:#E9A21B; stroke-width:2.4; stroke-linecap:round}
.logo .lg-sun{fill:#E9A21B; stroke:#121833; stroke-width:1.6}
@media (prefers-color-scheme: dark){ .logo .lg-bg{fill:#26336E} }

.lang{position:relative; flex:none; margin-left:auto}
.lang summary{list-style:none; display:inline-flex; align-items:center; gap:6px; min-height:48px; padding:6px 12px; border:1.5px solid var(--hair); border-radius:24px; background:var(--surface); color:var(--ink); cursor:pointer; font-size:16px; font-weight:600; line-height:1.3}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{border-color:var(--neeli)}
.lang[open] summary{border-color:var(--neeli); background:var(--neeli-c); color:var(--on-neeli-c)}
.lang[open] summary .chev{transform:rotate(180deg)}
.lang ul{position:absolute; right:0; top:calc(100% + 6px); z-index:20; margin:0; padding:6px; list-style:none; width:max-content; min-width:200px; max-width:calc(100vw - 32px); max-height:min(70vh, 640px); overflow-y:auto; background:var(--surface); border:1.5px solid var(--hair); border-radius:14px; box-shadow:0 12px 32px rgba(11,15,33,.2)}
.lang a{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:6px 12px; border-radius:10px; color:var(--ink); text-decoration:none; font-size:17px; line-height:1.55}
.lang a:hover{background:var(--surface2)}
.lang a[aria-current="page"]{background:var(--neeli-c); color:var(--on-neeli-c); font-weight:600}
.lang a span{font-size:14px; color:var(--muted)}
.lang a[aria-current="page"] span{color:var(--on-neeli-c)}

/* ---------- hero ---------- */
.hero{display:grid; gap:24px; grid-template-areas:'text' 'act' 'card' 'facts'; grid-template-columns:minmax(0,1fr); padding-top:12px; padding-bottom:40px}
.h-text{grid-area:text} .h-card{grid-area:card; min-width:0} .h-act{grid-area:act} .h-facts{grid-area:facts}
.hero h1{display:flex; flex-direction:column; gap:0; font-weight:400}
.hero .name{font:400 36px/1.2 var(--f-disp)}
.hero .name-te{font:400 28px/1.6 var(--f-disp); color:var(--muted)}
.hero h1 .name-te:first-child{color:var(--ink); font-size:40px; line-height:1.5}
.hero h1 .name-te:first-child + .name{font-size:26px; color:var(--muted)}
.headline{margin-top:14px; font-size:22px; font-weight:600; line-height:1.5; max-width:30ch}
.lede{margin-top:12px; font-size:18px; line-height:1.65; max-width:58ch}
.cta{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:10px 26px; border-radius:14px; background:var(--neeli); color:var(--on-neeli); font-size:18px; font-weight:600; line-height:1.35; text-decoration:none; text-align:center; transition:box-shadow .2s ease}
.cta:hover{box-shadow:0 0 0 4px var(--neeli-c)}
.cta .icon{fill:currentColor; stroke:none}
.facts{margin:0; padding:0; list-style:none; display:grid}
.facts li{display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-top:1px solid var(--hair-soft); font-size:17px; line-height:1.55}
.facts li:last-child{border-bottom:1px solid var(--hair-soft)}
.facts .icon{margin-top:1px; color:var(--neeli)}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); grid-template-areas:'text card' 'act card' 'facts card'; grid-template-rows:auto auto 1fr; gap:28px 56px; align-items:start; align-content:start; padding-top:36px; padding-bottom:64px}
  .hero .name{font-size:60px}
  .hero .name-te{font-size:34px}
  .hero h1 .name-te:first-child{font-size:64px}
  .hero h1 .name-te:first-child + .name{font-size:34px}
  .headline{font-size:26px}
  .h-card{max-width:520px; justify-self:end; width:100%}
}

/* ---------- SIGNATURE: the Today card with the Sky Ribbon ---------- */
.today{margin:0; background:var(--surface); border:1px solid var(--hair-soft); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
/* the now zone is tinted by the answer: kavi-c while something is to be avoided (BRAND v2), always with icon + word */
.nowzone{padding:8px 14px 10px; background:var(--kavi-c); color:var(--on-kavi-c)}
.toprow{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0 10px; min-height:40px}
.kick{display:flex; align-items:center; gap:6px; font-size:15px; font-weight:600; line-height:1.4}
.kick .live{width:8px; height:8px; border-radius:50%; background:currentColor}
.townchip{display:inline-flex; align-items:center; gap:4px; font-size:15px; line-height:1.4; min-width:0}
.townchip span{min-width:0; overflow-wrap:anywhere}
.verdict{display:flex; align-items:flex-start; gap:10px; margin-top:2px; font-size:30px; font-weight:700; line-height:1.3}
.verdict .v-ic{width:28px; height:28px; margin-top:6px; stroke-width:2.25; color:var(--kavi)}
@media (prefers-color-scheme: dark){ .verdict .v-ic{color:var(--on-kavi-c)} }
.vmeta{margin:2px 0 0 38px; font-size:17px; font-weight:600; line-height:1.5}
.vsub{margin:2px 0 0 38px; font-size:15px; line-height:1.5}
.rib{margin-top:10px}
.ribbon{display:block; width:100%; height:auto; overflow:visible}
.ribbon .below{fill:#0A1030; fill-opacity:.34}
.ribbon .horizon{stroke:#FFFFFF; stroke-opacity:.6; stroke-width:1}
.ribbon .arc-u{fill:none; stroke:#121833; stroke-opacity:.5; stroke-width:5.5; stroke-linecap:round; stroke-linejoin:round}
.ribbon .arc{fill:none; stroke:#F2D08A; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2 4}
.ribbon .arc-gone{fill:none; stroke:var(--pasupu); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.ribbon .tick-u{stroke:#121833; stroke-opacity:.45; stroke-width:3.5; stroke-dasharray:3 3}
.ribbon .tick{stroke:#FFFFFF; stroke-width:1.5; stroke-dasharray:3 3}
.ribbon .ink{fill:currentColor}
.ribbon .tlbl{font:600 14px/1 var(--f-body); fill:currentColor}
.ribbon .nightlbl{font:600 14px/1 var(--f-body); fill:#FFFFFF}
.ribbon .lane{fill:var(--surface); stroke:var(--hair); stroke-opacity:.6}
.ribbon .av{fill:url(#av)}
.ribbon .gd{fill:url(#gd)}
.ribbon .av.act{stroke:var(--kavi); stroke-width:2.5}
.ribbon .av-bg{fill:var(--kavi-c)} .ribbon .av-ln{fill:var(--kavi)}
.ribbon .gd-bg{fill:var(--good-c)} .ribbon .gd-dot{fill:var(--pasupu)}
.ribbon .ink-line{stroke:currentColor; stroke-width:2.5}
.ribbon .sun{fill:var(--pasupu); stroke:#121833; stroke-width:2}
.ribbon .chip{fill:var(--chip-on-sky); stroke:#121833; stroke-opacity:.3}
.ribbon .chip-t{font:700 13px/1 var(--f-body); fill:#121833}
.ribbon .axis{font:600 14px/1 var(--f-body); fill:currentColor}
.ribbon .ax-ic{fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.ribkey{display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:6px; font-size:15px; line-height:1.5}
.ribkey span{display:inline-flex; align-items:center; gap:8px}
.ribkey .sw{flex:none; width:22px; height:14px; border-radius:4px; border:1px solid currentColor}
.ribkey .sw.av{background:repeating-linear-gradient(135deg, var(--kavi) 0 1.6px, transparent 1.6px 4.5px), var(--kavi-c)}
.ribkey .sw.gd{background:radial-gradient(circle, var(--pasupu) 1.6px, transparent 1.8px) 0 0/5px 5px, var(--good-c); border-color:var(--good)}
.lunar{display:flex; gap:12px; align-items:flex-start; padding:14px 14px 16px}
.lunar .moon{flex:none; margin-top:6px}
.moon .moon-d{fill:#4B5472}
.moon .moon-l{fill:#F4E7C4}
.moon .moon-o{fill:none; stroke:var(--hair); stroke-width:1.25}
.lunar .lt{font:400 26px/1.45 var(--f-disp)}
.lunar .lx{margin-top:2px; font-size:16px; line-height:1.5; color:var(--neeli); font-weight:600}
.cap{margin-top:12px; font-size:15px; line-height:1.6; color:var(--muted); max-width:60ch}
@media (prefers-reduced-motion: no-preference){
  /* Today opens: the sun travels its real arc from sunrise to "now", once (BRAND "Motion"). */
  .ribbon .arc-gone{stroke-dasharray:1; animation:travel .9s cubic-bezier(.2,.8,.2,1) .2s both}
  .ribbon .sun{animation:arrive .35s ease-out .95s both; transform-box:fill-box; transform-origin:center}
  @keyframes travel{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
  @keyframes arrive{from{opacity:0; transform:scale(.6)} to{opacity:1; transform:none}}
}

/* ---------- sections ---------- */
.sec{padding-top:40px; padding-bottom:40px; border-top:1px solid var(--hair-soft)}
.sec h2{font-size:28px}
.sec .intro{margin-top:12px; max-width:62ch; color:var(--muted); font-size:17px}
@media (min-width:900px){ .sec{padding-top:56px; padding-bottom:56px} .sec h2{font-size:36px} }

/* what is inside: a ranked list, not a card grid */
.inside{display:grid; grid-template-columns:minmax(0,1fr); gap:0 48px; margin:24px 0 0}
.item{padding:16px 0; border-top:1px solid var(--hair-soft)}
.item dt{display:flex; align-items:center; gap:12px; font-size:21px; font-weight:700; line-height:1.4}
.item dt .icon{width:40px; height:40px; padding:8px; border-radius:20px; background:var(--neeli-c); color:var(--on-neeli-c)}
.item dd{margin:6px 0 0 52px; max-width:62ch}
@media (min-width:900px){ .inside{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .item:first-child{grid-column:1 / -1} .item:first-child dd{max-width:80ch} }
@media (max-width:420px){ .item dd{margin-left:0} }

/* your town */
.split{display:grid; gap:24px; align-items:start}
@media (min-width:900px){ .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px} }
.how{display:flex; gap:10px; align-items:flex-start; margin-top:16px; max-width:62ch}
.how .icon{margin-top:4px; color:var(--neeli)}
.towns{margin:0; background:var(--surface); border:1px solid var(--hair-soft); border-radius:16px; box-shadow:var(--shadow); padding:8px 0 4px; overflow:hidden}
.towns{overflow-x:auto}
.towns table{width:100%; table-layout:fixed; border-collapse:collapse; font-size:16px; line-height:1.45}
.towns th{overflow-wrap:anywhere}
.towns thead th:nth-child(1){width:38%} .towns thead th:nth-child(2){width:24%} .towns thead th:nth-child(3){width:38%}
.towns th, .towns td{padding:12px 10px; text-align:left; vertical-align:baseline}
.towns th:first-child{padding-left:16px} .towns td:last-child, .towns th:last-child{padding-right:16px; text-align:right}
.towns thead th{font-size:14px; font-weight:600; color:var(--muted); padding-top:8px; padding-bottom:8px}
.towns tbody tr{border-top:1px solid var(--hair-soft)}
.towns tbody th{font-weight:600}
.towns td{font-weight:600; font-size:16px}
.towns tr.here{background:var(--neeli-c); color:var(--on-neeli-c)}
.towns figcaption{padding:10px 16px 12px; font-size:14px; line-height:1.55; color:var(--muted); border-top:1px solid var(--hair-soft)}

/* printed panchangam */
.diff{margin-top:20px; padding:4px 0 4px 16px; border-left:3px solid var(--neeli); max-width:68ch}
.diff p + p{margin-top:12px}
.srcline{display:flex; gap:8px; align-items:flex-start; padding:10px 14px; border-radius:12px; background:var(--neeli-c); color:var(--on-neeli-c); font-weight:600; font-size:16px; line-height:1.55}
.srcline .icon{margin-top:3px}

/* ads */
.adsbox{max-width:760px}
.adsbox p{margin-top:12px; max-width:66ch}
.price{display:flex; gap:16px; align-items:flex-start; padding:16px; border-radius:14px; background:var(--surface); border:1px solid var(--hair-soft)}
.price .num{font:400 34px/1.2 var(--f-disp); color:var(--neeli)}
.adsbox .price{margin-top:20px}
@media (max-width:420px){ .price{flex-direction:column; gap:4px} }

.band{display:flex; gap:14px; align-items:flex-start; padding:20px 16px; border-radius:16px; background:var(--surface); border:1px solid var(--hair-soft)}
.band .icon{margin-top:4px; color:var(--neeli)}
.band h2{font-size:23px}
.band p{margin-top:6px; max-width:62ch}
.band a{display:inline-flex; align-items:center; min-height:48px; font-weight:600}
.bands{display:grid; grid-template-columns:minmax(0,1fr); gap:16px}
@media (min-width:900px){ .bands{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .band{padding:24px} }

/* ---------- legal pages: a quiet page with the day's sky along its top edge ---------- */
.doc{position:relative; max-width:760px; margin:8px auto 48px; background:var(--surface); border:1px solid var(--hair-soft); border-radius:16px; box-shadow:var(--shadow); padding:30px 16px 28px; overflow:hidden}
.doc::before{content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--skyline)}
@media (min-width:720px){ .doc{padding:44px 48px 44px} }
.doc h1{font-size:32px; line-height:1.35}
.doc .meta{margin-top:8px; font-size:15px; color:var(--muted)}
.doc .intro{margin-top:16px; font-size:18px; line-height:1.65}
.doc h2{font-size:22px; margin-top:32px}
.doc p, .doc li{max-width:68ch}
.doc p{margin-top:10px}
.doc ul, .doc ol{margin:10px 0 0; padding-left:22px}
.doc li{margin-top:8px; padding-left:4px}
.doc ol li::marker{font-weight:700}
.doc .note{font-size:15px; color:var(--muted)}
.doc .warn{display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding:12px 14px; border-radius:12px; background:var(--kavi-c); color:var(--on-kavi-c); font-weight:600; line-height:1.55}
.doc .warn .icon{margin-top:1px; color:var(--kavi)}
@media (prefers-color-scheme: dark){ .doc .warn .icon{color:var(--on-kavi-c)} }
.perms li span{display:inline}
.perms code{display:inline-block; margin-left:2px}
.short{margin-top:20px; padding:4px 16px 16px; border-radius:12px; background:var(--neeli-c); color:var(--on-neeli-c)}
.short h2{margin-top:12px; font-size:20px}
.short ul{padding-left:22px}
.short li{margin-top:8px}
.out{display:inline-flex; align-items:center; gap:6px; min-height:48px; max-width:100%; overflow-wrap:anywhere}
.out .icon{width:16px; height:16px}
.mail{display:inline-flex; align-items:center; gap:10px; max-width:100%; min-height:52px; margin-top:12px; padding:8px 18px; border-radius:14px; border:1.5px solid var(--neeli); color:var(--neeli); font-weight:600; font-size:18px; text-decoration:none; overflow-wrap:anywhere}
.mail:hover{background:var(--neeli-c); color:var(--on-neeli-c)}
.mail span{min-width:0}
.doc .go{display:inline-flex; align-items:center; min-height:48px; font-weight:600}
.doc .home{display:inline-flex; align-items:center; min-height:48px; margin-top:16px; font-weight:600}

/* ---------- footer ---------- */
.foot{padding-top:0; padding-bottom:32px}
.skyline{height:6px; margin-bottom:20px; border-radius:3px; background:var(--skyline)}
.foot ul{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:4px 20px}
.foot li{max-width:100%}
.foot a{display:inline-flex; align-items:center; min-height:48px; font-weight:600; overflow-wrap:anywhere}
.foot a[aria-current="page"]{color:var(--ink); text-decoration:none}
.foot p{margin-top:12px; font-size:14px; color:var(--muted); line-height:1.55}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* generated by lib/build.js: the example day's sky, sunrise to next sunrise */
:root{--skyline:linear-gradient(90deg, #D29083 0.0%, #96C3EE 8.3%, #90BFEC 16.7%, #8BBBEA 25.0%, #88B9E9 33.3%, #8BBBEA 41.7%, #90BEEC 50.0%, #95C2EE 58.3%, #F2C28B 66.7%, #0A1030 75.0%, #0A1030 83.3%, #0A1030 91.7%, #D49183 100.0%)}