@font-face{font-family:Fredoka;src:url('./Fredoka.ttf') format('truetype');font-weight:300 700;font-display:swap}
:root{--background:#ffffff;--paper:#fffaf7;--blush:#ffedf2;--ink:#713c58;--muted:#8a6274;--rose:#d86592;--line:#efcad7;--yellow:#ffdc69;--success:#287b65;--studio-heading:Fredoka,system-ui,sans-serif;--studio-body:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--studio-radius:18px}
.studio-home{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--blush)}.studio-home img{width:30px;height:30px}.studio-home:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* Background selector: a square preview with a compact, touch-friendly palette. */
.color-picker{position:relative;flex:none}.color-toggle{display:grid;place-items:center;width:44px;height:44px;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:10px;cursor:pointer}.selected-color{display:block;width:28px;height:28px;background:var(--background);border:1px solid #947487;border-radius:5px}.color-palette[hidden]{display:none}.color-palette{position:absolute;right:0;top:54px;width:244px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 35px #713c5824;z-index:20}.color-palette p{font-family:Fredoka,system-ui,sans-serif;font-size:18px;margin-bottom:12px}.color-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.color-option{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:66px;padding:7px 4px;border:2px solid transparent;border-radius:10px;background:#fff;color:var(--ink);font:12px system-ui;cursor:pointer}.color-swatch{width:32px;height:32px;border:1px solid #947487;border-radius:6px}.color-option[aria-pressed="true"]{border-color:var(--ink);background:#faf6f8}.color-option:hover{background:#faf6f8}.color-picker button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}