/* Local studio only. Shared tokens and controls across preview + artwork editor. */
body.mk-v3 {
  --studio-blue:#2864e7; --studio-blue-hover:#1f54cc; --studio-blue-soft:#edf3ff;
  --studio-ink:#2c3437; --studio-muted:#707b7e; --studio-line:#e3e7e5;
  --studio-paper:#fafbf8; --studio-surface:#fff; --studio-soft:#f3f5f2;
  --studio-radius:14px; --studio-control:12px; --studio-shadow:0 12px 35px #25373508;
  background:var(--studio-paper); color:var(--studio-ink);
}
.mk-v3 main { background:var(--studio-paper); }
.mk-v3 > header { position:relative; background:var(--studio-surface); box-shadow:none; }
.mk-v3 main > .max-w-\[1600px\] { padding-top:28px; padding-bottom:48px; }
.mk-v3 .mk-v3-intro { margin-bottom:26px; }
.mk-v3 .mk-v2-title { font-size:clamp(26px,2.1vw,34px); font-weight:650; letter-spacing:-1px; line-height:1.3; color:var(--studio-ink); margin:0; max-width:1100px; }
.mk-v3 .mk-v3-workspace { background:var(--studio-surface); border:1px solid var(--studio-line); border-radius:22px; box-shadow:var(--studio-shadow); }
.mk-v3 .mk-v2-toolbar { padding:16px 22px!important; min-height:76px; border-bottom:1px solid var(--studio-line)!important; border-radius:22px 22px 0 0; gap:14px; }
.mk-v3 .mk-v2-toolbar #preview-title { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--studio-ink); }
.mk-v3 #preview-title:before { content:''; width:7px; height:7px; border-radius:50%; background:#70a28e; box-shadow:0 0 0 4px #70a28e12; }
.mk-v3 .mk-v3-actions { gap:8px; flex-wrap:wrap; }
/* Shared button grammar: neutral, primary, selected. */
.mk-v3 :is(.mk-v3-workspace,.mk-v2-modal) button { border-radius:var(--studio-control); transition:background .16s,border-color .16s,color .16s,box-shadow .16s; font-weight:500; }
.mk-v3 :is(.mk-v3-actions button,.mk-v3-viewtools > button,#camera-views-btn,#lighting-settings-btn,.mk-v2-ratio-btn,.mk-v3-turntable,.mk-v3-secondary,#lighting-reset,#env-map-upload-btn,#env-map-remove-btn) { background:var(--studio-surface); color:#57656b; border:1px solid var(--studio-line); min-height:40px; font-size:14px; padding:10px 14px; box-shadow:none; border-radius:var(--studio-control); }
.mk-v3 :is(.mk-v3-actions button,.mk-v3-viewtools button,.mk-v3-turntable,.mk-v3-secondary,#lighting-reset,#env-map-upload-btn):hover:not(:disabled) { background:var(--studio-soft); border-color:#ccd5d4; }
.mk-v3 :is(.mk-v2-add,#download-btn:not(:disabled),#select-image-btn,.mk-v2-apply) { background:var(--studio-blue)!important; color:#fff!important; border:1px solid var(--studio-blue)!important; box-shadow:0 2px 3px #2864e710!important; border-radius:var(--studio-control)!important; font-size:14px!important; font-weight:550!important; min-height:42px; padding:11px 17px!important; }
.mk-v3 :is(.mk-v2-add,#download-btn,#select-image-btn,.mk-v2-apply):hover:not(:disabled) { background:var(--studio-blue-hover)!important; }
.mk-v3 button:disabled { cursor:default; opacity:.45; }
.mk-v3 .mk-v3-focus { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.mk-v3 .mk-v3-focus[aria-pressed=true],.mk-v3 .mk-v3-turntable[aria-pressed=true] { background:var(--studio-blue-soft); border-color:#c7d8fa; color:var(--studio-blue); }
.mk-v3 .mk-v2-download-container { width:auto; z-index:45; }
.mk-v3 .mk-v2-download-container #download-btn { min-width:134px; border-radius:var(--studio-control)!important; }
.mk-v3 #download-dropdown { width:245px; border:1px solid var(--studio-line); border-radius:16px; padding:6px; box-shadow:0 14px 40px #25373520; }
.mk-v3 #download-dropdown button { min-height:42px; font-size:14px; border:0; }
.mk-v3 #download-dropdown .text-\[10px\] { font-size:12px; }
/* Frame and inspector; size containment prevents long tabs stretching the page. */
.mk-v3 .mk-v2-shell { grid-template-columns:minmax(0,1fr) 380px; gap:0; align-items:stretch; }
.mk-v3 .mk-v2-main { background:var(--studio-soft); border-radius:0 0 0 22px; min-width:0; }
.mk-v3 .mk-v2-stage { background:none; border:0; box-shadow:none; overflow:visible; }
.mk-v3 .mk-v2-viewer { padding:18px!important; background:none; }
.mk-v3 .mk-v2-viewer > div { border-radius:var(--studio-radius); border:1px solid #00000005; box-shadow:none; }
.mk-v3 .mk-v2-sidebar { position:static; top:auto; contain:size; min-height:0; max-height:none; overflow:hidden; gap:0; padding:0; border-left:1px solid var(--studio-line); background:#fff; border-radius:0 0 22px 0; }
.mk-v3 .mk-v3-tabs { display:flex; flex-shrink:0; margin:18px 18px 0; padding:4px; gap:2px; min-height:44px; border-radius:var(--studio-radius); background:var(--studio-soft); }
.mk-v3 .mk-v3-tab { flex:1; padding:9px 4px; border:0; background:transparent; color:var(--studio-muted); font-size:14px; border-radius:10px!important; }
.mk-v3 .mk-v3-tab[aria-selected=true] { background:#fff; color:var(--studio-blue); box-shadow:0 1px 5px #2537350b; font-weight:600; }
.mk-v3 .mk-v3-panels { flex:1; height:0; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#cad2ce transparent; scrollbar-gutter:stable; }
.mk-v3 .mk-v3-panel { padding:26px 24px 28px; }
.mk-v3 .mk-v3-panel[hidden] { display:none!important; }
.mk-v3 .mk-v3-panel-heading { font-size:22px; font-weight:600; line-height:1.35; letter-spacing:-.6px; margin:0 0 9px; }
.mk-v3 .mk-v3-help { font-size:14px; color:var(--studio-muted); line-height:1.65; margin:0 0 24px; }
.mk-v3 .mk-v2-panel { background:none; border:0; padding:0; box-shadow:none; }
.mk-v3 .mk-v2-panel-title { color:var(--studio-muted); font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; margin:22px 0 12px; }
.mk-v3 .mk-v2-area { display:grid; grid-template-columns:44px 1fr; gap:16px 13px; margin:0 0 12px; padding:20px; border:1px solid var(--studio-line); border-radius:16px; background:linear-gradient(145deg,#f8faf7,#f4f7fc); }
.mk-v3 .mk-v3-area-index { display:grid; place-items:center; height:44px; background:#fff; border:1px solid #e3e9f2; border-radius:12px; color:#6d88b6; font-size:15px; font-weight:500; }
.mk-v3 .mk-v2-area-name { font-size:16px; font-weight:550; color:var(--studio-ink); overflow-wrap:anywhere; }
.mk-v3 .mk-v3-area-label > span { display:block; margin-top:5px; color:var(--studio-muted); font-size:12px; }
.mk-v3 .mk-v2-add { grid-column:1/-1; width:100%; }
.mk-v3 .mk-v3-file-note { white-space:pre-line; font-size:13px; line-height:1.85; color:var(--studio-muted); margin-top:20px; }
.mk-v3 .mk-v2-controls,.mk-v3 .mk-v2-anim { border:0!important; padding:0!important; background:none!important; box-shadow:none; }
.mk-v3 .mk-v2-controls .grid { display:block; padding:0; }
.mk-v3 .mk-v2-controls .grid > div { background:none; padding:0; border:0; }
.mk-v3 .grid.gap-4 > div > :is(span.block,label.block) { font-size:14px!important; font-weight:550; text-transform:none!important; letter-spacing:0!important; color:var(--studio-ink)!important; margin-bottom:13px; }
/* Menus, viewing tools and model animation all use the same rounded controls. */
.mk-v3 .mk-v3-viewbar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:0 18px 18px; }
.mk-v3 .mk-v3-viewtools { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.mk-v3 :is(#camera-views-btn,#lighting-settings-btn) { width:auto; height:40px; gap:8px; }
.mk-v3 .mk-v2-ratio { position:relative; bottom:auto; right:auto; z-index:25; }
.mk-v3 .mk-v2-ratio-btn { width:auto; height:40px; }
.mk-v3 .mk-v2-ratio-btn--icon .mk-v2-ratio-label { display:inline; }
.mk-v3 :is(#camera-views-menu,.mk-v2-ratio-menu,.mk-v3-light-menu,.mk-mat-menu) { border:1px solid var(--studio-line); border-radius:16px; background:#fff; padding:7px; box-shadow:0 14px 40px #25373520; }
.mk-v3 #camera-views-menu { bottom:calc(100% + 10px); top:auto; left:0; margin:0; width:185px; }
.mk-v3 :is(#camera-views-menu button,.mk-v2-ratio-opt,.mk-mat-option) { font-size:14px; padding:11px 12px; line-height:1.4; border-radius:10px; }
.mk-v3 .mk-v3-lighting { position:relative; z-index:30; }
.mk-v3 .mk-v3-light-menu { position:absolute; bottom:calc(100% + 10px); left:0; width:265px; }
.mk-v3 .mk-v3-light-menu[hidden] { display:none; }
.mk-v3 .mk-v3-menu-label { font-size:12px; color:var(--studio-muted); margin:6px 10px 10px; }
.mk-v3 .mk-v3-light-option { display:flex; align-items:center; gap:12px; width:100%; border:1px solid transparent; padding:12px 10px; background:none; text-align:left; }
.mk-v3 .mk-v3-light-option[aria-checked=true] { background:var(--studio-blue-soft); border-color:#dce6fa; }
.mk-v3 .mk-v3-light-option strong { display:block; font-size:14px; font-weight:550; color:var(--studio-ink); }
.mk-v3 .mk-v3-light-option small { display:block; font-size:12px; color:var(--studio-muted); margin-top:4px; }
.mk-v3 .mk-v3-light-orb { width:36px; height:36px; flex-shrink:0; border-radius:50%; }
.mk-v3 .mk-v3-light-orb--warm { background:radial-gradient(circle at 30% 25%,#fff6df,#d9ba8c 55%,#80705a); }
.mk-v3 .mk-v3-light-orb--basic { background:radial-gradient(circle at 35% 30%,#fff,#d5d9df 55%,#8a909a); }
.mk-v3 .mk-v3-light-orb--ai { display:grid; place-items:center; border-radius:11px; color:#3865d6; background:linear-gradient(145deg,#f4f0ff,#e7f0ff 65%,#e1f2f0); border:1px solid #dde5f7; box-shadow:inset 0 1px 0 #fff; }
.mk-v3 .mk-v3-light-orb--ai svg { display:block; width:28px; height:28px; flex:none; }
.mk-v3 .mk-v3-turntable { display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; }
.mk-v3 .mk-v3-turntable:before { content:'↻'; font-size:19px; line-height:1; }
/* A quiet scrubber tucked into the model's upper corner. */
.mk-v3 #animation-slider-container { top:12px; bottom:auto; left:auto; right:12px; transform:none; width:184px; max-width:calc(100% - 24px); }
.mk-v3 #animation-slider-container > div { min-width:0; padding:1px 10px; border-radius:10px; border:1px solid #687b721a; background:#f7f8f3bc; backdrop-filter:blur(10px); box-shadow:none; }
.mk-v3 #animation-slider-container .flex { gap:8px; }
.mk-v3 #animation-slider-container .text-xs { font-size:11px; font-weight:400; color:#65716c; }
.mk-v3 #animation-slider { width:100%!important; min-width:26px!important; margin:0!important; height:30px!important; --studio-blue:#85978e; }
.mk-v3 #animation-slider::-webkit-slider-runnable-track { height:2px!important; background:#c9d1cb!important; }
.mk-v3 #animation-slider::-webkit-slider-thumb { width:10px!important; height:10px!important; margin-top:-4px!important; border:2px solid #85978e!important; box-shadow:none!important; }
.mk-v3 #animation-slider::-moz-range-track { height:2px!important; background:#c9d1cb!important; }
.mk-v3 #animation-slider::-moz-range-thumb { width:10px!important; height:10px!important; border:2px solid #85978e!important; box-shadow:none!important; }
/* Reusable palette / field language, shared with the artwork inspector. */
.mk-v3 [role=tablist]:has(>.preview-bg-mode-btn),.mk-v3 [role=tablist]:has(>.editor-bg-mode-btn) { background:var(--studio-soft); padding:4px; border-radius:var(--studio-radius); gap:3px; margin-bottom:20px; }
.mk-v3 :is(.preview-bg-mode-btn,.editor-bg-mode-btn) { padding:9px!important; font-size:14px!important; font-weight:500; background:transparent!important; border:0!important; color:var(--studio-muted)!important; border-radius:10px!important; }
.mk-v3 :is(.preview-bg-mode-btn,.editor-bg-mode-btn)[aria-selected=true] { background:#fff!important; color:var(--studio-ink)!important; box-shadow:0 1px 5px #2537350b; }
.mk-v3 .mk-v3-legacy-presets { display:none!important; }
.mk-v3 :is(.mk-v3-color-panel,.mk-v3-gradient-panel):not(.hidden) { display:flex; flex-direction:column; }
.mk-v3 :is(#editor-bg-color-panel,#preview-bg-color-panel,#editor-bg-gradient-panel,#preview-bg-gradient-panel) { align-items:stretch; gap:18px!important; }
.mk-v3 #editor-bg-color-panel > div:first-child,.mk-v3 #preview-bg-color-panel > div:first-child,.mk-v3 #editor-bg-gradient-panel > div:not(#editor-gradient-presets),.mk-v3 #preview-bg-gradient-panel > div:not(#gradient-presets) { width:100%!important; height:auto!important; box-shadow:none!important; }
.mk-v3 .mk-v3-swatches { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; padding:3px 0; }
.mk-v3 .mk-v3-swatch { display:flex; flex-direction:column; align-items:center; gap:9px; padding:2px 0; border:0; background:none; }
.mk-v3 .mk-v3-swatch-dot { width:30px; height:30px; border:1px solid #0000000b; border-radius:50%; position:relative; transition:transform .15s; }
.mk-v3 .mk-v3-swatch-name { font-size:12px; color:var(--studio-muted); }
.mk-v3 .mk-v3-swatch:hover .mk-v3-swatch-dot { transform:translateY(-2px); }
.mk-v3 .mk-v3-swatch[aria-pressed=true] .mk-v3-swatch-dot:after { content:''; position:absolute; inset:-4px; border:1px solid var(--studio-blue); border-radius:50%; }
.mk-v3 .mk-v3-swatch[aria-pressed=true] .mk-v3-swatch-name { color:var(--studio-blue); }
.mk-v3 .mk-v3-color-field { display:flex; flex-direction:column; gap:8px; min-width:0; }
.mk-v3 .mk-v3-field-label { color:var(--studio-muted); font-size:13px; }
.mk-v3 .mk-v3-color-value { display:flex; align-items:center; gap:10px; min-width:0; padding:9px 11px; border:1px solid var(--studio-line); border-radius:var(--studio-control); background:#fff; }
.mk-v3 .mk-v3-color-chip,.mk-v3 #color-picker-wrapper.mk-v3-color-chip { width:24px!important; height:24px!important; flex-shrink:0; border:1px solid #00000012!important; border-radius:50%!important; box-shadow:none!important; }
.mk-v3 .mk-v3-hex { width:100%; min-width:0; border:0; padding:0; outline:none; background:none; font-size:14px; color:#536268; font-variant-numeric:tabular-nums; }
.mk-v3 .mk-v3-hex[aria-invalid=true] { color:#b24d44; }
.mk-v3 .mk-v3-color-value:focus-within { border-color:#95b1ed; box-shadow:0 0 0 3px #2864e70c; }
.mk-v3 .mk-v3-gradient-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 10px; }
.mk-v3 .mk-v3-gradient-swatch { display:flex; flex-direction:column; gap:7px; padding:0; border:0; background:none; font-size:12px; color:var(--studio-muted); }
.mk-v3 .mk-v3-gradient-sample { width:100%; height:42px; border-radius:10px; border:1px solid #00000008; }
.mk-v3 .mk-v3-gradient-swatch[aria-pressed=true] { color:var(--studio-blue); }
.mk-v3 .mk-v3-gradient-swatch[aria-pressed=true] .mk-v3-gradient-sample { outline:1px solid var(--studio-blue); outline-offset:3px; }
.mk-v3 .mk-v3-gradient-stops { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mk-v3 .mk-v3-gradient-stops .mk-v3-color-value { gap:7px; padding:8px; }
.mk-v3 .mk-v3-gradient-stops .mk-v3-color-chip { width:20px!important; height:20px!important; }
.mk-v3 .mk-v3-direction { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--studio-muted); }
.mk-v3 :is(#editor-gradient-direction,#preview-gradient-direction) { flex:1; width:auto!important; height:40px!important; padding:0 12px!important; text-align:left!important; border:1px solid var(--studio-line)!important; border-radius:var(--studio-control)!important; background:#fff; color:#536268; font-size:14px; box-shadow:none; }
.mk-v3 .mk-v3-custom-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; }
.mk-v3 .mk-v3-custom-row #transparent-bg-btn { height:44px!important; padding:8px 10px!important; }
.mk-v3 #transparent-bg-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%!important; height:40px!important; padding:8px!important; border:1px solid var(--studio-line)!important; border-radius:var(--studio-control)!important; background:#fff!important; color:var(--studio-muted); font-size:14px; transform:none!important; box-shadow:none!important; }
.mk-v3 #transparent-bg-btn:before { content:''; width:16px; height:16px; border:1px solid #d0d7d3; border-radius:4px; background:repeating-conic-gradient(#d3d9d5 0% 25%,#fff 0% 50%) 50% / 8px 8px; }
.mk-v3 #transparent-bg-btn[aria-pressed=true] { background:var(--studio-blue-soft)!important; border-color:#c7d8fa!important; color:var(--studio-blue); }
/* Scene groups and consistent value / slider pairs. */
.mk-v3 #lighting-settings-panel { display:block!important; position:static; margin:24px 0 0; pointer-events:auto; }
.mk-v3 #lighting-settings-panel > div { min-width:0; max-width:none; max-height:none; padding:0; background:none; border:0; border-radius:0; box-shadow:none; }
.mk-v3 #lighting-settings-panel > div > div:first-child { display:none; }
.mk-v3 #lighting-settings-panel .overflow-y-auto { overflow:visible; padding:0; }
.mk-v3 .mk-v3-settings-group { border-top:1px solid var(--studio-line); margin:0!important; }
.mk-v3 .mk-v3-settings-group summary { display:flex; align-items:center; justify-content:space-between; padding:18px 0; font-size:14px; font-weight:550; color:var(--studio-ink); cursor:pointer; list-style:none; }
.mk-v3 .mk-v3-settings-group summary::-webkit-details-marker { display:none; }
.mk-v3 .mk-v3-settings-group summary:after { content:'+'; font-size:18px; color:#8b9697; font-weight:400; }
.mk-v3 .mk-v3-settings-group[open] summary:after { content:'−'; }
.mk-v3 .mk-v3-settings-body { padding:0 0 18px; }
.mk-v3 #lighting-settings-panel :is(.text-\[10px\],.text-xs) { font-size:14px!important; line-height:1.5; }
.mk-v3 .mk-v3-field-head { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin:0 0 4px; }
.mk-v3 .mk-v3-field-head label { font-size:14px!important; font-weight:400; width:auto!important; margin:0!important; color:var(--studio-muted)!important; }
.mk-v3 .mk-v3-value { min-width:44px; padding:3px 8px; border-radius:8px; background:var(--studio-soft); color:#56656b!important; text-align:center; font-size:12px!important; line-height:1.5; font-variant-numeric:tabular-nums; }
.mk-v3 #lighting-settings-panel .space-y-1\.5 > div + div,.mk-v3 #lighting-settings-panel .space-y-2 > div + div { margin-top:12px; }
.mk-v3 #lighting-reset { width:100%; margin-top:12px; }
.mk-v3 #env-map-status { white-space:normal; overflow-wrap:anywhere; color:var(--studio-muted); font-size:13px!important; }
.mk-v3 #env-map-control { border-color:var(--studio-line); padding-top:16px; }
.mk-v3 #env-map-upload-btn,.mk-v3 #env-map-remove-btn { font-size:14px; margin-top:8px; }
.mk-v3 input[type=range] { appearance:none!important; -webkit-appearance:none!important; height:24px!important; margin:6px 0!important; min-width:0; background:transparent!important; box-shadow:none!important; cursor:pointer; accent-color:var(--studio-blue); }
.mk-v3 input[type=range]::-webkit-slider-runnable-track { height:4px!important; border:0!important; border-radius:999px!important; background:linear-gradient(to right,var(--studio-blue) 0 var(--studio-range,0%),#e4e9e6 var(--studio-range,0%) 100%)!important; box-shadow:none!important; }
.mk-v3 input[type=range]::-webkit-slider-thumb { appearance:none!important; -webkit-appearance:none!important; box-sizing:border-box!important; width:16px!important; height:16px!important; margin-top:-6px!important; border:4px solid var(--studio-blue)!important; border-radius:50%!important; background:#fff!important; box-shadow:0 1px 3px #23473018!important; }
.mk-v3 input[type=range]::-moz-range-track { height:4px!important; border:0; border-radius:999px; background:linear-gradient(to right,var(--studio-blue) 0 var(--studio-range,0%),#e4e9e6 var(--studio-range,0%) 100%)!important; }
.mk-v3 input[type=range]::-moz-range-thumb { box-sizing:border-box; width:16px; height:16px; border:4px solid var(--studio-blue); border-radius:50%; background:#fff; box-shadow:none; }
.mk-v3 input[type=checkbox] { accent-color:var(--studio-blue); }
/* Material and motion inspectors use the same card / input sizes. */
.mk-v3 #material-editor-container { padding:0; }
.mk-v3 .mk-mat-trigger { min-height:44px; padding:12px 14px; border:1px solid var(--studio-line); border-radius:var(--studio-control); font-size:14px; background:#fff; color:#536268; }
.mk-v3 #material-picker-label { white-space:normal; line-height:1.5; }
.mk-v3 .mk-mat-menu { max-height:220px; box-shadow:none; }
.mk-v3 .mk-mat-settings { padding:18px!important; margin-top:18px!important; border:1px solid var(--studio-line); border-radius:16px; background:var(--studio-paper); }
.mk-v3 #selected-material-name { font-size:14px; }
.mk-v3 .mk-mat-row { margin-top:16px!important; flex-wrap:wrap; gap:8px; }
.mk-v3 .mk-mat-row:has(input[type=range]) { display:block; }
.mk-v3 .mk-mat-row > label { width:auto!important; margin-right:auto; font-size:14px!important; color:var(--studio-muted); }
.mk-v3 .mk-mat-swatch,.mk-v3 .mk-text-swatch { width:32px; height:32px; border-radius:50%; border:1px solid var(--studio-line); box-shadow:none; }
.mk-v3 .mk-mat-hex,.mk-v3 .mk-text-hex { width:94px; height:38px; font-size:14px; border:1px solid var(--studio-line); border-radius:10px; color:#536268; background:#fff; }
.mk-v3 .mk-mat-row > .mk-v3-color-value { padding:8px 10px; max-width:170px; }
.mk-v3 .mk-mat-row .mk-v3-color-value .mk-mat-swatch { width:24px; height:24px; }
.mk-v3 .mk-mat-row .mk-v3-color-value .mk-mat-hex { width:86px; height:26px; padding:0; border:0; background:none; }
.mk-v3 .mk-mat-vivid { margin-top:18px!important; padding-top:18px!important; border-color:var(--studio-line); }
.mk-v3 .mk-mat-vivid :is(.text-xs,.text-\[10px\]) { font-size:13px; }
.mk-v3 .mk-v3-turntable-card { border:1px solid var(--studio-line); border-radius:16px; background:var(--studio-paper); padding:18px; margin:0 0 24px; }
.mk-v3 .mk-v3-turntable-card h3 { font-size:16px; font-weight:550; margin:0 0 8px; }
.mk-v3 .mk-v3-turntable-card .mk-v3-help { margin-bottom:16px; }
.mk-v3 .mk-v3-turntable-card button { width:100%; }
.mk-v3 .mk-v3-speed-label { display:flex; align-items:center; justify-content:space-between; font-size:14px; color:var(--studio-muted); margin-top:18px; }
.mk-v3 .mk-v3-speed-label output { font-size:12px; background:var(--studio-soft); padding:3px 8px; border-radius:8px; }
.mk-v3 #mk-v3-speed { width:100%; }
.mk-v3 .mk-v2-anim :is(.text-xs,.text-\[11px\]) { font-size:14px; line-height:1.5; }
.mk-v3 #anim-panel { padding:14px; border:1px solid var(--studio-line); border-radius:16px; background:var(--studio-paper); }
.mk-v3 #anim-panel > .flex:first-child,.mk-v3 #anim-active-controls,.mk-v3 #anim-duration-wrap { flex-wrap:wrap; }
.mk-v3 #anim-track { flex-basis:calc(100% - 50px); }
.mk-v3 #anim-empty { white-space:normal; }
.mk-v3 #anim-add { min-height:38px; font-size:14px; }
.mk-v3 #anim-play { background:var(--studio-blue); box-shadow:none; }
.mk-v3 .mk-v3-secondary { width:100%; margin-top:22px; }
/* Artwork modal shares the same typography, tokens and control components. */
.mk-v3 .mk-v2-modal { z-index:150; }
.mk-v3 .mk-v2-modal-backdrop { background:#273c3666; backdrop-filter:blur(9px); }
.mk-v3 .mk-v2-modal-panel { width:min(1500px,calc(100vw - 48px)); height:calc(100dvh - 48px); border-radius:22px; box-shadow:0 30px 100px #203a3040; }
.mk-v3 .mk-v2-modal-close { display:flex; width:38px; height:38px; position:static; flex-shrink:0; border-radius:50%!important; background:var(--studio-soft); color:var(--studio-muted); }
.mk-v3 .mk-v2-ed-main { background:var(--studio-soft); }
.mk-v3 .mk-v2-ed-main > header { min-height:76px; padding:16px 20px!important; gap:12px; background:#fff; border-bottom:1px solid var(--studio-line); }
.mk-v3 #dieline-editor-title { font-size:21px; font-weight:600; letter-spacing:-.4px; }
.mk-v3 #dieline-toggle { background:var(--studio-soft); border-radius:var(--studio-control); }
.mk-v3 #dieline-toggle button { font-size:14px!important; padding:9px 13px!important; border-radius:9px!important; }
.mk-v3 #dieline-toggle button[aria-selected=true] { color:var(--studio-blue); }
.mk-v3 .mk-v3-editor-tools { display:flex; align-items:center; gap:8px; margin-left:auto; }
.mk-v3 .mk-v3-editor-actions { flex-wrap:nowrap; gap:6px; }
.mk-v3 .mk-v3-editor-tools button { flex:none; min-width:0; min-height:40px; padding:10px 14px; font-size:14px!important; }
.mk-v3 #add-text-btn,.mk-v3 #ai-design-btn { background:#fff!important; border:1px solid var(--studio-line)!important; color:#57656b!important; }
.mk-v3 .mk-v2-ed-main > .p-6 { padding:24px!important; background:radial-gradient(#cdd6cf 1px,transparent 1px) 0 0/18px 18px,var(--studio-soft); }
.mk-v3 .mk-v2-ed-main > .p-6 > div { border:1px solid #dce3dd!important; border-radius:6px!important; box-shadow:0 6px 22px #2537350a!important; }
.mk-v3 .mk-v3-canvas-caption { flex-shrink:0; padding:12px 18px 17px; text-align:center; font-size:13px; color:var(--studio-muted); }
.mk-v3 .mk-v2-ed-aside { width:380px; padding:0; background:#fff; }
.mk-v3 .mk-v2-mini3d-wrap { order:-2; flex-shrink:0; margin:20px 24px 18px; }
.mk-v3 .mk-v2-mini3d { height:auto; aspect-ratio:1; border:1px solid var(--studio-line); border-radius:var(--studio-radius); background:#ede9e0; }
.mk-v3 .mk-v2-ed-scroll { border-top:1px solid var(--studio-line); scrollbar-width:thin; scrollbar-color:#cad2ce transparent; overscroll-behavior:contain; }
.mk-v3 .mk-v2-ed-scroll > .px-5 { padding:0 24px 22px; }
.mk-v3 .mk-v2-ed-scroll .grid.gap-4 { padding-top:0; gap:0!important; }
.mk-v3 .mk-v2-ed-scroll .grid.gap-4 > div { padding:22px 0; background:none; border:0; border-radius:0; }
.mk-v3 .mk-v2-ed-scroll .grid.gap-4 > div + div { border-top:1px solid var(--studio-line); }
.mk-v3 .texture-btn { display:flex; align-items:center; flex-direction:column; gap:9px; width:auto!important; height:auto!important; min-width:0!important; flex:1; overflow:visible!important; padding:0!important; border:0!important; border-radius:0!important; background:none!important; color:var(--studio-muted); font-size:12px; transform:none!important; }
.mk-v3 .texture-btn img { width:100%!important; height:50px!important; object-fit:cover; border:1px solid #0000000b; border-radius:10px!important; }
.mk-v3 .texture-btn { box-shadow:none!important; }
.mk-v3 .texture-btn img { outline:none!important; }
.mk-v3 .texture-btn[aria-pressed=true] img { border-color:#78877e; }
.mk-v3 .texture-btn[aria-pressed=true] > span { color:var(--studio-ink); font-weight:600; }
.mk-v3 .mk-v2-apply { flex-shrink:0; margin:14px 24px 20px; }
.mk-v3 .mk-v2-editor :is(.text-xs,.text-\[10px\],.text-\[11px\]) { font-size:14px; }
.mk-v3 .mk-text-panel { padding:16px; border:1px solid var(--studio-line); border-radius:16px; background:var(--studio-paper); }
.mk-v3 .mk-v2-ed-scroll .mk-text-panel { margin-top:22px; }
.mk-v3 .image-controls-overlay .image-toolbar { border-radius:14px!important; border-color:var(--studio-line)!important; box-shadow:0 4px 20px #25373515!important; }
.mk-v3 .image-controls-overlay .image-toolbar button { border-radius:10px!important; }
.mk-v3 #dieline-canvas-container:has(.image-controls-overlay:not(.hidden)) #drop-hint { visibility:hidden; }
.mk-v3 .mk-text-label { font-size:13px; letter-spacing:0; text-transform:none; color:var(--studio-muted); }
.mk-v3 .mk-text-input { min-height:44px; padding:10px; font-size:15px; border-color:var(--studio-line); border-radius:var(--studio-control); }
.mk-v3 .mk-text-tools { flex-wrap:wrap; gap:7px; }
.mk-v3 :is(.mk-text-font,.mk-text-size,.mk-text-toggle) { height:38px; border:1px solid var(--studio-line); border-radius:10px; font-size:14px; background:#fff; }
.mk-v3 .mk-text-font { flex-basis:150px; }
/* Supporting SEO content and keyboard / focus states. */
.mk-v3 .mk-split-below { background:none; border:0; border-top:1px solid var(--studio-line); border-radius:0; box-shadow:none; margin-top:40px; padding:32px 8px; }
.mk-v3 .mk-v3-breadcrumb { margin:0 0 26px; font-size:14px; color:var(--studio-muted); }
.mk-v3 .mk-v3-breadcrumb > span:last-child,.mk-v3 .mk-v3-breadcrumb > svg:last-of-type { display:none; }
.mk-v3 .mk-split-below h2 { font-size:25px; letter-spacing:-.5px; }
.mk-v3 .mk-split-below p { font-size:16px; line-height:1.85; }
.mk-v3 .mk-split-below a { box-shadow:none; }
.mk-v3 :is(button,a,input,select,textarea):focus-visible { outline:2px solid #91a5ba; outline-offset:2px; }
/* Focusable containers are not controls and should not acquire blue boxes. */
.mk-v3 :is([role=tabpanel],[role=dialog],#dieline-canvas-container,#dieline-canvas):focus { outline:none; }
.mk-v3 #dieline-canvas textarea { outline:1px solid #91a5ba!important; }
.mk-v3 .image-controls-overlay .image-toolbar button:hover { background:var(--studio-soft); border-color:var(--studio-line); color:var(--studio-ink); }
.mk-v3.mk-v3-focus-open { overflow:hidden; }
.mk-v3-focus-open .mk-v3-workspace { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; overflow:hidden; border:0; border-radius:0; height:100dvh; }
.mk-v3-focus-open .mk-v2-toolbar { flex-shrink:0; border-radius:0; }
.mk-v3-focus-open .mk-v2-shell { flex:1; min-height:0; }
.mk-v3-focus-open .mk-v2-main,.mk-v3-focus-open .mk-v2-stage { display:flex; flex-direction:column; min-height:0; height:100%; }
.mk-v3-focus-open .mk-v2-viewer { flex:1; min-height:0; }
.mk-v3-focus-open .mk-v3-viewbar { flex-shrink:0; }
@media (max-width:1150px) and (min-width:860px) {
  .mk-v3 .mk-v2-shell { grid-template-columns:minmax(0,1fr) 350px; }
  .mk-v3 .mk-v3-panel { padding:22px 20px; }
  .mk-v3 .mk-v2-ed-aside { width:350px; }
  .mk-v3 .mk-v3-tabs { margin:16px 14px 0; }
}
@media (max-width:859px) {
  .mk-v3 .mk-v2-shell { grid-template-columns:1fr; }
  .mk-v3 .mk-v2-main { border-radius:0; }
  .mk-v3 .mk-v2-sidebar { border-left:0; border-top:1px solid var(--studio-line); border-radius:0 0 22px 22px; height:min(580px,75dvh); min-height:360px; }
  .mk-v3 .mk-v3-tabs { margin:16px 18px 0; }
  .mk-v3 .mk-v3-panel { padding:24px; }
  .mk-v3 .mk-v2-toolbar { padding:16px!important; }
  .mk-v3 .mk-v3-viewbar { padding:0 12px 14px; }
  .mk-v3 .mk-v2-viewer { padding:12px!important; }
  .mk-v3 .mk-v2-ed-aside { width:auto; }
  .mk-v3 .mk-v2-modal-panel { width:calc(100vw - 16px); height:calc(100dvh - 16px); }
  .mk-v3 .mk-v2-ed-scroll { overflow:visible; }
  .mk-v3-focus-open .mk-v2-sidebar { display:none; }
  .mk-v3-focus-open .mk-v2-shell { grid-template-rows:minmax(0,1fr); }
}
@media (max-width:540px) {
  .mk-v3 .mk-v2-title { font-size:26px; letter-spacing:-.75px; }
  .mk-v3 .mk-v3-actions { width:100%; gap:6px; justify-content:flex-end; flex-wrap:nowrap; }
  .mk-v3 .mk-v3-actions button { padding:9px 10px; font-size:13px; }
  .mk-v3 .mk-v3-focus { position:relative; width:42px; min-width:42px; padding:9px!important; }
  .mk-v3 .mk-v3-focus-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .mk-v3 .mk-v2-download-container #download-btn { min-width:0; padding:10px 12px!important; font-size:14px!important; }
  .mk-v3 #download-dropdown { right:0; left:auto; width:min(245px, calc(100vw - 24px)); }
  .mk-v3 .mk-v3-viewbar { flex-wrap:nowrap; align-items:center; }
  .mk-v3 .mk-v3-viewtools { flex-wrap:nowrap; flex:1 1 auto; min-width:0; gap:6px; }
  .mk-v3 .mk-v3-viewtools > * { min-width:0; flex:1 1 0; }
  .mk-v3 .mk-v3-viewtools :is(#camera-views-btn,#lighting-settings-btn,.mk-v2-ratio-btn) { width:100%; max-width:100%; overflow:hidden; }
  .mk-v3 :is(#camera-views-btn,#lighting-settings-btn,.mk-v2-ratio-btn) { min-width:0; padding:10px; }
  .mk-v3 .mk-v3-viewbar > .mk-v3-turntable { width:42px; min-width:42px; padding:10px; flex:0 0 auto; }
  .mk-v3 .mk-v3-viewbar > .mk-v3-turntable .mk-v3-turntable-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .mk-v3 .mk-v3-light-menu { left:auto; right:-70px; width:240px; }
  .mk-v3 .mk-v3-panel { padding:22px 18px; }
  .mk-v3 #animation-slider-container { top:10px; right:10px; width:172px; }
  .mk-v3 .mk-v3-swatch-dot { width:27px; height:27px; }
  .mk-v3 .mk-v2-modal { padding:0; }
  .mk-v3 .mk-v2-ed-main > .p-6 { padding:14px!important; }
  .mk-v3 .mk-v2-ed-main > header { padding:12px!important; gap:8px; }
  .mk-v3 #dieline-editor-title { font-size:17px; }
  .mk-v3 .mk-v3-editor-tools { gap:5px; }
  .mk-v3 .mk-v3-editor-tools button { width:36px; min-height:36px; padding:9px!important; }
  .mk-v3 .mk-v3-editor-tools #select-image-btn { padding:9px!important; min-height:36px; }
  .mk-v3 .mk-v3-editor-tools svg { flex-shrink:0; }
  .mk-v3 .mk-v3-tool-label { display:none; }
  .mk-v3 .mk-v3-editor-actions { gap:2px; }
  .mk-v3 #clear-all-btn { padding:6px; }
  .mk-v3 .mk-v2-modal-close { width:32px; height:32px; }
}
@media (prefers-reduced-motion:reduce) {
  .mk-v3 :is(.mk-v3-workspace,.mk-v2-modal) * { transition:none!important; }
}

/* Editor actions share the existing caption row, leaving canvas space intact. */
.mk-editor-history-tools{display:flex;align-items:center;gap:4px;flex-shrink:0}.mk-editor-history-tools button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #dce2df;border-radius:9px;background:#fff;color:#536469;font-size:23px;line-height:1;cursor:pointer}.mk-editor-history-tools button:disabled{opacity:.35;cursor:default}.mk-editor-history-tools button[aria-pressed="true"]{background:#eaf0ff;border-color:#93acf0;color:#2864e7}.mk-editor-tool-divider{height:18px;width:1px;background:#dce2df;margin:0 4px}.mk-v3 .mk-v3-canvas-caption{display:flex;align-items:center;gap:16px;text-align:left;padding:8px 16px}.mk-editor-selection-hint{font-size:12px;line-height:1.5}.mk-editor-marquee{position:absolute;border:1px solid #2864e7;background:#2864e71a;pointer-events:none;z-index:2001}.mk-select-mode .image-item{cursor:crosshair!important}@media(max-width:600px){.mk-v3 .mk-v3-canvas-caption{gap:10px;padding:8px 10px}.mk-editor-selection-hint{font-size:11px}.mk-editor-history-tools button{width:32px;height:32px}}

#editor-group-bounds{position:absolute;border:1px solid #2864e7;pointer-events:none;z-index:2003;box-sizing:border-box}#editor-group-bounds[hidden]{display:none}#editor-group-bounds button{position:absolute;width:28px;height:28px;margin:-14px;padding:0;border:0;background:transparent;pointer-events:auto;touch-action:none;display:grid;place-items:center}#editor-group-bounds button::after{content:"";width:12px;height:12px;border-radius:50%;background:#2864e7;border:2px solid white;box-shadow:0 0 0 1px #2864e7}#editor-group-bounds button:focus-visible{outline:2px solid #2864e7;outline-offset:2px;border-radius:50%}#editor-group-bounds [data-corner="nw"]{left:0;top:0;cursor:nwse-resize}#editor-group-bounds [data-corner="ne"]{left:100%;top:0;cursor:nesw-resize}#editor-group-bounds [data-corner="sw"]{left:0;top:100%;cursor:nesw-resize}#editor-group-bounds [data-corner="se"]{left:100%;top:100%;cursor:nwse-resize}

/* Exact image sizes and format access share the same menu in both editor views. */
.mk-v3 #download-dropdown{padding:0;width:min(320px,calc(100vw - 32px));max-height:calc(100dvh - 150px);overflow:auto;border:1px solid var(--studio-line);border-radius:16px;box-shadow:0 16px 48px #20342c24;right:0;left:auto}
.mk-download-sizes{padding:18px 18px 14px;border-bottom:1px solid var(--studio-line,#e3e7e2)}
.mk-download-label{display:block;margin-bottom:10px;font-size:12px;font-weight:600;color:var(--studio-muted,#60706a)}
.mk-download-scale-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.mk-download-scale-options button{display:grid;gap:3px;padding:10px 4px;border:1px solid var(--studio-line,#e3e7e2);border-radius:9px;background:#f8faf7;color:#59676a;text-align:center}
.mk-download-scale-options button strong{font-size:19px;line-height:1.2;font-weight:600}.mk-download-scale-options button span{font-size:11px;line-height:1.4}
.mk-download-scale-options button[aria-pressed=true]{border-color:var(--studio-blue,#2864e7);background:#edf3ff;color:var(--studio-blue,#2864e7)}
#download-size-label{font-size:17px;font-weight:600;color:var(--studio-ink,#233136);text-align:center;margin:12px 0 0;font-variant-numeric:tabular-nums}
.mk-download-option{display:flex;align-items:center;gap:12px;width:100%;padding:15px 18px;text-align:left;border:0;border-bottom:1px solid #edf0eb;background:#fff;color:#25343a}
.mk-download-option:hover{background:#f5f8f3}.mk-download-file{display:grid;place-items:center;width:38px;height:40px;border:1px solid #dce4e8;border-radius:8px;background:#f3f6fa;color:#42617f;font-size:10px;font-weight:700;flex-shrink:0}
.mk-download-description{display:flex;flex:1;flex-direction:column;gap:4px}.mk-download-description strong{font-size:14px;font-weight:600;line-height:1.3}.mk-download-description small{font-size:11px;line-height:1.3;color:#738187}
.mk-download-badge{border-radius:4px;background:#edf2fc;color:#3164b3;padding:4px 6px;font-size:10px;font-weight:600}.mk-download-badge.is-free{background:#edf5e9;color:#4d7042}
.mk-download-note{margin:0;padding:12px 18px 15px;font-size:11px;line-height:1.5;color:#718078}
.mk-download-option:focus-visible,.mk-download-scale-options button:focus-visible{outline:2px solid var(--studio-blue,#2864e7);outline-offset:-2px}
.mk-download-option[aria-busy=true]{opacity:.55;cursor:progress}

.mk-v3 #download-dropdown .mk-download-scale-options button{border:1px solid var(--studio-line,#e3e7e2)}
.mk-v3 #download-dropdown .mk-download-scale-options button[aria-pressed=true]{border-color:var(--studio-blue,#2864e7)}

/* Shared selection controls in Studio, Split View and narrow editors. */
#editor-group-actions{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;width:max-content;max-width:calc(100% - 24px);padding:8px;background:#fff;border:1px solid #dce2df;border-radius:12px;box-shadow:0 4px 20px #18282622;z-index:2010;font-size:12px;line-height:1.4;box-sizing:border-box}
#editor-group-actions[hidden],#editor-group-actions [hidden]{display:none}
#editor-group-actions .mk-selection-summary,#editor-group-actions .mk-selection-transforms{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:center}
#editor-group-actions .mk-selection-summary>span{margin:0 6px;color:#536469;white-space:nowrap}
#editor-group-actions button{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:32px;min-height:32px;border:0;background:#f1f4f2;border-radius:7px;padding:5px 7px;color:#536469;font:inherit;white-space:nowrap;cursor:pointer}
#editor-group-actions button:hover{background:#eaf0ff;color:#2864e7}
#editor-group-actions button:focus-visible{outline:2px solid #2864e7;outline-offset:1px}
#editor-group-actions button[aria-label="Delete selected objects"]{color:#bf4545}
#editor-group-actions small{font-size:10px}
#editor-group-actions output{color:#2864e7;min-width:35px;text-align:center}
#editor-group-bounds [data-action="rotate"]{width:32px;height:32px;margin:-16px;border:1px solid #2864e7;border-radius:50%;background:white;color:#2864e7;cursor:grab;box-shadow:0 2px 6px #18282622}
#editor-group-bounds [data-action="rotate"]::after{display:none}