.app{display:block;width:100%;height:100vh;min-height:0}
.app>.panel{display:none}
.workspace{width:100%;height:100vh;min-height:0}
.site-dock{width:min(454px,calc(100vw - 24px));top:16px;left:50%;transform:translateX(-50%);padding:7px 9px;gap:8px;min-height:48px;border-radius:9px;box-shadow:0 8px 24px #0002;background:rgba(0,0,0,.82);backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px);color:#f6f5f1;cursor:grab;touch-action:none;user-select:none}
.site-dock.open{border-radius:9px 9px 0 0}
.site-dock .dock-name{font-size:11px;flex:none;min-width:0;overflow:hidden;text-overflow:ellipsis}
.site-dock .dock-name small{font-size:10px}
.site-dock nav{flex:1;min-width:0}
.site-dock nav a{font-size:11px;padding:8px 6px;flex:1;text-align:center}
.site-dock .dock-action{font:inherit;font-size:11px;border:0;border-radius:3px;background:#313131;color:#f6f5f1;padding:7px 8px;cursor:pointer;white-space:nowrap}
.site-dock .dock-action:hover,.site-dock .dock-action:focus-visible{background:#4a4a4a}
.site-dock.dragging{cursor:grabbing}
.site-dock .panel{cursor:auto;touch-action:pan-y;user-select:text}
.site-dock .panel{display:none;position:absolute;left:0;top:100%;width:100%;max-height:calc(100vh - var(--dock-top,16px) - 55px);overflow-y:auto;overscroll-behavior:contain;background:rgba(0,0,0,.82);backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px);color:#f6f5f1;border:0;border-radius:0 0 9px 9px;padding:19px 25px 28px;box-shadow:0 18px 38px #0003;scrollbar-color:#555 #151515;scrollbar-width:thin;z-index:1}
.site-dock.open .panel{display:block}
.site-dock .panel h1{color:#f6f5f1;font-size:30px;margin-bottom:20px}
.site-dock .panel .section{border-color:#454545;margin-bottom:24px}
.site-dock .panel .section h2{color:#f6f5f1}
.site-dock .panel .label,.site-dock .panel .slider label,.site-dock .panel .slider-row label,.site-dock .panel .toggle,.site-dock .panel .swatch,.site-dock .panel .status{color:#d9d7d2}
.site-dock .panel .muted,.site-dock .panel .bottom{color:#aaa7a2}
.site-dock .panel .seg button,.site-dock .panel .tabs button,.site-dock .panel .actions button,.site-dock .panel .exports button,.site-dock .panel .export button,.site-dock .panel .palette-actions button,.site-dock .panel .upload button{background:#383838;color:#f6f5f1}
.site-dock .panel .seg .active,.site-dock .panel .tabs .active,.site-dock .panel .active{background:#f6f5f1!important;color:#111!important}
.site-dock .panel .button,.site-dock .panel .upload label,.site-dock .panel .transfer,.site-dock .panel select,.site-dock .panel .select{background:#f6f5f1;color:#111}
.site-dock .panel input[type=range],.site-dock .panel input[type=checkbox]{accent-color:#dedbd4}
.site-dock .panel button:focus-visible,.site-dock .panel input:focus-visible,.site-dock .panel select:focus-visible{outline:2px solid #f6f5f1;outline-offset:2px}
.site-dock .panel .palette-row button{color:#111}
.site-dock .panel .palette-row .color-swatch{border-color:#ddd}
.site-dock .panel .file-nav select{min-width:0}
.site-dock .panel #shortcuts kbd{background:#383838;color:#fff}
.workspace .preview{max-width:min(78%,950px);max-height:76%}
.workspace .hint{left:50%;bottom:12px;transform:translateX(-50%);display:flex;flex-direction:column;gap:3px;width:max-content;max-width:calc(100% - 24px);padding:8px 12px;border-radius:3px;background:#faf8f4e8;color:#625f5a;text-align:center;line-height:1.35;white-space:normal}
@media(max-width:750px){.app{display:block;height:100vh;min-height:0}.workspace{height:100vh;min-height:0}.site-dock{top:8px;--dock-top:8px}.site-dock .panel{padding:16px 18px 24px}.site-dock .panel h1{font-size:25px}.site-dock .dock-name small{display:none}}
@media(max-width:470px){.site-dock{gap:4px;padding:6px}.site-dock .dock-name{display:none}.site-dock nav{flex:1}.site-dock nav a{padding:7px 5px}.site-dock .dock-action{font-size:11px;padding:7px 6px}.workspace .preview{max-width:90%;max-height:82%}.workspace .hint{font-size:11px;padding:6px 8px}}

/* Keep the bitmap color picker in the same visual system as the floating controls. */
.color-dialog{width:min(454px,calc(100vw - 24px));max-height:calc(100vh - 32px);padding:22px 24px 20px;border:0;border-radius:9px;background:#111;color:#f6f5f1;box-shadow:0 20px 60px #0006;scrollbar-color:#555 #151515}
.color-dialog::backdrop{background:#0b0b0b99;backdrop-filter:blur(3px)}
.color-dialog .dialog-head{gap:16px;margin-bottom:14px}
.color-dialog .dialog-head h2{font-family:Georgia,'Times New Roman',serif;font-size:29px;font-weight:normal;letter-spacing:-.025em;line-height:1.1;text-transform:none}
.color-dialog .dialog-head button{width:32px;height:32px;flex:none;border:0;border-radius:3px;background:#333;color:#f6f5f1;font-size:25px;cursor:pointer}
.color-dialog .dialog-box{border:0;border-top:1px solid #484848;border-radius:0;padding:16px 0 7px;margin:0;background:transparent}
.color-dialog .dialog-box strong,.color-dialog .swatches label,.color-dialog .brightness{font-size:12px;font-weight:normal;letter-spacing:.035em;text-transform:uppercase;color:#d6d3cd}
.color-dialog .wheel-layout{gap:16px;justify-content:space-between;margin:15px 0 7px}
.color-dialog #colorWheel{width:min(250px,58vw);height:min(250px,58vw);flex:none}
.color-dialog .swatches{gap:16px;min-width:76px}
.color-dialog .sample{width:43px;height:43px;border:1px solid #aaa7a2;border-radius:3px;margin-top:7px}
.color-dialog .brightness{margin-top:15px}
.color-dialog .brightness input{accent-color:#dedbd4;margin-top:8px}
.color-dialog #rgbCode{background:#252525;color:#f6f5f1;border:1px solid #77736f;border-radius:3px;font-size:15px;padding:11px;margin-top:10px}
.color-dialog #rgbCode:focus-visible{outline:2px solid #f6f5f1;outline-offset:2px}
.color-dialog .muted{color:#a9a6a0;font-size:12px}
.color-dialog .error{color:#ffb6b6}
.color-dialog .dialog-actions{gap:7px;margin-top:18px}
.color-dialog .dialog-actions button{border:0;border-radius:3px;background:#353535;color:#f6f5f1;font-size:12px;letter-spacing:.035em;padding:10px 15px}
.color-dialog .dialog-actions #colorApply{background:#f6f5f1;color:#111}
.color-dialog button:hover{filter:brightness(1.18)}
@media(max-width:470px){.color-dialog{padding:18px}.color-dialog #colorWheel{width:min(220px,56vw);height:min(220px,56vw)}.color-dialog .wheel-layout{gap:10px}.color-dialog .swatches{min-width:66px}.color-dialog .sample{width:38px;height:38px}}

/* Stack the studio name above the three tool tabs at every viewport. */
.site-dock{flex-direction:column;align-items:stretch;gap:6px;padding:10px 9px 7px}
.site-dock .dock-name{display:block;font-size:12px;text-align:center;line-height:1.3}
.site-dock nav{width:100%;flex:none}
.site-dock .panel{max-height:calc(100vh - var(--dock-top,16px) - 82px)}
.color-dialog .dialog-head{cursor:grab;touch-action:none;user-select:none}
.color-dialog .dialog-head:active{cursor:grabbing}
.color-dialog::backdrop{background:transparent;backdrop-filter:none}

.blur-parameters .inactive-parameter{opacity:.35}
.blur-parameters input:disabled{cursor:not-allowed}

.site-dock .panel .inactive-parameter{opacity:.35}

.site-dock .export-filename{display:grid;gap:8px;margin:18px 0 12px;order:4;width:100%}
.site-dock .export-filename label{font-size:12px;color:#d9d7d2}
.site-dock .export-filename input{box-sizing:border-box;width:100%;min-width:0;border:1px solid #666;border-radius:3px;background:#383838;color:#f6f5f1;padding:9px;font:inherit;font-size:12px}
.site-dock .export-filename input::placeholder{color:#aaa7a2}
.site-dock .export-filename p{margin:0;font-size:11px;line-height:1.5}

/* Tool uploads share Copy Room's placement and dimensions. */
.site-dock .panel>.studio-upload{display:flex;flex-direction:column;gap:7px;margin:0 0 18px;padding:0}
.site-dock .studio-upload :is(.studio-upload-title,.studio-upload-formats){font:400 12px/1.15 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#d9d7d2;letter-spacing:0}
.site-dock .studio-upload .upload{display:grid;grid-template-columns:1fr auto auto;gap:7px;margin:0}
.site-dock .studio-upload .upload label{grid-column:1/-1;display:flex;align-items:center;justify-content:center;width:100%;height:38px;min-height:38px;padding:0;border-radius:3px;background:#f6f5f1;color:#111;font:400 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0;cursor:pointer}
.site-dock .studio-upload .upload button{min-height:28px;font-size:12px}
.site-dock .studio-upload .upload input{display:none}
.site-dock .studio-upload.drag-over label{outline:2px solid #f6f5f1;outline-offset:3px}