/* Presentation only: no changes to geometry, color engines, or exported artwork. */
:root{--ink:#fff5e5;--muted:#ddcdb8;--gold:#ebc996;--button:#514335;--button-active:#e7c99c;--active-glow:none}
body.guided-studio{background:linear-gradient(#82726577,#59463888),url('../assets/iris-design-scene-clean.webp') center/cover;color:#fff5e5;padding:12px;gap:12px}
.guided-studio .scene{display:none}
.guided-studio .header{height:48px;min-height:48px;--header-height:48px;padding:4px 6px;--header-pad:6px;border:0;border-radius:0;background:transparent;box-shadow:none}
.guided-studio .header-scene{display:none}
.guided-studio .brand{padding-left:0;gap:12px}
.guided-studio .brand img{width:33px;height:33px;background:#eadbc4;border-radius:8px;padding:4px}
.guided-studio .brand h1{font-size:21px;font-weight:450;letter-spacing:.16em;text-shadow:none;color:#f3dfbd}
.design-workspace{grid-template-columns:clamp(260px,28vw,340px) minmax(0,1fr);gap:12px}
.design-sidebar{background:#40362e;border:1px solid #6e5b47;border-radius:16px;padding:18px;box-shadow:none;scrollbar-color:#b99a70 #40362e}
.sidebar-heading h2{font-size:24px;font-weight:450;line-height:1.25;letter-spacing:-.025em}
.journey-status{font-size:13px;color:#dfcdb5;margin-bottom:10px;min-height:20px}
.journey-meter{height:4px;background:#695641;margin-bottom:18px}.journey-meter span{background:#ebc996}
.accordion{gap:8px}.design-step{background:#372f28;border-color:#6e5b47;border-radius:11px}
.design-step[data-state=next]{border-color:#d7b481;box-shadow:inset 3px 0 #d7b481}
.design-step[data-state=done]{border-color:#9f825c}
.step-toggle{min-height:60px;padding:12px 10px;grid-template-columns:26px minmax(0,1fr) 14px;gap:9px;color:#fff4e1}
.step-number{height:26px;width:26px;font-size:11px;border-color:#9f825c;color:#e9d5b8}
[data-state=next] .step-number{box-shadow:none;background:#e7c99c;border-color:#e7c99c;color:#38291c}
[data-state=done] .step-number{background:#e7c99c;border-color:#e7c99c;color:#38291c}
.step-copy strong{font-size:14px;font-weight:550}.step-value{font-size:12px;color:#c9b79e;line-height:1.4}.step-chevron{color:#e7c99c}
.step-options{padding:0 10px 12px;gap:7px}
.step-help{margin:0 0 5px;padding:10px 11px;border-left:2px solid #cba777;border-radius:0 7px 7px 0;background:#e7c99c0a;color:#e6d6c0;font-size:12px;line-height:1.6;overflow-wrap:break-word}
.step-choice{font-size:13px;min-height:46px;padding:9px 10px;border-color:#8c7356;background:#514335;color:#fff4e1;border-radius:8px}
.step-choice:hover:not(:disabled){background:#66513a;border-color:#d7b481}
.step-choice[aria-pressed=true]{background:#e7c99c;color:#32271e;border-color:#e7c99c;box-shadow:none}
.step-choice[aria-pressed=true] svg,.step-choice[aria-pressed=true]::after{color:#4c3824}
.design-viewer{padding:16px;background:#4a4037;border-color:#6e5b47;border-radius:16px}
.photo-caption{font-size:13px;color:#fff0d6;padding-bottom:12px}#photo-mode{color:#d6bea0}
.live-recipe{gap:6px;margin-bottom:12px}
.recipe-chip{min-height:50px;border-color:#7a634b;border-radius:8px;background:#3c3229;color:#d1bfa6;font-size:12px;padding:6px}
.recipe-chip small{font-size:10px;color:#cdb99c;letter-spacing:.02em}.recipe-chip[data-selected=true]{background:#5d4934;border-color:#c9a570;color:#ffe6bf}.recipe-chip[data-selected=true] small{color:#e0c6a0}
.photo-space{border-radius:12px;background:#302a25;overflow:hidden}
#design-photo{filter:none;opacity:1;mix-blend-mode:normal;object-fit:contain}
#photo-loading{background:#302a25;color:#fff0d7}
#photo-guidance{font-size:12px;color:#e4d2b8;margin-top:10px}
.viewer-actions{margin-top:10px}.download-design{min-height:46px;background:#e7c99c;color:#34291f;border:1px solid #e7c99c;box-shadow:none;border-radius:10px;font-size:14px;font-weight:600}
.download-design:hover:not(:disabled){background:#f4dab4;box-shadow:none}.download-design:disabled{opacity:1;background:#5e5141;border-color:#887359;color:#d6c5aa;cursor:default}
#enlarge-result{margin-bottom:7px}
#enlarge-result:not([hidden])+#download-design{background:#3e3329;border-color:#a88b63;color:#f3dfbf;font-weight:500}
#enlarge-result:not([hidden])+#download-design:hover:not(:disabled){background:#5b4631}
#start-again{min-height:44px;font-size:12px;background:#3e3329;color:#e7d2b4;border-color:#8a7153;border-radius:9px}
.design-compare{font-size:12px;color:#ffe0ad}
.guided-studio .studio-note{font-size:10px;color:#d5bea0;line-height:1.5;text-shadow:none}
.guided-studio button:focus-visible{outline:3px solid #ffe6bc;outline-offset:2px}
@media(max-width:700px){
 body.guided-studio{padding:7px;gap:8px}.guided-studio .header{height:38px;min-height:38px;--header-height:38px;padding:2px 3px}.guided-studio .brand img{height:27px;width:27px}.guided-studio .brand h1{font-size:17px;letter-spacing:.12em}.guided-studio .brand{gap:9px}
 .design-workspace{grid-template-columns:clamp(136px,40vw,230px) minmax(0,1fr);gap:7px}
 .design-sidebar{padding:11px 7px;border-radius:12px}.sidebar-heading h2{font-size:17px;line-height:1.25}.sidebar-heading h2 br{display:none}.journey-status{font-size:11px;line-height:1.4;min-height:30px}.journey-meter{margin-bottom:12px}
 .accordion{gap:7px}.step-toggle{grid-template-columns:19px minmax(0,1fr) 9px;gap:5px;min-height:58px;padding:10px 5px}.step-number{height:19px;width:19px;font-size:10px}.step-copy strong{font-size:12px}.step-value{font-size:11px;margin-top:4px}.step-chevron{font-size:13px}
 .step-options{padding:0 5px 8px;gap:6px}.step-choice{font-size:11px;min-height:44px;padding:7px 5px;gap:5px}.step-choice svg{width:24px;height:24px;flex-shrink:0}
 .step-help{padding:8px 6px;margin-bottom:3px;font-size:11px;line-height:1.5}
 .design-viewer{padding:8px 5px;border-radius:12px}.photo-caption{font-size:11px;padding-bottom:9px}#photo-mode{font-size:10px}.live-recipe{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-bottom:8px}.recipe-chip{min-height:45px;font-size:10px;padding:5px 2px}.recipe-chip small{font-size:9px}.recipe-chip svg{display:none}.photo-space{border-radius:8px}
 #photo-guidance{font-size:11px;line-height:1.4;min-height:32px;padding:0 2px}.viewer-actions{margin-top:8px}.download-design{font-size:12px;min-height:46px;padding:9px 5px}.viewer-secondary{flex-direction:column;gap:5px}#start-again,.design-compare{font-size:11px;min-height:44px}.guided-studio .studio-note{font-size:9px;line-height:1.4;max-width:460px}
}
@media(max-width:350px){.design-workspace{grid-template-columns:130px minmax(0,1fr);gap:5px}.design-sidebar{padding-inline:5px}.step-choice{font-size:10.5px}.step-choice svg{width:20px}.sidebar-heading h2{font-size:15px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Learning layout: the current choice and the complete section stay readable. */
[hidden]{display:none!important}
#step-shortcuts{display:none}
.recipe-summary{width:100%;max-width:700px;align-self:center;flex-shrink:0;margin:0 0 10px}
.recipe-summary summary{cursor:pointer;padding:10px 4px;font-size:13px;color:#f3dfbf;min-height:42px}
.recipe-summary .live-recipe{margin:8px 0 0}
.view-switch{display:flex;width:100%;max-width:500px;align-self:center;box-sizing:border-box;gap:4px;padding:4px;background:#302a25;border:1px solid #8c7356;border-radius:10px;flex-shrink:0;margin-top:10px}
.view-switch button{flex:1;min-height:42px;border:0;background:transparent;color:#f0ddc4;border-radius:7px;font-size:13px}
.view-switch button[aria-pressed=true]{background:#e7c99c;color:#32271e}
.view-switch button:disabled{opacity:.4}
.draft-status{font-size:11px;line-height:1.5;color:#e0cdb4;text-align:center;min-height:0;margin:8px 0 0;flex-shrink:0}
.draft-status:empty{display:none}
#undo-design{min-height:44px;line-height:1.4}
.step-heading{display:flex;align-items:center}.step-toggle{flex:1;min-width:0}.step-help-action{display:none}
.step-help-dialog{width:min(360px,calc(100vw - 28px));max-height:calc(100dvh - 28px);box-sizing:border-box;padding:22px;border:1px solid #b0936c;border-radius:16px;background:#40362e;color:#fff0d7}
.step-help-dialog h2{font-size:21px;font-weight:500;margin:0 0 12px}.step-help-dialog p{font-size:15px;line-height:1.6;margin:0 0 20px}
.step-help-dialog button{width:100%;min-height:44px;border:1px solid #e7c99c;border-radius:9px;background:#e7c99c;color:#32271e;font-size:14px}
.step-help-dialog::backdrop{background:#17120ddb}
/* One ordered accordion on the left; the full section remains visible on the right. */
@media(max-width:700px), (max-height:500px) and (max-width:1000px){
 html{height:100%;overflow:hidden;overscroll-behavior:none}
 body.guided-studio{height:100dvh;min-height:0;box-sizing:border-box;overflow:hidden;padding:0 6px 6px;gap:5px}
 .guided-studio .header{height:28px;min-height:28px;padding:0 3px;--header-height:28px}
 .guided-studio .brand img{width:24px;height:24px}.guided-studio .brand h1{font-size:16px}
 html[data-embedded=true] .guided-studio .header{display:none}
 .design-workspace{display:grid;grid-template-columns:clamp(144px,43vw,225px) minmax(0,1fr);flex:1;min-height:0;gap:6px;overflow:hidden}
 .design-sidebar{padding:10px 6px;overflow:hidden;border-radius:12px;background:#40362eef}
 .sidebar-heading,.recipe-summary,#step-shortcuts{display:none}
 .journey-status{font-size:11px;line-height:1.3;min-height:0;margin:0 1px 7px;color:#f2dfc3}
 .journey-meter{height:2px;margin-bottom:9px}
 .accordion{gap:5px}
 .design-step{border-radius:8px}
 .step-toggle{min-height:45px;padding:6px 5px;grid-template-columns:18px minmax(0,1fr) 9px;gap:5px}
 .step-number{width:18px;height:18px;font-size:9px}
 .step-copy strong{font-size:12px;line-height:1.2;font-weight:500}
 .step-value{font-size:10px;line-height:1.2;margin-top:3px}
 .design-step:not([data-state=done]) .step-value{display:none}
 .step-chevron{font-size:12px}
 .step-help{display:none}
 .step-help-action{display:none;width:26px;min-width:26px;min-height:32px;margin-right:2px;padding:3px;border:0;border-radius:6px;background:transparent;color:#ffe0ae;font-size:14px}
 [data-active=true] .step-help-action{display:block}
 [data-active=true] .step-toggle{grid-template-columns:18px minmax(0,1fr)}
 [data-active=true] .step-chevron{display:none}
 .step-options{grid-template-columns:1fr;gap:4px;padding:0 4px 5px}
 [data-key=base] .step-options,[data-key=end] .step-options{grid-template-columns:1fr}
 .step-choice{justify-content:flex-start;gap:6px;min-width:0;min-height:38px;padding:5px 7px;font-size:11px;line-height:1.2;text-align:center;overflow-wrap:break-word}
 .step-choice span{min-width:0;overflow-wrap:anywhere}
 .step-choice svg{width:22px;height:18px;flex-shrink:0}
 [data-key=pattern] .step-choice,[data-key=zigzag] .step-choice{flex-direction:row;gap:6px;padding:5px 7px;min-height:40px}
 .step-choice[aria-pressed=true]::after{display:none}
 .design-viewer{padding:8px 5px;border-radius:12px;background:#4a4037d9;gap:0}
 .photo-caption{display:block;flex:none;min-height:31px;padding:0 0 6px;font-size:11px;text-align:center}
 #photo-mode{font-size:10px;line-height:1.3;margin-top:3px}
 .photo-space{flex:1;min-height:0;border-radius:8px;background:#29241f}
 #design-photo{width:100%;height:100%;object-fit:contain}
 #photo-guidance{font-size:11px;line-height:1.35;min-height:0;margin:7px 0 0;padding:0 2px}
 .view-switch{flex:none;align-self:stretch;max-width:none;margin:6px 0 0;padding:2px;gap:2px;border-radius:7px}
 .view-switch button{min-width:0;min-height:32px;padding:4px 1px;font-size:10px;line-height:1.2;border-radius:5px;overflow-wrap:break-word}
 .view-switch button[data-view=result]:disabled{display:none}
 .viewer-actions{flex:none;max-width:none;margin:7px 0 0}
 .download-design{min-height:42px;padding:7px 4px;font-size:11px;line-height:1.3;border-radius:8px}
 #enlarge-result{margin-bottom:5px}
 .viewer-secondary{flex-direction:column;gap:2px;margin-top:3px}
 #start-again,#undo-design{min-height:32px;margin:0;padding:5px 2px;font-size:10px;line-height:1.3;background:transparent;border:0;text-decoration:underline;text-underline-offset:3px}
 .draft-status[data-persistent=true]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 .draft-status{font-size:10px;line-height:1.3;margin:4px 0 0}
 .design-error{font-size:10px;line-height:1.3;padding:5px;margin:4px 0 0;flex:none}
 .guided-studio .studio-note{flex:none;font-size:9px;line-height:1.3;margin:0;padding:0 3px;max-width:none;color:#fff1db}
}
/* Compact spacing is based on the space left after the Connect banner. */
@media(max-width:700px) and (max-height:540px){
 .design-sidebar{padding:6px 5px}.journey-status{font-size:10px;margin-bottom:5px}.journey-meter{margin-bottom:6px}
 .accordion{gap:2px}.step-toggle{min-height:36px;padding:4px;gap:4px}.step-copy strong{font-size:11px}.step-value{font-size:10px;margin-top:2px}
 .step-options{gap:3px;padding:0 3px 4px}.step-choice{min-height:30px;padding:4px 2px;font-size:10px}
 [data-key=pattern] .step-choice,[data-key=zigzag] .step-choice{min-height:30px;padding:3px 4px}.step-choice svg{width:20px;height:14px}
 .design-viewer{padding:6px 4px}.photo-caption{font-size:10px}.download-design{min-height:38px;font-size:10px}
 #photo-guidance{font-size:10px;margin-top:5px}.viewer-actions{margin-top:5px}
}
@media(max-width:499px) and (max-height:470px){
 .step-toggle{min-height:33px;padding:3px 4px}.step-copy strong{font-size:10.5px}.step-value{font-size:9px;margin-top:1px}
 .step-choice,[data-key=pattern] .step-choice,[data-key=zigzag] .step-choice{min-height:28px;padding:3px 4px}
 .guided-studio .studio-note{display:none}
}
@media(max-width:499px) and (max-height:410px){
 .design-sidebar{padding:5px 4px}.journey-status{font-size:9px;margin-bottom:3px}.journey-meter{margin-bottom:4px}
 .step-toggle{min-height:30px;padding:2px 3px}
 .step-choice,[data-key=pattern] .step-choice,[data-key=zigzag] .step-choice{min-height:25px;padding:2px 3px;font-size:9px}
}
@media(max-height:500px) and (min-width:500px) and (max-width:1000px){
 body.guided-studio{padding-top:5px}
 .design-workspace{grid-template-columns:clamp(305px,52vw,440px) minmax(0,1fr);gap:7px}
 .design-sidebar{padding:6px}.journey-status,.journey-meter,.guided-studio .studio-note{display:none}
 .accordion{gap:3px}.step-toggle{min-height:34px;padding:3px 5px;grid-template-columns:18px minmax(0,1fr) 9px}
 .step-copy{display:flex;align-items:center;justify-content:space-between;gap:8px}.step-copy strong{font-size:11px}.step-value{font-size:10px;margin:0;text-align:right}
 .step-options,[data-key=base] .step-options,[data-key=end] .step-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:0 4px 4px}
 [data-key=base] .step-options,[data-key=end] .step-options{grid-template-columns:repeat(3,minmax(0,1fr))}
 [data-key=zigzag] .step-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 [data-key=spacing] .step-options{grid-template-columns:repeat(4,minmax(0,1fr))}
 .step-choice,[data-key=pattern] .step-choice,[data-key=zigzag] .step-choice{justify-content:center;gap:2px;min-height:36px;padding:3px 1px;font-size:10px}
 [data-key=pattern] .step-choice,[data-key=zigzag] .step-choice{flex-direction:column}.step-choice svg{height:14px}
 .photo-caption{display:flex;justify-content:space-between;min-height:0;padding-bottom:4px}#photo-mode{margin:0}
 #photo-guidance{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 .view-switch{margin-top:4px}.view-switch button{min-height:28px}
 .viewer-actions{margin-top:4px;display:grid;grid-template-columns:1fr 1fr;gap:4px}.viewer-secondary{display:contents}
 .download-design,#enlarge-result,#start-again,#undo-design{min-height:32px;margin:0;font-size:10px;padding:4px}
}

/* A larger, unlabelled photo and a fixed, compact area for reviewing the design. */
.design-viewer{padding:0;border:0;border-radius:0;background:transparent}
.photo-caption{display:none}
.photo-stage{flex:0 1 auto;width:100%;aspect-ratio:858/1536;min-width:0;min-height:0;container-type:size;display:flex;align-items:flex-start;justify-content:center}
.photo-stage .photo-space{flex:none;width:min(100cqw,calc(100cqh * 858 / 1536));height:auto;aspect-ratio:858/1536;max-width:100%;max-height:100%;background:transparent}
.viewer-controls{position:relative;flex:0 0 148px;min-width:0;width:100%;max-width:500px;align-self:center;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px 100px;gap:4px;margin-top:4px}
.viewer-controls #photo-guidance,.viewer-controls .draft-status[data-persistent=true]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.selection-summary{grid-row:1;grid-column:1;align-self:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;margin:0;padding:0;text-align:center;color:#fff4de}
.selection-card{min-width:0;display:flex;align-items:center;justify-content:center;gap:3px;padding:0 3px;border:1px solid #c9a570;border-radius:5px;background:linear-gradient(135deg,#725937,#44372b);font-size:10px;line-height:1.05}
.selection-card-title{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
.selection-card-value{min-width:0;overflow-wrap:anywhere}
.selection-card-icon{flex:0 0 22px;display:flex;color:#f4d9a7}.selection-card-icon svg{display:block;width:22px;height:16px}
.viewer-controls .view-switch{grid-row:1;grid-column:1;width:100%;height:100%;margin:0}
.viewer-controls .viewer-actions{grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:48px 48px;gap:4px;margin:0}
.viewer-controls .download-design{width:100%;min-width:0;height:100%;min-height:0;margin:0}
.viewer-controls #generate-result{grid-row:1;grid-column:1/-1}
.viewer-controls #enlarge-result{grid-row:1;grid-column:1}
.viewer-controls #download-design{grid-row:1;grid-column:2}
.viewer-controls .viewer-secondary{display:contents}
.viewer-controls #start-again,.viewer-controls #undo-design{grid-row:2;grid-column:1/-1;min-height:0;margin:0}
body[data-undo=true] .viewer-controls #start-again{grid-column:1}
body[data-undo=true] .viewer-controls #start-again:not([hidden])+#undo-design{grid-column:2}
.viewer-controls .design-error:not([hidden]),.viewer-controls .draft-status:not([data-persistent=true]){position:absolute;bottom:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;background:#40362e;border-radius:6px;z-index:2}
@media(max-width:700px), (max-height:500px) and (max-width:1000px){
 .design-workspace{grid-template-columns:clamp(134px,36vw,200px) minmax(0,1fr)}
 .step-copy{min-width:0}.step-copy strong{overflow-wrap:anywhere}
 .design-viewer{padding:0;border:0;background:transparent}
 .viewer-controls{flex-basis:124px;grid-template-rows:44px 76px;gap:4px;margin-top:4px}
 .viewer-controls .viewer-actions{grid-template-rows:40px 32px;gap:4px}
 .viewer-controls .view-switch{padding:2px}.viewer-controls .view-switch button{min-height:0;padding:3px;font-size:11px;line-height:1.1}
 .viewer-controls .download-design{font-size:11px;line-height:1.2;padding:3px 2px;overflow-wrap:normal}
 .viewer-controls #start-again,.viewer-controls #undo-design{font-size:9px;padding:1px;line-height:1.1;background:transparent;border:0}
 .selection-card{font-size:9px;line-height:1.05;padding:0 2px;gap:2px}
 .selection-summary{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.2fr)}
 .selection-card-icon+.selection-card-value{word-break:break-all}
}
@media(max-width:700px) and (max-height:540px){
 .viewer-controls .download-design{font-size:9px;line-height:1.1;padding:2px}
 .selection-card{font-size:8px;line-height:1.05;padding:0 1px}
 .selection-card-icon{flex-basis:18px}.selection-card-icon svg{width:18px;height:14px}
}
@media(max-height:500px) and (min-width:500px) and (max-width:1000px){
 .design-workspace{grid-template-columns:clamp(305px,52vw,440px) minmax(0,1fr)}
 .viewer-controls{flex-basis:80px;grid-template-rows:36px 40px;gap:4px}
 .selection-card{font-size:8px;line-height:1}
 .selection-card-icon{flex-basis:18px}.selection-card-icon svg{width:18px;height:12px}
 .viewer-controls .viewer-actions{grid-row:2;display:flex;align-items:stretch;gap:4px;max-width:none}
 .viewer-controls .viewer-actions>button,.viewer-controls #start-again,.viewer-controls #undo-design{flex:1;min-width:0;height:40px;min-height:0;font-size:9px;line-height:1.1;padding:2px}
 .viewer-controls .viewer-actions>button{width:auto}
}