*{box-sizing:border-box} :root{--font:Arial,sans-serif;--heading:Arial Black,Arial,sans-serif;--ink:#111;--paper:#fff;--accent:#111;--radius:8px}body{margin:0;background:var(--paper);color:var(--ink);font:14px var(--font)}main{max-width:1200px;margin:auto;padding:24px}h1{font:900 clamp(22px,3vw,30px) var(--heading);text-transform:uppercase;margin:0 0 8px}header p{margin:0 0 38px;font-size:13px}.workspace{display:grid;grid-template-columns:1.05fr 1fr;gap:48px}.preview{position:relative;aspect-ratio:1.4;border:4px solid white;border-radius:var(--radius);box-shadow:0 1px 5px #0005;overflow:hidden;background:#eee}.preview img{width:100%;height:100%;object-fit:cover}#placeholder{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:radial-gradient(ellipse at 20% 30%,#bbb6 2px,transparent 5px),radial-gradient(ellipse at 70% 70%,#aaa5 2px,transparent 5px),#ededeb;background-size:13px 11px,17px 15px}#placeholder span{font-size:38px}#placeholder[hidden],img[hidden]{display:none}.palettes{display:grid;grid-template-columns:1fr 1fr;gap:34px}h2{font:900 13px var(--heading);text-transform:uppercase;margin:0 0 14px}.palette p{font-size:13px;min-height:46px;margin:0 0 18px}.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px}.swatch{position:relative;aspect-ratio:1.1;border:4px solid white;border-radius:var(--radius);box-shadow:0 2px 4px #0005;background:var(--color);isolation:isolate}.quantity{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;font-weight:bold;color:var(--label);-webkit-text-stroke:1px var(--outline);pointer-events:none}.controls{position:absolute;inset:0;display:grid;grid-template-rows:2fr 1fr;opacity:0}.controls button{border:0;background:#0002;color:var(--label);font-size:22px;cursor:pointer;min-width:0;padding:0}.controls button+button{border-top:1px solid #fff8}.controls button:disabled{color:#aaa;background:#6665;cursor:default}.swatch:hover .controls,.swatch:has(:focus-visible) .controls{opacity:1}.swatch:hover .quantity,.swatch:has(:focus-visible) .quantity{visibility:hidden}.controls button:focus-visible{outline:3px solid var(--accent);outline-offset:2px;z-index:2}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.actions button{font:inherit;padding:10px 14px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent);color:var(--paper);cursor:pointer}.actions button:disabled{opacity:.4;cursor:default}#reset{background:var(--paper);color:var(--ink)}#status{min-height:20px;font-size:13px}@media(max-width:800px){main{padding:18px}.workspace{gap:28px;grid-template-columns:1fr}.preview-column{max-width:580px;width:100%;margin:auto}.palettes{gap:24px}.swatch{max-height:90px}.palette p{min-height:34px}}@media(hover:none){.controls{opacity:1}.quantity{inset:0 25%;z-index:1;font-size:16px}.controls button{font-size:19px;text-align:left;padding-left:8px}}@media(prefers-reduced-motion:no-preference){.controls{transition:opacity .12s}}

/* Preview controls and composition stay inside the grain image. */
:root{--save-accent:#f34691;--save-ink:#fff}
.preview-column{container-type:inline-size}
.preview{display:flex;flex-direction:column;justify-content:flex-end;min-height:280px;width:100%;min-width:0;isolation:isolate}
.preview>img{position:absolute;inset:0;z-index:0}
#placeholder{z-index:1;pointer-events:none}
.preview-toolbar{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;padding:14px;max-height:100%}
.composition[hidden]{display:none}
.composition[hidden]+.actions{grid-column:2}
.composition{list-style:none;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;margin:0;padding:2px;max-height:160px;overflow-y:auto;scrollbar-width:thin}
.composition-item{display:flex;align-items:center;gap:6px;max-width:100%;padding:5px 9px 5px 5px;background:rgb(255 255 255 / 90%);border:1px solid rgb(255 255 255 / 80%);border-radius:999px;box-shadow:0 1px 3px #0002;color:#333;font-size:11px;line-height:1.25}
.composition-color{flex:0 0 18px;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px #0001}
.composition-item>span:not(.composition-color){overflow-wrap:anywhere}
.composition-item strong{white-space:nowrap;font-size:11px;color:#666}
.preview-toolbar .actions{flex-wrap:nowrap;gap:8px;margin:0}
.preview-toolbar .actions button{border:0;border-radius:999px;padding:12px 15px;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 1px 4px #0002;min-height:40px}
.preview-toolbar #reset{background:#fff;color:#111}
.preview-toolbar #save{background:var(--save-accent);color:var(--save-ink)}
.preview-toolbar .actions button:focus-visible{outline:3px solid #111;outline-offset:2px}
@container(max-width:420px){.composition[hidden]+.actions{grid-column:1}.preview-toolbar{grid-template-columns:1fr;gap:10px;padding:10px}.preview-toolbar .actions{justify-content:flex-end}.composition{max-height:105px}.preview-toolbar .actions button{padding:11px 14px}}

/* Shared alignment: status messages do not change the height of the preview. */
.workspace{row-gap:12px;align-items:stretch}
.workspace>#status{grid-column:1 / -1;margin:0;min-width:0}
.workspace>#status:empty{display:none}
.palettes{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto 1fr;row-gap:0}
.palette{display:grid;grid-template-rows:subgrid;grid-row:span 3;min-width:0}
.swatches{align-content:space-between}
@media(min-width:801px){
  .preview-column{display:flex;flex-direction:column;min-width:0}
  .preview{flex:1;aspect-ratio:auto}
}
@media(max-width:800px){.workspace{row-gap:28px}.workspace>#status{order:1}.palettes{order:2}}