:root{color-scheme:light dark;--font-ui:Manrope, ui-sans-serif, system-ui, sans-serif;--font-mono:Iosevka, "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;--space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:8px;--radius-md:14px;--radius-lg:22px;font-family:var(--font-ui)}*{box-sizing:border-box}html,body,#app{min-height:100%}html{background:oklch(90% .012 82)}body{color:oklch(24% .012 82);font-kerning:normal;text-rendering:optimizelegibility;background:oklch(90% .012 82);min-height:100vh;margin:0}button,input{font:inherit}button{appearance:none}button:focus-visible,input:focus-visible,.sheet-grid:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}code,.formula-input,.cell-inline-input,.formula-cell-address,.formula-last-edit,.cell-address,.cell-value,.cell-formula,.cell-state,.cell-dirty,.keycap,.toggle-badge,.trace-count,.cell-chip,.example-chip,.empty-chip,.snapshot-result,.fact-value{font-family:var(--font-mono);font-variant-ligatures:none;font-variant-numeric:tabular-nums}.loading-shell{text-align:center;min-height:100vh;padding:var(--space-xl);color:oklch(24% .012 82);background:oklch(90% .012 82);place-items:center;display:grid}.loading-title,.loading-note{margin:0}.loading-title{font-size:1.05rem;font-weight:650}.loading-note{margin-top:var(--space-xs);color:oklch(48% .014 82)}.app-shell{--page:oklch(97.6% .004 92);--page-deep:oklch(95.7% .005 92);--paper:oklch(98.8% .0025 92);--paper-soft:oklch(97.1% .0035 92);--paper-hover:oklch(95.1% .005 92);--ink:oklch(25% .012 82);--ink-soft:oklch(38% .012 82);--muted:oklch(50% .014 82);--line:oklch(88.5% .005 92);--line-strong:oklch(78% .007 92);--accent:oklch(52% .08 285);--accent-soft:color-mix(in oklch, var(--accent), transparent 86%);--success:oklch(47% .08 148);--warning:oklch(57% .08 85);--danger:oklch(53% .12 25);--focus:oklch(55% .11 285);--shadow:0 28px 90px color-mix(in oklch, var(--ink), transparent 84%);background:var(--page);width:100vw;height:100vh;color:var(--ink);overflow:hidden}.app-shell--night{color-scheme:dark;--page:oklch(19% .014 280);--page-deep:oklch(15% .012 280);--paper:oklch(23.5% .014 280);--paper-soft:oklch(28.5% .014 280);--paper-hover:oklch(32% .016 280);--ink:oklch(89% .012 286);--ink-soft:oklch(74% .018 286);--muted:oklch(62% .018 286);--line:oklch(36% .02 280);--line-strong:oklch(46% .025 280);--accent:oklch(70% .09 292);--accent-soft:color-mix(in oklch, var(--accent), transparent 84%);--success:oklch(72% .11 148);--warning:oklch(78% .09 86);--danger:oklch(72% .13 24);--focus:oklch(74% .1 292);--shadow:0 30px 92px oklch(0% none none/.42)}.panel-rail{bottom:var(--space-sm);z-index:20;gap:var(--space-xs);max-width:calc(50vw - 1.5 * var(--space-sm));border:1px solid color-mix(in oklch, var(--line-strong), transparent 20%);background:color-mix(in oklch, var(--paper), transparent 18%);box-shadow:0 18px 52px color-mix(in oklch, var(--ink), transparent 88%);backdrop-filter:blur(16px);border-radius:999px;align-items:center;padding:4px;display:flex;position:fixed;overflow-x:auto}.panel-rail--left{left:var(--space-sm)}.panel-rail--right{right:var(--space-sm)}.demo-intro{top:var(--space-md);right:var(--space-md);z-index:12;gap:var(--space-xs);width:min(360px, calc(100vw - 2 * var(--space-md)));border:1px solid color-mix(in oklch, var(--line-strong), transparent 24%);border-radius:var(--radius-lg);padding:var(--space-sm);background:color-mix(in oklch, var(--paper), transparent 10%);box-shadow:0 18px 52px color-mix(in oklch, var(--ink), transparent 88%);backdrop-filter:blur(16px);display:grid;position:fixed}.demo-intro-kicker,.demo-intro-title,.demo-intro-copy,.snapshot-panel-help{margin:0}.demo-intro-kicker{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;font-size:.68rem;font-weight:700}.demo-intro-title{color:var(--ink);letter-spacing:-.018em;font-size:.98rem;line-height:1.18}.demo-intro-copy,.snapshot-panel-help{color:var(--ink-soft);font-size:.82rem;line-height:1.45}.status-line,.formula-cell-label,.example-label,.key-label,.toggle-label,.inspector-title p,.trace-bucket-help,.fact-label,.snapshot-state,.snapshot-side-label,.snapshot-result-status{color:var(--muted);font-size:.82rem;line-height:1.45}.status-line{gap:var(--space-xs);border:1px solid color-mix(in oklch, var(--line), transparent 18%);background:color-mix(in oklch, var(--paper), transparent 18%);backdrop-filter:blur(14px);border-radius:999px;flex-wrap:wrap;justify-content:center;align-items:center;min-width:0;padding:.5rem .72rem;display:flex}.status-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.status-line--error{border-color:color-mix(in oklch, var(--danger), var(--line) 45%);color:var(--danger)}.status-error{color:var(--danger)}.panel-controls,.formula-actions,.example-chips,.keyboard-hint,.cell-chip-row{gap:var(--space-xs);flex-wrap:wrap;align-items:center;display:flex}.panel-controls{justify-content:space-between}.quiet-button,.primary-action,.example-chip,.cell-chip,.appearance-option{border:1px solid var(--line);background:color-mix(in oklch, var(--paper), transparent 16%);min-height:38px;color:var(--ink-soft);cursor:pointer;border-radius:999px;padding:.48rem .78rem;transition:transform .16s cubic-bezier(.22,1,.36,1),border-color .16s cubic-bezier(.22,1,.36,1),background-color .16s cubic-bezier(.22,1,.36,1),color .16s cubic-bezier(.22,1,.36,1)}.quiet-button:hover,.primary-action:hover:not(:disabled),.example-chip:hover,.cell-chip:hover,.appearance-option:hover{border-color:var(--line-strong);background:var(--paper-hover);color:var(--ink);transform:translateY(-1px)}.quiet-button:active,.primary-action:active:not(:disabled),.example-chip:active,.cell-chip:active,.appearance-option:active{transform:translateY(0)}.primary-action{border-color:color-mix(in oklch, var(--accent), var(--line) 28%);background:color-mix(in oklch, var(--accent), transparent 78%);color:var(--ink);font-weight:650}.primary-action:disabled{cursor:not-allowed;opacity:.48}.danger-action:hover{border-color:color-mix(in oklch, var(--danger), var(--line) 30%);color:var(--danger)}.overlay-toggle{gap:var(--space-xs);align-items:center;display:inline-flex}.toggle-badge,.trace-count{background:color-mix(in oklch, var(--ink), transparent 92%);min-width:1.45rem;min-height:1.45rem;color:var(--muted);border-radius:999px;place-items:center;padding:0 .4rem;font-size:.72rem;display:grid}.overlay-toggle.is-active,.appearance-option.is-active{border-color:color-mix(in oklch, var(--accent), var(--line) 32%);background:var(--accent-soft);color:var(--ink)}.appearance-switch{border:1px solid var(--line);background:color-mix(in oklch, var(--paper), transparent 20%);border-radius:999px;gap:2px;padding:2px;display:inline-flex}.appearance-option{background:0 0;border-color:#0000;min-height:34px;padding:.38rem .62rem}.sheet-workspace{width:100vw;height:100vh;min-height:0;margin:0;display:grid}.formula-bar{gap:var(--space-sm);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-sm);background:color-mix(in oklch, var(--paper), transparent 10%);box-shadow:0 14px 44px color-mix(in oklch, var(--ink), transparent 92%);grid-template-columns:minmax(8.5rem,auto) minmax(18rem,1fr) auto;align-items:stretch;display:grid}.formula-cell{border:1px solid color-mix(in oklch, var(--line), transparent 20%);border-radius:var(--radius-md);padding:var(--space-xs) var(--space-sm);background:color-mix(in oklch, var(--paper-soft), transparent 26%);align-content:center;gap:2px;display:grid}.formula-cell-address{color:var(--accent);font-size:1.05rem;font-weight:650}.formula-last-edit{max-width:16rem;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;overflow:hidden}.formula-input{border:1px solid var(--line);border-radius:var(--radius-md);width:100%;min-height:58px;padding:0 var(--space-md);background:color-mix(in oklch, var(--paper), transparent 6%);color:var(--ink);font-size:clamp(1rem,1.4vw,1.2rem)}.formula-input::placeholder{color:color-mix(in oklch, var(--muted), transparent 26%)}.formula-actions{justify-content:end}.example-strip{gap:var(--space-sm);padding:0 var(--space-xs) var(--space-2xs);grid-column:1/-1;grid-template-columns:auto minmax(0,1fr);align-items:center;display:grid}.example-chips{flex-wrap:nowrap;padding-bottom:2px;overflow-x:auto}.example-chip,.cell-chip,.empty-chip{white-space:nowrap;min-height:32px;padding:.34rem .58rem;font-size:.82rem}.sheet-stage{align-items:stretch;min-height:0;display:grid;position:relative}.keyboard-hint{margin-bottom:var(--space-xs);opacity:.88;justify-content:end;justify-self:end}.keyboard-hint--panel{opacity:1;justify-content:start;justify-self:start;margin-bottom:0}.key-hint{border:1px solid color-mix(in oklch, var(--line), transparent 18%);background:color-mix(in oklch, var(--paper), transparent 10%);backdrop-filter:blur(10px);border-radius:999px;align-items:center;gap:6px;padding:.28rem .46rem;display:inline-flex}.keycap{color:var(--ink-soft);font-size:.72rem}.sheet-grid{background:var(--line);width:100vw;height:100vh;min-height:0;box-shadow:none;border:0;border-radius:0;grid-template-rows:clamp(30px,3.4vw,38px) repeat(50,minmax(34px,40px));grid-template-columns:clamp(32px,3.4vw,44px) repeat(50,minmax(64px,72px));align-content:start;gap:1px;display:grid;overflow:auto}.sheet-corner,.sheet-column-header,.sheet-row-header{background:color-mix(in oklch, var(--paper-soft), transparent 8%);color:var(--muted);font-family:var(--font-mono);letter-spacing:.04em;place-items:center;font-size:.74rem;display:grid}.sheet-corner{z-index:6;position:sticky;top:0;left:0}.sheet-column-header{z-index:5;position:sticky;top:0}.sheet-row-header{z-index:4;position:sticky;left:0}.grid-cell{min-width:0;min-height:34px;padding:0 var(--space-xs);background:var(--paper);color:var(--ink);text-align:right;cursor:pointer;border:0;border-radius:0;align-items:center;transition:background-color .16s cubic-bezier(.22,1,.36,1),box-shadow .16s cubic-bezier(.22,1,.36,1),color .16s cubic-bezier(.22,1,.36,1);display:grid;position:relative}.grid-cell:hover{background:var(--paper-hover)}.grid-cell.is-active{z-index:1;background:color-mix(in oklch, var(--accent), var(--paper) 88%);box-shadow:inset 0 0 0 2px var(--accent)}.grid-cell.is-dirty{background:color-mix(in oklch, var(--warning), var(--paper) 88%)}.grid-cell.is-active.is-dirty{background:color-mix(in oklch, var(--accent), var(--paper) 82%)}.grid-cell.is-editing{background:color-mix(in oklch, var(--accent), var(--paper) 90%);padding:0}.cell-inline-input{width:100%;min-width:0;height:100%;padding:0 var(--space-xs);color:var(--ink);text-align:right;background:0 0;border:0;font-size:.86rem;line-height:1}.cell-address{color:var(--accent);font-size:.98rem;font-weight:650}.cell-state{border:1px solid color-mix(in oklch, currentcolor, var(--line) 52%);color:var(--muted);background:color-mix(in oklch, currentcolor, transparent 93%);border-radius:999px;justify-self:end;padding:.14rem .34rem;font-size:.64rem}.grid-cell--ready .cell-state{color:var(--success)}.grid-cell--missing .cell-state{color:var(--muted)}.grid-cell--error .cell-state{color:var(--danger)}.cell-value{min-width:0;color:var(--ink);letter-spacing:-.018em;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;font-weight:500;line-height:1;overflow:hidden}.grid-cell--missing .cell-value{color:color-mix(in oklch, var(--muted), transparent 18%);letter-spacing:-.01em;font-size:.78rem}.cell-formula{min-width:0;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;grid-column:1/-1;align-self:end;font-size:.68rem;overflow:hidden}.cell-dirty{right:var(--space-xs);bottom:var(--space-xs);background:color-mix(in oklch, var(--warning), transparent 82%);color:var(--warning);letter-spacing:.03em;border-radius:999px;padding:.2rem .46rem;font-size:.68rem;position:absolute}.inspector-panel{bottom:calc(var(--space-sm) + 58px);right:clamp(var(--space-sm), 2vw, var(--space-xl));z-index:30;width:min(420px, calc(100vw - 2 * var(--space-md)));gap:var(--space-md);border:1px solid color-mix(in oklch, var(--line-strong), transparent 14%);border-radius:var(--radius-lg);max-height:calc(100vh - 92px);padding:var(--space-md);background:color-mix(in oklch, var(--paper), transparent 6%);box-shadow:var(--shadow);backdrop-filter:blur(18px);display:grid;position:fixed;overflow:auto}.inspector-panel--editor{right:auto;left:clamp(var(--space-sm), 2vw, var(--space-xl));width:min(720px, calc(100vw - 2 * var(--space-md)))}.inspector-panel--editor .formula-bar{box-shadow:none}.panel-controls{border-top:1px solid color-mix(in oklch, var(--line), transparent 20%);padding-top:var(--space-sm)}.inspector-header{gap:var(--space-md);justify-content:space-between;align-items:start;display:flex}.inspector-title{gap:var(--space-2xs);display:grid}.inspector-title h2,.inspector-title p,.trace-bucket-help{margin:0}.inspector-title h2{font-size:1.05rem;line-height:1.1}.close-button{min-height:34px}.trace-buckets{gap:var(--space-xs);display:grid}.trace-bucket{gap:var(--space-xs);border:1px solid color-mix(in oklch, var(--line), transparent 12%);border-radius:var(--radius-md);padding:var(--space-sm);background:color-mix(in oklch, var(--paper-soft), transparent 38%);display:grid}.trace-bucket-top{justify-content:space-between;align-items:center;gap:var(--space-sm);display:flex}.trace-bucket-label{color:var(--ink-soft);font-weight:650}.empty-chip{border:1px dashed var(--line-strong);color:var(--muted);border-radius:999px;place-items:center;display:inline-grid}.snapshot-empty{border:1px dashed var(--line-strong);border-radius:var(--radius-md);padding:var(--space-lg);color:var(--muted)}.snapshot-evidence{gap:var(--space-sm);display:grid}.snapshot-evidence-header,.fact-row{justify-content:space-between;gap:var(--space-sm);align-items:baseline;display:flex}.snapshot-cell{color:var(--accent);font-family:var(--font-mono);font-size:1rem}.snapshot-sides{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--line);grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;display:grid;overflow:hidden}.snapshot-side{gap:var(--space-xs);min-width:0;padding:var(--space-sm);background:color-mix(in oklch, var(--paper), transparent 4%);display:grid}.snapshot-side-label,.snapshot-result-status,.fact-label{font-family:var(--font-mono);font-size:.72rem}.snapshot-result{overflow-wrap:anywhere;border-radius:var(--radius-sm);padding:var(--space-xs);background:color-mix(in oklch, var(--ink), transparent 94%);color:var(--ink-soft);font-size:.86rem;line-height:1.45}.snapshot-result--ok,.snapshot-side:has(.snapshot-result--ok) .snapshot-result-status{color:var(--success)}.snapshot-result--missing,.snapshot-side:has(.snapshot-result--missing) .snapshot-result-status{color:var(--muted)}.snapshot-result--error,.snapshot-side:has(.snapshot-result--error) .snapshot-result-status{color:var(--danger)}.snapshot-facts{gap:var(--space-2xs);display:grid}.fact-row{border-top:1px solid color-mix(in oklch, var(--line), transparent 20%);padding-top:var(--space-2xs)}.fact-value{overflow-wrap:anywhere;min-width:0;color:var(--ink-soft);text-align:right}@media (width<=1080px){.status-line,.panel-controls{justify-content:start}.formula-bar{grid-template-columns:1fr}.formula-actions{justify-content:start}}@media (width<=720px){.panel-rail{bottom:var(--space-xs);max-width:calc(50vw - 1.5 * var(--space-xs))}.panel-rail--left{left:var(--space-xs)}.panel-rail--right{right:var(--space-xs)}.demo-intro{top:auto;right:var(--space-xs);bottom:calc(var(--space-xs) + 62px);left:var(--space-xs);border-radius:var(--radius-md);width:auto;padding:var(--space-xs);gap:6px}.demo-intro-title{font-size:.86rem}.demo-intro-copy,.snapshot-panel-help{font-size:.76rem}.status-line{border-radius:var(--radius-md)}.panel-controls{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.appearance-switch{grid-column:1/-1;justify-self:start}.quiet-button,.primary-action,.example-chip,.cell-chip{min-height:44px}.formula-bar{border-radius:var(--radius-md);padding:var(--space-xs)}.formula-actions{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.example-strip{grid-template-columns:1fr}.keyboard-hint{justify-content:start;justify-self:start}.sheet-stage{align-content:start}.sheet-grid{grid-template-rows:32px repeat(50,minmax(34px,38px));grid-template-columns:32px repeat(50,minmax(60px,68px))}.grid-cell{padding:0 var(--space-xs)}.cell-value{font-size:.82rem}.cell-formula{font-size:.64rem}.inspector-panel{top:auto;right:var(--space-sm);bottom:var(--space-sm);left:var(--space-sm);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-md) var(--radius-md);width:auto;max-height:min(72vh,620px)}.snapshot-sides{grid-template-columns:1fr}.fact-row{gap:2px;display:grid}.fact-value{text-align:left}}@media (width<=420px){.formula-actions{grid-template-columns:1fr}.sheet-grid{grid-template-rows:30px repeat(50,minmax(34px,36px));grid-template-columns:30px repeat(50,minmax(56px,64px))}.cell-state{justify-self:start}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
