/* 天光 · life.css — design system and shell (docs/LIFE.md §3, §6.1, §8, §9 无边). Loads after exam.css. Fonts: life/fonts (OFL). */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-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:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-latin-italic.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}
:root{--f-display:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}

/* 1. tokens: the host's names, new values (as specific as the host's theme selectors, and later). --sky-* / --on-sky* are
fallbacks: the sky writes them inline on :root. html[data-theme] is dark | light only: 天色 (§9.1 rule 5, html[data-look]) decides
it — 深 and 永远是夜晚 are dark, 亮 follows the sky (light by day, dark at dusk and night). --air-* are the inks on the world. */
:root,:root[data-theme]{
--f-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
--f-cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","WenQuanYi Zen Hei",sans-serif;
--f-display-zh:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,var(--f-cjk);
--f-serif:var(--f-display-zh);--f-hand:var(--f-display);
--ease:cubic-bezier(.2,.8,.2,1);
--r-xs:8px;--r-sm:12px;--r-md:14px;--r-lg:18px;--r-xl:22px;--r-2xl:26px;--r-3xl:30px;--r-btn:999px;--r-opt:16px;
--label-ls:.16em;
--pri:var(--now);--pri-ink:var(--on-now);--pri-line:transparent;--pri-glow:0 10px 26px -12px var(--now-glow),inset 0 1px 0 rgba(255,255,255,.34);
--glow-now:0 0 26px -8px var(--now-glow);--glow-pill:0 0 18px -6px var(--now-glow);--glow-ok:0 0 18px -6px var(--lamp-glow);
--link:var(--blueprint);
--sheen:none;--card-hl:none;--atmo:none;--atmo-d:none;--stars:none;--stars-m:none;--speckle:none;--clouds:none;--sky-grad:none;--halo-core:transparent;--halo-haze:transparent;
--tape-bg:repeating-linear-gradient(-58deg,rgba(255,255,255,.22) 0 2px,rgba(255,255,255,0) 2px 6px),var(--tape);
--setup-line:var(--line);--tip-edge:none;--nav-cur:none;
--mk-bar:none;--mk-moon:none;--mk-dot:radial-gradient(circle at 72% 30%,transparent 2.7px,var(--now) 3.2px);--mk-dot-s:8px;
--ui-accent:var(--now-ink);--now-line:var(--now);--now-edge:inset 3px 0 0 var(--now);
--lf-rail-w:268px;--lf-col:1000px;--lf-read:40rem;
--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238C86A8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* dark: 深 (the default), 永远是夜晚, and 亮 after dusk */
:root,:root[data-theme="dark"]{
--paper:#1E1638;--sheet:#19163F;--sheet-solid:#19163F;--raised:#241F52;
--ink:#FFF8FB;--ink-2:#DDD4F2;--ink-3:#B1A7D2;
--line:rgba(255,255,255,.12);--rule:rgba(255,255,255,.22);--ctl:rgba(221,212,242,.46);
--fill:rgba(255,255,255,.07);--fill-2:rgba(255,255,255,.12);--field:rgba(255,255,255,.055);
--hi:rgba(255,200,105,.22);--on-ink:#1E1638;--tape:rgba(255,179,167,.52);
--ok:#FFC869;--ok-soft:rgba(255,200,105,.16);--red:#FF8A7A;--red-soft:rgba(255,138,122,.14);
--c-l:#93C1FF;--c-r:#7FDCB6;--c-w:#D9ABFF;--c-s:#FFB677;
--moon:#FFB3A7;--moon-ink:#FFB3A7;--moon-core:#FFE9E4;--lamp:#FFC869;--lamp-ink:#FFC869;--lamp-glow:rgba(255,200,105,.38);
--blueprint:#AFA8FF;--link-line:rgba(175,168,255,.5);--cloud:#A68CDB;--sky-1:#1E1638;--sky-2:#2A2458;--haze:#5A4290;
--now:#FFB3A7;--now-ink:#FFB3A7;--on-now:#221A3D;--now-glow:color-mix(in srgb,var(--now) 60%,transparent);
--done:var(--lamp);--done-fill:var(--lamp);--bar:var(--lamp);
--fl-p:var(--lamp);--fl-c:#FFF1D6;--fl-dim-p:#3B2F6B;--fl-dim-c:#483A7C;--fl-dim-o:1;--fl-dim-f:none;--fl-glow:drop-shadow(0 0 2.5px var(--lamp-glow));
--tip:rgba(255,200,105,.12);--hi-now:color-mix(in srgb,var(--now) 16%,transparent);
--mark-now:linear-gradient(100deg,transparent 3%,rgba(255,179,167,.34) 5%,rgba(255,179,167,.34) 95%,transparent 98%) 0 92%/100% 22% no-repeat;
--focus:#FFE0A3;--focus-ring:rgba(255,224,163,.22);
--shadow-1:0 14px 34px -16px rgba(5,3,22,.75);--shadow-2:0 34px 90px -28px rgba(5,3,22,.82);--scrim:rgba(10,7,32,.55);
--glass:rgba(22,18,58,.72);--glass-sheet:rgba(16,13,46,.7);
--note:#F7E7B7;--note-ink:#2B2340;--note-ink-2:#5A4F70;
--scrollbar:rgba(255,255,255,.3) transparent;--faded:.8;
--sky-top:#0E1A4F;--sky-mid:#3A2E86;--sky-low:#7E4585;--sky-glow:#FFB3A7;--sky-stars:1;
--on-sky:#FFFFFF;--on-sky-2:rgba(255,255,255,.84);--on-sky-shadow:0 1px 14px rgba(8,6,40,.45);--sky-scrim:rgba(8,6,32,.42);--tod:dusk;
--air-veil:rgba(9,7,30,.56);--air-ink-2:#EFE9FB;--air-ink-3:#D6CEEC;--air-dim:rgba(255,248,251,.78);--air-line:rgba(255,248,251,.45);
--air-sh:0 1px 2px rgba(6,4,26,.34),0 0 18px rgba(6,4,26,.46);
}
/* light: 亮 by day */
:root[data-theme="light"]{
--paper:#F7F4FF;--sheet:#FFFDF9;--sheet-solid:#FFFDF9;--raised:#FFFFFF;
--ink:#1D1A33;--ink-2:#4A4466;--ink-3:#69627F;
--line:rgba(29,26,51,.12);--rule:rgba(29,26,51,.22);--ctl:rgba(29,26,51,.5);
--fill:rgba(29,26,51,.05);--fill-2:rgba(29,26,51,.09);--field:#FFFFFF;
--hi:rgba(255,205,90,.45);--on-ink:#FFFFFF;--tape:rgba(255,160,146,.55);
--ok:#9A5B00;--ok-soft:rgba(242,169,59,.16);--red:#C93C32;--red-soft:rgba(201,60,50,.08);
--c-l:#2D67B0;--c-r:#177E5B;--c-w:#8A48BE;--c-s:#A85D0C;
--moon:#E0645A;--moon-ink:#B4433B;--moon-core:#FBD9D3;--lamp:#F2A93B;--lamp-ink:#9A5B00;--lamp-glow:rgba(242,169,59,.3);
--blueprint:#5B4FD8;--link-line:rgba(91,79,216,.35);--cloud:#B3A8DA;--sky-1:#F7F4FF;--sky-2:#ECE8FA;--haze:#D8D3EE;
--now:#F5B544;--now-ink:#9A5B00;--on-now:#231A3E;--now-glow:color-mix(in srgb,var(--now) 60%,transparent);--now-line:#B7730C;
--done:#B7730C;--done-fill:#C98212;--bar:#C98212;
--fl-p:#E0463C;--fl-c:#F6C945;--fl-dim-p:#E0463C;--fl-dim-c:#F6C945;--fl-dim-o:.16;--fl-dim-f:grayscale(1);--fl-glow:none;
--tip:rgba(242,169,59,.14);--hi-now:color-mix(in srgb,var(--now) 16%,transparent);
--mark-now:linear-gradient(100deg,transparent 3%,var(--hi) 5%,var(--hi) 95%,transparent 98%) 0 80%/100% 48% no-repeat;
--focus:#4B3FD0;--focus-ring:rgba(75,63,208,.16);
--shadow-1:0 14px 32px -16px rgba(50,36,110,.3);--shadow-2:0 34px 80px -28px rgba(50,36,110,.36);--scrim:rgba(30,24,60,.3);
--glass:rgba(255,253,249,.78);--glass-sheet:rgba(250,248,255,.76);
--note:#FFF1BA;--note-ink:#2B2340;--note-ink-2:#5A4F70;
--scrollbar:rgba(29,26,51,.3) transparent;--faded:.72;
--sky-top:#8EC5FF;--sky-mid:#CFE6FF;--sky-low:#FFE7D6;--sky-glow:#FFD58A;--sky-stars:0;
--on-sky:#1D1A33;--on-sky-2:#3F3A5C;--on-sky-shadow:0 1px 12px rgba(255,255,255,.55);--sky-scrim:rgba(255,255,255,.44);--tod:day;
--air-veil:rgba(251,249,255,.62);--air-ink-2:#241F3C;--air-ink-3:#39334F;--air-dim:rgba(29,26,51,.8);--air-line:rgba(29,26,51,.45);
--air-sh:0 0 2px rgba(255,255,255,.5),0 0 16px rgba(255,255,255,.62);
}
/* the fallback's moon and stars */
:root[data-tod="sunset"],:root[data-tod="dusk"],:root[data-tod="night"]{--sky-stars:1}
:root[data-tod="dawn"],:root[data-tod="morning"],:root[data-tod="day"],:root[data-tod="golden"]{--sky-stars:0}
/* the current page's mark: a small sun by day, the moon after dusk */
:root{--lf-moon-c:#FFE2D8;--lf-sun-a:#FFC869;--lf-sun-b:#F2A93B;
--lf-moon:radial-gradient(circle at 70% 32%,transparent 32%,var(--lf-moon-c) 38%);--lf-moon-f:drop-shadow(0 0 5px var(--moon)) drop-shadow(0 0 10px rgba(255,179,167,.7));
--lf-sun:radial-gradient(circle,#FFF8E0 0 30%,var(--lf-sun-a) 60%,var(--lf-sun-b));--lf-sun-f:drop-shadow(0 0 5px rgba(255,200,105,.95)) drop-shadow(0 0 12px rgba(255,190,90,.6));
--lf-mark:var(--lf-moon);--lf-mark-f:var(--lf-moon-f)}
:root[data-theme="light"],:root[data-tod="dawn"],:root[data-tod="morning"],:root[data-tod="day"],:root[data-tod="golden"]{--lf-mark:var(--lf-sun);--lf-mark-f:var(--lf-sun-f)}
:root[data-tod="sunset"],:root[data-tod="dusk"],:root[data-tod="night"]{--lf-mark:var(--lf-moon);--lf-mark-f:var(--lf-moon-f)}
:root[data-theme="light"]:not([data-lf-sky="dark"]),:root[data-lf-sky="light"]{--lf-moon-c:var(--moon-ink);--lf-sun-a:#FFB938;--lf-sun-b:#D9820C}
/* the sky's own reading of its brightness */
:root[data-lf-sky="dark"]{--sky-scrim:rgba(8,6,32,.42)}
:root[data-lf-sky="light"]{--sky-scrim:rgba(255,255,255,.44)}

/* 2. ground: the sky layer, body, the old atmosphere off */
body{font-size:15.5px;line-height:1.7}
body::before{display:none}
#lf-sky{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none;overflow:hidden;background-color:var(--sky-mid);
background-image:radial-gradient(60% 46% at 84% 10%,color-mix(in srgb,var(--sky-glow) 24%,transparent),transparent 70%),radial-gradient(120% 55% at 72% 104%,color-mix(in srgb,var(--sky-glow) 34%,transparent),transparent 64%),linear-gradient(180deg,var(--sky-top),var(--sky-mid) 58%,var(--sky-low))}
/* the fallback's moon (or sun) and a few stars */
#lf-sky:empty::before{content:"";position:absolute;inset:0;opacity:var(--sky-stars);
background:radial-gradient(circle at 88% 7.5%,color-mix(in srgb,var(--moon-core,#FFE9E4) calc(var(--moon-a,1)*100%),transparent) 0 9px,color-mix(in srgb,var(--sky-glow) calc(var(--moon-a,1)*55%),transparent) 10.5px,transparent 44px),
radial-gradient(1.2px 1.2px at 14% 12%,#fff,transparent),radial-gradient(1px 1px at 31% 6%,rgba(255,255,255,.8),transparent),radial-gradient(1.3px 1.3px at 47% 17%,#fff,transparent),
radial-gradient(1px 1px at 63% 9%,rgba(255,255,255,.75),transparent),radial-gradient(1px 1px at 72% 26%,rgba(255,255,255,.6),transparent),radial-gradient(1.2px 1.2px at 22% 31%,rgba(255,255,255,.7),transparent),
radial-gradient(1px 1px at 55% 36%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 93% 32%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 8% 44%,rgba(255,255,255,.45),transparent)}
#lf-sky:empty::after{content:"";position:absolute;inset:0;opacity:calc(1 - var(--sky-stars));
background:radial-gradient(circle at 86% 8%,#FFFBEA 0 15px,rgba(255,236,190,.7) 17px,rgba(255,220,150,.25) 60px,transparent 150px),
radial-gradient(34% 6% at 22% 24%,rgba(255,255,255,.7),transparent 70%),radial-gradient(26% 5% at 34% 27%,rgba(255,255,255,.55),transparent 70%),radial-gradient(30% 5% at 70% 40%,rgba(255,255,255,.45),transparent 70%)}
.app{background:none}
/* the daily cold open (today.js) */
.rail{transition:opacity .6s var(--ease)}
html.lft-cold .rail{opacity:0}
.app{overflow-x:clip}

/* 3. type */
.h1{font-family:var(--f-display-zh);font-weight:600;font-size:clamp(26px,1.6vw + 18px,34px);line-height:1.2;letter-spacing:.01em;margin:4px 0 8px}
.lead{font-size:16.5px;line-height:1.78;color:var(--ink-2);max-width:40em;margin:0 0 26px}
.lf-num{font-variant-numeric:tabular-nums}
/* line → life in type: mastery is weight (a level that rises animates) */
.lv-0,.lv-1,.lv-2,.lv-3,.lv-4{transition:font-weight .6s var(--ease),color .6s var(--ease),text-shadow .6s var(--ease)}
.lv-0{font-weight:200;color:var(--ink-3)}
.lv-1{font-weight:300}
.lv-2{font-weight:450}
.lv-3{font-weight:600;color:var(--ink)}
.lv-4{font-weight:700;color:var(--ink);text-shadow:0 0 16px var(--lamp-glow)}
.panel>h3,.sec-title,.res-group h3,.settings h3,.teacher-view .panel>h3,.form-panel>h3,.quiz>h3,.sub,.lh,.passage-head h3,.step-head h2{font-family:var(--f-display-zh)}
.panel>h3,.sec-title,.res-group h3,.settings h3,.teacher-view .panel>h3{font-weight:600;font-size:17.5px;line-height:1.4;letter-spacing:.02em}
.count{font-family:var(--f-sans)}
::placeholder{color:var(--ink-3);opacity:1}

/* 4. the say button: English you can tap */
.lf-say{display:inline;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:inherit;cursor:pointer;border-radius:8px;-webkit-tap-highlight-color:transparent;
text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.18em;transition:text-decoration-color .16s}
.lf-say:hover{text-decoration-color:currentColor}
.lf-say:focus-visible{outline:2px solid var(--focus);outline-offset:4px}

/* 5. shell: the floating table of contents (wider than 640px) */
.rail{border:0;background:none;background-image:none}
.brand-date{margin-top:8px;font:600 11px/1.3 var(--f-sans);letter-spacing:.16em;text-transform:uppercase}
.ni-i,.ni-n,.nl-en,.ns-head{display:none}
.brand-date{display:flex;flex-wrap:wrap;column-gap:.7em}
.brand-date span{white-space:nowrap}
.nav-sheet{display:contents}
@media (min-width:640.02px){
.app{grid-template-columns:calc(var(--lf-rail-w) + env(safe-area-inset-left,0px)) minmax(0,1fr)}
.rail{gap:30px;color:var(--on-sky);text-shadow:var(--on-sky-shadow);
padding:calc(40px + env(safe-area-inset-top,0px)) 14px calc(24px + env(safe-area-inset-bottom,0px)) calc(30px + env(safe-area-inset-left,0px))}
/* a soft veil from the left edge */
.rail::before{content:"";position:fixed;left:0;top:0;bottom:0;width:calc(var(--lf-rail-w) + env(safe-area-inset-left,0px) + 28px);z-index:-1;pointer-events:none;
background:linear-gradient(90deg,var(--sky-scrim),color-mix(in srgb,var(--sky-scrim) 70%,transparent) 70%,transparent);
-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
-webkit-mask-image:linear-gradient(90deg,#000 72%,transparent);mask-image:linear-gradient(90deg,#000 72%,transparent)}
.brand-name{font:600 15px/1.35 var(--f-sans);letter-spacing:.14em;color:var(--on-sky)}
.brand-date{color:var(--on-sky-2)}
.brand-meta{margin-top:10px;min-height:0;font-size:12.5px;line-height:1.6;color:var(--on-sky-2)}
.nav{gap:26px}
.nav-group{gap:1px}
.nav-label{padding:0 0 6px 22px;font:600 11px/1.3 var(--f-sans);letter-spacing:.2em;color:var(--on-sky-2)}
.nl-en{display:inline;margin-left:.1em;text-transform:uppercase;letter-spacing:.18em}
.nl-en::before{content:"·";margin:0 .55em 0 .1em;letter-spacing:0}
.nav-main>.nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0}
.nav-item{display:flex;align-items:baseline;gap:10px;width:100%;padding:4px 8px 4px 22px;border-radius:12px;background:none;color:var(--on-sky-2);font-size:15px;line-height:1.35;text-shadow:inherit}
.nav-item:hover{background:none;color:var(--on-sky)}
.nav-item[aria-current="page"]{background:none;color:var(--on-sky);font-weight:600}
.nav-item::before{content:none}
.nav-item::after{content:none}
.nav-sheet .ni-en{display:none}
.nav-main{counter-reset:ni}
.nav-main>.nav-item:not([hidden]){counter-increment:ni}
.nav-main>.nav-item{padding-top:5px;padding-bottom:5px}
.nav-main .ni-n{display:inline-block;width:1.7em;flex:none;margin-right:-2px;font:500 11px/1 var(--f-sans);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--on-sky-2);opacity:.8;transform:translateY(-.55em)}
.nav-main .ni-n::before{content:counter(ni,decimal-leading-zero)}
.nav-main .ni-t{font-size:23px;font-weight:500;letter-spacing:.06em;line-height:1.3}
.nav-main .ni-en{font:italic 400 15px/1 var(--f-display);letter-spacing:.01em;color:var(--on-sky-2)}
.nav-main .nav-item[aria-current="page"] .ni-t{font-weight:600}
.nav-main .nav-item[aria-current="page"] .ni-en{color:var(--on-sky)}
.nav-item{position:relative}
.nav-item[aria-current="page"]::before{content:"";display:block;position:absolute;left:4px;right:auto;bottom:auto;top:calc(.68em + 4px);width:9px;height:9px;border-radius:50%;
background:var(--lf-mark);filter:var(--lf-mark-f)}
.nav-main .nav-item[aria-current="page"]::before{top:calc(50% - 5px);width:11px;height:11px}
.sync{font-size:12px;color:var(--on-sky-2);padding-left:2px}
.rail.fade-b,.rail.fade-t{-webkit-mask-size:auto;mask-size:auto}
}
@media (min-width:861px) and (max-width:1099px){:root,:root[data-theme]{--lf-rail-w:236px}}
@media (min-width:640.02px) and (max-width:860px){
:root,:root[data-theme]{--lf-rail-w:196px}
.rail{gap:22px;padding:calc(28px + env(safe-area-inset-top,0px)) 8px calc(18px + env(safe-area-inset-bottom,0px)) calc(18px + env(safe-area-inset-left,0px))}
.brand-name{font-size:14px;letter-spacing:.1em}
.brand-meta{font-size:12px}
.nav{gap:20px}
.nav-item{padding-left:20px;font-size:14.5px}
.nav-label{padding-left:20px}
.nav-main .ni-n{display:none}
.nav-main .ni-t{font-size:21px;letter-spacing:.04em}
.nav-main .ni-en{font-size:14px}
.nl-en{display:none}
}
@media (min-width:640.02px) and (max-height:820px){
.rail{gap:20px;padding-top:calc(26px + env(safe-area-inset-top,0px))}
.nav{gap:18px}
.nav-main>.nav-item{padding-top:3px;padding-bottom:3px}
.nav-main .ni-t{font-size:21px}
.nav-item{padding-top:2px;padding-bottom:2px}
.brand-meta{margin-top:6px}
}
@media (min-width:640.02px) and (max-height:600px){.brand-meta,.brand-date{display:none}.rail{gap:14px}}

/* 6. shell: the phone's floating dock (glass, no outline) and the 「更多」 sheet (a full-bleed list over the defocused world) */
@media (max-width:640px){
html{scroll-padding-top:calc(12px + env(safe-area-inset-top,0px));scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.app{grid-template-rows:auto}
.rail{position:fixed;top:auto;bottom:max(12px,env(safe-area-inset-bottom,0px));left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));
z-index:30;height:auto;display:flex;flex-direction:row;align-items:stretch;gap:0;padding:5px;border:0;background:none;overflow:visible;color:var(--ink)}
/* (the glass is its own layer: a backdrop-filter on .rail would trap the sheet in the dock) */
.rail::before{content:"";position:absolute;inset:0;z-index:1;border-radius:24px;pointer-events:none;background:var(--glass);
-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.brand,.nav-label,.brand-meta,.brand-tag{display:none}
.nav{position:static;flex:1 1 auto;min-width:0;display:flex;overflow:visible;-webkit-mask-image:none;mask-image:none}
.nav-main{position:relative;z-index:2;flex:1 1 auto;display:flex;flex-direction:row;gap:0;min-width:0}
.nav-main>.nav-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:6px 2px 5px;
border-radius:19px;background:none;color:var(--ink-2);font-size:11px;font-weight:500;line-height:1.1;letter-spacing:.04em;white-space:nowrap;width:auto}
.nav-main>.nav-item::before,.nav-main>.nav-item::after{content:none;display:none}
.nav-main .ni-i{display:block;width:23px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.nav-main .ni-en,.nav-main .ni-n{display:none}
.nav-main>.nav-item[aria-current="page"]{background:none;color:var(--ink);font-weight:650}
.nav-main>.nav-item[aria-current="page"] .ni-i{color:var(--now-ink);filter:drop-shadow(0 0 6px var(--now-glow))}
/* 「更多」: the fifth slot; open, its lines fold into ✕ and it reads 收起 */
.nav-more{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:0 0 64px;min-height:52px;height:auto;padding:6px 2px 5px;
border:0;border-radius:19px;background:none;color:var(--ink-2);font:500 11px/1.1 var(--f-sans);letter-spacing:.04em;box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
transition:transform .45s cubic-bezier(.2,1.6,.4,1)}
.nav-more::after{content:none}
.nav-more:active{transform:scale(.95);transition-duration:.08s}
.nav-more[aria-expanded="true"],.rail:has(.nav-sheet .nav-item[aria-current="page"]) .nav-more{background:none;color:var(--ink);border:0;box-shadow:none;font-weight:650}
.rail:has(.nav-sheet .nav-item[aria-current="page"]) .nav-more:not([aria-expanded="true"]) .nm-i{color:var(--now-ink);filter:drop-shadow(0 0 6px var(--now-glow))}
.nm-i{width:23px;height:23px}
.nm-i path{stroke-width:1.6}
.nav-more[aria-expanded="true"] .nm-i .l1{transform:translateY(4px) rotate(45deg)}
.nav-more[aria-expanded="true"] .nm-i .l3{transform:translateY(-4px) rotate(-45deg)}
/* the status: a tiny dot on the dock */
.sync{position:absolute;z-index:3;top:9px;right:22px;margin:0;padding:0;font-size:0;gap:0;display:flex}
.sync::before{width:6px;height:6px;box-shadow:0 0 0 2px var(--glass)}
/* the sheet: the whole list, type over a blurred frame; groups by space and an eyebrow */
.nav-sheet{display:none;position:fixed;inset:0;z-index:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
padding:calc(34px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) calc(118px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));
background:var(--glass-sheet);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);color:var(--ink);text-shadow:var(--air-sh)}
.rail.nav-open .nav-sheet{display:block}
.ns-head{display:block;margin:0 0 6px;font:italic 360 44px/1.02 var(--f-display);letter-spacing:-.015em;color:var(--ink)}
.ns-head small{display:block;margin-top:8px;font:500 14px/1.4 var(--f-sans);font-style:normal;letter-spacing:.16em;color:var(--ink-2)}
.nav-sheet .nav-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;margin-top:34px}
.nav-sheet .nav-label{display:block;grid-column:1/-1;padding:0 0 8px;font:650 11.5px/1.3 var(--f-sans);letter-spacing:.2em;color:color-mix(in srgb,var(--now-ink) 32%,var(--ink))}
.nav-sheet .nl-en{display:inline;margin-left:.1em;text-transform:uppercase}
.nav-sheet .nl-en::before{content:"·";margin:0 .55em 0 .1em;letter-spacing:0}
.nav-sheet .nav-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border-radius:14px;background:none;color:var(--ink);text-align:left}
.nav-sheet .nav-item::before,.nav-sheet .nav-item::after{content:none}
.nav-sheet .ni-t{font-size:20px;font-weight:600;letter-spacing:.04em;line-height:1.3}
.nav-sheet .ni-en{display:block;font:italic 400 15px/1.2 var(--f-display);color:var(--ink-2)}
.nav-sheet .nav-item[aria-current="page"]{background:none}
.rail.nav-open .nav{position:static;z-index:auto;top:auto;left:auto;right:auto;width:auto;max-width:none;max-height:none;margin:0;display:flex;padding:0;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;transform:none}
.rail.nav-open .nav-main{flex-direction:row;gap:0}
.rail.nav-open .nav-main>.nav-label{display:none}
.rail.nav-open .nav-main>.nav-item{width:auto;white-space:nowrap;padding:6px 2px 5px;font-size:11px;line-height:1.1;min-height:52px}
.rail.nav-open .nav-more{margin-left:0}
.rail.nav-open .nav-sheet .nav-group{gap:2px 16px}
.rail.nav-open .nav-sheet .nav-label{display:block;padding:0 0 8px}
.rail.nav-open .nav-sheet .nav-item{position:relative;width:100%;white-space:normal;padding:10px 0 10px 16px;font-size:inherit;line-height:1.3;min-height:62px}
.rail.nav-open .nav-sheet .nav-item[aria-current="page"]::before{content:"";display:block;position:absolute;left:2px;right:auto;top:21px;bottom:auto;width:7px;height:7px;border-radius:50%;background:var(--lf-mark);filter:var(--lf-mark-f)}
.rail.nav-open .nav-sync{display:flex;align-items:center;gap:8px;margin:34px 0 0;padding:0;border:0;font-size:13px;line-height:1.4;color:var(--ink-2)}
.nav-scrim.on{background:transparent}
.main{padding:calc(18px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(104px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
/* a lesson is a quiet room */
.app:has(.lesson-nav) .rail{display:none}
.app:has(.lesson-nav) .main{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:359px){.nav-sheet .nav-group{grid-template-columns:minmax(0,1fr)}.nav-main>.nav-item,.nav-more{font-size:10.5px}}

/* 7. the stage: a page's title on the sky */
.lf-stage{color:var(--on-sky);text-shadow:var(--on-sky-shadow)}
#lf-stage{position:relative;max-width:var(--lf-col);padding:clamp(4px,2vh,26px) 4px clamp(26px,5vh,46px)}
#lf-stage[hidden]{display:none}
/* a soft focus pulled behind the title */
#lf-stage::before{content:"";position:absolute;left:-7%;top:-18%;width:min(100%,780px);height:128%;z-index:-1;pointer-events:none;
background:radial-gradient(closest-side,var(--sky-scrim),color-mix(in srgb,var(--sky-scrim) 50%,transparent) 55%,transparent);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
-webkit-mask-image:radial-gradient(closest-side,#000 50%,transparent);mask-image:radial-gradient(closest-side,#000 50%,transparent)}
#lf-stage .lf-eyebrow{display:flex;align-items:center;gap:10px;color:var(--on-sky-2)}
.lf-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7}
.lf-title{margin:14px 0 0;font:360 clamp(44px,4.4vw + 22px,86px)/.98 var(--f-display);letter-spacing:-.022em;color:var(--on-sky)}
.lf-title i{font-style:italic;font-weight:330;letter-spacing:-.01em}
.lf-title .lf-say{display:inline;text-decoration-thickness:2px;text-underline-offset:.12em}
.lf-zh{display:flex;align-items:center;gap:12px;margin-top:14px;font:500 16px/1.4 var(--f-sans);letter-spacing:.22em;color:var(--on-sky-2)}
.lf-zh::before{content:"";width:30px;height:1px;background:currentColor;opacity:.7}
.lf-amb{display:grid;gap:3px;justify-items:start;margin:18px 0 0;max-width:34em}
.lf-amb .lf-say{font:italic 400 clamp(18px,.6vw + 14px,21px)/1.4 var(--f-display);color:var(--on-sky)}
.lf-amb-zh{font-size:13.5px;line-height:1.5;color:var(--on-sky-2);letter-spacing:.04em}
.lf-title,.lf-amb>*{text-wrap:balance}
.lead,.panel p{text-wrap:pretty}
@media (max-width:640px){
#lf-stage{padding:4px 4px 26px}
.lf-title{margin-top:12px}
.lf-zh{margin-top:10px;font-size:15px}
.lf-amb{margin-top:14px}
}

/* 8. air (§9.1 rules 1–3): no paper. #view.lf-air is a column of type on the world, beside the contents on a desk, full width on a
phone; the sky pulls focus behind it ('read') and body.lf-read lays a veil, deepest behind the column, feathered to nothing. */
body.lf-read::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;transition:opacity .8s var(--ease);
background:linear-gradient(90deg,var(--air-veil) calc(var(--lf-rail-w) + var(--lf-read) + 24px),transparent calc(var(--lf-rail-w) + var(--lf-read) + 36vw))}
/* the world's own focus pull keeps text on air readable (sky.js's tone guard): the veil steps back; on a desk the rail's
own scrim would leave a seam over it, so a reading page has one veil for the contents and the column */
@media (min-width:640.02px){body.lf-read .rail::before{content:none}}
:root[data-sky-render="3d"][data-sky-mood="read"] body.lf-read::after{opacity:.5}
@media (max-width:640px){body.lf-read::after{background:linear-gradient(180deg,color-mix(in srgb,var(--air-veil) 40%,transparent),var(--air-veil) min(52vh,440px))}}
.lf-air{--ink-2:var(--air-ink-2);--ink-3:var(--air-ink-3);color:var(--ink);text-shadow:var(--air-sh)}
#view.lf-air{max-width:var(--lf-read);padding-bottom:clamp(40px,8vh,80px)}
#view.lf-air>.lead{font-size:16px;margin-bottom:0}
body.lf-staged #view:focus{outline:none}
@media (min-width:640.02px){.main{padding:calc(40px + env(safe-area-inset-top,0px)) max(44px,env(safe-area-inset-right,0px)) calc(72px + env(safe-area-inset-bottom,0px)) 10px}}
@media (min-width:640.02px) and (max-width:860px){.main{padding-top:calc(28px + env(safe-area-inset-top,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}}
/* the host's own title on a staged page: the stage carries it */
body.lf-staged #view>.h1:first-child,body.lf-staged #view>.teacher-view>.h1:first-child,body.lf-staged #view .ex-h1{display:none}
body.lf-staged #view>.lead:nth-child(2),body.lf-staged #view>.teacher-view>.lead:nth-child(2){margin-top:0}

/* 9. components (§9.1 rule 4). Stable names for every page; ≥ 44 px targets, real roles, visible focus.
 .lf-air      page/section on air: spacing only; host markup inside (.panel .btn fields lists tables tabs chips) loses its boxes.
              Page root: class="lf-air" data-lf-read → the shell adds the veil and the sky's 'read' shot (or WB.lfRead()).
 .lf-eyebrow  <p class="lf-eyebrow">The sky<span>天色</span></p>; section head <h3 class="lf-sec"><span class="lf-en">The sky</span>天色</h3>
 .lf-choice   role=radiogroup of <button class="lf-choice-opt" role="radio" aria-checked> words (≤ 6; aria-pressed too); lit = ink +
              glowing dot; <i> = English whisper; .lf-stack = one per line + <small> description; keys WB.lfChoiceKey(e).
              WB.lfAir(root) gives host <select>s this face (> 6: .lf-pick → full-bleed list); the native element stays.
 .lf-switch   lamp + label: <label class="lf-switch"><input type="checkbox" role="switch">…</label> or <button class="lf-switch"
              role="switch" aria-checked> (lit = warm glow; .toggle = the same)
 .lf-field    baseline at 40 % ink, glows in the hour's accent on focus (automatic for inputs/textareas in .lf-air)
 .lf-go       text + drawn →   .lf-word quiet word (.lf-red careful)   .lf-pill the one glowing main action
 .lf-list     <ul class="lf-list"> rows on air, space between, no lines; .lf-num tabular digits */
:root{--lf-glow:0 0 6px 1px var(--now-glow),0 0 14px 3px var(--now-glow);--lf-pill-sh:0 0 0 1px color-mix(in srgb,var(--now) 55%,transparent),0 10px 28px -10px var(--now-glow),0 0 46px -6px var(--now-glow),inset 0 1px 0 rgba(255,255,255,.42)}
.lf-eyebrow{margin:0;font:600 11.5px/1.3 var(--f-sans);letter-spacing:.16em;text-transform:uppercase}
.lf-eyebrow span:not(.lf-dot){margin-left:.9em;font-size:12.5px;letter-spacing:.2em;text-transform:none}
.lf-sec,.lf-air .panel>h3,.lf-air .sec-title,.lf-air .res-group h3{display:block;margin:0 0 18px;font:600 21px/1.35 var(--f-display-zh);letter-spacing:.04em;color:var(--ink)}
.lf-en,.lf-sheet-g{display:block;margin:0 0 7px;font:650 11px/1.3 var(--f-sans);letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--now-ink) 32%,var(--ink))}
.lf-choice{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 26px;margin:0;padding:0}
.lf-choice-opt,.tab,.lf-sheet [role="option"]{position:relative;min-height:44px;margin:0;border:0;border-radius:0;background:none;box-shadow:none;text-shadow:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lf-choice-opt{display:inline-flex;flex-direction:column;align-items:center;min-width:44px;padding:9px 0 14px;color:var(--air-dim);font:500 17px/1.3 var(--f-sans);letter-spacing:.02em;text-align:center;transition:color .2s}
.lf-choice-opt:hover,.lf-choice-opt[aria-checked="true"],.lf-choice-opt[aria-pressed="true"],.tab:hover,.tab[aria-selected="true"],.lf-sheet [role="option"]:hover,.lf-sheet [aria-selected="true"]{color:var(--ink);background:none}
.lf-choice-opt::after,.tab[aria-selected="true"]::after,.lf-sheet [aria-selected="true"]::before{content:"";position:absolute;left:calc(50% - 2.5px);bottom:3px;width:5px;height:5px;border-radius:50%;background:var(--now);box-shadow:var(--lf-glow)}
.lf-choice-opt::after{opacity:0;transform:scale(.3);transition:opacity .25s,transform .45s var(--ease)}
.lf-choice-opt[aria-checked="true"]::after,.lf-choice-opt[aria-pressed="true"]::after{opacity:1;transform:none}
.lf-choice-opt i{display:block;font:italic 400 13.5px/1.3 var(--f-display-zh);font-synthesis:none}
.lf-choice-opt:disabled,.lf-choice-opt[aria-disabled="true"]{opacity:.42;cursor:default}
.lf-choice-opt:focus-visible,.lf-pick:focus-visible,.lf-go:focus-visible,.lf-word:focus-visible,button.lf-switch:focus-visible,.lf-sheet [role="option"]:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.lf-stack{flex-direction:column;gap:4px}
.lf-stack .lf-choice-opt{align-items:flex-start;width:100%;padding:8px 0 8px 26px;text-align:left}
.lf-stack .lf-choice-opt::after,.lf-sheet [aria-selected="true"]::before{left:5px;top:calc(8px + .65em - 3.5px);bottom:auto;width:7px;height:7px}
.lf-choice-opt small{display:block;margin-top:2px;font-size:13.5px;font-weight:400;line-height:1.55;color:var(--ink-3)}
.lf-choice-opt[aria-checked="true"] small{color:var(--ink-2)}
.lf-switch,.toggle,.toggle.clips-row{position:relative;display:flex;align-items:flex-start;gap:14px;min-height:44px;margin:0;padding:10px 0;border:0;background:none;
color:var(--ink);font:inherit;font-size:15.5px;line-height:1.55;text-align:left;text-shadow:inherit;white-space:normal;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lf-switch small,.toggle small{display:block;font-size:13.5px;color:var(--ink-3)}
.lf-switch input[type="checkbox"],.toggle input[type="checkbox"],button.lf-switch::before{content:"";-webkit-appearance:none;appearance:none;flex:none;display:block;position:relative;width:18px;height:18px;
margin:.2em 0 0;padding:0;border:0;border-radius:50%;background:none;box-shadow:inset 0 0 0 1.5px var(--air-line);cursor:pointer;transition:background-color .3s,box-shadow .35s}
.lf-switch input:checked,.toggle input:checked,button.lf-switch[aria-checked="true"]::before,.lf-air .cbox.on .sq{background:radial-gradient(circle at 42% 38%,#FFF7DF 0 16%,var(--lamp) 58%,color-mix(in srgb,var(--lamp) 72%,#B35C00));
box-shadow:0 0 0 3px color-mix(in srgb,var(--lamp) 22%,transparent),0 0 14px 3px var(--lamp-glow)}
.lf-switch input:disabled,.toggle input:disabled{opacity:.4;cursor:default}
.lf-switch:has(input:disabled),.toggle:has(input:disabled),button.lf-switch:disabled{color:var(--ink-3);cursor:default}
.lf-switch input:focus-visible,.toggle input:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.lf-field,.lf-air input:not([type="checkbox"],[type="radio"],[type="file"],[type="range"]),.lf-air textarea{min-height:44px;margin:0;padding:10px 0 9px;border:0;border-radius:0;
background:transparent;color:var(--ink);box-shadow:inset 0 -1px 0 var(--air-line);font-size:16px;line-height:1.45;text-shadow:inherit;transition:box-shadow .25s}
.lf-field:focus,.lf-air input:focus,.lf-air textarea:focus{outline:none;border:0;box-shadow:inset 0 -2px 0 var(--now),0 12px 16px -14px var(--now-glow)}
.lf-field::placeholder,.lf-air input::placeholder,.lf-air textarea::placeholder{font-style:italic;font-family:var(--f-display-zh);font-synthesis:none;color:var(--ink-3)}
.lf-air textarea{min-height:104px;line-height:1.75;resize:vertical}
.lf-air input:is([type="time"],[type="date"],[type="number"]){font-variant-numeric:tabular-nums}
.lf-go,.lf-word,.lf-air .btn,.lf-air .btn:is(.ghost,.danger,.sm){display:inline-flex;align-items:center;gap:.5em;min-height:44px;margin:0;padding:8px 0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink);
font:600 15px/1.3 var(--f-sans);letter-spacing:.03em;text-shadow:inherit;text-decoration:none;white-space:nowrap;filter:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lf-go::after,.lf-air .btn:not(.ghost,.danger,.lf-pill,.lf-word)::after{content:"→";font:400 1.2em/1 var(--f-display);color:var(--now-ink);transition:transform .35s var(--ease)}
.lf-go:hover::after,.lf-air .btn:hover::after{transform:translateX(4px)}
.lf-word,.lf-air .btn.ghost{font-weight:500;color:var(--ink-2)}
.lf-word:hover,.lf-go:hover,.lf-air .btn:hover,.lf-air .btn.ghost:hover{color:var(--ink);background:none;filter:none;opacity:1}
.lf-word.lf-red,.lf-air .btn.danger,.lf-air .link.danger{color:var(--red)}
.lf-pill,.lf-air .btn.lf-pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 28px;border:0;border-radius:999px;background:var(--now);color:var(--on-now);
font:650 15.5px/1.2 var(--f-sans);letter-spacing:.05em;text-shadow:none;white-space:nowrap;cursor:pointer;box-shadow:var(--lf-pill-sh);transition:transform .45s cubic-bezier(.2,1.6,.4,1),filter .2s}
.lf-pill:hover,.lf-air .btn.lf-pill:hover{color:var(--on-now);filter:brightness(1.06) saturate(1.05)}
.lf-pill:active{transform:scale(.97);transition-duration:.08s}
.lf-air .btn.lf-pill.danger{background:var(--red);box-shadow:0 10px 28px -10px var(--red)}
.lf-air .btn.sm{min-height:44px;font-size:14px}
.lf-pill:disabled,.lf-go:disabled,.lf-word:disabled{opacity:.42;cursor:default;pointer-events:none}
.lf-pill:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.lf-list{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.lf-list>li{margin:0}
/* a long list: its value as a big word with a chevron, and a full-bleed list over the defocused world */
.lf-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;opacity:0;pointer-events:none}
.lf-pick{display:inline-flex;align-items:center;gap:14px;max-width:100%;min-height:44px;margin:0;padding:6px 0 8px;border:0;border-radius:0;background:none;color:var(--ink);
font:500 21px/1.3 var(--f-display-zh);text-align:left;text-shadow:inherit;cursor:pointer;box-shadow:inset 0 -1px 0 var(--air-line);-webkit-tap-highlight-color:transparent}
.lf-pick>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-pick::after{content:"";flex:none;width:8px;height:8px;border:solid var(--now-ink);border-width:0 1.6px 1.6px 0;transform:translateY(-3px) rotate(45deg)}
.lf-pick:disabled{opacity:.45;cursor:default}
.field>.lf-pick{justify-self:start}
.lf-sheet,.nav-sheet{background:var(--glass-sheet);-webkit-backdrop-filter:blur(30px) saturate(1.4);backdrop-filter:blur(30px) saturate(1.4);color:var(--ink);text-shadow:var(--air-sh)}
.lf-sheet{position:fixed;inset:0;z-index:55;overflow-y:auto;overscroll-behavior:contain;padding:calc(30px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) calc(48px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px))}
.lf-sheet-in{max-width:34rem}
html.lf-sheet-open,html.lf-sheet-open body{overflow:hidden}
@media (min-width:640.02px){.lf-sheet{padding-left:calc(var(--lf-rail-w) + 10px + env(safe-area-inset-left,0px))}}
.lf-sheet-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 12px}
.lf-sheet-h h2{margin:0;font:600 24px/1.3 var(--f-display-zh);letter-spacing:.04em}
.lf-sheet-g{margin:26px 0 4px}
.lf-sheet [role="option"]{display:block;width:100%;min-height:50px;padding:11px 0 11px 26px;color:var(--air-dim);font:450 19px/1.4 var(--f-display-zh);text-align:left}
.lf-sheet [aria-selected="true"]::before{top:calc(11px + .7em - 3.5px)}

/* 10. the host's markup on air: sections by space and an eyebrow; no panels, cards, hairlines or boxes */
.lf-air :is(.panel,.form-panel,.setup,.res-group){margin:clamp(52px,9vh,84px) 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;max-width:none}
.lf-air .sec-title{margin-top:clamp(52px,9vh,84px)}
.lf-air .tabs+*>:first-child{margin-top:8px}
.lf-air .panel>h3 .count{margin-left:.6em;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--ink-3)}
.lf-air :is(.settings,.form-panel){display:grid;gap:16px}
.lf-air :is(.muted,.gdesc,.preview,.hbar .v,.btn.ghost){color:var(--ink-2)}
.lf-air :is(.small,.lf-quiet){font-size:13.5px;line-height:1.7}
.lf-air .field{position:relative;grid-template-columns:minmax(0,1fr);gap:0;font-size:13px;letter-spacing:.06em;color:var(--ink-2)}
.lf-air :is(.form-row,.form-2){gap:20px 30px;align-items:flex-end}
.lf-air .form-row>.field{flex:1 1 150px}
.lf-air .form-row>.field:has(.lf-choice){flex-basis:100%!important}
.lf-air #reset-zone{margin-top:clamp(40px,7vh,64px)}
.lf-air :is(.form-actions,.word-actions){justify-content:flex-start;align-items:center;gap:8px 30px;margin:8px 0 0}
.lf-air .link{color:var(--ink);text-decoration-color:color-mix(in srgb,var(--now-ink) 70%,transparent);text-underline-offset:4px}
.lf-air :is(.tip,.voice-help){position:relative;margin:4px 0;padding:0 0 0 22px;border-radius:0;background:none;box-shadow:none;color:var(--ink);font-size:14.5px}
.lf-air :is(.tip,.voice-help)::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--lamp);box-shadow:0 0 10px 2px var(--lamp-glow)}
.lf-air .kv{grid-template-columns:repeat(auto-fit,minmax(9em,1fr));gap:14px 30px}
.lf-air .kv div{padding:0;background:none}
.lf-air .kv dd{overflow-wrap:anywhere}
.lf-air summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.lf-air .chip{display:inline;padding:0;border:0;background:none;color:var(--ink-2);font-size:12.5px;line-height:1.4;letter-spacing:.08em}
.lf-air .chip.red{color:var(--red);background:none}
.lf-air .chips{gap:4px 18px}
.lf-air .vq{border:0;padding:0;margin-left:.6em;letter-spacing:.1em}
/* lists and tables: rows separated by space, tabular numbers, no grid lines */
.lf-air :is(.mlist,.nlist,.daylist){display:grid;gap:34px}
.lf-air :is(.mcard,.nitem,.dayitem,.res,.tpl,.q){padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.lf-air :is(.mcard,.dayitem) header{gap:4px 16px}
.lf-air :is(.mcard .date,.dayitem .t,.nitem .meta,.res .u){font-variant-numeric:tabular-nums;color:var(--ink-3)}
.lf-air .mtext{font-size:16.5px;line-height:1.7}
.lf-air .mcard footer{gap:4px 26px;margin-top:4px}
.lf-air :is(.mcard,.entry,.nitem,.dayitem) .link{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink-2)}
.lf-air :is(.mcard,.entry,.nitem,.dayitem) .link.danger{color:var(--red)}
.lf-air .nitem .en{font:500 19px/1.4 var(--f-display-zh)}
.lf-air .res{display:grid;gap:2px;margin:0 0 22px}
.lf-air .table-wrap{margin:6px 0 20px;border:0;background:none}
.lf-air .table-wrap :is(th,td){padding:12px 20px 12px 0;border:0;background:none;font-variant-numeric:tabular-nums}
.lf-air .table-wrap thead th{padding-bottom:6px;font-size:11.5px;letter-spacing:.14em;color:var(--ink-3)}
.lf-air :is(.hbar .track,.bar){height:3px;border-radius:2px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.lf-air .hbar .track i{box-shadow:0 0 10px var(--lamp-glow)}
.lf-air .chart .grid{stroke:var(--ink);stroke-opacity:.1}
.lf-air .chart .axis{fill:var(--ink-2)}
.lf-air .empty{padding:24px 0 8px;text-align:left}
.lf-air .empty::before{margin:0 0 12px}
.lf-air .log-grid{grid-template-columns:minmax(0,1fr);gap:0}
.lf-air :is(.prompt textarea,.report){background:none;font-size:14.5px}
.lf-air .cbox:hover{background:none}
.lf-air .cbox .sq{width:16px;height:16px;border:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--air-line)}
.lf-air .cbox.on .sq svg{display:none}
.lf-air .time-row{grid-template-columns:3em minmax(0,7.5em) auto minmax(0,7.5em) 1fr;gap:4px 16px}
/* tabs are words: the chosen one lit with a glowing dot */
.tabs{gap:0 24px;margin:0 0 26px;padding:0;border:0}
.tab{padding:10px 0 14px;color:var(--ink-2);font-size:15.5px}
.tab[aria-selected="true"]::after{bottom:4px}
.tab[aria-selected="true"] .count{color:var(--ink-3);opacity:1}
@media (hover:hover) and (pointer:fine){.tab:hover{box-shadow:none}}
.filters .tabs{margin:0}
.lf-air .filters{gap:8px 28px;margin:clamp(52px,9vh,84px) 0 12px}
@media (max-width:640px){
.tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding-left:6px;padding-right:6px;margin:0 -6px}
.filters .tabs{margin:0 -16px;flex:1 1 100%}
.lf-air .time-row{grid-template-columns:2.6em minmax(0,1fr) auto minmax(0,1fr)}
.lf-air .prose .table-wrap table{min-width:0}
.lf-air .table-wrap:has(.data-table){-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.lf-air .form-row>.field{flex-basis:100%}
.lf-air .time-row>.toggle{grid-column:2/-1}
}

/* 11. the rest of the host, still on paper (lessons, Today's classic page) */
.panel{background:var(--sheet);border:0;border-radius:var(--r-2xl);padding:20px 22px;box-shadow:var(--shadow-1)}
.panel>h3{margin:0 0 14px}
.sec-title{margin:40px 0 14px}
.chip{border:0;background:var(--fill-2);color:var(--ink-2);padding:0 10px;font-size:12.5px;line-height:22px}
.chip.red{background:var(--red-soft);color:var(--red)}
.empty{background:none;border:0;border-radius:0;padding:30px 12px 10px;color:var(--ink-2);font-size:15px;text-align:center}
.empty::before{content:"";display:block;width:34px;height:34px;margin:0 auto 12px;border-radius:50%;opacity:.8;
background:radial-gradient(circle at 66% 34%,transparent 38%,var(--moon) 41%,var(--moon) 58%,transparent 61%);filter:drop-shadow(0 0 8px var(--now-glow))}
.dayitem .d,.res .n{font-weight:650}
.table-wrap{border:0;border-radius:0;background:none;margin:8px 0 20px}
.table-wrap th,.table-wrap td{padding:13px 16px 13px 0;border-top:1px solid var(--line)}
.table-wrap thead th{background:none;border-top:0;border-bottom:1px solid var(--rule);color:var(--ink-3);font-size:12px;font-weight:600;letter-spacing:.08em}
/* the roadmap's classic page (when the journey map is not there) */
.phase-body{background:none;border:0;border-radius:0;box-shadow:none;padding:4px 0 0}
.phase.current .phase-body{border:0;box-shadow:none}
.phase-num{font-family:var(--f-display);font-weight:340;font-size:44px}
.phase.current .phase-num,.cur-tag,.tt-now{color:var(--now-ink)}
.cur-tag{border-color:var(--now-line)}
.phase-days,.kv div,.rv-stats div{background:var(--fill)}
.hbar .track,.bar,.flash-prog,.lprog{background:var(--fill-2)}
.app .week .bw{height:72px;min-height:0}
.tip,.voice-help{background:var(--tip);box-shadow:none;border-radius:var(--r-md);padding:12px 16px;color:var(--ink)}
.setup{border:0;background:var(--sheet);border-radius:var(--r-2xl);box-shadow:var(--shadow-1)}
.fce-count b,.cele-count b,.fc-stamp.yes{color:var(--lamp-ink)}
.vq[data-q="nat"]{color:var(--lamp-ink);border-color:var(--lamp)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 20px;border:0;border-radius:999px;background:var(--pri);color:var(--pri-ink);
font:600 14.5px/1.25 var(--f-sans);letter-spacing:.03em;box-shadow:var(--pri-glow);transition:transform .45s cubic-bezier(.2,1.6,.4,1),box-shadow .2s,filter .2s,background-color .2s}
.btn:hover{opacity:1;filter:brightness(1.07) saturate(1.05)}
.btn.ghost{background:var(--fill);color:var(--ink);border:0;box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:var(--fill-2);filter:none}
.btn.sm{min-height:34px;padding:6px 15px;font-size:13.5px}
.btn.danger{background:var(--red);color:var(--on-ink);box-shadow:none}
.btn:disabled{opacity:.42}
.link{color:var(--link);text-decoration-color:var(--link-line)}
.say{border:0;background:var(--fill-2);color:var(--ink-2)}
.say:hover{color:var(--ink);background:var(--fill-2);border:0}
.field{gap:6px;font-size:13px;color:var(--ink-2)}
input,select,textarea{min-height:44px;padding:10px 14px;border:1px solid var(--ctl);border-radius:var(--r-md);background-color:var(--field);color:var(--ink);font-size:15px;line-height:1.4;
transition:border-color .16s,box-shadow .16s}
textarea{min-height:100px;line-height:1.7}
input[type="checkbox"],input[type="radio"],input[type="file"],input[type="range"]{min-height:0;padding:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 4px var(--focus-ring)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
input[type="time"],input[type="date"]{padding-left:12px;padding-right:10px;font-variant-numeric:tabular-nums}
@media (min-width:640.02px){.time-row{grid-template-columns:48px minmax(0,150px) auto minmax(0,150px) 1fr}}
select{-webkit-appearance:none;appearance:none;background-image:var(--chev);background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;padding-right:40px;text-overflow:ellipsis}
@media (pointer:coarse){
input,select,textarea{font-size:16px}
.btn{min-height:44px}
.btn.sm{min-height:40px}
.tab{min-height:44px}
}
.lf-quiet{margin:0;font-size:13px;color:var(--ink-3)}

/* 12. notes on air (提示; index.html places them): the ink of the sky, a lamp (gold done · the hour's accent · coral do this
first / it did not work; breathing: on its way), a soft cloud of the words in the frame's tone (.na-cl) */
.toast{color:var(--on-sky);--na-c:var(--now);--na-p:#1E1638;text-shadow:0 0 2px color-mix(in srgb,var(--na-p) 60%,transparent)}
:root[data-lf-sky="light"] .toast{--na-p:#F7F4FF}
.toast[data-k="ok"]{--na-c:var(--lamp)}
.toast:is([data-k="care"],[data-k="err"]){--na-c:var(--red)}
.na-veil{background:color-mix(in srgb,var(--na-p) 50%,transparent)}
.na-lamp{width:7px;height:7px;margin-top:8px;border-radius:50%;background:var(--na-c);box-shadow:0 0 0 3px color-mix(in srgb,var(--na-c) 22%,transparent),0 0 12px 2px color-mix(in srgb,var(--na-c) 50%,transparent)}
.toast[data-k="wait"] .na-lamp{animation:na-b 1.4s ease-in-out infinite}
@keyframes na-b{50%{opacity:.35;transform:scale(.75)}}
.na-cl{-webkit-text-stroke:11px color-mix(in srgb,var(--na-p) 72%,transparent);filter:blur(6px)}
.na-en{font:italic 400 15.5px/1.45 var(--f-display);color:var(--on-sky-2);white-space:nowrap}
.na-zh{max-width:100%;font:500 14px/1.6 var(--f-sans);letter-spacing:.03em;text-wrap:pretty;text-spacing-trim:trim-start}
@media (prefers-reduced-motion:reduce){.toast .na-lamp{animation:none}}
.celebrate{background:var(--scrim)}
.cele-card,.flash.fce{background:var(--sheet-solid)}
.cele-cta{background:linear-gradient(transparent,var(--sheet-solid) 18px)}
.cele-cta::after{background:var(--sheet-solid)}

/* 13. shared objects (§3.4): .obj-note and .obj-stamp live in life/objects.css with the rest */

/* 14. motion: a page change is a camera cut */
.lf-ghost{position:absolute;inset:0;z-index:1;padding:inherit;pointer-events:none}
.lf-ghost-eye .lf-eyebrow{visibility:hidden}

@media print{
#lf-sky,#lf-stage,body.lf-read::after{display:none!important}
.lf-air{text-shadow:none}
}