:root{--ink: #141824;--muted: #667085;--soft: #9aa4b5;--line: #dbe3ef;--paper: #f4f7fb;--surface: rgba(255, 255, 255, .92);--accent: #1677ff;--accent-dark: #0b5ed7;--accent-soft: #e7f0ff;--shadow: 0 20px 60px rgba(33, 43, 65, .1);--checker: linear-gradient(45deg, #eef2f7 25%, transparent 25%), linear-gradient(-45deg, #eef2f7 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eef2f7 75%), linear-gradient(-45deg, transparent 75%, #eef2f7 75%), #ffffff}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh;padding-bottom:96px;color:var(--ink);background:radial-gradient(circle at top left,rgba(22,119,255,.12),transparent 32rem),linear-gradient(180deg,#fbfcff 0%,var(--paper) 44%,#eef3f9 100%);font-family:Figtree,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;letter-spacing:0}button,input,textarea,select{font:inherit;letter-spacing:0}button{border:0;cursor:pointer}button:disabled,input:disabled{cursor:not-allowed}button:disabled{-webkit-text-fill-color:currentColor}.material-symbols-rounded{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24}.app-shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr}.topbar{display:grid;place-items:center;gap:24px;padding:52px 32px 34px;text-align:center}.brand-block{display:grid;gap:14px;justify-items:center}.topbar h1,.editor-panel h2,.group-heading h3{margin:0;line-height:1}.topbar h1{font-size:51px;font-weight:500;line-height:1.05}.brand-description{max-width:390px;margin:0;color:#7d8798;font-size:15px;font-weight:400;line-height:1.55}.mode-tabs{display:inline-flex;align-items:center;gap:4px;padding:4px;background:#ffffffdb;border:1px solid rgba(219,227,239,.96);border-radius:999px;box-shadow:0 14px 38px #212b4117}.mode-tab{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#5d6b82;background:transparent;border-radius:999px;padding:9px 15px;font-weight:500;white-space:nowrap;transition:background .14s ease,color .14s ease,box-shadow .14s ease}.mode-tab .material-symbols-rounded{font-size:19px}.mode-tab:hover:not(.is-active){color:var(--ink);background:#eef3fa}.mode-tab.is-active{color:#fff;background:var(--accent);box-shadow:0 8px 22px #1677ff38}.eyebrow{margin:0 0 8px;color:var(--accent);font-size:12px;font-weight:500;text-transform:uppercase}.workspace{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:22px;padding:18px 24px 12px}.sidebar-stack{min-width:0;align-self:start;display:grid;gap:14px;position:sticky;top:18px}.side-panel,.editor-panel{min-width:0;background:var(--surface);border:1px solid rgba(219,227,239,.92);border-radius:8px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}.side-panel{padding:14px;display:grid;gap:14px}.dropzone{min-height:210px;display:grid;place-items:center;align-content:center;gap:10px;padding:22px;color:var(--ink);background:linear-gradient(180deg,#fff,#f8fbff);border:1px dashed #a8b9d4;border-radius:8px;text-align:center;transition:border-color .16s ease,background .16s ease,transform .16s ease}.dropzone.has-file{min-height:132px;place-items:start center;background:#fff;border-style:solid}.dropzone:hover,.dropzone.dragging{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}.dropzone input[type=file]{position:absolute;opacity:0;pointer-events:none}.drop-icon{width:44px;height:44px;display:grid;place-items:center;color:#fff;background:var(--accent);border-radius:50%;font-size:27px;font-variation-settings:"FILL" 0,"wght" 600,"GRAD" 0,"opsz" 32;line-height:1;box-shadow:0 10px 24px #1677ff3d}.dropzone.has-file .drop-icon{font-size:25px}.dropzone strong{font-size:17px}.dropzone small,.summary-row span,.status-line,.select-label span,.language-current span,.language-note,#exportHint,.group-heading>span,.group-heading>div>span,.swatch-card small{color:var(--muted);font-size:13px}.file-summary{display:grid;gap:10px}.summary-row{display:grid;gap:4px;padding:12px;background:#f9fbfe;border:1px solid #e5ebf4;border-radius:8px}.summary-row strong{overflow-wrap:anywhere}.theme-name-field{cursor:text}.theme-name-field input{width:calc(100% + 8px);min-width:0;margin:-2px -4px 0;padding:3px 4px;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:6px;font-weight:500;overflow-wrap:anywhere}.theme-name-field input:focus{outline:none;background:#fff;border-color:#b9c8dc;box-shadow:0 0 0 3px #1677ff1a}.status-line{min-height:22px}.status-line.error{color:#b42318}.status-line.success{color:var(--accent-dark)}.saved-themes-panel{display:grid;gap:10px;align-self:start;padding:16px}.saved-themes-heading{display:flex;justify-content:space-between;gap:12px;align-items:end}.saved-themes-heading h2{margin:0;font-size:16px;font-weight:500;line-height:1}.saved-theme-actions,.saved-theme-footer{display:grid;gap:8px;align-items:center}.saved-theme-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.saved-theme-actions .secondary-button{min-width:0;padding-inline:8px}.saved-theme-list{max-height:156px;display:grid;gap:6px;overflow-y:auto;padding-right:3px;scrollbar-color:#c7d3e4 transparent;scrollbar-width:thin}.saved-theme-item,.saved-theme-empty{padding:9px 10px;min-width:0;width:100%;border:1px solid #e2e8f2;border-radius:8px;background:#fff}.saved-theme-item{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:6px;align-items:center;padding:6px;transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.saved-theme-item:hover,.saved-theme-item.is-selected{border-color:var(--accent);background:#f8fbff;box-shadow:0 0 0 2px #1677ff1a}.saved-theme-select{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 2px;color:inherit;background:transparent;text-align:left}.saved-theme-select strong{min-width:0;overflow:hidden;color:var(--ink);font-size:13px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.saved-theme-select span,.saved-theme-empty{color:var(--muted);font-size:12px;line-height:1.35;white-space:nowrap}.saved-theme-delete-button{width:28px;border-radius:7px;background:transparent}.saved-theme-delete-button .material-symbols-rounded{font-size:18px}.saved-theme-footer{min-height:16px}#savedThemeNote{min-width:0;color:var(--muted);font-size:12px;line-height:1.35;overflow-wrap:anywhere}.file-reset-button{justify-self:start;min-height:26px}.text-button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0;color:var(--muted);background:transparent;font-size:12px;font-weight:500}.text-button:hover:not(:disabled){color:#b42318}.text-button:disabled{opacity:.45}.editor-grid{display:grid;gap:22px;align-content:start;min-width:0}.mode-view[hidden]{display:none!important}.theme-view{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);grid-template-areas:"colors rail";gap:22px;align-content:start;min-width:0}.color-studio-panel{grid-area:colors;min-height:650px}.language-panel{align-self:start}.utility-rail{grid-area:rail;display:grid;gap:14px;align-self:start;position:sticky;top:18px}.editor-panel{padding:18px}.panel-heading,.group-heading.with-action{display:flex;justify-content:space-between;gap:16px;align-items:start}.panel-heading{margin-bottom:18px}.panel-heading .eyebrow{margin-bottom:0}.panel-actions,.history-actions{display:flex;gap:8px;align-items:center}.editor-panel h2{font-size:21px;font-weight:500}.color-groups{display:grid;gap:34px}.color-group{min-width:0;display:grid;gap:12px}.grid-footer-actions{display:flex;justify-content:flex-end;margin-top:2px}.group-heading{min-width:0;display:grid;gap:5px}.custom-actions{min-width:0;display:flex;gap:8px;align-items:center;flex-wrap:nowrap;justify-content:flex-end}.hidden-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.group-heading h3{font-size:16px;font-weight:500}.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;color:#344054;background:#eef3fa;border:1px solid #dce5f1;border-radius:8px;padding:7px 10px;font-size:13px;font-weight:500;white-space:nowrap}.button-icon{flex:0 0 auto;font-size:18px}.secondary-button:hover:not(:disabled){background:#e5edf8}.secondary-button:disabled{color:#667085;background:#f4f7fb;border-color:#e2e8f2;box-shadow:none}.secondary-button:disabled .material-symbols-rounded{color:#7f8a9d}.swatch-grid{min-width:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;padding-bottom:4px}.swatch-card{min-width:0;aspect-ratio:1;display:grid;grid-template-rows:1fr auto;gap:5px;padding:7px;position:relative;overflow:hidden;background:#fff;border:1px solid #e2e8f2;border-radius:8px;text-align:left;transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease}.swatch-card:hover:not(:disabled),.swatch-card.is-selected{border-color:var(--accent);box-shadow:0 0 0 2px #1677ff1f}.swatch-card[draggable=true]{cursor:grab}.swatch-card.is-dragging{opacity:.52;transform:scale(.98)}.swatch-card.is-copy-target{border-color:var(--accent);box-shadow:0 0 0 3px #1677ff29}.swatch-card:disabled{cursor:not-allowed}.swatch-card.is-empty{background:#ffffffa8}.swatch-card.is-empty .swatch-fill{background:var(--checker);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}.swatch-card strong{min-width:0;color:var(--ink);font-size:clamp(8px,1vw,11px);font-weight:400;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.swatch-fill{min-height:0;border:1px solid rgba(20,24,36,.12);border-radius:5px;background:#f9fbfe}.edit-mark{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;position:absolute;right:5px;top:5px;color:#4f5f78;background:#ffffffeb;border:1px solid #d8e1ed;border-radius:6px;font-size:14px}.native-color-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.color-editor{display:grid;gap:14px}.color-editor>.eyebrow{margin-bottom:0}.editor-preview-block{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;align-items:start}.editor-color-preview{width:78px;aspect-ratio:1;border:1px solid #cfd8e6;border-radius:8px;background:var(--checker);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}.editor-color-preview:enabled{cursor:pointer}.editor-color-preview:enabled:hover{border-color:var(--accent);box-shadow:0 0 0 2px #1677ff1f}.editor-preview-details{display:grid;grid-template-columns:minmax(0,1fr) 30px;column-gap:8px;align-items:center;min-width:0}.selected-title-row{display:contents}.selected-title-input{grid-column:1;grid-row:1;width:100%;min-width:0;color:var(--ink);background:#fff;border:1px solid #d5dae4;border-radius:6px;padding:8px 9px;font-size:16px;font-weight:500}.selected-title-input:focus{outline:none;border-color:#b9c8dc;box-shadow:0 0 0 3px #1677ff1a}.selected-title-input:disabled{color:#667085;background:#f8fafd}.trash-button{grid-column:2;grid-row:1}#selectedColorHint{grid-column:1;grid-row:2}.icon-button{width:30px;aspect-ratio:1;display:inline-flex;align-items:center;justify-content:center;color:#5d6b82;background:#f1f5fb;border:1px solid #dce5f1;border-radius:8px}.icon-button .material-symbols-rounded{font-size:19px}.icon-button:hover:not(:disabled){color:#b42318;background:#fff3f1;border-color:#ffd0c9}.icon-button:disabled{color:#8995a8;background:#f4f7fb;border-color:#e2e8f2}.history-button{color:#4f5f78}.history-button:hover:not(:disabled){color:var(--accent);background:var(--accent-soft);border-color:#bfd5ff}#selectedColorHint{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.35}.editor-controls{display:grid;gap:12px}.field-label{display:grid;gap:7px}.field-label span,.rgb-control span{color:var(--muted);font-size:13px}.field-label input,.language-input,#languageSelect{width:100%;min-width:0;color:#344054;background:#fff;border:1px solid #d5dae4;border-radius:6px;padding:8px 9px}#selectedColorHex{text-transform:uppercase}.rgb-control{display:grid;grid-template-columns:18px minmax(0,1fr) 52px;gap:8px;align-items:center}.rgb-stack{display:grid;gap:9px}.rgb-control input[type=range]{width:100%;accent-color:var(--accent)}.rgb-value-input{width:52px;min-width:0;color:#344054;background:#fff;border:1px solid #d5dae4;border-radius:6px;padding:5px 4px;font-size:13px;font-weight:500;text-align:center}.rgb-value-input:disabled{background:#f8fafd}.rgb-value-input::-webkit-inner-spin-button,.rgb-value-input::-webkit-outer-spin-button{margin:0}.slide-preview{min-height:168px;display:grid;gap:10px;padding:14px;border:1px solid #d8deea;border-radius:8px;background:#fff;aspect-ratio:16 / 10;box-shadow:inset 0 0 0 1px #fffc}.preview-title{width:52%;height:8px;border-radius:999px;background:var(--ink)}.preview-body{display:grid;grid-template-columns:1fr .7fr;gap:14px;align-items:center}.preview-chart{height:78px;display:grid;grid-template-columns:repeat(4,9px);align-items:end;justify-content:center;gap:9px;padding-top:12px}.preview-chart span{min-height:14px;border-radius:0}.preview-chart span:nth-child(1){height:46%}.preview-chart span:nth-child(2){height:76%}.preview-chart span:nth-child(3){height:58%}.preview-chart span:nth-child(4){height:88%}.preview-pie{width:min(74px,100%);aspect-ratio:1;justify-self:center;border-radius:50%;background:conic-gradient(var(--pie-a, #1677ff) 0 34%,var(--pie-b, #e05757) 34% 58%,var(--pie-c, #12a179) 58% 78%,var(--pie-d, #e0a11b) 78% 100%);box-shadow:inset 0 0 0 7px #ffffffb8}.preview-copy{display:none;gap:10px;align-content:center}.preview-copy strong,.preview-copy span{display:block;height:9px;border-radius:999px;background:#d9dee8}.preview-copy strong{width:62%;height:13px}.preview-copy span:nth-child(2){width:100%}.preview-copy span:nth-child(3){width:74%}.preview-dots{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-self:end}.preview-dots i{height:7px;border-radius:999px}.language-layout{display:grid;grid-template-columns:minmax(180px,.35fr) minmax(260px,.65fr);gap:14px;align-items:end}.language-current{display:grid;gap:5px;padding:12px;background:#f9fbfe;border:1px solid #e5ebf4;border-radius:8px}.language-current strong{font-size:15px}.select-label{display:grid;gap:8px}.language-note{grid-column:1 / -1;margin:0}.seo-faq{width:min(760px,calc(100% - 48px));justify-self:center;display:grid;gap:16px;margin:20px auto 122px;text-align:center}.seo-faq h2,.seo-faq p{margin:0}.seo-faq h2{color:#7d8798;font-size:15px;font-weight:500;line-height:1.4}.seo-faq-list{display:grid;gap:0}.seo-faq details{border-top:1px solid rgba(125,135,152,.22)}.seo-faq details:last-child{border-bottom:1px solid rgba(125,135,152,.22)}.seo-faq summary{display:block;position:relative;padding:11px 0;padding-inline:28px;color:#5d6b82;cursor:pointer;font-size:13px;font-weight:500;line-height:1.45;list-style:none;list-style-type:none}.seo-faq summary::-webkit-details-marker{display:none}.seo-faq summary::marker{content:"";font-size:0}.seo-faq summary:after{content:"expand_more";position:absolute;top:50%;right:0;color:#9aa4b5;font-family:Material Symbols Rounded;font-size:18px;font-weight:400;line-height:1;transform:translateY(-50%);transition:transform .16s ease}.seo-faq details[open] summary:after{transform:translateY(-50%) rotate(180deg)}.seo-faq summary:focus-visible{outline:2px solid rgba(22,119,255,.36);outline-offset:4px;border-radius:6px}.seo-faq p{color:#7d8798;font-size:13px;font-weight:400;line-height:1.55;padding:0 28px 13px}.action-bar{width:auto;max-width:calc(100vw - 48px);min-width:0;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:nowrap;position:fixed;left:50%;bottom:18px;z-index:30;transform:translate(-50%);padding:8px;background:#ffffffeb;border:1px solid rgba(219,227,239,.96);border-radius:8px;box-shadow:0 18px 56px #212b412e;backdrop-filter:blur(18px)}.toolbar-group{min-width:0;display:flex;align-items:center;gap:8px}#exportHint{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;color:#fff;background:var(--accent);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:500;box-shadow:0 12px 28px #1677ff38;white-space:nowrap}.primary-button:hover:not(:disabled){background:var(--accent-dark)}.primary-button:disabled{color:#eef3fa;background:#b9c5d6;box-shadow:none}body:not(.has-file) .preview-panel{opacity:1}body:not(.has-file) .swatch-card,body:not(.has-file) .language-current,body:not(.has-file) .select-label,body:not(.has-file) .action-bar{filter:saturate(.35)}@media(max-width:1400px){.theme-view{grid-template-columns:1fr;grid-template-areas:"colors" "rail"}.utility-rail{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.color-studio-panel{min-height:auto}}@media(max-width:1120px){.workspace{grid-template-columns:1fr}.sidebar-stack{position:static}.editor-grid{grid-template-columns:1fr}.theme-view{grid-template-columns:1fr;grid-template-areas:"colors" "rail"}.utility-rail{position:static}.slide-preview{aspect-ratio:16 / 9}}@media(max-width:720px){.topbar{padding:38px 18px 26px}.workspace{padding:14px}.seo-faq{width:min(100% - 28px,540px);margin:16px auto 104px}.mode-tabs{width:100%;max-width:330px}.mode-tab{flex:1;padding-inline:10px}.topbar h1{font-size:42px}.brand-description{max-width:300px;font-size:14px}.panel-heading,.group-heading.with-action{flex-direction:column;align-items:stretch}.action-bar{max-width:calc(100vw - 28px);bottom:12px;flex-wrap:nowrap;justify-content:center;align-items:center;gap:6px;padding:8px}.toolbar-group{justify-content:center;flex-wrap:wrap;gap:6px}#exportHint{display:none}.action-bar .secondary-button,.action-bar .primary-button{flex:0 0 auto;min-height:32px;padding:6px 9px;font-size:12px}.action-bar .icon-button{width:28px}.custom-actions{width:100%;flex-wrap:wrap}.utility-rail{grid-template-columns:1fr}.custom-actions .secondary-button{flex:1}.grid-footer-actions{justify-content:flex-end}.grid-footer-actions .secondary-button{width:auto}.swatch-grid,.custom-grid{grid-template-columns:repeat(10,minmax(0,1fr))}.preview-body,.language-layout,.editor-controls{grid-template-columns:1fr}.slide-preview{aspect-ratio:auto}}