/* One readable interface. Native radial geometry and gesture behavior stay untouched. */
:root{
--ink:#1d2c40;--muted:#526176;--line:#d4dce6;
--ui-text:#233347;--ui-secondary:#526176;--ui-surface:#fff;--ui-soft:#f1f4f8;--ui-border:#cdd6e2;
}
html[data-theme=dark]{--paper:#141b24;color-scheme:dark;--ink:#eef3fa;--muted:#b5c2d3;--line:#43536a;--ui-text:#edf2f9;--ui-secondary:#b6c5d8;--ui-surface:#253246;--ui-soft:#2e3e54;--ui-border:#4b5f79}
body{font-size:16px;line-height:1.6}
[data-theme=dark] body{background:radial-gradient(ellipse at 50% 20%,#21334a66,transparent 55%),var(--paper)}
.site-nav nav,.nav-cta,.theme-toggle,.button-primary,.button-text{font-size:14px}
.site-nav nav,.button-text{color:var(--muted)}
.site-nav{height:86px}
.hero{padding:38px 0 44px}
.hero h1{font-size:clamp(38px,5.2vw,68px);line-height:1.1;letter-spacing:-2.4px;margin:12px 0 20px;font-weight:700}
.hero p{font-size:19px;line-height:1.6;color:var(--muted)}
.hero-actions{margin-top:24px}
.hero-actions>a{min-height:44px}
.story h2{font:650 36px/1.2 var(--site);letter-spacing:-1px}
.story>div>p,.features p{font-size:16px;line-height:1.7;color:var(--muted)}
.features h3{font-size:19px;color:var(--ink)}
.closing h2{font-size:21px}.closing p,.site-footer{font-size:14px;color:var(--muted)}
.site-footer>span:first-child{font-size:16px}
#aboutDialog{font:16px/1.7 var(--site);color:var(--ink)}
/* Name the action, rather than surrounding it with slogans and metadata. */
.scenario-intro{align-items:baseline;margin-bottom:14px}
.scenario-intro h3{font-size:24px;font-weight:650;letter-spacing:-.5px;color:var(--ink)}
.scenario-intro>span{font-size:14px;color:var(--muted)}
.scenario-picker{gap:8px;margin-bottom:12px}
.scenario-card{display:flex;align-items:center;gap:9px;min-height:64px;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--ui-surface);text-align:left}
.scenario-card .scenario-number{position:static;font:600 12px/1 var(--site);color:var(--muted);flex:none}
.scenario-card>.icon,.scenario-card small,.chapter-duration,.scenario-context{display:none}
.scenario-card strong{font:600 14px/1.35 var(--site);color:var(--ink);margin:0}
.scenario-card.active{background:#e4edf9;border-color:#6a94c9;box-shadow:inset 0 0 0 1px #6a94c9}
.scenario-card.active strong,.scenario-card.active .scenario-number{color:#244c7a}
[data-theme=dark] .scenario-card.active{background:#304b6d;border-color:#86b2e9}
[data-theme=dark] .scenario-card strong,[data-theme=dark] .scenario-card.active strong{color:#edf3fc}
[data-theme=dark] .scenario-card .scenario-number{color:#b5cbe6}
.scenario-player-mount{margin-bottom:20px}
#introHud.compact-player{gap:7px 18px;padding:12px 16px 8px;background:var(--ui-surface);border-color:var(--line)}
#introHud .story-kicker{font-size:11px;letter-spacing:0;color:var(--muted);margin-bottom:4px}
#introHud #introHeading{font-size:16px;line-height:1.35;color:var(--ink)}
#introHud #introCopy{font-size:14px;line-height:1.55;color:var(--muted)}
#introHud .player-actions button,#introHud .story-playback select{font-size:13px;min-height:38px}
#introHud .story-playback label{font-size:12px}
#introHud #skipIntro{font-size:13px}
#introHud .intro-timing{margin-top:2px}
#introHud #introCountdown{font-size:11px;min-width:31px}
.demo-heading h2{font-size:18px;font-weight:650}
.demo-heading .live{display:none}
.reset,.fullscreen-button,.demo-buttons button,.demo-shortcuts,.demo-status{font-size:14px;color:var(--muted)}
.fullscreen-button,.demo-buttons button{min-height:40px}
.demo-status{line-height:1.6}
.desktop{color:var(--ui-text)}
/* A Mac uses a consistent interface font; the mock apps no longer switch to editorial serif faces. */
.desktop .mac-window :is(h1,h2,h3,h4,p,small,strong,span,b,button,input,textarea,select,label,th,td,pre,code,footer,nav),
.desktop .waterline-logo,.desktop .waterline-logo>span{font-family:var(--native)}
.mac-window{color:var(--ui-text)}
.window-titlebar>strong,.window-titlebar>span,.notes-window .window-titlebar>span,.meeting-title{font-size:13px;color:var(--ui-text)}
.desktop-files button{font-size:12px}
.desktop-caption,.mouse-brand,.notes-date,.notes-body>.check-item,
#notesCaption,.finder-local-note,.browser-bookmarks>span,.booking-hero>small,
.booking-footer,.listing-photo-label,.ai-title-detail,.ai-eyebrow,.ai-footnote,
.ai-session-tag,.ai-sidebar-bottom,.sheet-formula>small,.sheet-insight>small,
.slide-source,.design-page>small,.design-poster>small,.research-page>small,
.research-page nav>span,.design-page nav>span,.arrival-footnote{display:none!important}
.mouse-caption{font-size:12px;font-weight:600;color:#213b54;text-shadow:0 1px 3px #fff9;max-width:130px}
[data-theme=dark] .mouse-caption{color:#fff;text-shadow:0 1px 3px #0009}
.app-demo-label{font-size:12px;color:var(--ui-secondary);font-weight:400;margin-left:5px}
/* Browser: normal reading sizes and enough room for the actual photo. */
.safari-window .window-titlebar{height:44px}
.safari-window .address{height:30px}
#browserAddress{font-size:13px;color:var(--ui-text)}
.browser-bookmarks{min-height:40px;padding:8px 16px;gap:18px;white-space:nowrap;overflow-x:auto;scrollbar-width:none;background:var(--ui-soft);border-color:var(--ui-border)}
.browser-bookmarks button{font-size:12px;color:var(--ui-text);flex:none}
.booking-scroll,.browser-work{height:calc(100% - 84px);background:var(--ui-surface);color:var(--ui-text)}
.browser-notice{inset:84px 0 0;background:var(--ui-surface);color:var(--ui-text)}
.booking-nav{padding:15px 22px;border-color:var(--ui-border)}
.waterline-logo{font-size:25px;font-weight:650;letter-spacing:-.6px;color:var(--ui-text)}
.waterline-logo>span{display:none}
.booking-nav>div{font-size:13px;color:var(--ui-secondary)}
.booking-nav button{font-size:13px;color:var(--ui-text)}
.booking-hero{padding:25px 24px 62px;background:var(--ui-soft);border-color:var(--ui-border)}
.booking-hero h3{font-size:30px;font-weight:650;letter-spacing:-.7px;margin:0 0 10px;color:var(--ui-text)}
.booking-hero p{font-size:15px;color:var(--ui-secondary)}
.booking-hero button{font-size:13px;bottom:16px;right:24px;color:var(--ui-text);border-color:var(--ui-border)}
.sixth-listing{padding:20px 24px 0}
.listing-heading small{font-size:12px;letter-spacing:.4px;color:var(--ui-secondary)}
.listing-heading h3{font-size:32px;font-weight:650;letter-spacing:-.8px;color:var(--ui-text)}
.listing-heading p{font-size:14px;color:var(--ui-secondary)}
.listing-meta{font-size:13px;color:var(--ui-secondary);gap:12px;margin:14px 0;flex-wrap:wrap}
.listing-meta span+span:before{margin-right:12px}
.listing-save span{font-size:12px}
.listing-photo-number{font-size:12px;padding:5px 9px}
.listing-bottom strong{font-size:16px;font-weight:600;color:var(--ui-text)}
.listing-bottom p,.listing-details p,.listing-details>span{font-size:14px;line-height:1.6;color:var(--ui-secondary)}
.listing-bottom button{font-size:13px;min-height:42px;padding:10px 13px}
.listing-bottom,.listing-details{border-color:var(--ui-border)}
.listing-details h4{font-size:22px;font-weight:600;color:var(--ui-text)}
/* Real content, not an ornamental checklist. */
.notes-body{padding:20px 22px}
.notes-body h3{font-size:21px;color:var(--ui-text)}
.notes-body p,#noteCaptures>p{font-size:15px!important;line-height:1.65!important;color:var(--ui-text)!important}
.notes-bottom{justify-content:flex-end}
.notes-bottom button{font-size:13px;min-height:36px;padding:7px 11px;color:#4a401f}
#noteCaptures img{max-height:230px}
.finder-layout>aside{width:165px}
.finder-layout aside>small{font-size:12px;color:var(--ui-secondary)}
.finder-layout aside>button{font-size:14px;min-height:39px;color:var(--ui-text)}
.finder-files{grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:12px;padding:18px}
.finder-file strong{font-size:13px;line-height:1.4;color:var(--ui-text)}
.finder-file small{display:none}
.finder-file>img{width:86px;height:65px}
.finder-info{font-size:12px;color:var(--ui-secondary)}
.finder-window input[type=search]{font-size:13px}
.preview-body>pre{font-size:15px;line-height:1.7;color:var(--ui-text)}
.preview-to-ai{font-size:13px;padding:7px 10px}
/* Conversations are meant to be read. */
.chat-header strong{font-size:16px}
.chat-header small,.chat-day{font-size:12px}
.chat-bubble{font-size:15px;line-height:1.6}
.chat-bubble>p{font-size:15px;line-height:1.6}
.chat-bubble .shared-link{font-size:13px;line-height:1.55}
.chat-bubble .chat-photo{max-height:220px}
.chat-time{font-size:11px}
.chat-empty{font-size:14px;color:var(--ui-secondary)}
.chat-composer input{font-size:16px;min-height:40px}
.chat-bubble.emoji-message>p{font-size:30px}
.ai-window>.window-titlebar>strong{font-size:15px;color:var(--ui-text)}
.ai-sidebar>button{font-size:13px;color:var(--ui-text);line-height:1.4}
.ai-sidebar>small{display:none}
.ai-session-header{font-size:14px;color:var(--ui-text)}
.ai-welcome h3{font:650 32px/1.2 var(--native);letter-spacing:-.7px;color:var(--ui-text)}
.ai-welcome p{font-size:15px;line-height:1.65;color:var(--ui-secondary)}
.ai-suggestions button{font-size:13px;min-height:40px}
.ai-message>small{font-size:11px;color:var(--ui-secondary)}
.ai-message>p{font-size:16px;line-height:1.6;color:var(--ui-text)}
.ai-message-attachments>span{font-size:13px}
.ai-composer textarea{font-size:16px;line-height:1.5;color:var(--ui-text)}
.ai-composer-bottom>span{display:none}
.ai-composer-bottom button{font-size:13px}
.ai-thinking strong{font-size:16px}.ai-thinking small{font-size:12px}
.ai-thinking button{font-size:14px;min-height:36px}
.attachment-chip{font-size:13px;color:var(--ui-text)}
/* Keep the exact radial menu; make its surrounding controls legible. */
.clipboard-bubble>header strong{font-size:14px}
.clipboard-row strong{font-size:13px}
.clipboard-row small{font-size:11px}
.clipboard-bubble footer button{font-size:12px;padding:7px 10px}
.clipboard-bubble footer #clipboardSelect{font-size:11px}
.clipboard-bubble>p{font-size:12px;line-height:1.5}
.clipboard-bubble{max-width:calc(100% - 16px)}
.address-context button{font-size:14px;padding:8px 10px}
.settings-tabs button{font-size:13px}
.settings-content h2{font-size:24px}
.settings-content h3{font-size:14px}
.setting-row,.settings-note,.setting-value,.setting-row select,.native-button,.shortcut-record{font-size:13px;color:var(--ui-text)}
.settings-note{line-height:1.6}
.setting-row{min-height:44px}
.preview-badge{display:none}
.status-menu,.status-menu button,.context-menu>button{font-size:13px}
.shortcut-foot{font-size:12px}
.toast{font-size:13px}
.drag-bundle strong{font-size:14px}.drag-bundle small{display:none}
/* Presentation and the remaining apps share the same readable type system. */
.meeting-banner{font-size:12px}
.meeting-people span{font-size:11px}
.meeting-people>div{height:65px;width:100px}
.meeting-slide>small{display:none}
.meeting-slide>h3{font-size:28px;font-weight:650;color:var(--ui-text)}
.meeting-slide>p{font-size:14px;line-height:1.6;color:var(--ui-secondary)}
.trip-call-board{height:calc(100% - 155px);margin-top:16px}
.trip-call-questions small{font-size:11px;letter-spacing:0;color:var(--ui-secondary)}
.trip-call-questions strong{font-size:18px;color:var(--ui-text)}
.trip-call-questions span{font-size:13px;color:var(--ui-secondary)}
.meeting-layout>aside{width:245px}
.meeting-layout aside>h4,#meetingMessages b{font-size:13px;color:var(--ui-text)}
#meetingMessages>p{font-size:14px;line-height:1.6;color:var(--ui-secondary)}
#meetingChatForm input{font-size:14px}
.meeting-controls>button{font-size:11px}
.meeting-controls .meeting-leave{font-size:13px}
.slide-navigation>span{font-size:11px}
.sheets-window .window-titlebar>span:first-of-type,.sheet-toolbar>button{font-size:13px}
.sheet-document{font-size:16px;color:var(--ui-text)}
.sheet-formula,.sheet-footer{font-size:12px;color:var(--ui-secondary)}
.demo-sheet th,.demo-sheet td{font-size:14px;padding:12px;color:var(--ui-text)}
.demo-sheet thead tr:nth-child(2)>th{font-size:13px}
.demo-sheet td>input{font-size:16px}
.sheet-insight h3{font-size:24px;font-weight:650;color:var(--ui-text)}
.sheet-insight p{font-size:14px;line-height:1.6;color:var(--ui-secondary)}
.design-page,.research-page,.batch-page{background:var(--ui-surface);color:var(--ui-text)}
.design-page nav>b,.research-page nav b,.batch-page nav b{font:650 24px/1.2 var(--native);letter-spacing:-.5px}
.design-page>h3,.research-page>h3,.batch-heading h3{font:650 32px/1.15 var(--native);letter-spacing:-.6px}
.design-caption h4,.arrival-plan .design-caption h4,.research-page h4{font:650 25px/1.25 var(--native);letter-spacing:-.4px;color:var(--ui-text)}
.design-caption>small,.arrival-plan .design-caption>small,.research-page section small{font-size:12px;letter-spacing:0;color:var(--ui-secondary)}
.design-caption p,.arrival-plan .design-caption p,.research-page section p,.research-intro,.trip-questions section p,.trip-questions .research-intro{font-size:14px;line-height:1.65;color:var(--ui-secondary)}
.design-caption button,.arrival-plan .design-caption button{font-size:12px;min-height:40px}
.design-poster>span,.arrival-plan .design-poster>span{font:650 30px/1.15 var(--native);letter-spacing:-.6px}
.design-page>footer,.arrival-plan>footer,.research-page>footer{font-size:12px;letter-spacing:0;line-height:1.6;color:var(--ui-secondary)}
.research-page section{gap:16px}
.story-focus>span{font-size:12px}
/* Preserve contrast when the global theme changes. */
[data-theme=dark] .mac-window :is(.listing-heading h3,.booking-hero h3,.listing-bottom strong,.listing-details h4,.waterline-logo,.notes-body h3,.finder-file strong,.ai-welcome h3,.ai-message>p,.meeting-slide>h3,.trip-call-questions strong,.sheet-insight h3,.design-caption h4,.research-page h4){color:var(--ui-text)}
[data-theme=dark] .mac-window :is(.booking-hero p,.listing-heading p,.listing-meta,.listing-bottom p,.listing-details p,.listing-details>span,.ai-welcome p,.meeting-slide>p,.trip-call-questions span,.design-caption p,.research-page section p,.sheet-insight p){color:var(--ui-secondary)}
[data-theme=dark] #introHud #introHeading{color:var(--ink)}
[data-theme=dark] #introHud #introCopy{color:var(--muted)}
[data-theme=dark] .notes-bottom button{color:#edf0cf}
@media(max-width:1100px){
.scenario-card:not(:where(.scaled-desktop, .scaled-desktop *)){min-height:68px;padding:10px;gap:7px}.scenario-card strong:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:13px}
.site-nav nav:not(:where(.scaled-desktop, .scaled-desktop *)){gap:20px}
}
@media(max-width:850px){
.scenario-card:not(:where(.scaled-desktop, .scaled-desktop *)){flex:0 0 182px;min-height:62px}
.scenario-intro:not(:where(.scaled-desktop, .scaled-desktop *)){flex-direction:column;gap:4px}
#introHud.compact-player:not(:where(.scaled-desktop, .scaled-desktop *)){grid-template-columns:minmax(0,1fr)}
#introHud .player-actions:not(:where(.scaled-desktop, .scaled-desktop *)){justify-content:flex-start}
}
@media(max-width:560px){
.page-width:not(:where(.scaled-desktop, .scaled-desktop *)){width:calc(100% - 32px)}
.site-nav:not(:where(.scaled-desktop, .scaled-desktop *)){height:76px}.brand:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:18px}
.nav-cta:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px;padding:10px}
.hero:not(:where(.scaled-desktop, .scaled-desktop *)){padding:24px 0 34px}.hero h1:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:39px;letter-spacing:-1.4px;margin:8px 0 18px}
.hero p:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:17px;line-height:1.6}.hero p br:not(:where(.scaled-desktop, .scaled-desktop *)){display:none}
.hero-actions:not(:where(.scaled-desktop, .scaled-desktop *)){gap:20px}.hero-actions .button-primary:not(:where(.scaled-desktop, .scaled-desktop *)),.hero-actions .button-text:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:14px}
.scenario-intro h3:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:23px}.scenario-intro>span:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:14px}
.scenario-card:not(:where(.scaled-desktop, .scaled-desktop *)){flex-basis:172px;min-height:60px;padding:12px}.scenario-card strong:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:14px}
#introHud.compact-player:not(:where(.scaled-desktop, .scaled-desktop *)){padding:12px 13px 7px}
#introHud .story-kicker:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:11px}
#introHud #introHeading:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:16px}
#introHud #introCopy:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:14px}
#introHud .player-actions button:not(:where(.scaled-desktop, .scaled-desktop *)),#introHud .story-playback select:not(:where(.scaled-desktop, .scaled-desktop *)),#introHud #skipIntro:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:13px;min-height:42px}
.demo-heading h2:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:16px}.demo-heading>div:not(:where(.scaled-desktop, .scaled-desktop *)){gap:9px}
.fullscreen-button:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px;padding:7px 9px}
.demo-shortcuts:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px;gap:10px}
.demo-buttons button:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:13px}
.demo-status:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:13px}
.safari-window .window-titlebar:not(:where(.scaled-desktop, .scaled-desktop *)){height:44px;padding:0 9px;gap:8px}
#browserAddress:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:16px}
.browser-bookmarks:not(:where(.scaled-desktop, .scaled-desktop *)){min-height:40px;gap:16px;padding:8px 12px}
.browser-bookmarks button:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px}
.booking-scroll:not(:where(.scaled-desktop, .scaled-desktop *)),.browser-work:not(:where(.scaled-desktop, .scaled-desktop *)){height:calc(100% - 84px)}
.booking-nav:not(:where(.scaled-desktop, .scaled-desktop *)){padding:14px 16px}.booking-nav>div:not(:where(.scaled-desktop, .scaled-desktop *)){gap:10px;font-size:12px}
.booking-hero:not(:where(.scaled-desktop, .scaled-desktop *)){padding:22px 16px 60px}
.booking-hero h3:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:27px}.booking-hero p:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:14px}
.sixth-listing:not(:where(.scaled-desktop, .scaled-desktop *)){padding:18px 16px 0}
.listing-heading h3:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:29px}.listing-heading p:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:13px}
.listing-meta:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px;gap:7px}
.listing-meta span+span:not(:where(.scaled-desktop, .scaled-desktop *)):before{margin-right:7px}
.listing-bottom:not(:where(.scaled-desktop, .scaled-desktop *)){align-items:flex-start;flex-direction:column;gap:12px}
.listing-bottom p:not(:where(.scaled-desktop, .scaled-desktop *)),.listing-details p:not(:where(.scaled-desktop, .scaled-desktop *)),.listing-details>span:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:14px}
.listing-bottom button:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:14px;width:100%}
.finder-layout>aside:not(:where(.scaled-desktop, .scaled-desktop *)){width:116px;padding:14px 6px}
.finder-layout aside>button:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px;padding:8px 5px;gap:5px}
.finder-layout aside>small:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:11px;padding-inline:5px}
.finder-files:not(:where(.scaled-desktop, .scaled-desktop *)){grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;padding:12px}
.finder-file strong:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px}
.finder-window input[type=search]:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:16px;max-width:115px}
.finder-info:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:11px}
.finder-info>span:last-child:not(#finderCount):not(:where(.scaled-desktop, .scaled-desktop *)){display:none}
.chat-header strong:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:16px}
.chat-composer input:not(:where(.scaled-desktop, .scaled-desktop *)),.ai-composer textarea:not(:where(.scaled-desktop, .scaled-desktop *)),#meetingChatInput:not(:where(.scaled-desktop, .scaled-desktop *)),.demo-sheet td>input:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:16px}
.chat-bubble>p:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:15px}.chat-bubble .shared-link:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:13px}
.ai-welcome h3:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:29px}.ai-welcome p:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:15px}
.ai-suggestions button:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:13px}
.clipboard-row strong:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px}
.clipboard-row small:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:11px}
.clipboard-bubble footer button:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:11px;padding:7px 8px}
.clipboard-bubble>p:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:11px}
.settings-tabs button:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px}.settings-note:not(:where(.scaled-desktop, .scaled-desktop *)),.setting-row:not(:where(.scaled-desktop, .scaled-desktop *)),.setting-value:not(:where(.scaled-desktop, .scaled-desktop *)),.setting-row select:not(:where(.scaled-desktop, .scaled-desktop *)),.native-button:not(:where(.scaled-desktop, .scaled-desktop *)),.shortcut-record:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px}
.settings-content h2:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:22px}
.meeting-window .window-titlebar>strong:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:14px}
.meeting-banner:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:10px;gap:5px}
.meeting-banner>b:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:10px}
.meeting-people>div:not(:where(.scaled-desktop, .scaled-desktop *)){height:49px;width:100px}
.meeting-people span:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:10px}
.meeting-slide>h3:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:23px}
.meeting-slide>p:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:13px}
.trip-call-board:not(:where(.scaled-desktop, .scaled-desktop *)){height:auto}
.trip-call-board>img:not(:where(.scaled-desktop, .scaled-desktop *)){height:150px}
.trip-call-questions strong:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:14px}
.trip-call-questions small:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:10px}
.trip-call-questions span:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px}
.meeting-controls>button:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:10px}
.meeting-layout>aside:not(:where(.scaled-desktop, .scaled-desktop *)){width:82%;max-width:280px}
.sheet-document:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:14px}
.sheet-toolbar>button:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:11px}
.demo-sheet td:not(:where(.scaled-desktop, .scaled-desktop *)),.demo-sheet th:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px;padding:11px 7px}
.demo-sheet thead tr:nth-child(2)>th:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px}
.sheet-insight h3:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:23px}.sheet-insight p:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:13px}
.design-page:not(:where(.scaled-desktop, .scaled-desktop *)),.research-page:not(:where(.scaled-desktop, .scaled-desktop *)){padding:20px 16px}
.design-page>h3:not(:where(.scaled-desktop, .scaled-desktop *)),.research-page>h3:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:28px}
.arrival-plan .design-composition:not(:where(.scaled-desktop, .scaled-desktop *)){grid-template-columns:1fr}
.arrival-plan .design-poster:not(:where(.scaled-desktop, .scaled-desktop *)){min-height:150px}
.arrival-plan .design-poster>span:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:27px;max-width:180px}
.arrival-plan .design-caption h4:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:26px}
.arrival-plan .design-caption p:not(:where(.scaled-desktop, .scaled-desktop *)),.trip-questions section p:not(:where(.scaled-desktop, .scaled-desktop *)),.trip-questions .research-intro:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:14px}
.trip-questions section img:not(:where(.scaled-desktop, .scaled-desktop *)){width:27%;height:160px}
.research-page h4:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:23px}
.story h2:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:29px}.features h3:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:19px}.features p:not(:where(.scaled-desktop, .scaled-desktop *)),.story>div>p:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:16px}
.closing h2:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:20px}.closing p:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:14px}
.site-footer:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px}
}


/* Viewport app shell: the desktop is the hero, not a section below one. */
html,body{height:100%;width:100%;overflow:hidden;overscroll-behavior:none}
body{height:100dvh;display:flex;flex-direction:column;background:var(--paper)}
body>.site-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;flex:0 0 64px;height:64px;width:100%;max-width:none;margin:0;padding:0 24px;border-bottom:1px solid var(--line);background:var(--paper)}
.site-nav>.brand{justify-self:start;white-space:nowrap}
.site-nav>.nav-actions{justify-self:end}
.site-nav .app-logo{width:31px;height:31px;border-radius:8px}
.site-nav .app-logo>.icon{width:22px;height:22px}
.site-nav .brand{font-size:18px}
.site-nav .site-tabs{display:flex;align-items:center;align-self:stretch;gap:5px}
.site-tabs>button{position:relative;align-self:stretch;padding:0 19px;border:0;background:transparent;border-radius:0;font:600 14px/1 var(--site);color:var(--muted)}
.site-tabs>button[aria-selected=true]{color:var(--ink)}
.site-tabs>button[aria-selected=true]:after{content:'';position:absolute;bottom:-1px;left:16px;right:16px;height:3px;border-radius:2px 2px 0 0;background:#4674bb}
.site-tabs>button:hover{color:var(--ink);background:#7994b80b}
.site-nav .theme-toggle{font-size:12px;min-height:36px}
.site-panels{display:flex;flex:1;min-height:0;overflow:hidden;width:100%}
.site-panel{flex:1;min-width:0;min-height:0}
.site-panel[hidden]{display:none!important}
#desktopPanel{display:flex;overflow:hidden}
#desktopPanel #playground{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:10px 18px 14px;overflow:hidden}
#desktopPanel .scenario-intro,#desktopPanel .scenario-context{display:none}
#scenarioPicker{display:flex;flex:0 0 auto;gap:6px;min-height:40px;margin:0 0 8px;padding:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity}
#scenarioPicker::-webkit-scrollbar{display:none}
#scenarioPicker .scenario-card{flex:1 0 auto;justify-content:center;gap:7px;min-height:40px;margin:0;padding:8px 13px;scroll-snap-align:start;border-radius:7px}
#scenarioPicker .scenario-card strong{font-size:13px;line-height:1.3;white-space:nowrap}
#scenarioPicker .scenario-number{font-size:11px}
#scenarioPlayerMount{flex:0 0 auto;margin:0 0 9px}
#introHud.compact-player{gap:3px 16px;padding:9px 12px 5px;border-radius:8px}
#introHud .story-kicker{display:none}
#introHud .player-caption{align-self:center}
#introHud #introHeading{font-size:15px;line-height:1.35}
#introHud #introCopy{font-size:13px;line-height:1.4;margin:2px 0 0}
#introHud .player-actions{max-width:none;gap:5px;flex-wrap:nowrap}
#introHud .player-actions button,#introHud .story-playback select{font-size:12px;min-height:36px;padding:6px 9px}
#introHud .story-playback{gap:6px}
#introHud .story-playback label>span{display:none}
#introHud #skipIntro{font-size:12px}
#introHud .story-next{max-width:235px;font-size:12px}
#introHud .intro-timing{gap:8px;margin-top:0;height:12px}
#introHud #introCountdown{font-size:10px;min-width:29px}
#introHud .player-desktop-actions{display:flex;align-items:center;gap:4px;padding-left:6px;margin-left:3px;border-left:1px solid var(--line)}
#introHud .player-desktop-actions button{gap:5px;background:transparent;border-color:transparent;color:var(--muted)}
#introHud .player-desktop-actions .icon{width:16px;height:16px}
#introHud .player-desktop-actions .reset span{display:none}
#desktopPanel .desktop-frame{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;margin:0;padding:5px;border-radius:13px;box-shadow:0 5px 22px #263e5812;overflow:hidden}
#desktopPanel .desktop-frame .desktop{flex:1;min-height:0!important;height:auto!important;width:100%;border-radius:8px}
#desktopPanel .desktop-frame .mac-window:not(.settings-window):not(.captures-window):not(.preview-window){min-height:0;max-height:calc(100% - 118px)}
#desktopPanel .desktop-frame .safari-window{top:43px;left:3%;width:69%;height:calc(100% - 120px)}
#desktopPanel .desktop-frame .chat-window{top:65px;right:2%;height:calc(100% - 143px);max-width:380px}
#desktopPanel .desktop-frame .notes-window{top:65px;right:4%;height:calc(100% - 143px);width:350px}
#desktopPanel .desktop-frame .finder-window{top:46px;height:calc(100% - 125px)}
#desktopPanel .desktop-frame .ai-window{top:44px;height:calc(100% - 123px)}
#desktopPanel .desktop-frame .meeting-window{top:43px;height:calc(100% - 120px)}
#desktopPanel .desktop-frame .sheets-window{top:45px;height:calc(100% - 125px)}
#desktopPanel .desktop-frame .preview-window{top:43px;min-height:0;max-height:calc(100% - 120px);height:calc(100% - 120px)}
#desktopPanel .desktop-frame .settings-window{max-height:calc(100% - 100px)}
#desktopPanel .desktop-frame .mouse-controller{bottom:91px;right:18px;transform:scale(.82);transform-origin:bottom right}
#desktopPanel .desktop-frame .mouse-caption{font-size:12px}
#desktopPanel .listing-photo-frame.article-art{max-height:clamp(125px,25vh,280px)}
#desktopPanel .meeting-slide{overflow:auto;scrollbar-width:thin}
#desktopPanel .trip-call-board{min-height:140px}
#desktopPanel .demo-controls{display:none}
.visually-hidden,#desktopPanel #demoStatus{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#desktopPanel .desktop-frame:is(:fullscreen,.is-fullscreen){width:100vw;height:100dvh;padding:0;border:0;border-radius:0}
#desktopPanel .desktop-frame:is(:fullscreen,.is-fullscreen)>#introHud{flex:0 0 auto;border-radius:0;padding:9px 14px 5px}
#desktopPanel .desktop-frame:is(:fullscreen,.is-fullscreen)>.desktop{min-height:0!important;flex:1;border-radius:0}
.content-panel{overflow:auto;overscroll-behavior:contain;padding:36px 24px 48px;scrollbar-width:thin}
.content-panel .page-width{width:min(960px,100%);margin-inline:auto}
.content-panel .hero{padding:25px 0 35px}
.content-panel .hero h1{font-size:clamp(36px,5vw,58px)}
.content-panel .story{margin-top:25px;padding-top:32px}
.content-panel .features{margin-top:30px}
.about-content{padding:25px 0}
.about-content h1{font:700 clamp(30px,4vw,44px)/1.15 var(--site);letter-spacing:-1.1px;margin:0 0 22px}
.about-content>p{font-size:17px;line-height:1.75;color:var(--muted);max-width:720px}
.about-content h2{font-size:23px;letter-spacing:-.4px;margin-top:38px}
.about-shortcuts{margin:30px 0;max-width:700px}
.about-shortcuts>div{display:grid;grid-template-columns:150px 1fr;gap:15px;padding:15px 0;border-top:1px solid var(--line)}
.about-shortcuts dt{font-weight:650}
.about-shortcuts dd{margin:0;color:var(--muted)}
.about-actions{display:flex;align-items:center;gap:24px;margin-top:30px}
[data-theme=dark] .site-tabs>button[aria-selected=true]:after{background:#a8c9ff}
[data-theme=dark] #introHud .player-desktop-actions button{background:transparent;color:#bed2eb}
@media(max-width:1100px){
body>.site-nav:not(:where(.scaled-desktop, .scaled-desktop *)){grid-template-columns:auto 1fr auto;gap:14px;padding-inline:18px}
.site-nav .site-tabs:not(:where(.scaled-desktop, .scaled-desktop *)){justify-content:center}
#scenarioPicker .scenario-card:not(:where(.scaled-desktop, .scaled-desktop *)){flex:0 0 auto;padding-inline:12px}
#introHud .player-desktop-actions .fullscreen-button span:not(:where(.scaled-desktop, .scaled-desktop *)){display:none}
#introHud .story-playback select:not(:where(.scaled-desktop, .scaled-desktop *)){max-width:94px}
#desktopPanel .desktop-frame .safari-window:not(:where(.scaled-desktop, .scaled-desktop *)){width:74%}
#desktopPanel .desktop-frame .chat-window:not(:where(.scaled-desktop, .scaled-desktop *)){width:38%}
}
@media(max-width:850px){
#introHud.compact-player:not(:where(.scaled-desktop, .scaled-desktop *)){grid-template-columns:minmax(0,1fr) auto}
#introHud #introCopy:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px}
#introHud #skipIntro:not(:where(.scaled-desktop, .scaled-desktop *)){max-width:79px;white-space:normal;line-height:1.2}
#introHud .story-playback:not(:where(.scaled-desktop, .scaled-desktop *)){gap:2px}
#introHud .story-playback select:not(:where(.scaled-desktop, .scaled-desktop *)){width:73px;padding-right:4px;font-size:11px}
#introHud .player-actions button:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:11px;padding-inline:7px}
#introHud .player-desktop-actions:not(:where(.scaled-desktop, .scaled-desktop *)){padding-left:3px;margin-left:0}
#introHud .player-desktop-actions button:not(:where(.scaled-desktop, .scaled-desktop *)){width:29px;padding-inline:4px}
#desktopPanel .desktop-frame .mac-window:not(.settings-window):not(.captures-window):not(:where(.scaled-desktop, .scaled-desktop *)){left:10px;right:auto;width:calc(100% - 20px);max-width:none;top:42px;height:calc(100% - 117px);transform:none}
#desktopPanel .desktop-frame .mouse-controller:not(:where(.scaled-desktop, .scaled-desktop *)){right:15px;bottom:82px;transform:scale(.7)}
#desktopPanel .desktop-frame .trip-call-board>img:not(:where(.scaled-desktop, .scaled-desktop *)){height:clamp(100px,19vh,165px)}
#desktopPanel .desktop-frame .meeting-slide:not(:where(.scaled-desktop, .scaled-desktop *)){padding:15px}
}
@media(max-width:560px){
body>.site-nav:not(:where(.scaled-desktop, .scaled-desktop *)){height:52px;flex-basis:52px;padding:0 10px;gap:7px}
.site-nav .brand-name:not(:where(.scaled-desktop, .scaled-desktop *)){display:none}
.site-nav .app-logo:not(:where(.scaled-desktop, .scaled-desktop *)){width:29px;height:29px}
.site-nav .site-tabs:not(:where(.scaled-desktop, .scaled-desktop *)){gap:0}
.site-tabs>button:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:13px;padding:0 12px}
.site-tabs>button[aria-selected=true]:not(:where(.scaled-desktop, .scaled-desktop *)):after{left:10px;right:10px}
.site-nav .theme-toggle:not(:where(.scaled-desktop, .scaled-desktop *)){height:32px;width:32px;min-height:32px;padding:0}
.site-nav .theme-label:not(:where(.scaled-desktop, .scaled-desktop *)){display:none}
#desktopPanel #playground:not(:where(.scaled-desktop, .scaled-desktop *)){padding:7px 6px max(7px,env(safe-area-inset-bottom))}
#scenarioPicker:not(:where(.scaled-desktop, .scaled-desktop *)){min-height:35px;gap:5px;margin-bottom:6px}
#scenarioPicker .scenario-card:not(:where(.scaled-desktop, .scaled-desktop *)){min-height:35px;padding:7px 10px;border-radius:6px}
#scenarioPicker .scenario-card strong:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px}
#scenarioPicker .scenario-number:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:10px}
#scenarioPlayerMount:not(:where(.scaled-desktop, .scaled-desktop *)){margin:0 0 6px}
#introHud.compact-player:not(:where(.scaled-desktop, .scaled-desktop *)){grid-template-columns:minmax(0,1fr);padding:8px 10px 4px;gap:5px}
#introHud #introHeading:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:14px}
#introHud #introCopy:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px;line-height:1.4}
#introHud .player-actions:not(:where(.scaled-desktop, .scaled-desktop *)){justify-content:flex-start;gap:4px}
#introHud .player-actions button:not(:where(.scaled-desktop, .scaled-desktop *)),#introHud .story-playback select:not(:where(.scaled-desktop, .scaled-desktop *)){min-height:34px}
#introHud #skipIntro:not(:where(.scaled-desktop, .scaled-desktop *)){max-width:none;font-size:12px;white-space:nowrap}
#introHud .story-playback select:not(:where(.scaled-desktop, .scaled-desktop *)){width:85px;font-size:12px}
#introHud .player-desktop-actions:not(:where(.scaled-desktop, .scaled-desktop *)){margin-left:auto}
#introHud .story-next:not(:where(.scaled-desktop, .scaled-desktop *)){max-width:calc(100vw - 130px);font-size:12px}
#introHud .intro-timing:not(:where(.scaled-desktop, .scaled-desktop *)){height:10px}
#desktopPanel .desktop-frame:not(:where(.scaled-desktop, .scaled-desktop *)){padding:3px;border-radius:10px}
#desktopPanel .desktop-frame .desktop:not(:where(.scaled-desktop, .scaled-desktop *)){border-radius:6px}
#desktopPanel .desktop-frame .mac-window:not(.settings-window):not(.captures-window):not(:where(.scaled-desktop, .scaled-desktop *)){left:6px;top:36px;width:calc(100% - 12px);height:calc(100% - 103px);max-height:calc(100% - 103px);min-height:0}
#desktopPanel .desktop-frame .settings-window:not(:where(.scaled-desktop, .scaled-desktop *)){top:34px!important;max-height:calc(100% - 100px)}
#desktopPanel .desktop-frame .mouse-controller:not(:where(.scaled-desktop, .scaled-desktop *)){right:7px;bottom:68px;transform:scale(.6)}
#desktopPanel .desktop-frame .mouse-caption:not(:where(.scaled-desktop, .scaled-desktop *)){max-width:130px}
#desktopPanel .desktop-frame .dock:not(:where(.scaled-desktop, .scaled-desktop *)){bottom:9px;gap:7px;padding:6px 8px}
#desktopPanel .desktop-frame .dock button:not(:where(.scaled-desktop, .scaled-desktop *)){width:33px;height:33px;flex-basis:33px}
#desktopPanel .desktop-frame .dock button>.icon:not(:where(.scaled-desktop, .scaled-desktop *)){width:23px;height:23px}
#desktopPanel .listing-photo-frame.article-art:not(:where(.scaled-desktop, .scaled-desktop *)){max-height:clamp(110px,22vh,190px)}
#desktopPanel .listing-heading h3:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:25px;margin:5px 0}
#desktopPanel .listing-heading p:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px;line-height:1.4}
#desktopPanel .sixth-listing:not(:where(.scaled-desktop, .scaled-desktop *)){padding:12px 14px 0}
#desktopPanel .listing-meta:not(:where(.scaled-desktop, .scaled-desktop *)){margin:10px 0}
#desktopPanel .meeting-people:not(:where(.scaled-desktop, .scaled-desktop *)){display:none}
#desktopPanel .meeting-slide>h3:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:21px}
#desktopPanel .meeting-slide>p:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px}
#desktopPanel .trip-call-board>img:not(:where(.scaled-desktop, .scaled-desktop *)){height:115px}
.content-panel:not(:where(.scaled-desktop, .scaled-desktop *)){padding:24px 18px 32px}
.content-panel .hero:not(:where(.scaled-desktop, .scaled-desktop *)){padding:14px 0 28px}
.content-panel .hero h1:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:35px}
.content-panel .story:not(:where(.scaled-desktop, .scaled-desktop *)){padding-top:25px}
.about-content:not(:where(.scaled-desktop, .scaled-desktop *)){padding-top:10px}
.about-content>p:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:16px}
.about-shortcuts>div:not(:where(.scaled-desktop, .scaled-desktop *)){grid-template-columns:105px 1fr;gap:12px;font-size:14px}
.about-actions:not(:where(.scaled-desktop, .scaled-desktop *)){gap:18px;flex-wrap:wrap}
}
@media(max-height:550px) and (min-width:561px){
body>.site-nav:not(:where(.scaled-desktop, .scaled-desktop *)){height:46px;flex-basis:46px}
#desktopPanel #playground:not(:where(.scaled-desktop, .scaled-desktop *)){padding:5px 8px 6px}
#scenarioPicker:not(:where(.scaled-desktop, .scaled-desktop *)){min-height:30px;margin-bottom:4px}
#scenarioPicker .scenario-card:not(:where(.scaled-desktop, .scaled-desktop *)){min-height:30px;padding:5px 10px}
#scenarioPlayerMount:not(:where(.scaled-desktop, .scaled-desktop *)){margin-bottom:4px}
#introHud.compact-player:not(:where(.scaled-desktop, .scaled-desktop *)){padding:5px 10px 3px;grid-template-columns:minmax(0,1fr) auto}
#introHud #introHeading:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:13px}
#introHud #introCopy:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px}
#introHud .player-actions button:not(:where(.scaled-desktop, .scaled-desktop *)),#introHud .story-playback select:not(:where(.scaled-desktop, .scaled-desktop *)){min-height:29px}
#desktopPanel .desktop-frame .mac-window:not(.settings-window):not(.captures-window):not(:where(.scaled-desktop, .scaled-desktop *)){top:33px;height:calc(100% - 87px);max-height:calc(100% - 87px)}
#desktopPanel .desktop-frame .dock:not(:where(.scaled-desktop, .scaled-desktop *)){bottom:6px;padding:5px 7px}
#desktopPanel .desktop-frame .dock button:not(:where(.scaled-desktop, .scaled-desktop *)){height:30px;width:30px}
#desktopPanel .desktop-frame .mouse-controller:not(:where(.scaled-desktop, .scaled-desktop *)){bottom:56px;transform:scale(.5)}
}

/* Two quiet rows: site navigation and one integrated demo toolbar. */
body>.site-nav{height:56px;flex-basis:56px;padding-inline:22px;border-bottom:1px solid var(--line);background:var(--ui-surface);grid-template-columns:1fr auto 1fr}
.site-nav .brand{font-size:17px;letter-spacing:-.55px;gap:9px}
.site-nav .app-logo{height:27px;width:27px;border-radius:8px;background:transparent;box-shadow:none;color:var(--ink)}
.site-nav .app-logo>.icon{height:25px;width:25px;stroke-width:1.6}
.site-nav .site-tabs{gap:1px;align-items:center}
.site-tabs>button{align-self:center;height:34px;padding:0 15px;font-size:13px;font-weight:500;border-radius:6px}
.site-tabs>button[aria-selected=true]{background:var(--ui-soft);font-weight:650}
.site-tabs>button[aria-selected=true]:after{display:none}
.site-nav .theme-toggle{width:34px;height:34px;min-height:34px;padding:0;border:0;background:transparent;color:var(--muted)}
.site-nav .theme-toggle svg{display:block;width:18px;height:18px}
.site-nav .theme-label{display:none}
#desktopPanel #playground{padding:0 12px 12px}
#demoCommandBarMount{position:relative;flex:0 0 auto;min-width:0;z-index:120}
#demoCommandBar{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;background:transparent;padding:10px 0}
.chapter-select{position:relative;display:flex;align-items:center;padding-right:15px;margin-right:15px;border-right:1px solid var(--line);min-width:0}
.chapter-trigger{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:8px 10px;background:transparent;border:0;border-radius:7px;text-align:left;color:var(--ink);font:600 14px/1.3 var(--site)}
.chapter-trigger:hover,.chapter-trigger[aria-expanded=true]{background:var(--ui-soft)}
.chapter-trigger-number{flex:none;font-size:12px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
#chapterTriggerTitle{min-width:0}
.chapter-trigger>.icon{height:13px;width:13px;margin-left:auto;rotate:90deg;color:var(--muted);flex:none}
.chapter-trigger[aria-expanded=true]>.icon{rotate:-90deg}
.chapter-popover{position:absolute;top:calc(100% + 4px);left:0;z-index:150;width:292px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 150px);overflow:auto;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:12px;box-shadow:0 16px 50px #142b4729,0 2px 5px #142b4710;padding:6px}
#chapterPopover #scenarioPicker{display:flex;flex-direction:column;gap:2px;height:auto;min-height:0;padding:0;margin:0;overflow:visible;scroll-snap-type:none}
#chapterPopover #scenarioPicker .scenario-card{position:relative;display:flex;flex:0 0 auto;justify-content:flex-start;align-items:center;gap:13px;width:100%;min-height:43px;padding:10px 12px;margin:0;border:0;border-radius:7px;background:transparent;box-shadow:none}
#chapterPopover #scenarioPicker .scenario-card:hover{background:var(--ui-soft)}
#chapterPopover #scenarioPicker .scenario-card.active{background:#e8f0fb}
#chapterPopover #scenarioPicker .scenario-card strong{font-size:14px;line-height:1.4;white-space:normal;color:var(--ink)}
#chapterPopover #scenarioPicker .scenario-number{font-size:12px;min-width:17px;color:var(--muted)}
#chapterPopover #scenarioPicker .scenario-card.active:after{content:'';width:5px;height:5px;background:#4078b8;border-radius:50%;margin-left:auto;flex:none}
#demoCommandBar #scenarioPlayerMount{min-width:0;display:flex;align-items:center;margin:0;padding:0}
#demoCommandBar #introHud.compact-player{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 16px;width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#demoCommandBar #introHeading{font-size:14px;line-height:1.4;letter-spacing:0;font-weight:650}
#demoCommandBar #introCopy{font-size:13px;line-height:1.45;color:var(--muted);margin:2px 0 0}
#demoCommandBar .player-actions{gap:7px;flex-wrap:nowrap}
#demoCommandBar .story-playback{gap:6px}
#demoCommandBar .player-actions button,#demoCommandBar .story-playback select{min-height:36px;font-size:12px;border:0;background:transparent;border-radius:6px;padding:7px 9px;color:var(--muted);box-shadow:none}
#demoCommandBar .player-actions button:hover{background:var(--ui-soft);color:var(--ink)}
#demoCommandBar #storyPause{font-weight:650;color:var(--ink);min-width:57px}
#demoCommandBar .story-playback select{width:58px;max-width:58px;font-variant-numeric:tabular-nums;padding-left:5px;padding-right:4px}
#demoCommandBar #skipIntro{border:1px solid #2c4667;background:#2c4667;color:#fff;font-size:12px;min-height:36px;padding:7px 13px;border-radius:7px;white-space:nowrap}
#demoCommandBar #skipIntro:hover{background:#203955}
#demoCommandBar #storyNext{color:#315f95!important;font-weight:600;max-width:245px}
#demoCommandBar .player-desktop-actions{gap:2px;margin-left:2px;padding-left:6px;border-left:1px solid var(--line)}
#demoCommandBar .player-desktop-actions button{height:34px;min-height:34px;width:32px;padding:7px}
#demoCommandBar .player-desktop-actions button>span{display:none}
#demoCommandBar .intro-timing{position:relative;grid-column:1/-1;width:100%;height:10px;margin-top:5px;gap:8px}
#demoCommandBar .intro-track{height:2px;background:var(--line);opacity:.8}
#demoCommandBar #introProgress{background:#668db8}
#demoCommandBar #introCountdown{font-size:10px;color:var(--muted);min-width:27px}
#desktopPanel .desktop-frame{border-radius:12px;box-shadow:0 6px 28px #263e5814}
#desktopPanel .desktop-frame:is(:fullscreen,.is-fullscreen)>#demoCommandBar{flex:0 0 auto;z-index:120;padding:9px 16px;background:var(--ui-surface);border-bottom:1px solid var(--line)}
[data-theme=dark] .chapter-popover{box-shadow:0 16px 50px #0005}
[data-theme=dark] #chapterPopover #scenarioPicker .scenario-card.active{background:#304967}
[data-theme=dark] #demoCommandBar #skipIntro{background:#e0ebfa;color:#1e3552;border-color:#e0ebfa}
[data-theme=dark] #demoCommandBar #skipIntro:hover{background:#fff}
[data-theme=dark] #demoCommandBar #storyNext{color:#b4d4fb!important}
[data-theme=dark] #demoCommandBar #introHud{background:transparent}
@media(max-width:1100px){
#demoCommandBar:not(:where(.scaled-desktop, .scaled-desktop *)){grid-template-columns:195px minmax(0,1fr)}
.chapter-select:not(:where(.scaled-desktop, .scaled-desktop *)){padding-right:10px;margin-right:10px}
.chapter-trigger:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:13px;gap:8px;padding-inline:6px}
#demoCommandBar #introHud.compact-player:not(:where(.scaled-desktop, .scaled-desktop *)){gap:0 10px}
#demoCommandBar .player-actions:not(:where(.scaled-desktop, .scaled-desktop *)){gap:3px}
#demoCommandBar #skipIntro:not(:where(.scaled-desktop, .scaled-desktop *)){padding-inline:10px}
}
@media(max-width:850px){
body>.site-nav:not(:where(.scaled-desktop, .scaled-desktop *)){padding-inline:15px}
#demoCommandBar:not(:where(.scaled-desktop, .scaled-desktop *)){grid-template-columns:178px minmax(0,1fr)}
#demoCommandBar #introHud.compact-player:not(:where(.scaled-desktop, .scaled-desktop *)){grid-template-columns:minmax(0,1fr);gap:5px}
#demoCommandBar .player-actions:not(:where(.scaled-desktop, .scaled-desktop *)){justify-content:flex-start}
#demoCommandBar .player-desktop-actions:not(:where(.scaled-desktop, .scaled-desktop *)){margin-left:auto}
#demoCommandBar .intro-timing:not(:where(.scaled-desktop, .scaled-desktop *)){margin-top:0}
.chapter-trigger:not(:where(.scaled-desktop, .scaled-desktop *)){align-items:center;min-height:46px}
}
@media(max-width:560px){
body>.site-nav:not(:where(.scaled-desktop, .scaled-desktop *)){height:50px;flex-basis:50px;padding:0 10px;gap:5px;grid-template-columns:auto 1fr auto}
.site-nav .site-tabs:not(:where(.scaled-desktop, .scaled-desktop *)){justify-content:center}
.site-tabs>button:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px;padding-inline:12px;height:32px}
#desktopPanel #playground:not(:where(.scaled-desktop, .scaled-desktop *)){padding:0 6px max(6px,env(safe-area-inset-bottom))}
#demoCommandBar:not(:where(.scaled-desktop, .scaled-desktop *)){grid-template-columns:minmax(0,1fr);padding:4px 4px 7px}
.chapter-select:not(:where(.scaled-desktop, .scaled-desktop *)){margin:0 0 4px;padding:0;border-right:0}
.chapter-trigger:not(:where(.scaled-desktop, .scaled-desktop *)){width:auto;min-height:32px;padding:5px 6px;font-size:14px;gap:9px}
.chapter-trigger>.icon:not(:where(.scaled-desktop, .scaled-desktop *)){margin-left:5px}
.chapter-popover:not(:where(.scaled-desktop, .scaled-desktop *)){top:calc(100% + 2px);left:0;width:300px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 120px)}
#demoCommandBar #introHud.compact-player:not(:where(.scaled-desktop, .scaled-desktop *)){padding:0 6px;gap:5px}
#demoCommandBar #introHeading:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:14px}
#demoCommandBar #introCopy:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px;line-height:1.45}
#demoCommandBar .player-actions:not(:where(.scaled-desktop, .scaled-desktop *)){gap:4px}
#demoCommandBar .player-actions button:not(:where(.scaled-desktop, .scaled-desktop *)),#demoCommandBar .story-playback select:not(:where(.scaled-desktop, .scaled-desktop *)){min-height:34px}
#demoCommandBar #skipIntro:not(:where(.scaled-desktop, .scaled-desktop *)){min-height:34px;font-size:12px;padding:6px 10px}
#demoCommandBar .player-desktop-actions:not(:where(.scaled-desktop, .scaled-desktop *)){padding-left:4px}
#demoCommandBar .intro-timing:not(:where(.scaled-desktop, .scaled-desktop *)){height:9px;margin-top:0}
#desktopPanel .desktop-frame:is(:fullscreen,.is-fullscreen)>#demoCommandBar:not(:where(.scaled-desktop, .scaled-desktop *)){padding:5px 10px}
}
@media(max-height:550px) and (min-width:561px){
body>.site-nav:not(:where(.scaled-desktop, .scaled-desktop *)){height:43px;flex-basis:43px}
#demoCommandBar:not(:where(.scaled-desktop, .scaled-desktop *)){padding-block:5px;grid-template-columns:180px minmax(0,1fr)}
#demoCommandBar #introHud.compact-player:not(:where(.scaled-desktop, .scaled-desktop *)){grid-template-columns:minmax(0,1fr) auto}
#demoCommandBar #introHeading:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:13px}
#demoCommandBar #introCopy:not(:where(.scaled-desktop, .scaled-desktop *)){font-size:12px}
#demoCommandBar .player-actions button:not(:where(.scaled-desktop, .scaled-desktop *)),#demoCommandBar .story-playback select:not(:where(.scaled-desktop, .scaled-desktop *)),#demoCommandBar #skipIntro:not(:where(.scaled-desktop, .scaled-desktop *)){min-height:30px}
}

/* Guided demos light the active region; free play is never dimmed. */
.demo-spotlight{position:absolute;inset:0;z-index:92;pointer-events:none;user-select:none}
.demo-spotlight>svg{display:block;width:100%;height:100%;overflow:hidden}
.demo-spotlight-shade{fill:#050a12;fill-opacity:.7}
.demo-spotlight:not([hidden]){animation:demo-spotlight-in .45s ease both}
.desktop[data-intro="paused"] .demo-spotlight{animation-play-state:paused}
@keyframes demo-spotlight-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.demo-spotlight:not([hidden]){animation:none}}

/* Keep context readable; arrows point ahead while the light follows the cursor. */
.demo-spotlight-shade{fill:#07111e;fill-opacity:.48}
[data-theme=dark] .demo-spotlight-shade{fill-opacity:.4}
.demo-attention-outline{stroke:#10243c;stroke-width:7;opacity:.7;vector-effect:non-scaling-stroke}
.demo-attention-line{stroke:#fff1b7;stroke-width:3;vector-effect:non-scaling-stroke}
.demo-spotlight:not([hidden]){animation-duration:.25s}

/* Stable 1280 x 800 desktop, uniformly fitted to the available page space. */
#desktopPanel .desktop-frame>.desktop-viewport{position:relative;display:block;flex:1 1 0%;min-width:0;min-height:0;width:100%;overflow:hidden;border-radius:9px;background:radial-gradient(ellipse at center,#b4c9da,#dce6ed)}
#desktopPanel .desktop-frame .desktop.scaled-desktop{position:absolute!important;flex:none!important;width:1280px!important;height:800px!important;min-width:1280px!important;min-height:800px!important;max-width:none!important;max-height:none!important;margin:0!important;transform-origin:0 0;transition:none;animation:none;font-size:16px;line-height:1.6;border-radius:11px}
[data-theme=dark] #desktopPanel .desktop-frame>.desktop-viewport{background:radial-gradient(ellipse at center,#273b51,#172738)}
#desktopPanel .desktop-frame:is(:fullscreen,.is-fullscreen)>.desktop-viewport{border-radius:0}

/* Native-feeling, actually resizable app windows inside the logical desktop. */
#desktopPanel .desktop-frame .mac-window[data-user-sized]{left:var(--window-x)!important;top:var(--window-y)!important;right:auto!important;bottom:auto!important;width:var(--window-width)!important;height:var(--window-height)!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;transform:none!important;container-type:inline-size;container-name:app-window}
.mac-window.window-resizing{user-select:none}
.window-resize-handle{position:absolute;z-index:75;touch-action:none;user-select:none;background:transparent}
.window-resize-handle:is(.resize-n,.resize-s){left:12px;right:12px;height:var(--resize-hit,8px);cursor:ns-resize}
.window-resize-handle:is(.resize-e,.resize-w){top:12px;bottom:12px;width:var(--resize-hit,8px);cursor:ew-resize}
.resize-n{top:0}.resize-s{bottom:0}.resize-e{right:0}.resize-w{left:0}
.window-resize-handle:is(.resize-ne,.resize-nw,.resize-se,.resize-sw){width:12px;height:12px;z-index:76}
.resize-ne{right:0;top:0;cursor:nesw-resize}.resize-nw{left:0;top:0;cursor:nwse-resize}
.resize-se{right:0;bottom:0;cursor:nwse-resize}.resize-sw{left:0;bottom:0;cursor:nesw-resize}
.mac-window .window-titlebar{min-width:0}
.mac-window .window-titlebar>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mac-window .window-options{display:grid;place-items:center;flex:0 0 25px;width:25px;height:26px;min-height:0;border:0;border-radius:5px;background:transparent;color:var(--ui-secondary);padding:3px;margin-left:auto}
.mac-window .window-options:hover,.mac-window .window-options:focus-visible{background:#8393a526;color:var(--ui-text)}
.window-options svg{width:19px;height:19px;fill:currentColor}
.mac-window[data-user-sized] .window-titlebar{gap:10px}
.mac-window[data-user-sized] :is(.address,.finder-main,.ai-main,.meeting-stage){min-width:0}
.mac-window[data-user-sized] :is(.notes-body,.preview-body,.settings-content){overflow:auto}
.mac-window[data-user-sized] .browser-bookmarks{gap:15px;overflow:auto;white-space:nowrap}
@container app-window (max-width:620px){
.booking-nav{flex-wrap:wrap;gap:10px}
.booking-nav>div{gap:12px;flex-wrap:wrap}
.sixth-listing{padding-inline:18px}
.listing-heading{gap:12px}.listing-heading h3{font-size:28px}
.listing-meta{flex-wrap:wrap;gap:8px}
.listing-bottom{flex-wrap:wrap;gap:12px}
.arrival-plan .design-composition{grid-template-columns:1fr}
.design-page,.research-page{padding-inline:22px}
.trip-questions section{gap:18px}
.finder-layout>aside{width:135px;flex-shrink:0}
.ai-sidebar{width:150px;flex-basis:150px}
}
/* A separate context-menu surface leaves the native radial editor untouched. */
.desktop-context,.native-submenu{width:246px;padding:5px;background:color-mix(in srgb,var(--ui-surface) 93%,transparent);border:1px solid color-mix(in srgb,var(--ui-border) 80%,transparent);border-radius:8px;box-shadow:0 12px 34px #10263e32,0 1px 3px #10263e20;backdrop-filter:blur(24px) saturate(1.25);font:400 14px/1.35 var(--native);color:var(--ui-text)}
.desktop-context{position:absolute;z-index:100;max-height:calc(100% - 44px);outline:none}
.native-menu-row{position:relative}
.native-menu-row>button{display:flex;align-items:center;width:100%;min-height:29px;padding:5px 8px 5px 4px;gap:7px;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;text-align:left;outline:none;white-space:nowrap}
.native-menu-row>button:hover,.native-menu-row>button:focus-visible,.native-menu-row>button[aria-expanded="true"]{background:#2879e3;color:#fff}
.native-menu-row>button:disabled{color:var(--muted);opacity:.45;background:transparent}
.native-menu-check{display:inline-block;width:13px;flex:none;text-align:center;font-size:12px}
.native-menu-label{flex:1}
.native-menu-shortcut{font-size:12px;opacity:.7;margin-left:16px}
.native-menu-row>button>.icon{height:12px;width:12px;margin-left:auto;stroke-width:2}
.native-menu-separator{height:1px;margin:5px 8px;background:var(--ui-border)}
.native-submenu{position:absolute;left:calc(100% - 1px);top:-5px;z-index:1}
.opens-left .native-submenu{left:auto;right:calc(100% - 1px)}
[data-theme=dark] .desktop-context,[data-theme=dark] .native-submenu{box-shadow:0 12px 34px #0006,0 1px 3px #0004}
.desktop[data-wallpaper="dusk"] .wallpaper{filter:hue-rotate(320deg) saturate(.9)}
.desktop[data-wallpaper="forest"] .wallpaper{filter:hue-rotate(60deg) saturate(.75)}

/* Readable portrait camera. The logical OS and its window coordinates stay intact. */
#desktopPanel .desktop-frame>.desktop-viewport{display:flex;overscroll-behavior:contain}
.desktop-stage{position:relative;flex:0 0 auto;margin:auto;overflow:hidden}
#desktopPanel .desktop-frame>.desktop-viewport[data-view="readable"]{overflow:auto;scrollbar-width:thin;scrollbar-color:#8294a8 transparent;touch-action:pan-x pan-y}
.portrait-controls{display:flex;flex:0 0 auto;align-items:center;gap:16px;padding:8px 12px;color:var(--ui-text);background:var(--ui-surface);border-bottom:1px solid var(--line);font:500 13px/1.3 var(--native)}
.portrait-controls[hidden],.portrait-controls label[hidden]{display:none}
.portrait-controls button{flex:none;min-height:40px;padding:8px 12px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-surface);color:var(--ui-text);font:inherit}
.portrait-controls label{display:flex;flex:1;align-items:center;gap:8px;min-width:0}
.portrait-controls input{width:100%;min-width:48px;height:40px;margin:0;accent-color:#2879e3;cursor:ew-resize}
.portrait-controls button:focus-visible,.portrait-controls input:focus-visible{outline:2px solid #2879e3;outline-offset:2px}
@media(max-width:560px) and (orientation:portrait){
.portrait-controls{gap:10px;padding:5px 8px;font-size:12px}
#demoCommandBar #introCopy{font-size:13px}
}

/* The desktop remains the hero. Tutorial controls live at its lower edge. */
#desktopPanel .desktop-frame{position:relative}
#desktopPanel .desktop-frame>#demoCommandBar.tutorial-player{position:absolute!important;left:14px;bottom:14px;top:auto;right:auto;display:block!important;width:390px;max-width:calc(100% - 28px);padding:0!important;margin:0!important;z-index:125;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-surface);box-shadow:0 8px 32px #10263e24;font-family:var(--native)}
#demoCommandBar.tutorial-player .tutorial-toolbar{display:flex;align-items:center;gap:4px;padding:6px}
#demoCommandBar.tutorial-player .chapter-select{flex:1;min-width:0;margin:0;padding:0;border:0}
#demoCommandBar.tutorial-player .chapter-trigger{width:100%;min-height:34px;padding:5px 6px;gap:7px;font-size:13px}
#demoCommandBar.tutorial-player #chapterTriggerTitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#demoCommandBar.tutorial-player .tutorial-toolbar>button,#demoCommandBar.tutorial-player #storyPause{min-height:34px;padding:5px 8px;font:500 12px var(--native);border:0;border-radius:6px;background:transparent;color:var(--ui-text)}
#demoCommandBar.tutorial-player .tutorial-toolbar>button:hover,#demoCommandBar.tutorial-player #storyPause:hover{background:#8196ad20}
#demoCommandBar.tutorial-player #storyPlayback{display:flex;gap:0}
#demoCommandBar.tutorial-player #scenarioPlayerMount{display:block!important;padding:0 12px 10px!important;margin:0!important}
#demoCommandBar.tutorial-player.tutorial-collapsed #scenarioPlayerMount{display:none!important}
#demoCommandBar.tutorial-player #introHud.compact-player{display:flex!important;flex-direction:column;align-items:stretch;gap:8px;padding:0!important;max-height:45dvh;overflow:auto;opacity:1!important;transform:none!important}
#demoCommandBar.tutorial-player .player-caption{display:block!important}
#demoCommandBar.tutorial-player .story-kicker{display:none!important}
#demoCommandBar.tutorial-player #introHeading{display:block;font:650 15px/1.4 var(--native);color:var(--ui-text)}
#demoCommandBar.tutorial-player #introCopy{display:block;font:400 13px/1.5 var(--native);color:var(--ui-secondary);margin:4px 0 0}
#demoCommandBar.tutorial-player .player-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:5px}
#demoCommandBar.tutorial-player .player-actions button{min-height:32px;padding:5px 8px;font:500 12px var(--native);border-radius:6px;border:1px solid var(--ui-border);background:transparent;color:var(--ui-text)}
#demoCommandBar.tutorial-player #storyNext{background:#285d91;color:#fff!important;border-color:#285d91;max-width:none}
#demoCommandBar.tutorial-player .player-desktop-actions{border:0;padding:0;margin-left:auto}
#demoCommandBar.tutorial-player #introTiming{margin:0;height:9px}
#demoCommandBar.tutorial-player .chapter-popover{top:auto!important;bottom:calc(100% + 9px);left:0;width:330px;max-width:calc(100vw - 36px);max-height:min(60dvh,530px)}
#demoCommandBar.tutorial-player #scenarioPicker{display:grid;grid-template-columns:1fr}
#demoCommandBar.tutorial-player .scenario-card:disabled{opacity:.5}
#desktopPanel .desktop-frame>#fullscreenButton{position:absolute;right:14px;bottom:14px;z-index:126;display:flex;align-items:center;gap:7px;min-height:38px;padding:8px 12px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:9px;color:var(--ui-text);font:500 13px var(--native);box-shadow:0 4px 18px #10263e18}
#desktopPanel .desktop-frame>#fullscreenButton>span{display:inline!important}
#desktopPanel #exitFullscreen{display:none!important}
.lesson-target{outline:3px solid #2879e3!important;outline-offset:5px;box-shadow:0 0 0 8px #2879e32b!important}
#lessonNoteForm{display:grid;gap:7px;padding:16px 0 28px}
#lessonNoteForm label{font-size:14px;font-weight:600}
#lessonNoteInput{width:100%;resize:vertical;min-height:65px;padding:10px;border:1px solid var(--ui-border);border-radius:7px;background:var(--ui-surface);color:var(--ui-text);font:15px/1.5 var(--native)}
#lessonNoteForm button{justify-self:start;padding:8px 13px;border:0;border-radius:7px;background:#285d91;color:#fff}
@media(max-width:620px){
#desktopPanel .desktop-frame>#demoCommandBar.tutorial-player{left:8px;bottom:54px;width:calc(100% - 16px);max-width:none}
#desktopPanel .desktop-frame>#fullscreenButton{right:8px;bottom:8px;min-height:36px}
#demoCommandBar.tutorial-player #introHud.compact-player{max-height:30dvh}
#demoCommandBar.tutorial-player .chapter-trigger{font-size:12px}
#demoCommandBar.tutorial-player .tutorial-toolbar>button,#demoCommandBar.tutorial-player #storyPause{padding-inline:6px}
}
@media(pointer:coarse){
#demoCommandBar.tutorial-player .tutorial-toolbar>button,#demoCommandBar.tutorial-player #storyPause,#demoCommandBar.tutorial-player .chapter-trigger,#demoCommandBar.tutorial-player .player-actions button{min-height:42px}
}

/* Spotlight geometry is measured in the fixed logical desktop, never normal flow. */
#desktop #introCursor{position:absolute;left:0;top:0;right:auto;bottom:auto;width:26px;height:30px;min-width:0;max-width:none;margin:0;padding:0;z-index:96;pointer-events:none;transform-origin:0 0;line-height:0;overflow:visible;will-change:transform}
#desktop #introCursor>.icon{display:block;width:26px;height:30px;overflow:visible}
#desktop #introCursor::after{content:"";position:absolute;left:-14px;top:-14px;width:38px;height:38px;border:1.5px solid #ffffffb3;border-radius:50%;background:#ffffff0d;box-shadow:0 0 0 1px #173c543b;pointer-events:none}
#desktop #introCursor.focused::after{left:-23px;top:-23px;width:58px;height:58px;border:2px solid #ffe3a1;background:#ffd67512;box-shadow:0 0 0 6px #ffd67515}
#desktop #demoSpotlight{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;pointer-events:none;overflow:hidden}
#desktop #demoSpotlight>svg{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;transform:none;overflow:hidden}
#desktop #demoSpotlightShade{fill:#07111e;fill-opacity:.34;fill-rule:evenodd;stroke:none;transform:none}
[data-theme=dark] #desktop #demoSpotlightShade{fill-opacity:.28}

/* Controls occupy their own desktop edge. No persistent card covers an app. */
#desktopPanel .desktop-frame>#desktopFooter{position:relative;display:flex;flex:0 0 auto;align-items:flex-start;gap:12px;width:100%;min-width:0;padding:5px 9px;background:var(--ui-surface);border-top:1px solid var(--ui-border);border-radius:0 0 9px 9px;z-index:125}
#desktopPanel .desktop-frame #desktopFooter>#demoCommandBar.tutorial-player{position:static!important;display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 14px;flex:1 1 auto;width:auto;min-width:0;max-width:none;margin:0!important;padding:0!important;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none}
#desktopFooter #demoCommandBar.tutorial-player .tutorial-toolbar{grid-column:1;gap:3px;padding:0}
#desktopFooter #demoCommandBar.tutorial-player .chapter-select{flex:0 1 auto}
#desktopFooter #demoCommandBar.tutorial-player .chapter-trigger{max-width:195px;min-height:34px}
#desktopFooter #demoCommandBar.tutorial-player[data-lesson-phase="watch"] #lessonTools{display:none}
#desktopFooter #demoCommandBar.tutorial-player #lessonCurrent{grid-column:2;display:block;width:100%;min-width:0;min-height:34px;margin:0;padding:5px 0;border:0;background:transparent;color:var(--ui-text);text-align:left;font:500 13px/1.4 var(--native);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#desktopFooter #demoCommandBar.tutorial-player #scenarioPlayerMount{grid-column:1/-1;padding:10px 2px 7px!important;border-top:1px solid var(--ui-border)}
#desktopFooter #demoCommandBar.tutorial-player #introHud.compact-player{max-height:28dvh}
#desktopFooter #demoCommandBar.tutorial-player .player-caption{text-align:left}
#desktopFooter #demoCommandBar.tutorial-player .scenario-context{display:none!important}
#desktopPanel .desktop-frame #desktopFooter>#fullscreenButton{position:static;display:flex;flex:0 0 auto;align-items:center;gap:6px;min-height:34px;padding:6px 8px;margin:0;border:0;border-radius:6px;background:transparent;color:var(--ui-text);font:500 12px var(--native);box-shadow:none}
#desktopFooter>#fullscreenButton>span{display:inline!important}
#desktopFooter>#fullscreenButton>.icon{width:15px;height:15px}
#desktopFooter>#fullscreenButton:hover{background:#8196ad20}
#desktopFooter #lessonCollapse{min-width:30px}
@media(max-width:740px){
#desktopPanel .desktop-frame>#desktopFooter{gap:4px;padding:4px 6px}
#desktopPanel .desktop-frame #desktopFooter>#demoCommandBar.tutorial-player{grid-template-columns:minmax(0,1fr);gap:0}
#desktopFooter #demoCommandBar.tutorial-player #lessonCurrent{grid-column:1;min-height:26px;padding:0 6px 4px;font-size:12px}
#desktopFooter #demoCommandBar.tutorial-player .chapter-trigger{max-width:168px;padding-inline:4px}
#desktopFooter #demoCommandBar.tutorial-player .tutorial-toolbar{justify-content:flex-start}
#desktopFooter #demoCommandBar.tutorial-player .chapter-select{flex:1;min-width:0}
#desktopPanel .desktop-frame #desktopFooter>#fullscreenButton{padding-inline:5px;font-size:11px}
}
@media(pointer:coarse){
#desktopPanel .desktop-frame #desktopFooter>#fullscreenButton,#desktopFooter #demoCommandBar.tutorial-player .chapter-trigger,#desktopFooter #demoCommandBar.tutorial-player .tutorial-toolbar>button,#desktopFooter #demoCommandBar.tutorial-player #storyPause{min-height:42px}
}

/* Soft focus, not an annotation. A single feathered shade sits behind the cursor. */
#desktop #demoSpotlight>svg{display:none!important}
#desktop #demoFocusCanvas{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;pointer-events:none;background:transparent}
#desktop #demoAttentionArrows{display:none!important}
#desktop #introCursor::after{left:-10px;top:-12px;width:30px;height:30px;border:1px solid #ffffffa6;background:transparent;box-shadow:0 0 0 1px #183d532b}
#desktop #introCursor.focused::after{left:-17px;top:-19px;width:44px;height:44px;border:1.5px solid #ffffffbd;background:#ffffff06;box-shadow:0 0 0 5px #ffffff0b}
#desktop #introCursor>.icon{fill:#fff;stroke:#28435b;stroke-width:1.25;filter:drop-shadow(0 2px 2px #102a403b)}
/* Nine feature cards flow to the width instead of holding three columns at every size. */
.features{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px 40px}
.about-facts dd a{color:var(--blue);text-decoration:underline}
.impressum{font-size:14px;line-height:1.8;color:var(--muted)}
.app-logo-image{background:none;box-shadow:none;object-fit:cover}
.dock button.dock-mouse-icon{background:none;box-shadow:none;overflow:visible}
.dock button.dock-mouse-icon>img{width:44px;height:44px;border-radius:11px;box-shadow:0 1px 3px #1b3b6340}
.faq-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px 40px;margin-top:34px}
.faq-list dt{font-size:15px;font-weight:650;letter-spacing:-.25px;margin:0 0 6px;color:var(--ink)}
.faq-list dd{margin:0;font-size:13px;line-height:1.75;color:var(--muted)}
.privacy-text{font-size:14px;line-height:1.75;color:var(--muted)}
.privacy-text b{color:var(--ink);font-weight:650}
.price-cards{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}
.price-cards article{padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--ui-surface)}
.price-cards h3{font-size:22px!important}
.price-cards .price-note{color:var(--ink)!important;font-weight:600}
.price-cards .button-primary{margin-top:6px}
.platforms{font-size:13px;color:var(--muted);margin-top:18px}
.platforms b{color:var(--ink);font-weight:650}
.platforms a{color:var(--blue);text-decoration:underline}

.nav-download{margin-top:0;font-size:14px;padding:11px 18px;white-space:nowrap;border-radius:9px}.nav-download .icon{width:16px;height:16px}@media(max-width:850px){.nav-download{font-size:12px;padding:9px 12px}}@media(max-width:560px){.nav-download{padding:8px 10px}.nav-download .icon{display:none}}