.coloring{gap:.75rem;display:grid}.coloring-toolbar{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.toolgroup{border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);display:flex;overflow:hidden}.toolgroup__btn{border:0;border-inline-start:1px solid var(--rule);min-width:2.75rem;min-height:2.75rem;color:var(--ink);font:inherit;cursor:pointer;background:0 0;justify-content:center;align-items:center;gap:.25rem;padding:0 .6rem;font-size:.9rem;display:inline-flex}.toolgroup__btn:first-child{border-inline-start:0}.toolgroup__btn:hover:not(:disabled){background:var(--paper-sunk)}.toolgroup__btn:disabled{color:var(--ink-faint);cursor:not-allowed}.toolgroup__btn--on{background:var(--accent);color:var(--accent-ink)}.toolgroup__btn--on:hover:not(:disabled){background:var(--accent)}.dot{background:currentColor;border-radius:50%;display:block}.coloring-stage{background:var(--paper-sunk);border:1px solid var(--rule);border-radius:var(--radius);aspect-ratio:210/297;touch-action:none;width:100%;max-height:80vh;margin-inline:auto;position:relative;overflow:hidden}.coloring-frame{aspect-ratio:210/297;transform-origin:0 0;cursor:crosshair;width:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.coloring-layer{width:100%;height:100%;image-rendering:pixelated;position:absolute;inset:0}.coloring-layer--art{pointer-events:none}.coloring-stage__note{border-radius:var(--radius);background:var(--paper);border:1px solid var(--rule);text-align:center;margin:0;padding:.5rem .75rem;font-size:.9rem;position:absolute;inset-block-end:.75rem;inset-inline:.75rem}.coloring-stage__note--error{border-color:var(--err);color:var(--err)}.palette__grid{grid-template-columns:repeat(auto-fit,minmax(2.25rem,1fr));gap:.35rem;display:grid}.swatch{border:1px solid var(--rule);cursor:pointer;border-radius:6px;min-height:2.25rem;padding:0}.swatch--on{outline:3px solid var(--ink);outline-offset:1px}.palette__custom{align-items:center;gap:.5rem;margin-block-start:.6rem;font-size:.9rem;display:inline-flex}.palette__custom input{border:1px solid var(--rule);background:0 0;border-radius:6px;block-size:2.25rem;inline-size:2.75rem;padding:0}.coloring-output{flex-wrap:wrap;gap:.5rem;display:flex}.coloring-note{color:var(--ink-soft);margin:0;font-size:.9rem}.coloring-note:empty{display:none}.notice--warn{border-color:var(--warn)}.notice--warn .btn{margin-inline-end:.5rem}@media print{.coloring{display:none}}.studio{height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;gap:.5rem;display:flex;overflow:hidden}.studio__bar{border-block-end:1px solid var(--rule);align-items:center;gap:.75rem;padding:.5rem .75rem;display:flex}.studio__title{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;margin:0;font-size:1rem;font-weight:600;overflow:hidden}.studio__back,.studio__exit{flex:none;font-size:.9rem}.studio .coloring{flex-direction:column;flex:1;gap:.5rem;min-height:0;padding:0 .75rem .75rem;display:flex}.studio .coloring-stage{flex:1;align-self:center;width:auto;max-width:100%;height:100%;min-height:0;max-height:100%}.studio .coloring-output,.studio .palette__grid{justify-content:center}.studio .coloring-toolbar,.studio .coloring-output{gap:.35rem}.studio .toolgroup__btn{min-width:2.25rem;min-height:2.25rem;padding:0 .45rem;font-size:.8rem}.studio .coloring-output .btn{padding:.4rem .8rem;font-size:.85rem}.studio .palette-drawer{background:var(--paper);border-block-start:1px solid var(--rule);flex:none;position:relative}.studio .palette-drawer__panel{background:var(--paper);border-block:1px solid var(--rule);visibility:hidden;opacity:0;padding:.6rem .75rem;transition:transform .16s,opacity .16s,visibility .16s;position:absolute;inset-block-end:100%;inset-inline:0;transform:translateY(.5rem)}.studio .palette-drawer--open .palette-drawer__panel{visibility:visible;opacity:1;transform:none}.studio .palette-drawer--locked .palette-drawer__panel{border-block-end:0;position:static}.studio .palette-drawer__bar{align-items:center;gap:.5rem;padding:.4rem .75rem;display:flex}.studio .palette-drawer__toggle,.studio .palette-drawer__pin{border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);min-height:2.5rem;color:var(--ink);font:inherit;cursor:pointer;align-items:center;gap:.4rem;padding:0 .7rem;font-size:.85rem;display:inline-flex}.studio .palette-drawer__toggle{flex:1}.studio .palette-drawer__pin--on{background:var(--ink);border-color:var(--ink);color:var(--paper)}.studio .palette-drawer__chip{border:1px solid var(--rule);border-radius:4px;block-size:1.1rem;inline-size:1.1rem}@media (width>=64rem),(orientation:landscape) and (height<=32rem){.studio .palette-drawer{border-block-start:0}.studio .palette-drawer__panel{visibility:visible;opacity:1;border:0;padding:0;position:static;transform:none}.studio .palette-drawer__bar{display:none}}@media (orientation:landscape) and (height<=32rem){.studio .coloring{flex-wrap:wrap;align-content:flex-start;column-gap:.75rem}.studio .coloring-stage{flex:none;order:-1;height:100%}.studio .coloring>:not(.coloring-stage){flex:none;width:13rem}}@media (width>=64rem){.studio .coloring{grid-template-rows:auto 1fr;grid-template-columns:1fr 16rem;align-items:start;display:grid}.studio .coloring-toolbar{grid-column:1/-1}.studio .coloring-stage{grid-area:2/1;place-self:stretch center}.studio .coloring>:not(.coloring-toolbar):not(.coloring-stage){grid-column:2}}