:root{font-family:"Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;color:#253b48;background:#d4e5e9;font-synthesis:none;--glass:#fffffff5;--blue:#276b8b;--ink:#243947}
*{box-sizing:border-box}body{margin:0}button,a,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #e9bb58;outline-offset:4px}[hidden]{display:none!important}
.opening-scene{height:100svh;min-height:560px;position:relative;overflow:hidden;isolation:isolate}.classroom{position:absolute;inset:0;background:url('/assets/classroom-v1.webp') center/cover;z-index:-3}.scene-shade{position:absolute;inset:0;background:linear-gradient(180deg,#10283638,transparent 28%,transparent 62%,#1b304838);z-index:-2;transition:background .2s}.attention .scene-shade{background:linear-gradient(180deg,#182c423b,transparent 25%,#1023362e 72%)}
.scene-heading{position:absolute;top:30px;left:38px;display:flex;gap:22px;align-items:center;color:#fff;text-shadow:0 1px 7px #182c4290}.eyebrow{font-size:11px;font-weight:650;letter-spacing:.18em}h1{font-size:23px;line-height:1.3;margin:6px 0 0;font-weight:600;letter-spacing:.06em}.preview-label{font-size:11px;border:1px solid #ffffff80;border-radius:20px;padding:5px 11px;background:#29496255}.scene-tools{position:absolute;top:34px;right:38px;display:flex;gap:6px;align-items:center}.scene-tools button,.scene-tools a{border:1px solid #ffffffa6;color:#23465a;background:#ffffffe8;border-radius:6px;padding:7px 12px;font-size:12px;text-decoration:none;backdrop-filter:blur(8px)}
.phone{position:absolute;top:118px;left:clamp(38px,10vw,190px);width:350px;bottom:calc(28vh + 50px);min-height:255px;border:6px solid #263b49;border-top-width:10px;border-bottom-width:10px;border-radius:26px;background:#ecf0f4;box-shadow:0 16px 45px #112f4955;display:flex;flex-direction:column;overflow:hidden;transition:opacity .2s,transform .2s;opacity:1;transform:translateY(0)}
.phone.dim{opacity:.27;transform:translateY(14px)}.phone-top{padding:5px 13px;background:#2f7dae;color:#eefaff;font-size:10px;display:flex;justify-content:space-between}.phone-heading{display:flex;gap:10px;align-items:center;padding:11px 14px;background:linear-gradient(120deg,#397db1,#439bc4);color:white;flex-shrink:0}.phone-heading h2{font-size:16px;margin:0;font-weight:600}.phone-heading small{display:block;font-size:10px;opacity:.82;margin-top:3px}.phone-icon{width:30px;height:30px;border:1px solid #ffffff80;border-radius:9px;display:grid;place-items:center;font-size:13px}.phone-icon img{width:100%;height:100%;border-radius:8px}.phone-content{overflow:auto;overscroll-behavior:contain;flex:1;padding:15px 12px;min-height:0;scrollbar-width:thin;scrollbar-color:#b8cbd8 transparent;scroll-behavior:auto}.phone-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;flex-shrink:0;border-top:1px solid #d5e0e8;background:#f8fafc;color:#79909f;font-size:12px}.phone-footer small{font-size:10px}.message{display:flex;gap:8px;margin:0 0 14px;align-items:flex-start}.message.mine{flex-direction:row-reverse}.avatar{width:29px;height:29px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;background:#d8e7ef;color:#5a7b91;font-size:12px;overflow:hidden}.avatar img{width:100%;height:100%}.message-body{max-width:calc(100% - 48px)}.message-name{display:block;font-size:10px;color:#728693;margin:0 3px 4px}.mine .message-name{text-align:right}.bubble{padding:9px 11px;border:1px solid #dbe2e8;background:#fff;border-radius:3px 11px 11px;line-height:1.65;font-size:13px;overflow-wrap:anywhere;user-select:text}.mine .bubble{background:#dcefd6;border-color:#c5dfbd;border-radius:11px 3px 11px 11px}.friend-notice{position:absolute;top:32px;left:7px;right:7px;z-index:2;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;background:#fffffff7;border:1px solid #b8d6e8;box-shadow:0 4px 22px #244b6955}.friend-notice img{width:34px;height:34px;border-radius:9px}.friend-notice strong,.friend-notice span{display:block;font-size:12px}.friend-notice span{font-size:11px;margin-top:2px;color:#667e8e}.new-messages{position:absolute;bottom:46px;right:10px;font-size:11px;padding:7px 10px;border:1px solid #a5c9dc;border-radius:14px;background:#fff;color:#276b8b}.phone-summary{text-align:center;font-size:11px;color:#798e9f;padding:12px 0;margin:0}.new-contact{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:10px;font-size:11px;color:#457c9c}.new-contact img{width:26px;height:26px}.contact-card{margin:12px 2px;background:#fff;border:1px solid #d7e2ea;border-radius:12px;padding:18px;text-align:center}.contact-card>img{width:64px;height:64px;border-radius:18px}.contact-card h3{font-size:17px;margin:10px 0 6px}.contact-card .bubble{text-align:left;background:#f2f6f9;margin-top:16px}.contact-card small,.contact-card p{font-size:12px;color:#768c9a;line-height:1.7}.profile-row{display:flex;justify-content:space-between;border-top:1px solid #e2e9ef;padding-top:12px;margin-top:15px;font-size:12px;color:#647f91}
.dialogue{position:absolute;bottom:38px;left:38px;right:38px;min-height:190px;max-height:34vh;border:1px solid #ffffffd9;border-radius:12px;background:var(--glass);box-shadow:0 8px 35px #132f4135;backdrop-filter:blur(14px);padding:17px 28px 12px;display:flex;flex-direction:column}.dialogue-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:#54778b}.dialogue-heading #speaker{font-size:12px;letter-spacing:.05em;font-weight:650}.dialogue-heading #reading-progress{font-size:10px;letter-spacing:.1em;color:#8ba2b0}.dialogue-copy{flex:1;min-height:58px;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain;font-size:16px;line-height:1.85;color:var(--ink);user-select:text}.dialogue-copy p{margin:0 0 4px;white-space:pre-wrap;overflow-wrap:anywhere}.dialogue-copy .part-label{font-size:10px;color:#8199a8;margin:5px 0 1px}.dialogue-copy .thought{color:#526c7d}.typing-cursor{display:inline-block;width:2px;height:1em;background:#7b97a7;vertical-align:-.15em;margin-left:3px;animation:cursor 1s steps(1) infinite}.dialogue-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:9px}.dialogue-bottom p{margin:0;font-size:10px;color:#859aa7}.dialogue-bottom button{border:0;background:transparent;color:var(--blue);font-size:12px;padding:8px 4px 8px 20px;white-space:nowrap}.dialogue-bottom button span{margin-left:12px;color:#7296aa}.save-status{position:absolute;bottom:10px;left:40px;right:40px;margin:0;text-align:right;font-size:10px;color:#fff;text-shadow:0 1px 5px #172e43;pointer-events:none}.save-status.warning{color:#6f4314;background:#fff0d8;padding:5px 10px;border-radius:5px;text-shadow:none;pointer-events:auto}
.preview-end{position:absolute;inset:auto 20% 38%;padding:28px 32px;text-align:center;background:#ffffffed;border:1px solid white;border-radius:14px;box-shadow:0 10px 60px #16334b4d;backdrop-filter:blur(12px)}.preview-end h2{font-size:21px;line-height:1.6;margin:12px 0}.preview-end p{font-size:13px;line-height:1.8;color:#718898}.preview-end>div{display:flex;gap:10px;justify-content:center;margin-top:18px}.preview-end button,.preview-end a,.settings-actions a,.settings-actions button{border:1px solid #9ac1d5;background:#f9fdff;border-radius:6px;padding:9px 14px;font-size:12px;color:#286989;text-decoration:none}.preview-end button{background:#286989;color:white;border-color:#286989}
dialog{width:min(590px,calc(100% - 32px));max-height:80svh;border:1px solid white;border-radius:14px;padding:24px;color:#29475a;background:#f8fcff;box-shadow:0 20px 70px #162f4860}dialog::backdrop{background:#152d4355;backdrop-filter:blur(3px)}.modal-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.modal-heading h2{margin:0;font-size:20px}.modal-heading button{border:1px solid #c0d6e3;border-radius:6px;background:white;color:#617f91;padding:6px 12px;font-size:12px}#records{display:none;flex-direction:column}#records[open]{display:flex}#record-list{overflow:auto;min-height:0;overscroll-behavior:contain}.record-entry{padding:10px 0;border-bottom:1px solid #dce8ef}.record-entry small{font-size:10px;color:#8198a7}.record-entry p{font-size:14px;line-height:1.7;margin:5px 0;white-space:pre-wrap;overflow-wrap:anywhere}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 0;border-top:1px solid #e2ebf1;font-size:14px}.setting-row select{max-width:160px;border:1px solid #bacfdf;border-radius:5px;background:white;padding:6px 10px;color:#31586f}.setting-row input{width:18px;height:18px;accent-color:#287faa}.settings-note{font-size:12px;line-height:1.8;color:#8499a7}.settings-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}.no-script{position:absolute;inset:40% 10%;background:#fff;padding:25px;z-index:10}.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}@keyframes cursor{50%{opacity:0}}
@media(min-width:1500px){.phone{width:390px}.bubble{font-size:14px}.dialogue{left:7vw;right:7vw;padding-left:32px;padding-right:32px}.dialogue-copy{font-size:18px}}
@media(max-width:700px){.opening-scene{min-height:620px}.classroom{background-position:58% center}.scene-heading{top:20px;left:18px;gap:12px}.scene-heading .eyebrow{font-size:9px}h1{font-size:17px}.preview-label{padding:4px 7px;font-size:9px}.scene-tools{top:80px;right:16px;gap:5px}.scene-tools button,.scene-tools a{padding:5px 9px;font-size:11px}.phone{top:125px;left:calc(50% - 154px);width:308px;bottom:calc(31vh + 40px);min-height:230px;border-width:5px;border-top-width:8px;border-bottom-width:8px;border-radius:22px}.phone-heading{padding:8px 11px}.phone-content{padding:12px 10px}.bubble{font-size:12px;line-height:1.6;padding:8px 10px}.message{margin-bottom:12px}.phone-footer{padding:7px 11px}.dialogue{left:12px;right:12px;bottom:35px;padding:14px 17px 8px;min-height:190px;max-height:31vh;border-radius:10px}.dialogue-copy{font-size:14px;line-height:1.75;min-height:74px}.dialogue-heading{margin-bottom:8px}.dialogue-bottom{padding-top:6px;gap:8px}.dialogue-bottom p{font-size:9px;max-width:70%}.dialogue-bottom button{font-size:11px;padding-left:10px}.save-status{left:14px;right:14px;bottom:10px;font-size:9px}.preview-end{inset:29% 18px auto;padding:22px 18px}.preview-end h2{font-size:18px}dialog{padding:20px}}
@media(max-height:650px) and (min-width:701px){.opening-scene{min-height:500px}.phone{top:94px;bottom:245px;min-height:150px}.phone-heading{padding:7px 12px}.dialogue{bottom:30px;min-height:185px;max-height:38vh}.scene-heading{top:18px}.scene-tools{top:22px}.save-status{bottom:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.chat-unit .dialogue{min-height:92px;max-height:110px}.chat-unit .dialogue-copy{display:none}
.classroom{transition:background-image .25s}.blackout{position:absolute;inset:0;background:#07101a;opacity:0;z-index:-1;transition:opacity .35s;pointer-events:none}.blackout.active{opacity:1}.hero{position:absolute;right:6vw;bottom:220px;width:min(31vw,400px);height:min(65vh,620px);background:url('/assets/whale-sprite-v2.webp') center bottom/contain no-repeat;filter:drop-shadow(0 12px 15px #16395850);transition:filter .18s;pointer-events:none}.hero[data-mood=smug]{filter:drop-shadow(0 12px 15px #16395850) brightness(1.03)}.hero[data-mood=happy]{animation:hero-nod .45s ease-out 1}.phone-photo{width:100%;height:auto;display:block;border-radius:8px}.photo-button{padding:0;border:0;background:none;display:block;max-width:180px;border-radius:8px}.news-card{border:1px solid #bfd4de;background:#f6fafc;text-align:left;font-size:12px;line-height:1.7;padding:12px;border-radius:8px;color:#2a4f65}.news-headline{font-size:15px;line-height:1.8;margin:8px 0 16px}.browse-close{border:1px solid #a5c5d6;padding:6px 10px;background:white;color:#2d627c;border-radius:5px;margin-bottom:12px;font-size:12px}.sticker{width:110px;text-align:center;background:#fff}.sticker img{width:70px;height:70px;display:block;margin:auto}.sticker small{font-size:10px;color:#6b8795}.sticker[aria-label="点头表情"] img{animation:hero-nod .5s ease-in-out 2}.sticker[aria-label="笑得打滚的表情"] img{transform:rotate(-24deg)}.sticker[aria-label="趴在桌上的表情"] img{transform:rotate(90deg)}.story-link{border:1px solid #b4cfdc;background:white;padding:12px;border-radius:8px;font-size:13px;color:#286989}.erased-input{font-size:10px;color:#8fa5b1;padding:10px;border:1px solid #d6e4eb;border-radius:7px}.loading-page{height:100%;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;color:#6f94aa}.loading-ring{width:25px;height:25px;border:2px solid #bfd7e3;border-top-color:#3f83a7;border-radius:50%;animation:spin 2s linear infinite}.distorted p{filter:blur(2px);text-shadow:-8px 2px #5c82c0,8px -3px #76b8c0;letter-spacing:.4em}.distorted-phone .phone-content{background:#d6e8f4}.opening-choices{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:min(460px,calc(100% - 32px));padding:20px;border:1px solid #ffffff;background:#f5fcfff2;box-shadow:0 12px 45px #19394c40;border-radius:12px;z-index:4}.opening-choices p{font-size:12px;color:#708d9f;margin:0 0 12px}.opening-choices button{display:block;width:100%;text-align:left;padding:15px 18px;font-size:16px;border:1px solid #b5d6e7;background:white;color:#315e77;border-radius:7px;margin:9px 0}.opening-choices button:hover{background:#e7f5fb}.room-points{position:absolute;left:15%;top:32%;width:33%;color:#b9fbff;letter-spacing:2em;font-size:18px;animation:light-slide 7s ease-in-out infinite;pointer-events:none}.sim-preview{position:absolute;left:6vw;top:21%;width:min(47vw,530px);background:#ecf9ffed;border:1px solid white;box-shadow:0 9px 40px #174b6d45;border-radius:12px;padding:20px;color:#31556d}.sim-preview>small{font-size:12px;letter-spacing:.15em}.mini-map{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.mini-map>span{border:1px solid #b4dbe8;border-radius:8px;background:#fff;min-height:100px;padding:12px 5px;text-align:center;font-size:12px}.mini-map b{display:block;font-size:11px;color:#899474;margin-top:20px}.mini-dot{display:block;width:15px;height:15px;background:#4fd0f1;box-shadow:0 0 12px #69d8e9;border:2px solid white;border-radius:50%;margin:18px auto}.dot-flash .mini-dot{animation:dot-glow 3s ease-in-out infinite}.mini-cards{display:flex;gap:6px;flex-wrap:wrap}.mini-cards span{font-size:10px;padding:7px 9px;background:#fff;border:1px solid #b8dbe9;border-radius:5px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes hero-nod{50%{transform:translateY(5px)}}@keyframes light-slide{50%{transform:translateX(70px);opacity:.4}}@keyframes dot-glow{50%{box-shadow:0 0 25px #58e8ff;opacity:.45}}
@media(max-width:700px){.hero{right:0;bottom:calc(31vh + 34px);width:58vw;height:42vh}.sim-preview{left:16px;top:155px;width:54vw;padding:10px}.mini-map{gap:3px;margin:12px 0}.mini-map>span{font-size:9px;padding:8px 2px;min-height:83px}.mini-map b{font-size:9px}.mini-cards{gap:3px}.mini-cards span{font-size:9px;padding:4px}.opening-choices{top:53%}.opening-choices button{font-size:14px}.phone-photo{border-radius:5px}}
.hero{height:min(58vh,560px)}.phone-flash{animation:phone-flash .3s ease-out}.work-preview{position:absolute;left:6vw;top:23%;width:min(42vw,440px);height:220px;border:2px solid #bcf7ff;background:linear-gradient(150deg,#285788ee,#20433cdd);border-radius:10px;box-shadow:0 0 25px #68dff644;display:flex;justify-content:center;align-items:center;gap:20px}.work-preview i{width:35px;height:35px;border-radius:50%;background:#f6d56c;box-shadow:0 0 15px #ffe09466;animation:toy-move 3s ease-in-out infinite}.work-preview i:nth-child(2){background:#84dabd;animation-delay:.3s}.work-preview i:nth-child(3){background:#e2b4f2;animation-delay:.6s}.work-preview i:nth-child(4){background:#91cde7;animation-delay:.9s}.work-preview[data-work="2"]{background:linear-gradient(150deg,#4e4c84ee,#233558ee)}.work-preview[data-work="2"] i{border-radius:5px;transform:rotate(45deg)}
@keyframes phone-flash{35%{filter:brightness(1.9)}to{filter:brightness(1)}}@keyframes toy-move{50%{translate:0 -18px}}
@media(max-width:700px){.hero{height:42vh}.work-preview{left:16px;top:160px;width:54vw;height:180px;gap:10px}.work-preview i{width:22px;height:22px}}
.hero{width:min(58vh,45vw,560px);height:min(58vh,45vw,560px);background-image:url('/assets/whale-opening-expressions-v1.webp');background-size:300% 100%;background-position:0 0}.hero[data-mood=smug]{background-position:50% 0;filter:drop-shadow(0 12px 15px #16395850)}.hero[data-mood=happy]{background-position:100% 0}
@media(max-width:700px){.hero{width:min(42vh,70vw);height:min(42vh,70vw)}.has-sim .hero{width:44vw;height:44vw;bottom:calc(31vh + 85px)}}
@media(max-width:700px){.opening-choices{top:auto;bottom:75px;transform:translateX(-50%)}}
.classroom{transition:none;background-color:#102635}