@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Barlow:wght@400;600;700&display=swap');
:root{--border-width:1px;--layout-gap:16px;color-scheme:dark;font-family:Barlow,Arial,sans-serif;background:#08090a;color:#f1f2ef}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid white;outline-offset:-4px}.duo{display:grid;grid-template-columns:minmax(0,1fr) 310px minmax(0,1fr);gap:var(--layout-gap);padding:18px;align-items:start}.streamer{--accent:#b7ff3c;--tint:#1b2b0d;display:flex;flex-direction:column;min-width:0;border:var(--border-width) solid var(--accent)}.kitten{--accent:#c18aff;--tint:#2c173f}.banner{height:96px;flex-shrink:0;display:flex;align-items:center;padding:12px 22px;border-bottom:var(--border-width) solid var(--accent);background:repeating-linear-gradient(120deg,transparent 0 70px,color-mix(in srgb,var(--accent) 7%,transparent) 71px 72px,transparent 73px 100px),linear-gradient(105deg,#080b08,var(--tint));overflow:hidden}h1{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-size:clamp(28px,2.9vw,60px);font-weight:800;line-height:1;margin:0;letter-spacing:-1px;color:var(--accent);white-space:nowrap}h1 span{color:#f5f6ef}.kitten .banner{justify-content:flex-end;background:#100b15 url("assets/kitten-banner.png") center / cover no-repeat}.kitten .banner h1{text-shadow:0 2px 5px #000,0 0 18px #0009}.screen{position:relative;flex:none;aspect-ratio:1920/1080;width:100%;background:radial-gradient(ellipse at center,var(--tint),#060706 70%)}.player{position:absolute;inset:0}.player iframe{border:0;width:100%;height:100%}.small-screen{display:none}.chat-column{--accent:#b7ff3c;height:max(540px,calc(100svh - 36px));display:flex;flex-direction:column;gap:var(--layout-gap);min-width:0}.chat{flex:1;min-height:0;display:flex;flex-direction:column;min-width:0;border:var(--border-width) solid var(--accent);background:#18181b}.chat-switch{display:grid;grid-template-columns:1fr 1fr;min-height:52px;flex-shrink:0;border-bottom:var(--border-width) solid var(--accent)}.chat-switch button{border:0;border-bottom:var(--border-width) solid transparent;background:#101112;color:#97979f;font-size:10px;font-weight:700;letter-spacing:1px;padding:12px 6px;cursor:pointer}.chat-switch button:hover{background:#232329;color:#fff}.chat-switch .shadow-tab[aria-pressed=true]{color:#b7ff3c;background:#1b2b0d}.chat-switch .kitten-tab[aria-pressed=true]{color:#c18aff;background:#2c173f}.chat iframe{border:0;width:100%;flex:1;min-height:0;height:100%}
@media(max-width:1200px){.duo{grid-template-columns:minmax(0,1fr) 300px}.shadow{grid-column:1;grid-row:1}.kitten{grid-column:1;grid-row:2}.chat-column{grid-column:2;grid-row:1 / 3}.banner{height:78px}h1{font-size:clamp(28px,4.6vw,48px)}}
@media(max-width:760px){.duo{grid-template-columns:minmax(0,1fr);gap:var(--layout-gap);padding:10px}.shadow{grid-column:1;grid-row:1}.kitten{grid-column:1;grid-row:2}.chat-column{grid-column:1;grid-row:3;height:max(540px,calc(100svh - 20px))}.banner{height:76px;padding:10px 16px}h1{font-size:clamp(28px,4.6vw,48px)}}
@media(max-width:420px){.player{display:none}.small-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.small-screen a{background:var(--accent);color:#080a08;padding:15px;font-weight:700;font-size:13px}}



.chat-column:has(.chat[data-channel=lgnkauzakitten]){--accent:#c18aff}


.discord-button{display:flex;align-items:center;justify-content:center;gap:12px;flex-shrink:0;min-height:50px;border:var(--border-width) solid var(--accent);background:#101112;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:1.6px}.discord-button:hover{background:#292633;color:#fff}



.offline-art{position:absolute;inset:0;z-index:2;display:block}.offline-art[hidden]{display:none}.offline-art img{display:block;width:100%;height:100%;object-fit:cover}.player.offline{visibility:hidden}
.shadow .banner{background:#080b08 url("assets/shadow-banner.png") center / cover no-repeat}.shadow .banner h1{text-shadow:0 2px 5px #000,0 0 18px #0009}
.chat-content{position:relative;flex:1;min-height:0;overflow:hidden}.chat-content iframe{position:absolute;inset:0;height:100%}.chat-content iframe[hidden],.chat-offline-art[hidden]{display:none}.chat-offline-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.visit-counter{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;min-height:60px;padding:12px 16px;border:var(--border-width) solid var(--accent);background:#101112;color:var(--accent)}.visit-counter span{font-size:11px;font-weight:700;letter-spacing:1.6px}.visit-counter strong{font-family:Barlow,Arial,sans-serif;font-size:26px;font-variant-numeric:tabular-nums}
.offline-art video{display:block;width:100%;height:100%;object-fit:cover}
.offline-label{position:absolute;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:center;width:clamp(88px,18%,180px);height:clamp(30px,12%,60px);background:#08090a;color:var(--accent);border-top:var(--border-width) solid var(--accent);border-left:var(--border-width) solid var(--accent);font-size:clamp(10px,1vw,16px);font-weight:800;letter-spacing:2px;line-height:1}
.streamer{border:0}.player-card{border:var(--border-width) solid var(--accent);min-width:0;overflow:hidden}.streamer-links{display:flex;flex-direction:column;gap:var(--layout-gap);margin-top:var(--layout-gap);min-width:0}.streamer-links img{display:block;width:100%;height:auto;border:var(--border-width) solid var(--accent)}.profile-button{display:flex;align-items:center;justify-content:center;min-height:50px;padding:12px 14px;border:var(--border-width) solid var(--accent);background:#101112;color:var(--accent);text-align:center;font-size:12px;font-weight:700;letter-spacing:1.2px;line-height:1.5}.profile-button:hover{background:var(--tint);color:#fff}
.profile-image{min-width:0}@media(min-width:1201px){.streamer{height:max(540px,calc(100svh - 36px))}.player-card{flex-shrink:0}.streamer-links{flex:1;min-height:0}.profile-image{flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-end}.profile-image img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}.profile-button{height:50px;flex-shrink:0;font-size:clamp(9px,.8vw,12px);letter-spacing:.8px;padding:8px}}
@media(min-width:1201px){.shadow .profile-image{justify-content:flex-end}.kitten .profile-image{justify-content:flex-start}.profile-button{width:var(--profile-image-width,100%);max-width:100%}.shadow .profile-button{align-self:flex-end}.kitten .profile-button{align-self:flex-start}}