:root{--bg:#f1f6fb;--panel:#fff;--ink:#1f2937;--ink-soft:#4b5563;--border:#c7d8ec;--accent:#2563eb;--accent-strong:#1e40af;--accent-soft:#dbeafe;--accent-softest:#eff6ff;--danger:#b91c1c;--shadow:0 8px 18px #0f172a14;--sans:"Avenir Next", "Trebuchet MS", "Gill Sans", "Segoe UI", system-ui, sans-serif;--display:"Avenir Next", "Trebuchet MS", "Segoe UI", system-ui, sans-serif}*,:before,:after{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);color:var(--ink);font-family:var(--sans)}#app{min-height:100svh}h1,h2,h3{font-family:var(--display);margin:0}p{margin:0}.eyebrow{color:#4f71a3;text-transform:uppercase;letter-spacing:.08em;margin:0;font-size:.76rem;font-weight:700}.landing-shell{place-items:center;min-height:100svh;padding:24px;display:grid}.landing-panel{border:1px solid var(--border);width:min(760px,100%);box-shadow:var(--shadow);background:#fff;border-radius:14px;padding:clamp(18px,4vw,32px)}.landing-panel h1{margin-top:8px;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.12}.lead{color:var(--ink-soft);max-width:68ch;margin-top:10px}.landing-form{gap:14px;margin-top:24px;display:grid}.landing-form label{gap:6px;font-size:.93rem;font-weight:700;display:grid}.landing-form input,.add-link-form input{width:100%;color:var(--ink);font-size:.95rem;font-family:var(--sans);background:#fff;border:1px solid #bcd0e9;border-radius:10px;padding:10px 12px}.landing-form input:focus-visible,.add-link-form input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.field-error,.form-error{color:var(--danger);margin-top:6px;font-size:.84rem}.primary-btn,.ghost-btn,.restart-btn,.story-btn{font-family:var(--sans);cursor:pointer;border:1px solid #0000;border-radius:10px;font-size:.9rem;font-weight:700;transition:transform .12s,box-shadow .12s,background-color .12s,border-color .12s,color .12s}.primary-btn{background:var(--accent);color:#fff;border-color:#1d4ed8;width:fit-content;margin-top:6px;padding:10px 16px}.primary-btn:hover:not(:disabled),.ghost-btn:hover:not(:disabled),.restart-btn:hover:not(:disabled),.story-btn:hover:not(:disabled){transform:translateY(-1px)}.primary-btn:hover:not(:disabled){background:#1d4ed8;box-shadow:0 6px 14px #2563eb33}.primary-btn:disabled,.ghost-btn:disabled,.restart-btn:disabled,.story-btn:disabled{opacity:.65;cursor:wait}.canvas-screen{min-height:100svh;position:relative;overflow:hidden}.canvas-controls{z-index:12;pointer-events:none;gap:8px;width:min(860px,100vw - 24px);display:grid;position:absolute;top:12px;left:50%;transform:translate(-50%)}.add-link-form{pointer-events:auto;box-shadow:var(--shadow);background:#ffffffe6;border:1px solid #bed4eef2;border-radius:14px;grid-template-columns:minmax(190px,1fr) auto auto;align-items:center;gap:8px;padding:10px;display:grid}.add-link-form input{background:#fff;min-width:0}.add-link-form input.input-error{background:#fffdfd;border-color:#fca5a5}.ghost-btn{color:var(--accent-strong);background:#eef4ff;border-color:#b8cef0;padding:9px 12px}.ghost-btn:hover:not(:disabled){background:#e2ecff;box-shadow:0 5px 12px #3b82f626}.restart-btn{color:#466186;background:#f8fbff;border-color:#bdd2ee;padding:9px 12px}.restart-btn:hover:not(:disabled){color:var(--accent-strong);border-color:#93c5fd;box-shadow:0 5px 12px #60a5fa1f}.canvas-workspace{min-height:100svh;position:relative}.workspace-loading{z-index:20;text-align:center;pointer-events:auto;cursor:wait;background:linear-gradient(#ffffff80,#f1f6fba8);place-content:center;gap:10px;display:grid;position:absolute;inset:0}.workspace-loading p{color:#1e3a8a;margin:0;font-size:.92rem;font-weight:700}.loading-spinner{border:3px solid #bfdbfe;border-top-color:#1d4ed8;border-radius:999px;width:36px;height:36px;margin:0 auto;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.whiteboard-stage{background:#f9fcff;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 0 0 1px #dbe7f5}.whiteboard-grid{pointer-events:none;--grid-size:34px;--grid-offset-x:0px;--grid-offset-y:0px;background-image:linear-gradient(90deg,#60a5fa1f 1px,#0000 1px),linear-gradient(#60a5fa1f 1px,#0000 1px);background-size:var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);background-position:var(--grid-offset-x) var(--grid-offset-y), var(--grid-offset-x) var(--grid-offset-y);position:absolute;inset:0}.graph-canvas{z-index:1;position:absolute;inset:0}.force-svg{cursor:grab;width:100%;height:100%}.force-svg:active{cursor:grabbing}.graph-link{stroke:#bfd2ea;stroke-width:2.2px;stroke-linecap:round}.graph-link.active{stroke:var(--accent);stroke-width:3.4px}.graph-link.dimmed{opacity:.14!important}.graph-node{cursor:pointer}.graph-node .node-circle{fill:#fff;stroke:#9db9de;stroke-width:2px}.graph-node.user .node-circle{stroke-width:3.1px;filter:drop-shadow(0 0 .22rem #ea580c2e)}.graph-node.middle .node-circle{fill:#f8fbff;stroke:#c0d3ea}.graph-node.start .node-circle,.graph-node.end .node-circle{fill:#fff7ed;stroke:#ea580c}.graph-node.provided .node-circle{fill:#fff7ed;stroke:#ea580c;stroke-width:2.8px}.graph-node .node-label{fill:#1f2937;pointer-events:none;letter-spacing:.01em;font-size:10.5px;font-weight:700}.graph-node .node-label-bg{fill:#fffffff2;stroke:#c7d6ea;stroke-width:1px}.graph-node.user .node-label-bg{stroke-width:1.5px;fill:#fff7edf2;stroke:#fb923c}.graph-node.user .node-label,.graph-node.provided .node-label{fill:#9a3412}.graph-node.provided .node-label-bg{fill:#fff7edf5;stroke:#fb923c}.graph-node.active .node-circle{stroke:var(--accent);stroke-width:3.2px}.graph-node.provided.active .node-circle,.graph-node.user.active .node-circle{stroke:#c2410c;stroke-width:3.6px}.graph-node.active .node-label-bg{stroke:#93c5fd}.graph-node.user.active .node-label-bg{stroke:#fb923c}.graph-node.selected .node-circle{fill:var(--accent-soft);stroke:var(--accent-strong);stroke-width:4px}.graph-node.selected .node-label-bg{fill:#eff6ff;stroke:#60a5fa}.graph-node.provided.selected .node-circle,.graph-node.user.selected .node-circle{fill:#ffedd5;stroke:#9a3412}.graph-node.provided.selected .node-label-bg,.graph-node.user.selected .node-label-bg{fill:#fff7ed;stroke:#f97316}.graph-node.dimmed{opacity:.2!important}.wiki-pane{z-index:6;width:min(400px,100vw - 24px);box-shadow:var(--shadow);background:#ffffffed;border:1px solid #f0cfb6;border-radius:14px;grid-template-rows:auto auto minmax(0,1fr);padding:12px;display:grid;position:absolute;top:104px;bottom:12px;left:clamp(10px,2vw,16px);overflow:hidden}.wiki-pane:before{content:"";pointer-events:none;background:#ffedd5eb;border:1px solid #f7d5bc;border-radius:8px;width:76px;height:18px;display:none;position:absolute;top:8px;left:24px;transform:rotate(-2deg)}.wiki-pane h2{color:#9a3412;font-size:1.08rem}#wiki-pane-body{height:100%;min-height:0}.wiki-frame{background:#fff;border:1px solid #f0cfb6;border-radius:10px;width:100%;height:100%}.path-panel{z-index:6;width:min(360px,100vw - 20px);box-shadow:var(--shadow);background:#ffffffed;border:1px solid #c9dbef;border-radius:14px;padding:14px 12px 12px;position:absolute;top:104px;bottom:12px;right:clamp(10px,2vw,16px);overflow:hidden}.path-panel:before{content:"";pointer-events:none;background:#eff6ffeb;border:1px solid #d3e3f5;border-radius:8px;width:78px;height:18px;display:none;position:absolute;top:8px;left:32px;transform:rotate(-3deg)}.path-panel-inner{z-index:1;height:100%;padding-right:2px;position:relative;overflow:auto}.path-panel h2{color:var(--accent-strong);font-size:1.15rem}.panel-subtitle{color:#50688a;margin-top:7px;font-size:.88rem}.panel-error{color:var(--danger);background:#fff5f5;border:1px solid #fecaca;border-radius:9px;margin-top:8px;padding:8px 10px;font-size:.84rem}.panel-empty{color:var(--ink-soft);margin-top:12px;font-size:.88rem}.selection-actions{flex-wrap:wrap;gap:8px;margin-top:11px;display:flex}.selection-link-btn{justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.selection-hint{color:#64748b;margin-top:8px;font-size:.78rem}.is-hidden{display:none!important}.path-list{gap:10px;margin:12px 0 0;padding:0;list-style:none;display:grid}.path-card{background:#fff;border:1px solid #c8daf0;border-left:4px solid #60a5fa;border-radius:10px;padding:11px 11px 10px;box-shadow:0 4px 10px #0f172a0f}.path-card:nth-child(2n){border-left-color:#3b82f6}.path-title{color:#0f172a;font-weight:700}.path-meta{color:#1e40af;margin-top:5px;font-size:.82rem}.path-sequence{color:var(--ink-soft);flex-wrap:wrap;align-items:center;gap:6px;margin-top:9px;font-size:.8rem;display:flex}.arrow{color:var(--accent)}.story-btn{background:var(--accent-soft);color:var(--accent-strong);border-color:#93c5fd;margin-top:10px;padding:6px 10px}.story-btn:hover:not(:disabled){background:#bfdbfe;box-shadow:0 5px 12px #3b82f629}.modal-overlay{z-index:30;background:#0f172a5c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.story-modal{background:#fff;border:1px solid #d2e3f8;border-radius:18px;flex-direction:column;gap:12px;width:min(760px,100%);max-height:min(88vh,900px);padding:16px;display:flex;box-shadow:0 16px 32px #0f172a38}.story-modal:before{content:none;display:none}.story-header{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.story-modal h3{margin-top:3px;font-size:1.25rem;line-height:1.2}.story-meta{color:var(--accent-strong);margin-top:5px;font-size:.88rem;font-weight:700}.story-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.story-source{color:#6b7280;text-transform:uppercase;letter-spacing:.04em;margin:0;font-size:.75rem;font-weight:700}.story-error{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;margin:0;padding:8px 10px;font-size:.85rem}.story-body{color:#1f2937;background:#f8fbff;border:1px solid #d8e5f5;border-radius:10px;min-height:120px;max-height:min(54vh,460px);margin-top:0;padding:12px;line-height:1.55;overflow:auto}.story-body p{margin:0 0 .72rem}.story-body p:last-child{margin-bottom:0}.story-loading{color:#1e40af;margin:0 0 .72rem;font-size:.82rem;font-weight:700}.story-body h1,.story-body h2,.story-body h3{color:#0f172a;margin:.95rem 0 .55rem}.story-body ul,.story-body ol{margin:0 0 .8rem 1.25rem;padding:0}.story-body li+li{margin-top:.22rem}.story-body blockquote{color:#334155;background:#eff6ff;border-left:3px solid #93c5fd;margin:0 0 .9rem;padding:.48rem .68rem}.story-body code{color:#0f172a;background:#e5eefb;border-radius:5px;padding:.08rem .28rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.9em}.story-body pre{background:#edf4ff;border:1px solid #d0dcf0;border-radius:8px;margin:0 0 .9rem;padding:.72rem;overflow-x:auto}.story-body pre code{background:0 0;padding:0}.close-modal{color:#486486;cursor:pointer;background:#eef5ff;border:1px solid #bfd2eb;border-radius:999px;width:34px;height:34px;font-size:1.28rem;line-height:1}.close-modal:hover{color:var(--accent-strong);border-color:#93c5fd}@media (width<=980px){.canvas-controls{width:calc(100vw - 20px);top:10px}.add-link-form{grid-template-columns:1fr auto auto}.canvas-workspace{min-height:680px}.path-panel{width:auto;height:min(250px,42vh);inset:auto 10px 10px}.wiki-pane{width:min(300px,100vw - 20px);height:min(230px,32vh);top:108px;bottom:auto;left:10px}}@media (width<=700px){.landing-shell{padding:14px}.landing-panel h1{font-size:1.52rem}.add-link-form{grid-template-columns:1fr;gap:6px}.add-link-form .ghost-btn,.add-link-form .restart-btn{width:100%}.canvas-workspace{min-height:760px}.selection-actions .ghost-btn,.selection-link-btn{flex:140px}.wiki-pane{width:auto;height:min(210px,30vh);top:116px;left:10px;right:10px}.path-panel{width:auto;height:min(280px,42vh);inset:auto 10px 10px}}