.coloring{flex:0 0 var(--canvas);width:var(--canvas);height:var(--canvas)}.coloring__stack{position:relative;width:100%;height:100%;background:var(--canvas-bg);overflow:hidden;touch-action:none}.coloring__paint,.coloring__lines{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.coloring__paint{cursor:crosshair;touch-action:none;opacity:.9}.coloring__stack.is-erasing .coloring__paint{cursor:cell}.coloring__lines{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;filter:var(--lines-filter)}.toolbar{display:flex;flex-direction:column;width:var(--canvas);height:var(--bar);background-image:repeating-linear-gradient(to right,var(--divider-dash) 0 4.5px,transparent 4.5px 9px);background-repeat:no-repeat;background-position:bottom;background-size:100% 1px}.toolbar__track{display:flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;height:var(--btn);justify-content:center}.toolbar__track--colors{justify-content:flex-start}.tool{flex:0 0 var(--btn);width:var(--btn);height:var(--btn);display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--tool-ink);cursor:pointer}.tool:disabled{opacity:.34;cursor:default}.tool__chip{position:relative;display:flex;align-items:center;justify-content:center;width:76%;height:76%;border-radius:26%;box-sizing:border-box}.tool__chip:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--hover-overlay);opacity:0;pointer-events:none;transition:opacity .12s ease}.tool:hover:not(:disabled) .tool__chip:after{opacity:.1}.tool.is-active .tool__chip{background:var(--accent);color:#fff}.tool svg{width:58%;height:58%}.tool__dot{border-radius:50%;background:currentColor}.tool--status{cursor:default;color:#9a95a8}.tool--status:hover .tool__chip:after{opacity:0}.savestatus__spin{animation:savestatus-spin .9s linear infinite}@keyframes savestatus-spin{to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tool--swatch .tool__chip{width:74%;height:74%;box-shadow:inset 0 0 0 1px var(--swatch-edge)}.tool--swatch.is-active .tool__chip{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--swatch-ring)}@media (orientation: landscape){.toolbar{flex-direction:row;width:var(--bar);height:var(--canvas);background-image:repeating-linear-gradient(to bottom,var(--divider-dash) 0 6px,transparent 6px 12px);background-position:right;background-size:1px 100%}.toolbar__track{flex-direction:column;width:var(--btn);height:auto}.toolbar__track--colors{justify-content:flex-start}}.browser-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:#00000073}.browser{display:flex;flex-direction:column;width:min(880px,96vw);max-height:88vh;overflow:hidden;background:var(--card);border-radius:18px;box-shadow:var(--shadow-modal)}.browser__head{display:grid;grid-template-columns:var(--btn) 1fr auto;align-items:center;gap:10px;background-color:var(--card);background-image:repeating-linear-gradient(to right,var(--divider-dash) 0 4.5px,transparent 4.5px 9px);background-repeat:no-repeat;background-position:bottom;background-size:100% 1px}.browser__head-actions{display:flex;align-items:center}.browser__head h2{margin:0;font-size:1.2rem;text-align:center}.browser__back,.browser__close,.browser__theme{position:relative;flex:0 0 var(--btn);width:var(--btn);height:var(--btn);display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--tool-ink);cursor:pointer}.browser__back svg,.browser__close svg,.browser__theme svg{width:44%;height:44%}.browser__back-spacer{width:var(--btn);height:var(--btn)}.browser__back:after,.browser__close:after,.browser__theme:after{content:"";position:absolute;top:12%;left:12%;width:76%;height:76%;border-radius:26%;background:var(--hover-overlay);opacity:0;pointer-events:none;transition:opacity .12s ease}.browser__back:hover:after,.browser__close:hover:after,.browser__theme:hover:after{opacity:.1}.browser__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;padding:20px;overflow-y:auto}.browser__item{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--tile-bg, var(--card));border:2px solid var(--divider);border-radius:14px;cursor:pointer}.browser__template:hover,.browser__item:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--card));box-shadow:var(--shadow-elevate)}.browser__item.is-current{border:2px solid var(--accent);box-shadow:0 0 14px 2px color-mix(in srgb,var(--accent) 50%,transparent)}.browser__template,.browser__open{padding:0;border:none;cursor:pointer}.browser__template{padding:10px}.browser__open{display:block;width:100%;background:transparent}.browser__item img{width:100%;aspect-ratio:1 / 1;object-fit:contain}.browser__template--blank{background:var(--canvas-bg)}.browser__template--blank img{filter:var(--lines-filter)}.browser__label{font-size:.9rem;font-weight:600;text-align:center;opacity:.8}.browser__badge{position:absolute;top:6px;right:6px;min-width:22px;height:22px;padding:0 6px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:var(--accent);color:#fff;font-size:.8rem;font-weight:700}.browser__delete{position:absolute;top:6px;right:6px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:var(--surface-2);color:#c0344d;box-shadow:0 1px 4px #0003;cursor:pointer;transition:background .12s ease}.browser__delete:hover{background:var(--surface-2-hover)}.browser__item--new{align-items:center;justify-content:center;aspect-ratio:1 / 1;border-style:dashed;color:var(--accent)}.browser__new-icon{display:flex;align-items:center;justify-content:center;flex:1}.app{--gap: clamp(6px, 1.6vmin, 18px);--availW: calc(100vw - 2 * var(--gap));--availH: calc(100dvh - 2 * var(--gap));--canvas: min(var(--availW), calc(var(--availH) * 6 / 7));--btn: calc(var(--canvas) / 12);--bar: calc(var(--canvas) / 6);height:100%;display:grid;place-items:center;overflow:hidden}.studio{display:flex;flex-direction:column;overflow:hidden;background:var(--card);border-radius:clamp(12px,2vmin,22px);box-shadow:0 16px 46px var(--card-shadow)}@media (orientation: landscape){.app{--canvas: min(var(--availH), calc(var(--availW) * 6 / 7))}.studio{flex-direction:row}}:root{--accent: #ff6fae;--page-grad: linear-gradient(160deg, #fdf2ff 0%, #eef4ff 55%, #f0fbff 100%);--ink: #2b2b2b;--card: #f9f9fc;--card-shadow: rgba(80, 60, 120, .18);--shadow-elevate: 0 4px 14px rgba(0, 0, 0, .08);--shadow-modal: 0 20px 60px rgba(0, 0, 0, .35);--swatch-edge: rgba(0, 0, 0, .16);--canvas-bg: #ffffff;--divider: #ececf4;--divider-dash: #d8d4e6;--tool-ink: #454152;--swatch-ring: #454152;--surface-2: #f0f0f0;--surface-2-hover: #e4e4e4;--hover-overlay: #000000;--lines-filter: none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink)}:root[data-theme=dark]{--page-grad: linear-gradient(160deg, #1b1524 0%, #131a2b 55%, #0e1a22 100%);--ink: #ececf0;--card: #16141c;--card-shadow: rgba(0, 0, 0, .5);--shadow-elevate: 0 6px 18px rgba(0, 0, 0, .6);--shadow-modal: 0 24px 70px rgba(0, 0, 0, .7);--swatch-edge: rgba(255, 255, 255, .25);--canvas-bg: #000000;--divider: #2a2733;--divider-dash: #474350;--tool-ink: #c7c2d4;--swatch-ring: #ffffff;--surface-2: #26232e;--surface-2-hover: #332f3d;--hover-overlay: #ffffff;--lines-filter: invert(1)}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--page-grad);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}