:root{font-family:"PingFang SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;color:#514958;background:#f4f2f8;font-synthesis:none;--accent:#9c87ec}*{box-sizing:border-box}body{margin:0;height:100svh;min-height:0;display:grid;grid-template-rows:62px 50px minmax(0,1fr) 31px;overflow:hidden;background:radial-gradient(ellipse at 50% 58%,#e8e3f180,transparent 59%),linear-gradient(140deg,#f8f7fa,#f2eff7)}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0;transition:background .16s,transform .16s}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #ae9cda;outline-offset:4px}a{color:inherit;text-decoration:none}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}img{object-fit:contain}[hidden]{display:none!important}.skip-link{position:absolute;top:-60px;left:20px;background:#fff;padding:10px;z-index:1000}.skip-link:focus{top:10px}.site-header{display:flex;align-items:center;justify-content:space-between;margin:0 3.4%;border-bottom:1px solid #e5dfee80;z-index:3}.site-brand{display:flex;align-items:center;gap:9px;font-size:22px;font-weight:600;letter-spacing:-.7px}.site-brand img{width:34px;height:34px}.brand-divider{height:16px;width:1px;background:#ded6e7;margin:0 9px}.site-brand small{font-size:12px;font-weight:400;color:#a596b1;letter-spacing:.4px}.outside-button{display:flex;align-items:center;gap:8px;border:1px solid #ded5e9;border-radius:10px;background:#ffffff80;font-size:12px;color:#8e7b9e;padding:8px 13px}.outside-button:hover{background:white}.outside-button svg{width:15px;height:15px}.module-nav{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px}.module-tab{display:flex;align-items:center;gap:8px;padding:8px 19px;border-radius:10px;background:transparent;font-size:13px;color:#9f91ac;border:1px solid transparent;white-space:nowrap}.module-tab:hover{background:#ffffff90}.module-tab.active{color:#9378c8;background:#fff;border-color:#e9e1f2;box-shadow:0 3px 12px #77559008}.module-number{font-size:10px;color:#beafcb;margin-right:2px}.module-tab svg{width:16px;height:16px}.showcase-stage{position:relative;min-height:0;max-width:1920px;width:100%;height:100%;margin:0 auto}.device-area{height:100%;min-height:0;padding:6px 20px;display:flex;align-items:flex-start;justify-content:center;position:relative}.imac{position:relative;z-index:1;display:flex;align-items:center;flex-direction:column;filter:drop-shadow(0 15px 30px #55446c0c);transition:transform .25s ease}.imac-display{position:relative;width:100%;padding:16px 12px 10px;border-radius:20px 20px 0 0;background:linear-gradient(130deg,#fdfcfd,#eeebf1);border:1px solid #fff;box-shadow:0 0 0 1px #d7cedc90,0 5px 17px #61536b0b}.camera{position:absolute;top:6px;left:50%;height:4px;width:4px;background:#aca5b5;box-shadow:0 0 0 1.5px #e4e0e9;border-radius:50%}.screen{width:100%;aspect-ratio:16/9;position:relative;overflow:clip;background:#f3f2f7;border:1px solid #e1dae8;isolation:isolate}.software-canvas{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:top left;overflow:clip;background:#f3f2f7}.software-canvas>iframe{border:0;display:block;position:absolute;width:1920px;height:1080px;left:0;top:0;background:#f3f2f7}.imac-chin{width:100%;height:44px;flex-shrink:0;background:linear-gradient(130deg,#e2dce8,#d4cddb 62%,#dfd8e6);border:1px solid #d5cedc;border-top:1px solid #d8d0e0;border-radius:0 0 17px 17px;box-shadow:inset 0 1px 0 #eae5f0;display:flex;align-items:center;justify-content:center}.imac-chin span{width:32px;height:2px;border-radius:50%;background:#c8bcd244}.imac-stand{height:70px;width:27%;position:relative;z-index:-1;margin-top:-1px;flex-shrink:0}.stand-neck{width:56%;height:65px;margin:auto;background:linear-gradient(90deg,#cec5d6,#eee8f3 30%,#e3dce9 70%,#d0c6d8);clip-path:polygon(21% 0,79% 0,86% 85%,100% 96%,0 96%,14% 85%);box-shadow:inset 0 10px 25px #a698b4}.stand-foot{position:absolute;width:100%;height:10px;bottom:0;background:linear-gradient(#eee8f3,#cfc5d8);border:1px solid #d7cede;border-radius:50% 50% 22% 22%;transform:perspective(150px) rotateX(18deg);box-shadow:0 3px 6px #63516f0a}.device-shadow{width:35%;height:11px;filter:blur(9px);background:#78618520;position:absolute;bottom:6px;left:32.5%;border-radius:50%}.feature-note{position:absolute;right:20px;top:50px;width:205px;z-index:4;padding:18px 16px;background:#ffffffdc;border:1px solid #e8e0f0;border-radius:15px;box-shadow:0 8px 30px #6952760a;animation:note-in .2s ease-out;backdrop-filter:blur(10px)}.feature-note header{display:flex;align-items:flex-start;gap:8px;justify-content:space-between}.feature-note h2{font-size:16px;font-weight:500;line-height:1.6;margin:0;color:#8b739d}.feature-note p{font-size:12px;line-height:1.9;color:#a18cae;margin:11px 0 0}.feature-close{width:21px;height:23px;padding:2px;border-radius:6px;background:transparent;color:#b6a3c6;flex-shrink:0}.feature-close svg{width:14px;height:14px}.feature-note ul{padding:11px 0 0;margin:12px 0 0;border-top:1px solid #eee6f5;list-style:none;color:#af9abd;font-size:11px;line-height:1.9}.feature-note li+li{margin-top:4px}.state-controls{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}.state-controls button{font-size:9px;background:#f5f0fa;color:#ad91c4;padding:4px 6px;border:1px solid #e8dcf2;border-radius:5px}.site-footer{display:flex;align-items:center;gap:16px;margin:0 3.4%;font-size:10px;color:#b5a6c1}.site-footer>span{display:flex;align-items:center;gap:6px}.site-footer i{height:4px;width:4px;border-radius:50%;background:#adc7b8}.site-footer button{display:flex;align-items:center;gap:6px;background:transparent;color:#b4a2c2;font-size:10px;margin-left:auto;padding:4px 8px}.site-footer svg{width:11px;height:11px}.mobile-note{display:none}#float-layer,#reminder-layer{position:absolute;inset:0;pointer-events:none}#float-layer{z-index:30}#reminder-layer{z-index:60}#float-layer>*,#reminder-layer>*{pointer-events:auto}.native-surface{position:absolute;border:0;background:transparent;display:block;box-shadow:none;overflow:clip}.surface-wrap{position:absolute;pointer-events:auto;background:transparent}.surface-wrap iframe{display:block;width:100%;height:100%;border:0;background:transparent}.surface-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#58426726;backdrop-filter:blur(2px)}.surface-center .surface-wrap{position:relative}.drag-handle{position:absolute;z-index:2;left:12px;right:12px;top:7px;height:32px;cursor:grab;touch-action:none;user-select:none}.drag-handle:active{cursor:grabbing}.surface-tool{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);font-size:10px;color:#af9bc0;background:#fff9;border:1px solid #e5dbee;border-radius:7px;padding:4px 9px;white-space:nowrap}.focus-reopen{position:absolute;bottom:20px;right:24px;color:#a38cc0;background:#fff;border:1px solid #e4d6f3;border-radius:11px;padding:8px 12px;display:flex;gap:8px;align-items:center;font-size:15px;box-shadow:0 4px 18px #8b729f17}#app-toast{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:100;color:#9a81ad;background:#fff;border:1px solid #e8dcf2;border-radius:12px;padding:10px 18px;font-size:16px;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 4px 22px #6e537519}#app-toast.visible{opacity:1}.experience{grid-template-rows:58px minmax(0,1fr)}.experience .module-nav,.experience .feature-note,.experience .site-footer,.experience .brand-divider,.experience .site-brand small{display:none!important}.experience .showcase-stage{max-width:none;height:auto}.experience .device-area{padding:0 18px 16px;display:block}.experience .imac{width:100%!important;height:100%;filter:none;transform:none!important}.experience .imac-display{height:100%;padding:0;border:1px solid #e2daed;border-radius:13px;overflow:clip;background:#f3f2f7}.experience .screen{height:100%;aspect-ratio:auto;border:0}.experience .camera,.experience .imac-chin,.experience .imac-stand,.experience .device-shadow{display:none}.experience .site-header{border:0}.experience .mobile-note{display:none}
.surface-center{backdrop-filter:none}body{grid-template-columns:minmax(0,1fr)}.showcase-stage,.device-area,.imac,.imac-display{min-width:0}
@keyframes note-in{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@media(max-width:1690px){.has-note .imac{transform:translateX(-65px)}.feature-note{width:186px;right:12px;padding:16px 14px}.feature-note h2{font-size:15px}.feature-note p{font-size:11px}}
@media(max-width:1200px){.has-note .imac{transform:none}.feature-note{top:auto;bottom:12px;right:15px;width:225px;padding:12px 14px}.feature-note p{margin-top:5px}.feature-note ul{display:none}.module-tab{padding:8px 12px;font-size:12px}.site-header{margin:0 20px}}
@media(max-height:850px){body{grid-template-rows:55px 45px minmax(0,1fr) 27px}.imac-chin{height:36px}.imac-stand{height:58px}.stand-neck{height:54px}.stand-foot{height:8px}.imac-display{padding-top:13px;padding-bottom:8px}.camera{top:5px}.experience{grid-template-rows:54px minmax(0,1fr)}}
@media(max-width:700px){body{height:auto;min-height:100svh;overflow:auto;grid-template-rows:60px 88px auto 40px auto}.site-brand small,.brand-divider{display:none}.site-header{margin:0 16px}.module-nav{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px 12px}.module-tab{padding:9px 5px;justify-content:center;font-size:11px;gap:7px}.module-number{display:none}.showcase-stage{height:auto}.device-area{padding:10px 7px}.imac-display{padding:10px 6px 6px;border-radius:12px 12px 0 0}.camera{top:4px;width:3px;height:3px}.imac-chin{height:24px;border-radius:0 0 10px 10px}.imac-stand{height:40px}.stand-neck{height:37px}.stand-foot{height:6px}.feature-note{top:0;bottom:auto;width:210px;z-index:10}.feature-note p{font-size:12px}.mobile-note{display:block;font-size:11px;text-align:center;color:#ad9bbc;padding:13px 20px}.experience{height:100svh;overflow:hidden;grid-template-rows:52px minmax(0,1fr)}.experience .showcase-stage{height:auto}.experience .device-area{height:100%;padding:0 6px 8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Use the free space beside the existing device; never resize its desktop UI. */
body.has-note .imac{transform:none}
.feature-note,.experience-panel{position:absolute;top:48%;width:var(--rail-width,210px);transform:translateY(-50%);z-index:4;padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;animation:none}
.feature-note{left:var(--rail-inset,64px);right:auto}
.experience-panel{right:var(--rail-inset,64px)}
.feature-index{display:block;font-size:11px;letter-spacing:2px;color:#b2a1c1;margin-bottom:13px}
.feature-note h2{font-size:17px;font-weight:500;white-space:nowrap;color:#856e99;line-height:1.6;margin:0}
.feature-note p{font-size:13px;line-height:1.95;color:#9b88a9;margin:17px 0 0;text-wrap:pretty}
.feature-detail{margin-top:21px;padding-top:14px;border-top:1px solid #ded5e980;font-size:12px;line-height:1.9;color:#b09ac2}
.feature-note[data-feature=activity] .feature-detail{font-size:11px;letter-spacing:.2px}
.experience-panel h3{font-size:13px;font-weight:500;line-height:1.5;color:#9b85af;margin:0 0 18px;white-space:nowrap}
.experience-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}
.experience-heading h3{margin:0}
.state-controls{display:flex;flex-direction:column;gap:0;margin:0}
.state-controls button{display:flex;align-items:center;gap:9px;font-size:12px;background:none;color:#a08ab2;padding:15px 4px;border:0;border-bottom:1px solid #e6deed90;border-radius:0;white-space:nowrap}
.state-controls button:hover,.state-controls button[aria-pressed=true]{background:#ffffff65;border-radius:8px}
.state-controls strong{font-size:11px;font-weight:500;letter-spacing:.3px}
.state-controls button>span{margin-left:auto;font-size:12px;color:#ac9aba}
.state-dot{width:5px;height:5px;border-radius:50%;background:#b7a4e2;flex-shrink:0}
.state-dot.drift{background:#ddaeb8}.state-dot.idle{background:#c7c3d2}.state-dot.recovery{background:#a3c8ba}
.mode-trigger{display:block;width:100%;text-align:left;background:none;border-bottom:1px solid #e5dced90;padding:15px 0 17px;margin-bottom:5px;border-radius:0}
.mode-trigger:hover,.mode-trigger[aria-pressed=true]{background:#ffffff70;border-radius:9px;box-shadow:0 0 0 8px #ffffff70}
.mode-title{display:flex;align-items:center;gap:9px;color:#9680b0;white-space:nowrap}
.mode-title>svg{width:15px;height:15px}.mode-title strong{font-size:13px;font-weight:500}
.mode-arrow{margin-left:auto;color:#b6a3c9;font-size:18px;line-height:1}
.mode-description{display:block;margin:9px 0 0 24px;font-size:12px;line-height:1.8;color:#ac98bc}
.dismiss-preview{display:flex;align-items:center;gap:6px;padding:6px 0;margin-top:17px;font-size:12px;color:#ac98bc;background:none}
.dismiss-preview:hover{color:#8870a2}.dismiss-preview svg{width:12px;height:12px}
.scene-pause{background:transparent;padding:3px;color:#b49dc9;display:grid;place-items:center;border-radius:5px}
.scene-pause svg{width:14px;height:14px}.scene-pause:hover{background:#fff8}
.ai-scene{min-height:275px}
.scene-label{display:flex;justify-content:space-between;color:#b2a0c0;font-size:12px;margin-bottom:16px;gap:8px}
.scene-label small{font-size:10px;letter-spacing:1px;color:#c0afcd}
.ai-bubble{font-size:12px;line-height:1.9;border-radius:12px;animation:bubble-in .4s ease both;word-break:break-word;overflow-wrap:anywhere}
.ai-bubble.user{display:block;width:94%;margin-left:auto;padding:12px 13px;text-align:left;background:#eae4f380;color:#9a83ac;border:1px solid #e5dced80}
.ai-bubble.user:hover{background:#e8e0f3}
.ai-bubble.assistant{padding:13px 12px;background:#ffffff80;color:#9f8baf;border:1px solid #eee6f580;margin:14px 5px 0 0;animation-delay:.7s}
.mini-ai{display:flex;align-items:center;gap:6px;font-size:11px;color:#b29bc9}.mini-ai svg{width:13px;height:13px}
.ai-bubble p{margin:8px 0 0}
.scene-result{display:flex;align-items:center;gap:6px;font-size:11px;color:#ad9abe;margin-top:12px;padding-top:9px;border-top:1px solid #eae1f380}
.scene-result svg{width:12px;height:12px}
.scene-navigation{display:flex;align-items:center;gap:5px;margin-top:15px;flex-wrap:wrap}
.scene-navigation button{width:15px;height:20px;padding:4px;display:grid;place-items:center;background:none;border-radius:5px}
.scene-navigation i{width:5px;height:5px;border-radius:50%;background:#d4c9e1}
.scene-navigation button[aria-pressed=true] i{background:#a48ac6;width:12px;border-radius:5px}
.scene-navigation small{font-size:11px;line-height:1.7;color:#bcabc8;margin-left:auto}
.experience .experience-panel{display:none!important}
@keyframes bubble-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(min-width:1201px) and (max-width:1600px){.feature-note h2{font-size:14px}.feature-note p{font-size:12px;line-height:1.9}.feature-detail{font-size:11px}.feature-note{left:var(--rail-inset,35px)}.experience-panel{right:var(--rail-inset,35px)}.mode-title{gap:6px}.mode-title strong{font-size:12px}.mode-description{margin-left:0}.state-controls button{gap:6px}.state-controls button>span{font-size:11px}.state-controls strong{font-size:10px}.scene-navigation small{margin-left:0}}
@media(max-width:1200px),(max-aspect-ratio:4/3){
 body:not(.experience){height:auto;min-height:100svh;overflow:auto;grid-template-rows:62px 50px auto 31px}
 body:not(.experience) .showcase-stage{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 36px;padding-bottom:20px}
 body:not(.experience) .device-area{grid-column:1/-1;height:auto;padding-top:6px}
 body:not(.experience) .feature-note,body:not(.experience) .experience-panel{position:static;transform:none;width:auto;max-width:360px;margin:16px 25px;justify-self:center;align-self:start;padding:0;background:none;border:0}
 .feature-note h2{font-size:16px}.feature-note p{font-size:13px}.experience-panel{min-width:0}.ai-scene{min-height:0}.feature-detail{margin-top:14px}.device-shadow{display:none}
}
@media(max-width:700px){
 body:not(.experience){grid-template-rows:60px 60px auto 40px auto}
 .module-nav{display:flex;justify-content:center;gap:0;padding:4px}.module-tab{padding:8px 5px;font-size:10px;gap:4px}.module-tab svg{width:12px;height:12px}
 body:not(.experience) .showcase-stage{gap:12px 16px}
 body:not(.experience) .feature-note,body:not(.experience) .experience-panel{margin:10px 15px}
 .feature-note h2{font-size:14px}.feature-note p,.ai-bubble{font-size:12px}.scene-navigation small{margin:4px 0 0}.mode-title strong{font-size:12px}.mode-description{margin-left:0}.feature-note[data-feature=activity] .feature-detail{font-size:10px}
}