@charset "UTF-8";
:root {
  color-scheme: dark;
  --bg: #100b20;
  --bg-soft: #15102a;
  --panel: rgba(25, 19, 47, .72);
  --panel-solid: #19132d;
  --panel-light: rgba(255,255,255,.045);
  --border: rgba(220, 206, 255, .12);
  --border-strong: rgba(220, 206, 255, .23);
  --text: #f8f5ff;
  --muted: #b5abc9;
  --dim: #847b9b;
  --accent: #bf9aff;
  --accent-2: #75ddf6;
  --accent-rgb: 191,154,255;
  --shadow: 0 22px 90px rgba(0,0,0,.23);
  --radius: 24px;
  --wrap: 1160px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
:root[data-theme="ocean"] { --bg:#071622; --bg-soft:#0a1d2b; --panel:rgba(12,35,50,.76); --panel-solid:#0e2636; --border:rgba(149,224,255,.13); --border-strong:rgba(149,224,255,.25); --accent:#73dcff; --accent-2:#83f2d6; --accent-rgb:115,220,255; }
:root[data-theme="rose"] { --bg:#1b0d1a; --bg-soft:#241022; --panel:rgba(43,20,39,.76); --panel-solid:#2b1629; --border:rgba(255,190,228,.13); --border-strong:rgba(255,190,228,.25); --accent:#ffafd8; --accent-2:#d6a7ff; --accent-rgb:255,175,216; }
:root[data-theme="mint"] { --bg:#081a17; --bg-soft:#0d241f; --panel:rgba(16,43,36,.76); --panel-solid:#102b24; --border:rgba(164,255,220,.13); --border-strong:rgba(164,255,220,.25); --accent:#9bf0ce; --accent-2:#a9d7ff; --accent-rgb:155,240,206; }
:root.light-mode { color-scheme:light; --bg:#f7f4ff; --bg-soft:#efebfa; --panel:rgba(255,255,255,.82); --panel-solid:#fff; --panel-light:rgba(47,34,70,.045); --border:rgba(60,43,83,.12); --border-strong:rgba(60,43,83,.22); --text:#241b32; --muted:#5e536e; --dim:#867b96; --shadow:0 22px 75px rgba(61,39,94,.12); }
:root[data-theme="ocean"].light-mode { --bg:#f1f9fc; --bg-soft:#e7f4f9; --accent:#1686ad; --accent-2:#159f87; --accent-rgb:22,134,173; --panel:rgba(255,255,255,.84); --panel-solid:#fff; --text:#172b37; --muted:#4f6875; --dim:#748b96; }
:root[data-theme="rose"].light-mode { --bg:#fff4fa; --bg-soft:#ffedf5; --accent:#c34c8b; --accent-2:#996bd3; --accent-rgb:195,76,139; --panel:rgba(255,255,255,.84); --panel-solid:#fff; --text:#382033; --muted:#74556c; --dim:#987c91; }
:root[data-theme="mint"].light-mode { --bg:#f2fbf6; --bg-soft:#e8f7ef; --accent:#278c69; --accent-2:#358ac2; --accent-rgb:39,140,105; --panel:rgba(255,255,255,.84); --panel-solid:#fff; --text:#19352a; --muted:#4f7061; --dim:#799184; }
* { box-sizing: border-box; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; }
html { min-width: 320px; background: var(--bg); scroll-padding-top: 88px; }
body { margin:0; min-height:100vh; color:var(--text); background:var(--bg); overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 4%, rgba(var(--accent-rgb),.16), transparent 43%),radial-gradient(ellipse at 7% 55%,rgba(var(--accent-rgb),.07),transparent 30%),radial-gradient(ellipse at 95% 74%,rgba(var(--accent-rgb),.075),transparent 33%),linear-gradient(180deg,var(--bg),var(--bg-soft) 53%,var(--bg)); }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
button:focus-visible, a:focus-visible { outline:2px solid var(--accent-2); outline-offset:4px; }
img, svg { display:block; max-width:100%; }
[hidden] { display:none !important; }
.wrap { width:min(var(--wrap), calc(100% - 48px)); margin-inline:auto; }
.skip-link { position:fixed; top:12px; left:12px; z-index:100; padding:10px 14px; border-radius:12px; color:var(--bg); background:var(--text); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.progress-track { position:fixed; top:0; left:0; width:100%; height:2px; z-index:90; background:transparent; }
.progress-track span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 14px var(--accent); }
.ambient { position:absolute; z-index:-1; border-radius:50%; filter:blur(70px); pointer-events:none; opacity:.17; }
.ambient-one { width:360px; height:360px; top:330px; left:-210px; background:var(--accent); }
.ambient-two { width:320px; height:320px; top:920px; right:-180px; background:var(--accent-2); opacity:.1; }
.starfield { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.62; background-image:radial-gradient(1px 1px at 5% 15%,rgba(var(--accent-rgb),.9) 55%,transparent 100%),radial-gradient(1.5px 1.5px at 11% 73%,rgba(255,255,255,.78) 55%,transparent 100%),radial-gradient(1.4px 1.4px at 18% 38%,rgba(var(--accent-rgb),.9) 55%,transparent 100%),radial-gradient(1px 1px at 25% 86%,rgba(255,255,255,.65) 55%,transparent 100%),radial-gradient(2px 2px at 32% 17%,rgba(var(--accent-rgb),.8) 55%,transparent 100%),radial-gradient(1px 1px at 39% 57%,rgba(255,255,255,.78) 55%,transparent 100%),radial-gradient(1.4px 1.4px at 47% 29%,rgba(var(--accent-rgb),.85) 55%,transparent 100%),radial-gradient(1px 1px at 53% 91%,rgba(255,255,255,.7) 55%,transparent 100%),radial-gradient(1.4px 1.4px at 61% 67%,rgba(var(--accent-rgb),.85) 55%,transparent 100%),radial-gradient(1px 1px at 68% 12%,rgba(255,255,255,.7) 55%,transparent 100%),radial-gradient(2px 2px at 75% 42%,rgba(var(--accent-rgb),.8) 55%,transparent 100%),radial-gradient(1px 1px at 83% 82%,rgba(255,255,255,.72) 55%,transparent 100%),radial-gradient(1.4px 1.4px at 91% 21%,rgba(var(--accent-rgb),.85) 55%,transparent 100%),radial-gradient(1px 1px at 96% 57%,rgba(255,255,255,.7) 55%,transparent 100%); animation:star-drift 105s linear infinite; }
.starfield::after { content:""; position:absolute; inset:-15%; opacity:.7; background-image:radial-gradient(1px 1px at 19% 29%,rgba(255,255,255,.8) 50%,transparent 100%),radial-gradient(1.5px 1.5px at 44% 81%,rgba(var(--accent-rgb),.85) 50%,transparent 100%),radial-gradient(1px 1px at 69% 26%,rgba(255,255,255,.8) 50%,transparent 100%),radial-gradient(1px 1px at 82% 61%,rgba(var(--accent-rgb),.9) 50%,transparent 100%); animation:star-twinkle 5.5s ease-in-out infinite alternate; }
.no-stars .starfield { display:none; }
.cursor-particles { position:fixed; inset:0; z-index:7; width:100%; height:100%; pointer-events:none; }
.no-cursor-particles .cursor-particles { display:none; }
.site-header, main, .site-footer { position:relative; z-index:6; }
.site-header { z-index:50; }
.light-mode .starfield { opacity:.28; }
.light-mode .art-label { color:var(--dim); }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }

/* Header */
.site-header { position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--bg) 84%, transparent); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.header-inner { min-height:82px; display:flex; align-items:center; gap:28px; }
.brand { display:inline-flex; align-items:center; flex:0 0 auto; gap:11px; min-width:170px; }
.brand-mark { display:grid; place-items:center; width:43px; height:43px; border:1px solid rgba(var(--accent-rgb),.36); border-radius:15px; color:var(--bg); background:linear-gradient(140deg,var(--accent),var(--accent-2)); box-shadow:0 7px 24px rgba(var(--accent-rgb),.2); font-size:20px; font-weight:900; letter-spacing:-.06em; }
.brand-word { display:flex; flex-direction:column; line-height:1.15; gap:4px; }
.brand-word strong { font-size:16px; letter-spacing:-.025em; }
.brand-word small { font-size:9px; font-weight:800; letter-spacing:.17em; color:var(--dim); }
.primary-nav { display:flex; align-items:center; justify-content:center; gap:7px; margin-left:auto; }
.primary-nav a { color:var(--muted); font-size:13px; font-weight:650; padding:10px 14px; border-radius:999px; transition:color .2s ease, background .2s ease; }
.primary-nav a:hover { color:var(--text); background:var(--panel-light); }
.icon-button { border:1px solid var(--border); background:var(--panel-light); width:42px; height:42px; border-radius:14px; display:grid; place-items:center; cursor:pointer; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.icon-button:hover { transform:translateY(-2px); border-color:var(--border-strong); background:rgba(var(--accent-rgb),.08); }
.icon-button svg { width:21px; height:21px; fill:none; stroke:var(--text); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.settings-toggle { flex:0 0 auto; }
.menu-toggle { display:none; }
.settings-panel { position:absolute; z-index:60; top:calc(100% + 10px); right:max(24px,calc((100vw - var(--wrap))/2)); width:min(340px,calc(100vw - 32px)); padding:18px; border:1px solid var(--border-strong); border-radius:22px; background:var(--panel-solid); box-shadow:var(--shadow); animation:panel-in .2s ease both; }
.settings-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.settings-heading span,.settings-heading strong { display:block; }
.settings-heading span { color:var(--accent); font-size:9px; font-weight:850; letter-spacing:.16em; }
.settings-heading strong { font-size:15px; }
.theme-choices { display:grid; gap:5px; }
.theme-choice { display:flex; align-items:center; width:100%; gap:10px; padding:9px 10px; border:1px solid transparent; border-radius:12px; background:transparent; cursor:pointer; text-align:left; color:var(--muted); font-size:12px; }
.theme-choice:hover,.theme-choice.is-active { border-color:var(--border); background:var(--panel-light); color:var(--text); }
.theme-choice b { margin-left:auto; opacity:0; color:var(--accent); }
.theme-choice.is-active b { opacity:1; }
.swatch { width:17px; height:17px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.12); }
.swatch-violet { background:linear-gradient(140deg,#bf9aff,#75ddf6); }.swatch-ocean { background:linear-gradient(140deg,#73dcff,#83f2d6); }.swatch-rose { background:linear-gradient(140deg,#ffafd8,#d6a7ff); }.swatch-mint { background:linear-gradient(140deg,#9bf0ce,#a9d7ff); }
.setting-divider { height:1px; margin:13px 0; background:var(--border); }
.setting-switch { width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 2px; border:0; background:transparent; text-align:left; cursor:pointer; }
.setting-switch strong,.setting-switch small { display:block; }
.setting-switch strong { font-size:12px; font-weight:750; }
.setting-switch small { margin-top:4px; color:var(--dim); font-size:10px; }
.switch-track { display:inline-flex; align-items:center; width:33px; height:19px; padding:3px; flex:0 0 auto; border-radius:999px; background:#403a50; transition:background .2s ease; }
.switch-track i { display:block; width:13px; height:13px; border-radius:50%; background:#fff; transition:transform .2s ease; }
.setting-switch[aria-pressed="true"] .switch-track { background:var(--accent); }.setting-switch[aria-pressed="true"] .switch-track i { transform:translateX(14px); }

/* Hero */
.hero { position:relative; display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:36px; min-height:660px; padding-top:64px; padding-bottom:100px; }
.hero-copy { position:relative; z-index:2; padding-bottom:10px; }
.eyebrow,.section-kicker { display:inline-flex; align-items:center; gap:9px; color:var(--accent); font-size:10px; font-weight:850; letter-spacing:.18em; }
.eyebrow { padding:9px 12px; border:1px solid var(--border); border-radius:999px; background:rgba(var(--accent-rgb),.06); }
.status-dot { width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:var(--accent-2); box-shadow:0 0 11px var(--accent-2); animation:dot-breathe 2.8s ease-in-out infinite; }
.hero h1 { max-width:640px; margin:26px 0 17px; font-size:clamp(48px,6.3vw,76px); font-weight:850; line-height:1.02; letter-spacing:-.07em; }
.gradient-text { color:var(--accent); background:linear-gradient(110deg,var(--accent) 8%,var(--accent-2) 94%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.title-period { color:var(--accent-2); }
.hero-lead { max-width:510px; margin:0; font-size:clamp(19px,2.4vw,25px); font-weight:650; line-height:1.55; letter-spacing:-.035em; }
.hero-description { max-width:465px; margin:15px 0 0; color:var(--muted); font-size:14px; line-height:1.85; }
.hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:29px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:48px; padding:0 19px; border:1px solid transparent; border-radius:14px; font-size:12px; font-weight:800; cursor:pointer; transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.button:hover { transform:translateY(-3px); }
.button span { font-size:17px; line-height:1; }
.button-primary { color:#171027; background:linear-gradient(120deg,var(--accent),var(--accent-2)); box-shadow:0 9px 25px rgba(var(--accent-rgb),.15); }
.button-primary:hover { box-shadow:0 12px 32px rgba(var(--accent-rgb),.27); }
.button-secondary { color:var(--text); background:var(--panel-light); border-color:var(--border); }
.button-secondary:hover { border-color:var(--border-strong); background:rgba(var(--accent-rgb),.07); }
.hero-meta { display:flex; align-items:center; gap:9px; margin-top:31px; color:var(--dim); font-size:10px; font-weight:650; letter-spacing:.04em; }
.meta-line { width:28px; height:1px; background:var(--accent); }.meta-separator { color:var(--accent); }
/* Animated Daphretcry profile deck + official music player */
.hero-art { position:relative; display:grid; place-items:center; min-height:455px; isolation:isolate; perspective:1400px; }
.hero-art::before { content:""; position:absolute; width:410px; height:410px; max-width:96%; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.19),rgba(var(--accent-rgb),.06) 45%,transparent 71%); filter:blur(15px); animation:corner-glow 8s ease-in-out infinite; }
.art-glow { position:absolute; width:78%; height:78%; border-radius:38%; background:linear-gradient(140deg,rgba(var(--accent-rgb),.11),rgba(var(--accent-rgb),.015)); filter:blur(1px); transform:rotate(-13deg); animation:corner-tilt 11s ease-in-out infinite; }
.art-main-card { position:relative; z-index:1; display:flex; flex-direction:column; align-items:stretch; gap:9px; width:min(360px,84%); height:auto; min-height:0; padding:0; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; transform-origin:center; animation:none; }
.art-main-card::before { display:none; }
.art-main-card::after { display:none; }
.art-card-top { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:16px; }
.art-window-dots { display:flex; gap:5px; flex:0 0 auto; }
.art-window-dots i { display:block; width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:.9; }
.art-window-dots i:nth-child(2) { opacity:.55; background:var(--accent-2); }.art-window-dots i:nth-child(3) { opacity:.28; }
.art-label { color:var(--dim); font-size:7px; font-weight:850; letter-spacing:.13em; white-space:nowrap; }
.corner-live { display:flex; align-items:center; gap:5px; color:var(--dim); font-size:7px; font-weight:850; letter-spacing:.08em; white-space:nowrap; }
.corner-live i { width:5px; height:5px; border-radius:50%; background:#65e6ab; box-shadow:0 0 9px rgba(101,230,171,.55); animation:dot-breathe 2.8s ease-in-out infinite; }
.platform-deck { position:relative; z-index:2; flex:0 0 auto; width:100%; height:326px; min-height:326px; margin-top:0; perspective:1050px; cursor:grab; touch-action:pan-y; outline:none; }
.platform-deck.is-dragging { cursor:grabbing; }
.platform-deck:focus-visible { border-radius:20px; outline:2px solid var(--accent-2); outline-offset:4px; }
.deck-card-stack { position:relative; width:100%; height:100%; min-height:100%; transform-style:preserve-3d; }
.deck-card { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:16px 16px 13px; overflow:hidden; border:1px solid var(--border-strong); border-radius:20px; background:linear-gradient(145deg,var(--panel-solid),var(--panel-solid)); box-shadow:0 12px 27px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.07); opacity:0; transform:translate3d(32px,10px,-95px) rotateY(-20deg) rotate(3deg) scale(.92); transition:transform .72s cubic-bezier(.2,.75,.2,1),opacity .46s ease,border-color .35s ease; pointer-events:none; }
.deck-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 92% 4%,rgba(var(--accent-rgb),.17),transparent 46%),linear-gradient(160deg,rgba(255,255,255,.018),transparent 54%); }
.deck-card.is-active { z-index:4; opacity:1; pointer-events:auto; transform:translate3d(0,0,0) rotateY(0) rotate(0) scale(1); }
.deck-card.is-next { z-index:3; opacity:.72; transform:translate3d(12px,6px,-28px) rotateY(-7deg) rotate(1.8deg) scale(.965); }
.deck-card.is-next-two { z-index:2; opacity:.3; transform:translate3d(19px,9px,-55px) rotateY(-13deg) rotate(2.6deg) scale(.935); }
.deck-card.is-prev { z-index:3; opacity:.25; transform:translate3d(-8px,4px,-38px) rotateY(12deg) rotate(-1deg) scale(.965); }
.deck-slide-top { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:7px; min-height:19px; }
.deck-profile-stage { position:relative; z-index:1; display:flex; align-items:center; justify-content:flex-start; flex:1 1 auto; min-height:0; padding:8px 2px 12px; }
.deck-profile-mark { position:absolute; right:8px; bottom:-18px; color:rgba(var(--accent-rgb),.15); font-size:145px; line-height:1; font-weight:950; letter-spacing:-.12em; text-indent:-.08em; pointer-events:none; }
.deck-profile-copy { position:relative; z-index:1; display:flex; flex-direction:column; gap:7px; max-width:82%; margin-top:0; }
.deck-profile-copy small,.deck-platform-service { color:var(--accent); font-size:7px; font-weight:850; letter-spacing:.15em; }
.deck-profile-copy strong { color:var(--text); font-size:27px; line-height:1.1; letter-spacing:-.055em; overflow-wrap:anywhere; }
.deck-profile-copy span { color:var(--muted); font-size:10px; line-height:1.6; }
.deck-card-orbit { position:absolute; right:10px; top:26px; z-index:1; color:var(--accent-2); font-size:25px; animation:spark 3.8s ease-in-out infinite; }
.deck-slide-bottom { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:25px; padding-top:10px; border-top:1px solid var(--border); color:var(--dim); font-size:7px; font-weight:850; letter-spacing:.1em; }
.deck-slide-bottom > span:last-child { white-space:nowrap; }
.deck-platform-body { position:relative; z-index:1; display:flex; align-items:center; gap:14px; flex:1 1 auto; margin-block:auto; min-width:0; padding:20px 1px; }
.deck-platform-icon { display:grid; place-items:center; flex:0 0 auto; width:62px; height:62px; border:1px solid rgba(var(--accent-rgb),.3); border-radius:19px; background:rgba(var(--accent-rgb),.1); color:var(--accent); font-size:28px; font-weight:900; box-shadow:inset 0 0 25px rgba(var(--accent-rgb),.045); }
.deck-platform-copy { display:flex; flex-direction:column; gap:7px; min-width:0; }
.deck-platform-copy strong { color:var(--text); font-size:clamp(18px,2vw,23px); line-height:1.15; letter-spacing:-.04em; overflow-wrap:anywhere; }
.deck-platform-copy > span { color:var(--muted); font-size:10px; line-height:1.55; overflow-wrap:anywhere; }
.deck-platform-watermark { position:absolute; right:-4px; bottom:26px; color:rgba(var(--accent-rgb),.075); font-size:155px; line-height:.8; font-weight:950; pointer-events:none; }
.deck-platform-link { position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:8px 12px; border:1px solid var(--border); border-radius:10px; color:var(--accent); background:rgba(var(--accent-rgb),.08); font-size:9px; font-weight:850; white-space:nowrap; transition:background .2s ease,transform .2s ease; }
.deck-platform-link:hover { background:rgba(var(--accent-rgb),.15); transform:translateY(-1px); }
.deck-controls { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:11px; min-height:22px; margin-top:-1px; }
.deck-arrow { display:grid; place-items:center; width:23px; height:23px; border:1px solid var(--border); border-radius:8px; color:var(--muted); background:var(--panel-light); cursor:pointer; transition:color .2s ease,border-color .2s ease,transform .2s ease; }
.deck-arrow:hover { color:var(--accent); border-color:var(--border-strong); transform:scale(1.05); }
.deck-dots { display:flex; align-items:center; gap:5px; }
.deck-dot { width:5px; height:5px; padding:0; border:0; border-radius:99px; background:var(--dim); opacity:.38; cursor:pointer; transition:width .25s ease,opacity .25s ease,background .25s ease; }
.deck-dot.is-active { width:19px; background:var(--accent); opacity:1; }
.deck-hint { position:relative; z-index:2; min-height:10px; margin:-5px 0 0; color:var(--dim); font-size:7px; line-height:1.4; text-align:center; }
.music-widget { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 11px; border:1px solid var(--border); border-radius:14px; background:rgba(var(--accent-rgb),.045); }
.music-title { display:flex; flex-direction:column; min-width:0; gap:3px; }
.music-title small { color:var(--accent); font-size:7px; font-weight:850; letter-spacing:.14em; }
.music-title strong { max-width:150px; overflow:hidden; color:var(--text); font-size:12px; font-weight:850; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.music-title > span { color:var(--dim); font-size:9px; }
.music-actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.art-wave { display:flex; align-items:center; justify-content:center; gap:2px; height:25px; width:49px; opacity:.78; }
.art-wave i { display:block; width:2px; height:3px; border-radius:4px; background:linear-gradient(180deg,var(--accent-2),var(--accent)); opacity:.85; animation:none; }
.art-wave i:nth-child(3n) { height:5px; }.art-wave i:nth-child(4n) { height:8px; }.art-wave i:nth-child(5n) { height:4px; }
.art-wave.is-playing i { animation:wave-pulse .55s ease-in-out infinite alternate; }
.art-wave.is-playing i:nth-child(3n) { height:13px; animation-delay:-.25s; }.art-wave.is-playing i:nth-child(4n) { height:17px; animation-delay:-.4s; }.art-wave.is-playing i:nth-child(5n) { height:10px; animation-delay:-.15s; }
.music-toggle { display:flex; align-items:center; gap:5px; min-height:31px; padding:0 10px; border:1px solid var(--border-strong); border-radius:10px; color:var(--text); background:rgba(var(--accent-rgb),.1); font-size:9px; font-weight:850; cursor:pointer; transition:background .2s ease,transform .2s ease; }
.music-toggle:hover { background:rgba(var(--accent-rgb),.18); transform:translateY(-1px); }
.music-toggle-symbol { color:var(--accent); font-size:11px; }
.youtube-frame { position:fixed !important; left:-10000px !important; top:0 !important; width:200px !important; min-width:200px !important; height:200px !important; min-height:200px !important; flex:none !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; z-index:-1 !important; }
.youtube-frame iframe { display:block; width:200px !important; min-width:200px !important; height:200px !important; min-height:200px !important; border:0 !important; border-radius:0 !important; }
.music-state { position:relative; z-index:2; min-height:13px; margin:-5px 0 0; color:var(--dim); font-size:8px; line-height:1.45; text-align:center; }
.art-spark { position:absolute; z-index:3; color:var(--accent-2); text-shadow:0 0 22px rgba(var(--accent-rgb),.48); pointer-events:none; }
.spark-one { top:7%; right:5%; font-size:27px; animation:spark 3.8s ease-in-out infinite; }.spark-two { top:20%; left:4%; color:var(--accent); font-size:25px; animation:spark 3s ease-in-out infinite reverse; }.spark-three { right:8%; bottom:8%; font-size:19px; animation:spark 2.8s ease-in-out infinite; }
.scroll-cue { position:absolute; bottom:25px; left:0; display:flex; align-items:center; gap:12px; color:var(--dim); font-size:9px; font-weight:800; letter-spacing:.18em; }
.scroll-cue span { position:relative; width:23px; height:34px; border:1px solid var(--border-strong); border-radius:99px; }
.scroll-cue span::after { content:""; position:absolute; top:6px; left:50%; width:3px; height:6px; border-radius:99px; transform:translateX(-50%); background:var(--accent); animation:scroll-nudge 1.8s ease-in-out infinite; }

/* Marquee + sections */
.ticker { overflow:hidden; border-block:1px solid var(--border); background:rgba(var(--accent-rgb),.035); transform:rotate(-1deg) scale(1.02); margin:0 0 38px; }
.ticker-track { display:flex; align-items:center; justify-content:flex-start; gap:0; width:max-content; min-width:0; padding:16px 0; white-space:nowrap; color:var(--muted); font-size:10px; font-weight:850; letter-spacing:.2em; animation:ticker-slide 34s linear infinite; will-change:transform; }
.ticker-group { display:flex; flex:0 0 auto; align-items:center; gap:32px; padding-right:32px; }
.ticker-track i { color:var(--accent); font-style:normal; font-size:15px; }
.section { padding-top:90px; padding-bottom:65px; scroll-margin-top:80px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:31px; opacity:0; transform:translateY(14px); transition:opacity .6s ease,transform .6s ease; }
.section-heading.is-revealed { opacity:1; transform:translateY(0); }
.section-kicker { margin-bottom:15px; }
.section-heading h2,.contact-inner h2 { margin:0; font-size:clamp(34px,4.6vw,51px); line-height:1.07; letter-spacing:-.06em; font-weight:840; }
.muted-heading { color:#8e85a6; }
.section-intro { max-width:355px; margin:0 0 4px; color:var(--muted); font-size:13px; line-height:1.85; }
.about-grid { display:grid; grid-template-columns:1.4fr .8fr; gap:16px; }
.about-card { position:relative; min-height:250px; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(145deg,var(--panel),rgba(255,255,255,.018)); box-shadow:0 12px 44px rgba(0,0,0,.08); opacity:0; transform:translateY(15px); transition:opacity .55s ease,transform .55s ease,border-color .3s ease; }
.about-card.is-revealed,.link-card.is-revealed { opacity:1; transform:translateY(0); }
.about-main-card { padding:29px 31px; }
.card-topline { display:flex; justify-content:space-between; align-items:center; }
.mini-orb { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--border); border-radius:12px; color:var(--accent); background:rgba(var(--accent-rgb),.08); font-size:18px; }
.card-index { color:var(--dim); font-size:9px; font-weight:850; letter-spacing:.14em; }
.about-main-card h3 { position:relative; z-index:1; max-width:470px; margin:25px 0 12px; font-size:clamp(21px,2.6vw,29px); letter-spacing:-.04em; line-height:1.25; }
.about-main-card p { position:relative; z-index:1; max-width:570px; margin:0; color:var(--muted); font-size:12px; line-height:1.9; }
.interest-list { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }
.interest-list span { padding:8px 11px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.02); font-size:10px; font-weight:750; }
.card-decoration { position:absolute; right:-13px; bottom:-65px; color:rgba(var(--accent-rgb),.08); font-size:200px; line-height:1; transform:rotate(-15deg); }
.quote-card { display:flex; flex-direction:column; justify-content:center; padding:28px; background:radial-gradient(circle at 88% 8%,rgba(var(--accent-rgb),.16),transparent 42%),var(--panel); }
.quote-mark { color:var(--accent); font-family:Georgia,serif; font-size:62px; line-height:.65; }
.quote-card p { margin:19px 0; max-width:270px; font-size:21px; line-height:1.35; font-weight:750; letter-spacing:-.04em; }
.quote-rule { width:40px; height:2px; margin-bottom:13px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.quote-card small { color:var(--dim); font-size:9px; font-weight:850; letter-spacing:.15em; }
.quote-stars { position:absolute; right:23px; bottom:20px; color:var(--accent); opacity:.75; font-size:12px; letter-spacing:.22em; }

/* Social links */
.link-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.link-card { display:flex; align-items:center; gap:15px; min-width:0; padding:18px; border:1px solid var(--border); border-radius:18px; background:var(--panel); transition:opacity .55s ease,transform .55s ease,border-color .25s ease,background .25s ease; opacity:0; transform:translateY(14px); }
.link-card:hover { border-color:var(--border-strong); background:rgba(var(--accent-rgb),.065); }
.link-icon { display:grid; place-items:center; flex:0 0 auto; width:47px; height:47px; border:1px solid var(--border); border-radius:15px; background:rgba(var(--accent-rgb),.085); color:var(--accent); font-size:22px; font-weight:850; }
.link-copy { display:flex; flex-direction:column; min-width:0; gap:5px; }
.link-copy small { color:var(--accent); font-size:8px; font-weight:850; letter-spacing:.16em; }
.link-copy strong { overflow:hidden; text-overflow:ellipsis; font-size:14px; }
.link-copy > span { overflow:hidden; color:var(--muted); font-size:11px; line-height:1.4; text-overflow:ellipsis; }
.link-arrow { margin-left:auto; align-self:flex-start; flex:0 0 auto; color:var(--dim); font-size:18px; transition:transform .2s ease,color .2s ease; }
.link-card:hover .link-arrow { transform:translate(2px,-2px); color:var(--accent); }
.empty-state { display:flex; align-items:center; gap:16px; padding:22px; border:1px dashed var(--border-strong); border-radius:18px; background:rgba(255,255,255,.018); }
.empty-symbol { display:grid; place-items:center; flex:0 0 auto; width:43px; height:43px; border-radius:14px; background:rgba(var(--accent-rgb),.1); color:var(--accent); font-size:23px; }
.empty-state strong { display:block; margin-bottom:7px; font-size:13px; }
.empty-state p { margin:0; color:var(--muted); font-size:11px; line-height:1.65; }
code { padding:2px 5px; border:1px solid var(--border); border-radius:5px; background:rgba(0,0,0,.15); color:var(--accent); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.93em; }

/* Contact + footer */
.contact-section { position:relative; margin-top:78px; overflow:hidden; border-block:1px solid var(--border); background:linear-gradient(110deg,rgba(var(--accent-rgb),.065),transparent 70%); scroll-margin-top:80px; }
.contact-glow { position:absolute; top:-180px; right:8%; width:350px; height:350px; border-radius:50%; background:var(--accent); opacity:.1; filter:blur(85px); pointer-events:none; }
.contact-inner { position:relative; display:flex; align-items:center; justify-content:space-between; gap:35px; padding-top:68px; padding-bottom:68px; }
.contact-inner h2 { margin:0; font-size:clamp(36px,4.5vw,53px); }
.contact-inner p { max-width:445px; margin:16px 0 0; color:var(--muted); font-size:12px; line-height:1.85; }
.contact-actions { display:flex; flex-direction:column; align-items:flex-start; gap:11px; min-width:210px; }
.contact-actions .button { width:100%; }
.copy-email { padding:0; border:0; background:transparent; color:var(--accent); font-size:11px; cursor:pointer; }
.contact-hint { max-width:225px; color:var(--dim); font-size:10px; line-height:1.7; }
.site-footer { padding:28px 0 20px; background:color-mix(in srgb,var(--bg-soft) 68%,transparent); border-top:1px solid var(--border); }
.footer-inner { display:flex; align-items:center; gap:20px; padding-bottom:24px; }
.footer-brand { min-width:initial; }
.footer-brand .brand-mark { width:37px; height:37px; border-radius:13px; font-size:17px; }
.footer-brand .brand-word strong { font-size:14px; }
.footer-inner p { margin:0 auto 0 15px; color:var(--dim); font-size:11px; }
.footer-inner p span { color:var(--accent); }
.back-top { padding:9px 12px; border:1px solid var(--border); border-radius:11px; color:var(--muted); background:var(--panel-light); font-size:10px; font-weight:750; cursor:pointer; }
.back-top:hover { color:var(--text); border-color:var(--border-strong); }
.footer-bottom { display:flex; justify-content:space-between; gap:18px; padding-top:18px; border-top:1px solid var(--border); color:var(--dim); font-size:9px; }
.toast { position:fixed; right:24px; bottom:24px; z-index:100; max-width:calc(100vw - 48px); padding:12px 16px; border:1px solid var(--border-strong); border-radius:13px; background:var(--panel-solid); box-shadow:var(--shadow); color:var(--text); font-size:12px; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .2s ease,transform .2s ease; }
.toast.is-visible { opacity:1; transform:translateY(0); }

/* Platform details panel */
.link-card { width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.link-card:focus-visible { outline:2px solid var(--accent-2); outline-offset:3px; }
.social-panel-open { overflow:hidden; }
.social-panel-backdrop { position:fixed; inset:0; z-index:160; display:grid; place-items:center; padding:22px; background:rgba(5,4,12,.67); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .24s ease,visibility .24s ease; }
.social-panel-backdrop.is-open { opacity:1; visibility:visible; pointer-events:auto; }
.social-panel-shell { position:relative; width:min(620px,100%); max-height:min(790px,calc(100dvh - 36px)); overflow:auto; padding:clamp(20px,4vw,32px); border:1px solid var(--border-strong); border-radius:26px; background:radial-gradient(circle at 92% 0%,rgba(var(--accent-rgb),.13),transparent 36%),var(--panel-solid); box-shadow:0 35px 120px rgba(0,0,0,.4); transform:translateY(14px) scale(.985); transition:transform .3s cubic-bezier(.2,.8,.2,1); scrollbar-width:thin; }
.social-panel-backdrop.is-open .social-panel-shell { transform:translateY(0) scale(1); }
.social-panel-close { position:absolute; top:15px; right:15px; z-index:2; display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--border); border-radius:12px; color:var(--text); background:var(--panel-light); font-size:24px; cursor:pointer; }
.social-panel-topline { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding-right:42px; color:var(--accent); font-size:9px; font-weight:900; letter-spacing:.14em; }
.social-api-state { display:flex; align-items:center; gap:6px; color:var(--dim); font-size:8px; letter-spacing:.08em; }
.social-api-state i { width:6px; height:6px; border-radius:50%; background:#e5a85c; box-shadow:0 0 10px rgba(229,168,92,.35); }
.social-panel-profile { display:flex; align-items:center; gap:16px; margin:25px 0 23px; }
.social-panel-avatar { display:grid; place-items:center; flex:0 0 auto; width:64px; height:64px; border:1px solid rgba(var(--accent-rgb),.32); border-radius:20px; object-fit:cover; background:rgba(var(--accent-rgb),.1); color:var(--accent); font-size:25px; font-weight:900; }
.social-panel-heading { min-width:0; padding-right:30px; }
.social-panel-heading h2 { margin:0 0 5px; overflow-wrap:anywhere; color:var(--text); font-size:clamp(24px,4vw,32px); line-height:1.1; letter-spacing:-.045em; }
.social-panel-heading p { margin:0 0 8px; color:var(--muted); font-size:12px; line-height:1.6; }
.social-panel-service { display:inline-flex; padding:5px 8px; border:1px solid var(--border); border-radius:7px; color:var(--dim); font-size:8px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.social-metrics-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.social-metric { min-width:0; padding:15px 13px; border:1px solid var(--border); border-radius:15px; background:var(--panel-light); }
.social-metric span { display:block; min-height:25px; color:var(--dim); font-size:10px; line-height:1.4; }
.social-metric strong { display:block; margin-top:6px; overflow-wrap:anywhere; color:var(--text); font-size:clamp(13px,2.5vw,19px); letter-spacing:-.025em; }
.social-panel-section { margin-top:25px; }
.social-panel-section-title { display:flex; justify-content:space-between; gap:10px; margin-bottom:11px; color:var(--text); font-size:10px; font-weight:900; letter-spacing:.1em; }
.social-panel-section-title span:last-child { color:var(--dim); font-size:8px; }
.social-activity-empty { display:flex; align-items:center; gap:12px; padding:17px; border:1px dashed var(--border-strong); border-radius:15px; background:var(--panel-light); }
.social-empty-glyph { display:grid; place-items:center; flex:0 0 auto; width:32px; height:32px; border-radius:10px; color:var(--accent); background:rgba(var(--accent-rgb),.1); }
.social-activity-empty p { margin:0; color:var(--muted); font-size:11px; line-height:1.7; }
.social-activity-list { display:grid; gap:7px; }
.social-activity-item { display:flex; align-items:center; gap:11px; min-width:0; padding:11px; border:1px solid var(--border); border-radius:13px; color:var(--text); background:var(--panel-light); text-decoration:none; transition:border-color .2s ease,transform .2s ease; }
.social-activity-item[href]:hover { transform:translateY(-1px); border-color:var(--border-strong); }
.social-activity-item[aria-disabled="true"] { cursor:default; }
.social-activity-play { display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:rgba(var(--accent-rgb),.1); color:var(--accent); }
.social-activity-copy { display:flex; flex-direction:column; gap:4px; min-width:0; }
.social-activity-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.social-activity-copy small { color:var(--dim); font-size:9px; }
.social-activity-arrow { margin-left:auto; color:var(--dim); }
.social-panel-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.social-panel-footer > span { max-width:68%; color:var(--dim); font-size:9px; line-height:1.6; }
.social-open-profile { display:inline-flex; align-items:center; gap:10px; padding:10px 13px; border:1px solid rgba(var(--accent-rgb),.28); border-radius:11px; color:var(--accent); background:rgba(var(--accent-rgb),.08); font-size:10px; font-weight:850; text-decoration:none; white-space:nowrap; }
.social-open-profile:hover { background:rgba(var(--accent-rgb),.15); }
@media (max-width:520px) { .social-panel-backdrop { padding:10px; } .social-panel-shell { max-height:calc(100dvh - 20px); padding:22px 16px 18px; border-radius:21px; } .social-panel-profile { gap:12px; margin-top:22px; } .social-panel-avatar { width:52px; height:52px; border-radius:16px; } .social-metrics-grid { gap:7px; } .social-metric { padding:11px 9px; } .social-metric span { font-size:9px; } .social-panel-footer { align-items:flex-start; flex-direction:column; } .social-panel-footer > span { max-width:none; } }

/* Motion */
@keyframes panel-in { from { opacity:0; transform:translateY(-5px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes dot-breathe { 0%,100% { opacity:1; box-shadow:0 0 11px var(--accent-2); } 50% { opacity:.45; box-shadow:0 0 3px var(--accent-2); } }
@keyframes star-drift { to { background-position: 0 35px, 0 -28px, 0 16px, 0 -30px, 0 28px, 0 -21px, 0 35px, 0 -20px, 0 17px, 0 -35px, 0 24px, 0 -19px, 0 30px, 0 -24px; } }
@keyframes star-twinkle { from { opacity:.28; transform:translate3d(0,0,0); } to { opacity:.9; transform:translate3d(-8px,6px,0); } }
@keyframes wave-pulse { from { transform:scaleY(.55); opacity:.55; } to { transform:scaleY(1); opacity:1; } }
@keyframes spark { 0%,100% { opacity:.5; scale:.88; } 50% { opacity:1; scale:1.14; } }
@keyframes scroll-nudge { 0%,100% { top:6px; opacity:.45; } 50% { top:15px; opacity:1; } }
@keyframes ticker-slide { to { transform:translateX(-50%); } }

@media (max-width: 980px) {
  .hero { gap:10px; min-height:600px; }
  .hero h1 { font-size:clamp(45px,6.3vw,65px); }
  .hero-art { transform:scale(.94); transform-origin:center center; }
  .brand { min-width:150px; }
  .primary-nav a { padding-inline:10px; }
  .section { padding-top:76px; }
}
@media (max-width: 820px) {
  .wrap { width:min(var(--wrap),calc(100% - 38px)); }
  .header-inner { min-height:72px; gap:10px; }
  .brand { margin-right:auto; min-width:0; }
  .menu-toggle { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
  .menu-toggle span { width:17px; height:1.5px; border-radius:3px; background:var(--text); transition:transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3.25px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3.25px) rotate(-45deg); }
  .primary-nav { position:absolute; top:calc(100% + 7px); left:19px; right:19px; display:flex; flex-direction:column; align-items:stretch; gap:3px; padding:10px; border:1px solid var(--border-strong); border-radius:19px; background:var(--panel-solid); box-shadow:var(--shadow); opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .2s ease,transform .2s ease; }
  .primary-nav.is-open { opacity:1; transform:translateY(0); pointer-events:auto; }
  .primary-nav a { padding:13px 12px; }
  .settings-panel { right:19px; }
  .hero { grid-template-columns:1fr .8fr; gap:0; min-height:600px; padding-top:49px; padding-bottom:80px; }
  .hero h1 { font-size:clamp(43px,7vw,61px); }
  .hero-art { min-height:460px; transform:scale(.94); transform-origin:center center; margin-inline:-18px; }
  .art-main-card { width:min(360px,91%); }
  .about-grid { grid-template-columns:1.15fr .85fr; }
  .about-main-card { padding:24px; }
  .quote-card { padding:23px; }
  .contact-inner { padding-block:54px; }
}
@media (max-width: 620px) {
  .wrap { width:calc(100% - 34px); }
  .header-inner { min-height:68px; }
  .brand-mark { width:39px; height:39px; border-radius:13px; }
  .brand-word strong { font-size:15px; }
  .icon-button { width:39px; height:39px; border-radius:13px; }
  .hero { display:flex; flex-direction:column; align-items:stretch; gap:0; min-height:initial; padding-top:50px; padding-bottom:65px; }
  .hero-copy { padding:0; }
  .eyebrow { font-size:8px; letter-spacing:.15em; }
  .hero h1 { max-width:100%; margin-top:23px; font-size:clamp(44px,12vw,62px); }
  .hero-lead { font-size:20px; }
  .hero-description { font-size:13px; }
  .hero-actions { gap:9px; margin-top:24px; }
  .button { min-height:46px; padding-inline:15px; gap:11px; font-size:11px; }
  .hero-meta { margin-top:24px; }
  .hero-art { min-height:448px; margin:18px -12px 0; transform:none; }
  .hero-art::before { width:330px; height:330px; }
  .art-main-card { width:min(360px,92%); gap:9px; }
  .platform-deck { height:308px; min-height:308px; }
  .deck-card { padding:14px 12px 12px; }
  .deck-profile-copy strong { font-size:24px; }
  .deck-platform-icon { width:52px; height:52px; border-radius:16px; font-size:24px; }
  .deck-platform-watermark { font-size:130px; }
  .art-spark { display:none; }
  .scroll-cue { bottom:0; }
  .ticker { margin-bottom:12px; }.ticker-track { padding-block:13px; font-size:9px; gap:23px; }
  .section { padding-top:67px; padding-bottom:35px; scroll-margin-top:68px; }
  .section-heading { display:block; margin-bottom:24px; }
  .section-kicker { margin-bottom:13px; font-size:9px; }
  .section-heading h2,.contact-inner h2 { font-size:clamp(34px,9.5vw,45px); }
  .section-intro { margin-top:15px; font-size:12px; }
  .about-grid { grid-template-columns:1fr; }
  .about-card { min-height:230px; }
  .about-main-card { padding:23px; }
  .about-main-card h3 { margin-top:20px; font-size:25px; }
  .quote-card { min-height:220px; }
  .link-grid { grid-template-columns:1fr; gap:9px; }
  .link-card { padding:14px; gap:12px; }
  .link-icon { width:43px; height:43px; }
  .empty-state { align-items:flex-start; padding:17px; }
  .contact-section { margin-top:55px; }
  .contact-inner { display:block; padding-block:48px; }
  .contact-inner p { font-size:12px; }
  .contact-actions { align-items:stretch; margin-top:26px; }
  .contact-hint { max-width:none; }
  .footer-inner { flex-wrap:wrap; gap:13px; }
  .footer-inner p { order:3; flex-basis:100%; margin:4px 0 0; }
  .back-top { margin-left:auto; }
  .footer-bottom { flex-direction:column; gap:8px; font-size:9px; }
  .toast { right:17px; bottom:17px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* Calm trailing particles and the card deck. */
@keyframes corner-float { 0%,100% { transform:translateY(0) rotate(1.25deg); } 50% { transform:translateY(-7px) rotate(-.4deg); } }
@keyframes corner-glow { 0%,100% { opacity:.78; transform:scale(.96); } 50% { opacity:1; transform:scale(1.045); } }
@keyframes corner-tilt { 0%,100% { transform:rotate(-13deg) scale(1); } 50% { transform:rotate(-9deg) scale(1.035); } }
@keyframes frame-float { 0%,100% { transform:rotate(-7deg) translate(-7px,5px); } 50% { transform:rotate(-5deg) translate(-3px,-1px); } }
@keyframes corner-sheen { 0%,55% { left:-70%; opacity:0; } 66% { opacity:.7; } 86%,100% { left:130%; opacity:0; } }
.light-mode .art-main-card { box-shadow:none; }
.light-mode .deck-card { box-shadow:0 12px 28px rgba(47,34,70,.07),inset 0 1px 0 rgba(255,255,255,.7); }

/* Light appearance follows each selected accent theme. */
.light-mode .ticker { background:rgba(var(--accent-rgb),.055); }
.light-mode .about-card { background:linear-gradient(145deg,var(--panel),rgba(var(--accent-rgb),.025)); box-shadow:0 12px 40px rgba(47,34,70,.055); }
.light-mode .link-card { box-shadow:0 12px 36px rgba(47,34,70,.055); }
.light-mode .site-footer { background:color-mix(in srgb,var(--bg-soft) 70%,transparent); }
.light-mode .back-top { background:var(--panel); }
.light-mode .brand-mark { color:#fff; }


/* Appearance mode follows the operating system unless the visitor chooses a manual override. */
html:not(.light-mode) { color-scheme:dark; }
html.light-mode { color-scheme:light; }

/* Demo-only opening animation: the elements arrive on a soft crosswind and settle into place. */
@keyframes demo-wind-settle {
  0% { opacity:0; translate:var(--wind-x,-70px) var(--wind-y,24px); rotate:var(--wind-r,-7deg); filter:blur(5px); }
  58% { opacity:1; translate:8px -3px; rotate:1deg; filter:blur(0); }
  78% { opacity:1; translate:-3px 1px; rotate:-.4deg; filter:blur(0); }
  100% { opacity:1; translate:0 0; rotate:0deg; filter:blur(0); }
}
html.demo-wind .site-header,
html.demo-wind .hero-copy > *,
html.demo-wind .hero-art,
html.demo-wind .scroll-cue,
html.demo-wind .ticker,
html.demo-wind .section-heading,
html.demo-wind .empty-state,
html.demo-wind .about-card,
html.demo-wind .link-card,
html.demo-wind .contact-inner > *,
html.demo-wind .site-footer .brand,
html.demo-wind .site-footer p,
html.demo-wind .site-footer button,
html.demo-wind .site-footer .footer-bottom > * {
  animation:demo-wind-settle 1.25s cubic-bezier(.18,.72,.2,1) both;
  animation-delay:var(--wind-delay,0ms);
}
html.demo-wind .site-header { --wind-x:-80px; --wind-y:-26px; --wind-r:-5deg; --wind-delay:0ms; }
html.demo-wind .hero-copy > :nth-child(1) { --wind-x:-90px; --wind-y:22px; --wind-r:-8deg; --wind-delay:70ms; }
html.demo-wind .hero-copy > :nth-child(2) { --wind-x:-65px; --wind-y:45px; --wind-r:-5deg; --wind-delay:120ms; }
html.demo-wind .hero-copy > :nth-child(3) { --wind-x:-75px; --wind-y:30px; --wind-r:-4deg; --wind-delay:180ms; }
html.demo-wind .hero-copy > :nth-child(4) { --wind-x:-48px; --wind-y:38px; --wind-r:-3deg; --wind-delay:240ms; }
html.demo-wind .hero-copy > :nth-child(5) { --wind-x:-70px; --wind-y:20px; --wind-r:-5deg; --wind-delay:300ms; }
html.demo-wind .hero-copy > :nth-child(6) { --wind-x:-38px; --wind-y:18px; --wind-r:-2deg; --wind-delay:360ms; }
html.demo-wind .hero-art { --wind-x:86px; --wind-y:-55px; --wind-r:8deg; --wind-delay:200ms; }
html.demo-wind .ticker { --wind-x:-60px; --wind-y:35px; --wind-r:-2deg; --wind-delay:480ms; }
html.demo-wind .section-heading { --wind-x:70px; --wind-y:26px; --wind-r:3deg; --wind-delay:100ms; }
html.demo-wind .about-card:nth-child(odd), html.demo-wind .link-card:nth-child(odd) { --wind-x:-72px; --wind-y:28px; --wind-r:-5deg; --wind-delay:180ms; }
html.demo-wind .about-card:nth-child(even), html.demo-wind .link-card:nth-child(even) { --wind-x:72px; --wind-y:36px; --wind-r:5deg; --wind-delay:280ms; }
html.demo-wind .contact-inner > :first-child { --wind-x:-80px; --wind-y:26px; --wind-r:-5deg; --wind-delay:160ms; }
html.demo-wind .contact-inner > :last-child { --wind-x:80px; --wind-y:20px; --wind-r:4deg; --wind-delay:240ms; }
html.demo-wind.reduce-motion .site-header,
html.demo-wind.reduce-motion .hero-copy > *,
html.demo-wind.reduce-motion .hero-art,
html.demo-wind.reduce-motion .scroll-cue,
html.demo-wind.reduce-motion .ticker,
html.demo-wind.reduce-motion .section-heading,
html.demo-wind.reduce-motion .empty-state,
html.demo-wind.reduce-motion .about-card,
html.demo-wind.reduce-motion .link-card,
html.demo-wind.reduce-motion .contact-inner > *,
html.demo-wind.reduce-motion .site-footer .brand,
html.demo-wind.reduce-motion .site-footer p,
html.demo-wind.reduce-motion .site-footer button,
html.demo-wind.reduce-motion .site-footer .footer-bottom > * { animation:none !important; translate:0 0 !important; rotate:0deg !important; filter:none !important; opacity:1 !important; }
@media (prefers-reduced-motion: reduce) {
  html.demo-wind .site-header,
  html.demo-wind .hero-copy > *,
  html.demo-wind .hero-art,
  html.demo-wind .scroll-cue,
  html.demo-wind .ticker,
  html.demo-wind .section-heading,
  html.demo-wind .empty-state,
  html.demo-wind .about-card,
  html.demo-wind .link-card,
  html.demo-wind .contact-inner > *,
  html.demo-wind .site-footer .brand,
  html.demo-wind .site-footer p,
  html.demo-wind .site-footer button,
  html.demo-wind .site-footer .footer-bottom > * { animation:none !important; translate:0 0 !important; rotate:0deg !important; filter:none !important; opacity:1 !important; }
}

/* Demo card-deck correction: each carousel item is the complete visible card face. */
.art-frame { display:none !important; }
.art-main-card { background:transparent !important; border:0 !important; box-shadow:none !important; }
.platform-deck { overflow:visible; }
.deck-card-stack { overflow:visible; }
.deck-profile-stage { align-items:center; justify-content:flex-start; }
.deck-profile-copy { margin-top:0; }
@media (max-width:620px) {
  .hero-art { min-height:448px; }
  .platform-deck { height:308px; min-height:308px; }
}

/* A wider fan makes the whole card deck visibly lean left and right. */
.deck-card.is-next { transform:translate3d(17px,7px,-34px) rotateY(-11deg) rotate(4.1deg) scale(.955); }
.deck-card.is-next-two { transform:translate3d(25px,11px,-62px) rotateY(-18deg) rotate(6.2deg) scale(.925); }
.deck-card.is-prev { transform:translate3d(-15px,6px,-42px) rotateY(14deg) rotate(-3.7deg) scale(.96); }
.platform-deck.is-dragging .deck-card.is-active { transition-duration:.12s; transform:rotate(1.4deg) scale(.99); }

/* Volume slider on the main music widget. */
.music-widget { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.music-title { grid-column:1; grid-row:1; }
.music-actions { grid-column:2; grid-row:1; }
.music-volume-control { grid-column:1 / -1; display:grid; grid-template-columns:auto auto minmax(60px,1fr) 32px; align-items:center; gap:9px; min-width:0; padding:8px 10px; border:1px solid var(--border); border-radius:10px; color:var(--dim); background:rgba(var(--accent-rgb),.035); }
.volume-label { font-size:8px; font-weight:900; letter-spacing:.12em; }
.volume-icon { display:grid; place-items:center; width:22px; height:22px; border:1px solid var(--border); border-radius:7px; color:var(--accent); background:rgba(var(--accent-rgb),.07); font-size:12px; line-height:1; }
.music-volume-control input[type="range"], .mini-volume-control input[type="range"] { width:100%; min-width:40px; height:4px; margin:0; appearance:none; -webkit-appearance:none; border-radius:999px; outline:none; background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--volume-fill,38%),rgba(var(--accent-rgb),.17) var(--volume-fill,38%),rgba(var(--accent-rgb),.17) 100%); cursor:pointer; accent-color:var(--accent); }
.music-volume-control input[type="range"]::-webkit-slider-thumb, .mini-volume-control input[type="range"]::-webkit-slider-thumb { width:12px; height:12px; appearance:none; -webkit-appearance:none; border:2px solid var(--panel-solid); border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px var(--border-strong),0 0 9px rgba(var(--accent-rgb),.25); }
.music-volume-control input[type="range"]::-moz-range-thumb, .mini-volume-control input[type="range"]::-moz-range-thumb { width:9px; height:9px; border:2px solid var(--panel-solid); border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px var(--border-strong); }
.music-volume-control output, .mini-volume-control output { min-width:29px; color:var(--muted); font-size:8px; font-variant-numeric:tabular-nums; text-align:right; }
.music-volume-control input[type="range"]:focus-visible, .mini-volume-control input[type="range"]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

/* Floating mini player: revealed only after the main music card scrolls above the viewport. */
.mini-music-player { position:fixed; left:50%; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); z-index:120; display:flex; align-items:center; justify-content:space-between; gap:10px; width:min(372px,calc(100vw - 28px)); padding:8px 10px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb,var(--panel-solid) 90%,transparent); box-shadow:0 7px 24px rgba(0,0,0,.13); backdrop-filter:blur(16px) saturate(1.12); -webkit-backdrop-filter:blur(16px) saturate(1.12); opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,16px) scale(.98); transform-origin:center bottom; transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear .32s; }
.mini-music-player.is-visible { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0) scale(1); transition:opacity .32s cubic-bezier(.2,.8,.2,1),transform .42s cubic-bezier(.2,.8,.2,1),visibility 0s; }
.mini-music-meta { display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; }
.mini-music-note { display:grid; place-items:center; flex:0 0 auto; width:30px; height:30px; border:1px solid var(--border); border-radius:10px; color:var(--accent); background:rgba(var(--accent-rgb),.07); font-size:16px; }
.mini-music-note.is-playing { animation:mini-note-pulse 1.7s ease-in-out infinite; }
.mini-music-title { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mini-music-title small { color:var(--accent); font-size:6px; font-weight:900; letter-spacing:.12em; }
.mini-music-title strong { overflow:hidden; color:var(--text); font-size:11px; font-weight:850; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.mini-music-title > span { color:var(--dim); font-size:8px; }
.mini-music-controls { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:0 0 auto; }
.mini-volume-control { display:flex; align-items:center; gap:6px; width:102px; min-width:78px; }
.mini-volume-control output { min-width:24px; font-size:7px; }
.mini-music-toggle { flex:0 0 auto; min-height:28px; padding-inline:8px; border-radius:9px; font-size:8px; }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
@keyframes mini-note-pulse { 0%,100% { transform:translateY(0) rotate(-4deg); box-shadow:0 0 0 rgba(var(--accent-rgb),0); } 50% { transform:translateY(-2px) rotate(4deg); box-shadow:0 0 18px rgba(var(--accent-rgb),.16); } }
@media (max-width:560px) {
  .music-widget { gap:8px; padding:10px; }
  .music-title strong { max-width:135px; }
  .music-actions { gap:7px; }
  .music-volume-control { gap:6px; }
  .mini-music-player { display:flex; flex-wrap:wrap; gap:7px 9px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); padding:8px 9px; border-radius:13px; }
  .mini-music-meta { gap:7px; flex:1 1 120px; }
  .mini-music-note { width:28px; height:28px; border-radius:9px; }
  .mini-music-controls { justify-content:space-between; gap:8px; flex:1 1 150px; }
  .mini-volume-control { flex:1 1 auto; width:auto; min-width:65px; }
}

/* Smooth in-page social accordions */
.social-accordion-card { display:block; min-width:0; overflow:hidden; padding:0; }
.social-accordion-trigger { display:flex; align-items:center; gap:15px; width:100%; min-width:0; padding:18px; border:0; border-radius:0; background:transparent; color:inherit; text-align:left; font:inherit; cursor:pointer; }
.social-accordion-trigger:focus-visible { outline:2px solid var(--accent-2); outline-offset:-4px; }
.social-accordion-trigger .link-copy { flex:1; }
.social-accordion-chevron { align-self:center; margin-left:auto; transition:transform .38s cubic-bezier(.2,.8,.2,1),color .25s ease; }
.social-accordion-card.is-open .social-accordion-chevron { transform:rotate(180deg); color:var(--accent); }
.social-accordion-panel { display:grid; grid-template-rows:0fr; opacity:0; border-top:1px solid transparent; transition:grid-template-rows .42s cubic-bezier(.2,.8,.2,1),opacity .3s ease,border-color .3s ease; }
.social-accordion-card.is-open .social-accordion-panel { grid-template-rows:1fr; opacity:1; border-top-color:var(--border); }
.social-accordion-panel-inner { min-height:0; overflow:hidden; }
.social-accordion-content { padding:0 18px 18px; }
.social-accordion-loading { display:flex; align-items:center; gap:12px; min-height:65px; padding:15px 0; color:var(--muted); }
.social-accordion-loading > span:last-child { display:grid; gap:4px; }
.social-accordion-loading strong { color:var(--text); font-size:12px; }
.social-accordion-loading small { color:var(--dim); font-size:10px; }
.social-loading-orb { display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; border-radius:12px; color:var(--accent); background:rgba(var(--accent-rgb),.12); animation:dot-breathe 1.5s ease-in-out infinite; }
.social-inline-detail .social-panel-topline { padding-right:0; }
.social-inline-detail .social-panel-profile { margin:17px 0; }
.social-inline-detail .social-panel-heading { padding-right:0; }
.social-inline-detail .social-panel-heading h3 { margin:0 0 5px; overflow-wrap:anywhere; color:var(--text); font-size:17px; line-height:1.2; letter-spacing:-.03em; }
.social-inline-detail .social-panel-heading p { margin:0 0 8px; color:var(--muted); font-size:11px; line-height:1.55; }
.social-inline-detail .social-metrics-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.social-inline-detail .social-metric { padding:11px; }
.social-inline-detail .social-metric span { min-height:0; font-size:9px; }
.social-inline-detail .social-metric strong { font-size:14px; }
.social-inline-detail .social-panel-section { margin-top:19px; }
.social-inline-detail .social-panel-footer { margin-top:15px; padding-top:13px; }
.social-inline-detail .social-panel-footer > span { max-width:68%; }
.social-inline-detail .social-activity-copy strong { white-space:normal; line-height:1.35; }
.social-inline-detail .social-activity-copy small { line-height:1.45; }


/* Social accordions: isolated columns prevent adjacent cards stretching when one opens. */
.link-grid.social-link-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:14px; }
.social-link-column { display:grid; align-content:start; gap:12px; min-width:0; }
.social-accordion-card { display:block; align-self:start; min-width:0; width:100%; height:fit-content; overflow:hidden; padding:0; }
.social-accordion-trigger { display:flex; align-items:center; gap:15px; width:100%; min-width:0; padding:18px; border:0; border-radius:0; background:transparent; color:inherit; text-align:left; font:inherit; cursor:pointer; }
.social-accordion-trigger:focus-visible { outline:2px solid var(--accent-2); outline-offset:-4px; }
.social-accordion-trigger .link-copy { flex:1; }
.social-accordion-chevron { align-self:center; margin-left:auto; transition:transform .38s cubic-bezier(.2,.8,.2,1),color .25s ease; }
.social-accordion-card.is-open .social-accordion-chevron { transform:rotate(180deg); color:var(--accent); }
.social-accordion-panel { display:grid; grid-template-rows:0fr; opacity:0; border-top:1px solid transparent; transition:grid-template-rows .42s cubic-bezier(.2,.8,.2,1),opacity .3s ease,border-color .3s ease; }
.social-accordion-card.is-open .social-accordion-panel { grid-template-rows:1fr; opacity:1; border-top-color:var(--border); }
.social-accordion-panel-inner { min-height:0; overflow:hidden; }
.social-accordion-content { padding:0 18px 18px; }
.social-accordion-loading { display:flex; align-items:center; gap:12px; min-height:65px; padding:15px 0; color:var(--muted); }
.social-accordion-loading > span:last-child { display:grid; gap:4px; }
.social-accordion-loading strong { color:var(--text); font-size:12px; }
.social-accordion-loading small { color:var(--dim); font-size:10px; }
.social-loading-orb { display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; border-radius:12px; color:var(--accent); background:rgba(var(--accent-rgb),.12); animation:dot-breathe 1.5s ease-in-out infinite; }
.social-inline-detail .social-panel-topline { padding-right:0; }
.social-inline-detail .social-panel-profile { margin:17px 0; }
.social-inline-detail .social-panel-heading { padding-right:0; }
.social-inline-detail .social-panel-heading h3 { margin:0 0 5px; overflow-wrap:anywhere; color:var(--text); font-size:17px; line-height:1.2; letter-spacing:-.03em; }
.social-inline-detail .social-panel-heading p { margin:0 0 8px; color:var(--muted); font-size:11px; line-height:1.55; }
.social-inline-detail .social-metrics-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.social-inline-detail .social-metric { padding:11px; }
.social-inline-detail .social-metric span { min-height:0; font-size:9px; }
.social-inline-detail .social-metric strong { font-size:14px; }
.social-inline-detail .social-panel-section { margin-top:19px; }
.social-inline-detail .social-panel-footer { margin-top:15px; padding-top:13px; }
.social-inline-detail .social-panel-footer > span { max-width:68%; }
.social-inline-detail .social-activity-copy strong { white-space:normal; line-height:1.35; }


/* Wide, atmospheric Steam dashboard: the content flows without heavy card boxes. */
.steam-showcase.wrap { position:relative; isolation:isolate; width:calc(100% - clamp(32px,4.2vw,88px)); max-width:none; margin:0 auto 64px; padding-top:18px; scroll-margin-top:28px; }
.steam-showcase::before,.steam-showcase::after { position:absolute; z-index:-1; content:""; pointer-events:none; border-radius:50%; filter:blur(70px); opacity:.35; }
.steam-showcase::before { top:6%; left:9%; width:44%; height:48%; background:radial-gradient(ellipse,rgba(var(--accent-rgb),.19),transparent 70%); animation:steam-atmosphere 19s ease-in-out infinite alternate; }
.steam-showcase::after { right:5%; bottom:-2%; width:38%; height:45%; background:radial-gradient(ellipse,rgba(93,181,255,.12),transparent 68%); animation:steam-atmosphere 23s ease-in-out infinite alternate-reverse; }
@keyframes steam-atmosphere { from { transform:translate3d(-2%,0,0) scale(.94); opacity:.23; } to { transform:translate3d(3%,-2%,0) scale(1.08); opacity:.5; } }
.steam-showcase-header { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.steam-showcase-intro { min-width:0; }
.steam-showcase-intro .section-kicker { display:inline-block; margin:0 0 10px; font-size:10px; }
.steam-showcase-intro h2 { margin:0; font-size:clamp(32px,3.4vw,46px); line-height:1.06; letter-spacing:-.055em; font-weight:850; }
.steam-profile-link,.steam-current-game-link,.steam-friends-profile-link { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 16px; border:1px solid rgba(var(--accent-rgb),.28); border-radius:12px; color:var(--text); background:rgba(var(--accent-rgb),.055); font-size:12px; font-weight:800; text-decoration:none; white-space:nowrap; transition:transform .22s ease,border-color .22s ease,background .22s ease; backdrop-filter:blur(10px); }
.steam-profile-link:hover,.steam-current-game-link:hover,.steam-friends-profile-link:hover { transform:translateY(-2px); border-color:var(--accent); background:rgba(var(--accent-rgb),.12); }
.steam-layout { position:relative; z-index:1; display:grid; grid-template-columns:minmax(300px,.94fr) minmax(440px,1.35fr) minmax(270px,.78fr); grid-template-rows:minmax(155px,auto) minmax(340px,auto); grid-template-areas:"profile stats friends" "current recent friends"; gap:30px 34px; align-items:stretch; }
.steam-profile-card,.steam-stats-card,.steam-friends-card,.steam-current-card,.steam-recent-wrap { min-width:0; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
.steam-profile-card { grid-area:profile; display:flex; align-items:center; gap:22px; padding:15px 18px 22px 8px; border-bottom:1px solid rgba(var(--accent-rgb),.15); }
.steam-profile-avatar-frame { position:relative; display:grid; place-items:center; flex:0 0 auto; width:104px; height:104px; overflow:hidden; border:1px solid rgba(var(--accent-rgb),.38); border-radius:28px; color:var(--accent); background:linear-gradient(145deg,rgba(var(--accent-rgb),.2),rgba(16,11,32,.68)); box-shadow:0 0 44px rgba(var(--accent-rgb),.15); }
.steam-profile-avatar-frame img,.steam-profile-avatar-frame > span { width:100%; height:100%; object-fit:cover; }
.steam-profile-avatar-frame > span { display:grid; place-items:center; font-size:34px; font-weight:900; }
.steam-profile-avatar-frame img[hidden],.steam-game-visual img[hidden] { display:none; }
.steam-profile-copy { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
.steam-card-eyebrow { color:var(--accent); font-size:10px; font-weight:900; letter-spacing:.17em; text-transform:uppercase; }
.steam-profile-copy h3 { max-width:100%; margin:0; overflow:hidden; color:var(--text); font-size:clamp(24px,2.2vw,31px); letter-spacing:-.045em; text-overflow:ellipsis; }
.steam-profile-handle { max-width:100%; overflow:hidden; color:var(--dim); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.steam-profile-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.steam-level-chip,.steam-profile-state { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid rgba(var(--accent-rgb),.2); border-radius:10px; color:var(--muted); background:rgba(var(--accent-rgb),.055); font-size:9px; font-weight:850; letter-spacing:.06em; }
.steam-level-chip strong { color:var(--text); font-size:11px; }
.steam-profile-state { color:var(--dim); }
.steam-profile-state::before { width:6px; height:6px; border-radius:50%; background:currentColor; content:""; }
.steam-showcase.is-playing .steam-profile-state { color:#78e5a5; }
.steam-showcase.is-playing .steam-profile-state::before { background:#78e5a5; box-shadow:0 0 10px rgba(120,229,165,.65); }
.steam-stats-card { grid-area:stats; padding:12px 8px 18px; border-bottom:1px solid rgba(var(--accent-rgb),.15); }
.steam-card-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; color:var(--text); font-size:11px; font-weight:900; letter-spacing:.13em; }
.steam-card-heading > span:last-child { color:var(--dim); font-size:9px; letter-spacing:.1em; }
.steam-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
.steam-stat { min-width:0; padding:12px 14px; border:0; border-left:1px solid rgba(var(--accent-rgb),.14); border-radius:0; background:transparent; }
.steam-stat:first-child { border-left:0; padding-left:0; }
.steam-stat span { display:block; min-height:25px; color:var(--dim); font-size:11px; line-height:1.45; }
.steam-stat strong { display:block; margin-top:8px; overflow-wrap:anywhere; color:var(--text); font-size:clamp(17px,1.55vw,22px); font-weight:850; letter-spacing:-.035em; }
.steam-showcase-meta { display:flex; justify-content:space-between; gap:12px; margin-top:20px; color:var(--dim); font-size:9px; line-height:1.5; }
.steam-friends-card { grid-area:friends; display:flex; flex-direction:column; min-height:100%; padding:12px 0 5px 24px; border-left:1px solid rgba(var(--accent-rgb),.15); }
.steam-friends-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.steam-friends-heading h3 { margin:7px 0 0; color:var(--text); font-size:clamp(22px,2vw,27px); letter-spacing:-.045em; }
.steam-friends-count { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:30px; padding:0 9px; border:1px solid rgba(var(--accent-rgb),.23); border-radius:10px; color:var(--accent); background:rgba(var(--accent-rgb),.07); font-size:12px; font-weight:900; }
.steam-friends-note { margin:10px 0 15px; color:var(--dim); font-size:10px; line-height:1.55; }
.steam-friends-list { display:flex; flex:1 1 auto; flex-direction:column; gap:0; min-height:160px; max-height:740px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(var(--accent-rgb),.3) transparent; }
.steam-friend-row { display:grid; grid-template-columns:44px minmax(0,1fr) 8px; align-items:center; gap:11px; min-width:0; padding:10px 5px; border:0; border-bottom:1px solid rgba(var(--accent-rgb),.12); border-radius:0; color:var(--text); background:transparent; text-decoration:none; transition:background .2s ease,transform .2s ease; }
.steam-friend-row:hover { transform:translateX(2px); background:linear-gradient(90deg,rgba(var(--accent-rgb),.07),transparent); }
.steam-friend-avatar-wrap { display:grid; place-items:center; width:44px; height:44px; overflow:hidden; border:1px solid rgba(var(--accent-rgb),.17); border-radius:14px; color:var(--accent); background:rgba(var(--accent-rgb),.08); }
.steam-friend-avatar { width:100%; height:100%; object-fit:cover; }
.steam-friend-avatar[hidden] { display:none; }
.steam-friend-avatar-fallback { font-size:16px; font-weight:900; }
.steam-friend-copy { display:flex; flex-direction:column; gap:5px; min-width:0; }
.steam-friend-copy strong { overflow:hidden; color:var(--text); font-size:12px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.steam-friend-copy small { overflow:hidden; color:var(--dim); font-size:10px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.steam-friend-presence { width:7px; height:7px; border-radius:50%; background:#777386; }
.steam-friend-presence.is-online { background:#7ab7ff; box-shadow:0 0 9px rgba(122,183,255,.55); }
.steam-friend-presence.is-playing { background:#6ee7a3; box-shadow:0 0 10px rgba(110,231,163,.6); }
.steam-friends-empty { display:flex; align-items:center; gap:12px; padding:17px 4px; color:var(--muted); }
.steam-friends-empty .steam-recent-empty-symbol { width:38px; height:38px; font-size:14px; }
.steam-friends-empty strong,.steam-friends-empty small { display:block; }
.steam-friends-empty strong { color:var(--text); font-size:12px; line-height:1.45; }
.steam-friends-empty small { margin-top:6px; color:var(--dim); font-size:10px; line-height:1.6; }
.steam-friends-profile-link { margin-top:18px; padding:12px 12px; font-size:10px; background:rgba(var(--accent-rgb),.045); }
.steam-current-card { grid-area:current; padding:4px 24px 22px 8px; border-top:1px solid rgba(var(--accent-rgb),.15); }
.steam-current-card .steam-card-heading { margin:0 0 18px; padding-top:22px; }
.steam-game-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid rgba(var(--accent-rgb),.16); border-radius:8px; color:var(--dim); background:rgba(var(--accent-rgb),.045); font-size:9px; letter-spacing:.08em; white-space:nowrap; }
.steam-showcase.is-playing .steam-game-badge { border-color:rgba(111,239,185,.28); color:#8bebba; background:rgba(111,239,185,.055); }
.steam-current-content { display:grid; grid-template-columns:minmax(0,.93fr) minmax(0,1fr); align-items:stretch; gap:22px; min-height:250px; }
.steam-game-visual { position:relative; display:grid; place-items:center; min-width:0; min-height:230px; overflow:hidden; isolation:isolate; border:0; border-radius:21px; background:radial-gradient(circle at 50% 42%,rgba(var(--accent-rgb),.26),transparent 42%),linear-gradient(145deg,rgba(17,16,31,.8),rgba(25,18,47,.7) 55%,rgba(11,19,35,.8)); box-shadow:inset 0 0 70px rgba(var(--accent-rgb),.055),0 0 38px rgba(var(--accent-rgb),.055); }
.steam-game-visual::after { position:absolute; z-index:1; inset:0; background:linear-gradient(0deg,rgba(7,6,15,.28),transparent 70%); content:""; pointer-events:none; }
.steam-game-visual img { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; opacity:.96; transition:transform 1s ease,opacity .4s ease; }
.steam-current-card:hover .steam-game-visual img { transform:scale(1.035); }
.steam-game-visual-overlay { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:5px; color:white; text-shadow:0 7px 25px rgba(0,0,0,.35); }
.steam-game-visual-overlay span { font-size:10px; font-weight:900; letter-spacing:.3em; }
.steam-game-visual-overlay strong { font-size:clamp(56px,6vw,84px); line-height:1.05; font-weight:500; }
.steam-current-copy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.steam-showcase-status { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:8px 11px; border:1px solid rgba(var(--accent-rgb),.18); border-radius:999px; color:var(--muted); background:rgba(var(--accent-rgb),.04); font-size:9px; font-weight:900; letter-spacing:.1em; }
.steam-showcase-status i { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:#8e8b9e; }
.steam-showcase-status.is-playing i { background:#62e7a1; box-shadow:0 0 11px rgba(98,231,161,.7); animation:dot-breathe 1.8s ease-in-out infinite; }
.steam-showcase-status.is-online i { background:#7ab7ff; box-shadow:0 0 8px rgba(122,183,255,.5); }
.steam-current-copy h3 { margin:17px 0 10px; color:var(--text); font-size:clamp(23px,2.45vw,32px); line-height:1.13; letter-spacing:-.045em; overflow-wrap:anywhere; }
.steam-current-copy p { margin:0; color:var(--muted); font-size:12px; line-height:1.75; }
.steam-current-game-link { margin-top:auto; padding:10px 13px; font-size:10px; }
.steam-recent-wrap { grid-area:recent; padding:20px 8px 20px 22px; border-top:1px solid rgba(var(--accent-rgb),.15); }
.steam-recent-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:17px; }
.steam-recent-heading h3 { margin:6px 0 0; color:var(--text); font-size:clamp(21px,2vw,26px); letter-spacing:-.04em; }
.steam-recent-heading > span { color:var(--dim); font-size:9px; font-weight:850; letter-spacing:.1em; white-space:nowrap; }
.steam-recent-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px; row-gap:0; }
.steam-recent-item { display:flex; align-items:center; gap:12px; min-width:0; min-height:78px; overflow:hidden; padding:10px 5px; border:0; border-bottom:1px solid rgba(var(--accent-rgb),.12); border-radius:0; color:var(--text); background:transparent; text-decoration:none; transition:transform .22s ease,background .22s ease; }
.steam-recent-item:hover { transform:translateX(2px); background:linear-gradient(90deg,rgba(var(--accent-rgb),.065),transparent); }
.steam-recent-image { display:block; flex:0 0 auto; width:80px; height:50px; border-radius:9px; object-fit:cover; background:linear-gradient(140deg,var(--bg-soft),rgba(var(--accent-rgb),.12)); }
.steam-recent-image[hidden] { display:none; }
.steam-recent-copy { display:flex; flex-direction:column; gap:5px; min-width:0; }
.steam-recent-copy strong { display:-webkit-box; overflow:hidden; color:var(--text); font-size:12px; line-height:1.4; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.steam-recent-copy small { color:var(--dim); font-size:10px; line-height:1.45; }
.steam-recent-arrow { align-self:center; margin-left:auto; color:var(--accent); font-size:13px; }
.steam-recent-empty { display:flex; align-items:center; gap:12px; grid-column:1/-1; padding:17px 3px; border:0; border-radius:0; color:var(--muted); background:transparent; }
.steam-recent-empty-symbol { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border-radius:12px; color:var(--accent); background:rgba(var(--accent-rgb),.09); }
.steam-recent-empty strong,.steam-recent-empty small { display:block; }
.steam-recent-empty strong { color:var(--text); font-size:12px; line-height:1.45; }
.steam-recent-empty small { margin-top:6px; color:var(--dim); font-size:10px; line-height:1.6; }
.steam-showcase.has-error .steam-profile-card,.steam-showcase.has-error .steam-stats-card { opacity:.9; }

@media (max-width:1240px) {
  .steam-showcase.wrap { width:calc(100% - 48px); }
  .steam-layout { grid-template-columns:minmax(240px,.85fr) minmax(360px,1.2fr) minmax(230px,.78fr); gap:25px; }
  .steam-profile-avatar-frame { width:86px; height:86px; border-radius:23px; }
  .steam-current-content { gap:16px; }
  .steam-stat { padding-inline:10px; }
}
@media (max-width:1030px) {
  .steam-layout { grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr); grid-template-rows:auto auto auto; grid-template-areas:"profile stats" "current recent" "friends friends"; gap:25px 30px; }
  .steam-friends-card { min-height:0; padding:20px 8px 8px; border-top:1px solid rgba(var(--accent-rgb),.15); border-left:0; }
  .steam-friends-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:22px; max-height:400px; }
}
@media (max-width:700px) {
  .steam-showcase.wrap { width:calc(100% - 32px); margin-bottom:36px; padding-top:8px; }
  .steam-showcase-header { align-items:flex-start; flex-direction:column; gap:15px; margin-bottom:20px; }
  .steam-showcase-intro h2 { font-size:clamp(30px,8vw,40px); }
  .steam-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; grid-template-areas:"profile" "stats" "current" "recent" "friends"; gap:22px; }
  .steam-profile-card { padding:8px 0 20px; gap:16px; }
  .steam-profile-avatar-frame { width:78px; height:78px; border-radius:21px; }
  .steam-profile-copy h3 { font-size:25px; }
  .steam-stats-card,.steam-current-card,.steam-recent-wrap,.steam-friends-card { padding:18px 0; }
  .steam-stats-card { border-bottom:1px solid rgba(var(--accent-rgb),.15); }
  .steam-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:12px; }
  .steam-stat { padding:10px 12px; border-left:0; border-bottom:1px solid rgba(var(--accent-rgb),.12); }
  .steam-stat:nth-child(odd) { padding-left:0; }
  .steam-stat span { font-size:10px; }
  .steam-stat strong { font-size:20px; }
  .steam-showcase-meta { flex-direction:row; gap:10px; font-size:9px; }
  .steam-current-card { padding-top:0; }
  .steam-current-content { grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:16px; min-height:220px; }
  .steam-game-visual { min-height:200px; }
  .steam-current-copy h3 { font-size:24px; }
  .steam-current-copy p { font-size:11px; }
  .steam-recent-wrap { border-top:1px solid rgba(var(--accent-rgb),.15); }
  .steam-recent-list { grid-template-columns:1fr; }
  .steam-recent-item { min-height:78px; }
  .steam-friends-card { border-top:1px solid rgba(var(--accent-rgb),.15); }
  .steam-friends-list { grid-template-columns:1fr; max-height:400px; }
  .steam-friend-row { grid-template-columns:42px minmax(0,1fr) 8px; }
  .steam-friend-avatar-wrap { width:42px; height:42px; }
  .steam-friend-copy strong { font-size:12px; }
  .steam-friend-copy small { font-size:10px; }
}
@media (max-width:420px) {
  .steam-current-content { grid-template-columns:1fr; }
  .steam-game-visual { min-height:215px; }
  .steam-current-copy { min-height:185px; }
  .steam-recent-heading > span { display:none; }
  .steam-profile-card { align-items:flex-start; }
  .steam-showcase-meta { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  .steam-showcase::before,.steam-showcase::after { animation:none; }
}

/* Layout refinement: use the wide canvas better and give it a warm pink-violet glow. */
.steam-showcase.wrap {
  width:calc(100% - clamp(30px,3.2vw,58px));
  margin-bottom:76px;
}
.steam-showcase::before {
  top:-3%;
  left:3%;
  width:56%;
  height:78%;
  opacity:.58;
  filter:blur(88px);
  background:
    radial-gradient(ellipse at 24% 20%,rgba(255,91,181,.24),transparent 58%),
    radial-gradient(ellipse at 72% 74%,rgba(188,112,255,.15),transparent 66%);
  animation:steam-atmosphere 22s ease-in-out infinite alternate;
}
.steam-showcase::after {
  right:1%;
  bottom:-3%;
  width:54%;
  height:76%;
  opacity:.48;
  filter:blur(92px);
  background:
    radial-gradient(ellipse at 62% 40%,rgba(255,78,177,.19),transparent 58%),
    radial-gradient(ellipse at 28% 75%,rgba(124,105,255,.13),transparent 67%);
  animation:steam-atmosphere 26s ease-in-out infinite alternate-reverse;
}
.steam-layout {
  grid-template-columns:minmax(320px,.98fr) minmax(470px,1.42fr) minmax(285px,.78fr);
  grid-template-rows:minmax(180px,210px) minmax(405px,auto);
  gap:24px 30px;
}
.steam-profile-card { align-items:center; padding-block:10px 18px; }
.steam-stats-card { padding-top:9px; }
.steam-stat-grid { min-height:105px; align-items:center; }
.steam-stat { padding-top:14px; padding-bottom:14px; }
.steam-friends-card { padding-left:26px; }
.steam-friends-list { max-height:780px; }
.steam-current-card { padding-top:0; }
.steam-current-content { min-height:285px; grid-template-columns:minmax(0,.95fr) minmax(0,1fr); gap:25px; }
.steam-game-visual { min-height:268px; border-radius:25px; }
.steam-current-copy { justify-content:center; }
.steam-recent-wrap { padding-top:24px; }
.steam-recent-list { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:26px; }
.steam-recent-item { min-height:88px; padding-block:13px; }
.steam-recent-image { width:92px; height:58px; border-radius:11px; }
.steam-recent-copy strong { font-size:13px; }
.steam-recent-copy small { font-size:11px; }
.steam-friend-row { grid-template-columns:48px minmax(0,1fr) 8px; min-height:66px; padding-block:11px; }
.steam-friend-avatar-wrap { width:48px; height:48px; border-radius:15px; }
.steam-friend-copy strong { font-size:13px; }
.steam-friend-copy small { font-size:11px; }
.steam-friends-heading h3 { font-size:clamp(24px,2.2vw,30px); }
.steam-friends-note { font-size:11px; }
.steam-card-eyebrow { font-size:11px; }
.steam-profile-handle { font-size:12px; }
.steam-profile-state,.steam-level-chip { font-size:10px; }
.steam-stat span { font-size:12px; }
.steam-stat strong { font-size:clamp(18px,1.7vw,24px); }
.steam-card-heading { font-size:12px; }
.steam-card-heading > span:last-child { font-size:10px; }
.steam-showcase-meta { font-size:10px; }

@media (max-width:1240px) {
  .steam-showcase.wrap { width:calc(100% - 40px); }
  .steam-layout {
    grid-template-columns:minmax(240px,.85fr) minmax(360px,1.2fr) minmax(230px,.78fr);
    grid-template-rows:minmax(175px,215px) minmax(385px,auto);
    gap:22px;
  }
  .steam-current-content { gap:16px; }
  .steam-game-visual { min-height:245px; }
  .steam-friend-row { grid-template-columns:42px minmax(0,1fr) 7px; }
  .steam-friend-avatar-wrap { width:42px; height:42px; }
}
@media (max-width:1030px) {
  .steam-layout {
    grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);
    grid-template-rows:minmax(180px,215px) auto auto;
    gap:26px 28px;
  }
  .steam-current-content { min-height:255px; }
  .steam-game-visual { min-height:230px; }
  .steam-friends-card { padding-left:0; }
}
@media (max-width:700px) {
  .steam-showcase.wrap { width:calc(100% - 32px); }
  .steam-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; gap:22px; }
  .steam-current-content { min-height:225px; gap:16px; }
  .steam-game-visual { min-height:210px; }
  .steam-recent-item { min-height:82px; }
  .steam-recent-image { width:78px; height:52px; }
  .steam-recent-copy strong { font-size:12px; }
  .steam-recent-copy small { font-size:10px; }
}
@media (prefers-reduced-motion: reduce) {
  .steam-showcase::before,.steam-showcase::after { animation:none; }
}

/* The ticker is deliberately continuous, including in reduced-motion environments. */
.ticker-track { width:max-content; min-width:max-content; animation-name:ticker-slide !important; animation-duration:42s !important; animation-timing-function:linear !important; animation-iteration-count:infinite !important; animation-play-state:running !important; }
.ticker-group { flex:0 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation-duration:54s !important; animation-iteration-count:infinite !important; }
  .social-accordion-panel,.social-accordion-chevron,.steam-profile-link,.steam-current-game-link,.steam-friends-profile-link,.steam-recent-item { transition:none; }
  .social-loading-orb,.steam-showcase-status.is-playing i { animation:none; }
}