.studio-title-row{justify-content:space-between;align-items:center;gap:22px;display:flex}.studio-title-row h1{font-size:clamp(40px,6.4vw,74px)}.studio-title-row p{color:var(--muted);font-size:var(--text-lead);margin-top:15px;line-height:1.7}.studio-title-row>svg{color:var(--accent);flex-shrink:0;width:40px;height:40px;display:none}.studio-workspace{border:1px solid var(--line);background:var(--paper);border-radius:5px;grid-template-columns:minmax(0,1fr);display:grid;overflow:clip}.studio-controls{display:contents}.studio-controls>.control-block{border-top:1px solid var(--line);order:2;min-width:0;margin:0;padding:22px}.studio-controls>.control-block:first-child{border-top:0;order:0}.studio-controls>.typeface-control{order:0}.control-block{margin-bottom:23px}.control-label{font-size:var(--text-small);justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;font-weight:600;display:flex}.control-label>span{font-size:var(--text-caption);color:var(--muted);font-variant-numeric:tabular-nums;font-weight:500}.studio-controls textarea,.studio-controls select{background:var(--paper);border:1px solid var(--line);width:100%;color:var(--ink);border-radius:3px;padding:12px;font-size:16px;line-height:1.6;display:block}.studio-controls textarea{resize:vertical;min-height:100px;max-height:250px}.studio-controls select{min-height:48px;padding-right:28px}.control-help{color:var(--muted);font-size:var(--text-small);margin-top:9px;line-height:1.6;display:block}a.control-help:hover{color:var(--accent)}.studio-controls input[type=range]{width:100%;margin:-8px 0;display:block}.sub-control{margin-top:18px}.ink-controls{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.custom-ink{cursor:pointer;min-height:44px;font-size:var(--text-small);border-radius:3px;align-items:center;gap:4px;font-weight:500;display:flex;position:relative}.custom-ink:hover{background:var(--soft)}.custom-ink:focus-within{outline:2px solid var(--accent);outline-offset:2px}.custom-ink input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.rainbow-swatch{flex-shrink:0;place-items:center;width:44px;height:44px;display:grid;position:relative}.rainbow-swatch:before{content:"";background:conic-gradient(#df6565,#e8b64f,#79aa64,#58a9b5,#7284cc,#b87ba8,#df6565);border:1px solid #0002;border-radius:50%;position:absolute;inset:7px}.rainbow-swatch>span{background:var(--surface);width:16px;height:16px;color:var(--ink);border-radius:50%;place-items:center;font-size:16px;font-weight:600;line-height:1;display:grid;position:relative}.custom-ink[data-selected=true] .rainbow-swatch:before{outline:1px solid var(--accent);outline-offset:3px}.ink-current{color:var(--muted);font-size:var(--text-caption);align-items:center;gap:8px;margin-top:10px;display:flex}.ink-current>span:first-child{border:1px solid var(--muted);background:var(--current-ink,#292b23);border-radius:50%;flex-shrink:0;width:12px;height:12px}.ink-current>span:last-child{margin-left:auto}.color-value{color:var(--muted);font-size:var(--text-caption);font-variant-numeric:tabular-nums;font-weight:500}.ink-presets{gap:0;display:flex}.ink-presets button{background:0 0;border:0;border-radius:50%;width:44px;height:44px;padding:0;transition:background .18s;position:relative}.ink-presets button:hover{background:var(--soft)}.ink-presets button:before{content:"";border:1px solid #0000;border-radius:50%;position:absolute;inset:7px}.ink-presets button[aria-pressed=true]:before{border-color:var(--accent)}.ink-presets button:after{content:"";background:var(--swatch);border:1px solid var(--muted);border-radius:50%;width:24px;height:24px;margin:auto;display:block}.background-controls{border:0;min-width:0;padding:0}.background-controls legend{padding:0}.segmented-control{border:1px solid var(--line);background:var(--paper);border-radius:4px;padding:3px;display:flex}.segmented-control label{flex:1;position:relative}.segmented-control input{opacity:0;width:1px;height:1px;position:absolute}.segmented-control span,.segmented-control button{min-height:44px;font-size:var(--text-small);color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:2px;justify-content:center;align-items:center;padding-inline:8px;font-weight:500;display:flex}.segmented-control input:checked+span,.segmented-control button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px #0000000d}.segmented-control input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-1px}.segmented-control button{flex:1}#studio-reset{color:var(--muted);font-size:var(--text-small);text-align:left;background:0 0;border:0;order:3;min-height:44px;margin:0 22px 22px;padding:0;font-weight:500}#studio-reset:hover{color:var(--accent)}.studio-canvas-panel{border-top:1px solid var(--line);background:var(--paper);flex-direction:column;order:1;min-width:0;padding:20px;display:flex}.canvas-heading,.canvas-footer{font-size:var(--text-caption);color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px;font-weight:500;display:flex}.canvas-heading{padding-bottom:20px}.canvas-heading .eyebrow{color:var(--ink)}#font-status[data-error]{color:var(--accent)}.canvas-stage{background-color:#f8f7f3;background-image:conic-gradient(#e8e6df 25%, transparent 0 50%, #e8e6df 0 75%, transparent 0);border:1px solid var(--line);background-size:20px 20px;justify-content:center;align-items:center;min-height:240px;max-height:420px;display:flex;overflow:auto}.canvas-stage[data-long=true]{align-items:start}.canvas-stage[data-background=ink]{background:#292b23}.canvas-stage[data-background=paper]{background:#f5f2eb}.canvas-stage canvas{width:100%;height:auto;display:block}.canvas-stage[data-shape=auto]{height:clamp(280px,50vh,480px);min-height:0}.canvas-stage[data-shape=square],.canvas-stage[data-shape=portrait],.canvas-stage[data-shape=banner]{align-items:center;height:clamp(280px,50vh,480px);min-height:0}.canvas-stage[data-long=false],.canvas-stage[data-shape=square],.canvas-stage[data-shape=portrait],.canvas-stage[data-shape=banner]{background:var(--soft);padding:16px}.canvas-stage[data-long=false] canvas,.canvas-stage[data-shape=square] canvas,.canvas-stage[data-shape=portrait] canvas,.canvas-stage[data-shape=banner] canvas{object-fit:contain;border:1px solid var(--line);background-color:#f8f7f3;background-image:conic-gradient(#e8e6df 25%, transparent 0 50%, #e8e6df 0 75%, transparent 0);background-size:20px 20px;width:auto;max-width:100%;height:auto;max-height:100%;box-shadow:0 3px 18px #0000000a}.canvas-footer{font-variant-numeric:tabular-nums;padding-top:12px}.export-row{border-top:1px solid var(--line);flex-direction:column;gap:20px;margin-top:28px;padding-top:24px;display:flex}.export-row p{font-family:var(--serif);font-size:23px}.export-row div>span{font-size:var(--text-small);color:var(--muted);margin-top:6px;display:block}.export-row .button{gap:13px}.studio-color-warning{color:var(--accent);font-size:var(--text-small);margin-top:16px}.studio-effects summary{min-height:44px;font-size:var(--text-small);cursor:pointer;justify-content:space-between;align-items:center;gap:16px;font-weight:600;list-style:none;display:flex}.studio-effects summary::-webkit-details-marker{display:none}.studio-effects summary>span:last-child{color:var(--accent);font-size:23px}.studio-effects[open] summary>span:last-child{transform:rotate(45deg)}.effect-color{margin-top:14px}.export-buttons{flex-wrap:wrap;gap:10px;width:100%;display:flex}.export-buttons .button{white-space:nowrap;flex:1}#copy-image-hint{margin-top:6px}@media (width>=600px){.studio-controls{order:0;grid-template-columns:1fr 1fr;gap:0 28px;padding:26px 22px;display:grid}.studio-controls>.control-block,.studio-controls>.control-block:first-child{border:0;order:0;margin-bottom:23px;padding:0}#studio-reset{order:0;margin:0}.studio-title-row>svg{display:block}.studio-canvas-panel{padding:28px}.canvas-stage{min-height:360px;max-height:620px}.export-row{flex-direction:column;justify-content:space-between;align-items:stretch}}@media (width>=1000px){.studio-workspace{grid-template-columns:320px minmax(0,1fr)}.studio-controls{background:var(--surface);border-right:1px solid var(--line);padding:26px;display:block}.ink-presets{gap:0}.studio-canvas-panel{border-top:0;justify-content:start;align-self:start;padding:28px 32px;position:sticky;top:16px}.canvas-stage{flex:none;min-height:450px}.canvas-heading{padding-bottom:24px}.export-row{margin-top:32px}}@media (width>=1280px){.export-row{flex-flow:wrap;align-items:center}.export-buttons{margin-left:auto}}