@layer studio {
body.studio-3d #settingsModal:not([hidden]) {
 position:fixed!important;inset:0!important;box-sizing:border-box!important;
 display:grid!important;place-items:center!important;height:100dvh!important;max-height:100dvh!important;
 padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
 overflow:hidden!important;pointer-events:auto!important;z-index:10000!important;
}
body.studio-3d #settingsModal .settings-dialog {
 box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
 width:min(980px,100%)!important;max-width:100%!important;height:auto!important;min-height:0!important;
 max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
 padding:13px clamp(14px,2.2vw,24px) 24px!important;margin:0!important;overflow:hidden!important;transform:none!important;
 background:#fffaf0!important;color:#3d3025!important;
 border:1px solid #c99b3d!important;border-radius:24px!important;
}
body.studio-3d #settingsModal .last-trick-header {
 position:relative!important;inset:auto!important;flex:0 0 auto!important;margin:0 0 12px!important;
 display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px!important;
 box-sizing:border-box!important;padding:0 0 12px!important;
 background:#fffaf0!important;
 border:0!important;border-bottom:1px solid #d8ad54!important;border-radius:0!important;
 box-shadow:none!important;
}
body.studio-3d #settingsModal #settingsTitle {
 color:#174b34!important;-webkit-text-fill-color:#174b34!important;
 font:700 22px/1.2 Georgia,serif!important;text-shadow:none!important;
}
body.studio-3d #settingsModal #closeSettingsButton {
 margin-left:auto!important;min-height:44px!important;padding:10px 16px!important;
 background:#175238!important;color:#fffaf0!important;
 border:2px solid #d8ad54!important;border-radius:12px!important;
 font:700 15px/1.3 Arial,sans-serif!important;
}
body.studio-3d #settingsModal .settings-content {
 display:flex!important;flex-direction:column!important;gap:14px!important;
 flex:1 1 auto!important;min-height:0!important;max-height:none!important;height:auto!important;
 overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
 touch-action:pan-y!important;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;
 padding:2px 4px calc(16px + env(safe-area-inset-bottom,0px))!important;
 /* Exact background sampled from the user's reference, including dark mode. */
 background:#edf1e8!important;background-image:none!important;
}
body.studio-3d #settingsModal .settings-content>* {flex-shrink:0!important;}
/* Same structure as Rules; the artwork already contains its gold frame. */
body.studio-3d #settingsModal .settings-header-image {
 display:block!important;width:100%!important;height:auto!important;max-width:100%!important;
 flex:0 0 100%!important;min-height:0!important;max-height:none!important;
 aspect-ratio:2078 / 757;object-fit:contain;object-position:center;box-sizing:border-box;
 margin:0!important;padding:0;border-radius:12px;
 background:transparent;
 border:0;box-shadow:none;
}
@media(max-height:540px) and (orientation:landscape) {
 body.studio-3d #settingsModal .settings-header-image {height:72px!important;aspect-ratio:auto;}
}
/* Keep the live preview in normal flow: percentage canvas heights inside an
   auto-sized grid row could paint over the next settings fields on phones. */
body.studio-3d #settingsModal .studio-appearance-preview {
 position:relative!important;inset:auto!important;transform:none!important;
 flex:0 0 auto!important;box-sizing:border-box!important;
 height:auto!important;min-height:0!important;aspect-ratio:auto!important;
 pointer-events:none!important;
}
body.studio-3d #settingsModal .studio-appearance-preview canvas {
 display:block!important;box-sizing:border-box!important;
 width:100%!important;height:200px!important;
}
body.studio-3d #settingsModal .studio-appearance-preview[data-shape="square"] canvas {
 width:calc(100% - 16px)!important;height:auto!important;aspect-ratio:1!important;
 margin:8px 8px 0!important;
}
body.studio-3d #settingsModal .studio-appearance-preview[data-original="true"]::before {
 inset:8px 8px auto!important;height:auto!important;aspect-ratio:1!important;
 pointer-events:none!important;
}
body.studio-3d #settingsModal .studio-appearance-preview p {
 position:static!important;inset:auto!important;box-sizing:border-box!important;
 margin:6px 8px 8px!important;padding:6px!important;white-space:normal!important;
}
body.studio-3d #settingsModal .settings-content:focus-visible {outline:2px solid #c3a55c;outline-offset:-2px;}
}