@import"https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap";@layer tokens,base,components;@layer tokens{:root{--color-bg: #ffffff;--color-ink: #3b434a;--color-palette-0: #ffffff;--color-palette-1: #3b434a;--color-palette-2: #c0eef5;--color-palette-3: #67bdd2;--color-palette-4: #319ec7;--color-palette-5: #3d7683;--color-palette-6: #f892b1;--color-palette-7: #c53b64;--color-page: color-mix(in srgb, var(--color-palette-4) 18%, white);--color-hover-tint: #f4f4f4;--border-width: 2px;--border-width-canvas: 4px;--bevel-size: 14px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 14px;--space-5: 18px;--space-6: 24px;--corner-inset: 16px;--canvas-margin: 80px;--size-button: 40px;--size-button-lg: 44px;--size-swatch: 28px;--size-slider-width: 160px;--size-slider-rail: 2px;--size-slider-handle-w: 12px;--size-slider-handle-h: 22px;--font-family: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-weight-regular: 700;--font-weight-medium: 700;--font-weight-bold: 900;--font-size-body: 14px;--font-size-small: 12px;--font-size-xs: 11px;--font-size-username: 14px;--font-weight-username: var(--font-weight-bold);--letter-spacing-username: .04em}}@layer base{html,body,#root{margin:0;padding:0;height:100%}body{font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(--font-weight-regular);line-height:1.5;color:var(--color-ink);background:var(--color-page);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}*,*:before,*:after{box-sizing:border-box}}@layer components{.block{background:var(--color-bg);border:var(--border-width) solid var(--color-ink);color:var(--color-ink)}.top-bevel-panel{background:var(--color-bg);color:var(--color-ink);border:var(--border-width) solid var(--color-ink);border-top:0;border-radius:0 0 var(--bevel-size) var(--bevel-size);corner-shape:bevel}.icon-button{width:var(--size-button);height:var(--size-button);display:inline-flex;align-items:center;justify-content:center;padding:0;background:var(--color-bg);border:var(--border-width) solid var(--color-ink);color:var(--color-ink);cursor:pointer}.icon-button--lg{width:var(--size-button-lg);height:var(--size-button-lg)}.icon-button:hover:not(:disabled){background:var(--color-hover-tint)}.icon-button:disabled{opacity:.4;cursor:not-allowed}.color-swatch{width:var(--size-swatch);height:var(--size-swatch);padding:0;border:var(--border-width) solid var(--color-ink);cursor:pointer}.color-swatch[aria-pressed=true]{outline:var(--border-width) solid var(--color-ink);outline-offset:var(--border-width)}.separator{width:var(--border-width);align-self:stretch;background:var(--color-ink);margin:0 var(--space-1)}.slider{display:flex;align-items:center;height:var(--size-button);width:var(--size-slider-width);padding:0 var(--space-1)}.slider>input[type=range]{width:100%;height:var(--size-slider-handle-h);background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;margin:0}.slider>input[type=range]:focus{outline:none}.slider>input[type=range]::-webkit-slider-runnable-track{height:var(--size-slider-rail);background:var(--color-ink);border:0}.slider>input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--size-slider-handle-w);height:var(--size-slider-handle-h);background:var(--color-bg);border:var(--border-width) solid var(--color-ink);border-radius:0;margin-top:calc((var(--size-slider-rail) - var(--size-slider-handle-h)) / 2)}.slider>input[type=range]:hover::-webkit-slider-thumb{background:var(--color-hover-tint)}.slider>input[type=range]::-moz-range-track{height:var(--size-slider-rail);background:var(--color-ink);border:0}.slider>input[type=range]::-moz-range-thumb{width:var(--size-slider-handle-w);height:var(--size-slider-handle-h);background:var(--color-bg);border:var(--border-width) solid var(--color-ink);border-radius:0}.slider>input[type=range]:hover::-moz-range-thumb{background:var(--color-hover-tint)}}