/* Shared workbench theme. A static grid and event-driven highlights keep idle cost small. */
:root {
  color-scheme: dark;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --signal: #b6f568;
  --cyan: #76d9e6;
}
html { background: var(--theme-page, #080e13); }
body {
  color: var(--theme-text, #e3edef);
  background:
    radial-gradient(ellipse 60% 500px at 85% 0%, rgba(var(--theme-surface-rgb, 29,52,53), 0.200000), transparent),
    var(--theme-page, #080e13);
}
body::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 760px; z-index: -1;
  background-image: linear-gradient(#94afbc07 1px, transparent 1px),linear-gradient(90deg,#94afbc07 1px,transparent 1px);
  background-size: 48px 48px; pointer-events: none;
  mask-image: linear-gradient(#000,transparent);
}
::selection { background: #b6f568; color: #101807; }
.glass-material { background: rgba(var(--theme-surface-rgb, 16,25,32), 0.929412); border: 1px solid var(--theme-border, #30414c); box-shadow: inset 0 1px 0 #ffffff05,0 25px 60px -35px var(--theme-shadow, #000); backdrop-filter: blur(16px); }
.glass-ambient { display: none; }
[data-glass-spot]::after { background: radial-gradient(280px circle at var(--spot-x,50%) var(--spot-y,50%),#b6f5680c,transparent 75%); }
.eyebrow { color: var(--theme-muted, #a5bac2); font-family: var(--mono); font-size: 11px; letter-spacing: 1.8px; }
.liquid-text { background: none; color: var(--theme-accent-ink, var(--signal)); -webkit-text-fill-color: currentColor; }
.status-dot,.live-dot { background: var(--signal); box-shadow: 0 0 10px #b6f56850; }
.brand .brand-dot,.brand .brand-period { color: var(--theme-accent-ink, var(--signal)); }
/* Both sites render the shared SVG, independent of text/font and legacy glass styles. */
.brand .brand-symbol,.brand .brand-mark { display: block; flex: 0 0 auto; width: 31px; height: 31px; padding: 0; color: #111b09; background: var(--signal); border: 0; box-shadow: none; border-radius: 7px; }
.brand-label { font-family: var(--mono); color: var(--theme-muted, #8da6b2); }
.site-header,.topbar { height: 82px; }
.header-inner,.topbar-inner { border-radius: 10px; background: rgba(var(--theme-surface-rgb, 13,21,28), 0.866667); border: 1px solid var(--theme-border, #2a3942); }
.is-scrolled .header-inner,.is-scrolled .topbar-inner { background: rgba(var(--theme-surface-rgb, 13,21,28), 0.960784); box-shadow: 0 10px 40px var(--theme-shadow-color, #0006); }
.site-header nav>a,.nav a { color: var(--theme-text, #bdcbd1); border-radius: 6px; }
.site-header nav>a:hover,.nav a:hover { color: var(--theme-text, #fff); background: var(--theme-subtle, #202e36); }
.site-header nav>a[aria-current=page],.site-header nav .nav-create { background: #b6f56810; color: var(--theme-accent-ink, var(--signal)); box-shadow: none; border-color: #b6f56830; }
.button.primary,.button-primary { color: #142008; background: var(--signal); border: 1px solid var(--signal); box-shadow: none; font-weight: 700; border-radius: 7px; }
.button.primary:hover,.button-primary:hover { background: #caff8e; color: #101907; box-shadow: 0 3px 22px #b6f56822; transform: translateY(-2px); }
.button.secondary,.button-quiet { color: var(--theme-text, #d4e1e5); background: var(--theme-surface, #142129); border: 1px solid var(--theme-border, #324652); box-shadow: none; border-radius: 7px; }
.button.secondary:hover,.button-quiet:hover { background: var(--theme-subtle, #20313b); color: var(--theme-text, #fff); }
.text-link,.hero-under a { color: var(--theme-link, var(--cyan)); }
.text-link:hover,.hero-under a:hover { color: var(--theme-link, #b9f5ff); }
.effects-toggle { background: var(--theme-surface, #142129); border-color: var(--theme-border, #30414c); color: var(--theme-muted, #a5bbc5); border-radius: 6px; }
.effects-toggle:hover { background: var(--theme-subtle, #23333e); }
.prompt-composer { border-radius: 10px; background: var(--theme-inset, #0b141a); border-color: var(--theme-border, #3a4f58); backdrop-filter: none; box-shadow: 0 12px 42px var(--theme-shadow-color, #0003); }
.composer-tabs { background: var(--theme-inset, #081015); border: 1px solid var(--theme-border, #263943); border-radius: 6px; padding: 3px; }
.composer-tab { color: var(--theme-muted, #9cb0ba); border-radius: 4px; }
.composer-tab[aria-pressed=true] { background: var(--theme-subtle, #20332a); color: var(--theme-accent-ink, var(--signal)); box-shadow: none; }
.composer-hint { font-family: var(--mono); color: var(--theme-muted, #95acb7); }
.composer-output { color: var(--theme-text, #d7e7e7); font-family: var(--mono); }
.composer-output::before { content: "> "; color: var(--theme-accent-ink, var(--signal)); font-weight: 700; }
.composer-custom { color: var(--theme-muted, #a5bbc5); }
.composer-custom summary:hover { color: var(--theme-accent-ink, var(--signal)); }
.composer-custom textarea { background: var(--theme-surface, #111f28); color: var(--theme-text, #e3edef); border-color: var(--theme-border, #3a535f); border-radius: 6px; }
.composer-bottom { border-color: var(--theme-border, #223540); }
.composer-bottom>span,.composer-feedback { color: var(--theme-muted, #9aadb7); }
.copy-prompt.is-copied { color: #142008; background: #cfffa0; box-shadow: none; }
.journey-grid article,.route-card,.app-card { background: var(--theme-inset, #101920); border: 1px solid var(--theme-border, #263843); border-radius: 10px; box-shadow: none; }
.journey-grid article:hover,.route-card:hover,.app-card:hover { background: var(--theme-surface, #142029); border-color: var(--theme-edge, #4a626b); box-shadow: 0 16px 35px var(--theme-shadow-color, #0003); }
.journey-grid article>span,.screenshot-grid figcaption>span,.developer-links a>span { color: var(--theme-accent-ink, var(--signal)); font-family: var(--mono); }
.journey-grid a,.screenshot-grid figcaption>a { color: var(--theme-link, var(--cyan)); }
.creator-strip { border-color: var(--theme-border, #263843); }
.creator-strip>span { font-family: var(--mono); }
.device-banner { background: linear-gradient(120deg,var(--theme-surface, #111e26),var(--theme-inset, #0e1b1e)); }
.device-list span { background: var(--theme-inset, #081217); border-color: var(--theme-border, #2d434c); }
.device-list b { color: var(--theme-accent-ink, var(--signal)); background: var(--theme-subtle, #20332a); border-color: var(--theme-border, #365039); font-family: var(--mono); }
.developer-links a { background: var(--theme-inset, #101920); border-color: var(--theme-border, #2d434c); border-radius: 8px; }
.developer-links a:hover { background: var(--theme-surface, #192832); border-color: var(--theme-edge, #52757e); }
.screenshot-stage { background: var(--theme-surface, #111e26); border-color: var(--theme-border, #2c434e); border-radius: 10px; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
input,select,textarea { color-scheme: dark; }
.filter-reset { color: var(--theme-link, var(--cyan)); font-size: 12px; white-space: nowrap; padding: 8px 4px; }
.filter-reset:hover { color: var(--theme-link, #d0faff); }
.like-form { flex-wrap: wrap; align-items: center; gap: 8px; }
.like-feedback { color: var(--theme-muted, #9aadb7); font-size: 12px; line-height: 1.5; }
.like-button[aria-busy=true] { opacity: .65; cursor: progress; }
@media(prefers-contrast:more) { .glass-material { background:var(--theme-inset, #101920)!important; border-color:var(--theme-edge, #9cafb7); } }
@media(prefers-reduced-transparency:reduce) { .glass-material { background:var(--theme-inset, #101920)!important; backdrop-filter:none; } }
@media(forced-colors:active) {
  .liquid-text { color:CanvasText!important; -webkit-text-fill-color:CanvasText!important; }
  .button.primary,.button-primary { background:ButtonFace; color:ButtonText; border-color:ButtonText; }
}