/* "AI talk show" page (/ki-talkshow/): domain form, a futuristic night TV studio with stage lights and five flat SVG guests
   that talk, a split-flap scoreboard, an animated chat, an applause meter, the overall grade, the tips, share row, wall.
   The studio uses fixed colours so it reads the same in light and dark theme and in every site skin. */
.tks { --st-bg: #07051a; --st-2: #120c2c; --st-3: #1c1440; --st-line: rgba(160, 120, 255, .28); --st-ink: #f3eefe; --st-soft: #a99fcc;
  --cy: #3ef0ff; --mg: #ff4fa3; --mono: ui-monospace, "IBM Plex Mono", Menlo, Consolas, monospace; }
.tks .g-hacker { --c: #39f5b0; } .tks .g-seo { --c: #ffb547; } .tks .g-design { --c: #ff4fa3; } .tks .g-oma { --c: #b49cff; } .tks .g-kunde { --c: #ff6b4a; } .tks .g-host { --c: #3ef0ff; }
.tks .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tks [hidden] { display: none !important; }
.tks-fun { display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 4px; font: 700 13px var(--font-m); letter-spacing: .08em; text-transform: uppercase;
  color: #0b0820; background: linear-gradient(135deg, #ff4fa3, #ffb547 55%, #3ef0ff); }
.tks-hero .h2 { font-size: clamp(34px, 6vw, 60px); line-height: 1.05; letter-spacing: -.01em; }

/* ---- form */
.tks-ask { margin: 22px 0 18px; max-width: 640px; }
.tks-label { display: block; margin: 0 0 8px; font: 600 15px var(--font-m); color: var(--muted); }
.tks-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tks-in { flex: 1 1 240px; min-width: 0; min-height: 56px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line-2, rgba(127, 127, 127, .45));
  background: var(--panel, transparent); color: var(--text); font: 500 17px var(--font-m); }
.tks-in::placeholder { color: var(--dim, #888); }
.tks-go { flex: 0 0 auto; min-height: 56px; padding: 0 28px; border: 1px solid #ff4fa3; border-radius: 10px; color: #fff; font: 700 18px var(--font-b); cursor: pointer;
  background: linear-gradient(135deg, #3a0d3a, #1b0f4a); animation: tks-glow 2.8s infinite; transition: transform .2s, filter .2s; }
.tks-go:hover { filter: brightness(1.2); transform: translateY(-2px); }
.tks-go[disabled] { opacity: .6; cursor: wait; animation: none; transform: none; }
.tks-demo { margin: 10px 0 0; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px dashed var(--line-2, rgba(127, 127, 127, .45));
  background: transparent; color: var(--muted); font: 500 14px var(--font-m); cursor: pointer; }
.tks-demo:hover { color: var(--text); border-style: solid; }
.tks-msg { margin: 12px 0 0; color: var(--muted); font-size: 15px; max-width: 60ch; }
.tks-msg:empty { display: none; }
.tks-msg.ok { color: var(--ok); font-weight: 600; }
.tks-msg.warn { color: var(--accent); font-weight: 500; }
.tks button:focus-visible, .tks a:focus-visible, .tks-in:focus-visible, .tks summary:focus-visible { outline: 3px solid #3ef0ff; outline-offset: 3px; }
@keyframes tks-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 79, 163, .3), 0 0 12px rgba(255, 79, 163, .3); } 50% { box-shadow: 0 0 0 1px rgba(62, 240, 255, .4), 0 0 24px rgba(62, 240, 255, .4); } }

/* ---- studio */
.tks-studio { margin: 8px 0 10px; padding: clamp(10px, 2.4vw, 22px); border-radius: var(--radius, 16px); color: var(--st-ink); scroll-margin-top: 80px;
  background: radial-gradient(900px 380px at 50% -10%, #2a1260, transparent 70%), radial-gradient(700px 300px at 100% 100%, #0c2a4a, transparent 70%), var(--st-bg);
  border: 1px solid var(--st-line); box-shadow: 0 0 40px rgba(255, 79, 163, .08), inset 0 0 0 1px rgba(255, 255, 255, .03); }
.tks-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 12px; }
.tks-logo { margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tks-logo-t { font: 900 clamp(22px, 4.4vw, 34px)/1 var(--font-b); letter-spacing: .04em; color: #fff;
  text-shadow: 0 0 6px #ff4fa3, 0 0 18px rgba(255, 79, 163, .7), 0 0 34px rgba(62, 240, 255, .35); }
.tks-air { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 6px; font: 800 12px/1 var(--mono); letter-spacing: .12em;
  color: #c9c2e6; border: 1px solid #4a4170; background: #151030; }
.tks-air::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #6b6390; }
.tks-air.live { color: #fff; border-color: #ff4060; background: #8a0f28; box-shadow: 0 0 16px rgba(255, 50, 80, .55); }
.tks-air.live::before { background: #fff; animation: tks-blink 1.1s infinite; }
.tks-air.soon { color: #1b1200; border-color: #ffb547; background: #ffb547; }
.tks-air.soon::before { background: #1b1200; animation: tks-blink .6s infinite; }
.tks-chip { margin: 0; font: 600 14px var(--mono); color: var(--cy); overflow-wrap: anywhere; }
.tks-chip:empty { display: none; }
@keyframes tks-blink { 50% { opacity: .2; } }

.tks-stage { position: relative; overflow: hidden; border-radius: 12px; isolation: isolate; padding-top: clamp(26px, 6vw, 70px);
  background: linear-gradient(#0c0826 0%, #1a0f3c 58%, #241048 75%, #0b0820 76%, #120b2e 100%); box-shadow: inset 0 0 0 1px rgba(160, 120, 255, .2); }
.tks-sky { position: absolute; left: 0; right: 0; bottom: 24%; width: 100%; height: 55%; opacity: .9; z-index: 0; }
.tks-win rect { animation: tks-win 7s infinite; }
.tks-win rect:nth-child(3n) { animation-delay: -2s; } .tks-win rect:nth-child(4n) { animation-delay: -4.5s; } .tks-win rect:nth-child(5n) { animation-duration: 11s; }
@keyframes tks-win { 0%, 70%, 100% { opacity: .85; } 78% { opacity: .15; } }
.tks-beams { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tks-beams i { position: absolute; top: -10%; width: 22%; height: 110%; transform-origin: 50% 0; mix-blend-mode: screen; opacity: .5;
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); animation: tks-sway 7s ease-in-out infinite alternate; }
.tks-beams i:nth-child(1) { left: -1%; background: linear-gradient(rgba(57, 245, 176, .55), transparent 92%); animation-delay: -1s; }
.tks-beams i:nth-child(2) { left: 19%; background: linear-gradient(rgba(255, 181, 71, .55), transparent 92%); animation-delay: -3s; }
.tks-beams i:nth-child(3) { left: 39%; background: linear-gradient(rgba(255, 79, 163, .55), transparent 92%); animation-delay: -5s; }
.tks-beams i:nth-child(4) { left: 59%; background: linear-gradient(rgba(180, 156, 255, .55), transparent 92%); animation-delay: -2s; }
.tks-beams i:nth-child(5) { left: 79%; background: linear-gradient(rgba(255, 107, 74, .55), transparent 92%); animation-delay: -4s; }
@keyframes tks-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.tks-studio.idle .tks-beams i { opacity: .28; }

.tks-cast { position: relative; list-style: none; margin: 0; padding: 0 1.5%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; }
.tks-g { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.tks-spot { position: absolute; left: 50%; bottom: 4%; width: 120%; height: 30%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent); opacity: .25; transition: opacity .4s; }
.tka { position: relative; transition: filter .4s; display: block; width: min(100%, 150px); height: auto; margin-bottom: -18%; overflow: visible; }
.tka-body { transform-box: view-box; transform-origin: 50% 100%; animation: tks-breathe 4.6s ease-in-out infinite; }
.tks-g:nth-child(2) .tka-body { animation-delay: -1s; } .tks-g:nth-child(3) .tka-body { animation-delay: -2.3s; }
.tks-g:nth-child(4) .tka-body { animation-delay: -3.1s; } .tks-g:nth-child(5) .tka-body { animation-delay: -.6s; }
.tka-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: tks-eyes 5.5s infinite; }
.tks-g:nth-child(2n) .tka-eyes { animation-delay: -2.2s; } .tks-g:nth-child(3n) .tka-eyes { animation-delay: -3.7s; }
.tka-mouth { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.tka-hand { transform-box: view-box; transform-origin: 99px 112px; animation: tks-tick 4s steps(8) infinite; }
.tka-glow { animation: tks-lens 3s ease-in-out infinite; }
@keyframes tks-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.2px) scale(1.006); } }
@keyframes tks-eyes { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes tks-tick { to { transform: rotate(360deg); } }
@keyframes tks-lens { 50% { opacity: .55; } }

/* talking: mouth moves, body bobs, sound bars, spotlight up; the others dim a little */
/* (filter on the svg only: a filter on the li would make a stacking context and hide its name plate behind the desk) */
.tks-studio.on-air .tks-g .tka { filter: brightness(.7) saturate(.8); }
.tks-studio.on-air .tks-g.talk .tka { filter: none; }
.tks-g.talk .tks-spot { opacity: .7; }
.tks-g.talk .tka-body { animation: tks-bob .5s ease-in-out infinite alternate; }
.tks-g.talk .tka-mouth { opacity: 1; animation: tks-talk .16s ease-in-out infinite alternate; }
.tks-g.talk .tka-smile { opacity: 0; }
@keyframes tks-bob { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-3px) rotate(1deg); } }
@keyframes tks-talk { from { transform: scaleY(.25); } to { transform: scaleY(1.15); } }
.tks-bars { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; align-items: flex-end; height: 18px; opacity: 0; transition: opacity .25s; }
.tks-bars i { display: block; width: 4px; height: 100%; border-radius: 2px; background: var(--c); box-shadow: 0 0 8px var(--c); transform-origin: 50% 100%; animation: tks-eq .5s ease-in-out infinite alternate; }
.tks-bars i:nth-child(2) { animation-delay: -.2s; } .tks-bars i:nth-child(3) { animation-delay: -.35s; } .tks-bars i:nth-child(4) { animation-delay: -.1s; }
.tks-g.talk .tks-bars { opacity: 1; }
@keyframes tks-eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
/* waiting for the workflow: the guests read (heads tilt) */
.tks-studio.loading .tka-body { animation: tks-read 2.4s ease-in-out infinite alternate; }
.tks-studio.loading .tks-g:nth-child(odd) .tka-body { animation-delay: -1.2s; }
@keyframes tks-read { from { transform: rotate(-3deg); } to { transform: rotate(3deg) translateY(-1px); } }

.tks-plate { position: relative; z-index: 3; margin: 0 0 8px; max-width: 100%; padding: 4px 8px; border-radius: 6px; text-align: center; line-height: 1.15;
  background: rgba(8, 6, 22, .9); border: 1px solid var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 45%, transparent); }
.tks-plate b { display: block; font: 700 clamp(10px, 1.6vw, 14px) var(--font-b); color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tks-plate span { display: block; font: 500 11px var(--mono); color: var(--st-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tks-desk { position: relative; z-index: 2; height: clamp(34px, 6vw, 58px); margin-top: -2px;
  background: linear-gradient(#1d1346, #0d0924); border-top: 2px solid #3ef0ff; box-shadow: 0 -2px 18px rgba(62, 240, 255, .45), inset 0 3px 0 rgba(255, 79, 163, .5); }
.tks-desk::after { content: ""; position: absolute; left: 6%; right: 6%; top: 40%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 79, 163, .6), transparent); }
.tks-cast .tks-plate { margin-bottom: calc(-1 * clamp(26px, 4.6vw, 44px)); }

/* ---- split-flap scoreboard */
.tks-board { list-style: none; margin: 12px 0 0; padding: 10px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
  border-radius: 10px; background: #0a0818; border: 1px solid #2a2350; box-shadow: inset 0 2px 12px rgba(0, 0, 0, .6); }
.tks-board li { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.tks-flap { display: flex; gap: 3px; font: 800 clamp(26px, 6vw, 46px)/1 var(--mono); perspective: 300px; }
.tks-bn { font: 600 12px var(--mono); color: var(--c); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sf { position: relative; display: block; width: .78em; height: 1.18em; border-radius: 5px; color: #fff8e6; box-shadow: 0 2px 0 #000, 0 0 0 1px #2a2640; }
.sf > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: #22203a; backface-visibility: hidden; }
.sf > span > span { display: block; height: 200%; line-height: 1.18em; text-align: center; }
.sf-u, .sf-fu { top: 0; border-radius: 5px 5px 0 0; background: linear-gradient(#2b2848, #22203a) !important; }
.sf-l, .sf-fl { bottom: 0; border-radius: 0 0 5px 5px; }
.sf-l > span, .sf-fl > span { transform: translateY(-50%); }
.sf::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #05040c; z-index: 3; }
.sf-fu { transform-origin: 50% 100%; z-index: 2; }
.sf-fl { transform-origin: 50% 0; transform: rotateX(90deg); z-index: 2; }
.sf.go .sf-fu { animation: sf-top var(--ft, 70ms) ease-in forwards; }
.sf.go .sf-fl { animation: sf-bot var(--ft, 70ms) ease-out var(--ft, 70ms) forwards; }
@keyframes sf-top { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes sf-bot { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
.tks-board li.done .sf { color: var(--c); text-shadow: 0 0 10px var(--c); }

/* ---- chat + side */
.tks-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
@media (min-width: 860px) { .tks-main { grid-template-columns: minmax(0, 1fr) 260px; } }
.tks-chat { position: relative; min-width: 0; height: 440px; display: flex; flex-direction: column; border-radius: 12px; background: rgba(10, 8, 26, .85); border: 1px solid #2a2350; }
.tks-msgs { list-style: none; margin: 0; padding: 14px 12px 6px; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.tks-m { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; animation: tks-in .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.tks-m-av { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: #15112c; border: 2px solid var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 50%, transparent); }
.tks-m-b { min-width: 0; max-width: 100%; padding: 8px 12px 9px; border-radius: 4px 14px 14px 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, #171233), #141029);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.tks-m-n { display: block; margin: 0 0 2px; font: 700 12.5px var(--mono); color: var(--c); }
.tks-m-n em { font-style: normal; color: var(--st-soft); font-weight: 500; }
.tks-m-t { margin: 0; font: 400 15px/1.5 var(--font-b); color: var(--st-ink); overflow-wrap: anywhere; }
.tks-m.g-host .tks-m-b { border-radius: 14px; background: linear-gradient(135deg, rgba(62, 240, 255, .12), rgba(255, 79, 163, .12)); }
.tks-m.g-host .tks-m-t { font-weight: 600; }
.tks-m.reply { margin-left: 20px; }
@keyframes tks-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.tks-typing { margin: 0; padding: 4px 14px 12px; font: 500 13px var(--mono); color: var(--st-soft); display: flex; align-items: center; gap: 8px; }
.tks-dots { display: inline-flex; gap: 4px; }
.tks-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, #fff); animation: tks-dot 1s infinite; }
.tks-dots i:nth-child(2) { animation-delay: .15s; } .tks-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tks-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
.tks-skip { position: absolute; right: 10px; top: 8px; z-index: 2; min-height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid #4a4170;
  background: rgba(21, 16, 48, .92); color: var(--st-ink); font: 600 13px var(--mono); cursor: pointer; }
.tks-skip:hover { border-color: #3ef0ff; }
.tks-chat:has(.tks-skip:not([hidden])) .tks-msgs { padding-top: 52px; }

.tks-side { display: grid; gap: 14px; align-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 860px) { .tks-side { grid-template-columns: minmax(0, 1fr); } }
.tks-meter, .tks-final { position: relative; padding: 12px; border-radius: 12px; background: rgba(10, 8, 26, .85); border: 1px solid #2a2350; text-align: center; min-width: 0; }
.tks-side-h { margin: 0 0 6px; font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--st-soft); }
.tks-gauge { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
.tks-gauge .seg { fill: #241f45; transition: fill .2s, filter .2s; }
.tks-gauge .seg.on.s-r { fill: #ff4f6a; } .tks-gauge .seg.on.s-a { fill: #ffc24a; } .tks-gauge .seg.on.s-g { fill: #39f5b0; }
.tks-gauge .seg.on { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .45)); }
.tks-needle { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(var(--a, -90deg)); transition: transform 2.4s cubic-bezier(.3, 1.4, .4, 1); }
.tks-claps { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 12px; }
.tks-claps span { position: absolute; bottom: 10px; font-size: 20px; animation: tks-clap 1.8s ease-out forwards; }
@keyframes tks-clap { from { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-120px) scale(1.2) rotate(var(--r, 10deg)); opacity: 0; } }
.tks-total { margin: 0; display: flex; justify-content: center; align-items: baseline; gap: 4px; }
.tks-total b { font: 900 clamp(46px, 9vw, 68px)/1 var(--font-b); background: linear-gradient(135deg, #3ef0ff, #ff4fa3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tks-total span { font: 600 18px var(--mono); color: var(--st-soft); }
.tks-final.hit { animation: tks-hit .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tks-hit { from { transform: scale(.7); } to { transform: scale(1); } }

/* ---- tips: the useful part */
.tks-tips { margin-top: 18px; padding: 16px; border-radius: 12px; background: linear-gradient(135deg, rgba(57, 245, 176, .07), rgba(62, 240, 255, .05)); border: 1px solid rgba(57, 245, 176, .35); }
.tks-tips h3 { margin: 0 0 4px; font: 800 clamp(19px, 3vw, 24px)/1.2 var(--font-b); color: #fff; }
.tks-tips-n { margin: 0 0 12px; font: 400 14px var(--mono); color: var(--st-soft); }
.tks-tip-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .tks-tip-l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tks-tip-l li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 10px; background: #100c26; border-left: 4px solid var(--c); animation: tks-in .5s both; }
.tks-tip-e { flex: 0 0 auto; font-size: 22px; line-height: 1; }
.tks-tip-b { min-width: 0; }
.tks-tip-b b { display: block; font: 700 13px var(--mono); color: var(--c); }
.tks-tip-b p { margin: 2px 0 0; font: 500 15px/1.5 var(--font-b); color: var(--st-ink); overflow-wrap: anywhere; }
.tks-tip-s { margin-left: auto; flex: 0 0 auto; font: 800 15px var(--mono); color: var(--c); }

/* ---- facts */
.tks-facts { margin-top: 14px; border-radius: 10px; border: 1px solid #2a2350; background: rgba(10, 8, 26, .6); }
.tks-facts summary { padding: 12px 14px; cursor: pointer; font: 700 14px var(--mono); color: var(--st-ink); }
.tks-fl { margin: 0; padding: 0 14px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; }
@media (min-width: 640px) { .tks-fl { grid-template-columns: max-content minmax(0, 1fr); } }
.tks-fl dt { font: 600 13px var(--mono); color: var(--st-soft); padding-top: 6px; }
.tks-fl dd { margin: 0; font: 400 14.5px/1.45 var(--font-b); color: var(--st-ink); overflow-wrap: anywhere; padding-top: 4px; }
.tks-fbn { margin: 0; padding: 0 14px 12px; font: 400 13px var(--mono); color: var(--st-soft); }

/* ---- actions */
.tks-act { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tks-replay { min-height: 46px; padding: 0 18px; border-radius: 23px; border: 1px solid #ff4fa3; background: linear-gradient(135deg, #3a0d3a, #1b0f4a); color: #fff; font: 700 15px var(--font-b); cursor: pointer; }
.tks-replay:hover { filter: brightness(1.2); }
.tks-share { display: flex; flex-wrap: wrap; gap: 8px; }
.tks-share a, .tks-share button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid #3c3466; background: #120e2a;
  color: var(--st-ink); font: 600 14px var(--font-b); text-decoration: none; cursor: pointer; }
.tks-share a:hover, .tks-share button:hover { border-color: #3ef0ff; }
.tks-share .tks-del { border-color: rgba(255, 59, 92, .5); }
.tks-clip { position: fixed; left: -9999px; top: 0; }

/* ---- delete dialog */
.tks-dlg { width: min(560px, calc(100vw - 28px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; border: 1px solid rgba(255, 79, 163, .6);
  border-radius: 14px; background: #0d0a22; color: #f3eefe; box-shadow: 0 0 40px rgba(255, 79, 163, .25); }
.tks-dlg::backdrop { background: rgba(3, 2, 10, .74); backdrop-filter: blur(3px); }
.tks-dlg-in { padding: 24px clamp(16px, 4vw, 30px) 22px; }
.tks-dlg h2 { margin: 0 0 12px; font: 700 clamp(20px, 4vw, 26px)/1.2 var(--font-b, system-ui); color: #fff; }
.tks-dlg p { margin: 0 0 10px; font: 400 15px/1.6 var(--font-b, system-ui); color: #d6cff0; }
.tks-dlg .tks-dlg-only { margin: 0; color: #a99fcc; font-size: 13.5px; }
.tks-dlg-b { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.tks-dlg button { min-height: 46px; padding: 0 18px; border-radius: 8px; font: 700 15px var(--font-b, system-ui); cursor: pointer; }
.tks-dlg-no { color: #fff; background: rgba(57, 245, 176, .12); border: 1px solid #39f5b0; }
.tks-dlg-yes { color: #fff; background: linear-gradient(135deg, #6b0f22, #b3173a); border: 1px solid #ff3b5c; }
.tks-dlg button:disabled { opacity: .6; cursor: wait; }
.tks-dlg button:focus-visible { outline: 3px solid #3ef0ff; outline-offset: 3px; }
.tks-dlg [hidden] { display: none !important; }
/* deletion request form (visitors whose IP/browser is not the owner) */
.tks-req-f { display: block; margin-top: 16px; }
.tks-req-l { display: block; margin: 0 0 12px; font: 600 12.5px/1.4 var(--mono); letter-spacing: .04em; color: #a99fcc; text-transform: uppercase; }
.tks-req-in { display: block; box-sizing: border-box; width: 100%; margin-top: 6px; min-height: 46px; padding: 11px 12px; border-radius: 8px;
  border: 1px solid rgba(255, 79, 163, .4); background: rgba(8, 5, 24, .85); color: #f3eefe; font: 400 15px/1.5 var(--mono); text-transform: none; letter-spacing: 0; }
.tks-req-in:focus-visible { outline: 3px solid #3ef0ff; outline-offset: 2px; }
textarea.tks-req-in { min-height: 94px; resize: vertical; }
.tks-req-hpw { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tks-req-msg { margin: 12px 0 0 !important; color: #ffb040 !important; }

/* ---- wall of recent shows */
.tkw { margin-top: 36px; }
.tkw-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.tkw-list a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 14px; border-radius: 10px; text-decoration: none; color: #f3eefe;
  background: #0d0a22; border: 1px solid #2a2350; transition: border-color .2s, transform .2s, box-shadow .2s; }
.tkw-list a:hover, .tkw-list a.cur { border-color: #ff4fa3; box-shadow: 0 0 14px rgba(255, 79, 163, .25); transform: translateY(-2px); }
.tkw-t { flex: 0 0 52px; height: 52px; display: grid; place-items: center; border-radius: 10px; font: 900 20px var(--font-b); color: #0b0820; background: linear-gradient(135deg, #3ef0ff, #ff4fa3); }
.tkw-b { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tkw-d { font: 700 14px/1.3 var(--mono); overflow-wrap: anywhere; }
.tkw-s { display: flex; gap: 3px; align-items: flex-end; height: 18px; }
.tkw-s i { display: block; width: 10px; border-radius: 2px 2px 0 0; background: var(--c); }
.tkw-n { font: 12px var(--mono); color: #a99fcc; }

.tkh { margin-top: 40px; }
.tkh-steps { margin: 14px 0 18px; padding-left: 1.3em; }
.tkh-steps li { margin: 0 0 10px; }
.tkh-steps b { display: block; }
.tkh-steps span { color: var(--muted); }

@media (max-width: 560px) {
  .tks-go { flex: 1 1 100%; }
  .tks-plate { padding: 3px 4px; }
  .tks-plate span { display: none; }
  .tks-bn-t { display: none; }
  .tks-bn { font-size: 18px; }
  .tks-stage { padding-top: 48px; }
  .tks-board { padding: 8px 4px; gap: 4px; }
  .tks-chat { height: 380px; }
  .tks-m-t { font-size: 14.5px; }
  .tks-m.reply { margin-left: 8px; }
  .tks-bars { top: -12px; height: 12px; }
  .tks-bars i { width: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .tks *, .tks *::before, .tks *::after { animation: none !important; transition: none !important; }
  .tks-msgs { scroll-behavior: auto; }
}