.btn{border-radius:max(var(--control-radius,7px),calc((var(--control-radius,7px) - 22px)*999));background:var(--brand,var(--accent));min-height:48px;color:var(--on-brand,var(--on-accent));overflow-wrap:anywhere;text-align:center;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;max-width:100%;padding:12px 20px;font-size:1rem;font-weight:600;line-height:1.25;text-decoration:none;display:inline-flex}.btn.compact{padding-inline:.6rem}.btn-small{gap:6px;min-height:36px;padding:8px 12px;font-size:.8125rem}@media (any-pointer:coarse){.btn-small{min-width:44px;min-height:44px}}.btn:not(:disabled):hover{background-color:var(--brand-hover,var(--accent-hover))}.btn:not(.secondary):not(.ghost){border-color:var(--brand-edge,color-mix(in srgb,var(--on-brand,var(--on-accent)) 30%,var(--brand,var(--accent))))}.btn.secondary{background:color-mix(in srgb,var(--surface) 82%,transparent);color:var(--ink)}.btn.secondary:not(:disabled):hover{background-color:color-mix(in srgb,var(--ink) 6%,transparent)}.btn.ghost{color:var(--ink);background:0 0}.btn.ghost:not(:disabled):hover{background-color:color-mix(in srgb,var(--ink) 6%,transparent)}.btn:not(.ghost){background-image:var(--finish-button,none);box-shadow:var(--finish-shadow,none)}.btn.secondary{background-color:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:var(--finish-blur,none);border-color:var(--finish-edge,var(--line))}.btn:not(:disabled):not(.ghost):hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 12%,transparent),var(--finish-shadow,0 0 transparent)}.btn-icon{flex:none;width:44px;height:44px;min-height:44px;padding:0}.btn>svg{flex:none;width:1.25em;height:1.25em}.btn-large{gap:12px;min-height:56px;padding:16px 28px;font-size:1.125rem}.btn-pill{border-radius:999px}.btn:not(:disabled):active{background-color:var(--brand-hover,var(--accent-hover))}.btn.secondary:not(:disabled):active,.btn.ghost:not(:disabled):active{background-color:color-mix(in srgb,var(--ink) 10%,transparent)}.btn-choice{white-space:nowrap;outline-offset:-2px;flex-direction:column;gap:8px;padding:12px 8px;line-height:24px}.btn-gradient:not(.secondary):not(.ghost){border-color:var(--paint-button-edge,var(--brand-edge,transparent));background-image:var(--paint-button,var(--finish-button,none));color:var(--on-paint-button,var(--on-brand,var(--on-accent)))}.btn-gradient:not(.secondary):not(.ghost):not(:disabled):is(:hover,:active){background-image:var(--paint-button-hover,var(--paint-button,var(--finish-button,none)))}:where(.icon[data-icon]){display:inline-flex}.icon:where([data-icon]){width:var(--icon-size,1.25rem);height:var(--icon-size,1.25rem);vertical-align:middle;color:inherit;flex-shrink:0;justify-content:center;align-items:center}.icon[data-icon]>svg{block-size:100%;inline-size:100%;display:block;overflow:visible}.icon-small{--icon-size:1rem}.icon-large{--icon-size:1.5rem}.icon[data-icon-motion=draw] path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset var(--motion-normal) var(--motion-ease)}@media (prefers-reduced-motion:no-preference){:root:not([data-motion=none]) .btn:focus-visible:not(:hover) .icon[data-icon-motion=draw] path{animation:icon-draw var(--motion-normal) var(--motion-ease) both}}@keyframes icon-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@media (prefers-reduced-motion:reduce){.icon[data-icon-motion] path{transition:none!important;animation:none!important}}[data-motion=none] .icon[data-icon-motion] path{transition:none!important;animation:none!important}@media (hover:hover) and (prefers-reduced-motion:no-preference){:root:not([data-motion=none]) .btn:hover .icon[data-icon-motion=draw] path{animation:icon-draw-hover var(--motion-normal) var(--motion-ease) both}}@keyframes icon-draw-hover{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.badge>.icon{--icon-size:1em}:root{--popup-gap:8px;--popup-padding:4px;--popup-shadow:0 8px 24px #0002}.popup-panel{box-sizing:border-box;overscroll-behavior:contain;border:1px solid var(--line);border-radius:var(--radius,12px);background:var(--surface);color:var(--ink);box-shadow:var(--popup-shadow);margin:0;position:fixed;inset:auto;overflow:auto}@media (prefers-reduced-motion:no-preference){.popup-panel:popover-open{animation:popup-enter var(--motion-normal) var(--motion-ease)}@keyframes popup-enter{0%{opacity:0;transform:translateY(var(--popup-shift,-4px))}to{opacity:1;transform:none}}}[data-motion=none] .popup-panel,.popup-panel[data-motion=none]{animation:none}:is(.menu,.breadcrumb-menu) :is(a,button){border-radius:var(--control-radius,8px);min-block-size:44px;inline-size:100%;color:var(--ink);font:inherit;text-align:start;cursor:pointer;overflow-wrap:anywhere;background:0 0;border:0;align-items:center;gap:8px;padding:10px 12px;text-decoration:none;display:flex}:is(.menu,.breadcrumb-menu) :is(a,button):hover:not(:disabled):not([aria-disabled=true]),:is(.menu,.breadcrumb-menu) :is(a,button):focus-visible{background:var(--soft);text-decoration:none}:is(.menu,.breadcrumb-menu) :is(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:-2px}:is(.menu,.breadcrumb-menu) :is(:disabled,[aria-disabled=true]){opacity:.5;cursor:not-allowed}:is(.menu,.breadcrumb-menu) svg{flex:none;block-size:20px;inline-size:20px}.tooltip{pointer-events:none;z-index:1000;border-radius:var(--control-radius,8px);background:color-mix(in srgb,var(--surface) 92%,var(--ink));width:max-content;max-width:min(32ch,100vw - 24px);color:var(--ink);font:inherit;filter:drop-shadow(0 2px 3px #00000012);overflow-wrap:anywhere;border:0;margin:0;padding:8px 12px;font-size:.8125rem;font-weight:400;line-height:1.5;position:fixed;inset:auto;overflow:visible}.tooltip:not([data-open]){display:none}.tooltip[data-open]{display:block}@media (prefers-reduced-motion:no-preference){.tooltip[data-open]{animation:tooltip-slide var(--motion-normal) var(--motion-ease)}}.tooltip[data-side=top]{--tip-y:4px}.tooltip[data-side=bottom]{--tip-y:-4px}.tooltip[data-side=left]{--tip-x:4px}.tooltip[data-side=right]{--tip-x:-4px}@keyframes tooltip-slide{0%{opacity:0;transform:translate(var(--tip-x,0px),var(--tip-y,0px))}}@media (forced-colors:active){.tooltip{outline:1px solid canvastext}}.tooltip:after{content:"";background:inherit;width:8px;height:8px;left:var(--tip-left);top:var(--tip-top);position:absolute;transform:translate(-50%,-50%)rotate(45deg)}