:root{--ui-font-ui:InterVariable, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;--ui-font-mono:ui-monospace, SFMono-Regular, monospace;--ui-text-caption:12px;--ui-text-label:14px;--ui-text-body:16px;--ui-text-section:20px;--ui-text-title:28px;--ui-weight-body:400;--ui-weight-label:500;--ui-weight-strong:600;--ui-space-1:4px;--ui-space-2:8px;--ui-space-3:12px;--ui-space-4:16px;--ui-space-6:24px;--ui-space-8:32px;--ui-ink:#203b30;--ui-ink-muted:#4d6255;--ui-paper:#F4F0E5;--ui-surface:#F4F0E5f2;--ui-float:#F4F0E5d9;--ui-matter-surface:#F4F0E5f0;--ui-matter-ink:#192d22;--ui-matter-muted:#1d3026;--ui-matter-hover:#30483e0c;--ui-matter-selected:#30483e14;--ui-matter-accent:#285440;--ui-hud-focus:#edc47d;--ui-hud-ink:#f6efdbf0;--ui-hud-muted:#dbe2d5db;--ui-hud-task:#edc47d;--ui-hud-event:#a5d4dc;--ui-hud-update:#b1d3ab;--ui-hud-shadow:0 1px 2px #10291e59,0 0 7px #10291e4d;--ui-hud-glyph-shadow:drop-shadow(0 1px 2px #10291e59) drop-shadow(0 0 7px #10291e4d);--ui-hud-wash:radial-gradient(ellipse 50% 50% at 50% 50%,#122c22b8 0%,#122c228c 40%,#122c2238 72%,#122c2200 100%);--ui-hud-panel:radial-gradient(ellipse 50% 50% at 50% 50%,#122c225e 0%,#122c2252 34%,#122c2229 62%,#122c2200 100%);--ui-hud-hover:#F4F0E51f;--ui-hud-selected:#F4F0E533;--ui-matter-hud-ink:var(--ui-hud-ink);--ui-matter-hud-muted:var(--ui-hud-muted);--ui-matter-hud-shadow:var(--ui-hud-shadow);--ui-matter-hud-background:var(--ui-hud-wash);--ui-matter-hud-hover:var(--ui-hud-hover);--ui-matter-hud-selected:var(--ui-hud-selected);--ui-matter-hud-accent:var(--ui-hud-task);--ui-font-emoji:"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;--ui-dialogue:#F4F0E5dc;--ui-dialogue-ink:#233c32;--ui-dialogue-line:#fffaf073;--ui-dialogue-shadow:0 6px 22px #172d2512;--ui-utility-surface:#122c2240;--ui-utility-hover:#F4F0E52b;--ui-utility-ink:var(--ui-hud-ink);--ui-utility-shadow:var(--ui-hud-shadow);--ui-input-surface:#142d2466;--ui-reply-well:#4a69580c;--ui-reply-rule:#4a695826;--ui-reply-sheen:#fffaf024;--ui-reply-title:#244f40;--ui-reply-link:#235c4d;--ui-reply-muted:#52645b;--ui-reply-warning:#86531e;--ui-reply-success:#286148;--ui-reply-highlight:#efd49e88;--ui-reply-highlight-ink:#62430e;--ui-well:#30483e09;--ui-line:#52665840;--ui-accent:#315f48;--ui-attention:#9a7135;--ui-error:#a3443f;--ui-on-dark:#f4f0e5;--ui-night:#263f36e8;--ui-focus:#785321;--ui-radius-capsule:999px;--ui-brand:#315f48;--ui-radius-control:8px;--ui-radius-panel:14px;--ui-duration-fast:160ms;--ui-duration-panel:220ms;--ui-chrome:var(--ui-hud-ink);--ui-shadow-text:var(--ui-hud-shadow);--ui-shadow:0 8px 28px #172d251c;--ui-control-height:40px}
.native-console,.ui-gallery{--ui-matter-hud-ink:var(--ui-hud-ink);--ui-matter-hud-muted:var(--ui-hud-muted);--ui-matter-hud-shadow:var(--ui-hud-shadow);--ui-matter-hud-background:var(--ui-hud-wash);--ui-matter-hud-hover:var(--ui-hud-hover);--ui-matter-hud-selected:var(--ui-hud-selected);--ui-matter-hud-accent:var(--ui-hud-task);--ui-utility-ink:var(--ui-hud-ink);--ui-utility-shadow:var(--ui-hud-shadow);--ui-chrome:var(--ui-hud-ink);--ui-shadow-text:var(--ui-hud-shadow)}
.native-console[data-time-of-day=night],.ui-gallery[data-theme=night]{--ui-matter-surface:#20382ff2;--ui-matter-ink:#f6efdb;--ui-matter-muted:#d5decb;--ui-matter-hover:#F4F0E514;--ui-matter-selected:#F4F0E526;--ui-matter-accent:#edc47d}
/* Built-in interaction materials. Shared verbatim by Applets, HUD and website. */
:root{
 --control-forest:var(--ui-brand,#315f48);--control-ink:var(--ui-ink,#203b30);
 --control-paper:var(--ui-paper,#f4f0e5);--control-muted:var(--ui-ink-muted,#4d6255);
 --control-fill:#fffdf4b8;--control-line:#315f4838;--control-hover:#e4ebdfeb;
 --control-glass:#181b20c2;--control-glass-hover:#181b20df;--control-glass-ink:#fff;
 --control-radius:14px 17px 15px 16px;--control-shadow:0 2px 8px #182c2012,inset 0 1px 0 #ffffff40;
 --control-height:44px;
}
:is(.native-console[data-time-of-day=night],.ui-gallery[data-theme=night]){
 --control-fill:#243b32eb;--control-line:#e3eddf45;--control-hover:#354f43;
 --control-ink:#f4f0e5;--control-muted:#c1cec3;
}
.ui-button,.button{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;
 min-height:44px;min-width:44px;padding:10px 18px;border:1px solid var(--control-line);
 border-radius:var(--control-radius);background:var(--control-fill);color:var(--control-ink);
 font:500 var(--ui-text-label,14px)/1.4 var(--ui-font-ui,inherit);text-decoration:none;text-shadow:none;
 box-shadow:var(--control-shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
 cursor:pointer;white-space:nowrap;transition:background .16s ease,box-shadow .16s ease;
}
.ui-button:not(:disabled):hover{background:var(--control-hover);color:var(--control-ink);filter:none}
.ui-button[data-variant=primary]{background:#315f48ed;color:#fff;border-color:#d5bf874d;box-shadow:inset 0 1px 0 #ffffff1f,0 1px 2px #203b301a}
.ui-button[data-variant=primary]:not(:disabled):hover{background:#234936;color:#fff}
.ui-button[data-variant=quiet]{background:transparent;box-shadow:none;border-color:transparent}
.ui-button[data-variant=danger]{background:#a3443f;color:#fff;border-color:transparent}
.ui-button[data-material=glass]{background:var(--control-glass);color:var(--control-glass-ink);border-color:#ffffff30;border-radius:999px}
.ui-button[data-material=glass]:not(:disabled):hover{background:var(--control-glass-hover);color:#fff}
.ui-button:not(:disabled):active{box-shadow:inset 0 2px 4px #0002}
.ui-button:disabled{opacity:.45;cursor:not-allowed;filter:none}
.ui-button[aria-busy=true]{opacity:.75;cursor:progress}
.ui-button[aria-busy=true]::after{content:'';width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:control-spin .8s linear infinite}
:is(.ui-button,.ui-input):focus-visible{outline:2px solid var(--control-ink);outline-offset:3px}
[data-material=glass]:focus-visible{outline-color:#fff;box-shadow:0 0 0 5px #181b20}
.ui-input{box-sizing:border-box;min-height:44px;max-width:100%;padding:10px 14px;border:1px solid var(--control-line);border-radius:12px;background:var(--control-fill);color:var(--control-ink);font:inherit}
.ui-input[aria-invalid=true]{border-color:var(--ui-error,#a3443f);outline-color:var(--ui-error,#a3443f)}
.ui-pane,.ui-choice{background:var(--control-fill);color:var(--control-ink);border:1px solid var(--control-line);border-radius:20px;padding:24px}
.ui-applet-surface{position:relative;background:var(--control-paper);border-color:#b6a78780;box-shadow:0 3px 14px #203b3012;padding:24px;isolation:isolate}
.ui-applet-header{position:relative;min-height:60px;padding:0 80px 16px 0;border-bottom:1px solid var(--control-line);margin-bottom:20px}
.ui-applet-header::after{content:'';position:absolute;right:0;top:-8px;width:80px;height:68px;background:url('hud/village-corner.png') center/contain no-repeat;pointer-events:none}
.ui-applet-header .ui-title{margin:0;font-size:28px;line-height:1.2;font-weight:600}
.ui-applet-header .ui-caption{margin:8px 0 0;font-size:14px}
.ui-applet-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--control-line)}
.ui-empty-state{padding:72px 20px 20px;text-align:center;background:url('hud/village-corner.png') center 4px/80px 64px no-repeat;color:var(--control-ink)}
.ui-empty-state h3{margin:0 0 8px;font-size:16px}.ui-empty-state p{margin:0}
.ui-applet-tabs{display:flex;gap:6px;margin:0 0 16px}.ui-applet-tabs button{font:inherit;padding:8px 20px;border:0;border-radius:8px;background:transparent;color:var(--control-ink);min-height:44px;cursor:pointer}.ui-applet-tabs [aria-selected=true]{background:#91b17d55}
.ui-applet-list{display:grid;gap:8px}.ui-applet-list button{display:block;width:100%;text-align:left;font:inherit;color:var(--control-ink);border:1px solid var(--control-line);background:var(--control-fill);border-radius:12px;padding:12px;cursor:pointer}.ui-applet-list [aria-current=true]{background:#91b17d44}
:is(.native-console[data-time-of-day=night],.ui-gallery[data-theme=night]) .ui-applet-surface{--control-paper:#203c33;border-color:#c6d5c03d}
.ui-applet-surface :is(button,input):focus-visible{outline:2px solid #6d9bac;outline-offset:3px}
/* All native text readers share the Village shell; source content is never painted. */
#notionWorld #notionContent[data-reader-hud=true]{
 position:absolute;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;scroll-padding:0;
 padding:24px;background:var(--control-paper);color:var(--control-ink);
 border:1px solid var(--control-line);border-radius:20px;box-shadow:var(--control-shadow);
 backdrop-filter:none;-webkit-backdrop-filter:none;
}
#notionWorld #notionContent[data-reader-hud=true]::after{display:none}
#notionWorld #notionContent[data-reader-hud=true]>.ui-applet-header{
 flex:none;box-sizing:border-box;width:100%;max-width:none;min-height:60px;
 padding:0 80px 16px 0;margin:0 0 16px;border-bottom:1px solid var(--control-line);
}
#notionWorld #notionContent[data-reader-hud=true]>.ui-applet-header::after{width:64px;height:56px;top:0;bottom:auto;left:auto;right:0;background:url('hud/village-corner.png') center/contain no-repeat;opacity:1}
#notionWorld #notionContent[data-reader-hud=true] .notion-eyebrow{font-size:12px;margin:0 0 6px;color:var(--control-muted)}
#notionWorld #notionContent[data-reader-hud=true] .notion-eyebrow::before{display:none}
#notionWorld #notionContent[data-reader-hud=true] .ui-title{font-size:28px;line-height:1.25;color:var(--control-ink);overflow-wrap:anywhere}
#notionWorld #notionContent[data-reader-hud=true]>.ui-reader-body{flex:1;min-height:0;width:100%;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:8px;outline-offset:-2px;font:400 16px/1.75 var(--ui-font-ui)}
#notionWorld #notionContent[data-reader-hud=true] :is(.app-source-body,.work-reader,.codex-reader){width:100%;box-sizing:border-box;max-width:none;margin:0;padding:0;color:inherit}
#notionWorld #notionContent[data-reader-hud=true] :is(.notion-prose,.notion-prose :is(h1,h2,h3,h4,h5,h6),.ui-title){color:var(--control-ink)}
#notionWorld #notionContent[data-reader-hud=true] .notion-prose{font:inherit;line-height:1.8;max-width:74ch;margin-inline:auto}
#notionWorld #notionContent[data-reader-hud=true] :is(.notion-prose a,.notion-original){color:var(--control-ink);text-decoration:underline;text-underline-offset:3px}
#notionWorld #notionContent[data-reader-hud=true] :is(pre,textarea){max-width:100%;box-sizing:border-box;color:var(--control-ink);background:var(--control-fill);border-color:var(--control-line)}
#notionWorld #notionContent[data-reader-hud=true] :is(.notion-prose blockquote,.notion-prose :is(th,td),.notion-prose pre){border-color:var(--control-line);color:inherit;background:var(--control-fill)}
#notionWorld #notionContent[data-reader-hud=true] :is(.codex-message h3,.codex-session-hint,.work-reader small,.ui-caption){color:var(--control-muted)}
/* Mail retains sender/thread anatomy, while using the same paper/forest palette. */
.mail-focus.ui-applet-surface{padding:24px;background:var(--control-paper);color:var(--control-ink);border-color:var(--control-line);border-radius:20px;box-shadow:var(--control-shadow)}
.mail-focus>.ui-applet-header{padding:0 70px 16px 0;margin:0 0 16px;background:none;border-color:var(--control-line);min-height:60px}
.mail-focus>.ui-applet-header::after{width:64px;height:56px;top:0}
.mail-focus .mail-page-title.ui-title{font-size:28px;color:var(--control-ink);margin:0;padding:0}
.mail-focus .mail-paper{padding:0 8px 8px 0;background:none;color:inherit}
#notionWorld #notionContent[data-applet=gmail] .mail-focus :is(.notion-prose,.notion-prose :is(h1,h2,h3,h4),a){color:var(--control-ink)}
#notionWorld #notionContent[data-applet=gmail] .mail-focus .notion-prose :is(blockquote,pre,code,th,td){color:var(--control-ink);background:var(--control-fill);border-color:var(--control-line)}
#notionWorld #notionContent :is(.ui-reader-body,.mail-focus) .notion-prose li::marker{color:var(--control-muted)}
.mail-focus :is(.mail-address,.mail-recipient,.mail-date,.mail-thread-message summary){color:var(--control-muted)}
.mail-focus :is(.mail-attachment,.mail-message pre){background:var(--control-fill);color:var(--control-ink);border-color:var(--control-line)}
.mail-focus :is(.mail-thread-message,.mail-attachments,.mail-identity-card,.mail-message td,.mail-message th){border-color:var(--control-line)}
@media(max-width:1000px){
 #notionWorld #notionContent[data-reader-hud=true],.mail-focus.ui-applet-surface{padding:16px}
 #notionWorld #notionContent[data-reader-hud=true] .ui-title,.mail-focus .mail-page-title.ui-title{font-size:22px}
 .mail-focus>.ui-applet-header{padding-right:0;flex-wrap:wrap}
 .mail-focus>.ui-applet-header::after{display:none}
}
.ui-note-columns{display:grid;grid-template-columns:minmax(180px,1fr) 1.5fr;gap:16px}.ui-note-columns .ui-input{width:100%;margin-bottom:10px}.ui-note-editor{padding:16px;border:1px solid var(--control-line);border-radius:12px}.ui-note-editor h3{margin:0 0 16px;font-size:18px}.ui-note-editor label{display:flex;align-items:center;gap:10px;margin:12px 0}.ui-note-editor input{accent-color:var(--control-forest);width:18px;height:18px}
@media(max-width:600px){.ui-note-columns{grid-template-columns:1fr}}
@media(max-width:600px){.ui-applet-surface{padding:18px}.ui-applet-header .ui-title{font-size:24px}}
.ui-choice[data-selected=true]{border-color:var(--control-forest);box-shadow:inset 0 0 0 1px var(--control-forest)}
.ui-notice{border-radius:12px;padding:12px 16px;background:#91b17d22;color:var(--control-ink)}
.ui-notice[data-state=error]{background:#a3443f18;color:var(--control-ink);border-inline-start:3px solid var(--ui-error,#a3443f)}
.ui-gallery{color:var(--control-ink)}
/* Weather keeps identity and Refresh fixed; only continuous content scrolls. */
.weather-panel{display:flex;flex-direction:column;flex:1;min-height:0;max-height:100%}
.weather-panel>.ui-applet-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin}
.weather-panel>.ui-applet-header,.weather-panel>.ui-applet-footer{flex:none}
.weather-panel .ui-applet-header{min-height:0;margin-bottom:0;padding-bottom:8px}
.weather-panel .ui-applet-header .ui-title{font-size:24px}
.weather-panel .ui-applet-header .ui-caption{margin-top:4px}
.weather-panel .ui-applet-footer{margin-top:8px;padding-top:8px;justify-content:flex-start;gap:20px}
.native-console #notionContent[data-template=weather]{top:56px!important;bottom:var(--reader-bottom,16px)!important;padding:8px!important;overflow:hidden!important;display:flex;flex-direction:column}
.native-console #notionContent[data-template=weather]>.notion-reader-head{height:32px;min-height:32px;flex:none;margin:0;padding:0;border:0}
@media(max-height:760px){.weather-panel{padding:14px}.weather-current{padding:6px 0;gap:10px}.weather-current>.weather-panel-icon{width:44px;height:44px}.weather-forecast-heading{margin:8px 0}}
.ui-title,.ui-section-title{color:var(--control-ink)}
.ui-caption,.ui-facts dt{color:var(--control-muted)}
body.ui-gallery:has([data-theme=night]){background:#233c34}
.ui-gallery .ui-material-demo{padding:32px;border-radius:20px;background:linear-gradient(125deg,#acc3aa,#52694e 55%,#e3d4b4);display:flex;gap:12px;flex-wrap:wrap}
.ui-gallery .ui-palette{display:flex;flex-wrap:wrap;gap:12px}.ui-swatch{padding:18px;border-radius:14px;min-width:110px}
@keyframes control-spin{to{transform:rotate(360deg)}}
/* Scene actions also use ui-button, but must not inherit content-button paint.
   Keep this in the final controls layer so variant/hover rules cannot harden it. */
.native-console .companion-dock .ui-button.world-capsule,.native-console .ui-button.world-footer-update{
 background:var(--system-glass-fill);color:var(--hud-scene-ink);border:1px solid var(--system-glass-line);
 border-radius:999px;box-shadow:var(--system-glass-shadow);text-shadow:var(--hud-scene-text-shadow);
 backdrop-filter:var(--system-glass-blur);-webkit-backdrop-filter:var(--system-glass-blur);font-weight:400;
}
.native-console :is(.companion-dock .ui-button.world-capsule,.ui-button.world-footer-update):not(:disabled):is(:hover,:active){background:var(--system-glass-hover);color:var(--hud-scene-ink);border-color:var(--system-glass-line);box-shadow:var(--system-glass-shadow);filter:none}
.native-console :is(.companion-dock .ui-button.world-capsule,.ui-button.world-footer-update):focus-visible{outline:2px solid var(--hud-scene-ink);outline-offset:3px}
/* One-line controls, not document/list-row content. Rows may contain rich copy. */
:is(.ui-button,.native-console .world-capsule){height:var(--control-height);min-height:var(--control-height);box-sizing:border-box;white-space:nowrap;flex-wrap:nowrap}
:is(.ui-button,.native-console .world-capsule)>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.native-console .companion-panel-button{width:var(--control-height);height:var(--control-height);min-height:var(--control-height)}
/* Dialogue actions are part of the sentence, not floating HUD pills. */
.native-console .companion-dialogue :is(.companion-action-footer a,.companion-guide-actions button,.companion-guide-content button,.companion-suggestions button),
.native-console .companion-dialogue :is(.companion-action-footer a,.companion-guide-actions button,.companion-guide-content button,.companion-suggestions button):is(:hover,:active){
 display:inline-flex;align-items:center;min-height:var(--control-height);box-sizing:border-box;
 max-width:100%;padding:4px 0;border:0;border-radius:3px;background:transparent;
 box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:none;filter:none;
 color:var(--ui-reply-success);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
}
.native-console .companion-dialogue :is(.companion-action-footer a,.companion-guide-actions button,.companion-guide-content button,.companion-suggestions button):hover{text-decoration-thickness:2px}
@media(prefers-reduced-motion:reduce){.ui-button{transition:none}.ui-button[aria-busy=true]::after{animation:none}}
/* One message bar under Fox (owner decision 2026-10-04): click to type, hold to speak, a microphone and Send inside;
   a desktop-only return sits left of it. Fox opens the companion panel. */
/* The bar keeps a clear margin above the window's bottom edge (owner report 2026-10-07). */
#notionWorld.native-console .notion-hud{bottom:16px}
/* In a narrow window the bar would cover the bottom-left Update capsule: Fox and the bar stand above it. */
@media(max-width:640px){#notionWorld.native-console:has(.world-update-dock>.world-footer-update:not([hidden])) .notion-hud{bottom:68px}}
#notionWorld.native-console .notion-hud[data-positioned=true]{transition:none}
#notionWorld.native-console .companion-pet{bottom:calc(48px + var(--fox-tag-room,0px))}
/* The dock's wings (Review, World) rise with Fox over its name tag, so they stay level with Fox and Settings
   (owner report 2026-10-07: Review sat 20px below Settings since #2037). */
#notionWorld.native-console .companion-dock{bottom:calc(42px + var(--fox-tag-room,0px))}
/* The bar's bottom margin grew 8px (#2064); Fox's card keeps its place over the World so it does not cover the
   devices of a place (Browser in Explore). */
#notionWorld.native-console .companion-dialogue{bottom:calc(174px + var(--fox-tag-room,0px))}
/* Beside an Applet the right-hand column is tall: Fox's card sits a little higher there. */
@media(min-width:801px){#notionWorld.native-console:is([data-detail-open=true],[data-depth=object]):not(.compact-viewport):not(.is-typing) .companion-dialogue{bottom:calc(204px + var(--fox-tag-room,0px))}}
/* The bar has two sizes (owner Order 2026-10-08): small at rest, larger while typing or while the pointer is on it
   or on Fox (owner request 2026-10-12). */
#notionWorld.native-console .companion-text-entry{left:50%;bottom:0;width:144px;height:44px;transform:translateX(-50%);pointer-events:none;--companion-bar-width:232px;--companion-bar-open:300px;--companion-bar-tools:36px}
#notionWorld.native-console:is([data-entry-expanded=true],[data-entry-hover=true],[data-entry-held=true]) .companion-text-entry{--companion-bar-width:var(--companion-bar-open)}
/* At rest the bar says only “Message <Agent>” in the same frosted glass as the buttons beside Fox, so it blends with
   the scene without hiding it (owner Order 2026-10-12). Send shows only once there is something to send. */
#notionWorld.native-console:not([data-entry-expanded=true],[data-entry-hover=true]) .companion-text-entry #notionCommand:has(#notionInput:placeholder-shown) #notionSend{display:none}
#notionWorld.native-console .companion-text-entry[data-quiet=true] #notionSend{display:none}
#notionWorld.native-console .companion-text-entry[data-quiet=true] #notionInput{text-align:center}
#notionWorld.native-console .companion-controls{position:absolute;bottom:0;right:calc(50% + min(var(--companion-bar-width),calc(100vw - 32px)) / 2 + 6px);display:flex;align-items:center;gap:4px;height:44px;pointer-events:auto;transition:right .22s ease-out}
/* The microphone stands inside the bar as a plain icon like Send, in the World and on the desktop alike (owner request
   2026-10-11: "都融到那个 input box 里面"), at its right end. The bar rests small and opens wider for typing. */
#notionWorld.native-console .companion-text-entry #notionCommand{padding-right:calc(var(--companion-bar-tools) + 8px);padding-left:calc(var(--companion-bar-lead,0px) + 12px)}
#notionWorld.native-console .companion-input-wave{padding-right:calc(var(--companion-bar-tools) + 12px);padding-left:calc(var(--companion-bar-lead,0px) + 16px)}
#notionWorld.native-console .companion-controls.companion-voice-controls{left:auto;right:calc(50% - min(var(--companion-bar-width),calc(100vw - 32px)) / 2 + 4px);gap:2px;z-index:1;transition:right .22s ease-out}
#notionWorld.native-console .companion-controls:empty{display:none}
/* The bug (native-chat.ts, Dev, Alpha and Beta only) stands at the bar's left end, after "+" while the bar is open. */
#notionWorld.native-console .companion-text-entry:has(>.companion-voice-controls>.companion-bug-button:not([hidden])){--companion-bar-lead:40px}
#notionWorld.native-console .companion-voice-controls>.companion-bug-button{position:absolute;top:4px;right:calc(min(var(--companion-bar-width),calc(100vw - 32px)) - 44px);display:grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--hud-scene-ink,#fffdf4);cursor:pointer;transition:right .22s ease-out}
#notionWorld.native-console .companion-voice-controls>.companion-bug-button:is(:hover,:focus-visible){background:var(--system-glass-press)}
#notionWorld.native-console .companion-voice-controls>.companion-bug-button[hidden],#notionWorld.native-console:is([data-onboarding=true],[data-onboarding-locked=true],[data-tour-lock=true],[data-tour-spotlight=true]) .companion-bug-button{display:none}
/* The microphone menu under the mic (#1228): long device names ellipsize; the current one is checked. */
.companion-mic-menu{position:fixed;z-index:200;transform:translateX(-50%);display:flex;flex-direction:column;gap:2px;min-width:180px;max-width:min(320px,calc(100vw - 16px));padding:6px;box-sizing:border-box;border:1px solid var(--hud-scene-line,#ffffff40);border-radius:12px;background:#181b20e0;color:var(--hud-scene-ink,#fff);backdrop-filter:var(--hud-scene-blur,blur(12px));-webkit-backdrop-filter:var(--hud-scene-blur,blur(12px));pointer-events:auto}
.companion-mic-menu[hidden]{display:none}
.companion-mic-menu>button{all:unset;box-sizing:border-box;display:block;width:100%;padding:6px 10px 6px 26px;border-radius:8px;font-family:inherit;font-size:13px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;position:relative}
.companion-mic-menu>button[aria-checked=true]::before{content:'✓';position:absolute;left:9px}
.companion-mic-menu>button:is(:hover,:focus-visible){background:var(--hud-scene-dark-hover,#ffffff26)}
.companion-mic-menu>button:focus-visible{outline:2px solid var(--hud-scene-ink,#fff);outline-offset:-2px}
/* The darker frosted control: Fox's three controls, and every control of the top bar (#951):
   Back, World, the Applet's actions, Picture in picture and the Native / Web switch. */
#notionWorld.native-console :is(.companion-controls>button,.scene-control,.applet-mode-toggle){
 box-sizing:border-box;border:1px solid var(--system-glass-line);background:var(--system-glass-fill);color:var(--hud-scene-ink);
 box-shadow:var(--system-glass-shadow);text-shadow:var(--hud-scene-text-shadow);backdrop-filter:var(--system-glass-blur);-webkit-backdrop-filter:var(--system-glass-blur);
}
#notionWorld.native-console :is(.companion-controls>button,.scene-control):is(:hover,:active,[aria-pressed=true],[aria-expanded=true]){background:var(--system-glass-hover)}
#notionWorld.native-console :is(.companion-controls>button,.scene-control,.applet-mode-toggle button):focus-visible{outline:2px solid var(--hud-scene-ink);outline-offset:2px}
/* The buttons beside Fox (owner requests 2026-10-05): at most three a side, stacked top to bottom and
   centered on Fox, each the same frosted capsule with an icon and its name. On the left, Fox's own
   (Settings, then Order) sit under the dock's left actions as one column: native-chat counts both
   (--fox-wing-n, --fox-side-n) and each moves by half the other's height (44px buttons, 8px gaps).
   Where Fox moves to the corner the column follows on Fox's right. Settings opens Settings directly and steps
   aside while the tour runs (the tour's way out is the Tutorial switch in the World's corner). */
#notionWorld.native-console .companion-side{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(calc(-50% + var(--fox-wing-n,0) * 26px));display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;z-index:2}
#notionWorld.native-console:is(.is-typing,.compact-viewport) .companion-side{right:auto;left:calc(100% + 8px);align-items:flex-start;transform:translateY(-50%)}
#notionWorld.native-console.fox-first-console:not(.is-typing):not(.compact-viewport) .fox-action-left{transform:translateY(calc(var(--fox-side-n,0) * -26px))}
#notionWorld.native-console.fox-first-console .world-actions .world-capsule{height:44px;min-height:44px;font-weight:500}
#notionWorld.native-console.fox-first-console .fox-action-side{gap:8px}
/* In the World they show only their icons (owner request 2026-10-11: "在世界上的时候可以就只显示一个 icon，然后你把鼠标移上去
   它会展开显示那个按钮的这个具体的名字"): each is round, and pointing at it or focusing it opens its name beside the icon,
   away from Fox, so the icon stays where it was. A button with no icon (a choice Fox offers) keeps its words. Both
   sides stand centred on Fox whatever their number. While typing, in a short window or inside an Applet (data-depth
   object or note) they keep their names. */
#notionWorld.native-console.fox-first-console:not(.is-typing):not(.compact-viewport):not([data-depth=object]):not([data-depth=note]) :is(.fox-action-side>.world-capsule:has(>svg),.companion-side>.fox-side-button.fox-side-button){
 box-sizing:border-box;width:auto;height:44px;min-height:44px;min-width:44px;padding:0 12px;gap:0;justify-content:flex-start;transition:gap .18s ease-out,padding .18s ease-out}
#notionWorld.native-console.fox-first-console:not(.is-typing):not(.compact-viewport):not([data-depth=object]):not([data-depth=note]) :is(.fox-action-left>.world-capsule:has(>svg),.companion-side>.fox-side-button.fox-side-button){flex-direction:row-reverse}
#notionWorld.native-console.fox-first-console:not(.is-typing):not(.compact-viewport):not([data-depth=object]):not([data-depth=note]) :is(.fox-action-side>.world-capsule:has(>svg),.companion-side>.fox-side-button.fox-side-button)>span{
 display:block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .2s ease-out,opacity .15s ease-out}
#notionWorld.native-console.fox-first-console:not(.is-typing):not(.compact-viewport):not([data-depth=object]):not([data-depth=note]) :is(.fox-action-side>.world-capsule:has(>svg),.companion-side>.fox-side-button.fox-side-button):is(:hover,:focus-visible){gap:7px;padding:0 14px}
#notionWorld.native-console.fox-first-console:not(.is-typing):not(.compact-viewport):not([data-depth=object]):not([data-depth=note]) :is(.fox-action-side>.world-capsule:has(>svg),.companion-side>.fox-side-button.fox-side-button):is(:hover,:focus-visible)>span{max-width:180px;opacity:1}
@media(prefers-reduced-motion:reduce){#notionWorld.native-console.fox-first-console :is(.fox-action-side>.world-capsule,.companion-side>.fox-side-button.fox-side-button),#notionWorld.native-console.fox-first-console :is(.fox-action-side>.world-capsule,.companion-side>.fox-side-button.fox-side-button)>span{transition:none}}
#notionWorld[data-onboarding-locked=true] .companion-side{display:none}
/* The tour's last step points at them: Fox's settings and the phone live here (owner order 2026-10-11). */
#notionWorld:is([data-tour-skippable=true],[data-tour-lock=true]):not([data-tour-step=fox]) .companion-side :is(.companion-panel-button,.companion-phone-button,.companion-journal-button){visibility:hidden}
/* Journal and Settings belong to the World: inside an Applet they step aside (owner request 2026-10-08). */
#notionWorld:is([data-depth=object],[data-depth=note]) .companion-side{display:none}
:is(#notionWorld.native-console,body) .fox-side-button.fox-side-button{
 box-sizing:border-box;display:inline-flex;align-items:center;gap:7px;width:auto;min-width:0;height:44px;min-height:44px;margin:0;padding:0 16px 0 13px;
 border:1px solid var(--system-glass-line);border-radius:999px;background:var(--system-glass-fill);color:var(--hud-scene-ink,#fffdf4);
 box-shadow:var(--system-glass-shadow);text-shadow:var(--hud-scene-text-shadow,0 1px 2px #14251bb3);backdrop-filter:var(--system-glass-blur);-webkit-backdrop-filter:var(--system-glass-blur);
 font:500 14px/1 var(--ui-font-ui,system-ui);white-space:nowrap;cursor:pointer;pointer-events:auto;appearance:none;
}
:is(#notionWorld.native-console,body) .fox-side-button.fox-side-button::before{content:none;display:none}
#notionWorld.native-console .companion-side>.fox-side-button.fox-side-button{position:static;inset:auto;transform:none}
:is(#notionWorld.native-console,body) .fox-side-button svg{position:static;width:18px;height:18px;flex:none;opacity:1;stroke-width:1.8;filter:drop-shadow(0 1px 2px #14251b99)}
:is(#notionWorld.native-console,body) .fox-side-button.fox-side-button:is(:hover,:active,[aria-expanded=true],[aria-pressed=true]){background:var(--system-glass-hover)}
:is(#notionWorld.native-console,body) .fox-side-button:focus-visible{outline:2px solid var(--hud-scene-ink,#fffdf4);outline-offset:2px}
/* Fox's name tag at its feet (owner request 2026-10-07, fox-name-tag.ts): the name at rest; while Fox works, a soft
   pulsing dot and what it is doing. It wears the original name tab of Fox's card (.companion-topic: amber, brown ink,
   uneven corners; owner request 2026-10-07 "用原来的样式"). It rides with Fox, keeps out of the tour (Fox stays quiet
   there) and of the small Fox of a typing or short window. It hangs just under Fox's paws, never over them (owner
   report 2026-10-07 "脚还是有点问题"): while it shows, Fox and its card stand --fox-tag-room higher above the bar. */
#notionWorld.native-console{--fox-tag-room:20px}
.native-console .fox-name-tag.fox-name-tag{
 position:absolute;left:50%;top:calc(100% - 2px);bottom:auto;right:auto;z-index:6;transform:translateX(-50%);
 box-sizing:border-box;display:inline-flex;align-items:center;gap:5px;width:auto;min-width:0;max-width:240px;height:auto;min-height:0;margin:0;padding:1px 12px;
 border:0;border-radius:13px 11px 14px 10px;background:#f0c27a;color:#4a3413;box-shadow:0 2px 6px #5a3a1033;text-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
 font:650 13px/1.5 var(--ui-font-ui,system-ui);letter-spacing:0;white-space:nowrap;cursor:pointer;pointer-events:auto;appearance:none;
}
.native-console .fox-name-tag.fox-name-tag:hover{background:#f4cb88}
.native-console .fox-name-tag:focus-visible{outline:2px solid #4a3413;outline-offset:2px}
.native-console .fox-name-tag-name{flex:none}
.native-console .fox-name-tag-status{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500;opacity:.92}
.native-console .fox-name-tag-status::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 1px 1px;border-radius:50%;background:currentColor;vertical-align:middle;animation:fox-name-tag-pulse 1.2s ease-in-out infinite}
.native-console .fox-name-tag-status[hidden]{display:none}
@keyframes fox-name-tag-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.native-console .fox-name-tag-status::before{animation:none}}
.native-console:is(.is-typing,.compact-viewport,[data-onboarding=true],[data-onboarding-locked=true],[data-tour-lock=true],[data-tour-spotlight=true],[data-tour-fox],[data-fox-away]) .fox-name-tag{display:none}
#notionWorld.native-console:is(.is-typing,.compact-viewport,[data-onboarding=true],[data-onboarding-locked=true],[data-tour-lock=true],[data-tour-spotlight=true],[data-tour-fox],[data-fox-away]){--fox-tag-room:0px}
:is(#notionWorld.native-console,body) .fox-side-button[hidden]{display:none}
/* The Tutorial switch while a tour runs (owner Order 2026-10-07, ui/frame/tour-lock.ts): a bulb, the word and a
   small switch, on, in the window's bottom-right on the body, above the spotlight and the lock. Once the tour is over
   it goes; Settings › General shows the tour again (owner request 2026-10-11). */
:is(#notionWorld .world-environment,body) .tutorial-switch{order:10;justify-self:end;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;height:28px;min-height:28px;margin:0;padding:0;border:0;border-radius:8px;appearance:none;background:none;box-shadow:none;color:inherit;font:500 var(--ui-text-label,13px)/1.5 var(--ui-font-ui,system-ui);text-shadow:inherit;white-space:nowrap;cursor:pointer;pointer-events:auto}
:is(#notionWorld .world-environment,body) .tutorial-switch[hidden]{display:none}
:is(#notionWorld .world-environment,body) .tutorial-switch svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;filter:var(--ui-hud-glyph-shadow,none)}
:is(#notionWorld .world-environment,body) .tutorial-switch:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.tutorial-switch-track{position:relative;flex:none;width:28px;height:16px;border-radius:999px;background:#ffffff38;box-shadow:inset 0 0 0 1px #ffffff73,0 1px 2px #14251b40;transition:background-color .15s}
.tutorial-switch-track>i{position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fffdf4;box-shadow:0 1px 2px #14251b66;transition:transform .15s}
.tutorial-switch[aria-checked=true] .tutorial-switch-track{background:#e9a63c}
.tutorial-switch[aria-checked=true] .tutorial-switch-track>i{transform:translateX(12px)}
@media (prefers-reduced-motion:reduce){.tutorial-switch-track,.tutorial-switch-track>i{transition:none}}
body>.tour-switch.tutorial-switch{position:fixed;left:0;top:0;z-index:2147483001;color:#fffdf4;text-shadow:0 1px 2px #14251bb3}
/* Order / Feedback: a round bug on its own just left of the message bar on every channel (owner 2026-10-06, kept there
   2026-10-07), the bar's own glass; while an Order listens it glows red, so capturing is always visible. The microphone
   is its twin on the bar's right (owner 2026-10-07). */
#notionWorld.native-console .companion-controls>.companion-speech-button{border:1px solid var(--system-glass-line);background:var(--system-glass-fill);color:var(--hud-scene-ink,#fffdf4);box-shadow:var(--system-glass-shadow);backdrop-filter:var(--system-glass-blur);-webkit-backdrop-filter:var(--system-glass-blur)}
#notionWorld.native-console .companion-controls>.companion-speech-button:is(:hover,:focus-visible){background:var(--system-glass-hover)}
/* Talk with Fox (ui/companion/fox-talk.ts): while it is on, the microphone wears a lantern ring; it breathes while Fox
   speaks, when a click on it interrupts. The Talk item heads the microphone menu, above a thin line. */
#notionWorld.native-console:is([data-talk=listening],[data-talk=thinking],[data-talk=speaking]) .companion-speech-button.companion-speech-button{border-color:#ffe3a3;box-shadow:0 0 0 4px #e3b04b59,var(--system-glass-shadow)}
#notionWorld.native-console[data-talk=speaking] .companion-speech-button.companion-speech-button{animation:talk-speaking 1.6s ease-in-out infinite}
@keyframes talk-speaking{50%{box-shadow:0 0 0 9px #e3b04b26,var(--system-glass-shadow)}}
@media (prefers-reduced-motion:reduce){#notionWorld.native-console[data-talk=speaking] .companion-speech-button.companion-speech-button{animation:none}}
/* The wake word ("Hey Fox", platform modules/companion/wake.ts): while it listens, a small lantern light sits on the
   microphone's shoulder, beside the system's own microphone indicator. */
.companion-mic-menu>[role=separator]{height:1px;margin:3px 6px;background:var(--hud-scene-line,#ffffff40)}
#notionWorld.native-console :is(.companion-controls,.scene-control,.applet-mode-toggle) svg{filter:drop-shadow(0 1px 2px #14251b99)}
#notionWorld.native-console .companion-controls>button{
 position:static;display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;
 width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;cursor:pointer;transform:none;pointer-events:auto;
}
#notionWorld.native-console .companion-controls svg{width:20px;height:20px}
/* A bar control is only its icon, a circle like Fox's (Back, World, an Applet's actions, Picture in
   picture); the label stays its accessible name and tooltip. */
#notionWorld.native-console .scene-control{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;min-width:44px;margin:0;padding:0;border-radius:22px;font:500 14px/1 var(--ui-font-ui);white-space:nowrap;cursor:pointer}
#notionWorld.native-console .scene-control svg{width:20px;height:20px;flex:none}
#notionWorld.native-console .scene-control>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#notionWorld.native-console .scene-control[hidden]{display:none}
/* A website page's Back at its first page, or Forward with nothing ahead, rests. */
#notionWorld.native-console .scene-control:is(.browser-back,.browser-forward):disabled{opacity:.45;cursor:default;background:var(--system-glass-fill)}
/* Make Applet at the top of the Browser says what it does: icon and words on one pill. */
/* A website page's toolbar (ui/applets/browser-device.ts): each control a frosted black button (owner request 2026-10-15),
   its glass from layout.css's --browser-glass-*. */
#notionWorld.native-console .browser-toolbar .scene-control{width:34px;height:34px;min-width:34px;min-height:34px;border:1px solid var(--browser-glass-line);border-radius:17px;background:var(--browser-glass-fill);box-shadow:var(--browser-glass-shadow);color:#fff;text-shadow:none;-webkit-backdrop-filter:var(--browser-glass-blur);backdrop-filter:var(--browser-glass-blur)}
#notionWorld.native-console .browser-toolbar .scene-control svg{width:18px;height:18px;filter:none}
#notionWorld.native-console .browser-toolbar .scene-control:is(:hover,[aria-pressed=true]):not(:disabled){background:var(--browser-glass-hover)}
#notionWorld.native-console .browser-toolbar .scene-control:disabled{opacity:1;color:#ffffff73;cursor:default;background:var(--browser-glass-fill)}
#notionWorld.native-console .browser-toolbar .browser-focus{width:auto;margin-left:2px;padding:0 12px 0 9px;gap:6px}
#notionWorld.native-console .browser-toolbar .browser-focus>span{position:static;width:auto;height:auto;overflow:visible;clip-path:none;font-size:13px}
#notionWorld.native-console .browser-toolbar .browser-focus svg{width:15px;height:15px}
#notionWorld.native-console .scene-control.browser-make-applet{width:auto;padding:0 16px 0 13px;gap:7px}
#notionWorld.native-console .scene-control.browser-make-applet>span{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
#notionWorld.native-console .scene-control.browser-make-applet:disabled{opacity:.6;cursor:wait}
/* Native / Web: a capsule of two icon segments; the chosen one is lit (owner decision 2026-10-03). */
#notionWorld.native-console .applet-mode-toggle{display:flex;gap:2px;height:44px;padding:3px;border-radius:22px}
#notionWorld.native-console .applet-mode-toggle button{display:grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
#notionWorld.native-console .applet-mode-toggle button:is(:hover,:active){background:var(--system-glass-hover)}
#notionWorld.native-console .applet-mode-toggle button[aria-pressed=true]{background:var(--hud-scene-hover)}
#notionWorld.native-console .applet-mode-toggle svg{display:block;width:20px;height:20px}
#notionWorld.native-console .companion-text-entry #notionCommand{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(var(--companion-bar-width),calc(100vw - 32px));height:auto;min-height:44px;align-items:flex-end;border-radius:22px;overflow:hidden;pointer-events:auto;transition:width .22s ease-out}
/* Send: a 32px circle with an 18px icon inside the bar's right end. */
#notionWorld.native-console .companion-text-entry #notionSend{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;min-height:32px;margin:0 0 4px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;opacity:1;font-size:0;cursor:pointer}
/* Send stands out from the bar (owner 2026-10-07: the plain arrow was easy to miss): a light filled circle, dark arrow. */
#notionWorld.native-console .companion-text-entry #notionSend.companion-send-button{background:#fffdf4;color:#1d2a22;box-shadow:0 1px 3px #0b120e66}
#notionWorld.native-console .companion-text-entry #notionSend.companion-send-button:is(:hover,:focus-visible){background:#ffffff;box-shadow:0 0 0 3px #fffdf440,0 1px 3px #0b120e66}
#notionWorld.native-console .companion-text-entry #notionSend.companion-send-button:disabled{opacity:.45;cursor:default}
#notionWorld.native-console .companion-text-entry #notionSend.companion-send-button svg{stroke-width:2.4}
#notionWorld.native-console .companion-text-entry #notionSend svg{width:18px;height:18px}
#notionWorld.native-console[data-entry-expanded=false] .companion-text-entry #notionInput{cursor:pointer;white-space:nowrap;text-overflow:ellipsis}
/* The draft grows upward with its text, up to six lines, then scrolls (owner report 2026-10-04); native-chat's fitInput sets the height
   and lifts Fox and its reply by the added height so the field never covers them. */
#notionWorld.native-console :is(.companion-pet,.companion-dialogue){translate:0 calc(-1 * var(--companion-entry-lift,0px))}
#notionWorld.native-console .companion-text-entry #notionInput{box-sizing:content-box;height:24px;min-height:0;border:0;border-radius:0;padding:0;margin:7px 0;line-height:24px;resize:none;overflow:hidden;display:block}
@media(prefers-reduced-motion:reduce){#notionWorld.native-console .companion-text-entry #notionCommand,#notionWorld.native-console .companion-controls{transition:none}}
#notionWorld.native-console .companion-text-entry #notionCommand,#notionWorld.native-console .companion-text-entry #notionCommand:focus-within{background:var(--control-glass)}
#notionWorld.native-console .companion-text-entry #notionCommand[hidden]{display:none}
/* While the microphone listens the bar gives way to a sound wave of the same size and glass (owner request 2026-10-09). */
#notionWorld.native-console .companion-input-wave{position:absolute;inset:auto auto 0 50%;transform:translateX(-50%);box-sizing:border-box;width:min(var(--companion-bar-width),calc(100vw - 32px));height:44px;padding:0 16px;border:1px solid var(--system-glass-line);border-radius:22px;background:var(--system-glass-fill);box-shadow:var(--system-glass-shadow);backdrop-filter:var(--system-glass-blur);-webkit-backdrop-filter:var(--system-glass-blur);pointer-events:none}
#notionWorld.native-console .companion-input-wave i{flex:0 0 3px;width:3px}
#notionWorld.native-console .companion-listening-state,#notionWorld.native-console .companion-gesture-hint{display:none}
#notionWorld.native-console .companion-avatar{cursor:grab}
#notionWorld.native-console.is-dragging-fox .companion-avatar{cursor:grabbing}
/* Native readers keep their reading gutter; browser frames own their tighter inset. */
@media(min-width:801px){
 /* An Applet drawn in its theme scene puts its reader on the scene's painted region instead (ui/applets/scene). */
 #notionWorld.native-console:not([data-applet-scene]) #notionContent:not([data-template=browser]){top:64px!important;left:64px!important;bottom:64px!important}
 /* Inside an Applet the Applet shelf stands above the panel (ui/world/applet-shelf.ts). */
 #notionWorld.native-console[data-applet-shelf]:not([data-applet-scene]) #notionContent{top:150px!important}
 #notionWorld.native-console #notionContent:not([data-template=browser]):is([data-template=weather],[data-applet=gmail]){--weather-shell-padding:0px;padding:0!important}
 #notionWorld.native-console #notionContent[data-template=weather]>.notion-reader-head{display:none}
 #notionWorld.native-console #notionContent .weather-panel{max-width:none;margin:0}
}
@media(prefers-reduced-transparency:reduce){:root{--control-fill:#f4f0e5;--control-glass:#181b20}.ui-button{backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-transparency:reduce){:is(.native-console[data-time-of-day=night],.ui-gallery[data-theme=night]){--control-fill:#243b32}.ui-button[data-variant=primary]{background:#315f48}}

/* Companion configuration and Area editing use one Village HUD reading shell. */
.native-console .ui-hud-panel{
 --control-fill:#fffdf4b8;--control-hover:#e4ebdfeb;--control-ink:var(--ui-ink,#203b30);--control-muted:var(--ui-ink-muted,#4d6255);--control-line:#315f4838;
 background:var(--ui-paper) var(--hud-paper-art) center/cover;color:var(--control-ink);
 border:1px solid var(--control-line);border-radius:24px 28px 26px 30px;
 box-shadow:0 12px 40px #162a3230;padding:24px;backdrop-filter:none;-webkit-backdrop-filter:none;
 font:400 14px/1.5 var(--ui-font-ui);text-shadow:none;
}
.ui-hud-panel :is(.companion-info-body,.region-shelf-scroll){gap:16px}
.ui-hud-panel :is(.companion-info-main,.region-shelf-scroll){scrollbar-width:thin;scrollbar-color:var(--control-line) transparent}
.ui-hud-panel :is(p,.companion-info-note,.region-shelf-note,.companion-profile-facts dt,.companion-feedback summary,small){color:var(--control-muted);font-size:13px;line-height:1.5;opacity:1}
.ui-hud-panel :is(.companion-info-section>h3,.region-shelf-scroll h3){color:var(--control-ink);font-size:14px;font-weight:600;margin:16px 0 8px}
.ui-hud-panel :is(.region-shelf-header h2,.companion-info-profile h2){color:var(--control-ink);font-size:24px;line-height:1.4;font-weight:600}
.ui-hud-panel .companion-info-nav{border:0;gap:6px;padding-bottom:0;box-shadow:none}
.native-console .ui-hud-panel .companion-info-nav button{border:0;border-radius:var(--control-radius);background:transparent;color:var(--control-muted);box-shadow:none;min-height:44px;padding:10px 14px;font-size:14px}
.native-console .ui-hud-panel .companion-info-nav button:is([aria-selected=true],:hover){background:var(--control-hover);color:var(--control-ink)}
.ui-hud-panel :is(.companion-info-card,.companion-feedback-draft){background:var(--control-fill);border:1px solid var(--control-line);border-radius:var(--control-radius);padding:12px;gap:12px;color:var(--control-ink)}
.ui-hud-panel :is(.companion-info-card p,.companion-info-profile p,.companion-profile-facts dt){color:var(--control-muted);font-size:13px;line-height:1.5}
.ui-hud-panel :is(.companion-info-symbol,.companion-history-source){color:var(--control-forest)}
.ui-hud-panel :is(.companion-history-controls,.companion-history-source){background:var(--ui-paper)}
.ui-hud-panel :is(.companion-info-card button,.companion-feedback-actions button,.companion-history-controls button,.companion-settings-body button,.companion-panel-guide button){min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--control-line);border-radius:var(--control-radius);background:var(--control-fill);color:var(--control-ink);font:500 14px/1.5 var(--ui-font-ui);box-shadow:var(--control-shadow)}
.ui-hud-panel :is(.companion-info-card button,.companion-feedback-actions button,.companion-history-controls button,.companion-settings-body button,.companion-panel-guide button,.region-shelf-applet):not(:disabled):hover{background:var(--control-hover);color:var(--control-ink)}
.ui-hud-panel :is(input:not([type=checkbox]):not([type=range]),textarea,select){background:var(--control-fill);color:var(--control-ink);border:1px solid var(--control-line);border-radius:12px;min-height:44px;font:inherit;padding:10px 14px;box-sizing:border-box;max-width:100%}
.ui-hud-panel :is(button,input,textarea,select):focus-visible{outline:2px solid var(--control-forest);outline-offset:2px}
.ui-hud-panel .region-shelf-applet{border-radius:var(--control-radius);padding:8px;gap:8px;min-height:44px}
.ui-hud-panel .region-shelf-applet span{font-size:14px;line-height:1.5}
.ui-hud-panel .region-shelf-empty{color:var(--control-muted);opacity:1}
.ui-hud-panel .region-shelf-grid [data-ground-slot].is-drop-target{background:var(--control-hover);outline-color:var(--control-forest)}
@media(max-width:600px){.native-console .ui-hud-panel{padding:16px}.native-console .companion-info-panel.ui-hud-panel[open]{padding-top:48px}.native-console .ui-hud-panel .companion-info-nav button{padding-inline:10px}}

/* Home Focus surfaces continue their physical device without obscuring source text. */
#notionWorld #notionContent[data-reader-hud=true][data-applet=apple-notes]{border-top:20px solid #d8b963;background:var(--control-paper) var(--hud-paper-art) center/cover}
#notionWorld #notionContent[data-reader-hud=true][data-applet=apple-reminders]{border-top:12px solid #b3a68e;background:var(--control-paper) var(--hud-paper-art) center/cover}
#notionWorld #notionContent[data-reader-hud=true][data-applet=google-calendar]{border-top:20px solid #c36f54;background:var(--control-paper) var(--hud-paper-art) center/cover}
#notionWorld #notionContent[data-reader-hud=true]:is([data-applet=apple-notes],[data-applet=apple-reminders],[data-applet=google-calendar])>.ui-applet-header::after{display:none}
.home-record-facts{display:flex;flex-wrap:wrap;gap:16px 32px;margin:0 0 24px;padding:0 0 20px;border-bottom:1px solid var(--control-line)}.home-record-facts>div{min-width:100px;max-width:100%}.home-record-facts dt{font-size:12px;color:var(--control-muted)}.home-record-facts dd{margin:4px 0 0;font-size:16px;overflow-wrap:anywhere}
/* Paper reading materials (Mail and the Home Notes, Reminders and Calendar pages) stay light with day ink
   even when the surrounding world is night: the night's light ink on painted paper was unreadable (Order 2026-10-06). */
:is(.native-console,.ui-gallery) .mail-focus.ui-applet-surface,.mail-focus.ui-applet-surface,
#notionWorld #notionContent[data-reader-hud=true]:is([data-applet=apple-notes],[data-applet=apple-reminders],[data-applet=google-calendar]){--control-paper:var(--ui-paper,#f4f0e5);--control-ink:#203b30;--control-muted:#4d6255;--control-line:#315f4838;--control-fill:#fffdf4b8;--control-hover:#e4ebdfeb}
:is(.native-console,.ui-gallery) .mail-focus.ui-applet-surface,.mail-focus.ui-applet-surface{background:var(--control-paper) var(--hud-paper-art) center/cover;border-radius:4px 8px 6px 5px;box-shadow:0 4px 0 #e4dbc8,0 8px 20px #203b3020}
.mail-focus>.ui-applet-header{padding-right:116px}.mail-focus>.ui-applet-header::after{display:none}.mail-focus .mail-message .notion-prose{max-width:72ch;margin-inline:auto;font-size:16px;line-height:1.8}
.mail-focus .mail-sender-portrait{display:grid;place-items:center;flex:none;width:48px;height:48px;overflow:hidden;border-radius:4px;background:var(--mail-avatar-tint,#a4ae94);color:#fffaf0;border:3px solid #fff8e7;outline:1px dashed #8a987d}.mail-focus .mail-date{align-self:flex-end}.mail-focus .mail-sender-portrait[data-kind=logo]{background:#fffaf0}.mail-focus .mail-sender-portrait .mail-avatar-initials{font-size:18px}


/* System navigation has its own glass material; content surfaces keep their paper/forest palette. */
:root{--system-glass-fill:#25332b99;--system-glass-hover:#243329bf;--system-glass-line:#fffdf433;--system-glass-blur:blur(18px) saturate(1.15);--system-glass-shadow:inset 0 1px 0 #ffffff14,0 2px 6px #15281c14;--system-glass-menu:#1d2a23e6;--system-glass-press:#fffdf424}
#notionWorld.native-console .companion-text-entry #notionCommand,#notionWorld.native-console .companion-text-entry #notionCommand:focus-within{background:var(--system-glass-fill);border-color:var(--system-glass-line);box-shadow:var(--system-glass-shadow);backdrop-filter:var(--system-glass-blur);-webkit-backdrop-filter:var(--system-glass-blur)}
@media(prefers-reduced-transparency:reduce){:root{--system-glass-fill:#33483b;--system-glass-hover:#263b2e;--system-glass-blur:none;--system-glass-shadow:none}}
@supports not (backdrop-filter:blur(1px)){:root{--system-glass-fill:#33483b;--system-glass-hover:#263b2e;--system-glass-blur:none}}
@media(forced-colors:active){#notionWorld.native-console :is(.companion-controls>button,.scene-control,.applet-mode-toggle){border:1px solid ButtonText;background:ButtonFace;color:ButtonText;text-shadow:none;box-shadow:none}}

/* Imagegen country assets: decorative layers only; live content and hit targets stay above. */
:is(.native-console,.ui-gallery) .mail-focus.ui-applet-surface,.mail-focus.ui-applet-surface{padding:40px;background:none;border:0;border-radius:12px;box-shadow:none}
.mail-focus.ui-applet-surface::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border:56px solid transparent;border-image:url('hud/country-stationery.png') 220 fill / 56px / 0 stretch}
.mail-focus .mail-identity-card{padding:12px 16px 16px;border:1px solid #9f8c6140;border-radius:5px;background:#e5d3a52b}
#notionWorld .mail-reader-switch{transform:translate(-12px,16px)}
#notionWorld .mail-reader-switch button{background:#e8d8b6;color:#304f40;border:1px solid #98875b66;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 1px 0 #fff8e880}
#notionWorld .mail-reader-switch button:hover{background:#dfcda4}
.game-panel .game-header{position:relative;isolation:isolate;padding:10px 32px;background:none;border:0;border-radius:12px;box-shadow:none;color:#302b20}
.game-panel .game-header::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border:14px solid transparent;border-image:url('hud/country-rail.png') 30 70 fill / 14px 26px / 0 stretch}
.game-panel .game-header :is(.game-title,.ui-caption){color:inherit}
@media(max-width:600px){:is(.native-console,.ui-gallery) .mail-focus.ui-applet-surface,.mail-focus.ui-applet-surface{padding:30px 24px 26px}.mail-focus.ui-applet-surface::before{border-image-width:32px}.mail-focus .mail-identity-card{padding:10px}.mail-focus>.ui-applet-header{padding-right:112px}.game-panel .game-header{padding-inline:28px}}
@media(forced-colors:active){.mail-focus.ui-applet-surface::before,.game-panel .game-header::before{display:none}.mail-focus.ui-applet-surface,.game-panel .game-header{background:Canvas;border:1px solid CanvasText;color:CanvasText}}
/* Inside the bar "+", the bug, the microphone, ✕ and Stop are one kind of button (owner Order 2026-10-12): a plain
   icon on the bar's glass, a light frost under the pointer, like Claude's; listening, talking and an Order still light up. */
#notionWorld.native-console .companion-voice-controls>button{flex:0 0 36px;width:36px;height:36px;min-height:36px}
#notionWorld.native-console:not([data-talk=listening],[data-talk=thinking],[data-talk=speaking]) .companion-voice-controls>.companion-speech-button{border-color:transparent;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#notionWorld.native-console:not([data-talk=listening],[data-talk=thinking],[data-talk=speaking]) .companion-voice-controls>.companion-speech-button:is(:hover,:focus-visible){background:var(--system-glass-press)}
@media(prefers-reduced-motion:reduce){#notionWorld.native-console .companion-controls.companion-voice-controls{transition:none}}
/* ✕ and Stop are round like the bar's other buttons; Send keeps the theme's light circle (owner 2026-10-12: buttons keep
   the theme's colours), dimmed while there is nothing to send, as in Claude's bar. */
#notionWorld.native-console .companion-voice-controls>:is(.companion-voice-cancel,.companion-voice-stop){border:0;border-radius:50%;background:transparent;box-shadow:none}
#notionWorld.native-console .companion-voice-controls>:is(.companion-voice-cancel,.companion-voice-stop):is(:hover,:focus-visible){background:var(--system-glass-press)}
#notionWorld.native-console .companion-text-entry #notionCommand:has(#notionInput:placeholder-shown) #notionSend.companion-send-button{opacity:.45}
/* While the microphone listens the bar opens to its typing width and works like Claude's: ✕ at its left, a dotted wave
   (native-chat.ts paints each dot's height from the voice, the newest at the right), Stop, and the microphone as Send. */
#notionWorld.native-console .companion-text-entry[data-voice-edit=true]{--companion-bar-width:var(--companion-bar-open)}
#notionWorld.native-console .companion-text-entry[data-voice-edit=true]{--companion-bar-tools:74px;--companion-bar-lead:40px}
#notionWorld.native-console .companion-voice-controls>.companion-voice-cancel{position:absolute;top:4px;right:calc(min(var(--companion-bar-width),calc(100vw - 32px)) - 44px);transition:right .22s ease-out}
#notionWorld.native-console .companion-voice-controls>:is(.companion-voice-cancel,.companion-voice-stop){display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;min-height:36px;padding:0;color:var(--hud-scene-ink,#fffdf4);cursor:pointer}
#notionWorld.native-console .companion-voice-controls>:is(.companion-voice-cancel,.companion-voice-stop)[hidden]{display:none}
#notionWorld.native-console .companion-text-entry[data-voice-edit=true] .companion-voice-controls>.companion-speech-button,#notionWorld.native-console .companion-text-entry[data-voice-edit=true] .companion-voice-controls>.companion-speech-button:is(:hover,:focus-visible){background:#fffdf4;color:#1d2a22}
#notionWorld.native-console .companion-input-wave{justify-content:flex-end;gap:3px;overflow:hidden}
#notionWorld.native-console .companion-input-wave i{height:3px;border-radius:2px;opacity:.45;transition:none}
#notionWorld.native-console .companion-input-wave i.is-heard{opacity:.95}
#notionWorld.native-console .companion-text-entry[data-voice-edit=true] .companion-input-wave{padding:0 calc(var(--companion-bar-tools) + 14px) 0 calc(var(--companion-bar-lead) + 14px)}
/* As many dots as the wave has room for, the newest kept: seventeen in the small bar, twenty-six beside ✕ and Stop. */
#notionWorld.native-console .companion-input-wave i:nth-child(-n+23){display:none}
#notionWorld.native-console .companion-text-entry[data-voice-edit=true] .companion-input-wave i:nth-child(n+15){display:block}
/* While Send shows it takes the bar's right end and the microphone stands just before it, as in Claude's (native-chat.ts
   sets data-send); the bug stays at the left end. */
#notionWorld.native-console .companion-text-entry[data-send=true] #notionCommand{padding-right:6px}
#notionWorld.native-console .companion-text-entry[data-send=true] #notionSend{margin-left:calc(var(--companion-bar-tools) + 6px)}
#notionWorld.native-console .companion-text-entry[data-send=true] .companion-voice-controls{right:calc(50% - min(var(--companion-bar-width),calc(100vw - 32px)) / 2 + 42px)}
/* "+" at the open bar's far left (owner request 2026-10-12). */
#notionWorld.native-console .companion-voice-controls>.companion-plus-button{position:absolute;top:4px;right:calc(min(var(--companion-bar-width),calc(100vw - 32px)) - 82px);display:grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--hud-scene-ink,#fffdf4);cursor:pointer;transition:right .22s ease-out}
#notionWorld.native-console .companion-voice-controls>.companion-plus-button:is(:hover,:focus-visible){background:var(--system-glass-press)}
#notionWorld.native-console .companion-voice-controls>.companion-plus-button[hidden]{display:none}
#notionWorld.native-console .companion-text-entry[data-send=true]{--companion-bar-lead:40px}
#notionWorld.native-console .companion-text-entry[data-send=true]:has(>.companion-voice-controls>.companion-bug-button:not([hidden])){--companion-bar-lead:78px}
#notionWorld.native-console .companion-text-entry[data-send=true] .companion-voice-controls>.companion-bug-button{right:calc(min(var(--companion-bar-width),calc(100vw - 32px)) - 120px)}

@font-face{font-family:InterVariable;src:url('/fonts/InterVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:InterVariable;src:url('/fonts/InterVariable-Italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}

/* Foundations */
:root{color-scheme:light;--paper:var(--brand-paper);--ink:var(--brand-ink);--muted:var(--brand-muted);--green:var(--brand-forest);--line:var(--brand-line);--surface:var(--brand-surface);--veil:#f4f0e5d9;--radius:18px;--shadow:0 18px 50px #1f31241f;font-family:var(--brand-font);color:var(--ink);background:var(--paper);font-synthesis:none;scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
button,a,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--brand-focus);outline-offset:4px}
button[hidden],[hidden]{display:none!important}
img{max-width:100%}
.wrap{width:min(1180px,calc(100% - 80px));margin-inline:auto}
.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:600;line-height:1.6;margin:0 0 20px}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);vertical-align:middle;margin-right:9px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:50px;padding:14px 22px;border-radius:10px;border:0;font-size:14px;font-weight:500;transition:background .18s,box-shadow .18s,transform .18s}
.primary{color:var(--brand-on-forest);background:var(--green);box-shadow:0 3px 6px #263f3218}
.primary:hover{background:var(--brand-forest-hover);box-shadow:0 8px 20px #263f3230}
.text-link{font-size:14px;font-weight:500;display:inline-flex;gap:14px;align-items:center;min-height:44px}
.text-link:hover{color:var(--brand-forest-hover)}
.release-note{font-size:11px;line-height:1.6;color:var(--muted);margin:14px 0 0}
.skip{position:absolute;left:16px;top:-100px;padding:12px;background:var(--paper);z-index:40;border-radius:8px}
.skip:focus{top:16px}

/* The world, full height, before anything else on the page */
.hero{position:relative;height:100dvh;min-height:560px;overflow:hidden;background:#aec09a;isolation:isolate}
.hero-stage{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hero-stage canvas{display:block;width:100%;height:100%;touch-action:pan-y!important}
.hero-stage .pixi-applet-stage,.hero-stage .pixi-selected-item{display:none}
.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1s ease}
.hero-sky{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#f2efe2f2,#f2efe2a6 90px,#f2efe200 260px),linear-gradient(#f1efe200 62%,#f1efe2a8 87%,#f1efe2 100%)}
.hero[data-world=ready] .hero-stage{opacity:1}
.hero[data-world=ready] .hero-poster{opacity:0}
.hero:not([data-world=ready]) .hero-chips,.hero:not([data-world=ready]) .hero-caption,.hero:not([data-world=ready]) .hero-labels{display:none}

.header{position:absolute;inset:0 0 auto;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:20px;height:92px;width:min(1180px,calc(100% - 80px));margin-inline:auto}
.brand{min-height:44px;font-size:23px;font-weight:600;letter-spacing:-1px;display:inline-flex;align-items:center;gap:10px}
.header nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:500}
.header nav>a{padding:13px 0}
.header nav .nav-download{border:1px solid #b6c2ae;border-radius:10px;padding:11px 17px;background:#fbf9f0b8}
.header nav .nav-download:hover{background:#fbf9f0}
.nav-download span{margin-left:12px}
.nav-community{display:inline-flex;align-items:center;gap:2px;margin-inline:2px -8px}
.nav-community a{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px}
.nav-community svg{width:18px;height:18px;display:block;fill:currentColor}
.nav-community a:hover{background:#fbf9f0b8;color:var(--brand-forest-hover)}
.header a:hover{color:var(--brand-forest-hover)}
.actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* Labels ride the camera; the chips below are the keyboard path to the same places */
.hero-labels{position:absolute;inset:0;z-index:8;pointer-events:none}
.world-label{position:absolute;top:0;left:0;translate:-50% 0;pointer-events:auto;border:0;border-radius:99px;padding:6px 12px;font-size:11px;font-weight:500;letter-spacing:.2px;white-space:nowrap;color:var(--ink);background:#fbf9f0d9;box-shadow:0 2px 8px #24382b26;transition:background .16s,color .16s}
.world-label[data-kind=building]{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;padding:8px 15px}
.world-label:hover{background:var(--green);color:var(--brand-on-forest)}
.world-label.is-open{background:var(--green);color:var(--brand-on-forest);box-shadow:0 0 0 4px #315f4826}

.hero-guide{position:absolute;z-index:10;inset:auto 0 0;padding:0 40px 26px;text-align:center}
.hero-caption{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 14px}
.hero-chips{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}
.hero-chip{min-height:38px;padding:9px 15px;border:1px solid #c3cdba;border-radius:99px;background:#fbf9f0cc;color:var(--ink);font-size:12.5px;font-weight:500;transition:background .16s,color .16s,border-color .16s}
.hero-chip:hover{background:var(--green);border-color:var(--green);color:var(--brand-on-forest)}
.hero-chip[aria-pressed=true],.hero-chip-back{background:var(--green);border-color:var(--green);color:var(--brand-on-forest)}
.hero-chip-back:hover{background:var(--brand-forest-hover)}
.hero-status{font-size:11px;color:var(--muted);margin:13px 0 0;min-height:16px}
.hero-status:empty{display:none}
.hero-scroll{position:absolute;z-index:10;right:40px;bottom:26px;display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.hero-scroll:hover{color:var(--green)}

/* An Applet introduces itself. Nothing in this card does the Applet's work. */
.applet-card{position:absolute;z-index:14;right:max(40px,calc(50vw - 590px));top:50%;translate:0 -50%;width:min(370px,calc(100% - 80px));padding:28px 30px 26px;border-radius:24px;background:#faf8efeb;backdrop-filter:blur(18px);box-shadow:var(--shadow)}
.card-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:#e7ebdd;color:var(--muted);font-size:19px;line-height:1}
.card-close:hover{background:var(--green);color:var(--brand-on-forest)}
.card-region{text-transform:uppercase;letter-spacing:2px;font-size:10px;font-weight:600;color:var(--green);margin:0 0 10px}
.card-title{font-size:27px;font-weight:500;letter-spacing:-1.1px;margin:0 0 14px}
.card-copy{font-size:14px;line-height:1.75;color:var(--ink);margin:0 0 14px}
.card-note{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 22px;padding-top:14px;border-top:1px solid var(--line)}
.applet-card .button{width:100%}
.card-small{font-size:11px;line-height:1.6;color:var(--muted);margin:14px 0 0}

/* Below the world */
main{position:relative;background:var(--paper)}
.inside{text-align:center;padding:118px 0 104px}
.inside h2,.principles h2,.download-section h2{font-size:clamp(32px,3.4vw,44px);line-height:1.12;letter-spacing:-1.8px;font-weight:500;margin:0 0 20px}
.section-lede{color:var(--muted);font-size:16px;line-height:1.8;margin:0 auto;max-width:56ch}
.companion-section{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:20px 0 104px}
.principles{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;border-top:1px solid var(--line);padding:74px 0 92px}
.download-section{text-align:center;background:var(--surface);padding:78px 0}
.download-section img{margin-bottom:22px}
.download-section .eyebrow{margin-bottom:16px}
.download-section p:not(.eyebrow):not(.release-note){font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:26px}
.faq{display:grid;grid-template-columns:.85fr 1.4fr;gap:72px;padding:84px 0}
.faq h2{font-size:28px;letter-spacing:-.9px;font-weight:500;margin:0}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{list-style:none;cursor:pointer;font-size:14px;font-weight:500;min-height:44px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';font-size:20px;font-weight:400}
.faq details[open] summary:after{content:'−'}
.faq details p{color:var(--muted);font-size:14px;line-height:1.8;max-width:60ch;margin:0 0 6px}
.footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 0 36px}
.footer .brand{--brand-wordmark-size:20px;--brand-mark-size:28px}
.footer nav,.footer>a:last-child{font-size:11px;color:var(--muted)}
.footer>a:last-child{min-height:44px;display:inline-flex;align-items:center}

/* Shorter viewports keep the world; the writing steps back */
@media(max-height:620px){.hero-guide{padding-bottom:16px}.hero-caption{margin-bottom:10px}}
@media(max-width:1000px){.wrap,.header{width:calc(100% - 44px)}.header{height:80px;gap:12px}.header nav{gap:14px}.header nav>a:not(.nav-download){display:none}.nav-community{margin-inline:0}.hero-scroll{display:none}.hero-guide{padding-inline:18px}.applet-card{right:22px;width:min(340px,calc(100% - 44px))}.inside{padding:82px 0 66px}.companion-section,.principles,.faq{gap:40px}.companion-section{padding-bottom:70px}.principles{padding:58px 0 70px}.faq{padding:58px 0}}
@media(max-width:760px){.brand{font-size:21px}.nav-community{display:none}.header nav .nav-download{font-size:12.5px;padding:10px 13px}.hero{min-height:520px}.actions{gap:8px;flex-direction:column;align-items:stretch}.actions .button{width:100%;min-height:48px}.actions .text-link{justify-content:center;min-height:40px}
 .hero-guide{padding:0 0 18px}.hero-caption{padding-inline:18px;font-size:12px}.hero-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:2px 18px 4px;scrollbar-width:none}.hero-chips::-webkit-scrollbar{display:none}.hero-chip{flex:none}
 .applet-card{top:auto;bottom:0;left:0;right:0;translate:none;width:100%;max-height:74dvh;overflow-y:auto;border-radius:22px 22px 0 0;padding:24px 20px 22px}.card-title{font-size:24px}
 .world-label{font-size:10px;padding:5px 10px}.world-label[data-kind=building]{font-size:11px;padding:6px 12px}
 .inside{text-align:left;padding:64px 0 54px}.section-lede{margin-inline:0}
 .companion-section,.principles,.faq{grid-template-columns:1fr;gap:30px}
 .download-section{padding:58px 0}.faq{gap:16px}.footer{flex-wrap:wrap;gap:14px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*{transition:none!important}}

/* The walkthrough story: familiar product art, generous editorial pacing. */
section[id]{scroll-margin-top:32px}
em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:var(--green)}
.hero-chip{min-height:44px}
.inside{padding:110px 0 72px}
.inside h2{font-size:clamp(46px,5.5vw,76px);letter-spacing:-3px}
.chapter-nav{display:grid;grid-template-columns:repeat(4,1fr);margin-top:54px;border-block:1px solid var(--line);text-align:left}
.chapter-nav a{display:flex;gap:15px;align-items:center;padding:23px 20px;font-size:14px;font-weight:500}
.chapter-nav a+a{border-left:1px solid var(--line)}
.chapter-nav span{font-size:11px;color:var(--muted)}
.chapter-nav b{margin-left:auto;font-weight:400}
.chapter-nav a:hover{background:var(--surface)}
.story-section{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center;padding:64px 0 108px}
.story-copy h2,.world-heading h2,.vision-section h2{font-size:clamp(34px,3.6vw,50px);font-weight:500;letter-spacing:-2px;line-height:1.14;margin:0 0 26px}
.story-copy>p:not(.eyebrow){font-size:16px;line-height:1.85;color:var(--muted);margin:0 0 20px}
.story-copy>p.small-note{font-size:12px;line-height:1.7}
.applet-garden{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px;padding:36px 20px 24px;border-radius:28px;background:#e9eddf}
.applet-garden figure{margin:0;text-align:center;min-width:0}
.applet-garden img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 12px 10px #31453314);transition:transform .25s ease}
.applet-garden figure:hover img{transform:translateY(-5px)}
.applet-garden figcaption{font-size:12px;color:var(--muted)}
.garden-caption{grid-column:1/-1;font-size:12px;text-align:center;color:var(--muted);margin:14px 0 0}
.world-section{padding:88px 0;background:#e8ecdf}
.world-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center;margin-bottom:32px}
.world-heading .section-lede{font-size:16px}
.world-panorama{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/8}
.world-panorama img{width:100%;height:100%;object-fit:cover;display:block}
.panorama-label{position:absolute;bottom:24px;left:28px;background:#f4f0e5eb;padding:12px 18px;border-radius:8px;font-size:13px}
.world-benefits{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:30px}
.world-benefits h3,.workflow h3{font-size:22px;font-weight:500;letter-spacing:-.6px;margin:0 0 12px}
.world-benefits p,.workflow p:not(.eyebrow){font-size:15px;line-height:1.8;color:var(--muted);margin:0}
.workflow{border-top:1px solid #c9d0bf;padding-top:36px;margin-top:48px;display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.workflow .eyebrow{font-size:10px;margin-bottom:12px}
.workflow ol{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0;gap:12px}
.workflow li{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;font-size:12px}
.workflow li:not(:last-child):after{content:'→';position:absolute;right:-15px;top:42px;font-size:20px;color:var(--green)}
.workflow li img{width:96px;height:96px;object-fit:contain}
.workflow li b{font-weight:500}
.workflow li span{font-size:11px;color:var(--muted)}
.companion-section{padding-top:108px}
.fox-scene{text-align:center;background:#e9e4d6;border-radius:50% 50% 24px 24px;padding:44px 24px 24px}
.fox-prompt{display:inline-block;background:var(--paper);border-radius:20px 20px 20px 2px;margin:0;padding:20px 26px;font-size:20px;line-height:1.5;letter-spacing:-.5px;transform:rotate(-2deg)}
.fox-scene>img{display:block;width:min(340px,100%);height:auto;margin:0 auto}
.fox-footnote{font-size:12px;color:var(--muted);margin:0}
.attention-section{padding-top:28px}
.attention-art{background:#e9eddf;padding:30px;border-radius:26px}
.tennis-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:32px}
.tennis-card h3{font-family:Georgia,'Times New Roman',serif;font-size:35px;font-weight:400;color:var(--green);letter-spacing:-1px;line-height:1.1;margin:24px 0 18px}
.tennis-card>p{font-size:14px;line-height:1.8;color:var(--muted)}
.art-caption{text-align:center;font-size:12px;color:var(--muted);margin:22px 0 0}
.vision-section{padding:86px 0;background:var(--green);color:var(--brand-on-forest)}
.vision-section h2{font-size:clamp(40px,4.5vw,62px);margin-bottom:20px}
.vision-lede{font-size:18px;line-height:1.7;color:#e0e6d9}
.vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:54px}
.vision-grid article{border-top:1px solid #ffffff45;padding-top:25px}
.vision-symbol{display:block;height:48px;font-size:34px;font-weight:300;color:#e0d4a8}
.code-symbol{font-family:monospace;font-size:27px}
.vision-grid h3{font-size:21px;font-weight:500;letter-spacing:-.6px;margin:20px 0 15px}
.vision-grid p{font-size:14px;line-height:1.9;color:#e0e6d9;margin:0}
.vision-grid code{font-size:12px}
.vision-status{font-size:12px;line-height:1.8;margin:38px 0 0;color:#e0e6d9;max-width:90ch}
.download-section{padding:98px 0;background:var(--paper)}
.download-section h2{font-size:clamp(40px,4.5vw,64px)}
.faq{border-top:1px solid var(--line)}
.release-note{font-size:12px}
@media(max-width:1000px){.story-section{gap:36px}.world-heading{gap:36px}.workflow{grid-template-columns:1fr}.vision-grid{gap:26px}.chapter-nav a{padding-inline:12px;gap:10px}}
@media(max-width:760px){.chapter-nav{grid-template-columns:1fr 1fr;margin-top:30px}.chapter-nav a{padding:18px 12px}.chapter-nav a:nth-child(3){border-left:0;border-top:1px solid var(--line)}.chapter-nav a:nth-child(4){border-top:1px solid var(--line)}.inside h2{letter-spacing:-2px}.story-section,.world-heading,.world-benefits,.vision-grid{grid-template-columns:1fr;gap:32px}.story-section{padding:36px 0 64px}.world-section,.vision-section{padding:60px 0}.world-heading{gap:0}.world-panorama{aspect-ratio:4/3}.panorama-label{bottom:12px;left:12px;font-size:11px;padding:9px}.world-benefits{gap:22px}.workflow{gap:22px}.workflow ol{gap:6px}.workflow li img{width:64px;height:64px}.workflow li:not(:last-child):after{right:-8px;top:25px;font-size:15px}.workflow li span{font-size:10px}.companion-section{padding-top:64px}.fox-scene{order:2}.attention-art{padding:18px}.tennis-card{padding:24px}.vision-grid{gap:28px}.vision-grid article{padding-top:20px}.download-section{padding:64px 0}.footer nav{font-size:12px}}
@media(prefers-reduced-motion:reduce){.applet-garden figure:hover img{transform:none}}

/* Film first, then an interactive world. Reuse the shared Worldlet palette. */
.site-top.header{position:relative;inset:auto;height:90px}.landing{display:grid;grid-template-columns:1fr 1.4fr;align-items:center;gap:64px;padding:66px 0 82px}.landing h1{font-size:clamp(56px,6vw,84px);font-weight:500;line-height:1.02;letter-spacing:-4px;margin:0 0 24px}.landing h1 em{font-style:normal;color:var(--green)}.direct-download{display:flex;align-items:flex-start;gap:24px;margin-top:24px;scroll-margin-top:24px}.direct-download details{position:relative}.direct-download summary{cursor:pointer;list-style:none}.direct-download summary::-webkit-details-marker{display:none}.download-menu{position:absolute;top:58px;left:0;width:280px;padding:8px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;z-index:20}.download-menu a,.download-menu span{display:block;padding:14px;font-size:13px}.download-menu a:hover{background:var(--surface);border-radius:6px}.download-menu span{color:var(--muted)}.demo-heading{padding:25px 0 32px;border-top:1px solid var(--line)}.demo-heading h2{font-size:40px;letter-spacing:-1.5px;font-weight:500;margin:0 0 12px}.demo-heading p:last-child{color:var(--muted);line-height:1.7}.hero{height:76vh;min-height:520px;max-height:900px}.hero-sky{background:linear-gradient(#f2efe200 65%,#f1efe2d0 100%)}.hero-scroll{display:none}.applet-card{translate:none;left:auto;top:32px;right:32px;bottom:110px;width:min(460px,calc(100% - 64px));max-height:calc(100% - 140px);overflow:auto}.applet-preview{background:var(--paper);border:1px solid var(--line);border-radius:12px;margin:18px 0;overflow:hidden}.preview-heading{font-size:12px;font-weight:650;padding:14px 16px;margin:0;border-bottom:1px solid var(--line)}.preview-list{display:flex;flex-direction:column}.preview-list button{text-align:left;padding:14px 16px;background:transparent;border:0;border-bottom:1px solid var(--line);font-size:13px;min-height:44px;color:var(--ink)}.preview-list button[aria-pressed=true]{background:var(--surface);color:var(--green);font-weight:600}.preview-detail{padding:16px;min-height:130px}.preview-detail h4{font-size:14px;margin:0 0 10px}.preview-detail p{font-size:13px;line-height:1.75;margin:0;color:var(--muted)}@media(max-width:900px){.landing{gap:32px;grid-template-columns:1fr 1.2fr}.landing h1{font-size:60px}.direct-download{gap:12px}}@media(max-width:650px){.site-top.header{height:78px}.landing{grid-template-columns:1fr;padding:32px 0 48px;gap:30px}.landing h1{font-size:64px}.landing h1 br{display:none}.landing h1 em{display:block}.demo-heading h2{font-size:32px}.hero{height:640px}.applet-card{top:14px;right:14px;width:calc(100% - 28px);max-height:500px;bottom:auto}.site-top.header nav>a[href="/blog/"]{display:inline-flex}.site-top.header nav{gap:16px}.site-top.header nav .nav-download{display:none}}

@media(max-width:1000px){.site-top.header nav>a[href="/blog/"]{display:inline-flex}}

.chapter-nav{grid-template-columns:repeat(5,minmax(0,1fr))}@media(max-width:760px){.chapter-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}

.attention-shot{margin:0;padding:0;background:none}.attention-shot img{width:100%;height:auto;border-radius:16px}.attention-shot .art-caption{position:static;margin-top:16px}.chapter-nav a{min-width:0}

.hero{overflow:clip}

/* An edge-to-edge film is the first experience. Explicit playback preserves framing. */
.film-hero{position:relative;min-height:720px;height:100svh;isolation:isolate;background:#233d2e;color:#fff;overflow:clip}.film-hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.film-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0d201abc 0%,#0d201a70 38%,transparent 76%),linear-gradient(#102a2466,transparent 28%,#102a245c)}.film-hero .site-top.header{height:92px;color:#fff}.film-hero .site-top a:hover{color:#fff}.film-intro{position:absolute;left:0;right:0;bottom:120px;pointer-events:none}.film-intro>*{pointer-events:auto}.film-intro .eyebrow{color:#fff}.film-intro h1{font-size:clamp(60px,7.5vw,108px);line-height:1.02;letter-spacing:-4px;font-weight:500;margin:0 0 28px;text-shadow:0 2px 20px #12291a44}.film-intro h1 em{font-style:normal;font-family:Georgia,serif;color:#fff}.film-intro>p:not(.eyebrow){font-size:21px;line-height:1.55;margin:0 0 28px}.film-actions{display:flex;gap:12px;flex-wrap:wrap}.film-story{display:inline-flex;min-height:44px;align-items:center;font-size:13px;margin-top:12px;text-decoration:underline;text-underline-offset:4px}.film-controls{position:absolute;bottom:30px;right:max(40px,calc(50vw - 590px));display:flex;align-items:center;gap:16px;font-size:12px}.film-controls .button{min-height:44px;padding:10px 16px}.film-status{position:absolute;bottom:16px;left:32px;max-width:450px;font-size:12px}.film-hero[data-watching=true]>video{object-fit:contain;background:#14271e;z-index:0}.film-hero[data-watching=true] .film-shade{display:none}.film-hero[data-watching=true] .film-intro{bottom:auto;top:108px;display:flex;justify-content:flex-end}.film-hero[data-watching=true] .film-intro>p,.film-hero[data-watching=true] .film-intro>h1,.film-hero[data-watching=true] .film-story,.film-hero[data-watching=true] .film-actions>a{display:none}.film-hero[data-watching=true] .film-controls{bottom:66px}.download-strip{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:48px 0}.download-strip h2{font-size:27px;font-weight:500;letter-spacing:-.7px;margin:0}.download-strip .eyebrow{margin-bottom:10px}.download-strip .direct-download{margin:0}.download-strip .download-menu{left:auto;right:0}.button,.primary,.header nav .nav-download,.hero-chip,.card-close{background:var(--green);color:var(--brand-on-forest);border-color:var(--green)}.button:hover,.header nav .nav-download:hover,.hero-chip:hover,.card-close:hover{background:var(--brand-forest-hover);color:var(--brand-on-forest)}.hero-chip[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--brand-on-forest);background:var(--brand-forest-hover)}@media(max-width:760px){.film-hero{min-height:680px}.film-intro{bottom:115px}.film-intro h1{font-size:68px;letter-spacing:-2.5px}.film-intro>p:not(.eyebrow){font-size:17px}.film-shade{background:linear-gradient(0deg,#0b241ede, #0b241e28 85%)}.film-actions{gap:10px}.film-actions .button{font-size:12px;padding:12px 14px}.film-controls{right:22px;bottom:26px}.film-controls span{font-size:11px}.download-strip{align-items:flex-start;flex-direction:column;padding:32px 0}.download-strip .download-menu{right:auto;left:0}.film-hero .site-top.header{height:78px}.film-hero[data-watching=true] .film-intro{top:90px}}@media(prefers-reduced-motion:reduce){.film-intro,.film-shade{transition:none}}
/* Downloads are the high-contrast primary action; product actions stay green. */
.download-button,.header nav .download-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#111;color:#fff;border:1px solid #ffffff60;box-shadow:0 4px 18px #0003;font-weight:650;min-height:52px;padding:14px 22px;border-radius:10px;text-decoration:none}.download-button:hover,.header nav .download-button:hover{background:#292929;color:#fff}.platform-icon{width:23px;height:23px;flex:none}.windows-icon{display:none}.is-windows .apple-icon{display:none}.is-windows .windows-icon{display:block}.is-phone .platform-icon{display:none}.film-actions [data-film-sound]{min-height:52px}.film-story{text-decoration:none}.film-hero[data-watching=true] .film-actions .download-button{display:none}@media(max-width:650px){.site-top.header nav .download-button{display:inline-flex;font-size:12px;min-height:42px;padding:8px 12px}.site-top.header nav>a:not(.download-button){display:none}.film-actions .download-button{font-size:15px;min-height:54px}.film-actions{max-width:450px}}
/* One conversion action, with distinct, accessible media controls. */
.film-controls{z-index:3;gap:12px;padding:10px;border:1px solid #ffffff80;border-radius:16px;background:#111e;box-shadow:0 8px 30px #0004}.film-control{display:inline-flex;align-items:center;justify-content:center;min-width:118px;min-height:50px;padding:12px 20px;border:1px solid #ffffff90;border-radius:9px;background:#fff;color:#111;font:600 15px/1.2 inherit;cursor:pointer}.film-control:hover{background:#e8ece7}.film-control:focus-visible{outline:3px solid #d2ee84;outline-offset:4px}.film-hero[data-watching=true] .film-intro{z-index:2;pointer-events:none}.film-hero[data-watching=true] .film-actions .download-button{display:inline-flex}.film-hero[data-watching=true] .film-controls{bottom:30px}.film-hero[data-watching=true] .film-actions{pointer-events:auto}@media(max-width:760px){.film-controls{left:18px;right:auto;bottom:22px;max-width:calc(100% - 36px)}.film-control{font-size:13px;min-width:104px;padding:12px 14px}.film-intro{bottom:130px}.film-hero[data-watching=true] .film-controls{bottom:22px}}

/* The central play action opens an uncluttered, captioned player. */
.film-play{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:112px;height:112px;border-radius:50%;border:1px solid #ffffff80;background:#101813c9;color:#fff;box-shadow:0 4px 24px #0004;backdrop-filter:blur(4px);cursor:pointer;transition:background .2s,box-shadow .2s}.film-play svg{width:52px;height:52px}.film-play:hover{background:#101813eb;box-shadow:0 4px 28px #0005}.film-play:focus-visible,.film-close:focus-visible{outline:3px solid #d2ee84;outline-offset:5px}.film-close{display:none;position:absolute;top:20px;right:20px;z-index:5;width:48px;height:48px;border:1px solid #ffffff80;border-radius:50%;background:#111c;color:#fff;font:32px/1 sans-serif;cursor:pointer}.film-hero[data-watching=true] .site-top,.film-hero[data-watching=true] .film-intro,.film-hero[data-watching=true] .film-play{display:none}.film-hero[data-watching=true] .film-close{display:block}.film-hero[data-watching=true]>video{background:#101510}.film-hero video::cue{color:white;background:#000c;font-family:Arial,sans-serif;font-size:clamp(16px,2vw,28px)}
@media(max-width:760px){.film-hero:not([data-watching=true]) .film-intro{top:110px;bottom:auto}.film-intro h1{font-size:52px}.film-intro>p:not(.eyebrow){font-size:16px}.film-play{width:88px;height:88px;top:76%}.film-play svg{width:44px;height:44px}.film-close{top:16px;right:16px}}
@media(prefers-reduced-motion:reduce){.film-play{transition:none}}

/* A title-free ambient loop hands off to the full film after the copy fades. */
.film-hero>#hero-film{z-index:0;opacity:0;visibility:hidden;pointer-events:none;object-fit:contain;background:#101510;transition:opacity .65s ease,visibility 0s .65s}
.film-hero>.film-preview{z-index:-2;object-fit:cover}
.film-hero .site-top,.film-hero .film-intro,.film-hero .film-play,.film-hero .film-shade{transition:opacity .45s ease,visibility 0s;opacity:1;visibility:visible}
.film-hero .site-top,.film-hero .film-intro{z-index:2}
.film-hero[data-watching=true] .site-top{display:flex}
.film-hero[data-watching=true] .film-intro{display:block;top:auto;bottom:120px}
.film-hero[data-watching=true] .film-intro>p,.film-hero[data-watching=true] .film-intro>h1{display:block}
.film-hero[data-watching=true] .film-story{display:inline-flex}
.film-hero[data-watching=true] .film-play{display:grid}
.film-hero[data-watching=true] .film-shade{display:block}
.film-hero[data-watching=true] .site-top,.film-hero[data-watching=true] .film-intro,.film-hero[data-watching=true] .film-play,.film-hero[data-watching=true] .film-shade{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility 0s .45s}
.film-hero[data-watching=true]>#hero-film{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .65s ease .45s,visibility 0s}
@media(max-width:760px){.film-hero[data-watching=true] .film-intro{top:110px;bottom:auto}}
@media(prefers-reduced-motion:reduce){.film-hero>#hero-film,.film-hero .site-top,.film-hero .film-intro,.film-hero .film-play,.film-hero .film-shade{transition:none!important}}

/* Playback stays in the existing Hero, including on WebKit mobile. */
#hero-film::-webkit-media-controls-fullscreen-button{display:none}

/* The same first frame and aspect fit persist through the user's Play gesture. */
.film-hero>#hero-film,.film-hero[data-watching=true]>#hero-film{opacity:1;visibility:visible;object-fit:contain;object-position:center;background:#101510;transition:none;z-index:-2}
.film-hero[data-watching=true]>#hero-film{z-index:0}
.film-hero:not([data-watching=true])>#hero-film{pointer-events:none}
.film-hero .film-shade{z-index:1;pointer-events:none}

/* Fill the landing viewport, then ease into the complete film without black bars. */
.film-hero{container-type:size;background:#20392f url('/marketing/hero-r4.jpg') center/cover no-repeat}
.film-hero::before{content:'';position:absolute;inset:0;z-index:-3;background:#10251dcc;backdrop-filter:blur(14px)}
.film-hero>#hero-film,.film-hero[data-watching=true]>#hero-film{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100cqw,177.777778cqh);height:max(100cqh,56.25cqw);max-width:none;object-fit:contain;background:transparent;transition:width 1.6s cubic-bezier(.22,.61,.36,1),height 1.6s cubic-bezier(.22,.61,.36,1)}
.film-hero[data-watching=true]>#hero-film{width:min(100cqw,177.777778cqh);height:min(100cqh,56.25cqw)}
.film-hero .site-top,.film-hero .film-intro,.film-hero .film-play,.film-hero .film-shade{transition:opacity .6s ease,visibility 0s}
.film-hero[data-watching=true] .site-top,.film-hero[data-watching=true] .film-intro,.film-hero[data-watching=true] .film-play,.film-hero[data-watching=true] .film-shade{transition:opacity .6s ease,visibility 0s .6s}

/* The transport remains anchored to the Hero while the film scales to fit. */
body .download-button,body .header nav .download-button{background:#111!important;color:#fff!important;border:1px solid #ffffff80!important;border-radius:10px!important;box-shadow:0 4px 18px #0003;font-weight:650}
body .download-button:hover,body .header nav .download-button:hover{background:#292929!important;color:#fff!important}
/* Works on: Mac, Windows, iPhone, Android (phones say Soon until their link is set in public api/download.ts phoneApps). */
.platform-row{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:16px 0 0;padding:0;font-size:13px;font-weight:550}.platform-row li{display:inline-flex;align-items:center;gap:6px}.platform-row svg{width:16px;height:16px;flex:none}.platform-row .soon{margin-left:2px;padding:1px 7px;border-radius:999px;border:1px solid currentColor;font-size:10px;font-weight:500;opacity:.7}.film-intro .platform-row{color:#fff;text-shadow:0 1px 10px #12291a66}.download-strip .platform-row{margin:12px 0 0;color:var(--muted)}


/* The paused native film and poster share one box throughout the cover-to-fit transition. */
.film-status{z-index:4}

/* Phones: the film's first frame is the app's own screen (brand, area names, Fox's bar), so cropping it behind the copy reads as a broken overlay.
   Stack the copy on a plain backdrop and show the whole frame as a 16:9 card below it, with Play centered on the card. */
@media(max-width:760px){
.film-hero,.film-hero:not([data-watching=true]){container-type:normal;height:auto;min-height:0;display:grid;grid-template-columns:100%;grid-template-areas:"top" "intro" "film";padding-bottom:28px;background:#10251d}
.film-hero .film-shade{display:none}
.film-hero::before{display:block;inset:-24px;z-index:-3;background:linear-gradient(#0e231bb3,#0e231b66 45%,#0e231bd9),url('/marketing/hero-r4.jpg') 50% 32%/auto 125% no-repeat;filter:blur(7px) saturate(1.15);backdrop-filter:none}
.film-hero .site-top.header,.film-hero[data-watching=true] .site-top.header{grid-area:top;position:relative;opacity:1;visibility:visible;pointer-events:auto}
.film-hero .film-intro,.film-hero:not([data-watching=true]) .film-intro,.film-hero[data-watching=true] .film-intro{grid-area:intro;position:relative;inset:auto;top:auto;bottom:auto;display:block;padding:18px 0 24px;opacity:1;visibility:visible;pointer-events:auto}
.film-hero[data-watching=true] .film-intro>*{pointer-events:auto}
.film-intro h1{font-size:clamp(40px,12.5vw,52px);letter-spacing:-2px;margin-bottom:18px}
.film-intro>p:not(.eyebrow) br{display:none}
.film-hero>#hero-film,.film-hero[data-watching=true]>#hero-film{grid-area:film;position:relative;inset:auto;left:auto;top:auto;transform:none;justify-self:center;width:calc(100% - 32px);height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid #ffffff30;box-shadow:0 10px 30px #0006;background:#101510;transition:none;z-index:0}
.film-hero .film-play,.film-hero[data-watching=true] .film-play{grid-area:film;position:relative;left:auto;top:auto;transform:none;place-self:center;width:72px;height:72px}
.film-hero[data-watching=true] .film-play{display:none}
.film-play svg{width:34px;height:34px}
.film-hero[data-watching=true] .film-close{grid-area:film;position:relative;top:auto;right:auto;place-self:start end;margin:10px 26px 0 0;width:40px;height:40px;font-size:26px}
.film-hero .film-status{position:static;grid-row:4;padding:10px 16px 0}.film-hero .film-status:empty{display:none}
}

/* The homepage is organized around four use cases (owner requests 2026-10-06), reusing the earlier chapter layouts: one title, one line and one picture each. Only shipped behavior; see the root README. */
.film-intro>p:not(.eyebrow){max-width:36ch}
.inside .chapter-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
.inside h2{font-size:clamp(40px,4.6vw,64px)}
.story-copy h2{font-size:clamp(40px,4.4vw,60px);line-height:1.05}
.story-copy>p:not(.eyebrow){font-size:18px;line-height:1.65;max-width:32ch}
.attention-art img{display:block;width:100%;height:auto;border-radius:16px}
.fox-scene{position:relative}
.fox-scene>img{width:min(280px,80%)}
.fox-tasks{list-style:none;margin:-8px auto 0;padding:18px 20px;max-width:320px;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);font-size:14px;line-height:1.4;display:grid;gap:12px;position:relative}
.fox-tasks li{display:flex;align-items:center;gap:10px}
.fox-tasks i{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--green);color:var(--brand-on-forest);font-style:normal;font-size:11px}
.fox-tasks .now{font-weight:600}.fox-tasks .now i{background:none;border:2px solid #f0a35e}
.world-heading h2 em{font-style:normal;font-family:Georgia,serif;color:var(--green)}
.app-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;list-style:none;margin:28px 0 0;padding:0;text-align:center;font-size:13px;color:var(--muted)}
.app-row img{display:block;width:min(110px,100%);height:auto;margin:0 auto 6px;filter:drop-shadow(0 12px 10px #31453314)}
.agent-heading{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.agent-art{margin:0}.agent-art img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 18px 50px #0004}
@media(max-width:760px){.inside .chapter-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.story-copy h2{font-size:40px;letter-spacing:-1.5px}.story-copy>p:not(.eyebrow){font-size:16px}.app-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}.agent-heading{grid-template-columns:1fr;gap:28px}}

/* Bolder use-case sections (owner request 2026-10-06: "画面更有视觉冲击力一些"): full-bleed pictures and very large titles. */
.bold{position:relative;isolation:isolate;overflow:clip}
.bold h2{font-size:clamp(52px,7.4vw,112px);line-height:.98;letter-spacing:-.045em;font-weight:500;margin:0 0 26px}
.bold h2 em{font-style:normal;font-family:Georgia,serif}
.bold-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.bold-copy{position:relative;display:flex;min-height:inherit;align-items:center}
.bold-copy>div{max-width:560px}
.bold-copy p:not(.eyebrow),.bold-line{font-size:20px;line-height:1.55;margin:0 0 24px;max-width:34ch}
.bold-proactive{padding:120px 0 80px;text-align:center;background:radial-gradient(ellipse at 50% 72%,#f6d9b4 0,#f4f0e5 58%)}
.bold-proactive .bold-line{margin-inline:auto}
.bold-proactive h2 em{color:#d9772b}
.fox-stage{position:relative;height:520px;max-width:980px;margin:20px auto 0}
.fox-stage>img{position:absolute;left:50%;bottom:0;translate:-50% 0;width:380px;height:auto;filter:drop-shadow(0 30px 30px #7a4a1a33)}
.fox-card{position:absolute;display:flex;align-items:center;gap:12px;margin:0;padding:12px 18px 12px 12px;background:#fffdf8;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px #4a32141f;text-align:left;font-size:14px;line-height:1.35}
.fox-card img{width:48px;height:48px}
.fox-card b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.fox-card.now span{font-weight:600}
.fox-card.c1{left:0;top:40px;rotate:-3deg}.fox-card.c2{right:0;top:20px;rotate:2deg}.fox-card.c3{left:40px;bottom:120px;rotate:2deg}.fox-card.c4{right:30px;bottom:150px;rotate:-2deg}
.bold-agent{padding:120px 0;background:var(--green);color:var(--brand-on-forest);text-align:center}
.bold-agent .eyebrow{color:#d2ee84}.bold-agent h2 em{color:#d2ee84}
.bold-agent .bold-line{margin-inline:auto;color:#e0e6d9}
.bold-agent .agent-art{max-width:900px;margin:40px auto 0}
.bold-agent .agent-art img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 40px 90px #0006;rotate:-1deg}
.agent-points{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:48px auto 0;padding:0;list-style:none;font-size:15px;color:#e0e6d9}
.agent-points b{display:block;font-size:20px;font-weight:500;color:#fff;margin-bottom:6px}
@media(max-width:760px){
.bold h2{font-size:clamp(44px,13vw,60px)}
.bold-copy p:not(.eyebrow),.bold-line{font-size:17px}
.bold-proactive{padding:72px 0 48px}
.fox-stage{height:auto;display:grid;gap:10px;justify-items:center}
.fox-stage>img{position:static;translate:none;width:200px;order:-1}
.fox-card{position:static;rotate:0deg!important;width:100%;max-width:340px}
.bold-agent{padding:72px 0}
.agent-points{grid-template-columns:1fr;gap:18px;margin-top:32px}
}

/* Interactive use cases (owner request 2026-10-06: "每一部分都加点动态"); behavior in use-cases.ts. */
.agent-tile:focus-visible,.daynight:focus-visible,.fox-button:focus-visible{outline:3px solid #d2ee84;outline-offset:3px}
.center-note{margin:8px 4px 0;font-size:11px;opacity:.6}
@keyframes card-pop{from{opacity:0;transform:translateX(-14px) scale(.94)}}
.fox-stage{height:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;max-width:1000px}
.fox-button{position:relative;justify-self:center;border:0;background:none;padding:70px 0 0;cursor:pointer}
.fox-button img{display:block;width:min(360px,70vw);height:auto;filter:drop-shadow(0 30px 30px #7a4a1a33);transform-origin:50% 100%}
.fox-button:hover img{transform:translateY(-4px)}
.fox-button.hop img{animation:fox-hop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes fox-hop{30%{transform:translateY(-34px) rotate(-4deg) scale(1.03,.97)}60%{transform:translateY(0) scale(1.05,.95)}80%{transform:scale(.98,1.02)}}
.fox-bubble{position:absolute;top:0;left:50%;translate:-50% 0;white-space:nowrap;padding:12px 18px;border-radius:18px 18px 18px 4px;background:#fffdf8;border:1px solid var(--line);box-shadow:0 14px 30px #4a32141f;font-size:16px;color:var(--ink)}
.fox-button.hop .fox-bubble{animation:card-pop .4s ease}
.fox-feed{list-style:none;margin:0;padding:0;display:grid;gap:10px;text-align:left}
.fox-feed .fox-card{position:relative;rotate:0deg;left:auto;right:auto;top:auto;bottom:auto;transition:opacity .4s,transform .4s}
.fox-card[data-state=waiting]{opacity:.45;transform:scale(.97)}
.fox-card[data-state=working]{transform:translateX(-8px);border-color:#f0a35e}
.fox-state{margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #e6dccb}
.fox-card[data-state=working] .fox-state{border-color:#f0a35e;border-top-color:transparent;animation:spin .9s linear infinite}
.fox-card[data-state=done] .fox-state{border-color:var(--green);background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12l4 4 8-8' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center/14px no-repeat}
@keyframes spin{to{rotate:360deg}}
.daynight{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:10px 16px;border:1px solid #ffffff70;border-radius:999px;background:#0d201a80;color:#fff;font:600 14px/1 inherit;cursor:pointer;backdrop-filter:blur(8px)}
.daynight .moon,.is-night .daynight .sun{display:none}.is-night .daynight .moon{display:inline}
.agent-demo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;max-width:960px;margin:44px auto 0;text-align:left}
.agent-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:start}
.agent-tile{display:grid;justify-items:center;gap:8px;padding:18px 8px;border-radius:16px;border:1px solid #ffffff30;background:#ffffff12;color:#fff;font:600 13px/1.2 inherit;cursor:pointer;transition:transform .2s,background .2s}
.agent-tile img{width:40px;height:40px;object-fit:contain;border-radius:9px;background:#fff;padding:4px}
.agent-tile:hover{transform:translateY(-3px);background:#ffffff1f}
.agent-tile[aria-pressed=true]{background:#f4f0e5;color:var(--ink);border-color:#f4f0e5}
.agent-move{padding:22px;border-radius:18px;background:#f4f0e5;color:var(--ink);box-shadow:0 30px 70px #0005}
.agent-move-title{margin:0 0 14px;font-size:16px}
.agent-move ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.agent-move li{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;background:#e9eddf;font-size:14px;opacity:.25;transform:translateY(6px);transition:opacity .35s,transform .35s}
.agent-move li.in{opacity:1;transform:none}
.agent-move li i{font-style:normal;color:var(--green);font-weight:700}.agent-move li b{font-variant-numeric:tabular-nums;color:var(--green)}
.agent-move .center-note{color:var(--muted)}
@media(prefers-reduced-motion:reduce){.fox-button.hop img,.fox-card[data-state=working] .fox-state{animation:none}}
@media(max-width:760px){
.fox-stage{grid-template-columns:1fr;gap:20px}.fox-button img{width:200px}.fox-bubble{font-size:14px}
.fox-feed .fox-card{max-width:none}
.agent-demo{grid-template-columns:1fr}
}

/* Use cases, round 3 (owner request 2026-10-06 04:57Z): "One" leads every title; the Attention Center
   example is the app's own list and card ("代码里面长什么样，这就长什么样"); the World is a sample world to point at. */
.uc{position:relative;isolation:isolate;overflow:clip;padding:110px 0 0}
.uc h2{font-size:clamp(52px,7.4vw,112px);line-height:.98;letter-spacing:-.045em;font-weight:500;margin:0 0 26px}
.uc h2 em{font-style:normal;font-family:Georgia,serif;color:#d2ee84}
.uc .eyebrow{color:#d2ee84}
.uc-line{font-size:20px;line-height:1.55;margin:0 0 24px;max-width:40ch}
.uc-note{margin:0;font-size:12px;opacity:.7}
.one{font-weight:700;text-decoration:underline;text-decoration-color:#d2ee84;text-decoration-thickness:.07em;text-underline-offset:.1em}
.bold-proactive .one{text-decoration-color:#f0a35e}
.chapter-nav p{margin:0}.chapter-nav strong{color:var(--green);font-size:1.2em;font-weight:700;text-decoration:underline;text-decoration-color:#d2ee84;text-decoration-thickness:3px;text-underline-offset:3px}
/* 01 Attention Center: the app's HUD list over the world and its paper briefing card (the public World and Attention components). */
.uc-attention{background:#14271e;color:#fff}
.uc-attention-stage{position:relative;max-width:1600px;min-height:660px;margin:44px auto 0;aspect-ratio:16/10;overflow:hidden;border-radius:28px 28px 0 0;font-family:InterVariable,-apple-system,BlinkMacSystemFont,sans-serif}
.uc-attention-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;z-index:-1}
.uc-attention-stage:before{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,#183a2c99 0,#183a2c4d 22%,transparent 40%);pointer-events:none}
.uc-attention-list{position:absolute;z-index:2;left:12px;top:24px;width:330px;color:#fff9e9;font-size:14px;line-height:1.6;text-shadow:0 1px 3px #25332680}
.uc-attention .world-task-list{display:grid;gap:12px;padding:16px 12px}
.uc-attention .world-task-group{display:grid;gap:4px}
.uc-attention [data-group=event]{--activity-color:#a5d4dc}.uc-attention [data-group=needsAction]{--activity-color:#edc47d}.uc-attention [data-group=unseen]{--activity-color:#b1d3ab}
.uc-attention .world-task-heading{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:0 8px 6px;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent);font:600 11px/1.4 InterVariable,sans-serif;letter-spacing:.025em;text-transform:uppercase;color:var(--activity-color)}
.uc-attention .world-task{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:9px;width:100%;margin:0;padding:10px;border:0;border-radius:12px;background:none;color:inherit;font:inherit;text-align:left;text-shadow:inherit;cursor:pointer;transition:background-color .22s ease,box-shadow .22s ease}
.uc-attention .world-task:is(:hover,:focus-visible){background:#e3e5e51f}
.uc-attention .world-task:focus-visible{outline:2px solid #ffffff80;outline-offset:1px}
.uc-attention .world-task[aria-current=location]{background:color-mix(in srgb,var(--activity-color) 24%,#e6eee833);box-shadow:inset 0 0 0 1px #f4f6eb38,0 4px 12px #152f2924;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.uc-attention .matter-icon{display:inline-flex;align-items:flex-start;justify-content:center;width:24px;height:21px;color:var(--activity-color)}
.uc-attention .matter-icon svg{flex:0 0 24px;width:24px;height:24px;filter:drop-shadow(0 1px 2px #25332666)}
.uc-attention .world-task-copy{display:grid;gap:4px;min-width:0}
.uc-attention .world-task-title{display:block;font:600 16px/1.32 InterVariable,sans-serif;color:#fff9e9}
.uc-attention .world-task-objective{display:block;font:400 14px/1.42 InterVariable,sans-serif;color:#f4eedc;opacity:.82;overflow-wrap:anywhere}
.uc-attention .world-task-time{font-weight:600;color:var(--activity-color)}
.uc-attention .world-task-time:empty+.world-task-time-separator{display:none}
.uc-attention .attention-preview{position:absolute;z-index:3;top:72px;left:clamp(370px,calc(50% - 330px),560px);width:min(760px,calc(100% - 410px));box-sizing:border-box;padding:28px 34px 22px;display:flex;flex-direction:column;gap:14px;background:#f4f0e5 url(/marketing/attention/paper.webp) center/cover;color:#304f40;border:1px solid #b4a17d38;border-radius:24px 28px 26px 30px;box-shadow:0 2px 3px #b4a17d20,0 10px 28px #162a3224;font:400 16px/1.4 InterVariable,sans-serif;text-shadow:none;isolation:isolate}
.uc-attention .attention-preview[hidden]{display:none}
.uc-attention .attention-preview.pop{animation:briefing-in .35s cubic-bezier(.2,.8,.3,1)}
@keyframes briefing-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
.uc-attention .attention-preview[data-kind=event]{--attention-accent:#28718a}.uc-attention .attention-preview[data-kind=task]{--attention-accent:#946e2b}.uc-attention .attention-preview[data-kind=update]{--attention-accent:#557955}
.uc-attention .attention-preview-tools{position:absolute;top:12px;right:14px;z-index:2;display:flex;gap:4px}
.uc-attention .attention-preview-control{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 8px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;cursor:pointer}
.uc-attention .attention-preview-tools .attention-preview-control{width:34px;padding:4px;font-size:24px}
.uc-attention .attention-preview-control:hover{background:#294d4310}
.uc-attention .attention-preview-hero{position:relative;min-height:190px;display:flex;align-items:flex-start;isolation:isolate}
.uc-attention .attention-preview-heading{position:relative;z-index:1;width:46%;padding:18px 0}
.uc-attention .attention-preview-category{display:flex;align-items:center;gap:7px;margin-bottom:14px;color:var(--attention-accent);font-size:14px;font-weight:600;letter-spacing:.015em;text-transform:uppercase}
.uc-attention .attention-preview-kind{display:inline-flex;flex:0 0 18px;width:18px;height:18px}.uc-attention .attention-preview-kind svg{width:100%;height:100%}
.uc-attention .attention-preview-title{margin:0;font:600 28px/1.25 InterVariable,sans-serif;letter-spacing:0;color:inherit;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.uc-attention .attention-preview-art{position:absolute;right:-22px;top:-20px;z-index:0;width:62%;height:calc(100% + 40px);object-fit:cover;-webkit-mask:url(/marketing/attention/brush-mask.svg) center/100% 100% no-repeat;mask:url(/marketing/attention/brush-mask.svg) center/100% 100% no-repeat;pointer-events:none}
.uc-attention .attention-preview-facts{display:grid;gap:9px;margin-top:14px}
.uc-attention .attention-preview-when{display:flex;flex-wrap:wrap;align-items:center;gap:3px 7px;font-size:14px}
.uc-attention .attention-preview-when[hidden],.uc-attention .attention-preview-venue[hidden]{display:none}
.uc-attention .attention-preview-location-icon{display:flex;opacity:.7}
.uc-attention .attention-preview-age{flex-basis:100%;font-size:12.88px}
.uc-attention .attention-preview-summary{line-height:1.5}
.uc-attention .attention-preview-summary p{margin:0 0 6px}.uc-attention .attention-preview-summary ul{margin:0;padding-left:20px}.uc-attention .attention-preview-summary li+li{margin-top:2px}
.uc-attention .attention-preview-summary strong{font-weight:650}
.uc-attention .attention-preview-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding-top:12px;color:#617065;font:400 12px/1.4 InterVariable,sans-serif}
.uc-attention .attention-preview-source-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.uc-attention .attention-preview-provenance{white-space:nowrap;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.uc-attention .attention-preview-sources{display:flex;flex-wrap:wrap;gap:2px}
.uc-attention .attention-preview-original{padding:0 4px;min-height:24px;cursor:default}
.uc-attention .attention-preview-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.uc-attention .attention-preview-action{min-height:32px;padding:5px 14px;border:1px solid color-mix(in srgb,var(--attention-accent) 35%,transparent);border-radius:9px;background:transparent;color:var(--attention-accent);font:500 14px/1.2 InterVariable,sans-serif;cursor:pointer}
.uc-attention .attention-preview-action:hover{background:color-mix(in srgb,var(--attention-accent) 9%,transparent)}
.uc-attention .attention-preview-action-primary{padding:5px 20px;border-color:var(--attention-accent);background:var(--attention-accent);color:#fffdf5;font-weight:600}
.uc-attention .attention-preview-action-primary:hover{background:color-mix(in srgb,var(--attention-accent) 86%,#000)}
.uc-attention .attention-preview-action:focus-visible,.uc-attention .attention-preview-control:focus-visible{outline:2px solid var(--attention-accent);outline-offset:2px}
.uc-attention .uc-note{position:absolute;right:20px;bottom:16px;z-index:2;color:#fff;text-shadow:0 1px 4px #0008}
/* 03 World: the sample world as the app draws it, day and night, with every Applet ready to point at. */
.uc-world{background:#10251d;color:#fff;padding-bottom:28px}
.uc-world-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-top:36px}
.uc-world-scroll::-webkit-scrollbar{display:none}
.uc-world-stage{position:relative;max-width:1920px;margin:0 auto;aspect-ratio:16/9;overflow:hidden;font-family:InterVariable,-apple-system,BlinkMacSystemFont,sans-serif}
.w-plate{position:absolute;inset:0;width:100%;height:100%;transition:opacity 1.4s ease}
.w-plate.w-night{opacity:0}.is-night .w-plate.w-night{opacity:1}
.w-app{--s:4.6;position:absolute;z-index:1;left:calc(var(--x)*100%);top:calc(var(--y)*100%);width:calc(var(--s)*1%);aspect-ratio:1;translate:-50% -50%;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.w-app:after{content:'';position:absolute;left:10%;right:10%;bottom:-6%;height:24%;border-radius:50%;background:radial-gradient(closest-side,#fff3c4cc,transparent);opacity:0;transition:opacity .2s}
.w-lens{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:50%;opacity:0;transition:transform .28s cubic-bezier(.3,1.5,.5,1),opacity .14s;-webkit-mask-image:radial-gradient(circle,#000 54%,transparent 71%);mask-image:radial-gradient(circle,#000 54%,transparent 71%)}
.w-lens img{position:absolute;max-width:none;width:calc(10000%/var(--s));height:auto;left:calc((50 - var(--x)*10000/var(--s))*1%);top:calc((50 - var(--y)*5625/var(--s))*1%);transition:opacity 1.4s ease}
.w-lens .w-night{opacity:0}.is-night .w-lens .w-night{opacity:1}
.w-app:is(:hover,:focus-visible,.lit,[aria-expanded=true]) .w-lens{opacity:1;transform:translateY(-16%) scale(1.5)}
.w-app:is(:hover,:focus-visible,.lit,[aria-expanded=true]):after{opacity:1}
.w-app:focus-visible{outline:none}.w-app:focus-visible .w-lens{box-shadow:0 0 0 3px #d2ee84}
.w-tip{position:absolute;left:50%;bottom:150%;z-index:2;translate:-50% 0;white-space:nowrap;padding:4px 10px;border-radius:999px;background:#fff9e7;color:#304f40;box-shadow:0 4px 12px #0d201a40;font:600 13px/1.2 InterVariable,sans-serif;opacity:0;transform:translateY(6px);transition:opacity .15s,transform .2s;pointer-events:none}
.w-app:is(:hover,:focus-visible,[aria-expanded=true]) .w-tip{opacity:1;transform:none}
.w-region{position:absolute;z-index:2;left:calc(var(--x)*100%);top:calc(var(--y)*100%);translate:-50% -50%;padding:3px 12px;border:1px solid #ffffff4d;border-radius:999px;background:#0d201a8c;color:#fff;font:600 clamp(11px,.95vw,16px)/1.3 InterVariable,sans-serif;cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background-color .2s,color .2s}
.w-region:is(:hover,:focus-visible,[aria-pressed=true]){background:#fff9e7;color:#304f40;outline:none}
.w-pop{position:absolute;z-index:4;width:240px;box-sizing:border-box;padding:14px 16px;border-radius:16px;background:#f4f0e5 url(/marketing/attention/paper.webp) center/cover;color:#304f40;box-shadow:0 2px 3px #b4a17d20,0 14px 34px #0d201a59;font:400 14px/1.45 InterVariable,sans-serif;animation:briefing-in .25s ease}
.w-pop[hidden]{display:none}
.w-pop b{display:block;font-size:17px;font-weight:600}
.w-pop span{display:block;margin-top:2px;color:#557955;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.w-pop p{margin:8px 0 0}
.uc-world-more{margin-top:18px;text-align:right;max-width:none}.uc-world-more a{color:#d2ee84;font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* 04 Agents: world-style devices for ChatGPT, Claude Code and Codex; flat logos for the rest. */
.agent-tile img{width:56px;height:56px;padding:0;border-radius:0;background:none}
.agent-tile img.flat{width:40px;height:40px;margin:8px;padding:4px;border-radius:9px;background:#fff}
.agent-key{grid-column:1/-1;margin:6px 0 0;color:#e0e6d9;font-size:13px;text-align:center}
@media(prefers-reduced-motion:reduce){.uc-attention .attention-preview.pop,.w-pop{animation:none}.w-plate,.w-lens img,.w-lens{transition:none}}
@media(max-width:1000px){.uc-attention .attention-preview{left:360px;width:auto;right:16px}.uc-attention .attention-preview-art{width:50%}}
@media(max-width:760px){
.uc{padding-top:72px}
.uc h2{font-size:clamp(44px,13vw,60px)}
.uc-line{font-size:17px}
.uc-attention-stage{aspect-ratio:auto;min-height:0;display:grid;gap:12px;padding:8px 0 44px;margin-top:24px;border-radius:22px 22px 0 0}
.uc-attention-stage:before{background:#183a2ca6}
.uc-attention-list{position:relative;left:auto;top:auto;width:auto;padding:0 4px}
.uc-attention .world-task-list{padding:12px 8px 0;gap:8px}
.uc-attention .attention-preview{position:relative;top:auto;left:auto;right:auto;width:auto;margin:0 12px;padding:18px 20px 16px;gap:10px}
.uc-attention .attention-preview-hero{min-height:110px}
.uc-attention .attention-preview-heading{width:58%;padding:4px 0}
.uc-attention .attention-preview-art{width:48%;right:-12px;top:-10px;height:calc(100% + 20px)}
.uc-attention .attention-preview-title{font-size:22px}
.uc-attention .attention-preview-category{font-size:12px;margin-bottom:8px}
.uc-attention .attention-preview-summary{font-size:15px}
.uc-attention .uc-note{right:16px;bottom:14px}
.uc-world-stage{width:880px;max-width:none}
}
.w-notion{--x:0.3096;--y:0.3063}.w-obsidian{--x:0.37;--y:0.3063}.w-voice-memos{--x:0.4304;--y:0.3063}.w-plaid{--x:0.5487;--y:0.3114}.w-stripe{--x:0.6091;--y:0.3114}.w-paypal{--x:0.6695;--y:0.3114}.w-oura{--x:0.5789;--y:0.3625}.w-strava{--x:0.6393;--y:0.3625}.w-gmail{--x:0.4292;--y:0.4852}.w-google-calendar{--x:0.4896;--y:0.4852}.w-apple-notes{--x:0.55;--y:0.4852}.w-apple-reminders{--x:0.4594;--y:0.5363}.w-messages{--x:0.5198;--y:0.5363}.w-game-2048{--x:0.7161;--y:0.4711}.w-snake{--x:0.7765;--y:0.4711}.w-minesweeper{--x:0.8369;--y:0.4711}.w-sudoku{--x:0.7463;--y:0.5222}.w-random-game{--x:0.8067;--y:0.5222}.w-x{--x:0.2668;--y:0.6053}.w-youtube{--x:0.3272;--y:0.6053}.w-tiktok{--x:0.3876;--y:0.6053}.w-discord{--x:0.297;--y:0.6564}.w-browser{--x:0.3574;--y:0.6564}.w-meetings{--x:0.6494;--y:0.6666}.w-github{--x:0.7098;--y:0.6666}.w-codex{--x:0.7702;--y:0.6666}.w-claude-code{--x:0.6796;--y:0.7177}.w-r-create{--x:0.3698;--y:0.4148}.w-r-life{--x:0.6229;--y:0.4185}.w-r-home{--x:0.4938;--y:0.5981}.w-r-games{--x:0.7885;--y:0.5833}.w-r-explore{--x:0.326;--y:0.7185}.w-r-work{--x:0.7198;--y:0.7815}

/* The hero's link to every download (Intel, Windows EXE, phones) on the download page. */
/* Hero (owner request 2026-10-09, after onorca.dev): the download and GitHub buttons side by side, then the one-command
   install shown in place, the visitor's system first, with Copy. */
.film-actions{display:flex;flex-wrap:wrap;gap:12px}
.film-actions svg{width:18px;height:18px;flex:none}
/* Star on GitHub beside Get Worldlet in the hero (owner 2026-10-13): light, so it reads as the second button on the film. */
.star-button{gap:10px;min-height:52px;padding:14px 22px;border-radius:10px;background:#fff;color:#111;border:1px solid #fff;box-shadow:0 4px 18px #0003;font-weight:650;text-decoration:none}.star-button:hover{background:#f1efe6;color:#111}.star-button .star-icon{color:#e3a008}.film-actions .star-button svg{width:20px;height:20px}
.hero-command{width:min(520px,100%);margin:16px 0 0;border:1px solid #ffffff38;border-radius:12px;background:#0b1612c7;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 28px #0003;color:#fff;text-align:left}
.hero-command-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 0 14px;font-size:12px;font-weight:550;color:#ffffffb8}
.hero-command-tabs{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:#ffffff14}
.hero-command-tabs button{border:0;border-radius:6px;padding:4px 10px;background:none;color:#ffffffb8;font-size:12px;font-weight:600}
.hero-command-tabs button[aria-selected=true]{background:#ffffff2e;color:#fff}
.hero-command-line{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 14px}
.hero-command-line code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;scrollbar-width:none}
.hero-command-line code::before{content:"$ ";color:#ffffff80}
.hero-command[data-active=windows] .hero-command-line code::before{content:"> "}
.hero-copy{flex:none;min-width:72px;border:1px solid #ffffff40;border-radius:8px;padding:7px 12px;background:#fff;color:#111;font-size:13px;font-weight:650}
.hero-copy:hover{background:#e9efe6}
@media(max-width:760px){.film-actions .button{flex:1 1 180px}.hero-command-line code{white-space:normal;word-break:break-all;font-size:13px}}
/* Short desktop windows: the command box adds a row, so the hero copy drops its eyebrow and tightens to stay clear of the header. */
@media(min-width:761px) and (max-height:860px){.film-hero:not([data-watching=true]) .film-intro .eyebrow{display:none}.film-hero .film-intro h1{font-size:clamp(52px,5.6vw,80px);margin-bottom:14px}}
/* A day in three steps (owner decision 2026-10-10: lead with "it does, you approve"): the positioning line, then Morning,
   During the day and You approve, each with the app's own pictures; the four "One" points follow as one compact strip. */
.film-hero .film-intro h1{font-size:clamp(50px,5.8vw,88px);letter-spacing:-.04em}
.film-intro .eyebrow{font-size:12px}
.film-hero .film-intro>p:not(.eyebrow){max-width:30em;width:min(30em,100%);font-size:19px}
@media(min-width:761px){.film-hero .film-intro>p:not(.eyebrow){max-width:min(30em,calc(50vw - max(40px,50vw - 590px) - 80px))}}
.inside h2{font-size:clamp(34px,4vw,56px);letter-spacing:-.035em;line-height:1.08}
.inside-why{max-width:62ch;margin-top:8px;font-size:17px}
.inside .day-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
.day-nav p{display:grid;gap:3px;color:var(--muted);font-weight:400}
.day-nav strong{display:block;font-size:17px;text-decoration:none;color:var(--ink);font-weight:600}
/* 01 Morning: the Journal's page for today, over the world at night. */
.step-morning{background:#0f1f19;color:#fff}
.morning-stage{position:relative;max-width:1600px;margin:44px auto 0;padding:64px 20px 72px;overflow:hidden;border-radius:28px 28px 0 0;display:grid;place-items:center;font-family:InterVariable,-apple-system,BlinkMacSystemFont,sans-serif}
.morning-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:-1;filter:saturate(.9)}
.morning-stage:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 50%,#0f1f1933 0,#0f1f19b3 80%)}
.journal-page{width:min(640px,100%);box-sizing:border-box;padding:30px 36px 28px;background:#f4f0e5 url(/marketing/attention/paper.webp) center/cover;color:#304f40;border:1px solid #b4a17d38;border-radius:24px 28px 26px 30px;box-shadow:0 2px 3px #b4a17d20,0 24px 60px #0008;font:400 16px/1.5 InterVariable,sans-serif;animation:briefing-in .4s ease}
.journal-head{display:flex;align-items:center;gap:18px;margin-bottom:10px}
.journal-numeral{font:400 64px/1 Georgia,serif;color:#c2672a}
.journal-kicker{margin:0;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#557955}
.journal-page h3{margin:2px 0 0;font-size:26px;font-weight:600;letter-spacing:-.02em;color:#24402f}
.journal-lede{margin:0 0 16px;font-size:17px}
.journal-page h4{margin:18px 0 8px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#24402f}
.journal-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.journal-list li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px}
.journal-list b{font-weight:600;color:#24402f}
.journal-schedule{width:100%;border-collapse:collapse;font-size:15px}
.journal-schedule th{width:110px;text-align:left;font-weight:600;font-variant-numeric:tabular-nums;color:#557955}
.journal-schedule th,.journal-schedule td{padding:8px 0;border-top:1px solid #b4a17d40}
.step-morning .uc-note{position:absolute;right:20px;bottom:16px;color:#fff;text-shadow:0 1px 4px #0008}
/* 03 You approve: reply cards as the Journal shows them, Send, Edit or Skip. */
.step-approve{background:#183a2c;color:#fff;padding-bottom:96px}
.approve-stage{margin-top:44px}
.reply-stack{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.reply-card{display:flex;flex-direction:column;gap:10px;padding:22px 22px 18px;background:#f4f0e5 url(/marketing/attention/paper.webp) center/cover;color:#304f40;border-radius:20px 22px 20px 24px;box-shadow:0 2px 3px #b4a17d20,0 20px 50px #0006;font:400 15px/1.5 InterVariable,sans-serif;transition:opacity .3s,transform .3s}
.reply-card:nth-child(2){rotate:.6deg}.reply-card:nth-child(3){rotate:-.5deg}
.reply-origin{display:flex;justify-content:space-between;gap:10px;margin:0;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#557955}
.reply-origin time{font-weight:500;text-transform:none;letter-spacing:0}
.reply-title{font-size:18px;font-weight:600;color:#24402f}
.reply-text{margin:0;flex:1}
.reply-edit{width:100%;box-sizing:border-box;padding:10px;border:1px solid #557955;border-radius:10px;background:#fffdf6;color:#24402f;font:inherit;resize:vertical}
.reply-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.reply-actions button{min-height:36px;padding:6px 14px;border:1px solid #557955;border-radius:9px;background:transparent;color:#2f5a44;font:600 14px/1.2 InterVariable,sans-serif}
.reply-actions button:hover{background:#5579551a}
.reply-actions .reply-send{background:#2f5a44;border-color:#2f5a44;color:#fffdf5}
.reply-actions .reply-send:hover{background:#24402f}
.reply-actions button:focus-visible{outline:2px solid #2f5a44;outline-offset:2px}
.reply-note{font-size:13px;font-weight:600;color:#557955}
.reply-card[data-state=sent],.reply-card[data-state=skipped]{opacity:.62;transform:scale(.98)}
.reply-card[data-state=skipped] .reply-text{text-decoration:line-through}
.step-approve .uc-note{margin-top:22px}
/* The four "One" points, compact: why it stays effortless. */
.effortless{padding:96px 0 88px;text-align:center}
.effortless h2{font-size:clamp(32px,3.4vw,44px);line-height:1.12;letter-spacing:-1.5px;font-weight:500;margin:0 0 36px}
.effortless-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line);text-align:left}
.effortless-list a{display:grid;gap:8px;height:100%;box-sizing:border-box;padding:26px 22px;font-size:14px;line-height:1.55;color:var(--muted)}
.effortless-list li+li a{border-left:1px solid var(--line)}
.effortless-list a:hover{background:var(--surface)}
.effortless-list b{font-size:20px;font-weight:500;color:var(--ink)}
.effortless .one{text-decoration-color:#9fc25a}
.fox-bubble{white-space:normal;width:max-content;max-width:min(320px,80vw);text-align:center}
@media(prefers-reduced-motion:reduce){.journal-page{animation:none}.reply-card{transition:none}}
@media(max-width:1000px){.reply-stack{grid-template-columns:1fr;max-width:560px;margin-inline:auto}.reply-card{rotate:0deg!important}.effortless-list{grid-template-columns:repeat(2,minmax(0,1fr))}.effortless-list li:nth-child(3) a{border-left:0}.effortless-list li:nth-child(n+3) a{border-top:1px solid var(--line)}}
@media(max-width:760px){
.film-hero .film-intro h1{font-size:44px;letter-spacing:-1.5px}
.inside h2{font-size:30px;letter-spacing:-1px}
.inside-why{font-size:15px}
.inside .day-nav{grid-template-columns:1fr}
.inside .day-nav a+a,.inside .day-nav a:nth-child(3){border-left:0;border-top:1px solid var(--line)}
.morning-stage{margin-top:24px;padding:20px 12px 44px;border-radius:22px 22px 0 0}
.journal-page{padding:22px 20px 20px}
.journal-numeral{font-size:48px}.journal-page h3{font-size:21px}
.journal-list li{grid-template-columns:1fr;gap:0}
.journal-schedule th{width:64px}
.step-approve{padding-bottom:64px}
.approve-stage{margin-top:24px}
.effortless{padding:64px 0}
.effortless-list{grid-template-columns:1fr}
.effortless-list li+li a{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:760px){.inside h2 br{display:none}.inside h2 em{display:block;margin-top:6px}}

/* GitHub as a nav icon, not a hero button (owner 2026-11-04); it stays on phones where the text links hide. */
.header nav .nav-github{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin:0 -8px;border-radius:10px}.header nav .nav-github:hover{background:#fbf9f0b8}@media(max-width:1000px){.site-top.header nav>a.nav-github{display:inline-flex}}

/* Marketing adapters for the shared built-in material. */
.button,.header nav .nav-download,.hero-chip,.card-close{border-radius:var(--control-radius);border:1px solid var(--control-line);background:var(--control-fill);color:var(--control-ink);box-shadow:var(--control-shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);min-height:44px;transition:background .16s ease,box-shadow .16s ease}
.button.primary,.header nav .nav-download{background:#315f48ed;color:#fff;border-color:#ffffff24}
.button:hover,.hero-chip:hover,.card-close:hover{background:var(--control-hover);color:var(--control-ink)}
.button.primary:hover,.header nav .nav-download:hover{background:#234936;color:#fff}
.film-actions .button:first-child,.film-controls .button{background:var(--control-glass);color:#fff;border-color:#ffffff38;border-radius:999px}
.film-actions .button:first-child:hover,.film-controls .button:hover{background:var(--control-glass-hover)}
.film-actions .button:last-child{background:#fffdf4e6;color:var(--control-ink);border-color:#ffffff80}
.film-actions .button:last-child:hover{background:#fffdf4}
.hero-chip[aria-pressed=true]{background:var(--control-forest);color:#fff;box-shadow:inset 0 0 0 1px #ffffff80}
.card-close{width:44px;border-radius:50%}
:is(.button,.hero-chip,.card-close,.nav-download):focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.button,.hero-chip,.card-close{transition:none}}
@media(prefers-reduced-transparency:reduce){.film-actions .button:first-child,.film-controls .button{background:#181b20}.button.primary{background:#315f48}}