@media(min-width:901px){
/* This copy retains the editor's styles and recipes. Only its composition changes. */
html:has(body.standalone.layout-study:not([data-preview])){overflow-y:auto;scrollbar-gutter:auto}
body.standalone.layout-study:not([data-preview]){--u:min(1px,calc(100vw / 1451));--outer:calc(var(--u) * 74);--gutter:calc(var(--u) * 64)}
body.standalone.layout-study:not([data-preview]) .layout{grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);gap:var(--gutter);width:100%;max-width:1451px;min-height:100svh;margin:0 auto;padding:calc(var(--u) * 60) var(--outer) calc(var(--u) * 76);align-items:stretch;overflow:visible}
body.standalone.layout-study:not([data-preview]) .preview-pane{padding:0;height:auto;min-height:0;align-self:start;--portrait-width:100%}
body.standalone.layout-study:not([data-preview]) .intro{position:relative;width:100%;max-width:none;height:calc(var(--u) * 182);margin:0 0 calc(var(--u) * 26);padding-left:calc(var(--u) * 18)}
body.standalone.layout-study:not([data-preview]) .brand-row{height:calc(var(--u) * 78);gap:calc(var(--u) * 8)}
body.standalone.layout-study:not([data-preview]) .brand{gap:calc(var(--u) * 16);color:var(--accent);font-weight:400;white-space:nowrap}
body.standalone.layout-study:not([data-preview]) .brand-emblem{width:calc(var(--u) * 50);height:calc(var(--u) * 50);flex:none;font-size:calc(var(--u) * 25)}
body.standalone.layout-study:not([data-preview]) .studio-name{font:500 calc(var(--u) * 43)/1.2 'Noto Serif KR',serif;letter-spacing:.04em}
body.standalone.layout-study:not([data-preview]) .studio-description{font:400 calc(var(--u) * 15)/1.7 'Noto Serif KR',serif;letter-spacing:.05em;border-left:1px solid var(--line);padding-left:calc(var(--u) * 22);margin-left:calc(var(--u) * 4)}
body.standalone.layout-study:not([data-preview]) .archive-link{position:absolute;right:0;top:calc(var(--u) * 28);padding:0;font-size:calc(var(--u) * 10);letter-spacing:0}
body.standalone.layout-study:not([data-preview]) .character-switch{position:absolute;left:calc(var(--u) * 18);bottom:calc(var(--u) * 8);margin:0;padding:3px;gap:3px}
body.standalone.layout-study:not([data-preview]) .character-switch button{width:calc(var(--u) * 113);min-width:0;min-height:calc(var(--u) * 44);padding:calc(var(--u) * 8) calc(var(--u) * 12);font-size:clamp(8px,calc(var(--u) * 14),14px)}
body.standalone.layout-study:not([data-preview]) .portrait-frame{width:100%;margin:0;flex:none}
body.standalone.layout-study:not([data-preview]) .portrait-frame .artboard{width:100%;margin:0;padding:0}
body.standalone.layout-study:not([data-preview]) .canvas-wrap{width:100%;aspect-ratio:1}
body.standalone.layout-study:not([data-preview]) .art-caption,body.standalone.layout-study:not([data-preview]) .edition{display:none}
body.standalone.layout-study:not([data-preview]) .editor-pane{position:relative;top:auto;height:calc(100svh - var(--u) * 136);min-height:calc(var(--u) * 868);padding:calc(var(--u) * 20) 0 0;border:0;align-self:stretch;background:var(--panel)}
body.standalone.layout-study:not([data-preview]) .editor-pane::before{content:'';position:absolute;top:0;bottom:calc(var(--u) * -24);left:calc(var(--gutter) / -2);width:1px;background:var(--line);pointer-events:none}
body.standalone.layout-study:not([data-preview]) .editor-navigation{position:static;padding:0}
body.standalone.layout-study:not([data-preview]) .category-nav{margin:0 0 calc(var(--u) * 20)}
body.standalone.layout-study:not([data-preview]) .group-tab{flex-direction:row;min-height:calc(var(--u) * 48);gap:calc(var(--u) * 7);padding:calc(var(--u) * 7) calc(var(--u) * 6);font-size:clamp(6px,calc(var(--u) * 12),12px)}
body.standalone.layout-study:not([data-preview]) .group-tab svg{width:calc(var(--u) * 18);height:calc(var(--u) * 18)}
body.standalone.layout-study:not([data-preview]) .group-tab:not(:first-child)::before{height:calc(var(--u) * 12)}
body.standalone.layout-study:not([data-preview]) #subcategoryTabs{display:flex;flex-wrap:nowrap;width:100%;height:calc(var(--u) * 38);padding:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;mask-image:none}
body.standalone.layout-study:not([data-preview]) #subcategoryTabs .subcategory-tab{flex:1 0 auto;min-width:0;min-height:calc(var(--u) * 38);padding:calc(var(--u) * 8) calc(var(--u) * 7);font-size:clamp(6px,calc(var(--u) * 11),11px)}
body.standalone.layout-study:not([data-preview]) .tab-overflow-hint{display:none!important}
body.standalone.layout-study:not([data-preview]) .selection-summary{height:calc(var(--u) * 64);margin:calc(var(--u) * 68) 0 calc(var(--u) * 14);gap:calc(var(--u) * 8)}
body.standalone.layout-study:not([data-preview]) #categoryKicker{font-size:clamp(5px,calc(var(--u) * 8),8px)}
body.standalone.layout-study:not([data-preview]) h3{font-size:clamp(9px,calc(var(--u) * 20),20px);margin:calc(var(--u) * 4) 0 0}
body.standalone.layout-study:not([data-preview]) .category-title-row{gap:calc(var(--u) * 12)}
body.standalone.layout-study:not([data-preview]) .iris-side-controls{gap:calc(var(--u) * 4)}
body.standalone.layout-study:not([data-preview]) .iris-side-choice{min-height:calc(var(--u) * 28);padding:calc(var(--u) * 5);font-size:clamp(6px,calc(var(--u) * 11),11px)}
body.standalone.layout-study:not([data-preview]) .reset-position-button{font-size:clamp(6px,calc(var(--u) * 10),10px);padding:calc(var(--u) * 5);gap:calc(var(--u) * 4)}
body.standalone.layout-study:not([data-preview]) .reset-position-button svg{width:calc(var(--u) * 14);height:calc(var(--u) * 14)}
body.standalone.layout-study:not([data-preview]) .palette-section{height:calc(var(--u) * 64);margin:0 0 calc(var(--u) * 18);gap:calc(var(--u) * 15)}
body.standalone.layout-study:not([data-preview]) .palette-section[hidden]{display:flex!important;visibility:hidden;pointer-events:none}
body.standalone.layout-study:not([data-preview]) .section-label-row{font-size:clamp(5px,calc(var(--u) * 10),10px)}
body.standalone.layout-study:not([data-preview]) .color-palette{height:auto;min-height:0;padding:calc(var(--u) * 4);gap:calc(var(--u) * 10);overflow-x:auto;flex-wrap:nowrap;align-items:center;scrollbar-width:none}
body.standalone.layout-study:not([data-preview]) .color-swatch{width:calc(var(--u) * 24);height:calc(var(--u) * 24);border-width:calc(var(--u) * 3);flex-shrink:0}
body.standalone.layout-study:not([data-preview]) .color-palette .part-picker-toggle,body.standalone.layout-study:not([data-preview]) .color-palette .part-base-color{min-height:calc(var(--u) * 28);padding:calc(var(--u) * 4) calc(var(--u) * 8);font-size:clamp(5px,calc(var(--u) * 10),10px);line-height:1.5;gap:calc(var(--u) * 5)}
body.standalone.layout-study:not([data-preview]) .part-picker-toggle i{font-size:calc(var(--u) * 16)}
body.standalone.layout-study:not([data-preview]) .parts-scroll{height:auto;flex:1;min-height:0;padding:calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 8);margin-left:calc(var(--u) * -3);overflow:auto;scrollbar-gutter:auto}
body.standalone.layout-study:not([data-preview]) .parts-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u) * 10)}
body.standalone.layout-study:not([data-preview]) .part-card-number{top:calc(var(--u) * 7);left:calc(var(--u) * 8);font-size:clamp(5px,calc(var(--u) * 9),9px);padding:calc(var(--u) * 2) calc(var(--u) * 3)}
body.standalone.layout-study:not([data-preview]) .part-card-check{bottom:calc(var(--u) * 7);right:calc(var(--u) * 7);width:calc(var(--u) * 19);height:calc(var(--u) * 19);font-size:calc(var(--u) * 10)}
body.standalone.layout-study:not([data-preview]) .none-card svg{width:calc(var(--u) * 30);height:calc(var(--u) * 30)}
body.standalone.layout-study:not([data-preview]) .bottom-actions{position:relative;inset:auto;width:100%;min-height:calc(var(--u) * 68);margin:calc(var(--u) * 30) 0 0;padding:calc(var(--u) * 16) 0 0;gap:calc(var(--u) * 7);flex-wrap:nowrap;z-index:auto;background:var(--panel);border-top-color:transparent}
body.standalone.layout-study:not([data-preview]) .bottom-actions .collection-ui-divider{display:block;top:calc(var(--u) * -19);height:calc(var(--u) * 29)}
body.standalone.layout-study:not([data-preview]) .bottom-actions .secondary-actions{flex:1;min-width:0;gap:calc(var(--u) * 3)}
body.standalone.layout-study:not([data-preview]) .bottom-actions .secondary-actions button{min-height:calc(var(--u) * 40);padding:calc(var(--u) * 9) calc(var(--u) * 6);gap:calc(var(--u) * 5);font-size:clamp(5px,calc(var(--u) * 10),10px)}
body.standalone.layout-study:not([data-preview]) .bottom-actions .secondary-actions button span{display:inline}
body.standalone.layout-study:not([data-preview]) .secondary-actions svg{width:calc(var(--u) * 16);height:calc(var(--u) * 16)}
body.standalone.layout-study:not([data-preview]) .bottom-actions .collection-actions{gap:calc(var(--u) * 7)}
body.standalone.layout-study:not([data-preview]) .bottom-actions .collection-actions button{min-height:calc(var(--u) * 44);padding:calc(var(--u) * 10) calc(var(--u) * 9);gap:calc(var(--u) * 6);font-size:clamp(5px,calc(var(--u) * 11),11px)}
body.standalone.layout-study:not([data-preview]) .collection-actions svg{width:calc(var(--u) * 16);height:calc(var(--u) * 16)}
body.standalone.layout-study:not([data-preview]) #collectionCount{font-size:inherit}
@media(min-width:901px){
  body.standalone.layout-study:not([data-preview]) .group-tab{font-size:12px}
  body.standalone.layout-study:not([data-preview]) #subcategoryTabs .subcategory-tab{font-size:11px}
  body.standalone.layout-study:not([data-preview]) .archive-link{font-size:10px}
  body.standalone.layout-study:not([data-preview]) #categoryKicker{font-size:8px}
  body.standalone.layout-study:not([data-preview]) h3{font-size:20px}
  body.standalone.layout-study:not([data-preview]) .section-label-row,
  body.standalone.layout-study:not([data-preview]) .color-palette .part-picker-toggle,
  body.standalone.layout-study:not([data-preview]) .color-palette .part-base-color,
  body.standalone.layout-study:not([data-preview]) .bottom-actions .secondary-actions button{font-size:10px}
  body.standalone.layout-study:not([data-preview]) .part-card-number{font-size:9px}
  body.standalone.layout-study:not([data-preview]) .bottom-actions .collection-actions button{font-size:11px}
}

}
/* Mobile uses the original page's layout and controls; only the new brand remains. */
@media(max-width:900px){
  body.standalone.layout-study:not([data-preview]) .layout{height:100svh;min-height:0;grid-template-rows:auto minmax(0,1fr);align-items:stretch}
  body.standalone.layout-study:not([data-preview]) .preview-pane{padding:12px 12px 14px}
  body.standalone.layout-study:not([data-preview]) .intro{margin-bottom:0}
  body.standalone.layout-study:not([data-preview]) .character-switch{margin:10px auto 0}
  body.standalone.layout-study:not([data-preview]) .portrait-frame{width:min(100%,clamp(210px,39svh,400px),max(140px,calc(100svh - 480px)));margin:14px auto 0}
  body.standalone.layout-study:not([data-preview]) .art-caption,
  body.standalone.layout-study:not([data-preview]) .portrait-frame .edition{display:none}
  body.standalone.layout-study:not([data-preview]) .editor-pane{height:100%;min-height:0;padding:8px 14px calc(78px + env(safe-area-inset-bottom,0px));overflow:hidden}
  body.standalone.layout-study:not([data-preview]) .editor-navigation{position:static}
  body.standalone.layout-study:not([data-preview]) .selection-summary{height:44px;margin:8px 0 6px}
  body.standalone.layout-study:not([data-preview]) .palette-section{height:44px;margin-bottom:8px}
  body.standalone.layout-study:not([data-preview]) .parts-scroll{flex:1;height:auto;min-height:0;overflow:auto;padding-bottom:8px}
  body.layout-study .brand{gap:8px;color:var(--accent);font-weight:400;white-space:nowrap}
  body.layout-study .brand-emblem{width:30px;height:30px;flex:none;font-size:16px}
  body.layout-study .studio-name{font:500 26px/1.2 'Noto Serif KR',serif}
  body.layout-study .studio-description{font:400 11px/1.5 'Noto Serif KR',serif;border-left:1px solid var(--line);padding-left:8px}
}
@media(max-width:430px){
  body.layout-study .brand{gap:6px}
  body.layout-study .brand-emblem{width:26px;height:26px;font-size:14px}
  body.layout-study .studio-name{font-size:23px}
  body.layout-study .studio-description{font-size:10px;padding-left:6px}
}