html,body,#root{min-height:100%;margin:0}body{background:var(--ds-page)}.gp-studio{flex-direction:column;gap:12px;display:flex}.gp-intro+.file-group{margin-top:-26px}.gp-bar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.gp-sizes{flex-wrap:wrap;gap:4px;display:inline-flex}.gp-edit{border:1px solid var(--ds-hairline);background:#f4f8f7;border-radius:10px;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;display:flex}.gp-edit-name{color:#1d484e;margin-right:4px;font-weight:600}.gp-eraser-value{text-align:center;font-variant-numeric:tabular-nums;min-width:4ch}.gp-colors{border:1px solid var(--ds-hairline);background:#fff;border-radius:10px;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;display:flex}.gp-colors-label{color:#1d484e;margin-right:4px;font-weight:600}.gp-palette{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.gp-swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;flex:none;width:28px;height:28px;padding:0}.gp-swatch.is-on{border-color:var(--ds-ink);box-shadow:inset 0 0 0 2px #fff}@media (width<=600px){.gp-swatch{width:32px;height:32px}}.gp-board{aspect-ratio:1;border:1px solid var(--ds-hairline);-webkit-user-select:none;user-select:none;background:#f4f8f7;border-radius:12px;width:100%;max-width:600px;margin:0 auto;overflow:hidden}.gp-board svg{touch-action:none;cursor:pointer;width:100%;height:100%;display:block}.gp-board.is-drawing svg{cursor:crosshair}.gp-board.is-erasing svg{cursor:none}.gp-intro{color:var(--ds-ink);margin:0 0 4px;padding-left:20px;font-size:14px;line-height:1.55}.gp-intro li{margin:0 0 6px}@media (width>=720px){.gp-intro{columns:2;column-gap:48px}}.gp-context{flex-direction:column;justify-content:center;min-height:58px;display:flex}.gp-context .gp-edit{box-sizing:border-box;min-height:58px}.gp-hint{color:var(--ds-ink-2);margin:0;padding:0 4px;font-size:14px}@media (width<=600px){.gp-context{height:124px;min-height:124px}.gp-context .gp-edit{flex-shrink:0;height:124px;min-height:124px}}