@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600&display=swap";:root{color:#252523;font-synthesis:none;text-rendering:optimizelegibility;--ud-blue:#005aff;--ud-orange:#f6aa00;--ud-green:#03af7a;--ink:#252523;--muted:#74746e;--line:#d8d8d2;--panel:#fff;background:#fff;font-family:Inter,Noto Sans JP,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{min-height:100vh}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--ud-blue);outline-offset:2px}button:disabled{opacity:.45;cursor:not-allowed}::selection{color:#000;background:#bfe4ff}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}.app-shell{background:#fff;min-height:100vh}.topbar{border-bottom:1px solid var(--line);z-index:20;background:#fffffff5;justify-content:space-between;align-items:center;height:64px;padding:0 24px;display:flex;position:sticky;top:0}.brand{color:var(--ink);letter-spacing:-.03em;align-items:center;gap:10px;font-size:18px;font-weight:600;text-decoration:none;display:inline-flex}.brand-mark{background:#fff;border:1px solid #cfcfc9;border-radius:6px;align-items:flex-end;gap:2px;width:25px;height:25px;padding:3px;display:flex}.brand-mark i{border:1px solid #0000002e;border-radius:2px 2px 1px 1px;width:5px;display:block}.brand-mark i:first-child{background:var(--ud-blue);height:9px}.brand-mark i:nth-child(2){background:var(--ud-orange);height:17px}.brand-mark i:nth-child(3){background:var(--ud-green);height:13px}.brand-description{color:var(--muted);letter-spacing:0;white-space:nowrap;margin-left:2px;font-size:12px;font-weight:400}.header-actions,.tool-group{gap:8px;display:flex}.button{cursor:pointer;background:#fff;border:1px solid #cecec8;border-radius:7px;justify-content:center;align-items:center;gap:7px;height:36px;padding:0 13px;font-size:13px;font-weight:500;display:inline-flex}.button:hover{background:#f4f4f1}.button.primary{color:#fff;background:#292926;border-color:#292926}.button.primary:hover{background:#111}.workspace{grid-template-columns:minmax(0,1fr) 430px;height:calc(100vh - 64px);min-height:0;display:grid;overflow:hidden}.image-section{grid-template-rows:42px minmax(0,1fr) 44px;min-width:0;min-height:0;padding:22px 24px 18px;display:grid}.image-toolbar{align-items:flex-start;gap:9px;display:flex}.icon-button{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;width:34px;height:34px;display:inline-flex}.icon-button:hover{background:#e8e8e4}.icon-button.active{background:#fff;border-color:#bdbdb7;box-shadow:0 1px 2px #0000000f}.tool-group{border-right:1px solid var(--line);padding-right:9px}.text-button{color:#575751;cursor:pointer;background:0 0;border:0;align-items:center;gap:5px;height:34px;font-size:13px;display:inline-flex}.text-button:hover{text-underline-offset:3px;text-decoration:underline}.toolbar-hint{color:#676761;align-items:center;height:34px;font-size:13px;display:flex}.image-stage{background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,#0000 25%),linear-gradient(-45deg,#ccc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ccc 75%),linear-gradient(-45deg,#0000 75%,#ccc 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;border:1px solid #c8c8c8;border-radius:3px;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}.image-stage canvas{object-fit:contain;touch-action:none;width:auto;max-width:calc(100% - 64px);height:auto;max-height:calc(100% - 52px);display:block;box-shadow:0 16px 44px #14140f2e}.image-stage.selecting canvas{cursor:crosshair}.replace-button{color:#fff;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);cursor:pointer;background:#191916c7;border:1px solid #ffffff8f;border-radius:6px;align-items:center;gap:6px;min-height:36px;padding:0 12px;font-size:13px;display:inline-flex;position:absolute;top:12px;right:12px}.replace-button:hover{background:#0c0c0ad6}.loading{z-index:2;background:#fffffff0;border-radius:8px;align-items:center;gap:8px;padding:12px 15px;font-size:13px;display:flex;position:absolute}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.image-meta{color:#686862;justify-content:space-between;align-items:center;gap:20px;font-size:12px;display:flex;overflow:hidden}.image-meta>div{white-space:nowrap;align-items:center;gap:16px;display:flex}.image-meta-primary{min-width:0;overflow:hidden}.file-name{text-overflow:ellipsis;color:#3c3c38;max-width:240px;font-weight:500;overflow:hidden}.status{align-items:center;gap:4px;display:inline-flex}.paste-support{color:#686862;align-items:center;gap:4px;display:inline-flex}.palette-panel{border-left:1px solid var(--line);background:#fff;flex-direction:column;min-width:0;height:100%;min-height:0;padding:24px;display:flex;overflow:hidden}.panel-heading{justify-content:space-between;align-items:flex-start;margin-bottom:18px;display:flex}.panel-heading h1{letter-spacing:-.035em;margin:0 0 4px;font-size:19px;font-weight:600}.panel-heading p{color:#686862;margin:0;font-size:12px}.ratio-bar{background:#fff;border:1px solid #a9a9a3;border-radius:5px;height:43px;margin-bottom:7px;display:flex;overflow:hidden}.ratio-bar button{cursor:pointer;border:0;border-right:1px solid #ffffff7a;min-width:3px;padding:0;position:relative}.ratio-bar button:hover:after,.ratio-bar button.selected:after{content:"";border:2px solid #fff;position:absolute;inset:3px;box-shadow:0 0 0 1px #000000bf}.other-segment,.checker-swatch{background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,#0000 25%),linear-gradient(-45deg,#ccc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ccc 75%),linear-gradient(-45deg,#0000 75%,#ccc 75%);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px}.other-segment{border-left:1px solid #777;min-width:28px}.ratio-caption{color:#62625d;justify-content:flex-end;align-items:center;gap:5px;min-height:24px;margin-bottom:12px;font-size:12px;display:flex}.ratio-caption strong{color:#33332f;text-align:right;min-width:40px;font-family:DM Mono,monospace;font-size:12px}.checker-swatch{border:1px solid #8a8a84;border-radius:2px;width:17px;height:17px}.options-card{border:1px solid var(--line);background:#fff;border-radius:7px;margin-bottom:18px;padding:13px 14px}.checkbox-row{color:#33332f;cursor:pointer;align-items:center;gap:9px;min-height:32px;font-size:14px;font-weight:500;display:flex}.checkbox-row input{accent-color:#292926;width:18px;height:18px;margin:0}.slider-row{color:#62625d;grid-template-columns:74px 1fr 38px;align-items:center;gap:10px;margin-top:12px;font-size:12px;display:grid}.slider-row.disabled{opacity:.48}.slider-row input{accent-color:#44443f;width:100%}.slider-row output{text-align:right;color:#33332f;font-weight:600}.list-header{color:#686862;border-bottom:1px solid var(--line);grid-template-columns:1fr auto;padding:0 10px 8px 84px;font-size:12px;display:grid}.color-list{overscroll-behavior:contain;scrollbar-gutter:stable;flex:auto;min-height:80px;margin:0;overflow-y:auto}.color-row{text-align:left;cursor:pointer;background:0 0;border:0;border-bottom:1px solid #e4e4df;grid-template-columns:28px 36px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:9px 10px;display:grid;position:relative}.color-row:hover{background:#f6f6f3}.color-row.active{background:#f0f0ec;box-shadow:inset 3px 0 #30302c}.rank{color:#71716b;font-family:DM Mono,monospace;font-size:12px}.swatch{color:#fff;filter:drop-shadow(0 1px 1px #00000012);border:1px solid #0000002e;border-radius:4px;place-items:center;width:36px;height:29px;display:grid}.swatch svg{filter:drop-shadow(0 1px 2px #000c)}.color-label,.usage{flex-direction:column;gap:3px;min-width:0;display:flex}.color-label strong,.usage strong{font-family:DM Mono,monospace;font-size:13px;font-weight:500}.color-label small,.usage small{color:#686862;text-overflow:ellipsis;font-size:12px;overflow:hidden}.usage{text-align:right}.more-button{color:#33332f;cursor:pointer;background:#fff;border:0;border-bottom:1px solid #e4e4df;justify-content:center;align-items:center;gap:7px;width:100%;min-height:43px;font-size:13px;font-weight:600;display:flex}.more-button:hover{background:#f4f4f1}.more-button span{color:#686862;margin-left:4px;font-size:12px;font-weight:400}.color-detail{background:#fff;border:1px solid #bcbcb6;border-radius:8px;flex:none;width:100%;margin-top:12px;overflow:hidden}.detail-title{border-bottom:1px solid #e4e4df;grid-template-columns:36px 1fr 34px;align-items:center;gap:10px;min-height:56px;padding:8px 10px;display:grid}.detail-swatch{border:1px solid #0003;border-radius:5px;width:36px;height:36px}.detail-title div{flex-direction:column;gap:3px;display:flex}.detail-title strong{font-family:DM Mono,monospace;font-size:14px}.detail-title small{color:#686862;font-size:12px}.values-grid{grid-template-columns:1fr;display:grid}.values-grid button{cursor:pointer;text-align:left;background:0 0;border:0;border-bottom:1px solid #e4e4df;grid-template-columns:58px minmax(0,1fr) 16px;align-items:center;gap:8px;min-height:35px;padding:6px 10px;display:grid}.values-grid button:last-child{border-bottom:0}.values-grid button:hover{background:#f3f3ef}.values-grid span{color:#62625d;font-size:12px}.values-grid strong{text-overflow:ellipsis;white-space:nowrap;font-family:DM Mono,monospace;font-size:12px;font-weight:500;overflow:hidden}.visually-hidden{clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}@media (width<=900px){.workspace{height:auto;min-height:calc(100vh - 64px);display:block;overflow:visible}.image-section{grid-template-rows:42px 520px 44px;min-height:650px;padding:16px}.palette-panel{border-left:0;border-top:1px solid var(--line);height:auto;padding:24px max(18px,5vw) 32px;display:block;overflow:visible}.color-list{max-height:min(55vh,540px)}}@media (height<=760px) and (width>=901px){.palette-panel{padding-top:14px;padding-bottom:14px}.panel-heading{margin-bottom:10px}.ratio-bar{height:34px}.ratio-caption{margin-bottom:6px}.options-card{margin-bottom:10px;padding:8px 12px}.slider-row{margin-top:7px}.color-row{padding-top:6px;padding-bottom:6px}.detail-title{display:none}.values-grid{grid-template-columns:1fr 1fr}.values-grid button:nth-child(odd){border-right:1px solid #e4e4df}.values-grid button:nth-last-child(-n+2){border-bottom:0}}@media (width<=560px){.topbar{height:58px;padding:0 14px}.brand-description{display:none}.header-actions .subtle{width:36px;padding:0;font-size:0}.header-actions .subtle svg{width:17px}.button.primary{padding:0 10px}.image-section{grid-template-rows:42px 390px 52px;min-height:520px;padding:12px}.image-stage canvas{max-width:calc(100% - 24px);max-height:calc(100% - 44px)}.replace-button{top:8px;right:8px}.image-meta{align-items:flex-start;padding-top:7px}.image-meta>div{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.image-meta>div:last-child span:last-child,.paste-support{display:none}}