:root { --accent: #a0395a; --story: 'Lora', Georgia, serif; }
.toolbar { display: flex; gap: 8px; align-items: center; padding: 10px 24px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.toolbar #premise { flex: 1; min-width: 220px; max-width: 560px; }
.toolbar .sep { flex: 1; }
.studio { height: calc(100vh - 150px); min-height: 460px; display: grid; grid-template-columns: minmax(0, 1fr) 430px; }
#graph { width: 100%; height: 100%; cursor: grab; background: radial-gradient(circle, var(--line) 1px, transparent 1px) 0 0 / 24px 24px; touch-action: none; }
.gnode { cursor: pointer; }
.gnode rect { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.gnode.sel rect { stroke: var(--accent); stroke-width: 3; }
.gnode.root rect { stroke: var(--accent); }
.gnode.ending rect { fill: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.gnode text { font: 600 12px Inter, sans-serif; fill: var(--text); pointer-events: none; }
.gnode .sub { font: 400 10px Inter, sans-serif; fill: var(--muted); }
.gnode .open { fill: var(--warn); }
.gedge { fill: none; stroke: var(--muted); stroke-opacity: .5; stroke-width: 1.6; }
.gedge.dangling { stroke: var(--warn); stroke-dasharray: 4 4; stroke-opacity: .8; }
.editor { border-radius: 0; border-width: 0 0 0 1px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.editor textarea { font-family: var(--story); font-size: 16px; line-height: 1.6; min-height: 200px; }
.choice { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.choice .input { padding: 6px 8px; font-size: 13px; }
.reader { padding: 40px 24px; }
.reader .story-page { max-width: 680px; margin: 0 auto; font-family: var(--story); font-size: 20px; line-height: 1.75; }
.reader .story-page h2 { font-family: var(--story); font-size: 28px; }
.reader .choices { display: grid; gap: 10px; margin-top: 26px; font-family: Inter, sans-serif; }
.reader .choices .btn { justify-content: flex-start; padding: 12px 16px; font-size: 16px; }
.reader .crumbs { font: 12px Inter, sans-serif; color: var(--muted); margin-bottom: 18px; }
.issues li { margin-bottom: 8px; }
@media (max-width: 900px) { .studio { grid-template-columns: 1fr; grid-template-rows: 45vh auto; height: auto; } }
.toolbar-title { font-size: 15px; }
.editor .tabs { margin-bottom: 4px; }
.choice-card { border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: grid; gap: 6px; background: var(--panel-2); }
.choice-card .logic { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.choice-card .logic input { font: 12px var(--mono); padding: 5px 7px; }
.choice-card .logic input.bad { border-color: var(--bad); }
.var-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; }
.var-row input { font: 13px var(--mono); padding: 5px 7px; }
.vars-strip { font: 12px var(--mono); color: var(--muted); margin-bottom: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.an-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.an-row a { cursor: pointer; }
.story-card { display: flex; flex-direction: column; gap: 8px; }
.story-card h2 { margin: 0; font-size: 17px; font-family: var(--story); }
.story-card.cur { border-color: var(--accent); }
.gnode.closed text { opacity: .55; }