.style-panel{width:min(1040px,calc(100vw - 48px));height:calc(100dvh - 48px);max-height:920px;max-width:none;padding:0;border:1px solid #fff;border-radius:22px;background:#f6f6f6;box-shadow:0 0 0 1px #00000018,0 20px 70px #0003;overflow:hidden;color:#171717}
.style-panel::backdrop{background:#0004}
.style-panel[open]{display:flex;flex-direction:column}
.style-panel>header{display:flex;align-items:center;gap:16px;min-height:70px;padding:12px 16px 12px 24px;background:#ffffffea;border-bottom:1px solid #ddd;flex:none}
.style-panel>header>strong{font-size:14px;font-weight:500;flex:1}
.style-panel .house-switch button{min-height:44px}
.style-panel-close{font:22px/1 Selecta,system-ui;width:44px;height:44px;border-radius:14px;flex:none;background:linear-gradient(#fff,#f6f6f6);border:1px solid #ddd;box-shadow:inset 0 1px #fff,0 1px 2px #0000000a;color:#333}
.style-panel>iframe{width:100%;min-height:0;flex:1;border:0;background:#f6f6f6}
html[data-study],html[data-study] body{height:auto;min-height:100%;overflow:auto;background:#f6f6f6}
html[data-study] #app{height:auto;min-height:100dvh;display:block}
.study-toolbar{display:flex;flex-wrap:wrap;align-items:end;justify-content:center;gap:16px;padding:16px;border-bottom:1px solid #ddd;background:#fafafa}
.study-toolbar label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#555}
.study-toolbar select{min-height:44px;max-width:180px;background:linear-gradient(#fff,#f7f7f7);box-shadow:inset 0 1px #fff,0 1px 2px #00000008;border:1px solid #d7d7d7;border-radius:12px;color:#222;font-size:13px}
.study-toolbar .segmented button{min-height:44px;min-width:64px}
.study-stage{display:flex;align-items:start;justify-content:center;padding:28px 20px;min-height:290px}
.study-stage .full-app-frame{width:min(100%,320px,calc(max(440px,100dvh - 210px)*402/874))}
.study-stage .design-preview{justify-content:center}
.study-references{border-top:1px solid #ddd;padding:0 20px;background:#fafafa}
.study-references>summary{min-height:48px;padding:15px 0;font-size:12px;cursor:pointer}
.study-references .style-reference-grid,.study-authored .style-reference-grid{grid-template-columns:repeat(auto-fit,235px);justify-content:center;max-width:none;padding:22px 0;gap:18px}
.study-guidance{font-size:12px;line-height:1.55;color:#555;max-width:580px;margin:0 auto;padding:16px 20px 24px}
.study-authored .study-guidance{padding-top:0}
html[data-study] .square-widget:focus-visible{outline:2px solid #246bfe;outline-offset:3px}
.style-panel button:focus-visible,.study-toolbar :is(button,select):focus-visible,.study-references>summary:focus-visible{outline:2px solid #246bfe;outline-offset:3px}
@media(max-width:600px){.style-panel{width:100vw;height:100dvh;max-height:none;margin:0;border:0;border-radius:0}.style-panel>header{padding:12px;gap:10px}.style-panel>header>strong{font-size:12px}.style-panel .house-switch button{padding-inline:10px;min-width:0}.study-toolbar{gap:12px}.study-toolbar label{flex:1;min-width:120px}.study-toolbar select{max-width:none;width:100%;font-size:16px}.study-toolbar .segmented{margin-left:auto}.study-stage{padding:20px 16px}.study-references{padding-inline:16px}}
@media(prefers-reduced-transparency:reduce){.style-panel>header{background:#fff}.style-panel::backdrop{background:#0008}}
@media(forced-colors:active){.style-panel,.style-panel-close{border:1px solid ButtonText;background:Canvas;color:CanvasText}.style-panel::backdrop{background:Canvas}}