:root{--paper:#fbfdff;--page:#f0f4f9;--ink:#1e2233;--ink-soft:#565d72;--line:#d7dde7;--coral:#ff5a36;--coral-soft:#ffe3d9;--yellow:#ffd93d;--yellow-soft:#fff6d6;--teal:#149c8f;--teal-soft:#dcf5f2;--radius-control:12px;--radius-panel:22px 30px 20px 34px / 30px 20px 34px 22px;--radius-pill:999px;color:var(--ink);background:var(--page);font-synthesis:none;text-rendering:optimizelegibility;font-family:Nunito,ui-rounded,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input,select,textarea{font:inherit}button,textarea{color:inherit}button{cursor:pointer}h1,h2,h3,p{margin:0}.playground{width:min(1200px,100vw - 32px);margin:0 auto;padding:24px 0 48px}.topbar{z-index:2;border:2.5px solid var(--ink);background:var(--paper);width:max-content;max-width:min(330px,100%);box-shadow:3px 4px 0 var(--yellow);text-align:left;border-radius:18px 22px 10px 16px/20px 16px 12px 14px;grid-area:title;place-self:end;margin:0 22px -14px 0;padding:10px 16px 12px 18px;position:relative;transform:rotate(-1.3deg)}.brand-lockup{align-items:center;gap:12px;display:flex}.brand-mark{flex:none;width:52px;height:auto}.brand-copy{gap:3px;display:grid}.wordmark{isolation:isolate;color:var(--ink);font-family:Caveat,ui-rounded,cursive;font-size:clamp(2rem,3.2vw,3rem);font-weight:700;line-height:.92;display:inline-block;position:relative}.wordmark:after{content:"";z-index:-1;border-radius:var(--radius-pill);background:var(--yellow);opacity:.68;height:.3em;position:absolute;bottom:0;left:-.14em;right:-.12em;transform:rotate(-1.2deg)}.tagline{max-width:25ch;color:var(--ink-soft);font-size:.82rem;font-weight:700;line-height:1.25}.diptych{grid-template-columns:minmax(0,1.1fr) 132px minmax(0,.9fr);grid-template-areas:"input connector title""input connector output";align-items:center;gap:0 8px;display:grid}.panel{background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--radius-panel);padding:22px 24px 26px;position:relative;box-shadow:0 10px 24px -16px #1e223359}.input-panel{grid-area:input;min-width:0;transform:rotate(-.35deg)}.output-panel{grid-area:output;min-width:0;transform:rotate(.35deg)}.panel:before{content:"";z-index:-1;border:2px solid var(--coral);border-radius:inherit;opacity:.28;position:absolute;inset:-7px;transform:rotate(.8deg)}.output-panel:before{border-color:var(--teal);transform:rotate(-.7deg)}.connector{flex-direction:column;grid-area:connector;justify-content:center;align-self:stretch;align-items:center;gap:2px;display:flex;position:relative}.connector svg{width:132px;height:auto}.connector-label{color:var(--ink-soft);white-space:nowrap;font-family:Caveat,ui-rounded,cursive;font-size:1.4rem;font-weight:600;transform:rotate(-4deg)}@media (width<=900px){.diptych{grid-template-columns:1fr;grid-template-areas:"title""input""output";gap:14px}.topbar{width:auto;max-width:100%;box-shadow:none;text-align:left;background:0 0;border:0;justify-self:start;justify-items:start;margin:0;padding:0;transform:none}.input-panel,.output-panel{transform:none}.connector{display:none}}.muted{color:var(--ink-soft);line-height:1.6}.section-title{justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px;display:flex}.controls-stack{margin-top:20px}.controls-stack>.control-label:first-child{margin-top:0;margin-bottom:4px}.controls-stack>.muted{max-width:46ch;margin-bottom:10px}.control-label{color:var(--ink-soft);margin:18px 0 8px;font-size:.82rem;font-weight:800;display:block}.control-label:first-of-type{margin-top:4px}.canvas-wrap{border:2px dashed var(--line);background-color:var(--paper);background-image:radial-gradient(var(--line) 1.4px, transparent 1.4px);background-size:22px 22px;border-radius:16px;height:min(360px,48vh);min-height:260px;position:relative;overflow:hidden}.sketch-canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.canvas-invite{color:var(--ink-soft);pointer-events:none;place-items:center;font-family:Caveat,ui-rounded,cursive;font-size:1.4rem;display:grid;position:absolute;inset:0}.tools-row{flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:14px;display:flex}.tool-group{align-items:center;gap:8px;display:inline-flex}.color-group{gap:7px}.tool-btn{border:2px solid var(--ink);width:40px;height:40px;color:var(--ink);background:var(--paper);border-radius:50%;justify-content:center;align-items:center;transition:transform .15s,background .15s;display:flex}.tool-btn svg{width:19px;height:19px}.tool-btn:hover{background:var(--coral-soft);transform:translateY(-2px)rotate(-3deg)}.tool-btn.is-active{background:var(--coral);border-color:var(--ink);color:var(--ink)}.swatch{border:2px solid var(--ink);border-radius:50%;width:26px;height:26px;padding:0;transition:transform .15s}.swatch:hover{transform:scale(1.12)}.swatch.is-active{box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--ink)}.custom-color-picker{border:2px solid var(--ink);background:var(--paper);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;transition:transform .15s,box-shadow .15s;display:inline-flex;position:relative}.custom-color-picker:hover{transform:scale(1.12)}.custom-color-picker.is-active{box-shadow:0 0 0 3px var(--paper), 0 0 0 5px var(--ink)}.custom-color-input{opacity:0;cursor:pointer;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}.custom-color-preview{border-radius:50%;position:absolute;inset:3px}.custom-color-plus{border:2px solid var(--ink);width:15px;height:15px;color:var(--ink);background:var(--paper);border-radius:50%;justify-content:center;align-items:center;font-size:.72rem;font-weight:900;line-height:1;display:inline-flex;position:absolute;bottom:-5px;right:-5px}.size-btn{border:2px solid var(--ink);width:34px;height:34px;color:var(--ink);background:var(--paper);border-radius:50%;justify-content:center;align-items:center;padding:0;transition:transform .15s,background .15s,box-shadow .15s;display:inline-flex}.size-btn:hover{background:var(--yellow-soft);transform:translateY(-2px)rotate(2deg)}.size-btn.is-active{background:var(--yellow-soft);box-shadow:2px 3px 0 var(--ink)}.size-dot{background:currentColor;border-radius:50%;min-width:3px;max-width:18px;min-height:3px;max-height:18px;display:block}.tool-status{min-height:34px;color:var(--ink-soft);align-items:center;gap:6px;font-size:.82rem;font-weight:800;display:inline-flex}.tool-status-color{border:2px solid var(--ink);border-radius:50%;width:14px;height:14px}.reset-btn{border:2px solid var(--ink);border-radius:var(--radius-pill);color:var(--ink);background:var(--paper);justify-content:center;align-items:center;gap:6px;padding:8px 14px;font-size:.88rem;font-weight:800;line-height:1.2;text-decoration:none;transition:transform .15s,background .15s,box-shadow .15s;display:inline-flex}.reset-btn:not(:disabled):hover{background:var(--coral-soft);transform:translateY(-2px)}.reset-btn:not(:disabled):active{transform:translateY(0)}.tool-actions{align-items:center;gap:8px;margin-left:auto;display:inline-flex}.tool-action{border:2px solid var(--ink);border-radius:var(--radius-pill);color:var(--ink);background:var(--paper);align-items:center;gap:6px;padding:8px 14px;font-size:.85rem;font-weight:700;transition:transform .15s,background .15s;display:inline-flex}.tool-action svg{width:15px;height:15px}.tool-action-icon{justify-content:center;align-items:center;width:15px;height:15px;font-size:1.2rem;font-weight:900;line-height:1;display:inline-flex}.tool-action:not(:disabled):hover{background:var(--yellow-soft);transform:translateY(-2px)}.undo-btn:not(:disabled):hover{background:var(--teal-soft)}.tool-action:disabled{opacity:.45;cursor:not-allowed}.chip-group{flex-wrap:wrap;gap:10px;display:flex}.chip{border:2px solid var(--ink);border-radius:var(--radius-control);color:var(--ink);background:var(--paper);padding:9px 14px 11px;font-size:.88rem;font-weight:700;transition:transform .15s,background .15s;position:relative}.chip:hover{background:var(--yellow-soft);transform:translateY(-2px)}.chip.is-selected{background:var(--paper)}.chip.is-selected .underline{opacity:1}.underline{opacity:0;height:8px;transition:opacity .15s;position:absolute;bottom:2px;left:8px;right:8px}.underline svg{width:100%;height:100%;display:block}.tool-btn:focus-visible,.swatch:focus-visible,.custom-color-picker:focus-within,.size-btn:focus-visible,.tool-action:focus-visible,.chip:focus-visible,.reset-btn:focus-visible,textarea:focus-visible{outline:3px solid var(--coral);outline-offset:2px}.field{gap:8px;margin-top:4px;display:grid}textarea{border:2px solid var(--ink);border-radius:var(--radius-control);background:var(--paper);width:100%;min-height:64px;color:var(--ink);resize:vertical;padding:12px 14px}textarea::placeholder{color:var(--ink-soft)}.prompt-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.prompt-state{text-overflow:ellipsis;white-space:nowrap;max-width:36ch;font-size:.86rem;overflow:hidden}.prompt-buttons{gap:8px;margin-left:auto;display:flex}.prompt-btn{margin-left:0}.prompt-buttons .prompt-btn:first-child:not(:disabled){background:var(--coral);box-shadow:2px 3px 0 var(--ink)}.prompt-buttons .prompt-btn:first-child:not(:disabled):hover{background:var(--coral)}.output-header{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.output-title{color:var(--ink-soft);letter-spacing:-.01em;font-size:.95rem;font-weight:800}.live-pill{border:1.5px solid var(--teal);border-radius:var(--radius-pill);color:#0b5c54;background:var(--teal-soft);align-items:center;gap:7px;padding:6px 12px;font-size:.82rem;font-weight:800;display:inline-flex}.live-pill .dot{background:var(--teal);border-radius:50%;width:8px;height:8px;animation:1.8s ease-in-out infinite pulse}.live-pill.is-error{border-color:var(--coral);color:#7a2a19;background:var(--coral-soft)}.live-pill.is-error .dot{background:var(--coral);animation:none}.live-pill.is-mock{border-color:var(--ink-soft);color:var(--ink-soft);background:var(--yellow-soft)}.live-pill.is-mock .dot{background:var(--ink-soft);animation:none}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.6)}}.preview-wrap.is-settling img{opacity:.55;transition:opacity .2s}@keyframes just-updated-blink{0%{box-shadow:0 0 0 0 var(--teal-soft)}35%{box-shadow:0 0 0 8px var(--teal-soft)}to{box-shadow:0 0 #0000}}.preview-wrap img.just-updated{border-radius:8px;animation:.7s ease-out just-updated-blink}.preview-wrap{aspect-ratio:1;border:2px dashed var(--line);background:var(--paper);border-radius:16px;place-items:center;padding:10px;display:grid;overflow:hidden}.preview-wrap img{object-fit:contain;width:100%;height:100%}.placeholder{max-width:300px;color:var(--ink-soft);text-align:center;padding:20px}.meta-line{margin-top:12px;font-size:.9rem}.error-box{border-radius:var(--radius-control);color:#7a2a19;background:var(--coral-soft);margin-top:12px;padding:12px}.preview-actions{justify-content:space-between;align-items:center;gap:12px;margin-top:16px;display:flex}.preview-actions .meta-line{margin:0}.preview-actions .reset-btn{margin-left:auto}.reset-btn:disabled{opacity:.45;cursor:not-allowed}:focus-visible{outline:3px solid color-mix(in oklab, var(--coral) 55%, transparent);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}