/* Northstar editorial v4: one natural modal scroll, complete scenes and compact records. */ #demo-dialog.is-northstar.is-storyboard { --ns-ink:#172b25; --ns-muted:#586960; --ns-line:#dce3dc; --ns-teal:#007f70; --ns-paper:#fafaf5; box-sizing:border-box; width:min(1180px,calc(100% - 32px)); height:auto; max-height:calc(100dvh - 32px); margin:auto; padding:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; border:1px solid #cad4cb; border-radius:7px; background:var(--ns-paper); color:var(--ns-ink); font-family:'Geist',Arial,sans-serif; box-shadow:0 24px 90px #051b1726; scroll-padding-top:68px; } #demo-dialog.is-northstar.is-storyboard[open] { display:block; } #demo-dialog.is-northstar.is-storyboard *,#demo-dialog.is-northstar.is-storyboard *::before,#demo-dialog.is-northstar.is-storyboard *::after { box-sizing:border-box; } #demo-dialog.is-northstar.is-storyboard :is(h2,h3,h4,p,span,small,strong,button,dt,dd,code) { word-break:normal; overflow-wrap:normal; hyphens:none; } #demo-dialog.is-northstar.is-storyboard #demo-title { position:sticky; top:0; z-index:10; min-height:60px; max-width:none; margin:0; padding:17px 78px 16px 24px; border-bottom:1px solid var(--ns-line); background:var(--ns-paper); color:var(--ns-ink); font-size:22px; line-height:1.2; font-weight:650; letter-spacing:-.045em; text-transform:none; } #demo-dialog.is-northstar.is-storyboard [data-close-demo] { position:sticky; top:8px; right:auto; bottom:auto; left:auto; float:right; z-index:20; display:grid; place-items:center; width:44px; height:44px; min-height:44px; margin:8px 12px 0 0; padding:0; border:1px solid transparent; border-radius:50%; background:var(--ns-paper); color:var(--ns-ink); font:29px/1 Arial,sans-serif; } #demo-dialog.is-northstar.is-storyboard [data-close-demo]:hover { border-color:var(--ns-line); background:#fff; } #demo-dialog.is-northstar.is-storyboard #demo-description,#demo-dialog.is-northstar.is-storyboard .demo-disclosure { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); border:0; white-space:nowrap; } #demo-dialog.is-northstar.is-storyboard #story-playback:not([hidden]) { display:contents; } #demo-dialog.is-northstar.is-storyboard #story-playback[hidden] { display:none; } #demo-dialog #story-caption[hidden] { display:none; } #demo-dialog.is-northstar.is-storyboard .story-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; padding:10px 24px; border:0; background:#fff; } #demo-dialog.is-northstar.is-storyboard .story-toolbar > div:first-child { display:block; min-width:0; } #demo-dialog.is-northstar.is-storyboard .story-kicker { color:var(--ns-muted); font:10px/1.5 var(--mono,monospace); letter-spacing:.075em; } #demo-dialog.is-northstar.is-storyboard .story-toolbar p { margin:3px 0 0; color:var(--ns-ink); font-size:13px; line-height:1.4; font-weight:500; letter-spacing:-.015em; } #demo-dialog.is-northstar.is-storyboard .story-transport { display:flex; align-items:center; flex-shrink:0; gap:15px; } #demo-dialog.is-northstar.is-storyboard #story-clock { color:var(--ns-muted); font:11px/1.4 var(--mono,monospace); font-variant-numeric:tabular-nums; white-space:nowrap; } #demo-dialog.is-northstar.is-storyboard [data-story-play] { min-height:44px; min-width:110px; padding:10px 15px; border:1px solid var(--ns-ink); border-radius:3px; background:var(--ns-ink); color:#fff; font-size:13px; font-weight:550; line-height:1.4; } #demo-dialog.is-northstar.is-storyboard [data-story-play]:hover { background:#24493c; } #demo-dialog.is-northstar.is-storyboard [data-story-play]:disabled { background:#eef1eb; border-color:var(--ns-line); color:var(--ns-muted); } #demo-dialog.is-northstar.is-storyboard .story-timeline { height:3px; background:#e2e8e0; } #demo-dialog.is-northstar.is-storyboard #story-meter { height:100%; background:#009e8c; } #demo-dialog.is-northstar.is-storyboard #story-scenes { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; min-width:0; height:auto; max-height:none; padding:0 14px; overflow:visible; border-bottom:1px solid var(--ns-line); background:#f3f5ee; } #demo-dialog.is-northstar.is-storyboard .story-scene { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; min-height:62px; margin:0; padding:11px 12px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--ns-muted); text-align:left; } #demo-dialog.is-northstar.is-storyboard .story-scene span { color:#637267; font:10px/1.4 var(--mono,monospace); letter-spacing:.025em; } #demo-dialog.is-northstar.is-storyboard .story-scene strong { color:inherit; font-size:13px; line-height:1.35; font-weight:500; } #demo-dialog.is-northstar.is-storyboard .story-scene:hover { background:#ffffffb3; } #demo-dialog.is-northstar.is-storyboard .story-scene.is-current { border-bottom-color:var(--ns-teal); background:#fff; color:var(--ns-ink); box-shadow:none; } #demo-dialog.is-northstar.is-storyboard .story-scene.is-current strong { font-weight:650; } #demo-dialog.is-northstar.is-storyboard .story-scene.is-current span,#demo-dialog.is-northstar.is-storyboard .story-scene.is-complete span { color:var(--ns-teal); } #demo-dialog.is-northstar.is-storyboard .story-mobile-scene { display:none; } #demo-dialog.is-northstar.is-storyboard #demo-stage { display:block; width:auto; min-width:0; min-height:0; height:auto; max-height:none; margin:0; padding:24px 26px 18px; overflow:visible; scrollbar-gutter:auto; background:var(--ns-paper); } /* The markup places this takeaway after #demo-stage in v4. It never overlays content. */ #demo-dialog.is-northstar.is-storyboard .story-caption { position:static; display:block; width:auto; margin:0; padding:12px 26px; border-top:1px solid var(--ns-line); background:#fff; color:#43574b; font-size:13px; line-height:1.55; } #demo-dialog.is-northstar.is-storyboard .demo-modal-controls { position:static; display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; margin:0; padding:10px 24px; border-top:1px solid var(--ns-line); background:#fff; } #demo-dialog.is-northstar.is-storyboard .demo-modal-controls > div { display:none; } #demo-dialog.is-northstar.is-storyboard :is([data-demo-prev],[data-demo-next]) { min-height:44px; padding:10px 17px; border:1px solid #c8d3c9; border-radius:3px; font-size:13px; line-height:1.4; } #demo-dialog.is-northstar.is-storyboard [data-demo-prev] { background:#fff; color:var(--ns-ink); } #demo-dialog.is-northstar.is-storyboard [data-demo-next] { border-color:var(--ns-ink); background:var(--ns-ink); color:#fff; } #demo-dialog.is-northstar.is-storyboard [data-demo-prev]:disabled { color:#707a72; background:#f6f7f2; border-color:#e1e6dd; } #demo-dialog.is-northstar.is-storyboard :is(button,select,summary):focus-visible { outline:3px solid #008c7a; outline-offset:3px; } /* Scene typography and records are independent of the former application shell. */ #demo-dialog.is-northstar.is-storyboard .ns-scene { container: northstar-workspace / inline-size; --na-ink: #263532; --na-muted: #5d6a66; --na-line: #dce3dc; --na-teal: #247667; --na-soft: #f3f4ef; min-width: 0; color: var(--ns-ink); font: 14px/1.55 'Geist', Arial, sans-serif; } #demo-dialog.is-northstar.is-storyboard .ns-scene :where(h3,h4,h5,p,ol,ul,dl,blockquote) { margin: 0; } #demo-dialog.is-northstar.is-storyboard .ns-scene :where(ol,ul) { padding: 0; list-style: none; } #demo-dialog.is-northstar.is-storyboard .ns-scene :where(dd) { margin: 0; } #demo-dialog.is-northstar.is-storyboard .ns-scene :where(svg) { display: block; width: 20px; height: 20px; flex: 0 0 20px; } #demo-dialog.is-northstar.is-storyboard .ns-scene :where(button) { font-family: inherit; } #demo-dialog.is-northstar.is-storyboard .ns-scene-heading { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 20px; align-items: start; margin-bottom: 17px; } #demo-dialog.is-northstar.is-storyboard .ns-scene-kicker { grid-column: 1 / -1; color: var(--ns-teal); font: 10px/1.5 var(--mono,monospace); letter-spacing: .08em; } #demo-dialog.is-northstar.is-storyboard .ns-scene-heading h3 { grid-column: 1; color: var(--ns-ink); font-size: clamp(24px, 2.8cqi, 28px); line-height: 1.18; font-weight: 600; letter-spacing: -.045em; text-transform: none; } #demo-dialog.is-northstar.is-storyboard .ns-scene-heading > p { grid-column: 1 / -1; color: var(--ns-muted); font-size: 14px; line-height: 1.6; max-width: 76ch; } #demo-dialog.is-northstar.is-storyboard .ns-scene-heading > .na-badge { grid-area: 2 / 2 / 3 / 3; align-self: center; } #demo-dialog.is-northstar.is-storyboard .ns-scene .na-badge { display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; padding: 5px 8px; border: 1px solid #d1e1d5; border-radius: 3px; background: #f0f6ef; color: #2e6250; font: 500 11px/1.45 'Geist',Arial,sans-serif; text-align: left; } #demo-dialog.is-northstar.is-storyboard .ns-scene .na-badge.is-amber { border-color: #e9d8b3; background: #fcf5e5; color: #795b22; } #demo-dialog.is-northstar.is-storyboard .ns-scene .na-badge.is-success { border-color: #c8dfd1; background: #edf6ee; color: #276448; } #demo-dialog.is-northstar.is-storyboard .ns-case-strip { display: grid; grid-template-columns: .7fr .85fr 1fr 1fr; gap: 0; margin: 0 0 17px; padding: 10px 0; border-block: 1px solid var(--ns-line); } #demo-dialog.is-northstar.is-storyboard .ns-case-strip > div { min-width: 0; padding-inline: 16px; border-left: 1px solid var(--ns-line); } #demo-dialog.is-northstar.is-storyboard .ns-case-strip > div:first-child { padding-left: 0; border-left: 0; } #demo-dialog.is-northstar.is-storyboard .ns-case-strip dt { margin-bottom: 4px; color: var(--ns-muted); font: 10px/1.45 var(--mono,monospace); text-transform: uppercase; letter-spacing: .025em; } #demo-dialog.is-northstar.is-storyboard .ns-case-strip dd { color: var(--ns-ink); font-size: 13px; font-weight: 550; line-height: 1.45; } #demo-dialog.is-northstar.is-storyboard .ns-scene-content { min-width: 0; } #demo-dialog.is-northstar.is-storyboard .ns-scene-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 18px; margin-top: 20px; color: #68746b; font: 10px/1.6 var(--mono,monospace); } #demo-dialog.is-northstar.is-storyboard .ns-scene-footer > span { min-width: 0; } #demo-dialog.is-northstar.is-storyboard .ns-payment-hero { max-width: 780px; margin-inline: auto; padding: 20px 24px; border: 1px solid #d7e1d5; border-radius: 5px; background: #fff; box-shadow: 0 6px 22px #23392d05; } #demo-dialog.is-northstar.is-storyboard .ns-payment-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } #demo-dialog.is-northstar.is-storyboard .ns-payment-top small { display: block; color: var(--ns-muted); font: 10px/1.5 var(--mono,monospace); letter-spacing: .07em; } #demo-dialog.is-northstar.is-storyboard .ns-payment-top strong { display: block; margin-top: 5px; color: var(--ns-ink); font: 500 14px/1.5 var(--mono,monospace); } #demo-dialog.is-northstar.is-storyboard .ns-payment-top > svg { width: 27px; height: 27px; flex-basis: 27px; color: var(--ns-teal); } #demo-dialog.is-northstar.is-storyboard .ns-payment-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 18px 0 20px; color: var(--ns-ink); font-size: clamp(43px,6cqi,56px); line-height: 1.05; letter-spacing: -.065em; font-variant-numeric: tabular-nums; } #demo-dialog.is-northstar.is-storyboard .ns-payment-amount > span { color: var(--ns-muted); font: 12px/1.4 var(--mono,monospace); letter-spacing: .03em; } #demo-dialog.is-northstar.is-storyboard .ns-payment-route { display: grid; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); gap: 18px; align-items: center; padding-top: 18px; border-top: 1px solid var(--ns-line); } #demo-dialog.is-northstar.is-storyboard .ns-payment-route small { display: block; margin-bottom: 4px; color: var(--ns-muted); font: 10px/1.5 var(--mono,monospace); letter-spacing: .05em; } #demo-dialog.is-northstar.is-storyboard .ns-payment-route strong { display: block; color: var(--ns-ink); font-size: 17px; font-weight: 550; line-height: 1.35; letter-spacing: -.025em; } #demo-dialog.is-northstar.is-storyboard .ns-payment-route > svg { color: #678d78; } #demo-dialog.is-northstar.is-storyboard .ns-payment-state { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ns-line); color: var(--ns-muted); font-size: 13px; line-height: 1.5; } #demo-dialog.is-northstar.is-storyboard .ns-payment-state > svg { color: #88703f; width: 17px; height: 17px; flex-basis: 17px; } #demo-dialog.is-northstar.is-storyboard .ns-details { margin-top: 14px; border: 1px solid var(--ns-line); border-radius: 4px; background: #fff; } #demo-dialog.is-northstar.is-storyboard .ns-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; padding: 12px 16px; color: #435b4c; cursor: pointer; list-style: none; font-size: 13px; line-height: 1.5; font-weight: 500; } #demo-dialog.is-northstar.is-storyboard .ns-details > summary::-webkit-details-marker { display: none; } #demo-dialog.is-northstar.is-storyboard .ns-details > summary > span { flex-shrink: 0; color: var(--ns-teal); font-size: 20px; line-height: 1; } #demo-dialog.is-northstar.is-storyboard .ns-details[open] > summary { border-bottom: 1px solid var(--ns-line); } #demo-dialog.is-northstar.is-storyboard .ns-details[open] > summary > span { transform: rotate(45deg); } #demo-dialog.is-northstar.is-storyboard .ns-details-body { padding: 17px 20px; } #demo-dialog.is-northstar.is-storyboard .ns-record-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 26px; } #demo-dialog.is-northstar.is-storyboard .ns-record-facts > div { min-width: 0; } #demo-dialog.is-northstar.is-storyboard .ns-record-facts dt { margin-bottom: 4px; color: var(--ns-muted); font-size: 12px; line-height: 1.5; } #demo-dialog.is-northstar.is-storyboard .ns-record-facts dd { color: var(--ns-ink); font-size: 13px; font-weight: 500; line-height: 1.55; } #demo-dialog.is-northstar.is-storyboard .ns-reference-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } #demo-dialog.is-northstar.is-storyboard .ns-reference-card { min-width: 0; padding: 19px 22px; border: 1px solid var(--ns-line); border-radius: 4px; background: #fff; } #demo-dialog.is-northstar.is-storyboard .ns-reference-card > small, #demo-dialog.is-northstar.is-storyboard .ns-reference-transition small { display: block; color: var(--ns-muted); font: 10px/1.5 var(--mono,monospace); letter-spacing: .045em; } #demo-dialog.is-northstar.is-storyboard .ns-reference-card code { display: block; margin: 12px 0 0; color: var(--ns-ink); font: 500 clamp(24px,3.2cqi,30px)/1.3 var(--mono,monospace); letter-spacing: -.055em; white-space: nowrap; } #demo-dialog.is-northstar.is-storyboard .ns-reference-card p { margin-bottom: 16px; max-width: 35ch; color: var(--ns-muted); font-size: 13px; line-height: 1.65; } #demo-dialog.is-northstar.is-storyboard .ns-boundary { display: flex; align-items: flex-start; gap: 12px; padding: 17px 0 3px; color: var(--ns-muted); } #demo-dialog.is-northstar.is-storyboard .ns-boundary > svg { width: 18px; height: 18px; flex-basis: 18px; margin-top: 2px; color: #61836e; } #demo-dialog.is-northstar.is-storyboard .ns-boundary strong { display: block; margin-bottom: 3px; color: var(--ns-ink); font-size: 13px; font-weight: 550; } #demo-dialog.is-northstar.is-storyboard .ns-boundary p { color: var(--ns-muted); font-size: 13px; line-height: 1.6; max-width: 80ch; } #demo-dialog.is-northstar.is-storyboard .ns-decision-card { padding: 19px 22px; border: 1px solid var(--ns-line); border-radius: 4px; background: #fff; } #demo-dialog.is-northstar.is-storyboard .ns-decision-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #demo-dialog.is-northstar.is-storyboard .ns-decision-label > small { color: var(--ns-muted); font: 10px/1.5 var(--mono,monospace); letter-spacing: .045em; } #demo-dialog.is-northstar.is-storyboard .ns-reference-transition { display: grid; grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr); gap: 20px; align-items: center; padding: 19px 0; } #demo-dialog.is-northstar.is-storyboard .ns-reference-transition code { display: block; margin-top: 10px; color: var(--ns-ink); font: 500 clamp(23px,3cqi,29px)/1.3 var(--mono,monospace); letter-spacing: -.05em; white-space: nowrap; } #demo-dialog.is-northstar.is-storyboard .ns-reference-transition > svg { color: #5e8974; } #demo-dialog.is-northstar.is-storyboard .ns-reviewer { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; padding-block: 16px; border-block: 1px solid var(--ns-line); } #demo-dialog.is-northstar.is-storyboard .ns-reviewer-avatar { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid #d9e1d5; border-radius: 50%; background: #f2f4ee; color: #4c6856; font: 11px/1 var(--mono,monospace); } #demo-dialog.is-northstar.is-storyboard .ns-reviewer > div { flex: 1; min-width: 150px; } #demo-dialog.is-northstar.is-storyboard .ns-reviewer strong { display: block; color: var(--ns-ink); font-size: 14px; font-weight: 550; } #demo-dialog.is-northstar.is-storyboard .ns-reviewer small { display: block; margin-top: 2px; color: var(--ns-muted); font-size: 12px; line-height: 1.5; } #demo-dialog.is-northstar.is-storyboard .ns-reviewer-status { color: #536e59; font: 11px/1.5 var(--mono,monospace); } #demo-dialog.is-northstar.is-storyboard .ns-evidence-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 24px; margin-bottom: 17px; } #demo-dialog.is-northstar.is-storyboard .ns-evidence-list > li { display: flex; align-items: flex-start; gap: 9px; color: #445d4d; font-size: 13px; line-height: 1.6; } #demo-dialog.is-northstar.is-storyboard .ns-evidence-list svg { width: 17px; height: 17px; flex-basis: 17px; margin-top: 2px; color: var(--ns-teal); } #demo-dialog.is-northstar.is-storyboard .ns-decision-seal { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; } #demo-dialog.is-northstar.is-storyboard .ns-decision-seal > svg { width: 42px; height: 42px; flex-basis: 42px; padding: 10px; border: 1px solid #c4deca; border-radius: 50%; background: #edf6ec; color: #27704d; } #demo-dialog.is-northstar.is-storyboard .ns-decision-seal small { display: block; color: var(--ns-teal); font: 10px/1.5 var(--mono,monospace); letter-spacing: .045em; } #demo-dialog.is-northstar.is-storyboard .ns-decision-seal h4 { margin-top: 5px; color: var(--ns-ink); font-size: 21px; font-weight: 550; letter-spacing: -.035em; line-height: 1.3; } #demo-dialog.is-northstar.is-storyboard .ns-pending-state { display: flex; align-items: flex-start; gap: 11px; padding: 15px; border: 1px solid #eadfc8; border-radius: 3px; background: #fcf8ef; } #demo-dialog.is-northstar.is-storyboard .ns-pending-state > svg { color: #826a37; margin-top: 1px; } #demo-dialog.is-northstar.is-storyboard .ns-pending-state strong { display: block; margin-bottom: 3px; color: #6e582c; font-size: 13px; font-weight: 600; } #demo-dialog.is-northstar.is-storyboard .ns-pending-state p { color: #6a604c; font-size: 13px; line-height: 1.6; } #demo-dialog.is-northstar.is-storyboard .ns-outcome { display: flex; align-items: center; gap: 17px; margin-bottom: 17px; padding: 17px 20px; border: 1px solid #ceddcd; border-radius: 4px; background: #fff; } #demo-dialog.is-northstar.is-storyboard .ns-outcome > svg { width: 38px; height: 38px; flex-basis: 38px; padding: 8px; border: 1px solid #bfd6c3; border-radius: 50%; background: #fff; color: #28734e; } #demo-dialog.is-northstar.is-storyboard .ns-outcome h4 { color: var(--ns-ink); font-size: 22px; font-weight: 550; letter-spacing: -.035em; line-height: 1.3; } #demo-dialog.is-northstar.is-storyboard .ns-outcome p { margin-top: 6px; max-width: 74ch; color: var(--ns-muted); font-size: 13px; line-height: 1.6; } #demo-dialog.is-northstar.is-storyboard .ns-records { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; } #demo-dialog.is-northstar.is-storyboard .ns-records > article { display: flex; align-items: flex-start; flex-direction: column; min-width: 0; padding: 20px; border: 1px solid var(--ns-line); border-radius: 4px; background: #fff; } #demo-dialog.is-northstar.is-storyboard .ns-records > article > svg { margin-bottom: 12px; color: #618473; } #demo-dialog.is-northstar.is-storyboard .ns-records > article > small { color: var(--ns-muted); font: 10px/1.5 var(--mono,monospace); letter-spacing: .035em; } #demo-dialog.is-northstar.is-storyboard .ns-records > article > strong { margin-top: 6px; color: var(--ns-ink); font: 500 20px/1.3 var(--mono,monospace); letter-spacing: -.045em; } #demo-dialog.is-northstar.is-storyboard .ns-records > article > span:not(.na-badge) { flex: 1; margin-top: 8px; color: var(--ns-muted); font-size: 12px; line-height: 1.6; } #demo-dialog.is-northstar.is-storyboard .ns-records .na-badge { margin-top: 16px; } #demo-dialog.is-northstar.is-storyboard .ns-audit-note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ns-line); color: var(--ns-muted); font-size: 13px; line-height: 1.6; } #demo-dialog.is-northstar.is-storyboard .ns-scene[data-scene="0"] .ns-scene-content { max-width:780px; margin-inline:auto; } /* All four roles are real grid items: no absolute-positioned, cropped map. */ #demo-dialog.is-northstar.is-storyboard .na-flow-compact { min-width:0; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-coordination { display:grid; grid-template-columns:minmax(0,1fr) 265px; gap:16px; min-width:0; align-items:stretch; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-network-panel { min-width:0; width:auto; max-width:none; height:auto; max-height:none; margin:0; padding:18px; overflow:visible; border:1px solid var(--ns-line); border-radius:4px; background:#fff; } #demo-dialog.is-northstar.is-storyboard .na-network-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:5px 12px; margin:0 0 17px; } #demo-dialog.is-northstar.is-storyboard .na-network-heading > small { flex:1 1 100%; color:var(--ns-muted); font:10px/1.5 var(--mono,monospace); letter-spacing:.035em; } #demo-dialog.is-northstar.is-storyboard .na-network-heading h4 { color:var(--ns-ink); font-size:17px; line-height:1.3; font-weight:550; letter-spacing:-.03em; } #demo-dialog.is-northstar.is-storyboard .na-network-heading p { color:var(--ns-muted); font-size:12px; line-height:1.5; } #demo-dialog.is-northstar.is-storyboard .na-network-map { display:grid; grid-template-columns:minmax(0,1fr) minmax(128px,.83fr) minmax(0,1fr); grid-template-areas:'source core reconcile' 'authority core evidence'; gap:12px; min-width:0; width:100%; height:auto; max-height:none; aspect-ratio:auto; overflow:visible; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent, #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-core { position:relative; inset:auto; width:100%; min-width:0; max-width:none; height:auto; max-height:none; margin:0; transform:none; box-shadow:none; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent { display:grid; grid-template-columns:minmax(0,1fr) 22px; grid-template-rows:auto auto auto; align-content:start; align-items:start; justify-content:normal; gap:5px 8px; min-height:110px; padding:12px; border:1px solid #d7e1d8; border-radius:4px; background:#fff; color:var(--ns-ink); font-family:inherit; text-align:left; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-0 { grid-area:source; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-1 { grid-area:reconcile; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-2 { grid-area:authority; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-3 { grid-area:evidence; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent::before { content:''; position:absolute; top:50%; width:12px; height:1px; background:#c7d7c9; pointer-events:none; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact :is(.na-agent-0,.na-agent-2)::before { right:-13px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact :is(.na-agent-1,.na-agent-3)::before { left:-13px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent.is-selected::before { background:#679d86; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact[data-playing='true'] .na-agent.is-running::before { height:2px; background-color:#c7d7c9; background-image:linear-gradient(90deg,transparent,#008773 45%,#8bc6b0 60%,transparent); background-size:8px 2px; background-repeat:no-repeat; animation:ns-link-travel 1.5s linear infinite; } @keyframes ns-link-travel { from { background-position:-8px 0; } to { background-position:13px 0; } } #demo-dialog.is-northstar.is-storyboard .na-agent-symbol { grid-area:1 / 2 / 2 / 3; display:grid; place-items:center; width:22px; height:22px; color:#628573; } #demo-dialog.is-northstar.is-storyboard .na-agent-symbol > svg { position:static; inset:auto; display:block; width:20px; height:20px; margin:0; transform:none; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent > small { grid-area:1 / 1 / 2 / 2; align-self:center; margin:0; color:var(--ns-muted); font:10px/1.5 var(--mono,monospace); } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent > strong { grid-area:2 / 1 / 3 / -1; padding:0; margin:0; color:var(--ns-ink); font-size:14px; line-height:1.35; font-weight:550; letter-spacing:-.02em; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent > [data-na-node-status] { grid-area:3 / 1 / 4 / -1; margin:0; color:var(--ns-muted); font-size:11px; line-height:1.5; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent.is-active { background:#fff; border-color:#d7e1d8; box-shadow:none; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent.is-selected, #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent[aria-pressed='true'] { border-color:#3e9981; background:#fff; box-shadow:inset 0 -2px #008773; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent.is-done:not(.is-selected) { border-color:#c4d6c7; background:#fafcf7; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent.is-running::after { content:''; position:absolute; top:9px; right:9px; width:5px; height:5px; border-radius:50%; background:#008773; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent:hover { border-color:#7bae9b; background:#fbfdf8; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-core { grid-area:core; display:flex; flex-direction:column; align-items:center; justify-content:center; order:0; gap:8px; min-height:0; padding:18px 10px; border:1px solid #d3e0d2; border-radius:4px; background:#f5f7f1; text-align:center; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-core > svg { position:static; width:29px; height:29px; margin:0 0 5px; flex:0 0 29px; color:#487b65; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-core > small { flex:none; width:auto; max-width:none; margin:0; color:var(--ns-muted); font:10px/1.5 var(--mono,monospace); text-align:center; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-core > strong { margin:0; color:var(--ns-ink); font-size:15px; line-height:1.35; font-weight:550; letter-spacing:-.025em; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-core > span { color:#4d6b58; font-size:11px; line-height:1.55; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail { position:static; display:block; min-width:0; width:auto; max-width:none; height:auto; max-height:none; margin:0; padding:18px; overflow:visible; border:1px solid var(--ns-line); border-radius:4px; background:#fff; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail > * { grid-column:auto; grid-row:auto; min-width:0; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail > small { display:block; margin:0 0 9px; color:var(--ns-muted); font:10px/1.5 var(--mono,monospace); } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail h4 { margin:0; color:var(--ns-ink); font-size:20px; line-height:1.3; font-weight:550; letter-spacing:-.035em; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail > p { margin:9px 0 0; color:var(--ns-muted); font-size:13px; line-height:1.65; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-detail-output { margin:16px 0 0; padding:12px 0 0; border:0; border-top:1px solid var(--ns-line); border-radius:0; background:transparent; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-detail-output small { display:block; margin-bottom:5px; color:#547060; font:10px/1.5 var(--mono,monospace); } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-detail-output strong { display:block; color:var(--ns-ink); font-size:13px; line-height:1.55; font-weight:550; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-detail-boundary { display:flex; align-items:flex-start; gap:8px; margin:16px 0 0; padding:12px 0 0; border-top:1px solid var(--ns-line); color:var(--ns-muted); font-size:12px; line-height:1.6; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-detail-boundary svg { width:16px; height:16px; flex:0 0 16px; margin-top:2px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail .na-team-context { display:block; margin:13px 0 0; color:var(--ns-muted); font:10px/1.6 var(--mono,monospace); } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-motion-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; padding:11px 0; margin:0; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-motion-controls > span { flex:none; margin:0; color:var(--ns-muted); font:10px/1.5 var(--mono,monospace); text-align:left; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-motion-controls > div { display:flex; align-items:center; flex-wrap:wrap; gap:8px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-motion-controls button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:44px; min-height:44px; margin:0; padding:10px 13px; border:1px solid #ccd8cd; border-radius:3px; background:#fff; color:var(--ns-ink); font:500 12px/1.5 'Geist',Arial,sans-serif; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-motion-controls [data-na-toggle] { display:none; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-motion-controls button > svg { width:17px; height:17px; flex:0 0 17px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-workflow-track { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; min-width:0; padding:0; margin:0; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-workflow-track > li { display:flex; align-items:baseline; gap:6px; padding:9px 3px; border-top:2px solid #e0e6dc; color:var(--ns-muted); font-size:11px; line-height:1.5; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-workflow-track > li > span { flex:0 0 auto; color:inherit; font:10px/1.5 var(--mono,monospace); } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-workflow-track > li.is-current { border-top-color:#008773; color:#24654d; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-workflow-track > li.is-done { border-top-color:#8bbba6; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-motion-summary { margin:8px 0 0; padding:10px 12px; border:1px solid var(--ns-line); border-radius:3px; background:#fff; color:#4f6657; font-size:13px; line-height:1.6; } @container northstar-workspace (max-width: 850px) { #demo-dialog.is-northstar.is-storyboard .ns-scene-heading { grid-template-columns:minmax(0,1fr); gap:7px; } #demo-dialog.is-northstar.is-storyboard .ns-scene-heading > .na-badge { grid-area:auto; margin-top:1px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-coordination { grid-template-columns:minmax(0,1fr); } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 22px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail > :is(small,h4,p) { grid-column:1; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail .na-detail-output { grid-column:2; grid-row:1 / 4; margin-top:0; padding-top:0; border-top:0; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail .na-detail-boundary { grid-column:1 / -1; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail .na-team-context { grid-column:1 / -1; margin-top:0; } } @container northstar-workspace (max-width: 640px) { #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent::before { display:none; } #demo-dialog.is-northstar.is-storyboard .ns-case-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 0; padding-block:12px; } #demo-dialog.is-northstar.is-storyboard .ns-case-strip > div { padding-right:10px; } #demo-dialog.is-northstar.is-storyboard .ns-case-strip > div:nth-child(odd) { padding-left:0; border-left:0; } #demo-dialog.is-northstar.is-storyboard .ns-case-strip dd { font-size:14px; } #demo-dialog.is-northstar.is-storyboard .ns-reference-grid { gap:12px; } #demo-dialog.is-northstar.is-storyboard .ns-reference-card { padding:18px; } #demo-dialog.is-northstar.is-storyboard .ns-reference-card code { font-size:25px; } #demo-dialog.is-northstar.is-storyboard .ns-records { grid-template-columns:1fr; } #demo-dialog.is-northstar.is-storyboard .ns-records > article { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:4px 12px; align-items:start; padding:16px; } #demo-dialog.is-northstar.is-storyboard .ns-records > article > svg { grid-area:1 / 1 / 4 / 2; margin:3px 0 0; } #demo-dialog.is-northstar.is-storyboard .ns-records > article > :is(small,strong,span:not(.na-badge)) { grid-column:2; margin:0; } #demo-dialog.is-northstar.is-storyboard .ns-records .na-badge { grid-area:1 / 3 / 4 / 4; align-self:center; margin:0; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-network-panel { padding:16px; } #demo-dialog.is-northstar.is-storyboard .na-network-map { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:'core core' 'source reconcile' 'authority evidence'; gap:10px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-core { position:relative; inset:auto; display:grid; grid-template-columns:26px minmax(0,1fr); align-items:center; justify-content:normal; gap:3px 12px; width:100%; max-width:none; min-height:0; padding:12px 14px; border-radius:4px; transform:none; text-align:left; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-core > svg { grid-area:1 / 1 / 4 / 2; width:26px; height:26px; margin:0; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-core > :is(small,strong,span) { grid-column:2; width:auto; max-width:none; margin:0; text-align:left; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-core > strong { font-size:15px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent { position:relative; inset:auto; min-height:110px; width:100%; max-width:none; padding:12px; transform:none; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail { display:block; padding:17px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail > * { grid-column:auto; grid-row:auto; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail h4 { font-size:21px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail > p { font-size:14px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail .na-detail-output { margin-top:15px; padding-top:12px; border-top:1px solid var(--ns-line); } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-detail-output strong { font-size:14px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-detail-boundary { font-size:13px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent-detail .na-team-context { margin-top:12px; font-size:11px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-motion-controls button { font-size:13px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-workflow-track { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-workflow-track > li { font-size:12px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-motion-summary { font-size:14px; } } @container northstar-workspace (max-width: 470px) { #demo-dialog.is-northstar.is-storyboard .ns-reference-grid { grid-template-columns:1fr; gap:10px; } #demo-dialog.is-northstar.is-storyboard .ns-reference-card { padding:17px 18px; } #demo-dialog.is-northstar.is-storyboard .ns-reference-card code { margin-top:10px; font-size:26px; } #demo-dialog.is-northstar.is-storyboard .ns-payment-hero { padding:19px; } #demo-dialog.is-northstar.is-storyboard .ns-payment-amount { font-size:clamp(43px,13cqi,56px); } #demo-dialog.is-northstar.is-storyboard .ns-payment-route { grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); gap:10px; } #demo-dialog.is-northstar.is-storyboard .ns-payment-route strong { font-size:15px; line-height:1.45; } #demo-dialog.is-northstar.is-storyboard .ns-payment-state { align-items:flex-start; font-size:14px; } #demo-dialog.is-northstar.is-storyboard .ns-details > summary { font-size:14px; } #demo-dialog.is-northstar.is-storyboard .ns-details-body { padding:17px; } #demo-dialog.is-northstar.is-storyboard .ns-record-facts { grid-template-columns:1fr; gap:14px; } #demo-dialog.is-northstar.is-storyboard .ns-record-facts :is(dt,dd) { font-size:14px; } #demo-dialog.is-northstar.is-storyboard .ns-decision-card { padding:18px; } #demo-dialog.is-northstar.is-storyboard .ns-reference-transition { grid-template-columns:1fr; gap:11px; padding-block:18px; } #demo-dialog.is-northstar.is-storyboard .ns-reference-transition > svg { transform:rotate(90deg); margin-left:2px; } #demo-dialog.is-northstar.is-storyboard .ns-reference-transition code { margin-top:5px; font-size:25px; } #demo-dialog.is-northstar.is-storyboard .ns-reviewer > div { min-width:0; flex-basis:calc(100% - 50px); } #demo-dialog.is-northstar.is-storyboard .ns-reviewer-status { margin-left:49px; font-size:11px; } #demo-dialog.is-northstar.is-storyboard .ns-reviewer small { font-size:13px; } #demo-dialog.is-northstar.is-storyboard .ns-evidence-list { grid-template-columns:1fr; gap:10px; } #demo-dialog.is-northstar.is-storyboard .ns-evidence-list > li { font-size:14px; } #demo-dialog.is-northstar.is-storyboard .ns-boundary :is(strong,p) { font-size:14px; } #demo-dialog.is-northstar.is-storyboard .ns-pending-state { padding:13px; } #demo-dialog.is-northstar.is-storyboard .ns-pending-state :is(strong,p) { font-size:14px; } #demo-dialog.is-northstar.is-storyboard .ns-decision-seal { align-items:flex-start; gap:11px; padding-bottom:15px; } #demo-dialog.is-northstar.is-storyboard .ns-decision-seal > svg { width:32px; height:32px; flex-basis:32px; padding:6px; } #demo-dialog.is-northstar.is-storyboard .ns-decision-seal h4 { font-size:20px; } #demo-dialog.is-northstar.is-storyboard .ns-outcome { align-items:flex-start; padding:17px; gap:12px; } #demo-dialog.is-northstar.is-storyboard .ns-outcome > svg { width:30px; height:30px; flex-basis:30px; padding:6px; } #demo-dialog.is-northstar.is-storyboard .ns-outcome h4 { font-size:20px; } #demo-dialog.is-northstar.is-storyboard .ns-outcome p { font-size:14px; } #demo-dialog.is-northstar.is-storyboard .ns-records > article { grid-template-columns:22px minmax(0,1fr); gap:5px 11px; } #demo-dialog.is-northstar.is-storyboard .ns-records > article > span:not(.na-badge) { font-size:14px; } #demo-dialog.is-northstar.is-storyboard .ns-records .na-badge { grid-area:auto; grid-column:2; margin-top:7px; } #demo-dialog.is-northstar.is-storyboard .ns-audit-note { font-size:14px; } } @container northstar-workspace (max-width: 350px) { #demo-dialog.is-northstar.is-storyboard .na-network-map { grid-template-columns:minmax(0,1fr); grid-template-areas:'core' 'source' 'reconcile' 'authority' 'evidence'; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-agent { min-height:100px; } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-workflow-track { grid-template-columns:repeat(2,minmax(0,1fr)); } #demo-dialog.is-northstar.is-storyboard .na-flow-compact .na-motion-controls { align-items:flex-start; } } @media (max-width: 800px) { #demo-dialog.is-northstar.is-storyboard { width:calc(100% - 20px); height:auto; max-height:calc(100dvh - 20px); border-radius:6px; } #demo-dialog.is-northstar.is-storyboard #demo-title { min-height:58px; margin:0; padding:17px 68px 15px 18px; font-size:21px; } #demo-dialog.is-northstar.is-storyboard [data-close-demo] { top:7px; margin:7px 9px 0 0; } #demo-dialog.is-northstar.is-storyboard .story-toolbar { padding:9px 18px; } #demo-dialog.is-northstar.is-storyboard #story-scenes { display:none; } #demo-dialog.is-northstar.is-storyboard .story-mobile-scene { display:flex; align-items:center; gap:14px; min-width:0; padding:10px 18px; border-bottom:1px solid var(--ns-line); background:#f3f5ee; } #demo-dialog.is-northstar.is-storyboard .story-mobile-scene > span { display:block; flex:0 0 auto; margin:0; color:var(--ns-muted); font:10px/1.4 var(--mono,monospace); letter-spacing:.035em; } #demo-dialog.is-northstar.is-storyboard #story-scene-select { flex:1; min-width:0; min-height:44px; width:100%; padding:10px 30px 10px 12px; border:1px solid #c5d2c7; border-radius:3px; background:#fff; color:var(--ns-ink); font:14px/1.4 'Geist',Arial,sans-serif; } #demo-dialog.is-northstar.is-storyboard #demo-stage { padding:21px 20px 16px; overflow:visible; } #demo-dialog.is-northstar.is-storyboard .story-caption { padding:11px 20px; font-size:13px; } #demo-dialog.is-northstar.is-storyboard .demo-modal-controls { padding:9px 18px; } } @media (max-width: 500px) { #demo-dialog.is-northstar.is-storyboard { width:calc(100% - 12px); height:auto; max-height:calc(100dvh - 12px); scrollbar-gutter:auto; } #demo-dialog.is-northstar.is-storyboard #demo-title { padding-inline:15px 63px; font-size:20px; } #demo-dialog.is-northstar.is-storyboard .story-toolbar { padding:8px 15px; } #demo-dialog.is-northstar.is-storyboard .story-toolbar > div:first-child { display:none; } #demo-dialog.is-northstar.is-storyboard .story-transport { justify-content:space-between; width:100%; gap:12px; } #demo-dialog.is-northstar.is-storyboard [data-story-play] { min-width:117px; font-size:14px; } #demo-dialog.is-northstar.is-storyboard #story-clock { font-size:12px; } #demo-dialog.is-northstar.is-storyboard .story-mobile-scene { padding:8px 15px; gap:10px; } #demo-dialog.is-northstar.is-storyboard .story-mobile-scene > span { max-width:55px; font-size:10px; line-height:1.5; } #demo-dialog.is-northstar.is-storyboard #story-scene-select { padding-left:9px; font-size:14px; } #demo-dialog.is-northstar.is-storyboard #demo-stage { padding:20px 15px 16px; } #demo-dialog.is-northstar.is-storyboard .story-caption { padding:11px 15px; font-size:14px; line-height:1.5; } #demo-dialog.is-northstar.is-storyboard .demo-modal-controls { padding:8px 15px; gap:12px; } #demo-dialog.is-northstar.is-storyboard :is([data-demo-prev],[data-demo-next]) { min-height:44px; font-size:14px; } #demo-dialog.is-northstar.is-storyboard .ns-scene-heading { margin-bottom:15px; } #demo-dialog.is-northstar.is-storyboard .ns-scene-heading h3 { font-size:24px; line-height:1.2; } #demo-dialog.is-northstar.is-storyboard .ns-scene-heading > p { font-size:14px; line-height:1.6; } #demo-dialog.is-northstar.is-storyboard .ns-scene-footer { display:block; margin-top:17px; font-size:10px; line-height:1.7; } #demo-dialog.is-northstar.is-storyboard .ns-scene-footer > span { display:block; } #demo-dialog.is-northstar.is-storyboard .ns-scene-footer > span + span { margin-top:3px; } } @media (prefers-reduced-motion: reduce) { #demo-dialog.is-northstar.is-storyboard *,#demo-dialog.is-northstar.is-storyboard *::before,#demo-dialog.is-northstar.is-storyboard *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } } html[data-motion='reduced'] #demo-dialog.is-northstar.is-storyboard *, html[data-motion='reduced'] #demo-dialog.is-northstar.is-storyboard *::before, html[data-motion='reduced'] #demo-dialog.is-northstar.is-storyboard *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }