.main{height:calc(100dvh - 86px);display:flex;flex-direction:column}.caption,.nav-row,.sample{flex-shrink:0}.surface{min-height:180px;overflow:auto;flex:1}.demo-heading{display:flex;align-items:start;justify-content:space-between;gap:20px;position:relative;z-index:1}.demo-heading h1{font-size:29px}.demo-heading p{margin:10px 0 18px}.demo-badge{display:inline-block;white-space:nowrap;border:1px solid #cbdfe2;border-radius:20px;padding:5px 10px;font-size:10px;color:#526d78;background:#f2f8f8}.demo-metrics{display:flex;gap:12px;flex-wrap:wrap}.demo-metrics button{flex:1;text-align:left;font-size:14px}.demo-metrics strong{font-size:26px;margin-right:12px;color:#27858d}.cards{gap:16px;margin-top:20px}.card h2{margin:0 0 10px;font-size:19px}.card p{font-size:14px;margin-bottom:16px}.card button{font-size:13px;margin-top:12px}.demo-list{display:grid;gap:10px;margin-top:20px}.demo-message{display:flex;width:100%;justify-content:space-between;align-items:center;gap:20px;text-align:left;padding:18px}.demo-message span{flex:1}.demo-message small,.demo-feed small{display:block;color:#617b85;margin-top:5px}.demo-message.is-read{opacity:.72}.demo-copy{white-space:pre-wrap;overflow-wrap:anywhere}.demo-project-image{width:100%;max-height:190px;object-fit:contain;border-radius:12px;margin-bottom:14px}.demo-file-icon{font-size:34px;color:#27858d}.demo-social-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}.demo-feed img{width:100%;max-height:220px;object-fit:cover;border-radius:12px}.demo-feed{align-self:start}.demo-feed .demo-copy{font-size:14px}.demo-social-grid form,.demo-detail form,#sample-chat{display:grid;gap:12px}label{display:grid;gap:8px;font-size:14px}input,textarea,select{font:inherit;max-width:100%;width:100%;padding:12px;border:1px solid #cbdde2;border-radius:12px;background:#f5f8f9;color:inherit;box-sizing:border-box}textarea{resize:vertical}small{font-size:12px;line-height:1.5}progress{display:block;width:100%;height:8px;margin-top:15px;accent-color:#27858d}.demo-detail{width:min(640px,calc(100vw - 32px));max-height:88dvh;overflow:auto;padding:26px;border:1px solid #cbdde2;border-radius:22px;background:white;color:#29434b;box-shadow:0 30px 80px #10212e33}.demo-detail::backdrop{background:#10212e66;backdrop-filter:blur(4px)}.demo-detail p,.demo-detail li{line-height:1.7}.demo-detail .demo-badge{margin-bottom:12px}.demo-check{display:flex;align-items:center;padding:10px 0}.demo-check input{width:auto;accent-color:#27858d}.demo-chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.demo-chips button{font-size:12px}.demo-chat .card{margin-top:12px}.dark .demo-badge,.dark input,.dark textarea,.dark select{background:#203746;color:#d6e5ec;border-color:#425c6c}.dark .demo-badge{color:#c0d6df}.dark .demo-message small,.dark .demo-feed small{color:#a3b6c2}body.dark .demo-detail{background:#172a39;color:#e6edf3;border-color:#425c6c}.dark .demo-metrics strong{color:#a4dfdf}.guide{max-height:180px;overflow:auto}.sample{font-size:10px;margin-block:10px 0}
@media(max-width:760px){.main{height:calc(100dvh - 140px);padding:14px}.nav-row{margin-top:12px}.demo-heading{flex-direction:column;gap:8px}.demo-heading h1{font-size:24px}.demo-heading .demo-badge{white-space:normal}.demo-social-grid{grid-template-columns:1fr}.demo-detail{padding:20px}.demo-metrics button{min-width:120px}.surface{padding:20px}.demo-message{gap:10px;padding:12px}.demo-message small{font-size:11px}.demo-heading p{font-size:13px}.card{padding:18px}}

.demo-context{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-shrink:0}.demo-context button{font-size:12px;padding:6px 12px}.demo-context .caption{font-size:10px}@media(max-width:760px){.demo-context .caption{font-size:8px}.demo-context button{font-size:10px}}
/* Compact navigation leaves useful working room in shorter app windows. */
@media(max-height:760px){.nav-row{height:160px;margin-top:12px}.tabs button{height:128px}.tabs button.active{height:161px}.portrait-host{height:160px}.surface{min-height:120px}.guide{font-size:12px;max-height:140px}}
@media(max-width:760px) and (max-height:760px){.nav-row{height:110px}.tabs button{height:84px;padding-top:12px;gap:10px;font-size:11px}.tabs button.active{height:111px}.portrait-host{height:110px;width:95px}.main{padding:10px}.sample{font-size:9px}.surface{padding:16px}.demo-heading h1{font-size:22px}}
/* Sprite cells are 384 × 512; preserve that ratio at every viewport height. */
.portrait-host[data-assistant=mei] .portrait-rig{inset:auto auto 0 50%;height:100%;width:auto;aspect-ratio:3/4;translate:-50% 0;max-width:100%}
.tabs button{display:block;writing-mode:horizontal-tb;padding:0}.tabs .tab-icon{position:absolute;left:0;right:0;top:20px;line-height:1;font-size:22px;z-index:1}.tabs .tab-label{position:absolute;top:62px;left:50%;transform:translateX(-50%);writing-mode:vertical-rl;white-space:nowrap;line-height:1.15;font-size:14px}.command{min-width:0}.command-prompt{min-width:0;overflow:hidden;text-overflow:ellipsis}.command button{flex-shrink:0}
@media(max-height:760px){.tabs .tab-icon{top:14px;font-size:18px}.tabs .tab-label{top:44px;font-size:12px}}
@media(max-width:760px){.tabs .tab-label{top:48px;font-size:12px}.tabs .tab-icon{top:16px;font-size:18px}}
@media(max-width:760px) and (max-height:760px){.tabs .tab-icon{top:8px;font-size:14px}.tabs .tab-label{top:30px;font-size:9px}}
.dark .tabs button.active{color:#a4dfdf}
/* Dense work gets the full canvas; the surrounding workspace returns with Back. */
.main.is-focus .nav-row{display:none}.main.is-focus .surface{margin-top:16px;min-height:0}.main.is-focus .demo-context{gap:16px}.main.is-focus .demo-context .caption{flex:1}.main.is-focus .surface:before{width:145px;height:35px}.demo-context [hidden]{display:none}.demo-social-grid form button{justify-self:start}.demo-social-grid form textarea{min-height:180px}
.expand-page-choice{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap;cursor:pointer}.expand-page-choice input{width:16px;height:16px;accent-color:#27858d;margin:0}.demo-context .caption{flex:1;min-width:0}.main.is-focus .demo-context .caption{display:none}
/* Reserve the same toolbar slots and height in both page modes. */
.demo-context,.main.is-focus .demo-context{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:36px;gap:0 16px;height:36px;min-height:36px;align-items:center}
.demo-context .caption,.demo-context #back-workspace{grid-column:1;grid-row:1;justify-self:start}.demo-context .expand-page-choice{grid-column:2;grid-row:1}.demo-context #expand-demo{grid-column:3;grid-row:1}.demo-context #back-workspace{width:auto}
/* Full view reveals more working room instead of enlarging the interface. */
@media(min-width:761px){body{font-size:14px}header{height:72px;padding:10px 28px;grid-template-columns:175px minmax(0,1fr) 220px;gap:18px}.brand{font-size:23px}.brand img{width:32px}.command{font-size:13px;padding:6px 8px 6px 14px;gap:8px}.command button{font-size:13px;padding:8px 12px}.talk{min-width:86px}.actions{min-width:220px}#motion{width:150px;min-width:150px;font-size:13px}#theme{width:42px;min-width:42px}.main{height:calc(100dvh - 72px);padding:22px 28px}.nav-row{height:184px;margin-top:14px;gap:20px}.tabs{gap:8px}.tabs button{width:62px;height:156px;border-radius:16px 16px 8px 8px}.tabs button.active{height:185px;border-radius:16px 16px 0 0}.tabs .tab-icon{top:16px;font-size:20px}.tabs .tab-label{top:50px;font-size:13px}.portrait-host{width:160px;height:184px}.guide{font-size:13px}.surface{padding:24px}.demo-heading h1{font-size:26px}.demo-heading p{font-size:14px}.card{padding:20px}.card h2{font-size:17px}.card p{font-size:13px}.demo-metrics strong{font-size:22px}.demo-message{padding:14px}.demo-social-grid form textarea{min-height:150px}}
@media(min-width:761px) and (max-height:760px){.nav-row{height:144px;margin-top:12px}.tabs button{height:116px}.tabs button.active{height:145px}.tabs .tab-icon{top:10px;font-size:17px}.tabs .tab-label{top:38px;font-size:11px}.portrait-host{height:144px;width:125px}.guide{font-size:12px;max-height:130px}}
/* Expansion belongs to the page-navigation area, below its contextual tip. */
.guide .expand-page-choice{display:inline-flex;align-self:flex-start;margin-top:12px;padding:8px 12px;border:1px solid #c4d9df;border-radius:12px;background:#fff;color:#365e68}.guide{overflow:visible;max-height:none}.guide p{margin-bottom:0}.dark .guide .expand-page-choice{background:#203746;color:#dfe7ed;border-color:#425c6c}
@media(max-width:1100px){.guide{display:flex;flex:0 0 105px;max-width:105px;align-self:center}.guide strong,.guide p{display:none}.guide .expand-page-choice{white-space:normal;margin-top:0}.nav-row{gap:12px}}
@media(max-width:950px){.portrait-host{display:none}}

/* Keep the page control anchored to the card, independent of tip length. */
.guide{display:grid;align-self:stretch;height:100%;max-height:none;grid-template-rows:26px minmax(0,1fr) 34px;gap:8px;padding:4px 0 10px;overflow:visible;min-width:0}
.guide-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.guide-heading strong{white-space:nowrap}.tip-styles{display:flex;gap:3px}.tip-styles button{font-size:10px;padding:3px 6px;border-radius:7px}.tip-styles button[aria-pressed=true]{background:#d5eeee;color:#216b73;border-color:#9bcdd0}
.guide #tip{margin:0;overflow:auto;min-height:0;line-height:1.6}.guide .expand-page-choice{grid-row:3;align-self:end;justify-self:start;height:34px;margin:0;padding:5px 12px}
@media(max-width:1100px){.guide{display:grid;align-self:stretch;flex:0 0 105px;max-width:105px}.guide-heading,.guide #tip{display:none}.guide .expand-page-choice{margin:0;white-space:normal}}

/* Nine tabs retain their width; the guide follows Settings without overlap. */
.tabs{flex-shrink:0}.guide{flex:1;max-width:340px}.portrait-host{flex-shrink:0}
@media(min-width:1101px) and (max-width:1250px){.portrait-host{width:110px}.nav-row{gap:14px}.guide-heading{flex-wrap:wrap}.guide{grid-template-rows:44px minmax(0,1fr) 34px}}
@media(max-width:1100px){.tabs{flex-shrink:1;overflow-x:auto}.guide{flex:0 0 105px}.portrait-host{display:none}}

/* A centred close tab joins the expanded card border. */
.main.is-focus .demo-context{position:relative;display:block;height:36px;min-height:36px;margin-bottom:0;z-index:4}
.main.is-focus .demo-context #back-workspace{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);height:34px;padding:6px 18px;border-radius:12px 12px 0 0;border-bottom:0;background:#fff;white-space:nowrap;box-shadow:0 -2px 8px #29434b08}
.main.is-focus .surface{margin-top:16px;padding-top:26px}.dark .main.is-focus .demo-context #back-workspace{background:#172a39}
/* Taper the raised close-tab shadow back into the card seam. */
.main.is-focus .demo-context #back-workspace{isolation:isolate;box-shadow:0 -3px 6px #29434b0a}
.main.is-focus .demo-context #back-workspace::before{content:'';position:absolute;z-index:-1;pointer-events:none;left:-15px;right:-15px;top:-9px;bottom:0;background:linear-gradient(to bottom,#29434b26,#29434b12 55%,#29434b03);clip-path:polygon(0 0,100% 0,94% 100%,6% 100%);filter:blur(7px);border-radius:16px 16px 0 0}
.dark .main.is-focus .demo-context #back-workspace::before{background:linear-gradient(to bottom,#0006,#0002 60%,transparent)}
/* Keep the white surface clean: faint diffuse lift, crisp contact at the seam. */
.main.is-focus .demo-context #back-workspace{background:#fff;box-shadow:0 -8px 17px 1px #29434b09,0 -1px 3px #29434b10}
.main.is-focus .demo-context #back-workspace::before{content:none}
.dark .main.is-focus .demo-context #back-workspace{background:#172a39;box-shadow:0 -8px 17px 1px #00000014,0 -1px 3px #00000024}

/* Raised flap casts a restrained gradient onto the card below it. */
.main.is-focus .demo-context #back-workspace{box-shadow:none}
.main.is-focus .demo-context #back-workspace::after{content:'';position:absolute;pointer-events:none;left:-10px;right:-10px;top:100%;height:14px;background:linear-gradient(to bottom,rgba(41,67,75,.10),rgba(41,67,75,.035) 48%,transparent);clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);filter:blur(2px);border-radius:0 0 45% 45%}
.dark .main.is-focus .demo-context #back-workspace::after{background:linear-gradient(to bottom,#0003,#0000000d 48%,transparent)}

.demo-context{position:relative}.demo-context #expand-demo,.main.is-focus .demo-context #expand-demo{position:absolute;right:0;top:0;width:124px;height:36px;white-space:nowrap}

/* The raised top casts a broad shadow; the base meets the card without a ledge. */
.main.is-focus .demo-context #back-workspace{isolation:isolate;box-shadow:none;background:#fff}
.main.is-focus .demo-context #back-workspace::before{content:'';position:absolute;z-index:-2;left:-16px;right:-16px;top:-10px;bottom:0;background:linear-gradient(to bottom,#29434b18,#29434b08 55%,transparent);clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,16px 100%);filter:blur(6px);border-radius:20px 20px 0 0;pointer-events:none}
.main.is-focus .demo-context #back-workspace::after{content:'';position:absolute;z-index:-1;inset:0;height:auto;background:inherit;border-radius:inherit;clip-path:none;filter:none;pointer-events:none}
.dark .main.is-focus .demo-context #back-workspace{background:#172a39}.dark .main.is-focus .demo-context #back-workspace::before{background:linear-gradient(to bottom,#0003,#00000010 55%,transparent)}.dark .main.is-focus .demo-context #back-workspace::after{background:inherit}

@media(min-width:761px){.tabs button{height:168px}}
@media(min-width:761px) and (max-height:760px){.nav-row{height:160px}.tabs button{height:130px}.tabs button.active{height:161px}.portrait-host{height:160px}}

/* Soft distant upper edge, crisp contact edge, restrained interior top shading. */
.main.is-focus .demo-context #back-workspace{background:linear-gradient(to bottom,#f1f5f6 0%,#fafcfc 35%,#fff 75%);box-shadow:0 1px 1px #29434b10}
.main.is-focus .demo-context #back-workspace::before{top:-11px;bottom:2px;filter:blur(7px);background:linear-gradient(to bottom,#29434b16,#29434b08 55%,transparent)}
.dark .main.is-focus .demo-context #back-workspace{background:linear-gradient(to bottom,#142532,#172a39 75%);box-shadow:0 1px 1px #0003}
.demo-heading h1{font-size:22px}.card h2{font-size:16px}.portrait-host{height:210px;width:175px}
@media(min-width:761px) and (max-height:760px){.portrait-host{height:180px;width:150px}}

.main.is-focus .demo-context #back-workspace::before{left:-2px;right:-2px;top:-2px;bottom:0;clip-path:none;filter:none;background:transparent;box-shadow:0 -6px 18px 2px #29434b14;border-radius:16px 16px 0 0}.dark .main.is-focus .demo-context #back-workspace::before{background:transparent;box-shadow:0 -6px 18px 2px #0000002b}

.main.is-focus .demo-context #back-workspace::before{left:-14px;right:-14px;top:-12px;bottom:0;box-shadow:none;filter:none;clip-path:none;border-radius:0;background-image:url('./close-tab-shadow.svg');background-size:100% 100%;background-repeat:no-repeat;background-color:transparent}

.portrait-host{height:230px;width:190px}.portrait-host[hidden]{display:none!important}@media(min-width:761px) and (max-height:760px){.portrait-host{height:195px;width:165px}}
@media(min-width:761px){.nav-row{height:212px}.tabs button{height:184px}.tabs button.active{height:213px}}
@media(min-width:761px) and (max-height:760px){.nav-row{height:188px}.tabs button{height:156px}.tabs button.active{height:189px}}

/* Normalize visible portrait height, not the source PNG canvas. */
.portrait-host .portrait-rig,.portrait-host[data-assistant=mei] .portrait-rig{inset:auto auto 0 50%;height:100%;width:auto;aspect-ratio:3/4;translate:-50% 0;max-width:none}.portrait-host .portrait-still{top:auto;bottom:0;width:100%;height:var(--portrait-image-height,97%);object-fit:cover;object-position:center bottom}
.portrait-host[data-assistant=milan]{--portrait-image-height:97.47%}.portrait-host[data-assistant=david]{--portrait-image-height:96.56%}.portrait-host[data-assistant=kenji]{--portrait-image-height:96.80%}.portrait-host[data-assistant=samir]{--portrait-image-height:95.66%}.portrait-host[data-assistant=emma]{--portrait-image-height:98.92%}.portrait-host[data-assistant=amara]{--portrait-image-height:97.64%}.portrait-host[data-assistant=sara]{--portrait-image-height:97.05%}.portrait-host[data-assistant=mei]{--portrait-image-height:94.3%}

.main.is-focus .demo-context #back-workspace{box-shadow:none}

.nav-row{margin-top:30px}

@property --splash-a{syntax:'<color>';inherits:true;initial-value:#a4dfdf}@property --splash-b{syntax:'<color>';inherits:true;initial-value:#b6d6f3}@property --splash-c{syntax:'<color>';inherits:true;initial-value:#edbbad}
.surface{transition:--splash-a 1.1s ease,--splash-b 1.1s ease,--splash-c 1.1s ease}.surface[data-section=mail]{--splash-a:#9fdcd9;--splash-b:#b3d3f2;--splash-c:#e9b2a5}.surface[data-section=calendar]{--splash-a:#b3d3f2;--splash-b:#c9c6ed;--splash-c:#a4dfdf}.surface[data-section=social]{--splash-a:#bce3e5;--splash-b:#c9d9f3;--splash-c:#edc5ba}.surface[data-section=settings]{--splash-a:#c9c6ed;--splash-b:#a4dfdf;--splash-c:#edbbad}
.surface::before{background:linear-gradient(110deg,var(--splash-b),var(--splash-a) 45%,var(--splash-c) 80%,var(--splash-b));background-size:220% 100%;animation:aveliqo-splash-flow 14s ease-in-out infinite;transform-origin:100% 0}
@keyframes aveliqo-splash-flow{0%,100%{background-position:0% 50%;border-bottom-left-radius:100% 100%}50%{background-position:100% 50%;border-bottom-left-radius:88% 90%}}
.motion-paused .surface::before{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.surface{transition:none}.surface::before{animation:none}}
.main.is-focus .demo-context #back-workspace::before{opacity:.28}

.surface::before{background-image:url('./layered-splash.svg');background-size:100% 100%;background-repeat:no-repeat;opacity:1;animation:aveliqo-layered-splash 14s ease-in-out infinite}
@keyframes aveliqo-layered-splash{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.94)}}
.motion-paused .surface::before{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.surface::before{animation:none}}

/* Organic layers move independently; use a still asset when motion is disabled. */
.motion-paused .surface::before{background-image:url('./layered-splash-still.svg')}@media(prefers-reduced-motion:reduce){.surface::before{background-image:url('./layered-splash-still.svg')}}

.surface h1,.surface h2{font-size:18px!important;line-height:1.35;letter-spacing:-.25px;font-weight:650}.surface h3{font-size:15px!important;line-height:1.4;letter-spacing:0;font-weight:650}

.surface::before{border-radius:0 24px 0 0}