/* Laptop showcase (showcase.js). The app copy is drawn at 1280x800 and scaled to the screen. */
.showcase{position:relative;padding:120px 5% 110px;text-align:center}
.showcase>h2{font-size:clamp(32px,4.2vw,56px);line-height:1.08;font-weight:750;letter-spacing:-.03em;max-width:15ch;margin:0 auto 56px;text-wrap:balance}
/* Sized so the whole laptop fits under the header on short screens. */
.laptop{position:relative;width:min(100%,1040px,calc((100svh - 190px)*1.5));margin:0 auto;direction:ltr}
.laptop::before{content:'';position:absolute;inset:8% 6% -4%;background:radial-gradient(50% 50% at 50% 55%,#ed334e2e,#ed334e00 70%);filter:blur(30px);z-index:-1;pointer-events:none}
.laptop-lid{position:relative;padding:1.7% 1.7% 2.3%;border-radius:clamp(10px,2.1vw,22px) clamp(10px,2.1vw,22px) 6px 6px;background:linear-gradient(#2c2c31,#131316);box-shadow:inset 0 0 0 1px #ffffff17,inset 0 1px #ffffff26,0 30px 60px -28px #000}
.laptop-screen{position:relative;aspect-ratio:16/10;border-radius:clamp(4px,.9vw,9px);overflow:hidden;background:#030304;contain:layout paint}
.laptop-screen::after{content:'';position:absolute;inset:0;background:linear-gradient(118deg,#ffffff0d,#ffffff00 38%);pointer-events:none}
.laptop-notch{position:absolute;top:1.7%;left:50%;width:12%;height:3.2%;transform:translateX(-50%);background:#000;border-radius:0 0 clamp(4px,.8vw,9px) clamp(4px,.8vw,9px)}
.laptop-base{position:relative;height:clamp(10px,2vw,20px);margin:0 -6.5%;border-radius:1px 1px 40% 40% / 1px 1px 100% 100%;background:linear-gradient(#45454c,#232327 45%,#0e0e10);box-shadow:inset 0 1px #ffffff30,0 18px 30px -14px #000}
.laptop-base span{position:absolute;top:0;left:50%;width:15%;height:45%;transform:translateX(-50%);border-radius:0 0 10px 10px;background:linear-gradient(#18181b,#2a2a2f)}
.showcase-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:880px;margin:44px auto 0}
.showcase-tabs button{font:inherit;font-size:13px;font-weight:600;color:#cfc6cb;background:#ffffff08;border:1px solid #ffffff14;border-radius:999px;padding:9px 15px;cursor:pointer;transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,transform 140ms var(--ease-out)}
.showcase-tabs button:active{transform:scale(.97)}
.showcase-tabs button[aria-pressed=true]{background:#f4f1f3;color:#0b0b0d;border-color:#f4f1f3}
@media(hover:hover) and (pointer:fine){.showcase-tabs button[aria-pressed=false]:hover{background:#ffffff12;color:#fff}}
.showcase-caption{min-height:1.5em;margin:22px auto 0;max-width:60ch;font-size:16px;color:#d9d0d5}
.showcase-note{margin-top:10px;font-size:12px;color:#8e8389}
@media(max-width:720px){.showcase{padding:90px 5% 80px}.showcase>h2{margin-bottom:36px}.showcase-tabs{gap:6px;margin-top:30px}.showcase-tabs button{font-size:12px;padding:8px 12px}.showcase-caption{font-size:15px}}

/* Notch features (first story section, English): Nusa-style list of icon, short title and one line, no cards. */
/* Two flowing columns (not grid rows), so a short item never leaves a gap beside a taller one. */
.notch-list{list-style:none;margin:0;padding:0;columns:2;column-gap:34px;align-self:center;position:relative;z-index:6}
.notch-list li{display:flex;gap:14px;align-items:flex-start;break-inside:avoid;margin-bottom:28px}
/* App-icon tiles like nusa's: a solid colour per feature, a soft top gloss and a white symbol. */
.notch-icon{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(#ffffff24,#fff0 55%),var(--c,#ed334e);box-shadow:inset 0 .5px #ffffff38,0 1px 2px #0003,0 6px 18px -8px var(--c,#ed334e)}
.notch-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.notch-list li:nth-child(1){--c:#ed334e}.notch-list li:nth-child(2){--c:#2bb6a3}.notch-list li:nth-child(3){--c:#7d66fa}.notch-list li:nth-child(4){--c:#0a84ff}.notch-list li:nth-child(5){--c:#ffa928}.notch-list li:nth-child(6){--c:#30c759}.notch-list li:nth-child(7){--c:#5e5ce6}.notch-list li:nth-child(8){--c:#30abdb}.notch-list li:nth-child(9){--c:#ff385f}.notch-list li:nth-child(10){--c:#4cc76b}.notch-list li:nth-child(11){--c:#ff7a2b}
.notch-list h3{font-size:16px;font-weight:700;line-height:1.3;margin:2px 0 5px;letter-spacing:-.01em}
.notch-list p{font-size:14px;line-height:1.5;color:#b9adb3;margin:0}
/* Small laptop above the notch heading. The orb docks by its camera (scene.js data-notch stop) and becomes the notch. */
#overload .product-copy:has(.mini-laptop){padding-top:0}
.mini-laptop{width:min(340px,100%);margin:0 0 46px;direction:ltr}
.ml-lid{padding:9px 9px 12px;border-radius:14px 14px 5px 5px;background:linear-gradient(#2c2c31,#131316);box-shadow:inset 0 0 0 1px #ffffff17,inset 0 1px #ffffff26,0 24px 40px -24px #000}
.ml-screen{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#0a0815;container-type:inline-size}
/* Desktop picture supplied by the user (cropped screen of a MacBook photo). */
.ml-wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ml-base{height:9px;margin:0 -6%;border-radius:1px 1px 40% 40%/1px 1px 100% 100%;background:linear-gradient(#45454c,#232327 45%,#0e0e10);box-shadow:inset 0 1px #ffffff30}
/* Closed notch from the app (notch.css, orb.js): 150x32 pill, 14px radius and ears, the eyes of a 130px orb with the
   ball hidden, centred 21.5px down so they sit mid-notch; they never look around, they only blink.
   --k turns one app pixel into a share of this screen's width, so the notch is 18% of the screen at any size. */
.ml-screen{--k:.12cqw}
/* The orb docks as a 40-unit ball (host 50) touching the top edge, then becomes the notch. */
.story-section .mini-laptop .orb-stop{position:absolute;left:50%;top:calc(var(--k)*-5);width:calc(var(--k)*50);height:calc(var(--k)*50);margin-left:calc(var(--k)*-25)}
.ml-notch{position:absolute;left:50%;top:0;width:calc(var(--k)*40);height:calc(var(--k)*40);margin-left:calc(var(--k)*-20);border-radius:calc(var(--k)*20);background:#000;opacity:0;transition:width .5s cubic-bezier(.34,1.32,.5,1),height .5s cubic-bezier(.34,1.32,.5,1),margin-left .5s cubic-bezier(.34,1.32,.5,1),border-radius .5s cubic-bezier(.34,1.32,.5,1),opacity .18s ease}
.ml-notch::before,.ml-notch::after{content:'';position:absolute;top:0;width:calc(var(--k)*14);height:calc(var(--k)*14);opacity:0;transition:opacity .2s ease}
.ml-notch::before{left:calc(var(--k)*-14);background:radial-gradient(circle at 0 100%,#0000 calc(var(--k)*13),#000 calc(var(--k)*14))}
.ml-notch::after{right:calc(var(--k)*-14);background:radial-gradient(circle at 100% 100%,#0000 calc(var(--k)*13),#000 calc(var(--k)*14))}
.ml-eyes{position:absolute;left:50%;top:calc(var(--k)*-43.5);width:calc(var(--k)*130);height:calc(var(--k)*130);margin-left:calc(var(--k)*-65);fill:#fff;stroke:none;overflow:visible;filter:drop-shadow(0 0 1px #ffffff70);clip-path:circle(42.5%);opacity:0;transition:opacity .2s ease;pointer-events:none}
.ml-eyes .eyelids{transform-box:view-box;transform-origin:250px 230px}
html.orb-notched .ml-notch{opacity:1;width:calc(var(--k)*150);height:calc(var(--k)*32);margin-left:calc(var(--k)*-75);border-radius:0 0 calc(var(--k)*14) calc(var(--k)*14)}
html.orb-notched .ml-notch::before,html.orb-notched .ml-notch::after{opacity:1;transition-delay:.22s}
html.orb-notched .ml-eyes{opacity:1;transition-delay:.28s}
html.orb-notched .ml-eyes .eyelids{animation:ml-blink 4.6s 1.2s infinite}
@keyframes ml-blink{0%,45%,49%,100%{transform:scaleY(1)}47%{transform:scaleY(.08)}}
html.orb-notched #child-orb>canvas,html.orb-notched #child-orb>.face,html.orb-notched #child-orb>.fallback{opacity:0}
html.orb-notched #child-orb .arrival-glow{visibility:hidden}
@media(prefers-reduced-motion:reduce){html.orb-notched .ml-eyes .eyelids{animation:none}}
.reduced-motion.orb-notched .ml-eyes .eyelids{animation:none}

@media(min-width:721px){#overload:has(.notch-list){grid-template-columns:.75fr 1.25fr;gap:7%}}
@media(max-width:720px){.notch-list{columns:1}.notch-list li{margin-bottom:22px}}

/* 1,000+ connections: openswarm.com's drifting app wall (rows of tiles, 70s loop, tilted in 3D, faded edges),
   turned into five columns that drift up and down in turn. Each column holds its tiles twice for a seamless loop. */
.app-wall{position:relative;height:600px;perspective:1000px;overflow:hidden;-webkit-mask:linear-gradient(#0000,#000 16%,#000 84%,#0000),linear-gradient(90deg,#0000,#000 6%,#000 94%,#0000);-webkit-mask-composite:source-in;mask:linear-gradient(#0000,#000 16%,#000 84%,#0000),linear-gradient(90deg,#0000,#000 6%,#000 94%,#0000);mask-composite:intersect}
.aw-tilt{display:flex;justify-content:center;gap:16px;height:100%;transform:rotateY(-20deg) rotateX(4deg) scale(1.04)}
.aw-col{display:flex;flex-direction:column;gap:16px;padding-bottom:16px;animation:aw-drift 64s linear infinite}
/* Alternate directions and stagger the start heights so the rows never line up. */
.aw-col:nth-child(even){animation-direction:reverse}
.aw-col:nth-child(2){margin-top:-46px}.aw-col:nth-child(3){margin-top:-20px}.aw-col:nth-child(4){margin-top:-66px}.aw-col:nth-child(5){margin-top:-33px}
.aw-col:nth-child(3){animation-duration:72s}.aw-col:nth-child(5){animation-duration:58s}
@keyframes aw-drift{to{transform:translateY(-50%)}}
.aw-tile{flex:none;width:72px;height:72px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(#ffffff17,#ffffff07);border:1px solid #ffffff1a;box-shadow:inset 0 1px #ffffff24,0 16px 26px -16px #000c}
.aw-tile svg{width:34px;height:34px}.aw-tile svg path{stroke:none}
@media(max-width:720px){.app-wall{height:380px}.aw-tilt,.aw-col{gap:10px}.aw-col{padding-bottom:10px}.aw-tile{width:52px;height:52px;border-radius:13px}.aw-tile svg{width:25px;height:25px}}
/* The connections text sits in the site's own glass card (website.css .glass / .product-panel). */
#capabilities:has(.app-wall) .story-copy-content{padding:36px 36px 38px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--shine);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#capabilities:has(.app-wall) .story-copy-content p{margin-bottom:0}
@media(max-width:720px){#capabilities:has(.app-wall) .story-copy-content{padding:28px 24px 30px;border-radius:18px}}
@media(prefers-reduced-motion:reduce){.aw-col{animation:none}}
.reduced-motion .aw-col{animation:none}

/* "One dashboard" laptop: the big laptop frame at column width, crossfading the app's Inbox and Office captures. */
.work-laptop{position:relative;z-index:6;min-width:0}
.work-laptop .laptop{width:100%}
.wl-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease-out)}
.wl-shot.on{opacity:1}
.wl-tabs{display:flex;justify-content:center;gap:8px;margin-top:26px}
.wl-tabs button{font:inherit;font-size:13px;font-weight:600;color:#cfc6cb;background:#ffffff08;border:1px solid #ffffff14;border-radius:999px;padding:9px 18px;cursor:pointer;transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,transform 140ms var(--ease-out)}
.wl-tabs button:active{transform:scale(.97)}
.wl-tabs button[aria-pressed=true]{background:#f4f1f3;color:#0b0b0d;border-color:#f4f1f3}
@media(hover:hover) and (pointer:fine){.wl-tabs button[aria-pressed=false]:hover{background:#ffffff12;color:#fff}}
@media(prefers-reduced-motion:reduce){.wl-shot{transition:none}}

/* Today + Activity: the app's goals panel and Activity page (values read from the running app), in the left column
   like the other alternate sections. Both are drawn at the same 660x653 size and scaled to the column width
   (showcase.js sets the zoom), one at a time, switched by tabs like the Inbox / Office laptop. */
.app-duo{position:relative;z-index:6;min-width:0;text-align:left;font:13px/normal Manrope,sans-serif;color:#f1f1f3}
/* Shared by every app frame (Goals/Activity, Brain, Calls/Automations/Skills): --fw x --fh is the app's design size. */
.app-frame{position:relative;width:100%;aspect-ratio:var(--fw)/var(--fh)}
.app-frame .app-card{position:absolute;left:0;top:0;width:calc(var(--fw)*1px);height:calc(var(--fh)*1px);box-sizing:border-box;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility 0s .45s}
.app-frame .app-card.on{opacity:1;visibility:visible;transition-delay:0s}
.duo-frame .goals-card{padding:30px 30px 32px}
/* Real app captures (assets/app-page-*.jpg): the whole app window, framed like one. */
.shot-frame{border-radius:12px;overflow:hidden;border:1px solid #ffffff17;background:#030304;box-shadow:0 30px 60px -30px #000c,inset 0 1px #ffffff10}
.app-frame .app-shot{width:100%;height:100%;object-fit:cover;border:0;border-radius:0;padding:0}
.duo-tabs{margin-top:22px}
.app-duo .app-duo-note{text-align:center;margin-top:12px}
@media(prefers-reduced-motion:reduce){.app-frame .app-card{transition:none}}
/* Brain, Calls, Automations and Skills pages (same app values as Activity). */
.app-card .shell-box+.shell-box{margin-top:14px}
.ac-btn{flex:none;padding:8px 14px;border-radius:10px;background:#f1f1f3;color:#0b0b0d;font-size:12px;font-weight:650;white-space:nowrap}
.ac-btn.red{background:#ff435f;color:#fff}
.ac-field{margin-top:14px;padding:10px 12px;border-radius:10px;background:#ffffff06;border:.8px solid #ffffff12;color:#6f6b76;font-size:13px}
.ac-row{display:flex;gap:10px;align-items:center}.ac-row .ac-field{flex:1}.ac-row .ac-btn{margin-top:14px}
.ac-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.ac-chips span{padding:6px 12px;border-radius:999px;border:.8px solid #ffffff17;font-size:12px;color:#d6d2da}
.app-card .box-note{margin:12px 0 0;font-size:12px;color:#847e89}
.brain-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:14px;align-items:stretch}
.brain-grid .shell-box+.shell-box{margin-top:0}
.map-box{display:flex;flex-direction:column}
.brain-host{position:relative;flex:1;min-height:300px;margin:10px -12px -14px;border-radius:12px;overflow:hidden;background:radial-gradient(70% 70% at 50% 50%,#ffffff06,#0000)}
.brain-host canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.brain-host .map-card,.brain-host .map-count{display:none!important}
.story-copy-content.swapping{opacity:.15!important;transition:opacity .18s ease!important}
/* The bottom wave never covers the buttons and captions. */
.showcase-tabs,.showcase-caption,.showcase-note,.wl-tabs,.app-duo-note{position:relative;z-index:3}
.showcase-tabs button[aria-pressed=false],.wl-tabs button[aria-pressed=false]{background:#141216}
.app-card{border:.8px solid #1c1c21;border-radius:16px;min-width:0}
.goals-card{background:#0c0c0f;padding:24px 22px;box-shadow:0 24px 60px #0009}
.activity-card{background:#050506;padding:30px 30px 32px}
.app-card svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.app-card .page-heading{display:flex;justify-content:space-between;align-items:flex-start;margin:0 0 20px}
.app-card h3{font-size:24px;font-weight:650;letter-spacing:-.4px;margin:0 0 6px;color:#f3f1f4}
.app-card .page-heading p{font-size:13px;margin:0;color:#847e89}
.ac-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;color:#b7b7c0}.ac-icon svg{width:18px;height:18px}
.app-card .list-title{font-size:13px;font-weight:600;margin:24px 0 10px;color:#b5afb9}
.goal-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.goal-item{display:flex;align-items:center;gap:11px;min-height:58px;box-sizing:border-box;padding:10px 12px;border:.8px solid #1c1c21;border-radius:12px;background:#131317}
.goal-open{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.app-card .spiral-mini.tiny{width:28px;height:28px}
.goal-open strong{display:block;font-size:13px;font-weight:600;color:#f3f1f4}
.goal-open small,.activity-list small{display:block;font-size:12px;color:#847e89}
.goal-item.done strong{color:#847e89;text-decoration:line-through}
.goal-remove{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:10px;color:#847e89}.goal-remove svg{width:14px;height:14px}
.activity-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.activity-grid .wide{grid-column:1/-1}
.shell-box{padding:24px;border:.8px solid #1c1c21;border-radius:16px;background:#0c0c0f}
.box-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.box-head h4{font-size:15px;font-weight:650;margin:0;color:#f3f1f4}
.app-card .count{padding:2px 8px;border-radius:10px;background:#ff435f;color:#16050a;font-size:11px;font-weight:700}
.activity-list{margin:16px 0 0;padding:0;list-style:none}
.activity-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 9px}
.activity-list li+li{padding-top:9px;border-top:.8px solid #1c1c21}
.activity-list strong{font-size:13px;font-weight:600;color:#f3f1f4}.activity-list small{margin-top:3px}
.app-card .tag{flex:none;padding:3px 9px;border:.8px solid #2a2a31;border-radius:20px;color:#b5afb9;font-size:11px;font-weight:600;white-space:nowrap}
.app-duo-note{margin:2px 0 0;font-size:12px;color:#8e8389}
@media(max-width:720px){.activity-grid{grid-template-columns:1fr}.activity-card{padding:24px 18px}.shell-box{padding:20px}}

/* The website orb parks on #laptop-orb; it hides on full pages and dims for Work and Sleep, as in the app. */
#child-orb>canvas,#child-orb>.face,#child-orb>.fallback{transition:opacity 320ms var(--ease-out),filter 500ms ease}
html[data-app-screen=page] #child-orb.in-laptop>canvas,html[data-app-screen=page] #child-orb.in-laptop>.face,html[data-app-screen=page] #child-orb.in-laptop>.fallback{opacity:0}
html[data-app-screen=page] #child-orb.in-laptop .arrival-glow{visibility:hidden}
/* Matching the app (shell.css mode-work / mode-off, orb-motion.css mood-sleeping):
   Work keeps the eyes open and fades the orb to 82%; Sleep greys it, lowers and closes the eyes, breathes, and lets z's rise. */
#child-orb .face{transition:translate .24s cubic-bezier(.34,1.56,.64,1),scale .24s cubic-bezier(.34,1.56,.64,1),opacity 320ms var(--ease-out),filter 500ms ease;transform-origin:50% 47%}
html[data-app-screen=work] #child-orb.in-laptop>canvas,html[data-app-screen=work] #child-orb.in-laptop>.face,html[data-app-screen=work] #child-orb.in-laptop>.fallback{opacity:.82}
html[data-app-screen=sleep] #child-orb.in-laptop>canvas,html[data-app-screen=sleep] #child-orb.in-laptop>.fallback{filter:grayscale(1) brightness(.5);opacity:.62}
html[data-app-screen=sleep] #child-orb.in-laptop>.face{filter:grayscale(1) brightness(.5);translate:0 2.8%;scale:1 .09}
html[data-app-screen=sleep] #child-orb.in-laptop>canvas,html[data-app-screen=sleep] #child-orb.in-laptop>.face{animation:app-breathe 3.5s ease-in-out infinite}
@keyframes app-breathe{50%{transform:scale(.98,1.035)}}
#child-orb .float-bits{position:absolute;right:2%;top:2%;width:30%;height:30%;pointer-events:none;opacity:0;transition:opacity .3s}
#child-orb .float-bits i{position:absolute;left:0;bottom:0;color:#fff;font:700 75px/1 Manrope,sans-serif;font-style:normal;opacity:0;filter:brightness(.5)}
#child-orb .float-bits i::before{content:'z'}
html[data-app-screen=sleep] #child-orb.in-laptop .float-bits{opacity:1}
html[data-app-screen=sleep] #child-orb.in-laptop .float-bits i{animation:app-rise 3.6s ease-out infinite}
#child-orb .float-bits i:nth-child(2){animation-delay:1.2s}#child-orb .float-bits i:nth-child(3){animation-delay:2.4s}
@keyframes app-rise{0%{opacity:0;transform:translate(0,0) scale(.7)}15%{opacity:.85}100%{opacity:0;transform:translate(90px,-130px) scale(1.15)}}
@media(prefers-reduced-motion:reduce){#child-orb>canvas,#child-orb>.face,#child-orb .float-bits i{animation:none!important}html[data-app-screen=sleep] #child-orb.in-laptop .float-bits i{opacity:.8}}
.reduced-motion #child-orb>canvas,.reduced-motion #child-orb>.face,.reduced-motion #child-orb .float-bits i{animation:none!important}
.reduced-motion[data-app-screen=sleep] #child-orb.in-laptop .float-bits i{opacity:.8}

/* App copy: values from the running app (64px header and rail, 13px Manrope, #030304 ground, #0c0c0f panels). */
.app-ui{position:absolute;left:0;top:0;width:1280px;height:800px;transform-origin:0 0;display:grid;grid-template:64px 1fr/64px 1fr;background:#030304;color:#f1f1f3;font:13px/1.45 Manrope,sans-serif;text-align:left;user-select:none;pointer-events:none}
.app-ui svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.app-ui b{font-weight:650}.app-ui small{display:block;font-size:11.5px;color:#8d8994}
.a-top{grid-column:1/-1;display:flex;align-items:center;gap:20px;padding:0 22px 0 18px;border-bottom:1px solid #ffffff0b}
.a-top img{width:110px;margin-right:auto}
.a-search{display:flex;align-items:center;gap:10px;width:300px;height:38px;padding:0 12px;border:1px solid #ffffff17;border-radius:10px;background:#09090c;color:#c9c5cf;transition:border-color 200ms ease,background-color 200ms ease}
.a-search svg{width:16px;height:16px;color:#8d8994}.a-search kbd{margin-left:auto;font:10.5px Manrope,sans-serif;color:#7f7b86;border:1px solid #ffffff17;border-radius:5px;padding:1px 6px}
.a-ico{display:inline-flex;color:#cfcbd6}
.a-credits{display:flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid #ffffff17;border-radius:999px;color:#8d8994;font-size:12px}.a-credits svg{width:14px;height:14px;color:#ff435f}.a-credits b{color:#f1f1f3}
.a-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#1a1a1f;border:1px solid #ffffff1c;font-size:12px;font-weight:700}
.a-rail{display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:18px;border-right:1px solid #ffffff08}
.a-rail span{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:#7f7b86;transition:background-color 200ms ease,color 200ms ease,transform 140ms var(--ease-out)}
.a-rail span svg{width:17px;height:17px}.a-rail span.on{background:#ff435f33;color:#fff}
.a-rail hr{width:24px;border:0;border-top:1px solid #ffffff12;margin:8px 0}
.a-main{position:relative;overflow:hidden}
.a-home,.a-page{position:absolute;inset:0;transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
.app-ui[data-view=page] .a-home{opacity:0}
.a-page{opacity:0;visibility:hidden;transform:translateY(8px);padding:34px 48px;overflow:hidden;transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out),visibility 0s 260ms}
.a-page.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.a-status{position:absolute;top:36px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1px solid #ff435f45;background:#ff435f14;font-size:12px;font-weight:650;white-space:nowrap;transition:border-color 300ms ease,background-color 300ms ease}
.a-status i{width:6px;height:6px;border-radius:50%;background:#ff435f}
.app-ui[data-mode=sleep] .a-status{border-color:#ffffff1f;background:#ffffff0a}.app-ui[data-mode=sleep] .a-status i{background:#8d8994}
#laptop-orb{position:absolute;left:393px;top:81px;width:430px;height:430px;pointer-events:none}
.a-modes{position:absolute;top:530px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border-radius:12px;border:1px solid #ffffff12;background:#0b0b0e}
.a-modes span{display:flex;align-items:center;gap:7px;padding:7px 15px;border-radius:9px;border:1px solid transparent;color:#bdb8c3;font-weight:600;transition:background-color 200ms ease,border-color 200ms ease,color 200ms ease,transform 140ms var(--ease-out)}
.a-modes svg{width:14px;height:14px}.a-modes span.on{background:#ff435f2b;border-color:#ff435f70;color:#fff}
.a-name{position:absolute;top:582px;left:50%;transform:translateX(-50%);font-size:27px;font-weight:700;display:flex;gap:5px;white-space:nowrap}
.a-name i{width:5px;height:5px;margin-top:9px;border-radius:50%;background:#ff435f}
.a-hint-line{position:absolute;top:626px;left:0;right:0;text-align:center;font-size:13px!important;color:#a7a3ad!important}
.a-sea{position:absolute;left:-4%;right:-4%;bottom:-30px;height:230px;background:radial-gradient(circle,#ff5a74 0 1.1px,transparent 1.6px) 0 0/9px 9px,radial-gradient(circle,#ffffffb0 0 .9px,transparent 1.4px) 4px 4px/18px 18px;-webkit-mask:radial-gradient(70% 100% at 50% 100%,#000 25%,#0008 55%,transparent 75%);mask:radial-gradient(70% 100% at 50% 100%,#000 25%,#0008 55%,transparent 75%);transform:perspective(500px) rotateX(58deg);transform-origin:50% 100%;opacity:.55}
.a-panel-head{display:flex;align-items:center;gap:9px;margin-bottom:6px}.a-panel-head b{font-size:15px}.a-panel-head svg{margin-left:auto;width:16px;height:16px;color:#8d8994}
.a-dot{width:6px;height:6px;border-radius:50%;background:#ff435f}
.a-sub{color:#a7a3ad;margin:4px 0 0}
.a-today,.a-drawer{position:absolute;top:14px;border-radius:16px;background:#0c0c0f;border:1px solid #1c1c21;padding:18px;opacity:0;visibility:hidden;transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out),visibility 0s 240ms}
.a-today{left:22px;width:300px;transform:translateX(-14px)}
.a-drawer{right:18px;bottom:14px;width:400px;transform:translateX(14px);display:flex;flex-direction:column;padding:14px}
.app-ui[data-view=today] .a-today,.app-ui[data-view=chat] .a-drawer{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.a-today h4{margin:20px 0 8px;font-size:12px;font-weight:650;color:#c9c5cf}
.a-task{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid #ffffff0b}
.a-tick{width:16px;height:16px;margin-top:2px;border-radius:50%;border:1.5px solid #5a5660;display:grid;place-items:center;flex-shrink:0}
.a-tick.done{background:#ff435f;border-color:#ff435f}.a-tick svg{width:10px;height:10px;color:#fff;stroke-width:2.4}
.a-thread{flex:1;display:flex;flex-direction:column;gap:14px;padding:14px 4px}
.a-bubble.user{align-self:flex-end;max-width:80%;padding:12px;border-radius:9px;background:#1a1a1f;border:1px solid #2a2a31}
.a-reply{border-left:2px solid #ff435f;padding-left:12px}.a-reply small{margin-bottom:4px}
.a-stream{margin:0;min-height:1.45em}
.a-result{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px;border-radius:12px;background:#ff435f12;border:1px solid #ff435f33;opacity:0;transform:translateY(6px);transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
.a-result svg{width:15px;height:15px;color:#ff7a8f;margin-top:2px}
.app-ui.streamed .a-result{opacity:1;transform:none}
.a-composer{margin-top:auto;border:1px solid #ffffff14;border-radius:14px;background:#ffffff05;padding:12px 12px 10px}
.a-composer.wide{width:620px;margin:0 auto}
.a-ph{display:block;color:#6f6b76;margin-bottom:12px}
.a-composer-row{display:flex;align-items:center;gap:10px;color:#8d8994}.a-composer-row svg{width:16px;height:16px}
.a-chip{display:flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid #ffffff17;border-radius:999px;font-size:12px;color:#c9c5cf}
.a-push{margin-left:auto}
.a-send{width:30px;height:30px;border-radius:9px;background:#ff435f;color:#fff;display:grid;place-items:center}.a-send svg{width:15px;height:15px;stroke-width:2}
/* Small Spiral orbs, copied from the app's shell.css: a still tinted fallback, replaced by the live shader canvas. */
:is(.app-ui,.app-card) .spiral-mini{position:relative;display:inline-block;width:40px;height:40px;flex:none;isolation:isolate}
:is(.app-ui,.app-card) .spiral-mini.head{width:34px;height:34px}:is(.app-ui,.app-card) .spiral-mini.intro{width:96px;height:96px}
:is(.app-ui,.app-card) .spiral-mini img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:229.56%;height:148.09%;max-width:none;object-fit:fill;clip-path:ellipse(17.34% 26.88% at 49.81% 49.75%);filter:grayscale(1) brightness(1.7) contrast(1.15)}
:is(.app-ui,.app-card) .spiral-mini .orb-tint{position:absolute;left:10.2%;top:10.2%;width:79.6%;height:79.6%;border-radius:50%;background:rgb(var(--orb-rgb));mix-blend-mode:multiply}
:is(.app-ui,.app-card) .spiral-mini.spectrum .orb-tint{background:url(/assets/super-orb.png) center/cover;mix-blend-mode:normal}:is(.app-ui,.app-card) .spiral-mini.spectrum img{display:none}
:is(.app-ui,.app-card) .spiral-mini canvas{position:absolute;inset:-25%;width:150%;height:150%;display:none}
.mini-orbs-live :is(.app-ui,.app-card) .spiral-mini canvas{display:block}.mini-orbs-live :is(.app-ui,.app-card) .spiral-mini img,.mini-orbs-live :is(.app-ui,.app-card) .spiral-mini .orb-tint{display:none}
:is(.app-ui,.app-card) .spiral-mini .gaze,:is(.app-ui,.app-card) .spiral-mini .eyelids{transform-origin:250px 230px}
:is(.app-ui,.app-card) .spiral-mini .face{position:absolute;inset:0;width:100%;height:100%;fill:#fff;stroke:none;filter:drop-shadow(0 0 3px #ffffff90)}
.app-ui .a-agent.off .spiral-mini{opacity:.45;filter:saturate(.35)}
.a-page h1{font-size:26px;font-weight:700;margin:0}
.a-page h2{font-size:21px;font-weight:700;margin:0 0 10px}
.a-page h4{font-size:13px;font-weight:650;margin:0 0 12px}
.a-card{background:#0c0c0f;border:1px solid #1c1c21;border-radius:14px;padding:18px}
.a-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 14px}.a-grid2.wide{grid-template-columns:1.3fr 1fr}
.a-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #ffffff0b}.a-row>span:first-child{flex:1}
.a-btns{display:flex;gap:8px}
.a-btn{padding:7px 13px;border-radius:9px;border:1px solid #ffffff17;font-size:12px;font-weight:650;color:#e3dfe6;white-space:nowrap}
.a-btn.red{background:#ff435f;border-color:#ff435f;color:#fff}.a-btn.light{background:#f1f1f3;border-color:#f1f1f3;color:#0b0b0d}.a-btn.full{display:block;text-align:center;margin-top:12px}
.a-ok{width:22px;height:22px;border-radius:50%;background:#2fd08a22;color:#5fe0a6;display:grid;place-items:center}.a-ok svg{width:12px;height:12px;stroke-width:2.4}
.a-hint{font-size:12px;color:#8d8994;margin:12px 0 0}
.a-field{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:#ffffff06;border:1px solid #ffffff12;color:#6f6b76;margin-bottom:10px}.a-field svg{width:15px;height:15px}
.a-field.big{margin:22px 0 14px}
.a-title-row{display:flex;align-items:flex-start;justify-content:space-between}
.a-note{padding:11px 0;border-top:1px solid #ffffff0b}
/* Brain map: the app's own dot map (brain-map.js). It sizes its canvas in screen pixels, so inside the scaled app copy
   the canvas is stretched back to its host; the click card and counter are not part of the tour. */
.a-map-card{display:flex;flex-direction:column}
.a-grid2.wide:has(.a-map-card){grid-template-columns:.85fr 1.25fr}
.a-map-host{position:relative;height:380px;margin:-4px -8px -8px;border-radius:10px;overflow:hidden;background:radial-gradient(70% 70% at 50% 50%,#ffffff06,#0000)}
.a-map-host canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.a-map-host .map-card,.a-map-host .map-count{display:none!important}
.a-grid-apps{display:grid;grid-template-columns:repeat(2,300px);gap:14px}
.a-app{display:flex;align-items:center;gap:12px;padding:14px}.a-app>span:nth-child(2){flex:1}
.a-app-ico{width:34px;height:34px;border-radius:50%}.a-app-ico.tg{background:radial-gradient(circle at 50% 40%,#5fc6f5,#1f8fd1)}.a-app-ico.wa{background:radial-gradient(circle at 50% 40%,#5fe089,#1fa855)}
.a-call{width:380px;margin:54px auto 0;text-align:center}.a-call>p{color:#a7a3ad;margin:0 0 16px}.a-call .a-card{text-align:left}.a-call .a-field{margin:6px 0 0}
.a-center{text-align:center;margin-top:70px}.a-center .a-hint{margin-top:14px}
.a-chips{display:flex;justify-content:center;gap:8px;margin-top:14px}.a-chips span{padding:6px 12px;border-radius:999px;border:1px solid #ffffff17;font-size:12px;color:#d6d2da}
.a-key{display:flex;gap:10px;align-items:center;margin-top:6px}.a-key .a-field{flex:1;margin:0}
.a-page .a-card+.a-card{margin-top:14px}.a-page>.a-page-in>.a-card:first-of-type{margin-top:24px}
.a-empty{display:block;margin-top:4px}
.a-agents{position:absolute;inset:0;display:grid;grid-template-columns:300px 1fr}
.a-agent-list{padding:24px 16px;border-right:1px solid #ffffff0b}.a-agent-list h3{font-size:17px;margin:0 0 14px}
.a-agent{display:flex;gap:11px;align-items:center;padding:9px 10px;border-radius:11px}.a-agent.on{background:#ff435f26;border:1px solid #ff435f40}
.a-agent-chat{display:flex;flex-direction:column;padding:18px 28px 22px}
.a-agent-head{display:flex;gap:10px;align-items:center}.a-agent-head small{font-size:11px}
.a-seg{margin-left:auto;display:flex;padding:3px;border-radius:9px;border:1px solid #ffffff14}.a-seg span{padding:4px 10px;border-radius:7px;font-size:12px;color:#a7a3ad}.a-seg .on{background:#f1f1f3;color:#0b0b0d;font-weight:650}
.a-agent-hero{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.a-agent-hero b{font-size:19px;margin-top:8px}.a-agent-hero p{margin:0;color:#a7a3ad}
.a-cursor{position:absolute;left:0;top:0;width:26px;height:26px;transform:translate(700px,420px);transition:transform 760ms cubic-bezier(.77,0,.175,1),opacity 300ms ease;opacity:0;z-index:5;filter:drop-shadow(0 2px 4px #000c)}
.a-cursor svg{width:26px;height:26px;fill:#fff;stroke:#0b0b0d;stroke-width:1.4;transition:transform 140ms var(--ease-out);transform-origin:20% 15%}
.app-ui.touring .a-cursor{opacity:1}.a-cursor.press svg{transform:scale(.82)}
.app-ui .pressed{transform:scale(.94)}.a-search.pressed{transform:none;border-color:#ff435f80;background:#ff435f10}
.a-modes span.pressed,.a-rail span.pressed{transform:scale(.9)}
@media(prefers-reduced-motion:reduce){.a-cursor{display:none}}
.reduced-motion .a-cursor{display:none}
/* Arabic page: the app keeps its own left-to-right layout in Arabic (only the phrases run right to left), so its copy does too. */
[dir=rtl] .app-ui{direction:ltr}