@import "https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Google+Sans+Code:wght@400;500;700&display=swap";:root{--font-ui:"Figtree", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-code:"Google Sans Code", "SFMono-Regular", Consolas, monospace;--page:#f6f3ed;--page-2:#eee8df;--page-highlight:#faf8f3;--ink:#1f1e1b;--muted:#6f6a61;--faint:#9b9387;--white-warm:#fffaf4;--line:#1f1e1b1f;--line-strong:#1f1e1b38;--line-on-dark:#ffffff14;--glass:#ffffff6b;--glass-strong:#ffffff9e;--glass-control:#ffffff57;--glass-panel:#fff3;--glass-header:#ffffff42;--glass-mobile:#ffffff59;--glass-overlay:#ffffff94;--example-control-bg:#fffaf49e;--example-menu-bg:#fffaf4fa;--example-selected-meta:#fffaf4bd;--orange:#e7662f;--orange-dark:#a93f1e;--orange-light:#f0a64b;--orange-pale:#f2a277;--orange-soft:#e7662f24;--orange-wash:#e7662f2e;--orange-selection:#e7662f52;--orange-border:#e7662f85;--blue:#496f91;--blue-wash:#496f9124;--green:#5a7d54;--green-wash:#5a7d541a;--green-border:#5a7d546b;--violet:#6f5f95;--code-bg:#171614;--code-bg-2:#201c18;--code-bg-strong:#171614e6;--code-bg-2-strong:#201c18d6;--code-text:#f4efe6;--code-muted:#948b80;--diagnostic-text:#d9d2c8;--diagnostic-list:#f4d5c4;--diagnostic-warning-bg:#352913f5;--diagnostic-error-bg:#361411f5;--focus:var(--orange);--surface-grid-line:#1f1e1b09;--surface-grid-line-strong:#1f1e1b06;--surface-on-dark-subtle:#ffffff0b;--surface-mask:#000000e6;--divider-bg:#ffffff29;--preview-bg:#ffffff1f;--preview-frame-bg:#fffcf6b8;--syntax-header-bg:#f6f3edb8;--button-highlight-bg:#ffffff80;--diagnostic-bg:#171614f0;--syntax-keyword:#d48a2f;--syntax-comment:#8e7867;--syntax-number:#f1b15f;--syntax-atom:#d7a5ff;--syntax-operator:#f3c98b;--syntax-variable:#f8ddbd;--syntax-heading:#ffd99f;--syntax-attribute:#9fd4ff;--syntax-instruction:#f6c177;--space-0:0;--space-1:2px;--space-2:3px;--space-3:4px;--space-4:5px;--space-5:6px;--space-6:7px;--space-7:8px;--space-8:10px;--space-9:12px;--space-10:14px;--space-11:16px;--space-12:18px;--space-13:20px;--space-14:24px;--space-15:28px;--space-16:40px;--radius-compact:2px;--radius-frame:3px;--radius-control:4px;--radius-mobile-switch:6px;--border-default:1px solid var(--line);--border-strong:1px solid var(--line-strong);--border-dark:1px solid var(--line-on-dark);--border-accent:1px solid var(--orange-border);--border-transparent:1px solid transparent;--focus-ring:2px solid var(--focus);--focus-ring-offset:2px;--focus-ring-inset-offset:-2px;--shadow-panel:0 16px 56px #1f1e1b11;--shadow-menu:0 18px 36px #1f1e1b24;--blur-control:blur(16px) saturate(1.12);--blur-panel:blur(20px) saturate(1.12);--blur-syntax:blur(22px) saturate(1.15);--blur-preview-state:blur(14px);--blur-editor:blur(10px);--blur-sticky:blur(18px);--font-size-label:10px;--font-size-eyebrow:11px;--font-size-small:12px;--font-size-control:13px;--font-size-code:14px;--font-size-panel-title:15px;--font-size-topbar-control:15.6px;--font-size-body:17px;--font-size-preview-title:19px;--font-size-heading:22px;--font-size-brand:36px;--font-weight-strong:700;--font-weight-heavy:800;--font-weight-title:750;--letter-spacing-label:.08em;--line-height-tight:1;--line-height-title:1.05;--line-height-copy:1.35;--line-height-code:1.66;--app-min-width:320px;--brand-min-width:420px;--brand-logo-width:clamp(120px, 12.25vw, 133px);--brand-logo-height:clamp(49px, 4.62vw, 66px);--brand-logo-mobile-width:min(96px, 30vw);--brand-logo-mobile-height:min(36px, 11vw);--brand-copy-mobile-width:min(300px, 64vw);--topbar-min-height:48px;--topbar-mobile-min-height:56px;--topbar-control-height:44px;--control-height:34px;--icon-size:16px;--icon-size-large:21px;--example-select-icon-size:15px;--icon-button-size:34px;--divider-width:8px;--syntax-width:358px;--example-select-width:210px;--example-menu-width:min(310px, 72vw);--example-menu-item-block-padding:9px;--pane-header-min-height:58px;--pane-title-column-min:120px;--syntax-description-max-width:240px;--site-footer-min-height:32px;--diagnostics-min-height:48px;--diagnostics-max-height:128px;--diagnostic-list-max-height:72px;--grid-cell-size:56px;--grid-line-width:1px;--link-underline-thickness:1px;--preview-title-mobile-size:18px;--transition-fast:.16s ease;--transition-panel:.22s ease;--transition-opacity:.18s ease;--transition-visibility-delay:.22s;color:var(--ink);background:var(--page);font-family:var(--font-ui);font-synthesis:none;text-rendering:optimizelegibility}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{min-width:var(--app-min-width);background:radial-gradient(circle at 14% 14%, var(--orange-wash), transparent 32%), radial-gradient(circle at 86% 12%, var(--blue-wash), transparent 30%), radial-gradient(circle at 70% 92%, var(--green-wash), transparent 30%), linear-gradient(135deg, var(--page) 0%, var(--page-highlight) 48%, var(--page-2) 100%);overflow:hidden}body:before{z-index:-1;content:"";background:linear-gradient(var(--surface-grid-line) var(--grid-line-width), transparent var(--grid-line-width)), linear-gradient(90deg, var(--surface-grid-line-strong) var(--grid-line-width), transparent var(--grid-line-width));background-size:var(--grid-cell-size) var(--grid-cell-size);-webkit-mask-image:linear-gradient(180deg, var(--surface-mask), transparent 78%);mask-image:linear-gradient(180deg, var(--surface-mask), transparent 78%);position:fixed;inset:0}h1,h2,h3,p{margin:0}button,select{font:inherit}.appShell{gap:var(--space-8);height:100dvh;padding:var(--space-10) var(--space-16) var(--space-14);grid-template-rows:auto auto minmax(0,1fr) auto;display:grid;overflow:hidden}.topbar,.brand,.topbarNav,.siteFooter{align-items:center;display:flex}.topbar{justify-content:space-between;gap:var(--space-11);min-height:var(--topbar-min-height);padding-inline:var(--space-1);color:var(--ink)}.brand{align-items:flex-end;gap:var(--space-13);min-width:var(--brand-min-width)}.brandLogo{width:var(--brand-logo-width);height:var(--brand-logo-height);background:var(--orange);-webkit-mask:var(--logo-url) center / contain no-repeat;mask:var(--logo-url) center / contain no-repeat;-webkit-mask:var(--logo-url) center / contain no-repeat;flex:none}.brand h1{color:var(--ink);font-size:var(--font-size-brand);font-weight:500;line-height:var(--line-height-tight);text-transform:lowercase}.brand>p{color:var(--muted);font-size:var(--font-size-heading);white-space:nowrap;font-weight:500;line-height:1.08;transform:translateY(-.14em)}.topbarNav{justify-content:flex-end;gap:var(--space-8);margin-left:auto}.workbench{border:var(--border-strong);border-radius:var(--radius-frame);background:var(--glass-panel);min-height:0;box-shadow:var(--shadow-panel);-webkit-backdrop-filter:var(--blur-panel);backdrop-filter:var(--blur-panel);grid-template-rows:minmax(0,1fr) auto;display:grid;overflow:hidden}.workspace{flex:1;min-height:0;display:flex;overflow:hidden}.pane{background:0 0;flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.editorPane{border-right:var(--border-strong);flex:0 0 50%}.previewPane{flex:auto}.previewRegion{flex:auto;min-width:0;min-height:0;display:flex}.divider{width:var(--divider-width);flex:0 0 var(--divider-width);cursor:col-resize;background:var(--divider-bg);position:relative}.divider:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-inset-offset)}.divider:before{inset:var(--space-12) var(--space-2);content:"";background:var(--orange-border);position:absolute}.siteFooter{justify-content:space-between;gap:var(--space-12);min-height:var(--site-footer-min-height);color:var(--muted);font-size:var(--font-size-small);font-weight:600}.siteFooter span:first-child{color:var(--ink)}.siteFooter a{color:var(--orange-dark);font-weight:var(--font-weight-heavy);text-decoration:none}.siteFooter a:hover{text-decoration:underline;text-decoration-thickness:var(--link-underline-thickness);text-underline-offset:var(--space-3)}select,button,a.glassButton{height:var(--control-height);padding-inline:var(--space-8);border:var(--border-default);border-radius:var(--radius-control);color:var(--ink);background:var(--glass-control);-webkit-backdrop-filter:var(--blur-control);backdrop-filter:var(--blur-control)}button,a.glassButton{cursor:pointer;font-size:var(--font-size-control);font-weight:var(--font-weight-strong);text-decoration:none}button:hover,button.active,a.glassButton:hover{border-color:var(--orange-border);color:var(--orange-dark);background:var(--glass-strong)}button:focus-visible,select:focus-visible,a.glassButton:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}button:disabled{cursor:not-allowed;opacity:.42}.glassButton,.iconTextButton{align-items:center;display:inline-flex}.glassButton{justify-content:center}.iconTextButton{gap:var(--space-7)}.primaryAction{border-color:var(--orange-border);color:var(--white-warm);background:var(--orange)}.primaryAction:hover{color:var(--white-warm);background:var(--orange-dark)}.exportAction{color:var(--white-warm);background:var(--ink)}.success{border-color:var(--green-border);color:var(--white-warm);background:var(--green)}.iconButton{width:var(--icon-button-size);min-width:var(--icon-button-size);place-items:center;padding:0;display:inline-grid}.iconButton svg,.iconTextButton svg{width:var(--icon-size);height:var(--icon-size)}.navLink{height:var(--topbar-control-height);border-bottom:var(--border-transparent);color:var(--ink);font-size:var(--font-size-topbar-control);font-weight:var(--font-weight-heavy);letter-spacing:var(--letter-spacing-label);align-items:center;text-decoration:none;display:inline-flex}.navLink:hover{color:var(--orange-dark);border-bottom-color:var(--orange-border)}.topbarSyntaxToggle{height:var(--topbar-control-height);padding-inline:var(--space-10);font-size:var(--font-size-topbar-control);margin-left:0}.topbarSyntaxToggle svg{width:var(--icon-size-large);height:var(--icon-size-large)}.mobileSwitch{gap:var(--space-2);padding:var(--space-2);border:var(--border-default);border-radius:var(--radius-mobile-switch);background:var(--glass-mobile);-webkit-backdrop-filter:var(--blur-control);backdrop-filter:var(--blur-control);display:none}.mobileSwitch button{background:0 0;border-color:#0000;flex:1}.mobileSwitch button.active{color:var(--white-warm);background:var(--orange)}.exampleSelect{min-width:var(--example-select-width);color:var(--muted);position:relative}.exampleSelectButton{justify-content:space-between;align-items:center;gap:var(--space-9);width:100%;min-width:var(--example-select-width);height:var(--control-height);padding-inline:var(--space-9) var(--space-8);border-color:var(--line);color:var(--ink);background:var(--example-control-bg);font-weight:500;display:flex}.exampleSelectButton.open,.exampleSelectButton:hover{border-color:var(--orange-border);color:var(--ink);background:var(--white-warm)}.exampleSelectButton span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.exampleSelectButton svg{width:var(--example-select-icon-size);height:var(--example-select-icon-size);color:var(--muted);flex:none}.exampleMenu{top:calc(100% + var(--space-4));z-index:20;width:var(--example-menu-width);border:var(--border-accent);border-radius:var(--radius-control);background:var(--example-menu-bg);box-shadow:var(--shadow-menu);display:grid;position:absolute;left:0;overflow:hidden}.exampleMenu button{justify-items:start;gap:var(--space-1);height:auto;padding:var(--example-menu-item-block-padding) var(--space-9);text-align:left;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;border-radius:0;display:grid}.exampleMenu button:hover,.exampleMenu button:focus-visible{color:var(--orange-dark);background:var(--orange-soft)}.exampleMenu button.selected{color:var(--white-warm);background:var(--orange)}.exampleMenu button small{color:var(--muted);font-size:var(--font-size-label);font-weight:var(--font-weight-strong)}.exampleMenu button.selected small{color:var(--example-selected-meta)}.bylawsButton{color:var(--orange-dark);background:var(--button-highlight-bg)}@media (prefers-reduced-motion:no-preference){button,a.glassButton{transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast)}}.paneHeader{z-index:4;grid-template-columns:minmax(var(--pane-title-column-min), auto) minmax(0, 1fr) auto;align-items:center;gap:var(--space-9);min-height:var(--pane-header-min-height);padding:var(--space-8) var(--space-11);border-bottom:var(--border-default);background:var(--glass-header);-webkit-backdrop-filter:var(--blur-control);backdrop-filter:var(--blur-control);display:grid;position:relative}.previewHeader{grid-template-columns:minmax(0,1fr) auto}.paneTitle{gap:var(--space-1);min-width:0;display:grid}.paneTitle strong{color:var(--ink);font-size:var(--font-size-panel-title);font-weight:var(--font-weight-title);text-overflow:ellipsis;white-space:nowrap;line-height:1.1;overflow:hidden}.sourceFileName{font-family:var(--font-code);font-size:var(--font-size-control);font-weight:600}.paneTitle span,.syntaxHeader span,.syntaxContent h3{font-weight:var(--font-weight-heavy);letter-spacing:var(--letter-spacing-label);text-transform:uppercase}.paneTitle span{color:var(--faint);font-size:var(--font-size-label);line-height:var(--line-height-tight)}.previewHeader .paneTitle strong{font-size:var(--font-size-preview-title)}.paneActions,.syntaxHeaderActions{align-items:center;gap:var(--space-7);display:flex}.paneActions{flex-wrap:wrap;justify-content:flex-end}.paneActionsStart{justify-content:flex-start}.editorUtilityActions{align-items:center;gap:var(--space-7);display:inline-flex}.editorMount{z-index:1;background:linear-gradient(135deg, var(--orange-soft), transparent 42%), var(--code-bg-strong);min-height:0;-webkit-backdrop-filter:var(--blur-editor);backdrop-filter:var(--blur-editor);flex:1;position:relative}.editorLoading{min-height:0;color:var(--code-text);background:var(--code-bg-strong);font-size:var(--font-size-control);font-weight:var(--font-weight-strong);flex:1;place-items:center;display:grid}.previewFrameWrap{min-height:0;padding:var(--space-12);background:var(--preview-bg);flex:1;display:grid;position:relative}.previewFrameWrap iframe{border:var(--border-default);border-radius:var(--radius-compact);background:var(--preview-frame-bg);width:100%;height:100%;position:relative}.previewOverlay{top:var(--space-15);right:var(--space-15);z-index:2;padding:var(--space-6) var(--space-8);border:var(--border-accent);border-radius:var(--radius-compact);color:var(--orange-dark);background:var(--glass-overlay);font-size:var(--font-size-small);font-weight:var(--font-weight-strong);pointer-events:none;-webkit-backdrop-filter:var(--blur-preview-state);backdrop-filter:var(--blur-preview-state);position:absolute}.syntaxPanel{width:var(--syntax-width);min-width:var(--syntax-width);flex:0 0 var(--syntax-width);min-height:0;margin-right:calc(var(--syntax-width) * -1);border-left:var(--border-transparent);background:var(--glass-control);opacity:0;pointer-events:none;visibility:hidden;clip-path:inset(0 0 0 100%);transform:translateX(var(--space-12));transition:margin-right var(--transition-panel), clip-path var(--transition-panel), opacity var(--transition-opacity), transform var(--transition-panel), visibility 0s linear var(--transition-visibility-delay), border-color var(--transition-panel);-webkit-backdrop-filter:var(--blur-syntax);backdrop-filter:var(--blur-syntax);display:flex;overflow:hidden}.syntaxPanel.open{width:var(--syntax-width);flex-basis:var(--syntax-width);border-left-color:var(--line);opacity:1;pointer-events:auto;visibility:visible;clip-path:inset(0);transition:margin-right var(--transition-panel), clip-path var(--transition-panel), opacity var(--transition-opacity), transform var(--transition-panel), visibility 0s, border-color var(--transition-panel);margin-right:0;transform:translate(0)}.syntaxContent{align-content:start;gap:var(--space-12);width:var(--syntax-width);min-width:var(--syntax-width);min-height:0;padding:var(--space-11);display:grid;overflow:auto}.syntaxHeader{top:calc(var(--space-11) * -1);z-index:2;justify-content:space-between;align-items:flex-start;gap:var(--space-9);margin:calc(var(--space-11) * -1) calc(var(--space-11) * -1) 0;padding:var(--space-11);border-bottom:var(--border-default);background:var(--syntax-header-bg);-webkit-backdrop-filter:var(--blur-sticky);backdrop-filter:var(--blur-sticky);display:flex;position:sticky}.syntaxHeader span{color:var(--faint);font-size:var(--font-size-label)}.syntaxHeader h2{color:var(--ink);font-size:var(--font-size-heading);font-weight:var(--font-weight-title);line-height:var(--line-height-title)}.syntaxHeader p{max-width:var(--syntax-description-max-width);margin-top:var(--space-5);color:var(--muted);font-size:var(--font-size-control);font-weight:500;line-height:var(--line-height-copy)}.syntaxBlock{gap:var(--space-6);display:grid}.syntaxBlockHeader{justify-content:space-between;align-items:center;gap:var(--space-8);display:flex}.syntaxContent h3{color:var(--muted);font-size:var(--font-size-eyebrow)}.syntaxContent pre{padding:var(--space-9);border:var(--border-dark);border-radius:var(--radius-compact);color:var(--code-text);background:var(--code-bg);font-family:var(--font-code);font-size:var(--font-size-small);margin:0;line-height:1.6;overflow:auto}.syntaxTokenKeyword,.syntaxTokenOperator,.syntaxTokenHeading{font-weight:var(--font-weight-strong)}.syntaxTokenKeyword{color:var(--syntax-keyword)}.syntaxTokenComment{color:var(--syntax-comment);font-style:italic}.syntaxTokenNumber{color:var(--syntax-number)}.syntaxTokenAtom{color:var(--syntax-atom)}.syntaxTokenOperator{color:var(--syntax-operator)}.syntaxTokenHeading{color:var(--syntax-heading)}.syntaxTokenAttribute{color:var(--syntax-attribute)}.syntaxTokenFormula{color:var(--syntax-instruction)}.diagnostics{gap:var(--space-8);min-height:var(--diagnostics-min-height);max-height:var(--diagnostics-max-height);padding:var(--space-8) var(--space-11) var(--space-9);border-top:var(--border-dark);color:var(--diagnostic-text);background:var(--diagnostic-bg);font-family:var(--font-code);font-size:var(--font-size-control);display:grid;overflow:hidden}.diagnosticSummary{align-items:center;gap:var(--space-9);min-width:0;display:flex}.diagnosticSummary strong{color:var(--white-warm);flex:none}.diagnosticSummary span{color:var(--orange-pale);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.diagnosticList{gap:var(--space-4);min-height:0;max-height:var(--diagnostic-list-max-height);padding:0 0 0 var(--space-12);color:var(--diagnostic-list);font-family:var(--font-code);font-size:var(--font-size-small);margin:0;display:grid;overflow:auto}.diagnosticList li{white-space:normal}.diagnostics.hasWarnings{background:var(--diagnostic-warning-bg)}.diagnostics.hasErrors{background:var(--diagnostic-error-bg)}@media (width<=1100px){.paneHeader{grid-template-columns:minmax(0,1fr) auto}.editorPane .paneTitle{grid-column:1/-1}}@media (width<=860px){html,body,#root{height:auto;min-height:100%}body{overflow-y:auto}.appShell{gap:var(--space-8);height:auto;min-height:100dvh;padding:var(--space-8) var(--space-11) var(--space-11);overflow:visible}.topbar{min-height:var(--topbar-mobile-min-height);align-items:center}.brand{justify-content:space-between;align-items:end;gap:var(--space-10);text-align:right;width:100%;min-width:0}.brandLogo{width:var(--brand-logo-mobile-width);height:var(--brand-logo-mobile-height)}.brand>p{max-width:var(--brand-copy-mobile-width);margin-bottom:var(--space-3);font-size:var(--font-size-label);white-space:normal;line-height:1.08;transform:none}.topbarNav{display:none}.mobileSwitch{display:flex}.workspace{display:block}.pane,.syntaxPanel{opacity:1;pointer-events:auto;visibility:visible;clip-path:none;width:100%;min-width:0;height:100%;margin-right:0;display:none;transform:none}.pane.mobileVisible,.syntaxPanel.mobileVisible{display:flex}.paneHeader{grid-template-columns:1fr;align-items:flex-start;min-height:auto}.paneActions{justify-content:flex-start;width:100%}.exampleSelect,.exampleSelectButton,.exampleMenu{width:100%}.exampleSelect,.exampleSelectButton{min-width:0}.syntaxPanel.mobileVisible{border-left:0;flex-basis:auto;width:100%;overflow:auto}.syntaxContent{width:100%;min-width:0}.syntaxHeaderActions,.divider{display:none}.workbench{border-radius:var(--radius-frame)}.workbench.mobilePreviewActive,.workbench.mobilePreviewActive .workspace,.workbench.mobilePreviewActive .previewRegion,.workbench.mobilePreviewActive .previewPane{overflow:visible}.editorPane{border-right:0}.editorActions{flex-wrap:nowrap;justify-content:space-between}.editorUtilityActions{margin-left:auto}.previewFrameWrap{min-height:calc(100dvh - 220px);padding:var(--space-8);align-items:start;overflow:visible}.previewFrameWrap iframe{border-radius:var(--radius-compact);min-height:calc(100dvh - 220px);overflow:hidden}.previewHeader .paneTitle strong{font-size:var(--preview-title-mobile-size)}.diagnostics{gap:var(--space-3)}.diagnosticSummary{align-items:flex-start;gap:var(--space-3);flex-direction:column}.diagnosticSummary span{white-space:normal;width:100%}.siteFooter{align-items:flex-start;gap:var(--space-5);flex-direction:column}}