.creator-page{--content:88rem;row-gap:2rem}.creator-top{display:flex;justify-content:space-between;align-items:start;gap:1rem;flex-wrap:wrap}.creator-top h1{font-size:clamp(2rem,1.5rem + 1.6vw,3.2rem);max-inline-size:none}.creator-top p:last-child{margin-block-start:.65rem;color:var(--muted)}.draft-badge{border:1px solid var(--line);border-radius:2rem;padding:.55rem .85rem;font-size:.68rem;letter-spacing:.13em;background:var(--wash)}.editor{container-type:inline-size;display:flex;flex-wrap:wrap;gap:clamp(1rem,.5rem + 2vw,2.5rem);align-items:start}.preview-column{flex-basis:0;flex-grow:999;min-inline-size:min(100%,52%);position:static;inset-block-start:1rem;align-self:start}.controls{flex-basis:24rem;flex-grow:1;border:1px solid var(--line);border-radius:.6rem;background:var(--surface);overflow:clip}.preview-tools,.preview-caption,.section-label,.control-heading,.history-tools{display:flex;align-items:center;gap:.65rem}.preview-tools{justify-content:space-between;margin-block-end:.7rem}.view-toggle,.art-tabs{display:flex;gap:.35rem}.view-toggle button,.art-tabs button{font-size:.85rem}.view-toggle button[aria-pressed=true],.art-tabs button[aria-pressed=true]{background:var(--ink);color:var(--surface);border-color:var(--ink)}.history-tools button{font-size:1.3rem;min-inline-size:44px;padding:.1rem .6rem}.preview-stage{background:oklch(94.8% .008 80);border:1px solid var(--line);border-radius:.6rem;display:grid;overflow:clip;min-block-size:18rem;block-size:clamp(21rem,58svh,42rem);aspect-ratio:auto}.preview-stage>*{grid-area:1/1;min-inline-size:0}#artboard svg{inline-size:100%;block-size:100%;display:block}#artboard{block-size:100%}#art-move{cursor:grab;touch-action:none}#art-move:active{cursor:grabbing}#art-move:focus-visible{outline:2px solid var(--warm);outline-offset:4px}.preview-caption{justify-content:space-between;margin-block-start:.9rem;flex-wrap:wrap}.preview-caption strong{display:block}.preview-caption span{font-size:.85rem;color:var(--muted)}.guide-toggle,.permission{display:flex!important;align-items:start;gap:.5rem;font-size:.8rem}.guide-toggle input,.permission input{flex:none;min-block-size:1rem;inline-size:1rem;margin-block-start:.25rem}.preview-note{font-size:.76rem;color:var(--muted);margin-block-start:.6rem;max-inline-size:65ch}.source-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;border-block-start:1px solid var(--line);padding-block:1rem;margin-block-start:1rem;font-size:.75rem}.source-strip p{flex-basis:25rem;flex-grow:1}.source-strip a{white-space:nowrap}.control-section{padding:clamp(1rem,.75rem + .6vw,1.5rem);display:grid;gap:.65rem}.control-section+.control-section{border-block-start:1px solid var(--line)}.section-label{margin-block-end:.3rem}.section-label>span{font-size:.7rem;color:var(--warm);letter-spacing:.08em}.section-label h2{font-size:1.1rem}.controls label{font-size:.8rem;font-weight:600;display:block}.controls label:has(output){display:flex;justify-content:space-between}.controls output{font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}.controls input:not([type=range],[type=checkbox],[type=file]),.controls select{inline-size:100%;min-block-size:44px}.controls input[type=range]{inline-size:100%;padding:0;min-block-size:32px;accent-color:var(--accent);border:0}.controls input[type=color]{padding:.2rem!important;min-block-size:44px}.controls textarea{min-block-size:5rem;max-block-size:10rem}.body-lock{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem;padding:.75rem;background:var(--paper);border:1px solid var(--line);border-radius:.35rem;font-size:.8rem}.body-lock span{color:var(--muted)}.control-heading{justify-content:space-between;margin-block-start:.3rem}.control-heading a{font-size:.72rem}.color-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(2.8rem,1fr));gap:.45rem}.color-option{padding:.3rem;min-block-size:46px;border:1px solid var(--line);display:grid;place-items:center;position:relative;background:transparent}.color-option::before{content:'';inline-size:1.8rem;aspect-ratio:1;border-radius:50%;background:var(--color);border:1px solid oklch(0% 0 none / .12)}.color-option[aria-pressed=true]{border:2px solid var(--accent);background:var(--paper)}.color-option[aria-pressed=true]::after{content:'✓';position:absolute;inset-block-end:-.25rem;inset-inline-end:-.2rem;background:var(--accent);color:var(--surface);border-radius:50%;inline-size:1.05rem;block-size:1.05rem;font-size:.66rem;line-height:1.05rem}.color-evidence{font-size:.76rem;padding:.7rem;border-inline-start:2px solid var(--warm);background:var(--paper)}.color-evidence strong{display:block;font-size:.9rem}.color-evidence p{margin-block-start:.3rem}.color-evidence details{margin-block-start:.5rem}.color-evidence a{display:block;margin-block:.25rem}.field-pair{display:flex;flex-wrap:wrap;gap:.6rem}.field-pair>div{flex:1 1 7rem;display:grid;gap:.4rem}.presets{display:flex;flex-wrap:wrap;gap:.35rem}.presets button{font-size:.73rem;padding:.45rem .6rem;flex:1 1 auto}.art-tabs button{flex:1}.art-tabs{inline-size:100%}#text-controls,#image-controls{display:grid;gap:.65rem}.upload-control{display:grid!important;gap:.55rem;padding:.9rem;border:1px dashed var(--line);border-radius:.4rem;background:var(--paper);font-size:.8rem;cursor:pointer}.upload-control input{inline-size:100%;border:0;padding:0;font-size:.75rem}#file-info{font-size:.75rem;color:var(--muted)}.controls details>summary{font-size:.8rem;cursor:pointer;min-block-size:32px}.controls details>p{margin-block:.5rem}.save-actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.save-actions button{font-size:.8rem}.text-button{background:transparent;border-color:transparent;text-decoration:underline;text-underline-offset:.2em;font-size:.75rem;justify-self:start;padding-inline:0}.action-status{font-size:.8rem;color:var(--accent);overflow-wrap:anywhere}.inline-warning{font-size:.8rem;color:var(--danger);margin-block-start:.7rem}.creator-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-block-start:1px solid var(--line);padding-block-start:1.5rem;align-items:center}.creator-bottom>div{flex:1 1 35rem}.creator-bottom h2{font-size:1.2rem}.creator-bottom p{font-size:.85rem;color:var(--muted);margin-block-start:.6rem}.creator-bottom>a{font-size:.85rem}.saved-body{padding:1.5rem;max-block-size:70svh;overflow:auto}.saved-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-block:1rem;border-block-end:1px solid var(--line)}.saved-row div{flex:1 1 13rem}.saved-row span{display:block;font-size:.8rem;color:var(--muted)}#saved-list:empty::after{content:'No saved designs yet. Make your first combination, then save a version.'}#source-board{margin:0;padding:1rem;align-self:center}#source-board img{inline-size:100%;max-block-size:65svh;object-fit:contain}#source-board figcaption{font-size:.75rem;margin-block-start:.7rem;color:var(--muted)}#creator-toast{position:fixed;inset-block-end:1.5rem;inset-inline:1rem;margin-inline:auto;inline-size:fit-content;max-inline-size:calc(100% - 2rem);z-index:50;background:var(--ink);color:var(--surface);padding:.75rem 1rem;border-radius:.4rem;font-size:.85rem}[hidden]{display:none!important}@media(hover:hover) and (pointer:fine){.color-option:hover{border-color:var(--accent)}.presets button:hover{background:var(--paper)}}

@container (width > 59rem){.preview-column{position:sticky}}
.preview-stage{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}.preview-stage>*{min-block-size:0}#artboard{min-block-size:0}#artboard svg{min-block-size:0}

#source-board{align-self:stretch;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:.5rem;block-size:100%;min-block-size:0}#source-board img{block-size:100%;min-block-size:0;max-block-size:none;object-fit:contain}#source-board figcaption{margin:0}