:root { --ink:#303831;--muted:#758074;--line:#e4e7e0;--green:#385f45;--sidebar-width:240px;color-scheme:light;font:13px -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif }
* { box-sizing:border-box;scrollbar-width:none;-webkit-tap-highlight-color:transparent }
*::-webkit-scrollbar { width:0;height:0 }
html,body { height:100%;margin:0;color:var(--ink);background:#f5f5f1 }
body { min-width:900px;overflow:auto }
button,input,select { font:inherit;color:inherit }
button { cursor:pointer;background:none;border:0;border-radius:5px }
button:hover { background:#e9ede5 }
button:active { background:#dfe6d9 }
button:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid #718a64;outline-offset:3px }
button:disabled { opacity:.45;cursor:default }
[hidden] { display:none!important }
::selection { background:#dce8d2 }
svg { display:block;width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round }
[data-icon] { display:inline-flex }
.workspace { display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);height:100vh;height:100dvh;min-height:540px }
.sidebar { position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--line);background:#fbfcf8;z-index:2 }
.workspace-brand { display:flex;align-items:center;gap:9px;height:68px;padding:0 20px;flex-shrink:0 }
.workspace-brand strong { font-size:13px;font-weight:600 }
.brand-mark { width:26px;height:26px;display:grid;place-items:center;border-radius:6px;background:#385d45;color:white;font-size:18px;font-weight:600 }
.project-name { margin:12px 22px 16px;color:var(--muted);font-size:11px }
.module-tree { flex:1;overflow:auto;min-height:0;padding:0 12px 24px }
.journey-item { margin:3px 0 }
.journey-link { width:100%;display:flex;align-items:center;gap:8px;min-height:38px;padding:8px;text-align:left;font-size:12px }
.journey-link>svg { width:12px;height:12px;color:#87917e }
.journey-link[aria-expanded=true]>svg { transform:rotate(90deg) }
.journey-link[aria-current=true] { color:#32523a;background:#edf1e7;font-weight:600 }
.journey-steps { padding:4px 0 10px 21px }
.step-link { display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;text-align:left;font-size:11px;color:#697361 }
.step-link>span { color:#8c9584;font-size:10px;font-variant-numeric:tabular-nums }
.step-link[aria-current=step] { background:#f0f3eb;color:#344d35 }
.sidebar-resizer { position:absolute;right:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:4 }
.sidebar-resizer:hover,.sidebar-resizer[data-dragging=true] { background:#6d886633 }
.is-flow-resizing { cursor:col-resize;user-select:none }
.page-index { margin:28px 8px 0;font-size:11px;color:#7c8575 }
.page-index summary { cursor:pointer;padding:8px 0 }
.page-index button { display:block;width:100%;padding:7px 4px;text-align:left;font-size:11px;line-height:1.6 }
.studio-main { min-width:0;min-height:0;display:flex;flex-direction:column }
.primary-button,.quiet-button { display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;font-size:12px;min-height:33px }
.primary-button { background:#3d6147;color:white }
.primary-button:hover { background:#2c4e34 }
.primary-button:active { background:#24452b }
.quiet-button { color:#6a7860;padding:6px 0 }
.quiet-button svg { width:14px;height:14px }
.canvas-view { position:relative;flex:1;min-height:0;background:#f3f4ef }
.canvas-viewport { height:100%;width:100%;overflow:auto;position:relative;cursor:grab;overscroll-behavior:contain;background-image:radial-gradient(#b6c0ac77 .7px,transparent .7px);background-size:20px 20px }
.canvas-viewport.is-dragging { cursor:grabbing;user-select:none }
.canvas-viewport.is-pan-ready,.canvas-viewport.is-pan-ready * { cursor:grab!important;user-select:none }
.canvas-viewport.is-dragging,.canvas-viewport.is-dragging * { cursor:grabbing!important;user-select:none }
.canvas-world { position:relative;transform-origin:0 0 }
.connections { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible }
.connections path { stroke:#a9b59d;stroke-width:1.1;fill:none }
.scene { position:absolute;width:var(--scene-width,360px);cursor:default }
.scene>header { min-height:38px;display:flex;align-items:center;align-content:center;flex-wrap:wrap;gap:5px 12px;padding:5px 0 8px }
.scene-title { display:flex;align-items:center;gap:10px;white-space:nowrap;min-width:0;max-width:100% }
.scene-title>span { font-size:10px;color:#8a9680;font-variant-numeric:tabular-nums }
.scene-title>strong { font-size:12px;font-weight:500;color:#46563d;min-width:0;overflow:hidden;text-overflow:ellipsis }
.scene-page { padding:0;width:100%;display:block;border:1px solid #d8dfd0;border-radius:5px;overflow:hidden;background:white;aspect-ratio:1.6;cursor:pointer }
.scene-page img { display:block;width:100%;height:100%;object-fit:cover }
.scene-page:hover { border-color:#839b70 }
.scene.is-selected .scene-title>span { color:#315b3d }
.scene.is-selected .scene-title>strong { color:#315b3d;font-weight:600 }
.scene>footer { padding-top:8px }
.scene-states { display:flex;flex-wrap:wrap;gap:4px;max-width:100% }
.scene-states [role=tab] { padding:3px 7px;border:0;border-radius:3px;box-shadow:inset 0 0 0 1px #dfe4da;background:#f8f9f5;color:#5c6c51;font-size:8px;line-height:1.4;white-space:nowrap }
.scene-states [role=tab]:hover { background:#edf1e8;color:#304e33 }
.scene-states [role=tab][aria-selected=true] { color:#304e33;box-shadow:inset 0 0 0 1px #b6c5ab;background:#eaf0e3 }
.scene-states [role=tab]:active { background:#dfe8d7;color:#203d28 }
.canvas-controls { position:absolute;bottom:18px;right:22px;display:flex;align-items:center;gap:3px;background:#fafbf7;border:1px solid #dfe5d6;border-radius:7px;padding:3px }
.canvas-controls button { height:29px;min-width:28px;padding:0 8px;color:#657758;font-size:11px;font-variant-numeric:tabular-nums }
.canvas-controls .primary-button { min-height:29px;padding:0 12px;margin-right:5px;color:white;gap:5px }
.canvas-controls .primary-button svg { width:13px;height:13px }
#zoom-in,#zoom-out { font-size:18px }
#fit-flow { margin-left:6px;border-left:1px solid #e1e6da;border-radius:0;padding:0 11px }
.player-view { padding:0;border:0;border-radius:10px;width:clamp(960px,calc(100vw - 128px),1280px);height:min(800px,calc(100dvh - 112px));max-width:calc(100vw - 48px);max-height:calc(100dvh - 48px);background:#fafbf7;color:var(--ink);overflow:hidden;box-shadow:0 18px 70px -24px #182a2466 }
.player-view[open] { display:flex;flex-direction:column }
.player-view::backdrop { background:#28342e66 }
.preview-heading { height:52px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 14px 0 20px;border-bottom:1px solid var(--line) }
.preview-heading>strong { font-size:12px;font-weight:500 }
.preview-actions { display:flex;align-items:center;gap:14px }
.close-preview { display:grid;place-items:center;width:30px;height:30px;color:#687360 }
.live-stage { flex:1;min-height:0;overflow:auto;padding:0;background:#f0f2eb }
.device-slot { width:100%;height:100% }
.desktop-window { width:100%;height:100%;overflow:hidden;background:white }
.desktop-window iframe { display:block;border:0;width:100%;height:100%;background:white }
.player-message { padding:12px 22px;border-top:1px solid var(--line);background:#fafbf7;color:#697b58;font-size:11px;line-height:1.6;flex-shrink:0 }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important } }