/* everyday / play / keepsakes (30 features) */
.playful.wide{max-width:1080px}
.life-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.life-grid .box{margin-top:0;text-align:left;padding:18px}
.life-grid .wide2{grid-column:1/-1}
@media(max-width:720px){.life-grid{grid-template-columns:1fr}}
.lf h4{font:600 var(--t3)/1.3 var(--ui);color:var(--gold);margin-bottom:10px;display:flex;gap:8px;align-items:baseline}.lf h4 small{color:var(--dim);font-size:var(--t1);font-weight:400}
.lf .mini{font-size:var(--t2);color:var(--dim);margin:6px 0}
.lf .none{color:var(--dim);font-size:var(--t2);padding:8px 0}
.lf .ok{color:#bff3c9;font-size:var(--t2);margin:4px 0}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.btn-gold.sm{padding:8px 16px;font-size:var(--t2)}
.lf .chip{font-size:var(--t2);padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:rgba(10,15,40,.55)}
.lf .chip.on{border-color:var(--gold);background:rgba(255,217,138,.16);color:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* status */
.st-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.22);border-left:4px solid var(--pc);margin-bottom:8px}
.st-row b{font-size:var(--t2);min-width:80px}.st-row small{margin-left:auto;color:var(--dim);font-size:var(--t1)}
.st{font-size:var(--t2);padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.07)}.st.sleep{background:rgba(120,110,255,.18)}.st.awake{background:rgba(255,210,120,.16)}
.st i{font-style:normal;color:var(--dim);font-size:var(--t1);margin-left:6px}
/* mood */
.moods{display:flex;gap:6px;justify-content:space-between}.moods button{font-size:28px;flex:1;padding:6px 0;border-radius:14px;background:rgba(0,0,0,.2);transition:.2s;filter:grayscale(.5)}
.moods button:hover,.moods button.on{filter:none;transform:translateY(-3px);background:rgba(255,217,138,.18)}
.mood-hist,.snd-map{overflow-x:auto}.mood-hist table,.snd-map table{border-collapse:collapse;font-size:var(--t1);color:var(--dim)}
.mood-hist td,.mood-hist th,.snd-map td,.snd-map th{padding:2px 3px;text-align:center;font-weight:400}
.mood-hist td span{display:block;font-size:var(--t2);line-height:1.1}
/* meals */
.meal-add{display:inline-block;cursor:pointer;margin-right:8px}
#meal-kind{padding:7px 10px;border-radius:99px;background:rgba(10,15,40,.7);color:var(--text);border:1px solid var(--line);font:inherit;font-size:var(--t2)}
.meal-day{margin-top:10px}.meal-day .two>div{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:12px;background:rgba(0,0,0,.18);border-top:3px solid var(--pc);min-height:40px}
.meal{width:calc(50% - 3px)}.meal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:zoom-in}.meal figcaption{font-size:var(--t1);color:var(--dim)}
/* sounds */
.dot{width:12px;height:12px;border-radius:50%;background:var(--pc);margin:1px;opacity:.75;box-shadow:0 0 8px var(--pc)}.dot.play{animation:hbeat .8s infinite;opacity:1}
/* wake */
.hold{touch-action:none;user-select:none;-webkit-user-select:none}.hold.rec{background:#ff6b8a;color:#fff}
.sunrise{position:fixed;inset:0;z-index:400;display:grid;place-items:center;align-content:center;gap:18px;text-align:center;background:linear-gradient(#1b2350,#ff9a76 70%,#ffd98a);color:#fff;font:500 var(--t5)/1.5 var(--serif);padding:24px;transition:opacity 1s}
.sunrise .sun{width:120px;height:120px;border-radius:50%;background:radial-gradient(#fff6c9,#ffc65a);box-shadow:0 0 80px #ffd98a;animation:rise 3s ease-out both}
.sunrise.out{opacity:0}@keyframes rise{from{transform:translateY(120px);opacity:0}}
/* calls */
.call-form{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.call-form input{flex:1;min-width:140px;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(10,15,40,.7);color:var(--text);font:inherit;font-size:var(--t2);color-scheme:dark}
.call{padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.22);margin-top:8px;border-left:4px solid var(--pc)}.call.accepted{box-shadow:inset 0 0 0 1px rgba(150,255,170,.35)}
.call .times{display:flex;align-items:center;gap:10px}.call .times span{flex:1;text-align:center}.call .times em{font-style:normal;color:var(--gold)}
.call .times small,.call .times i{display:block;font-size:var(--t1);color:var(--dim);font-style:normal}.call .times b{font:600 var(--t5)/1.2 var(--disp);color:var(--pc)}
/* notebook extras */
.note-form .later{width:40px;height:40px;border-radius:50%;flex:none;background:rgba(10,15,40,.6);border:1px solid var(--line);font-size:var(--t4)}
.note-form.later-on .later{background:rgba(255,200,120,.25);border-color:var(--gold)}
.tconv{font-size:.82em;color:var(--pc);opacity:.9;white-space:nowrap}
.later-wait{font-size:var(--t1);color:var(--gold);text-align:center;margin:6px 0 0}
/* polls */
.match b{font:600 28px/1 var(--disp);color:var(--gold);margin-right:6px}
.poll{display:flex;align-items:stretch;gap:8px;margin:8px 0}.poll em{align-self:center;font:italic 600 var(--t2) var(--disp);color:var(--gold)}
.poll-opt{flex:1;padding:18px 10px;border-radius:16px;background:rgba(0,0,0,.25);border:1px solid var(--line);font-size:var(--t3);transition:.2s;position:relative}
.poll-opt:hover{transform:translateY(-2px);border-color:var(--gold)}.poll-opt.on{background:rgba(255,217,138,.18);border-color:var(--gold)}
.poll-opt i{display:block;font-style:normal;margin-top:4px}
/* stamps / rewards */
.stamps{margin:6px 0}.sgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.sgrid i{aspect-ratio:1;border-radius:8px;border:1px dashed color-mix(in srgb,var(--pc) 45%,transparent);display:grid;place-items:center;font-style:normal;font-size:var(--t2)}.sgrid i.on{border-style:solid;background:color-mix(in srgb,var(--pc) 18%,transparent)}
.reward{display:block;width:100%;text-align:left;margin-top:8px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.25);font-size:var(--t2);color:var(--dim)}.reward i{float:right;font-style:normal}
.reward.open{color:#fff;border:1px solid var(--gold);background:rgba(255,217,138,.12);animation:glow 2.4s infinite}.reward.mine{opacity:.7}
@keyframes glow{50%{box-shadow:0 0 18px rgba(255,217,138,.45)}}
/* hunt */
.hprog{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:6px 0}.hprog i{display:block;height:100%;background:linear-gradient(90deg,var(--ice),var(--gold));transition:width .6s}
.hints{padding-left:20px;font-size:var(--t2)}.hints li{margin:4px 0}.hints li.got{color:var(--dim);text-decoration:line-through}
.has-gem{position:relative}
.hunt-gem{position:absolute;z-index:5;font-size:var(--t3);width:30px;height:30px;border-radius:50%;opacity:.55;animation:gem 2.6s ease-in-out infinite;filter:drop-shadow(0 0 6px #ffd98a)}
.hunt-gem:hover{opacity:1;transform:scale(1.3)}@keyframes gem{50%{opacity:.95;transform:scale(1.15) rotate(15deg)}}
/* challenge */
.ch-q{font:500 var(--t4)/1.5 var(--serif);color:#fff;margin:6px 0 10px}
.lf .ch-st{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.lf .ch-st span{font-size:var(--t2);padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.2);border-left:3px solid var(--pc);color:var(--dim)}.lf .ch-st span.ok{color:#fff}
.lf .ch-st i{display:block;font-size:var(--t1);color:var(--dim)}
.stars{font-size:var(--t2)}.stars b{color:var(--gold);font-weight:500;margin-left:4px}
.lf .dq-form{margin-top:6px}
/* dolls */
.dolls{display:flex;justify-content:center;gap:40px;margin:10px 0}
.doll{text-align:center;position:relative;width:120px}
.doll .acc{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-8deg);font-size:30px;z-index:2}
.doll .head{width:72px;height:72px;margin:0 auto;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--pc);display:grid;place-items:center;font-size:30px;background:#0a0f28;position:relative;z-index:1}
.doll .head img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.doll .body{width:96px;height:96px;margin:-6px auto 6px;background:var(--dc);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);display:grid;place-items:center;font-size:34px;transition:background .3s}
.doll .body.top-suit,.doll .body.top-hoodie{clip-path:polygon(20% 0,80% 0,90% 100%,10% 100%)}.doll .body.top-qipao{clip-path:polygon(32% 0,68% 0,82% 100%,18% 100%)}
.doll b{display:block;font-size:var(--t2)}.doll small{color:var(--dim);font-size:var(--t1)}
.doll-ed input[type=color]{width:44px;height:34px;border:0;border-radius:8px;background:none;padding:0}
/* trip */
.trip-n{font:600 var(--t5)/1.3 var(--disp);color:var(--gold)}
.trip-list{list-style:none;margin:8px 0}.trip-list li{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:rgba(0,0,0,.2);border-left:3px solid var(--pc);margin-bottom:6px;font-size:var(--t2)}
.trip-list li label{flex:1;cursor:pointer}.trip-list li.done label{color:var(--dim);text-decoration:line-through}.trip-list li button{color:var(--dim)}
/* keepsakes */
.firsts{list-style:none;border-left:2px solid rgba(255,217,138,.3);padding-left:14px}.firsts li{position:relative;margin-bottom:10px}
.firsts li::before{content:"";position:absolute;left:-20px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--gold)}
.firsts b{display:block;font-size:var(--t2)}.firsts i{font-size:var(--t1);color:var(--dim);font-style:normal}.firsts em{display:block;font-size:var(--t2);color:var(--gold);font-style:normal}
.firsts li.today::before{box-shadow:0 0 12px var(--gold);animation:hbeat 1.4s infinite}
.medals{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.medal{padding:10px;border-radius:14px;background:rgba(0,0,0,.22);text-align:center;filter:grayscale(1);opacity:.55}.medal.got{filter:none;opacity:1;box-shadow:inset 0 0 0 1px rgba(255,217,138,.35)}
.medal .mi{display:block;font-size:30px}.medal b{display:block;font-size:var(--t1);font-weight:500}.medal small{color:var(--dim);font-size:var(--t1)}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;padding:14px;border-radius:16px;background:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,0) 40%),rgba(0,0,0,.25);box-shadow:inset 0 -6px 0 rgba(255,217,138,.18)}
.gift{text-align:center;padding:8px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid color-mix(in srgb,var(--pc) 35%,transparent);transition:.25s}
.gift:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.gift img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}.gift span{display:block;font-size:46px;padding:16px 0}.gift b{display:block;font-size:var(--t2);margin-top:6px}.gift i{font-size:var(--t1);color:var(--dim);font-style:normal}
.kp-img{max-height:50vh;margin:12px auto;border-radius:14px}.kp-text{white-space:normal;line-height:1.9;font-family:var(--serif);text-align:left}
#kp-modal .cap-paper{max-height:86vh;overflow:auto}
.sigs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}.sigs div{text-align:center;padding:6px;border-radius:12px;background:rgba(0,0,0,.2);border-bottom:2px solid var(--pc)}
.sigs img{height:60px;margin:0 auto;object-fit:contain}.sigs small{display:block;font-size:var(--t1);color:var(--dim)}
#sig-pad{width:100%;height:auto;aspect-ratio:600/220;border-radius:14px;background:rgba(255,255,255,.05);border:1px dashed rgba(255,217,138,.4);touch-action:none;cursor:crosshair}
.sig-imgs{display:flex;justify-content:center;align-items:center;gap:12px;margin:6px auto 0}.sig-imgs img{height:54px}.sig-imgs span{color:var(--gold)}
.tt-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.tt-list .chip{padding:6px 12px;border-radius:99px;border:1px solid var(--line);font-size:var(--t2);color:var(--text);text-decoration:none}
#tt-banner{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:300;padding:10px 18px;border-radius:99px;background:rgba(20,25,60,.92);border:1px solid var(--gold);font-size:var(--t2);white-space:nowrap}
#tt-banner a{color:var(--gold)}
.ifs{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:560px){.ifs{grid-template-columns:1fr}}
.ifenv{padding:16px;border-radius:16px;background:linear-gradient(160deg,#f6efe2,#e9dcc4);color:#3a3550;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ifenv span{font-size:32px}.ifenv input{width:140px;text-align:center;padding:8px;border-radius:10px;border:1px solid #cbb;font:inherit;letter-spacing:.3em}
.ifenv.wrong{animation:jshake .5s}
/* visits */
#visit-box{text-align:left}#visit-box h4{color:var(--gold);margin-bottom:6px}
#visit-box .bars{display:flex;align-items:flex-end;gap:4px;height:90px;margin:8px 0}#visit-box .wk{flex:1;display:flex;align-items:flex-end;gap:1px;height:100%;position:relative;padding-bottom:14px}
#visit-box .wk i{flex:1;height:var(--h);min-height:2px;background:var(--pc);border-radius:3px 3px 0 0}#visit-box .wk small{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:var(--t1);color:var(--dim)}
.vis{padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.2);border-left:3px solid var(--pc)}.vis small{display:block;color:var(--dim);font-size:var(--t1)}
/* hero cover / video */
.hero{position:relative;isolation:isolate}
.hero-cover{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-cover img,.hero-cover video{width:100%;height:100%;object-fit:cover;opacity:.28;filter:saturate(.9) blur(1px);mask-image:linear-gradient(#000 40%,transparent)}
.hero-cover.video video{opacity:.42;filter:none}
.hero-cover small{position:absolute;right:16px;bottom:12px;font-size:var(--t1);color:var(--dim);opacity:.8}
/* theme fonts + pattern */
.font-serif body{--ui:'Noto Serif Thai','Cormorant Garamond',serif;font-family:var(--serif)}
.font-hand h1,.font-hand h2{font-style:italic}
#pattern{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#pattern i{position:absolute;top:-20px;left:var(--x);font-style:normal;color:var(--gold);opacity:.35;font-size:var(--t2);animation:patfall var(--d) linear infinite;animation-delay:var(--t)}
@keyframes patfall{to{transform:translateY(110vh) rotate(260deg)}}
/* data saver */
.saver #fireflies,.saver #sky,.saver #petals,.saver #pattern,.saver .aurora,.saver #ambi{display:none!important}
.saver *,.saver *::before,.saver *::after{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}
.saver .box,.saver .card,.saver .topbar .tb{backdrop-filter:none!important}
#saver.on{border-color:var(--gold)}
.snapshot .note-form,.snapshot #lf-status .btn-row{opacity:.4;pointer-events:none}
@media(max-width:560px){.dolls{gap:14px}.call .times b{font-size:var(--t4)}}
/* top bar: wrap instead of running off the left edge on phones */
@media(max-width:600px){.topbar{left:10px;right:10px;top:10px;flex-wrap:wrap;justify-content:flex-end;gap:6px}.topbar .tb{width:32px;height:32px;font-size:var(--t2)}}

/* ---------- cute hero background (replaces the photo cover): pastel glows, tiny hearts & sparkles, soft clouds ---------- */
.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(55% 42% at 16% 20%,rgba(255,159,196,.32),transparent 70%),
    radial-gradient(50% 40% at 86% 24%,rgba(126,232,255,.24),transparent 70%),
    radial-gradient(65% 45% at 50% 100%,rgba(201,182,255,.30),transparent 72%),
    linear-gradient(180deg,#1d1a46 0%,#251b4d 48%,#15143a 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='160' viewBox='0 0 900 160' preserveAspectRatio='none'><circle cx='90' cy='140' r='38' fill='%23c9b6ff' opacity='0.16'/><circle cx='132' cy='126' r='46' fill='%23c9b6ff' opacity='0.16'/><circle cx='182' cy='136' r='40' fill='%23c9b6ff' opacity='0.16'/><circle cx='222' cy='148' r='30' fill='%23c9b6ff' opacity='0.16'/><circle cx='54' cy='150' r='28' fill='%23c9b6ff' opacity='0.16'/><circle cx='330.0' cy='150.0' r='47.5' fill='%23ffc3dc' opacity='0.14'/><circle cx='382.5' cy='132.5' r='57.5' fill='%23ffc3dc' opacity='0.14'/><circle cx='445.0' cy='145.0' r='50.0' fill='%23ffc3dc' opacity='0.14'/><circle cx='495.0' cy='160.0' r='37.5' fill='%23ffc3dc' opacity='0.14'/><circle cx='285.0' cy='162.5' r='35.0' fill='%23ffc3dc' opacity='0.14'/><circle cx='600.0' cy='138.0' r='39.9' fill='%23a9e6ff' opacity='0.13'/><circle cx='644.1' cy='123.3' r='48.300000000000004' fill='%23a9e6ff' opacity='0.13'/><circle cx='696.6' cy='133.8' r='42.0' fill='%23a9e6ff' opacity='0.13'/><circle cx='738.6' cy='146.4' r='31.5' fill='%23a9e6ff' opacity='0.13'/><circle cx='562.2' cy='148.5' r='29.400000000000002' fill='%23a9e6ff' opacity='0.13'/><circle cx='820.0' cy='150.0' r='45.6' fill='%23c9b6ff' opacity='0.15'/><circle cx='870.4' cy='133.2' r='55.199999999999996' fill='%23c9b6ff' opacity='0.15'/><circle cx='930.4' cy='145.2' r='48.0' fill='%23c9b6ff' opacity='0.15'/><circle cx='978.4' cy='159.6' r='36.0' fill='%23c9b6ff' opacity='0.15'/><circle cx='776.8' cy='162.0' r='33.6' fill='%23c9b6ff' opacity='0.15'/><circle cx='220.0' cy='165.0' r='49.4' fill='%23ffffff' opacity='0.06'/><circle cx='274.6' cy='146.8' r='59.800000000000004' fill='%23ffffff' opacity='0.06'/><circle cx='339.6' cy='159.8' r='52.0' fill='%23ffffff' opacity='0.06'/><circle cx='391.6' cy='175.4' r='39.0' fill='%23ffffff' opacity='0.06'/><circle cx='173.2' cy='178.0' r='36.4' fill='%23ffffff' opacity='0.06'/><circle cx='700.0' cy='170.0' r='53.199999999999996' fill='%23ffffff' opacity='0.06'/><circle cx='758.8' cy='150.4' r='64.39999999999999' fill='%23ffffff' opacity='0.06'/><circle cx='828.8' cy='164.4' r='56.0' fill='%23ffffff' opacity='0.06'/><circle cx='884.8' cy='181.2' r='42.0' fill='%23ffffff' opacity='0.06'/><circle cx='649.6' cy='184.0' r='39.199999999999996' fill='%23ffffff' opacity='0.06'/></svg>") bottom center/100% 140px no-repeat,
             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><path transform='translate(30 30) rotate(-12) scale(1.1)' d='M0 6C-4-1-10 3-6 8L0 13L6 8C10 3 4-1 0 6Z' fill='%23ff9fc4' opacity='0.9'/><path transform='translate(170 64) rotate(10) scale(0.8)' d='M0 6C-4-1-10 3-6 8L0 13L6 8C10 3 4-1 0 6Z' fill='%23ff9fc4' opacity='0.75'/><path transform='translate(96 176) rotate(6) scale(1)' d='M0 6C-4-1-10 3-6 8L0 13L6 8C10 3 4-1 0 6Z' fill='%23ff9fc4' opacity='0.85'/><path transform='translate(214 200) rotate(-8) scale(0.7)' d='M0 6C-4-1-10 3-6 8L0 13L6 8C10 3 4-1 0 6Z' fill='%23c9b6ff' opacity='0.8'/><path transform='translate(120 36) scale(0.9)' d='M0-8C1-2 2-1 8 0C2 1 1 2 0 8C-1 2-2 1-8 0C-2-1-1-2 0-8Z' fill='%23ffd98a' opacity='0.95'/><path transform='translate(36 128) scale(0.6)' d='M0-8C1-2 2-1 8 0C2 1 1 2 0 8C-1 2-2 1-8 0C-2-1-1-2 0-8Z' fill='%23ffd98a' opacity='0.8'/><path transform='translate(200 134) scale(0.75)' d='M0-8C1-2 2-1 8 0C2 1 1 2 0 8C-1 2-2 1-8 0C-2-1-1-2 0-8Z' fill='%237ee8ff' opacity='0.85'/><path transform='translate(150 218) scale(0.5)' d='M0-8C1-2 2-1 8 0C2 1 1 2 0 8C-1 2-2 1-8 0C-2-1-1-2 0-8Z' fill='%23ffd98a' opacity='0.7'/><circle cx='76' cy='82' r='2.2' fill='%237ee8ff' opacity='0.8'/><circle cx='222' cy='22' r='1.6' fill='%23c9b6ff' opacity='0.9'/><circle cx='60' cy='214' r='1.8' fill='%23ffd98a' opacity='0.7'/><circle cx='140' cy='120' r='1.4' fill='%23ff9fc4' opacity='0.8'/><circle cx='10' cy='180' r='1.4' fill='%237ee8ff' opacity='0.7'/></svg>") 0 0/300px 300px repeat;
  opacity:.42;
  -webkit-mask-image:radial-gradient(ellipse 55% 45% at 50% 42%,rgba(0,0,0,.25) 0%,#000 75%);mask-image:radial-gradient(ellipse 55% 45% at 50% 42%,rgba(0,0,0,.25) 0%,#000 75%)}
html.paper .hero::before,html.paper .hero::after{display:none}
html.phone .hero::after{background-size:100% 110px,230px 230px}
/* history (meals + voices) */
.lf h4 + .hist-btn{float:right;margin-top:-38px}
.hist-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:10px 0}
.hist-ctl select{padding:7px 12px;border-radius:99px;background:rgba(10,15,40,.7);color:var(--text);border:1px solid var(--line);font:inherit;font-size:var(--t2)}
#kp-modal .chip{font-size:var(--t2);padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:rgba(10,15,40,.55)}
#kp-modal .chip.on{border-color:var(--gold);background:rgba(255,217,138,.16);color:#fff}
.hist-body{max-height:60vh;overflow:auto;text-align:left}
.h-day{margin-bottom:14px}.h-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.h-grid figure{border-radius:12px;overflow:hidden;background:rgba(0,0,0,.25);border-top:3px solid var(--pc)}
.h-grid img{width:100%;aspect-ratio:1;object-fit:cover;cursor:zoom-in}.h-grid figcaption{font-size:var(--t1);padding:4px 6px;color:var(--dim)}
.h-voice{padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.25);border-left:3px solid var(--pc);margin-bottom:8px}
.h-voice b{display:block;font-size:var(--t2)}.h-voice span{display:block;font-size:var(--t1);color:var(--dim);margin-bottom:6px}.h-voice audio{width:100%;height:36px}
.lf .when{font-style:normal;color:var(--dim);font-size:var(--t1)}
/* goodnight: the sunrise overlay, as a moonlit night */
.moonrise{background:linear-gradient(#0b0f2e,#1d1a46 60%,#3b2a63)}
.moonrise .sun{background:radial-gradient(circle at 35% 35%,#fffbe8,#f5e7b0 60%,#d9c27a);box-shadow:0 0 70px rgba(255,236,170,.55)}
.moonrise .chip{margin-top:4px;padding:6px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.25);color:#fff;background:transparent}
/* voice → text → translation */
.vtr-out{display:block;margin-top:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);text-align:left;font-size:var(--t2)}
.vtr-out small{display:block;color:var(--dim);font-size:var(--t1)}.vtr-out b{display:block;font-weight:500;margin:2px 0 6px}
.vtr-wait{color:var(--dim);font-size:var(--t1)}