/* 天光 · today.css — 今天 (#lf-today), the lesson (.lf-lesson), a finished sitting (.lf-cele). docs/LIFE.md §6.3, §8, §9. */
#lf-today,.lf-cele,.lf-lesson{--lft-disp:var(--f-display,"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif);
--lft-on:var(--on-sky,#FFF8FB);--lft-on2:var(--on-sky-2,rgba(255,248,251,.8));--lft-sh:var(--on-sky-shadow,0 1px 2px rgba(8,6,28,.42),0 0 26px rgba(8,6,28,.34));
--lft-lamp:var(--lamp,#FFC869);--lft-now:var(--now,#FFB3A7);
--pc-paper:#F5EEE2;--pc-paper-hi:#FBF7EF;--pc-ink:#1F1B33;--pc-ink2:#4B4463;--pc-ink3:#625B7C;--pc-line:rgba(31,27,51,.13);--pc-gold:#E09A2B;--pc-stamp:#B23C28;
--pc-now:#D8566A;--pc-pencil:#3D3A55;--pc-inkline:rgba(28,24,48,.5);--pc-radius:7px;
--pc-shadow:0 1px 1px rgba(20,10,30,.18),0 8px 18px -6px rgba(10,6,30,.45),0 30px 50px -24px rgba(10,6,30,.6)}
:root[data-theme="light"] :is(#lf-today,.lf-cele){--pc-paper:#FFFCF6;--pc-paper-hi:#FFF;--pc-shadow:0 1px 1px rgba(60,40,20,.08),0 8px 18px -6px rgba(60,40,20,.18),0 30px 50px -24px rgba(60,40,20,.3)}

/* the page */
#lf-today{position:relative;container-type:inline-size;color:var(--lft-on);max-width:1760px;padding-bottom:28px}
.view:has(>#lf-today){max-width:none} /* (the page's 1080 px is the poster's; the day below may use a wide window) */
#lf-today .lft-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
@container (min-width:760px){
#lf-today .lft-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:clamp(28px,5cqi,64px)}
#lf-today .lft-top,#lf-today .lft-path,#lf-today .lft-cards{grid-column:1/-1}
#lf-today .lft-poster{grid-column:1/-1;grid-row:2}
#lf-today .lft-sounds-row{grid-column:1;grid-row:3}
#lf-today .lft-grid>.lft-aside{grid-column:2;grid-row:3;align-self:start;margin:clamp(26px,4cqi,44px) 0 0}
#lf-today .lft-week{grid-column:1}
#lf-today .lft-todos{grid-column:2}
/* type on air toward the frame's right, where the world's focus pull thins out: a soft cloud of the page's veil behind it
(§8: a soft scrim where needed) — the sun path's stops, the aside's words (not the teacher's note, a thing), the to-dos */
#lf-today :is(.lft-stop-l,.lft-aside>:not(.lft-note),.lft-todo){position:relative;isolation:isolate}
#lf-today :is(.lft-stop-l,.lft-aside>:not(.lft-note),.lft-todo)::after{content:"";position:absolute;z-index:-1;inset:-16px -24px;border-radius:60px;
background:color-mix(in srgb,var(--lft-veil2) 70%,transparent);filter:blur(24px);pointer-events:none}
#lf-today .lft-stop-l::after{inset:-8px -14px;filter:blur(12px)}}
/* wide: the poster keeps its frame (her house stays clear to its right); below it the day spreads across the scene */
@container (min-width:1100px){
#lf-today .lft-grid{grid-template-columns:minmax(0,1fr) minmax(300px,26rem);column-gap:clamp(40px,4cqi,80px)}
#lf-today :is(.lft-poster,.lft-top){max-width:1080px}}
:where(#lf-today) .lft-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
:where(#lf-today) button{font:inherit;-webkit-tap-highlight-color:transparent}
:where(#lf-today) .lf-say{background:none;border:0;padding:0;margin:0;color:inherit;text-align:left;cursor:pointer;border-radius:6px}
#lf-today :focus-visible{outline:2px solid var(--lft-now);outline-offset:3px}

/* the poster: the first screen is a film still (docs/LIFE.md §8) */
#lf-today .lft-poster{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,6cqi,48px);
min-height:max(540px,calc(100vh - 150px));min-height:max(540px,calc(100svh - 150px))}
@container (min-width:760px){#lf-today .lft-poster{min-height:max(600px,calc(100vh - 64px));min-height:max(600px,calc(100svh - 64px))}}
#lf-today .lft-hero{position:relative;padding:clamp(2px,2cqi,22px) 0 0;margin:0;isolation:isolate;text-shadow:var(--lft-sh)}
/* words on the world: a radial over the sky; over the town a soft-focus lower third, feathered */
#lf-today{--lft-veil:rgba(8,6,32,.36);--lft-veil2:rgba(8,6,32,.78)}
:root[data-lf-sky="light"] #lf-today{--lft-veil:rgba(255,255,255,.4);--lft-veil2:rgba(255,255,255,.62)}
#lf-today .lft-poster,#lf-today .lft-sounds-row{--lft-on2:var(--lft-on)}
#lf-today .lft-hero::before,#lf-today .lft-scene::before{content:"";position:absolute;z-index:-1;pointer-events:none}
#lf-today .lft-hero::before{left:-60%;right:-30%;top:-90px;bottom:-40%;background:radial-gradient(54% 58% at 44% 38%,var(--sky-scrim,rgba(8,6,32,.34)),transparent 74%)}
#lf-today .lft-scene::before{left:-32px;right:-32px;top:calc(0px - var(--lft-vf,100px));bottom:-230px;
background:linear-gradient(180deg,transparent,var(--lft-veil) var(--lft-vf,100px),var(--lft-veil) calc(100% - 70px),transparent);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
-webkit-mask-image:linear-gradient(180deg,transparent,#000 var(--lft-vf,100px),#000 calc(100% - 70px),transparent);mask-image:linear-gradient(180deg,transparent,#000 var(--lft-vf,100px),#000 calc(100% - 70px),transparent)}
/* phone and panel: her house stands in the middle band; the veil starts just above the words */
@container (max-width:759.98px){
#lf-today .lft-poster{min-height:max(540px,calc(100vh - 118px));min-height:max(540px,calc(100svh - 118px))}
#lf-today .lft-scene{--lft-vf:40px}}
/* wider: the words keep to the left, her house to their right */
@container (min-width:480px){
#lf-today .lft-scene{max-width:60%}
#lf-today .lft-scene::before{left:-40px;right:-45%;top:calc(0px - var(--lft-vf,130px));bottom:-200px;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 var(--lft-vf,130px),#000 calc(100% - 70px),transparent),linear-gradient(90deg,transparent,#000 40px,#000 55%,transparent);-webkit-mask-composite:source-in;
mask-image:linear-gradient(180deg,transparent,#000 var(--lft-vf,130px),#000 calc(100% - 70px),transparent),linear-gradient(90deg,transparent,#000 40px,#000 55%,transparent);mask-composite:intersect}}
/* the hour in words: a soft focus of its own (the horizon is bright) */
#lf-today .lft-amb{position:relative;isolation:isolate;width:fit-content}
.lft-amb::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-35%;right:-35%;top:-60px;bottom:-60px;
background:radial-gradient(50% 50% at 45% 50%,color-mix(in srgb,var(--lft-veil2) 62%,transparent),color-mix(in srgb,var(--lft-veil2) 34%,transparent) 55%,transparent);
-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);-webkit-mask-image:radial-gradient(50% 50% at 45% 50%,#000 40%,transparent);mask-image:radial-gradient(50% 50% at 45% 50%,#000 40%,transparent)}
#lf-today .lft-amb :is(.lf-say,.lft-amb-zh){text-shadow:0 0 12px rgba(8,6,32,.6),0 0 26px rgba(8,6,32,.4)}
:root[data-lf-sky="light"] #lf-today .lft-amb :is(.lf-say,.lft-amb-zh){text-shadow:0 0 12px rgba(255,255,255,.7),0 0 26px rgba(255,255,255,.5)}
.lft-eyebrow{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 14px;font-size:11.5px;line-height:1.5;color:var(--lft-on2)}
.lft-eb{display:inline-block;font-family:var(--f-sans);font-weight:650;letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.lft-eb-zh{font-size:12px;letter-spacing:.06em}
.lft-hello{margin:clamp(10px,2.4cqi,18px) 0 0;font:inherit}
#lf-today .lft-greet{display:inline-block;font-family:var(--lft-disp);font-weight:400;font-optical-sizing:auto;
font-size:clamp(44px,11vw,104px);font-size:clamp(44px,12.6cqi,108px);line-height:.96;letter-spacing:-.028em;color:var(--lft-on)}
.lft-w{display:inline-block}
.lft-i{font-style:italic;letter-spacing:-.018em}
.lft-hello-zh{display:block;margin-top:clamp(6px,1.6cqi,12px);font-size:clamp(15px,4.2cqi,21px);font-weight:600;letter-spacing:.2em;color:var(--lft-on2)}
.lft-amb{margin:clamp(14px,3.6cqi,26px) 0 0;max-width:36em}
.lft-amb-en{display:inline;font-family:var(--lft-disp);font-style:italic;font-size:clamp(17px,4.6cqi,23px);line-height:1.35;color:var(--lft-on)}
.lft-amb-zh{display:block;margin-top:3px;font-size:13.5px;color:var(--lft-on2);letter-spacing:.02em}

/* the day's scene, at the foot of the poster */
#lf-today .lft-scene{position:relative;isolation:isolate;text-shadow:var(--lft-sh);padding-bottom:4px}
.lft-headline{margin:clamp(6px,1.4cqi,10px) 0 0;font:inherit}
#lf-today .lft-hl{display:inline-block;font-family:var(--lft-disp);font-weight:420;font-optical-sizing:auto;
font-size:clamp(34px,8.6vw,66px);font-size:clamp(34px,9.4cqi,70px);line-height:1.02;letter-spacing:-.022em;color:var(--lft-on)}
.lft-meta{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:2px 8px;font-size:14.5px;color:var(--lft-on2)}
.lft-meta .lft-dot{opacity:.6}
.lft-progress{margin:clamp(14px,3.6cqi,22px) 0 0}
.lft-pl-en{font-family:var(--lft-disp);font-size:clamp(16px,4.2cqi,20px);line-height:1.35}
.lft-pl-zh{display:block;margin-top:2px;font-size:13px;color:var(--lft-on2)}

/* one obvious next step: the page's one glowing pill, in the hour's light (life.css .lf-pill) */
#lf-today .lft-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:18px;text-shadow:none}
#lf-today .lft-cta{display:inline-grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;column-gap:16px;
min-height:58px;padding:9px 20px 9px 26px;border:0;border-radius:999px;cursor:pointer;text-align:left;
background:var(--now,#FFB3A7);color:var(--on-now,#221A3D);box-shadow:var(--lf-pill-sh,0 10px 28px -10px rgba(255,179,167,.6));
transition:transform .45s cubic-bezier(.2,1.6,.4,1),filter .2s}
#lf-today .lft-cta:hover{transform:translateY(-1px);filter:brightness(1.05) saturate(1.05)}
#lf-today .lft-cta:active{transform:scale(.97);transition-duration:.08s}
#lf-today .lft-cta:focus-visible{outline:2px solid var(--focus,#FFE0A3);outline-offset:4px}
.lft-cta-zh{grid-column:1;grid-row:1;font-size:16px;font-weight:700;line-height:1.3;letter-spacing:.03em}
.lft-cta-en{grid-column:1;grid-row:2;font-family:var(--lft-disp);font-style:italic;font-size:14px;line-height:1.25}
#lf-today .lft-cta .lft-arrow{grid-column:2;grid-row:1/3;width:22px;height:22px}
.lft-arrow path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#lf-today .lft-cta2{color:var(--lft-on);text-shadow:var(--lft-sh)}

/* the sounds of the day */
#lf-today .lft-sounds-row{position:relative;isolation:isolate;margin-top:clamp(26px,6cqi,44px);text-shadow:var(--lft-sh)}
.lft-sounds{display:flex;flex-wrap:wrap;gap:2px 0;margin:8px 0 0 -6px}
#lf-today .lft-sound{display:grid;justify-items:center;min-width:44px;min-height:52px;padding:5px 3px 6px;border:0;border-radius:14px;background:none;cursor:pointer;
color:var(--lft-on);transition:background-color .2s,transform .3s cubic-bezier(.2,1.6,.4,1)}
#lf-today .lft-sound b{font-family:var(--f-ipa,system-ui,sans-serif);font-weight:500;font-size:clamp(18px,4.8cqi,22px);line-height:1.2;
padding-bottom:3px;border-bottom:1px solid color-mix(in srgb,var(--lft-on) 35%,transparent)}
#lf-today .lft-sound small{margin-top:3px;font-family:var(--lft-disp);font-style:italic;font-size:12px;line-height:1;color:var(--lft-on2)}
#lf-today .lft-sound:hover{background:color-mix(in srgb,var(--lft-on) 10%,transparent)}
#lf-today .lft-sound:active{transform:scale(.94)}

/* the sun path */
#lf-today .lft-path{position:relative;height:clamp(126px,24cqi,210px);margin:clamp(22px,5cqi,44px) 0 clamp(8px,3cqi,24px);color:var(--lft-on)}
.lft-path-in{position:absolute;inset:0}
.lft-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lft-arc path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.lft-arc-base{stroke:color-mix(in srgb,var(--lft-on) 42%,transparent);stroke-width:1.2;stroke-dasharray:1.5 6}
.lft-arc-gone{stroke:var(--lft-lamp);stroke-width:2.4;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--lft-lamp) 70%,transparent))}
.lft-horizon{position:absolute;left:0;right:0;top:86%;height:1px;
background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--lft-on) 32%,transparent) 12%,color-mix(in srgb,var(--lft-on) 32%,transparent) 88%,transparent)}
.lft-stops{list-style:none;margin:0;padding:0}
#lf-today .lft-stop{position:absolute;width:0;height:0;z-index:1}
#lf-today .lft-stop>button{position:absolute;left:0;top:0;transform:translate(-50%,-23px);display:grid;justify-items:center;gap:5px;
min-width:52px;padding:16px 6px 6px;background:none;border:0;color:inherit;cursor:pointer;border-radius:16px}
.lft-stop-dot{position:relative;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;
border:1.5px solid color-mix(in srgb,var(--lft-on) 78%,transparent);background:color-mix(in srgb,var(--sky-top,#101436) 55%,transparent)}
.lft-stop-dot svg{width:10px;height:10px;overflow:visible}
.lft-stop-dot path{fill:none;stroke:#3A2400;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#lf-today .lft-stop.is-done .lft-stop-dot{border-color:transparent;background:var(--lft-lamp);box-shadow:0 0 12px 1px color-mix(in srgb,var(--lft-lamp) 70%,transparent)}
#lf-today .lft-stop.is-now .lft-stop-dot{border-color:transparent;background:var(--lft-now);box-shadow:0 0 0 4px color-mix(in srgb,var(--lft-now) 28%,transparent),0 0 18px 2px color-mix(in srgb,var(--lft-now) 60%,transparent)}
#lf-today .lft-stop.is-now .lft-stop-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--lft-now);animation:lft-ping 2.8s cubic-bezier(.2,.6,.3,1) infinite}
#lf-today .lft-stop.is-part:not(.is-now) .lft-stop-dot{background:linear-gradient(90deg,var(--lft-lamp) 50%,transparent 50%)}
.lft-stop-l{display:grid;justify-items:center;line-height:1.2;text-shadow:var(--lft-sh);white-space:nowrap}
.lft-stop-l b{font-size:13px;font-weight:700;letter-spacing:.06em}
.lft-stop-l small{font-size:11px;color:var(--lft-on2);font-variant-numeric:tabular-nums}
#lf-today .lft-stop.is-future .lft-stop-l{opacity:.86}
#lf-today .lft-stop>button:hover .lft-stop-dot{transform:scale(1.15)}
.lft-stop-dot{transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
@keyframes lft-ping{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(2.6);opacity:0}}
/* the sun, or the moon, at the real time */
#lf-today .lft-orb{position:absolute;z-index:2;transform:translate(-50%,-50%);pointer-events:none;line-height:0}
.lft-sun{display:block;width:20px;height:20px;border-radius:50%;
background:radial-gradient(circle at 42% 40%,#FFFBEA 0,#FFE08A 42%,#FFB547 100%);
box-shadow:0 0 0 7px rgba(255,214,120,.16),0 0 30px 10px rgba(255,186,80,.42)}
.lft-moon{display:block;width:24px;height:24px;overflow:visible;filter:drop-shadow(0 0 10px rgba(255,214,200,.65))}
.lft-moon-d{fill:rgba(40,34,78,.62)}
.lft-moon-l{fill:#FFE6DC}
.lft-moon-r{fill:none;stroke:rgba(255,230,220,.7);stroke-width:.8}

/* the aside: the teacher's note is a real note; the rest is words on air */
#lf-today .lft-aside{position:relative;display:grid;gap:26px;align-content:start;margin:clamp(22px,6cqi,34px) 0 0}
#lf-today .lft-aside:empty{display:none}
#lf-today .lft-note{position:relative;margin:0;padding:18px 18px 16px;border-radius:3px 3px 10px 3px;color:#2B2433;text-shadow:none;
background:linear-gradient(170deg,rgba(255,255,255,.45),transparent 40%),#FFF1B3;box-shadow:0 1px 1px rgba(40,30,0,.12),0 10px 22px -10px rgba(10,6,30,.5);transform:rotate(-.8deg)}
#lf-today .lft-note::before{content:"";position:absolute;left:50%;top:-10px;width:86px;height:22px;margin-left:-43px;transform:rotate(-3deg);
background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 6px,transparent 6px 12px),rgba(248,169,176,.7);
box-shadow:0 1px 2px rgba(0,0,0,.08);clip-path:polygon(2% 0,98% 4%,100% 50%,97% 100%,3% 96%,0 50%)}
#lf-today .lft-note p{margin:0}
.lft-note-k{font-size:11px;font-weight:700;letter-spacing:.14em;color:#7A5A1E;margin-bottom:6px!important}
.lft-note-t{font-size:15px;line-height:1.75}
#lf-today .lft-sign{margin-top:8px!important;text-align:right;font-family:"Kaiti SC","STKaiti","KaiTi","BiauKai",var(--lft-disp);font-size:17px;color:#5B4630}
#lf-today .lft-air{text-shadow:var(--lft-sh)}
#lf-today .lft-air p{margin:0}
#lf-today .lft-air .lf-eyebrow{margin-bottom:8px;color:var(--lft-on2)}
.lft-air-en{font:400 clamp(21px,5.4cqi,26px)/1.3 var(--lft-disp);margin-bottom:4px!important}
#lf-today .lft-air .btn{margin-top:4px}
:is(#lf-today,.lft-classic) .fd-tip{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;max-width:none;margin:0;padding:0;border-radius:0;background:none;box-shadow:none;color:var(--lft-on);font-size:14.5px;text-shadow:var(--lft-sh)}
:is(#lf-today,.lft-classic) .fd-tip p{flex:1 1 16em}
/* 新 is a word with a small lamp; 去试试 a word with the hour's arrow (accent inks do not hold 4.5:1 on a bright frame) */
:is(#lf-today,.lft-classic) .fd-tip-new{display:inline-flex;align-items:center;gap:7px;border:0;padding:0;margin-right:10px;color:var(--lft-on);letter-spacing:.1em}
:is(#lf-today,.lft-classic) .fd-tip-new::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lft-lamp);box-shadow:0 0 10px 2px var(--lamp-glow,rgba(255,200,105,.5))}
:is(#lf-today,.lft-classic) .fd-tip .btn{min-height:44px;padding:6px 0;border:0;background:none;box-shadow:none;color:var(--lft-on);font-weight:650}
:is(#lf-today,.lft-classic) .fd-tip .btn::after{content:"→";margin-left:.45em;color:var(--now-ink,var(--lft-on))}
:is(#lf-today,.lft-classic) .fd-tip-x{width:44px;height:44px;color:var(--lft-on2)}

/* a finished week: the host's classic page on air (today.js gathers it in .lft-classic.lf-air); 去找老师 the one pill */
.lft-classic{--lft-on:var(--ink);--lft-on2:var(--ink-2);--lft-sh:var(--air-sh);--lft-lamp:var(--lamp);--line:transparent;--rule:transparent;--sheet:transparent;--sheen:none;--card-hl:none;--fill:transparent}
.lft-classic .setup h2{margin:0 0 12px;font:450 clamp(26px,5.4vw,36px)/1.2 var(--f-display-zh)}
.lft-classic .setup .btn:not(.ghost){min-height:48px;padding:0 26px;border-radius:999px;background:var(--now);color:var(--on-now);box-shadow:var(--lf-pill-sh);text-shadow:none}
.lft-classic .setup .btn:not(.ghost)::after{content:none}
.lft-classic .setup .form-row{gap:4px 24px;align-items:center}
.lft-classic :is(.tt,.exr,.how,.kg-invite,.kg){border:0;border-radius:0;background:none;box-shadow:none}
.lft-classic :is(.exr,.kg-invite,.kg,.tt-when,.tt-tasks){padding-left:0;padding-right:0}
.lft-classic .kg{overflow:visible}.lft-classic .kg::before{content:none}
.lft-classic .band .hand{fill:var(--ink)}
/* first run: the host's forms on air (.lf-air) */
#lf-today .lft-setup{display:grid;gap:26px;margin:0 0 clamp(24px,6cqi,40px)}
#lf-today .lft-setup .setup{margin:0}
#lf-today .lft-setup .setup h2{font:450 clamp(24px,6cqi,30px)/1.25 var(--lft-disp);letter-spacing:-.01em}

/* the postcards */
#lf-today .lft-cards{position:relative;display:flex;flex-direction:column;padding:8px 4px 6px;margin-top:clamp(6px,2cqi,16px)}
#lf-today .lft-pc+.lft-pc{margin-top:-8px}
/* the panel: the phone's pile, the cards a hand's width (≤ 30rem), dealt left and right */
@container (min-width:500px) and (max-width:759.98px){
#lf-today .lft-pc{width:min(100%,30rem)}
#lf-today .lft-pc:nth-child(even){align-self:flex-end}}
/* a desk: two columns under the sun path — the day (morning, afternoon) left, the evening and the night right */
@container (min-width:760px){
#lf-today .lft-cards{display:grid;grid-template:auto auto/repeat(2,minmax(0,1fr));grid-auto-flow:column;align-items:start;gap:30px clamp(22px,3cqi,34px);padding:14px 6px}
#lf-today .lft-pc+.lft-pc{margin-top:0}}
/* wide (≥ 1100 px of page): the sounds of the day, large enough to be the band's other half (the teacher's note is the first) */
@container (min-width:1100px){
#lf-today .lft-cards{padding:18px 0 14px}
#lf-today .lft-sound{min-width:60px;padding:6px 6px 8px}
#lf-today .lft-sound b{font-size:30px}
#lf-today .lft-sound small{font-size:14px}
/* the postcards: a title has the room up to its stamp, and when it must take two lines they are even (never "Check- / in") */
#lf-today .lft-pc:not(.is-done) .lft-pc-head{padding-right:48px}
#lf-today .lft-pc .lft-pc-t{text-wrap:balance}
#lf-today .lft-pc-min{white-space:nowrap}}
/* a laptop (1100–1559 px of page): two and two, a step down to the right, as the sun goes down — the day's sittings side by side
under the rising arc, the evening under the afternoon and the night beside it under its stop; read row by row, morning → night.
The morning and the night hang a little lower, as their stops do; the cards stay a hand wide (350–420 px, their titles one line):
on a wider page the town shows between them instead, so they meet the one-row cards at 1560 px with less of a jump */
@container (min-width:1100px) and (max-width:1559.98px){
#lf-today .lft-cards{grid-template:auto auto/repeat(3,minmax(0,420px));justify-content:space-between;grid-auto-flow:row;gap:clamp(36px,3.4cqi,52px) clamp(20px,2cqi,30px)}
#lf-today .lft-pc:nth-child(1){grid-area:1/1;translate:0 22px}
#lf-today .lft-pc:nth-child(2){grid-area:1/2}
#lf-today .lft-pc:nth-child(3){grid-area:2/2}
#lf-today .lft-pc:nth-child(4){grid-area:2/3;translate:0 20px}
#lf-today .lft-pc .lft-pc-t{font-size:clamp(19px,1.7cqi,22px)}}
/* wide (≥ 1560 px of page): one row across the scene, each card under its hour on the sun path (the row set in from the left
where the arc starts at 07:00, as the stops fall), a gentle arc of their own; morning → night */
@container (min-width:1560px){
#lf-today .lft-cards{grid-template:auto/none;grid-auto-columns:minmax(0,1fr);gap:0 clamp(18px,1.7cqi,30px);
margin-left:clamp(0px,22.5cqi - 247px,9cqi);margin-right:clamp(0px,7.5cqi - 82px,3cqi)}
#lf-today .lft-pc:nth-child(1){translate:0 22px}
#lf-today .lft-pc:nth-child(3){translate:0 6px}
#lf-today .lft-pc:nth-child(4){translate:0 26px}
#lf-today .lft-pc-pic{aspect-ratio:2/1}
#lf-today .lft-pc .lft-pc-t{font-size:19px}}
.lft-pc,.lft-cele-pc{position:relative;display:block;color:var(--pc-ink);border-radius:var(--pc-radius);overflow:hidden;
background:radial-gradient(120% 70% at 20% 0%,rgba(255,255,255,.55),transparent 60%),radial-gradient(90% 90% at 100% 100%,rgba(140,100,40,.07),transparent 65%),var(--pc-paper);
box-shadow:var(--pc-shadow);text-shadow:none;
--ink:var(--pc-ink);--ink-2:var(--pc-ink2);--ink-3:var(--pc-ink3);--line:var(--pc-line);--rule:var(--pc-line);--fill:rgba(31,27,51,.05);--sheet:transparent;--ctl:rgba(31,27,51,.35);
--b-raised:#FFFDF8;--b-well:rgba(31,27,51,.06);--b-press:rgba(31,27,51,.08);--b-glass-line:rgba(31,27,51,.14)} /* (the sandbox's chips on the 开工单, e.g. 今天去: paper too) */
#lf-today .lft-pc{--tilt:0deg;transform:rotate(var(--tilt));transform-origin:50% 40%;z-index:1;
transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
#lf-today .lft-pc.is-now{z-index:3;transform:translateY(-6px);
box-shadow:var(--pc-shadow),0 0 0 1.5px color-mix(in srgb,var(--lft-now) 75%,transparent),0 16px 60px -8px color-mix(in srgb,var(--lft-now) 60%,transparent)}
#lf-today .lft-pc:focus{outline:none}
#lf-today .lft-pc:focus-visible{outline:2px solid var(--lft-now);outline-offset:3px}
#lf-today .lft-pc.is-called{animation:lft-called 1.2s cubic-bezier(.2,.8,.2,1)}
@keyframes lft-called{0%{box-shadow:var(--pc-shadow),0 0 0 0 color-mix(in srgb,var(--lft-now) 80%,transparent)}35%{box-shadow:var(--pc-shadow),0 0 0 6px color-mix(in srgb,var(--lft-now) 45%,transparent)}100%{box-shadow:var(--pc-shadow),0 0 0 14px transparent}}

/* the picture: her town at that hour */
.lft-pc-pic{position:relative;aspect-ratio:5/2;overflow:hidden;background:#E9E4DA}
.lft-pc-art,.lft-pc-pale,.lft-pc-sky{position:absolute;inset:0}
.lft-pc-pale{background:linear-gradient(rgba(61,58,85,.07) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(90deg,rgba(61,58,85,.07) 1px,transparent 1px) 0 0/14px 14px,var(--pc-pale)}
.lft-pc-sky{background:var(--pc-sky);opacity:0;transition:opacity .7s}
.lft-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lft-art .lft-f{opacity:0;transition:opacity .7s}
.lft-art .lft-l{fill:none;stroke:var(--pc-pencil);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.82;transition:stroke .6s,opacity .6s}
.lft-art .lft-l2{transform:translate(.9px,.6px);opacity:.28}
.lft-art .lft-g{fill:none;stroke:var(--pc-pencil);stroke-width:.8;stroke-dasharray:3 4;opacity:.32;vector-effect:non-scaling-stroke;transition:opacity .4s}
.lft-art .lft-win{fill:#FFC869}
.lft-art .lft-win-h{fill:#FFC869;opacity:.28}
.is-part .lft-pc-sky{opacity:.34}
.is-part .lft-art .lft-f{opacity:.3}
.is-done .lft-pc-sky{opacity:1}
.is-done .lft-pc-pale{opacity:0}
.is-done .lft-art .lft-f{opacity:1}
.is-done .lft-art .lft-l{stroke:var(--pc-inkline);opacity:.75}
.is-done .lft-art .lft-l2,.is-done .lft-art .lft-g{opacity:0}
.lft-pc-snap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.lft-pc-snap.is-on{opacity:1}
.lft-pc.has-snap .lft-pc-art{transition:opacity .8s;opacity:0}
[data-kind="a"],.lft-cele-pc[data-sess="a"]{--pc-sky:linear-gradient(180deg,#5B9FE4 0%,#98C8F1 52%,#F6E2C2 100%);--pc-pale:linear-gradient(180deg,#E8EEF5,#F6F0E5);--pc-post:#6FA8E6}
[data-kind="b"],.lft-cele-pc[data-sess="b"]{--pc-sky:linear-gradient(180deg,#4A8AD6 0%,#8BBCEA 48%,#F5CB8E 100%);--pc-pale:linear-gradient(180deg,#EAEEF5,#F7EEDD);--pc-post:#E7A546}
[data-kind="c"],.lft-cele-pc[data-sess="c"]{--pc-sky:linear-gradient(180deg,#2A2966 0%,#7C4A8C 46%,#EE8E6C 88%,#F6B784 100%);--pc-pale:linear-gradient(180deg,#EEE8F1,#F8ECE4);--pc-post:#C85D72;--pc-inkline:rgba(255,248,240,.55)}
[data-kind="n"]{--pc-sky:radial-gradient(1px 1px at 18% 22%,#fff,transparent),radial-gradient(1px 1px at 46% 12%,rgba(255,255,255,.8),transparent),radial-gradient(1.2px 1.2px at 72% 30%,#fff,transparent),linear-gradient(180deg,#090D2C 0%,#1A1D50 58%,#3B2F6A 100%);
--pc-pale:linear-gradient(180deg,#E7E6F1,#EFEAF4);--pc-post:#3B3877;--pc-inkline:rgba(255,248,240,.4)}

/* the back of the card */
.lft-pc-in{position:relative;padding:14px 16px 2px}
.lft-stamp{position:absolute;top:12px;right:12px;width:40px;height:48px;pointer-events:none}
.lft-postage{display:block;width:40px;height:48px;overflow:visible}
.lft-postage.is-blank rect,.lft-postage.is-blank circle{fill:none;stroke:rgba(61,58,85,.34);stroke-width:1;vector-effect:non-scaling-stroke}
.lft-postage.is-blank rect{stroke-dasharray:3 2.5}
.lft-postage-bg{fill:var(--pc-post,#6FA8E6)}
.lft-postage-sh{fill:var(--pc-post,#3B3877)}
.lft-postage text{font:700 5.4px/1 var(--f-sans);letter-spacing:.1em;fill:#fff}
.lft-perf circle{fill:var(--pc-paper)}
.lft-pm{position:absolute;top:8px;right:6px;width:110px;height:55px;color:var(--pc-stamp);opacity:.82;mix-blend-mode:multiply;transform:rotate(-8deg);transform-origin:30% 50%;pointer-events:none}
.lft-pm .pm-a{font:800 7.5px/1 var(--f-sans);letter-spacing:.22em}
.lft-pm .pm-b{font:800 11px/1 var(--f-sans);letter-spacing:.02em}
.lft-pm .pm-c{font:700 6.5px/1 var(--f-sans);letter-spacing:.24em}
.lft-pc-head{padding-right:56px}
.is-done .lft-pc-head{padding-right:118px}
.lft-pc-eb{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 9px;font-size:10.5px;line-height:1.5;color:var(--pc-ink3);font-variant-numeric:tabular-nums}
.lft-pc-k{font-weight:750;letter-spacing:.18em;color:var(--pc-ink2)}
.lft-pc-time{font-weight:600;letter-spacing:.06em;font-size:11.5px}
.lft-pc-ebz{font-size:12px;letter-spacing:.08em;color:var(--pc-ink2)}
.lft-now{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;align-items:baseline;gap:6px;padding:3px 10px 3px 9px;border-radius:999px;
background:var(--pc-now);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em;box-shadow:0 4px 12px -4px rgba(120,20,40,.55)}
.lft-now b{font-size:10px;letter-spacing:.16em}
.lft-pc-title{margin:7px 0 0;font:inherit}
.lft-pc .lft-pc-t{display:inline;font-family:var(--lft-disp);font-weight:450;font-optical-sizing:auto;font-size:22px;line-height:1.14;letter-spacing:-.012em;color:var(--pc-ink)}
.lft-pc-zh{margin:5px 0 0;font-size:13px;color:var(--pc-ink2);letter-spacing:.04em}
.lft-steps{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--pc-line)}
.lft-steps li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;column-gap:10px;align-items:start;padding:9px 0;border-bottom:1px dashed var(--pc-line);font-size:14px;line-height:1.5;color:var(--pc-ink)}
.lft-sn{display:grid;place-items:center;width:21px;height:21px;margin-top:0;border-radius:50%;background:var(--pc-ink);color:var(--pc-paper-hi);font:700 11px/1 var(--f-sans)}
.lft-sn svg{width:11px;height:11px;overflow:visible}
.lft-sn path{fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.lft-steps li.is-done .lft-sn{background:var(--pc-gold)}
.lft-steps li.is-done .lft-st{color:var(--pc-ink2)}
.lft-sm{padding-top:1px;font-size:11.5px;color:var(--pc-ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.lft-pc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 16px}
.lft-pc-min{margin:0;display:grid;line-height:1.25}
.lft-pc-min>span:first-child{font-family:var(--lft-disp);font-style:italic;font-size:17px;color:var(--pc-ink)}
.lft-pc-minz{font-size:12px;color:var(--pc-ink3)}
/* the postcard's action is written on it */
#lf-today .lft-pc .btn{min-height:44px;justify-content:flex-start;gap:6px;padding:8px 2px 8px 10px;border:0;border-radius:8px;background:none;box-shadow:none;color:var(--pc-ink);font-size:15.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;text-shadow:none}
#lf-today .lft-pc .btn::after{content:"→";font:400 1.15em/1 var(--lft-disp);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
#lf-today .lft-pc .btn:hover::after{transform:translateX(3px)}
#lf-today .lft-pc .btn.ghost{color:var(--pc-ink2);font-weight:600}
#lf-today .lft-pc.is-now .lft-pc-foot .btn{color:#B23A4C}

/* the night's card: the lights, the quiz, the review */
.lft-lamps{margin:12px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;font-size:14px;color:var(--pc-ink)}
.lft-lamps small{grid-column:2;font-size:12px;color:var(--pc-ink3);line-height:1.5}
.lft-lamps b{font-family:var(--lft-disp);font-size:20px;font-weight:600;color:#B06A00}
.lft-lamp{grid-row:1/3;width:16px;height:16px;border-radius:4px;background:radial-gradient(circle at 50% 40%,#FFF3CC,#FFC45E 60%,#E08A1E);box-shadow:0 0 12px 2px rgba(255,180,60,.6)}
.lft-lamp.is-off{background:#D9D3E6;box-shadow:inset 0 0 0 1px rgba(31,27,51,.2)}
#lf-today .lft-exam{margin:12px 16px 0;padding:0}
#lf-today .lft-exam:empty{display:none}
#lf-today .lft-exam>*{margin:0;padding:12px 0;border:0;border-top:1px solid var(--pc-line);border-radius:0;background:none;box-shadow:none;color:var(--pc-ink);max-width:none}
#lf-today .lft-exam .exr::before,#lf-today .lft-exam .exr::after{display:none}
#lf-today .lft-exam p{margin:0 0 4px;color:var(--pc-ink)}
#lf-today .lft-exam .ex-t{font-weight:700;display:flex;align-items:center;gap:6px}
#lf-today .lft-exam .ex-meta,#lf-today .lft-exam .ex-why{font-size:13px;color:var(--pc-ink2)}
#lf-today .lft-exam .ex-moon,#lf-today .lft-exam .bw-moon{width:16px;height:16px;fill:var(--pc-now);color:var(--pc-now)}
#lf-today .lft-exam .ex-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:8px}
#lf-today .lft-exam .btn{min-height:44px;padding:8px 2px}
#lf-today .lft-exam .link{color:var(--pc-ink2);min-height:40px}
#lf-today .lft-exam .kg-invite{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:13.5px}
#lf-today .lft-exam .kg-invite p{flex:1 1 180px;margin:0}
.lft-night-foot{justify-content:flex-end}

/* this week: seven small skies */
#lf-today .lft-week{margin-top:clamp(30px,7cqi,60px);text-shadow:var(--lft-sh)}
.lft-week-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.lft-week-t{margin:6px 0 0;font:inherit;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px}
.lft-wk-en{font-family:var(--lft-disp);font-weight:420;font-size:clamp(28px,7cqi,44px);line-height:1.05;letter-spacing:-.02em}
.lft-week-zh{font-size:14px;color:var(--lft-on2)}
.lft-week-navs{display:flex;gap:6px}
#lf-today .lft-wk-nav{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:none;color:var(--lft-on);cursor:pointer;filter:drop-shadow(0 1px 5px rgba(8,6,36,.5))}
#lf-today .lft-wk-nav svg{width:20px;height:20px}
#lf-today .lft-wk-nav path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lft-days{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
#lf-today .lft-day{position:relative;display:grid;justify-items:center;align-content:start;gap:5px;width:100%;min-height:44px;padding:4px 0 6px;
background:none;border:0;border-radius:14px;color:var(--lft-on);cursor:pointer;font-size:inherit;font-weight:inherit}
.lft-day-sky{position:relative;display:grid;place-items:center;width:clamp(34px,9.4cqi,58px);aspect-ratio:1;border-radius:50%;
font-family:var(--lft-disp);font-size:clamp(14px,3.8cqi,20px);transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
#lf-today .lft-day:hover .lft-day-sky{transform:scale(1.06)}
#lf-today .lft-day.is-done .lft-day-sky{background:radial-gradient(circle at 50% 36%,#FFF3D1 0,#FFD37E 34%,#F4A24E 70%,#D0713A 100%);
box-shadow:0 0 20px -2px rgba(255,186,90,.7),inset 0 -3px 6px rgba(150,70,20,.25)}
#lf-today .lft-day.is-done .lft-day-sky .fl{width:58%;height:58%;filter:none;--fl-p:#E8483B;--fl-c:#FFE7A0}
#lf-today .lft-day.is-cur .lft-day-sky{background:linear-gradient(180deg,var(--sky-top,#20266A),var(--sky-mid,#6D4E96) 55%,var(--sky-low,#F0977A));
box-shadow:0 0 0 2px var(--lft-now),0 0 26px -2px var(--lft-now);color:#fff}
#lf-today .lft-day.is-future .lft-day-sky{border:1.5px dashed color-mix(in srgb,var(--lft-on) 50%,transparent);color:var(--lft-on2)}
#lf-today .lft-day.is-shown:not(.is-cur) .lft-day-sky{outline:2px solid var(--lft-on);outline-offset:3px}
#lf-today .lft-day-fl{position:absolute;top:calc(clamp(34px,9.4cqi,58px) - 7px);left:0;right:0;display:flex;justify-content:center;pointer-events:none}
#lf-today .lft-day-fl .fl{width:12px;height:12px;margin:0 -1px;--fl-p:var(--lft-lamp);--fl-c:#FFF3D6}
.lft-day-n{font-size:10.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--lft-on2);white-space:nowrap}
.lft-day-t{display:none;max-width:100%;padding:0 2px;font-family:var(--lft-disp);font-style:italic;font-size:13px;line-height:1.2;text-align:center;color:var(--lft-on)}
@container (min-width:640px){.lft-day-t{display:block}.lft-days{gap:10px}}
#lf-today .lft-flowers{display:flex;align-items:center;gap:12px;margin-top:18px}
#lf-today .lft-fl-i .fl{width:34px;height:34px;--fl-p:#E8483B;--fl-c:#FFE7A0;filter:drop-shadow(0 2px 8px rgba(232,72,59,.45))}
#lf-today .lft-flowers .big-count{margin:0;font-family:var(--lft-disp);font-weight:450;font-size:34px;line-height:1;color:var(--lft-on)}
#lf-today .lft-flowers .big-count .count{font-family:var(--f-sans);font-size:14px;font-weight:600;color:var(--lft-on2)}
.lft-fl-cap{margin:0;display:grid;font-size:12.5px;line-height:1.4;color:var(--lft-on2)}
.lft-fl-cap [lang="en"]{font-family:var(--lft-disp);font-style:italic}

/* the to-dos: the host's checklist on air */
#lf-today .lft-todos{margin-top:clamp(34px,7cqi,56px)}
#lf-today .lft-todo h3{margin:0 0 8px;font:400 clamp(24px,6cqi,30px)/1.2 var(--lft-disp);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;color:var(--lft-on);text-shadow:var(--lft-sh)}
#lf-today .lft-todo .count{font:500 13px var(--f-sans);color:var(--lft-on2)}
#lf-today .lft-todo .checklist{gap:0}
#lf-today .lft-todo .cbox{min-height:44px}

/* the daily opening */
#lf-today.lft-opening{pointer-events:none}
.lft-bars{position:fixed;inset:0;z-index:70;pointer-events:none}
.lft-bars i{position:absolute;left:0;right:0;height:max(7.5vh,40px);background:#04030B}
.lft-bars i:first-child{top:0}
.lft-bars i:nth-child(2){bottom:0}
.lft-bars b{position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 46%,transparent 40%,rgba(4,3,11,.5) 100%)}

@media (prefers-reduced-motion:reduce){
#lf-today .lft-stop.is-now .lft-stop-dot::after{animation:none;display:none}
#lf-today .lft-pc,#lf-today .lft-pc-sky,#lf-today .lft-art .lft-f,#lf-today .lft-pc-snap{transition:none}
.lft-bars{display:none}}

/* ── host markup on air (§9), lesson and Tonight (.lft-host): what .lf-air does not know — choices are words with a small lamp,
a speaker a glyph, feedback a note with a dot, the flash-card deck real index cards */
/* accent words on a bright frame: the theme's inks are tuned for paper, the frames are mid-tones, so deeper shades (≥ 4.5:1) */
:root[data-theme="light"] :is(.lft-host,#lf-today){--red:#962219;--ok:#704000;--lamp-ink:#704000;--blueprint:#4436B8;--c-l:#1B4C87}
.lft-host{--t-nw:color-mix(in srgb,var(--now-ink) 55%,var(--ink))}
.lft-host .say{width:44px;height:44px;border:0;border-radius:50%;background:none;box-shadow:none;color:var(--ink-2);filter:drop-shadow(0 1px 4px rgba(8,6,36,.35))}
.lft-host .say svg{width:19px;height:19px}
.lft-host .say:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 12%,transparent)}
.lft-host :is(.q-why,.sym-pit,.sym-us){position:relative;margin:10px 0;padding:0 0 0 20px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink);font-size:14.5px;line-height:1.65}
.lft-host :is(.q-why,.sym-pit,.sym-us)::before{content:"";position:absolute;left:2px;top:.55em;display:block;width:8px;height:8px;margin:0;border-radius:50%;
background:var(--lamp);box-shadow:0 0 10px var(--lamp-glow,rgba(255,200,105,.5));filter:none}
.lft-host :is(.q-why.no,.sym-pit)::before{background:var(--red);box-shadow:0 0 8px color-mix(in srgb,var(--red) 60%,transparent)}
.lft-host .sym-us::before{background:var(--c-l)}
.lft-host .reveal{border:0;padding:0;margin:14px 0}
.lft-host textarea:not([readonly]){box-shadow:none;background:linear-gradient(transparent calc(100% - 1px),var(--air-line,rgba(255,248,251,.42)) 0) 0 10px/100% 1.75em local}
.lft-host textarea:not([readonly]):focus{box-shadow:none;background-image:linear-gradient(transparent calc(100% - 2px),var(--now) 0)}
.lft-host .q{border:0;padding:20px 0 2px}
.lft-host .q-text{font:450 19px/1.5 var(--f-display-zh);color:var(--ink)}
.lft-host .opts{gap:0 6px;margin:4px 0 0 -10px}
.lft-host .opt{display:inline-grid;grid-template-columns:11px auto;column-gap:11px;align-items:center;min-height:48px;padding:6px 14px 6px 10px;border:0;border-radius:14px;
background:none;box-shadow:none;color:var(--ink);font:450 18px/1.3 var(--f-display-zh);text-align:left;text-shadow:inherit}
.lft-host .opt::before{content:"";width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--air-line,rgba(255,248,251,.42));transition:background-color .2s,box-shadow .2s}
.lft-host .opt:hover:not(:disabled){background:color-mix(in srgb,var(--ink) 10%,transparent)}
.lft-host .opt:disabled{color:var(--ink-2)}
.lft-host .opt.right{color:var(--ok);font-weight:600;background:none;box-shadow:none}
.lft-host .opt.right::before{background:var(--lamp);box-shadow:0 0 12px 2px var(--lamp-glow,rgba(255,200,105,.5))}
.lft-host .opt.wrong{color:var(--red);background:none;text-decoration:line-through 1.5px}
.lft-host .opt.wrong::before{background:var(--red);box-shadow:none}
.lft-host .opt-zh{grid-column:2;margin:0;font:400 12.5px/1.4 var(--f-sans);color:var(--ink-2)}
.lft-host .opt.big{grid-template-columns:auto;justify-items:center;min-width:120px;padding:10px 22px;font:420 clamp(30px,8vw,42px)/1.1 var(--f-display);letter-spacing:-.01em}
.lft-host .opt.big::before{display:none}
.lft-host .opt.big .opt-zh{grid-column:1;font-size:13px}
.lft-host .gl{border:0;border-radius:0;padding:2px 12px 2px 0;background:none}
.lft-host .gl b{font:500 19px/1.3 var(--f-display)}
.lft-host .deck{--ink:#27223C;--ink-2:#4A4463;--ink-3:#625C7C;--line:rgba(39,34,60,.13);--rule:rgba(39,34,60,.28);--fill:rgba(39,34,60,.05);--fill-2:rgba(39,34,60,.09);
--sheet:#FBF7EE;--field:rgba(255,255,255,.75);--ctl:rgba(39,34,60,.4);--air-line:rgba(39,34,60,.4);--now-line:#C9514A;--now-ink:#A93D36;--link:#4C41C4;--red:#B8372E;--ok:#8A5200;
--lamp-ink:#8A5200;--blueprint:#4C41C4;color:var(--ink);text-shadow:none}
.lft-host .deck-ghost{border:0;box-shadow:0 10px 24px -14px rgba(8,4,30,.6)}
.lft-host :is(.fc-face,.flash-card:not(.fc3d)){border:0;box-shadow:0 1px 1px rgba(40,24,0,.08),0 22px 40px -22px rgba(8,4,30,.7)}
.lft-host .fc-back{box-shadow:0 0 0 2px var(--now-line),0 22px 40px -22px rgba(8,4,30,.7)}
.lft-host .deck .btn{padding:8px 18px;border-radius:999px;background:var(--ink);color:#FBF7EE;text-shadow:none}
.lft-host .deck .btn::after{content:none}
.lft-host .deck .btn.ghost{background:none;color:var(--ink-2)}
.lft-host .deck .say{filter:none}
.lft-host :is(.fd-res,.fd-misses li){border:0;padding:4px 0;background:none;box-shadow:none}
.lft-host .fd-hint{border:0;padding:4px 10px;min-height:40px;background:none;color:var(--ink-2);text-decoration:underline dotted var(--rule);text-underline-offset:4px}
.lft-host .fd-hint:disabled{color:var(--ink);text-decoration:none}
.lft-host :is(.fd-mode,.fd-tag){border:0;background:none;padding:0}
.lft-host .fd-top{min-height:44px}
.lft-host .btn{min-width:44px}
.lf-lesson .bm-toggle{min-height:44px;background:none;box-shadow:none;color:var(--ink-2)}
.lf-lesson .hl{padding:14px 6px;margin:0 -6px}
.lft-host .fd-mode button{min-height:44px;padding:6px 12px;color:var(--ink-2);background:none;box-shadow:none;font-weight:500}
.lft-host .fd-mode button[aria-checked="true"]{color:var(--ink);font-weight:700;background:none;box-shadow:none;text-decoration:underline 2px var(--now);text-underline-offset:8px}
.lft-host .flash.fce{border:0;background:none;box-shadow:none;overflow:visible}
.lft-host .flash-prog{background:color-mix(in srgb,var(--ink) 16%,transparent)}

/* the lesson player: steps on air over the focus shot (her study window) */
.lf-lesson{--line:transparent;--rule:color-mix(in srgb,var(--ink) 30%,transparent);--fill:transparent;--sheet:transparent;--sheen:none;--card-hl:none;--field:transparent;
--tip:transparent;--ok-soft:transparent;--red-soft:transparent;max-width:780px}
.lf-lesson .lesson-top{display:flex;align-items:center;flex-wrap:nowrap;gap:10px;margin:0 0 clamp(12px,3vw,20px)}
.lf-lesson .lf-back{flex:none;display:inline-flex;align-items:center;gap:2px;min-height:44px;margin-left:-8px;padding:6px 12px 6px 4px;border:0;border-radius:999px;background:none;
box-shadow:none;color:var(--ink);font-size:15px;font-weight:600}
.lf-lesson .lf-back svg{width:20px;height:20px}
.lf-lesson .lf-back path{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lf-lesson .crumb{margin:0;min-width:0;display:grid;line-height:1.25}
.lf-lesson .crumb-en{background:none;border:0;padding:0;color:inherit;text-align:left;cursor:pointer;font:400 clamp(19px,4.8vw,25px)/1.2 var(--lft-disp);letter-spacing:-.01em}
.lf-lesson .crumb-en i{font-style:italic}
.lf-lesson .crumb-zh{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a veil deepest behind the column, feathered to nothing */
.lf-lesson::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,color-mix(in srgb,var(--air-veil,rgba(9,7,30,.56)) 40%,transparent),var(--air-veil,rgba(9,7,30,.56)) min(42vh,360px))}
@media (min-width:640.02px){.lf-lesson::before{background:linear-gradient(90deg,var(--air-veil,rgba(9,7,30,.56)) calc(var(--lf-rail-w,268px) + 800px),transparent calc(var(--lf-rail-w,268px) + 800px + 30vw))}}
/* the stage scrubber */
.lf-lesson .stepper{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0;margin:0;padding:0 0 12px;list-style:none}
.lf-lesson .stepper li{position:relative;min-width:0}
.lf-lesson .stp{position:relative;display:grid;justify-items:start;gap:2px;width:100%;min-height:48px;padding:6px 8px 8px 0;margin:0;border:0;border-radius:10px;
background:none;box-shadow:none;color:var(--ink-2);font-size:15px;font-weight:500;text-align:left;text-shadow:inherit;cursor:pointer}
.lf-lesson .stp .stp-n{position:static;display:inline-flex;align-items:center;gap:5px;width:auto;height:auto;border-radius:0;background:none;
font:600 11px/1.2 var(--f-sans);letter-spacing:.14em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lf-lesson .stp .stp-n b{font-weight:600}
.lf-lesson .stp .stp-n svg{width:13px;height:13px}
.lf-lesson .stp .stp-n path{stroke:var(--lft-lamp);stroke-width:2.8}
.lf-lesson .stp-t{font-size:clamp(14px,3.8vw,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lf-lesson .stp.cur{color:var(--ink);font-weight:700;box-shadow:none;border:0}
.lf-lesson .stp.cur .stp-n{color:var(--t-nw);background:none}
.lf-lesson .stp.done:not(.cur) .stp-t{color:var(--ink)}
.lf-lesson .stp.done .stp-n::after{display:none}
.lf-lesson .stepper li.cur::after{content:"";position:absolute;left:0;bottom:-8px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;z-index:2;
background:var(--lft-now);box-shadow:0 0 0 4px color-mix(in srgb,var(--lft-now) 26%,transparent),0 0 14px 2px color-mix(in srgb,var(--lft-now) 55%,transparent)}
.lf-lesson .lprog{height:2px;margin:-8px 0 clamp(22px,5vw,32px);border-radius:2px;background:color-mix(in srgb,var(--ink) 30%,transparent);overflow:visible}
.lf-lesson .lprog i{background:var(--lft-lamp);box-shadow:0 0 8px color-mix(in srgb,var(--lft-lamp) 70%,transparent)}
.lf-lesson #wb-lesson-head:empty{display:none}
.lf-lesson .bm{border:0;background:none}
/* the sandbox's drawing of this step floats on air, feathered; its parts are words to tap */
.lf-lesson .bm-scene{border:0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;
mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.lf-lesson .bm-scale{left:14%;bottom:16%}
.lf-lesson .bm-tray{gap:0 18px;padding:4px 0;border:0}
.lf-lesson .bm-tray button{min-height:44px;padding:0;border-radius:0;background:none;color:var(--ink-2)}
.lf-lesson .bm-tray button:hover{color:var(--ink)}
/* the step: no paper */
.lf-lesson .step{position:relative;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.lf-lesson .step-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.lf-lesson .step-head h2{font:500 clamp(24px,6.2vw,34px)/1.2 var(--f-display-zh);letter-spacing:-.005em}
.lf-lesson .step-head .muted{color:var(--ink-2)}
.lf-lesson .lh,.lf-lesson .quiz>h3,.lf-lesson .lesson-body h4{font:500 19px/1.35 var(--f-display-zh);margin:34px 0 10px}
.lf-lesson .passage-head{align-items:baseline;gap:0 20px;margin:26px 0 10px}
.lf-lesson .passage-head h3{margin:0;font:500 clamp(22px,5.4vw,26px)/1.3 var(--lft-disp)}
.lf-lesson .btn[data-act="say"]::before,.lf-lesson .btn[data-act="say-all"]::before{content:"▶";font-size:.7em;opacity:.8}
/* the how-to: numbered callouts */
.lf-lesson .lft-how{margin:14px 0 26px}
.lf-lesson .lft-how>summary{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;width:max-content;max-width:100%}
.lf-lesson .lft-how>summary::-webkit-details-marker{display:none}
.lf-lesson .lft-how-k{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--ink-2)}
.lf-lesson .lft-how-t{font-weight:700;font-size:14.5px}
.lf-lesson .lft-how-n{font-size:12.5px;color:var(--ink-2)}
.lf-lesson .lft-how-c{width:16px;height:16px;transition:transform .3s}
.lf-lesson .lft-how-c path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lf-lesson .lft-how[open] .lft-how-c{transform:rotate(180deg)}
.lf-lesson .lft-how-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px;max-width:40em}
.lf-lesson .lft-how-list li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;align-items:start;font-size:15px;line-height:1.65}
.lf-lesson .lft-how-i{display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--ink);color:#1A1640;font:700 11.5px/1 var(--f-sans);text-shadow:none}
:root[data-lf-sky="light"] .lf-lesson .lft-how-i{color:#FFF8F0}
.lf-lesson .step .w,.lf-lesson .sym-words .w{font-family:var(--lft-disp);font-size:1.22em;font-weight:500;letter-spacing:-.005em}
.lf-lesson .step .ex>.en,.lf-lesson .step .ex b{font-family:var(--lft-disp);font-size:1.1em}
.lf-lesson .passage{border:0;padding:0}
.lf-lesson .passage-text,.lf-lesson .reading-text{font:400 clamp(18px,4.6vw,20px)/1.8 var(--lft-disp);max-width:34em}
.lf-lesson .words{gap:4px 24px}
.lf-lesson .words li{grid-template-columns:44px minmax(0,1fr);border:0;padding:6px 0}
.lf-lesson .words li.weak .w{color:var(--red)}
.lf-lesson .sym-grid{gap:34px 30px}
.lf-lesson .sym-card{border:0;box-shadow:none;padding:0}
.lf-lesson .sym-card.weak .sym{color:var(--red)}
.lf-lesson .sym{font-size:1.9em}
.lf-lesson .sym-words li{grid-template-columns:44px auto auto 1fr}
.lf-lesson .sm-card{border:0;padding:4px 0}
.lf-lesson .speak-q,.lf-lesson .model{padding:0;border-radius:0}
.lf-lesson .big-q{font:450 clamp(22px,5.6vw,28px)/1.35 var(--lft-disp)}
.lf-lesson .model{font:400 18px/1.8 var(--lft-disp)}
.lf-lesson .phrases .en{font-family:var(--lft-disp);font-size:1.08em;font-weight:500}
.lf-lesson .phrases li{grid-template-columns:44px minmax(0,1fr)}
.lf-lesson .dict{gap:26px}
.lf-lesson .dict-row{align-items:flex-end;gap:14px}
.lf-lesson .dict-row input,.lf-lesson .write input{font:italic 400 19px/1.4 var(--lft-disp)}
.lf-lesson .zh-prompt{font-size:15.5px}
.lf-lesson .ref{color:var(--ok)}
.lf-lesson .moods{gap:4px 10px}
.lf-lesson .mood{min-width:0;min-height:64px;padding:8px 12px;border:0;border-radius:16px;background:none;box-shadow:none;color:var(--ink-2)}
.lf-lesson .mood.on{background:none;color:var(--ink);font-weight:700}
.lf-lesson .mood.on .mood-i{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--lamp) 80%,transparent))}
.lf-lesson .mood.on span:last-child{color:var(--ink);text-decoration:underline 2px var(--now);text-underline-offset:6px}
.lf-lesson .report{min-height:260px;field-sizing:content;resize:none;font-size:14.5px;line-height:1.8}
.lf-lesson .game{padding:4px 0}
/* the one glowing pill; 上一步 is a quiet word; the words fade away under them */
.lf-lesson .lesson-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:34px}
.lf-lesson .lesson-nav::before{content:"";position:absolute;z-index:-1;left:-40px;right:-40px;top:-64px;bottom:calc(-14px - env(safe-area-inset-bottom,0px));pointer-events:none;
background:var(--air-veil,rgba(9,7,30,.56));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s;
-webkit-mask-image:linear-gradient(transparent,#000 50%,#000 78%,transparent),linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);-webkit-mask-composite:source-in;
mask-image:linear-gradient(transparent,#000 50%,#000 78%,transparent),linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-composite:intersect}
.lf-lesson .lesson-nav.lft-stuck::before{opacity:1}
.lf-lesson .lesson-nav .lf-next{display:inline-grid;grid-template-columns:auto auto;align-items:center;column-gap:14px;min-height:60px;padding:8px 20px 8px 28px;margin-left:auto;
border:0;border-radius:999px;background:var(--now,#FFB3A7);color:var(--on-now,#221A3D);text-align:left;text-shadow:none;box-shadow:var(--lf-pill-sh,0 12px 30px -12px rgba(6,4,24,.6));font-size:17px;font-weight:700}
.lf-lesson .lesson-nav .lf-next svg{grid-column:2;grid-row:1/3;width:22px;height:22px}
.lf-lesson .lesson-nav .lf-next path{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lf-lesson .lf-next-zh{grid-column:1;grid-row:1;line-height:1.25}
.lf-lesson .lf-next-en{grid-column:1;grid-row:2;font:italic 400 13px/1.2 var(--lft-disp);opacity:.7}
.lf-lesson .lesson-nav .lf-prev{display:inline-flex;align-items:center;gap:2px;min-height:48px;padding:8px 14px 8px 2px;color:var(--ink);font-size:15px}
.lf-lesson .lesson-nav .lf-prev svg{width:20px;height:20px}
.lf-lesson .lesson-nav .lf-prev path{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* a sitting finished (§9): no card — the postcard lies on the lesson gone soft behind a veil, the rest is type on air, 好耶 the pill */
.celebrate.lf-cele{overflow-x:hidden;background:color-mix(in srgb,var(--air-veil,rgba(9,7,30,.56)) 94%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1)}
.celebrate.lf-cele .cele-card{--cp-x:14px;--cp-b:18px;max-width:420px;padding:18px 14px;background:none;border-radius:0;box-shadow:none;overflow:visible;color:var(--ink);text-shadow:var(--air-sh)}
/* 好耶's strip: the words passing under it go soft (a blur, a veil) across the whole screen, feathered at the top: no edge */
.celebrate.lf-cele .cele-cta{background:none}
.celebrate.lf-cele .cele-cta::before{content:"";position:absolute;z-index:-1;left:-100vw;right:-100vw;top:0;bottom:calc(-40px - env(safe-area-inset-bottom,0px));pointer-events:none;
background:linear-gradient(transparent,var(--air-veil,rgba(9,7,30,.56)) 34px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
-webkit-mask-image:linear-gradient(transparent,#000 30px);mask-image:linear-gradient(transparent,#000 30px)}
.celebrate.lf-cele .cele-cta::after{content:none}
.celebrate.lf-cele .cele-card p{color:var(--air-ink-2,var(--ink-2))}
.celebrate.lf-cele .bf-wait{padding:0;border-radius:0;background:none}
/* the sandbox's fly-in: its blueprint floats, feathered, no frame; 好耶 the one pill (≥ 48 px) */
.celebrate.lf-cele .cele-card .bf-scene{overflow:visible;border:0;border-radius:0;box-shadow:none;background:none}
.celebrate.lf-cele .cele-card .bf-scene::before{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(var(--b-grid) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(90deg,var(--b-grid) 1px,transparent 1px) 0 0/14px 14px;
-webkit-mask:radial-gradient(closest-side,#000 40%,transparent);mask:radial-gradient(closest-side,#000 40%,transparent)}
.celebrate.lf-cele .cele-cta .btn{min-height:48px;padding:0 30px}
.celebrate.lf-cele .bf-wait h4::after{content:none}
.lft-cele{position:relative;margin:4px 0 6px;z-index:1}
.lft-cele-pc{max-width:300px;margin:0 auto;transform:rotate(-1.6deg);text-align:left}
.lft-cele-pc .lft-pc-pic{aspect-ratio:2.3/1}
.lft-cele-before,.lft-cele-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lft-cele-sweep{position:absolute;top:-10%;bottom:-10%;left:0;width:12%;opacity:0;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,250,235,.95) 45%,rgba(255,250,235,.95) 55%,transparent);filter:blur(1px)}
.lft-cele-cap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:62px;padding:10px 12px 10px 16px}
.lft-cele-eb{margin:0;display:grid;line-height:1.35;font-variant-numeric:tabular-nums}
.lft-cele-eb b{font-size:11px;font-weight:750;letter-spacing:.18em;color:var(--pc-ink2)}
.lft-cele-eb span{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--pc-ink3)}
.lft-cele-stamp{position:relative;width:40px;height:48px;flex:none;margin:-24px 4px 0 0}
.lft-cele-stamp .lft-pm{top:12px;right:-6px;width:104px;height:52px}
.lft-cele-line{margin:12px 0 0;text-align:center}
.lft-cele-en{background:none;border:0;padding:0;color:var(--ink,#FFF8FB);cursor:pointer;font-family:var(--lft-disp);font-size:22px;line-height:1.2;letter-spacing:-.01em}
.lft-cele-en i{font-style:italic}
.celebrate.lf-cele .cele-hero{margin-top:-6px}
.celebrate.lf-cele .cele-badge{width:84px;height:80px}
.celebrate.lf-cele .cele-badge .fl.big{width:74px;height:74px}
@media (max-width:560px){.celebrate.lf-cele .cele-card:has(.bf) .lft-cele-pc .lft-pc-pic{aspect-ratio:3/1}}

/* speakable lines: a hit area ≥ 44 px, the type unmoved */
#lf-today .lft-amb-en,#lf-today .lft-pl-en,#lf-today .lft-pc .lft-pc-t,#lf-today .lft-wk-en,#lf-today .lft-air-en .lf-say,.lf-lesson .crumb-en,.lft-cele-en{
display:inline-block;padding-top:10px;padding-bottom:10px;margin-top:-10px;margin-bottom:-10px}