:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #edecf5; background: #0b0c14; font-synthesis: none; --muted: #a3a3b9; --border: #ffffff12; --mint: #7ecdc4; --orange: #eeb37a; --violet: #929bec; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #0b0c14; }
.page-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: var(--aurora-opacity, .58); }
.page-aurora canvas { display: block; width: 100%; height: 100%; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #a9beff; outline-offset: 4px; }
button { color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
h2 { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
input, select { min-width: 0; }
input:not([type=range]):not([type=checkbox]):not([type=file]), select { width: 100%; color: #eeedf5; background: #0c0d16; border: 1px solid #ffffff15; border-radius: 7px; padding: 10px 11px; font-size: 13px; }
/* iOS date controls otherwise add native padding outside their declared width. */
input[type=datetime-local] { -webkit-appearance: none; appearance: none; max-width: 100%; font-variant-numeric: tabular-nums; }
input::-webkit-calendar-picker-indicator { opacity: .65; }
input[type=range] { width: 100%; accent-color: var(--mint); cursor: pointer; }
input[type=checkbox] { accent-color: var(--mint); width: 16px; height: 16px; margin: 0; }
input:disabled, select:disabled { opacity: .5; }
.app-shell { position: relative; z-index: 1; max-width: 1540px; margin: 0 auto; padding: 0 36px; }
.app-header { min-height: 116px; display: grid; grid-template-columns: 312px minmax(0,1fr); gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; text-decoration: none; color: #fff; font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 38px; font-style: normal; font-weight: 700; letter-spacing: 1.4px; line-height: 1; white-space: nowrap; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 34px 0 28px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.footer-design-controls .mvp-toggle { margin: 0; }
.history-actions { display: flex; justify-content: center; gap: 6px; padding-top: 4px; }
.history-actions .button { min-height: 40px; }
.history-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow { font-size: 10px; letter-spacing: .17em; color: #aaa5c2; margin-bottom: 9px; font-weight: 600; }
h1 { font-size: clamp(27px, 3.4vw, 36px); font-weight: 550; letter-spacing: -.035em; }
.lead { color: var(--muted); font-size: 14px; margin-top: 9px; line-height: 1.5; }
.scenario-actions { margin-bottom: 18px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 10px 13px; border-radius: 7px; border: 1px solid #ffffff1b; font-size: 12px; background: #1a1a28; text-decoration: none; transition: background .15s; }
.button:hover { background: #252536; }
.button.primary { color: #0b211f; background: var(--mint); border-color: transparent; font-weight: 600; }
.button.primary:hover { background: #a3dfd8; }
.button.primary[data-connect-codex] { color: #fff; background: transparent; border: 1px solid #ffffff1b; }
.button.primary[data-connect-codex]:hover { background: transparent; }
.button.quiet { background: transparent; color: #c9c7db; }
.button.quiet:hover { background: #ffffff07; }
.button:disabled { opacity: .4; cursor: default; }
.full { width: 100%; }
.workspace { display: grid; grid-template-columns: 312px minmax(0, 1fr); gap: 24px; align-items: start; }
.editor, .results, #results-content { min-width: 0; }
.results, #results-content { display: contents; }
#results-content[hidden] { display: none; }
.editor { grid-column: 1; }
.results > .validation, #results-content > .timeline-workspace, #results-content > .comparison-panel, #results-content > .events-panel, #results-content > .assumptions { grid-column: 2; }
#results-content > .widget-gallery { grid-column: 1 / -1; }
.panel { background: #11141c99; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--border); border-radius: 12px; }
.input-panel { padding: 19px; margin-bottom: 14px; }
.sidebar-summary { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; list-style: none; }
.sidebar-summary::-webkit-details-marker { display: none; }
.sidebar-summary h2 { flex: 1; }
.sidebar-summary::after { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-right: 1.5px solid #a3a3b9; border-bottom: 1.5px solid #a3a3b9; transform: rotate(-45deg); }
.sidebar-panel[open] > .sidebar-summary { margin-bottom: 18px; }
.sidebar-panel[open] > .sidebar-summary::after { transform: rotate(45deg); }
.sidebar-panel-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
html[data-view-mode="mvp"] #resets-details .sidebar-panel-actions { margin-bottom: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tag { font-size: 10px; color: #b4b0cb; white-space: nowrap; }
.field { display: flex; flex-direction: column; gap: 7px; font-size: 11px; color: #afadc2; margin-bottom: 14px; }
#scenario-details > div > .field:last-child { margin-bottom: 0; }
.remaining-value { color: #eeedf5; font-size: 29px; font-weight: 500; letter-spacing: -.04em; line-height: 1.2; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 30px !important; }
.input-suffix > span { position: absolute; right: 12px; top: 11px; color: #7f7e94; }
.field-help { color: #9290a7; font-size: 11px; line-height: 1.6; margin-top: -2px; }
.expiry-buffer-setting { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.expiry-buffer-setting .field { margin-bottom: 9px; }
.pace-entry { display: flex; align-items: baseline; gap: 10px; margin: -2px 0 11px; }
.pace-entry input { background: transparent !important; border: 0 !important; padding: 0 !important; font-size: 37px !important; font-weight: 500; letter-spacing: -.04em; width: 116px !important; }
.pace-entry > span { color: #b6c6c7; font-size: 18px; }
.pace-entry small { display: inline-block; font-size: 11px; margin-left: 4px; color: var(--muted); }
.range-labels { display: flex; justify-content: space-between; color: #9695aa; font-size: 10px; margin: 3px 0 16px; }
.allowance-pace { --allowance-color: #49a3ff; padding: 15px 0 17px; border-top: 1px solid var(--border); }
.pace-panel > .allowance-pace:last-child { padding-bottom: 0; }
.allowance-pace:first-child { border-top: 0; padding-top: 0; }
.normal-pace-label { margin: 0 0 10px; color: #d2d4e1; font-size: 12px; font-weight: 550; }
.normal-pace-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.normal-pace-header .normal-pace-label { margin: 0; }
.allowance-pace .pace-heading { color: var(--allowance-color); margin-bottom: 10px; }
.allowance-pace .pace-heading .pace-entry { margin-top: 2px; margin-bottom: 0; }
.allowance-pace .pace-entry { gap: 6px; }
.allowance-pace .pace-entry input { font-size: 29px !important; flex: 0 1 auto; min-width: 0; width: var(--pace-value-width, 4ch) !important; appearance: textfield; }
.allowance-pace .pace-entry input::-webkit-inner-spin-button,
.allowance-pace .pace-entry input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.allowance-pace .pace-entry > span:not(.sr-only) { flex-shrink: 0; white-space: nowrap; }
.allowance-pace.precise-pace .pace-entry input { font-size: 17px !important; letter-spacing: -.025em; }
.allowance-pace input[type=range] { accent-color: var(--allowance-color); }
.normal-pace-slider { display: grid; grid-template-columns: 18px minmax(0,1fr) 18px; align-items: center; gap: 8px; }
.normal-pace-slider > svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.normal-pace-slider input[type=range] { margin: 0; }

.credit .allowance-pace { margin-top: 16px; padding: 16px 0 0; }
.credit .allowance-pace .pace-entry { margin: 10px 0 8px; }
.credit .allowance-pace .pace-entry input { font-size: 25px !important; }
.credit .allowance-pace.precise-pace .pace-entry input { font-size: 17px !important; }
.credit .pace-entry > span { font-size: 16px; white-space: nowrap; }
.credit .pace-entry small { font-size: 10px; }
.credit .allowance-pace .auto-pace-toggle { justify-content: space-between; margin-top: 10px; }
.credit .allowance-pace .field-help { margin-top: 6px; }
.auto-pace-toggle { display: flex; align-items: center; gap: 9px; margin-top: 13px; color: #d2d4e1; font-size: 11px; line-height: 1.5; cursor: pointer; }
.auto-pace-toggle input[type=checkbox] { appearance: none; width: 30px; height: 18px; border-radius: 10px; background: #ffffff20; border: 1px solid #ffffff25; flex-shrink: 0; position: relative; cursor: pointer; }
.auto-pace-toggle input::before { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; top: 2px; left: 2px; background: #d8d9e2; }
.auto-pace-toggle input:checked { background: var(--allowance-color); border-color: transparent; }
.auto-pace-toggle input:checked::before { transform: translateX(12px); background: #14202a; }
.mvp-toggle { --allowance-color: var(--mint); align-self: center; flex-shrink: 0; margin: 0 0 0 auto; padding: 10px 14px; min-height: 44px; gap: 14px; border: 1px solid #ffffff25; border-radius: 24px; background: #11141c99; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font-size: 12px; font-weight: 500; }
.mvp-toggle:has(input:checked) { border-color: #7ecdc46b; color: #e3fff8; }
.account-data { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; max-width: 320px; }
.account-data-copy { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; min-width: 0; gap: 4px 14px; font-size: 11px; color: #c3c4d2; line-height: 1.5; text-align: right; }
.account-data-copy:has(#account-facts:empty):has(#account-status:empty) { display: none; }
.account-data #account-status { font-size: 10px; color: #9298aa; }
.account-data #account-status[data-error="true"] { color: #edb99b; }
.account-data-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex-shrink: 0; min-width: 124px; max-width: 100%; }
.account-connect { min-height: 32px; padding: 6px 12px; font-size: 11px; }
.account-data .text-button { min-height: 28px; padding: 4px 0; font-size: 11px; }
.account-data-copy > span:empty { display: none; }
/* Opt elements into this rule as the MVP scope is selected. */
html:not([data-designer="true"]) [data-design-only] { display: none !important; }
html[data-view-mode="mvp"] [data-mvp-hide] { display: none !important; }
html:not([data-view-mode="mvp"]) [data-mvp-only] { display: none !important; }
html:not([data-debug-mode="on"]) [data-debug-only] { display: none !important; }
.normal-pace-metric { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -2px 0 11px; }
.normal-pace-metric .pace-entry { min-width: 0; margin: 0; }
.normal-pace-metric .auto-pace-toggle { flex-shrink: 0; gap: 6px; margin-top: 0; white-space: nowrap; }
.credit .normal-pace-metric { flex-wrap: wrap; gap: 3px; margin: 10px 0 8px; }
.credit .normal-pace-metric .pace-entry { flex-shrink: 0; gap: 3px; margin: 0; }
.credit .normal-pace-metric .auto-pace-toggle { justify-content: flex-start; gap: 3px; margin-top: 0; font-size: 10px; }
.pace-reset { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 5px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #a7b6ca; cursor: pointer; }
.pace-reset:hover { color: #dbeaff; background: #ffffff09; border-color: #ffffff16; }
.pace-reset svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auto-pace-note { font-size: 10px; margin-top: 6px; }
.normal-pace-header + .auto-pace-note { margin: -6px 0 12px; }
.auto-pace-unavailable { color: #e5b98d; }
.pace-actual { margin-top: 8px; color: #b2bbc8; font-size: 10px; }
.pace-explainer { border-top: 1px solid var(--border); padding-top: 14px; }
.post-bank-pace { margin-top: 16px; padding: 12px; border-radius: 7px; background: #ffffff04; color: #acaec4; font-size: 11px; line-height: 1.6; }
.post-bank-pace > span { color: #d1d0df; }.post-bank-pace p { margin-top: 3px; font-size: 10px; }
.text-button { padding: 3px 0; border: 0; background: none; color: var(--mint); font-size: 11px; }
.credit { padding: 14px; margin-bottom: 14px; border: 1px solid #ffffff16; border-radius: 10px; background: #0d101b52; }
.credit-header { margin-bottom: 16px; }
.credit-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.credit-title h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; font-weight: 600; }
.credit-title h3::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--allowance-color); }
.credit-summary { min-height: 24px; margin: 0; cursor: pointer; list-style: none; }
.credit-summary::-webkit-details-marker { display: none; }
.credit-summary::after { content: ''; width: 6px; height: 6px; margin-right: 4px; flex-shrink: 0; border-right: 1.5px solid #a3a3b9; border-bottom: 1.5px solid #a3a3b9; transform: rotate(-45deg); }
.credit-disclosure[open] > .credit-summary { margin-bottom: 16px; }
.credit-disclosure[open] > .credit-summary::after { transform: rotate(45deg); }
.credit-admin-actions .credit-visibility { position: relative; display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; color: #fff; border-radius: 6px; cursor: pointer; }
.credit-visibility input[type=checkbox] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.credit-visibility svg, .credit-remove svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.credit-visibility .eye-slash { display: none; }
.credit-visibility input:not(:checked) + svg { color: #fff; }
.credit-visibility input:not(:checked) + svg .eye-pupil { display: none; }
.credit-visibility input:not(:checked) + svg .eye-slash { display: block; }
.credit-visibility:hover { background: #ffffff09; }
.credit-visibility:has(input:focus-visible) { outline: 2px solid #a9beff; outline-offset: 3px; }
.credit-header .field { margin-top: 0; }
.credit-timing > .field:last-child { margin-bottom: 0; }
.credit-expiry-lead { display: flex; align-items: center; gap: 8px; color: #afadc2; font-size: 11px; }
.credit-expiry-lead > span:first-child { flex: 1; }
.credit-expiry-lead input { flex: 0 0 58px; width: 58px !important; padding: 7px 8px !important; text-align: right; }
.credit .expiry-plan { margin-top: 8px; }
.credit-section-label { margin: 0; font-size: 10px; line-height: 1.4; font-weight: 600; color: #c4c2d5; }
.credit .allowance-pace > .credit-section-label { color: var(--allowance-color); }
.credit .field-help { font-size: 10px; line-height: 1.5; }
.credit-forecast { margin: 14px -14px -14px; padding: 12px 14px; border-top: 1px solid #ffffff10; border-radius: 0 0 10px 10px; background: #ffffff04; }
.credit-forecast > .credit-section-label { font-size: 9px; color: #a3a1b7; letter-spacing: .08em; text-transform: uppercase; }
.credit-forecast .pace-actual { margin-top: 6px; color: #a7a5b9; }
.credit-mini-pace { display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px 24px; align-items: center; gap: 8px; margin: 14px -14px 0; padding: 8px 14px; border-top: 1px solid #ffffff10; }
.credit-disclosure[open] + .credit-mini-pace { grid-template-columns: 18px minmax(0, 1fr) 18px; }
.credit-disclosure[open] + .credit-mini-pace .credit-max-usage { display: none; }
.credit-mini-pace svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.credit-max-usage { display: grid; place-items: center; width: 24px; height: 24px; padding: 2px; border: 1px solid transparent; border-radius: 5px; background: transparent; }
.credit-max-usage:hover:not(:disabled) { background: #ffffff0d; }
.credit-max-usage[aria-pressed=true] { border-color: #ffffff65; background: #ffffff18; }
.credit-max-usage:disabled { opacity: .35; cursor: default; }
.credit-mini-pace .credit-mini-slider { appearance: none; -webkit-appearance: none; width: 100%; height: 20px; margin: 0; padding: 0; background: transparent; accent-color: var(--allowance-color); }
.credit-mini-slider::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--allowance-color) var(--pace-fill, 0%), #ffffff33 var(--pace-fill, 0%)); }
.credit-mini-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border: 0; border-radius: 50%; background: var(--allowance-color); }
.credit-mini-slider::-moz-range-track { height: 3px; border-radius: 3px; background: #ffffff33; }
.credit-mini-slider::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--allowance-color); }
.credit-mini-slider::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--allowance-color); }
.credit-mini-pace + .credit-admin-actions { margin-top: 0; }
.credit-admin-actions { display: flex; align-items: center; justify-content: space-between; margin: 14px -14px -14px; padding: 6px 10px; border-top: 1px solid #ffffff10; }
.credit-remove { display: grid; place-items: center; width: 32px; height: 32px; padding: 7px; border-radius: 6px; background: none; border: 0; color: #8e8ba1; }
.credit-remove:hover { color: #edb5b5; }
.credit .field { margin-bottom: 11px; }
.credit-excluded { opacity: .55; }
.credit-status { display: block; font-size: 11px; color: var(--allowance-color); margin-top: 5px; line-height: 1.5; }
.saved-label { margin-top: 16px; margin-bottom: 10px; }
.button-row { display: flex; gap: 7px; }
.button-row .button { flex: 1; padding: 8px; }
.snapshots .field-help { margin-top: 13px; }
.import-label { position: relative; overflow: hidden; cursor: pointer; }
.import-label input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.timezone-note { color: #858298; font-size: 10px; padding: 4px 4px 16px; line-height: 1.5; }
.strategy-panel { padding: 19px; }
.strategy-options { display: flex; flex-wrap: wrap; gap: 6px; }
.strategy-options button { display: flex; align-items: center; gap: 7px; padding: 10px 11px; background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 12px; color: #9b99b0; }
.strategy-options button[aria-pressed=true] { background: #ffffff07; border-color: #ffffff18; color: #f2effb; }
.strategy-color { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.paced { background: var(--mint); }.constant { background: var(--orange); }.automatic { background: var(--violet); }
.strategy-description { font-size: 12px; line-height: 1.6; color: #a4a1b9; margin-top: 12px; max-width: 760px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); min-width: 0; margin: 0; }
.metric { padding: 1px 18px; border-left: 1px solid #ffffff13; }
.metric:first-child { padding-left: 2px; border-left: 0; }
.metric > span { font-size: 11px; color: #a8a5ba; }
.metric strong { display: block; font-size: 28px; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 8px 0 5px; }
.metrics-complete .metric strong { color: #efd077; }
.chart-panel { padding: 22px 22px 18px; border-radius: 24px; border-color: #f0eaff29; overflow: hidden; background: #14182366; box-shadow: inset 0 1px 0 #ffffff15, 0 12px 32px #080b211f; font-family: ui-rounded, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.chart-heading h2 { color: #6db5ff; font-weight: 500; font-size: 15px; }
.chart-heading { display: block; }
.chart-panel:has(.range-editor:not([hidden])) { position: relative; z-index: 2; overflow: visible; }
.chart-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.chart-range { position: relative; max-width: 100%; margin-left: auto; }
.range-toggle { gap: 8px; min-height: 36px; padding: 8px 10px; font-size: 11px; white-space: nowrap; }
.range-toggle svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.range-toggle .range-chevron { width: 12px; height: 12px; }
.range-editor { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: 320px; max-width: calc(100vw - 72px); padding: 16px; background: #171d2af5; border: 1px solid #ffffff26; border-radius: 12px; box-shadow: 0 15px 45px #0008; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.range-editor[hidden] { display: none; }
.range-editor > strong { display: block; margin-bottom: 14px; color: #edecf5; font-size: 13px; font-weight: 550; }
.range-editor .field { font-size: 12px; margin-top: 12px; }
.range-editor .field-help { margin: 10px 0 14px; }
.range-editor > .button { display: flex; margin-left: auto; min-height: 32px; padding: 6px 12px; font-size: 11px; }
.chart-heading .validation { margin: 0 0 14px; }
.chart-header-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; width: 100%; }
#results-content[data-invalid="true"] > :not(.timeline-workspace),
#results-content[data-invalid="true"] .chart-panel > :not(.chart-heading),
#results-content[data-invalid="true"] .chart-header-actions { display: none; }
#view-events { display: flex; width: max-content; max-width: 100%; margin: 12px auto; flex-shrink: 0; white-space: nowrap; min-height: 36px; }
#view-events-count { color: #a8a9bd; font-variant-numeric: tabular-nums; }
.chart-panel .section-caption { color: #cecbde; }
.section-caption { font-size: 11px; color: #9591a9; line-height: 1.6; margin-top: 5px; }
.chart-key { display: flex; flex-wrap: wrap; gap: 12px; font-size: 10px; color: #ded9ee; }
.chart-key span { display: flex; align-items: center; gap: 7px; }
.chart-key i { display: inline-block; width: 7px; height: 7px; }
.key-plan { width: 13px !important; height: 1.5px !important; background: #efd077; }
.key-bank { width: 34px; height: 18px; flex-shrink: 0; }
.key-bank text { fill: #171b23; font-size: 10px; font-weight: 500; font-family: inherit; }
.key-auto { background: #49a3ff; border-radius: 50%; }
.key-expiry { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: #94a3b8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chart-container { width: 100%; position: relative; border-radius: 16px; }
.chart { display: block; width: 100%; overflow: visible; touch-action: pan-y; }
.chart text { fill: #cecbde; font-size: 11px; font-family: inherit; }
.chart .chart-label { fill: #e8e3f2; font-size: 11px; }
.chart .reset-number { fill: #171b23; font-size: 11px; font-weight: 500; }
.chart .reset-label { fill: #f5f4fc; font-size: 11px; font-weight: 500; }
.chart .expiry-line { stroke: #94a3b8; }
.chart .expiry-symbol { fill: none; stroke: #94a3b8; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.chart .expiry-number { fill: #c5bdd3; font-size: 10px; }
.chart-caption { color: #c7bed8; font-size: 10px; line-height: 1.6; margin: 5px 0 12px; }
.chart-tooltip { position: absolute; max-width: min(280px, 95%); background: #222431f5; border: 1px solid #ffffff20; border-radius: 8px; padding: 12px; pointer-events: none; color: #e9e6f3; font-size: 11px; line-height: 1.8; box-shadow: 0 8px 28px #0007; z-index: 2; }
.chart-tooltip strong { font-size: 11px; font-weight: 500; display: block; margin-bottom: 3px; }
/* The grid matches the charts' 44px left and 16px right plot insets.
   Extend the range by half its thumb so its centre reaches both endpoints. */
.inspection { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 6px 0; align-items: center; border-top: 1px solid var(--border); padding: 14px 16px 0 0; margin-top: 3px; }
.inspection label { display: flex; align-items: center; color: #fff; }
.inspection label svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.inspection input[type=range] { appearance: none; -webkit-appearance: none; width: calc(100% + 24px); height: 24px; margin: 0 -12px; background: transparent; }
.inspection input::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--mint) var(--inspection-progress, 0%), #ffffff29 var(--inspection-progress, 0%)); }
.inspection input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 24px; height: 16px; margin-top: -4px; border: 0; border-radius: 9px; background: #fff; }
.inspection input::-moz-range-track { height: 8px; border-radius: 8px; background: #ffffff29; }
.inspection input::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--mint); }
.inspection input::-moz-range-thumb { width: 24px; height: 16px; border: 0; border-radius: 9px; background: #fff; }
.inspection output { grid-column: 1/-1; font-size: 11px; color: #aaa5bf; line-height: 1.6; min-height: 18px; }
.inline-note { color: #d3b88d; font-size: 11px; line-height: 1.6; padding-top: 12px; }
.comparison-panel, .events-panel { margin-top: 18px; padding: 21px 22px 8px; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 11px; text-align: left; }
th { font-weight: 400; color: #8f8ba2; font-size: 10px; padding: 0 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 14px 10px; border-bottom: 1px solid var(--border); color: #c8c3d8; font-variant-numeric: tabular-nums; line-height: 1.5; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { color: #e6e0f0; }
.comparison-panel td:not(:first-child), .comparison-panel th:not(:first-child) { text-align: right; }
.comparison-panel .strategy-color { margin-right: 8px; }
.selected-row td { color: #ece9f7; }
.comparison-note { padding: 12px 0 14px; color: #a5bdb7; font-size: 11px; line-height: 1.65; border-top: 1px solid var(--border); }
.credit-outcomes { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 11px; color: #a8b9b5; margin-bottom: 17px; }
.event-kind { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 7px; background: #a2a0b7; }
.event-kind.bank { background: var(--mint); }.event-kind.expiry { background: #d4a1a1; }
html.events-modal-open { overflow: hidden; }
.events-dialog { width: 760px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 48px); margin: auto; padding: 0; color: #edecf5; background: #171b27f2; border: 1px solid #ffffff26; border-radius: 18px; box-shadow: 0 24px 90px #0008; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); overflow: hidden; }
.events-dialog[open] { display: flex; flex-direction: column; }
.events-dialog::backdrop { background: #070a14a6; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.events-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid #ffffff12; }
.events-dialog-header h2 { font-size: 18px; font-weight: 550; }
.events-dialog-header .section-caption { line-height: 1.7; }
.events-dialog-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 9px; border: 1px solid #ffffff18; border-radius: 8px; background: #ffffff06; color: #c9c7db; cursor: pointer; }
.events-dialog-close:hover { background: #ffffff12; color: #fff; }
.events-dialog-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.events-dialog-content { min-height: 0; overflow: auto; padding: 20px 24px; }
.events-dialog table { min-width: 540px; }
.events-dialog .credit-outcomes { color: #bdc9d2; line-height: 1.6; }
#events-detail .table-scroll:focus-visible { outline: 2px solid #a9beff; outline-offset: -2px; border-radius: 4px; }
@media (max-width: 1100px) { .chart-header-actions { width: 100%; justify-content: space-between; } }
@media (max-width: 540px) { #view-events { margin-left: auto; }.events-dialog-header { padding: 18px 16px 14px; }.events-dialog-content { padding: 16px; }.events-dialog-header h2 { font-size: 16px; } }
.assumptions { margin-top: 18px; padding: 17px 21px; color: #9e9ab2; font-size: 11px; line-height: 1.8; }
.assumptions summary { cursor: pointer; color: #bbb5ce; }
.assumptions ul { padding-left: 18px; margin-bottom: 0; }
.assumptions li { padding: 3px 0; }
.message, .validation { border: 1px solid #adcdbf30; background: #1b2928; color: #d0e5df; border-radius: 8px; padding: 12px 16px; font-size: 12px; margin-bottom: 18px; line-height: 1.6; }
.message { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; }
#message-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.message-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 6px; color: #d0e5df; background: transparent; }
.message-close:hover { background: #ffffff12; }
.message-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.validation { border-color: #d9a59a40; background: #2a1e24; color: #f0c7bd; }
.app-footer { display: flex; justify-content: space-between; gap: 20px; padding: 29px 0 32px; margin-top: 15px; border-top: 1px solid var(--border); color: #78758d; font-size: 10px; line-height: 1.6; }
html[data-designer="true"] .app-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
html[data-designer="true"] .app-footer > span { justify-self: end; text-align: right; }
.footer-design-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
@media (max-width: 790px) {
  html[data-designer="true"] .app-footer { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; }
  html[data-designer="true"] .app-footer > span { justify-self: center; text-align: center; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width: 1400px) { .workspace, .app-header { grid-template-columns: 330px minmax(0,1fr); gap: 28px; } }
@media (max-width: 1100px) { .app-shell { padding: 0 24px; }.workspace, .app-header { grid-template-columns: 284px minmax(0,1fr); gap: 18px; }.chart-panel, .strategy-panel, .comparison-panel, .events-panel { padding-left: 16px; padding-right: 16px; }.chart-heading { align-items: start; flex-direction: column; }.metric strong { font-size: 26px; } }
@media (max-width: 790px) { .workspace, .app-header { grid-template-columns: minmax(0,1fr); }.app-header { gap: 20px; padding: 22px 0; }.editor { display: grid; grid-template-columns: minmax(0,1fr); }.page-heading { align-items: start; }.timezone-note { margin-top: 14px; }.strategy-options { gap: 3px; }.strategy-options button { padding: 10px 8px; font-size: 11px; }.metrics { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; }.metric:nth-child(3) { border-left: 1px solid #ffffff13; padding-left: 18px; }.metric strong { font-size: 23px; } }
@media (max-width: 540px) { .app-shell { padding: 0 16px; }.page-heading { flex-direction: column; gap: 17px; padding: 27px 0 22px; }.lead { font-size: 13px; }.editor form { display: block; }.input-panel { margin-bottom: 12px; padding: 17px; }.snapshots { margin-top: 0; }.field { font-size: 12px; }input:not([type=range]):not([type=checkbox]):not([type=file]), select { font-size: 16px; padding: 10px; }.button { min-height: 40px; }.strategy-options button { flex: 1 1 100%; justify-content: flex-start; font-size: 12px; min-height: 42px; }.strategy-panel { padding: 17px; }.metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px 0; }.metric:nth-child(3) { border: 0; padding-left: 2px; }.metric { padding-right: 8px; }.metric strong { font-size: 27px; }.chart-panel { padding: 18px 10px 15px; }.chart-heading { padding: 0 5px; }.chart-key { gap: 13px; }.comparison-panel, .events-panel { padding: 18px 14px 6px; }th,td { padding-right: 8px; padding-left: 8px; }.comparison-panel table { min-width: 420px; }.events-panel table { min-width: 540px; }.inspection { margin: 0; }.app-footer { flex-direction: column; gap: 6px; }.credit-remove { min-height: 36px; }.text-button { min-height: 32px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 790px) {
  .results > .validation, #results-content > .timeline-workspace, #results-content > .comparison-panel, #results-content > .events-panel, #results-content > .assumptions { grid-column: 1 / -1; }
}

/* Original 300px Pacing Guidance design; source SHA-256 229fca54040221b4c564c70e187750b78083bffbc773c3c88de3753b04d61db6. */

  :is(#planner-widget, #planner-devices) {
    --rt-ink: light-dark(#171b23, #f5f4fc);
    --rt-dim: light-dark(#5f6670, #cecbde);
    --rt-card: #d2def517;
    --rt-rule: light-dark(#dfe4eb, #e5e9ff26);
    --rt-current: light-dark(#326bd1, #49a3ff);
    --rt-reset-one: light-dark(#007e8f, #61dfeb);
    --rt-reset-two: light-dark(#a64d11, #ffb373);
    --rt-reset-line: light-dark(#b8870b, #efd077);
    --rt-badge-ink: light-dark(#ffffff, #171b23);
    --rt-auto: var(--rt-current);
    --rt-expiry-line: #4a4a4a;
    /* Iteration controls: expiry weight and redeemed-allowance fill. */
    --rt-expiry-width: 1.5;
    --rt-area-opacity: .17;
  }
  :is(#planner-widget, #planner-devices) .rt-stage {
    color-scheme: dark;
    width: calc(var(--widget-width) + 8px);
    padding: 20px 4px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border-radius: 28px;
    overflow: hidden;
    background: transparent;
  }
  /* Fixed logical sizes: the surrounding preview scrolls instead of shrinking. */
  :is(#planner-widget, #planner-devices) .rt-widget { width: var(--widget-width); height: var(--widget-height); padding: 14px; border-radius: 24px; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; background: var(--rt-card); color: var(--rt-ink); font: 400 14px/1.35 ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; backdrop-filter: blur(22px) saturate(1.12); -webkit-backdrop-filter: blur(22px) saturate(1.12); box-shadow: inset 0 0 0 1px #f0eaff29, inset 0 1px 0 #ffffff0d, 0 12px 32px #080b211f; }
  :is(#planner-widget, #planner-devices) .rt-widget * { box-sizing: border-box; }
  :is(#planner-widget, #planner-devices) .rt-head { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; gap: 8px; }
  :is(#planner-widget, #planner-devices) .rt-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; letter-spacing: -.15px; white-space: nowrap; color: #ffffff; }
  :is(#planner-widget, #planner-devices) .rt-figure { margin: 14px 0 0; position: relative; flex: 1 1 0; min-height: 0; }
  :is(#planner-widget, #planner-devices) .rt-chart { display: block; width: 100%; overflow: visible; }
  :is(#planner-widget, #planner-devices) .rt-chart text { fill: var(--rt-ink); font-family: inherit; font-size: 12px; font-weight: 400; }
  :is(#planner-widget, #planner-devices) .rt-chart .rt-muted { fill: var(--rt-dim); }
  :is(#planner-widget, #planner-devices) .rt-chart .rt-small { font-size: 11px; }
  :is(#planner-widget, #planner-devices) .rt-chart .rt-label { font-weight: 500; }
  :is(#planner-widget, #planner-devices) .rt-chart .rt-number { font-size: 12px; font-weight: 500; fill: var(--rt-badge-ink); }
  :is(#planner-widget, #planner-devices) .rt-chart .rt-current { fill: var(--rt-current); font-size: 11px; font-weight: 500; }
  :is(#planner-widget, #planner-devices) .rt-chart .rt-area { opacity: var(--rt-area-opacity); }
  :is(#planner-widget, #planner-devices) .rt-chart .rt-expiry-line { stroke-width: var(--rt-expiry-width); stroke-linecap: butt; }
  :is(#planner-widget, #planner-devices) .rt-deadline { position: absolute; width: 58px; text-align: center; color: var(--rt-reset-one); pointer-events: none; }
  :is(#planner-widget, #planner-devices) .rt-deadline[data-reset="2"] { color: var(--rt-reset-two); }
  :is(#planner-widget, #planner-devices) .rt-expiry-symbol { display: flex; justify-content: center; align-items: center; gap: 5px; width: max-content; height: 17px; margin-inline: auto; }
  :is(#planner-widget, #planner-devices) .rt-expiry-symbol svg { color: #f5f4fc; width: 17px; height: 17px; stroke-width: 2; }
  :is(#planner-widget, #planner-devices) .rt-expiry-caption { display: block; margin-top: 4px; font-size: 11px; color: var(--rt-dim); line-height: 1.2; }
  :is(#planner-widget, #planner-devices) .rt-expiry-date { display: block; margin-top: 2px; color: var(--rt-ink); font-size: 11px; font-weight: 500; }

.timeline-workspace { margin-bottom: 0; }
.timeline-workspace > .chart-panel { min-width: 0; }
.widget-gallery { margin: 0 0 28px; padding: 24px 0; border-block: 1px solid var(--border); }
html[data-view-mode="mvp"] .widget-gallery { border-bottom: 0; }
.widget-gallery-heading { align-items: end; margin-bottom: 10px; flex-wrap: wrap; }
.widget-gallery-heading h2 { font-size: 17px; font-weight: 550; }
.widget-context { display: grid; gap: 6px; font-size: 10px; color: #afadc2; }
.widget-context select { width: auto; }
.widget-size-grid { display: flex; flex-wrap: wrap; gap: 28px 20px; align-items: flex-start; margin-top: 22px; }
.widget-size-card { width: calc(var(--widget-width) + 8px); max-width: 100%; flex: 0 0 auto; min-width: 0; }
.widget-size-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 10px; }
.widget-size-heading h3 { margin: 0; font-size: 12px; font-weight: 550; color: #ece9f7; }
.widget-size-heading span { font-size: 10px; color: #a3a0b5; white-space: nowrap; font-variant-numeric: tabular-nums; }
.widget-size-card > .section-caption { margin: 9px 3px 0; font-size: 10px; }
.widget-preview-scroll { overflow-x: auto; border-radius: 28px; scrollbar-width: thin; scrollbar-color: #9992b45c transparent; }
.widget-preview-scroll:focus-visible { outline: 2px solid #a9beff; outline-offset: 4px; }
:is(#planner-widget, #planner-devices) .rt-chart .expiry-symbol { stroke: #f5f4fc; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(#planner-widget, #planner-devices) .rt-widget:is([data-widget-size=small], [data-widget-size=medium]) { padding: 12px; border-radius: 22px; }
:is(#planner-widget, #planner-devices) .rt-widget:is([data-widget-size=small], [data-widget-size=medium]) .rt-figure { margin-top: 8px; }
:is(#planner-widget, #planner-devices) .rt-widget[data-widget-size=small] .rt-title { font-size: 12px; }
:is(#planner-widget, #planner-devices) .rt-chart .rt-compact-number { font-size: 8px; }
:is(#planner-widget, #planner-devices) .rt-chart .rt-compact-text { font-size: 10px; }
:is(#planner-widget, #planner-devices) .rt-chart .rt-pace-value { font-size: 28px; font-weight: 500; letter-spacing: -.7px; }
:is(#planner-widget, #planner-devices) [data-widget-size=small] .rt-pace-value { font-size: 24px; }


.preview-toggle { display: flex; width: max-content; max-width: 100%; margin: 0 auto 28px; padding: 4px; border: 1px solid #ffffff3d; border-radius: 28px; background: #ffffff11; box-shadow: inset 0 1px 0 #ffffff2e, 0 6px 24px #00000026; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.preview-toggle button { display: inline-flex; align-items: center; justify-content: center; min-width: 106px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 24px; background: transparent; color: #ffffffa8; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.preview-toggle button[aria-selected=true] { border-color: #ffffff33; background: #ffffff24; color: #fff; box-shadow: inset 0 1px 0 #ffffff1f; }
.preview-toggle button:hover { color: #fff; }
.preview-toggle button:focus-visible { outline: 2px solid #54f0e4; outline-offset: 2px; }
#widget-preview-panel[hidden], #device-preview-panel[hidden] { display: none; }
.device-gallery { --mac-device-width: 65%; position: relative; width: 100%; max-width: 1100px; aspect-ratio: 1.75; margin: 16px auto calc(28px + var(--device-overflow-bottom, 0px)); }
.device-mockup { position: absolute; width: calc(var(--device-width-ratio) * var(--mac-device-width)); min-width: 0; margin: 0; }
.device-mac { left: 15.442%; top: 10%; z-index: 1; }
.device-ipad { left: 47.442%; top: 0; z-index: 2; }
.device-iphone { left: 63.442%; top: 32%; z-index: 3; }
.device-homeview { left: 15.442%; bottom: 0; z-index: 4; aspect-ratio: 632 / 754; overflow: hidden; }
.device-homeview > img { position: absolute; width: 174.0506%; max-width: none; height: auto; left: -37.0253%; top: -23.7401%; }
.device-homeview .device-homeview-screen { position: absolute; left: 7.2785%; top: 5.9682%; width: 85.7595%; overflow: hidden; border-radius: 15%; }
.device-homeview-screen .device-canvas { display: grid; place-items: center; }
.device-homeview-screen .rt-widget { --rt-card: #111827bf; }
.device-duo { left: 1%; bottom: -2%; z-index: 5; }
.duo-model { display: block; width: 1000px; height: 700px; filter: drop-shadow(0 12px 12px #0006); }
.duo-standby { position: absolute; top: 0; left: 0; width: 680px; height: 467px; transform-origin: top left; transform: matrix(1.07441630,0.00000000,0.00000000,1.07613588,134.69846547,98.72234464); border-radius: 42px; background: #030303; display: flex; justify-content: center; align-items: center; gap: 26px; overflow: hidden; }
.duo-widget-slot { flex: 0 0 287px; width: 287px; height: 287px; }
#planner-devices .duo-widget-slot .rt-widget { transform: scale(1.6882353); transform-origin: top left; --rt-card: #19191b; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#planner-devices .weekly-budget-widget .rt-title { color: #cf98e9; }
.weekly-budget-remaining { color: #cf98e9; font-size: 13px; font-weight: 700; margin-top: 1px; }
.weekly-budget-bars { display: flex; flex: 1; min-height: 0; gap: 3px; margin-top: 4px; }
.weekly-budget-day { display: flex; flex: 1; min-width: 0; flex-direction: column; text-align: center; color: #ffffff76; font-size: 9px; font-weight: 700; line-height: 11px; }
.weekly-budget-day.is-current { color: #fff; }
.weekly-budget-bar { position: relative; flex: 1; min-height: 0; margin-top: 2px; overflow: hidden; border-radius: 2px; background: #ffffff0e; }
.weekly-budget-bar::before, .weekly-budget-bar::after { content: ''; position: absolute; bottom: var(--valid-bottom); left: 0; width: 100%; }
.weekly-budget-bar::before { height: var(--valid-height); background: #ffffff1c; }
.weekly-budget-bar::after { height: var(--used-height); background: linear-gradient(#d99ef4, #b985cd); }
.weekly-budget-bar.is-ahead::after { background: linear-gradient(#f4c775, #bf9556); }
.weekly-budget-day.is-current .weekly-budget-bar { outline: 1px solid #ffffffa6; outline-offset: -1px; }
.weekly-budget-bar i { position: absolute; z-index: 1; left: 0; width: 100%; height: 1px; background: #b9ffff; }
.weekly-budget-footer { margin-top: 5px; white-space: nowrap; color: #ffffff9e; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: -.3px; }
@media (min-width: 621px) {
  .device-gallery[data-layout="devices"] { aspect-ratio: 848 / 484.5703; }
  /* Hunter's supplied desktop composition, in canvas percentages. */
  .device-gallery[data-layout="devices"] > .device-mac { left: 2.3438%; top: 27.9226%; width: 64.9985%; z-index: 1; }
  .device-gallery[data-layout="devices"] > .device-ipad { left: 40.9198%; top: .9416%; width: 37.1149%; z-index: 2; }
  .device-gallery[data-layout="devices"] > .device-iphone { left: 69.7966%; top: 44.7078%; width: 14.8871%; z-index: 3; }
  .device-gallery[data-layout="devices"] > .device-homeview { left: 34.7509%; top: 36.3982%; bottom: auto; width: 30.4632%; z-index: 4; }
  .device-gallery[data-layout="devices"] > .device-duo { left: 4.6249%; top: 66.3539%; bottom: auto; width: 32.0211%; z-index: 5; }
}
.device-layout-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -12px auto 12px; }
.device-layout-tools textarea { flex-basis: 100%; width: 100%; min-height: 180px; padding: 12px; border: 1px solid #ffffff1b; border-radius: 8px; color: inherit; background: #10121d; font: 12px/1.5 ui-monospace, monospace; }
.device-gallery[data-movable=true] .device-mockup { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.device-gallery[data-movable=true] .device-mockup * { pointer-events: none; }
.device-gallery[data-movable=true] .device-mockup:focus-visible { outline: 1px solid #ffffff9c; outline-offset: 5px; border-radius: 8px; }
.device-gallery[data-movable=true] .device-mockup.is-dragging { cursor: grabbing; z-index: 10; }
.device-watch { width: 10%; left: 88%; top: 64%; z-index: 4; }
.device-viewport { position: relative; width: 100%; }
.device-canvas { position: absolute; top: 0; left: 0; transform-origin: top left; isolation: isolate; }
.device-shell { position: absolute; width: var(--device-screen-width); height: var(--device-screen-height); box-sizing: content-box; overflow: visible; border: 10px solid #16191f; background: #090c12; box-shadow: 0 0 0 1px #a4b0c04d, inset 0 0 0 1px #ffffff20, 0 24px 60px #0005; }
.device-screen { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; height: 100%; padding: 20px; overflow: hidden; border-radius: inherit; background: radial-gradient(ellipse at 5% 40%, #4269b75c, transparent 65%), radial-gradient(ellipse at 90% 90%, #3425898a, transparent 65%), #0c1424; }
.device-status { flex: 0 0 auto; color: #e4ebf5; font-size: 12px; line-height: 18px; font-weight: 600; }
.device-content { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
.device-mac .device-shell { top: 20px; left: 96px; border-width: 16px; border-radius: 26px; }
.device-mac .device-shell::after { content: ''; position: absolute; bottom: -46px; left: -96px; right: -96px; height: 30px; border: 1px solid #a1a9b257; border-radius: 4px 4px 40px 40px; background: linear-gradient(#777f8b, #383f4a 45%, #232833); box-shadow: 0 8px 20px #0005; }
.device-mac .device-screen { padding: 40px 32px 32px; border-radius: 10px; }
.device-mac .device-content { align-items: flex-start; justify-content: flex-start; }
.device-mac .device-status { position: absolute; top: 12px; left: 18px; color: #8793a7; font-size: 12px; letter-spacing: 5px; }
.device-ipad .device-shell { top: 0; left: 0; border-width: 18px; border-radius: 40px; }
.device-ipad .device-screen { padding: 24px; border-radius: 22px; }
.device-ipad .device-content { align-items: flex-start; justify-content: flex-start; }
.device-iphone .device-shell { top: 0; left: 0; border-width: 8px; border-radius: 48px; }
.device-iphone .device-screen { border-radius: 40px; }
.device-iphone .device-screen::before { content: ''; position: absolute; top: 10px; left: 50%; width: 94px; height: 26px; transform: translateX(-50%); border-radius: 20px; background: #05070c; }
.device-iphone .device-screen::after { content: ''; position: absolute; bottom: 9px; left: 50%; width: 90px; height: 4px; transform: translateX(-50%); border-radius: 4px; background: #e7eefa99; }
.device-iphone .device-status { font-size: 15px; line-height: 20px; }
.device-iphone .device-content { justify-content: flex-start; padding-top: 36px; }
.device-watch .device-shell { top: 84px; left: 10px; border-width: 10px; border-radius: 48px; }
.device-watch .device-shell::before { content: ''; position: absolute; z-index: -1; top: -82px; bottom: -82px; left: 25px; right: 25px; border: 1px solid #747c893b; border-radius: 34px; background: linear-gradient(90deg, #20242d, #343a46 48%, #20242d); }
.device-watch .device-shell::after { content: ''; position: absolute; top: 58px; right: -17px; width: 9px; height: 28px; border-radius: 5px; background: #424b59; box-shadow: inset 1px 0 0 #ffffff3d; }
.device-watch .device-screen { padding: 8px; gap: 4px; border-radius: 38px; background: #0a111c; }
.device-watch .device-status { text-align: right; font-size: 10px; }
@media (max-width: 620px) {
  .device-gallery { --mac-device-width: 92%; aspect-ratio: .85; }
  .device-mac { left: 4%; top: 0; }
  .device-ipad { left: 16%; top: 36%; }
  .device-iphone { left: 58%; top: 44%; }
  .device-gallery:has(.device-homeview) { aspect-ratio: .8; }
  .device-homeview { left: 4%; }
  .device-watch { width: 15%; left: 78%; top: 68%; }
}
@media (max-width: 620px) {
  .preview-toggle button { min-width: 0; padding-inline: 14px; font-size: 12px; }
}

/* The public planner and local edition share the same interface. */
.app-footer a { text-decoration: none; }
.page-heading { padding-top: 25px; }
.page-heading h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 530; }
.appearance-toggle { --allowance-color: #7ecdc4; margin: 0 0 20px; justify-content: space-between; }
#path-style-controls { border: 0; padding: 0; margin: 0; min-width: 0; }
#path-style-controls:disabled { opacity: .4; }
.appearance-field { display: block; margin: 14px 0 17px; font-size: 11px; color: #cbcbd8; }
.appearance-field > span { display: flex; justify-content: space-between; margin-bottom: 9px; }
.appearance-field output { color: var(--muted); font-variant-numeric: tabular-nums; }
.appearance-field input { display: block; margin: 0; }
.chart-key .key-paths { border-top: 1px dashed #83c2df; background: none; height: 0; }