@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Funnel+Display:wght@300;400;500;600;700;800&family=Bricolage+Grotesque:wght@400;600;700&family=Fraunces:wght@400;600;700&family=Archivo+Black&family=Big+Shoulders+Display:wght@700;900&family=Playfair+Display:wght@600;700;900&family=DM+Mono:wght@500&family=Anton&family=Sora:wght@400;700&family=Unbounded:wght@700;800&family=Roboto:wght@400;700;900&family=Open+Sans:wght@400;700&family=Lato:wght@400;700;900&family=Montserrat:wght@400;700;900&family=Poppins:wght@400;600;700&family=Raleway:wght@400;700&family=Merriweather:wght@400;700&family=Oswald:wght@400;600;700&family=Source+Sans+3:wght@400;700&family=Nunito:wght@400;700;800&family=Work+Sans:wght@400;700&family=Manrope:wght@400;700&family=PT+Sans:wght@400;700&family=Libre+Baskerville:wght@400;700&family=Crimson+Text:wght@400;700&family=Lora:wght@400;700&family=EB+Garamond:wght@400;700&family=Josefin+Sans:wght@400;700&family=Bebas+Neue&family=Abril+Fatface&family=DM+Serif+Display&family=Instrument+Sans:wght@400;700&family=Instrument+Serif&family=Plus+Jakarta+Sans:wght@400;700&family=Outfit:wght@400;700&family=Figtree:wght@400;700&family=Public+Sans:wght@400;700&family=Newsreader:wght@400;700&family=Literata:wght@400;700&family=Spectral:wght@400;700&family=Karla:wght@400;700&family=Rubik:wght@400;700&family=Chivo:wght@400;700&family=Cormorant:wght@400;700&family=Crimson+Pro:wght@400;700&family=Bitter:wght@400;700&family=Domine:wght@400;700&family=Zilla+Slab:wght@400;700&family=Cabin:wght@400;700&family=Mukta:wght@400;700&family=Heebo:wght@400;700&family=Epilogue:wght@400;700&family=Hanken+Grotesk:wght@400;700&family=Albert+Sans:wght@400;700&family=Hind:wght@400;700&family=Inconsolata:wght@400;700&family=Space+Mono:wght@400;700&family=JetBrains+Mono:wght@400;700&family=Fira+Code:wght@400;700&family=IBM+Plex+Sans:wght@400;700&display=swap";*{box-sizing:border-box}html,body,#root{background:var(--ink);height:100%;margin:0}body{color:#1c1c1c;font-family:Geist,-apple-system,sans-serif}:root{--accent:#ff5a36;--mono:"Geist Mono", ui-monospace, Menlo, monospace;--sidebar-width:260px}[data-theme=light]{--ink:#f0f0f0;--chrome:#fff;--chrome-soft:#fbfaf7;--line:#1414141a;--line-soft:#1414140d;--text-bright:#1c1c1c;--text-dim:#6b6b6b;--surface-shadow:0 16px 40px #0000001f;--overlay-soft:#1414140d;--overlay-med:#1414141a;--dot-bg:#fff;--dot-color:#1c1c1c}[data-theme=dark]{--ink:#0a0a0a;--chrome:#1c1c1c;--chrome-soft:#232323;--line:#f5f3ee1a;--line-soft:#f5f3ee0d;--text-bright:#f5f3ee;--text-dim:#8a8a8a;--surface-shadow:0 16px 40px #00000080;--overlay-soft:#f5f3ee0f;--overlay-med:#f5f3ee1f;--dot-bg:#0a0a0a;--dot-color:#f5f3ee}.app-grid{background:var(--ink);box-sizing:border-box;grid-template-rows:auto 1fr auto;gap:16px;width:100vw;height:100vh;padding:20px;display:grid}.top-bar{border-radius:18px;justify-content:space-between;align-items:center;padding:14px 24px;display:flex;background:#fff!important}[data-theme=dark] .top-bar{background:#1c1c1c!important}.top-bar__title{color:var(--text-bright);font-family:Inter,sans-serif;font-size:16px;font-weight:700}.top-bar__credit{color:var(--text-dim);font-family:Inter,sans-serif;font-size:13px}.top-bar__credit a{color:var(--text-bright);font-weight:600;text-decoration:none}.top-bar__credit a:hover{text-decoration:underline}.main-row{grid-template-columns:1fr var(--sidebar-width);gap:16px;min-height:0;display:grid}.bottom-row{grid-template-columns:1fr var(--sidebar-width);align-items:stretch;gap:10px;height:64px;display:grid}.toolbar__toggle{cursor:pointer;background:0 0;border:none;border-radius:0 999px 999px 0;justify-content:center;align-items:center;height:100%;padding:0 8px;display:flex}.canvas-wrap{min-height:0;position:relative}.canvas-frame{border:1px solid var(--line);background-image:radial-gradient(#1414140a 1px,#0000 1px);background-size:16px 16px;border-radius:18px;width:100%;height:100%;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0000000f,0 30px 80px #0000001f}.canvas-frame canvas{width:100%;height:100%;display:block}.text-input-overlay{z-index:5;resize:none;color:#0000;caret-color:#0000;cursor:text;background:0 0;border:none;outline:none;width:100%;height:100%;font-size:1px;position:absolute;top:0;left:0;overflow:hidden}.surface{background:linear-gradient(180deg, var(--chrome-soft), var(--chrome));border:1px solid var(--line);box-shadow:var(--surface-shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.field-label{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;font-size:9.5px;display:block}.toolbar{border-radius:999px;justify-content:space-between;align-items:center;gap:0;min-width:0;height:100%;padding:0 0 0 8px;display:flex;overflow:hidden;background:#fff!important}[data-theme=dark] .toolbar{background:#1c1c1c!important}.toolbar__group{flex-direction:column;flex:1;justify-content:center;align-items:center;min-width:0;padding:0 24px;display:flex}.toolbar__group--first{flex:none;padding:0 16px 0 4px}.toolbar__rule{background:var(--line);flex-shrink:0;align-self:stretch;width:1px;margin:12px 0}.toolbar__toggle{cursor:pointer;background:0 0;border:none;border-radius:0 999px 999px 0;flex-shrink:0;justify-content:center;align-items:center;height:100%;padding:0 16px 0 24px;display:flex}.toolbar__toggle:hover{background:0 0}.segmented{background:var(--overlay-soft);border-radius:999px;align-items:center;gap:2px;height:48px;padding:5px;display:flex}.segmented button{color:var(--text-dim);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:999px;align-items:center;gap:6px;padding:12px 16px;font-family:Inter,sans-serif;font-size:13px;transition:background .15s,color .15s,transform .1s;display:flex}.segmented button:hover{color:var(--text-bright);background:var(--overlay-soft)}.segmented button.is-active{background:var(--chrome);color:var(--text-bright);box-shadow:0 1px 3px #0000001f}.segmented button:active{transform:scale(.96)}.slider-row{flex-direction:row;justify-content:center;align-items:center;gap:10px;width:100%;display:flex}.slider-row input[type=range]{appearance:none;background:var(--overlay-med);border-radius:2px;outline:none;width:100%;min-width:80px;height:4px}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text-bright);cursor:pointer;border-radius:50%;width:18px;height:18px;transition:transform .12s,background .12s}.slider-row input[type=range]::-webkit-slider-thumb:hover{background:var(--accent);transform:scale(1.15)}.slider-row input[type=range]::-moz-range-thumb{background:var(--text-bright);cursor:pointer;border:none;border-radius:50%;width:18px;height:18px}.slider-row__value{font-family:var(--mono);color:var(--text-bright);text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;order:1;min-width:28px;font-size:13px}.align-group{gap:2px;display:flex}.align-group button{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:8px;width:36px;height:36px;font-size:13px;transition:background .15s,color .15s,transform .1s}.align-group button:hover{color:var(--text-bright)}.align-group button.is-active{background:var(--overlay-med);color:var(--text-bright)}.align-group button:active{transform:scale(.96)}.custom-select{position:relative}.custom-select__trigger{background:var(--overlay-soft);box-shadow:0 1px 2px #00000014, inset 0 0 0 1px var(--line);color:var(--text-bright);cursor:pointer;white-space:nowrap;border:none;border-radius:10px;align-items:center;gap:8px;min-height:40px;padding:7px 12px;font-family:Inter,sans-serif;font-size:12.5px;transition:background .15s,transform .1s;display:flex}.custom-select__trigger:hover{background:#14141414}.custom-select__trigger:active{transform:scale(.96)}.custom-select__caret{color:var(--text-dim);margin-left:auto;font-size:9px}.custom-select__menu{background:var(--chrome);border:1px solid var(--line);min-width:100%;box-shadow:var(--surface-shadow);z-index:30;border-radius:10px;max-height:240px;padding:4px;position:absolute;top:calc(100% + 8px);left:0;overflow-y:auto}.custom-select__menu::-webkit-scrollbar{width:6px}.custom-select__menu::-webkit-scrollbar-thumb{background:#14141426;border-radius:3px}.custom-select__menu::-webkit-scrollbar-track{background:0 0}.custom-select__option{text-align:left;width:100%;color:var(--text-dim);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:7px;padding:7px 10px;font-family:Inter,sans-serif;font-size:12.5px;display:block}.custom-select__option:hover{background:var(--overlay-soft);color:var(--text-bright)}.custom-select__option.is-active{color:var(--text-bright)}.typography-panel{border-radius:18px;flex-direction:column;gap:16px;min-height:0;padding:20px;display:flex;background:#fff!important}[data-theme=dark] .typography-panel{background:#1c1c1c!important}.typography-panel .align-group{gap:4px;width:100%;display:flex}.typography-panel .align-group button{border-radius:10px;flex:1;height:40px}.typography-panel__header{color:var(--text-bright);border-bottom:1px solid var(--line);padding-bottom:12px;font-family:Inter,sans-serif;font-size:13px;font-weight:700}.typography-panel__field{flex-direction:column;gap:6px;display:flex}.typography-panel__row{gap:10px;display:flex}.typography-panel__row .typography-panel__field{flex:1}.typography-panel__field .custom-select__trigger{justify-content:space-between;width:100%}.typography-panel__stepper{background:var(--overlay-soft);box-shadow:inset 0 0 0 1px var(--line);border-radius:9px;align-items:center;padding:0 10px;display:flex}.typography-panel__stepper input{width:100%;color:var(--text-bright);font-family:var(--mono);font-variant-numeric:tabular-nums;background:0 0;border:none;outline:none;padding:8px 0;font-size:12.5px}.typography-panel__stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.typography-panel__stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.theme-toggle{cursor:pointer;border:none;border-radius:999px;justify-content:center;align-items:center;width:130px;height:100%;padding:0;display:flex;position:relative;box-shadow:none!important;background:0 0!important;border:none!important}.theme-toggle__track{border:2px solid var(--line);background:0 0;border-radius:999px;width:100px;height:48px;transition:border-color .2s;position:relative}.theme-toggle__thumb{background:var(--chrome);border:2px solid var(--line);width:36px;height:36px;color:var(--text-dim);border-radius:50%;justify-content:center;align-items:center;transition:transform .2s,color .2s;display:flex;position:absolute;top:50%;left:4px;transform:translateY(-50%)}.theme-toggle__thumb.is-dark{color:var(--text-bright);transform:translateY(-50%)translate(52px)}.svg-actions{align-items:stretch;gap:8px;height:100%;display:flex}.svg-btn{border:1px solid var(--line);color:var(--text-bright);cursor:pointer;white-space:nowrap;box-shadow:var(--surface-shadow);flex:1;justify-content:center;align-items:center;gap:6px;min-width:0;height:100%;padding:0 12px;font-family:Geist,sans-serif;font-size:12px;font-weight:600;transition:background .15s,color .15s,box-shadow .15s,transform .1s;display:flex;overflow:hidden;background:#fff!important}[data-theme=dark] .svg-btn{background:#1c1c1c!important}.svg-btn--copy{border-radius:999px 333px 333px 999px}.svg-btn--download{border-radius:333px 999px 999px 333px}.svg-btn:hover{background:var(--overlay-soft)}.svg-btn:active{transform:scale(.97)}.svg-btn.is-done{background:var(--chrome);box-shadow:none;color:var(--text-bright)}@media (width<=768px){.app-grid{grid-template-rows:auto auto auto auto auto;gap:10px;height:auto;min-height:100vh;padding:12px}.main-row{grid-template-columns:1fr}.canvas-wrap{min-height:280px}.typography-panel{border-radius:14px;gap:12px;padding:16px}.bottom-row{grid-template-rows:auto auto;grid-template-columns:1fr;gap:10px;height:auto}.toolbar{border-radius:20px;flex-wrap:wrap;justify-content:space-between;gap:10px;height:auto;min-height:64px;padding:10px 16px}.toolbar__group{flex:none;padding:0}.toolbar__group--first{flex:none;order:1;padding:0}.toolbar__group:nth-child(4){flex:100%;order:3;padding:0 4px}.toolbar__rule{display:none}.segmented{height:42px;padding:4px}.segmented button{gap:4px;padding:6px 10px;font-size:12px}.slider-row{gap:8px;width:100%}.slider-row input[type=range]{flex:1;width:100%}.slider-row__value{min-width:24px;font-size:12px}.toolbar__toggle{flex-shrink:0;order:2;padding:0 4px}.theme-toggle__track{width:60px;height:34px}.theme-toggle__thumb{width:24px;height:24px;left:3px}.theme-toggle__thumb.is-dark{transform:translateY(-50%)translate(28px)}.svg-actions{width:100%;height:56px}.svg-btn{padding:0 12px;font-size:13px}.top-bar{border-radius:14px;flex-wrap:wrap;gap:4px;padding:12px 16px}.top-bar__title{font-size:14px}.top-bar__credit{font-size:12px;display:block!important}}@media (width<=480px){.segmented button{padding:5px 8px;font-size:11px}.top-bar__credit{font-size:11px;display:block!important}.svg-btn{padding:0 10px;font-size:12px}.app-grid{gap:8px;padding:8px}.canvas-wrap{min-height:220px}.segmented button{gap:4px;padding:5px 8px;font-size:11px}.toolbar__group{padding:0 4px}.top-bar__credit{display:none}.svg-btn{gap:4px;padding:0 8px;font-size:11px}.typography-panel{padding:12px}}