:root{--ink:#14201c;--mute:#4a5c54;--paper:#eef5f1;--accent:#0d7a5f;--accent-hot:#d4ff3d;--line:#14201c29;--panel:#ffffff80;--radius:3px;--font-display:"Syne", sans-serif;--font-body:"Instrument Sans", sans-serif;--atmosphere-a:#b5e6cf;--atmosphere-b:#d4ff3d;--atmosphere-c:#8fcbb0;--atmosphere-base:linear-gradient(165deg, #f4faf6 0%, #e0efe6 48%, #eef8b0 100%);--chip-paper:#f7f3ee}body.theme-groupie{--ink:#4a1830;--mute:#9a5a72;--paper:#fff1f4;--accent:#e85a8c;--accent-hot:#ffe566;--line:#4a183029;--panel:#fff8e89e;--atmosphere-a:#ffc2d4;--atmosphere-b:#ffe566;--atmosphere-c:#ff9eb5;--atmosphere-base:linear-gradient(165deg, #fff7fb 0%, #ffe8ef 48%, #fff3c4 100%);--chip-paper:#fff8e8}*,:before,:after{box-sizing:border-box}html{min-height:100%;margin:0}body{min-height:100dvh;font-family:var(--font-body);color:var(--ink);background:var(--paper);flex-direction:column;justify-content:safe center;margin:0;padding-top:3.25rem;line-height:1.45;transition:color .4s,background-color .4s;display:flex;overflow-x:hidden}#root{width:100%}[hidden]{display:none!important}.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}.atmosphere{z-index:-1;background:radial-gradient(ellipse 90% 55% at 8% -8%, var(--atmosphere-a) 0%, transparent 55%), radial-gradient(ellipse 65% 45% at 100% 12%, var(--atmosphere-b) 0%, transparent 42%), radial-gradient(ellipse 80% 60% at 55% 115%, var(--atmosphere-c) 0%, transparent 48%), var(--atmosphere-base);filter:saturate(1.08);transition:background .55s,filter .55s;animation:18s ease-in-out infinite alternate drift;position:fixed;inset:0}.atmosphere:after{content:"";opacity:.32;pointer-events:none;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");background-size:180px 180px;position:absolute;inset:0}@keyframes drift{0%{transform:scale(1)translate(0)}to{transform:scale(1.04)translate(-1.5%,1%)}}.app{width:min(1080px,100% - 2.5rem);margin:0 auto;padding:1.25rem 0 2rem}.app.page-enter{animation:.48s cubic-bezier(.22,1,.36,1) both pageEnter}.app.page-enter .brand h1,.app.page-enter .brand p,.app.page-enter .workspace,.app.page-enter .groupie-workspace{animation:none}@keyframes pageEnter{0%{opacity:0;filter:blur(2px);transform:translateY(12px)scale(.988)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}.app-nav{z-index:20;border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .35s,box-shadow .35s;display:inline-flex;position:fixed;top:.85rem;left:50%;overflow:hidden;transform:translate(-50%)}.app-nav-btn{appearance:none;color:var(--ink);font-family:var(--font-body);cursor:pointer;background:0 0;border:none;align-items:center;gap:.4rem;margin:0;padding:.45rem .95rem;font-size:.82rem;font-weight:600;transition:background .32s cubic-bezier(.22,1,.36,1),color .32s cubic-bezier(.22,1,.36,1),transform .2s;display:inline-flex}.app-nav-btn+.app-nav-btn{border-left:1.5px solid var(--ink)}.app-nav-btn.is-active{background:var(--ink);color:var(--accent-hot)}.app-nav-btn:active{transform:scale(.97)}body.theme-groupie .app-nav-btn.is-active{color:var(--accent-hot)}body.theme-groupie .groupie-badge{background:var(--ink);color:var(--accent-hot)}body.theme-groupie .app-nav-btn.is-active .groupie-badge{background:var(--accent-hot);color:var(--ink)}.groupie-view .brand h1{background:linear-gradient(105deg, var(--ink) 20%, #e85a8c 55%, #d4a017 100%);color:#0000;-webkit-background-clip:text;background-clip:text}.groupie-view .action-btn{border-color:var(--ink);background:#ffe5668c}.groupie-view .action-btn:hover{background:var(--accent);color:#fff8e8}.groupie-view .action-btn.is-flash{background:var(--accent-hot);color:var(--ink)}.groupie-view .action-btn-quiet{background:#ffc2d473}.groupie-chip{background:var(--chip-paper);border-color:var(--ink)}body.theme-groupie .groupie-chip{box-shadow:4px 4px #e85a8c2e}.app-nav-btn:hover:not(.is-active){background:#ffffffb3}.groupie-badge{background:var(--accent-hot);min-width:1.2rem;height:1.2rem;color:var(--ink);border-radius:2px;place-items:center;padding:0 .3rem;font-size:.68rem;font-weight:700;line-height:1;animation:.35s cubic-bezier(.22,1,.36,1) both badgePop;display:inline-grid}@keyframes badgePop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.app-nav-btn.is-active .groupie-badge{background:var(--accent-hot);color:var(--ink)}.brand h1{font-family:var(--font-display);letter-spacing:-.045em;margin:0;font-size:clamp(3rem,11vw,5.25rem);font-weight:800;line-height:.9;animation:.7s cubic-bezier(.22,1,.36,1) both rise}.brand p{max-width:28rem;color:var(--mute);margin:.85rem 0 0;font-size:1.02rem;animation:.7s cubic-bezier(.22,1,.36,1) 80ms both rise}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.workspace{gap:1rem;margin-top:clamp(1.75rem,4.5vh,2.75rem);animation:.7s cubic-bezier(.22,1,.36,1) .14s both rise;display:grid}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.85rem 1.25rem;display:flex}.mode-bar{border:none;margin:0;padding:0}.mode-toggle{border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--panel);grid-template-columns:1fr 1fr;display:inline-grid;overflow:hidden}.mode-btn{appearance:none;color:var(--ink);font-family:var(--font-body);letter-spacing:.01em;cursor:pointer;background:0 0;border:none;margin:0;padding:.5rem 1.15rem;font-size:.88rem;font-weight:600;transition:background .2s,color .2s}.mode-btn+.mode-btn{border-left:1.5px solid var(--ink)}.mode-btn.is-active{background:var(--ink);color:var(--accent-hot)}.mode-btn:hover:not(.is-active){background:#ffffffb3}.grid-control{min-width:min(100%,16rem);max-width:22rem;color:var(--mute);flex:1;align-items:center;gap:.7rem;font-size:.88rem;font-weight:500;display:flex}.grid-control-label{flex-shrink:0}.grid-control input[type=range]{appearance:none;background:var(--ink);cursor:pointer;border-radius:1px;flex:1;height:1.5px}.grid-control input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent-hot);border:1.5px solid var(--ink);cursor:pointer;border-radius:50%;width:14px;height:14px}.grid-control input[type=range]::-moz-range-thumb{background:var(--accent-hot);border:1.5px solid var(--ink);cursor:pointer;border-radius:50%;width:14px;height:14px}.grid-control output{font-family:var(--font-display);color:var(--ink);text-align:right;min-width:3rem;font-weight:700}.dropzone{border:1.5px dashed var(--ink);border-radius:var(--radius);background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;gap:.15rem 1rem;width:100%;padding:1.15rem 1.25rem;transition:background .25s,border-color .25s,transform .25s,padding .25s;display:grid}.dropzone:hover,.dropzone:focus-within{background:#ffffffb8;transform:translateY(-1px)}.dropzone.is-dragging{border-color:var(--accent);background:#d4ff3d61;border-style:solid}body.has-image .dropzone{padding:.7rem 1rem}.dropzone-kicker{background:var(--ink);color:var(--accent-hot);font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;border-radius:2px;grid-row:1/span 2;align-self:stretch;place-items:center;padding:0 .85rem;font-size:.78rem;font-weight:700;display:grid}body.has-image .dropzone-kicker{content:"Replace"}.dropzone-title{font-family:var(--font-display);letter-spacing:-.02em;font-size:1.15rem;font-weight:700;line-height:1.2}body.has-image .dropzone-title{white-space:nowrap;text-overflow:ellipsis;font-size:.98rem;overflow:hidden}.dropzone-hint{color:var(--mute);font-size:.86rem}body.has-image .dropzone-hint{font-size:.8rem}.stage{gap:1.35rem;margin-top:.35rem;display:grid}.stage.is-visible{animation:.55s cubic-bezier(.22,1,.36,1) both rise}.stage.is-visible .result-strip{animation:.5s cubic-bezier(.22,1,.36,1) both rise}.stage.is-visible .compare{animation:.55s cubic-bezier(.22,1,.36,1) 70ms both rise}.stage.is-visible #preview{animation:.65s cubic-bezier(.22,1,.36,1) .1s both mediaReveal}@keyframes mediaReveal{0%{opacity:0;filter:blur(6px);transform:scale(1.035)}to{opacity:1;filter:blur();transform:scale(1)}}.result-strip{border-bottom:1.5px solid var(--line);align-items:stretch;gap:1rem;padding-bottom:1.15rem;display:flex}.swatch{border-radius:var(--radius);border:1.5px solid var(--line);flex-shrink:0;width:5.25rem;height:5.25rem;transition:background-color .35s}.swatch-btn{appearance:none;cursor:zoom-in;margin:0;padding:0;transition:background-color .35s,transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}.swatch-btn:hover,.swatch-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;transform:scale(1.03)}.swatch-btn:active{transform:scale(.98)}.result-copy{flex-direction:column;flex:1;justify-content:center;gap:.15rem;min-width:0;display:flex}.swatch-label{font-family:var(--font-display);letter-spacing:-.03em;margin:0;font-size:clamp(1.6rem,4vw,2.1rem);font-weight:800;line-height:1}.color-name,.color-name-input{appearance:none;color:var(--ink);font-family:var(--font-display);letter-spacing:-.02em;text-align:left;box-shadow:none;background:0 0;border:none;border-radius:0;outline:none;margin:0;padding:0;font-size:.95rem;font-weight:700}.color-name{cursor:text;justify-self:start}.color-name.swatch-name,.color-name-input.swatch-name{margin-bottom:.15rem;font-size:1.05rem}.color-name.groupie-chip-name,.color-name-input.groupie-chip-name{font-size:.9rem}.color-name-input{width:100%;max-width:14rem;caret-color:var(--ink)}.color-name-input.groupie-chip-name{max-width:100%;margin-bottom:0}.color-name-input:focus,.color-name-input:focus-visible{box-shadow:none;background:0 0;border:none;outline:none}.swatch-rgb{color:var(--mute);margin:.2rem 0 0;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.88rem}.swatch-sub{color:var(--mute);margin:.15rem 0 0;font-size:.82rem}.result-actions{flex-direction:column;flex-shrink:0;justify-content:center;gap:.45rem;min-width:9.5rem;display:flex}.action-btn{appearance:none;border:1.5px solid var(--ink);color:var(--ink);font-family:var(--font-body);letter-spacing:.01em;text-align:left;border-radius:var(--radius);cursor:pointer;background:#ffe8e4d9;margin:0;padding:.55rem .75rem;font-size:.78rem;font-weight:600;transition:background .28s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1),color .28s cubic-bezier(.22,1,.36,1),box-shadow .28s}.action-btn:hover{background:var(--ink);color:var(--accent-hot);transform:translateY(-1px)}.action-btn:active{transform:translateY(0)}.action-btn.is-busy{pointer-events:none;animation:.85s ease-in-out infinite exportBusy}.action-btn.is-flash{background:var(--accent-hot);color:var(--ink);animation:.55s cubic-bezier(.22,1,.36,1) exportPop}@keyframes exportBusy{0%,to{opacity:.72;transform:translateY(0)}50%{opacity:1;transform:translateY(-1px)}}@keyframes exportPop{0%{transform:scale(1)}35%{transform:scale(1.045)}to{transform:scale(1)}}.action-btn-quiet{background:0 0}.action-btn:disabled{opacity:.4;cursor:not-allowed;animation:none;transform:none}.compare{grid-template-columns:1fr;gap:1rem;display:grid}body.mode-spatial .compare{grid-template-columns:1fr 1fr}.pane{gap:.45rem;min-width:0;margin:0;display:grid}.pane figcaption{font-family:var(--font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);font-size:.78rem;font-weight:700}#preview,.spatial-map{width:100%;aspect-ratio:var(--media-ratio,4 / 3);border-radius:var(--radius);max-height:48vh;display:block}#preview{object-fit:cover;object-position:center;background:#14201c14}.media-enlarge-btn{appearance:none;cursor:zoom-in;border-radius:var(--radius);background:0 0;border:none;width:100%;margin:0;padding:0;transition:transform .35s cubic-bezier(.22,1,.36,1);display:block;overflow:hidden}.media-enlarge-btn #preview{pointer-events:none;width:100%;transition:transform .45s cubic-bezier(.22,1,.36,1)}.media-enlarge-btn:hover #preview{transform:scale(1.02)}.media-enlarge-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.media-enlarge-btn:active{transform:scale(.995)}.enlarge-overlay{z-index:40;padding:1.25rem;padding-top:calc(4rem + env(safe-area-inset-top,0px));padding-bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));place-items:center;display:grid;position:fixed;inset:0}.enlarge-backdrop{appearance:none;-webkit-backdrop-filter:blur(14px);cursor:zoom-out;background:#14201c47;border:none;margin:0;padding:0;animation:.32s both overlayFadeIn;position:absolute;inset:0}body.theme-groupie .enlarge-backdrop{background:#4a183047}.enlarge-panel{z-index:1;gap:.85rem;width:min(920px,100%);max-height:min(88vh,920px);animation:.42s cubic-bezier(.22,1,.36,1) both panelIn;display:grid;position:relative}.enlarge-overlay.is-exiting{pointer-events:none}.enlarge-overlay.is-exiting .enlarge-backdrop{animation:.24s both overlayFadeOut}.enlarge-overlay.is-exiting .enlarge-panel{animation:.24s cubic-bezier(.4,0,1,1) both panelOut}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}@keyframes overlayFadeOut{0%{opacity:1}to{opacity:0}}@keyframes panelIn{0%{opacity:0;transform:translateY(16px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes panelOut{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(10px)scale(.98)}}.enlarge-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;animation:.4s cubic-bezier(.22,1,.36,1) 60ms both rise;display:flex}.enlarge-title{font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:0;font-size:1rem;font-weight:700}.enlarge-actions{flex-wrap:wrap;gap:.45rem;display:flex}.enlarge-stage{place-items:center;display:grid;position:relative}.enlarge-shutter{z-index:2;border-radius:var(--radius);pointer-events:none;background:#ffffffc7;animation:.42s ease-out both shutterFlash;position:absolute;inset:0}@keyframes shutterFlash{0%{opacity:0}18%{opacity:1}to{opacity:0}}.enlarge-photo{object-fit:contain;border-radius:var(--radius);border:1.5px solid var(--line);background:#ffffff59;width:100%;max-height:min(72vh,760px);animation:.55s cubic-bezier(.22,1,.36,1) 50ms both mediaReveal;display:block}.pantone-chip{border-radius:var(--radius);background:#f4efe8;border:1.5px solid #1a1a1a;grid-template-rows:minmax(280px,58vh) auto;width:min(420px,100%);margin:0 auto;animation:.48s cubic-bezier(.22,1,.36,1) 40ms both panelIn;display:grid;overflow:hidden;box-shadow:0 18px 48px #14201c2e}.pantone-chip-field{width:100%;min-height:280px}.pantone-chip-band{color:#1a1a1a;background:#f4efe8;gap:.2rem;padding:1.15rem 1.2rem 1.35rem;display:grid}.pantone-chip-brand{font-family:var(--font-display);letter-spacing:.08em;margin:0 0 .35rem;font-size:.78rem;font-weight:700}.pantone-chip-code{font-family:var(--font-display);letter-spacing:-.03em;margin:0;font-size:clamp(1.55rem,5vw,2rem);font-weight:800;line-height:1.05}.pantone-chip-name{font-family:var(--font-body);margin:.35rem 0 0;font-size:1.05rem;font-weight:600}.pantone-chip-hex{font-family:var(--font-body);margin:.15rem 0 0;font-size:.98rem;font-weight:600}.pantone-chip-rgb,.pantone-chip-note{color:#555;margin:.1rem 0 0;font-size:.88rem}.pantone-chip-rgb{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}@media (width<=720px){.enlarge-overlay{padding:.85rem;padding-top:calc(3.75rem + env(safe-area-inset-top,0px))}.enlarge-toolbar{flex-direction:column;align-items:stretch}.enlarge-actions{grid-template-columns:1fr 1fr;display:grid}.enlarge-actions .action-btn{text-align:center;width:100%;min-height:2.75rem}.pantone-chip{grid-template-rows:minmax(220px,46vh) auto;width:100%}.pantone-chip-field{min-height:220px}}.spatial-map{grid-template-columns:repeat(var(--cols,16), 1fr);grid-template-rows:repeat(var(--rows,16), 1fr);background:var(--ink);gap:1px;animation:.4s cubic-bezier(.22,1,.36,1) both rise;display:grid;overflow:hidden}.spatial-cell{appearance:none;cursor:pointer;border:none;min-height:0;margin:0;padding:0;transition:outline .15s,filter .15s}.spatial-cell:hover,.spatial-cell:focus-visible{outline:2px solid var(--accent-hot);outline-offset:-2px;filter:brightness(1.08);z-index:1}.spatial-cell.is-selected{outline:2px solid var(--ink);outline-offset:-2px;z-index:2}.dev-fluff{margin-top:.25rem}.dev-fluff>a{color:var(--mute);text-underline-offset:.18em;font-size:.88rem;text-decoration-thickness:1px;transition:color .2s}.dev-fluff>a:hover{color:var(--ink)}.json-panel{border-top:1.5px solid var(--line);margin-top:.85rem;padding-top:1.1rem}.json-head{justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.65rem;display:flex}.json-head h2{font-family:var(--font-display);letter-spacing:-.01em;margin:0;font-size:.95rem;font-weight:700}.copy-btn{appearance:none;background:var(--ink);color:var(--accent-hot);font-family:var(--font-body);border-radius:var(--radius);cursor:pointer;border:none;padding:.4rem .8rem;font-size:.82rem;font-weight:600;transition:transform .2s,background .2s}.copy-btn:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}.copy-btn:active{transform:translateY(0)}.json-preview{color:#d4ecd8;border-radius:var(--radius);white-space:pre-wrap;word-break:break-word;background:#14201ceb;max-height:42vh;margin:0;padding:1rem 1.05rem;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.8rem;line-height:1.55;overflow:auto}@media (width<=900px) and (orientation:portrait),(width<=720px){body{padding-top:calc(3.5rem + env(safe-area-inset-top,0px));padding-bottom:env(safe-area-inset-bottom,0px);justify-content:flex-start}.app{width:min(100% - 1.25rem,1080px);padding:.75rem 0 2.5rem}.app-nav{top:calc(.55rem + env(safe-area-inset-top,0px));width:min(100% - 1.25rem,22rem)}.app-nav-btn{flex:1;justify-content:center;min-height:2.75rem;padding:.55rem .7rem;font-size:.8rem}.brand h1{font-size:clamp(2.4rem,14vw,3.6rem)}.groupie-view .brand h1{letter-spacing:-.055em;white-space:nowrap;max-width:100%;font-size:clamp(1.3rem,10.8696vw - .271739rem,2.35rem)}.brand p{max-width:none;font-size:.95rem}.workspace,.groupie-workspace{gap:.95rem;margin-top:1.25rem}.toolbar{flex-direction:column;align-items:stretch;gap:.75rem}.mode-bar,.mode-toggle{width:100%}.mode-btn{min-height:2.75rem;padding:.7rem 1rem;font-size:.92rem}.grid-control{width:100%;min-width:0;max-width:none;padding:.35rem 0}.grid-control input[type=range]{height:2px}.grid-control input[type=range]::-webkit-slider-thumb{width:22px;height:22px}.grid-control input[type=range]::-moz-range-thumb{width:22px;height:22px}.dropzone{grid-template-rows:auto;grid-template-columns:1fr;gap:.45rem;padding:1rem}.dropzone-kicker{grid-row:auto;width:fit-content;min-height:2rem;padding:.35rem .7rem}.dropzone-title{white-space:normal;font-size:1.05rem}body.has-image .dropzone{padding:.85rem 1rem}.result-strip{grid-template-columns:4.75rem 1fr;grid-template-areas:"swatch copy""actions actions";align-items:start;gap:.85rem 1rem;display:grid}.swatch{grid-area:swatch;width:4.75rem;height:4.75rem}.result-copy{grid-area:copy;justify-content:flex-start}.swatch-label{font-size:clamp(1.35rem,8vw,1.8rem)}.result-actions{flex-direction:column;grid-area:actions;gap:.55rem;width:100%;min-width:0}.action-btn{text-align:center;width:100%;min-height:2.85rem;padding:.75rem .9rem;font-size:.88rem}body.mode-spatial .compare,.compare{grid-template-columns:1fr;gap:1.1rem}#preview,.spatial-map{max-height:none;aspect-ratio:var(--media-ratio,4 / 3);min-height:11rem}#preview{object-fit:contain;background:#14201c0f}.spatial-map{min-height:11rem}.spatial-cell{min-height:.65rem}.json-preview{max-height:36vh;font-size:.76rem}.groupie-toolbar{flex-direction:column;align-items:stretch;gap:.75rem}.groupie-actions{grid-template-columns:1fr 1fr;gap:.55rem;width:100%;display:grid}.groupie-actions .action-btn{width:100%}.groupie-list{grid-template-columns:1fr;gap:.75rem}.groupie-chip{grid-template-rows:7.5rem auto;grid-template-columns:1fr;min-height:0}.groupie-chip-swatch{width:100%;min-height:7.5rem}.groupie-chip-meta{align-content:start;padding:.7rem .8rem}.groupie-chip-remove{min-height:2rem;padding:.25rem 0}.color-name,.color-name-input{min-height:2rem;box-shadow:none;background:0 0;border:none;padding:.2rem 0}.color-name-input{max-width:100%;font-size:1rem}}@media (width<=420px){.brand h1{font-size:clamp(2.1rem,13vw,2.8rem)}.groupie-view .brand h1{letter-spacing:-.06em;font-size:clamp(1.2rem,10.5263vw - .210526rem,1.85rem)}.result-strip{grid-template-columns:1fr;grid-template-areas:"swatch""copy""actions";justify-items:start}.swatch{width:100%;height:5.5rem}}@media (width>=721px) and (orientation:landscape),(width>=901px){body.mode-spatial .compare{grid-template-columns:1fr 1fr}.result-strip{align-items:stretch;display:flex}.result-actions{flex-direction:column;width:auto;min-width:9.5rem}.groupie-list{grid-template-columns:1fr}.groupie-chip{grid-template-rows:7.5rem auto;grid-template-columns:none}}.groupie-workspace{gap:1.25rem;margin-top:clamp(1.75rem,4.5vh,2.75rem);animation:.7s cubic-bezier(.22,1,.36,1) .14s both rise;display:grid}.groupie-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.85rem 1.25rem;display:flex}.groupie-status{color:var(--mute);margin:0;font-size:.95rem}.groupie-actions{flex-wrap:wrap;gap:.45rem;display:flex}.groupie-empty{border-top:1.5px solid var(--line);color:var(--mute);padding:1.5rem 0}.groupie-empty p{max-width:28rem;margin:0}.groupie-empty strong{color:var(--ink);font-weight:600}.groupie-list{border-top:1.5px solid var(--line);grid-template-columns:1fr;gap:.85rem;max-width:22rem;margin:0;padding:1.25rem 0 0;list-style:none;display:grid}.groupie-chip{border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--chip-paper);grid-template-rows:7.5rem auto;grid-template-columns:1fr;transition:transform .28s cubic-bezier(.22,1,.36,1);animation:.45s cubic-bezier(.22,1,.36,1) both chipIn;display:grid;overflow:hidden}.groupie-chip:first-child{animation-delay:20ms}.groupie-chip:nth-child(2){animation-delay:60ms}.groupie-chip:nth-child(3){animation-delay:.1s}.groupie-chip:nth-child(4){animation-delay:.14s}.groupie-chip:nth-child(5){animation-delay:.18s}.groupie-chip:nth-child(n+6){animation-delay:.22s}@keyframes chipIn{0%{opacity:0;transform:translateY(10px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.groupie-chip-swatch{width:100%;height:100%;min-height:7.5rem}.groupie-chip-swatch-btn{appearance:none;cursor:zoom-in;border:none;margin:0;padding:0;transition:filter .3s,transform .35s cubic-bezier(.22,1,.36,1);display:block;overflow:hidden}.groupie-chip-swatch-btn:hover,.groupie-chip-swatch-btn:focus-visible{filter:brightness(1.05);outline:2px solid var(--ink);outline-offset:-2px}.groupie-chip-swatch-btn:active{transform:scale(.99)}.groupie-chip-meta{gap:.2rem;padding:.65rem .7rem .75rem;display:grid}.groupie-chip-hex{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:.95rem;font-weight:700}.groupie-chip-rgb{color:var(--mute);margin:0;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.7rem}.groupie-chip-note{color:var(--mute);margin:0;font-size:.72rem}.groupie-chip-remove{appearance:none;color:var(--ink);font-family:var(--font-body);text-underline-offset:.15em;cursor:pointer;background:0 0;border:none;justify-self:start;margin:.35rem 0 0;padding:0;font-size:.72rem;font-weight:600;text-decoration:underline}@media (width<=900px) and (orientation:portrait),(width<=720px){.groupie-list{grid-template-columns:1fr;max-width:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.atmosphere{animation:none!important}.app.page-enter,.stage.is-visible,.stage.is-visible .result-strip,.stage.is-visible .compare,.stage.is-visible #preview,.enlarge-backdrop,.enlarge-panel,.enlarge-toolbar,.enlarge-photo,.pantone-chip,.groupie-chip,.groupie-badge,.enlarge-shutter{filter:none!important;opacity:1!important;animation:none!important;transform:none!important}}