:root{color:#fff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#000;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}html,body,#root{background:#000;width:100%;height:100%;margin:0;overflow:hidden}*{box-sizing:border-box}body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button,input,textarea,select{font:inherit}a{color:inherit}.start-page{color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;background:#000;justify-content:center;align-items:center;width:100dvw;min-width:100dvw;height:100dvh;min-height:100dvh;transition:opacity .26s,transform .26s;display:flex;overflow:hidden}.start-page.is-leaving{opacity:0;transform:scale(.985)}.start-page:focus{outline:none}.start-page:focus-visible{outline-offset:-8px;outline:3px solid #00d1d1}.start-page__frame{aspect-ratio:4/3;background:radial-gradient(circle,#ffffff0a,#0000 42%),#000;justify-content:center;align-items:center;width:min(100dvw,133.333dvh);height:min(100dvh,75dvw);display:flex;position:relative}.start-page__content{flex-direction:column;justify-content:center;align-items:center;gap:clamp(12px,2dvh,16px);width:100%;height:100%;display:flex;position:relative;transform:translateY(-4.4%)}.start-page__logo{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:clamp(320px,44.3%,454px);height:auto;display:block}.start-page__text{color:#fff;letter-spacing:-.02em;margin:0;font-size:clamp(16px,1.95dvw,22px);font-weight:700;line-height:1.2}.start-page__station{color:#ffffff59;margin:0;font-size:clamp(10px,1.4dvw,18px);font-weight:600;position:absolute;bottom:clamp(12px,2dvh,28px);right:clamp(14px,2.2dvw,32px)}@supports not (width:100dvw){.start-page{width:100vw;height:100vh}.start-page__frame{width:min(100vw,133.333vh);height:min(100vh,75vw)}}.draw-page{color:#fff;background:#000;justify-content:center;align-items:center;width:100dvw;min-width:100dvw;height:100dvh;min-height:100dvh;display:flex;overflow:hidden}.draw-page,.draw-page *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.draw-page__frame{aspect-ratio:4/3;background:#050505;grid-template-rows:12% 88%;width:min(100dvw,133.333dvh);height:min(100dvh,75dvw);display:grid;position:relative;overflow:hidden}.draw-page__header{justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.draw-page__header-left{z-index:2;align-items:center;gap:clamp(8px,1dvw,12px);display:flex;position:absolute;top:50%;left:2.2%;transform:translateY(-50%)}.draw-page__station{color:#ffffff5c;white-space:nowrap;font-size:clamp(10px,1.2dvw,16px);font-weight:700}.draw-page__sketch-button{color:#ffffffeb;white-space:nowrap;cursor:pointer;background:#ffffff14;border:1px solid #ffffff42;border-radius:999px;justify-content:center;align-items:center;gap:.35em;min-width:0;max-width:clamp(96px,13dvw,138px);padding:.52em .85em;font-size:clamp(10px,1.15dvw,14px);font-weight:800;line-height:1;display:inline-flex}.draw-page__sketch-button:active{transform:scale(.97)}.draw-page__sketch-button:focus-visible{outline-offset:3px;outline:2px solid #00d1d1}.draw-page__logo{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;flex:none;width:clamp(72px,13.5%,140px);height:auto;max-height:86%;display:block}.draw-page__upload-button{color:#00d1d1;cursor:pointer;background:#00d1d11f;border:1px solid #00d1d180;border-radius:999px;align-items:center;gap:.4em;padding:.55em 1em;font-size:clamp(11px,1.4dvw,18px);font-weight:800;display:inline-flex;position:absolute;top:50%;right:2.2%;transform:translateY(-50%)}.draw-page__upload-button:active{transform:translateY(-50%)scale(.97)}.draw-page__body{grid-template-columns:18% 1fr 18%;gap:1.2%;min-height:0;padding:0 2% 2%;display:grid}.draw-side-panel{background:linear-gradient(#ffffff12,#ffffff06),#171717;border:1px solid #ffffff29;border-radius:14px;min-height:0;overflow:hidden;box-shadow:0 18px 40px #00000052}.color-panel{flex-direction:column;gap:clamp(8px,1.4dvh,14px);padding:clamp(10px,1.5dvw,18px);display:flex}.color-panel__section{min-height:0}.draw-panel-title{color:#ffffffeb;margin:0 0 clamp(6px,1dvh,10px);font-size:clamp(11px,1.45dvw,17px);font-weight:800}.color-grid,.recent-color-grid{grid-template-columns:repeat(3,1fr);gap:clamp(5px,.8dvw,9px);display:grid}.color-swatch{aspect-ratio:1;cursor:pointer;border:2px solid #ffffff29;border-radius:6px;width:100%;box-shadow:inset 0 0 0 1px #00000042}.color-swatch.is-selected{border-color:#fff;box-shadow:0 0 0 3px #ff2a2a,inset 0 0 0 1px #00000042}.color-swatch--small{border-radius:7px}.color-swatch--empty{box-shadow:none;cursor:default;background:linear-gradient(135deg,#ffffff0a,#ffffff03),#ffffff09;border:2px dashed #ffffff2e}.color-swatch--empty:disabled{opacity:1}.selected-color-preview{margin-top:clamp(8px,1.2dvh,12px)}.selected-color-preview__label{color:#ffffffb3;margin-bottom:5px;font-size:clamp(9px,1.05dvw,13px);font-weight:700;display:block}.selected-color-preview__box{border:2px solid #ffffff40;border-radius:8px;width:100%;height:clamp(28px,4.5dvh,48px);display:block}.selected-color-preview__button{cursor:pointer;background:0 0;border:0;width:100%;padding:0;display:block}.selected-color-preview__button:focus-visible{outline-offset:3px;border-radius:10px;outline:2px solid #00d1d1}.color-panel__sliders{border-top:1px solid #ffffff1a;flex:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(6px,.7dvw,10px);min-height:0;padding-top:clamp(8px,1.2dvh,12px);display:grid}.vertical-slider{grid-template-rows:auto 1fr;gap:6px;min-width:0;min-height:0;display:grid}.vertical-slider__header{flex-direction:column;align-items:center;gap:4px;display:flex}.vertical-slider__label{font-size:clamp(10px,1.15dvw,14px);font-weight:800}.vertical-slider__value{color:#ffffffe0;text-align:center;background:#ffffff14;border-radius:6px;min-width:34px;padding:4px 5px;font-size:clamp(8px,1dvw,11px);font-weight:700}.vertical-slider__control{justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;overflow:hidden}.vertical-slider__input{writing-mode:vertical-lr;accent-color:#00d1d1;cursor:pointer;direction:rtl;width:28px;height:clamp(133px,17dvh,160px)}.draw-page__canvas-shell{background:#525252;border:1px solid #ffffff29;border-radius:14px;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;overflow:hidden}.drawing-canvas{isolation:isolate;touch-action:none;-webkit-user-select:none;user-select:none;background:linear-gradient(135deg,#ffffff0f,#0000 38%),#5a5a5a;width:100%;height:100%;position:relative;overflow:hidden}.drawing-canvas__sketch-guide{z-index:1;object-fit:contain;object-position:center;filter:invert();pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;position:absolute;inset:0}.drawing-canvas.is-eyedropper .drawing-canvas__stage-layer{cursor:crosshair}.drawing-canvas__stage-layer{z-index:2;touch-action:none;width:100%;height:100%;position:absolute;inset:0}.drawing-canvas__stage-layer .konvajs-content{touch-action:none;width:100%!important;height:100%!important}.drawing-canvas__stage-layer canvas{touch-action:none}.drawing-canvas__empty-message{z-index:3;color:#ffffff8c;text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:absolute;inset:0}.drawing-canvas__empty-message strong{letter-spacing:-.04em;font-size:clamp(20px,3dvw,42px)}.drawing-canvas__empty-message span{font-size:clamp(11px,1.5dvw,18px);font-weight:700}.drawing-canvas__sketch-status{z-index:4;color:#ffffffc7;pointer-events:none;background:#0000005c;border-radius:999px;padding:5px 9px;font-size:clamp(8px,.9dvw,12px);font-weight:700;position:absolute;top:12px;right:12px}.drawing-canvas__debug-info{z-index:4;color:#ffffff94;pointer-events:none;flex-wrap:wrap;gap:6px;font-size:clamp(8px,.9dvw,12px);font-weight:700;display:flex;position:absolute;bottom:12px;left:14px}.drawing-canvas__debug-info span{background:#00000038;border-radius:999px;padding:4px 7px}.tool-panel{padding:clamp(10px,1.5dvw,18px)}.tool-panel__grid{grid-template-columns:1fr 1fr;gap:clamp(8px,1.2dvw,14px);height:100%;min-height:0;display:grid}.tool-button{color:#fff;cursor:pointer;background:linear-gradient(#ffffff14,#ffffff06),#242424;border:1px solid #ffffff21;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:clamp(5px,.9dvh,9px);min-width:0;min-height:0;padding:6px;display:flex}.tool-button.is-active{border-color:#00d1d1;box-shadow:0 0 0 2px #00d1d16b,0 0 24px #00d1d129}.tool-button:disabled{cursor:not-allowed;opacity:.35}.tool-button__icon{font-size:clamp(24px,3.4dvw,44px);line-height:1}.tool-button__label{text-align:center;font-size:clamp(9px,1.25dvw,15px);font-weight:800;line-height:1.15}.color-picker-panel{z-index:20;background:linear-gradient(#ffffff14,#ffffff08),#151515;border:1px solid #00d1d166;border-radius:14px;width:min(260px,27%);padding:12px;position:absolute;top:17%;left:calc(21.2% + 10px);box-shadow:0 22px 48px #0000007a}.color-picker-panel__header{color:#fff;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:clamp(12px,1.2dvw,15px);display:flex}.color-picker-panel__close{color:#fff;cursor:pointer;background:#ffffff14;border:0;border-radius:999px;width:26px;height:26px;font-size:18px;line-height:1}.color-picker-panel__sv-area{aspect-ratio:1.45;cursor:crosshair;touch-action:none;border:1px solid #fff3;border-radius:10px;width:100%;position:relative;overflow:hidden}.color-picker-panel__sv-cursor{pointer-events:none;border:2px solid #fff;border-radius:999px;width:14px;height:14px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #000}.color-picker-panel__preview-row{grid-template-columns:34px 1fr;align-items:center;gap:10px;margin-top:10px;display:grid}.color-picker-panel__preview{border:2px solid #ffffffe6;border-radius:999px;width:34px;height:34px}.color-picker-panel__hue{accent-color:#f05;width:100%}.color-picker-panel__rgb-row{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;display:grid}.color-picker-panel__rgb-row label{color:#ffffffd1;flex-direction:column-reverse;align-items:center;gap:4px;font-size:11px;font-weight:700;display:flex}.color-picker-panel__rgb-row input{color:#000;text-align:center;background:#ffffffeb;border:1px solid #ffffff2e;border-radius:6px;width:100%;min-width:0;padding:5px 2px;font-size:12px}.color-picker-panel__apply{color:#00d1d1;cursor:pointer;background:#00d1d124;border:1px solid #00d1d18c;border-radius:999px;width:100%;margin-top:12px;padding:8px 10px;font-size:13px;font-weight:800}.sketch-picker-backdrop{z-index:40;background:#00000057;position:absolute;inset:0}.sketch-picker-panel{background:linear-gradient(#ffffff14,#ffffff06),#151515;border:1px solid #00d1d16b;border-radius:16px;width:min(360px,42%);max-height:80%;padding:clamp(12px,1.5dvw,18px);position:absolute;top:12.5%;left:2.2%;overflow-y:auto;box-shadow:0 24px 52px #0000008f}.sketch-picker-panel__header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;display:flex}.sketch-picker-panel__header h2{color:#fff;margin:0;font-size:clamp(16px,2dvw,22px);font-weight:900}.sketch-picker-panel__header p{color:#ffffff9e;margin:5px 0 0;font-size:clamp(10px,1.1dvw,13px);font-weight:600}.sketch-picker-panel__close{color:#fff;cursor:pointer;background:#ffffff14;border:0;border-radius:999px;flex:none;width:30px;height:30px;font-size:20px;line-height:1}.sketch-picker-panel__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.1dvw,12px);display:grid}.sketch-option-card{color:#fff;cursor:pointer;background:#ffffff0b;border:2px solid #ffffff24;border-radius:12px;flex-direction:column;align-items:stretch;gap:7px;min-width:0;padding:8px;display:flex}.sketch-option-card.is-selected{border-color:#00d1d1;box-shadow:0 0 0 2px #00d1d147,0 0 22px #00d1d11f}.sketch-option-card__preview{aspect-ratio:12/13;background:#eee;border-radius:8px;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.sketch-option-card__preview img{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;padding:7px;display:block}.sketch-option-card__empty-icon{color:#505050;font-size:clamp(28px,4dvw,44px)}.sketch-option-card__label{color:#fffffff5;text-align:left;font-size:clamp(11px,1.3dvw,15px);font-weight:900}.sketch-option-card__description{color:#ffffff8f;text-align:left;font-size:clamp(8px,.9dvw,11px);font-weight:600;line-height:1.35}.sketch-picker-panel__notice{color:#ffffff94;margin:14px 0 0;font-size:clamp(9px,1dvw,12px);font-weight:600;line-height:1.4}@supports not (width:100dvw){.draw-page{width:100vw;height:100vh}.draw-page__frame{width:min(100vw,133.333vh);height:min(100vh,75vw)}}.tool-button__icon,.tool-button__label{pointer-events:none}.tool-button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.color-picker-panel__rgb-row input{-webkit-user-select:text;user-select:text}