/* Prompt Studios cube. All tokens and rules are scoped to this section. */
.dc-section {
 --dc-bg:#0f1419; --dc-surface:#121a22; --dc-card:#1b2631; --dc-card-back:#141e27;
 --dc-border:#596c7b; --dc-line:#334351; --dc-text:#e4edf3; --dc-muted:#b0c1ce;
 --dc-soft:#9bb1c1; --dc-accent:#b7e3d2; --dc-accent-ink:#14221e; --dc-signal:#c5d6e3; --dc-dot:#90aabd;
 --dc-font:'DM Sans',Arial,sans-serif; --dc-mono:'SFMono-Regular',Consolas,monospace;
 --dc-ease-out:cubic-bezier(.23,1,.32,1); width:100%; min-width:0; color:var(--dc-text); font-family:var(--dc-font);
}
.dc-section *, .dc-section *::before, .dc-section *::after { box-sizing:border-box; }
.dc-section p,.dc-section h2 {margin:0;}
.dc-section button {cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
.dc-section [hidden] {display:none!important;}
.dc-section button:focus-visible {outline:2px solid var(--dc-accent);outline-offset:4px;}
.dc-section .dc-sr-only {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
.dc-toolbar {display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:54px;}
.dc-toolbar>p {font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dc-muted);}
.dc-section .dc-pause {display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:0 4px;border:0;background:transparent;color:var(--dc-muted);font-family:var(--dc-font);font-size:.75rem;}
.dc-pause-icon {display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--dc-border);border-radius:50%;font-size:.625rem;}
.dc-section .dc-svg {width:auto;height:auto;max-width:none;fill:none;stroke:none;stroke-linecap:butt;stroke-linejoin:miter;}
.dc-section .dc-hub img {outline:none;}
/* The graph occupies one surface; the result stays quiet at its edge. */
.dc-graph { position: relative; width: 100%; border: 1px solid var(--dc-border); border-radius: 12px; background: var(--dc-surface); isolation: isolate; }
.dc-canvas { position: relative; width: 100%; min-height: 400px; overflow: hidden; border-radius: 12px; cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; }
.dc-canvas.is-dragging { cursor: grabbing; }
.dc-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.dc-world.is-gliding { transition: transform 220ms var(--dc-ease-out); }
.dc-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.dc-edge { stroke: var(--dc-dot); stroke-width: .65; stroke-opacity: .24; fill: none; }
.dc-face { fill: var(--dc-signal); fill-opacity: .025; }
.dc-dot { fill: var(--dc-dot); }
.dc-dot.is-on { fill: var(--dc-accent); }
.dc-halo { fill: var(--dc-surface); }
.dc-spoke { fill: none; stroke: var(--dc-dot); stroke-width: 1; stroke-opacity: .7; stroke-dasharray: 3 5; }
.dc-spoke.is-on { stroke: var(--dc-accent); stroke-width: 1.4; stroke-opacity: 1; stroke-dasharray: 3 4; }
.dc-branch { fill: none; stroke: var(--dc-accent); stroke-width: 1; stroke-dasharray: 3 4; }
.dc-port { fill: var(--dc-surface); stroke: var(--dc-dot); stroke-width: 1.1; }
.dc-port.is-on { fill: var(--dc-accent); stroke: var(--dc-accent); }
.dc-port.is-leaf { fill: var(--dc-surface); stroke: var(--dc-accent); }
.dc-hub { position: absolute; left: 0; top: 0; z-index: 4; display: grid; place-items: center; width: 84px; height: 84px; border: 1px solid var(--dc-border); border-radius: 23px; background: var(--dc-bg); box-shadow: 0 8px 24px #00000026; pointer-events: none; }
.dc-hub-monogram { display: block; font-size: 3.75rem; line-height: 1; font-weight: 400; color: var(--dc-accent); transform: translateY(-1px); }
.dc-hub img { display: block; width: 58px; height: 58px; object-fit: contain; }
.dc-node, .dc-focus, .dc-example { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; width: max-content; white-space: nowrap; border: 1px solid var(--dc-border); background: var(--dc-card); color: var(--dc-text); }
.dc-node, .dc-focus { height: 40px; padding: 0 12px; border-radius: 6px; font-family: var(--dc-font); font-size: .875rem; font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.dc-node { z-index: 5; box-shadow: 0 3px 9px #0000001a; }
.dc-node::before, .dc-focus::before { content: ""; width: 5px; height: 5px; margin-right: 8px; border: 1px solid var(--dc-soft); border-radius: 50%; flex: none; }
.dc-node.is-back { background: var(--dc-card-back); color: var(--dc-muted); }
.dc-node[aria-pressed="true"], .dc-focus { border-color: var(--dc-accent); background: var(--dc-accent); color: var(--dc-accent-ink); box-shadow: 0 0 0 3px #b7e3d212, 0 6px 18px #00000026; }
.dc-node[aria-pressed="true"]::before, .dc-focus::before { border-color: currentColor; background: currentColor; }
.dc-node:focus-visible { outline-offset: 4px; }
.dc-focus { display: none; z-index: 6; }
.dc-example { z-index: 7; height: 28px; padding: 0 10px; border-color: var(--dc-border); border-radius: 4px; background: var(--dc-card); color: var(--dc-text); font-family: var(--dc-mono); font-size: .75rem; font-weight: 400; line-height: 1; letter-spacing: -.025em; pointer-events: none; }
.dc-pick { display: none; position: absolute; left: 0; top: 0; color: var(--dc-muted); font-family: var(--dc-mono); font-size: .6875rem; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }

.dc-controls { position: absolute; z-index: 20; left: 20px; top: 20px; display: flex; align-items: center; height: 34px; border: 1px solid var(--dc-border); border-radius: 5px; background: var(--dc-surface); cursor: default; }
.dc-controls button { display: inline-flex; align-items: center; justify-content: center; width: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--dc-muted); font-size: 1rem; line-height: 1; }
.dc-controls output { min-width: 48px; color: var(--dc-muted); text-align: center; font-family: var(--dc-mono); font-size: .6875rem; line-height: 1; font-variant-numeric: tabular-nums; }
.dc-controls button[aria-disabled="true"] { opacity: .55; }
.dc-controls .dc-reset { width: auto; margin-left: 3px; padding-inline: 12px; border-left: 1px solid var(--dc-border); border-radius: 0 4px 4px 0; color: var(--dc-text); font-size: .6875rem; }
.dc-controls button:focus-visible { outline-offset: 2px; }
.dc-caption { position: absolute; z-index: 2; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 8px; color: var(--dc-muted); font-family: var(--dc-mono); font-size: .625rem; line-height: 1.5; letter-spacing: .01em; pointer-events: none; }
.dc-caption > span:first-child { color: var(--dc-accent); font-family: var(--dc-font); font-size: .875rem; }
.dc-caption-divider { padding-inline: 4px; }
.dc-panel { position: absolute; z-index: 15; top: 24px; right: 24px; width: 252px; padding: 20px 18px 18px; border: 1px solid var(--dc-line); border-radius: 8px; background: var(--dc-bg); }
.dc-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--dc-muted); font-family: var(--dc-mono); font-size: .625rem; line-height: 1.5; letter-spacing: .065em; text-transform: uppercase; }
.dc-panel-top > :last-child { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.dc-panel h2 { margin-top: 12px; color: var(--dc-text); font-size: 1.375rem; font-weight: 500; line-height: 1.25; letter-spacing: -.025em; }
.dc-request-group { margin-top: 26px; }
.dc-field-label { color: var(--dc-muted); font-family: var(--dc-mono); font-size: .625rem; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; }
.dc-request { margin-top: 8px; color: var(--dc-text); font-size: .875rem; line-height: 1.55; overflow-wrap: break-word; }
.dc-result-group { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--dc-line); }
.dc-result-marker { margin-right: 3px; color: var(--dc-accent); }
.dc-result { margin-top: 8px; color: var(--dc-signal); font-size: .8125rem; line-height: 1.6; overflow-wrap: break-word; }
.dc-panel-note { margin-top: 26px; color: var(--dc-muted); font-family: var(--dc-mono); font-size: .625rem; line-height: 1.5; }
.dc-noscript { padding: 20px; color: var(--dc-muted); }
.dc-section-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 20px; color: var(--dc-muted); font-family: var(--dc-mono); font-size: .625rem; line-height: 1.6; letter-spacing: .015em; }
.dc-section-foot > p:first-child { display: flex; align-items: center; gap: 8px; }
.dc-foot-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--dc-accent); flex: none; }
.dc-site-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 64px; padding-block: 28px; border-top: 1px solid var(--dc-line); color: var(--dc-muted); font-family: var(--dc-mono); font-size: .625rem; line-height: 1.6; }


/* Modes respond to the section's measured width, including inside another page. */
.dc-graph[data-mode="stacked"] .dc-panel, .dc-graph[data-mode="branch"] .dc-panel { position: static; width: auto; margin: 0 20px 20px; }
.dc-graph[data-mode="stacked"] .dc-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; padding: 22px; }
.dc-graph[data-mode="stacked"] .dc-panel-top, .dc-graph[data-mode="stacked"] .dc-panel h2, .dc-graph[data-mode="stacked"] .dc-request-group, .dc-graph[data-mode="stacked"] .dc-panel-note { grid-column: 1; }
.dc-graph[data-mode="stacked"] .dc-result-group { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; padding-top: 0; padding-left: 24px; border-top: 0; border-left: 1px solid var(--dc-line); }
.dc-graph[data-mode="stacked"] .dc-request-group { margin-top: 18px; }
.dc-graph[data-mode="stacked"] .dc-panel-note { margin-top: 18px; }
.dc-graph[data-mode="branch"] .dc-canvas { cursor: default; touch-action: pan-y pinch-zoom; }
.dc-graph[data-mode="branch"] .dc-hub { width: 48px; height: 48px; border-radius: 13px; }
.dc-graph[data-mode="branch"] .dc-hub-monogram { font-size: 2.25rem; }
.dc-graph[data-mode="branch"] .dc-hub img { width: 32px; height: 32px; }
.dc-graph[data-mode="branch"] .dc-focus { display: inline-flex; }
.dc-graph[data-mode="branch"] .dc-pick { display: block; }
.dc-graph[data-mode="branch"] [data-cube-zoom], .dc-graph[data-mode="branch"] [data-cube-zoom-value], .dc-graph[data-mode="branch"] .dc-caption { display: none; }
.dc-graph[data-mode="branch"] .dc-controls .dc-reset { margin-left: 0; min-height: 34px; border-left: 0; border-radius: 4px; }
.dc-graph[data-mode="branch"] .dc-node { height: 44px; justify-content: flex-start; padding-inline: 12px; font-size: .8125rem; }
.dc-graph[data-mode="branch"] .dc-panel { margin-inline: 16px; padding: 20px; }
.dc-graph[data-mode="branch"] .dc-panel-note { margin-top: 20px; }
.dc-graph[data-mode="branch"] .dc-request-group { margin-top: 22px; }
.dc-graph[data-mode="branch"] .dc-result-group { margin-top: 20px; padding-top: 18px; }

@media (hover: hover) and (pointer: fine) {
  .dc-pause:hover { color: var(--dc-accent); }
  .dc-node[aria-pressed="false"]:hover { border-color: var(--dc-signal); background: #26323b; color: var(--dc-text); }
  .dc-controls button:not([aria-disabled="true"]):hover { background: #26323b; color: var(--dc-text); }
}

/* Quiet: flat labels, a fine lattice and an open result rail. */
.dc-graph[data-variant="quiet"] {border-radius:8px;border-color:var(--dc-line);}
.dc-graph[data-variant="quiet"] .dc-node {box-shadow:none;border-radius:3px;background:var(--dc-surface);}
.dc-graph[data-variant="quiet"] .dc-node[aria-pressed="true"] {background:var(--dc-accent);}
.dc-graph[data-variant="quiet"] .dc-hub {border-radius:8px;box-shadow:none;background:var(--dc-bg);}
.dc-graph[data-variant="quiet"] .dc-edge {stroke-opacity:.1;}
.dc-graph[data-variant="quiet"] .dc-panel {border:0;border-left:1px solid var(--dc-line);border-radius:0;background:transparent;padding-left:24px;}
.dc-graph[data-variant="quiet"] .dc-example {border-radius:2px;background:var(--dc-surface);}
/* Depth: denser faces, lit edges and visibly layered surfaces. */
.dc-graph[data-variant="depth"] {background:#111922;border-color:#465b6b;border-radius:16px;}
.dc-graph[data-variant="depth"] .dc-node {border-color:#718696;background:linear-gradient(#2b3b48,#202e39);box-shadow:0 3px 0 #0a1118,0 9px 16px #0005;border-radius:8px;}
.dc-graph[data-variant="depth"] .dc-node.is-back {background:#121c26;border-color:#445867;color:#b0c1ce;box-shadow:0 2px 0 #090e13;}
.dc-graph[data-variant="depth"] .dc-node[aria-pressed="true"] {background:var(--dc-accent);border-color:var(--dc-accent);color:var(--dc-accent-ink);box-shadow:0 3px 0 #658f7f,0 8px 24px #0004;}
.dc-graph[data-variant="depth"] .dc-hub {width:92px;height:92px;border-radius:24px;border-color:#849cab;background:linear-gradient(145deg,#314757,#15232d);box-shadow:0 4px 0 #0b1219,0 14px 35px #0006;}
.dc-graph[data-variant="depth"] .dc-face {fill-opacity:.035;}
.dc-graph[data-variant="depth"] .dc-dot:not(.is-on) {opacity:.68;}
.dc-graph[data-variant="depth"] .dc-edge {stroke-width:.8;stroke-opacity:.4;}
.dc-graph[data-variant="depth"] .dc-panel {background:#15212b;box-shadow:0 8px 20px #0002;border-radius:10px;}
/* Graphic: indexed labels, square forms and explicit corner registration. */
.dc-graph[data-variant="graphic"] {background:#10171d;border-radius:0;border-color:#788c99;}
.dc-graph[data-variant="graphic"] .dc-node {height:42px;padding-inline:10px;border-radius:0;box-shadow:none;font-size:.8125rem;font-weight:650;letter-spacing:0;}
.dc-graph[data-variant="graphic"] .dc-node::before {content:attr(data-index);width:16px;height:auto;border:0;border-radius:0;background:none;margin-right:8px;font-family:var(--dc-mono);font-size:.5625rem;font-weight:400;}
.dc-graph[data-variant="graphic"] .dc-node[aria-pressed="true"]::before {content:'↗';font-size:.8125rem;}
.dc-graph[data-variant="graphic"] .dc-node[aria-pressed="true"] {box-shadow:inset 0 -3px 0 #6d9d89;}
.dc-graph[data-variant="graphic"] .dc-hub {width:80px;height:80px;border-radius:0;border:2px solid var(--dc-accent);box-shadow:none;}
.dc-graph[data-variant="graphic"] .dc-example {border-radius:0;font-family:var(--dc-font);font-weight:500;letter-spacing:0;}
.dc-graph[data-variant="graphic"] .dc-corner {stroke:var(--dc-muted);stroke-width:1;fill:none;}
.dc-graph[data-variant="graphic"] .dc-edge {stroke-opacity:.2;stroke-dasharray:2 6;}
.dc-graph[data-variant="graphic"] .dc-panel {border-radius:0;border-top:3px solid var(--dc-accent);}
.dc-graph[data-variant="graphic"] .dc-panel h2 {font-weight:650;}
.dc-section .dc-node,.dc-section .dc-focus,.dc-section .dc-example {font-family:var(--dc-font);}
.dc-section .dc-panel h2 {font-family:'Manrope',Arial,sans-serif;}
.dc-section .dc-node {font-weight:500;}
.dc-section .dc-graph[data-variant="graphic"] .dc-node {font-weight:650;}
.dc-section .dc-panel-top,.dc-section .dc-field-label,.dc-section .dc-panel-note {font-size:.6875rem;}
.dc-section .dc-caption {font-size:.6875rem;white-space:nowrap;}
.dc-section .dc-panel-top {letter-spacing:.02em;}
.dc-section .dc-panel-top>span:first-child {max-width:160px;}
.dc-section .dc-controls button {font-family:var(--dc-font);}
.dc-section .dc-controls .dc-reset {font-size:.75rem;}
.dc-section .dc-hub-monogram {font-family:'Manrope',Arial,sans-serif;font-size:3rem;font-weight:650;color:var(--dc-text);}
.dc-section .dc-graph[data-mode="branch"] .dc-hub {width:48px;height:48px;border-radius:8px;}
.dc-section .dc-graph[data-mode="branch"] .dc-hub-monogram {font-size:1.75rem;}
.dc-section .dc-graph[data-mode="branch"] .dc-node {height:44px;font-size:.8125rem;}
.dc-section .dc-graph[data-mode="branch"] .dc-focus {font-size:.8125rem;}
.dc-section .dc-graph[data-mode="branch"] .dc-panel {border-left:0;border-top:1px solid var(--dc-line);padding:22px 4px 8px;}
.dc-section .dc-graph[data-mode="stacked"] .dc-panel {border-left:0;border-top:1px solid var(--dc-line);}
.dc-section .dc-graph[data-motion-paused="true"] *, .dc-section .dc-graph[data-motion-paused="true"] *::before {transition:none!important;animation:none!important;}
@media(prefers-reduced-motion:reduce) {.dc-section *, .dc-section *::before {transition:none!important;animation:none!important;}}
@media(forced-colors:active) {.dc-node[aria-pressed="true"],.dc-focus {outline:2px solid Highlight;}.dc-spoke,.dc-edge,.dc-branch,.dc-corner{stroke:CanvasText;}.dc-port,.dc-dot{fill:CanvasText;}}
/* Natural chip height also accommodates enlarged browser text. */
.dc-section .dc-example {height:auto;min-height:28px;padding-block:6px;}
.dc-section .dc-graph[data-mode="branch"][data-variant="graphic"] .dc-node {padding-inline:8px;}
.dc-section .dc-graph[data-mode="branch"][data-variant="graphic"] .dc-node::before {width:12px;margin-right:4px;font-size:.5rem;}

/* Signal choreography. Geometry carries the motion; text stays untransformed.
   Colours can be tuned per variant with --dc-motion-color / --dc-branch-color. */
.dc-section { --dc-motion-color:var(--dc-accent); --dc-branch-color:var(--dc-accent); }
.dc-section:has([data-variant="depth"]) { --dc-motion-color:#416e95; --dc-branch-color:#65836f; }
.dc-section .dc-dot.is-wave { fill:var(--dc-motion-color); }
.dc-section .dc-traveller { fill:none;stroke:var(--dc-motion-color);stroke-width:2;stroke-linecap:round; }
.dc-section .dc-signal-head { fill:var(--dc-motion-color); }
.dc-section .dc-branch-head { fill:var(--dc-branch-color); }
.dc-section .dc-playback {
 display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;
 position:relative;min-width:70px;min-height:32px;padding:0 9px;border:1px solid var(--dc-line);
 border-radius:20px;background:var(--dc-surface);color:var(--dc-muted);
 font:500 11px/1 var(--dc-font);transition:background-color 160ms var(--dc-ease-out),color 160ms var(--dc-ease-out);
}
.dc-section .dc-playback::after {content:"";position:absolute;inset:-6px 0;}
.dc-section .dc-playback svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;}
.dc-section .dc-playback-play {display:none;}
.dc-section .dc-playback[data-paused="true"] .dc-playback-play {display:block;fill:currentColor;stroke:none;}
.dc-section .dc-playback[data-paused="true"] .dc-playback-pause {display:none;}
.dc-section .dc-playback:disabled {cursor:default;opacity:.65;}
.dc-section .dc-playback:active {background:var(--dc-line);}
@media(hover:hover) and (pointer:fine) {.dc-section .dc-playback:not(:disabled):hover {color:var(--dc-text);background:var(--dc-bg);}}
@media(prefers-reduced-motion:reduce) {.dc-section [data-cube-signals] {display:none;}}
@media(forced-colors:active) {.dc-section .dc-traveller {stroke:Highlight;}.dc-section .dc-signal-head,.dc-section .dc-branch-head {fill:Highlight;}}

.dc-section .dc-hub-ripple {fill:none;stroke:var(--dc-motion-color);stroke-width:1;}