@import url("/flowmind/v2/ocean.css");

/* Light, airy review direction. Geometry and runtime stay shared with Studio. */
body { isolation: isolate; }
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; width: 90vw; height: 90vh; border-radius: 50%; will-change: transform; }
body::before { top: -28vh; left: -25vw; background: radial-gradient(ellipse, var(--sky-cloud-a), transparent 66%); animation: sky-drift 24s ease-in-out infinite alternate; }
body::after { right: -28vw; bottom: -33vh; background: radial-gradient(ellipse, var(--sky-cloud-b), transparent 65%); animation: sky-drift 30s ease-in-out -12s infinite alternate-reverse; }
.topbar { height: 72px; padding: 0 44px; border-bottom: 0; backdrop-filter: none; }
.topbar nav { margin-left: auto; }
.theme-toggle { margin-left: 18px; background: color-mix(in srgb, var(--paper-raised) 40%, transparent); }
.brand { font-size: 25px; }
.brand small { margin-top: 6px; font-size: 12px; }
.topbar nav a[aria-current="page"] { border-color: transparent; background: transparent; }
.home-model-toggle, .home-specimen, .home-bubble { background: var(--sky-glass); border-color: color-mix(in srgb, var(--paper-raised) 85%, transparent); backdrop-filter: blur(22px); }
.home-model-menu { background: color-mix(in srgb, var(--paper-raised) 92%, transparent); backdrop-filter: blur(28px); border-color: var(--paper-raised); }
.home-model-toggle:hover, .home-model-toggle[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--paper-raised)); }
.home-specimen { background: linear-gradient(145deg, color-mix(in srgb, var(--paper-raised) 95%, transparent), var(--sky-glass)); box-shadow: 0 35px 80px rgb(49 104 175 / 11%), 0 8px 20px rgb(49 104 175 / 5%), inset 0 2px 1px rgb(255 255 255 / 75%); }
.home-footer { border-color: color-mix(in srgb, var(--ink-soft) 12%, transparent); }
.workspace-view { max-width: 1920px; padding-top: 4px; animation: sky-enter 320ms cubic-bezier(.2,.65,.3,1) both; }
.workspace-bar { padding-bottom: 14px; }
.canvas-pane { border-radius: 28px; border-color: color-mix(in srgb, var(--paper-raised) 88%, transparent); background: var(--sky-glass); backdrop-filter: blur(24px); box-shadow: 0 18px 55px rgb(33 68 120 / 6%); }
.canvas-head { padding-inline: 18px; height: 42px; }
.canvas-frame { margin-inline: 12px; border-radius: 18px; background-color: color-mix(in srgb, var(--paper-raised) 45%, transparent); }
.simulation-bar { margin: 0 12px; padding-inline: 8px; border-radius: 18px; background: color-mix(in srgb, var(--paper-raised) 75%, transparent); border: 0; }
.simulation-bar button { color: var(--accent); }
.behavior-strip { padding: 10px 16px 12px; border: 0; }
.inspector { padding: 16px; border-radius: 28px; border: 1px solid color-mix(in srgb, var(--paper-raised) 85%, transparent); background: color-mix(in srgb, var(--sky-glass) 80%, transparent); backdrop-filter: blur(20px); box-shadow: 0 12px 35px rgb(33 68 120 / 3%); }
.inspector .influence-guide .quiet { font-weight: 500; }
.experiment-control > label { font-size: 12px; }
.experiment-control input, .schedule-controls input { background: color-mix(in srgb, var(--paper-raised) 80%, transparent); border-color: color-mix(in srgb, var(--line) 65%, transparent); border-radius: 14px; }
.experiment-control.is-active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.node-stock .node-shape { fill: var(--paper-raised); stroke: var(--accent); }
.node-shape-variable { fill: color-mix(in srgb, var(--paper-raised) 86%, var(--anim-positive) 14%); }
.node-shape-constant { fill: color-mix(in srgb, var(--paper-raised) 84%, var(--lever) 16%); }
.node-value { fill: var(--ink-soft); }
.node-constant .node-value { fill: var(--lever); }
.catalog-card, .saved-card, .toolbox { background: var(--sky-glass); border-color: color-mix(in srgb, var(--paper-raised) 85%, transparent); border-radius: 28px; backdrop-filter: blur(16px); }
.model-status.valid { color: var(--ink-soft); }
.is-fullscreen .canvas-frame { margin-inline: 0; }
@keyframes sky-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(13vw,9vh,0) scale(1.1); } }
@keyframes sky-enter { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 1250px) {
  .topbar { padding-inline: 28px; }
  .studio-layout.exploring { grid-template-columns: minmax(480px, 1fr) 276px; }
  .inspector { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .workspace-view { animation: none; will-change: auto; }
}