@font-face{font-family:TF2 Build;src:url(https://files.equip.tf/fonts/tf2build.ttf) format("truetype");font-display:swap}@font-face{font-family:TF2 Secondary;src:url(https://files.equip.tf/fonts/tf2secondary.ttf) format("truetype");font-display:swap}:root{--scene: #1c1713;--text: #ebe3cb;--muted: #bcb09a;--faint: #9d907b;--dim: #6e6354;--accent: #cf6a32;--accent-hover: #dc7a42;--red: #b8383b;--blu: #5885a2;--team: var(--red);--unique: #ffd700;--unusual: #a678d4;--strange: #cf6a32;--positive: #99ccff;--negative: #ff4040;--level: #756b5e;--panel: rgba(29, 24, 20, .9);--panel-line: rgba(235, 227, 203, .08);--row-line: rgba(235, 227, 203, .07);--tile: #2e2722;--tile-2: #362e28;--tile-3: #463c34;--well: #241e1a;--field: #1e1915;--line: #43392f;--line-hover: #7d6e5a;--on: #4a3527;--ease: cubic-bezier(.22, 1, .36, 1);--fast: .16s;--base: .28s;--slow: .56s;--lw: 344px;--rw: 316px;--slot: clamp(46px, calc((100vw - 887px) / 8.2), 72px);--build: "TF2 Build", "Trebuchet MS", sans-serif;--secondary: "TF2 Secondary", "Trebuchet MS", sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--scene)}body{font-family:var(--secondary);color:var(--text);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}input{font:inherit;color:inherit}kbd{font:11px var(--secondary);color:var(--faint);border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;padding:1px 5px}#app{position:absolute;inset:0;overflow:hidden}#viewport{position:absolute;inset:0}#viewport canvas{display:block;width:100%;height:100%}.panel{position:absolute;background:var(--panel);border:1px solid var(--panel-line);border-radius:8px;box-shadow:0 2px #0000004d}.ui{transition:transform var(--slow) var(--ease),opacity var(--slow) var(--ease)}#app:not(.ready) #top,#app.hide #top{transform:translateY(-28px);opacity:0}#app:not(.ready) #left,#app.hide #left{transform:translate(-36px);opacity:0}#app:not(.ready) #right,#app.hide #right{transform:translate(36px);opacity:0}#app:not(.ready) #dock,#app.hide #dock{transform:translate(-50%,36px);opacity:0}#app.hide .ui{pointer-events:none;transition-delay:0ms}#app.ready #top{transition-delay:60ms}#app.ready #left{transition-delay:.16s}#app.ready #right{transition-delay:.24s,.24s,0ms}#app.ready #dock{transition-delay:.32s}#app.ready #fold{transition-delay:.16s}#app.left-off #left{transform:translate(calc(-100% - 40px));opacity:0;pointer-events:none}.btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:3px;background:var(--tile-2);font:13px var(--build);letter-spacing:.03em;text-transform:uppercase;color:var(--text);white-space:nowrap;transition:background var(--fast) var(--ease),color var(--fast)}.btn:hover{background:var(--tile-3)}.btn:active{background:var(--well)}.btn.on,.btn[aria-pressed=true]{background:var(--on);color:#e8874d}.btn.small{height:30px;padding:0 10px;font-size:11.5px}.btn.icon{width:36px;padding:0;color:var(--muted)}.btn.icon:hover{color:var(--text)}.btn.icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#dock .btn.icon{height:32px;width:32px}[data-tip]{position:relative}[data-tip]:hover:after,[data-tip]:focus-visible:after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);padding:5px 9px;border-radius:3px;background:#1e1814f7;border:1px solid var(--line);box-shadow:0 6px 16px #00000059;color:var(--text);font:11.5px var(--build);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;pointer-events:none;z-index:40;animation:fade .16s var(--ease) both}[data-tip][data-tip-up]:hover:after,[data-tip][data-tip-up]:focus-visible:after{top:auto;bottom:calc(100% + 8px)}.btn.primary{background:var(--accent);color:#1d140d}.btn.primary:hover{background:var(--accent-hover)}#top{left:16px;right:16px;top:16px;height:64px;display:flex;align-items:center;gap:20px;padding:0 8px 0 18px}#credit{position:fixed;right:18px;bottom:6px;z-index:1;margin:0;font-size:11px;color:var(--faint);opacity:.7;pointer-events:none}#steambox{right:16px;top:92px;z-index:25;width:360px;padding:14px 16px 12px;background:#1e1814fa;border-color:var(--line);box-shadow:0 8px 20px #0006;transform:translateY(-6px);opacity:0;pointer-events:none;transition:transform .22s var(--ease),opacity .18s var(--ease)}#steambox.open{transform:none;opacity:1;pointer-events:auto}#steambox .title{font:15px var(--build);letter-spacing:.02em}#steambox .field{display:flex;gap:8px;margin-top:10px}#steambox input{flex:1;min-width:0;height:30px;padding:0 10px;border-radius:3px;background:var(--field);border:1px solid var(--line);outline:none;font-size:13.5px;transition:border-color var(--fast)}#steambox input::placeholder{color:var(--dim)}#steambox input:focus{border-color:var(--line-hover)}#steambox .note{margin:9px 0 0;font-size:12.5px;line-height:1.4;color:var(--faint)}#steambox .note.error{color:var(--negative)}#settingsbox{right:16px;top:92px;z-index:25;width:300px;padding:14px 0 4px;background:#1e1814fa;border-color:var(--line);box-shadow:0 8px 20px #0006;transform:translateY(-6px);opacity:0;pointer-events:none;transition:transform .22s var(--ease),opacity .18s var(--ease)}#settingsbox.open{transform:none;opacity:1;pointer-events:auto}#settingsbox .title{padding:0 16px 6px;font:15px var(--build);letter-spacing:.02em}#settingsbox .r:last-child{border-bottom:0}.brand b{font:22px var(--build);letter-spacing:.01em;white-space:nowrap}.brand b span{color:var(--accent)}#classes{display:flex;gap:4px;margin:0 auto}#top.centred #classes{position:absolute;left:var(--classes-x);margin:0;transition:left var(--slow) var(--ease)}#top.centred #team{margin-left:auto}#classes button{position:relative;width:44px;height:44px;overflow:hidden;border-radius:3px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line);transition:transform var(--base) var(--ease)}#classes button:hover{transform:translateY(-1px)}#classes img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity var(--base) var(--ease)}#classes .grey{opacity:.7}#classes .team{opacity:0}#classes button:hover .grey{opacity:.9}#classes button.on .team,#classes button:hover .team{opacity:1}#classes button:after{content:"";position:absolute;inset:0;border-radius:3px;box-shadow:inset 0 0 0 2px var(--team);opacity:0;transition:opacity var(--base) var(--ease)}#classes button.on:after{opacity:1}#classes button.switching{overflow:visible}#classes button.switching>img{visibility:hidden}#classes button.switching:after{opacity:0}#classes .teamfx{position:absolute;inset:0;pointer-events:none}#classes .teamfx.dim .still,#classes .teamfx.dim .board,#classes .teamfx.dim .strip,#classes .teamfx.dim .side{opacity:.7}#classes .teamfx .still{position:absolute;inset:0;border-radius:3px;background-size:cover}#classes .teamfx.flip{perspective:260px}#classes .teamfx .inner{position:absolute;inset:0;transform-style:preserve-3d}#classes .teamfx .side{position:absolute;inset:0;border-radius:3px;background-size:cover;backface-visibility:hidden;box-shadow:inset 0 0 0 1px var(--line)}#classes .teamfx .back{transform:rotateY(180deg)}#classes .teamfx .board{position:absolute;inset:0;perspective:140px;border-radius:3px;overflow:hidden}#classes .teamfx .board:after{content:"";position:absolute;left:0;right:0;top:calc(50% - .5px);height:1px;background:#0000008c}#classes .teamfx .half{position:absolute;left:0;right:0;height:50%;background-size:100% 200%;background-repeat:no-repeat;backface-visibility:hidden}#classes .teamfx .top{top:0;background-position:0 0;transform-origin:50% 100%}#classes .teamfx .bottom{bottom:0;background-position:0 100%;transform-origin:50% 0}#classes .teamfx.reel{overflow:hidden;border-radius:3px}#classes .teamfx.reel:before,#classes .teamfx.reel:after{content:"";position:absolute;left:0;right:0;height:9px;z-index:1}#classes .teamfx.reel:before{top:0;background:linear-gradient(rgba(0,0,0,.55),transparent)}#classes .teamfx.reel:after{bottom:0;background:linear-gradient(transparent,#0000008c)}#classes .teamfx .strip{position:absolute;left:0;top:0;width:100%}#classes .teamfx .cell{width:44px;height:44px;background-size:cover}#team{display:flex;gap:2px}#team button{height:36px;padding:0 14px;border-radius:3px;background:var(--tile);color:var(--muted);font:14px var(--build);letter-spacing:.04em;transition:background var(--base) var(--ease),color var(--base)}#team button:hover{color:var(--text)}#team button.on[data-team="0"]{background:var(--red);color:#fff}#team button.on[data-team="1"]{background:var(--blu);color:#fff}.actions{display:flex;gap:6px}#left{left:16px;top:92px;bottom:16px;width:var(--lw);display:flex;flex-direction:column;padding:10px 12px 12px}#left .head{display:flex}#left .head .seg{flex:1}#picker{display:flex;flex-direction:column;flex:1;min-height:0}#fold{position:absolute;z-index:2;top:calc(50% + 38px);left:calc(15px + var(--lw));width:18px;height:56px;margin-top:-28px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--panel-line);border-left:0;border-radius:0 6px 6px 0;box-shadow:0 2px #0000004d;transition:transform var(--slow) var(--ease),opacity var(--slow) var(--ease),background var(--fast)}#fold:before{content:"";width:6px;height:6px;border-left:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translate(1px) rotate(45deg);transition:transform var(--base) var(--ease),border-color var(--fast)}#fold:hover{background:var(--tile-2)}#fold:hover:before{border-color:var(--text)}#app:not(.ready) #fold,#app.hide #fold{transform:translate(-36px);opacity:0;pointer-events:none}#app.left-off:not(.hide) #fold{transform:translate(calc(-15px - var(--lw)))}#app.left-off #fold:before{transform:translate(-1px) rotate(-135deg)}.seg{position:relative;display:flex;gap:4px}.seg>button{position:relative;z-index:1;padding:6px 6px 9px;font-size:14px;color:var(--muted);transition:color var(--base) var(--ease);white-space:nowrap}.seg>button:hover,.seg>button.on{color:var(--text)}.seg>button.locked{color:var(--dim);cursor:default}.seg>.pill{position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:1px;background:#e8874d;transition:transform var(--base) var(--ease),width var(--base) var(--ease)}#tabs>button{flex:1;padding:9px 4px 11px;font:15px var(--build);letter-spacing:.02em;text-transform:uppercase}.search{margin-top:8px}.search input{width:100%;height:38px;padding:0 12px;border-radius:3px;background:var(--field);border:1px solid var(--line);outline:none;font-size:14px;transition:border-color var(--fast)}.search input::placeholder{color:var(--dim)}.search input:focus{border-color:var(--line-hover)}.toolbar{display:flex;gap:6px;margin-top:8px;align-items:center}.toolbar .count{margin-left:auto;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}.chipbtn{height:30px;padding:0 10px;border-radius:3px;background:var(--tile);font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;transition:background var(--fast),color var(--fast)}.chipbtn:hover{background:var(--tile-2);color:var(--text)}.chipbtn.on{background:var(--on);color:var(--text)}.chipbtn .n{min-width:17px;height:17px;padding:0 4px;border-radius:3px;background:var(--accent);color:#1d140d;font-size:11px;display:none;place-items:center}.chipbtn .n.show{display:grid}.tray{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows var(--base) var(--ease),opacity var(--base) var(--ease),margin var(--base) var(--ease)}.tray.open{grid-template-rows:1fr;opacity:1;margin-top:8px}.tray>div{overflow:hidden}.tray .group{padding:10px;border-radius:4px;background:#1f1a16;border:1px solid var(--line)}.tray .group+.group{margin-top:6px}.tray .label{margin:0 0 7px;font-size:13px;color:var(--muted)}.chips{display:flex;flex-wrap:wrap;gap:5px}.chip{height:28px;padding:0 10px;border-radius:3px;background:var(--tile-2);font-size:12.5px;color:var(--muted);transition:background var(--fast),color var(--fast)}.chip:hover{background:var(--tile-3);color:var(--text)}.chip.on{background:var(--accent);color:#1d140d}.menu-wrap{position:relative}.menu{position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:190px;max-height:300px;overflow:auto;padding:5px;border-radius:4px;background:#1e1814f7;border:1px solid var(--line);box-shadow:0 8px 20px #0006;transform-origin:top left;transform:translateY(-4px) scale(.97);opacity:0;pointer-events:none;transition:transform .2s var(--ease),opacity .16s var(--ease);scrollbar-width:thin}.menu.open{transform:none;opacity:1;pointer-events:auto}#grid{margin-top:10px;flex:1;overflow-y:auto;overflow-x:hidden;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:130px;gap:6px;padding:2px 4px 8px 2px;align-content:start;scrollbar-width:thin;scrollbar-color:rgba(235,227,203,.18) transparent}.card{position:relative;display:flex;flex-direction:column;align-items:center;padding:6px 6px 7px;border-radius:4px;background:var(--tile);border:1px solid var(--line);text-align:center;transition:background var(--fast),border-color var(--fast);animation:fade .24s var(--ease) both;animation-delay:calc(var(--i, 0) * 10ms)}.card .plate{width:100%;height:76px;display:grid;place-items:center;border-radius:2px;background:var(--well);flex:none}.card img{width:66px;height:66px;object-fit:contain}.card .missing{width:34px;height:34px;border-radius:50%;background:var(--tile-2)}.card span{margin-top:6px;font-size:12.5px;line-height:1.25;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card:hover{background:var(--tile-2);border-color:var(--line-hover)}.card.equipped{background:#3a2a20;border-color:var(--accent)}.card.equipped:after{content:"Equipped";position:absolute;left:6px;top:6px;padding:1px 5px;border-radius:2px;background:var(--accent);color:#1d140d;font:9.5px var(--build);letter-spacing:.03em;text-transform:uppercase}.card.loadout:not(.equipped):after{content:"In loadout";position:absolute;left:6px;top:6px;padding:1px 5px;border-radius:2px;background:var(--tile-3);color:var(--text);font:9.5px var(--build);letter-spacing:.03em;text-transform:uppercase}.sentinel{grid-column:1 / -1;height:1px}.noresults{grid-column:1 / -1;padding:40px 10px;text-align:center;color:var(--faint);font-size:14px}@keyframes fade{0%{opacity:0;transform:translateY(4px)}}#right{right:16px;top:92px;width:var(--rw);max-height:calc(100% - 108px);overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(235,227,203,.18) transparent;transition:transform var(--slow) var(--ease),opacity var(--slow) var(--ease),height .3s var(--ease)}.view{padding:16px;transition:opacity .26s var(--ease) 70ms,transform .36s var(--ease) 70ms}.view.out{position:absolute;inset:0 0 auto;max-height:100%;overflow:hidden;opacity:0;transform:translate(18px);pointer-events:none;transition-duration:.11s;transition-delay:0ms}.emptystate{padding:26px 10px;text-align:center;color:var(--muted);font-size:14px;line-height:1.5}.inspect{text-align:center}.inspect .icon{height:92px;display:grid;place-items:center;margin-bottom:4px}.inspect .icon img{width:88px;height:88px;object-fit:contain;animation:drift 6s ease-in-out infinite}.inspect h3{margin:0;font:19px/1.2 var(--build);letter-spacing:.01em;text-wrap:balance;transition:color var(--slow) var(--ease)}.inspect .type{margin-top:4px;font-size:13.5px;color:var(--faint);line-height:1.4}.inspect .lines{margin-top:8px;font-size:13.5px;line-height:1.55}.inspect .lines .new{animation:fade .3s var(--ease) both}.kind-positive{color:var(--positive)}.kind-unusual{color:var(--unusual)}.kind-paint{color:var(--level)}.kind-spell{color:var(--positive)}@keyframes drift{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.rows{margin:16px -16px 0;border-top:1px solid var(--line)}.r{border-bottom:1px solid var(--row-line)}.rh,.r.inline,.r.toggle{width:100%;min-height:48px;display:flex;align-items:center;gap:10px;padding:0 16px;text-align:left;transition:background var(--fast)}.rh:hover,.r.toggle:hover,.r.open>.rh{background:#ebe3cb09}.rl{flex:1;font-size:14.5px;color:var(--muted)}.rh .rl{flex:1 0 auto}.rl small{display:block;margin-top:1px;font-size:12.5px;color:var(--faint)}.rv{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;overflow:hidden;text-align:right;text-wrap:balance;line-height:1.25;font-size:14.5px;color:var(--text)}.rv.dim{color:var(--faint)}.rv .clip{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.rh:after{content:"";width:6px;height:6px;margin:0 2px 3px 4px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);transform:rotate(45deg);transition:transform var(--base) var(--ease),border-color var(--fast);flex:none}.r.open>.rh:after{transform:translateY(3px) rotate(-135deg);border-color:var(--text)}.rc{padding:8px 16px 16px}.r.inline .seg{margin-left:auto}.r.inline.stack{flex-direction:column;align-items:stretch;gap:4px;padding-top:12px;padding-bottom:4px}.r.inline.stack .seg{margin-left:0;justify-content:space-between}.dot{width:12px;height:12px;border-radius:2px;transform:translateY(-2px);flex:none;box-shadow:inset 0 0 0 1px #0000004d}.reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--base) var(--ease),opacity var(--base) var(--ease)}.reveal.open{grid-template-rows:1fr;opacity:1}.reveal>div{overflow:hidden;min-height:0}.lamp{position:relative;width:22px;height:22px;border-radius:3px;border:1.5px solid var(--line-hover);flex:none;transition:background var(--fast),border-color var(--fast)}.lamp:after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border-right:2px solid #1d140d;border-bottom:2px solid #1d140d;transform:rotate(45deg);opacity:0;transition:opacity var(--fast)}.r.toggle.on .lamp,.loopbtn.on .lamp{background:var(--accent);border-color:var(--accent)}.r.toggle.on .lamp:after,.loopbtn.on .lamp:after{opacity:1}.r.toggle.on .rl{color:var(--text)}.range{display:flex;align-items:center;gap:12px;flex:0 0 170px}.range input{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--accent) 0 var(--v, 50%),rgba(235,227,203,.14) var(--v, 50%) 100%);outline:none}.range input:disabled{opacity:.4}.range input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--text);box-shadow:0 2px 6px #0006}.range input::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--text)}.range output{width:40px;text-align:right;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.find{margin-bottom:6px}.find input{width:100%;height:36px;padding:0 10px;border-radius:3px;background:var(--field);border:1px solid var(--line);outline:none;font-size:14px}.find input:focus{border-color:var(--line-hover)}.list{max-height:228px;overflow:auto;margin:0 -6px;scrollbar-width:thin;scrollbar-color:rgba(235,227,203,.18) transparent}.li{position:relative;width:100%;display:flex;align-items:center;padding:7px 26px 7px 8px;border-radius:3px;font-size:14px;color:var(--muted);text-align:left;transition:background var(--fast),color var(--fast)}.li:hover{background:#ebe3cb0f;color:var(--text)}.li.on{color:var(--text)}.li.on:after{content:"";position:absolute;right:11px;top:50%;width:4px;height:9px;margin-top:-6px;border-right:2px solid #e8874d;border-bottom:2px solid #e8874d;transform:rotate(45deg)}.lg{padding:10px 8px 3px;font-size:12px;color:var(--faint)}.swatches{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;padding:2px}.swatch{aspect-ratio:1;border-radius:3px;box-shadow:inset 0 0 0 1px #00000059;transition:box-shadow var(--fast)}.swatch:hover{box-shadow:inset 0 0 0 1px #00000059,0 0 0 2px var(--line-hover)}.swatch.on{box-shadow:inset 0 0 0 1px #00000059,0 0 0 2px var(--text)}.swatch.none{position:relative;box-shadow:inset 0 0 0 1px var(--line-hover)}.swatch.none:after{content:"";position:absolute;left:50%;top:15%;bottom:15%;width:1.5px;background:var(--faint);transform:rotate(45deg)}.swatch.none.on{box-shadow:inset 0 0 0 1px var(--line-hover),0 0 0 2px var(--text)}.swatch.split{background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%)}.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.picks.three{grid-template-columns:repeat(3,1fr)}.pick{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px 7px;border-radius:4px;font-size:11.5px;line-height:1.2;color:var(--muted);text-align:center;transition:background var(--fast),color var(--fast)}.pick:hover{background:#ebe3cb0d;color:var(--text)}.pick.on{background:#ebe3cb0f;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-hover)}.pick .square{width:26px;height:26px;border-radius:3px;box-shadow:inset 0 0 0 1px #0000004d}.pick .square.none{box-shadow:inset 0 0 0 1px var(--line-hover)}.pick .strip{align-self:stretch;height:26px;border-radius:3px;background-size:180px 100%;background-repeat:repeat-x;animation:cycle 6s linear infinite;box-shadow:inset 0 0 0 1px #00000040}.pick .strip.none{animation:none;box-shadow:inset 0 0 0 1px var(--line-hover)}.spellbook .label{margin:10px 2px 6px;font-size:12.5px;color:var(--muted)}.spellbook .label:first-child{margin-top:0}.pick .strip.plain{animation:none}.rv .lines{display:flex;flex-direction:column;align-items:flex-end;min-width:0;font-size:13px;line-height:1.25}.rv .lines>span{max-width:100%;overflow:hidden;text-overflow:ellipsis}@keyframes cycle{to{background-position-x:-180px}}.colors{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.color{position:relative;aspect-ratio:1;overflow:hidden;border-radius:4px;border:1px solid var(--line);transition:box-shadow var(--fast)}.color.on{box-shadow:0 0 0 2px var(--text)}.color.custom{background:conic-gradient(#e44,#ec4,#4c4,#4cc,#44e,#c4c,#e44)}.color input{position:absolute;inset:0;opacity:0;cursor:pointer}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.preset{position:relative;height:54px;overflow:hidden;border-radius:4px;border:1px solid var(--line);transition:box-shadow var(--fast)}.preset span{position:absolute;left:7px;bottom:5px;font-size:11.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}.preset.on{box-shadow:0 0 0 2px var(--text)}.drop{position:relative;padding:18px 12px;border:1.5px dashed var(--line-hover);border-radius:4px;text-align:center;color:var(--muted);font-size:13px;line-height:1.5;transition:border-color var(--fast),background var(--fast)}.drop:hover,.drop.over{border-color:var(--accent);background:#cf6a321f}.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}.save{width:100%;height:40px;margin-top:16px;font-size:14px}#dock{left:var(--cx, 50%);bottom:16px;transform:translate(-50%);height:calc(var(--slot) + 40px);display:flex;align-items:flex-start;gap:6px;padding:10px 12px 0;transition:transform var(--slow) var(--ease),opacity var(--slow) var(--ease),left var(--slow) var(--ease)}.slot{position:relative;width:var(--slot);height:var(--slot);display:grid;place-items:center;border-radius:4px;background:var(--tile);border:1px solid var(--line);transition:background var(--fast),border-color var(--fast)}.slot:hover{background:var(--tile-2);border-color:var(--line-hover)}.slot.sel{background:var(--tile-2);border-color:var(--text)}.slot img{width:calc(var(--slot) * .78);height:calc(var(--slot) * .78);object-fit:contain}.slot img.changed{animation:slotin .26s var(--ease)}.slot em{font-style:normal;font-size:12px;color:var(--dim)}.slot small{position:absolute;left:-6px;right:-6px;bottom:-18px;text-align:center;font:10.5px var(--build);letter-spacing:.04em;text-transform:uppercase;color:#8a7e6c}.slot.sel small{color:var(--text)}.slot .held{position:absolute;top:3px;right:3px;padding:1px 4px;border-radius:2px;background:var(--text);color:#1d140d;font:9px var(--build);letter-spacing:.03em;text-transform:uppercase}.slotwrap{position:relative}.slotwrap .off{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:2px;background:#1a1512bf;opacity:.35;transition:opacity var(--fast),background var(--fast)}.slotwrap .off:before,.slotwrap .off:after{content:"";position:absolute;left:3px;right:3px;top:7px;height:1.5px;background:var(--text);transform:rotate(45deg)}.slotwrap .off:after{transform:rotate(-45deg)}.slotwrap:hover .off,.slotwrap .off:focus-visible{opacity:1}.slotwrap .off:hover{background:var(--red)}.sep{width:1px;height:calc(var(--slot) * .64);margin:calc(var(--slot) * .18) 4px 0;background:var(--line)}.views{display:flex;gap:4px;margin-top:calc(var(--slot) * .18)}@keyframes slotin{0%{opacity:0;transform:scale(.9)}}#dock.player{width:min(calc(var(--slot) * 11),calc(var(--cw, 100vw) - 32px));height:calc(var(--slot) + 20px);align-items:center;gap:12px;padding:0 14px}#dock.player>*{animation:fade .24s var(--ease) both}#dock .back{display:inline-flex;align-items:center;gap:7px;height:30px;flex:none;font:13px var(--build);letter-spacing:.03em;text-transform:uppercase;color:var(--muted);transition:color var(--fast)}#dock .back:before{content:"";width:6px;height:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translate(1px) rotate(45deg)}#dock .back:hover{color:var(--text)}.btn.play{width:30px;padding:0;flex:none}.btn.play i{width:0;height:0;margin-left:3px;border-left:11px solid var(--text);border-top:7px solid transparent;border-bottom:7px solid transparent}.btn.play.playing i{width:10px;height:12px;margin:0;border:0;border-left:3px solid var(--text);border-right:3px solid var(--text)}.track{position:relative;flex:1;min-width:0;height:36px;cursor:pointer;touch-action:none;outline:none}.track.off{pointer-events:none}.track .marks{position:absolute;left:0;right:0;top:2px;display:flex}.track .marks span{flex:none;overflow:hidden;white-space:nowrap;font:10.5px var(--build);letter-spacing:.04em;text-transform:uppercase;color:#8a7e6c}.track .bar{position:absolute;left:0;right:0;bottom:8px;height:4px;display:flex;overflow:hidden;border-radius:2px;background:var(--well)}.track .bar b{flex:none;height:100%}.track .start,.track .taunt{background:var(--dim)}.track .loop{background:repeating-linear-gradient(90deg,var(--line-hover) 0 6px,var(--tile-3) 6px 12px)}.track .end{background:var(--tile-3)}.track .done{position:absolute;left:0;bottom:8px;height:4px;border-radius:2px;background:var(--accent)}.track .knob{position:absolute;bottom:2px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--text);box-shadow:0 2px 6px #0006;transition:transform var(--fast) var(--ease)}.track:hover .knob,.track.drag .knob{transform:scale(1.12)}.track:focus-visible .knob{outline:2px solid var(--line-hover);outline-offset:2px}#dock .time{flex:none;min-width:100px;text-align:right;font:13px var(--build);letter-spacing:.03em;color:var(--muted);font-variant-numeric:tabular-nums}.loopbtn{display:inline-flex;align-items:center;gap:8px;height:30px;flex:none;font:13px var(--build);letter-spacing:.03em;text-transform:uppercase;color:var(--muted);transition:color var(--fast)}.loopbtn:hover,.loopbtn.on{color:var(--text)}.sound{position:relative;display:flex;align-items:center;flex:none}.sound .range{position:absolute;right:0;bottom:calc(100% + var(--slot) / 2 + 3px);width:136px;padding:12px 14px;border-radius:3px;background:#1e1814f7;border:1px solid var(--line);box-shadow:0 6px 16px #00000059;opacity:0;visibility:hidden;transition:opacity var(--fast) var(--ease),visibility var(--fast)}.sound .range:after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(var(--slot) / 2 + 3px)}.sound .range input{min-width:0}.sound:hover .range,.sound:has(:focus-visible) .range{opacity:1;visibility:visible}.speaker{display:grid;place-items:center;width:30px;height:30px;flex:none;color:var(--muted);transition:color var(--fast)}.speaker:hover{color:var(--text)}.speaker svg{width:20px;height:20px}.speaker .body{fill:currentColor}.speaker .wave,.speaker .cross{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.speaker .cross,.speaker.muted .wave{display:none}.speaker.muted .cross{display:inline}#status{position:absolute;left:var(--cx, 50%);bottom:calc(var(--slot) + 70px);transform:translate(-50%);max-width:520px;padding:6px 12px;border-radius:4px;background:#1a1512d9;font-size:13px;color:var(--muted);text-align:center;pointer-events:none;transition:opacity var(--base) var(--ease)}#status:empty{opacity:0}#toasts{position:absolute;left:var(--cx, 50%);bottom:calc(var(--slot) + 110px);transform:translate(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:8px;pointer-events:none;z-index:30}.toast{max-width:520px;padding:10px 14px;border-radius:4px;background:#1a1512f5;border:1px solid var(--line);font-size:13.5px;text-align:center;animation:toastup .26s var(--ease) both}.toast.leave{animation:toastout .3s var(--ease) both}@keyframes toastup{0%{opacity:0;transform:translateY(8px)}}@keyframes toastout{to{opacity:0;transform:translateY(-6px)}}#reveal-hint{position:absolute;left:50%;bottom:22px;transform:translate(-50%,20px);padding:8px 14px;border-radius:4px;background:#1a1512b3;border:1px solid var(--line);font-size:13px;color:var(--muted);opacity:0;pointer-events:none;transition:opacity .42s var(--ease),transform .42s var(--ease)}#app.hide #reveal-hint{opacity:1;transform:translate(-50%);transition-delay:.3s}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0ms!important}}.flash{position:absolute;inset:0;z-index:40;background:#fff;opacity:0;pointer-events:none;animation:flash .38s var(--ease) both}@keyframes flash{25%{opacity:.35}}