/* ═══════════════════════════════════════════════════════════════════════════
   ULA MAKER — the maker, its Ulas, and everything they may change
   ═══════════════════════════════════════════════════════════════════════════

   Split out of `lab.css` so a page can carry the maker without inheriting the
   UI lab's chrome. `lab.css` sets `body { … }`; a marketing page loading it to
   get a launcher button would have its own typography quietly replaced.

   Loaded by `ui-lab/index.html`, `ai-lab/index.html` and the ula.ltd site.
   Depends on the design system's tokens and components being loaded first.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Its own attribute: the effects manager owns `data-ula-cursor` and clears it
   on every paint, which would take this with it. */
html[data-ula-cursor-image="hillary-clinton"],html[data-ula-cursor-image="hillary-clinton"] *{cursor:url("assets/hillary-clinton-cursor.png") 12 8,auto!important}
.ula-cursor-reset{position:fixed;z-index:calc(var(--z-toast) + 1);left:50%;bottom:1.25rem;display:flex;align-items:center;gap:var(--space-3);padding:.65rem .8rem .65rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);box-shadow:var(--shadow-lg);color:var(--color-text);font:inherit;font-size:var(--text-body-sm);font-weight:var(--font-weight-bold);transform:translateX(-50%)}.ula-cursor-reset[hidden]{display:none}.ula-cursor-reset span{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--color-primary-subtle)}


.ula-maker { position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:var(--z-toast);display:grid;justify-items:end;gap:var(--space-3);pointer-events:none }
.ula-maker>* { pointer-events:auto }
.ula-maker-launcher { --button-depth-color:var(--color-border-strong);position:relative;width:4rem;height:4rem;padding:1.05rem;border-color:var(--color-border);border-radius:50%;background:var(--color-surface);color:var(--color-text);touch-action:none;cursor:grab }
.ula-maker[data-dragging="true"] .ula-maker-launcher{cursor:grabbing;box-shadow:none;transform:translateY(2px)}
.ula-maker-launcher:focus-visible { outline:3px solid var(--color-focus);outline-offset:3px }
.ula-u-mark { width:100%;height:100%;overflow:visible }
.ula-maker-launcher .ula-mark[data-animate="true"] .ula-mark-assembly { animation-duration:1.0625s }
.ula-maker-launcher .ula-mark[data-animate="true"] .ula-mark-final { animation:ula-mark-land .256s .806s cubic-bezier(.18,.9,.24,1.35) both,ula-logo-breathe 4.375s 1.19s ease-in-out infinite }
.ula-maker-launcher .ula-mark[data-animate="true"] .ula-mark-swipe { animation-duration:calc(var(--swipe-duration,.32s) * .625);animation-delay:calc(var(--swipe-delay,0s) * .625) }
.ula-maker-launcher .ula-mark[data-animate="true"] .ula-mark-draw { animation-duration:.275s;animation-delay:.444s }
.ula-maker-panel { position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(6.5rem,12vh,8rem);display:grid;grid-template-rows:auto minmax(0,1fr);width:min(46rem,calc(100vw - 2rem));height:auto;min-height:13rem;max-height:calc(100dvh - 9rem);overflow:hidden;border:1px solid var(--color-border);border-radius:2rem;background:color-mix(in srgb,var(--color-surface) 96%,transparent);backdrop-filter:blur(14px);box-shadow:var(--shadow-lg);transform-origin:bottom right;transition:width .46s var(--motion-spring),border-radius .32s var(--motion-ease),box-shadow .32s var(--motion-ease) }
.ula-maker-panel[hidden] { display:none }
.ula-maker-panel:not([hidden]):not([data-library-open="true"]) { animation:ula-maker-enter .42s var(--motion-spring) both }
.ula-maker-panel[data-library-open="true"] { width:min(68rem,calc(100vw - 2rem));height:min(36rem,calc(100dvh - 9rem));border-radius:var(--radius-xl);box-shadow:var(--shadow-lg) }
.ula-maker-head { position:relative;z-index:2;display:flex;align-items:center;gap:var(--space-4);min-height:0;padding:var(--space-5) var(--space-6) var(--space-4);background:var(--color-surface);cursor:grab;touch-action:none;user-select:none }
.ula-maker[data-panel-dragging="true"] .ula-maker-head{cursor:grabbing}
.ula-maker-brand { display:flex;align-items:center;gap:var(--space-4);margin-right:auto;min-width:0 }.ula-maker-brand p { font-size:var(--text-body-sm);line-height:1.35 }.ula-maker-wordmark { width:5rem;height:auto;flex:none }
.ula-maker-library { min-height:2.5rem;padding:var(--space-1) var(--space-3);white-space:nowrap;font-size:var(--text-body-sm) }.ula-maker-library span { display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;margin-left:.35rem;border:0;border-radius:50%;background:var(--ula-blue-600);color:#fff;font-size:var(--text-caption) }
.ula-maker-close{width:2.25rem;height:2.25rem;min-height:2.25rem;padding:0;flex:none;font-size:1rem}
.ula-maker-body { min-height:0;padding:0 var(--space-6) var(--space-5);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin }.ula-maker-welcome:empty { display:none }.ula-maker-panel:not([data-library-open="true"]) .ula-maker-head,.ula-maker-panel:not([data-library-open="true"]) .ula-maker-compose{animation:ula-maker-content-in .28s .08s var(--motion-ease) both}.ula-maker-panel[data-library-open="true"] .ula-maker-compose{display:none}.ula-maker-panel[data-library-open="true"] .ula-maker-body{height:auto;padding:0;overflow:hidden}
.ula-maker-connect-state[hidden]{display:none}.ula-maker-connect-state{display:grid;gap:var(--space-4);padding:var(--space-5) var(--space-6) var(--space-6);background:var(--color-surface);animation:ula-maker-content-in .24s var(--motion-ease) both}.ula-maker-connect-heading{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-heading-sm)}.ula-maker-connect-heading .ula-icon{width:1.8rem;height:1.8rem;fill:none;stroke:var(--color-text-muted);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.ula-maker-connect-status{display:flex;align-items:center;gap:var(--space-3);color:var(--color-warning);font-size:var(--text-body-md)}.ula-maker-connect-status .ula-status-dot{width:.75rem;height:.75rem;border-radius:50%;background:var(--color-warning)}.ula-maker-connect-primary{width:100%;min-height:3.25rem;border-color:#171717;background:#171717;color:#fff;box-shadow:0 4px 0 #444;font-size:var(--text-body-md)}.ula-maker-connect-primary:hover:not(:disabled){background:#2a2a2a;box-shadow:0 6px 0 #444}.ula-maker-connect-divider{height:1px;background:var(--color-border);margin-block:var(--space-1)}.ula-maker-connect-settings{display:flex;align-items:center;gap:var(--space-4);padding:0;border:0;background:transparent;color:var(--color-text);font:inherit;font-size:var(--text-body-md);cursor:pointer;text-align:left}.ula-maker-connect-settings .ula-icon{width:1.8rem;height:1.8rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.ula-maker-connect-settings:hover{color:var(--color-primary)}
.ula-maker-suggestions { display:flex;flex-wrap:wrap;gap:var(--space-2) }.ula-maker-suggestions button,.ula-maker-choice { border:1px solid var(--color-border);border-radius:999px;padding:.55rem .8rem;background:var(--color-surface);color:var(--color-text);font:inherit;font-size:var(--text-body-sm);cursor:pointer }.ula-maker-suggestions button:hover,.ula-maker-choice:hover { border-color:var(--color-primary);background:var(--color-primary-subtle) }
.ula-maker-compose { position:relative;display:block;padding:6px 0 3px }.ula-maker-compose[hidden]{display:none}.ula-maker-compose .ula-textarea { min-width:0;width:100%;min-height:4.75rem;height:4.75rem;border-radius:2.5rem;padding:1.55rem 5.25rem 1rem 1.5rem;resize:none;font-size:var(--text-body-sm);overflow:hidden }
.ula-maker-compose .ula-textarea:hover:not(:focus):not(:active){border-color:var(--color-border-strong);box-shadow:0 6px 0 var(--input-depth-color);transform:translateY(-4px)}
.ula-maker-compose-actions { position:absolute;right:.7rem;top:calc(50% + 1px);transform:translateY(-50%);display:flex }.ula-maker-compose:has(.ula-maker-submit:active) .ula-textarea,.ula-maker-compose[data-submit-pressed="true"] .ula-textarea,.ula-maker-compose[data-generating="true"] .ula-textarea{border-color:var(--color-focus);box-shadow:var(--shadow-focus);transform:translateY(2px)}.ula-maker-submit{--button-depth-color:var(--ula-blue-700);width:3rem;min-height:3rem;padding:.5rem;border-color:var(--ula-blue-700);background:linear-gradient(135deg,var(--ula-blue-100),var(--ula-purple-100),var(--ula-red-100),var(--ula-yellow-100));color:var(--ula-blue-700)}.ula-maker-submit:hover:not(:disabled){background:linear-gradient(135deg,var(--ula-blue-200),var(--ula-purple-200),var(--ula-red-200),var(--ula-yellow-200))}.ula-maker-submit:active:not(:disabled),.ula-maker-compose[data-submit-pressed="true"] .ula-maker-submit,.ula-maker-compose[data-generating="true"] .ula-maker-submit,.ula-maker-compose[data-generating="true"] .ula-maker-submit:hover{box-shadow:none;transform:translateY(2px)}.ula-maker-compose[data-generating="true"] .ula-maker-submit{cursor:progress}.ula-maker-compose[data-generating="true"] .ula-maker-submit .ula-icon{animation:ula-submit-thinking .6s ease-in-out infinite alternate}.ula-maker-submit .ula-icon { width:1.15rem;height:1.15rem }
.ula-maker-note { padding:0 var(--space-4) var(--space-3);font-size:.68rem;color:var(--color-text-muted) }
.ula-maker-question { display:grid;gap:var(--space-3) }.ula-maker-question-options { display:grid;gap:var(--space-2) }.ula-maker-choice { text-align:left;border-radius:var(--radius-md) }.ula-maker-choice small { display:block;color:var(--color-text-muted);margin-top:.15rem }
.ula-maker-stop{min-height:2.5rem;padding:.4rem .75rem;gap:.35rem;font-size:var(--text-caption)}.ula-maker-stop[hidden]{display:none}.ula-maker-stop .ula-icon{width:.8rem;height:.8rem;fill:currentColor;stroke:none}
.ula-maker[data-generating="true"] .ula-maker-panel{border-color:transparent;background:linear-gradient(var(--color-surface),var(--color-surface)) padding-box,conic-gradient(from var(--ula-spectrum-angle),var(--ula-blue-300),var(--ula-purple-400),var(--ula-red-400),var(--ula-yellow-200),var(--ula-green-200),var(--ula-blue-300)) border-box;animation:ula-spectrum-turn 2.8s linear infinite}
.ula-maker[data-generating="true"] .ula-maker-panel :is(.ula-maker-body>*,.ula-maker-head){pointer-events:none;user-select:none}.ula-maker[data-generating="true"] .ula-maker-stop{pointer-events:auto;user-select:none}.ula-maker[data-generating="true"] .ula-maker-submit{display:none}.ula-maker[data-generating="true"] .ula-maker-compose-actions{right:.55rem}.ula-maker[data-generating="true"] .ula-textarea{opacity:.62;box-shadow:none;transform:none}
.ula-maker[data-generating="true"] .ula-maker-launcher{pointer-events:none}.ula-maker[data-generating="true"] .ula-maker-launcher .ula-mark{animation:ula-maker-u-spin 1.8s linear infinite}.ula-maker[data-generating="true"] .ula-maker-launcher .ula-mark-final .ula-mark-stroke{stroke-dasharray:.28 .12;animation:ula-maker-u-chase 1.15s linear infinite}.ula-maker[data-generating="true"] .ula-maker-launcher .ula-mark-assembly{display:none}
@keyframes ula-maker-u-spin{to{transform:rotate(360deg)}}@keyframes ula-maker-u-chase{to{stroke-dashoffset:-.8}}
.ula-maker-library-view { height:100%;overflow:auto;scrollbar-width:thin;background:var(--color-surface);animation:ula-maker-content-in .3s .14s var(--motion-ease) both }.ula-library-shell{padding:clamp(var(--space-5),4vw,var(--space-8))}.ula-library-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5)}.ula-library-head h2{margin-right:auto}.ula-library-count{display:grid;place-items:center;min-width:2rem;height:2rem;border-radius:50%;background:var(--ula-blue-600);color:var(--color-on-primary);font-weight:var(--font-weight-bold)}.ula-library-close{width:2.75rem;height:2.75rem;min-height:2.75rem;padding:0;font-size:1.25rem}.ula-library-toolbar{display:grid;grid-template-columns:auto auto minmax(12rem,1fr);gap:var(--space-3);margin-bottom:var(--space-5)}.ula-library-toolbar .ula-select{width:auto;min-width:11rem}.ula-library-search{position:relative;justify-self:end;width:min(100%,18rem)}.ula-library-search .ula-input{padding-left:2.6rem}.ula-library-search .ula-icon{position:absolute;left:.9rem;top:50%;width:1rem;height:1rem;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}.ula-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}.ula-saved-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}.ula-saved-card-icon{display:grid;place-items:center;width:3rem;height:3rem;border-radius:var(--radius-md);background:var(--ula-blue-50);font-size:1.4rem}.ula-saved-card:nth-child(3n+2) .ula-saved-card-icon{background:var(--ula-green-50)}.ula-saved-card:nth-child(3n) .ula-saved-card-icon{background:var(--ula-purple-50)}.ula-saved-card-main{display:grid;align-content:start;gap:var(--space-1);min-width:0}.ula-saved-card-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ula-saved-status{justify-self:start;padding:.15rem .55rem;border-radius:var(--radius-pill);background:var(--ula-blue-50);color:var(--ula-blue-700);font-size:var(--text-caption)}.ula-saved-status[data-pinned="true"]{background:var(--ula-green-50);color:var(--ula-green-700)}.ula-saved-card-meta{grid-column:1/-1;color:var(--color-text-muted);font-size:var(--text-caption)}.ula-saved-card-actions{grid-column:1/-1;display:flex;align-items:center;gap:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--color-border)}.ula-saved-card-actions [data-restore]{min-width:6rem}.ula-saved-delete{margin-left:auto;color:var(--color-error)}.ula-library-empty{grid-column:1/-1;padding:var(--space-10);border:1px dashed var(--color-border);border-radius:var(--radius-lg);text-align:center;color:var(--color-text-muted)}.ula-library-tip{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:var(--text-body-sm)}

.ula-platform-layer { position:absolute;inset:0;z-index:calc(var(--z-overlay) + 1);pointer-events:none }.ula-platform { position:absolute;width:min(24rem,calc(100vw - 2rem));padding:2px;pointer-events:auto;border:0;border-radius:var(--radius-xl);background:conic-gradient(from var(--ula-spectrum-angle),var(--ula-blue-300),var(--ula-purple-400),var(--ula-red-400),var(--ula-yellow-200),var(--ula-green-200),var(--ula-blue-300));box-shadow:var(--shadow-lg);overflow:hidden;touch-action:none;animation:ula-spectrum-turn 14s linear infinite }.ula-platform[data-pinned="true"] { position:fixed;z-index:calc(var(--z-overlay) + 2) }
.ula-platform-head { display:flex;align-items:center;gap:var(--space-2);padding:.65rem .7rem .65rem 1rem;border-radius:calc(var(--radius-xl) - 2px) calc(var(--radius-xl) - 2px) 0 0;border-bottom:1px solid var(--color-border);background:var(--ula-neutral-50);cursor:grab;user-select:none }.ula-platform-head:active { cursor:grabbing }.ula-platform-head strong { margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }.ula-platform-action { --button-depth-color:var(--color-border-strong);width:2rem;height:2rem;min-height:2rem;padding:.35rem;flex:none }.ula-platform-action .ula-icon { width:1rem;height:1rem }.ula-platform-action .ula-u-mark { width:1.2rem;height:1.2rem }.ula-platform-body { padding:var(--space-5);background:var(--color-surface) }.ula-platform-foot { display:flex;justify-content:space-between;align-items:center;padding:.55rem 1rem;border-radius:0 0 calc(var(--radius-xl) - 2px) calc(var(--radius-xl) - 2px);border-top:1px solid var(--color-border);background:var(--color-surface);font-size:.68rem;color:var(--color-text-muted) }
.ula-platform-refine { display:grid;gap:var(--space-3);padding:var(--space-4);border-bottom:1px solid var(--color-border);background:var(--ula-blue-50) }.ula-platform-refine[hidden]{display:none}.ula-platform-refine p{font-size:var(--text-body-sm);color:var(--color-text-muted)}.ula-platform-refine form{display:flex;gap:var(--space-2)}.ula-platform-refine .ula-input{min-width:0}.ula-refine-status{font-size:var(--text-caption);color:var(--color-success)}
.ula-timer { display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--space-5) }.ula-timer-actions { display:grid;gap:var(--space-2) }.ula-timer-time { font-size:clamp(3rem,10vw,4.5rem);font-variant-numeric:tabular-nums;text-align:center }.ula-timer .ula-button { min-width:6rem }
.ula-checklist { display:grid;gap:var(--space-3) }.ula-checklist label { display:flex;align-items:center;gap:var(--space-2) }.ula-platform.is-dragging { opacity:.94;box-shadow:0 24px 60px rgb(31 29 28 / .24) }
@media (max-width:48rem){.ula-demo-intro{grid-template-columns:1fr}.ula-maker{right:1rem;bottom:1rem}.ula-platform{width:calc(100vw - 2rem)}.ula-maker-panel{width:calc(100vw - 2rem);border-radius:var(--radius-xl)}.ula-maker-panel[data-library-open="true"]{width:calc(100vw - 2rem);height:min(36rem,calc(100dvh - 7rem));max-height:calc(100dvh - 7rem)}.ula-maker-head{align-items:center;gap:var(--space-2);padding:var(--space-4)}.ula-maker-brand{gap:var(--space-2)}.ula-maker-brand p{display:none}.ula-maker-wordmark{width:4.5rem}.ula-maker-library{margin-left:auto;padding-inline:var(--space-3)}.ula-maker-body{padding:0 var(--space-4) var(--space-4)}.ula-maker-compose .ula-textarea{height:4rem;min-height:4rem;padding:1.25rem 4.75rem 1rem 1.25rem}.ula-maker-submit{width:2.75rem;min-height:2.75rem;padding:.4rem}.ula-library-toolbar{grid-template-columns:1fr 1fr}.ula-library-search{grid-column:1/-1;justify-self:stretch;width:100%}.ula-library-grid{grid-template-columns:1fr}}
@media (min-width:48.01rem) and (max-width:68rem){.ula-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@keyframes ula-maker-enter{0%{opacity:0;transform:translateY(1.5rem) scale(.94);filter:blur(5px)}65%{opacity:1;transform:translateY(-.25rem) scale(1.008);filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes ula-maker-content-in{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}
@keyframes ula-submit-thinking{to{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.ula-maker-launcher{transition:none}.ula-maker-panel:not([hidden]):not([data-library-open="true"]),.ula-maker[data-generating="true"] .ula-maker-panel,.ula-maker[data-generating="true"] .ula-maker-launcher .ula-mark,.ula-maker[data-generating="true"] .ula-maker-launcher .ula-mark-final .ula-mark-stroke{animation:none}}

/* ── Ula maker: connection state, settings and generated bodies ────────── */
.ula-maker-settings-open{width:2.25rem;height:2.25rem;min-height:2.25rem;padding:.45rem;flex:none}.ula-settings-greeting{margin-top:.2rem;color:var(--color-text-muted);font-size:var(--text-caption)}
.ula-maker-mode{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-caption);color:var(--color-text-muted)}
.ula-maker-mode .ula-status-dot{background:var(--color-warning)}
.ula-maker-mode[data-mode="demo"]{color:var(--color-warning)}
.ula-maker-mode[data-mode="live"] .ula-status-dot{background:var(--color-success)}
.ula-maker-mode .ula-button{margin-left:var(--space-1)}
.ula-maker-error{margin-bottom:var(--space-3);animation:ula-maker-content-in .24s var(--motion-ease) both}
.ula-maker-error[hidden]{display:none}
.ula-maker-error .ula-alert{align-items:flex-start}
.ula-maker-error .ula-alert-body{display:grid;justify-items:start;gap:var(--space-2)}
.ula-maker-panel[data-settings-open="true"]{width:min(38rem,calc(100vw - 2rem));height:auto;min-height:0;max-height:calc(100dvh - 9rem);border-radius:var(--radius-xl)}
.ula-maker-panel[data-settings-open="true"] .ula-maker-compose,.ula-maker-panel[data-settings-open="true"] .ula-maker-error{display:none}
.ula-maker-panel[data-settings-open="true"] .ula-maker-body{height:auto;padding:0;overflow:hidden}
.ula-maker-settings-view{height:auto;min-height:0;max-height:calc(100dvh - 11rem);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;animation:ula-maker-content-in .28s .08s var(--motion-ease) both}
.ula-maker-settings-view[hidden]{display:none}
.ula-settings-shell{padding:0 var(--space-6) var(--space-6)}
.ula-settings-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0 var(--space-3);margin-bottom:var(--space-2);background:var(--color-surface)}
.ula-settings-head h2{margin-right:auto}
.ula-settings-head button{width:2.25rem;height:2.25rem;min-height:2.25rem;padding:0;font-size:1rem}
.ula-settings-shell form{display:grid;gap:var(--space-4)}
.ula-settings-advanced summary{cursor:pointer;font-size:var(--text-body-sm);color:var(--color-text-muted)}
.ula-settings-advanced .ula-field{margin-top:var(--space-3)}
.ula-settings-actions{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.ula-settings-hint{margin-top:var(--space-2);color:var(--color-text-muted);font-size:var(--text-body-sm)}
.ula-settings-status{font-size:var(--text-caption);color:var(--color-success)}
.ula-settings-status[data-tone="error"]{color:var(--color-error)}
/* ── Generated themes ─────────────────────────────────────────────────────
   The Ula supplies four validated colours and three enums. Every declaration
   below is authored here; none of it comes from the model. */
.ula-platform[data-themed="true"]{--color-primary:var(--ula-theme-accent);--color-primary-subtle:color-mix(in srgb,var(--ula-theme-accent) 12%,var(--ula-theme-surface));--color-on-primary:var(--ula-theme-on-accent);--color-surface:var(--ula-theme-surface);--color-text:var(--ula-theme-text);--color-text-muted:color-mix(in srgb,var(--ula-theme-text) 64%,var(--ula-theme-surface));--color-border:color-mix(in srgb,var(--ula-theme-text) 18%,var(--ula-theme-surface));--color-border-strong:color-mix(in srgb,var(--ula-theme-text) 34%,var(--ula-theme-surface));--ula-neutral-50:color-mix(in srgb,var(--ula-theme-text) 4%,var(--ula-theme-surface));background:var(--ula-theme-accent)}
.ula-platform[data-themed="true"] .ula-platform-head,.ula-platform[data-themed="true"] .ula-platform-body,.ula-platform[data-themed="true"] .ula-platform-foot{background:var(--color-surface);color:var(--color-text)}
.ula-platform[data-themed="true"] .ula-stat-value,.ula-platform[data-themed="true"] .ula-stat-label{color:var(--color-text)}
.ula-platform[data-theme-radius="sharp"]{--radius-sm:0;--radius-md:0;--radius-lg:0;--radius-xl:0;--radius-pill:0}
.ula-platform[data-theme-radius="round"]{--radius-sm:.6rem;--radius-md:1rem;--radius-lg:1.4rem;--radius-xl:1.8rem}
.ula-platform[data-theme-font="sans"]{font-family:ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
.ula-platform[data-theme-font="serif"]{font-family:ui-serif,Georgia,"Times New Roman",serif}
.ula-platform[data-theme-font="mono"]{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.ula-platform[data-theme-font="rounded"]{font-family:ui-rounded,"SF Pro Rounded",system-ui,sans-serif}
.ula-platform[data-theme-density="compact"] .ula-platform-body{padding:var(--space-3)}
.ula-platform[data-theme-density="compact"] .ula-ula-body{gap:var(--space-2)}
.ula-platform[data-theme-density="roomy"] .ula-platform-body{padding:var(--space-7)}
.ula-platform[data-theme-density="roomy"] .ula-ula-body{gap:var(--space-6)}
.ula-theme-source{display:block;padding-top:var(--space-2);color:var(--color-text-muted);font-size:var(--text-caption)}

/* ── Placing a Ula inside the page ───────────────────────────────────────── */
.ula-platform[data-placement="embedded"]{position:relative!important;left:auto!important;top:auto!important;width:min(24rem,100%);margin:var(--space-5) 0}
:root[data-ula-embedding="true"]{cursor:copy}
:root[data-ula-embedding="true"] [data-ula-embed-target]{outline:3px solid var(--ula-blue-400);outline-offset:3px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--ula-blue-100) 40%,transparent)}
.ula-embed-hint{position:fixed;z-index:calc(var(--z-toast) + 2);left:50%;top:1.25rem;padding:.6rem 1rem;border-radius:var(--radius-pill);background:var(--ula-neutral-900,#1f1d1c);color:#fff;font-size:var(--text-body-sm);box-shadow:var(--shadow-lg);transform:translateX(-50%);pointer-events:none}

/* ── Page effects, and the control that always undoes them ────────────── */
:root[data-ula-cursor="crosshair"],:root[data-ula-cursor="crosshair"] *{cursor:crosshair!important}
:root[data-ula-cursor="grab"],:root[data-ula-cursor="grab"] *{cursor:grab!important}
:root[data-ula-cursor="help"],:root[data-ula-cursor="help"] *{cursor:help!important}
:root[data-ula-cursor="pointer"],:root[data-ula-cursor="pointer"] *{cursor:pointer!important}
:root[data-ula-cursor="progress"],:root[data-ula-cursor="progress"] *{cursor:progress!important}
:root[data-ula-cursor="text"],:root[data-ula-cursor="text"] *{cursor:text!important}
:root[data-ula-cursor="wait"],:root[data-ula-cursor="wait"] *{cursor:wait!important}
:root[data-ula-cursor="zoom-in"],:root[data-ula-cursor="zoom-in"] *{cursor:zoom-in!important}
/* The undo control keeps a real cursor: an effect you cannot see to cancel is
   not reversible, whatever the code says. */
:root[data-ula-cursor="none"] *:not(.ula-effects-bar):not(.ula-effects-bar *){cursor:none!important}
:root[data-ula-cursor] .ula-effects-bar,:root[data-ula-cursor] .ula-effects-bar *{cursor:auto!important}
:root[data-ula-cursor] .ula-effects-bar button{cursor:pointer!important}
:root[data-ula-text-size="large"]{font-size:112.5%}
:root[data-ula-text-size="larger"]{font-size:125%}
:root[data-ula-motion="reduced"] *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
.ula-cursor-reset:not([hidden]) ~ .ula-effects-bar{bottom:4.75rem}
.ula-effects-bar{position:fixed;z-index:calc(var(--z-toast) + 1);left:50%;bottom:1.25rem;display:flex;align-items:center;gap:var(--space-3);max-width:min(32rem,calc(100vw - 2rem));padding:.55rem .65rem .55rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);box-shadow:var(--shadow-lg);font-size:var(--text-body-sm);transform:translateX(-50%)}
.ula-effects-mark{display:grid;place-items:center;width:1.5rem;height:1.5rem;flex:none;border-radius:50%;background:var(--color-primary-subtle);color:var(--ula-blue-700)}
.ula-effects-copy{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:48rem){.ula-effects-bar{left:1rem;right:1rem;max-width:none;transform:none}}

.ula-connect{margin-bottom:var(--space-5)}
.ula-connect-button{width:100%;justify-content:center;gap:var(--space-3);min-height:3.25rem;font-size:var(--text-body-md)}
.ula-connect-button .ula-icon{width:1.25rem;height:1.25rem}
.ula-connect-note{margin-top:var(--space-3);font-size:var(--text-body-sm);color:var(--color-text-muted);line-height:var(--leading-body)}
.ula-connect-live{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--ula-green-50)}
.ula-connect-live>div{display:grid;margin-right:auto;min-width:0}
.ula-connect-live small{color:var(--color-text-muted);font-size:var(--text-caption)}
.ula-connect-live .ula-status-dot{background:var(--color-success);flex:none}
.ula-refine-status[data-state="busy"]{color:var(--color-text-muted)}
.ula-refine-status[data-state="error"]{color:var(--color-error)}
.ula-platform-refine form[data-busy="true"]{opacity:.6;pointer-events:none}

/* Generated Ula bodies. The `ula-ula-` prefix marks layout that exists only
   to arrange approved components — never a new component of its own. */
.ula-ula-body{display:grid;gap:var(--space-4)}
.ula-ula-fields{display:grid;gap:var(--space-3)}
.ula-ula-range-row{display:flex;align-items:center;gap:var(--space-3)}
.ula-ula-range-row .ula-range{flex:1;min-width:0}
.ula-ula-result .ula-stat-value{font-variant-numeric:tabular-nums}
.ula-ula-counter{display:flex;align-items:center;gap:var(--space-3)}
.ula-ula-counter-copy{display:grid;flex:1;min-width:0;text-align:center}
.ula-ula-counter-copy .ula-stat-value{font-variant-numeric:tabular-nums}
.ula-ula-counter .ula-button{width:2.5rem;height:2.5rem;min-height:2.5rem;padding:0;flex:none;font-size:1.15rem}
.ula-ula-list{display:grid;gap:var(--space-2);margin:0;padding-left:1.2rem;font-size:var(--text-body-sm)}
.ula-ula-progress{display:grid;gap:var(--space-2)}
.ula-ula-progress-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.ula-ula-timer{display:grid;gap:var(--space-3);justify-items:center}
.ula-ula-timer .ula-timer-time{font-size:clamp(2.25rem,8vw,3rem)}
.ula-ula-timer-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}
.ula-ula-add{display:flex;gap:var(--space-2);margin-top:var(--space-2)}
.ula-ula-add .ula-input{min-width:0}
/* ── Compose mode ─────────────────────────────────────────────────────────
   Only visible while composing. Nothing here loads for an ordinary visitor
   beyond the rules themselves. */
:root[data-ula-composing="true"] [data-ula-region]{position:relative;outline:1px dashed var(--ula-blue-300);outline-offset:4px;border-radius:var(--radius-sm);cursor:grab}
:root[data-ula-composing="true"] [data-ula-region]:hover{outline-color:var(--ula-blue-600);outline-style:solid}
:root[data-ula-composing="true"] [data-ula-region][data-ula-dragging="true"]{opacity:.5;cursor:grabbing}
:root[data-ula-composing="true"] [data-ula-region][data-ula-hidden="true"]{opacity:.38;outline-style:dotted}
/* Outside compose mode a removed block is simply gone. */
[data-ula-region][data-ula-hidden="true"]{display:none}
:root[data-ula-composing="true"] [data-ula-region][data-ula-hidden="true"]{display:revert}
.ula-region-bar{position:absolute;z-index:5;left:0;top:-1.6rem;display:flex;align-items:center;gap:.25rem;padding:.15rem .35rem;border-radius:var(--radius-pill);background:var(--ula-neutral-900,#1f1d1c);color:#fff;font-family:var(--font-family-ui);font-size:.68rem;line-height:1;white-space:nowrap;box-shadow:var(--shadow-md)}
.ula-region-grip{opacity:.6;cursor:grab}
.ula-region-name{max-width:14rem;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.ula-region-action{display:grid;place-items:center;width:1.35rem;height:1.35rem;padding:0;border:0;border-radius:50%;background:rgb(255 255 255/.16);color:#fff;font:inherit;font-size:.72rem;cursor:pointer}
.ula-region-action:hover,.ula-region-action:focus-visible{background:rgb(255 255 255/.34)}
.ula-compose-bar{position:fixed;z-index:calc(var(--z-toast) + 2);left:50%;bottom:1.25rem;display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);max-width:min(46rem,calc(100vw - 2rem));padding:.6rem .7rem .6rem 1.1rem;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);box-shadow:var(--shadow-lg);transform:translateX(-50%)}
.ula-compose-copy{font-size:var(--text-body-sm);color:var(--color-text-muted)}
@media (max-width:48rem){.ula-compose-bar{left:1rem;right:1rem;max-width:none;transform:none;justify-content:center}.ula-region-name{max-width:7rem}}
@media (prefers-reduced-motion:reduce){:root[data-ula-composing="true"] [data-ula-region]{transition:none}}

/* ── Pictures ─────────────────────────────────────────────────────────── */
.ula-ula-drawing{display:grid;gap:var(--space-2);justify-items:center}
.ula-ula-drawing svg{display:block;width:100%;max-width:100%;height:auto;border-radius:var(--radius-md)}
/* Motion in a drawing. Every one turns about the shape's own centre, so a
   spinning wheel spins where it sits rather than orbiting the canvas. */
.ula-ula-drawing [data-animate]{transform-box:fill-box;transform-origin:center;animation-iteration-count:infinite;animation-timing-function:linear}
.ula-ula-drawing svg[data-animate]{transform-box:view-box}
.ula-ula-drawing [data-animate="spin"]{animation-name:ula-draw-spin}
.ula-ula-drawing [data-animate="spin-back"]{animation-name:ula-draw-spin;animation-direction:reverse}
.ula-ula-drawing [data-animate="pulse"]{animation-name:ula-draw-pulse;animation-timing-function:ease-in-out}
.ula-ula-drawing [data-animate="float"]{animation-name:ula-draw-float;animation-timing-function:ease-in-out}
.ula-ula-drawing [data-animate="wobble"]{animation-name:ula-draw-wobble;animation-timing-function:ease-in-out}
.ula-ula-drawing [data-speed="slow"]{animation-duration:9s}
.ula-ula-drawing [data-speed="normal"]{animation-duration:4.5s}
.ula-ula-drawing [data-speed="fast"]{animation-duration:1.6s}
@keyframes ula-draw-spin{to{transform:rotate(360deg)}}
@keyframes ula-draw-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes ula-draw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6%)}}
@keyframes ula-draw-wobble{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
/* A drawing that moves is decoration; a person who has asked for less of it
   gets the picture and none of the motion. */
@media (prefers-reduced-motion:reduce){.ula-ula-drawing [data-animate]{animation:none}}

.ula-ula-image{display:grid;gap:var(--space-3);justify-items:start}
.ula-ula-image-frame{position:relative;width:100%;overflow:hidden;border-radius:var(--radius-md);background:var(--ula-neutral-100,#eceae8)}
.ula-ula-image-picture{display:block;width:100%;height:auto}
.ula-ula-image-picture[hidden]{display:none}
.ula-ula-image-drop{display:grid;place-items:center;min-height:9rem;padding:var(--space-5);cursor:pointer}
.ula-ula-image-drop[hidden]{display:none}
.ula-ula-image-drop[data-over="true"]{border-color:var(--color-primary);background:var(--color-primary-subtle)}
.ula-ula-image-swap{display:none}
.ula-ula-image-frame[data-filled="true"] ~ .ula-ula-image-swap{display:inline-flex}
/* Captions sit over the picture and are edited in place, so what you type is
   what the picture says. Empty ones keep a prompt until they are filled. */
.ula-ula-image-caption{position:absolute;left:0;right:0;padding:var(--space-2) var(--space-3);text-align:center;font-weight:var(--font-weight-bold);line-height:1.15;outline:none}
.ula-ula-image-caption[data-place="top"]{top:0}
.ula-ula-image-caption[data-place="bottom"]{bottom:0}
.ula-ula-image-caption:focus-visible{box-shadow:var(--shadow-focus)}
.ula-ula-image-caption[data-empty="true"]::before{content:attr(aria-label);opacity:.55}
.ula-ula-image-frame[data-style="meme"] .ula-ula-image-caption{color:#fff;font-size:clamp(1rem,5cqw,1.7rem);text-transform:uppercase;letter-spacing:.01em;-webkit-text-stroke:2px #000;paint-order:stroke fill}
.ula-ula-image-frame[data-style="plain"] .ula-ula-image-caption{color:#fff;font-size:var(--text-body-sm);background:rgb(0 0 0/.55)}
.ula-ula-image-frame{container-type:inline-size}

/* ── The frame, hidden ─────────────────────────────────────────────────────
   Everything that says "this is a Ula" comes off, so the content can sit on
   the page as though it had always been there. The reveal button is the one
   thing that stays, because an effect you cannot undo is not a toggle. */
.ula-platform[data-bare="true"]{padding:0;background:none;box-shadow:none;animation:none;overflow:visible}
.ula-platform[data-bare="true"] .ula-platform-head,.ula-platform[data-bare="true"] .ula-platform-foot,.ula-platform[data-bare="true"] .ula-platform-refine{display:none}
.ula-platform[data-bare="true"] .ula-platform-body{border-radius:var(--radius-lg);background:transparent;max-height:none;overflow:visible}
/* Corner grips. Invisible until the pointer is near, so a Ula at rest still
   looks like a finished thing rather than a window. */
.ula-platform-grip{position:absolute;z-index:9;bottom:0;width:1.1rem;height:1.1rem;opacity:0;transition:opacity var(--motion-fast) var(--motion-ease);touch-action:none}
.ula-platform-grip[data-resize="se"]{right:0;cursor:nwse-resize}
.ula-platform-grip[data-resize="sw"]{left:0;cursor:nesw-resize}
.ula-platform-grip::after{content:"";position:absolute;inset:.28rem;border:2px solid var(--color-text-muted);border-top:0}
.ula-platform-grip[data-resize="se"]::after{border-left:0;border-radius:0 0 4px 0}
.ula-platform-grip[data-resize="sw"]::after{border-right:0;border-radius:0 0 0 4px}
.ula-platform:hover .ula-platform-grip,.ula-platform:focus-within .ula-platform-grip{opacity:.5}
.ula-platform-grip:hover,.ula-platform[data-resizing="true"] .ula-platform-grip{opacity:1}
.ula-platform[data-resizing="true"]{user-select:none}
.ula-platform[data-resizing="true"] .ula-platform-body{overflow:auto}
.ula-platform-foot{position:relative;z-index:4}
/* A resized card owns its height, so the body fills what is left of it. */
.ula-platform[style*="height"] .ula-platform-body{max-height:none;height:auto}

.ula-platform-reveal{position:absolute;z-index:2;right:.25rem;top:.25rem;display:grid;place-items:center;width:1.75rem;height:1.75rem;padding:0;border:1px solid var(--color-border);border-radius:50%;background:var(--color-surface);color:var(--color-text-muted);cursor:pointer;opacity:.45;transition:opacity var(--motion-fast) var(--motion-ease)}
.ula-platform-reveal[hidden]{display:none}
.ula-platform-reveal:hover,.ula-platform-reveal:focus-visible{opacity:1}
.ula-platform-reveal .ula-icon{width:.95rem;height:.95rem}

.ula-ula-warning{border-top:1px dashed var(--color-border);padding-top:var(--space-3);color:var(--color-warning)}
.ula-platform[data-generated="true"] .ula-platform-body{max-height:min(28rem,60dvh);overflow:auto;scrollbar-width:thin}
/* Embedded, it is part of the layout: it may be as tall as it needs to be, and
   scrolling it inside a page that already scrolls helps nobody. */
.ula-platform[data-placement="embedded"] .ula-platform-body{max-height:none;overflow:visible}
@media (max-width:48rem){.ula-maker-panel[data-settings-open="true"]{width:calc(100vw - 2rem);height:auto;max-height:calc(100dvh - 7rem)}.ula-maker-settings-view{max-height:calc(100dvh - 9rem)}.ula-settings-shell{padding:0 var(--space-4) var(--space-4)}}
@media (prefers-reduced-motion:reduce){.ula-maker-settings-view,.ula-maker-error{animation:none}}

.ula-maker-compose-actions{transition:transform var(--motion-fast) var(--motion-ease)}
.ula-maker-compose:has(.ula-textarea:hover:not(:focus)) .ula-maker-compose-actions{transform:translateY(calc(-50% - 4px))}
.ula-maker-connect-copy{color:var(--color-text-muted);font-size:var(--text-body-sm);line-height:var(--leading-body)}
.ula-maker-connect-heading,.ula-maker-connect-divider,.ula-maker-connect-settings{display:none}
.ula-maker[data-generating="true"] .ula-maker-panel{animation:ula-spectrum-turn 14s linear infinite;background:linear-gradient(var(--color-surface),var(--color-surface)) padding-box,conic-gradient(from var(--ula-spectrum-angle),var(--ula-blue-300),var(--ula-purple-400),var(--ula-red-400),var(--ula-yellow-200),var(--ula-green-200),var(--ula-blue-300)) border-box}
.ula-maker-loader{position:absolute;inset:0;display:none;place-items:center}.ula-maker-loader-spinner,.ula-maker-loader-triangle,.ula-maker-loader>.ula-dots{position:absolute;opacity:0;transition:opacity .2s ease}.ula-maker-loader-spinner{width:70%;height:70%;fill:none;stroke:currentColor;stroke-width:80;stroke-dasharray:90 70;animation:ula-maker-spinner 1.6s linear infinite}.ula-maker-loader-triangle{width:70%;height:70%;transform:rotate(0deg);animation:ula-maker-triangle 2.2s ease-in-out infinite}.ula-maker-loader-triangle i{position:absolute;left:44%;top:10%;width:12%;height:80%;border-radius:99px;background:var(--ula-blue-300);transform-origin:50% 50%}.ula-maker-loader-triangle i:nth-child(2){background:var(--ula-red-400);transform:rotate(120deg)}.ula-maker-loader-triangle i:nth-child(3){background:var(--ula-yellow-300);transform:rotate(240deg)}.ula-maker-loader>.ula-dots{font-size:.9rem;color:currentColor}.ula-maker-loader>.ula-dots span{width:.45rem;height:.45rem}.ula-maker-loader[data-ula-loader-step="0"] .ula-maker-loader-spinner,.ula-maker-loader[data-ula-loader-step="1"] .ula-maker-loader-triangle,.ula-maker-loader[data-ula-loader-step="2"]>.ula-dots{opacity:1}.ula-maker[data-generating="true"] .ula-maker-launcher .ula-mark{display:none}.ula-maker[data-generating="true"] .ula-maker-loader{display:grid}.ula-maker-launcher{position:relative}.ula-maker[data-generating="true"] .ula-maker-launcher{animation:none}
@keyframes ula-maker-spinner{to{transform:rotate(360deg)}}@keyframes ula-maker-triangle{50%{transform:rotate(180deg) scale(.88)}100%{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ula-maker[data-generating="true"] .ula-maker-panel{animation:none}.ula-maker-loader-spinner,.ula-maker-loader-triangle{animation:none}}
.ula-maker-loader{color:var(--color-primary)}.ula-maker-loader .ula-loader-step{position:absolute;opacity:0;transition:opacity .28s ease}.ula-maker-loader .ula-loader-step[data-loader-step="0"]{--spinner-size:2.4rem}.ula-maker-loader .ula-loader-step[data-loader-step="1"]{--loader-size:2.5rem}.ula-maker-loader .ula-loader-step[data-loader-step="2"]{font-size:.7rem}.ula-maker-loader[data-ula-loader-step="0"] .ula-loader-step[data-loader-step="0"],.ula-maker-loader[data-ula-loader-step="1"] .ula-loader-step[data-loader-step="1"],.ula-maker-loader[data-ula-loader-step="2"] .ula-loader-step[data-loader-step="2"]{opacity:1}.ula-platform-loader{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.ula-platform-loader .ula-loader-step{position:absolute;opacity:0}.ula-platform-loader[data-ula-loader-step="0"] .ula-loader-step[data-loader-step="0"],.ula-platform-loader[data-ula-loader-step="1"] .ula-loader-step[data-loader-step="1"],.ula-platform-loader[data-ula-loader-step="2"] .ula-loader-step[data-loader-step="2"]{opacity:1}.ula-platform[data-refining="true"] [data-refine] .ula-u-mark{visibility:hidden}.ula-platform[data-refining="true"] [data-refine]{position:relative}.ula-platform[data-refining="true"] :is([data-pin],[data-remove]){pointer-events:none;opacity:.45}
.ula-platform-loader .ula-loader-step[data-loader-step="0"]{--spinner-size:1.35rem}.ula-platform-loader .ula-loader-step[data-loader-step="1"]{--loader-size:1.5rem}.ula-settings-greeting{margin-top:.2rem;color:var(--color-text-muted);font-size:var(--text-caption)}
.ula-settings-head>div{margin-right:auto}
.ula-maker-library[aria-expanded="true"],.ula-maker-library[aria-expanded="true"]:hover:not(:disabled),.ula-maker-settings-open[aria-expanded="true"],.ula-maker-settings-open[aria-expanded="true"]:hover:not(:disabled){box-shadow:inset 0 2px 0 color-mix(in srgb,var(--button-depth-color) 34%,transparent);transform:translateY(2px)}