:root{color:#252723;font-synthesis:none;background:#f6f5f0;font-family:-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,Yu Gothic,sans-serif}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button:focus-visible{outline-offset:3px;outline:3px solid #c46e5d}button:disabled{cursor:default}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{max-width:1220px;margin:auto;padding:0 5% 50px}.header{border-bottom:1px solid #dcded6;align-items:center;height:76px;margin-bottom:32px;display:flex}.brand{letter-spacing:.13em;align-items:center;gap:11px;font-size:16px;font-weight:750;display:flex}.brand-mark{grid-template-columns:1fr 1fr;gap:2px;width:25px;height:25px;display:grid;transform:rotate(-8deg)}.brand-mark i{background:#c37260}.brand-mark i:nth-child(2){background:#e1b58b}.brand-mark i:nth-child(3){background:#8a9d83}.brand-mark i:nth-child(4){background:#d3b3a2}.workspace{grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr);align-items:start;gap:34px;display:grid}.viewer{background:#e6e7df;border-radius:4px;height:clamp(380px,50vw,620px);position:relative;overflow:hidden}.viewer video{object-fit:cover;width:100%;height:100%;display:block}.empty-state{place-items:center;height:100%;display:grid}.empty-art{width:142px;height:142px;position:relative}.art-ring{border:1px solid #bec7b9;border-radius:50%;position:absolute;inset:13px}.ring-two{border-color:#cbd2c7;inset:29px}.art-center{background:#c4cec0;border-radius:50%;position:absolute;inset:45px}.art-cross{color:#f2f3ec;font-size:30px;font-weight:200;position:absolute;top:50%;left:50%;transform:translate(-50%,-51%)}.loading{opacity:.55}.crosshair{pointer-events:none;border:1px solid #fff;border-radius:50%;width:32px;height:32px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0005}.crosshair:before,.crosshair:after{content:"";background:#fff;position:absolute;top:50%;left:50%;box-shadow:0 0 2px #000}.crosshair:before{width:14px;height:1px;transform:translate(-50%,-50%)}.crosshair:after{width:1px;height:14px;transform:translate(-50%,-50%)}.live-crosshair{top:50%;left:50%}.photo-crosshair{width:25px;height:25px}.photo-viewport{overscroll-behavior:contain;width:100%;height:100%;overflow:auto}.photo-scroll-content{justify-content:center;align-items:center;width:max-content;min-width:100%;height:max-content;min-height:100%;display:flex}.photo-wrap{flex:none;position:relative}.photo-wrap canvas{cursor:crosshair;width:100%;height:100%;display:block}.photo-wrap canvas.pixelated{image-rendering:pixelated}.viewer-bottom{justify-content:center;padding-top:12px;display:flex}.zoom-control{background:#f6f5f0;border:1px solid #dedfd8;border-radius:30px;align-items:center;gap:12px;padding:3px;display:flex}.zoom-control button{color:#4c554a;background:0 0;border:0;border-radius:50%;place-items:center;width:38px;height:38px;display:grid}.zoom-control button:disabled{opacity:.3}.zoom-control span{text-align:center;color:#687066;min-width:26px;font:12px ui-monospace,monospace}.actions{grid-template-columns:1fr auto 1fr;align-items:center;padding:19px 0 0;display:grid}.actions .image-button{justify-self:end}.image-button{color:#3d4a3d;background:0 0;border:1px solid #ced3ca;border-radius:50%;place-items:center;width:48px;height:48px;display:grid}.shutter{color:#fff;background:0 0;border:2px solid #343e35;border-radius:50%;place-items:center;width:76px;height:76px;padding:5px;display:grid}.shutter span{background:#343e35;border-radius:50%;width:100%;height:100%;display:block}.camera-button{background:#343e35;border:0}.camera-button:disabled{opacity:.5}.error{color:#8f4b3e;background:#f8eae5;margin-top:12px;padding:12px 16px;font-size:12px;line-height:1.6}.color-card{background:#fff;grid-template-columns:1fr;display:grid;overflow:hidden}.swatch{height:clamp(220px,26vw,330px);transition:background-color .12s}.result-info{padding:22px 24px 25px}.hex-button{color:#282b27;text-align:left;background:0 0;border:0;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:0 0 19px;display:flex}.hex-button strong{letter-spacing:-.06em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(26px,3vw,38px);font-weight:500}.hex-button:disabled{color:#b5b8b0}.copy-icon{border:1px solid #e5e7e1;border-radius:50%;flex:none;place-items:center;width:42px;height:42px;display:grid}.rgb-row{border-top:1px solid #eceee9;align-items:center;gap:20px;padding-top:16px;font-family:ui-monospace,monospace;display:flex}.rgb-row span{color:#949b91;letter-spacing:.1em;font-size:11px}.rgb-row strong{font-size:14px;font-weight:500}.pixel-panel{align-items:end;gap:16px;margin-top:25px;display:flex}.magnifier-wrap{aspect-ratio:1;background:#ecebe5;flex:1;width:min(100%,264px);min-width:0;position:relative}.magnifier-wrap canvas{width:100%;height:100%;image-rendering:pixelated;cursor:crosshair;display:block}.pixel-grid{pointer-events:none;background-image:linear-gradient(90deg,#0004 1px,#0000 1px),linear-gradient(#0004 1px,#0000 1px);background-size:9.09091% 9.09091%;position:absolute;inset:0}.pixel-selected{pointer-events:none;border:2px solid #fff;width:9.09091%;height:9.09091%;position:absolute;top:45.4545%;left:45.4545%;box-shadow:0 0 0 1px #000}.pixel-controls{flex-direction:column;align-items:end;gap:12px;display:flex}.pixel-coord{color:#81897e;white-space:nowrap;font:10px ui-monospace,monospace}.nudge{grid-template-columns:repeat(2,44px);gap:4px;display:grid}.nudge button{color:#535b50;background:0 0;border:1px solid #dcded6;height:44px;font-size:16px}@media (width<=700px){.app-shell{padding:0 16px calc(24px + env(safe-area-inset-bottom))}.header{height:58px;margin-bottom:16px}.brand{font-size:15px}.workspace{flex-direction:column;gap:22px;display:flex}.viewer-section,.result-section{width:100%}.viewer{height:min(53svh,520px);min-height:270px}.actions{padding-top:14px}.shutter{width:68px;height:68px}.color-card{grid-template-columns:38% 1fr}.swatch{height:auto;min-height:136px}.result-info{padding:16px}.hex-button{padding-bottom:14px}.hex-button strong{font-size:clamp(22px,6.1vw,32px)}.copy-icon{width:38px;height:38px}.rgb-row{gap:10px;padding-top:14px}.rgb-row strong{font-size:12px}.pixel-panel{margin-top:20px}.magnifier-wrap{max-width:286px}.nudge{grid-template-columns:repeat(2,44px)}}@media (width<=350px){.app-shell{padding-left:12px;padding-right:12px}.result-info{padding:12px}.hex-button strong{font-size:21px}.pixel-panel{gap:10px}}[hidden]{display:none!important}.header{justify-content:space-between}.header-actions{align-items:center;gap:8px;display:flex}.icon-button,.collection-toggle{color:#596358;background:0 0;border:0;border-radius:24px;justify-content:center;align-items:center;min-width:44px;height:44px;display:flex}.collection-toggle{border:1px solid #d8ddd3;gap:6px;padding:0 12px}.collection-toggle.active{color:#fff;background:#344238;border-color:#344238}.collection-toggle span{font:600 11px ui-monospace,monospace}.discovery{align-items:center;gap:8px;padding:14px 0 0;display:flex}.bubble-tray{touch-action:none;-webkit-user-select:none;user-select:none;flex:1;align-items:center;gap:clamp(4px,1vw,10px);min-height:54px;display:flex}.color-bubble{touch-action:none;border:2px solid #fff;border-radius:50%;flex:0 50px;width:50px;min-width:0;height:50px;padding:0;transition:transform .16s;animation:.36s cubic-bezier(.2,1.5,.5,1) both bubble-enter;position:relative;box-shadow:0 2px 8px #29362c2e,0 0 0 1px #26342815}.color-bubble:active,.color-bubble.just-collected{transform:scale(.8)}.bubble-shine{background:#fff9;border-radius:50%;width:25%;height:12%;position:absolute;top:7px;left:9px;transform:rotate(-30deg)}.bubble-check{color:#fff;filter:drop-shadow(0 1px 2px #0008);place-items:center;display:grid;position:absolute;inset:0}.collect-all{color:#465347;background:0 0;border:1px solid #cfd5cb;border-radius:50%;flex:none;justify-content:center;align-items:center;width:46px;height:46px;display:flex;position:relative}.collect-all span{font-size:14px;line-height:1;position:absolute;top:4px;right:5px}.collection{max-width:900px;margin:0 auto}.collection-top{justify-content:space-between;align-items:center;padding:8px 0 24px;display:flex}.collection-count{letter-spacing:-.05em;font:500 38px ui-monospace,monospace}.collection-count small{letter-spacing:.12em;color:#8b9489;margin-left:5px;font:600 10px ui-monospace,monospace}.collection-symbol{color:#b1beb0;font-size:25px}.collection-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;display:grid}.collection-item{background:#fff;min-width:0}.collection-swatch{height:150px}.collection-item-bottom{justify-content:space-between;align-items:center;gap:4px;padding:7px 8px 7px 12px;display:flex}.collection-item-bottom span{white-space:nowrap;font:500 12px ui-monospace,monospace}.collection-item-bottom button{color:#879085;background:0 0;border:0;flex:none;place-items:center;width:40px;height:40px;display:grid}.collection-empty{background:#e6e7df;flex-direction:column;justify-content:center;align-items:center;gap:17px;height:360px;display:flex}.empty-collection-icon{color:#9cac98;border:1px solid #bac6b6;border-radius:50%;place-items:center;width:76px;height:76px;display:grid}.empty-dots{gap:7px;display:flex}.empty-dots i{background:#c5d1c0;border-radius:50%;width:7px;height:7px}.empty-dots i:nth-child(2){background:#e0bca8}.empty-dots i:nth-child(3){background:#dbd0a8}@keyframes bubble-enter{0%{opacity:0;transform:translateY(10px)scale(.45)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=700px){.viewer{height:min(45svh,460px);min-height:250px}.discovery{gap:6px;padding-top:10px}.bubble-tray{gap:4px;min-height:48px}.color-bubble{flex-basis:45px;width:45px;height:45px}.collect-all{width:44px;height:44px}.actions{padding-top:12px}.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.collection-swatch{height:120px}.collection-item-bottom{padding-left:8px}.collection-item-bottom span{font-size:10px}.collection-item-bottom button{width:35px;height:40px}}@media (width<=350px){.color-bubble{flex-basis:40px;width:40px;height:40px}.collect-all{width:42px;height:42px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){.color-bubble{transition:none;animation:none}.swatch{transition:none}}.collection-nav{justify-content:center;min-height:46px;margin:4px 0 25px;display:flex}.collection-tabs{background:#e8eae3;border-radius:26px;align-items:center;gap:2px;padding:3px;display:flex}.collection-tabs button{color:#697468;background:0 0;border:0;border-radius:22px;justify-content:center;align-items:center;gap:8px;min-width:112px;height:40px;padding:0 15px;font-size:12px;display:flex}.collection-tabs button[aria-selected=true]{color:#2c3b30;background:#fff;box-shadow:0 1px 5px #29362c1a}.collection-tabs small{color:#939c91;font:11px ui-monospace,monospace}.tab-color-icon{background:conic-gradient(#cf8c75 0 33%,#a7b6a0 33% 66%,#e2cda4 66%);border-radius:50%;width:16px;height:16px}.collection-item{position:relative}.item-open{text-align:left;width:100%;color:inherit;background:0 0;border:0;padding:0;display:block}.collection-swatch,.collection-photo{object-fit:cover;width:100%;height:150px;display:block}.item-caption{justify-content:space-between;align-items:center;gap:4px;min-height:52px;padding:12px 42px 12px 12px;font:500 12px ui-monospace,monospace;display:flex}.item-caption small{color:#8c9589;align-items:center;gap:3px;font:10px ui-monospace,monospace;display:flex}.item-delete{color:#879085;background:0 0;border:0;place-items:center;width:42px;height:44px;display:grid;position:absolute;bottom:4px;right:2px}.mini-palette{display:flex}.mini-palette i{border:1px solid #fff;border-radius:50%;width:15px;height:15px;margin-left:-3px}.mini-palette i:first-child{margin-left:0}.detail-color{height:clamp(190px,25vw,300px)}.detail-title{justify-content:space-between;align-items:center;margin:16px 0 24px;font:500 28px ui-monospace,monospace;display:flex}.detail-title span{color:#858e82;align-items:center;gap:7px;font-size:12px;display:flex}.linked-photo{background:0 0;border:0;padding:0}.detail-photo{object-fit:contain;background:#e6e7df;width:100%;max-height:65vh;display:block}.detail-palette{flex-wrap:wrap;gap:12px;margin-top:20px;display:flex}.detail-palette button{background:#fff;border:0;flex-direction:column;align-items:center;gap:8px;padding:8px;display:flex}.detail-palette button span{border-radius:50%;width:54px;height:54px;display:block}.detail-palette small{font:10px ui-monospace,monospace}.legacy-note{color:#7b8479;font-size:12px;line-height:1.6}.add-selected{color:#475648;background:0 0;border:1px solid #dce1d8;border-radius:50%;place-items:center;width:42px;height:42px;margin-left:auto;display:grid}.add-selected:disabled,.collect-all:disabled,.color-bubble:disabled{opacity:.5}.rgb-row{padding-top:8px}.error{overflow-wrap:anywhere}@media (width<=700px){.collection-swatch,.collection-photo{height:120px}.item-caption{padding-left:8px;font-size:10px}.detail-title{font-size:22px}.collection-nav{margin-bottom:20px}.add-selected{width:38px;height:38px}}.photo-saving{z-index:4;background:#29362cb3;border-radius:50%;place-items:center;width:38px;height:38px;display:grid;position:absolute;top:14px;right:14px}.photo-saving span{border:2px solid #ffffff70;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.photo-saving span{animation:none}}