:root { --ink:#173f3a; --paper:#f7f5ed; --red:#be4e36; --gold:#d5a441; --line:#d9d8ca; --muted:#6d746c; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Serif Tibetan","Source Serif 4",serif; font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; } button { font:inherit; color:inherit; cursor:pointer; }
.site-header { height:78px; padding:0 clamp(24px,6vw,94px); display:flex; align-items:center; justify-content:space-between; background:var(--paper); border-bottom:1px solid var(--line); }
.header-actions { display:flex; align-items:center; gap:13px; }.language-switcher { display:flex; align-items:center; gap:6px; }.language-label { color:var(--muted); font-size:12px; white-space:nowrap; }.language-switcher select { height:34px; padding:0 25px 0 9px; border:1px solid var(--line); border-radius:17px; outline-color:var(--red); background:var(--paper); color:var(--ink); font:600 12px/1 "Noto Serif Tibetan","Source Serif 4",serif; cursor:pointer; }
.brand { font-size:22px; font-weight:700; line-height:1; } .brand span { color:var(--red); } nav { display:flex; gap:34px; font-size:14px; } nav a { border-bottom:1px solid transparent; } nav a:hover { border-color:var(--red); }.profile { width:34px; height:34px; padding:0; border-radius:50%; border:0; background:var(--ink); color:#fff; }
.hero { min-height:500px; position:relative; overflow:hidden; padding:76px clamp(24px,9vw,150px); color:#fff; background:linear-gradient(90deg, rgba(18,57,53,.97) 0%,rgba(18,57,53,.91) 48%,rgba(18,57,53,.56) 100%), url("https://images.unsplash.com/photo-1497633762265-9d179a990aa6?auto=format&fit=crop&w=1800&q=85") center/cover; display:flex; align-items:center; justify-content:space-between; gap:48px; }
.hero-copy { max-width:600px; }.eyebrow { margin:0 0 8px; color:var(--red); font-size:13px; font-weight:700; letter-spacing:0; }.hero .eyebrow { color:#edba55; }.hero h1 { margin:0; font-size:clamp(38px,4vw,62px); line-height:1.28; font-weight:600; }.hero-text { max-width:510px; margin:20px 0 28px; color:#e1ece5; font-size:17px; }.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }.button { display:inline-flex; align-items:center; gap:18px; min-height:44px; padding:7px 16px; border:1px solid rgba(255,255,255,.55); font-size:14px; }.button.primary { border-color:var(--gold); background:var(--gold); color:var(--ink); font-weight:700; }.button.quiet:hover { background:rgba(255,255,255,.12); }
.today-card { width:235px; padding:20px; position:relative; border:1px solid rgba(255,255,255,.32); background:rgba(11,42,39,.63); backdrop-filter:blur(8px); }.card-top { display:flex; justify-content:space-between; color:#eec365; font-size:12px; }.sun { font-size:22px; line-height:1; }.today-card p { margin:12px 0 3px; font-size:17px; }.today-card small { color:#d3e2db; font-size:12px; }.play { width:34px; height:34px; padding:0 0 0 2px; border:0; border-radius:50%; background:#e8c15e; color:var(--ink); position:absolute; right:18px; bottom:17px; }
.section { padding:82px clamp(24px,9vw,150px); }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:29px; }.section h2 { margin:0; font-size:30px; line-height:1.45; font-weight:600; }.icon-button { width:39px; height:39px; border:1px solid var(--ink); background:transparent; font-size:28px; line-height:1; }.resource-grid { display:grid; grid-template-columns:repeat(5, 1fr); border:1px solid var(--line); }.resource { min-height:153px; padding:19px 17px; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--line); transition:.2s; }.resource:last-child { border-right:0; }.resource:hover { background:#eeece1; }.resource-icon { width:29px; height:29px; display:grid; place-items:center; font-size:14px; border:1px solid currentColor; }.article { color:#99633f; }.video { color:#a64b44; }.image { color:#617c54; }.audio { color:#6e5b94; }.book { color:#277a75; }.resource strong, .ai-card strong { display:block; margin-top:6px; font-size:16px; font-weight:600; color:var(--ink); }.resource small, .ai-card small { display:block; color:var(--muted); font-size:12px; }.resource b, .ai-card b { align-self:flex-end; font-size:18px; font-weight:400; }
.ai-section { background:#eae8dc; display:grid; grid-template-columns:minmax(250px,.83fr) 1.4fr; gap:70px; }.ai-intro p:not(.eyebrow) { color:#526660; font-size:14px; }.text-link { border-bottom:1px solid var(--ink); font-size:14px; }.text-link b { margin-left:8px; }.ai-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.ai-card { min-height:129px; padding:17px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid #c7c7b9; background:#f7f5ed; transition:.2s; }.ai-card:hover { transform:translateY(-3px); box-shadow:4px 5px 0 rgba(23,63,58,.13); }.ai-mark { font-family:"Source Serif 4",serif; font-size:28px; line-height:1; }.chatgpt .ai-mark { color:#147a67; }.gemini .ai-mark { color:#5477ca; }.grok .ai-mark { color:#111; }.add-tool { text-align:left; border-style:dashed; background:transparent; }.add-tool .ai-mark { color:var(--red); }
.paths { padding-bottom:88px; }.path-list { border-top:1px solid var(--line); }.path-list article { display:grid; grid-template-columns:60px minmax(260px,1fr) minmax(120px,.7fr) 48px; align-items:center; column-gap:18px; padding:23px 0; border-bottom:1px solid var(--line); }.number { color:var(--red); font-size:14px; }.path-list h3 { margin:0; font-size:18px; font-weight:600; }.path-list p { margin:3px 0 0; color:var(--muted); font-size:13px; }.progress { display:block; height:4px; background:#d8d8ca; }.progress i { display:block; height:100%; background:var(--red); } .path-list article > span:last-child { font-size:13px; }
footer { display:flex; justify-content:space-between; gap:20px; padding:21px clamp(24px,9vw,150px); background:var(--ink); color:#fff; font-size:14px; } footer span { color:#b7cbc1; }
.auth-dialog, .settings-dialog { width:min(92vw,505px); padding:0; border:0; background:var(--paper); color:var(--ink); box-shadow:0 20px 60px rgba(0,0,0,.28); } dialog::backdrop { background:rgba(12,35,32,.68); backdrop-filter:blur(3px); }.auth-form, .settings-form { padding:37px; position:relative; }.dialog-close { width:32px; height:32px; position:absolute; right:17px; top:15px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:50%; background:transparent; font-family:Arial,Helvetica,sans-serif; font-size:24px; font-weight:400; line-height:1; }.dialog-close:hover { border-color:var(--red); background:#f0e5dc; color:var(--red); }.dialog-close:focus-visible { outline:2px solid var(--red); outline-offset:2px; }.dialog-copy { margin:5px 0 25px; color:var(--muted); font-size:14px; }.auth-form label, .settings-form > label, .settings-grid > label { display:block; margin:0 0 16px; font-size:14px; font-weight:600; }.auth-form input, .settings-form input:not([type="radio"]), .settings-form select { display:block; width:100%; height:43px; margin-top:5px; padding:7px 10px; border:1px solid #bfc1b6; border-radius:0; outline-color:var(--red); background:#fffef9; color:var(--ink); font:inherit; font-size:14px; }.submit { width:100%; justify-content:space-between; margin-top:10px; }.form-note { margin:16px 0 0; color:var(--muted); font-size:12px; }.settings-dialog { width:min(92vw,670px); }.settings-heading { display:flex; justify-content:space-between; align-items:start; margin-bottom:25px; padding-right:38px; }.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }.avatar-field { position:relative; }.avatar-field input { position:absolute; opacity:0; pointer-events:none; }.avatar-field span { display:flex; align-items:center; justify-content:center; height:43px; margin-top:5px; border:1px dashed #a9aea2; background:#fffef9; font-weight:400; }.avatar-preview { width:68px; height:68px; align-self:end; justify-self:end; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:var(--ink); color:#fff; font-size:22px; }.avatar-preview img { width:100%; height:100%; object-fit:cover; } fieldset { margin:12px 0 15px; padding:14px 0 4px; border:0; border-top:1px solid var(--line); } legend { padding-right:8px; font-size:14px; font-weight:600; }.swatches { display:flex; flex-wrap:wrap; gap:12px; }.swatches input { position:absolute; opacity:0; }.swatches label { display:flex; align-items:center; gap:6px; padding:4px 7px; border:1px solid transparent; font-size:12px; }.swatches label::before { content:""; width:18px; height:18px; border-radius:50%; background:var(--swatch); }.swatches input:checked + label { border-color:var(--ink); }.profile.has-avatar { overflow:hidden; color:transparent; background:#fff; }.profile.has-avatar img { width:100%; height:100%; object-fit:cover; }
.toast { position:fixed; z-index:20; left:50%; bottom:23px; max-width:calc(100vw - 38px); padding:10px 16px; transform:translate(-50%,24px); opacity:0; pointer-events:none; background:var(--ink); color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.2); font-size:14px; transition:opacity .22s ease,transform .22s ease; }.toast.show { opacity:1; transform:translate(-50%,0); }.play.is-playing { animation:play-pulse 1.2s infinite; background:#fff; }.button:active,.icon-button:active,.profile:active,.resource:active,.ai-card:active { transform:scale(.97); } dialog[open] { animation:dialog-in .24s ease-out; } @keyframes dialog-in { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } } @keyframes play-pulse { 50% { box-shadow:0 0 0 7px rgba(232,193,94,.2); } }
@media (max-width:800px) { .site-header { height:64px; }.site-header nav { display:none; }.header-actions { gap:9px; }.language-switcher { gap:4px; }.language-label { font-size:11px; }.language-switcher select { height:31px; padding-left:8px; font-size:11px; }.hero { min-height:570px; padding-top:60px; align-items:flex-start; flex-direction:column; }.today-card { width:min(100%,330px); }.section { padding-top:58px; padding-bottom:58px; }.resource-grid { grid-template-columns:1fr 1fr; }.resource { min-height:135px; border-bottom:1px solid var(--line); }.resource:nth-child(2n) { border-right:0; }.resource:last-child { border-bottom:0; }.ai-section { grid-template-columns:1fr; gap:34px; }.path-list article { grid-template-columns:38px 1fr 42px; row-gap:8px; }.path-list .progress { grid-column:2; }.path-list article > span:last-child { grid-column:3; grid-row:1 / span 2; align-self:center; } }
@media (max-width:430px) { .hero h1 { font-size:38px; }.hero-text { font-size:15px; }.section h2 { font-size:25px; }.resource-grid, .ai-grid { grid-template-columns:1fr; }.resource, .resource:nth-child(2n) { min-height:106px; border-right:0; }.resource:last-child { border-bottom:0; } .resource-icon { float:left; }.path-list article { grid-template-columns:34px 1fr 38px; column-gap:9px; }.path-list h3 { font-size:15px; }.path-list p { font-size:11px; } footer { flex-direction:column; gap:4px; } }
@media (max-width:430px) { .auth-form, .settings-form { padding:28px 21px; }.settings-grid { grid-template-columns:1fr 68px; gap:0 12px; }.settings-grid > label:nth-child(2) { grid-column:1 / -1; }.avatar-field { grid-row:2; }.avatar-preview { grid-column:2; grid-row:2; }.swatches { gap:5px; } }

/* Editorial refinements */
.hero { min-height:530px; }
.hero::after { content:""; position:absolute; right:8%; top:0; bottom:0; width:1px; background:rgba(238,195,101,.37); }
.hero-pattern { position:absolute; z-index:0; right:11%; top:35px; color:rgba(235,198,106,.28); font-size:73px; line-height:1.1; writing-mode:vertical-rl; }
.hero h1 { font-family:"Jomolhari","Noto Serif Tibetan",serif; font-weight:400; letter-spacing:0; }
.hero-copy,.today-card { position:relative; z-index:1; }
.hero-meta { display:flex; align-items:center; gap:11px; margin-top:32px; color:#c9d9d1; font-size:12px; }.hero-meta b { color:#f1cc6d; font-size:15px; font-weight:600; }.hero-meta i { height:18px; width:1px; background:rgba(255,255,255,.35); }
.resource-grid { box-shadow:0 8px 30px rgba(31,55,44,.05); }.resource:hover { box-shadow:inset 0 3px 0 currentColor; }
.library-note { display:flex; align-items:center; gap:15px; margin-top:18px; padding:0 1px; color:var(--muted); font-size:13px; }.library-note p { flex:1; margin:0; }.library-note a { border-bottom:1px solid var(--line); color:var(--ink); white-space:nowrap; }.ornament { color:var(--gold); font-size:21px; }
.quote-band { padding:75px 24px; color:#f7f5ed; text-align:center; background:var(--ink); }.quote-band div { max-width:820px; margin:auto; }.quote-band span { display:block; height:24px; color:var(--gold); font-family:"Source Serif 4",serif; font-size:46px; line-height:1; }.quote-band p { margin:15px 0 7px; font-size:clamp(20px,2.5vw,31px); line-height:1.55; }.quote-band small { color:#aec4b9; font-size:13px; }
@media (max-width:800px) { .hero::after { right:7%; }.hero-pattern { right:10%; } }
@media (max-width:430px) { .hero-meta { gap:7px; font-size:10px; }.hero-meta b { font-size:13px; }.library-note { align-items:flex-start; flex-wrap:wrap; }.library-note p { flex-basis:75%; } }

.reading-controls { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.reading-controls label { font-size:13px; font-weight:600; }.reading-controls output { float:right; color:var(--red); font-weight:400; }.reading-controls input { width:100%; height:auto; margin:8px 0 0; accent-color:var(--red); }.weekly-quote { display:block; margin:0 0 2px; font-size:14px; font-weight:600; }.weekly-quote textarea { display:block; resize:vertical; width:100%; margin-top:6px; padding:9px 10px; border:1px solid #bfc1b6; outline-color:var(--red); background:#fffef9; color:var(--ink); font:inherit; font-size:14px; line-height:1.6; }
main > section:not(.hero) { animation:rise-in .6s both; animation-timeline:view(); animation-range:entry 4% cover 26%; }.resource,.ai-card,.path-list article { transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }.path-list article:hover { transform:translateX(7px); background:#efede2; }.quote-band p { transition:opacity .28s ease, transform .28s ease; }.quote-band p.updating { opacity:0; transform:translateY(-5px); } @keyframes rise-in { from { opacity:.35; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
@media (max-width:430px) { .reading-controls { grid-template-columns:1fr; gap:13px; } }