*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#252a31;background:#f3f4f6}button,input,select,textarea{font:inherit}button,summary,input[type=checkbox],input[type=color],input[type=range]{cursor:pointer}button{color:inherit}button:disabled,input:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #345c85;outline-offset:2px}.lab-app{font-size:13px}.lab-header{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;background:#fff;border-bottom:1px solid #cdd2d8}.lab-header h1{font-size:19px;margin:0 0 5px;letter-spacing:1px}.lab-header p{margin:0;color:#626a74}.lab-app button{border:1px solid #c6cdd5;border-radius:4px;padding:7px 10px;background:#fff}.lab-app button[aria-pressed=true]{background:#e4ebf2;border-color:#71879e}.lab-app input:not([type=range]):not([type=checkbox]):not([type=color]),.lab-app select,.lab-app textarea{min-width:0;max-width:100%;border:1px solid #c6cdd5;border-radius:4px;background:#fff;color:inherit;padding:7px}.lab-layout{display:grid;grid-template-columns:306px minmax(0, 1fr);height:calc(100dvh - 76px);min-height:480px}.lab-controls-hidden{grid-template-columns:minmax(0, 1fr)}.design-controls{overflow-y:auto;background:#fff;border-right:1px solid #cdd2d8;padding:16px}.dc-title h2{margin:0 0 6px;font-size:18px}.dc-title p{color:#626a74;line-height:1.4;margin:0 0 15px}.design-controls details{border-top:1px solid #e2e5e9;padding:12px 0}.design-controls summary{font-weight:600;font-size:14px}.dc-section{padding-top:12px;display:grid;gap:12px}.dc-section>label{display:grid;gap:5px}.dc-section select,.dc-section textarea,.dc-section input:not([type=checkbox]):not([type=color]){width:100%}.dc-buttons,.dc-segments{display:flex;flex-wrap:wrap;gap:6px}.dc-segments button{padding:6px 8px}.dc-hint{color:#626a74;font-size:12px;line-height:1.4;margin:0}.dc-number label{display:flex;align-items:center;justify-content:space-between;gap:8px}.dc-number label input{width:73px !important;text-align:right}.dc-number small{color:#626a74}.dc-number>input{width:100%;margin:6px 0 0}.dc-color{display:grid;grid-template-columns:1fr 30px 78px;align-items:center;gap:6px}.dc-color input[type=color]{padding:0;width:30px;height:27px;border:1px solid #c6cdd5}.dc-color input:not([type=color]){font:11px monospace;padding:5px}.dc-flags>label{display:flex;align-items:center;gap:8px}.dc-file{display:none}.lab-app .dc-link{border:0;padding:0;background:rgba(0,0,0,0);text-align:left;text-decoration:underline}.lab-main{min-width:0;min-height:0;display:flex;flex-direction:column}.lab-preview-controls{padding:14px 20px 10px;border-bottom:1px solid #d9dde2;background:#fafbfc}.lab-viewport-buttons{display:flex;flex-wrap:wrap;gap:6px}.lab-preview-options{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:12px}.lab-preview-options label{display:flex;align-items:center;gap:6px}.lab-preview-options input[type=number]{width:80px}.lab-preview-size{color:#626a74;margin:10px 0 0;font-size:12px}.lab-notice{padding:10px 20px;background:#f3f6f9;color:#4b5665;border-bottom:1px solid #d9dde2;min-height:36px}.lab-notice-error{color:#9b2424;background:#fff1f1}.lab-stage{overflow:auto;flex:1;padding:20px;min-height:300px}.lab-preview-footprint{position:relative;margin:0 auto}.lab-preview-scale{position:absolute;inset:0 auto auto 0;transform-origin:top left}.mp-preview{container:player-lab/inline-size;font-size:var(--lab-font-size);color:var(--lab-text);font-weight:var(--lab-font-weight);border:1px solid #cdd2d8;box-shadow:0 3px 14px rgba(37,42,49,.062745098);overflow:hidden;--mp-xs: calc(var(--lab-space-xs) * var(--lab-content-density));--mp-sm: calc(var(--lab-space-sm) * var(--lab-content-density));--mp-md: calc(var(--lab-space-md) * var(--lab-content-density));--mp-lg: calc(var(--lab-space-lg) * var(--lab-content-density))}.mp-preview button,.mp-preview input,.mp-preview select,.mp-preview textarea{font-size:inherit;font-weight:inherit}.mp-preview button{border:var(--lab-border-width) solid var(--lab-border);border-radius:var(--lab-radius);padding:var(--mp-sm) var(--mp-md);background:var(--lab-surface);color:var(--lab-text);overflow-wrap:anywhere}.mp-preview input:not([type=range]):not([type=checkbox]):not([type=radio]),.mp-preview select{padding:var(--mp-sm);border:var(--lab-border-width) solid var(--lab-border);border-radius:var(--lab-radius);background:var(--lab-surface);color:var(--lab-text);width:100%}.mp-preview input[type=checkbox],.mp-preview input[type=radio],.mp-preview input[type=range]{accent-color:var(--lab-primary)}.mp-preview button[aria-pressed=true],.mp-preview .mp-selected{background:var(--lab-selected);border-color:var(--lab-primary)}.mp-preview button:focus-visible,.mp-preview input:focus-visible,.mp-preview select:focus-visible{outline-color:var(--lab-primary)}.mp-preview label,.mp-preview .mp-label,.mp-preview legend{font-size:var(--lab-label-size)}.mp-preview label,.mp-preview strong,.mp-preview span,.mp-preview small,.mp-preview output{overflow-wrap:anywhere}.mp-shell{height:100%;display:flex;flex-direction:column;background:var(--lab-background)}.mp-navbar{flex-shrink:0;min-height:var(--lab-navbar-height);display:flex;flex-wrap:wrap;align-items:center;gap:var(--mp-md);padding:var(--mp-sm) var(--mp-lg);background:var(--lab-surface);border-bottom:var(--lab-border-width) solid var(--lab-border)}.mp-project{display:grid;gap:var(--mp-xs);flex:1 1 200px;min-width:120px;max-width:500px}.mp-unit{display:grid;gap:var(--mp-xs);min-width:70px}.mp-dimensions{display:flex;align-items:center;gap:var(--mp-xs)}.mp-price{display:grid;gap:var(--mp-xs);margin-left:auto}.mp-price strong{font-size:var(--lab-heading-size)}.mp-workspace{display:flex;flex:1;min-height:0;overflow:hidden}.mp-product{flex:1;min-width:0;display:flex;flex-direction:column;padding:var(--mp-lg);gap:var(--mp-sm)}.mp-product-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--mp-sm);font-size:var(--lab-label-size);color:var(--lab-mutedText)}.mp-product-art{min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.mp-product-art svg{flex:1;min-height:0;max-height:100%;width:100%;max-width:440px}.mp-dimension-label{flex-shrink:0;padding-top:var(--mp-xs);font-size:var(--lab-label-size);color:var(--lab-mutedText)}.mp-product-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--mp-sm);color:var(--lab-mutedText);font-size:var(--lab-label-size)}.mp-toolbar{display:flex;gap:var(--mp-xs)}.mp-panel{flex:0 0 clamp(var(--lab-panel-min),var(--lab-panel-width),var(--lab-panel-max));width:clamp(var(--lab-panel-min),var(--lab-panel-width),var(--lab-panel-max));max-width:75%;display:flex;flex-direction:column;min-height:0;background:var(--lab-panel);border-left:var(--lab-border-width) solid var(--lab-border)}.mp-tabs{display:flex;flex-shrink:0;gap:var(--mp-xs);padding:var(--mp-md);border-bottom:var(--lab-border-width) solid var(--lab-border)}.mp-tabs button{flex:1;min-width:0;font-size:var(--lab-heading-size)}.mp-tabs button[aria-selected=true]{border-color:var(--lab-primary);background:var(--lab-selected)}.mp-panel-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--mp-md)}.mp-content{width:var(--lab-content-width);margin:0 auto}.mp-category{margin-bottom:var(--mp-md)}.mp-category h3{margin:0 0 var(--mp-md);font-size:var(--lab-heading-size)}.mp-category h3 button{width:100%;display:flex;justify-content:space-between;align-items:flex-start;text-align:left;gap:var(--mp-sm)}.mp-field{display:grid;gap:var(--mp-xs);margin:0 0 var(--mp-lg);min-width:0;padding:0;border:0}.mp-field label,.mp-field legend{display:block}.mp-field output{display:block}.mp-field legend{margin-bottom:var(--mp-xs)}.mp-muted{color:var(--lab-mutedText)}.mp-input-unit{display:flex;align-items:center;gap:var(--mp-sm)}.mp-input-unit input{min-width:0}.mp-range{display:flex;gap:var(--mp-sm);align-items:center}.mp-range input{flex:1;min-width:0}.mp-range output{white-space:nowrap}.mp-options{display:flex;flex-wrap:wrap;gap:var(--mp-sm)}.mp-options label{border:var(--lab-border-width) solid var(--lab-border);border-radius:var(--lab-radius);background:var(--lab-surface);padding:var(--mp-sm);display:flex;gap:var(--mp-xs);align-items:center;min-width:0;max-width:100%;cursor:pointer}.mp-options label.mp-selected{border-color:var(--lab-primary);background:var(--lab-selected)}.mp-options input{flex-shrink:0}.mp-options-images{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr))}.mp-options-images label{display:flex;flex-direction:column;align-items:stretch}.mp-option-image{display:flex;align-items:center;justify-content:center;height:68px;border-radius:var(--lab-radius);background:var(--lab-background)}.mp-option-image span{width:22px;height:50px;border:3px solid var(--lab-mutedText)}.mp-option-image-1 span{border-radius:12px 12px 0 0}.mp-option-image-2 span{border-width:1px;background:var(--lab-selected)}.mp-actions{flex-shrink:0;display:flex;flex-wrap:wrap;gap:var(--mp-sm);padding:var(--mp-md);border-top:var(--lab-border-width) solid var(--lab-border);background:var(--lab-panel)}.mp-actions button:first-child{background:var(--lab-primary)}.mp-active-material{display:flex;gap:var(--mp-sm);align-items:center;margin-bottom:var(--mp-lg)}.mp-active-material>div{min-width:0;display:grid;gap:var(--mp-xs)}.mp-active-material small{color:var(--lab-mutedText)}.mp-swatch{width:42px;height:42px;flex-shrink:0;border-radius:var(--lab-radius);border:var(--lab-border-width) solid var(--lab-border)}.mp-material-filters{display:flex;gap:var(--mp-sm);margin-bottom:var(--mp-md)}.mp-material-filters label{min-width:0;flex:1;display:grid;gap:var(--mp-xs)}.mp-material-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--mp-md)}.mp-preview .mp-material-card{display:flex;flex-direction:column;gap:var(--mp-xs);padding:var(--mp-sm);text-align:left;min-width:0}.mp-preview .mp-material-card strong{font-size:var(--lab-label-size)}.mp-preview .mp-material-card small{color:var(--lab-mutedText)}.mp-material-photo{height:75px;border-radius:var(--lab-radius);width:100%}.mp-material-state{font-size:var(--lab-label-size);color:var(--lab-mutedText)}.mp-pagination{display:flex;justify-content:space-between;align-items:center;gap:var(--mp-sm);margin:var(--mp-lg) 0;font-size:var(--lab-label-size)}.mp-error-example{color:var(--lab-error);font-size:var(--lab-label-size)}.mp-empty{color:var(--lab-mutedText)}@container player-lab (max-width: 767px){.mp-navbar{gap:var(--mp-sm);padding:var(--mp-sm) var(--mp-md)}.mp-project{flex-basis:100%;max-width:none}.mp-price{max-width:100%}.mp-workspace{flex-direction:column}.mp-product{flex:0 0 var(--lab-mobile-product);height:var(--lab-mobile-product);padding:var(--mp-md);min-height:100px}.mp-product-heading button,.mp-toolbar button{padding:var(--mp-xs) var(--mp-sm)}.mp-product-art svg{max-width:220px}.mp-product-footer>span{max-width:58%}.mp-panel{flex:1;width:100%;max-width:none;border-left:0;border-top:var(--lab-border-width) solid var(--lab-border)}.mp-panel-collapsed .mp-product{flex:1;height:auto}}@media(max-width: 900px){.lab-header{padding:12px;flex-wrap:wrap}.lab-layout{height:auto;grid-template-columns:minmax(0, 1fr)}.design-controls{max-height:400px;border-right:0;border-bottom:1px solid #cdd2d8}.lab-stage{max-height:1000px;min-height:600px}.lab-preview-controls{padding:12px}.lab-notice{padding:10px 12px}}