/* Direct controls sit beside the live preview on desktop and beneath it on phones. */
.preview-dock{background:#f7f7f1}.action-controls{background:#242d1e;border:1px solid #465738;border-radius:8px;padding:19px 20px 14px;margin:5px 0 13px;color:#edf2e6;scroll-margin-top:calc(var(--preview-height,290px) + 12px)}.action-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:18px}.action-heading .eyebrow{color:#a8b793;font-size:8px;letter-spacing:1.4px}.action-heading h2{font-size:24px;margin-top:5px;color:#edf2e6}.action-reset{font-size:10px;color:#d5e6a5;border:1px solid #64784b;border-radius:5px;padding:9px;min-height:34px}.action-reset:hover{background:#61754644}.action-slider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 22px}.action-slider label{font-size:11px;font-weight:600;color:#e2ebd4;line-height:1.5}.action-slider-head{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:4px}.slider-value{font-size:10px;font-variant-numeric:tabular-nums;color:#d7e7ac;border:1px solid #617149;background:#364629;border-radius:4px;padding:4px 7px;min-width:40px;min-height:28px}.slider-value:hover{background:#4d6238}.action-slider-row{display:flex;align-items:center;gap:7px}.slider-step{width:25px;height:32px;border-radius:4px;background:#36452a;color:#d5e6a5;font-size:20px;line-height:1;flex-shrink:0}.slider-step:hover{background:#52693b}.action-slider input[type=range]{--slider-fill:50%;width:100%;min-width:0;height:35px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;touch-action:pan-y}.action-slider input[type=range]::-webkit-slider-runnable-track{height:5px;background:linear-gradient(to right,#cadd9b 0 var(--slider-fill),#61714c var(--slider-fill) 100%);border-radius:8px}.action-slider input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:21px;width:21px;border-radius:50%;background:#d7e9ae;border:3px solid #f3f8e8;margin-top:-8px;box-shadow:0 1px 5px #0004}.action-slider input[type=range]::-moz-range-track{height:5px;background:#61714c;border-radius:8px}.action-slider input[type=range]::-moz-range-progress{height:5px;background:#cadd9b;border-radius:8px}.action-slider input[type=range]::-moz-range-thumb{height:17px;width:17px;border-radius:50%;background:#d7e9ae;border:3px solid #f3f8e8;box-shadow:0 1px 5px #0004}.slider-guide{display:flex;justify-content:space-between;margin:1px 32px 0;font-size:8px;color:#a0b18c}.action-shortcuts{display:flex;gap:6px;border-top:1px solid #53654188;padding-top:12px;margin-top:18px}.action-shortcuts button{flex:1;border:1px solid #536641;background:#314126;padding:9px 5px;border-radius:4px;font-size:10px;color:#c9dca3;min-height:34px}.action-shortcuts button:hover{background:#4c6237}.quick-color{border:1px solid #d1dbc2;background:#fff;border-radius:7px;padding:15px 18px;margin-bottom:17px}.quick-color-head{display:flex;align-items:center;gap:10px;margin-bottom:15px}.quick-color-head>div{margin-right:auto}.quick-color-head h3{font-size:14px;margin-top:5px}.quick-color-head .eyebrow{font-size:8px}.custom-color-label{display:flex;align-items:center;gap:7px;font-size:10px;color:#697e50}.custom-color-label input[type=color]{width:34px;height:33px;border:1px solid #becaad;border-radius:4px;padding:2px;background:#fff;cursor:pointer}.quick-color-head input[type=text]{width:77px;border:1px solid #d1dbc2;border-radius:4px;padding:8px 5px;color:#5c7442;font-size:10px;font-family:monospace;background:#f6f8ef}.quick-swatches{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:9px}.quick-swatches button{height:29px;width:29px;border-radius:50%;border:1px solid #c9cebd;outline:2px solid transparent;outline-offset:3px}.quick-swatches button.selected{outline-color:#516b35}.quick-swatches button:hover{transform:scale(1.09)}#advancedControls{padding:6px 0;font-size:10px}.mobile-content{display:none}
@media(min-width:1550px){.action-slider-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.action-controls{padding:22px 24px 16px}}
@media(max-width:1100px) and (min-width:961px){.action-controls{padding:17px 12px 12px}.action-slider-grid{gap:19px 12px}.action-slider label{font-size:10px}.quick-color{padding:14px 12px}.quick-color-head{gap:6px}.custom-color-label span{display:none}.slider-step{width:21px}.action-slider-row{gap:5px}.slider-guide{margin:0 26px}}
@media(max-width:960px){.studio{padding:15px 12px 12px}.studio-top{margin-bottom:12px}.studio-top h1{font-size:26px;margin-top:4px}.studio-top .eyebrow{font-size:8px}.studio-top .live-pill{font-size:7px}.preview-dock{position:sticky;top:0;z-index:4;padding-top:6px;padding-bottom:6px;box-shadow:0 10px 12px #f7f7f1;scroll-margin-top:0}.preview-dock .stage{height:clamp(135px,24dvh,220px)}.preview-dock .stage-toolbar{height:35px}.preview-dock .text-dock{margin:8px 0 0;padding:6px 8px 6px 11px}.preview-dock .text-dock textarea{height:33px;line-height:31px;resize:none}.preview-dock .text-dock .iconbutton{height:34px;width:34px}.stage-corner,.stage-bottom,.stage-index{font-size:6px}.action-controls{padding:16px 14px 13px;margin-top:13px;scroll-margin-top:calc(var(--preview-height,280px) + 12px)}.action-heading{margin-bottom:15px}.action-heading h2{font-size:24px}.action-heading .eyebrow{font-size:7px;letter-spacing:1px}.action-reset{min-height:37px;font-size:10px}.action-slider-grid{gap:20px 16px}.action-slider label{font-size:11px}.action-slider-row{gap:5px}.action-slider input[type=range]{height:40px}.action-slider input[type=range]::-webkit-slider-runnable-track{height:6px}.action-slider input[type=range]::-webkit-slider-thumb{width:27px;height:27px;border-width:3px;margin-top:-10.5px}.action-slider input[type=range]::-moz-range-track{height:6px}.action-slider input[type=range]::-moz-range-thumb{width:21px;height:21px;border-width:3px}.slider-step{width:27px;height:36px;font-size:21px}.slider-value{min-width:43px;min-height:32px;font-size:10px;padding:5px}.slider-guide{margin:0 32px;font-size:8px}.action-shortcuts{margin-top:16px;gap:8px}.action-shortcuts button{min-height:40px;font-size:11px}.quick-color{padding:15px 14px}.quick-color-head h3{font-size:14px}.quick-color-head{gap:8px;margin-bottom:17px}.quick-color-head input[type=text]{font-size:10px;width:76px}.custom-color-label{font-size:10px;gap:6px}.custom-color-label input[type=color]{width:37px;height:37px}.quick-swatches{gap:12px;margin:0 2px 12px}.quick-swatches button{width:29px;height:29px}#advancedControls{min-height:36px;font-size:11px}.mobile-content{display:block;margin-top:15px}.mobile-content .panel{margin-top:0;padding:20px 3px 15px;scroll-margin-top:calc(var(--preview-height,280px) + 12px)}.mobile-content .controls{max-height:none;overflow:visible}.mobile-content .font-list{min-height:100px}.studio .under-stage{margin-top:20px}.mobile-nav button.active{box-shadow:inset 0 2px 0 #b9d588}.controls details{scroll-margin-top:calc(var(--preview-height,280px) + 12px)}}
@media(max-width:380px){.action-slider-grid{gap:17px 12px}.action-controls{padding:14px 11px}.action-slider label{font-size:10px}.slider-step{width:23px}.slider-value{min-width:36px;font-size:9px}.slider-guide{margin:0 28px}.quick-color-head .custom-color-label span{display:none}.quick-swatches{gap:10px}.action-heading h2{font-size:23px}}
@media(max-width:960px) and (max-height:540px){.preview-dock .stage{height:90px}.preview-dock .stage-toolbar{height:30px}.preview-dock .text-dock{margin-top:4px}.studio-top{display:none}.stage-corner,.stage-bottom,.stage-index{display:none}}