@charset "UTF-8";

/* The illustrated edition. Existing component behavior is kept in styles.css. */
:root { --paper:#f8f5ec; --cream:#fffdf5; --ink:#414b37; --muted:#747b65; --sage:#84966c; --sage-dark:#526444; --line:#dedfcd; }
[hidden] { display:none!important; }
body::after {
  content:""; position:fixed; inset:0; z-index:120; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2368583c' filter='url(%23n)' opacity='.7' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}
.wordmark { font:600 24px Georgia,"Times New Roman",serif; letter-spacing:-.8px; gap:10px; }
.brand-cat { width:29px; height:29px; color:#3d4537; }

/* A sunlit arch makes the lock screen feel like the entrance to the same world. */
.lock-screen { min-height:0; background:#f3f1e4; }
.lock-header { top:25px; left:4.5%; right:4.5%; }
.lock-landscape { background:radial-gradient(ellipse at 50% 42%,#fffdf2 0%,#f5f2e5 46%,#e5ead6 100%); }
.lock-landscape::after { content:""; position:absolute; width:min(480px,88vw); height:720px; top:50%; left:50%; transform:translate(-50%,-48%); border:1px solid #d5d8be80; border-radius:240px 240px 22px 22px; box-shadow:0 0 0 13px #fdfbef45,0 0 0 14px #d7d9c031; }
.lock-sun { left:10%; top:18%; width:190px; height:190px; background:#e9d2a247; box-shadow:0 0 80px #eddaaf40; }
.hill-back { bottom:-32%; left:-43%; width:120%; height:64%; background:#b6c5a06b; transform:rotate(12deg); }
.hill-front { bottom:-32%; right:-45%; width:110%; height:62%; background:#a4ba913b; transform:rotate(-16deg); }
.lock-window-shadow { opacity:.22; animation:window-light 21s ease-in-out infinite alternate; }
.doodle-leaf { width:140px; height:196px; bottom:11%; left:13%; stroke:#8e9d7a; stroke-width:1; }
.lock-sprig { transform-box:view-box; transform-origin:52% 94.3%; animation:lock-sprig-sway 10s ease-in-out infinite; }
.sprig-stem { stroke-width:1.2; }
.sprig-petioles { stroke-width:.9; }
.sprig-leaves { fill:url(#lock-leaf-wash); }
.sprig-veins { stroke-width:.65; opacity:.5; }
@keyframes lock-sprig-sway { 0%,100% { transform:rotate(-.7deg); } 42% { transform:rotate(1.1deg); } 74% { transform:rotate(.2deg); } }
.lock-spark { animation:sparkle 6s ease-in-out infinite; }
.spark-two { animation-delay:-3s; }
.unlock-content { padding:80px 20px 100px; }
.clock-group { margin-bottom:30px; }
.clock { font-size:clamp(76px,8vw,108px); color:#5b654b; }
.calendar { font-size:12px; color:#747d63; margin-top:13px; }
.avatar-wrap { margin-bottom:18px; }
.avatar { border:6px solid #fffcf2; background:linear-gradient(145deg,#dce5c8,#becba8); box-shadow:0 0 0 1px #cbd4b7,0 8px 24px #65764a16; }
.avatar svg { width:51px; height:51px; color:#373e33; }
.avatar-flower { right:-3px; bottom:0; font-size:26px; color:#bd9a5f; }
.lock-name { font-size:25px; letter-spacing:-.7px; }
.lock-welcome { color:#767e66; margin:11px 0 26px; }
.unlock-form { width:256px; }
.password-shell { border-color:#cdd4b9; background:#fffdf7ad; border-radius:13px; height:47px; padding:0 15px; transition:border-color .25s,box-shadow .3s,background .3s; }
.password-shell>.icon { width:17px; height:17px; color:#95a37b; }
.password-field { position:relative; flex:1; min-width:0; height:100%; display:flex; align-items:center; }
.password-field input { height:100%; color:transparent; -webkit-text-fill-color:transparent; pointer-events:none; user-select:none; }
.password-display { --password-length:5; --typed-length:0; position:absolute; left:50%; top:50%; width:calc(var(--password-length) * 1.45em); height:1.5em; transform:translate(-50%,-50%); color:#748165; font-size:12px; line-height:1.5; pointer-events:none; }
.password-letters { display:flex; height:100%; }
.password-letter { flex:0 0 1.45em; text-align:center; animation:password-letter-in .16s ease-out both; }
.password-caret { position:absolute; left:0; top:2px; width:1px; height:14px; border-radius:1px; background:#829368; transform:translateX(calc(var(--typed-length) * 1.45em)); transition:transform .09s ease-out; animation:password-caret-blink 1.1s ease-in-out infinite; }
.is-typing .password-shell { border-color:#aab990; background:#fffdf5; box-shadow:0 0 0 3px #9caf7a0b,inset 0 1px 8px #94a77b05; }
.is-typing .password-caret { animation:none; opacity:1; }
.is-filled .password-caret { animation:password-caret-blink 1.1s ease-in-out infinite; }
.unlock-form.is-typing .login-button { background:#74885e; transform:none; cursor:default; box-shadow:0 2px 0 #50613c15,inset 0 1px #ffffff30; }
.unlock-form.is-typing .login-button .icon { transform:translateX(4px); }
.password-field input::selection { background:transparent; }
@keyframes password-letter-in { from { opacity:0; transform:translateY(2px); } to { opacity:1; transform:translateY(0); } }
@keyframes password-caret-blink { 0%,40%,100% { opacity:.85; } 55%,85% { opacity:0; } }
.password-field input:focus { outline:none; }
.login-button { height:47px; background:#687d51; border-radius:13px; gap:19px; letter-spacing:4px; box-shadow:0 4px 0 #50613c21,inset 0 1px #ffffff30; }
.login-button .icon { width:18px; height:18px; transition:transform .25s; }
.login-button:hover { background:#596f44; }
.login-button:hover .icon { transform:translateX(4px); }
.unlock-hint { color:#7f886e; margin-top:16px; }
.scroll-enter { color:#6d7b5b; }
.lock-corner-note { color:#7f8c6d; font-size:14px; }

/* The courtyard fills the frame; the two illustrated halves share one horizon. */
.world { max-width:1640px; padding:0 3.5%; }
.world-header { height:auto; min-height:86px; gap:28px; border-color:#dce0cf; }
.header-nav { gap:28px; }
.header-nav button { color:#66715b; }
.courtyard { max-width:none; }
.world-intro { padding:32px 14px 28px; }
.eyebrow { display:flex; align-items:center; gap:8px; font-size:9px; letter-spacing:2.3px; color:#7a8969; margin:0 0 13px; }
.eyebrow>span { height:5px; width:5px; border-radius:50%; background:#a4b77f; box-shadow:0 0 0 3px #d8dfc44d; }
.world-intro h1 { font-family:"STKaiti","KaiTi","Kaiti SC","Microsoft YaHei",serif; font-size:clamp(32px,3.2vw,46px); font-weight:500; letter-spacing:3px; margin:0 0 12px; line-height:1.3; }
.world-intro h1>span { display:inline-block; color:#77875e; }
.world-intro h1>.title-lead { color:var(--ink); }
.intro-caption { font-size:12px; color:#737b64; letter-spacing:1px; line-height:1.9; }
.little-stamp { height:auto; width:auto; display:grid; justify-items:center; gap:5px; color:#83916b; transform:rotate(6deg); margin:0 15px; padding:12px 18px; border:1px dashed #c4cdae; border-radius:50% 50% 44% 46%; box-shadow:none; }
.little-stamp .icon { height:27px; width:27px; }
.little-stamp span { font-size:11px; letter-spacing:3px; }
.little-stamp small { font:italic 11px Georgia,serif; color:#8e967d; }
.scene { --look-x:0px; --look-y:0px; margin:0 auto; max-width:none; border:1px solid #d9dfc8; border-radius:28px; overflow:hidden; background:linear-gradient(110deg,#ede8cf 0%,#faf0d8 38%,#e7efdf 65%,#dfead9 100%); box-shadow:0 4px 0 #dedfc733,0 18px 50px -35px #62734e40; }
.scene::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 7px #fffdf321,inset 0 0 55px #a19c6220; pointer-events:none; z-index:4; }
.scene-atmosphere { position:absolute; inset:-10px; z-index:-1; overflow:hidden; transform:translate(var(--look-x),var(--look-y)); transition:transform 1s var(--ease); pointer-events:none; }
.sun-halo { position:absolute; width:350px; height:350px; right:16%; top:-24%; border-radius:50%; background:radial-gradient(circle,#fff6c58c, #fff7d54a 45%,transparent 71%); opacity:.8; }
.sunbeam { position:absolute; width:50%; height:160%; top:-35%; left:29%; transform:rotate(27deg); background:linear-gradient(90deg,transparent,#fffadd66 20%,#fffbdd22 48%,transparent); animation:light-drift 22s ease-in-out infinite alternate; }
.scene-ground { left:0; right:0; height:28%; bottom:0; border-radius:0; transform:none; background:linear-gradient(#c5d29f00,#b9c796); }
.scene-art { aspect-ratio:720/650; }
.room-half { z-index:1; }
.garden-half { z-index:0; margin-left:0; }
.cat-touch-target { position:absolute; z-index:3; left:70.9722%; top:59.0769%; width:10.56%; height:11.08%; min-width:44px; min-height:44px; padding:0; border:0; border-radius:46% 46% 43% 43%; background:transparent; transform:translate(-50%,-50%); cursor:pointer; touch-action:manipulation; transition:background .2s; }
.cat-touch-target:hover { background:#fff6d112; }
.cat-touch-target:focus-visible { outline:2px solid #baa16e; outline-offset:3px; background:#fff6d112; }
.cat-speech { position:absolute; z-index:5; left:77.2%; top:59.0769%; width:clamp(160px,18vw,245px); padding:14px 17px; border:1.4px solid #b4ac89; border-radius:17px 20px 18px 15px; background:#fffdf2; color:#5e6c51; box-shadow:0 4px 0 #b5a77b36,0 9px 24px #5260441c,inset 0 0 0 3px #f2efd940; pointer-events:none; visibility:hidden; opacity:0; transform:translate(6px,calc(-50% + 4px)) scale(.96); transform-origin:left center; transition:opacity .2s ease,transform .28s var(--ease),visibility 0s .28s; }
.cat-speech::after { content:""; position:absolute; width:12px; height:12px; left:-7px; top:calc(50% - 7px); border-left:1.4px solid #b4ac89; border-bottom:1.4px solid #b4ac89; border-radius:0 0 0 3px; background:#fffdf2; transform:rotate(45deg); }
.cat-speech.is-visible { visibility:visible; opacity:1; transform:translate(0,-50%) scale(1); transition-delay:0s; }
.cat-speech p { position:relative; z-index:1; margin:0; font-size:13px; line-height:1.85; letter-spacing:.4px; overflow-wrap:anywhere; }
.room-art .cat-head { transform-box:fill-box; transform-origin:50% 90%; }
.sleep-cat-touch-target { position:absolute; z-index:3; left:57.1%; top:40.15%; width:10.56%; height:9.23%; min-width:44px; min-height:44px; padding:0; border:0; border-radius:50%; background:transparent; transform:translate(-50%,-50%); cursor:pointer; touch-action:manipulation; }
.sleep-cat-touch-target:focus-visible { outline:2px solid #baa16e; outline-offset:3px; }
.cat-speech.sleep-cat-speech { left:63.9%; top:40.15%; width:max-content; padding:9px 13px; transform:translate(5px,calc(-50% + 4px)) scale(.96); transform-origin:left center; }
.cat-speech.sleep-cat-speech.is-visible { transform:translate(0,-50%) scale(1); }
.cat-speech.sleep-cat-speech::after { left:-7px; top:calc(50% - 7px); bottom:auto; border-left:1.4px solid #b4ac89; border-right:0; border-radius:0 0 0 3px; }
.cat-speech.sleep-cat-speech p { font:italic 21px/1.35 Georgia,serif; letter-spacing:2px; }
.sleep-cat-speech.is-visible p { animation:sleep-cat-dream 2.2s ease-in-out infinite; }
@keyframes sleep-cat-dream { 50% { transform:translateY(-3px); opacity:.72; } }
@media(max-width:900px) {
  .cat-speech { left:70.9722%; top:calc(44% - 12px); width:min(230px,65%); padding:12px 15px; transform:translate(-72%,calc(-100% + 4px)) scale(.96); transform-origin:72% bottom; }
  .cat-speech.is-visible { transform:translate(-72%,-100%) scale(1); }
  .cat-speech::after { left:calc(72% - 7px); top:auto; bottom:-7px; border-left:0; border-right:1.4px solid #b4ac89; border-radius:0 0 3px 0; }
  .cat-speech p { font-size:12px; }
}
.scene-hotspot { gap:11px; background:linear-gradient(130deg,#fffdf4,#f5f2df); box-shadow:0 4px 0 #c6b48a70,0 9px 22px #5f644323,inset 0 0 0 4px #fffdf2; border:1px solid #a99f79; border-radius:13px 15px 14px 12px; padding:13px 15px 13px 12px; transform:rotate(-2deg); animation:none; transition:transform .35s var(--ease),box-shadow .35s,border-color .35s; }
.scene-hotspot::after { left:26px; bottom:-7px; width:11px; height:11px; background:#f9f6e8; border-right:1px solid #a99f79; border-bottom:1px solid #a99f79; transform:rotate(45deg); }
.scene-hotspot small { font:8px Georgia,serif; color:#7b8469; letter-spacing:1px; margin-bottom:5px; }
.scene-hotspot strong { font-size:17px; letter-spacing:2px; }
.scene-hotspot>.hotspot-arrow { height:17px; width:17px; margin-left:6px; color:#7b8b5e; transition:transform .25s; }
.hotspot-icon,.projects-hotspot .hotspot-icon { width:34px; height:34px; background:transparent; color:#7c8e61; }
.hotspot-icon .icon { width:25px; height:25px; }
.about-hotspot { top:44%; left:11%; }
.projects-hotspot { top:52%; left:17%; transform:rotate(1.5deg); }
.scene-hotspot:hover,.scene-hotspot:focus-visible { transform:translateY(-4px) rotate(0); box-shadow:0 6px 0 #c6b48a50,0 14px 27px #53634724,inset 0 0 0 4px #fffdf2; border-color:#7e8c62; }
.scene-hotspot:hover>.hotspot-arrow { transform:translateX(3px); }
.scene-hotspot:active { transform:translateY(1px) rotate(0); }
.scene-label { bottom:2%; color:#62734d; font-size:10px; opacity:.85; z-index:2; background:#f5f2dcba; padding:7px 20px; border-radius:30px; }
.label-dash { width:14px; background:#9ca77b; }
.mote { position:absolute; width:4px; height:4px; border-radius:50%; background:#fffce8; box-shadow:0 0 7px #fff6c8; animation:mote-float 13s ease-in-out infinite; }
.mote-one { left:62%; top:40%; }
.mote-two { left:85%; top:54%; animation-delay:-5s; animation-duration:17s; }
.mote-three { left:45%; top:20%; animation-delay:-8s; }
.mote-four { left:75%; top:70%; animation-delay:-3s; animation-duration:19s; }
.explore-hint { font-size:11px; color:#727d60; letter-spacing:1px; margin:22px 0 25px; }
.explore-hint .icon { height:14px; width:14px; color:#8d9b72; }
.world-footer { min-height:64px; color:#78816b; }
.footer-greeting>span { color:#b09a68; font-size:17px; }

/* Tactile paper windows, a real inventory, and comfortably spaced reading. */
.content-dialog { border-color:#c7c9ad; width:min(760px,calc(100% - 40px)); max-height:min(880px,calc(100dvh - 60px)); box-shadow:0 30px 100px #2e3e2c40,0 4px 0 #c6c9ab,inset 0 0 0 5px #f0eedb; }
.content-dialog::backdrop { background:#35452f65; backdrop-filter:blur(6px); }
.dialog-header { height:60px; padding-left:25px; background:#edf0df; border-color:#d6dcc5; }
.window-dots i { width:8px; height:8px; background:#b2c395; box-shadow:inset 0 1px #ffffff65; }
.window-dots i:nth-child(2) { background:#d8bd8b; }
.dialog-caption { font-size:11px; color:#637352; }
.icon-button { transition:background .2s,transform .25s; }
.icon-button:hover { background:#dce3cd; transform:rotate(7deg); }
.dialog-content { padding:38px 42px 34px; animation:none; }
.dialog-footer { border-color:#d9dec6; color:#7f8b6c; }
.panel-eyebrow { color:#7e8e67; letter-spacing:2px; margin-bottom:10px; line-height:1.7; }
.panel-title { font-size:28px; margin-bottom:10px; }
.panel-subtitle { color:#748065; }
.about-intro { gap:23px; padding-bottom:28px; margin-bottom:12px; border-color:#d6ddc3; }
.about-avatar { height:76px; width:76px; background:linear-gradient(145deg,#e2e9ce,#c7d6ac); border:4px solid #f7f7e8; outline:1px solid #cbd5b6; border-radius:50%; }
.about-intro .panel-title { font-size:29px; letter-spacing:-.7px; }
.contact-list { gap:16px; }
.contact-row { min-height:86px; gap:18px; padding:18px 21px; border-color:#e0e3d0; background:#faf9ef; transition:border-color .2s,background .2s,transform .25s; }
.contact-row[href]:hover { transform:translateX(3px); }
.contact-icon { width:41px; height:41px; border-radius:12px; background:#e7edda; color:#768b5d; }
.contact-text small { font-size:11px; color:#7d896a; }
.contact-text strong { font-size:14px; }
.contact-text strong,.contact-email { user-select:text; }
.contact-email { color:inherit; text-decoration:underline; text-decoration-color:#b6c29e; text-underline-offset:3px; }
.contact-email:hover { color:#526b40; }
.contact-action,.contact-copy { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; color:#a6b096; }
.contact-action .icon,.contact-copy .icon { width:16px; height:16px; }
.contact-copy { padding:0; border:0; border-radius:9px; background:transparent; transition:color .2s; }
.contact-copy:hover,.contact-copy.is-copied { color:#657f50; }
.contact-copy:focus-visible { outline:2px solid #8ba370; outline-offset:3px; }
.contact-copy-status { min-height:22px; margin:12px 0 0; color:#657653; font-size:12px; line-height:1.8; }
.inventory-count { border-color:#d2dcc0; padding:7px 12px; font-size:10px; color:#73845a; background:#f4f6e8; }
.inventory { gap:20px; padding:17px; background:#ebeede; border:1px solid #dbe0c8; border-radius:20px; box-shadow:inset 0 2px 7px #6473480a; }
.project-card { background:linear-gradient(150deg,#fffef5,#f3f4e5); border-color:#c4ceac; border-radius:14px; padding:24px 21px; min-height:228px; box-shadow:0 3px 0 #b8c3a32e; transition:transform .3s var(--ease),border-color .3s,box-shadow .3s; }
.project-card:hover { transform:translateY(-5px) rotate(-1deg); border-color:#95aa76; background:linear-gradient(150deg,#fffef5,#f3f4e5); box-shadow:0 7px 0 #b8c3a32e; }
.project-art { height:82px; width:89px; margin-bottom:24px; }
.project-art::before { inset:12px 0 0; border-color:#97aa79; background:linear-gradient(135deg,#dce6bf,#bdcea0); box-shadow:inset 0 -4px #b5c69330,0 4px 5px #566b3b0c; }
.project-art::after { top:3px; width:39px; height:18px; border-color:#97aa79; background:#dce6bf; }
.project-card strong { font-size:15px; margin-bottom:9px; }
.project-card small { font-size:11px; color:#778664; letter-spacing:.5px; }
.inventory-space { border-color:#c9d2b5; border-radius:14px; background:#f5f6ea66; }
.inventory-space .icon { height:34px; width:34px; color:#cbd5b9; }
.inventory-note { font-size:11px; color:#788765; }
.back-button { color:#72885b; font-size:12px; margin:-17px 0 18px; }
.detail-intro { gap:23px; margin-bottom:25px; }
.detail-intro .project-art { width:75px; height:71px; }
.detail-intro .panel-title { font-size:25px; }
.project-description { font-size:13px; color:#62734f; padding:18px 22px; background:#eef2df; border-left:3px solid #b1c38e; border-radius:3px 12px 12px 3px; margin-bottom:28px; }
.features { gap:26px 28px; }
.feature-title { margin-bottom:10px; font-size:14px; }
.feature-title .icon { height:18px; width:18px; color:#82976a; }
.feature p { font-size:12px; color:#6f7a60; line-height:2; }
.downloads { margin-top:30px; padding-top:25px; border-color:#d2dcc0; }
.download-heading { font-size:13px; margin-bottom:16px; }
.download-options { gap:12px; }
.download-option { border-color:#cdd8b8; border-radius:12px; min-height:79px; gap:7px; padding:13px 8px; }
.download-option span { gap:7px; font-size:12px; }
.download-option small { font-size:10px; color:#7e8a6a; }
.download-option:disabled { color:#7f8b6d; background:#f7f7ed; }

/* Different rhythms, anchored at each joint. No permanent JS render loop. */
.plant-sway,.flower-sway,.curtain-sway,.tree-canopy,.wind-chime,.cat-body,.cat-tail,.cat-ear,.cat-paw,.sleep-breathe,.butterfly,.butterfly-wing,.garden-yarn { transform-box:fill-box; }
.plant-sway { transform-origin:50% 100%; animation:soft-plant 8.5s ease-in-out infinite; }
.plant-sway:nth-of-type(even) { animation-delay:-3s; animation-duration:11s; }
.plant-sway.desk-plant { transform-box:view-box; transform-origin:90.2778% 58.3077%; animation-duration:10.5s; animation-delay:-2.3s; }
.plant-sway.foreground-plant { transform-box:view-box; transform-origin:3.6111% 96%; animation-duration:11.8s; animation-delay:-6.1s; }
.flower-sway { transform-origin:50% 100%; animation:soft-plant 6.8s ease-in-out infinite; animation-delay:-2.8s; }
.tree-canopy { transform-origin:50% 95%; animation:canopy-sway 13s ease-in-out infinite; }
.curtain-sway { transform-origin:50% 0; animation:curtain-sway 10s ease-in-out infinite; }
.wind-chime { transform-origin:50% 0; animation:chime-swing 8.3s ease-in-out infinite; }
.cat-body { transform-origin:50% 100%; animation:cat-breathe 6.7s ease-in-out infinite; }
.cat-tail { transform-origin:15% 0; animation:cat-tail 17s ease-in-out infinite; }
.cat-ear { transform-origin:50% 100%; animation:ear-twitch 21s ease-in-out infinite; animation-delay:-8s; }
.cat-paw { transform-origin:50% 85%; animation:typing 14s ease-in-out infinite; }
.screen-glow { animation:screen-glow 5.7s ease-in-out infinite; }
.steam-wisp { animation:steam-rise 4.6s ease-in-out infinite; }
.steam-wisp:nth-of-type(even) { animation-delay:-2.3s; }
.cloud-drift { animation:soft-cloud 25s ease-in-out infinite alternate; }
.butterfly { transform-origin:center; animation:butterfly-trip 13s ease-in-out infinite; }
.butterfly-wing { transform-origin:50% 50%; animation:wing-flutter .8s ease-in-out infinite alternate; }
.sleep-breathe { animation-duration:5.3s; animation-delay:-1.6s; }
.sleep-breathe.garden-sleep-body { transform-box:view-box; transform-origin:57.7778% 43.0769%; animation:garden-sleep-breathe 5.6s ease-in-out infinite; animation-delay:-1.2s; }
.garden-sleep-ear { transform-box:view-box; }
.garden-sleep-ear-near { transform-origin:53.6111% 39.0769%; animation:garden-ear-near 18s ease-in-out infinite; animation-delay:-2.7s; }
.garden-sleep-ear-far { transform-origin:57.9167% 40%; animation:garden-ear-far 24s ease-in-out infinite; animation-delay:-6.2s; }
.garden-yarn { transform-origin:50% 0; animation:chime-swing 7.3s ease-in-out infinite; animation-delay:-4s; }
.motion-paused .scene *,.motion-paused .lock-landscape *,body:not([data-phase="world"]) .scene * { animation-play-state:paused!important; }
@keyframes sparkle { 50% { opacity:.35; transform:scale(.8); } }
@keyframes window-light { to { transform:translateX(20px) rotate(27deg); opacity:.15; } }
@keyframes light-drift { to { transform:translateX(30px) rotate(24deg); opacity:.55; } }
@keyframes mote-float { 0%,100% { transform:translate(0,0); opacity:.25; } 45% { transform:translate(13px,-28px); opacity:.9; } 75% { transform:translate(22px,-13px); opacity:.5; } }
@keyframes soft-plant { 0%,100% { transform:rotate(-1.1deg); } 45% { transform:rotate(1.8deg); } 75% { transform:rotate(.3deg); } }
@keyframes canopy-sway { 0%,100% { transform:rotate(-.45deg); } 53% { transform:rotate(.7deg) translateX(1px); } }
@keyframes curtain-sway { 0%,100% { transform:skewX(0); } 45% { transform:skewX(-1.5deg); } 75% { transform:skewX(.5deg); } }
@keyframes chime-swing { 0%,100% { transform:rotate(-3deg); } 42% { transform:rotate(4deg); } 74% { transform:rotate(-1deg); } }
@keyframes cat-breathe { 50% { transform:scaleY(1.009); } }
@keyframes garden-sleep-breathe { 0%,100% { transform:scale(1); } 43% { transform:scale(1.008,1.04); } 68% { transform:scale(1.003,1.016); } }
@keyframes garden-ear-near { 0%,24%,40%,100% { transform:rotate(0); } 28% { transform:rotate(-7deg); } 32% { transform:rotate(2deg); } 36% { transform:rotate(-2deg); } }
@keyframes garden-ear-far { 0%,62%,76%,100% { transform:rotate(0); } 66% { transform:rotate(6deg); } 70% { transform:rotate(-2deg); } 73% { transform:rotate(1.5deg); } }
@keyframes cat-tail { 0%,100% { transform:rotate(-2deg); } 25% { transform:rotate(3deg); } 43% { transform:rotate(2deg); } 68% { transform:rotate(-5deg); } 83% { transform:rotate(-2deg); } }
@keyframes ear-twitch { 0%,67%,74%,100% { transform:rotate(0); } 69% { transform:rotate(-5deg); } 71% { transform:rotate(2deg); } }
@keyframes typing { 0%,54%,66%,100% { transform:translateY(0); } 56%,61% { transform:translateY(-1.7px); } 58%,63% { transform:translateY(.5px); } }
@keyframes steam-rise { 0% { opacity:0; transform:translateY(4px); } 30% { opacity:.55; } 100% { opacity:0; transform:translate(3px,-14px); } }
@keyframes soft-cloud { to { transform:translateX(21px); } }
@keyframes butterfly-trip { 0%,100% { transform:translate(0,0) rotate(-5deg); } 30% { transform:translate(22px,-13px) rotate(7deg); } 60% { transform:translate(35px,6px) rotate(-2deg); } 82% { transform:translate(11px,11px) rotate(-9deg); } }
@keyframes wing-flutter { to { transform:scaleX(.45); } }

@media(min-width:1550px) { .world { padding:0 4%; } .world-intro { padding-top:38px; padding-bottom:32px; } }
@media(max-width:1050px) {
  .world-header { gap:22px; } .header-nav { gap:20px; } .wordmark { font-size:22px; }
  .scene-hotspot { padding:10px; gap:7px; } .scene-hotspot strong { font-size:15px; }
  .scene-hotspot small { font-size:7px; letter-spacing:.7px; } .hotspot-icon { width:28px; }
  .hotspot-icon .icon { width:22px; height:22px; } .scene-hotspot>.hotspot-arrow { margin-left:1px; }
  .world-intro { padding:29px 9px 25px; } .little-stamp { margin-right:5px; }
  .projects-hotspot { left:11%; }
}
@media(max-width:700px) {
  html { scrollbar-gutter:auto; }
  .world { padding:0 5%; }
  .world-header>.wordmark { order:0; }
  .header-nav button { min-height:44px; padding-bottom:4px; }
  .wordmark { font-size:22px; gap:8px; } .brand-cat { width:27px; height:27px; }
  .world-intro { padding:26px 0 24px; }
  .world-intro h1 { font-size:30px; letter-spacing:1px; margin-bottom:12px; }
  .world-intro h1>span { display:block; line-height:1.55; }
  .eyebrow { font-size:8px; letter-spacing:1.2px; margin-bottom:13px; }
  .intro-caption { font-size:11px; letter-spacing:.3px; max-width:280px; }
  .little-stamp { display:none; }
  .scene { margin:0; border-radius:20px; }
  .garden-half { margin-top:-22px; }
  .scene-atmosphere { background:linear-gradient(150deg,transparent 33%,#e6edda 65%,#d8e3c8); }
  .scene-ground { height:34%; top:auto; bottom:0; left:0; right:0; border-radius:0; transform:none; }
  .scene-label { bottom:1%; font-size:9px; padding:5px 13px; letter-spacing:2px; }
  .scene-hotspot { padding:10px 11px; gap:7px; }
  .scene-hotspot strong { font-size:14px; letter-spacing:1.5px; }
  .scene-hotspot small { font-size:6.5px; letter-spacing:.6px; }
  .hotspot-icon,.projects-hotspot .hotspot-icon { width:27px; height:29px; }
  .scene-hotspot>.hotspot-arrow { width:14px; height:14px; }
  .about-hotspot { top:44%; left:9%; }
  .projects-hotspot { top:52%; left:12%; }
  .explore-hint { margin:20px 0 23px; font-size:10px; letter-spacing:.3px; }
  .world-footer { min-height:85px; }
  .lock-header { top:18px; left:6%; right:6%; }
  .lock-header .wordmark { font-size:20px; }
  .unlock-content { min-height:620px; padding:80px 20px 106px; }
  .clock { font-size:85px; } .clock-group { margin-bottom:26px; }
  .calendar { font-size:11px; letter-spacing:2px; }
  .avatar { width:80px; height:80px; } .avatar svg { height:46px; width:46px; }
  .lock-name { font-size:24px; } .lock-landscape::after { height:660px; }
  .doodle-leaf { left:-6%; bottom:11%; width:105px; height:147px; opacity:.5; }
  .lock-sun { width:110px; height:110px; left:-10%; top:20%; }
  .spark-one { right:7%; top:27%; font-size:24px; } .spark-two { left:10%; bottom:22%; }
  .scroll-enter { bottom:14px; }
  .content-dialog { width:calc(100% - 24px); max-height:calc(100dvh - 30px); border-radius:19px; }
  .dialog-content { padding:29px 23px 27px; }
  .dialog-header { padding-left:18px; height:57px; }
  .dialog-caption { font-size:9px; letter-spacing:1px; }
  .panel-title { font-size:25px; }
  .about-intro { gap:16px; padding-bottom:23px; }
  .about-avatar { height:61px; width:61px; } .about-avatar>.icon { width:35px; height:35px; }
  .about-intro .panel-title { font-size:23px; }
  .panel-eyebrow { font-size:8px; letter-spacing:1.6px; }
  .contact-row { padding:16px 13px; gap:12px; min-height:85px; }
  .contact-icon { width:33px; height:33px; }
  .contact-text strong { font-size:12px; }
  .inventory { gap:11px; padding:11px; } .project-card { padding:19px 13px; min-height:208px; }
  .project-card strong { font-size:13px; } .project-card small { font-size:9px; }
  .project-art { width:70px; height:70px; } .inventory-count { font-size:9px; padding:6px 8px; }
  .inventory-heading { gap:8px; } .inventory-heading .panel-subtitle { max-width:190px; }
  .features { gap:23px; } .feature p { font-size:13px; }
  .detail-intro { gap:16px; } .detail-intro .panel-title { font-size:21px; }
  .detail-intro .project-art { width:58px; height:59px; }
  .project-description { font-size:12px; padding:15px 16px; }
  .download-options { gap:11px; }
  .download-option { min-height:60px; padding:13px 17px; }
  .download-option span { font-size:13px; } .download-option small { font-size:11px; }
}
@media(max-width:370px) {
  .world { padding:0 4%; }
  .world-intro h1 { font-size:28px; } .scene-hotspot { padding:9px; gap:5px; }
  .scene-hotspot small { font-size:6px; }
  .dialog-content { padding:26px 18px; } .contact-row { gap:9px; padding:14px 11px; }
  .about-intro .panel-title { font-size:21px; } .lock-header .wordmark { font-size:18px; }
  .lock-header .brand-cat { width:23px; height:23px; } .lock-header { left:5%; right:5%; }
}
@media(max-height:730px) {
  .clock { font-size:76px; } .clock-group { margin-bottom:21px; }
  .avatar { width:73px; height:73px; } .avatar svg { width:43px; height:43px; }
  .lock-welcome { margin:9px 0 21px; } .lock-name { font-size:23px; }
  .unlock-content { min-height:600px; } .lock-landscape::after { height:590px; }
}
@media(max-height:610px) {
  .lock-screen { overflow-y:auto; } .unlock-content { min-height:610px; }
  .scroll-enter { position:relative; bottom:auto; left:auto; transform:none; margin:-68px auto 0; }
  .lock-corner-note { display:none; }
}
/* A quiet, always-reachable settings drawer. */
.settings-dock { position:fixed; z-index:30; right:18px; bottom:28px; }
body[data-phase="loading"] .settings-dock { visibility:hidden; }
.settings-trigger { width:52px; min-height:62px; display:grid; justify-items:center; align-content:center; gap:4px; border:1px solid #c3cbae; border-radius:17px; background:#fffdf3ed; box-shadow:0 4px 0 #d9dec5a6,0 8px 25px #5b6b3f13; transition:transform .25s,background .25s; }
.settings-trigger .icon { width:23px; height:23px; color:#75855e; transition:transform .5s; }
.settings-trigger span { font-size:9px; letter-spacing:1px; color:#6b7957; }
.settings-trigger:hover { background:#f0f4e3; transform:translateY(-2px); }
.settings-trigger:hover .icon { transform:rotate(35deg); }
.settings-trigger[aria-expanded="true"] { background:#e4ecd3; }
.settings-panel { position:absolute; right:0; bottom:78px; width:300px; max-height:calc(100dvh - 130px); overflow-y:auto; overscroll-behavior:contain; padding:21px; border:1px solid #c8d0b5; border-radius:19px; background:#fffdf5; box-shadow:0 14px 50px #394f3026,0 3px 0 #d5ddbf; animation:window-in .22s var(--ease); }
.settings-panel header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 -6px 17px 0; }
.settings-panel .panel-eyebrow { font-size:8px; margin-bottom:5px; }
.settings-panel h2 { font-size:19px; font-weight:500; letter-spacing:1px; margin:0; }
.settings-row { display:flex; align-items:center; gap:14px; justify-content:space-between; padding:18px 0; border-block:1px solid #e3e7d6; }
.settings-row h3 { font-size:13px; font-weight:500; margin:0 0 7px; }
.settings-row p { font-size:10px; color:#78876a; margin:0; }
.motion-switch { padding:2px; background:none; display:grid; justify-items:center; gap:7px; min-width:62px; min-height:54px; }
.motion-switch #motion-label { font-size:9px; color:#6d7d59; }
.switch-track { display:block; position:relative; width:40px; height:23px; border:1px solid #bdc8a7; border-radius:20px; background:#d7deca; transition:background .25s; }
.switch-track::after { content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#fffdf1; box-shadow:0 1px 3px #35472c25; transition:transform .25s var(--ease); }
.motion-switch[aria-pressed="true"] .switch-track { background:#849a64; border-color:#7c915e; }
.motion-switch[aria-pressed="true"] .switch-track::after { transform:translateX(17px); }
.settings-note { color:#849075; font-size:10px; line-height:1.9; margin:16px 0 0; }
.settings-lock-row { display:flex; align-items:center; gap:14px; padding:17px 0; border-bottom:1px solid #e3e7d6; }
.settings-lock-row p { margin:0; color:#78876a; font-size:11px; line-height:1.7; }
.lock-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:82px; min-height:44px; padding:10px 13px; border:1px solid #bdcba5; border-radius:11px; background:#edf2df; color:#5f7548; font-size:12px; transition:background .2s,transform .2s; }
.lock-button .icon { width:16px; height:16px; }
.lock-button:hover:not(:disabled) { background:#dfe9ca; transform:translateY(-1px); }
.lock-button:disabled { opacity:.55; }
.world.is-locking { opacity:0; transform:translateY(12px); pointer-events:none; }
body[data-phase="locking"] .settings-dock,body[data-phase="entering"] .settings-dock,body[data-phase="typing"] .settings-dock { visibility:hidden; }
.cat-tail { transform-origin:0% 0%; }
.cat-ear-far { animation-delay:-14s; animation-duration:28s; }
.cat-paw-far { animation-delay:-6s; animation-duration:19s; }
.plant-sway-late { animation-delay:-4.4s; }
.curtain-sway-late { animation-delay:-3s; }
@media(max-width:700px) {
  .world-header { min-height:79px; flex-wrap:nowrap; padding:10px 0; gap:12px; }
  .world-header>.wordmark { margin-right:auto; }
  .header-nav { order:1; width:auto; gap:14px; margin:0; }
  .header-nav button { font-size:10px; }
  .world .wordmark { font-size:20px; gap:7px; }
  .world .brand-cat { width:24px; height:24px; }
  .settings-dock { right:12px; bottom:max(18px,env(safe-area-inset-bottom)); }
  .settings-trigger { width:45px; min-height:55px; border-radius:14px; }
  .settings-panel { bottom:70px; width:min(300px,calc(100vw - 24px)); }
}
@media(max-width:370px) { .world .wordmark { font-size:18px; } .header-nav { gap:9px; } }
/* User choice controls motion; the media fallback covers the pre-script frame. */
@media(min-width:701px) and (max-width:900px) {
  .courtyard { max-width:660px; }
  .world-intro { padding:30px 4px 26px; }
  .little-stamp { display:none; }
  .scene { display:flex; flex-direction:column; }
  .scene-half { width:100%; }
  .garden-half { margin-top:-30px; }
  .scene-atmosphere { background:linear-gradient(150deg,transparent 33%,#e6edda 65%,#d8e3c8); }
  .scene-ground { height:34%; }
  .scene-label { bottom:1.2%; }
  .about-hotspot { left:11%; top:44%; }
  .projects-hotspot { left:17%; top:52%; }
  .scene-hotspot { padding:13px 15px; gap:11px; }
  .scene-hotspot strong { font-size:17px; }
  .scene-hotspot small { font-size:8px; }
}
body[data-motion="off"] *,body[data-motion="off"] *::before,body[data-motion="off"] *::after { animation:none!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
body[data-motion="off"] .lock-screen.is-leaving { transform:none; }
body[data-motion="off"] .lock-screen,body[data-motion="off"] .world { transition:none; }
body[data-motion="off"] .content-dialog::backdrop { backdrop-filter:none; animation:none; }
body[data-motion="off"] .scene-atmosphere { transform:none; }
@media(prefers-reduced-motion:reduce) {
  body:not([data-motion="on"]) *,body:not([data-motion="on"]) *::before,body:not([data-motion="on"]) *::after { animation:none!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}