.screenshot-studio{border:1px solid var(--border);background:var(--surface);border-radius:16px;margin-block:24px;overflow:hidden}.tool-work-page:has(.screenshot-studio){max-width:none;padding:8px 12px 12px}.shot-toolbar{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 14px;display:flex}.shot-toolbar>.tool-workspace-title{margin-right:auto}.shot-eyebrow{letter-spacing:.12em;color:var(--text-muted);font-size:10px}.screenshot-studio button{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:9px;justify-content:center;align-items:center;gap:7px;min-height:42px;padding:9px 12px;font-size:12px;transition:background .18s,border-color .18s;display:inline-flex}.screenshot-studio button:hover:not(:disabled),.screenshot-studio button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent)}.screenshot-studio button:disabled{opacity:.45;cursor:default}.screenshot-studio button:focus-visible,.screenshot-studio input:focus-visible,.screenshot-studio select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.shot-workspace{grid-template-columns:260px minmax(0,1fr) 270px;min-height:560px;display:grid}.shot-inspector{border:0;flex-direction:column;gap:15px;min-width:0;margin:0;padding:18px;display:flex}.shot-inspector>legend{float:left;align-items:center;gap:8px;width:100%;margin-bottom:12px;font-size:14px;font-weight:600;display:flex}.shot-inspector p,.shot-caption,.shot-export small,.shot-limitations p{color:var(--text-muted);font-size:11px;line-height:1.7}.screenshot-studio label{color:var(--text-muted);gap:6px;min-width:0;font-size:11px;display:grid}.screenshot-studio input,.screenshot-studio select{background:var(--page);border:1px solid var(--border);width:100%;min-width:0;min-height:38px;color:var(--text);font:inherit;border-radius:7px;padding:7px}.screenshot-studio input[type=color]{cursor:pointer;padding:3px}.shot-pair{grid-template-columns:1fr 1fr;gap:9px;display:grid}.shot-swatches{gap:8px;display:flex}.screenshot-studio .shot-swatches button{border:2px solid var(--border);border-radius:50%;width:34px;min-height:34px;padding:0}.shot-center{background:var(--page);border-inline:1px solid var(--border);flex-direction:column;min-width:0;display:flex}.shot-canvas-controls{justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;font-size:11px;display:flex}.shot-canvas-controls label{align-items:center;gap:8px;display:flex}.shot-canvas-controls select{width:74px}.shot-stage{background-image:radial-gradient(var(--border) .7px, transparent .7px);background-size:16px 16px;flex:1;align-items:center;min-height:390px;max-height:850px;padding:30px;display:grid;overflow:auto}.screenshot-studio{margin-block:0}.shot-section{border-bottom:1px solid var(--border);width:100%;padding-bottom:14px}.shot-section>summary{cursor:pointer;margin-left:12px;padding-block:4px;font-size:12px;font-weight:600;list-style-position:outside}.shot-section>summary>span{float:right;color:var(--text-muted);font-size:10px;font-weight:400}.shot-section[open]{gap:14px;display:grid}.shot-look-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.screenshot-studio .shot-look-grid>button{text-align:left;border-radius:9px;flex-direction:column;align-items:stretch;gap:6px;padding:5px;font-size:10px;display:flex}.shot-look-grid>button>span:last-child{padding:2px 4px}.shot-look-art{border-radius:5px;place-items:center;height:58px;display:grid;overflow:hidden}.shot-look-art>span{background:#f3f5f8;border-radius:3px;width:62%;height:66%;padding:4px;display:block;overflow:hidden;box-shadow:0 5px 8px #14223833}.shot-look-art>span[data-frame=phone]{border:3px solid #202630;border-radius:7px;width:25%;height:90%;padding:0}.shot-look-art>span[data-frame=laptop]{border:3px solid #202630;border-bottom:5px solid #8995a5;padding:0}.shot-look-art>span[data-frame=glass]{background:#fff6;border:1px solid #fffa}.shot-look-art>span[data-frame=polaroid]{padding-bottom:8px}.shot-look-art img{object-fit:cover;border-radius:1px;width:100%;height:100%}.shot-mini-content{background:linear-gradient(#a4b2cb 0 12%,#0000 12% 25%,#dbe0e9 25% 37%,#0000 37% 50%,#dbe0e9 50% 62%,#0000 62%);width:100%;height:100%;display:block}.shot-swatches{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.screenshot-studio .shot-swatches button{aspect-ratio:1;border-width:1px;border-radius:7px;width:100%;min-width:0;min-height:28px}.screenshot-studio .shot-swatches button[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}.shot-range{gap:10px!important}.shot-range>span{justify-content:space-between;gap:10px;display:flex}.shot-range output{color:var(--text);font-variant-numeric:tabular-nums}.screenshot-studio .shot-range input{min-height:24px;accent-color:var(--accent);background:0 0;border:0;padding:0}.shot-shadow-presets{grid-template-columns:1fr 1fr;gap:6px;display:grid}.shot-insight{border:1px solid var(--border);background:var(--page);border-radius:12px;gap:12px;padding:14px;display:grid}.shot-insight-heading{align-items:center;gap:7px;font-size:12px;display:flex}.shot-local-dot{color:var(--success);background:var(--surface);border-radius:5px;margin-left:auto;padding:4px;font-size:9px}.shot-insight dl{gap:8px;font-size:10px;display:grid}.shot-insight dl>div{justify-content:space-between;gap:6px;display:flex}.shot-insight dt{color:var(--text-muted)}.shot-insight dd{text-align:right}.shot-detected-palette{gap:5px;display:flex}.shot-detected-palette>span{border:1px solid var(--border);border-radius:5px;flex:1;height:24px}.shot-insight p,.shot-insight small{font-size:10px;line-height:1.7}.shot-insight small{color:var(--text-muted)}.shot-insight button{width:100%}.shot-quality-ok{align-items:center;gap:5px;display:flex}.shot-quality-warning{color:var(--danger)!important}.shot-annotation-heading{margin:0;font-size:13px;font-weight:600}@media (min-width:1151px){.shot-workspace{height:calc(100dvh - 280px);min-height:420px}.shot-inspector{max-height:none;overflow-y:auto}.shot-center{overflow:hidden}.shot-stage{min-height:0;max-height:none;padding:28px;overflow:auto}.shot-preview-wrap{max-height:none}.shot-preview-wrap img{object-fit:contain}body:has(.screenshot-studio) .site-footer{display:none}.shot-layers{padding:14px}}@media (max-width:1150px){.shot-look-art{height:52px}.shot-insight{grid-column:1/-1}}@media (max-width:650px){.shot-inspector>.shot-section{grid-column:1/-1}.shot-look-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shot-swatches{grid-column:1/-1;grid-template-columns:repeat(6,minmax(0,1fr))}.screenshot-studio .shot-swatches button{min-height:36px}}.shot-preview-wrap{background:repeating-conic-gradient(#d6d6d6 0% 25%,#f4f4f4 0% 50%) 0/16px 16px;margin:auto;position:relative;box-shadow:0 12px 32px #00000018}.shot-preview-wrap img{object-fit:contain;width:100%;height:100%;display:block}.shot-empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:350px;padding:36px 12px;display:flex}.shot-empty svg{color:var(--accent)}.shot-empty h2{max-width:310px;font-size:22px;line-height:1.3}.shot-empty p{max-width:270px;font-size:12px;line-height:1.8}.shot-empty small{color:var(--text-muted);font-size:10px}.screenshot-studio .shot-placement{border:2px dashed var(--accent);width:100%;height:100%;color:var(--text);cursor:crosshair;background:#00000010;align-items:flex-start;padding-top:20px;position:absolute;inset:0}.shot-caption{border-top:1px solid var(--border);justify-content:space-between;gap:12px;padding:12px 18px;font-size:10px;display:flex}.shot-annotation-tools{grid-template-columns:1fr 1fr;gap:7px;display:grid}.shot-layer-list{gap:5px;max-height:220px;display:grid;overflow:auto}.shot-layer-list button{overflow-wrap:anywhere;justify-content:flex-start}.shot-layer-list span{color:var(--text-muted)}.shot-layer-settings{border-top:1px solid var(--border);gap:14px;padding-top:14px;font-size:12px;display:grid}.shot-layer-actions{gap:5px;display:flex}.shot-export{border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:10px;padding:16px;display:flex}.shot-export>div:first-child{flex:1;min-width:200px}.shot-export p{margin-bottom:5px;font-size:12px}.shot-export small{font-size:10px}.shot-export .shot-export-primary{background:var(--accent-strong);color:var(--on-accent)}.shot-error{color:var(--danger);padding:14px 18px;font-size:13px}.shot-limitations{border-top:1px solid var(--border);padding:10px 16px;font-size:12px}.shot-limitations p{margin-top:10px}@media (min-width:1000px){.shot-inspector{max-height:850px;overflow-y:auto}}@media (max-width:1150px){.shot-workspace{grid-template-columns:190px minmax(0,1fr)}.shot-layers{border-top:1px solid var(--border);grid-column:1/-1}.shot-layer-settings,.shot-layer-list{grid-template-columns:repeat(3,minmax(0,1fr))}.shot-annotation-tools{display:flex}.shot-center{border-right:0}}@media (max-width:650px){.shot-export{grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.shot-export>div:first-child{grid-column:1/-1;min-width:0}.shot-export .download-button{grid-column:1/-1}.shot-annotation-tools{grid-template-columns:1fr 1fr;display:grid}.shot-inspector>.shot-pair{grid-column:1/-1}.shot-workspace{flex-direction:column;display:flex}.shot-center{border:0;border-bottom:1px solid var(--border);order:-1}.shot-stage{min-height:300px;padding:16px}.shot-inspector{grid-template-columns:1fr 1fr;display:grid}.shot-inspector>legend,.shot-swatches,.shot-inspector details,.shot-layers>*{grid-column:1/-1}.shot-layer-settings,.shot-layer-list{grid-template-columns:1fr}.shot-export label{flex:1}.shot-export>div:first-child{flex-basis:100%;width:100%}}@media (prefers-reduced-motion:reduce){.screenshot-studio button{transition:none}}.shot-controls-pane{min-width:0;min-height:0;overflow:auto}.shot-controls-pane>.shot-inspector{max-height:none;overflow:visible}.shot-controls-pane:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}@media (max-width:1150px){.shot-layers-pane{grid-column:1/-1}}@media (max-width:650px){.shot-toolbar .shot-action-label{display:none}.shot-toolbar>button{min-width:42px}}@media (pointer:coarse){.shot-toolbar>button{min-width:44px;min-height:44px}}