@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");.kbf{--bg:#0c0b0a;--bg-soft:#141210;--panel:rgba(255,255,255,0.025);--line:rgba(255,255,255,0.08);--line-strong:rgba(255,255,255,0.16);--ink:#f4f1ea;--ink-dim:rgba(244,241,234,0.55);--ink-faint:rgba(244,241,234,0.3);--accent:#f5b514;--accent-soft:#ffcf52;--accent-deep:#b9810a;--font-display:"Bricolage Grotesque",system-ui,"PingFang SC","Hiragino Sans","Noto Sans CJK",sans-serif;--font-body:"Hanken Grotesk",system-ui,"PingFang SC","Hiragino Sans","Noto Sans CJK",sans-serif;--font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;position:relative;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--font-body);overflow-x:clip}.kbf:before{background:radial-gradient(60% 38% at 50% -4%,rgba(245,181,20,.14) 0,transparent 60%),radial-gradient(40% 30% at 88% 8%,rgba(245,181,20,.06) 0,transparent 70%),radial-gradient(circle at center,rgba(255,255,255,.04) .8px,transparent 0);background-size:100% 100%,100% 100%,22px 22px}.kbf:after,.kbf:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}.kbf:after{opacity:.4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");mix-blend-mode:overlay}.kbf>*{position:relative;z-index:1}.kbf-display{font-family:var(--font-display);letter-spacing:-.02em}.kbf-mono{font-family:var(--font-mono);font-feature-settings:"tnum" 1}.kbf-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase}.kbf-accent,.kbf-eyebrow{color:var(--accent)}.kbf-amber-btn{background:var(--accent);color:#1a1206;font-weight:700;transition:background .18s ease,transform .18s ease,box-shadow .18s ease;box-shadow:0 6px 22px -8px rgba(245,181,20,.7)}.kbf-amber-btn:hover{background:var(--accent-soft);transform:translateY(-1px)}.kbf-panel{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(10px)}@keyframes kbfRise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.kbf-rise{animation:kbfRise .7s cubic-bezier(.2,.7,.2,1) both}@keyframes kbfEq{0%,to{transform:scaleY(.25)}50%{transform:scaleY(1)}}.kbf-eq{display:flex;align-items:flex-end;gap:4px;height:34px}.kbf-eq span{width:5px;height:100%;background:linear-gradient(180deg,var(--accent-soft),var(--accent-deep));border-radius:3px;transform-origin:bottom;animation:kbfEq .9s ease-in-out infinite}.kbf-eq span:first-child{animation-delay:0s}.kbf-eq span:nth-child(2){animation-delay:.15s}.kbf-eq span:nth-child(3){animation-delay:.3s}.kbf-eq span:nth-child(4){animation-delay:.45s}.kbf-eq span:nth-child(5){animation-delay:.6s}@keyframes kbfBeat{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(245,181,20,.55)}40%{transform:scale(1.35);box-shadow:0 0 0 10px rgba(245,181,20,0)}to{transform:scale(1);box-shadow:0 0 0 0 rgba(245,181,20,0)}}.kbf-beat{width:10px;height:10px;border-radius:999px;background:var(--accent);animation:kbfBeat var(--beat,.6s) ease-out infinite}.kbf-gauge{--val:0;width:64px;height:64px;border-radius:999px;background:conic-gradient(var(--accent) calc(var(--val) * 1%),rgba(255,255,255,.07) 0);display:grid;place-items:center;position:relative}.kbf-gauge:before{content:"";position:absolute;inset:6px;border-radius:999px;background:var(--bg-soft)}.kbf-gauge>*{position:relative}.kbf-bar{height:5px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.kbf-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-deep),var(--accent))}.kbf-drop{border:1.5px dashed var(--line-strong);border-radius:16px;transition:border-color .2s ease,background .2s ease;background:rgba(255,255,255,.012)}.kbf-drop.drag,.kbf-drop:hover{border-color:var(--accent);background:rgba(245,181,20,.05)}.kbf-tab{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim);transition:color .18s ease}.kbf-tab.active{color:#1a1206}.kbf-range{--pct:0%;-webkit-appearance:none;appearance:none;height:5px;border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--pct),rgba(255,255,255,.12) var(--pct));cursor:pointer;outline:none}.kbf-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:999px;background:var(--accent);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--accent)}.kbf-range::-moz-range-thumb{width:13px;height:13px;border:2px solid var(--bg);border-radius:999px;background:var(--accent)}.kbf-range:disabled{opacity:.4;cursor:default}.kbf-play-btn{background:var(--accent);color:#1a1206;transition:transform .15s ease,background .15s ease}.kbf-play-btn:hover{background:var(--accent-soft);transform:scale(1.06)}@media (prefers-reduced-motion:reduce){.kbf-beat,.kbf-eq span,.kbf-rise{animation:none}}