:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #17233b; background: #f8fafc; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow: hidden; }
button { font: inherit; }
.bi { display: inline-flex; line-height: 1; }
.toolbar { position: relative; z-index: 2; min-height: 70px; display: flex; align-items: center; gap: 24px; padding: 14px 28px; border-bottom: 1px solid #dce5f0; background: #fff; box-shadow: 0 2px 10px rgb(31 52 87 / 5%); }
.tools { display: flex; gap: 8px; }
.button { border: 0; border-radius: 7px; padding: 9px 13px; color: #fff; background: #2563eb; font-weight: 650; cursor: pointer; }.button:hover { background: #1d4ed8; }.button:disabled { color: #9aa9bc; background: #e8edf4; cursor: not-allowed; }.button-secondary { color: #4d5f77; background: #eef2f7; }.button-secondary:not(:disabled):hover { color: #a72938; background: #ffe9eb; }.instructions { margin: 0 0 0 auto; color: #64748b; font-size: 13px; }
#canvas { position: relative; height: calc(100vh - 70px); overflow: hidden; outline: none; background-color: #f8fbff; background-image: radial-gradient(#cbd9ec 1px, transparent 1px); background-size: 22px 22px; }#canvas:focus { box-shadow: inset 0 0 0 2px #93c5fd; }#transitions { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }.transition { fill: none; stroke: #577db5; stroke-width: 2.5; marker-end: url(#arrowhead); }.transition-label { fill: #314f7f; stroke: #f8fbff; stroke-linejoin: round; stroke-width: 4px; paint-order: stroke; font-size: 12px; font-weight: 750; text-anchor: middle; dominant-baseline: middle; }.canvas-help { position: absolute; top: 28px; left: 50%; width: min(420px, calc(100% - 40px)); margin: 0; padding: 11px 16px; transform: translateX(-50%); color: #64748b; border: 1px solid #dce5f0; border-radius: 8px; background: rgb(255 255 255 / 88%); text-align: center; font-size: 13px; pointer-events: none; }
.node { position: absolute; z-index: 1; display: grid; place-items: center; width: 74px; height: 74px; padding: 8px; transform: translate(-50%, -50%); overflow: hidden; color: var(--node-text-color, #1e3a6f); border: 2px solid transparent; border-radius: 50%; background: var(--node-color, #fff); box-shadow: 0 8px 20px rgb(31 52 87 / 28%); font-size: 13px; font-weight: 700; line-height: 1.1; text-align: center; overflow-wrap: anywhere; cursor: pointer; touch-action: none; user-select: none; }.node.selected { color: var(--node-text-color, #1e3a6f); border-color: #1d4ed8; background: var(--node-color, #fff); box-shadow: 0 0 0 5px rgb(37 99 235 / 24%), 0 10px 24px rgb(31 52 87 / 30%); }.node.dragging { cursor: grabbing; }
.node-actions { position: absolute; z-index: 2; display: grid; grid-template-rows: repeat(3, 29px); grid-auto-flow: column; grid-auto-columns: 29px; gap: 5px; transform: translateY(-50%); }.node-action { display: grid; width: 29px; height: 29px; place-items: center; padding: 0; color: #425d85; border: 1px solid #c6d7ed; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgb(31 52 87 / 16%); font-size: 18px; line-height: 1; cursor: pointer; }.node-action:hover { color: #1d4ed8; border-color: #7fa9e9; background: #f6f9ff; }.node-action.delete:hover { color: #b42332; border-color: #f1a9b1; background: #fff5f5; }.node-action.color { overflow: hidden; }.node-action.color::-webkit-color-swatch-wrapper { padding: 3px; }.node-action.color::-webkit-color-swatch { border: 1px solid #8ea8cc; border-radius: 50%; }.node-action.color::-moz-color-swatch { border: 1px solid #8ea8cc; border-radius: 50%; }
.node.connection-origin { border-color: #f59e0b; box-shadow: 0 0 0 5px rgb(245 158 11 / 22%); }.node.connection-target { border-color: #16a085; box-shadow: 0 0 0 5px rgb(22 160 133 / 20%); }.transition-editor { position: absolute; z-index: 3; display: flex; align-items: center; gap: 5px; padding: 6px; transform: translate(-50%, -50%); border: 1px solid #9ec7c0; border-radius: 8px; background: #fff; box-shadow: 0 7px 17px rgb(31 52 87 / 18%); }.transition-editor input { width: 58px; padding: 5px; color: #1e3a6f; border: 1px solid #cbd9ec; border-radius: 4px; outline: none; font-size: 11px; }.transition-editor input:focus { border-color: #16a085; box-shadow: 0 0 0 2px rgb(22 160 133 / 17%); }.transition-editor button { display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; border-radius: 4px; color: #fff; background: #159a88; font-size: 14px; cursor: pointer; }.transition-editor button:hover { background: #087a68; }.transition-editor button.cancel { color: #60748e; background: #edf2f7; }.transition-editor button.cancel:hover { color: #b42332; background: #fff0f1; }
.matrix-panel { position: absolute; z-index: 3; right: 20px; bottom: 20px; width: min(480px, calc(100% - 40px)); max-height: min(380px, calc(100% - 40px)); padding: 17px; overflow: hidden; border: 1px solid #cbd9ec; border-radius: 11px; background: rgb(255 255 255 / 96%); box-shadow: 0 14px 32px rgb(31 52 87 / 18%); backdrop-filter: blur(10px); }.matrix-panel.hidden { display: none; }.matrix-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.matrix-header span { color: #64748b; font-size: 10px; font-weight: 750; letter-spacing: .8px; }.matrix-header h2 { margin: 3px 0 0; font-size: 16px; }.close-matrix { display: grid; width: 26px; height: 26px; place-items: center; padding: 0; color: #64748b; border: 0; border-radius: 5px; background: #edf2f7; font-size: 20px; cursor: pointer; }.close-matrix:hover { color: #1e3a6f; background: #e0e8f2; }.matrix-description { margin: 10px 0 5px; color: #64748b; font-size: 12px; line-height: 1.4; }.matrix-validation { min-height: 17px; margin: 0 0 8px; color: #087a68; font-size: 11px; font-weight: 650; }.matrix-validation.invalid { color: #b42332; }.matrix-scroll { max-height: 235px; overflow: auto; }#transition-matrix { table-layout: fixed; margin: 0; border-collapse: separate; border-spacing: 2px 3px; font-size: 11px; }#transition-matrix .matrix-state-column { width: 116px; }#transition-matrix .matrix-value-column { width: 70px; }#transition-matrix th, #transition-matrix td { padding: 2px 3px; }#transition-matrix th { color: #64748b; text-align: center; font-size: 10px; font-weight: 700; white-space: nowrap; }#transition-matrix .matrix-state-cell { color: #344764; text-align: left; font-weight: 700; white-space: nowrap; }#transition-matrix .matrix-value-cell { text-align: center; }.matrix-destination-heading { overflow: hidden; text-overflow: ellipsis; }.state-controls { display: flex; min-width: 0; align-items: center; gap: 4px; }.node-name-button { max-width: 80px; padding: 0; overflow: hidden; color: inherit; border: 0; background: transparent; font: inherit; font-weight: inherit; text-overflow: ellipsis; white-space: nowrap; cursor: text; }.node-name-button:hover { color: #2563eb; text-decoration: underline; }.node-name-input { width: 72px; padding: 3px 4px; color: #203a69; border: 1px solid #2563eb; border-radius: 4px; outline: none; background: #fff; font: inherit; }.node-color-input { width: 18px; height: 18px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }.node-color-input::-webkit-color-swatch-wrapper { padding: 0; }.node-color-input::-webkit-color-swatch { border: 1px solid #92a6c3; border-radius: 50%; }.node-color-input::-moz-color-swatch { border: 1px solid #92a6c3; border-radius: 50%; }.row-total { display: block; margin-top: 2px; color: #087a68; font-size: 9px; font-weight: 600; }.row-total.invalid { color: #b42332; }.probability-input { display: block; width: 58px; margin: 0 auto; padding: 5px 3px; color: #203a69; border: 1px solid #cbd9ec; border-radius: 5px; outline: none; background: #fff; text-align: center; font-size: 11px; }.probability-input.invalid { border-color: #e76a78; background: #fff7f7; }.probability-input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgb(37 99 235 / 16%); }
#matrix-panel { max-width: none; max-height: none; min-width: 260px; min-height: 190px; }
#matrix-panel:not(.hidden) { display: flex; flex-direction: column; }
#matrix-panel .matrix-header { padding-left: 10px; }
#matrix-panel.manually-sized .matrix-scroll { min-height: 0; flex: 1; max-height: none; }
.matrix-resize-handle { position: absolute; z-index: 2; top: 4px; left: 4px; width: 15px; height: 15px; padding: 0; border: 0; outline: none; background: repeating-linear-gradient(135deg, transparent 0 3px, #7698c3 3px 5px); clip-path: polygon(0 0, 100% 0, 0 100%); cursor: nwse-resize; touch-action: none; }.matrix-resize-handle:hover, .matrix-resize-handle:focus-visible { background: repeating-linear-gradient(135deg, transparent 0 3px, #2563eb 3px 5px); }.matrix-resize-handle:focus-visible { filter: drop-shadow(0 0 2px rgb(37 99 235 / 55%)); }
@media (max-width: 650px) { .toolbar { min-height: 122px; flex-wrap: wrap; gap: 11px; padding: 13px 16px; }.tools { order: 3; width: 100%; overflow-x: auto; }.instructions { margin-left: auto; font-size: 12px; }#canvas { height: calc(100vh - 122px); }.matrix-panel { right: 12px; bottom: 12px; width: calc(100% - 24px); } }

#canvas { background-color: #f8fbff; background-image: none; }
#scene { position: absolute; inset: 0; width: 200%; height: 200%; background-color: #f8fbff; background-image: radial-gradient(#cbd9ec 1px, transparent 1px); background-size: 22px 22px; transform: translate(var(--pan-x, 0px), var(--pan-y, 0px)) scale(var(--zoom, 1)); transform-origin: top left; }
.can-pan, .can-pan #scene { cursor: grab; }.panning, .panning #scene { cursor: grabbing; }
.canvas-help { z-index: 2; }
.zoom-controls { position: absolute; z-index: 3; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #cbd9ec; border-radius: 9px; background: rgb(255 255 255 / 96%); box-shadow: 0 8px 22px rgb(31 52 87 / 14%); }.zoom-controls label { display: flex; align-items: center; gap: 7px; color: #52647e; font-size: 11px; font-weight: 700; }.zoom-controls input { width: 84px; accent-color: #2563eb; }.zoom-controls output { min-width: 37px; color: #1e3a6f; font-size: 11px; font-weight: 750; text-align: right; }.zoom-button { display: grid; width: 25px; height: 25px; place-items: center; padding: 0; color: #385070; border: 1px solid #d3deec; border-radius: 5px; background: #fff; font-size: 17px; cursor: pointer; }.zoom-button:hover { color: #1d4ed8; border-color: #96b7e9; background: #f4f8ff; }
@media (max-width: 650px) { .zoom-controls { left: 12px; bottom: 12px; } }

.toolbar { position: fixed; z-index: 5; top: 18px; left: 20px; min-height: 0; gap: 10px; padding: 0; border: 0; background: transparent; box-shadow: none; pointer-events: none; }.toolbar .menu-button, .toolbar .tools { pointer-events: auto; }.toolbar .tools { gap: 7px; }.toolbar .button, .menu-button { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border-radius: 50%; font-size: 25px; font-weight: 500; line-height: 1; }.menu-button { color: #365477; border: 1px solid #d6e1ef; background: rgb(255 255 255 / 94%); box-shadow: 0 6px 18px rgb(31 52 87 / 10%); cursor: pointer; }.menu-button:hover, .menu-button[aria-expanded="true"] { color: #1d4ed8; border-color: #96b7e9; background: #f4f8ff; }.menu-button:focus-visible { outline: 3px solid rgb(147 197 253 / 75%); outline-offset: 2px; }.toolbar .button-secondary { background: rgb(255 255 255 / 94%); border: 1px solid #d6e1ef; box-shadow: 0 6px 18px rgb(31 52 87 / 10%); }.toolbar .button-secondary:not(:disabled):hover { color: #b42332; border-color: #f2adb5; background: #fff5f5; }
#canvas { height: 100vh; }.matrix-show-button { position: absolute; z-index: 3; right: 20px; bottom: 20px; padding: 10px 13px; color: #fff; border: 0; border-radius: 8px; background: #2563eb; box-shadow: 0 8px 22px rgb(37 99 235 / 24%); font-size: 13px; font-weight: 700; cursor: pointer; }.matrix-show-button:hover { background: #1d4ed8; }.matrix-show-button.hidden { display: none; }
@media (max-width: 650px) { .toolbar { top: 12px; left: 12px; flex-wrap: nowrap; }.toolbar .tools { width: auto; order: initial; overflow: visible; }.toolbar .button, .menu-button { width: 38px; height: 38px; }.matrix-show-button { right: 12px; bottom: 12px; }#canvas { height: 100vh; } }

.side-menu-overlay { position: fixed; z-index: 20; inset: 0; background: rgb(15 23 42 / 47%); opacity: 0; backdrop-filter: blur(1.5px); transition: opacity 180ms ease; }
.side-menu-overlay.visible { opacity: 1; }
.side-menu { position: fixed; z-index: 21; top: 0; bottom: 0; left: 0; display: flex; width: min(360px, calc(100vw - 36px)); flex-direction: column; padding: 25px 23px 19px; overflow-y: auto; color: #213857; border-right: 1px solid #a9c3e6; background: #eaf2ff; box-shadow: 18px 0 50px rgb(15 23 42 / 24%); transform: translateX(-105%); visibility: hidden; transition: transform 220ms ease, visibility 220ms; }
.side-menu.open { transform: translateX(0); visibility: visible; }
.side-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 4px 1px 23px; border-bottom: 1px solid #cbd9ec; }
.side-menu-brand { color: #17233b; font-size: 30px; font-weight: 800; letter-spacing: -1.6px; text-decoration: none; }.side-menu-brand span { color: #2563eb; }
.side-menu-close { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; padding: 0; color: #52647e; border: 1px solid #d4dfed; border-radius: 9px; background: #fff; font-size: 21px; cursor: pointer; }.side-menu-close:hover { color: #1d4ed8; border-color: #93b4e5; background: #f1f6ff; }
.side-menu-navigation { display: grid; gap: 10px; padding: 23px 0; }
.side-menu-link { display: grid; width: 100%; min-height: 68px; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 15px 12px 21px; color: #344764; border: 1px solid #b9cce5; border-radius: 11px; background: #fff; font: inherit; font-size: 15px; font-weight: 750; text-align: left; text-decoration: none; appearance: none; transition: color 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease; }.side-menu-link > i { color: #526f9a; font-size: 25px; text-align: center; transition: color 140ms ease; }.side-menu-link > span { display: grid; gap: 2px; }.side-menu-link:not(.is-placeholder) { color: #1e3a6f; box-shadow: inset 5px 0 0 #2563eb; cursor: pointer; }.side-menu-link:not(.is-placeholder) > i { color: #2563eb; }.side-menu-link:not(.is-placeholder):hover { color: #fff; border-color: #2563eb; background: #2563eb; box-shadow: inset 5px 0 0 #93c5fd; transform: translateY(-2px); }.side-menu-link:not(.is-placeholder):hover > i { color: #fff; }.side-menu-link:focus-visible, .side-menu-close:focus-visible { outline: 3px solid rgb(37 99 235 / 22%); outline-offset: 2px; }.side-menu-link.is-placeholder { cursor: default; opacity: .72; }
body.side-menu-open { overscroll-behavior: none; }
@media (max-width: 420px) { .side-menu { width: calc(100vw - 24px); padding: 19px 17px 15px; }.side-menu-header { padding-bottom: 18px; }.side-menu-navigation { padding: 18px 0; }.side-menu-link { min-height: 62px; } }
@media (prefers-reduced-motion: reduce) { .side-menu, .side-menu-overlay { transition: none; } }

.quick-help-viewer { position: fixed; z-index: 23; top: 50%; right: 22px; left: 382px; display: grid; grid-template-columns: 48px minmax(280px, 900px) 48px; grid-template-rows: minmax(0, auto) auto; align-items: center; justify-content: center; gap: 13px 15px; transform: translateY(-50%); }.quick-help-viewer[hidden] { display: none; }
.quick-help-card { display: flex; width: 100%; height: min(710px, calc(100vh - 105px)); min-width: 0; grid-column: 2; flex-direction: column; padding: 27px 30px 24px; overflow: hidden; color: #213857; border: 2px solid #2563eb; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgb(15 42 78 / 30%); }
.quick-help-header { display: grid; grid-template-columns: 43px minmax(0, 1fr) 34px; align-items: center; gap: 13px; }.quick-help-icon { display: grid; width: 43px; height: 43px; place-items: center; color: #fff; border-radius: 10px; background: #2563eb; box-shadow: 0 8px 18px rgb(37 99 235 / 24%); font-size: 24px; }.quick-help-header h2 { margin: 0; color: #213857; font-size: 22px; line-height: 1.2; }.quick-help-close { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; color: #60748e; border: 1px solid #d3deec; border-radius: 8px; background: #f5f8fc; font-size: 19px; cursor: pointer; }.quick-help-close:hover { color: #1d4ed8; border-color: #96b7e9; background: #eaf2ff; }
.quick-help-entry { display: grid; min-height: 0; flex: 1; grid-template-rows: auto auto minmax(180px, 1fr); margin-top: 25px; overflow-y: auto; }.quick-help-entry h3 { margin: 0; color: #245f9b; font-size: 20px; line-height: 1.25; }.quick-help-entry > p { margin: 13px 0 0; color: #344764; font-size: 14px; line-height: 1.55; }
.quick-help-media { position: relative; display: grid; min-height: 0; margin: 22px 0 0; overflow: hidden; place-items: center; border: 2px solid #315d82; border-radius: 16px; background: #edf2f7; }.quick-help-media img { display: block; width: 100%; height: 100%; object-fit: contain; background: #f8fbff; }.quick-help-image-placeholder { display: grid; place-items: center; gap: 9px; color: #718299; font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }.quick-help-image-placeholder i { font-size: 40px; font-weight: 400; }.quick-help-media img[hidden], .quick-help-image-placeholder[hidden] { display: none; }
.quick-help-navigation { display: grid; width: 48px; height: 64px; place-items: center; padding: 0; color: #fff; border: 1px solid rgb(255 255 255 / 45%); border-radius: 13px; background: rgb(37 99 235 / 88%); box-shadow: 0 10px 25px rgb(15 42 78 / 22%); font-size: 34px; cursor: pointer; }.quick-help-navigation:hover { border-color: #fff; background: #1d4ed8; transform: scale(1.04); }.quick-help-navigation.previous { grid-column: 1; }.quick-help-navigation.next { grid-column: 3; }.quick-help-counter { grid-column: 2; justify-self: center; color: #fff; font-size: 17px; font-weight: 850; text-shadow: 0 2px 8px rgb(15 23 42 / 45%); }
@media (max-width: 1100px) { .quick-help-viewer { left: 375px; grid-template-columns: 42px minmax(250px, 1fr) 42px; gap: 11px; }.quick-help-navigation { width: 42px; height: 58px; } }
@media (max-width: 900px) { .quick-help-viewer { z-index: 24; right: 12px; left: 12px; grid-template-columns: 42px minmax(250px, 720px) 42px; padding: 10px; border-radius: 18px; background: rgb(15 23 42 / 32%); backdrop-filter: blur(2px); }.quick-help-card { height: min(710px, calc(100vh - 80px)); } }
@media (max-width: 600px) { .quick-help-viewer { top: 12px; bottom: 12px; grid-template-columns: repeat(2, 44px); grid-template-rows: minmax(0, 1fr) 44px auto; align-content: center; transform: none; }.quick-help-card { width: 100%; height: 100%; grid-row: 1; grid-column: 1 / -1; padding: 21px 18px 18px; }.quick-help-navigation { width: 44px; height: 40px; font-size: 25px; }.quick-help-navigation.previous { grid-row: 2; grid-column: 1; }.quick-help-navigation.next { grid-row: 2; grid-column: 2; }.quick-help-counter { grid-row: 3; grid-column: 1 / -1; }.quick-help-entry { grid-template-rows: auto auto minmax(150px, 1fr); margin-top: 20px; }.quick-help-media { margin-top: 17px; } }

.intro-prompt-dialog { width: min(560px, calc(100vw - 32px)); padding: 30px; color: #1e4f87; border: 1px solid #8fb9e4; border-radius: 18px; background: #dcecff; box-shadow: 0 28px 75px rgb(15 42 78 / 34%); }.intro-prompt-dialog::backdrop { background: rgb(15 23 42 / 54%); backdrop-filter: blur(2px); }.intro-prompt-heading { display: flex; align-items: center; gap: 13px; }.intro-prompt-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: #fff; border-radius: 10px; background: #2563eb; box-shadow: 0 8px 20px rgb(37 99 235 / 25%); font-size: 20px; }.intro-prompt-dialog h2 { margin: 0; color: #213857; font-size: 21px; line-height: 1.2; }.intro-prompt-dialog p { margin: 19px 0 0; color: #345f8e; font-size: 15px; line-height: 1.55; }.intro-prompt-dialog p strong { display: inline-block; margin-bottom: 7px; color: #213857; font-size: 16px; }.intro-prompt-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }.intro-prompt-actions button { min-height: 50px; padding: 11px 15px; border-radius: 10px; font-weight: 800; cursor: pointer; }.intro-prompt-start { color: #fff; border: 1px solid #2563eb; background: #2563eb; }.intro-prompt-start:hover { background: #1d4ed8; }.intro-prompt-skip { color: #315982; border: 1px solid #b1c8e2; background: #fff; }.intro-prompt-skip:hover { color: #1d4ed8; border-color: #7fa9e9; background: #f4f8ff; }
.tour-blocker { position: fixed; z-index: 48; inset: 0; cursor: default; }
.tour-spotlight { position: fixed; z-index: 49; border: 4px solid #4f98d9; border-radius: 17px; box-shadow: 0 0 0 9999px rgb(15 23 42 / 53%), 0 0 0 7px rgb(147 197 253 / 28%); pointer-events: none; transition: top 180ms ease, left 180ms ease, width 180ms ease, height 180ms ease, border-radius 180ms ease; }
.tour-arrow { position: fixed; z-index: 50; width: 22px; height: 22px; border: 1px solid #72ade4; background: #3f88d4; transform: rotate(45deg); pointer-events: none; }
.tour-callout { position: fixed; z-index: 50; width: min(390px, calc(100vw - 30px)); max-height: calc(100vh - 30px); padding: 20px; overflow: auto; color: #fff; border: 1px solid #72ade4; border-radius: 17px; background: #3f88d4; box-shadow: 0 20px 45px rgb(15 42 78 / 32%); }.tour-callout-header { display: flex; align-items: center; }.tour-progress { color: #dbeeff; font-size: 10px; font-weight: 850; letter-spacing: .9px; text-transform: uppercase; }.tour-callout h2 { margin: 12px 0 0; color: #fff; font-size: 22px; line-height: 1.2; }.tour-callout p { margin: 10px 0 0; color: #f5faff; font-size: 14px; line-height: 1.55; }.tour-list { display: grid; gap: 5px; margin: 12px 0 0; padding-left: 20px; color: #fff; font-size: 13px; font-weight: 750; line-height: 1.4; }.tour-actions { display: flex; justify-content: flex-end; margin-top: 19px; }.tour-actions button { min-height: 39px; padding: 9px 14px; border-radius: 8px; font-size: 12px; font-weight: 800; cursor: pointer; }.tour-next { display: inline-flex; align-items: center; gap: 7px; color: #245c93; border: 1px solid #fff; background: #fff; }.tour-next:hover { color: #174b82; background: #eaf4ff; }.tour-next i { font-size: 15px; }
@media (max-width: 600px) { .intro-prompt-dialog { padding: 23px 20px; }.intro-prompt-actions { grid-template-columns: 1fr; }.tour-callout { padding: 17px; }.tour-callout h2 { font-size: 19px; }.tour-callout p { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .tour-spotlight { transition: none; } }

.tooltip { position: fixed; z-index: 30; max-width: 180px; padding: 7px 10px; color: #fff; border-radius: 6px; background: #17233b; box-shadow: 0 6px 16px rgb(15 23 42 / 22%); font-size: 12px; font-weight: 650; pointer-events: none; }
.connection-prompt { position: fixed; z-index: 8; top: 20px; left: 50%; margin: 0; padding: 9px 14px; transform: translateX(-50%); color: #8a5600; border: 1px solid #f3c66a; border-radius: 8px; background: rgb(255 249 232 / 96%); box-shadow: 0 6px 17px rgb(133 88 0 / 12%); font-size: 13px; font-weight: 750; pointer-events: none; }
.simulation-error-prompt { position: fixed; z-index: 7; top: 20px; left: 50%; margin: 0; padding: 9px 14px; transform: translateX(-50%); color: #991b1b; border: 1px solid #f19aa2; border-radius: 8px; background: rgb(255 241 242 / 97%); box-shadow: 0 6px 17px rgb(153 27 27 / 14%); font-size: 13px; font-weight: 750; pointer-events: none; }
@media (max-width: 650px) { .connection-prompt { top: 12px; font-size: 12px; } }
@media (max-width: 650px) { .simulation-error-prompt { top: 12px; max-width: calc(100vw - 190px); font-size: 12px; text-align: center; } }
.initial-probability-input { border-color: #9dbce8; background: #f3f8ff; }

.node { grid-template-rows: minmax(0, 1fr) auto; gap: 1px; align-content: center; }
.node-label { display: block; max-height: 30px; overflow: hidden; }
.node-initial-probability { display: block; opacity: .6; font-size: 10px; font-weight: 600; }
.initial-probability-input.invalid { border-color: #e76a78; background: #fff7f7; }

.node.simulating { color: var(--node-text-color, #1e3a6f); border-color: #f97316; background: var(--node-color, #fff); box-shadow: 0 0 0 5px rgb(249 115 22 / 28%), 0 10px 24px rgb(31 52 87 / 30%); }
.node.selected.simulating { border-color: #c026d3; box-shadow: 0 0 0 5px rgb(217 70 239 / 30%), 0 10px 24px rgb(31 52 87 / 30%); }
.node-value-editor input[type="text"] { width: 110px; }
.simulation-controls { position: fixed; z-index: 5; top: 18px; right: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.simulation-buttons { display: flex; gap: 7px; }
.simulation-controls .button { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border-radius: 50%; font-size: 25px; font-weight: 500; line-height: 1; }
.simulation-controls .button-secondary { background: rgb(255 255 255 / 94%); border: 1px solid #d6e1ef; box-shadow: 0 6px 18px rgb(31 52 87 / 10%); }
.simulation-controls .button-secondary:not(:disabled):hover { color: #1d4ed8; border-color: #96b7e9; background: #f4f8ff; }
.simulation-speed { display: flex; align-items: center; gap: 7px; padding: 8px 10px; color: #52647e; border: 1px solid #d6e1ef; border-radius: 9px; background: rgb(255 255 255 / 94%); box-shadow: 0 6px 18px rgb(31 52 87 / 10%); font-size: 11px; font-weight: 700; }
.simulation-speed input { width: 96px; accent-color: #2563eb; }
.simulation-speed output { min-width: 28px; color: #1e3a6f; font-weight: 750; text-align: right; }
.simulation-limit { display: grid; grid-template-columns: auto minmax(0, 1fr) 54px; align-items: center; gap: 7px; width: 100%; padding: 7px 9px; color: #52647e; border: 1px solid #d6e1ef; border-radius: 9px; background: rgb(255 255 255 / 94%); box-shadow: 0 6px 18px rgb(31 52 87 / 10%); font-size: 11px; font-weight: 700; }.simulation-limit input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: #2563eb; cursor: pointer; }.simulation-limit input[type="number"] { width: 54px; padding: 4px 5px; color: #1e3a6f; border: 1px solid #c5d3e5; border-radius: 5px; outline: none; background: #fff; font-size: 11px; font-weight: 750; text-align: center; }.simulation-limit input[type="number"]:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgb(37 99 235 / 15%); }.simulation-limit input[type="number"]:disabled { color: #96a3b4; border-color: #dce4ee; background: #edf1f6; cursor: not-allowed; }
.simulation-time { align-self: center; color: #52647e; font-size: 12px; font-weight: 750; }
@media (max-width: 650px) { .simulation-controls { top: 12px; right: 12px; }.simulation-controls .button { width: 38px; height: 38px; } }
.clear-chain-dialog { width: min(390px, calc(100vw - 32px)); padding: 22px; color: #213857; border: 1px solid #d7e0ec; border-radius: 12px; background: #fff; box-shadow: 0 22px 55px rgb(31 52 87 / 28%); }
.clear-chain-dialog::backdrop { background: rgb(23 35 59 / 42%); backdrop-filter: blur(2px); }
.clear-chain-dialog h2 { margin: 0 0 8px; font-size: 18px; }
.clear-chain-dialog p { margin: 0; color: #64748b; font-size: 13px; line-height: 1.5; }
.clear-chain-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.clear-chain-actions button { padding: 8px 12px; border: 0; border-radius: 7px; font-weight: 700; cursor: pointer; }
.clear-chain-cancel { color: #52647e; background: #eef2f7; }
.clear-chain-cancel:hover { background: #e2e8f0; }
.clear-chain-confirm { color: #fff; background: #dc2626; }
.clear-chain-confirm:hover { background: #b91c1c; }
.history-panel { max-height: min(470px, calc(100% - 40px)); }
.history-empty { margin: 14px 0 0; color: #64748b; font-size: 12px; line-height: 1.5; }
.history-scroll { max-height: 355px; margin-top: 12px; padding-right: 4px; overflow-y: auto; }
.history-list { display: grid; gap: 8px; }
.history-entry { padding: 9px 10px; border: 1px solid #dbe5f1; border-radius: 8px; background: #f8fbff; }
.history-time { color: #64748b; font-size: 10px; font-weight: 800; white-space: nowrap; }
.history-transition { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 7px; }
.history-state { display: flex; min-width: 0; align-items: center; gap: 6px; color: #344764; font-size: 11px; font-weight: 750; }
.history-state > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-state-color { flex: 0 0 auto; width: 13px; height: 13px; border: 1px solid #92a6c3; border-radius: 50%; background: var(--history-state-color, #fff); }
.history-probability { display: flex; align-items: center; gap: 4px; color: #2563eb; font-size: 10px; font-weight: 800; }
.history-probability i { font-size: 15px; }
.visualization-panel { max-height: min(500px, calc(100% - 40px)); }
.visualization-tabs { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; }
.visualization-tab { padding: 7px 10px; color: #52647e; border: 1px solid #d6e1ef; border-radius: 7px; background: #f7faff; font-size: 11px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.visualization-tab.active { color: #fff; border-color: #2563eb; background: #2563eb; }
.visualization-empty { margin: 16px 0 0; color: #64748b; font-size: 12px; line-height: 1.5; }
.visualization-chart-scroll { max-height: 360px; margin-top: 10px; overflow: auto; }
#visit-frequency-chart { display: block; width: 100%; min-width: 320px; }
#state-time-chart { display: block; min-width: 340px; }
#visit-frequency-chart[hidden], #state-time-chart[hidden] { display: none; }
.visualization-axis { color: #64748b; font-size: 10px; }
.visualization-axis .domain, .visualization-axis line { stroke: #cbd9e6; }
.visualization-axis text { fill: #52647e; }
.visualization-axis-title { fill: #64748b; font-size: 10px; font-weight: 700; }
.visualization-grid .domain { display: none; }
.visualization-grid line { stroke: #e4ebf4; stroke-dasharray: 2 3; }
.state-time-line { fill: none; stroke: #2563eb; stroke-linejoin: round; stroke-width: 2.5; }
.state-time-point { stroke: #31527e; stroke-width: 1.25; }
.visit-frequency-bar { stroke: #8da3bf; stroke-width: 1; }
.visit-frequency-value { fill: #344764; font-size: 10px; font-weight: 800; }
.panel-show-buttons { position: absolute; z-index: 3; right: 20px; bottom: 20px; display: flex; max-width: calc(100% - 40px); flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.panel-show-buttons.hidden { display: none; }
.panel-show-buttons .matrix-show-button { position: static; }
@media (max-width: 650px) { .panel-show-buttons { right: 12px; bottom: 12px; } }

.transfer-dialog, .prebuilt-dialog { position: fixed; z-index: 23; top: 50%; right: auto; bottom: auto; left: calc(50% + 180px); max-width: calc(100vw - 404px); margin: 0; transform: translate(-50%, -50%); border: 2px solid #2563eb; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgb(15 42 78 / 30%); }
.transfer-dialog { width: min(650px, calc(100vw - 32px)); max-height: min(710px, calc(100vh - 105px)); padding: 0; overflow: auto; color: #213857; }
.transfer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 26px 0; }
.transfer-heading { display: flex; min-width: 0; align-items: center; gap: 13px; }
.transfer-heading-icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; color: #fff; border-radius: 11px; background: #2563eb; box-shadow: 0 8px 18px rgb(37 99 235 / 24%); font-size: 20px; }
.transfer-kicker { margin: 0 0 3px; color: #2563eb; font-size: 10px; font-weight: 800; letter-spacing: .9px; }
.transfer-header h2 { margin: 0; color: #213857; font-size: 21px; line-height: 1.2; }
.transfer-close { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; padding: 0; color: #64748b; border: 0; border-radius: 7px; background: #edf2f7; font-size: 17px; cursor: pointer; }
.transfer-close:hover { color: #1e3a6f; background: #e0e8f2; }
.transfer-description { margin: 5px 0 0; color: #64748b; font-size: 12px; line-height: 1.45; }
.transfer-section { padding: 0 26px; }
.transfer-header + .transfer-section { margin-top: 22px; }
.transfer-section-title { display: grid; grid-template-columns: auto auto minmax(30px, 1fr); align-items: center; gap: 9px; margin-bottom: 15px; }
.transfer-section-title span { display: grid; width: 25px; height: 25px; place-items: center; color: #2563eb; border-radius: 50%; background: #e8f0ff; font-size: 9px; font-weight: 850; }
.transfer-section-title h3 { margin: 0; color: #31527e; font-size: 14px; font-weight: 800; }
.transfer-section-title div { height: 1px; background: #d9e4f2; }
.transfer-name-label { display: block; margin-bottom: 7px; color: #344764; font-size: 12px; font-weight: 750; }
.transfer-name-input { width: 100%; padding: 11px 12px; color: #213857; border: 1px solid #b9c9dc; border-radius: 8px; outline: none; background: #fbfdff; font: inherit; font-size: 14px; }
.transfer-name-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgb(37 99 235 / 14%); background: #fff; }
.transfer-export-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.transfer-primary-action { display: flex; align-items: center; border: 0; border-radius: 9px; cursor: pointer; }
.transfer-primary-action { gap: 11px; min-height: 61px; padding: 11px 14px; color: #fff; background: #2563eb; text-align: left; box-shadow: 0 8px 18px rgb(37 99 235 / 18%); }
.transfer-primary-action:hover:not(:disabled) { background: #1d4ed8; transform: translateY(-1px); }
.transfer-primary-action:disabled { color: #93a3b8; background: #e5eaf1; box-shadow: none; cursor: not-allowed; }
.transfer-primary-action > i { font-size: 22px; }
.transfer-primary-action span { display: grid; min-width: 0; gap: 2px; }
.transfer-primary-action strong { font-size: 13px; }
.transfer-primary-action small { color: rgb(255 255 255 / 72%); font-size: 10px; }
.transfer-primary-action:disabled small { color: #9aa8ba; }
.transfer-import-section { margin-top: 20px; padding-top: 0; }
.transfer-import-primary-action { width: 100%; }
.transfer-status { min-height: 18px; margin: 13px 26px 19px; color: #087a68; font-size: 11px; font-weight: 700; }
.transfer-status.error { color: #b42332; }
@media (max-width: 520px) { .transfer-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }.transfer-header { padding: 20px 18px 0; }.transfer-heading { align-items: flex-start; }.transfer-section { padding-right: 18px; padding-left: 18px; }.transfer-export-actions { grid-template-columns: 1fr; }.transfer-import-section { margin-top: 20px; padding-top: 0; }.transfer-status { margin-right: 18px; margin-left: 18px; } }

.prebuilt-dialog { width: min(760px, calc(100vw - 32px)); max-height: min(710px, calc(100vh - 105px)); padding: 0; overflow: auto; color: #213857; }
.prebuilt-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 25px 26px 20px; }
.prebuilt-heading { display: flex; min-width: 0; align-items: center; gap: 13px; }
.prebuilt-heading-icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; color: #fff; border-radius: 11px; background: #2563eb; box-shadow: 0 8px 18px rgb(37 99 235 / 24%); font-size: 20px; }
.prebuilt-heading h2 { margin: 0; color: #213857; font-size: 21px; line-height: 1.2; }
.prebuilt-heading p { margin: 5px 0 0; color: #64748b; font-size: 12px; line-height: 1.45; }
.prebuilt-close { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; padding: 0; color: #64748b; border: 0; border-radius: 7px; background: #edf2f7; font-size: 17px; cursor: pointer; }
.prebuilt-close:hover { color: #1e3a6f; background: #e0e8f2; }
.prebuilt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 26px 26px; }
.prebuilt-card { position: relative; display: grid; min-height: 122px; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 10px 13px; align-items: start; padding: 17px; overflow: hidden; color: #263f63; border: 1px solid #cbd9ec; border-radius: 12px; outline: none; background: #f8fbff; box-shadow: inset 4px 0 0 var(--prebuilt-accent, #2563eb); text-align: left; cursor: pointer; }
.prebuilt-card:hover { border-color: var(--prebuilt-accent, #2563eb); background: #fff; box-shadow: inset 4px 0 0 var(--prebuilt-accent, #2563eb), 0 9px 22px rgb(31 52 87 / 12%); transform: translateY(-1px); }
.prebuilt-card:focus-visible { border-color: var(--prebuilt-accent, #2563eb); box-shadow: inset 4px 0 0 var(--prebuilt-accent, #2563eb), 0 0 0 3px rgb(37 99 235 / 16%); }
.prebuilt-card-icon { display: grid; width: 46px; height: 46px; grid-row: 1 / span 2; place-items: center; color: var(--prebuilt-accent, #2563eb); border-radius: 12px; background: #eaf1fb; font-size: 23px; }
.prebuilt-card-content { display: grid; min-width: 0; gap: 5px; }
.prebuilt-card-content strong { color: #213857; font-size: 15px; line-height: 1.25; }
.prebuilt-card-content small { color: #64748b; font-size: 11px; line-height: 1.4; }
.prebuilt-card-count { justify-self: start; padding: 4px 8px; color: var(--prebuilt-accent, #2563eb); border-radius: 999px; background: #eaf1fb; font-size: 10px; font-weight: 800; }
@media (max-width: 650px) { .prebuilt-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }.prebuilt-header { padding: 20px 18px 17px; }.prebuilt-heading { align-items: flex-start; }.prebuilt-grid { grid-template-columns: 1fr; padding: 0 18px 20px; }.prebuilt-card { min-height: 112px; } }
@media (max-width: 900px) { .transfer-dialog, .prebuilt-dialog { z-index: 24; left: 50%; max-width: calc(100vw - 24px); } }