/* Desktop Design only. The approved mobile styles are intentionally unchanged. */
html[data-iris-area=design]{scroll-padding-top:0}
html[data-iris-area=design] body{background:#827265}
html[data-iris-area=design] .ambient{background:#827265}
html[data-iris-area=design] .shell{position:relative;display:flex;flex-direction:column;width:100%;max-width:1320px;height:100dvh;min-height:900px;box-sizing:border-box;padding:12px 20px 10px}
html[data-iris-area=design] .topline{position:absolute;z-index:3;right:40px;top:24px;height:auto;min-height:0;padding:0}
html[data-iris-area=design] .topline>span{display:none}
html[data-iris-area=design] .top-actions{gap:14px}
html[data-iris-area=design] .language-picker>span{display:none}
html[data-iris-area=design] .language-picker select{min-height:34px;padding:5px 28px 5px 12px;background:#40362edb;border-color:#af9577;color:#fff0da;font-size:11px}
html[data-iris-area=design] .top-actions .text-button{color:#fff0da;font-size:11px}
html[data-iris-area=design] .hero{flex:none;height:clamp(158px,17dvh,184px);min-height:0;aspect-ratio:auto;border-radius:16px;box-shadow:none}
html[data-iris-area=design] .hero-panorama{object-position:left 50%}
html[data-iris-area=design] .hero-content{margin-left:27%;padding:14px 0 0}
html[data-iris-area=design] .hero h1{font-size:32px;line-height:1.1;margin:6px 0 9px}
html[data-iris-area=design] .hero .eyebrow{font-size:9px;margin:0}
html[data-iris-area=design] .hero-content>p:last-child{font-size:12px;margin:0}
html[data-iris-area=design] .trial-badge{display:none}
html[data-iris-area=design] .area-switch{flex:none;min-height:44px;margin-top:10px;padding:4px;gap:4px;border:1px solid #baa08455;border-radius:11px;background:#40362e}
html[data-iris-area=design] .area-switch button{min-height:36px;padding:6px 14px;font-size:12px;color:#eadcc9;border-radius:7px}
html[data-iris-area=design] .area-switch button span{color:#baa58c;font-size:10px}
html[data-iris-area=design] .area-switch button:hover{background:#64503d;color:#fff1df}
html[data-iris-area=design] .area-switch button[aria-pressed=true]{background:#e7c99c;border-color:#e7c99c;color:#38291d;box-shadow:none}
html[data-iris-area=design] .area-switch button[aria-pressed=true] span{color:#705334}
html[data-iris-area=design] .journey-note,html[data-iris-area=design] .shell>footer{display:none}
html[data-iris-area=design] #design-area{flex:1;min-height:0;display:flex;flex-direction:column;padding-top:8px}
html[data-iris-area=design] .design-heading{flex:none;min-height:30px;margin:0 0 6px;gap:12px;align-items:center}
html[data-iris-area=design] .design-heading .eyebrow,html[data-iris-area=design] .design-heading>div>p{display:none}
html[data-iris-area=design] .design-heading h2{margin:0;font-size:15px;font-weight:500;letter-spacing:0;color:#fff0dc}
html[data-iris-area=design] #back-training{min-height:30px;padding:3px 0 3px 10px;border:0;background:transparent;color:#fff0dc;font-size:11px}
html[data-iris-area=design] .design-frame{display:flex;flex:1;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none}
html[data-iris-area=design] .design-frame iframe{flex:1;height:100%;min-height:0;background:transparent}
html[data-iris-area=design] .design-language-note,html[data-iris-area=design] .design-disclaimer{display:none}
html[data-iris-area=design] .practice-note{flex:none;flex-direction:row;align-items:center;gap:12px;margin:0 0 6px;padding:6px 12px;border-color:#b79b7455;background:#493b30;color:#fff0d7}
html[data-iris-area=design] .practice-note>strong{display:none}
html[data-iris-area=design] .practice-note p{font-size:12px;line-height:1.4}
html[data-iris-area=design] .practice-note button{min-height:30px;padding:4px;color:#ffe0ae;font-size:11px}
/* Keep the editor close to the panorama and use the original warm scene. */
html[data-iris-area=design] .shell{min-height:740px}
html[data-iris-area=design] .design-heading{position:absolute;right:40px;top:calc(12px + clamp(158px,17dvh,184px) - 38px);margin:0;z-index:2}
html[data-iris-area=design] .design-heading>div{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
html[data-iris-area=design] .design-frame{border-radius:14px;background:linear-gradient(#82726555,#59463866),url('assets/iris-design-scene-clean.webp') center/cover}
@media(max-height:850px){
 html[data-iris-area=design] .shell{max-width:1140px}
 html[data-iris-area=design] .hero{height:150px}
 html[data-iris-area=design] .design-heading{top:124px}
 html[data-iris-area=design] .hero h1{font-size:28px}
}
@media(max-width:1100px){html[data-iris-area=design] .shell{min-height:820px}}