/* Standalone host only; the approved editor and its rendering remain intact. */
html[data-iris-area=design],html[data-iris-area=design] body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#827265}
html[data-iris-area=design] .shell{height:100dvh;min-height:0;max-width:1320px;display:flex;flex-direction:column;padding:12px 20px 10px;box-sizing:border-box}
html[data-iris-area=design] .hero{flex:none;height:clamp(150px,17dvh,184px);min-height:0;aspect-ratio:auto}
html[data-iris-area=design] #design-area{display:flex;flex-direction:column;flex:1;min-height:0;padding:0}
html[data-iris-area=design] .design-frame{display:flex;flex:1;min-height:0;margin:0;border:0;border-radius:14px;background:linear-gradient(#82726555,#59463866),url('assets/iris-design-scene-clean.webp') center/cover;box-shadow:none}
html[data-iris-area=design] .design-frame iframe{display:block;flex:1;width:100%;height:100%;min-height:0;border:0;background:transparent}
.standalone-tools{display:flex;flex:none;align-items:center;justify-content:space-between;height:46px;padding:0 5px;gap:12px;color:#fff1dc}
.standalone-help{background:none;border:0;color:inherit;font-size:12px;padding:8px 0;min-height:34px}
.standalone-help span{margin-left:5px}
.standalone-tools select{font-family:inherit;font-size:12px;min-height:32px;border:1px solid #bba080;background:#40362e;color:#fff1dc;border-radius:8px;padding:5px 9px;max-width:145px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#design-help-dialog{width:min(510px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;border:1px solid #b0936c;border-radius:18px;background:#40362e;color:#fff0d7;padding:24px;font-size:13px;line-height:1.5}
#design-help-dialog::backdrop{background:#21170fc9}
#design-help-dialog h2{font-size:23px;font-weight:500;margin:0 0 18px}
#design-help-dialog ol{padding-left:23px;margin:0}
#design-help-dialog li{margin-bottom:12px;padding-left:5px}
#design-help-dialog p{margin:3px 0 12px;color:#e5d2b9}
#design-help-dialog button{width:100%;min-height:42px;border:1px solid #e7c99c;border-radius:9px;padding:8px;background:#e7c99c;color:#32271e;font-size:13px;margin-top:8px}
#design-help-dialog #resume-design{background:transparent;color:#f4debc}
@media(max-height:850px) and (min-width:1001px){html[data-iris-area=design] .shell{max-width:1140px}}
@media(max-width:700px), (max-height:500px) and (max-width:1000px){
 html[data-iris-area=design] .shell{max-width:none;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
 html[data-iris-area=design] .hero{height:clamp(88px,14dvh,118px);margin:6px 6px 0;width:calc(100% - 12px)}
 html[data-iris-area=design] .design-frame{border-radius:0}
 .standalone-tools{height:38px;padding:0 10px;gap:8px}
 .standalone-help{font-size:11px;min-height:32px}
 .standalone-tools select{font-size:10px;min-height:28px;padding:4px 6px;max-width:115px}
}
/* Keep the light arcs in view below the photo on narrow, tall screens.
   The scene retains its proportions and the desktop tint. */
@media(max-width:700px) and (orientation:portrait){
 html[data-iris-area=design] .design-frame{background-size:cover,auto 140%;background-position:center,75% top;background-repeat:no-repeat}
}
@media(max-height:500px) and (min-width:500px) and (max-width:1000px){
 html[data-iris-area=design] .hero{height:62px;margin-top:4px}
 .standalone-tools{position:absolute;z-index:2;right:15px;top:18px;height:32px;padding:0;gap:12px}
 .standalone-tools select{max-width:100px}
 .standalone-help{font-size:10px}
}