.studio{position:relative;display:flex;flex-direction:column;height:100dvh;height:100svh;background:#f3f4f6;color:#4b5563;overflow:hidden;user-select:none;-webkit-user-select:none;overscroll-behavior:none}.studio *,.studio *:before,.studio *:after{box-sizing:border-box}.studio button{appearance:none;-webkit-appearance:none;font:inherit;color:inherit;cursor:pointer}.chrome{display:flex;align-items:center;gap:10px;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));background:#fff;border-bottom:1px solid #e5e7eb;flex:0 0 auto;color:#111}.home-action{display:grid}.back{font-size:1.05rem;font-weight:650;min-width:32px}.chrome-logo{display:grid;place-items:center;flex:0 0 auto}.chrome-logo img{display:block;width:28px;height:28px;border-radius:7px}.title{flex:1;min-width:0;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}.stage{flex:1;min-width:0;min-height:0;position:relative;touch-action:none;overflow:hidden;background:#fff;container-type:size}.stage .board,.stage .paper,.stage canvas{cursor:inherit}@media(hover:hover)and (pointer:fine){.stage[data-cursor=fill]{cursor:url(/tools/cursors/fill.png) 2 13,auto}.stage[data-cursor=erase]{cursor:url(/tools/cursors/erase.png) 20 36,auto}.stage[data-cursor=dropper]{cursor:url(/tools/cursors/dropper.png) 3 28,auto}.stage[data-cursor=paintbrush]{cursor:url(/tools/cursors/brush.png) 2 0,auto}.stage[data-cursor=pencil]{cursor:url(/tools/cursors/pencil.png) 1 0,auto}.stage[data-cursor=highlighter]{cursor:url(/tools/cursors/highlighter.png) 6 0,auto}.stage[data-cursor=watercolor]{cursor:url(/tools/cursors/watercolor.png) 1 0,auto}.stage[data-cursor=crayon]{cursor:url(/tools/cursors/crayon.png) 3 0,auto}.stage[data-cursor=wideBrush]{cursor:url(/tools/cursors/wide-brush.png) 2 3,auto}.stage[data-cursor=spray]{cursor:url(/tools/cursors/spray.png) 9 0,auto}.stage.is-sized-cursor{cursor:var(--stage-cursor)}.stage[data-pan-ready=true]{cursor:grab}.stage[data-gesturing=true]{cursor:grabbing}}.board{position:absolute;inset:0;display:grid;place-items:center;transform-origin:center center}.paper{--pw: 2;--ph: 3;position:relative;background:#fff;overflow:hidden;width:min(100cqw,calc(100cqh * var(--pw) / var(--ph)));height:min(100cqh,calc(100cqw * var(--ph) / var(--pw)))}.paper canvas{display:block;width:100%;height:100%}.paper .ink{position:absolute;inset:0;mix-blend-mode:multiply;pointer-events:none}.busy{position:absolute;inset:0;display:grid;place-items:center;background:#ffffffb3;font-weight:600;z-index:6}.studio-skel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background:#fff}.studio-skel-stage{flex:1;min-width:0;min-height:0;position:relative;display:grid;place-items:center;background:#fff;container-type:size}.studio-skel-paper{width:min(100cqw,calc(100cqh * 2 / 3));height:min(100cqh,150cqw);border-radius:8px;background:#eee;animation:studio-skel-pulse 1.35s ease-in-out infinite}.studio-skel-caption{position:absolute;left:12px;right:12px;bottom:10px;margin:0;text-align:center;font-size:.75rem;font-weight:500;color:#9ca3af}.studio-skel-dock{flex:0 0 auto;display:flex;flex-direction:column;background:#f8f9fb;border-top:1px solid #dcdfe6}.studio-skel-palette{display:none}.studio-skel-tools-box{padding:8px 12px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column}.studio-skel-tools,.studio-skel-swatches,.studio-skel-actions,.studio-skel-foot{display:flex;align-items:center;gap:8px}.studio-skel-tools{justify-content:flex-end}.studio-skel-swatches{gap:10px;padding:2px 0;flex-wrap:wrap}.studio-skel-quick{flex-wrap:nowrap;overflow:hidden}.studio-skel-btn,.studio-skel-dot,.studio-skel-size,.studio-skel-pill,.studio-skel-line{flex:0 0 auto;background:#eee;animation:studio-skel-pulse 1.35s ease-in-out infinite}.studio-skel-btn{width:48px;height:48px;border-radius:999px}.studio-skel-btn.sm{width:44px;height:44px}.studio-skel-more{border-radius:8px}.studio-skel-dot{width:36px;height:36px;border-radius:999px}.studio-skel-size{height:36px;margin:16px 0;border-radius:999px}.studio-skel-actions{gap:18px;padding-block:2px}.studio-skel-foot{margin-top:16px;flex-wrap:wrap}.studio-skel-pill{height:44px;width:96px;border-radius:999px}.studio-skel-line{display:block;height:12px;width:64px;border-radius:6px;margin-bottom:8px}.studio-skel-line.sm{width:48px;margin-top:6px}@keyframes studio-skel-pulse{0%,to{background-color:#eee}50%{background-color:#f3f4f6}}@media(prefers-reduced-motion:reduce){.studio-skel-paper,.studio-skel-btn,.studio-skel-dot,.studio-skel-size,.studio-skel-pill,.studio-skel-line{animation:none}}.dock{position:relative;z-index:4;background:#f8f9fb;border-top:1px solid #dcdfe6;display:flex;flex-direction:column;flex:0 0 auto}.palette-sheet{position:absolute;left:0;right:0;bottom:100%;z-index:6;max-height:42dvh;overflow-x:hidden;overflow-y:auto;padding:16px 16px 20px;scroll-padding-bottom:16px;background:#f8f9fb;border-top:1px solid #dcdfe6;box-shadow:0 -8px 24px #00000014}.palette-head{font-size:.875rem;font-weight:500;color:#4b5563;margin-bottom:8px}.group{margin-bottom:14px}.group:last-child{margin-bottom:0}.group h3{margin:0 0 8px;font-size:.875rem;font-weight:500;color:#4b5563}.swatches{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px}.swatch-wrap{position:relative;width:36px;height:36px;flex:0 0 auto;overflow:visible}.swatch{display:grid;place-items:center;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;margin:0;line-height:0;font-size:0;aspect-ratio:1;border:0;background:transparent;flex:0 0 auto;overflow:visible;position:relative}.swatch-fill{display:block;width:36px;height:36px;border-radius:50%;border:1px solid rgb(0 0 0 / 8%);pointer-events:none;background-repeat:no-repeat;background-position:center;background-size:100% 100%;background-origin:border-box;background-clip:border-box}.swatch.is-texture .swatch-fill{background-size:cover}.swatch[aria-pressed=true]:after{content:"";position:absolute;inset:12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px #0000001a}.tool-box{padding:8px 12px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column}.tools,.actions,.brush-row,.quick-colors,.zoom-cluster{display:flex;align-items:center;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.quick-colors{gap:10px;padding:2px 0}.tools::-webkit-scrollbar,.actions::-webkit-scrollbar,.brush-row::-webkit-scrollbar,.quick-colors::-webkit-scrollbar{display:none}.icon-btn{position:relative;flex:0 0 auto;width:48px;height:48px;padding:0;border:2px solid #e5e7eb;border-radius:999px;background:#fff;color:#374151;display:grid;place-items:center;overflow:visible}a.icon-btn{color:#374151}.icon-btn svg{width:22px;height:22px}.icon-btn[aria-pressed=true]{border-color:#ff9d08;color:#111}.icon-btn:disabled{opacity:.35;color:#9ca3af;border-color:#e5e7eb;pointer-events:none}.check{position:absolute;bottom:-1px;right:-1px;top:auto;width:18px;height:18px;border-radius:999px;background:#ff9d08;display:grid;place-items:center}.check svg{width:12px;height:12px}.tool-face{width:100%;height:100%;object-fit:cover;border-radius:999px;pointer-events:none}.icon-more{border-radius:8px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:3px;padding:2px;overflow:hidden}.icon-more[aria-pressed=true]{border-color:#ff9d08}.more-thumb{width:18px;height:18px;border-radius:999px;object-fit:cover;background:#e5e7eb;pointer-events:none}.more-plus{width:18px;height:18px;display:grid;place-items:center}.more-plus svg{width:18px;height:18px}.swatch.rainbow{border-radius:50%;overflow:hidden;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.swatch.rainbow:before{content:"";position:absolute;inset:3px;border-radius:999px;border:2px solid #fff;background:var(--current, #000)}.swatch.rainbow[aria-pressed=true]:after{display:none}.swatch-wrap.is-open{z-index:10}.chip{flex:0 0 auto;min-height:36px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;padding:0 12px;font-size:.75rem;font-weight:650}.chip[aria-pressed=true]{border-color:#ff9d08;color:#111}.size{display:flex;align-items:center;gap:16px;margin:16px 0;padding:0 12px;min-height:44px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;color:#9ca3af}.size-track{position:relative;flex:1;min-width:0;height:27px}.size-wedge{position:absolute;left:0;right:0;top:50%;display:block;width:100%;height:8px;transform:translateY(-50%);pointer-events:none;overflow:visible;fill:#787880;fill-opacity:.15}.size-input{position:absolute;inset:0;width:100%;height:27px;margin:0;padding:0;border:0;background:transparent;appearance:none;-webkit-appearance:none;accent-color:transparent;cursor:pointer}.size-input:focus{outline:none}.size-input:focus-visible{outline:none}.size-input::-webkit-slider-runnable-track{appearance:none;height:27px;border:0;border-radius:0;background:transparent}.size-input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:27px;height:27px;margin-top:0;border-radius:999px;background:#fff;border:1px solid rgb(120 120 128 / 15%);box-shadow:0 1px 4px #0000001f;cursor:pointer}.size-input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #fff,0 0 0 4px #ff9d0866,0 1px 4px #0000001f}.size-input::-moz-range-track{height:27px;border:0;border-radius:0;background:transparent}.size-input::-moz-range-progress{background:transparent;height:27px;border:0}.size-input::-moz-range-thumb{width:27px;height:27px;border-radius:999px;background:#fff;border:1px solid rgb(120 120 128 / 15%);box-shadow:0 1px 4px #0000001f;cursor:pointer}.size-input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px #fff,0 0 0 4px #ff9d0866,0 1px 4px #0000001f}.size-input::-moz-focus-outer{border:0}.wave{width:28px;height:28px;flex:0 0 auto}.actions{gap:18px;padding-block:2px;overflow:visible}.export-wrap{position:relative;flex:0 0 auto}.export-menu{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:8;transform:translate(-50%);min-width:104px;padding:6px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:0 8px 24px #00000024;display:flex;flex-direction:column;gap:2px}.export-menu button{border:0;border-radius:8px;background:transparent;padding:10px 14px;text-align:left;font:inherit;font-weight:650;color:#111827;cursor:pointer}.export-menu button:hover,.export-menu button:focus-visible{background:#f3f4f6}.actions .icon-btn,.zoom-cluster .icon-btn{width:44px;height:44px;padding:0;border-width:1px;overflow:visible;clip-path:none}.actions .icon-btn svg,.zoom-cluster .icon-btn svg{width:20px;height:20px;overflow:visible;display:block}.zoom-cluster{display:flex;align-items:center;gap:8px;flex:0 0 auto;overflow:visible}.dock-foot{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}.palette-toggle{display:flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;font-weight:500;font-size:.875rem;color:#6b7280}.palette-toggle[aria-pressed=true]{border-color:#ff9d08;color:#ff9d08}.palette-mini{width:20px;height:20px;border-radius:999px;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);flex:0 0 auto}.picker{position:absolute;left:0;top:42px;z-index:10;width:220px;padding:12px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 32px #0000001f;pointer-events:auto;user-select:text;-webkit-user-select:text}.picker-row{display:flex;gap:10px}.picker-sat{position:relative;width:152px;height:150px;border-radius:6px;overflow:hidden;cursor:crosshair;flex:1;touch-action:none;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,var(--hue, #f00))}.picker-knob{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:999px;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000040;pointer-events:none}.picker-hue{position:relative;width:15px;height:150px;padding:0;border-radius:8px;background:linear-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);cursor:pointer;flex:0 0 auto;touch-action:none}.picker-hue-knob{position:absolute;left:50%;width:14px;height:14px;border-radius:999px;background:#fff;border:1px solid #111;transform:translate(-50%,-50%);pointer-events:none}.picker-meta{display:flex;align-items:center;gap:8px;margin-top:10px}.picker-swatch{flex:1;height:28px;border-radius:6px;border:1px solid #e5e7eb}.picker-field{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.75rem;color:#6b7280}.picker-hex{flex:1;min-width:0;border:1px solid #e5e7eb;border-radius:8px;padding:6px 8px;font:inherit;font-size:.8rem;color:#111;user-select:text;-webkit-user-select:text}.picker-drop{width:36px;height:36px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;display:grid;place-items:center}.picker-drop svg{width:18px;height:18px}.brush-backdrop{position:absolute;inset:0;z-index:20;background:#00000061;display:grid;place-items:center;padding:16px}.brush-modal{width:min(360px,100%);max-height:min(72dvh,560px);overflow:auto;background:#fff;border-radius:16px;padding:16px;box-shadow:0 16px 40px #0000002e}.brush-head{display:grid;grid-template-columns:1fr auto;align-items:center;margin-bottom:12px}.brush-head h2{margin:0;text-align:center;font-size:1rem;font-weight:650;color:#374151}.brush-close{width:28px;height:28px;border:0;border-radius:999px;background:#f3f4f6;color:#4b5563;font-size:1.25rem;line-height:1}.brush-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.brush-card{position:relative;border:2px solid #e5e7eb;border-radius:12px;background:#fff;padding:8px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:6px}.brush-card img{width:72px;height:72px;object-fit:contain}.brush-card span{font-size:.75rem;color:#6b7280}.brush-card[aria-pressed=true]{border-color:#ff9d08}.brush-card[aria-pressed=true]:after{content:"";position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:999px;background:#ff9d08 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M13 6 7.5 11.5 5 9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat}@media(max-width:899.98px){.studio:not(.is-palette-open) .palette-sheet{display:none}.tools{justify-content:flex-end}.zoom-cluster{display:flex}.size{background:transparent;border:0;padding:0;min-height:36px;margin:16px 0}}@media(min-width:900px){.studio{padding:16px;background:#f3f4f6;position:relative}.chrome,.palette-toggle,.quick-colors{display:none}.workspace{flex-direction:row;gap:20px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px}.stage{order:2;background:#fff}.dock{order:1;flex:0 0 309px;width:309px;border:1px solid #dcdfe6;border-radius:6px;background:#f8f9fb;overflow:hidden;height:100%}.palette-sheet{position:static;max-height:none;flex:1;min-height:0;box-shadow:none;border:0;padding:16px 16px 20px;overflow-x:hidden;overflow-y:auto;scroll-padding-bottom:16px}.tool-box{padding:8px 16px 16px}.tools,.actions,.brush-row{flex-wrap:wrap;overflow:visible}.actions{gap:10px;flex-wrap:nowrap}.dock-foot{flex-wrap:wrap}.zoom-cluster{display:flex}.studio-skel{flex-direction:row;gap:20px;padding:16px;background:#fff;border-radius:12px}.studio-skel-stage{order:2}.studio-skel-dock{order:1;flex:0 0 309px;width:309px;height:100%;border:1px solid #dcdfe6;border-radius:6px;overflow:hidden}.studio-skel-palette{display:flex;flex-direction:column;flex:1;min-height:0;padding:16px 16px 20px;overflow:hidden;gap:0}.studio-skel-palette .studio-skel-swatches{padding:0;margin-bottom:10px}.studio-skel-quick{display:none}.studio-skel-tools-box{padding:8px 16px 16px}.studio-skel-tools{justify-content:flex-start;flex-wrap:wrap;overflow:visible}.studio-skel-size{height:44px}.studio-skel-actions{gap:10px}.studio-skel-pill{display:none}}