:root{color:#e2e6de;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--panel:#1c201e;--border:#343a34;--muted:#90998f;--accent:#e8aa87;--mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;background:#161918;font-family:Inter,Helvetica Neue,Arial,Noto Sans JP,sans-serif}*{box-sizing:border-box}body{min-width:360px;margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer;background:0 0;border:0;transition:background .15s,color .15s,border-color .15s}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button svg{flex-shrink:0}button:hover:not(:disabled){color:#fff5e9}a{color:inherit}h1,h2,h3,p{margin:0}.app{min-height:100vh}.topbar{border-bottom:1px solid var(--border);align-items:center;gap:29px;height:76px;padding:0 3.2%;display:flex}.brand{letter-spacing:-1.2px;align-items:center;font-size:25px;font-weight:650;text-decoration:none;display:flex}.brand-mark{color:var(--accent);place-items:center;margin-right:10px;display:grid}.brand-period{color:var(--accent)}.brand-caption{border-left:1px solid var(--border);color:#858e83;font:9px var(--mono);letter-spacing:1.6px;padding:7px 0 7px 26px}.topbar-right{align-items:center;gap:28px;margin-left:auto;display:flex}.privacy{color:var(--muted);align-items:center;gap:7px;font-size:10px;display:flex}.privacy svg{color:#a9b99f}.language-switch{font:10px var(--mono);color:#606b61;align-items:center;gap:6px;display:flex}.language-switch button{font:inherit;color:var(--muted);padding:7px 2px}.language-switch button[aria-pressed=true]{color:#f0f0e8}.help{font-size:11px;position:relative}.help summary{cursor:pointer;color:#b6beb1;align-items:center;gap:8px;list-style:none;display:flex}.help summary::-webkit-details-marker{display:none}.help summary>span:first-child{width:17px;height:17px;font:10px var(--mono);border:1px solid #7a8478;border-radius:50%;place-items:center;display:grid}.help-popover{z-index:20;background:#252c25;border:1px solid #555f50;border-radius:7px;width:330px;padding:22px;line-height:1.9;position:absolute;top:33px;right:0;box-shadow:0 12px 40px #0005}.help-popover ol{color:#c3ccbf;padding-left:18px}.help-popover li{padding-bottom:9px}.help-popover p{color:var(--muted);font-size:10px}main{max-width:1690px;margin:0 auto;padding:0 3.2%}.intro{justify-content:space-between;align-items:center;gap:25px;padding:30px 0 28px;display:flex}.eyebrow{font:8px var(--mono);letter-spacing:1.7px;color:#a5b19c;align-items:center;gap:7px;margin-bottom:11px;display:flex}.eyebrow i,.status-dot{background:var(--accent);border-radius:50%;flex-shrink:0;width:5px;height:5px}h1{letter-spacing:1.1px;font-size:25px;font-weight:500;line-height:1.5}.intro p{color:var(--muted);letter-spacing:.3px;margin-top:9px;font-size:11px}.intro-actions{flex-shrink:0;align-items:center;gap:23px;padding-top:17px;display:flex}.text-button{color:#b3bcae;align-items:center;gap:10px;padding:10px 0;font-size:10px;display:flex}.button{border:1px solid #505947;border-radius:5px;justify-content:center;align-items:center;gap:9px;padding:12px 20px;font-size:11px;font-weight:500;display:inline-flex}.primary{background:var(--accent);color:#28251f;border-color:var(--accent)}.primary:hover:not(:disabled){color:#28251f;background:#f1bda0}.error{color:#f4c7ad;background:#452b24;border:1px solid #8c5e48;border-radius:5px;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px;padding:13px 16px;font-size:12px;display:flex}.error button{place-items:center;display:grid}.workspace{border:1px solid var(--border);background:var(--panel);border-radius:8px;grid-template-columns:minmax(0,1fr) 304px;display:grid;position:relative;overflow:hidden}.source-panel{flex-direction:column;min-width:0;display:flex}.panel-toolbar{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:15px;height:53px;padding:0 20px;display:flex}.panel-toolbar h2{white-space:nowrap;align-items:center;gap:9px;font-size:11px;font-weight:500;display:flex}.panel-toolbar h2 svg{color:#9eac96}.toolbar-hint{color:var(--muted);align-items:center;gap:6px;margin-left:auto;font-size:9px;display:flex}.toolbar-hint svg{color:var(--accent)}.icon-button{color:#a7b19f;border-radius:4px;place-items:center;width:27px;height:27px;display:grid}.icon-button:hover:not(:disabled){background:#333b30}.change-image{margin-left:2px}.image-stage{background-color:#141715;background-image:radial-gradient(#353b326b .6px,#0000 .6px);background-size:13px 13px;flex:1;justify-content:center;align-items:center;min-height:420px;padding:28px 45px;display:flex;position:relative}.image-frame{width:min(100%, calc(364px * var(--image-ratio)));flex-shrink:0;position:relative;box-shadow:0 10px 35px #0003}.image-surface{cursor:crosshair;background:repeating-conic-gradient(#c4c8c1 0% 25%,#eef0ec 0% 50%) 0/16px 16px;width:100%;padding:0;line-height:0;display:block}.image-surface:disabled{opacity:1}.image-surface img{-webkit-user-select:none;user-select:none;width:100%;height:auto;display:block}.image-pin{z-index:3;background:var(--pin-color);color:#fff;width:25px;height:25px;font:9px var(--mono);text-shadow:0 1px 3px #000;border:2px solid #f7f3e9;border-radius:50%;place-items:center;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 6px #0005}.image-pin:before{content:"";border:1px solid #0000;border-radius:50%;position:absolute;inset:-6px}.image-pin.active{box-shadow:0 0 0 4px #171c1760, 0 0 0 5px var(--accent), 0 2px 8px #0005;border-color:#fff4df}.image-pin:hover:before{border-color:#fffc}.probe-cross{pointer-events:none;z-index:2;border:1px solid #fff;border-radius:50%;width:15px;height:15px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0008}.probe-cross:before,.probe-cross:after{content:"";background:#fff;position:absolute}.probe-cross:before{width:23px;height:1px;top:6px;left:-5px}.probe-cross:after{width:1px;height:23px;top:-5px;left:6px}.probe-readout{font:9px var(--mono);z-index:5;pointer-events:none;background:#20261feb;border:1px solid #48503e;border-radius:4px;align-items:center;gap:8px;padding:6px 9px;display:flex;position:absolute;bottom:9px;left:14px}.probe-readout i{border-radius:2px;width:12px;height:12px}.probe-readout span:last-child{color:var(--muted);border-left:1px solid #4d5844;padding-left:8px}.magnifier{z-index:5;pointer-events:none;background:#20261ff5;border:1px solid #68745c;border-radius:6px;width:164px;padding:6px;position:absolute;top:15px;right:15px;box-shadow:0 6px 24px #0007}.magnifier.on-left{left:15px;right:auto}.magnifier-view{background:repeating-conic-gradient(#6b7365 0% 25%,#939b8c 0% 50%) 0/20px 20px;width:150px;height:150px;position:relative}.magnifier-view canvas{width:100%;height:100%;image-rendering:pixelated;display:block}.magnifier-target{border:1px solid #fff;width:10px;height:10px;position:absolute;top:70px;left:70px;box-shadow:0 0 0 1px #151a15}.magnifier-target:before,.magnifier-target:after{content:"";background:#fff;position:absolute;box-shadow:0 0 1px #000}.magnifier-target:before{width:1px;height:6px;top:-10px;left:3px}.magnifier-target:after{width:6px;height:1px;top:3px;left:-10px}.magnifier-scale{color:#fff;font:9px var(--mono);background:#171c17c9;border-radius:2px;padding:3px 4px;position:absolute;bottom:5px;right:5px}.magnifier-info{font:8px var(--mono);white-space:nowrap;align-items:center;gap:5px;padding:8px 0 2px;display:flex}.magnifier-info i{border:1px solid #ffffff40;border-radius:2px;flex-shrink:0;width:10px;height:10px}.magnifier-info>span:last-child{color:#b1bda6;margin-left:auto;font-size:7px}.stage-label{font:7px var(--mono);letter-spacing:1.8px;color:#717e6a;position:absolute;bottom:13px;right:16px}.loading-overlay{z-index:6;color:#b8c3b0;background:#171d17cf;justify-content:center;align-items:center;gap:12px;font-size:11px;display:flex;position:absolute;inset:0}.spinner{border:1.5px solid #6a745a;border-top-color:var(--accent);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.image-bottom{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:15px;height:45px;padding:0 18px;display:flex}.file-info{color:#b9c1b2;align-items:center;gap:8px;min-width:0;font-size:9px;display:flex}.file-info>span:nth-child(2){text-overflow:ellipsis;white-space:nowrap;max-width:220px;overflow:hidden}.image-size{font:8px var(--mono);white-space:nowrap;color:var(--muted);margin-left:7px}.line-controls{color:var(--muted);flex-shrink:0;align-items:center;gap:8px;font-size:8px;display:flex}.segmented{border:1px solid #3b4436;border-radius:4px;gap:1px;padding:2px;display:flex}.segmented button{color:#949f8c;border-radius:2px;padding:5px 8px;font-size:8px}.segmented button[aria-pressed=true]{color:#e5eadf;background:#38412f}.palette-panel{border-left:1px solid var(--border);background:#1e231f;flex-direction:column;min-width:0;display:flex}.palette-panel .panel-toolbar{justify-content:space-between;gap:8px;padding:0 17px}.count{font:9px var(--mono);color:#b0bc9e;background:#30382b;border-radius:3px;padding:3px 5px}.palette-actions{align-items:center;gap:5px;display:flex}.clear-button{color:#9ca592;white-space:nowrap;padding:7px 0 7px 5px;font-size:8px}.sample-list{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#4c5743 transparent;height:270px;padding:9px 11px;position:relative;overflow-y:auto}.sample-row{z-index:3;background:#1e231f;border:1px solid #0000;border-radius:5px;align-items:center;margin-bottom:3px;display:flex;position:relative}.sample-row:hover{background:#272e25}.sample-row.active{background:#343b2d;border-color:#687453}.sample-select{text-align:left;flex:1;align-items:center;gap:11px;min-width:0;padding:7px 0 7px 8px;display:flex}.sample-number{font:9px var(--mono);color:#a2ae95;width:16px}.swatch{border-radius:4px;flex-shrink:0;width:34px;height:34px;display:block;box-shadow:inset 0 0 0 1px #ffffff14}.sample-meta{flex-direction:column;gap:5px;display:flex}.sample-meta strong{font:11px var(--mono);letter-spacing:.4px}.sample-meta>span{font:8px var(--mono);color:#97a18d}.sample-meta>span>span{color:#7f8976;padding-left:6px;font-size:7px}.sample-remove{color:#86917c;place-items:center;width:28px;min-height:35px;margin-right:2px;display:grid}.sample-remove:hover{color:#e8aa87!important}.empty-palette{text-align:center;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:22px;display:flex}.empty-palette>span{width:50px;height:50px;color:var(--accent);background:#2d3628;border:1px dashed #59654d;border-radius:50%;place-items:center;margin-bottom:18px;display:grid}.empty-palette strong{font-size:11px;font-weight:500}.empty-palette p{color:var(--muted);margin-top:10px;font-size:10px;line-height:1.8}.selection-detail{border-top:1px solid var(--border);min-height:134px;margin-top:auto;padding:17px 20px 16px}.detail-heading{color:#a4af9a;justify-content:space-between;align-items:center;font-size:9px;display:flex}.selection-id{font:8px var(--mono);color:#aebf99;letter-spacing:1px}.selected-hex{align-items:center;gap:9px;margin-top:10px;display:flex}.selected-hex>i{border-radius:3px;width:17px;height:17px;box-shadow:inset 0 0 0 1px #ffffff14}.selected-hex>span{font:17px var(--mono);letter-spacing:.5px;-webkit-user-select:all;user-select:all}.selected-hex .icon-button{margin-left:auto}.detail-values{grid-template-columns:32px 1fr;align-items:center;row-gap:6px;margin-top:8px;display:grid}.detail-values>span{font:8px var(--mono);color:var(--muted)}.detail-values code{font:9px var(--mono);color:#c0c9b7}.selection-placeholder{color:var(--muted);padding:22px 0;font-size:10px}.export-controls{gap:7px;padding:0 16px 16px;display:flex}.export-controls select{color:#b4c0a7;font:9px var(--mono);background:#252c23;border:1px solid #46513c;border-radius:4px;padding:9px 4px 9px 8px}.export-button{background:#2b3427;border-color:#46513c;flex:1;padding:9px 8px;font-size:10px}.export-button:hover:not(:disabled){background:#3b4733}.connections{pointer-events:none;z-index:2;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.empty-image{color:#b4c3a5;flex-direction:column;align-items:center;gap:17px;padding:50px;display:flex}.empty-image strong{font-size:15px;font-weight:500}.empty-image span{color:var(--muted);font-size:10px}.analysis-section{padding-top:29px}.analysis-heading{justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px;display:flex}.analysis-heading h2{align-items:center;gap:15px;font-size:12px;font-weight:500;display:flex}.analysis-heading h2>span{font:7px var(--mono);letter-spacing:1.4px;color:#829174;border-left:1px solid var(--border);padding-left:15px}.analysis-heading p{color:var(--muted);font-size:9px}.analysis-grid{grid-template-columns:1fr 1fr 1fr;gap:16px;display:grid}.analysis-card{background:var(--panel);border:1px solid var(--border);border-radius:7px;min-width:0;overflow:hidden}.card-heading{align-items:flex-start;gap:11px;padding:19px 19px 0;display:flex}.section-number{font:8px var(--mono);color:#a8b49a;background:#30382b;border:1px solid #444e3a;border-radius:3px;padding:4px}.card-heading h3{margin:1px 0 6px;font-size:11px;font-weight:500}.card-heading p{color:var(--muted);font-size:9px;line-height:1.6}.card-code{font:8px var(--mono);color:#818c78;margin-left:auto;padding-top:4px}.plot{aspect-ratio:1;width:230px;max-width:100%;margin:0 auto;position:relative}.plot>canvas,.plot>svg{width:100%;height:100%;position:absolute;inset:0}.plot-grid{stroke:#afc19d;stroke-opacity:.19;stroke-width:.8px;fill:none}.scope .plot-grid{stroke-opacity:.23}.axis-label{font:9px var(--mono);fill:#919f86}.scope-target{fill:none;stroke:#89977d;stroke-width:1px;opacity:.6}.plot-marker{cursor:pointer;outline:none}.plot-marker text{font:8px var(--mono);pointer-events:none;paint-order:stroke;stroke:#0003;stroke-width:1px}.plot-marker:focus-visible>circle:last-of-type,.plot-marker:hover>circle:last-of-type{stroke:#fff;stroke-width:3px}.plot-marker.active{filter:drop-shadow(0 1px 4px #0009)}.plot-footer{color:#95a18b;border-top:1px solid #30372c;justify-content:center;align-items:center;gap:7px;height:34px;font-size:8px;display:flex}.mini-dot{background:#acb99d;border-radius:50%;width:4px;height:4px}.scope-footer{justify-content:space-between;padding:0 18px}.scope-footer label{cursor:pointer;align-items:center;gap:6px;display:flex}.scope-footer input{accent-color:#b7c69e;width:11px;height:11px;margin:0}.scope-footer>span{font:7px var(--mono);letter-spacing:.5px}.hsv-sliders{padding:24px 25px 0}.channel{margin-bottom:22px}.channel-heading{color:#b4bfa9;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:9px;display:flex}.channel-heading b{font:9px var(--mono);color:#9ba98d;width:22px;display:inline-block}.channel-heading output{font:10px var(--mono);color:#d7dfce}.channel-track{border-radius:5px;height:6px;margin:0 5px;position:relative}.track-point{border:1.5px solid #d5dfcd;border-radius:3px;width:11px;height:16px;padding:0;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0005}.track-point.active{outline:1px solid var(--accent);outline-offset:3px;z-index:1;border-color:#fff3dd}.track-point:after{content:"";position:absolute;inset:-8px -4px}.channel-scale{font:7px var(--mono);color:#7d8b73;justify-content:space-between;margin-top:9px;display:flex}.sliders-note{color:#8c9a81;align-items:center;gap:6px;padding:0 0 18px;font-size:8px;display:flex}.sliders-note i{background:var(--accent);border-radius:50%;width:4px;height:4px}footer{color:#86927c;justify-content:space-between;align-items:center;gap:20px;padding:24px 0 28px;font-size:8px;display:flex}footer>span{align-items:center;gap:7px;display:flex}.footer-brand{color:#b2bca9;letter-spacing:-.2px;margin-right:8px;font-size:10px;font-weight:600}.drop-overlay{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);z-index:50;border:2px dashed var(--accent);pointer-events:none;background:#181f18ed;border-radius:12px;place-items:center;display:grid;position:fixed;inset:10px}.drop-overlay>div{color:var(--accent);flex-direction:column;align-items:center;gap:22px;display:flex}.drop-overlay strong{font-size:24px;font-weight:500}.drop-overlay span{font:12px var(--mono);color:#a9b89a}.toast{color:#e1e9d9;opacity:0;pointer-events:none;z-index:30;background:#303c2c;border:1px solid #687958;border-radius:6px;align-items:center;gap:9px;width:max-content;max-width:calc(100% - 32px);padding:13px 19px;font-size:11px;line-height:1.7;transition:opacity .2s,transform .2s;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%,8px);box-shadow:0 8px 35px #0006}.toast.visible{opacity:1;transform:translate(-50%)}.toast svg{color:var(--accent);flex-shrink:0}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width>=1500px){.image-stage{min-height:484px}.image-frame{width:min(100%, calc(428px * var(--image-ratio)))}.sample-list{height:334px}.workspace{grid-template-columns:minmax(0,1fr) 330px}.sample-select{padding-top:10px;padding-bottom:10px}}@media (width<=1150px){.privacy{display:none}.workspace{grid-template-columns:minmax(0,1fr) 276px}.image-stage{padding:28px}.image-size{display:none}.image-bottom{padding:0 13px}.file-info>span:nth-child(2){max-width:150px}.line-controls>svg,.line-controls>span,.card-code{display:none}.card-heading{padding-left:15px;padding-right:15px}.card-heading p{font-size:8px}.hsv-sliders{padding-left:19px;padding-right:19px}.analysis-grid{gap:12px}}@media (width<=850px){.brand-caption{display:none}.intro{align-items:flex-start}h1{font-size:22px}.intro p{max-width:300px;line-height:1.9}.intro-actions{gap:13px}.intro-actions .text-button{font-size:9px}.workspace{grid-template-columns:minmax(0,1fr) 250px}.palette-panel .panel-toolbar{padding:0 12px}.image-stage{min-height:372px;padding:22px}.image-frame{width:min(100%, calc(328px * var(--image-ratio)))}.source-panel .panel-toolbar{padding:0 13px}.toolbar-hint{display:none}.change-image{margin-left:auto}.sample-list{height:230px;padding:8px}.sample-select{gap:7px;padding-left:6px}.swatch{width:30px;height:30px}.sample-remove{width:24px}.sample-meta strong{font-size:10px}.sample-meta>span{font-size:7px}.image-bottom{flex-direction:column;align-items:flex-start;gap:8px;height:auto;min-height:60px;padding-top:10px;padding-bottom:8px}.line-controls{align-self:flex-end}.line-controls>span{display:inline}.analysis-heading p{display:none}.analysis-grid{grid-template-columns:1fr 1fr}.sliders-card{grid-column:1/-1}.hsv-sliders{grid-template-columns:repeat(3,1fr);gap:24px;padding:23px 24px 0;display:grid}.channel{margin-bottom:0}.sliders-note{grid-column:1/-1;margin-top:-9px}}@media (width<=600px){.topbar{height:65px;padding:0 20px}.brand{font-size:23px}.topbar-right{gap:20px}.help-label{display:none}.help-popover{width:300px}main{padding:0 16px}.intro{padding:26px 1px 22px;display:block}.eyebrow{margin-bottom:10px;font-size:7px}h1{letter-spacing:.4px;font-size:20px}.intro p{max-width:100%;font-size:10px}.intro-actions{flex-direction:row-reverse;justify-content:space-between;padding-top:18px}.intro-actions .button{padding:11px 17px}.intro-actions .text-button{padding:10px}.workspace{border-radius:6px;flex-direction:column;display:flex}.panel-toolbar{height:47px}.source-panel .panel-toolbar{padding:0 15px}.toolbar-hint{font-size:8px;display:flex}.change-image{margin-left:0}.image-stage{min-height:275px;padding:27px 23px}.image-frame{width:min(100%, calc(300px * var(--image-ratio)))}.stage-label{font-size:6px;bottom:10px}.image-bottom{flex-direction:row;align-items:center;gap:10px;min-height:42px;padding:10px 13px}.file-info{font-size:8px}.file-info>span:nth-child(2){max-width:123px}.line-controls{align-self:center}.line-controls>span{display:none}.segmented button{padding:6px;font-size:7px}.palette-panel{border-left:0;border-top:1px solid var(--border)}.palette-panel .panel-toolbar{padding:0 15px}.sample-list{height:184px;padding:8px 10px}.sample-select{gap:14px;padding:8px}.sample-meta{flex-flow:wrap;align-items:center;gap:20px}.sample-meta strong{font-size:11px}.sample-meta>span{font-size:8px}.sample-remove{width:36px;min-height:40px}.clear-button{padding:9px;font-size:9px}.selection-detail{grid-template-columns:1fr 1fr;column-gap:20px;min-height:100px;padding:16px 20px;display:grid}.detail-heading{grid-column:1/-1}.detail-values{align-content:center}.selected-hex>span{font-size:14px}.selected-hex>i{display:none}.selected-hex .icon-button{margin-left:0}.detail-values code{font-size:8px}.selection-placeholder{grid-column:1/-1;padding:20px 0 5px}.export-controls{padding:0 20px 18px}.export-button{padding:11px;font-size:11px}.connections{opacity:.7}.analysis-section{padding-top:25px}.analysis-heading h2{gap:12px;font-size:11px}.analysis-heading h2>span{padding-left:12px;font-size:6px}.analysis-grid{grid-template-columns:1fr;gap:13px}.hsv-sliders{padding:23px 24px 0;display:block}.channel{margin-bottom:20px}.sliders-note{margin-top:0}.card-heading{padding:19px 19px 0}.card-heading p{font-size:9px}.card-code{display:inline}.plot{width:270px}.plot-footer{height:38px;font-size:9px}footer{flex-direction:column;align-items:flex-start;gap:14px;padding:23px 4px}.drop-overlay strong{font-size:19px}.drop-overlay span{font-size:9px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}