/* ================================================================
   自习室 · 视觉系统与动态场景
   动画只使用 transform / opacity，尽量交给 GPU，减少页面重绘。
   ================================================================ */
:root {
  --text: #f4f3ec;
  --muted: rgba(244, 243, 236, .62);
  --panel: rgba(24, 30, 28, .52);
  --panel-strong: rgba(28, 35, 32, .78);
  --panel-soft: rgba(255, 255, 255, .08);
  --border: rgba(255, 255, 255, .17);
  --shadow: 0 24px 80px rgba(4, 10, 8, .28);
  --accent: #c8a77d;
  --accent-deep: #987854;
  --good: #99b6a0;
  color-scheme: dark;
}

html[data-theme="light"] {
  --text: #29342f;
  --muted: rgba(41, 52, 47, .62);
  --panel: rgba(243, 242, 230, .58);
  --panel-strong: rgba(248, 247, 237, .86);
  --panel-soft: rgba(255, 255, 255, .42);
  --border: rgba(255, 255, 255, .56);
  --shadow: 0 24px 80px rgba(47, 63, 53, .18);
  --accent: #9b7750;
  --accent-deep: #75583a;
  --good: #597b63;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: #17201d;
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 86%, white);
  outline-offset: 3px;
}
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* 通用磨砂玻璃 */
.glass-card {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(24px) saturate(115%);
  -webkit-backdrop-filter: blur(24px) saturate(115%);
}

/* ======================== 动态背景总舞台 ======================== */
#sceneStage { position: fixed; inset: 0; isolation: isolate; overflow: hidden; }
.scene-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.018);transition:opacity 1.2s linear,transform 7s ease;will-change:opacity,transform;background:#17201d;backface-visibility:hidden}
.scene-video.active{opacity:1;transform:scale(1.035)}
.video-fallback{position:absolute;inset:0;z-index:-1;background:linear-gradient(145deg,#31483e,#172620)}
.video-shade{position:absolute;inset:0;z-index:80;pointer-events:none;background:linear-gradient(90deg,rgba(7,14,11,.26),transparent 42%,rgba(7,13,11,.12)),linear-gradient(180deg,rgba(5,12,9,.12),transparent 45%,rgba(4,9,7,.23))}
.scene-loading{position:absolute;z-index:95;left:50%;bottom:30px;display:flex;align-items:center;gap:8px;transform:translateX(-50%);padding:7px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(14,23,19,.48);backdrop-filter:blur(12px);color:rgba(255,255,255,.74);font-size:9px;letter-spacing:.08em}
.scene-loading i{width:6px;height:6px;border-radius:50%;background:#d8c59c;box-shadow:0 0 0 0 rgba(216,197,156,.5);animation:pulse 1.4s infinite}
.video-credit{position:fixed;z-index:12;left:18px;bottom:14px;padding:5px 8px;border-radius:8px;background:rgba(9,16,13,.22);color:rgba(255,255,255,.46);font-size:8px;text-decoration:none;backdrop-filter:blur(8px);transition:.2s}.video-credit:hover{color:rgba(255,255,255,.82);background:rgba(9,16,13,.42)}
.scene {
  position: absolute; inset: -2%;
  opacity: 0; visibility: hidden;
  transform: scale(1.025);
  transition: opacity 1.1s ease, visibility 1.1s ease, transform 1.5s ease;
  overflow: hidden;
}
.scene.active { opacity: 1; visibility: visible; transform: scale(1); }
.scene > div { position: absolute; }
.vignette { position: absolute; inset: 0; z-index: 90; pointer-events: none; background: radial-gradient(circle at 50% 45%, transparent 35%, rgba(4,9,8,.22) 105%); }
.scene-grain { position: absolute; inset: -50%; z-index: 91; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); animation: grain 8s steps(8) infinite; }
@keyframes grain { 0%,100%{transform:translate(0)} 20%{transform:translate(2%, -1%)} 40%{transform:translate(-1%, 2%)} 60%{transform:translate(1%, 1%)} 80%{transform:translate(-2%, -1%)} }

/* 林间窗边 */
.scene-forest { background: linear-gradient(145deg, #23362e 0%, #59725d 48%, #9daa83 100%); }
.forest-sky { inset: 0; background: radial-gradient(circle at 73% 18%, rgba(237,224,172,.75), transparent 23%), linear-gradient(180deg, #9eae8f, #506d5b 67%); animation: breatheLight 9s ease-in-out infinite; }
.forest-far { left:-5%; right:-5%; bottom:15%; height:64%; opacity:.55; background: repeating-linear-gradient(88deg, transparent 0 7%, #314b3d 7.2% 8.2%, transparent 8.4% 14%), radial-gradient(ellipse at bottom, #506b51 0 55%, transparent 56%); filter: blur(2px); }
.forest-near { left:-4%; right:-4%; bottom:-8%; height:50%; background: radial-gradient(ellipse at 10% 100%, #172d25 0 28%, transparent 29%), radial-gradient(ellipse at 34% 100%, #294436 0 36%, transparent 37%), radial-gradient(ellipse at 73% 100%, #1b352b 0 39%, transparent 40%), radial-gradient(ellipse at 96% 100%, #12271f 0 32%, transparent 33%); animation: forestSway 8s ease-in-out infinite; transform-origin: bottom; }
.light-beam { top:-30%; width:18%; height:120%; background:linear-gradient(180deg, rgba(255,241,183,.22), transparent); filter:blur(18px); transform:rotate(22deg); animation:breatheLight 8s ease-in-out infinite; }
.beam-one { right:28%; }.beam-two { right:8%; animation-delay:-4s; }
.window-frame { inset: 7% 6% 17% 12%; z-index:6; border:clamp(11px,1.4vw,22px) solid #5c4939; box-shadow:inset 0 0 0 2px rgba(229,214,184,.32), 0 20px 60px rgba(8,17,13,.28); }
.window-frame::before,.window-frame::after { content:"";position:absolute;background:#5c4939;z-index:2;box-shadow:0 0 0 1px rgba(255,255,255,.08); }
.window-frame::before{width:clamp(9px,1vw,16px);top:0;bottom:0;left:50%;}.window-frame::after{height:clamp(9px,1vw,16px);left:0;right:0;top:54%;}
.curtain { top:-2%; bottom:5%; z-index:8; width:21%; background:linear-gradient(90deg, #d2c3a6, #9b8e77 55%, #d8ccb3); opacity:.88; filter:drop-shadow(0 10px 20px rgba(0,0,0,.2)); }
.curtain::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 18%, rgba(62,55,45,.12) 20%, transparent 25%); }
.curtain-left { left:-6%; border-radius:0 0 80% 0; transform-origin:top left; animation:curtainMove 7s ease-in-out infinite; }
.curtain-right { right:-6%; border-radius:0 0 0 80%; transform-origin:top right; animation:curtainMove 7s ease-in-out -3s infinite reverse; }
.desk { left:-3%; right:-3%; bottom:-3%; height:22%; z-index:10; background:linear-gradient(180deg,#795e43,#3c2d22); box-shadow:0 -6px 30px rgba(11,14,11,.35); }
.desk .book,.deep-desk .book { left:39%; top:-13%; width:23%; height:20%; border-radius:5px 5px 2px 2px; background:#d9d0b8; box-shadow:0 4px #8d755b, 0 14px 25px rgba(0,0,0,.2); }
.mug { right:22%; top:-31%; width:52px; height:62px; border-radius:5px 5px 16px 16px; background:#718274; box-shadow:inset 0 5px rgba(245,236,216,.25); }
.mug::after{content:"";position:absolute;right:-17px;top:12px;width:24px;height:30px;border:6px solid #718274;border-left:0;border-radius:0 20px 20px 0;}
.floating-leaf,.petal { z-index:7;width:12px;height:7px;border-radius:100% 0 100% 0;background:#9faf70;animation:leafFloat 12s linear infinite; }
.l1{left:26%;top:8%}.l2{left:64%;top:16%;animation-delay:-4s}.l3{left:82%;top:34%;animation-delay:-8s}
@keyframes breatheLight { 50%{opacity:.68;filter:saturate(1.1)} }
@keyframes forestSway { 50%{transform:skewX(1deg) scaleX(1.01)} }
@keyframes curtainMove { 50%{transform:skewX(1.8deg) translateX(1.5%)} }
@keyframes leafFloat { from{transform:translate3d(0,-15vh,0) rotate(0)} to{transform:translate3d(12vw,105vh,0) rotate(540deg)} }

/* 海边小屋 */
.scene-beach { background:linear-gradient(180deg,#a8c8ca 0 53%,#4d8489 54%,#183f48 100%); }
.scene-beach::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(255,228,166,.58),transparent 27%);animation:breatheLight 10s ease-in-out infinite;}
.beach-sun{right:20%;top:17%;width:9vw;height:9vw;min-width:80px;min-height:80px;border-radius:50%;background:#f1d59d;box-shadow:0 0 70px rgba(244,213,154,.65);}
.ocean{left:-8%;right:-8%;height:34%;bottom:12%;background:repeating-radial-gradient(ellipse at 50% 0,rgba(236,242,221,.35) 0 2px,transparent 3px 38px),linear-gradient(180deg,#578f94,#214f59);transform-origin:center;}
.ocean-back{bottom:25%;opacity:.7;animation:oceanMove 8s ease-in-out infinite}.ocean-front{bottom:3%;animation:oceanMove 6s ease-in-out -2s infinite reverse}
.beach-window{inset:4% 8% 17%;z-index:6;border:clamp(12px,1.7vw,25px) solid #e0d6be;box-shadow:inset 0 0 0 2px #908771,0 20px 80px rgba(10,32,35,.22)}
.beach-window::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:14px;background:#e0d6be}.beach-window::after{content:"";position:absolute;top:55%;left:0;right:0;height:14px;background:#e0d6be}
.linen{top:-3%;bottom:4%;width:23%;z-index:8;background:linear-gradient(90deg,#eee8d5,#bfb8a3,#e9e3d1);opacity:.82}
.linen-left{left:-8%;border-radius:0 0 80% 0;animation:curtainMove 6s ease-in-out infinite}.linen-right{right:-8%;border-radius:0 0 0 80%;animation:curtainMove 6s ease-in-out -3s infinite reverse}
.beach-table{left:-2%;right:-2%;bottom:-4%;height:20%;z-index:10;background:linear-gradient(180deg,#c8ae83,#766047);box-shadow:0 -6px 30px rgba(12,25,24,.25)}
.glass-cup{left:39%;top:-36%;width:45px;height:67px;border:3px solid rgba(231,243,231,.55);border-radius:4px 4px 12px 12px;background:linear-gradient(transparent 40%,rgba(196,224,211,.35) 41%)}
.small-plant{right:22%;top:-55%;width:70px;height:70px;border-radius:70% 0 70% 0;background:#55775e;transform:rotate(-16deg);box-shadow:-25px 14px #68876a,20px 16px #456c55}
.gull{z-index:5;color:rgba(34,71,73,.55);font-size:36px;animation:gullFly 18s linear infinite}.g1{top:26%;left:-5%}.g2{top:37%;left:-12%;animation-delay:-8s;font-size:25px}
@keyframes oceanMove{50%{transform:translateX(3%) translateY(1.5%) scaleY(1.06)}}
@keyframes gullFly{to{transform:translateX(115vw) translateY(-8vh)}}

/* 雨夜书房 */
.scene-rain{background:radial-gradient(circle at 42% 52%,#354758,#111c29 58%,#0a111a)}
.city-glow{inset:0;background:linear-gradient(90deg,transparent 15%,rgba(122,151,164,.13) 40%,transparent 75%);animation:breatheLight 7s ease-in-out infinite}
.rain-window{inset:5% 8% 18%;border:clamp(12px,1.6vw,24px) solid #2a2927;z-index:5;box-shadow:inset 0 0 80px rgba(8,13,19,.28)}
.rain-window::before,.rain-window::after{content:"";position:absolute;background:#292928}.rain-window::before{left:50%;top:0;bottom:0;width:15px}.rain-window::after{left:0;right:0;top:55%;height:15px}
.rainfall{inset:-30% -20%;z-index:4;opacity:.43;background:repeating-linear-gradient(104deg,transparent 0 18px,rgba(201,222,232,.75) 19px,transparent 20px 42px);animation:rainFall .8s linear infinite}
.rain-b{opacity:.22;transform:scale(1.4);animation-duration:1.25s;animation-delay:-.4s}
.night-desk{left:-2%;right:-2%;bottom:-3%;height:25%;z-index:9;background:linear-gradient(180deg,#4b382d,#221b18);box-shadow:0 -8px 40px rgba(0,0,0,.45)}
.desk-lamp{left:22%;top:-86%;width:13px;height:100%;background:#776c5a;transform:rotate(-9deg);transform-origin:bottom}
.desk-lamp::before{content:"";position:absolute;left:-32px;top:-7px;width:78px;height:42px;background:#6b6355;clip-path:polygon(22% 0,78% 0,100% 100%,0 100%)}
.desk-lamp::after{content:"";position:absolute;left:-95px;top:25px;width:210px;height:150px;background:radial-gradient(ellipse at 50% 0,rgba(245,205,127,.48),transparent 68%);transform:rotate(9deg)}
.open-book{left:44%;top:-11%;width:25%;height:20%;background:linear-gradient(100deg,#d6ccb2 0 48%,#9d8e77 49% 51%,#dbd0b7 52%);border-radius:50% 8px 8px 50%;box-shadow:0 8px 25px rgba(0,0,0,.25)}
.tea-steam{right:23%;top:-46%;width:38px;height:55px;border-bottom:50px solid #61706b;border-left:4px solid transparent;border-right:4px solid transparent;border-radius:0 0 10px 10px}
.tea-steam::before{content:"≈";position:absolute;top:-40px;left:7px;color:rgba(225,230,220,.5);font-size:26px;animation:steam 3s ease-in-out infinite}
.window-reflection{right:8%;top:12%;width:21%;height:35%;z-index:6;background:linear-gradient(115deg,transparent,rgba(205,219,225,.12),transparent);filter:blur(7px);animation:breatheLight 4s ease-in-out infinite}
@keyframes rainFall{to{transform:translate3d(7%,28%,0)}}
@keyframes steam{50%{transform:translateY(-10px);opacity:.2}}

/* 深海光景 */
.scene-deep{background:radial-gradient(circle at 50% 8%,#347a86,#0d4656 45%,#061d2b 100%)}
.sea-ray{top:-25%;width:18%;height:100%;background:linear-gradient(180deg,rgba(141,222,216,.24),transparent);filter:blur(16px);transform:rotate(13deg);animation:breatheLight 8s ease-in-out infinite}.ray-a{left:23%}.ray-b{right:18%;animation-delay:-4s}
.sea-floor{left:-5%;right:-5%;bottom:-4%;height:30%;background:radial-gradient(ellipse at 50% 100%,#123e42 0 48%,transparent 49%),radial-gradient(ellipse at 15% 100%,#0b3337 0 34%,transparent 35%),linear-gradient(transparent,#092b32);}
.subsea-window{inset:5% 7% 16%;z-index:6;border:clamp(15px,2vw,30px) solid #253c40;border-radius:38px;box-shadow:inset 0 0 0 4px rgba(135,174,166,.15),inset 0 0 100px rgba(3,20,26,.5),0 25px 60px rgba(0,0,0,.25)}
.jellyfish{z-index:4;width:68px;height:44px;border-radius:50% 50% 14% 14%;background:radial-gradient(circle at 50% 20%,rgba(214,238,222,.65),rgba(106,168,160,.22));box-shadow:0 0 25px rgba(137,212,201,.22);animation:jellyFloat 9s ease-in-out infinite}
.jellyfish i{position:absolute;top:36px;width:2px;height:45px;background:rgba(183,226,214,.4);border-radius:50%;transform-origin:top}.jellyfish i:nth-child(1){left:17px}.jellyfish i:nth-child(2){left:34px;height:56px}.jellyfish i:nth-child(3){left:51px}
.jelly-a{left:23%;top:24%}.jelly-b{right:20%;top:38%;transform:scale(.7);animation-delay:-4s}
.fish-school{z-index:4;color:rgba(165,214,203,.47);letter-spacing:9px;animation:fishSwim 16s linear infinite}.fish-a{left:-12%;top:34%;font-size:28px}.fish-b{left:-20%;top:55%;font-size:19px;animation-delay:-8s}
.bubble{z-index:3;width:12px;height:12px;border:1px solid rgba(201,237,227,.5);border-radius:50%;bottom:-5%;animation:bubbleUp 11s linear infinite}.b1{left:18%}.b2{left:38%;width:7px;height:7px;animation-delay:-4s}.b3{right:28%;width:18px;height:18px;animation-delay:-7s}.b4{right:11%;animation-delay:-2s}
.deep-desk{left:-2%;right:-2%;bottom:-4%;height:20%;z-index:9;background:linear-gradient(180deg,#384b43,#182c29);box-shadow:0 -8px 40px rgba(0,0,0,.36)}
@keyframes jellyFloat{50%{transform:translateY(-24px) rotate(2deg)}}
@keyframes fishSwim{to{transform:translateX(125vw)}}
@keyframes bubbleUp{to{transform:translateY(-115vh) translateX(30px);opacity:0}}

/* 中式园林书屋 */
.scene-garden{background:linear-gradient(180deg,#93a99b,#c8c2a6 58%,#61766a)}
.garden-sky{inset:0;background:radial-gradient(circle at 68% 18%,rgba(241,219,164,.67),transparent 18%);animation:breatheLight 9s ease-in-out infinite}
.garden-wall{left:7%;right:7%;top:8%;bottom:16%;background:rgba(218,215,194,.72);border:18px solid #4d5248;box-shadow:0 25px 55px rgba(27,43,35,.24)}
.garden-roof{left:-4%;right:-4%;top:-2%;height:18%;background:repeating-linear-gradient(95deg,#263c35 0 35px,#385047 36px 68px);clip-path:polygon(0 0,100% 0,93% 100%,7% 100%);z-index:7}
.moon-gate{z-index:4;left:25%;top:15%;width:49%;height:61%;border:clamp(13px,1.6vw,24px) solid #ece8d8;border-radius:50% 50% 46% 46%;box-shadow:inset 0 0 0 2px #74786b;background:linear-gradient(180deg,rgba(110,145,124,.12),rgba(56,96,74,.18))}
.bamboo{z-index:5;bottom:14%;width:18px;height:72%;background:repeating-linear-gradient(180deg,#506e55 0 14%,#2f553d 14% 16%,#63805f 16% 30%);transform-origin:bottom;animation:bambooSway 8s ease-in-out infinite}
.bamboo::after{content:"";position:absolute;inset:4% -55px 12% -45px;background:repeating-radial-gradient(ellipse at center,#4c7252 0 9px,transparent 10px 31px);opacity:.8}
.bamboo-a{left:14%;transform:rotate(-3deg)}.bamboo-b{right:15%;transform:rotate(4deg);animation-delay:-4s}
.garden-pond{left:18%;right:18%;bottom:12%;height:16%;z-index:3;border-radius:50%;background:repeating-radial-gradient(ellipse at center,rgba(217,225,198,.25) 0 2px,transparent 3px 28px),#4f756b;animation:oceanMove 9s ease-in-out infinite}
.garden-desk{left:-2%;right:-2%;bottom:-4%;height:22%;z-index:9;background:linear-gradient(180deg,#73523d,#3d2c24)}
.paper{left:40%;top:-10%;width:28%;height:20%;background:#dfdbc8;transform:rotate(-2deg);box-shadow:0 7px 20px rgba(0,0,0,.2)}
.inkstone{left:33%;top:-20%;width:55px;height:30px;border-radius:45%;background:#28302c;box-shadow:inset 0 5px rgba(255,255,255,.08)}
.p1{left:31%;top:5%;background:#d6b1a2}.p2{left:69%;top:14%;background:#e1b6a8;animation-delay:-5s}.p3{left:83%;top:29%;background:#d0a492;animation-delay:-9s}
@keyframes bambooSway{50%{transform:rotate(1deg)}}

/* 暮色阁楼 */
.scene-attic{background:linear-gradient(180deg,#8f6c70,#c38d71 43%,#5a4138 100%)}
.attic-sky{inset:0;background:radial-gradient(circle at 68% 38%,rgba(239,189,113,.62),transparent 26%);animation:breatheLight 8s ease-in-out infinite}
.attic-roof{top:-17%;width:62%;height:70%;z-index:6;background:repeating-linear-gradient(100deg,#382c2a 0 40px,#493631 41px 82px);box-shadow:0 20px 50px rgba(20,14,14,.24)}
.roof-left{left:-17%;transform:rotate(30deg)}.roof-right{right:-17%;transform:rotate(-30deg)}
.attic-window{left:24%;right:24%;top:16%;height:48%;z-index:4;border:20px solid #514039;border-radius:40% 40% 2px 2px;box-shadow:inset 0 0 80px rgba(92,54,53,.2)}
.attic-window::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:13px;background:#514039}.attic-window::after{content:"";position:absolute;left:0;right:0;top:50%;height:13px;background:#514039}
.sunset-orb{right:31%;top:36%;width:9vw;height:9vw;min-width:75px;min-height:75px;border-radius:50%;background:#e4aa72;box-shadow:0 0 70px rgba(237,169,104,.55)}
.attic-beam{left:9%;right:9%;top:10%;height:23px;z-index:7;background:#392d2a;transform:rotate(-1deg);box-shadow:0 10px 20px rgba(0,0,0,.22)}
.attic-desk{left:-2%;right:-2%;bottom:-3%;height:25%;z-index:9;background:linear-gradient(180deg,#65483b,#33241f)}
.lamp-glow{left:22%;top:-90%;width:145px;height:150px;background:radial-gradient(circle,rgba(240,190,111,.62),rgba(224,144,78,.16) 45%,transparent 70%);animation:breatheLight 4s ease-in-out infinite}
.lamp-glow::after{content:"";position:absolute;left:53px;top:40px;width:42px;height:55px;background:#d6a36c;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.book-stack{right:25%;top:-25%;width:120px;height:23px;background:#8d6e55;box-shadow:5px 25px #41504a,-8px 49px #a0815e}
.dust{z-index:8;width:4px;height:4px;border-radius:50%;background:rgba(248,219,167,.7);box-shadow:0 0 7px rgba(248,219,167,.6);animation:dustFloat 10s ease-in-out infinite}.d1{left:31%;top:27%}.d2{left:58%;top:18%;animation-delay:-3s}.d3{left:72%;top:48%;animation-delay:-6s}.d4{left:42%;top:59%;animation-delay:-8s}
@keyframes dustFloat{50%{transform:translate(30px,-24px);opacity:.2}}

/* ======================== 品牌和专注 HUD ======================== */
.brand-bar{display:flex;align-items:center;gap:12px;text-shadow:0 2px 14px rgba(0,0,0,.26)}
.brand-mark{display:grid;place-items:center;width:43px;height:43px;border:1px solid rgba(255,255,255,.3);border-radius:15px;background:rgba(21,30,26,.28);backdrop-filter:blur(12px);font-family:serif;font-size:20px;color:#f0dfbd}
.brand-bar h1{margin:0;font-family:"Songti SC","STSong",serif;font-size:20px;letter-spacing:.18em;font-weight:600;color:#fbf7ed}
.brand-bar p{display:flex;align-items:center;gap:7px;margin:3px 0 0;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.68)}
.status-dot{width:3px;height:3px;border-radius:50%;background:#dbc18e}
.focus-hud{position:fixed;z-index:15;left:50%;top:50%;transform:translate(-50%,-48%);text-align:center;color:#fff;text-shadow:0 3px 20px rgba(0,0,0,.32);pointer-events:none;animation:hudIn .7s ease}
.focus-hud p{margin:0 0 4px;font-size:12px;letter-spacing:.28em;opacity:.74}.focus-hud strong{display:block;font:300 clamp(56px,9vw,108px)/1 "Avenir Next",sans-serif;letter-spacing:.03em}.focus-hud blockquote{margin:22px 0 0;font:400 14px/1.8 "Songti SC",serif;letter-spacing:.12em;opacity:.8}
@keyframes hudIn{from{opacity:0;transform:translate(-50%,-43%)}}

/* ======================== 场景选择弹窗 ======================== */
.modal-layer{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:rgba(10,17,14,.13);transition:opacity .45s ease,visibility .45s ease}
.modal-layer.closed{opacity:0;visibility:hidden;pointer-events:none}
.scene-card{width:min(880px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:auto;border-radius:32px;padding:clamp(24px,4vw,42px);text-align:center;scrollbar-width:none}
.scene-card::-webkit-scrollbar{display:none}.eyebrow{margin-bottom:8px;font-size:9px;letter-spacing:.42em;color:var(--muted)}
.scene-card h2{margin:0;font-family:"Songti SC","STSong",serif;font-weight:500;font-size:clamp(27px,4vw,38px);letter-spacing:.08em}.modal-copy{margin:8px 0 24px;font-size:12px;color:var(--muted);letter-spacing:.08em}
.scene-carousel{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:12px}.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.scene-thumb{position:relative;overflow:hidden;aspect-ratio:1.42;border:1px solid transparent;border-radius:18px;padding:0;cursor:pointer;background:#44564f;color:#fff;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.scene-thumb:hover{transform:translateY(-3px)}.scene-thumb.selected{border-color:#ead9b8;box-shadow:0 0 0 3px rgba(224,205,169,.19),0 12px 30px rgba(0,0,0,.18)}
.quality-badge{position:absolute;z-index:4;right:8px;top:8px;padding:3px 6px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(8,14,11,.48);backdrop-filter:blur(8px);color:rgba(255,255,255,.9);font:700 7px/1 "Avenir Next",sans-serif;letter-spacing:.08em}
.thumb-art{position:absolute;inset:0;transition:transform .5s ease}.scene-thumb:hover .thumb-art{transform:scale(1.05)}
.thumb-art.real-thumb{background-position:center;background-size:cover;filter:saturate(.82) brightness(.86)}
.thumb-art.real-thumb::before{inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,11,8,.42))}
.thumb-art::before,.thumb-art::after{content:"";position:absolute}.thumb-forest{background:radial-gradient(circle at 70% 22%,#ddcd91,transparent 20%),linear-gradient(155deg,#263d33,#78906c)}.thumb-forest::before{inset:10% 8% 12%;border:9px solid #65513d}.thumb-forest::after{left:0;right:0;bottom:0;height:28%;background:#5a4433}
.thumb-beach{background:linear-gradient(#a7ced0 0 55%,#3f7b82 56%)}.thumb-beach::before{inset:8% 7% 14%;border:9px solid #e6dbc5}.thumb-beach::after{left:0;right:0;bottom:0;height:22%;background:#a88b65}
.thumb-rain{background:repeating-linear-gradient(105deg,transparent 0 13px,rgba(200,224,230,.35) 14px,transparent 15px 30px),linear-gradient(#1a2939,#101821)}.thumb-rain::before{left:13%;bottom:18%;width:42px;height:80px;background:radial-gradient(circle at 50% 30%,#e0b579,transparent 45%)}.thumb-rain::after{left:0;right:0;bottom:0;height:24%;background:#30231f}
.thumb-deep{background:radial-gradient(circle at 50% 0,#438b91,#08293a)}.thumb-deep::before{left:23%;top:32%;width:37px;height:27px;border-radius:50% 50% 10% 10%;background:rgba(178,225,214,.5);box-shadow:100px 37px rgba(178,225,214,.3)}.thumb-deep::after{left:0;right:0;bottom:0;height:23%;background:#163c3c}
.thumb-garden{background:linear-gradient(#a2b6a8,#637a69)}.thumb-garden::before{inset:10% 13% 13%;border:10px solid #e4e0d1;border-radius:50% 50% 40% 40%}.thumb-garden::after{left:0;right:0;top:0;height:20%;background:repeating-linear-gradient(95deg,#2f443b 0 22px,#435c50 23px 43px)}
.thumb-attic{background:radial-gradient(circle at 70% 50%,#dda873 0 11%,transparent 12%),linear-gradient(#9a7375,#5d4338)}.thumb-attic::before{inset:16% 21% 14%;border:10px solid #554039;border-radius:45% 45% 0 0}.thumb-attic::after{left:0;right:0;bottom:0;height:25%;background:#4a342c}
.thumb-label{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:25px 10px 9px;background:linear-gradient(transparent,rgba(5,10,8,.68));text-align:left}.thumb-label b{display:block;font:500 13px/1.4 "Songti SC",serif;letter-spacing:.08em}.thumb-label span{display:block;font-size:9px;opacity:.68;margin-top:1px}
.round-arrow{width:36px;height:36px;border:1px solid var(--border);border-radius:50%;background:var(--panel-soft);color:var(--text);cursor:pointer;transition:.2s}.round-arrow:hover:not(:disabled){background:rgba(255,255,255,.18);transform:scale(1.06)}.round-arrow:disabled{opacity:.25;cursor:default}
.scene-dots{display:flex;justify-content:center;gap:7px;margin:16px 0 18px}.scene-dots button{width:5px;height:5px;padding:0;border:0;border-radius:9px;background:var(--muted);opacity:.45;cursor:pointer;transition:.25s}.scene-dots button.active{width:22px;opacity:1;background:var(--accent)}
.plan-picker{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 20px;padding:0;border:0}.plan-picker legend{position:absolute;clip:rect(0,0,0,0)}
.plan-option{display:flex;align-items:center;padding:10px 16px;border:1px solid transparent;border-radius:13px;background:var(--panel-soft);color:var(--muted);cursor:pointer;transition:.2s}.plan-option.active{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--text)}.plan-option input{position:absolute;opacity:0}.plan-option span{font-size:11px}.plan-option b{font-size:14px}.plan-option i{font-style:normal;opacity:.66}
.primary-button{display:flex;align-items:center;justify-content:center;gap:30px;width:min(300px,100%);margin:auto;padding:14px 22px;border:1px solid rgba(255,255,255,.2);border-radius:16px;background:linear-gradient(135deg,#b69064,#8f6f50);box-shadow:0 12px 28px rgba(39,28,19,.23);color:#fff;font-weight:600;font-size:13px;letter-spacing:.1em;cursor:pointer;transition:.25s}.primary-button:hover{transform:translateY(-2px);filter:brightness(1.08)}.primary-button i{font-style:normal;font-size:18px;font-weight:300}.audio-note{margin:10px 0 0;font-size:9px;color:var(--muted)}

/* ======================== 右侧工具栏 ======================== */
.toolbar{position:fixed;z-index:50;right:max(16px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;padding:7px;border-radius:22px}
.tool-button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:51px;border:0;border-radius:15px;background:transparent;color:var(--muted);cursor:pointer;transition:.2s}.tool-button:hover,.tool-button.active{background:var(--panel-soft);color:var(--text)}.tool-button.is-on::after{content:"";position:absolute;right:8px;top:8px;width:4px;height:4px;border-radius:50%;background:#b9d1b7;box-shadow:0 0 7px #b9d1b7}.tool-icon{height:22px;font:400 19px/1 "Avenir Next",sans-serif}.tool-button small{font-size:8px;letter-spacing:.05em}
.ai-tool-icon{display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.04em}
.ai-float-button{position:fixed;z-index:50;left:max(20px,env(safe-area-inset-left));bottom:max(70px,calc(env(safe-area-inset-bottom) + 70px));display:flex;flex-direction:column;align-items:center;justify-content:center;width:54px;height:58px;border-radius:18px;color:var(--text);cursor:pointer;transition:.2s}.ai-float-button:hover,.ai-float-button.active{background:var(--panel-strong);transform:scale(1.04)}.ai-float-button .ai-tool-icon{width:24px;height:24px;border-radius:8px;background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent);font-size:9px}.ai-float-button small{margin-top:3px;color:var(--muted);font-size:8px}

/* ======================== 侧边控制面板 ======================== */
.control-panel{position:fixed;z-index:49;right:88px;top:50%;width:284px;padding:20px;border-radius:23px;opacity:0;visibility:hidden;pointer-events:none;transform:translate(12px,-50%) scale(.98);transition:.24s ease;color:var(--text)}
.control-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,-50%) scale(1)}.compact-panel{width:270px}.todo-panel,.music-panel{width:330px;max-height:min(560px,78vh);display:flex;flex-direction:column}
.ai-panel{left:max(20px,env(safe-area-inset-left));right:auto;width:min(380px,calc(100vw - 120px));height:min(620px,78vh);display:flex;flex-direction:column;transform:translate(-12px,-50%) scale(.98)}
.ai-panel.open{transform:translate(0,-50%) scale(1)}
.ai-heading-actions{display:flex;gap:6px}.ai-close{width:27px;font-size:15px;line-height:1}
.ai-messages{display:flex;flex:1;flex-direction:column;gap:10px;min-height:160px;margin:16px -5px 12px 0;padding-right:5px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.ai-message{max-width:88%;align-self:flex-start}.ai-message.user{align-self:flex-end}.ai-message>span{display:block;margin:0 0 4px 4px;color:var(--muted);font-size:8px}.ai-message p{margin:0;padding:10px 12px;border:1px solid var(--border);border-radius:5px 14px 14px 14px;background:var(--panel-soft);font-size:11px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.ai-message.user p{border-color:transparent;border-radius:14px 5px 14px 14px;background:#8c765d;color:#fff}.ai-message.loading p{animation:aiThinking 1.2s ease-in-out infinite alternate}
.ai-prompts{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.ai-prompts::-webkit-scrollbar{display:none}.ai-prompts button{flex:0 0 auto;padding:6px 9px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--muted);font-size:8px;cursor:pointer}.ai-prompts button:hover{background:var(--panel-soft);color:var(--text)}
.ai-form{display:grid;grid-template-columns:1fr 58px;gap:7px;margin-top:10px}.ai-form textarea{min-width:0;resize:none;padding:10px 11px;border:1px solid var(--border);border-radius:12px;background:var(--panel-soft);color:var(--text);font:11px/1.55 inherit}.ai-form textarea::placeholder{color:var(--muted)}.ai-form button{border:0;border-radius:12px;background:#8c765d;color:#fff;font-size:10px;cursor:pointer}.ai-form button:disabled{cursor:wait;opacity:.55}.ai-privacy{margin:8px 0 0;color:var(--muted);font-size:7px;line-height:1.5}
.quick-exit-focus{position:fixed;z-index:52;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;color:var(--text);font-size:9px;letter-spacing:.03em;cursor:pointer;animation:quickExitIn .35s ease}.quick-exit-focus span{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--panel-soft);font-size:13px}.quick-exit-focus:hover{background:var(--panel-strong)}
@keyframes aiThinking{to{opacity:.55}}@keyframes quickExitIn{from{opacity:0;transform:translateY(8px)}}
.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.panel-heading span{font-size:13px;font-weight:600;letter-spacing:.06em}.panel-heading p{margin:3px 0 0;font-size:9px;color:var(--muted)}.soft-badge{padding:5px 8px;border-radius:8px;background:var(--panel-soft);font-size:8px!important;color:var(--muted);letter-spacing:.09em}
.timer-display{margin:24px 0 20px;text-align:center;font:300 48px/1 "Avenir Next",sans-serif;letter-spacing:.03em}.preset-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;border-radius:13px;background:rgba(0,0,0,.11)}
.preset-button{padding:8px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:11px;cursor:pointer}.preset-button.active{background:var(--panel-soft);box-shadow:0 3px 10px rgba(0,0,0,.12);color:var(--text)}.panel-actions{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:14px}.action-main,.action-quiet,.exit-focus,.mini-button{border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:.2s}.action-main{padding:10px;background:#8c765d;color:#fff;border-color:transparent;font-size:11px}.action-quiet{padding:10px 15px;background:var(--panel-soft);color:var(--text);font-size:11px}.action-main:hover,.action-quiet:hover,.mini-button:hover{filter:brightness(1.1)}.exit-focus{width:100%;margin-top:10px;padding:8px;background:transparent;color:var(--muted);font-size:9px}.exit-focus:hover{color:var(--text);background:var(--panel-soft)}
.mini-calendar{margin-top:14px;padding:10px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--panel-soft) 68%,transparent)}.calendar-heading{display:grid;grid-template-columns:25px 1fr 25px;align-items:center;text-align:center}.calendar-heading strong{font-size:10px;font-weight:600;letter-spacing:.06em}.calendar-heading button,.calendar-today{border:0;background:transparent;color:var(--muted);cursor:pointer}.calendar-heading button{width:25px;height:25px;border-radius:8px;font-size:17px}.calendar-heading button:hover,.calendar-today:hover{background:var(--panel-soft);color:var(--text)}.calendar-week,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.calendar-week{margin:6px 0 2px;color:var(--muted);font-size:7px}.calendar-grid{row-gap:2px}.calendar-grid span{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:7px;color:var(--text);font:500 8px/1 "Avenir Next",sans-serif}.calendar-grid span.outside{opacity:.26}.calendar-grid span.today{background:var(--accent);color:#fff}.calendar-grid span.target{box-shadow:inset 0 0 0 1px #d39b91;color:#e3b2a9}.calendar-grid span.today.target{box-shadow:inset 0 0 0 2px #f3c3b8;color:#fff}.calendar-today{display:block;margin:5px auto -3px;padding:4px 7px;border-radius:7px;font-size:7px}
.range-slider{width:100%;height:4px;margin:26px 0 20px;appearance:none;border-radius:10px;background:linear-gradient(90deg,var(--accent) 45%,rgba(255,255,255,.16) 45%);cursor:pointer}.range-slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border:5px solid var(--accent);border-radius:50%;background:#f5efe5;box-shadow:0 2px 8px rgba(0,0,0,.2)}.range-slider::-moz-range-thumb{width:9px;height:9px;border:5px solid var(--accent);border-radius:50%;background:#f5efe5}.mini-button{padding:5px 9px;background:var(--panel-soft);color:var(--muted);font-size:9px}.sound-layers{display:flex;justify-content:space-between;color:var(--muted);font-size:9px}.sound-layers span{display:flex;align-items:center;gap:6px}.pulse-dot{width:5px;height:5px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 45%,transparent);animation:pulse 2.2s infinite}.pulse-dot.delay{animation-delay:-1.1s}@keyframes pulse{60%{box-shadow:0 0 0 5px transparent}}
.volume-combined{margin-top:13px;padding:10px 11px;border:1px solid var(--border);border-radius:14px;background:var(--panel-soft)}.volume-combined>div:first-child{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;font-size:9px;color:var(--muted)}.volume-combined b{color:var(--text);font:600 10px/1 "Avenir Next",sans-serif}.volume-combined .range-slider{margin:15px 0 13px}
.audio-credit{margin:14px 0 0;padding-top:11px;border-top:1px solid var(--border);color:var(--muted);font-size:8px;line-height:1.65}.audio-credit a{color:var(--text);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:2px}
.track-list{display:flex;flex-direction:column;gap:5px;min-height:0;margin-top:15px;overflow:auto;scrollbar-width:thin}.track-item{display:grid;grid-template-columns:38px 1fr 20px;align-items:center;gap:10px;width:100%;padding:8px;border:1px solid transparent;border-radius:13px;background:transparent;color:var(--text);text-align:left;cursor:pointer;transition:.2s}.track-item:hover{background:var(--panel-soft)}.track-item.active{border-color:color-mix(in srgb,var(--accent) 38%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.track-cover{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:#fff;font:600 9px/1 "Avenir Next",sans-serif;letter-spacing:.05em}.ambient-cover{background:linear-gradient(145deg,#758b76,#405649)}.pop-cover{background:linear-gradient(145deg,#b27f79,#694b65)}.synth-cover{background:linear-gradient(145deg,#4b7493,#564b79)}.happy-cover{background:linear-gradient(145deg,#ca9b60,#a15e5e)}.indie-cover{background:linear-gradient(145deg,#6e8c8a,#466168)}.track-item b{display:block;font-size:10px;font-weight:600}.track-item small{display:block;margin-top:2px;color:var(--muted);font-size:8px}.track-item>i{font-style:normal;color:var(--muted);font-size:9px}.track-item.playing>i{color:var(--good);animation:musicBeat .8s ease-in-out infinite alternate}.music-controls{display:flex;align-items:center;gap:10px;margin-top:13px}.music-controls .action-main{flex:1}.music-controls span{max-width:92px;color:var(--muted);font-size:8px;line-height:1.4}@keyframes musicBeat{to{transform:scale(1.35)}}
.date-label{display:block;margin:18px 0 6px;font-size:9px;color:var(--muted)}.date-input{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:11px;background:var(--panel-soft);color:var(--text);font-size:11px}.countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:14px}.countdown-grid div{padding:10px 3px;border-radius:11px;background:var(--panel-soft);text-align:center}.countdown-grid b{display:block;font:500 19px/1.1 "Avenir Next",sans-serif}.countdown-grid span{font-size:8px;color:var(--muted)}
.todo-form{display:grid;grid-template-columns:1fr 38px;gap:7px;margin:17px 0 12px}.todo-form input{min-width:0;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--panel-soft);color:var(--text);font-size:11px}.todo-form input::placeholder{color:var(--muted)}.todo-form button{border:0;border-radius:12px;background:#8c765d;color:white;font-size:20px;cursor:pointer}.todo-list{list-style:none;min-height:0;max-height:286px;margin:0;padding:0;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.todo-item{display:grid;grid-template-columns:25px 1fr 28px;align-items:center;gap:5px;margin-bottom:5px;padding:8px 6px;border-radius:11px;transition:.2s}.todo-item:hover{background:var(--panel-soft)}.todo-check{display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--muted);border-radius:50%;background:transparent;color:white;font-size:10px;cursor:pointer}.todo-item.done .todo-check{border-color:#78917e;background:#78917e}.todo-text{min-width:0;overflow-wrap:anywhere;font-size:11px;line-height:1.5}.todo-item.done .todo-text{text-decoration:line-through;color:var(--muted)}.todo-delete{width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:var(--muted);opacity:.35;cursor:pointer}.todo-item:hover .todo-delete{opacity:1}.todo-delete:hover{background:rgba(177,92,80,.13);color:#d39b91}.empty-tip{margin:12px 0 2px;text-align:center;font:10px/1.8 "Songti SC",serif;color:var(--muted)}

/* ======================== 提醒弹窗与提示条 ======================== */
.phase-dialog{width:min(370px,calc(100vw - 36px));padding:30px;border-radius:26px;color:var(--text);text-align:center}.phase-dialog::backdrop{background:rgba(5,10,8,.42);backdrop-filter:blur(5px)}.phase-dialog h3{margin:13px 0 7px;font:500 22px "Songti SC",serif}.phase-dialog p{margin:0 0 22px;color:var(--muted);font-size:11px;line-height:1.7}.phase-dialog .primary-button{width:150px;padding:11px}.reminder-ring{display:grid;place-items:center;width:55px;height:55px;margin:auto;border:1px solid color-mix(in srgb,var(--good) 70%,transparent);border-radius:50%;background:color-mix(in srgb,var(--good) 13%,transparent);color:var(--good);font-size:21px}
.toast{position:fixed;z-index:100;left:50%;bottom:25px;max-width:calc(100vw - 30px);padding:10px 16px;border:1px solid var(--border);border-radius:12px;background:var(--panel-strong);box-shadow:var(--shadow);color:var(--text);font-size:10px;opacity:0;visibility:hidden;transform:translate(-50%,10px);transition:.25s;backdrop-filter:blur(16px)}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ======================== 护眼浅色模式 ======================== */
html[data-theme="light"] #sceneStage{filter:brightness(1.1) saturate(.78) sepia(.05)}
html[data-theme="light"] .brand-mark{background:rgba(246,243,226,.32);color:#4c4337}
html[data-theme="light"] .brand-bar h1{color:#f9f6eb}

/* ======================== 移动端布局 ======================== */
@media (max-width: 700px){
  .brand-bar{left:16px!important;top:16px!important}.brand-mark{width:38px;height:38px;border-radius:13px}.brand-bar h1{font-size:17px}.brand-bar p{font-size:8px}
  .scene-card{width:calc(100vw - 24px);max-height:calc(100dvh - 100px);padding:24px 16px;border-radius:25px}.modal-layer{align-items:start;padding:58px 12px 90px;overflow:auto}.modal-copy{margin-bottom:16px}.scene-carousel{grid-template-columns:28px 1fr 28px;gap:6px}.scene-grid{grid-template-columns:1fr;gap:9px}.scene-thumb{aspect-ratio:2.35;border-radius:14px}.thumb-label{padding-top:18px}.round-arrow{width:28px;height:28px}.plan-picker{display:grid;grid-template-columns:1fr 1fr;gap:6px}.plan-option{padding:9px 8px}.plan-option span{font-size:9px}.plan-option i{display:none}.scene-dots{margin:11px 0 13px}
  .toolbar{left:50%;right:auto;top:auto;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);flex-direction:row;width:max-content;max-width:calc(100vw - 12px);gap:0;padding:6px;border-radius:19px}.tool-button{width:clamp(31px,9.2vw,43px);height:45px;border-radius:13px}.tool-icon{font-size:17px;height:20px}.ai-tool-icon{font-size:9px}.tool-button small{font-size:7px}
  .control-panel,.compact-panel,.todo-panel,.music-panel{right:auto;left:50%;top:auto;bottom:72px;width:min(340px,calc(100vw - 20px));max-height:calc(100dvh - 150px);transform:translate(-50%,12px) scale(.98)}.control-panel.open{transform:translate(-50%,0) scale(1)}.todo-panel,.music-panel{max-height:58vh}.ai-float-button{left:12px;top:auto;bottom:76px;width:48px;height:48px;transform:none;border-radius:15px}.ai-float-button:hover,.ai-float-button.active{transform:scale(1.03)}.ai-float-button small{display:none}.ai-panel{left:10px;right:10px;top:76px;bottom:132px;width:auto;height:auto;max-height:none;transform:translateY(12px) scale(.98)}.ai-panel.open{transform:none}.ai-messages{min-height:110px}.todo-list{max-height:26vh}.track-list{max-height:27vh}.video-credit{bottom:82px;left:72px}.quick-exit-focus{right:12px;bottom:76px}
  .focus-hud{top:45%;width:90%}.focus-hud strong{font-size:64px}.focus-hud blockquote{font-size:12px;padding:0 20px}
  .window-frame,.beach-window,.rain-window{inset-left:4%;inset-right:4%}.mug{right:15%;transform:scale(.75)}.desk-lamp{left:12%}.open-book{left:36%;width:38%}.subsea-window{inset:8% 4% 18%}.moon-gate{left:14%;width:72%}.attic-window{left:13%;right:13%}
}

@media (max-height: 700px) and (min-width:701px){.scene-card{padding:22px 34px}.modal-copy{margin-bottom:14px}.scene-thumb{aspect-ratio:1.8}.scene-dots{margin:10px 0}.plan-picker{margin-bottom:12px}.audio-note{display:none}.toolbar{gap:1px}.tool-button{height:43px}}

/* 尊重系统“减少动态效果”设置 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.scene{transition-duration:.2s}
}