:root,.landing{color-scheme:light;--page:#f6f9fa;--ink:#173e43;--muted:#6b858b;--accent:#568b90;--button:#126f73;--line:#dce5e6;--card:#fff;--soft:#f2f5f5;--text:#283c40;--green:#23896a;--shadow:0 12px 40px -20px #1b45464a;--code:#f8fafb;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text);background:var(--page)}
:root[data-theme=dark],:root[data-theme=dark] .landing{color-scheme:dark;--page:#16282c;--ink:#e0edef;--muted:#91a9af;--accent:#8dbdc1;--button:#258a8e;--line:#364b4f;--card:#1c3035;--soft:#243a3f;--text:#d6e4e6;--green:#73c9a6;--code:#192b30;--shadow:0 12px 40px -20px #0009}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;background:none;border:0}button:disabled{cursor:default;opacity:.5}a{color:inherit}svg{width:18px;height:18px;flex:none}button svg{pointer-events:none}button:focus-visible,a:focus-visible{outline:2px solid var(--button);outline-offset:4px}input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}[hidden]{display:none!important}button{touch-action:manipulation}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:var(--card);padding:12px}.skip-link:focus{top:10px}.icon-button{display:grid;place-items:center;width:32px;height:32px;font-size:22px;color:var(--muted);border-radius:7px}.icon-button:hover{background:var(--soft);color:var(--ink)}
/* The very same website becomes the workspace's live preview. */
.landing{container-type:inline-size;position:relative;display:flex;flex-direction:column;flex:1;min-height:0;background:var(--page);color:var(--ink);overflow:auto}.landing-header{display:flex;justify-content:space-between;align-items:center;padding:25px 34px;flex:none}.wordmark img{width:99px;height:auto;display:block}.landing-main{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px 24px 62px}.landing h1{font-size:clamp(35px,5.55cqw,92px);font-weight:550;letter-spacing:-.068em;line-height:1.14;margin:0 0 32px;white-space:nowrap}.landing h1>span{color:var(--accent)}.landing-description{font-size:clamp(13px,1.24cqw,21px);line-height:1.6;color:var(--muted);margin:0 0 35px}.landing-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:max-content;max-width:100%;align-items:stretch;gap:12px}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:49px;padding:0 25px;border-radius:28px;text-decoration:none;font-size:14px;font-weight:500;transition:transform .18s,background .18s,box-shadow .18s}.button:hover{transform:translateY(-2px)}.primary{background:var(--button);color:#fff;box-shadow:0 3px 8px #0d666510}.primary:hover{background:#0c6267;box-shadow:0 6px 16px #126f7326}.secondary{border:1px solid #c6d8da;color:var(--ink);background:transparent}.secondary:hover{background:var(--card);border-color:var(--accent)}.button-arrow{margin-left:8px;color:var(--muted)}.compatibility{font-size:11px;color:var(--muted);margin:13px 0 0;line-height:1.7}.compatibility span{padding:0 4px}.landing-footer{display:flex;justify-content:center;gap:25px;padding:20px 24px 24px;font-size:11px;color:var(--muted);flex:none}.landing-footer a{text-underline-offset:4px;text-decoration-color:#9eb3b7}.preview-header,.preview-address,.preview-footer{display:none}

/* The original Workspace canvas fills the browser; pane styling stays in home.css. */
body { padding: 0; }
#landing-host > .landing { height: 100svh; min-height: 540px; }
.landing { view-transition-name: website; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.landing h1 { max-width: 100%; }
.landing h1 > span { white-space: normal; }
.immersive-workspace { position: fixed; inset: 0; margin: 0; padding: 0; max-width: none; }
.immersive-workspace .vw { width: 100%; height: 100%; border: 0; border-radius: 0; }
.immersive-workspace .pg { height: 100%; aspect-ratio: auto; }
#preview-mount { display: flex; padding: 0; overflow: hidden; }
#preview-mount > .landing { width: 100%; }
#preview-mount .landing-header { padding: 20px 24px; }
#preview-mount .wordmark img { width: 75px; }
#preview-mount .landing-main { padding: 20px 20px 36px; }
#preview-mount .landing h1 { font-size: clamp(20px, 6.1cqw, 72px); margin-bottom: 24px; }
#preview-mount .landing-description { font-size: clamp(11px, 1.5cqw, 17px); margin-bottom: 26px; }
#preview-mount .landing-actions { gap: 10px; }
@container (max-width: 380px) { #preview-mount .landing-actions { grid-template-columns: 1fr; } }
#preview-mount .button { min-height: 40px; font-size: 12px; padding: 0 18px; }
#preview-mount .compatibility { font-size: 10px; }
#preview-mount .landing-footer { font-size: 10px; padding: 16px; }
.demo-guide { position: absolute; bottom: 8px; left: 16px; right: 16px; display: flex; align-items: center; gap: 16px; pointer-events: none; color: var(--dim); font: 10px var(--mono); z-index: 8; }
.demo-guide button { pointer-events: auto; padding: 5px 0; color: var(--ink); }
.demo-guide button:last-child { margin-left: auto; }
.demo-guide kbd { font: inherit; margin-left: 8px; opacity: .65; }
.demo-guide button:hover { text-decoration: underline; text-underline-offset: 4px; }
.appearance-menu { position: absolute; z-index: 30; top: 32px; right: 12px; padding: 18px; width: min(320px, calc(100% - 24px)); border: 1px solid var(--app-line); background: var(--solid); color: var(--ink); border-radius: 6px; box-shadow: 0 16px 48px #0003; }
.appearance-menu h2 { margin: 0 0 16px; font: 600 12px var(--mono); }
.appearance-menu .looks { gap: 16px; }
.appearance-menu .mode { border-color: var(--app-line); background: color-mix(in srgb, var(--ink) 4%, var(--solid)); }
.appearance-menu .mode button { color: var(--dim2); }
.appearance-menu .mode button:hover { color: var(--ink); }
.appearance-menu .mode button[aria-pressed="true"] { background: color-mix(in srgb, var(--ink) 14%, var(--solid)); color: var(--ink); }
.appearance-menu button:focus-visible { outline-color: var(--focus); }
.appearance-menu .sw { border-color: var(--app-line); background: var(--solid); }
.appearance-menu .sw[aria-pressed="true"] { outline-color: var(--focus); }
.appearance-menu .bgs { flex-wrap: wrap; }
.appearance-menu .bgs-label { width: 100%; color: var(--dim2); }
/* Command palette proportions and row treatment follow canvas.css in Vupai. */
.pane-menu { position: fixed; top: min(20vh, 160px); left: 50%; transform: translateX(-50%); margin: 0; padding: 0; width: min(460px, calc(100vw - 32px)); max-height: calc(100svh - 100px); border: 1px solid var(--app-line); border-radius: 6px; background: var(--solid); color: var(--ink); box-shadow: 0 26px 70px #0005; overflow: hidden; }
.pane-menu::backdrop { background: #111b2714; }
.vw[data-skin=normal] .pane-menu { border-radius: 14px; }
.command-query { display: flex; align-items: center; border-bottom: 1px solid var(--app-line); padding: 12px 14px; gap: 10px; }
.command-query input { width: 100%; min-width: 0; font: 500 13px var(--mono); border: 0; outline: 0; background: none; color: var(--ink); }
.command-query input:focus-visible { outline: none; }
.command-query button { color: var(--dim); font: 10px var(--mono); }
.pane-options { max-height: min(352px, 52svh); overflow: auto; padding: 5px 0; }
.command-group { margin: 12px 14px 5px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; font: 9.5px var(--mono); }
.command-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 14px; text-align: left; font: 12px var(--sans); }
.command-row svg { width: 14px; height: 14px; }
.command-row:hover, .command-row.selected { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.command-row .open-tag { margin-left: auto; border: 1px solid #38947755; color: #358568; border-radius: 3px; padding: 1px 4px; font: 9px var(--mono); }
.command-foot { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--app-line); color: var(--dim); font: 9px var(--mono); }
.command-foot span:last-child { margin-left: auto; }
.no-results { padding: 20px 14px; font-size: 12px; color: var(--dim); }
:root[data-theme=dark] .wordmark img { filter: brightness(0) invert(.9); }
/* Move the page's pieces together; never stretch one screenshot of its text. */
.landing .wordmark { view-transition-name: site-logo; }
.landing-header > button { view-transition-name: site-theme; }
.landing h1 { view-transition-name: site-title; }
.landing-description { view-transition-name: site-description; }
.download-cta { view-transition-name: site-download; }
#try-button { view-transition-name: site-try; }
.compatibility { view-transition-name: site-compatibility; }
.landing-footer > span { view-transition-name: site-credit; }
.landing-footer > a { view-transition-name: site-privacy; }
::view-transition-group(*) { animation-duration: 480ms; animation-timing-function: cubic-bezier(.22,.75,.2,1); }
::view-transition-old(*) { animation: none; opacity: 0; }
::view-transition-new(*) { animation: none; mix-blend-mode: normal; height: 100%; object-fit: contain; }
::view-transition-new(website) { object-fit: fill; }
.view-changing .tcard { transition: none !important; }
.view-changing .tcard.entering { opacity: 1; transform: none; }
.view-changing :focus { outline: none !important; }
@media (max-width: 700px) {
  .landing-header { padding: 22px; }
  .wordmark img { width: 83px; }
  .landing-main { padding: 20px 15px 50px; }
  .landing h1 { font-size: 7.2cqw; margin-bottom: 25px; }
  .landing-description { font-size: 14px; max-width: 300px; margin-bottom: 30px; }
  .landing-actions { gap: 9px; }
  .button { font-size: 11px; padding: 0 13px; min-height: 45px; gap: 6px; white-space: nowrap; }
  .button-arrow { display: none; }
  .compatibility { font-size: 10px; }
    .landing-footer { font-size: 10px; }
}
@media (max-width: 559px) {
  .immersive-workspace .pg.flow { overflow-y: auto; padding-bottom: 48px; }
  .pg.flow .tcard { flex-shrink: 0; }
  .pg.flow .tcard[data-id=preview]:not(.min) { height: max(480px, 80svh) !important; }
  .pg.flow .tcard.ed:not(.min), .pg.flow .tcard.board:not(.min) { height: 420px !important; }
  .demo-guide { bottom: 0; left: 0; right: 0; padding: 4px 12px; background: var(--solid); }
  .demo-guide > span { display: none; }
  .command-foot span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*) { animation-duration: .01ms !important; }
}
.landing { --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.immersive-workspace .pg { height: calc(100% - 32px); }
@media (max-width: 559px) { .immersive-workspace .pg.flow { height: calc(100% - 32px); padding-bottom: 16px; } }
.vw[data-skin=retro] .command-row { font-family: var(--mono); }

/* Introduce the app toolbar once with an anchored pointer. */
/* Original app corner: command shortcut and settings cog. */
#demo-commands { flex: none; height: 24px; display: flex; align-items: center; background: transparent; border: none; cursor: pointer; padding: 0 6px; border-radius: 6px; font: 500 13px var(--mono); line-height: 1; color: var(--ink); opacity: .78; }
#demo-appearance { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; margin-left: -5px; border-radius: 6px; color: var(--ink); opacity: .78; }
#demo-appearance svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
#demo-commands:hover, #demo-appearance:hover { opacity: 1; }
#demo-appearance:hover { background: rgba(0,113,227,.08); }
.pane-tip { position: absolute; z-index: 9; top: 39px; right: 34px; width: 235px; max-width: calc(100% - 24px); padding: 16px 30px 16px 18px; color: var(--ink); background: color-mix(in srgb,var(--solid) 95%,transparent); border: 1px solid var(--app-line); border-radius: 10px; box-shadow: 0 10px 30px #0002; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; animation: hint-arrive 180ms ease-out both; }
.pane-tip::before { content: ''; position: absolute; right: 12px; top: -6px; width: 10px; height: 10px; transform: rotate(45deg); border-top: 1px solid var(--app-line); border-left: 1px solid var(--app-line); background: var(--solid); }
.pane-tip strong { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.pane-tip p { font-size: 11px; line-height: 1.6; color: var(--dim2); }
.pane-tip button { position: absolute; right: 5px; top: 5px; padding: 4px; width: 24px; height: 24px; color: var(--dim); font-size: 18px; }
@keyframes hint-arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 559px) {
  .immersive-workspace .pg.flow { height: calc(100% - 38px); }
  .pg.flow .play-clock { display: none; }
  .pg.flow .status { position: static; transform: none; }
  .pane-tip { right: 32px; }
  .demo-guide { min-height: 38px; }
  #demo-commands { width: 32px; }
}

/* Empty workspaces offer the two useful next steps, including keyboard access. */
.immersive-workspace .empty { display: none; padding: 24px; }
.immersive-workspace .pg.is-empty .empty { display: grid; }
.empty-options { pointer-events: auto; margin: 0; max-width: min(740px,100%); color: var(--ink); text-align: center; font: 400 12px/1.9 var(--mono); }
.empty-options button { display: inline; padding: 0; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.empty-options button:hover { text-decoration-thickness: 2px; }
.empty-options button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.immersive-workspace .pg.flow.is-empty .empty { flex: 1; position: relative; z-index: 1; }
.db-example-note { margin: 0 0 14px; font: 10px var(--mono); color: var(--dim); }

/* Selection uses the app's dashed focus ring and background marquee. */
.immersive-workspace .tcard.selected { outline: 2px dashed var(--focus); outline-offset: 4px; }
.marquee { position: absolute; z-index: 40; border: 1px dashed var(--focus); background: color-mix(in srgb,var(--focus) 7%,transparent); border-radius: 4px; pointer-events: none; }
.selection-bar { position: absolute; bottom: 43px; left: 50%; transform: translateX(-50%); z-index: 45; display: flex; gap: 4px; align-items: center; padding: 6px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--solid); color: var(--ink); box-shadow: 0 8px 30px #0002; white-space: nowrap; font: 11px var(--mono); }
.selection-bar > span { padding: 0 9px; color: var(--dim2); }
.selection-bar button { padding: 6px 8px; border-radius: 4px; }
.selection-bar button:hover { background: color-mix(in srgb,var(--ink) 7%,transparent); }
#selection-close { color: var(--red); }
@media(max-width: 380px) { .selection-bar { gap: 0; font-size: 10px; } .selection-bar button { padding: 6px; } .selection-bar > span { padding: 0 5px; } }

/* Current Vupai dock: 168 × 44 rows, or 26px with the status hidden. */
.immersive-workspace .tcard.min { background: color-mix(in srgb,var(--solid) 93%,transparent); border-color: var(--app-line); border-radius: 6px; box-shadow: none; }
.immersive-workspace .tcard.min .thead { box-sizing: content-box; height: 16px; min-height: 0; padding: 6px 8px 0 10px; gap: 7px; border: 0; background: transparent; font: 600 11px/16px var(--sans); }
.immersive-workspace .tcard.min .nm { flex: 1 1 auto; font: 600 11px/16px var(--sans); }
.immersive-workspace .tcard.min .sdot { width: 9px; height: 16px; flex: none; display: grid; place-items: center; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; }
.immersive-workspace .tcard.min .sdot svg { display: none; }
.immersive-workspace .tcard.min .sdot::before { content: '○'; font: 10px/16px var(--mono); color: var(--dim); }
.immersive-workspace .tcard.min.busy .sdot::before { content: '●'; color: var(--focus); }
.immersive-workspace .tcard.min .vicon { width: 13px; height: 16px; border: 0; background: none; }
.immersive-workspace .tcard.min .vicon svg { width: 11px; height: 11px; }
.immersive-workspace .tcard.min .tnow { padding: 2px 8px 0 26px; font: 400 10.5px/14px var(--sans); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.immersive-workspace .tcard.min .tctl { position: absolute; top: 3px; right: 4px; height: 20px; gap: 0; margin: 0; opacity: 0; pointer-events: none; }
.immersive-workspace .tcard.min:is(:hover,:focus-within,.selected) .tctl { opacity: 1; pointer-events: auto; background: var(--solid); }
.immersive-workspace .tcard.min:is(:hover,:focus-within,.selected) .thead { padding-right: 48px; }
.immersive-workspace .tcard.min .ctl { width: 20px; height: 20px; }
.immersive-workspace .tcard.min .ctl svg { width: 12px; height: 12px; }
.immersive-workspace .tcard.min.dockcompact .thead { padding-top: 4px; }
.immersive-workspace .tcard.min.dockcompact .tnow { display: none; }
.immersive-workspace .dockctl { width: 48px; }
.immersive-workspace .pg.flow .tcard.min { height: 44px !important; }
.immersive-workspace .pg.flow .tcard.min.dockcompact { height: 26px !important; }
#session-plots .vp-card { --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
#session-plots .vp-chart svg, .vp-dialog .vp-chart svg { width: auto; height: auto; }
.vp-dialog svg { flex: initial; }