.tab-key-wrapper{perspective:1000px}.tab-key-wrapper--full{width:100%}.tab-key-container{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .15s cubic-bezier(.4,0,.2,1);position:relative}.tab-key-container:hover:not(.tab-key-container--pressed):not(.tab-key-container--no-hover){transform:translateY(-1px)}.tab-key-container--pressed{transform:translateY(0)}@keyframes tab-key-breathe{0%,to{opacity:1;transform:scale(1)}50%{opacity:.92;transform:scale(1.02)}}.tab-key-container--breathing{animation:2.5s ease-in-out infinite tab-key-breathe}@keyframes tab-key-fall{0%{opacity:1;transform:translateY(0)rotate(0)}15%{transform:translateY(10px)rotate(15deg)}to{opacity:1;transform:translateY(calc(100vh + 100px))rotate(55deg)}}.tab-key-container--fallen{pointer-events:none;animation:1.2s cubic-bezier(.55,0,1,.45) forwards tab-key-fall}.tab-key-container--sm{width:80px;height:40px}.tab-key-container--lg{aspect-ratio:1.875;width:100%;container-type:size}.tab-key-base{background:var(--bg-chrome);transition:all .12s cubic-bezier(.4,0,.2,1);position:absolute;inset:0;transform:translateY(0)}.tab-key-base--sm{border-radius:8px}.tab-key-base--lg{border-radius:24px}.tab-key-surface{background:linear-gradient(180deg, var(--bg-elevated) 0%,  var(--bg-chrome) 100% );box-shadow:0 2px 0 0 #0000001a,  0 2px 8px 0 #0000001a,  0 4px 12px 0 #00000040,  0 0 0 1px var(--web-border-secondary,#edecec1a),  inset 0 1px 8px 0 #ffffff08,  inset 0 -4px 6px 0 #0000001f;color:var(--text-secondary);justify-content:flex-start;align-items:flex-end;font-weight:500;transition:all .12s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;inset:0;transform:translateY(0)}.tab-key-container:hover:not(.tab-key-container--no-hover) .tab-key-surface:not(.tab-key-surface--pressed){box-shadow:0 3px 0 0 #0000001f,  0 3px 10px 0 #0000001f,  0 6px 16px 0 #00000047,  0 0 0 1px var(--web-border-secondary,#edecec24),  inset 0 1px 10px 0 #ffffff0d,  inset 0 -4px 6px 0 #0000001f}.tab-key-surface--pressed{box-shadow:0 0 0 0 #0000001a,  0 1px 4px 0 #00000014,  0 2px 6px 0 #00000026,  0 0 0 1px var(--web-border-secondary,#edecec1a),  inset 0 1px 4px 0 #00000026,  inset 0 -3px 4px 0 #00000014;transform:translateY(2px)}.tab-key-surface--sm{border-radius:6px;font-size:13px}.tab-key-surface--lg{border-radius:24px;font-size:34cqh}.tab-key-label{letter-spacing:.5px;line-height:1}.tab-key-label--sm{transform:translate(5px)translateY(-5px)}.tab-key-label--lg{transform:translate(16px)translateY(-16px)}.tab-key-highlight{pointer-events:none;background:linear-gradient(#ffffff04,#0000);height:25%;transition:all .12s cubic-bezier(.4,0,.2,1);position:absolute;top:0;left:0;right:0}.tab-key-highlight--pressed{opacity:.5}.tab-key-container:hover:not(.tab-key-container--no-hover) .tab-key-highlight:not(.tab-key-highlight--pressed){background:linear-gradient(#ffffff09,#0000)}.tab-key-highlight--sm{border-radius:8px 8px 0 0}.tab-key-highlight--lg{border-radius:24px 24px 0 0}.tab-key-smoke{pointer-events:none;opacity:0;transition:opacity .6s ease-out;position:absolute;inset:0;overflow:visible}.tab-key-smoke--visible{opacity:1}.tab-key-smoke__particle{filter:blur(3px);opacity:0;background:radial-gradient(circle,#b4b4b499 0%,#7878784d 40%,#0000 70%);border-radius:50%;width:8px;height:8px;animation:2s ease-out infinite tab-key-smoke-rise;position:absolute}@keyframes tab-key-smoke-rise{0%{opacity:0;transform:translateY(0)translate(0)scale(.5)}10%{opacity:.7}50%{opacity:.4}to{opacity:0;transform:translateY(-40px) translateX(var(--smoke-drift,0px)) scale(2)}}.tab-key-smoke__particle--1{--smoke-drift:-8px;animation-duration:1.8s;animation-delay:0s;top:0;left:20%}.tab-key-smoke__particle--2{--smoke-drift:5px;animation-duration:2.2s;animation-delay:.4s;top:-2px;left:45%}.tab-key-smoke__particle--3{--smoke-drift:-4px;animation-duration:1.9s;animation-delay:.8s;top:0;left:70%}.tab-key-smoke__particle--4{--smoke-drift:10px;animation-duration:2.4s;animation-delay:.2s;top:-4px;left:35%}.tab-key-smoke__particle--5{--smoke-drift:-6px;animation-duration:2s;animation-delay:.6s;top:-2px;left:60%}.tab-key-surface--heated{--heat-adjusted:max(0, calc((var(--heat) - .2) * 1.25));--heat-pct:calc(var(--heat-adjusted) * 100%);box-shadow:0 2px 0 0 #0000001a, 0 2px 8px 0 #0000001a, 0 4px 12px 0 #00000040,  0 0 0 1px color-mix(in srgb, var(--color-theme-accent) var(--heat-pct), #edecec1a),  0 0 calc(8px * var(--heat-adjusted)) calc(2px * var(--heat-adjusted)) color-mix(in srgb, var(--color-theme-accent) calc(var(--heat-adjusted) * 35%), transparent),  inset 0 1px 8px 0 color-mix(in srgb, var(--color-theme-accent) calc(var(--heat-pct) * .2), #ffffff08), inset 0 -4px 6px 0 #0000001f;transition:box-shadow .2s ease-out}:root:not(.dark) .tab-key-surface{box-shadow:0 1px 0 0 #0000000d,  0 1px 4px 0 #0000000f,  0 2px 6px 0 #00000014,  0 0 0 1px var(--web-border-secondary,#0000000f),  inset 0 1px 4px 0 #ffffff80,  inset 0 -2px 4px 0 #0000000a}:root:not(.dark) .tab-key-container:hover:not(.tab-key-container--no-hover) .tab-key-surface:not(.tab-key-surface--pressed){box-shadow:0 2px 0 0 #0000000f,  0 2px 5px 0 #00000012,  0 3px 8px 0 #0000001a,  0 0 0 1px var(--web-border-secondary,#00000014),  inset 0 1px 5px 0 #fff9,  inset 0 -2px 4px 0 #0000000a}:root:not(.dark) .tab-key-surface--pressed{box-shadow:0 0 0 0 #0000000d,  0 1px 2px 0 #0000000a,  0 1px 3px 0 #0000000f,  0 0 0 1px var(--web-border-secondary,#0000000f),  inset 0 1px 2px 0 #00000014,  inset 0 -2px 3px 0 #0000000a}:root:not(.dark) .tab-key-surface--heated{--heat-adjusted:max(0, calc((var(--heat) - .2) * 1.25));--heat-pct:calc(var(--heat-adjusted) * 100%);box-shadow:0 1px 0 0 #0000000d, 0 1px 4px 0 #0000000f, 0 2px 6px 0 #00000014,  0 0 0 1px color-mix(in srgb, var(--color-theme-accent) var(--heat-pct), #0000000f),  0 0 calc(8px * var(--heat-adjusted)) calc(2px * var(--heat-adjusted)) color-mix(in srgb, var(--color-theme-accent) calc(var(--heat-adjusted) * 50%), transparent),  inset 0 1px 4px 0 color-mix(in srgb, var(--color-theme-accent) calc(var(--heat-pct) * .3), #ffffff80), inset 0 -2px 4px 0 #0000000a}
