:root{color:#202124;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#f6f7f8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:linear-gradient(180deg, color-mix(in srgb, var(--app-accent,#0969da) 8%, transparent), transparent 340px), color-mix(in srgb, var(--app-bg,#fff) 92%, #f4f4f5);min-width:320px;color:var(--app-fg,#202124);margin:0}button,input,select,textarea{font:inherit}button{border:1px solid color-mix(in srgb, var(--app-fg,#202124) 14%, transparent);background:color-mix(in srgb, var(--app-bg,#fff) 96%, var(--app-fg,#202124));color:var(--app-fg,#202124);cursor:pointer;border-radius:7px}button:disabled{cursor:not-allowed;opacity:.45}.studio{min-height:100vh}.studio-top-layout{grid-template-columns:minmax(0, 1fr) 8px minmax(520px, var(--editor-width,820px));grid-template-rows:auto 1fr;display:grid}.topbar,.editor{border-color:color-mix(in srgb, var(--app-fg,#202124) 10%, transparent);background:color-mix(in srgb, var(--app-bg,#fff) 94%, transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.topbar{z-index:20;border-bottom:1px solid;grid-column:1/-1;grid-template-columns:minmax(240px,auto) minmax(220px,360px) minmax(170px,230px) minmax(360px,1fr);align-items:center;gap:14px;min-height:76px;padding:12px 18px;display:grid;position:sticky;top:0}.split-resizer{z-index:10;cursor:col-resize;background:linear-gradient(90deg, transparent 0, transparent 3px, color-mix(in srgb, var(--app-fg,#202124) 18%, transparent) 3px, color-mix(in srgb, var(--app-fg,#202124) 18%, transparent) 5px, transparent 5px);grid-area:2/2;height:calc(100vh - 76px);position:sticky;top:76px}.split-resizer:hover,.split-resizer:focus-visible,.resizing-editor .split-resizer{background:linear-gradient(90deg, transparent 0, transparent 2px, var(--app-accent,#0969da) 2px, var(--app-accent,#0969da) 6px, transparent 6px);outline:none}.resizing-editor{cursor:col-resize;-webkit-user-select:none;user-select:none}.editor{border-left:1px solid;grid-area:2/3;height:calc(100vh - 76px);padding:22px;position:sticky;top:76px;overflow-y:auto}.editor-wide{min-width:520px}.brand{align-items:center;gap:10px;min-width:0;display:flex}.brand strong{line-height:1.1;display:block}.brand span,.category-label,.editor-header p,.panel-title,.sample-card footer{color:color-mix(in srgb, var(--app-fg,#202124) 58%, var(--app-bg,#fff));font-size:12px}.search{border:1px solid color-mix(in srgb, var(--app-fg,#202124) 12%, transparent);background:color-mix(in srgb, var(--app-bg,#fff) 88%, transparent);border-radius:7px;align-items:center;gap:8px;padding:9px 10px;display:flex}.search input,.editor-header input,.control-row input,.control-row select,.theme-controls select,.top-select select{width:100%;color:inherit;background:0 0;border:0;outline:0}.top-select{border:1px solid color-mix(in srgb, var(--app-fg,#202124) 12%, transparent);background:color-mix(in srgb, var(--app-bg,#fff) 88%, transparent);border-radius:7px;gap:3px;padding:7px 10px;display:grid}.top-select span{color:color-mix(in srgb, var(--app-fg,#202124) 58%, var(--app-bg,#fff));font-size:11px}.theme-controls{grid-template-columns:auto minmax(170px,250px);align-items:center;gap:10px;display:grid}.quick-themes,.hero-actions,.export-grid,.editor-actions{flex-wrap:wrap;gap:8px;display:flex}.topbar .quick-themes{flex-wrap:nowrap}.theme-pill,.icon-button,.hero-actions button,.export-grid button,.editor-actions button,.settings-button,.sample-card-header button,.editor-header button,.ascii-box button{justify-content:center;align-items:center;gap:7px;min-height:34px;padding:7px 10px;display:inline-flex}.theme-pill.active{border-color:var(--app-accent,#0969da);box-shadow:0 0 0 2px color-mix(in srgb, var(--app-accent,#0969da) 18%, transparent)}.swatch{border:1px solid color-mix(in srgb, var(--app-fg,#202124) 12%, transparent);border-radius:50%;width:14px;height:14px}.gallery{min-width:0;padding:24px}.gallery-compact{max-width:100%;overflow-x:hidden}.hero{justify-content:space-between;align-items:flex-end;gap:22px;padding:10px 0 22px;display:flex}.hero h1{letter-spacing:0;max-width:650px;margin:0;font-size:clamp(32px,5vw,58px);line-height:.96}.hero p{max-width:760px;color:color-mix(in srgb, var(--app-fg,#202124) 70%, var(--app-bg,#fff));margin:18px 0 0;font-size:16px;line-height:1.6}.category-section{margin-bottom:34px;scroll-margin-top:24px}.category-section>h2{margin:0 0 12px;font-size:18px}.cards{gap:18px;display:grid}.sample-card{border:1px solid color-mix(in srgb, var(--app-fg,#202124) 10%, transparent);background:color-mix(in srgb, var(--app-bg,#fff) 88%, transparent);min-width:0;box-shadow:0 14px 40px color-mix(in srgb, var(--app-fg,#202124) 8%, transparent);border-radius:8px;padding:13px;font-size:.9rem;overflow:hidden}.sample-card-header,.editor-header,.panel-title{justify-content:space-between;align-items:center;gap:12px;display:flex}.sample-card-header-safe{grid-template-columns:minmax(0,1fr) auto;display:grid}.sample-card-header-safe>div{min-width:0}.sample-edit-button{flex-shrink:0;justify-self:end;max-width:100%}.sample-card h2{margin:2px 0 0;font-size:17px}.description{color:color-mix(in srgb, var(--app-fg,#202124) 68%, var(--app-bg,#fff));margin:7px 0 11px}.sample-grid{border:1px solid color-mix(in srgb, var(--app-fg,#202124) 10%, transparent);border-radius:8px;grid-template-columns:minmax(96px,.9fr) minmax(112px,1.3fr) minmax(96px,.8fr);height:175px;display:grid;overflow:hidden}.source-panel,.ascii-panel pre,.code-editor,.ascii-box pre,.error{white-space:pre;margin:0;font-family:JetBrains Mono,Cascadia Code,ui-monospace,SFMono-Regular,monospace;font-size:11px;line-height:1.55}.source-panel,.ascii-panel{background:color-mix(in srgb, var(--app-fg,#202124) 4%, transparent);padding:10px;overflow:auto}.ascii-panel pre{color:inherit}.svg-panel,.render-surface{place-items:center;min-width:0;padding:11px;display:grid;overflow:auto}.svg-panel svg,.render-surface svg{max-width:100%;height:auto}.sample-card footer{margin-top:10px}.editor-header{margin-bottom:14px}.editor-header p{margin:0 0 3px}.editor-header input{font-size:20px;font-weight:700}.code-editor{resize:vertical;border:1px solid color-mix(in srgb, var(--app-fg,#202124) 12%, transparent);background:color-mix(in srgb, var(--app-fg,#202124) 4%, transparent);width:100%;height:100%;min-height:0;color:inherit;border-radius:8px;outline:none;margin:0;padding:14px;overflow:auto}.code-editor-scroll{overflow:auto}.editor-wireframe{grid-template-columns:minmax(280px,.95fr) minmax(0,1.45fr);grid-template-areas:"code preview""divider divider""ascii-controls ascii-output";align-items:stretch;gap:12px;display:grid}.editor-code-pane,.editor-preview-pane,.editor-ascii-pane{min-width:0}.editor-code-pane{grid-area:code;gap:8px;display:grid}.editor-preview-pane{grid-area:preview;gap:8px;display:grid}.editor-pane-aligned{grid-template-rows:36px minmax(420px,420px) minmax(178px,auto);align-content:start}.editor-ascii-divider{background:color-mix(in srgb, var(--app-accent,#0969da) 52%, transparent);grid-area:divider;height:1px;margin:4px 0 2px}.editor-ascii-controls{grid-area:ascii-controls;align-self:start}.editor-ascii-pane{grid-area:ascii-output;align-self:start}.editor-ascii-controls .ascii-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.settings-grid{grid-template-columns:1fr 1fr;gap:8px;margin:0;display:grid}.settings-grid-dense{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.editor-code-pane .settings-grid-dense{gap:5px}.editor-code-pane .settings-grid-dense .control-row,.editor-code-pane .settings-grid-dense .toggle{gap:2px;min-height:54px;padding:5px 6px}.editor-code-pane .settings-grid-dense .control-row span,.editor-code-pane .settings-grid-dense .toggle{font-size:10px;line-height:1.15}.editor-code-pane .settings-grid-dense .control-row input,.editor-code-pane .settings-grid-dense .control-row select{font-size:13px}.editor-code-pane .settings-grid-dense .color-control{grid-template-columns:minmax(0,1fr) 24px}.editor-code-pane .settings-grid-dense .color-control input[type=color]{width:24px;height:22px}.editor-code-pane .settings-grid-dense .settings-button{min-height:54px;padding:5px 6px;font-size:12px}.editor-preview-pane .settings-grid-dense{gap:5px}.editor-preview-pane .settings-grid-dense .control-row,.editor-preview-pane .settings-grid-dense .toggle{gap:2px;min-height:46px;padding:5px 6px}.editor-preview-pane .settings-grid-dense .control-row span,.editor-preview-pane .settings-grid-dense .toggle{font-size:10px;line-height:1.15}.editor-preview-pane .settings-grid-dense .control-row input,.editor-preview-pane .settings-grid-dense .control-row select{font-size:13px}.editor-preview-pane .settings-grid-dense .color-control{grid-template-columns:minmax(0,1fr) 24px}.editor-preview-pane .settings-grid-dense .color-control input[type=color]{width:24px;height:22px}.editor-preview-pane .settings-grid-dense .settings-button{min-height:46px;padding:5px 6px;font-size:12px}.control-row{border:1px solid color-mix(in srgb, var(--app-fg,#202124) 10%, transparent);border-radius:7px;gap:5px;min-width:0;padding:7px 8px;display:grid}.control-row span,.toggle{color:color-mix(in srgb, var(--app-fg,#202124) 68%, var(--app-bg,#fff));font-size:12px}.toggle{border:1px solid color-mix(in srgb, var(--app-fg,#202124) 10%, transparent);border-radius:7px;align-items:center;gap:8px;min-width:0;padding:7px 8px;display:flex}.color-control{grid-template-columns:minmax(0,1fr) 34px;align-items:center}.color-control input[type=color]{width:34px;height:28px;min-height:0;padding:2px}.settings-button{min-height:50px}.editor-preview{min-width:0;height:100%;display:grid;position:relative}.render-surface{border:1px solid color-mix(in srgb, var(--app-fg,#202124) 10%, transparent);border-radius:8px;height:100%;min-height:0}.render-surface-code-height{min-height:420px}.render-surface-zoomed>div{place-items:center;width:92%;min-width:0;height:92%;min-height:0;display:grid;position:relative}.render-surface-zoomed svg{max-width:100%;max-height:100%}.render-surface-fit svg{object-fit:contain;position:absolute;inset:0;overflow:visible;width:100%!important;height:100%!important}.element-style-panel{border:1px solid color-mix(in srgb, var(--app-fg,#202124) 10%, transparent);background:color-mix(in srgb, var(--app-bg,#fff) 90%, transparent);border-radius:8px;align-content:start;align-self:stretch;gap:7px;min-height:178px;padding:8px;display:grid}.element-style-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.element-style-header h2{margin:0;font-size:13px}.element-style-section{gap:5px;display:grid}.element-style-subheader{color:color-mix(in srgb, var(--app-fg,#202124) 66%, var(--app-bg,#fff));justify-content:space-between;align-items:center;gap:8px;font-size:11px;font-weight:700;display:flex}.element-style-subheader button{min-height:30px;padding:5px 8px;font-size:12px}.element-style-grid{grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(0,.75fr));gap:6px;display:grid}.element-arrow-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr) minmax(0,.75fr)}.element-style-grid .control-row{gap:3px;padding:5px 6px}.element-style-grid .control-row span{font-size:10px}.element-style-grid .control-row input,.element-style-grid .control-row select{font-size:12px}.element-style-grid .color-control{grid-template-columns:minmax(0,1fr) 24px}.element-style-grid .color-control input[type=color]{width:24px;height:22px}.element-style-empty{color:color-mix(in srgb, var(--app-fg,#202124) 58%, var(--app-bg,#fff));margin:0;font-size:12px}.render-duration{background:color-mix(in srgb, var(--app-bg,#fff) 88%, transparent);color:color-mix(in srgb, var(--app-fg,#202124) 58%, var(--app-bg,#fff));border-radius:999px;padding:2px 6px;font-size:11px;position:absolute;bottom:7px;right:9px}.export-grid{grid-template-columns:repeat(4,1fr);display:grid}.ascii-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.ascii-controls-compact .control-row{gap:3px;min-height:42px;padding:5px 7px}.ascii-controls-compact .control-row span{font-size:11px}.ascii-controls-compact .control-row input,.ascii-controls-compact .control-row select{font-size:13px}.ascii-controls-compact .control-row:last-child{grid-column:1}.ascii-box{border:1px solid color-mix(in srgb, var(--app-fg,#202124) 10%, transparent);border-radius:8px;overflow:hidden}.ascii-box .panel-title{border-bottom:1px solid color-mix(in srgb, var(--app-fg,#202124) 10%, transparent);padding:8px 10px}.ascii-box pre{background:color-mix(in srgb, var(--app-fg,#202124) 4%, transparent);max-height:170px;padding:12px;overflow:auto}.modal-backdrop{z-index:50;background:color-mix(in srgb, var(--app-fg,#202124) 28%, transparent);place-items:center;padding:20px;display:grid;position:fixed;inset:0}.sample-dialog{border:1px solid color-mix(in srgb, var(--app-fg,#202124) 12%, transparent);background:var(--app-bg,#fff);width:min(420px,100%);box-shadow:0 22px 70px color-mix(in srgb, var(--app-fg,#202124) 22%, transparent);border-radius:8px;gap:14px;padding:18px;display:grid}.sample-dialog h2{margin:0;font-size:18px}.sample-dialog p{color:color-mix(in srgb, var(--app-fg,#202124) 68%, var(--app-bg,#fff));margin:6px 0 0}.dialog-error{color:#b42318;font-size:12px}.dialog-actions{justify-content:flex-end;gap:8px;display:flex}.error{color:#b42318;white-space:pre-wrap;max-width:100%}@media (width<=1280px){.studio-top-layout{grid-template-columns:minmax(0,1fr)}.split-resizer{display:none}.editor{border-left:0;border-top:1px solid color-mix(in srgb, var(--app-fg,#202124) 10%, transparent);grid-area:auto;height:auto;position:static}.editor-wide{min-width:0}.topbar{grid-template-columns:1fr 1fr}.theme-controls{grid-template-columns:1fr}}@media (width<=880px){.studio-top-layout{display:block}.topbar{grid-template-columns:1fr;position:static}.gallery{padding:18px}.hero{display:block}.hero-actions{margin-top:18px}.sample-grid{grid-template-columns:1fr}.settings-grid,.export-grid,.editor-wireframe{grid-template-columns:1fr 1fr}.editor-wireframe{grid-template-areas:"code preview""divider divider""ascii-controls ascii-output"}.settings-grid-dense,.ascii-controls{grid-template-columns:1fr 1fr}.code-editor,.editor-code-pane{min-height:280px}}@media (width<=720px){.editor-wireframe,.settings-grid-dense,.ascii-controls{grid-template-columns:1fr}.editor-wireframe{grid-template-areas:"code""preview""divider""ascii-controls"}.editor-ascii-pane{grid-area:auto}}