:root{color-scheme:dark;--bg:#171819;--panel:#202122;--line:#353638;--text:#f1f1ef;--muted:#a5a6a8;--accent:#dce6c9}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,textarea,input{font:inherit}button,a,summary,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);background:#292a2c;color:var(--text);border-radius:7px;padding:9px 13px;white-space:nowrap}button:hover{background:#383a3c}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,textarea:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.primary{background:var(--accent);color:#252b20;border-color:var(--accent);font-weight:600}.primary:hover{background:#ecf4de}.topbar{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:20px;padding:0 24px}.brand{color:var(--text);text-decoration:none;font-size:21px;letter-spacing:-1px;font-weight:650;display:flex;gap:5px;align-items:center}.brand>span:last-child{font-weight:350;color:#aaa}.brandmark{color:var(--accent);font-size:32px;letter-spacing:-4px;margin-right:12px;transform:rotate(15deg)}.project{margin-left:50px;color:#c5c5c5;font-size:13px}.project span{margin:0 16px;color:#656668}.demo{margin-left:auto;color:var(--muted);font-size:12px}.avatar{background:#3f4440;border:1px solid #5b6355;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-size:11px}.workspace{display:grid;grid-template-columns:310px minmax(460px,1fr) 264px;min-height:calc(100vh - 70px)}.assistant,.inspector{background:var(--panel);display:flex;flex-direction:column}.assistant{border-right:1px solid var(--line)}.inspector{border-left:1px solid var(--line)}.panel-heading{height:62px;border-bottom:1px solid var(--line);padding:20px;display:flex;justify-content:space-between;font-weight:550}.subtle{color:var(--muted);font-size:12px;font-weight:400}.conversation{padding:30px 24px;flex:1}.eyebrow{font-size:10px;letter-spacing:1.7px;color:var(--muted);font-weight:600}h1{font-size:30px;line-height:1.2;letter-spacing:-1px;font-weight:500;margin:20px 0 14px}p{color:var(--muted);margin:8px 0;line-height:1.65}.brief{border-left:2px solid #727e65;padding-left:15px;margin:30px 0}.brief p{color:#d7d8d5;font-size:13px}.small-label{font-size:10px;letter-spacing:1px;color:var(--muted)}.assistant-note{display:flex;gap:12px;margin:30px 0 18px}.spark{font-size:24px;color:var(--accent);line-height:1}.assistant-note strong{font-size:13px;font-weight:550}.assistant-note p{font-size:13px}.intent-tags{display:flex;flex-wrap:wrap;gap:6px}.intent-tags span{font-size:11px;border:1px solid #42453e;border-radius:5px;padding:4px 8px;color:#c3c9bb}form{margin:20px 16px 0;padding:15px;border:1px solid #565951;border-radius:12px;background:#27292a}form label{font-size:12px;color:#d6d9d1}textarea{width:100%;height:95px;resize:vertical;background:transparent;border:0;color:var(--text);padding:12px 0;font-size:13px;outline-offset:0!important}textarea::placeholder{color:#929692}.composer-footer{display:flex;align-items:center;justify-content:space-between;gap:4px}.composer-footer span{font-size:10px;color:var(--muted)}.composer-footer button{font-size:12px;padding:8px}.prototype-note{font-size:10px;text-align:center;margin:10px 0 17px}main{padding:26px 28px 12px;min-width:0}.canvas-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}h2{font-size:20px;letter-spacing:-.5px;font-weight:500;margin:5px 0}.canvas-heading button{background:transparent;font-size:12px}.preview-wrap{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#1c1d1e}.preview-top,.preview-bottom{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:11px;color:#b6b7b5}.status-dot{display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;margin-right:5px}.canvas{padding:16px;background:#141516;display:flex;gap:12px}.art{--soft:35px;--speed:12s;--warm:0deg;--intensity:.85;position:relative;overflow:hidden;isolation:isolate;background:#222420;width:100%;aspect-ratio:1.6;border:1px solid #ffffff0d}.orb{position:absolute;width:70%;height:115%;border-radius:50%;filter:blur(var(--soft));opacity:var(--intensity);animation:drift var(--speed) ease-in-out infinite alternate;transform:rotate(-30deg)}.one{background:#dda378;left:22%;top:-50%}.two{background:#aab6a6;left:-28%;top:16%;animation-delay:-4s}.three{background:#894d38;left:65%;top:30%;animation-delay:-7s}.art{filter:hue-rotate(var(--warm))}.art-caption{position:absolute;inset:9%;display:flex;flex-direction:column;justify-content:space-between;color:#fff9e9;z-index:2;text-shadow:0 1px 12px #0004}.art-caption span{font-size:9px;letter-spacing:2px}.art-caption strong{font-family:Georgia,serif;font-size:clamp(26px,3.5vw,60px);line-height:1.07;font-weight:400;letter-spacing:-2px}.preview-bottom button{font-size:11px;background:transparent;border:0;padding:0}.divider{padding:0 12px;color:#656668}.directions-heading{display:flex;align-items:center;justify-content:space-between;margin:24px 0 14px}h3{font-size:14px;margin:0;font-weight:500}h3 span{font-size:10px;color:#b5b9af;background:#30332d;margin-left:7px;padding:2px 5px;border-radius:4px}.directions-heading p{font-size:12px;margin:3px 0}.directions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.direction{text-align:left;padding:7px;white-space:normal;background:#202122;border-color:var(--line)}.direction[aria-pressed=true]{border-color:var(--accent);background:#282b25}.direction .art{border-radius:4px;aspect-ratio:1.8}.direction .orb{filter:blur(13px);animation:none}.direction strong{font-size:12px;font-weight:500;display:block;margin:10px 4px 1px}.direction p{font-size:10px;margin:0 4px 5px}.decision-bar{margin-top:23px;padding-top:19px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}.decision-bar>div{display:flex;align-items:center;gap:12px}.decision-bar>div>span{color:var(--accent);font-size:24px}.decision-bar strong{font-size:12px;font-weight:500}.decision-bar p{font-size:11px;margin:1px 0}.decision-bar button{font-size:12px}#announcement{font-size:11px;min-height:18px;color:var(--accent)}.inspector-content{padding:25px 20px}.inspector-content>p{font-size:12px}.section-label{display:flex;justify-content:space-between;font-size:12px;margin-top:28px;font-weight:550}.control-help{font-size:11px!important;margin-bottom:22px} .control{margin:21px 0}.control label{display:flex;justify-content:space-between;font-size:12px}.control output{color:#d7dfc9;font-size:11px}.control small{display:block;color:var(--muted);font-size:10px;margin-top:3px}input[type=range]{width:100%;accent-color:var(--accent);height:3px;margin:15px 0 7px}.palette{display:flex;gap:7px;margin:13px 0}.palette input{width:34px;height:34px;border:1px solid #ffffff30;border-radius:50%;padding:0;overflow:hidden;background:none;cursor:pointer}.palette input::-webkit-color-swatch-wrapper{padding:0}.palette input::-webkit-color-swatch{border:0;border-radius:50%}.refine{border-top:1px solid var(--line);padding-top:22px;margin-top:27px}.refine>span{font-size:12px}.refine button{display:flex;justify-content:space-between;width:100%;font-size:11px;margin-top:9px;background:transparent}details{border-top:1px solid var(--line);margin-top:23px;padding-top:17px;font-size:11px;color:var(--muted)}summary{cursor:pointer;color:#c5c6c4}details label{display:block;margin-top:15px}details p{font-size:10px}.discard{background:none;border:0;color:#b8aaa5;padding:20px 0 0;font-size:11px}.trust-note{margin-top:auto;border-top:1px solid var(--line);padding:20px;font-size:11px;color:#c8cdc1}.trust-note span{display:inline-block;color:var(--muted);font-size:10px;margin-top:4px}#comparison{width:50%;position:relative}#comparison>span{position:absolute;z-index:3;top:10px;left:10px;background:#222;padding:4px 8px;font-size:10px;border-radius:5px}.comparing>#art{width:50%}.comparing .art{aspect-ratio:.8}.paused .orb{animation-play-state:paused}@keyframes drift{to{transform:translate(8%,12%) rotate(15deg) scale(1.13)}}@media(prefers-reduced-motion:reduce){.orb{animation:none}}
/* The workspace owns the viewport; only optional panel content scrolls. */
html,body{height:100%;overflow:hidden}
body{height:100dvh;display:flex;flex-direction:column}
.topbar{height:54px;flex:0 0 54px;padding:0 18px}
.workspace{flex:1;min-height:0;display:grid;grid-template-columns:280px minmax(0,1fr) 244px;position:relative;overflow:hidden}
.assistant,.inspector{min-height:0;overflow:hidden}
.panel-heading{height:46px;flex:0 0 46px;padding:12px 16px}
.conversation{padding:20px 18px;min-height:0;overflow:auto}
h1{font-size:25px;margin:12px 0}
.brief,.assistant-note{margin:20px 0 14px}
form{flex-shrink:0;margin:10px 12px 0;padding:12px}
textarea{height:72px;resize:none}
.prototype-note{margin:8px 0 10px}
main{min-height:0;padding:14px 18px 8px;display:grid;grid-template-rows:auto minmax(0,1fr) auto 92px auto 18px;gap:10px}
.canvas-heading{margin:0}.canvas-heading h2{font-size:18px;margin:2px 0}
.preview-wrap{min-height:0;display:flex;flex-direction:column}
.preview-top,.preview-bottom{flex:0 0 32px;padding:7px 12px}
.canvas{flex:1;min-height:0;padding:10px}
.canvas .art{height:100%;aspect-ratio:auto;min-width:0}
#comparison{height:100%;min-width:0}
.art-caption strong{font-size:clamp(26px,3.2vw,54px)}
.directions-heading{margin:0}.directions-heading p{display:none}
.directions{min-height:0;gap:8px}
.direction{display:grid;grid-template-columns:64px 1fr;grid-template-rows:1fr 1fr;column-gap:8px;align-items:center;min-width:0;padding:7px}
.direction .art{grid-row:1/3;width:64px;height:100%;aspect-ratio:auto}
.direction strong{align-self:end;margin:0;font-size:11px}
.direction p{align-self:start;margin:3px 0 0;font-size:10px}
.decision-bar{margin:0;padding:10px 0 0;gap:8px}.decision-bar p{font-size:10px}
#announcement{margin:0;font-size:10px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inspector-content{padding:16px;min-height:0;overflow:auto;flex:1}
.inspector-content h2{font-size:18px}.section-label{margin-top:18px}.control-help{margin-bottom:12px}
.control{margin:14px 0}.control small{font-size:9px}input[type=range]{margin:12px 0 5px}
.palette{margin:9px 0}.palette input{width:28px;height:28px}
.refine{margin-top:18px;padding-top:14px}.refine button{padding:7px 10px}
details{margin-top:16px;padding-top:12px}.discard{padding-top:15px}
.trust-note{flex-shrink:0;padding:12px 16px;font-size:10px}.trust-note span{display:none}
.panel-toggle{display:none}.canvas-actions{display:flex;gap:6px}.panel-close{display:none}
@media(max-height:800px){
 .conversation> .eyebrow,.conversation>p,.intent-tags{display:none}
 .conversation{padding:14px 18px}.brief,.assistant-note{margin:14px 0}
 .assistant-note p{font-size:12px}.control-help{display:none}.section-label{margin-top:12px}
 .inspector-content{padding:12px 16px}.control{margin:10px 0}.control small{display:none}
 .refine{margin-top:12px;padding-top:10px}.trust-note{display:none}
 main{grid-template-rows:auto minmax(0,1fr) auto 74px auto 18px;gap:8px}
}
@media(max-width:1200px){
 .workspace{grid-template-columns:250px minmax(0,1fr) 220px}
 main{padding:12px}.project{margin-left:10px}.demo{display:none}.topbar #export{margin-left:auto}
 .direction{display:block;padding:6px}.direction .art{height:30px;width:100%;margin-bottom:4px}.direction p{display:none}
 .decision-bar p{display:none}.decision-bar>div{gap:6px}.decision-bar button{padding:8px;font-size:11px}
}
@media(max-width:1000px){
 .workspace{grid-template-columns:minmax(0,1fr)}
 .assistant,.inspector{display:none;position:absolute;top:0;bottom:0;width:280px;z-index:10;box-shadow:0 10px 45px #0008}
 .assistant{left:0}.inspector{right:0}
 .workspace[data-panel="assistant"] .assistant,.workspace[data-panel="inspector"] .inspector{display:flex}
 .panel-toggle,.panel-close{display:inline-block}
 .panel-close{padding:0 5px;border:0;background:none;font-size:16px;line-height:20px}
 .project{font-size:11px}.project span{margin:0 8px}
}
@media(max-width:600px){
 .topbar{padding:0 12px;gap:8px}.brand{font-size:18px}.project,.avatar{display:none}
 .topbar #export{font-size:11px;padding:7px 9px}
 main{padding:10px;gap:8px;grid-template-rows:auto minmax(0,1fr) auto 66px auto 18px}
 .canvas-heading{align-items:center;gap:8px}.canvas-heading .eyebrow{font-size:8px}.canvas-heading h2{font-size:16px}
 .canvas-actions{gap:4px}.canvas-heading button{font-size:10px;padding:7px}
 .canvas{padding:5px}.preview-top,.preview-bottom{padding:6px 8px;font-size:10px}
 .art-caption strong{font-size:clamp(26px,7vw,42px)}.art-caption span{font-size:7px;letter-spacing:1px}
 .directions-heading .subtle{display:none}.decision-bar strong{font-size:11px}.decision-bar>div>span{font-size:18px}
 .comparing .art-caption strong{font-size:24px}
}