:root{color-scheme:light}.text-colors{padding:12px;margin:0 0 13px;border:1px solid var(--line);border-radius:8px;background:#f7f9fd}.color-caption{display:block;font-size:.75rem;color:#687790;margin-bottom:10px}.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.color-swatch{display:flex;justify-content:flex-start;gap:6px;background:white;color:#4d5a70;border:1px solid #dde3ee;font-size:.6875rem;padding:8px 6px;white-space:normal;text-align:left}.color-swatch>span{width:15px;height:15px;border:1px solid #0003;border-radius:50%;flex-shrink:0}.color-swatch:hover{border-color:var(--blue)}#theme-toggle{font-size:.8125rem}html[data-theme=dark]{color-scheme:dark;--blue:#91acff;--muted:#a7b3c8;--line:#354158;--panel:#1c2535;background:#111827;color:#e6edf8}html[data-theme=dark] body{background:#111827;color:#e6edf8}html[data-theme=dark] header,html[data-theme=dark] .editing-panel,html[data-theme=dark] .preview-panel,html[data-theme=dark] dialog{background:var(--panel);color:#e6edf8}html[data-theme=dark] .brand{color:#eef3ff}html[data-theme=dark] .logo{background:#436bfa;color:#fff}html[data-theme=dark] .quiet,html[data-theme=dark] .icon-button{background:#28354a;color:#dce6fa;border-color:#41516d}html[data-theme=dark] .primary{background:#5278ff;color:white}html[data-theme=dark] .steps{background:#182132}html[data-theme=dark] .step b,html[data-theme=dark] .pill,html[data-theme=dark] .nav span{background:#2b384d;color:#bfcee8}html[data-theme=dark] .step.active b{background:#5278ff;color:white}html[data-theme=dark] label,html[data-theme=dark] summary{color:#c5d1e5}html[data-theme=dark] input:not([type=checkbox],[type=range]),html[data-theme=dark] select,html[data-theme=dark] textarea{background:#141e2e;border-color:#40506b;color:#e0e8f7}html[data-theme=dark] input::placeholder,html[data-theme=dark] textarea::placeholder{color:#8e9db6}html[data-theme=dark] .character-row{border-color:#303d53}html[data-theme=dark] .upload-box{background:#1d2c45;border-color:#4a628f}html[data-theme=dark] .upload-box strong{color:#ccdafa}html[data-theme=dark] .segment-item{background:#202d42;color:#c4d1e8;border-color:#3d4d67}html[data-theme=dark] .segment-item.selected{background:#2b3e67;color:#d5e0ff;border-color:#7395ed}html[data-theme=dark] .composition-stage{background:#131d2d}html[data-theme=dark] dialog p,html[data-theme=dark] dialog li{color:#c0cce1}html[data-theme=dark] code{background:#2b3953;color:#c0d1ff}html[data-theme=dark] .text-colors{background:#172235}html[data-theme=dark] .color-caption{color:#b5c3dc}html[data-theme=dark] .color-swatch{background:#26344b;color:#e0e9f8;border-color:#42536f}html[data-theme=dark] .color-swatch>span{border-color:#fff4}html[data-theme=dark] .danger-text{color:#ff9fac}html[data-theme=dark] .nav,html[data-theme=dark] .step{color:#aab8d0}html[data-theme=dark] .nav.active,html[data-theme=dark] .step.active{color:#a8bfff}html[data-theme=dark] .privacy,html[data-theme=dark] .preview-footer p,html[data-theme=dark] footer,html[data-theme=dark] .save-status{color:#a4b2cb}@media(max-width:1100px){.header-actions{gap:8px}#theme-toggle{padding:8px;font-size:.75rem}.brand{min-width:145px}.color-swatch{font-size:.6875rem}}@media(max-width:800px){header{gap:10px}.header-actions{flex-wrap:wrap}.color-swatch{font-size:.8125rem}.color-caption{font-size:.8125rem}}

/* One continuous workspace, with generous editing space. */
header{padding:20px 3%;flex-wrap:wrap}.brand-group{display:grid;gap:7px}.brand{font-size:1.15rem}.credit{font-size:.75rem;color:var(--muted)}.credit a{color:var(--blue)}main{padding-bottom:40px}.workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#source{height:430px;min-height:300px;font-size:.875rem}.inline-filters{margin:0;padding:20px 23px;border-top:1px solid var(--line)}.inline-filters>summary{margin:0}.inline-filters>summary span{font-weight:400;color:var(--muted);margin-left:8px}.inline-filters .pane{padding:22px 0 0}.section-title{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:35px 0 18px}.section-title h2{font-size:1.25rem}.section-title .muted{margin:0;flex:1}.text-colors{margin-top:12px}.preview-stage{min-height:330px}.header-actions{flex-wrap:wrap}.brand-group{min-width:0}.brand{white-space:normal}@media(max-width:850px){.workspace{grid-template-columns:1fr}.composer-controls{order:0}.composer-preview{order:0}#source{height:350px}.header-actions{margin-left:0}.section-title .muted{flex-basis:100%}.brand{font-size:1rem}}

/* Compact controls on the left, uninterrupted previews on the right. */
.preview-stack{display:grid;gap:20px;min-width:0}.inline-screenshot{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}.inline-screenshot .screenshot-upload{margin:4px 10px 4px 0}.inline-screenshot .row{margin:8px 0 14px}.inline-screenshot .two-fields label{margin-bottom:14px}.segment-drawer{padding:18px 23px;margin:0;border-top:1px solid var(--line)}.segment-drawer>summary{margin-bottom:0}.segment-drawer[open]>summary{margin-bottom:20px}.preview-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.preview-actions button{font-size:.75rem;padding:8px 10px}.preview-heading{padding:18px 20px;flex-wrap:wrap}.preview-stage{min-height:210px;max-height:360px}.preview-stack .composition-stage{min-height:200px;padding:16px}.preview-footer{padding:16px 20px}.page-heading{margin-bottom:22px}#source{height:330px;min-height:240px}.syntax{margin:10px 0 14px}.inline-filters{padding:18px 23px}.editor-toolbar{margin-top:8px}.composer-tip{font-size:.75rem}#fullscreen-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:var(--panel);overflow:auto}#fullscreen-dialog .composer-preview{height:100%;border:0;border-radius:0;display:flex;flex-direction:column}#fullscreen-dialog .composition-stage{flex:1;min-height:0;padding:16px;overflow:hidden}#fullscreen-dialog #composition{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;box-shadow:none}#fullscreen-dialog .composer-tip{display:none}#fullscreen-dialog .preview-heading,#fullscreen-dialog .preview-footer{flex-shrink:0}#fullscreen-dialog::backdrop{background:#111827}#image-name{overflow-wrap:anywhere;min-width:0}@media(max-width:850px){.preview-stack{gap:18px}.preview-actions .pill{display:none}#source{height:300px}.page-heading p:not(.eyebrow){max-width:36rem}}

.project-hint{font-size:.75rem;color:var(--muted);margin:-10px 0 20px}.position-toolbar{padding:12px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;flex-wrap:wrap;gap:12px}.alignment-buttons{display:flex;gap:5px;flex-wrap:wrap}.alignment-buttons button{font-size:.7rem;padding:6px 8px}.scale-control{display:flex;flex-direction:row;align-items:center;gap:8px;margin:0}.scale-control input{width:76px!important}.drop-active{outline:3px dashed var(--blue);outline-offset:-5px;background:#335cff22!important}textarea[readonly]{opacity:.7}.heading-actions{flex-wrap:wrap}.header-actions{flex-wrap:wrap}.editor-toolbar{flex-wrap:wrap}#fullscreen-dialog .position-toolbar{flex-shrink:0}#fullscreen-dialog h2{font-size:1rem;margin:0}#fullscreen-dialog .composition-stage{position:relative}#fullscreen-dialog #composition{max-height:calc(100dvh - 260px)}