.creation-canvas{--canvas-ink:#19202c;--canvas-muted:#8991a1;--canvas-orange:#ff6b32;--canvas-line:#e9e8e4;display:grid;grid-template-columns:minmax(300px,355px) minmax(0,1fr);gap:8px;min-height:740px;color:var(--canvas-ink);font-family:inherit}
.creation-canvas *{box-sizing:border-box}
.creation-canvas button,.creation-canvas textarea{font:inherit}
.creation-canvas button{cursor:pointer;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s}
.creation-canvas button:focus-visible,.creation-canvas textarea:focus-visible{outline:3px solid #ffad7d;outline-offset:4px}
.creation-canvas button:disabled{cursor:default}
.canvas-agent{display:flex;flex-direction:column;min-width:0;min-height:740px;border:1px solid var(--canvas-line);border-radius:17px;background:linear-gradient(160deg,#fff 45%,#fffdfa);padding:30px 20px 20px}
.canvas-agent-heading{display:flex;align-items:center;gap:14px;padding:5px 5px 24px}
.canvas-agent-spark{font-size:47px;line-height:1;color:var(--canvas-orange)}
.canvas-agent-heading h1{font-size:21px;line-height:1.4;margin:0 0 4px;font-weight:750;letter-spacing:-.6px}
.canvas-agent-heading p{font-size:12px;line-height:1.65;color:var(--canvas-muted);margin:0}
.canvas-conversation{flex:1;min-width:0;padding-bottom:26px}
.canvas-message{display:grid;grid-template-columns:29px minmax(0,1fr);gap:12px;align-items:start;margin:14px 0 18px}
.canvas-avatar{display:grid;place-items:center;width:29px;height:29px;background:#fff0e8;border-radius:50%;color:var(--canvas-orange);font-size:25px;margin-top:4px}
.canvas-message--user .canvas-avatar{font-size:23px;background:#b7b7b4;color:#fff;width:25px;height:25px;margin-left:2px}
.canvas-message p{background:#fff;border:1px solid #eeece8;border-radius:14px;padding:14px 15px;margin:0;line-height:1.8;font-size:14px;overflow-wrap:anywhere;white-space:pre-wrap}
.canvas-message--user p{background:#f6f7f8;border-color:transparent}
.canvas-context-chips{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 12px 41px}
.canvas-context-chips span{padding:5px 12px;border-radius:999px;background:#fff0e7;font-size:11px;line-height:1.5;color:#5c4738}
.canvas-agent-hint{margin:0 0 25px 41px;font-size:12px;color:var(--canvas-muted);line-height:1.65}
.canvas-viewing-status{display:flex;gap:12px;padding:16px;border:1px solid var(--canvas-line);border-radius:13px;margin-top:29px;background:rgba(255,255,255,.75)}
.canvas-viewing-status>span{font-size:23px;line-height:1.3;color:#ff723c}
.canvas-viewing-status strong{font-size:13px;line-height:1.7}
.canvas-viewing-status p{font-size:12px;line-height:1.6;color:var(--canvas-muted);margin:3px 0 0}
.canvas-composer{padding:13px 12px 12px;border:1px solid #eceae7;border-radius:15px;box-shadow:0 5px 19px #2d2b2010;background:#fff}
.canvas-composer form{margin:0}
.canvas-composer textarea{border:0;resize:vertical;width:100%;min-height:78px;max-height:220px;padding:2px 4px 9px;font-size:13px;line-height:1.7;background:transparent;color:var(--canvas-ink);display:block}
.canvas-composer textarea::placeholder{color:#b0b7c3}
.canvas-prompt-actions{display:flex;align-items:center;justify-content:space-between;gap:5px;margin:5px 0 12px}
.canvas-prompt-actions button{border:0;background:transparent;font-size:11px;padding:5px 2px;color:#7c8595}
.canvas-prompt-actions button:hover{color:var(--canvas-orange)}
.canvas-reference-action span{font-size:21px;vertical-align:-2px;padding-right:3px}
.canvas-prompt-actions .canvas-prompt-send{color:#e36434;font-weight:600}
.canvas-reference-strip{display:flex;gap:7px;margin:0 0 12px}
.canvas-reference-strip img{width:41px;height:34px;object-fit:cover;border-radius:5px;border:1px solid var(--canvas-line)}
.canvas-adopt{border:1px solid #ff6a30;display:flex;justify-content:center;align-items:center;gap:17px;background:var(--canvas-orange);color:#fff;border-radius:11px;width:100%;padding:13px 11px;font-size:14px;font-weight:650;box-shadow:0 3px 7px #ff71381c}
.canvas-adopt span{font-size:21px;line-height:1}
.canvas-adopt:not(:disabled):hover{background:#ef5c24;transform:translateY(-1px)}
.canvas-adopt:disabled{background:#ffdec9;border-color:#ffdec9;color:#a97151;box-shadow:none}
.canvas-workspace{min-width:0;border:1px solid var(--canvas-line);border-radius:17px;padding:17px 22px 14px;background-color:#fffefc;background-image:radial-gradient(#dadfe3 .7px,transparent .7px);background-size:13px 13px;display:flex;flex-direction:column;overflow:hidden}
.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 0 20px;position:relative;z-index:1}
.canvas-categories{display:inline-flex;gap:3px;padding:3px;border:1px solid #ebe9e4;border-radius:9px;background:#fffefcf5}
.canvas-categories button{border:0;border-radius:6px;padding:7px 12px;color:#86858b;background:transparent;font-size:12px}
.canvas-categories button.is-active{color:#e35f2c;background:#fff0e5;font-weight:650}
.canvas-categories button:hover{background:#fff4ec}
.canvas-undo{padding:7px 9px;border:0;background:#fffdf8;color:#697285;border-radius:7px;font-size:15px}
.canvas-undo span{font-size:11px;margin-left:3px}
.canvas-undo:disabled{opacity:.4}
.canvas-flow{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding-bottom:28px}
.canvas-connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.canvas-connectors path{stroke:#ffb88c;stroke-width:1;fill:none}
.canvas-connectors circle{fill:#ff884e}
.canvas-upper-flow{position:relative;z-index:1;display:grid;grid-template-columns:minmax(125px,165px) minmax(0,1fr);align-items:start;gap:27px;margin-bottom:30px}
.canvas-origin{display:flex;gap:10px;align-items:flex-start;min-width:0;padding:14px 11px;border:1px solid #e9e8e3;background:#fff;border-radius:12px;box-shadow:0 5px 18px #26231605;margin-top:29px}
.canvas-origin h2{font-size:12px;line-height:1.5;margin:0 0 8px;white-space:nowrap}
.canvas-origin p{font-size:10px;color:#959baa;line-height:1.8;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.canvas-art{background-repeat:no-repeat;background-size:400% 400%;background-color:#edf1de;overflow:hidden}
.canvas-origin-art{width:34px;height:36px;border-radius:5px;flex-shrink:0}
.canvas-focus{min-width:0;padding:12px;border:1px solid #e9e8e3;border-radius:13px;background:#fff;box-shadow:0 4px 19px #29271f08}
.canvas-focus-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px;min-height:24px;flex-wrap:wrap}
.canvas-focus-heading h2{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.5;margin:0}
.canvas-focus-heading h2>span{font-size:19px}
.canvas-focus-heading>div{display:flex;align-items:center;gap:12px;margin-left:auto}
.canvas-focus-heading button{border:0;background:transparent;color:#828a9a;padding:2px 0;font-size:10px;white-space:nowrap}
.canvas-focus-heading button:disabled{opacity:.45}
.canvas-focus-heading button:not(:disabled):hover{color:#ed6b36}
.canvas-pending-label{font-size:10px;color:#f46c35;background:#fff2e9;border-radius:999px;padding:4px 9px;white-space:nowrap}
.canvas-focus-art{aspect-ratio:2.05/1;width:100%;border-radius:8px}
.canvas-focus-description{font-size:11px;line-height:1.6;color:#8790a2;margin:9px 0 0;overflow-wrap:anywhere}
.canvas-comparison{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.canvas-comparison figure{margin:0;min-width:0}
.canvas-comparison .canvas-focus-art{aspect-ratio:1.4/1}
.canvas-comparison figcaption{color:#858d9a;font-size:10px;line-height:1.5;margin-top:6px}
.canvas-direction-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.canvas-direction{min-width:0;text-align:left;border:1px solid #e7e6e1;background:#fff;border-radius:12px;padding:11px 9px 10px;color:var(--canvas-ink);box-shadow:0 3px 13px #28251d04}
.canvas-direction:hover{border-color:#ffb282;box-shadow:0 4px 16px #ed7c3120;transform:translateY(-2px)}
.canvas-direction.is-selected{border:2px solid var(--canvas-orange);padding:10px 8px 9px;box-shadow:0 3px 10px #ff7d3014}
.canvas-direction-heading{display:flex;gap:5px;align-items:center;justify-content:space-between;min-height:25px;margin:0 1px 8px}
.canvas-direction-heading strong{display:flex;align-items:center;gap:7px;font-size:12px;line-height:1.5;font-weight:650}
.canvas-direction-heading strong>span{font-size:18px;line-height:1}
.canvas-direction-heading>small{font-size:9px;font-weight:400;color:#9a9b9d;white-space:nowrap}
.canvas-choice-mark{display:grid;place-items:center;width:21px;height:21px;flex-shrink:0;background:var(--canvas-orange);color:#fff;border-radius:50%;font-size:14px;box-shadow:0 1px 5px #ff6b3240}
.canvas-direction-art{width:100%;aspect-ratio:1.63/1;border-radius:6px}
.canvas-direction-description{font-size:11px;line-height:1.65;color:#8991a0;display:block;padding:8px 2px 0;overflow-wrap:anywhere}
.canvas-workspace-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#a1a5ad;font-size:10px;padding-top:3px}
.canvas-workspace-footer>div{display:flex;gap:15px;flex-wrap:wrap}
.canvas-workspace-footer button{border:0;background:transparent;padding:3px 0;font-size:10px;color:#8a909b}
.canvas-workspace-footer button:last-child{color:#ed7442}
.canvas-workspace-footer button:hover{color:#d65622}
.canvas-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1550px){.creation-canvas{grid-template-columns:390px minmax(0,1fr);min-height:800px}.canvas-agent{min-height:800px;padding:34px 23px 23px}.canvas-agent-heading h1{font-size:23px}.canvas-agent-heading p{font-size:13px}.canvas-message p{font-size:15px}.canvas-workspace{padding:19px 28px 15px}.canvas-upper-flow{grid-template-columns:190px minmax(0,1fr);gap:42px;margin-bottom:34px}.canvas-origin{padding:17px 13px}.canvas-origin h2{font-size:13px}.canvas-origin p{font-size:11px}.canvas-focus{padding:14px}.canvas-focus-heading h2{font-size:16px}.canvas-focus-heading button,.canvas-pending-label{font-size:11px}.canvas-focus-description{font-size:12px}.canvas-direction-grid{gap:19px}.canvas-direction{padding:12px}.canvas-direction.is-selected{padding:11px}.canvas-direction-heading strong{font-size:15px}.canvas-direction-description{font-size:12px}.canvas-focus-art{aspect-ratio:2.2/1}}
@media(max-width:1190px){.creation-canvas{grid-template-columns:300px minmax(0,1fr);min-height:700px}.canvas-agent{min-height:700px;padding:24px 14px 15px}.canvas-agent-heading{gap:9px;padding:0 0 14px}.canvas-agent-heading h1{font-size:18px}.canvas-agent-heading p{font-size:11px}.canvas-agent-spark{font-size:39px}.canvas-message{grid-template-columns:25px minmax(0,1fr);gap:8px}.canvas-message p{font-size:12px;padding:12px}.canvas-context-chips,.canvas-agent-hint{margin-left:33px}.canvas-context-chips{gap:5px}.canvas-context-chips span{font-size:10px;padding:5px 8px}.canvas-workspace{padding:15px}.canvas-upper-flow{grid-template-columns:110px minmax(0,1fr);gap:16px;margin-bottom:25px}.canvas-origin{display:block;padding:11px;margin-top:24px}.canvas-origin-art{float:left;width:27px;height:29px;margin:0 7px 6px 0}.canvas-origin h2{font-size:10px;padding:4px 0}.canvas-origin p{clear:both;font-size:10px}.canvas-focus-heading>div{gap:8px}.canvas-focus-heading h2{font-size:12px}.canvas-focus-heading button{font-size:9px}.canvas-pending-label{font-size:9px;padding:4px 7px}.canvas-focus-art{aspect-ratio:1.6/1}.canvas-direction-grid{gap:10px}.canvas-direction-heading strong{font-size:11px;gap:4px}.canvas-direction-heading strong>span{font-size:15px}.canvas-direction-description{font-size:10px}.canvas-categories button{font-size:11px;padding:6px 9px}.canvas-connectors{opacity:.6}.canvas-workspace-footer>span{display:none}}
@media(max-width:960px){.creation-canvas{grid-template-columns:270px minmax(0,1fr)}.canvas-agent{padding:22px 12px 14px}.canvas-agent-heading h1{font-size:16px}.canvas-agent-heading p{font-size:10px}.canvas-agent-spark{font-size:34px}.canvas-agent-heading{align-items:flex-start}.canvas-upper-flow{display:flex;flex-direction:column;gap:13px;margin-bottom:20px}.canvas-origin{display:flex;width:100%;max-width:none;gap:10px;margin:0;padding:10px 12px}.canvas-origin-art{float:none;width:30px;height:31px;margin:0}.canvas-origin h2{display:inline;font-size:11px;padding:0;margin:0}.canvas-origin p{display:inline;margin-left:7px;-webkit-line-clamp:1;font-size:10px;line-height:1.7}.canvas-origin>div:last-child{min-width:0}.canvas-focus{width:100%;padding:10px}.canvas-focus-art{aspect-ratio:1.65/1}.canvas-focus-heading{gap:6px}.canvas-focus-heading>div{width:100%;justify-content:space-between}.canvas-direction-grid{gap:8px}.canvas-direction{padding:8px 6px}.canvas-direction.is-selected{padding:7px 5px}.canvas-direction-heading{margin-bottom:6px}.canvas-direction-heading strong>span{display:none}.canvas-direction-heading strong{font-size:10px}.canvas-direction-description{font-size:9px;padding-top:6px}.canvas-direction-heading>small{display:none}.canvas-choice-mark{width:15px;height:15px;font-size:10px}.canvas-connectors{display:none}.canvas-adopt{font-size:12px}.canvas-viewing-status{gap:8px;padding:12px}.canvas-viewing-status strong{font-size:11px}.canvas-viewing-status p{font-size:11px}}
@media(max-width:740px){.creation-canvas{display:flex;flex-direction:column;gap:10px;min-height:0}.canvas-agent{min-height:0;padding:18px}.canvas-agent-heading{padding:0 0 7px;gap:11px;align-items:center}.canvas-agent-heading h1{font-size:19px}.canvas-agent-heading p{font-size:11px}.canvas-agent-spark{font-size:39px}.canvas-message{margin:12px 0;grid-template-columns:26px minmax(0,1fr)}.canvas-message p{font-size:12px;padding:10px 12px}.canvas-context-chips{margin-bottom:8px}.canvas-agent-hint{margin-bottom:0;font-size:11px}.canvas-viewing-status{margin-top:14px;padding:11px 13px}.canvas-conversation{padding-bottom:16px}.canvas-viewing-status strong{font-size:12px}.canvas-composer{padding:10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}.canvas-composer form{grid-column:1/-1}.canvas-composer textarea{min-height:53px;font-size:12px}.canvas-prompt-actions{margin:3px 0 5px}.canvas-adopt{grid-column:1/-1;font-size:13px;padding:11px}.canvas-reference-strip{margin:0;grid-column:1/-1}.canvas-workspace{padding:13px;border-radius:15px;min-height:560px}.canvas-toolbar{padding-bottom:13px}.canvas-categories button{font-size:11px;padding:7px 11px}.canvas-undo span{display:inline}.canvas-flow{padding-bottom:16px;justify-content:flex-start}.canvas-upper-flow{gap:12px;margin-bottom:17px}.canvas-origin{padding:10px}.canvas-origin p{font-size:10px;display:-webkit-box;margin:3px 0 0;-webkit-line-clamp:1;-webkit-box-orient:vertical}.canvas-focus{padding:10px}.canvas-focus-heading{flex-wrap:wrap;gap:8px;margin-bottom:9px}.canvas-focus-heading h2{font-size:13px}.canvas-focus-heading>div{width:auto;gap:10px}.canvas-pending-label{font-size:9px}.canvas-focus-heading button{font-size:9px}.canvas-focus-art{aspect-ratio:1.7/1}.canvas-focus-description{font-size:10px;margin-top:8px}.canvas-direction-grid{gap:8px}.canvas-direction{padding:7px 5px}.canvas-direction.is-selected{padding:6px 4px}.canvas-direction-heading{min-height:24px;margin:0 1px 6px}.canvas-direction-heading strong{font-size:10px}.canvas-direction-heading strong>span{display:none}.canvas-direction-art{aspect-ratio:1.13/1;border-radius:5px}.canvas-direction-description{font-size:9px;line-height:1.5;padding:7px 2px 1px;min-height:33px}.canvas-workspace-footer{justify-content:flex-end;padding-top:0}.canvas-workspace-footer>div{gap:18px}.canvas-workspace-footer button{font-size:10px}.canvas-comparison{gap:7px}.canvas-comparison .canvas-focus-art{aspect-ratio:1/1}.canvas-comparison figcaption{font-size:9px}}
@media(min-width:741px){
  .creation-canvas{height:calc(100svh - 68px);min-height:0;max-height:calc(100svh - 68px);align-items:stretch}
  .canvas-agent{height:100%;min-height:0;max-height:100%;overflow:hidden;padding-top:23px;padding-bottom:17px}
  .canvas-agent-heading{flex:0 0 auto;padding-bottom:17px}
  .canvas-conversation{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:18px;padding-right:5px;margin-right:-5px;scrollbar-width:thin;scrollbar-color:#e4ded6 transparent}
  .canvas-composer{flex:0 0 auto;margin-top:12px}
  .canvas-workspace{height:100%;min-height:0;max-height:100%;overflow:hidden;padding-top:15px;padding-bottom:12px}
  .canvas-toolbar{flex:0 0 auto;padding-bottom:13px}
  .canvas-flow{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;justify-content:flex-start;padding-top:5px;padding-bottom:13px;scrollbar-width:thin;scrollbar-color:#e4ded6 transparent}
  .canvas-upper-flow{flex:0 0 auto;margin-bottom:22px}
  .canvas-focus-art{aspect-ratio:2.3/1;max-height:clamp(210px,36svh,340px)}
  .canvas-comparison .canvas-focus-art{aspect-ratio:1.65/1;max-height:clamp(180px,32svh,310px)}
  .canvas-focus-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .canvas-direction-grid{flex:0 0 auto}
  .canvas-direction-art{aspect-ratio:1.8/1;max-height:clamp(110px,22svh,184px)}
  .canvas-workspace-footer{flex:0 0 auto;padding-top:8px}
}
@media(prefers-reduced-motion:reduce){.creation-canvas button{transition:none}.canvas-direction:hover,.canvas-adopt:not(:disabled):hover{transform:none}}
