.studio-main{max-width:1180px;width:calc(100% - 48px);margin:24px auto 64px;color:var(--ink)}
.studio-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.studio-heading h1{font-size:26px;margin:10px 0}.studio-heading a{color:var(--muted);font-size:14px}.studio-heading button{display:flex;gap:8px;align-items:center;justify-content:center;white-space:nowrap}.studio-heading img{width:18px;height:18px}
.studio-note,.studio-hint,.studio-inspector p{color:var(--muted);font-size:13px;line-height:1.6}.studio-note{margin:4px 0 12px}#studio-status{font-size:14px;min-height:24px;margin:0 0 8px}#layer-error{color:#b02550;margin:4px 0}
.studio-workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:24px}.studio-workspace[aria-busy=true]{pointer-events:none;opacity:.55}.studio-preview,.studio-inspector{min-width:0;background:var(--white);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 8px 28px #00000008}
.studio-main button,.studio-main select,.studio-main textarea{font:inherit}.studio-main button{cursor:pointer;border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:12px;min-height:40px;padding:8px 12px;margin:0;font-size:13px}.studio-main button:disabled{opacity:.4;cursor:default}.studio-main button:hover:not(:disabled),.studio-main button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent)}.studio-main button.primary{background:var(--accent);color:#fff;padding:14px 20px;font-size:15px}.studio-main :is(button,textarea,select,input):focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.studio-tools{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}.studio-tools button{flex:1;white-space:nowrap;padding:8px}.studio-stage{position:relative;width:100%;max-width:600px;aspect-ratio:1;margin:auto;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;isolation:isolate}.studio-stage canvas{width:100%;height:100%;display:block;touch-action:none}.studio-stage[data-drawing=true]{cursor:crosshair}
.studio-selection{position:absolute;border:2px solid var(--accent-text);pointer-events:none;transform:translate(-50%,-50%);box-sizing:border-box}.studio-selection #resize-handle{pointer-events:auto;touch-action:none;position:absolute;bottom:-10px;right:-10px;width:20px;height:20px;min-height:20px;padding:0;border-radius:50%;background:#fff;border:2px solid var(--accent-text)}
.studio-history{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}.studio-history span{margin-left:auto;color:var(--muted);font-size:12px}.studio-hint{margin:12px 0 0}.studio-tray{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:12px;background:var(--accent-soft);border-radius:14px}.studio-tray[hidden],.studio-page [hidden]{display:none!important}.studio-tray button{min-width:42px;min-height:42px;font-size:25px}.studio-tray img{width:40px;height:40px;object-fit:contain}
.studio-fonts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:250px;overflow:auto;padding:3px}.studio-fonts button{min-width:0;min-height:70px;padding:8px}.studio-fonts span{display:block;font-size:18px;overflow-wrap:anywhere}.studio-fonts small{display:block;font-size:10px;color:var(--muted);margin-top:5px;overflow-wrap:anywhere}
.studio-inspector h2{font-size:17px;margin:0 0 14px}.studio-inspector label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center;font-size:13px;margin:14px 0}.studio-inspector textarea,.studio-inspector select{width:100%;background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px;min-width:0}.studio-inspector textarea{resize:vertical;line-height:1.6}.studio-inspector input[type=range]{width:100%;accent-color:var(--accent)}.studio-inspector input[type=color]{width:40px;height:32px;padding:2px;border:1px solid var(--line);border-radius:50%;background:var(--white)}.studio-inspector summary{font-size:14px;cursor:pointer;padding:14px 0;font-weight:600}.studio-inspector details{border-top:1px solid var(--line);margin-top:16px}.studio-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:285px;overflow:auto;padding:3px}.studio-styles button{padding:4px;min-width:0}.studio-styles img{display:block;width:100%;aspect-ratio:1.3;object-fit:contain;background:#fff;border-radius:6px}.studio-styles small{font-size:10px}.studio-styles button[aria-pressed=true]{outline:2px solid var(--accent-text);outline-offset:-2px}.studio-pair{display:flex;gap:8px;margin:10px 0}.studio-pair button{flex:1;padding:8px 5px;font-size:12px}.studio-page .studio-danger{color:#b02550}.studio-small{font-size:12px!important}.studio-layers{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}.studio-layers p{font-size:12px}.studio-layers button{width:100%;text-align:left;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:7px}.studio-layers button[aria-pressed=true]{background:var(--accent-soft)}
@media(min-width:1800px){.studio-main{max-width:1280px}.studio-workspace{grid-template-columns:minmax(0,1fr) 350px}}
@media(max-width:900px){.studio-workspace{grid-template-columns:minmax(0,1fr) 280px;gap:14px}.studio-preview,.studio-inspector{padding:14px}}
@media(max-width:760px){.studio-main{width:calc(100% - 24px);margin-top:16px}.studio-heading{align-items:flex-start}.studio-heading h1{font-size:20px}.studio-heading .primary{font-size:12px;padding:10px 12px;min-height:42px}.studio-heading img{width:16px}.studio-heading a{font-size:12px}.studio-workspace{grid-template-columns:1fr;gap:14px}.studio-preview,.studio-inspector{border-radius:18px;padding:12px}.studio-tools{gap:5px}.studio-tools button{font-size:12px;min-height:42px}.studio-styles{grid-template-columns:repeat(4,minmax(0,1fr));max-height:240px}.studio-inspector{padding:18px}.studio-history button{font-size:12px}.studio-note{font-size:12px}.studio-inspector input[type=range]{min-height:28px}}
@media(max-width:760px){.studio-selection #resize-handle{width:44px;height:44px;min-height:44px;bottom:-22px;right:-22px;border:0;background:transparent}.studio-selection #resize-handle::after{content:"";position:absolute;inset:12px;border:2px solid var(--accent-text);border-radius:50%;background:#fff}}