.tuner{grid-template:".device"1fr"title device""sub device""name device""bar device""cta device"".device"1fr".note""more more"/minmax(0,1fr) auto;column-gap:clamp(32px,6vw,112px);display:grid;position:relative}.tuner__title{grid-area:title}.tuner__sub{grid-area:sub}.tuner__name{grid-area:name}.tuner__bar{grid-area:bar}.tuner__cta{grid-area:cta}.tuner__device{grid-area:device;justify-self:center}.tuner__note{grid-area:note}.tuner__more{grid-area:more}.tuner__title{letter-spacing:-.032em;max-width:11ch;margin:0;font-size:clamp(2.5rem,4.4vw + .4rem,4.5rem);font-weight:760;line-height:1.02}.tuner__sub{max-width:34ch;color:var(--muted);margin:20px 0 0;font-size:clamp(1.0625rem,.5vw + .95rem,1.25rem)}.tuner__name{max-width:480px;margin-top:40px}.tuner__name>label,.tuner__label{color:var(--fg);margin-bottom:8px;font-size:.875rem;font-weight:600;display:block}.tuner__name-row{gap:10px;display:flex}.tuner__name input[type=text]{border:1px solid var(--field-line);background:var(--field);min-width:0;color:var(--fg);font:inherit;border-radius:12px;flex:1;padding:14px 16px;font-size:1.0625rem;transition:border-color .2s,box-shadow .2s}.tuner__name input::placeholder{color:var(--muted)}.tuner__name input[type=text]:focus{border-color:var(--fg);outline:none;box-shadow:0 0 0 3px #f4f1ec2e}.tuner__logo-btn,.tuner__logo{border:1px solid var(--field-line);background:var(--field);height:54px;color:var(--fg);border-radius:12px;flex:none;align-items:center;gap:8px;display:inline-flex}.tuner__logo-btn{cursor:pointer;padding:0 16px;font-size:.9375rem;font-weight:600;transition:border-color .2s}.tuner__logo-btn:hover{border-color:var(--fg)}.tuner__logo-btn:focus-within{outline:2px solid var(--zenox);outline-offset:3px}.tuner__logo{padding:0 6px 0 10px}.tuner__logo img{object-fit:contain;background:#fff;border-radius:4px;max-width:64px;max-height:32px;padding:2px}.tuner__logo button{width:32px;height:32px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;display:grid}.tuner__logo button:hover{color:var(--fg);background:var(--field)}.tuner__help{color:var(--muted);margin:8px 0 0;font-size:.8125rem}.tuner__bar{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:22px;display:grid}.tuner__group{min-width:0}.tuner__swatches{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.tuner__swatch{cursor:pointer;width:34px;height:34px;color:var(--fg);transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);border:0;border-radius:50%;flex:none;place-items:center;padding:0;display:grid;box-shadow:inset 0 0 0 1px #0000001f}.tuner__swatch:hover{transform:scale(1.08)}.tuner__swatch:active{transform:scale(.94)}.tuner__swatch[aria-pressed=true]{box-shadow:inset 0 0 0 1px #0000001f, 0 0 0 3px var(--bg), 0 0 0 5px var(--fg)}.picker{position:relative}.picker__toggle{background:var(--field);box-shadow:inset 0 0 0 1px var(--field-line)}.picker__toggle.is-custom{box-shadow:inset 0 0 0 1px #0000001f, 0 0 0 3px var(--bg), 0 0 0 5px var(--fg)}.picker__pop{z-index:20;background:var(--panel);border:1px solid var(--line);animation:pop-in .18s var(--ease-out);border-radius:14px;align-items:center;gap:10px;padding:10px;display:flex;position:absolute;top:calc(100% + 12px);right:-8px;box-shadow:0 20px 40px -16px #0009}@keyframes pop-in{0%{opacity:0;transform:translateY(-4px)scale(.98)}}.picker__pop input[type=color]{cursor:pointer;background:0 0;border:0;border-radius:10px;width:44px;height:40px;padding:0}.picker__pop input[type=color]::-webkit-color-swatch-wrapper{padding:0}.picker__pop input[type=color]::-webkit-color-swatch{border:0;border-radius:10px}.picker__hex{border:1px solid var(--field-line);background:var(--field);height:40px;color:var(--muted);font-variant-numeric:tabular-nums;border-radius:10px;align-items:center;gap:2px;padding:0 12px;display:inline-flex}.picker__hex input{width:6.4ch;color:var(--fg);font:inherit;text-transform:lowercase;background:0 0;border:0;padding:0;font-size:1rem}.picker__hex input:focus{outline:none}.picker__hex:focus-within{border-color:var(--fg)}.tuner__sectors{background:var(--field);border:1px solid var(--field-line);border-radius:14px;gap:2px;padding:4px;display:inline-flex}.tuner__sectors button{cursor:pointer;color:var(--muted);font:inherit;background:0 0;border:0;border-radius:10px;padding:9px 16px;font-size:.9375rem;font-weight:600;transition:background .2s,color .2s}.tuner__sectors button:hover{color:var(--fg)}.tuner__sectors button[aria-pressed=true]{background:var(--cta-bg);color:var(--cta-fg)}.tuner__cta{flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px;display:flex}.tuner__primary,.tuner__secondary{font:inherit;cursor:pointer;transition:transform .2s var(--ease-out), background .2s ease, border-color .2s ease;border-radius:14px;align-items:center;gap:8px;padding:14px 22px;font-size:1rem;font-weight:700;text-decoration:none;display:inline-flex}.tuner__primary{background:var(--cta-bg);color:var(--cta-fg);border:0}.tuner__primary:hover{filter:brightness(1.12)}.tuner__primary svg{transition:translate .2s var(--ease-out)}.tuner__primary:hover svg{translate:2px}.tuner__secondary{color:var(--fg);border:1px solid var(--field-line);background:0 0}.tuner__secondary:hover{border-color:var(--fg)}.tuner__primary:active,.tuner__secondary:active{transform:scale(.97)}.tuner__device{--device-scale:.86;margin-top:8px}@media (height>=1000px) and (width>=901px){.tuner__device{--device-scale:.96}}.tuner__device .device__halo{inset:-6% -34%}.tuner__note{color:var(--muted);justify-self:center;margin:18px 0 0;font-size:.875rem}.tuner__more{border-top:1px solid var(--line);flex-wrap:wrap;align-items:baseline;gap:10px 32px;margin-top:clamp(48px,7vw,88px);padding-top:22px;display:flex}.tuner__more>span{color:var(--muted);font-size:.9375rem}.tuner__more ul{flex-wrap:wrap;gap:6px 28px;margin:0;padding:0;list-style:none;display:flex}.tuner__more a{letter-spacing:-.015em;color:var(--muted);align-items:center;gap:6px;font-size:clamp(1.125rem,1vw + .8rem,1.5rem);font-weight:650;text-decoration:none;transition:color .2s;display:inline-flex}.tuner__more a svg{transition:translate .2s var(--ease-out)}.tuner__more a:hover,.tuner__more a.is-current{color:var(--fg)}.tuner__more a:hover svg{translate:3px}@media (width<=900px){.tuner{grid-template-rows:none;grid-template-columns:minmax(0,1fr);grid-template-areas:"title""sub""name""device""bar""note""cta""more"}.tuner__sub{margin-top:14px}.tuner__name{max-width:none;margin-top:24px}.tuner__name>label{margin-bottom:6px;font-size:.8125rem}.tuner__help{font-size:.75rem}.tuner__device{--device-scale:.76;margin-top:20px}.tuner__bar{background:var(--panel);border:1px solid var(--line);z-index:1;border-radius:18px;gap:12px;margin-top:14px;padding:12px;position:relative}.tuner__label{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tuner__swatches{flex-wrap:nowrap;justify-content:space-between;gap:4px}.tuner__swatch{width:30px;height:30px}.picker__pop{right:0}.tuner__sectors{display:flex}.tuner__sectors button{white-space:nowrap;flex:1 1 0;min-width:0;padding:9px 4px;font-size:.875rem}.tuner__note{margin-top:16px}.tuner__cta{justify-content:center;margin-top:14px}.tuner__cta>*{flex:auto;justify-content:center}.tuner__more{margin-top:48px}}@media (width>=600px) and (width<=900px){.tuner__device{--device-scale:.92}}@media (width<=380px){.tuner__device{--device-scale:.68}.tuner__swatch{width:27px;height:27px}}.tuner--hero{grid-template-rows:none;grid-template-columns:minmax(0,1fr);grid-template-areas:"name""device""bar""note""cta";column-gap:0;width:min(100%,420px)}.tuner--hero .tuner__name{max-width:none;margin-top:0}.tuner--hero .tuner__name>label{margin-bottom:6px;font-size:.8125rem}.tuner--hero .tuner__help{font-size:.75rem}.tuner--hero .tuner__device{--device-scale:.72;margin-top:16px}.tuner--hero .tuner__bar{background:var(--panel);border:1px solid var(--line);z-index:1;border-radius:18px;gap:12px;margin-top:12px;padding:12px;position:relative}.tuner--hero .tuner__label{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tuner--hero .tuner__swatches{flex-wrap:nowrap;justify-content:space-between;gap:4px}.tuner--hero .tuner__swatch{width:30px;height:30px}.tuner--hero .picker__pop{right:0}.tuner--hero .tuner__sectors{display:flex}.tuner--hero .tuner__sectors button{white-space:nowrap;flex:1 1 0;min-width:0;padding:9px 4px;font-size:.875rem}.tuner--hero .tuner__note{margin-top:12px}.tuner--hero .tuner__cta{justify-content:space-between;margin-top:14px}.tuner__more-link{color:var(--fg);text-underline-offset:4px;font-weight:650}@media (width<=380px){.tuner--hero .tuner__device{--device-scale:.66}.tuner--hero .tuner__swatch{width:27px;height:27px}}@media (width>=1024px){.tuner--hero{grid-template:"name device""bar device""cta device"".device"1fr".note"/minmax(0,1fr) auto;align-items:start;column-gap:28px;width:100%}.tuner--hero .tuner__device{--device-scale:.74;margin-top:0}.tuner--hero .tuner__name-row{flex-direction:column}.tuner--hero .tuner__logo-btn,.tuner--hero .tuner__logo{align-self:flex-start;height:44px}.tuner--hero .tuner__bar{min-width:0;margin-top:16px}.tuner--hero .tuner__swatches{flex-wrap:wrap;justify-content:flex-start;gap:8px}.tuner--hero .tuner__sectors{flex-direction:column}.tuner--hero .tuner__sectors button{text-align:left;padding:9px 12px}.tuner--hero .tuner__cta{flex-direction:column;align-items:flex-start;gap:14px;margin-top:18px}.tuner--hero .tuner__cta>*{flex:none}.tuner--hero .tuner__note{margin-top:10px}}.tuner__extra{grid-area:extra;gap:18px;max-width:480px;margin-top:22px;display:grid}.tuner__count{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:6px;font-weight:500}.tuner__input{border:1px solid var(--field-line);background:var(--field);width:100%;color:var(--fg);font:inherit;border-radius:12px;padding:12px 14px;font-size:1rem}.tuner__input::placeholder{color:var(--muted)}.tuner__input:focus{border-color:var(--fg);box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 14%, transparent);outline:none}.tuner__seg{background:var(--field);border:1px solid var(--field-line);border-radius:14px;flex-wrap:wrap;gap:2px;padding:4px;display:inline-flex}.tuner__seg button,.tuner__chips button{cursor:pointer;min-height:40px;color:var(--muted);font:inherit;background:0 0;border:0;border-radius:10px;padding:8px 14px;font-size:.9375rem;font-weight:600;transition:background .2s,color .2s}.tuner__seg button:hover,.tuner__chips button:hover:not(:disabled){color:var(--fg)}.tuner__seg button[aria-pressed=true]{background:var(--fg);color:var(--bg)}.tuner__chips{flex-wrap:wrap;gap:8px;display:flex}.tuner__chips button{border:1px solid var(--field-line);background:var(--field);align-items:center;gap:6px;display:inline-flex}.tuner__chips button[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}.tuner__chips button:disabled{opacity:.45;cursor:not-allowed}.tuner__device .dbadge{margin-bottom:14px}.tuner__device{flex-direction:column;align-items:center;display:flex}.tuner--demo{grid-template-rows:auto auto auto auto auto auto 1fr;grid-template-areas:"title device""sub device""name device""bar device""extra device""cta device"".note";align-items:start}.tuner--demo .tuner__title{margin-top:0}@media (width>=901px){.tuner--demo .tuner__device{position:sticky;top:16px}}@media (width<=900px){.tuner--demo{grid-template-areas:"title""sub""name""device""bar""extra""note""cta"}.tuner__extra{max-width:none}}