/* BezzubickMCPlay — ported from Sources/BezzubickMCPlay/SiteStyles.swift.
   4 themes: dark / light / glass-dark / glass-light (Apple Liquid Glass).
   Glass ambience is pure CSS (no WASM needed). */
:root{
--md-sys-color-primary-dark:#BB86FC;--md-sys-color-on-primary-dark:#000;
--md-sys-color-primary-container-dark:#4A148C;--md-sys-color-on-primary-container-dark:#FFF;
--md-sys-color-secondary-dark:#03DAC6;--md-sys-color-on-secondary-dark:#000;
--md-sys-color-surface-dark:#000;--md-sys-color-on-surface-dark:#FFF;
--md-sys-color-background-dark:#000;--md-sys-color-on-background-dark:#FFF;
--md-sys-color-surface-container-low-dark:#1F1F1F;--md-sys-color-surface-container-dark:#2D2D2D;
--md-sys-color-outline-dark:#8C8C8C;--md-sys-color-error-dark:#CF6679;
--md-sys-color-primary-light:#6200EE;--md-sys-color-on-primary-light:#FFF;
--md-sys-color-primary-container-light:#BB86FC;--md-sys-color-on-primary-container-light:#000;
--md-sys-color-secondary-light:#03DAC6;--md-sys-color-on-secondary-light:#000;
--md-sys-color-surface-light:#FFF;--md-sys-color-on-surface-light:#000;
--md-sys-color-background-light:#FFF;--md-sys-color-on-background-light:#000;
--md-sys-color-surface-container-low-light:#F0F0F0;--md-sys-color-surface-container-light:#E0E0E0;
--md-sys-color-outline-light:#BDBDBD;--md-sys-color-error-light:#B00020;
--live-indicator-red:#F00;
}
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Roboto','Segoe UI',sans-serif;transition:background-color .3s ease,color .3s ease;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:20px;box-sizing:border-box;line-height:1.6;font-weight:400}
.m3-shadow-md{box-shadow:0 3px 5px rgba(0,0,0,.2),0 1px 18px rgba(0,0,0,.12),0 6px 10px rgba(0,0,0,.14)}
.m3-shadow-lg{box-shadow:0 6px 10px rgba(0,0,0,.2),0 3px 18px rgba(0,0,0,.12),0 9px 30px rgba(0,0,0,.14)}
/* ---- Material dark ---- */
body.dark-theme{background-color:var(--md-sys-color-background-dark);color:var(--md-sys-color-on-background-dark)}
body.dark-theme .card{background-color:var(--md-sys-color-surface-container-low-dark);color:var(--md-sys-color-on-surface-dark)}
body.dark-theme .modal-content,body.dark-theme .dev-page-content{background-color:var(--md-sys-color-surface-container-dark);color:var(--md-sys-color-on-surface-dark)}
body.dark-theme .control-button{background-color:var(--md-sys-color-surface-container-low-dark);color:var(--md-sys-color-on-surface-dark)}
body.dark-theme .control-button:hover{background-color:var(--md-sys-color-surface-container-dark)}
body.dark-theme .primary-button{background-color:var(--md-sys-color-primary-dark);color:var(--md-sys-color-on-primary-dark)}
body.dark-theme .primary-button:hover{background-color:var(--md-sys-color-primary-container-dark);color:var(--md-sys-color-on-primary-container-dark)}
body.dark-theme .support-button{background-color:var(--md-sys-color-primary-dark);color:var(--md-sys-color-on-primary-dark)}
body.dark-theme .support-button:hover{background-color:var(--md-sys-color-primary-container-dark);color:var(--md-sys-color-on-primary-container-dark)}
body.dark-theme .offline-warning{background-color:#FFB300;color:#212121}
body.dark-theme .mini-button.active{background-color:var(--md-sys-color-primary-dark);color:var(--md-sys-color-on-primary-dark);border-color:transparent}
/* ---- Material light ---- */
body.light-theme{background-color:var(--md-sys-color-background-light);color:var(--md-sys-color-on-background-light)}
body.light-theme .card{background-color:var(--md-sys-color-surface-container-low-light);color:var(--md-sys-color-on-surface-light)}
body.light-theme .modal-content,body.light-theme .dev-page-content{background-color:var(--md-sys-color-surface-container-light);color:var(--md-sys-color-on-surface-light)}
body.light-theme .control-button{background-color:var(--md-sys-color-surface-container-low-light);color:var(--md-sys-color-on-surface-light)}
body.light-theme .control-button:hover{background-color:var(--md-sys-color-surface-container-light)}
body.light-theme .primary-button{background-color:var(--md-sys-color-primary-light);color:var(--md-sys-color-on-primary-light)}
body.light-theme .primary-button:hover{background-color:var(--md-sys-color-primary-container-light);color:var(--md-sys-color-on-primary-container-light)}
body.light-theme .support-button{background-color:var(--md-sys-color-primary-light);color:var(--md-sys-color-on-primary-light)}
body.light-theme .support-button:hover{background-color:var(--md-sys-color-primary-container-light);color:var(--md-sys-color-on-primary-container-light)}
body.light-theme .mini-button.active{background-color:var(--md-sys-color-primary-light);color:var(--md-sys-color-on-primary-light);border-color:transparent}
/* ---- Apple Liquid Glass ambience on body: propagated to the canvas,
   painted once, no layers, no per-frame cost (a fixed ::before layer
   flickered and diluted the gradients) ---- */
body.glass-dark{background-color:#000;color:#FFF}
body.glass-light{background-color:#f5f0ff;color:#000;background-image:radial-gradient(75% 60% at 15% 8%,rgba(98,0,238,.14),transparent 70%),radial-gradient(60% 50% at 85% 18%,rgba(3,218,198,.16),transparent 70%),radial-gradient(70% 55% at 80% 92%,rgba(98,0,238,.12),transparent 70%),radial-gradient(55% 45% at 8% 88%,rgba(102,187,106,.14),transparent 70%);background-attachment:fixed}
/* NOTE: no background on html — body background propagates to the canvas
   and covers overscroll too, so the purple is never cut off. */
/* ---- Slow ambient drift: transform-only animation (compositor thread,
   zero repaints, cannot flicker). Static gradients stay on body. ---- */
body.glass-dark::before{display:none}
body.glass-light::before{content:"";position:fixed;inset:-18%;z-index:-1;pointer-events:none;background-repeat:no-repeat;will-change:transform;animation:ambient-drift 24s ease-in-out infinite alternate}
body.glass-dark::before{background-image:radial-gradient(45% 38% at 22% 16%,rgba(187,134,252,.30),transparent 70%),radial-gradient(38% 34% at 80% 24%,rgba(3,218,198,.20),transparent 70%)}
body.glass-light::before{background-image:radial-gradient(45% 38% at 22% 16%,rgba(98,0,238,.18),transparent 70%),radial-gradient(38% 34% at 80% 24%,rgba(3,218,198,.20),transparent 70%)}
@keyframes ambient-drift{from{transform:translate3d(-7%,-4%,0) scale(1)}to{transform:translate3d(7%,5%,0) scale(1.12)}}
/* Drift pauses while scrolling: static backdrop = nothing to flicker. */
body.is-scrolling.glass-light::before{animation-play-state:paused}
/* NOTE: tried dropping backdrop blur while scrolling — the style rebuild
   on every scroll start/stop hitched worse than the blur itself. Gone. */
/* Hover lift only for precise pointers: on touch it fires mid-scroll and flickers. */
@media (hover:hover) and (pointer:fine){.card{transform:translateZ(0)}}
@media (hover:none),(pointer:coarse){.card:hover,.card.is-hover{transform:none!important;box-shadow:none!important}}
body.glass-dark .card{background-color:rgba(255,255,255,.04);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06),0 8px 32px rgba(0,0,0,.5)}
body.glass-dark .card:hover{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.1),0 0 30px rgba(187,134,252,.12),0 8px 32px rgba(0,0,0,.6);transform:translateY(-3px)}
body.glass-dark .control-button{background-color:rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);color:#FFF;border-radius:16px}
body.glass-dark .control-button:hover{background-color:rgba(255,255,255,.1)}
body.glass-dark .primary-button{background:linear-gradient(135deg,rgba(187,134,252,.4),rgba(187,134,252,.2));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(187,134,252,.3);color:#FFF;border-radius:16px}
body.glass-dark .primary-button:hover{background:linear-gradient(135deg,rgba(187,134,252,.6),rgba(187,134,252,.3));border-color:rgba(187,134,252,.5);box-shadow:0 0 20px rgba(187,134,252,.2)}
body.glass-dark .support-button{background:linear-gradient(135deg,rgba(187,134,252,.4),rgba(187,134,252,.2));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(187,134,252,.3);color:#FFF;border-radius:16px}
body.glass-dark .support-button:hover{background:linear-gradient(135deg,rgba(187,134,252,.6),rgba(187,134,252,.3))}
body.glass-dark .modal-content,body.glass-dark .dev-page-content{background-color:rgba(255,255,255,.06);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.12);border-radius:28px;box-shadow:inset 0 1px 0 0 rgba(255,255,255,.1),0 16px 48px rgba(0,0,0,.5)}
body.glass-dark .mini-button{background-color:rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);color:#FFF}
body.glass-dark .mini-button.active{background-color:rgba(187,134,252,.3);border-color:rgba(187,134,252,.5);color:#FFF}
body.glass-dark .offline-warning{background-color:rgba(255,179,0,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#212121;border-radius:16px}
body.glass-dark .youtube-video-container{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 32px rgba(0,0,0,.4)}
body.glass-dark .stream-cal-grid .cell{background-color:rgba(255,255,255,.04);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1)}
body.glass-dark .stream-cal-grid .cell.today{outline:2px solid rgba(187,134,252,.5);box-shadow:0 0 12px rgba(187,134,252,.15)}
body.glass-dark .hero .avatar{border:4px solid rgba(187,134,252,.5);box-shadow:0 0 20px rgba(187,134,252,.2)}
body.glass-dark .tl-buttons .tl-btn{background-color:rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);color:#FFF}
body.glass-dark .legend{color:rgba(255,255,255,.8)}
body.glass-dark .md code{background-color:rgba(255,255,255,.06)}
body.glass-dark .md pre{background-color:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
body.glass-dark .md blockquote{border-left:4px solid rgba(187,134,252,.5);background-color:rgba(255,255,255,.03)}
body.glass-dark .video-carousel::-webkit-scrollbar-track{background-color:rgba(255,255,255,.05)}
body.glass-dark .video-carousel::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.15)}
body.glass-dark .video-carousel::-webkit-scrollbar-thumb:hover{background-color:rgba(187,134,252,.4)}
body.glass-light .card{background-color:rgba(255,255,255,.65);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.5);border-radius:20px;box-shadow:inset 0 1px 0 0 rgba(255,255,255,.6),0 8px 32px rgba(0,0,0,.06)}
body.glass-light .card:hover{background-color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.8);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.8),0 0 30px rgba(98,0,238,.06),0 8px 32px rgba(0,0,0,.08);transform:translateY(-3px)}
body.glass-light .control-button{background-color:rgba(255,255,255,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.4);color:#000;border-radius:16px}
body.glass-light .control-button:hover{background-color:rgba(255,255,255,.8)}
body.glass-light .primary-button{background:linear-gradient(135deg,rgba(98,0,238,.8),rgba(98,0,238,.6));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(98,0,238,.3);color:#FFF;border-radius:16px}
body.glass-light .primary-button:hover{background:linear-gradient(135deg,rgba(98,0,238,.9),rgba(98,0,238,.7));box-shadow:0 0 20px rgba(98,0,238,.15)}
body.glass-light .support-button{background:linear-gradient(135deg,rgba(98,0,238,.8),rgba(98,0,238,.6));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(98,0,238,.3);color:#FFF;border-radius:16px}
body.glass-light .support-button:hover{background:linear-gradient(135deg,rgba(98,0,238,.9),rgba(98,0,238,.7))}
body.glass-light .modal-content,body.glass-light .dev-page-content{background-color:rgba(255,255,255,.75);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.5);border-radius:28px;box-shadow:inset 0 1px 0 0 rgba(255,255,255,.6),0 16px 48px rgba(0,0,0,.1)}
body.glass-light .mini-button{background-color:rgba(255,255,255,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.08);color:#000}
body.glass-light .mini-button.active{background-color:rgba(98,0,238,.8);border-color:transparent;color:#FFF}
body.glass-light .youtube-video-container{box-shadow:0 0 0 1px rgba(0,0,0,.04),0 8px 32px rgba(0,0,0,.08)}
body.glass-light .stream-cal-grid .cell{background-color:rgba(255,255,255,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.5)}
body.glass-light .stream-cal-grid .cell.today{outline:2px solid rgba(98,0,238,.4);box-shadow:0 0 12px rgba(98,0,238,.08)}
body.glass-light .hero .avatar{border:4px solid rgba(98,0,238,.3);box-shadow:0 0 20px rgba(98,0,238,.1)}
body.glass-light .tl-buttons .tl-btn{background-color:rgba(255,255,255,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.08);color:#000}
body.glass-light .md code{background-color:rgba(0,0,0,.04)}
body.glass-light .md pre{background-color:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06)}
body.glass-light .md blockquote{border-left:4px solid rgba(98,0,238,.4);background-color:rgba(98,0,238,.03)}
body.glass-light .video-carousel::-webkit-scrollbar-track{background-color:rgba(0,0,0,.05)}
body.glass-light .video-carousel::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15)}
body.glass-light .video-carousel::-webkit-scrollbar-thumb:hover{background-color:rgba(98,0,238,.3)}
body.glass-light .hero .followers{color:rgba(0,0,0,.64)!important}
/* ---- Cards / hero ---- */
.card,.card *{user-select:text!important;-webkit-user-select:text!important}
#links-section .card,#links-section .card *{user-select:none!important;-webkit-user-select:none!important}
.card{border-radius:16px;transition:transform .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:rgba(187,134,252,.25)}
.card:hover{transform:translateY(-3px);box-shadow:var(--md-sys-color-primary-dark) 0 4px 12px;will-change:transform}
.card:hover{transform:translateY(-3px);box-shadow:var(--md-sys-color-primary-dark) 0 4px 12px}
body.light-theme .card:hover{box-shadow:var(--md-sys-color-primary-light) 0 4px 12px}
.card.is-hover{transform:translateY(-3px);box-shadow:var(--md-sys-color-primary-dark) 0 4px 12px!important}
body.light-theme .card.is-hover{box-shadow:var(--md-sys-color-primary-light) 0 4px 12px!important}
.card:focus-visible{outline:none;transform:translateY(-3px);box-shadow:var(--md-sys-color-primary-dark) 0 4px 12px}
body.light-theme .card:focus-visible{box-shadow:var(--md-sys-color-primary-light) 0 4px 12px}
.hero{text-align:center}
.hero .avatar{width:112px;height:112px;border-radius:9999px;object-fit:cover;border:4px solid var(--md-sys-color-primary-dark);display:block;margin:0 auto 16px}
.hero h1{font-size:2.25rem;margin:0 0 6px}
.hero p{margin:0 0 8px;opacity:.9}
.hero .followers{color:rgba(255,255,255,.72)!important}
body.light-theme .hero .followers{color:rgba(0,0,0,.64)!important}
.hero-cta{margin-top:12px}
.hero .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
/* ---- Markdown ---- */
.md h2{font-size:1.6rem;font-weight:700;margin:1rem 0 .5rem}
.md h3{font-size:1.25rem;font-weight:700;margin:1rem 0 .5rem}
.md p{margin:.5rem 0;line-height:1.7}
.md ul{margin:.5rem 0 .75rem 1.15rem;list-style:disc}
.md li{margin:.25rem 0}
.md em{font-style:italic}
.md strong{font-weight:700}
.md blockquote{margin:.75rem 0;padding:.5rem .75rem;border-left:4px solid var(--md-sys-color-primary-dark);opacity:.95}
.md code{background-color:rgba(255,255,255,.08);padding:.1rem .3rem;border-radius:6px}
.md pre{background-color:rgba(255,255,255,.08);padding:.75rem;border-radius:12px;overflow:auto}
body.light-theme .md pre{background-color:rgba(0,0,0,.06)}
.md pre code{background-color:transparent;padding:0}
/* ---- Timeline ---- */
.timeline-controls{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:16px 0}
.tl-buttons{display:flex;gap:8px}
.tl-buttons .tl-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px}
.tl-buttons .tl-btn .material-symbols-outlined{line-height:1}
#timeline{display:flex;flex-direction:column;gap:16px}
#timeline details.card{padding:14px 18px;border-radius:16px}
#timeline details.card summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}
#timeline details.card summary::-webkit-details-marker{display:none}
#timeline details.card summary .material-symbols-outlined{transition:transform .2s ease}
#timeline details[open] summary .material-symbols-outlined{transform:rotate(180deg)}
#timeline .md{padding-top:8px}
/* ---- Home grid ---- */
.home-grid{display:grid;gap:24px}
.home-grid>*{min-width:0}
#links-cta{grid-area:links}
#live{grid-area:cal;position:relative}
#calendar{grid-area:cal2;background-color:transparent;box-shadow:none}
#skin{grid-area:skin}
.home-grid.no-live{grid-template-columns:1fr;grid-template-areas:"links" "cal2" "skin"}
.home-grid.has-live{grid-template-columns:1fr;grid-template-areas:"links" "cal" "cal2" "skin"}
/* ---- Player / calendar ---- */
.youtube-video-container{position:relative;width:100%;padding-top:56.25%;border-radius:16px;overflow:hidden;background:#000}
.youtube-video-container iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0}
.stream-cal-head,.stream-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.stream-cal-head div{text-align:center;font-weight:600;opacity:.8}
.stream-cal-grid .cell{text-align:center;padding:8px 6px;border-radius:10px;border:1px solid var(--md-sys-color-outline-dark);min-height:46px;display:flex;flex-direction:column;justify-content:center;gap:3px}
body.light-theme .stream-cal-grid .cell{border-color:var(--md-sys-color-outline-light)}
.stream-cal-grid .cell a{color:var(--md-sys-color-primary-dark);text-decoration:underline;font-size:.9rem}
.stream-cal-grid .cell.today{outline:2px solid var(--md-sys-color-primary-dark)}
body.light-theme .stream-cal-grid .cell.today{outline:2px solid var(--md-sys-color-primary-light)}
.stream-cal-grid .cell.fri{background-color:rgba(187,134,252,.08)}
.stream-cal-grid .cell.passed.no-stream{opacity:.5;text-decoration:line-through}
.legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px;font-size:.95rem}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot.yt{background-color:#FF4444}
.dot.tw{background-color:#9146FF}
.dot.both{background:linear-gradient(90deg,#FF4444 0 50%,#9146FF 50% 100%)}
.dot.planned{background-color:#2ECC71}
.legend .muted{opacity:.75}
/* ---- Skin ---- */
#skin{position:relative}
.skin-viewer{width:100%;aspect-ratio:1/1;height:auto;background-color:transparent;border-radius:16px;display:grid;place-items:center;position:relative;z-index:1}
#skin-canvas{width:100%;height:100%;display:block}
.skin-controls{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;max-width:100%;margin:16px 0 12px;position:relative;z-index:2}
.mini-button{display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:44px;padding:0 12px;border-radius:9999px;border:1px solid rgba(255,255,255,.1);background-color:#2d2d2d;color:#fff;cursor:pointer;touch-action:manipulation;pointer-events:auto}
.mini-button .material-symbols-outlined{font-size:18px;line-height:1;color:currentColor}
.mini-button.active{background-color:var(--md-sys-color-primary-dark);color:#000;border-color:transparent}
body.light-theme .mini-button{background-color:var(--md-sys-color-surface-container-low-light);color:var(--md-sys-color-on-surface-light);border-color:rgba(0,0,0,.10)}
body.light-theme .mini-button.active{background-color:var(--md-sys-color-primary-light);color:var(--md-sys-color-on-primary-light);border-color:transparent}
.mini-button .mini-icon.material-symbols-outlined{font-size:18px;line-height:1}
/* ---- Video carousel ---- */
.video-carousel::-webkit-scrollbar{height:8px}
.video-carousel::-webkit-scrollbar-track{background-color:rgba(255,255,255,.1);border-radius:10px}
body.light-theme .video-carousel::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1)}
.video-carousel::-webkit-scrollbar-thumb{background-color:var(--md-sys-color-outline-dark);border-radius:10px}
body.light-theme .video-carousel::-webkit-scrollbar-thumb{background-color:var(--md-sys-color-outline-light)}
.video-carousel::-webkit-scrollbar-thumb:hover{background-color:var(--md-sys-color-primary-dark)}
body.light-theme .video-carousel::-webkit-scrollbar-thumb:hover{background-color:var(--md-sys-color-primary-light)}
/* ---- Buttons / icons ---- */
.primary-button,.support-button,#twitch-link,#back-to-main-button{display:inline-flex;align-items:center;gap:.75rem}
.primary-button .material-symbols-outlined,.support-button .material-symbols-outlined,#twitch-link .material-symbols-outlined,#back-to-main-button .material-symbols-outlined{margin-right:0!important}
.card .flex.items-center.select-none{gap:.75rem}
.icon-large{font-size:28px;line-height:1;margin:0}
.custom-icon-image{width:28px;height:28px;margin:0;object-fit:contain;flex-shrink:0}
.live-indicator{background-color:var(--live-indicator-red)}
/* ---- Modal ---- */
.modal{display:none;position:fixed;z-index:100;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);align-items:center;justify-content:center;backdrop-filter:blur(5px);animation:fadeInBackground .3s ease-out}
.modal.active{display:flex}
.modal-content,.dev-page-content{padding:24px;border-radius:28px;max-width:90%;animation:fadeIn .3s ease-out;text-align:center;box-shadow:var(--md-sys-color-outline-dark) 0 8px 16px}
body.light-theme .modal-content,body.light-theme .dev-page-content{box-shadow:var(--md-sys-color-outline-light) 0 8px 16px}
@keyframes fadeInBackground{from{background-color:rgba(0,0,0,0);backdrop-filter:blur(0)}to{background-color:rgba(0,0,0,.7);backdrop-filter:blur(5px)}}
@keyframes fadeIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
/* ---- Swipe ---- */
.card.swiping-right{transform:translateX(60px) scale(.98);box-shadow:0 0 20px var(--md-sys-color-primary-dark);background:linear-gradient(to right,var(--md-sys-color-primary-dark) 0%,transparent 100%)}
body.light-theme .card.swiping-right{box-shadow:0 0 20px var(--md-sys-color-primary-light);background:linear-gradient(to right,var(--md-sys-color-primary-light) 0%,transparent 100%)}
.card.swiping-left{transform:translateX(-60px) scale(.98);box-shadow:0 0 20px var(--live-indicator-red);background:linear-gradient(to left,var(--live-indicator-red) 0%,transparent 100%)}
/* ---- Links grid ---- */
.content-container.grid-layout{display:grid;gap:24px}
#live-stream-section{grid-area:live}
.main-links-block{grid-area:links}
#minecraft-block{grid-area:skin;display:flex;flex-direction:column;align-items:center;text-align:center}
.content-container.grid-layout.grid-has-live{grid-template-columns:1fr;grid-template-areas:"live" "links" "skin"}
.content-container.grid-layout.grid-no-live{grid-template-columns:1fr;grid-template-areas:"links" "skin"}
#skin-viewer-container{display:grid;place-items:center;margin-left:auto;margin-right:auto;width:100%;height:20rem;box-shadow:none;background-color:transparent}
#skin-viewer-container>canvas{display:block;margin:0 auto}
body.light-theme #skin-viewer-container,body.light-theme #skin-viewer-container img{box-shadow:none;background-color:transparent}
/* ---- Media queries (from Swift) ---- */
@media (min-width:768px){
#timeline{max-width:980px;margin:8px auto 0}
.home-grid.no-live{grid-template-columns:minmax(320px,420px) 1fr;grid-template-areas:"links cal2" "skin cal2"}
.home-grid.has-live{grid-template-columns:minmax(320px,420px) 1fr;grid-template-areas:"links cal" "skin cal2"}
.content-container.grid-layout.grid-has-live{grid-template-columns:1fr 350px;grid-template-areas:"links live" "links skin"}
.content-container.grid-layout.grid-no-live{grid-template-columns:1fr 350px;grid-template-areas:"links skin"}
}
@media (max-width:767px){
#page-wrap{padding-left:16px;padding-right:16px}
#page-wrap>.hero,#page-wrap>.about-card,#page-wrap>.home-grid{margin-left:0!important;margin-right:0!important;width:100%!important}
#timeline{max-width:none;margin-left:0;margin-right:0}
#skin-viewer-container{width:clamp(240px,80vw,320px);height:clamp(240px,80vw,320px)}
}
@media (max-width:452px){#links-cta .primary-button{width:100%;justify-content:center}#links-cta .primary-button span{white-space:normal}}
@media (max-width:640px){.tl-buttons .tl-btn{padding:8px;min-width:44px;justify-content:center}.tl-buttons .btn-text{display:none}}
/* ---- Apple-style entrance: blocks fade+rise on load and on scroll into
   view. .reveal is added by JS only, so no-JS still shows everything. ---- */
.reveal{opacity:0;transform:translateY(24px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);transition-delay:var(--reveal-delay,0ms)}
/* NOTE: no content-visibility here — it made elements flicker on scroll. */
/* NOTE: no translateZ(0) on page wrappers — a giant composited layer flickers. */
@media (hover:none){.card:hover{transform:none}}
@media (prefers-reduced-motion:reduce){#timeline details.card summary .material-symbols-outlined{transition:none}body.glass-light::before{animation:none}.reveal{opacity:1;transform:none}}
/* ---- Utilities (from Swift utilityCSS + missing classes the markup uses) ---- */
*,::before,::after{box-sizing:border-box}
h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video,canvas,iframe{display:block;max-width:100%}
button{margin:0;padding:0;background:transparent;border:0;font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
.md a{text-decoration:underline}
.md ul{list-style:disc;padding-left:1.5rem}
.hidden{display:none!important}
.block{display:block}
.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}
.top-0{top:0}.left-0{left:0}.top-3{top:.75rem}.left-3{left:.75rem}.z-50{z-index:50}
.flex{display:flex}.inline-flex{display:inline-flex}
.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.flex-shrink-0{flex-shrink:0}
.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}
.object-cover{object-fit:cover}.object-contain{object-fit:contain}
.scroll-smooth{scroll-behavior:smooth}
.cursor-pointer{cursor:pointer}.select-none{user-select:none;-webkit-user-select:none}
.mx-auto{margin-left:auto;margin-right:auto}
.mr-2{margin-right:.5rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}
.pb-4{padding-bottom:1rem}
.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-8{padding-top:2rem;padding-bottom:2rem}
.space-x-4>*+*{margin-left:1rem}.space-y-4>*+*{margin-top:1rem}
.h-28{height:7rem}.h-36{height:9rem}.h-full{height:100%}
.w-28{width:7rem}.w-64{width:16rem}.w-full{width:100%}
.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}
.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}
.font-medium{font-weight:500}.font-bold{font-weight:700}
.leading-tight{line-height:1.25}
.text-center{text-align:center}.text-left{text-align:left}
.text-white{color:#fff}.text-gray-400{color:#9ca3af}.text-purple-400{color:#c084fc}
.bg-gray-900{background-color:#111827}
.border-4{border-width:4px;border-style:solid}.border-purple-500{border-color:#a855f7}
.rounded-full{border-radius:9999px}.rounded-2xl{border-radius:1rem}.rounded-lg{border-radius:.5rem}.rounded-b-lg{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
@media (min-width:640px){.sm\:p-6{padding:1.5rem}}
@media (min-width:1024px){.lg\:p-8{padding:2rem}}
:where(button,a):focus-visible{outline:2px solid #bb86fc;outline-offset:2px}