@import "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,450..700,25&family=Space+Grotesk:wght@400;500;700&display=swap";:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-synthesis:none;font-optical-sizing:auto;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-sans:"Space Grotesk", "Hiragino Sans", "Yu Gothic", sans-serif;--font-display:"Fraunces", Georgia, serif;--font-mono:"SFMono-Regular", "JetBrains Mono", "Menlo", monospace;--ink:#15181a;--ink-soft:#15181abd;--paper:#e8eef0;--paper-shadow:#b4c0c6;--surface-dark:#11181d;--surface-dark-soft:#172027;--line-light:#e8eef024;--line-dark:#15181a2e;--paper-muted:#e8eef0a8;--ghost-dark:#e8eef00f;--ghost-dark-hover:#e8eef01a;--ghost-light:#f8fbfcc2;--ghost-light-hover:#f8fbfceb;--field-dark:#050a0e33;--overlay-dark:#0b1014d6;--accent:#4c6672;--accent-strong:#3d535e;--accent-cool:#6a7b82;--accent-faint:#4c667224;--shadow-soft:0 22px 60px #181f251f;--shadow-strong:0 28px 90px #060a0c38;--shell:#ccd5d9;--panel-light:#dfe6e8;--panel-light-strong:#f1f5f6;--radius-panel:12px;--radius-stage:8px;--radius-card:8px;--radius-input:6px;font-family:Space Grotesk,Hiragino Sans,Yu Gothic,sans-serif;font-weight:400;line-height:1.45}*{box-sizing:border-box}html,body,#app{min-height:100%}body{color:var(--ink);background:var(--shell);letter-spacing:-.012em;min-inline-size:320px;margin:0}button,input,textarea{font:inherit;color:inherit}button{border:0}textarea,input{min-width:0}button,label,canvas,.drawer-toggle,.canvas-overlay,.studio-summary,.surface-topline,.masthead,.brandline{-webkit-user-select:none;user-select:none}button,label,canvas,.drawer-toggle{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}button,.drawer-toggle{touch-action:manipulation}input,textarea,.markup-shell,.markup-code,.markup-line,.markup-line *{-webkit-user-select:text;user-select:text}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ink-page{width:min(1520px,100% - 56px);isolation:isolate;min-block-size:100dvh;margin:0 auto;padding:8px 0 14px;position:relative;overflow:visible}.grain-shader{pointer-events:none;z-index:40;opacity:.15;mix-blend-mode:multiply;block-size:100vh;inline-size:100vw;position:fixed;inset:0}.masthead{margin-bottom:10px;padding-bottom:8px;position:relative}.masthead:after{content:"";background:var(--line-dark);block-size:1px;position:absolute;inset:auto 0 0}.masthead-bar,.masthead-copy,.masthead-credit,.surface-topline,.surface-topline-compact,.header-actions,.studio-footer,.action-strip{display:flex}.masthead-bar{justify-content:space-between;align-items:baseline;gap:12px}.brandline{flex-wrap:wrap;align-items:center;gap:10px;display:inline-flex}.brandline-logo{flex:none;block-size:22px;inline-size:22px;display:block}.brandline p,.masthead-copy p,.surface-topline h2,.surface-topline p{margin:0}.brandline p{letter-spacing:.01em;font-size:.82rem;font-weight:500}.masthead-copy{flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:6px 12px}.masthead-copy p{color:var(--ink-soft);letter-spacing:-.015em;font-size:.92rem}.masthead-credit{color:var(--ink-soft);letter-spacing:-.01em;align-items:center;gap:8px;font-size:.78rem;text-decoration:none}.masthead-avatar{border:1px solid #15181a24;border-radius:50%;block-size:22px;inline-size:22px;display:block}.workbench{grid-template-rows:auto minmax(0,1fr);gap:22px;min-block-size:calc(100dvh - 46px);display:grid}.workspace-grid{grid-template-columns:minmax(0,1.22fr) minmax(340px,.78fr);align-items:start;gap:28px;min-block-size:0;padding-top:2px;display:grid}.studio-panel,.preview-panel,.control-panel{min-block-size:0;min-inline-size:0;animation:.48s both rise-in;position:relative;overflow:visible}.studio-panel,.preview-panel{grid-template-rows:auto minmax(0,1fr) auto;display:grid}.studio-panel{color:var(--ink);padding:0 28px 0 0}.preview-panel{border-left:1px solid var(--line-dark);padding:0 0 0 28px}.control-panel{color:var(--ink);border-bottom:1px solid var(--line-dark);padding:0 0 18px}.surface-topline{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}.surface-topline h2{letter-spacing:-.02em;font-size:1rem;font-weight:600}.surface-topline p{max-width:36ch;color:inherit;opacity:.74;letter-spacing:-.01em;margin-top:6px;font-size:.88rem}.surface-topline-compact{align-items:center}.header-actions,.action-strip{flex-wrap:wrap;gap:10px}.header-actions{justify-content:flex-end}@media (hover:hover){.masthead-credit:hover{color:var(--accent-strong)}}.canvas-stage,.preview-stage{border-radius:var(--radius-stage);min-block-size:0;padding:12px;position:relative;overflow:hidden}.canvas-stage{background:var(--paper);overscroll-behavior:contain;border:1px solid #15181a24;place-items:center;block-size:min(42dvh,430px);padding:12px;display:grid;box-shadow:inset 0 0 0 1px #f8fbfc47}.drawing-pad{border-radius:calc(var(--radius-stage) - 2px);touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;background:0 0;block-size:auto;max-block-size:100%;inline-size:auto;max-inline-size:100%;display:block}.canvas-overlay{z-index:2;pointer-events:none;justify-content:space-between;gap:12px;display:flex;position:absolute;inset:auto 18px 18px}.canvas-overlay span,.studio-summary,.button{border-radius:var(--radius-input)}.canvas-overlay span{background:var(--overlay-dark);min-block-size:36px;color:var(--paper);letter-spacing:.015em;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);align-items:center;padding:0 14px;font-size:.76rem;font-weight:500;display:inline-flex}.studio-footer{border-top:1px solid var(--line-dark);justify-content:space-between;align-items:center;gap:16px;margin-top:14px;padding-top:12px}.studio-summary{background:0 0;gap:3px;padding:0;display:grid}.studio-summary-label{color:var(--ink-soft);letter-spacing:.015em;font-size:.74rem;font-weight:500}.studio-summary strong{font-family:var(--font-display);letter-spacing:-.025em;font-size:1.18rem;font-weight:600;line-height:.95}.studio-summary-meta{color:var(--ink-soft);letter-spacing:-.01em;font-size:.8rem}.button{appearance:none;border:1px solid var(--line-dark);min-block-size:46px;color:var(--ink);letter-spacing:-.015em;cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:0 16px;font-size:.92rem;font-weight:600;transition:transform .18s,background .18s,border-color .18s,color .18s,opacity .18s;display:inline-flex}.button:disabled{cursor:not-allowed;opacity:.4}.button-strong{background:var(--accent);color:#f7fbfc;border-color:#0000}.button-ghost{background:0 0}.preview-panel .button,.preview-panel .button-secondary{border-color:var(--line-dark);background:0 0}.preview-panel .button-strong{background:var(--accent);color:#f7fbfc;border-color:#0000}.preview-stage{border:1px solid var(--line-dark);background:#f8fbfcd1;block-size:min(24dvh,250px)}.preview-svg,.empty-preview{block-size:100%;min-block-size:0;inline-size:100%}.empty-preview{color:var(--ink-soft);text-align:center;place-items:center;padding:28px;display:grid}.empty-preview p{letter-spacing:-.015em;max-width:22ch;margin:0;font-size:.95rem;line-height:1.4}.drawer{border-top:1px solid var(--line-dark);min-inline-size:0;max-inline-size:100%;margin-top:12px;padding-top:12px}.control-panel .drawer{border-top-color:var(--line-dark)}.drawer-toggle{cursor:pointer;letter-spacing:0;background:0 0;justify-content:space-between;align-items:center;gap:12px;inline-size:100%;padding:0;font-size:.86rem;font-weight:600;display:flex}.drawer-toggle span:last-child{opacity:.54;font-size:1.1rem;line-height:1}.drawer-body{min-inline-size:0;max-inline-size:100%;margin-top:10px;overflow-x:clip}@media (hover:hover){.button:hover:not(:disabled){background:#f8fbfc66;border-color:#15181a3d;transform:translateY(-1px)}.button-strong:hover:not(:disabled){background:var(--accent-strong)}.preview-panel .button:hover:not(:disabled),.preview-panel .button-secondary:hover:not(:disabled){background:#f8fbfc6b;border-color:#1d19162e}.preview-panel .button-strong:hover:not(:disabled){background:var(--accent-strong)}}.markup-shell{background:#0f151a;border:1px solid #0f13153d;max-block-size:320px;min-inline-size:0;max-inline-size:100%;overflow:auto}.markup-code{box-sizing:border-box;color:#dfe8ec;inline-size:max-content;min-inline-size:100%;font-family:var(--font-mono);white-space:pre;word-break:normal;overflow-wrap:normal;padding:16px 18px;font-size:.86rem;line-height:1.6;display:inline-block}.markup-line{display:block}.token-angle{color:#7f8f98}.token-tag{color:#8fc4d1}.token-attr{color:#b9c5cc}.token-punct{color:#91a2ab}.token-string{color:#b5d8c1}.token-comment{color:#6d828c;font-style:italic}.control-stack{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;display:grid}.control-group{border-top:1px solid var(--line-dark);padding-top:12px}.control-group-head,.field-head,.toggle-row{display:flex}.control-group-head{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}.control-group-head p,.swatch-field label,.number-field label,.field-head label,.text-field label{letter-spacing:.015em;font-size:.76rem;font-weight:500}.control-group-head p{color:var(--ink);margin:0;font-size:.8rem}.control-group-head span,.toggle-copy small,.swatch-field label,.number-field label,.field-head label,.text-field label{color:var(--ink-soft)}.control-group-head span{letter-spacing:-.01em;font-size:.8rem}.swatch-row,.number-grid,.drawer-body-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.swatch-field,.number-field,.text-field,.range-field,.toggle-copy{gap:8px;display:grid}.swatch-control,.number-field input,.text-field input,.text-field textarea{border-radius:var(--radius-input);inline-size:100%}.swatch-control{border:1px solid var(--line-dark);background:#f8fbfcad;align-items:center;gap:10px;min-block-size:54px;padding:0 14px;display:flex;position:relative;overflow:hidden}.swatch-chip{border:2px solid #e8eef05c;border-radius:999px;flex-shrink:0;block-size:18px;inline-size:18px}.swatch-control strong,.toggle-copy strong{letter-spacing:-.01em;font-size:.9rem;font-weight:500}.swatch-control input[type=color]{opacity:0;cursor:pointer;position:absolute;inset:0}.range-field+.range-field,.range-field+.number-grid,.number-grid+.range-field,.range-field+.toggle-row,.toggle-row+.toggle-row{border-top:1px solid var(--line-dark);margin-top:10px;padding-top:10px}.field-head{justify-content:space-between;align-items:baseline;gap:12px}.field-head strong{letter-spacing:-.03em;font-size:.94rem;font-weight:600}.number-field input,.text-field input,.text-field textarea{border:1px solid var(--line-dark);background:#f8fbfcad;padding:12px 14px}.text-field-wide{grid-column:1/-1}.text-field textarea{resize:vertical;min-block-size:110px}.toggle-row{cursor:pointer;align-items:center;gap:12px;position:relative}.toggle-row input{opacity:0;pointer-events:none;position:absolute}.toggle-switch{background:#e8eef029;border-radius:7px;flex-shrink:0;block-size:30px;inline-size:52px;transition:background .18s;position:relative}.toggle-switch:before{content:"";background:var(--paper);border-radius:5px;block-size:22px;inline-size:22px;transition:transform .18s,background .18s;position:absolute;inset:4px auto auto 4px;box-shadow:0 4px 10px #00000038}.toggle-row input:checked+.toggle-switch{background:var(--accent-cool)}.toggle-row input:checked+.toggle-switch:before{background:var(--surface-dark);transform:translate(22px)}.toggle-copy small{letter-spacing:-.01em;font-size:.8rem;line-height:1.35}.range-field input[type=range]{appearance:none;cursor:pointer;background:0 0;block-size:34px;inline-size:100%}.range-field input[type=range]::-webkit-slider-runnable-track{background:#e8eef01f;border:1px solid #e8eef02e;border-inline:0;border-radius:3px;block-size:10px;box-shadow:inset 0 1px #f8fbfc14,inset 0 -1px #060a0c3d}.range-field input[type=range]::-moz-range-track{background:#e8eef01f;border:1px solid #e8eef02e;border-inline:0;border-radius:3px;block-size:10px;box-shadow:inset 0 1px #f8fbfc14,inset 0 -1px #060a0c3d}.range-field input[type=range]::-moz-range-progress{background:#4c6672c7;border-block:1px solid #e8eef01f;border-radius:3px;block-size:10px}.range-field input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border:2px solid #f7fbfc;border-radius:4px;block-size:18px;inline-size:18px;margin-top:-4px;transform:rotate(45deg);box-shadow:0 0 0 4px #4c667224,inset 0 0 0 1px #0a101429}.range-field input[type=range]::-moz-range-thumb{background:var(--accent);border:2px solid #f7fbfc;border-radius:4px;block-size:18px;inline-size:18px;transform:rotate(45deg);box-shadow:0 0 0 4px #4c667224,inset 0 0 0 1px #0a101429}.number-field input:focus-visible,.text-field input:focus-visible,.text-field textarea:focus-visible,.range-field input[type=range]:focus-visible,.swatch-control:focus-within,.markup-shell:focus-visible,.drawer-toggle:focus-visible,.button:focus-visible{outline-offset:2px;outline:2px solid #66705fb8}@media (width<=1120px){.control-stack{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=980px){.workspace-grid{grid-template-columns:1fr}.studio-panel{order:1}.preview-panel{order:2}}@media (width<=940px){.masthead-bar,.surface-topline,.surface-topline-compact,.studio-footer,.canvas-overlay{flex-direction:column;align-items:flex-start}.masthead-copy{justify-content:flex-start}}@media (width<=760px){.ink-page{width:min(100% - 20px,1520px);padding-top:10px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}.workbench{gap:16px;min-block-size:auto}.workspace-grid{order:1;gap:16px}.studio-panel,.preview-panel,.control-panel{background:#f8fbfc52;border:1px solid #15181a1f;border-radius:14px;padding:16px;box-shadow:0 10px 30px #181f2514}.control-panel{border-bottom:1px solid #15181a1f;order:2;padding-bottom:16px}.studio-panel{order:1;padding-right:16px}.preview-panel{border-left:1px solid #15181a1f;order:2;padding-left:16px}.canvas-stage,.preview-stage{border-radius:8px;block-size:auto}.canvas-stage{block-size:min(54dvh,420px);padding:10px}.drawing-pad{border-radius:6px}.header-actions,.action-strip{gap:10px;inline-size:100%;display:grid}.header-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.header-actions .button:last-child{grid-column:1/-1}.action-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.button{flex:initial;min-block-size:44px;inline-size:100%}.control-stack,.drawer-body-meta{grid-template-columns:1fr}.control-stack{gap:16px}.swatch-row,.number-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.field-head,.control-group-head{gap:10px}.toggle-row{align-items:flex-start}.canvas-overlay{gap:8px;inset:auto 12px 12px}.canvas-overlay span{min-block-size:32px;padding:0 10px;font-size:.72rem}.studio-footer{gap:12px;margin-top:12px;padding-top:12px}.preview-stage{min-block-size:220px}.preview-svg,.empty-preview{min-block-size:200px}.empty-preview{padding:24px}.surface-topline p{max-width:none}}@media (width<=560px){.header-actions,.action-strip,.swatch-row,.number-grid{grid-template-columns:1fr}.action-strip .button:last-child{grid-column:auto}.studio-summary strong{font-size:1.08rem}.masthead-bar{gap:8px}.masthead-copy p{font-size:.84rem}.brandline p,.masthead-credit{font-size:.74rem}.canvas-stage{block-size:min(50dvh,360px)}}@keyframes rise-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}