/* KFFART V7.6 / LIFE NOTES — a local immersive Life world.
   Artwork: user's Life.png floating island; no implied real travel photographs. */
#detail-view.life-view{padding:0!important;margin:0!important;min-height:100svh;background:#0b1b25!important;color:#f9f2dd;overflow:clip}
body:has(#detail-view.life-view:not([hidden])) #topbar,
body:has(#detail-view.life-view:not([hidden])) #mobile-menu,
body:has(#detail-view.life-view:not([hidden])) .bottom-nav,
body:has(#detail-view.life-view:not([hidden])) .footer{display:none!important}
.life-scene,.life-flight-interior{
 background:
 radial-gradient(ellipse at 76% 29%,rgba(219,166,101,.36),transparent 36%),
 radial-gradient(ellipse at 69% 60%,rgba(58,154,139,.30),transparent 38%),
 radial-gradient(ellipse at 42% 97%,rgba(19,85,102,.65),transparent 52%),
 linear-gradient(163deg,#172f3f 0%,#243b45 38%,#0d2732 76%,#071a26 100%);
}
.life-scene{position:relative;isolation:isolate;width:100%;height:100svh;min-height:750px;overflow:hidden;border-bottom:1px solid #e7d29a33}
.life-scene:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.65;
 background-image:radial-gradient(1px 1px at 17% 23%,#fff9c9 99%,transparent),radial-gradient(2px 2px at 88% 14%,#fcf4dc 99%,transparent),
 radial-gradient(1px 1px at 56% 11%,#e6f8f3 99%,transparent),radial-gradient(1px 1px at 73% 79%,#fcf3dd 99%,transparent);
 background-size:400px 330px,490px 390px,570px 450px,350px 270px}
.life-scene:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
 background:linear-gradient(90deg,rgba(7,22,29,.45),transparent 39%),linear-gradient(0deg,rgba(6,19,26,.55),transparent 18%,transparent 85%,rgba(6,19,26,.16))}
.life-horizon{position:absolute;z-index:0;right:-12%;bottom:-23%;width:85%;height:49%;border-radius:50%;background:radial-gradient(ellipse,#7bc6a526,transparent 66%);filter:blur(45px);pointer-events:none}
.life-island-frame{position:absolute;z-index:2;width:min(77vw,1120px);aspect-ratio:1;right:-2%;top:49%;transform:translateY(-50%);pointer-events:none}
.life-island{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 25px 62px #05151b88);animation:life-bob 9s ease-in-out infinite alternate}
.life-island-frame:after{content:"";position:absolute;left:24%;right:20%;bottom:18%;height:12%;background:#5ad4c838;filter:blur(38px);border-radius:50%;z-index:-1;pointer-events:none}
@keyframes life-bob{from{transform:translateY(-5px)}to{transform:translateY(6px)}}
.life-hero{position:absolute;z-index:5;top:clamp(98px,18vh,180px);left:clamp(28px,6.5vw,122px);width:min(460px,40vw);text-shadow:0 2px 20px #06131fb0}
.life-kicker{font-size:11px;letter-spacing:.28em;color:#eedcb0;font-weight:700;display:flex;gap:12px;align-items:center}
.life-kicker:before{content:"";width:34px;height:1px;background:#e6c988;box-shadow:0 0 12px #e6ba73}
.life-hero h1{margin:26px 0 12px;font-weight:700;line-height:1.03;font-size:clamp(62px,7vw,126px);letter-spacing:-.065em;color:#fdf5dc}
.life-hero h1 span{display:block;margin-top:8px;font-size:clamp(40px,4.7vw,72px);font-weight:600;letter-spacing:-.07em;color:#f1d5a6;font-family:"Songti SC","Noto Serif SC",serif}
.life-tagline{margin:24px 0 14px;font-size:clamp(18px,1.55vw,23px);line-height:1.8;font-weight:500;color:#f8ebd0;letter-spacing:.06em}
.life-intro{max-width:390px;margin:0;font-size:13px;line-height:2;color:#d1dcd4}
.life-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:31px}
.life-primary,.life-return{min-height:44px;display:inline-flex;justify-content:center;align-items:center;text-decoration:none;border-radius:100px;padding:12px 20px;font-weight:700;font-size:13px;cursor:pointer}
.life-primary{color:#152e32;background:linear-gradient(125deg,#f6e2b4,#a5dbba);border:1px solid #f5e9c3;box-shadow:0 12px 28px #6ee2ae22}
.life-return{color:#f7e8ca;background:rgba(10,33,39,.58);border:1px solid #f8e3b35c}
.life-primary:hover,.life-return:hover{transform:translateY(-2px)}
.life-primary:focus-visible,.life-return:focus-visible,.life-hotspot:focus-visible,.life-panel-go:focus-visible,.life-chapter-jump:focus-visible{outline:2px solid #fff1ba;outline-offset:4px}
.life-hotspot{position:absolute;display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:#fff7cc;pointer-events:auto;cursor:pointer;z-index:8;transform:translate(-50%,-50%)}
.life-hotspot .star{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:26px;line-height:1;text-shadow:0 0 12px #fff7ad,0 0 25px #f8e1a0;animation:life-twinkle 3s ease-in-out infinite}
.life-hotspot:before{content:"";position:absolute;width:42px;height:42px;border:1px solid rgba(247,233,163,.44);border-radius:50%;box-shadow:0 0 19px #e1d3a94d;animation:life-ring 3s ease-in-out infinite}
.life-hotspot:hover .star,.life-hotspot[aria-expanded="true"] .star{color:white;text-shadow:0 0 18px white,0 0 35px #f4c974}
.life-hotspot--travel{left:41%;top:35%}.life-hotspot--moments{left:67%;top:46%}.life-hotspot--photos{left:53%;top:67%}
.life-hotspot--moments .star{animation-delay:-.85s}.life-hotspot--photos .star{animation-delay:-1.65s}
@keyframes life-twinkle{0%,100%{opacity:.48;transform:scale(.82)}50%{opacity:1;transform:scale(1.15)}}
@keyframes life-ring{0%,100%{transform:scale(.68);opacity:.22}55%{transform:scale(1.05);opacity:.7}}
.life-panel[hidden]{display:none!important}
.life-panel{position:absolute;right:clamp(22px,5vw,90px);bottom:clamp(52px,7vh,86px);z-index:6;
 width:min(340px,30vw);padding:21px 23px;border:1px solid #f7e7ba6f;border-radius:18px;
 background:linear-gradient(140deg,rgba(10,34,39,.86),rgba(19,49,48,.72));box-shadow:0 18px 55px #05191dbb,inset 0 1px #fff4d32a;
 backdrop-filter:blur(18px) saturate(122%);animation:life-panel-in .22s ease-out both}
@keyframes life-panel-in{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
.life-panel-top{display:flex;align-items:center;justify-content:space-between;gap:15px}
.life-panel-kicker{font-size:10px;letter-spacing:.22em;color:#d5f2ca}
.life-panel-close{width:32px;height:32px;border:0;background:#ffffff15;border-radius:50%;font-size:20px;line-height:1;color:#f7ebd3;cursor:pointer}
.life-panel h2{font-family:"Songti SC","Noto Serif SC",serif;font-size:26px;line-height:1.2;margin:12px 0;color:#fff6df}
.life-panel p{font-size:12px;line-height:1.9;color:#dfebe1;margin:0 0 15px}
.life-panel-go{appearance:none;border:0;border-bottom:1px solid #f1d7a5;background:none;color:#fbe6b9;font-size:12px;padding:4px 0 7px;cursor:pointer;font-weight:700}
.life-scene-foot{position:absolute;z-index:4;bottom:28px;left:clamp(28px,6.5vw,122px);font-size:10px;letter-spacing:.19em;color:#e8e2c69e}
.life-scene-foot:before{content:"✦";margin-right:10px;color:#f4d89b}
.life-arriving .life-hero,.life-arriving .life-hotspot,.life-arriving .life-scene-foot{opacity:0}
.life-view .life-hero,.life-view .life-hotspot,.life-view .life-scene-foot{transition:opacity .4s ease}
.life-pages{position:relative;z-index:1;background:#e8dfcb;color:#304442;padding:105px clamp(22px,6vw,120px) 105px;isolation:isolate}
.life-pages:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.62;
 background:repeating-linear-gradient(0deg,transparent 0 35px,rgba(85,111,103,.085) 36px,transparent 37px),
 radial-gradient(circle at 85% 10%,#fff5df,transparent 42%),radial-gradient(circle at 12% 88%,#b5cfbd66,transparent 48%)}
.life-pages-inner{max-width:1240px;margin:0 auto}
.life-pages-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:50px;padding-bottom:55px;border-bottom:1px solid #7589776b}
.life-pages-kicker{font-size:11px;letter-spacing:.25em;color:#597f6a;font-weight:700}
.life-pages-heading h2{font-family:"Songti SC","Noto Serif SC",serif;font-size:clamp(48px,5.4vw,88px);font-weight:600;letter-spacing:-.055em;line-height:1.25;margin:20px 0 0;color:#203d39}
.life-pages-heading p{font-size:15px;line-height:2;max-width:520px;margin:0;color:#54685b}
.life-chapter{display:grid;grid-template-columns:minmax(240px,.93fr) minmax(320px,1.08fr);gap:clamp(42px,7vw,120px);align-items:center;padding:80px 0;border-bottom:1px solid #6985735b;scroll-margin-top:26px}
.life-chapter:nth-of-type(even) .life-illustration{order:2;transform:rotate(2.5deg)}
.life-chapter:nth-of-type(even) .life-chapter-copy{order:1}
.life-illustration{position:relative;aspect-ratio:1.15;display:grid;place-items:center;background:#f5eddb;border:11px solid #f8f0dc;
 box-shadow:0 18px 45px #30472d2c,0 1px 0 #fffaf3 inset;transform:rotate(-2.5deg)}
.life-illustration:before{content:"";position:absolute;z-index:2;width:106px;height:29px;background:#e7cf9aa6;top:-24px;left:39%;transform:rotate(2deg);box-shadow:0 1px 3px #79654e44}
.life-illustration img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 14px #18382c32)}
.life-illustration figcaption{position:absolute;right:12px;bottom:11px;font-size:10px;letter-spacing:.1em;color:#4d6050;background:#fffae1dc;padding:5px 8px;border-radius:4px}
.life-chapter-copy{position:relative}
.life-chapter-index{display:block;font-size:11px;letter-spacing:.21em;color:#567f70;font-weight:700;margin:0 0 17px}
.life-chapter h3{font-family:"Songti SC","Noto Serif SC",serif;font-size:clamp(36px,4vw,62px);font-weight:600;letter-spacing:-.045em;line-height:1.3;color:#234c42;margin:0 0 16px}
.life-chapter p{font-size:16px;line-height:2;color:#58695f;max-width:530px;margin:0 0 18px}
.life-empty-state{display:inline-flex;gap:10px;align-items:center;font-size:12px!important;letter-spacing:.055em;color:#6b806c!important;
 border:1px dashed #8ba58e;border-radius:99px;padding:9px 13px}
.life-empty-state:before{content:"◌";font-size:15px;color:#6b9782}
.life-end{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:35px;font-size:12px;color:#66786a}
.life-end a{color:#275f52;text-decoration:none;border-bottom:1px solid #275f5280;padding-bottom:4px}
.life-flight .journey-flight-void{background:radial-gradient(circle at var(--jx,50%) var(--jy,50%),#669d81,#11353c 63%,#0a1b28)}
.life-flight .journey-flight-hud{color:#ffebbe;text-shadow:0 0 18px #e6c78f}
.life-flight-interior{position:absolute;inset:0;z-index:4;opacity:0;transform:scale(1.12);will-change:opacity,transform;overflow:hidden}
.life-flight-interior:before{content:"";position:absolute;width:min(77vw,1120px);aspect-ratio:1;right:-2%;top:49%;transform:translateY(-50%);
 background:url("life-island-1700.webp") center/contain no-repeat;filter:drop-shadow(0 25px 62px #05151b88)}
.life-flight.is-flying .life-flight-interior{animation:journey-enter-lab 1570ms cubic-bezier(.2,.72,.28,1) both}
body.journey-motion-paused .life-island,body.journey-motion-paused .life-hotspot .star,body.journey-motion-paused .life-hotspot:before{animation-play-state:paused}
@media(max-width:1050px){
 .life-island-frame,.life-flight-interior:before{width:min(87vw,880px);right:-13%;top:53%}
 .life-hero{width:44vw}.life-intro{max-width:340px}
 .life-panel{width:min(340px,36vw)}
}
@media(max-width:730px){
 .life-scene{height:100svh;min-height:790px}
 .life-hero{top:clamp(28px,6vh,55px);left:24px;width:calc(100% - 48px)}
 .life-kicker{font-size:9px;letter-spacing:.17em}
 .life-hero h1{font-size:clamp(53px,13vw,88px);margin:13px 0 4px;line-height:1}
 .life-hero h1 span{font-size:clamp(34px,8.2vw,48px);margin-top:5px}
 .life-tagline{font-size:15px;line-height:1.65;margin:12px 0 5px}
 .life-intro{font-size:11.5px;line-height:1.65;max-width:330px}
 .life-actions{margin-top:13px;gap:8px}
 .life-primary,.life-return{min-height:39px;padding:9px 14px;font-size:11px}
 .life-island-frame,.life-flight-interior:before{width:min(128vw,680px);right:-27%;top:58%}
 .life-hotspot{width:43px;height:43px}
 .life-panel{right:18px;left:18px;bottom:60px;width:auto;padding:15px 17px;border-radius:14px}
 .life-panel h2{font-size:21px;margin:8px 0 5px}
 .life-panel p{font-size:11px;line-height:1.7;margin-bottom:7px}
 .life-scene-foot{left:24px;bottom:20px;font-size:8px;letter-spacing:.09em}
 .life-pages{padding:68px 22px 75px}
 .life-pages-heading{grid-template-columns:1fr;gap:15px;padding-bottom:34px}
 .life-pages-heading h2{font-size:48px;margin:9px 0}
 .life-pages-heading p{font-size:13px}
 .life-chapter{grid-template-columns:1fr;gap:30px;padding:47px 0}
 .life-chapter:nth-of-type(even) .life-illustration{order:0}
 .life-chapter:nth-of-type(even) .life-chapter-copy{order:0}
 .life-illustration{max-width:560px;width:calc(100% - 16px);margin:0 auto}
 .life-chapter h3{font-size:40px}
 .life-chapter p{font-size:13px;line-height:1.85}
 .life-end{flex-direction:column;align-items:flex-start}
}
@media(max-width:390px){
 .life-scene{min-height:760px}
 .life-island-frame,.life-flight-interior:before{top:59%;right:-30%;width:134vw}
 .life-panel{bottom:52px}
}
@media(prefers-reduced-motion:reduce){
 .life-island,.life-hotspot .star,.life-hotspot:before,.life-panel{animation:none!important}
 .life-flight.is-flying .life-flight-interior{animation:none!important}
 .life-view .life-hero,.life-view .life-hotspot,.life-view .life-scene-foot{transition:none!important}
}