@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;650;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#0b0c10;--panel:#111217;--line:#25262e;--muted:#868895;--text:#ebeaf0;--accent:#e9b7fa;--pink:#c98ee0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px 'DM Sans',sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{transition:background .18s,border-color .18s,transform .18s}button:hover{filter:brightness(1.15)}header{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4.2%}.brand{color:var(--text);text-decoration:none;font:800 19px 'Manrope',sans-serif;letter-spacing:1px;display:flex;align-items:center;gap:2px}.brand-icon{font-size:39px;color:var(--accent);margin-right:11px;font-weight:400}.brand-light{font-weight:400;color:#a6a6b1}.version{font:10px 'DM Sans',sans-serif;letter-spacing:1.5px;color:var(--muted);margin-left:22px;padding-left:22px;border-left:1px solid var(--line)}.header-right{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px}.header-right button{margin-left:26px}.status-dot,.live-badge i{width:6px;height:6px;border-radius:50%;background:#b4e2bd;box-shadow:0 0 9px #b4e2bd44}.text-button{border:0;background:transparent;color:#b2b3bd;padding:10px 6px;font-size:12px}.text-button span{margin-left:10px}main{max-width:1800px;margin:auto;padding:0 4.2%}.intro{display:flex;justify-content:space-between;align-items:center;padding:18px 0 20px}.eyebrow{font-size:9px;font-weight:600;letter-spacing:1.9px;color:var(--muted)}h1{font:500 43px/1.08 'Manrope',sans-serif;letter-spacing:-1.8px;margin:0}h1 br{display:none}h1 em{font-weight:400;color:var(--accent);font-style:normal}.intro p{font-size:12px;line-height:1.9;color:var(--muted);margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 284px;gap:20px}.stage{position:relative;min-height:660px;overflow:hidden;border:1px solid #2b2836;border-radius:12px;background:#040407}canvas{display:block;width:100%;height:100%;position:absolute;inset:0}.stage-top,.stage-bottom{position:absolute;left:27px;right:27px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.stage-top{top:24px}.stage-top #resolution{font-size:10px;color:#8e889c;letter-spacing:.7px}.live-badge{font-size:9px;letter-spacing:1.3px;display:flex;align-items:center;gap:8px;background:#111016a3;border:1px solid #38313e;padding:8px 10px;border-radius:5px}.stage-bottom{bottom:24px;align-items:flex-end;text-shadow:0 1px 10px #000}.stage-bottom button{pointer-events:auto}h2{font:500 25px 'Manrope',sans-serif;letter-spacing:-.7px;margin:8px 0}#seed-label{font-size:9px;letter-spacing:1.5px;color:#817c8d}.icon-button{width:35px;height:35px;border:1px solid #37313e;background:#111017aa;color:#ccc4d8;border-radius:7px;font-size:22px}#loading{position:absolute;top:48%;text-align:center;width:100%;color:var(--accent)}aside{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:21px 18px}.panel-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.3px;margin-bottom:16px}.tiny{font-size:10px;color:var(--muted);line-height:1.7}.presets{display:grid;grid-template-columns:1fr 1fr;gap:7px}.preset{display:flex;align-items:center;gap:7px;text-align:left;border:1px solid var(--line);background:#16171d;color:#d7d6df;padding:10px 6px;border-radius:7px;font-size:10px;position:relative}.preset small{display:block;color:#767583;font-size:8px;margin-top:3px}.preset.active{border-color:#896197;background:#251c2d}.preset-orb{width:22px;height:22px;flex-shrink:0;border-radius:50%;box-shadow:inset 0 0 5px #0009}.orb-0{background:conic-gradient(#33115f,#eb4b96,#ffbb7d,#511975,#33115f)}.orb-1{background:conic-gradient(#113e54,#64eab1,#164648,#dedc64,#113e54)}.orb-2{background:conic-gradient(#351521,#ee5110,#eec169,#351521)}.orb-3{background:conic-gradient(#26254e,#b69ae7,#daeaff,#564479,#26254e)}.preset-arrow{display:none}.control-section{border-top:1px solid var(--line);margin-top:21px;padding-top:18px}.section-label{font-size:9px;color:#727580;letter-spacing:1.25px;margin-bottom:16px}.range-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#c3c1cd;margin-top:14px}.range-label output,.palette-label span{color:#83808e;font-size:10px;font-variant-numeric:tabular-nums}input[type=range]{appearance:none;width:100%;height:3px;background:#32313b;border-radius:4px;margin:13px 0 3px;cursor:pointer;accent-color:var(--accent)}input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 3px #d5a1eb12}.palettes{display:flex;gap:8px;margin-top:11px}.palette{height:17px;border:2px solid transparent;border-radius:5px;flex:1;opacity:.65}.palette.selected{outline:1px solid var(--accent);outline-offset:3px;opacity:1}.p0{background:linear-gradient(90deg,#302385,#d537a0,#f6b77b)}.p1{background:linear-gradient(90deg,#19485d,#2bc49c,#dfebb1)}.p2{background:linear-gradient(90deg,#711830,#eb6629,#ffe39b)}.p3{background:linear-gradient(90deg,#353581,#b692e8,#d4f3fa)}.switch-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:14px}.switch-row small{display:block;color:#777783;font-size:9px;margin-top:4px}.switch-row input{appearance:none;width:28px;height:16px;border-radius:12px;background:#35333e;cursor:pointer;position:relative;flex-shrink:0}.switch-row input:before{content:'';position:absolute;width:10px;height:10px;border-radius:50%;background:#9d96ab;top:3px;left:3px;transition:transform .2s}.switch-row input:checked{background:#c59ed8}.switch-row input:checked:before{transform:translateX(12px);background:#29202f}.select-row{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#a7a4b2;margin:17px 0 13px}select{font-size:10px;color:#c9c2d4;background:#1a1820;border:1px solid #38313e;border-radius:4px;padding:5px}.secondary{border:1px solid #35313f;border-radius:6px;background:#17151e;color:#c7c1d0;padding:10px 14px;font-size:11px}.wide{width:100%;font-size:10px}.wide span{margin-left:6px}.secondary[aria-pressed=true]{border-color:#c093d4;background:#2c2035;color:var(--accent)}.primary{border:1px solid var(--accent);background:var(--accent);color:#27162e;font-size:12px;font-weight:650;border-radius:6px;padding:11px 19px}.primary span{margin-left:7px}.transport{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:16px;padding:18px 0 23px;border-bottom:1px solid var(--line)}.transport-actions,.save-actions{display:flex;align-items:center;gap:9px}.stats{display:flex;gap:30px;text-align:center}.stats strong{font:500 17px 'Manrope',sans-serif;display:block;font-variant-numeric:tabular-nums}.stats span{font-size:8px;letter-spacing:1px;color:#777382;display:block;margin-top:5px}.collection{padding:27px 0 20px;display:flex;align-items:center;gap:45px;min-height:132px}h3{font:500 18px 'Manrope',sans-serif;margin:9px 0}.collection h3 span{color:#7f718b;font-size:12px;margin-left:9px}.empty{font-size:11px;color:#777581}#saved-list{display:flex;gap:10px;overflow:auto;flex:1;padding:5px}.saved-card{display:flex;gap:10px;align-items:center;min-width:155px;background:#15131c;border:1px solid #302939;border-radius:7px;color:#c7bdce;padding:8px 12px;font-size:11px;text-align:left}.saved-card small{display:block;color:#80758b;font-size:9px;margin-top:5px}.saved-card img{height:40px;width:53px;object-fit:cover;border-radius:4px}footer{border-top:1px solid var(--line);padding:21px 0 28px;display:flex;justify-content:space-between;font-size:10px;color:#696875}footer>span:last-child{font-size:8px;letter-spacing:1.5px}.footer-dot{margin:0 8px}#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,15px);background:#30223c;border:1px solid #684a7a;padding:13px 21px;border-radius:8px;color:#ecd9fa;font-size:12px;opacity:0;transition:.2s;pointer-events:none;z-index:20;max-width:90vw}#toast.visible{opacity:1;transform:translate(-50%,0)}#split-labels{position:absolute;top:65px;left:0;right:0;display:flex;justify-content:space-around;font-size:8px;color:#d6c7df;letter-spacing:1.3px;text-shadow:0 1px 5px #000}#split-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#d7bde244}#split-labels[hidden],#split-line[hidden]{display:none}dialog{max-width:540px;width:90vw;border:1px solid #50405b;border-radius:14px;background:#141019;color:#c5bccc;padding:36px;line-height:1.7}dialog::backdrop{background:#000a;backdrop-filter:blur(8px)}dialog h2{font-size:30px;line-height:1.2;color:#f0dffa}dialog h3{font-size:16px;color:#dbc5e6}dialog p{font-size:12px}.close{position:absolute;right:15px;top:15px}.stage:fullscreen{border-radius:0;height:100vh;width:100vw}.stage:fullscreen canvas{height:100%;width:100%}@media(min-width:1550px){.stage{min-height:740px}}@media(max-width:1100px){header{padding:0 25px}main{padding:0 25px}.version{display:none}.stats{gap:15px}.stats strong{font-size:14px}.transport{flex-wrap:wrap}.save-actions{margin-left:auto}.intro h1{font-size:36px}.intro p{font-size:11px}.workspace{gap:13px;grid-template-columns:minmax(0,1fr) 265px}}@media(max-width:760px){header{height:60px;padding:0 18px}.header-right .text-button{margin-left:4px}.header-right{font-size:9px}.brand{font-size:15px}.brand-icon{font-size:30px}main{padding:0 16px}.intro{padding:16px 0}.intro h1{font-size:31px;letter-spacing:-1px}.intro h1 br{display:block}.intro p{display:none}.workspace{display:flex;flex-direction:column}.stage{min-height:480px}.stage-top,.stage-bottom{left:18px;right:18px}.stage-bottom h2{font-size:23px}aside{padding:18px}.presets{grid-template-columns:repeat(4,1fr)}.preset{padding:10px 5px;display:block}.preset-orb{display:block;margin-bottom:8px}.control-section{margin-top:17px}.stats{order:3;justify-content:space-around;width:100%;padding-top:12px;border-top:1px solid var(--line)}.save-actions{margin-left:0}.transport{gap:16px}.collection{display:block}.collection #saved-list{margin-top:14px;padding-left:0}footer{gap:20px;font-size:9px}footer>span:last-child{font-size:7px}.eyebrow{font-size:8px}}
/* Discovery is an independent scrollable workspace; previews are real WASM renders. */
#discover{padding:0;color:var(--accent);font-size:10px;letter-spacing:0}.recipe-detail{font-size:9px;line-height:1.6;color:#827a90;margin:9px 0 0}.select-row select{max-width:155px}#discovery-panel{max-width:1120px;width:94vw;max-height:92vh;padding:27px;overflow:auto}#discovery-panel .discovery-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}#discovery-panel h2{font-size:28px;margin-top:7px}.discovery-heading .icon-button{flex-shrink:0}#discovery-context{color:#9f91ae;margin:0 0 16px}.discovery-toolbar{display:flex;align-items:end;flex-wrap:wrap;gap:10px}.discovery-toolbar label{display:flex;flex-direction:column;gap:5px;font-size:10px;color:#a79bb2}.discovery-toolbar input{width:135px;background:#201925;border:1px solid #4c3b58;color:#e2d3ed;border-radius:5px;padding:9px;font-size:11px}.discovery-toolbar select{padding:9px;font-size:11px}.discovery-toolbar button{height:35px;padding:7px 12px}.discovery-toolbar .primary{margin-left:auto}#discovery-status{min-height:20px;color:#cda6df;font-size:11px;margin:16px 0 10px}#discovery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-height:120px}.candidate{background:#19131f;border:1px solid #3a2b45;border-radius:9px;overflow:hidden}.candidate canvas{position:static;width:100%;height:auto;aspect-ratio:4/3;background:#040407}.candidate-body{padding:11px}.candidate h3{font-size:13px;margin:0 0 5px;color:#e7d1f1}.candidate p{font-size:9px;line-height:1.5;margin:4px 0;color:#9a88a8;min-height:28px}.candidate .candidate-seed{font-size:8px;color:#a68cb8;min-height:0;letter-spacing:.4px}.candidate-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.candidate-actions button{padding:6px 7px;font-size:9px}.candidate-actions .keep{margin-left:auto}.candidate .lineage{color:#7f7189;min-height:0;font-size:8px}#discovery-panel .discovery-note{font-size:10px;color:#8c7b99;line-height:1.7;margin-bottom:0}@media(max-width:850px){#discovery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){#discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#discovery-panel{padding:17px}#discovery-panel h2{font-size:23px}.discovery-toolbar .primary{margin-left:0}.candidate-body{padding:8px}}

.candidate-colors{display:flex;height:7px;gap:2px;margin:10px 0;border-radius:4px;overflow:hidden}.candidate-colors span{flex:1}

.header-right #share{width:44px;height:44px;margin-left:4px;flex-shrink:0;display:grid;place-items:center;color:var(--accent)}.header-right #share[aria-busy="true"]{opacity:.45}

/* Vector asterisks inherit the interface color and never use emoji fonts. */
.asterisk-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0}
.brand-mark{width:34px;height:34px;color:var(--accent);margin-right:11px}
@media(max-width:600px){.brand-mark{width:28px;height:28px}}



/* Reserve all discovery slots so progressive rendering cannot move the dialog or cards. */
#discovery-panel{height:92vh;height:92dvh;scrollbar-gutter:stable}
#discovery-context{min-height:3.4em}
#discovery-status{height:3.4em;overflow:auto}
#discovery-grid{align-items:start}
#discovery-grid .candidate{min-width:0}
#discovery-grid .candidate-body{height:260px;display:flex;flex-direction:column}
#discovery-grid .candidate h3{height:40px;flex-shrink:0;line-height:20px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#discovery-grid .candidate-body>p:not(.candidate-seed):not(.lineage){height:42px;min-height:42px;overflow:auto}
#discovery-grid .candidate-colors{flex-shrink:0}
#discovery-grid .candidate-actions{margin-top:auto;min-height:58px;align-content:end;align-items:center}
.candidate-skeleton-preview{aspect-ratio:4/3;background:#211929}
.skeleton-line{height:12px;margin:8px 0;background:#2c2235;border-radius:4px;width:82%}
.skeleton-line.short{width:48%}
.candidate-empty .candidate-body{align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:11px}
#discovery-grid article.candidate{animation:discovery-enter 360ms cubic-bezier(.2,.7,.2,1) both}
@keyframes discovery-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#discovery-grid article.candidate{animation:none}}

[hidden]{display:none!important}
.workspace-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:18px}
.workspace-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:12px 3px;color:var(--muted);font-size:13px}
.workspace-tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
#discovery-panel{width:100%;max-width:none;height:auto;max-height:none;padding:0;}

/* Keep the live canvas mounted and the two panels inside a stable workspace. */
.workspace{grid-template-columns:minmax(0,1fr) minmax(300px,38%);height: min(820px,80vh);min-height:540px}
.workspace .stage{min-height:0;height:100%}
.workspace-panel{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.workspace-panel .workspace-tabs{flex-shrink:0;margin-top:-8px}
.workspace-panel>[role="tabpanel"]{min-height:0;overflow:auto;scrollbar-gutter:stable;flex:1}
.workspace-panel #discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.workspace-panel #discovery-panel h2{font-size:22px}
.workspace-panel .discovery-toolbar .primary{margin-left:0}
@media(max-width:760px){
 .workspace{height:auto;min-height:0;gap:12px}
 .workspace .stage{height:60vh;height:60svh;min-height:340px;flex-shrink:0}
 .workspace-panel{height:52vh;height:52dvh;min-height:320px}
 .stage-bottom{bottom:16px}.stage-bottom h2{font-size:18px}
}

/* Compact navigation with touch-sized actions on small screens. */
header{height:60px;gap:12px;flex-wrap:nowrap}
.header-right{gap:8px;flex-shrink:0}
.header-right button,.header-right #share{margin-left:0}
.header-right #about{min-height:44px;white-space:nowrap}
@media(max-width:760px){
 header{height:52px;min-height:52px;padding:0 12px;gap:6px}
 .brand{font-size:14px;letter-spacing:.6px;white-space:nowrap}
 .brand-mark{width:24px;height:24px;margin-right:5px}
 .header-right{gap:4px}
 .header-right .text-button{margin-left:0;padding:8px 4px;font-size:11px}
 .header-right .text-button span{margin-left:4px}
}

.candidate-actions .primary[aria-pressed="true"]{background:#302039;color:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

#editor-panel>.control-section:first-child{border-top:0;margin-top:0;padding-top:0}

/* Quiet status keeps attention on the flame. */
.live-badge{background:none;border:0;padding:0;border-radius:0;font-size:8px;letter-spacing:.5px;color:#8e889c}

/* Quiet grain resolves into the actual image instead of bars or shimmer. */
.candidate-skeleton-preview,#loading::before{
 background:radial-gradient(ellipse at center,#30263d55,transparent 75%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23d3c7e1' opacity='.12' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}
#loading{inset:0;display:grid;place-items:center;font-size:12px;letter-spacing:.08em}
#loading::before{content:'';position:absolute;inset:0;pointer-events:none}
#discovery-grid article.candidate{animation:none}
#discovery-grid article.candidate canvas{animation:mist-resolve 900ms ease-out both}
@keyframes mist-resolve{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){#discovery-grid article.candidate canvas{animation:none}}

/* Copy confirmation stays inside the share control. */
#share svg path{transform-origin:12px 12px;transition:opacity .24s ease,transform .24s ease,stroke .24s ease}
#share .share-check{opacity:0;transform:scale(.75);stroke:#78dca0}
#share.copied .share-arrow{opacity:0;transform:scale(.75)}
#share.copied .share-check{opacity:1;transform:scale(1)}
#copy-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){#share svg path{transition:none}}

/* The public web surface is a viewer with sharing and an app invitation. */
.viewer-page .viewer-main{padding-top:12px}
.viewer-page .stage{height:72vh;height:72svh;min-height:320px;max-height:900px}
.viewer-page .stage-bottom h1{font-size:clamp(20px,3vw,32px);font-weight:500;letter-spacing:-.5px;margin:0}
.viewer-page .app-invitation{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0}
.app-invitation-lead{display:flex;align-items:center;gap:18px}
.app-invitation-lead .app-logo{width:56px;height:56px;border-radius:13px;border:1px solid #2f2a3a;box-shadow:0 4px 16px #0009,0 0 14px #c98ee01a;flex-shrink:0;object-fit:cover;display:block}
.app-invitation h2{font-size:20px;margin:0 0 8px}
.app-invitation p{font-size:14px;color:var(--muted);margin:0}
.app-invitation a{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;white-space:nowrap}
.store-pending{color:var(--muted);font-size:13px;white-space:nowrap;border:1px solid var(--line);border-radius:8px;padding:12px 18px}
#store-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:760px){.viewer-page .app-invitation{flex-direction:column;align-items:stretch;gap:18px}.app-invitation-lead .app-logo{width:48px;height:48px;border-radius:11px}.store-pending{text-align:center}.viewer-page .stage{height:65svh}.viewer-page header #share{min-width:44px;min-height:44px}}

/* Render shared flames directly, without a loading overlay. */
#loading[hidden]{display:none}
.viewer-page .stage-bottom{gap:16px}
#playback{min-width:72px;min-height:44px;flex-shrink:0}