/* Full-body alternatives are opt-in; the original B2 URL stays reproducible. */
html[data-layout] .shell{max-width:1280px}
html[data-layout] .top{border-bottom:1px solid #d3d9d0}
html[data-layout] .reception{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1fr);gap:48px;padding-top:32px;align-items:start}
html[data-layout] .person{position:sticky;inset:auto;top:24px;height:auto;background:none}
html[data-layout] .avatar-stage{width:100%;height:600px;background:#e9e5dd}
html[data-layout] .avatar-stage img{object-fit:contain}
html[data-layout] .introduction{position:static;max-width:none;margin-top:16px}
html[data-layout] .introduction h1{font-size:26px}
html[data-layout] .introduction .eyebrow{letter-spacing:.06em}
html[data-layout] .workspace{width:100%;max-width:none;margin:0;padding:100px 0 0}
html[data-layout] .desk{padding:28px;box-shadow:none}
html[data-layout] .welcome{font-size:25px}
html[data-layout] .desk .hint,html[data-layout] .desk .notice{font-size:12px}
html[data-layout] .desk .conversation{height:150px;min-height:150px;max-height:150px}
html[data-layout] .desk fieldset{margin:16px 0}
html[data-layout] .desk .choices button{font-size:14px}
html[data-layout] .desk .bar h2{font-size:17px}
html[data-layout] .desk label,html[data-layout] .desk legend{font-size:13px}
html[data-layout] .continuation{margin-top:32px}
/* 2: a shared stage; the speech box points toward the full standing character. */
html[data-layout="2"] .reception{background:#e9e5dd;padding:32px;gap:48px;grid-template-columns:minmax(280px,.65fr) minmax(0,1fr)}
html[data-layout="2"] .workspace{padding-top:70px}
html[data-layout="2"] .desk{border:0;background:transparent;padding:0}
html[data-layout="2"] .welcome,html[data-layout="2"] .conversation{background:#fbfaf5;padding:24px;position:relative;border-radius:12px}
html[data-layout="2"] .welcome:before,html[data-layout="2"] .conversation:before{content:"";position:absolute;left:-14px;top:32px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:16px solid #fbfaf5}
html[data-layout="2"] .continuation{padding:24px}
/* 3: a writing desk with a smaller companion standing beside the page. */
html[data-layout="3"] .reception{grid-template-columns:minmax(0,1fr) 300px;gap:64px;padding:56px 40px 0}
html[data-layout="3"] .person{grid-column:2;grid-row:1}
html[data-layout="3"] .avatar-stage{height:450px}
html[data-layout="3"] .workspace{grid-column:1;grid-row:1;padding:0}
html[data-layout="3"] .desk{border:0;border-top:3px solid #2d6358;border-bottom:1px solid #c7cec5;padding:32px 0}
html[data-layout="3"] .introduction h1{font-size:21px}
html[data-layout="3"] .desk .conversation{height:210px;max-height:210px}
@media(max-width:1000px){
 html[data-layout] .shell{padding:0 16px 32px}
 html[data-layout] .top{height:48px;min-height:48px;font-size:12px}
 html[data-layout] .brand{width:110px}
 html[data-layout] .reception{display:block;padding:12px 0 0}
 html[data-layout] .person{position:static;height:auto;margin:0;background:#e9e5dd}
 html[data-layout] .avatar-stage{width:156px;height:240px;margin:auto}
 html[data-layout] .introduction{display:none}
 html[data-layout] .workspace{padding:12px 0 0}
 html[data-layout] .desk{padding:14px}
 html[data-layout] .mobile-greeting{font-size:18px;margin:0 0 6px}
 html[data-layout] .welcome{font-size:18px}
 html[data-layout] .entry-choices{margin:12px 0;gap:5px}
 html[data-layout] .entry-choices button{font-size:13px}
 html[data-layout] .desk .hint{font-size:12px;line-height:1.5}
 html[data-layout] .desk .conversation{height:64px;min-height:64px;max-height:64px}
 html[data-layout] .desk fieldset{margin:8px 0}
 html[data-layout] .desk .choices button{font-size:12px;padding:5px}
 html[data-layout] .desk .bar h2{font-size:14px}
 html[data-layout] .desk legend,html[data-layout] .desk label{font-size:12px}
 html[data-layout] .desk textarea{height:44px;min-height:44px}
 html[data-layout] .continuation{margin-top:24px}
 html[data-layout="2"] .reception{padding:0;background:none;position:relative}
 html[data-layout="2"] .person{position:absolute;top:12px;left:0;width:140px;background:none}
 html[data-layout="2"] .avatar-stage{width:140px;height:246px}
 html[data-layout="2"] .workspace{padding-top:0}
 html[data-layout="2"] .desk{padding:272px 0 0;background:none;border:0}
 html[data-layout="2"] .mobile-greeting{position:absolute;left:154px;right:0;top:30px;font-size:20px}
 html[data-layout="2"] .welcome{position:absolute;left:154px;right:0;top:100px;margin:0;padding:16px;font-size:17px}
 html[data-layout="2"] .desk .bar{position:absolute;left:154px;right:0;top:14px}
 html[data-layout="2"] #status{position:absolute;left:154px;right:0;top:55px}
 html[data-layout="2"] .desk .conversation{position:absolute;left:154px;right:0;top:96px;height:152px;min-height:152px;max-height:152px;padding:12px;background:#f0f2ea;border-radius:8px}
 html[data-layout="2"] .conversation:before{border-right-color:#f0f2ea}
 html[data-layout="2"] .continuation{padding:16px 0}
 html[data-layout="3"] .reception{position:relative;padding:0}
 html[data-layout="3"] .person{position:absolute;right:0;top:12px;width:120px;background:none}
 html[data-layout="3"] .avatar-stage{height:190px;width:120px}
 html[data-layout="3"] .workspace{padding:0}
 html[data-layout="3"] .desk{padding:220px 0 16px;border-top:0}
 html[data-layout="3"] .mobile-greeting{position:absolute;left:0;right:138px;top:28px;font-size:22px}
 html[data-layout="3"] .welcome{position:absolute;left:0;right:138px;top:106px;font-size:17px}
 html[data-layout="3"] .desk .bar{position:absolute;top:14px;left:0;right:138px}
 html[data-layout="3"] #status{position:absolute;top:48px;left:0;right:138px}
 html[data-layout="3"] .desk .conversation{position:absolute;top:80px;left:0;right:138px;height:126px;min-height:126px;max-height:126px;border-top:1px solid #c7cec5;padding-top:8px}
}
/* Drawing pass 1: the notebook must not paint over the reserved companion area. */
html[data-layout="3"] .desk{background:transparent}
@media(max-width:1000px){
 html[data-layout="2"] .welcome{background:#f0f2ea}
 html[data-layout="2"] .welcome:before{border-right-color:#f0f2ea}
 html[data-layout="2"] .mobile-greeting,html[data-layout="3"] .mobile-greeting{font-size:18px}
 html[data-layout="1"] .avatar-stage{height:220px;width:143px}
 html[data-layout="1"] .desk{padding:12px}
}

@media(min-width:701px) and (max-width:1000px){html[data-layout] .shell{max-width:560px}html[data-layout] .mobile-greeting{display:block}html[data-layout] .desk .notice{display:none}html[data-layout] .entry-choices button{font-size:14px}html[data-layout] .person{display:block}}

@media(max-width:1000px){html[data-layout] .avatar-stage img{object-fit:cover}}
/* Drawing pass 2: keep complete phrases at the narrowest tested width. */
@media(max-width:1000px){
 html[data-layout="2"] .mobile-greeting{font-size:17px}
 html[data-layout="2"] .welcome{font-size:16px;padding:12px}
}
/* Long error status needs its own lines above the scrollable speech area. */
@media(max-width:1000px){
 html[data-layout="2"] .desk .conversation{top:124px;height:124px;min-height:124px;max-height:124px}
 html[data-layout="3"] .desk .conversation{top:112px;height:94px;min-height:94px;max-height:94px}
}

/* A real speech column lets status text take its natural height, without overlap. */
.speech-region{display:contents}
@media(max-width:1000px){
 html[data-layout="2"] .speech-region,html[data-layout="3"] .speech-region{display:flex;flex-direction:column;gap:6px;position:absolute;top:14px;right:0;left:154px;height:234px}
 html[data-layout="3"] .speech-region{left:0;right:138px;height:192px}
 html[data-layout="2"] .speech-region .bar,html[data-layout="3"] .speech-region .bar{position:static;height:44px;flex:none}
 html[data-layout="2"] .speech-region #status,html[data-layout="3"] .speech-region #status{position:static;margin:0;flex:none}
 html[data-layout="2"] .speech-region .conversation,html[data-layout="3"] .speech-region .conversation{position:relative;inset:auto;flex:1;min-height:0;height:auto;max-height:none;width:100%}
}

/* HP-C26: six entries wrap within the existing speech column. */
html[data-layout] .entry-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-layout] .entry-choices button{min-width:0}
@media(max-width:1000px){
 html[data-layout="2"] .mobile-greeting{top:24px;display:flex;flex-wrap:wrap;line-height:1.5}
 html[data-layout="2"] .welcome{top:130px;display:flex;flex-wrap:wrap}
}