:root{font-family:Arial,"Noto Sans",sans-serif;color:#171a20;--accent:#55598e;--app-bg:#f6f7fc;--line:#e0dfe7}*{box-sizing:border-box}body{margin:0;background:#fafafa}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #6c65c2;outline-offset:2px}[hidden]{display:none!important}button{border:0;background:none;padding:0}a{text-decoration:none;color:inherit}.workspace{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100svh}.sidebar{background:white;border-right:1px solid #e9e9ef;padding:38px 26px;display:flex;flex-direction:column;gap:12px;position:sticky;top:0;height:100svh;min-height:460px}.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:700}.brand img{width:27px;height:33px;object-fit:contain}.demo-label{color:#8c8d98;font-size:12px;margin:6px 0 35px}.sidebar nav{display:flex;flex-direction:column;gap:9px}.sidebar nav button{display:flex;align-items:center;gap:14px;text-align:start;padding:17px 14px;border-radius:10px;color:#767782}.sidebar nav button span{font-size:10px;color:#a4a3b1}.sidebar nav button strong{font-size:13px;font-weight:500}.sidebar nav button.active{background:#efeff8;color:#505488}.nav-bottom{margin-top:auto;padding-top:40px}.nav-bottom label{display:block;font-size:11px;color:#7d7c8c;margin-bottom:10px}.nav-bottom select{width:100%;border:1px solid #e0dfe8;background:white;padding:12px 10px;border-radius:8px;font-size:13px}.nav-bottom button{font-size:12px;color:#71738f;margin-top:20px;padding:8px 0}.demo-stage{display:flex;justify-content:center;align-items:center;padding:36px;min-width:0;background:radial-gradient(ellipse at center,#f2f2f8, #fafafa 75%)}.viewport{width:324px;height:720px;flex-shrink:0}.phone{width:324px;height:720px;position:relative;overflow:hidden;background:var(--app-bg);box-shadow:0 12px 60px #2926410f;font-family:Arial,sans-serif;font-size:12px;line-height:1.4}.phone.is-guide{background:white}.status-bar{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:9.5px;color:#26282b;direction:ltr;white-space:nowrap}.system-bottom{height:12px;position:absolute;bottom:0;width:100%;display:flex;justify-content:center;align-items:center;background:inherit;z-index:8}.system-bottom i{display:block;width:120px;height:3px;background:#252626;border-radius:3px}#screen{position:absolute;top:32px;bottom:12px;left:0;right:0;overflow:hidden}.svg-icon{display:block;width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ffffffc9;flex-shrink:0}.topbar{height:58px;display:flex;align-items:flex-start;justify-content:space-between;padding:7px 13px;gap:10px}.topbar .top-title{height:40px;background:white;border-radius:17px;padding:11px 15px;font-size:12px;font-weight:500;text-align:center;max-width:220px}.app-header{display:flex;align-items:center;gap:6px;padding:7px 14px;height:54px}.app-header .model-trigger{flex:1;min-width:0;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:600}.app-header .right-icons{display:flex;flex:0 0 82px;background:#fff;border-radius:22px}.app-header .icon-button{height:40px;width:41px;background:transparent}.app-header .svg-icon{width:18px;height:18px}.app-header .menu-button{width:40px;background:#fff}.guide{height:100%;position:relative;background:white}.guide-head{position:absolute;top:18px;left:14px;right:24px;display:flex;justify-content:space-between;align-items:center;font-size:10px}.guide-head button{font-size:9px;color:#76787d;padding:3px 10px}.guide-side{position:absolute;top:292px;left:10px;right:10px;display:flex;justify-content:space-between;pointer-events:none}.guide-side button{color:#55598e;font-size:22px;width:18px;pointer-events:auto}.guide-visual{position:absolute;top:125px;left:42px;right:42px;height:250px}.listening{display:flex;align-items:center;justify-content:center;gap:5px;color:#888b8d;font-size:9px;margin:10px 0}.listening .svg-icon{width:9px;height:9px}.wave{display:flex;align-items:center;justify-content:center;height:42px;gap:3px;margin:0 12px}.wave i{width:2px;border-radius:3px;height:var(--h);background:#77799f}.speech{font-size:13px;font-weight:500;line-height:1.6;text-align:center;margin:10px 5px 24px}.todo-preview{margin:0 auto;border:1px solid #ededf0;border-radius:12px;padding:14px 12px;width:236px;font-size:9px}.todo-preview header{display:flex;justify-content:space-between;gap:6px;align-items:center;border-bottom:1px solid #f4f4f6;padding-bottom:10px}.todo-preview header strong{font-weight:500}.todo-preview small{font-size:7px;color:#78968a}.todo-preview p{margin:10px 0 0;color:#85898f;font-size:8px}.guide-title{position:absolute;bottom:148px;left:16px;right:16px;text-align:center;font-size:25px;font-weight:700;line-height:1.45;white-space:pre-line;margin:0;letter-spacing:-.4px}.guide-buttons{position:absolute;bottom:14px;left:23px;right:23px;display:flex;flex-direction:column;gap:8px;min-height:73px}.primary{background:var(--accent);color:#fff;border-radius:9px;min-height:42px;font-size:11px;font-weight:500;padding:9px 14px}.plain-link{font-size:9px;min-height:24px}.guide-buttons.only-next{bottom:44px;min-height:42px}.ecosystem{border:1px solid #e5e5ed;border-radius:13px;width:240px;position:absolute;top:119px;left:42px;height:255px;padding:14px}.ecosystem-head{display:flex;gap:12px;align-items:center;height:49px;border-bottom:1px solid #ecebf2}.ecosystem-head img{width:26px;height:33px;object-fit:contain}.ecosystem-head strong{font-size:11px;font-weight:500}.ecosystem-head small{display:block;font-size:9px;color:#81838b;margin-top:3px}.ecosystem-art{display:block;width:212px;height:170px;object-fit:contain}.memory-block{text-align:center;position:absolute;left:25px;right:25px;top:100px}.memory-block.privacy{top:347px}.memory-block img{width:89px;height:81px;object-fit:contain}.memory-block h2{font-size:19px;font-weight:500;margin:17px 0 8px}.memory-block p{font-size:11px;color:#6c6f77;line-height:1.8;margin:0 25px}.guide-rule{position:absolute;top:304px;left:23px;right:23px;border-top:1px solid #f1f1f3}.guide-report-art{position:absolute;top:112px;left:29px;right:29px;font-size:9px}.guide-report-art .voice-chip{display:flex;align-items:center;gap:8px;margin-left:auto;width:max-content;max-width:95%;border-radius:12px;background:#fafafa;padding:10px;margin-bottom:14px;font-size:10px}.voice-chip .svg-icon{width:11px;height:11px}.status-card{border:1px solid #eeeef1;border-radius:13px;padding:14px;background:white}.status-card header{display:flex;gap:7px;align-items:center;font-size:10px;margin-bottom:8px}.status-card header span:last-child{margin-left:auto;color:#568f7c}.status-card .status-row{display:flex;justify-content:space-between;gap:8px;align-items:center;border-top:1px solid #f2f2f4;padding:11px 0;font-size:9px}.status-row>span:first-child{display:flex;align-items:center;gap:7px}.status-row .svg-icon{width:11px;height:11px}.chat{height:100%;position:relative;background:#f8f8f9}.chat.empty{background:linear-gradient(#e1f1fc 0,#f8f8f9 70px)}.chat-content{position:absolute;top:47px;bottom:88px;left:0;right:0;padding:16px 13px;overflow:auto;scrollbar-width:thin}.welcome{position:absolute;top:31%;left:0;right:0;text-align:center}.welcome h1{font-family:Georgia,serif;font-style:italic;font-size:30px;margin:0 0 5px}.welcome p{font-size:9px;margin:0;color:#56585d}.composer{position:absolute;bottom:3px;left:8px;right:8px}.chips{display:flex;gap:5px;overflow:auto;scrollbar-width:none;white-space:nowrap;margin-bottom:8px}.chips button{font-size:10px;border:1px solid #d8d8df;background:#fff;border-radius:5px;padding:5px 7px;flex-shrink:0}.chips .plugin-chip{color:white;background:var(--accent);border-color:var(--accent)}.input-row{height:41px;display:flex;gap:7px;align-items:center;background:white;border:1px solid #dddde4;border-radius:23px;padding:5px 8px;box-shadow:0 2px 4px #00000010}.input-row input{font-size:9px;border:0;background:none;min-width:0;flex:1;width:100%;padding:3px;outline:none}.input-row .icon-button{width:20px;height:22px}.input-row .svg-icon{width:16px;height:16px}.input-row .mic{width:28px;height:28px;color:white;background:var(--accent);border-radius:50%;display:grid;place-items:center;flex-shrink:0}.hand-icon{color:#77749c}.user-bubble{font-size:10px;line-height:1.55;padding:10px 13px;background:var(--accent);color:#fff;border-radius:13px 13px 4px 13px;max-width:235px;margin-left:auto;margin-bottom:14px}.reason{border:1px solid #d8d8de;border-radius:5px;background:#fbfbfc;margin:9px 0;font-size:9px;line-height:1.6}.reason summary{padding:8px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px}.reason summary:after{content:'›';font-size:13px}.reason p{margin:0;padding:8px;color:#696970;border-top:1px solid #e2e2e7}.report{font-size:10px;line-height:1.55;padding:8px 3px}.report h3{font-size:10px;margin:10px 0 3px}.report p{margin:3px 0}.report ul{padding-inline-start:14px;margin:4px 0}.report .result-table{display:grid;gap:6px;margin:10px 0}.report .result-row{display:flex;justify-content:space-between;gap:10px}.overlay{position:absolute;inset:0;background:#0006;z-index:10}.walkthrough .overlay{background:#0009}.coach{position:absolute;left:20px;right:20px;bottom:108px;z-index:12;font-size:10px}.coach-card{background:#eeedf3;padding:11px;border-radius:11px;box-shadow:0 1px 7px #0002;margin-bottom:10px}.coach-card small{display:block;color:#56598d;font-size:9px;margin-bottom:4px}.coach-card p{margin:0;line-height:1.5}.coach-actions{display:flex;gap:7px}.coach-actions button{flex:1;border-radius:22px;min-height:36px;font-size:10px}.cancel{background:#f7f7fa}.coach-prompt{position:absolute;bottom:12px;left:12px;right:12px;z-index:12;background:#f4f3f7;border:1px solid #ddd;border-radius:12px;padding:12px 12px 40px;font-size:10px;line-height:1.55}.coach-prompt .send{position:absolute;bottom:7px;right:8px;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--accent);color:white}.end-example{position:absolute;right:13px;top:6px;z-index:12;background:var(--accent);color:white;border-radius:22px;padding:9px;font-size:9px}.drawer{position:absolute;inset:0 auto 0 0;width:238px;background:#f7f6fa;border-radius:0 15px 15px 0;z-index:11;padding:0 14px;display:flex;flex-direction:column;overflow:auto;scrollbar-width:none}.drawer-head{display:flex;align-items:center;gap:8px;height:49px;flex-shrink:0}.drawer-head img{width:23px;height:29px;object-fit:contain}.drawer-head strong{font-size:17px;flex:1}.drawer-head .icon-button{width:30px;height:30px;border-radius:9px;border:1px solid #d6d3dd}.drawer-head input{min-width:0;width:100%;font-size:10px;border:1px solid #d0ced7;border-radius:7px;padding:8px;background:white}.drawer-caption{font-size:8px;color:#8e8c95;margin:12px 4px}.history-item{display:block;width:100%;font-size:10px;text-align:start;padding:10px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.more-history{font-size:10px;color:var(--accent);text-align:start;padding:11px 4px;margin:3px 0 12px}.drawer-section{display:flex;align-items:center;gap:11px;text-align:start;font-size:12px;font-weight:600;margin:14px 4px}.drawer-section .arrow{margin-inline-start:auto;font-weight:400}.drawer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px 9px;margin:9px 2px 17px}.drawer-app{font-size:9px;text-align:center;line-height:1.4}.drawer-app img{width:33px;height:33px;object-fit:contain;display:block;margin:0 auto 5px;border-radius:8px}.drawer-app .store-symbol{width:33px;height:33px;background:#8c85db;color:white;border-radius:8px;display:grid;place-items:center;margin:0 auto 5px}.account{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #d7d4df;border-radius:13px;background:white;margin-top:auto;margin-bottom:10px;min-height:57px}.avatar{height:35px;width:35px;border-radius:10px;background:#e0dffd;color:#55598e;display:grid;place-items:center}.account-name{font-size:12px;flex:1}.account-name small{display:block;font-size:8px;color:#81767e}.history-modal{position:absolute;inset:80px 26px 34px;background:#eeecf4;border-radius:22px;padding:15px 13px;z-index:15;overflow:auto}.history-heading{display:flex;gap:5px;align-items:center}.history-heading strong{font-size:12px;flex:1}.history-heading button{padding:2px}.history-heading .svg-icon{width:14px;height:14px}.history-modal .count{font-size:8px;margin:1px 0 14px}.history-modal .history-item{padding:12px 0;font-size:10px}.history-search,.store-search{border:1px solid #d5d4df;padding:7px;border-radius:7px;width:100%;font-size:10px;background:#fff;margin:6px 0}.store{height:100%;background:#f6f7fc;display:flex;flex-direction:column}.store-tabs-wrap{display:flex;align-items:center;padding:0 12px;gap:9px;position:relative;flex-shrink:0}.tabs{display:flex;gap:13px;overflow:auto;scrollbar-width:none;flex:1;min-width:0;white-space:nowrap}.tab{font-size:12px;position:relative;padding:10px 0 11px;white-space:nowrap}.tab.selected{font-weight:600}.tab.selected:after{content:'';position:absolute;bottom:3px;left:30%;right:30%;height:2px;background:#6863c6;border-radius:2px}.filter-button{font-size:10px;display:flex;align-items:center;gap:3px;color:#56555e}.filter-button .svg-icon{width:12px;height:12px}.filter-menu{position:absolute;right:13px;top:35px;z-index:5;background:#f9f8fd;border:1px solid #dedce7;border-radius:10px;padding:5px;box-shadow:0 3px 9px #0002;min-width:88px}.filter-menu button{display:block;font-size:10px;text-align:start;width:100%;padding:9px;border-radius:6px}.filter-menu button.selected{background:#dedae9;color:#5a5396}.store-scroll{overflow:auto;flex:1;scrollbar-width:none;padding:9px 13px 12px}.store-search{margin:0 13px 6px;width:calc(100% - 26px)}.banner{border:1px solid #eeead3;background:#fff9e6;border-radius:5px;padding:13px;min-height:184px;margin-bottom:21px;position:relative;overflow:hidden}.banner small{font-size:8px;color:#8e8365}.banner h2{font-size:17px;line-height:1.3;max-width:175px;margin:9px 0;font-weight:600}.banner p{font-size:9px;line-height:1.5;max-width:200px;margin:0}.banner .banner-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:6px}.banner-dots i{width:4px;height:4px;border-radius:3px;background:#ddd8c1}.banner-dots i:first-child{width:13px;background:#8173d1}.group-heading{display:flex;justify-content:space-between;align-items:center;margin:18px 0 12px;font-size:12px;font-weight:600}.group-heading button{font-size:8px;color:#7b7a8c;font-weight:400}.plugin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.plugin-card{border:1px solid #dfdfe7;border-radius:8px;background:white;min-height:190px;overflow:hidden;display:flex;flex-direction:column}.plugin-card header{padding:10px;display:flex;align-items:center;gap:7px;background:linear-gradient(125deg,#efedff,white);min-height:64px}.plugin-card.green header{background:linear-gradient(125deg,#e6f6ef,white)}.plugin-card.blue header{background:linear-gradient(125deg,#e9f3ff,white)}.plugin-card img{width:45px;height:45px;object-fit:contain;border-radius:10px;flex-shrink:0}.plugin-card strong{font-size:12px;line-height:1.55;font-weight:600;overflow-wrap:anywhere;min-width:0}.plugin-card p{font-size:10px;line-height:1.6;color:#4f5058;margin:4px 10px 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.scheduled-badge{font-size:8px;margin:5px 10px 0;background:#f2f0f7;border-radius:6px;padding:1px 4px;align-self:flex-start}.plugin-card footer{display:flex;justify-content:space-between;align-items:center;gap:2px;margin-top:auto;padding:10px}.price{background:#e5e3e8;padding:3px 6px;border-radius:4px;font-size:9px;white-space:nowrap}.save{font-size:9px;display:flex;align-items:center;gap:4px;min-height:20px}.save .svg-icon{width:12px;height:12px}.save[aria-pressed=true] .svg-icon{fill:#525258}.store-empty{font-size:11px;color:#8f8c99;text-align:center;padding:30px 12px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#34323d;color:white;border-radius:10px;font-size:12px;padding:12px 18px;max-width:90vw;opacity:0;pointer-events:none;z-index:40;transition:opacity .15s}#toast.show{opacity:1}[dir=rtl]{text-align:right}[dir=rtl] .drawer{inset:0 0 0 auto;border-radius:15px 0 0 15px}[dir=rtl] .user-bubble{margin-left:0;margin-right:auto}[dir=rtl] .status-card header span:last-child{margin-left:0;margin-right:auto}[dir=rtl] .end-example{right:auto;left:13px}.phone:not([lang=en]) .guide-title{font-size:23px}.phone:not([lang=en]) .memory-block h2{font-size:17px}.phone:not([lang=en]) .plugin-card strong{font-size:11px}.phone:not([lang=en]) .guide-title{overflow-wrap:anywhere}.phone[lang=ar]{font-family:Arial,"Noto Sans Arabic",sans-serif}.phone[lang=ar] .welcome h1{font-style:normal;font-family:inherit;font-size:26px}@media(max-width:720px){.workspace{grid-template-columns:170px minmax(0,1fr)}.sidebar{padding:28px 14px}.brand{font-size:18px;gap:6px}.sidebar nav button{gap:8px;padding:14px 8px}.sidebar nav button strong{font-size:12px}.demo-stage{padding:20px 8px;overflow:hidden}.viewport{width:324px;height:720px}}@media(max-width:520px){.workspace{grid-template-columns:112px minmax(0,1fr)}.sidebar{padding:20px 9px;min-height:100svh}.brand{font-size:13px;gap:3px}.brand img{width:18px;height:23px}.demo-label{font-size:10px;line-height:1.6;margin:5px 0 20px}.sidebar nav button{padding:13px 7px;display:block}.sidebar nav button span{display:block;margin-bottom:6px}.sidebar nav button strong{font-size:11px;line-height:1.6}.nav-bottom select{font-size:10px;padding:9px 3px}.nav-bottom button{font-size:11px;line-height:1.6}.demo-stage{align-items:flex-start;padding-top:35px}.viewport{width:100%;height:auto;aspect-ratio:324/720;position:relative}.phone{transform-origin:top left;position:absolute;top:0;left:0}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@font-face{font-family:DemoRoboto;src:url('assets/Roboto.ttf') format('truetype');font-weight:100 900;font-display:swap}.phone{font-family:DemoRoboto,Arial,sans-serif}.status-bar{background:url('assets/status-store.png') center/324px 32px no-repeat}.status-bar>span{visibility:hidden}.phone.is-guide .status-bar{background-image:url('assets/status-guide.png')}.phone[data-scene=home] .status-bar{background-image:url('assets/status-home.png')}.guide-title{font-size:26px}.guide-visual{top:105px}.speech{max-width:178px;margin:10px auto 24px;font-size:13px;font-weight:500}.wave{margin-top:8px;margin-bottom:8px}.todo-preview{padding:16px 13px}.todo-preview header{font-size:10px;padding-bottom:13px}.todo-preview p{font-size:9px;margin:12px 0 0;color:#32343c}.todo-preview small{font-size:8px}.plugin-card strong{font-size:14px;line-height:1.4}.plugin-card p{font-size:11px;line-height:1.5}.price{font-size:10px}.save{font-size:10px}.plugin-card footer{padding:10px}.drawer-caption{margin:10px 4px 6px}.history-item{padding:9px 4px}.more-history{padding:9px 4px;margin:3px 0 4px}.drawer-section{margin:12px 4px}.account{text-align:start}.memory-block h2{font-weight:500}.memory-block p{max-width:210px;margin:0 auto}.phone:not([lang=en]) .plugin-card strong{font-size:12px}
.banner .newspaper{position:absolute;right:8px;top:36px;width:80px;height:92px;object-fit:contain;mix-blend-mode:multiply}.banner h2{max-width:180px}.banner p{max-width:191px;padding-right:5px}.banner small{position:relative}.banner h2,.banner p{position:relative}.phone[dir=rtl] .banner .newspaper{right:auto;left:8px}.phone[dir=rtl] .banner p{padding-right:0;padding-left:5px}
/* Compact control-to-preview grouping. Outer whitespace absorbs wide viewports. */
body{min-height:100svh;padding:32px 24px;display:flex;align-items:center;justify-content:center;background:#f6f6f9}
.workspace{width:608px;max-width:100%;min-height:720px;grid-template-columns:244px 324px;gap:40px;align-items:start}
.sidebar{position:static;height:auto;min-height:0;margin-top:32px;padding:24px 20px;border:1px solid #e9e8ef;border-radius:16px;gap:12px;box-shadow:0 4px 20px #302b4503}
.brand{font-size:22px;gap:9px}.demo-label{margin:3px 0 18px;font-size:12px;color:#70717d}
.sidebar nav{gap:8px}.sidebar nav button{padding:15px 12px;min-height:48px;gap:12px}.sidebar nav button strong{font-size:13px}.sidebar nav button span{color:#858394}
.nav-bottom{margin-top:20px;padding-top:24px;border-top:1px solid #ecebf1}.nav-bottom label{font-size:12px;color:#666773}.nav-bottom select{min-height:44px;font-size:13px}.nav-bottom button{min-height:44px;margin-top:12px;padding:10px 0;color:#5b5e80}
.demo-stage{padding:0;display:block;background:transparent;overflow:visible}.viewport{width:324px;height:720px}.phone{position:relative;transform-origin:top left;box-shadow:0 12px 40px #2926410c}
@media(max-width:660px){body{padding:24px 16px;align-items:flex-start}.workspace{width:588px;min-height:0;grid-template-columns:minmax(140px,1fr) minmax(0,324px);gap:20px}.sidebar{padding:20px 12px;margin-top:16px}.brand{font-size:18px;gap:6px}.sidebar nav button{padding:13px 8px;gap:8px}.sidebar nav button strong{font-size:12px}.viewport{width:100%;height:auto;aspect-ratio:324/720;position:relative}.phone{position:absolute;top:0;left:0}.nav-bottom select{font-size:12px;padding:10px 6px}}
@media(max-width:480px){body{padding:16px 10px}.workspace{width:100%;grid-template-columns:96px minmax(0,1fr);gap:12px}.sidebar{padding:15px 7px;border-radius:11px;margin-top:0}.brand{font-size:12px;gap:3px}.brand img{width:16px;height:21px}.demo-label{font-size:10px;line-height:1.5;margin:3px 0 9px}.sidebar nav{gap:7px}.sidebar nav button{display:block;padding:10px 6px;min-height:52px}.sidebar nav button span{display:block;font-size:10px;margin-bottom:4px}.sidebar nav button strong{font-size:11px;line-height:1.5}.nav-bottom{margin-top:12px;padding-top:16px}.nav-bottom label{font-size:11px}.nav-bottom select{font-size:11px;padding:8px 2px}.nav-bottom button{font-size:11px;margin-top:7px;line-height:1.5}.demo-stage{padding:0}}
/* One shared application surface: navigation and preview form a single unit. */
.workspace{width:658px;grid-template-columns:244px 324px;gap:40px;padding:24px;min-height:770px;background:#fff;border:1px solid #e6e5ed;border-radius:20px;box-shadow:0 16px 56px #302b4509}
.sidebar{margin-top:0;padding:24px 20px 24px 0;border:0;border-radius:0;box-shadow:none;background:transparent;align-self:stretch;border-right:1px solid #efedf4}
.demo-stage{background:transparent}.phone{box-shadow:none}.nav-bottom{border-top:1px solid #ecebf1}
@media(max-width:660px){.workspace{width:100%;grid-template-columns:minmax(140px,1fr) minmax(0,324px);gap:20px;padding:16px;min-height:0;border-radius:16px}.sidebar{padding:16px 12px 16px 0;margin-top:0;min-height:0}.viewport{width:100%;height:auto;aspect-ratio:324/720}}
@media(max-width:480px){body{padding:12px 6px}.workspace{grid-template-columns:90px minmax(0,1fr);gap:10px;padding:10px 6px;min-height:0;border-radius:12px}.sidebar{padding:10px 7px 10px 0;border-radius:0;min-height:0}.brand{font-size:11px}.demo-stage{padding:0}.nav-bottom select{font-size:10px}}
/* Mobile: visible scene/language controls above a single full-width demo. */
.mobile-controls{display:none}
@media(max-width:660px){
 body{display:block;padding:12px;min-height:100svh;background:#f6f6f9}
 .workspace{display:block;width:100%;max-width:430px;min-height:0;margin:0 auto;padding:0;gap:0;border-radius:14px;overflow:clip}
 .sidebar{display:none}
 .mobile-controls{display:flex;position:sticky;top:0;z-index:30;align-items:center;gap:8px;min-height:64px;padding:10px 12px;background:#fff;border-bottom:1px solid #e6e5ed}
 .mobile-controls select{min-width:0;min-height:44px;border:1px solid #dfddea;border-radius:8px;background:#f8f8fc;padding:8px;font-size:16px;color:#4f5283;text-overflow:ellipsis}
 #mobile-scene{flex:1.2}#mobile-language{flex:1}
 .demo-stage{display:block;padding:0;overflow:visible}
 .viewport{width:100%;height:auto;aspect-ratio:324/720;position:relative}
 .phone{position:absolute;left:0;top:0;transform-origin:top left}
}
@media(max-width:480px){body{padding:0}.workspace{border:0;border-radius:0;max-width:none}.mobile-controls{padding:8px 10px;min-height:60px}}
/* The mobile toolbar uses the same typographic and color system as the app. */
@media(max-width:660px){
 .mobile-controls{font-family:DemoRoboto,Arial,"Noto Sans",sans-serif;gap:12px;padding:10px 14px;background:#fff;border-bottom:1px solid #eeedf2}
 .mobile-controls select{font-family:inherit;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:0;min-height:44px;padding:10px 30px 10px 12px;border:1px solid #e8e7ee;border-radius:10px;background-color:#f8f8fb;color:#363943;box-shadow:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23777b8d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:background-color .15s,border-color .15s}
 #mobile-scene{color:#343745}#mobile-language{font-weight:400;color:#555965}
 .mobile-controls select:hover{background-color:#f0f0f7;border-color:#dcdbe6}
 .mobile-controls select:focus-visible{outline:2px solid #68649f;outline-offset:2px;background-color:#fff;border-color:#8986b1}
 .mobile-controls[dir=rtl] select{padding:10px 12px 10px 30px;background-position:left 10px center}
 .mobile-controls[lang=ar]{font-family:Arial,"Noto Sans Arabic",sans-serif}
}
/* Reference set 2026-10-22: shared app pages and native-style controls. */
.module-page{height:100%;display:flex;flex-direction:column;background:linear-gradient(145deg,#f1f5f4,#e8e6ef);color:#25262b}.module-page .topbar{flex-shrink:0;align-items:center;justify-content:flex-start;height:56px;padding:8px 12px}.module-page .top-title{font-size:12px;line-height:1.4;height:auto;min-height:34px;display:flex;align-items:center;padding:8px 14px;margin-inline:auto;max-width:235px;text-align:center}.module-scroll{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;padding:8px 14px 22px;scrollbar-width:thin}.module-scroll p{line-height:1.5}.module-card{display:block;border-radius:15px;background:#fff;padding:15px;margin:9px 0;text-align:start;overflow-wrap:anywhere}.module-card p{font-size:11px;color:#666771;margin:7px 0}.module-row{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:58px;padding:12px 7px;gap:12px;text-align:start}.module-row>span:first-child{flex:1;min-width:0}.module-row small,.choice small,.profile-card small{display:block;font-size:10px;font-weight:400;line-height:1.4;color:#777782;margin-top:4px}.module-row input[role=switch]{flex-shrink:0}.module-row input[role=switch],.shortcut-actions input[role=switch]{appearance:none;cursor:pointer;width:32px;height:19px;margin:0;border:1px solid #9b9ba7;border-radius:20px;background:#dddde4;position:relative}.module-row input[role=switch]:after,.shortcut-actions input[role=switch]:after{content:'';position:absolute;top:3px;left:3px;width:11px;height:11px;background:#858593;border-radius:50%}.module-row input[role=switch]:checked,.shortcut-actions input[role=switch]:checked{background:#565c91;border-color:#565c91}.module-row input[role=switch]:checked:after,.shortcut-actions input[role=switch]:checked:after{left:16px;background:#fff}.section-label{font-size:11px;font-weight:400;color:#656774;margin:22px 0 4px}.settings-group{padding:0 4px}.profile-card{display:flex;align-items:center;gap:13px;width:100%;text-align:start;padding:15px 7px}.profile-card>span:nth-child(2){flex:1}.profile-card .avatar{flex:0 0 38px;display:grid;place-items:center;border-radius:50%;height:38px;background:#e8e6f9;color:#55598e;font-size:18px}.points{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.points strong{font-size:18px}.points .text-button{margin-inline-start:auto}.module-empty{color:#767780;font-size:12px;text-align:center;padding:90px 12px 25px}.module-footer{padding:12px 14px 16px;flex-shrink:0}.module-footer>.primary,.module-scroll form>.primary{width:100%;min-height:42px;border-radius:24px}.module-search{width:100%;background:white;border:0;border-radius:24px;padding:12px 15px;font-size:12px;margin:6px 0 12px}.module-tabs{display:flex;border-radius:22px;background:#e2e1ec;padding:3px;gap:3px;margin:8px 0 15px;overflow-x:auto}.module-tabs button{flex:1;padding:8px 6px;border-radius:20px;font-size:11px;white-space:nowrap}.module-tabs .selected{background:white;box-shadow:0 1px 3px #0001}.shortcut-card{padding:14px;display:flex;gap:10px;align-items:center}.shortcut-card>div:first-child{flex:1;min-width:0}.shortcut-card strong{font-size:12px;font-weight:500}.shortcut-actions{display:flex;flex-direction:column;align-items:center;gap:13px}.shortcut-actions button{width:32px;height:32px;background:#ededf7;border-radius:50%;font-size:19px;color:#55598e}.choice{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}.choice[aria-pressed=true]{box-shadow:inset 0 0 0 1px #777ba7}.form-field{display:block;margin:16px 0 18px;color:#62636f;font-size:11px}.form-field input,.form-field select,.form-field textarea,.module-dialog input{width:100%;margin-top:7px;border:0;border-radius:13px;background:#fff;padding:14px 12px;font:inherit;font-size:13px;color:#25262b}.form-field textarea{height:160px;resize:vertical}.text-button{color:#565b8e;padding:10px 5px;font-size:11px;line-height:1.4}.secondary{width:100%;border-radius:22px;padding:13px;background:white;margin:12px 0}.auth-brand{font-size:22px;display:flex;justify-content:center;align-items:center;gap:10px;margin:18px 0}.auth-brand img{width:32px}.auth-links{display:flex;justify-content:space-between;gap:15px;margin:15px 0;color:#565b8e;font-size:11px}.local-note{font-size:10px!important;color:#777b87!important;line-height:1.5}.form-error{color:#a43c42;font-size:11px}.full-width{width:100%}.week-strip{display:flex;gap:4px;margin:16px 0}.week-strip button{flex:1;height:32px;border-radius:50%}.week-strip .selected{background:#565b8e;color:white}.todo-item{display:flex;gap:12px;align-items:center}.todo-item:has(input:checked) span{text-decoration:line-through;color:#888}.recording-indicator{text-align:center;margin:60px 0;color:#ad4c64}.permission-button{padding:6px 9px;background:#5b6094;color:white;font-size:9px;border-radius:15px;flex-shrink:0}.module-card summary{cursor:pointer;font-size:12px}.module-dialog-overlay{position:absolute;inset:0;z-index:40;background:#0006;display:grid;place-items:center;padding:18px}.module-dialog{width:100%;background:#edecf3;padding:22px;border-radius:25px}.module-dialog button{margin-top:16px;padding:10px}.module-dialog input{border:1px solid #ccc}.composer-menu{position:absolute;bottom:70px;left:16px;right:16px;max-height:370px;overflow:auto;z-index:9;padding:10px;border-radius:18px;background:#fff;box-shadow:0 6px 30px #29264133}.composer-menu>button{display:block;text-align:start;width:100%;padding:12px;font-size:12px}.result-actions{display:flex;gap:8px;flex-wrap:wrap}.card-open{text-align:start;font:inherit}.plugin-card header[role=button]{cursor:pointer}.model-trigger{font-weight:600;font-size:14px}.banner-next{position:absolute;right:8px;top:7px;width:28px;height:28px;border-radius:50%;background:#fff8;z-index:1;font-size:23px}.phone[data-theme=dark] .module-page{background:#23242c;color:#e7e7ee}.phone[data-theme=dark] .module-card,.phone[data-theme=dark] .form-field input,.phone[data-theme=dark] .module-search,.phone[data-theme=dark] .top-title{background:#333540;color:#eee}.phone[data-theme=dark] .module-row small{color:#b2b2c0}.module-scroll code{font-size:10px;overflow-wrap:anywhere}.phone:not([lang=en]) .module-row{font-size:11px}.sidebar nav button{min-height:44px;padding-block:12px}
.module-page .topbar{position:relative}.module-page .top-title{position:absolute;left:50%;transform:translateX(-50%);margin:0;max-width:230px;white-space:normal;justify-content:center}.settings-group:has([data-route=memory]){background:#ffffffa8;border-radius:14px;padding:0 10px}.module-scroll>.profile-card{background:#ffffffba;border-radius:14px}.module-page .points{display:grid;grid-template-columns:1fr auto}.points strong{font-size:30px;grid-row:2}.points .text-button{grid-column:2;grid-row:1}.module-row .svg-icon{color:#5f6070;width:17px;height:17px}.module-row span{overflow-wrap:anywhere}.hold-to-speak{flex:1;min-width:0;text-align:center;font-size:12px;touch-action:none}.hold-to-speak:active{background:#e8e8f5}.banner.voice-banner{background:linear-gradient(120deg,#efebff,#eff8ff)}.banner.voice-banner .newspaper{mix-blend-mode:multiply}.banner-dots{display:flex;gap:9px;justify-content:center}.banner-dots button{width:5px;height:5px;border-radius:10px;background:#bbbcc7}.banner-dots button.selected{width:16px;background:#6464ac}.store .topbar .store-search{min-width:0;flex:1;margin:0;padding:8px;border:1px solid #9c9cad;border-radius:5px;height:32px;font-size:10px;background:white}.tool-entry{border-top:1px solid #ececf1;padding:6px 0 12px}.tool-entry p{font-size:10px}.tool-entry select{width:100%;padding:7px;border:1px solid #e0dfe8;border-radius:8px;background:#f6f6fb;font-size:11px}.module-card button:focus-visible{outline-offset:1px}
.module-footer:has(.plugin-return){display:flex;align-items:center;gap:12px}.module-footer:has(.plugin-return)>.primary{flex:1;width:auto}.plugin-return{display:flex;flex-direction:column;align-items:center;max-width:74px;font-size:10px;gap:4px}.drawer-app{touch-action:none}

/* Embedded page height is content-driven; avoid viewport-height feedback loops. */
.embedded-demo body{min-height:0;align-items:flex-start}
/* Regional CJK outlines: consistent Chinese glyphs even without OS CJK fonts.
   Keep real variable weights; never stroke text or force grayscale smoothing. */
@font-face{font-family:DemoSansSC;src:url('assets/NotoSansSC-Demo.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:DemoSansHK;src:url('assets/NotoSansHK-Demo.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:DemoSansTC;src:url('assets/NotoSansTC-Demo.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root:lang(zh-CN){--demo-cjk:DemoSansSC,"PingFang SC","Microsoft YaHei",sans-serif}
:root:lang(zh-HK){--demo-cjk:DemoSansHK,"PingFang HK","Microsoft JhengHei",sans-serif}
:root:lang(zh-TW){--demo-cjk:DemoSansTC,"PingFang TC","Microsoft JhengHei",sans-serif}
:root:lang(zh),:root:lang(zh) .phone,:root:lang(zh) .mobile-controls{font-family:var(--demo-cjk);font-synthesis:none}
/* Dense Chinese strokes need a readable floor in the most compact UI copy. */
.phone:lang(zh) .input-row input,.phone:lang(zh) .plain-link,.phone:lang(zh) .guide-head button{font-size:11px}
.phone:lang(zh) .module-row small,.phone:lang(zh) .choice small,.phone:lang(zh) .profile-card small{font-size:11px;line-height:1.5}
.phone:lang(zh)[data-theme=dark] .module-tabs{background:#343641;color:#e7e7ee}
.phone:lang(zh)[data-theme=dark] .module-tabs .selected{background:#55598e;color:#fff}
.phone:lang(zh)[data-theme=dark] .section-label,.phone:lang(zh)[data-theme=dark] .module-row small,.phone:lang(zh)[data-theme=dark] .choice small,.phone:lang(zh)[data-theme=dark] .profile-card small{color:#b7b8c6}