/* v4: every color taken from the cover is a variable (--tkcN, "r,g,b"). The defaults are v3's own colors for Smoked Out Radio Vol. 56;
   takeover.js recomputes them from each tape's cover (hue turned to the cover's main color, brightness kept so every contrast stays as measured). */
:root{--tkc0:255,94,31;--tkc1:110,20,16;--tkc2:253,243,228;--tkc3:70,20,10;--tkc4:255,213,74;--tkc5:18,7,10;--tkc6:26,6,8;--tkc7:154,47,18;--tkc8:255,140,100;--tkc9:15,36,20;--tkc10:176,32,26;--tkc11:255,180,138;--tkc12:74,14,18;--tkc13:246,227,204;--tkc14:255,250,242;--tkc15:255,252,247;--tkc16:34,7,10;--tkc17:74,36,33;--tkc18:122,76,68;--tkc19:201,55,15;--tkc20:168,42,12;--tkc21:184,48,15;--tkc22:34,16,18;--tkc23:31,14,16;--tkc24:42,21,23;--tkc25:251,240,220;--tkc26:230,211,194;--tkc27:182,154,140;--tkc28:255,138,77;--tkc29:255,244,200;--tkc30:255,165,58;--tkc31:240,68,26;--tkc32:255,122,69;--tkc33:210,58,18;--tkc34:168,38,13;--tkc35:240,196,168;--tkc36:111,28,20}
/* Site takeover, full skin: direction A as picked 10/02/2026 (mockups-2026-v3/takeover), element for element.
   Layout, sizes and effects are A's own stylesheets unchanged; only the colors are swapped, role for role, from the
   No Looking Back cover to the Smoked Out Radio Vol. 56 cover (night maroon, fire red, gold, red-orange). */
/* shared takeover pieces: colors pulled from the No Looking Back cover (flame orange, fire yellow, sneaker green) */
:root{--tk-fire:rgb(var(--tkc0));--tk-gold:rgb(var(--tkc4));--tk-green:rgb(var(--tkc10));--tk-deep:rgb(var(--tkc6));--tk-mint:rgb(var(--tkc11));--tk-ember:rgb(var(--tkc7));--tk-ink:#1d1b1a}
/* release-day pill in the nav, on every page */
.tk-pill{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px 0 4px;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);white-space:nowrap;min-width:0;transition:transform .2s}
.tk-pill:hover{transform:translateY(-1px)}
.tk-pill img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.tk-pill .lv{width:8px;height:8px;border-radius:50%;background:var(--tk-fire);box-shadow:0 0 0 0 rgba(var(--tkc0),.7);animation:tkpulse 1.8s infinite;flex:none}
@keyframes tkpulse{0%{box-shadow:0 0 0 0 rgba(var(--tkc0),.75)}70%{box-shadow:0 0 0 9px rgba(var(--tkc0),0)}100%{box-shadow:0 0 0 0 rgba(var(--tkc0),0)}}
.tk-pill .tx{display:flex;gap:6px;font-size:13.5px;min-width:0}.tk-pill b{font-weight:800}.tk-pill em{font-style:normal;font-weight:600;opacity:.9;overflow:hidden;text-overflow:ellipsis}
.nav.solid .tk-pill{background:var(--bg2);border-color:var(--line);color:var(--fg)}
/* the line at the top of search and tape pages */
.tk-strip{display:flex;align-items:center;gap:14px;margin:0 44px 30px;padding:12px 14px 12px 12px;border-radius:18px;background:linear-gradient(110deg,rgb(var(--tkc6)),rgb(var(--tkc12)) 55%,rgb(var(--tkc7)));color:#fff;box-shadow:var(--card-shadow)}
.pg .tk-strip{margin:18px 0 26px}
.tk-strip img{width:58px;height:58px;border-radius:10px;object-fit:cover;flex:none}
.tk-strip .tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.tk-strip small{font-size:12px;font-weight:700;color:var(--tk-gold)}.tk-strip b{font-size:17px;font-weight:800;letter-spacing:-.02em}.tk-strip span{font-size:13px;opacity:.8}
.tk-strip .btn.acc{background:var(--tk-fire);color:#1d1b1a}.tk-strip .btn.soft{background:rgba(255,255,255,.14);color:#fff}
/* the release card riding in a row */
.card.tk-card .cv{box-shadow:0 0 0 2px var(--tk-fire),0 12px 30px -8px rgba(var(--tkc0),.55)}
.card .cv .fb.tk-fb{background:var(--tk-fire);color:#1d1b1a}
@media(max-width:820px){
 .tk-strip{margin:0 18px 22px;flex-wrap:wrap}.tk-strip .tx{flex-basis:calc(100% - 72px)}.tk-strip .btn{flex:1;justify-content:center}
 .tk-pill{height:34px;padding:0 10px 0 3px;gap:7px}.tk-pill img{width:28px;height:28px}.tk-pill em{display:none}.tk-pill .tx{font-size:12.5px}
}
.tk .nav .outline,.tk .nav .accpill{white-space:nowrap;flex:none}.tk .nav .tk-pill{flex:none}
@media(max-width:1280px){.tk .nav .tk-pill em{display:none}}
@media(max-width:820px){
 .tk .nav .tk-pill{position:relative;padding:0;width:36px;height:36px;border-radius:50%;justify-content:center;background:none;border:2px solid var(--tk-fire)}
 .tk .nav .tk-pill img{width:30px;height:30px}.tk .nav .tk-pill .tx{display:none}
 .tk .nav .tk-pill .lv{position:absolute;right:-2px;top:-2px;width:10px;height:10px;border:2px solid rgb(var(--tkc6))}
 .tk .nav{gap:8px}.tk .nav .sp{min-width:0}
}
@media(max-width:400px){.tk .nav .logo svg{display:none}}

/* Direction A, Full skin. Colors pulled from the cover: deep sneaker green, flame orange, fire yellow. */
body.tk-a{--bg:rgb(var(--tkc2));--bg2:rgb(var(--tkc13));--surface:rgb(var(--tkc14));--raise:rgb(var(--tkc15));--fg:rgb(var(--tkc16));--body:rgb(var(--tkc17));--mut:rgb(var(--tkc18));--line:rgba(var(--tkc1),.15);--acc:rgb(var(--tkc19));--acc2:rgb(var(--tkc20));--glass:rgba(var(--tkc2),.78);--card-shadow:0 8px 24px rgba(var(--tkc3),.14);--tka-head:rgb(var(--tkc16));--tka-hi:rgb(var(--tkc21))}
:root[data-theme="dark"] body.tk-a{--bg:rgb(var(--tkc5));--bg2:rgb(var(--tkc22));--surface:rgb(var(--tkc23));--raise:rgb(var(--tkc24));--fg:rgb(var(--tkc25));--body:rgb(var(--tkc26));--mut:rgb(var(--tkc27));--line:rgba(var(--tkc4),.12);--acc:rgb(var(--tkc0));--acc2:rgb(var(--tkc28));--glass:rgba(var(--tkc5),.72);--card-shadow:0 10px 30px rgba(0,0,0,.55);--tka-head:rgb(var(--tkc25));--tka-hi:rgb(var(--tkc4))}
body.tk-a{background:var(--bg)}
/* side wallpaper, the way a magazine site wears a skin */
.tka-wall{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgb(var(--tkc6)),rgb(var(--tkc12)) 30%,rgb(var(--tkc12)) 70%,rgb(var(--tkc6)))}
.tka-wall .l,.tka-wall .r{position:absolute;top:0;bottom:0;width:50%;background-size:auto 100%;background-repeat:no-repeat}
.tka-wall .l{left:0;background-position:left center}.tka-wall .r{right:0;background-position:right center;transform:scaleX(-1)}
body.tk-a #view{position:relative;z-index:1}
.tk-a #view>main.home,.tk-a #view>.tp,.tk-a #view>.pg,.tk-a #view>section.hero:not(.tka-m),.tk-a #view>section.hero:not(.tka-m)+main.home{max-width:1220px;margin-left:auto;margin-right:auto}
.tk-a #view>main.home{background:var(--bg);margin-top:0;padding-top:34px;box-shadow:0 0 0 1px var(--line),0 40px 80px rgba(0,0,0,.35);border-radius:0 0 26px 26px}
.tk-a #view>.pg,.tk-a #view>.tp{background:var(--bg);box-shadow:0 0 0 1px var(--line),0 40px 80px rgba(0,0,0,.35);min-height:100vh}
.tk-a #view.padded{background:var(--bg)}
/* nav for the day */
.tk-a .nav.tka-nav{gap:16px;color:#fff;background:linear-gradient(90deg,rgba(var(--tkc6),.9),rgba(var(--tkc1),.75) 55%,rgba(var(--tkc7),.8));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 -2px 0 var(--tk-fire)}
.tk-a .nav.tka-nav.solid{color:#fff}
.tk-a .nav .logo .wm b{color:var(--tk-gold)}
.tk-a .nav .links{gap:2px}
.tka-presents{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:15px;color:var(--tk-gold);letter-spacing:-.01em;margin-left:-8px}
.tk-a .nav.solid .tk-pill{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.22);color:#fff}
.tk-a .nav .outline{border-color:rgba(255,255,255,.4)}
/* masthead */
.hero.tka-m{height:auto;min-height:min(100vh,940px);background:rgb(var(--tkc6));color:#fff;display:flex;flex-direction:column;justify-content:center;padding:108px 44px 76px}
.hero.tka-m:after{display:none}
.tka-m .bg{position:absolute;inset:-60px;background-size:cover;background-position:center 30%;filter:blur(30px) saturate(1.6) brightness(.62);transform:scale(1.1);animation:tkaPan 22s ease-in-out infinite alternate}
@keyframes tkaPan{from{transform:scale(1.1) translateX(-2%)}to{transform:scale(1.22) translateX(2%)}}
.tka-m .glow{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;opacity:.55;pointer-events:none}
.tka-m .g1{width:620px;height:620px;left:-140px;bottom:-260px;background:rgb(var(--tkc0));animation:tkaG 9s ease-in-out infinite alternate}
.tka-m .g2{width:520px;height:520px;right:-120px;top:-180px;background:rgb(var(--tkc10));animation:tkaG 11s ease-in-out infinite alternate-reverse}
@keyframes tkaG{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,-40px) scale(1.15)}}
.tka-m .in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(300px,480px) minmax(0,1fr);gap:56px;align-items:center;max-width:1320px;margin:0 auto;width:100%}
.tka-m .art{position:relative;display:block;aspect-ratio:1;border-radius:22px;overflow:hidden;box-shadow:0 60px 120px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.14),0 0 90px -10px rgba(var(--tkc0),.55);transform:perspective(1200px) rotateY(9deg) rotateX(2deg);animation:tkaTilt 8s ease-in-out infinite alternate}
@keyframes tkaTilt{from{transform:perspective(1200px) rotateY(9deg) rotateX(2deg)}to{transform:perspective(1200px) rotateY(-4deg) rotateX(-1deg)}}
.tka-m .art img{width:100%;height:100%;object-fit:cover}
.tka-m .shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 46%,transparent 60%);transform:translateX(-120%);animation:tkaShine 5.5s ease-in-out 1.2s infinite}
@keyframes tkaShine{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
.tka-m .eb{font-size:16px;font-weight:600;color:rgba(255,255,255,.82)}.tka-m .eb .lg{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:19px;color:#fff;letter-spacing:-.03em}.tka-m .eb .lg b{color:var(--tk-gold)}
.tka-m h1{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(56px,8.2vw,132px);line-height:.86;letter-spacing:-.05em;margin:14px 0 22px;padding-bottom:.09em;background:linear-gradient(180deg,rgb(var(--tkc29)) 0%,rgb(var(--tkc4)) 38%,rgb(var(--tkc30)) 70%,rgb(var(--tkc31)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 30px rgba(0,0,0,.4));text-wrap:balance}
.tka-m .mt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px;font-weight:600}
.tka-m .mt .dot{opacity:.6}.tka-m .mt .on{background:var(--tk-fire);color:#1d1b1a;font-weight:800;font-size:13px;padding:4px 11px;border-radius:999px}
.tka-m .acts{display:flex;gap:10px;margin:26px 0 30px;flex-wrap:wrap}
.btn.tka-go{background:var(--tk-fire);color:#1d1b1a;box-shadow:0 12px 34px -8px rgba(var(--tkc0),.7)}.btn.tka-go:hover{background:rgb(var(--tkc32))}
.tka-m .tl{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:14px 10px 10px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);max-width:760px}
.tka-m .tl .h{font-size:13px;font-weight:700;color:var(--tk-gold);padding:0 10px 6px}
.tka-m .tl .g{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(6,auto);gap:0 10px}
.tka-tr{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:10px;text-align:left;font-size:14px;min-width:0}
.tka-tr:hover{background:rgba(255,255,255,.1)}.tka-tr .n{width:20px;color:rgba(255,255,255,.55);font-weight:700;font-size:13px;flex:none}
.tka-tr .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.tka-tr .tka-ld{margin-left:auto;font-size:11px;font-weight:800;background:var(--tk-gold);color:#1d1b1a;padding:2px 7px;border-radius:999px;flex:none}
.tka-tr.playing{background:rgba(var(--tkc0),.22)}.tka-tr.playing .n{color:var(--tk-fire)}
.tka-m .more{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:rgba(255,255,255,.8);padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.25)}
.tka-m .more svg{width:16px;height:16px;animation:tkaBob 1.6s ease-in-out infinite}@keyframes tkaBob{50%{transform:translateY(3px)}}
/* light: the same skin by daylight */
:root:not([data-theme="dark"]) .hero.tka-m{background:rgb(var(--tkc2));color:var(--fg)}
:root:not([data-theme="dark"]) .tka-m .bg{filter:blur(34px) saturate(1.5) brightness(1.15);opacity:.5}
:root:not([data-theme="dark"]) .tka-m .glow{mix-blend-mode:multiply;opacity:.35}
:root:not([data-theme="dark"]) .tka-m .eb{color:var(--body)}:root:not([data-theme="dark"]) .tka-m .eb .lg{color:var(--fg)}:root:not([data-theme="dark"]) .tka-m .eb .lg b{color:var(--acc)}
:root:not([data-theme="dark"]) .tka-m h1{background:linear-gradient(180deg,rgb(var(--tkc12)) 0%,rgb(var(--tkc10)) 45%,rgb(var(--tkc33)) 80%,rgb(var(--tkc34)) 100%);-webkit-background-clip:text;background-clip:text;filter:none}
:root:not([data-theme="dark"]) .tka-m .chip{background:rgba(255,255,255,.7);border-color:var(--line);color:var(--fg)}
:root:not([data-theme="dark"]) .tka-m .btn.glass{background:rgba(255,255,255,.7);color:var(--fg);border-color:var(--line)}
:root:not([data-theme="dark"]) .tka-m .tl{background:rgba(255,255,255,.62);border-color:var(--line)}
:root:not([data-theme="dark"]) .tka-m .tl .h{color:var(--acc)}
:root:not([data-theme="dark"]) .tka-tr:hover{background:rgba(var(--tkc1),.08)}:root:not([data-theme="dark"]) .tka-tr .n{color:var(--mut)}
:root:not([data-theme="dark"]) .tka-tr .tka-ld{background:rgb(var(--tkc12));color:rgb(var(--tkc4))}
:root:not([data-theme="dark"]) .tka-m .more{color:var(--fg);background:rgba(255,255,255,.6)}
:root:not([data-theme="dark"]) .tka-wall{background:linear-gradient(90deg,rgb(var(--tkc35)),rgb(var(--tkc4)) 50%,rgb(var(--tkc35)))}
:root:not([data-theme="dark"]) .tk-a .nav.tka-nav{background:linear-gradient(90deg,rgba(var(--tkc2),.88),rgba(var(--tkc4),.55) 55%,rgba(var(--tkc8),.6));color:var(--fg)}
:root:not([data-theme="dark"]) .tk-a .nav .logo .wm b{color:var(--acc)}
:root:not([data-theme="dark"]) .tk-a .tka-presents{color:rgb(var(--tkc12))}
:root:not([data-theme="dark"]) .tk-a .nav .tk-pill{background:rgb(var(--tkc16));border-color:rgb(var(--tkc16));color:#fff}
:root:not([data-theme="dark"]) .tk-a .nav .outline{border-color:rgba(var(--tkc9),.3)}
/* the artist row */
.tka-artist{display:flex;align-items:center;gap:16px;margin:0 44px 40px;padding:16px;border-radius:22px;background:linear-gradient(110deg,color-mix(in srgb,var(--tk-green) 24%,var(--surface)),color-mix(in srgb,var(--tk-fire) 16%,var(--surface)));border:1px solid var(--line)}
.tka-artist img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.tka-artist .tx{flex:1;display:flex;flex-direction:column;min-width:0}.tka-artist small{font-size:12.5px;font-weight:700;color:var(--acc)}.tka-artist b{font-size:22px;letter-spacing:-.03em}.tka-artist span{font-size:14px;color:var(--mut)}
.tk-a .promoshelf{background:linear-gradient(135deg,color-mix(in srgb,var(--tk-fire) 18%,var(--surface)),color-mix(in srgb,var(--tk-green) 14%,var(--surface)))}
.tk-a .band{background:linear-gradient(135deg,rgb(var(--tkc6)),rgb(var(--tkc12)) 60%,rgb(var(--tkc36)))!important}
/* the band keeps the cover's darkest colors in both themes, so in light its words take the dark theme's colors too (they were dark on dark);
   and in light the accent is a deep shade, where white is the text color that passes (the dark ink is for the bright accent of dark) */
:root:not([data-theme="dark"]) .tk-a .band .tx{--fg:rgb(var(--tkc25));--body:rgb(var(--tkc26));--mut:rgb(var(--tkc27));--bg2:rgb(var(--tkc22));--acc:rgb(var(--tkc0));--on-acc:#1a0f00;color:var(--fg)}
:root:not([data-theme="dark"]) body.tk-a{--on-acc:#fff}
@media(max-width:1300px){.tka-wall .l,.tka-wall .r{display:none}}
@media(max-width:820px){
 .hero.tka-m{padding:76px 18px 70px;min-height:0}
 .tka-m .in{grid-template-columns:1fr;gap:26px}
 .tka-m .art{width:min(64vw,270px);margin:0 auto;transform:none;animation:none}
 .tka-m .tx{text-align:left}.tka-m h1{font-size:54px;margin:10px 0 16px}
 .tka-m .acts .btn{flex:1;justify-content:center}.tka-m .acts .btn.tka-go{flex-basis:100%}
 .tka-m .tl .g{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}
 .tka-m .tl .g .tka-tr:nth-child(n+7){display:none}
 .tka-presents{display:none}.tk-a .nav .logo .wm{font-size:19px}
 /* phone: the picture and the words share the first line, the two buttons sit side by side under them (Brian, 10/09/2026) */
 .tka-artist{margin:0 18px 30px;flex-wrap:wrap;gap:14px}.tka-artist img{width:64px;height:64px;flex:none}.tka-artist .tx{flex:1 1 calc(100% - 78px)}.tka-artist .tx span{text-wrap:pretty}.tka-artist .btn{flex:1 1 0;justify-content:center;white-space:nowrap}
 .tk-a #view>main.home{border-radius:0;box-shadow:none}
}

/* the intro (v3), in the same cover colors. No countdown, no flip (Brian, 10/08/2026) */
html.tkb-lock{overflow:hidden}
.tka2-body{display:contents}
.tka-m .art .cs{position:absolute;left:16px;top:16px;background:rgba(var(--tkc6),.82);color:var(--tk-gold);border:1px solid rgba(var(--tkc4),.4);font-weight:800;font-size:14px;padding:6px 13px;border-radius:999px;backdrop-filter:blur(8px)}
/* light */
/* the intro, in the skin's colors */
.tka2-intro{position:fixed;inset:0;z-index:200;background:rgb(var(--tkc6));color:#fff;display:grid;place-items:center;overflow:hidden;transition:opacity .6s,transform .7s cubic-bezier(.6,0,.4,1)}
.tka2-intro.out{opacity:0;transform:scale(1.06);pointer-events:none}
.tka2-intro .bg{position:absolute;inset:-60px;background-size:cover;background-position:center 30%;filter:blur(30px) saturate(1.6) brightness(.6);animation:tkaPan 22s ease-in-out infinite alternate}
.tka2-intro .glow{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;opacity:.6;pointer-events:none}
.tka2-intro .g1{width:700px;height:700px;left:-160px;bottom:-300px;background:rgb(var(--tkc0));animation:tkaG 6s ease-in-out infinite alternate}
.tka2-intro .g2{width:560px;height:560px;right:-140px;top:-200px;background:rgb(var(--tkc10));animation:tkaG 7s ease-in-out infinite alternate-reverse}
.tka2-intro .c{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:center;max-width:1180px;width:100%;padding:0 48px}
.tka2-intro .cvw{position:relative;width:min(44vh,420px);aspect-ratio:1;border-radius:22px;overflow:hidden;box-shadow:0 60px 120px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.14),0 0 100px -10px rgba(var(--tkc0),.6);animation:tka2Cv 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes tka2Cv{from{opacity:0;transform:perspective(1200px) rotateY(40deg) scale(.7);filter:brightness(2.4) blur(8px)}to{opacity:1;transform:perspective(1200px) rotateY(9deg) rotateX(2deg);filter:none}}
.tka2-intro .cv{width:100%;height:100%;object-fit:cover}
.tka2-intro .shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 46%,transparent 60%);transform:translateX(-120%);animation:tkaShine 2.4s ease-in-out 1s both}
.tka2-intro .eb{font-size:17px;font-weight:600;color:rgba(255,255,255,.85);animation:tka2Up .6s .6s both}.tka2-intro .eb .lg{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:21px;color:#fff;letter-spacing:-.03em}.tka2-intro .eb .lg b{color:var(--tk-gold)}
.tka2-intro h2{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(56px,8.4vw,136px);line-height:.88;letter-spacing:-.05em;margin:14px 0 14px;padding-bottom:.08em}
.tka2-intro h2 span{display:inline-block;background:linear-gradient(180deg,rgb(var(--tkc29)) 0%,rgb(var(--tkc4)) 38%,rgb(var(--tkc30)) 70%,rgb(var(--tkc31)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:tka2Slam2 .55s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(1s + var(--i)*.2s)}
@keyframes tka2Slam2{from{opacity:0;transform:scale(2) translateY(-10px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.tka2-intro .by{font-size:24px;font-weight:800;animation:tka2Up .6s 1.8s both}
.tka2-intro .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;animation:tka2Up .6s 2.2s both}
.tka2-intro .on{background:var(--tk-fire);color:#1d1b1a;font-weight:800;font-size:15px;padding:6px 15px;border-radius:999px}
.tka2-intro .np{display:none;align-items:center;gap:9px;font-size:15px;color:rgba(255,255,255,.85)}.tka2-intro .np b{color:#fff}
.tka2-intro.playing .np{display:inline-flex}
.tka2-intro .eq{display:inline-flex;align-items:flex-end;gap:3px;height:18px}.tka2-intro .eq i{width:4px;background:var(--tk-gold);border-radius:2px;animation:tka2Eq .9s ease-in-out infinite alternate}
.tka2-intro .eq i:nth-child(2){animation-delay:-.3s;background:rgb(var(--tkc30))}.tka2-intro .eq i:nth-child(3){animation-delay:-.6s}.tka2-intro .eq i:nth-child(4){animation-delay:-.15s;background:rgb(var(--tkc0))}
@keyframes tka2Eq{from{height:4px}to{height:18px}}
@keyframes tka2Up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tka2-intro .skip{position:absolute;right:24px;bottom:28px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:700;font-size:14px;backdrop-filter:blur(12px)}
.tka2-intro .skip svg{width:15px;height:15px}
.tka2-intro .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.14)}.tka2-intro .prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,rgb(var(--tkc10)),rgb(var(--tkc4)),rgb(var(--tkc0)));animation:tka2Prog 5s linear forwards}
@keyframes tka2Prog{to{width:100%}}
.tka2-intro.still .prog{display:none}
:root:not([data-theme="dark"]) .tka2-intro{background:rgb(var(--tkc2));color:var(--fg)}
:root:not([data-theme="dark"]) .tka2-intro .bg{filter:blur(34px) saturate(1.5) brightness(1.15);opacity:.5}
:root:not([data-theme="dark"]) .tka2-intro .glow{mix-blend-mode:multiply;opacity:.35}
:root:not([data-theme="dark"]) .tka2-intro .eb{color:var(--body)}:root:not([data-theme="dark"]) .tka2-intro .eb .lg{color:var(--fg)}:root:not([data-theme="dark"]) .tka2-intro .eb .lg b{color:rgb(var(--tkc33))}
:root:not([data-theme="dark"]) .tka2-intro h2 span{background:linear-gradient(180deg,rgb(var(--tkc12)) 0%,rgb(var(--tkc10)) 45%,rgb(var(--tkc33)) 80%,rgb(var(--tkc34)) 100%);-webkit-background-clip:text;background-clip:text}
:root:not([data-theme="dark"]) .tka2-intro .np{color:var(--body)}:root:not([data-theme="dark"]) .tka2-intro .np b{color:var(--fg)}:root:not([data-theme="dark"]) .tka2-intro .eq i{background:rgb(var(--tkc10))}
:root:not([data-theme="dark"]) .tka2-intro .skip{background:rgba(255,255,255,.75);border-color:rgba(var(--tkc1),.2);color:var(--fg)}
:root:not([data-theme="dark"]) .tka2-intro .prog{background:rgba(var(--tkc1),.12)}
@media(max-width:820px){
 .tka2-intro .c{grid-template-columns:1fr;gap:26px;padding:0 22px;justify-items:start}.tka2-intro .cvw{width:min(66vw,280px);justify-self:center}
 .tka2-intro h2{font-size:56px}.tka2-intro .by{font-size:20px}
 .tka2-intro .skip{bottom:calc(26px + env(safe-area-inset-bottom))}
}
@media(max-width:380px){.tk-a2 .nav .logo .wm{font-size:18px}}
.tka2-intro .pl[hidden]{display:none}
:root[data-theme="dark"] .tka2-intro:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.45))}
:root[data-theme="dark"] .tka2-intro .bg{filter:blur(30px) saturate(1.5) brightness(.48)}
@media(max-width:820px){:root[data-theme="dark"] .tka2-intro .glow{opacity:.3}:root[data-theme="dark"] .tka2-intro:after{background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.2) 70%)}}

/* ---- fitting A onto today's site (no visual change from A; only what today's markup needs) ---- */
body.tk-off .tka-wall,body.tk-off .tka-presents,body.tk-off #nav .tk-pill{display:none!important}
.tka-m .tl .g{grid-template-rows:var(--tka-rows,repeat(6,auto))}
.tka-m .chip{color:inherit;text-decoration:none}
.tka-m .acts .btn{text-decoration:none}
/* Sign in on the cover's red-orange: white text in light (5.2 to 1), dark text in dark (5.6 to 1) */
:root:not([data-theme="dark"]) body.tk-a .accpill{color:#fff}
:root[data-theme="dark"] body.tk-a .accpill{color:#1d1b1a}
/* a shared preview link (tkpreview.js, 10/09/2026): the small Preview tag, so nobody mistakes it for the live site (design standard status
   pill: 24 tall, 13 / 600, radius 8, --fg fill with --bg text), and the line under Play while the audio is not in yet */
.tk-pvl{position:fixed;z-index:60;left:50%;transform:translateX(-50%);top:76px;height:24px;padding:0 8px;border-radius:8px;display:inline-flex;align-items:center;font:600 13px/1 var(--font,system-ui);background:var(--fg);color:var(--bg);box-shadow:0 4px 16px rgba(0,0,0,.25);pointer-events:none}
.tka-m .tk-pend{display:block;margin:-18px 0 26px;font-size:15px;font-weight:600;line-height:1.45;color:rgba(255,255,255,.85)}
:root:not([data-theme="dark"]) .tka-m .tk-pend{color:var(--mut)}
.btn.tka-go:disabled,.tk-strip .btn:disabled{opacity:.55;cursor:default;box-shadow:none}
.tka-tr:disabled{cursor:default}.tka-tr:disabled:hover{background:none}