:root {
  --ink: #061127;
  --ink-2: #0a1b3f;
  --cobalt: #1558ff;
  --blue: #7798ff;
  --cream: #f4efdf;
  --coral: #ff6b4a;
  --muted: #9aa7bf;
  --line: rgba(244, 239, 223, 0.16);
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: hidden; touch-action: pan-y; scroll-behavior: smooth; }
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-bottom: 108px;
  background: var(--ink);
  color: var(--cream);
  font-family: "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--coral); color: var(--ink); }

main {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 8%, rgba(21, 88, 255, 0.34), transparent 30rem),
    linear-gradient(180deg, #061127 0%, #07142d 45%, #061127 100%);
}
main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .16;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
}

.site-header {
  position: sticky;
  top: 20px;
  z-index: 20;
  width: calc(100% - 64px);
  max-width: 1480px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(6, 17, 39, .72);
  box-shadow: 0 20px 50px rgba(0,0,0,.16);
  backdrop-filter: blur(20px);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: max-content; }
.brand-mark {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink); background: var(--cream);
}
.brand-mark img { width: 21px; height: 25px; object-fit: contain; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; }
.brand small { color: var(--muted); text-transform: uppercase; font-size: 8px; letter-spacing: .22em; margin-top: 3px; }
nav { display: flex; align-items: center; gap: 8px; }
nav a { padding: 11px 14px; color: #b6c0d2; border-radius: 18px; font-size: 13px; transition: .25s ease; }
nav a:hover, nav a:focus-visible { color: var(--cream); background: rgba(255,255,255,.08); }
nav a.active { position: relative; color: var(--cream); background: rgba(119,152,255,.14); box-shadow: inset 0 0 0 1px rgba(119,152,255,.78), 0 0 0 8px rgba(119,152,255,.055), 0 0 30px rgba(21,88,255,.18); }
nav a.active::after { content:""; position:absolute; left:50%; bottom:-7px; width:4px; height:4px; border-radius:50%; background:var(--blue); transform:translateX(-50%); box-shadow:0 0 10px var(--blue); }
nav .nav-contact { border: 1px solid rgba(255,255,255,.2); color: var(--cream); }
.language-switch { flex:0 0 auto; padding:5px; display:flex; align-items:center; gap:3px; border:1px solid rgba(255,255,255,.14); border-radius:15px; background:rgba(255,255,255,.035); }
.language-switch a { min-width:30px; padding:7px 8px; border-radius:10px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.1em; text-align:center; transition:.25s ease; }
.language-switch span { color:rgba(255,255,255,.2); font-size:9px; }
.language-switch a:hover { color:var(--cream); }
.language-switch a.active { color:var(--ink); background:var(--cream); box-shadow:0 7px 20px rgba(0,0,0,.2); }
.admin-lock-trigger { width:30px; height:30px; margin-left:4px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:10px; color:var(--cream); background:rgba(255,255,255,.045); cursor:pointer; transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.admin-lock-trigger:hover,.admin-lock-trigger:focus-visible { transform:translateY(-1px); border-color:var(--blue); background:rgba(119,152,255,.13); }
.admin-lock-trigger i { position:relative; width:11px; height:9px; margin-top:4px; display:block; border:1.5px solid currentColor; border-radius:2px; }
.admin-lock-trigger i::before { content:""; position:absolute; left:1.5px; top:-7px; width:5px; height:7px; border:1.5px solid currentColor; border-bottom:0; border-radius:6px 6px 0 0; }

body.admin-pin-open { overflow:hidden; }
.admin-pin-modal[hidden] { display:none; }
.admin-pin-modal { position:fixed; z-index:10000; inset:0; display:grid; place-items:center; padding:20px; }
.admin-pin-backdrop { position:absolute; inset:0; border:0; background:rgba(1,7,19,.82); backdrop-filter:blur(18px); cursor:default; }
.admin-pin-dialog { position:relative; z-index:1; width:min(470px,100%); padding:34px; border:1px solid color-mix(in srgb,var(--blue) 35%,transparent); border-radius:26px; color:var(--cream); background:radial-gradient(circle at 86% 12%,color-mix(in srgb,var(--blue) 14%,transparent),transparent 35%),var(--surface); box-shadow:0 35px 110px rgba(0,0,0,.6); animation:adminPinIn .28s cubic-bezier(.16,1,.3,1); }
.admin-pin-close { position:absolute; top:18px; right:18px; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:transparent; font-size:20px; cursor:pointer; }
.admin-pin-logo { width:50px; height:50px; display:grid; place-items:center; border-radius:50%; background:var(--cream); }
.admin-pin-logo img { width:25px; height:30px; object-fit:contain; }
.admin-pin-dialog>p { margin:27px 0 10px; color:var(--coral); font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.admin-pin-dialog h2 { margin:0; font:400 40px/1 Georgia,serif; }
.admin-pin-dialog>div { margin-top:15px; color:var(--muted); font-size:12px; line-height:1.65; }
.admin-pin-dialog label { margin-top:23px; display:grid; gap:9px; }
.admin-pin-dialog label span { color:color-mix(in srgb,var(--blue) 70%,var(--cream)); font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.admin-pin-dialog input { width:100%; padding:16px; border:1px solid var(--line); border-radius:13px; color:var(--cream); background:color-mix(in srgb,var(--background) 82%,transparent); outline:0; text-align:center; font:700 24px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.28em; }
.admin-pin-dialog input:focus { border-color:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 11%,transparent); }
.admin-pin-error { min-height:18px; margin-top:10px; display:block; color:var(--coral); font-size:10px; line-height:1.5; }
.admin-pin-submit { width:100%; margin-top:8px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; border:0; border-radius:13px; color:var(--ink); background:var(--cream); font-weight:800; cursor:pointer; transition:.25s ease; }
.admin-pin-submit:hover { transform:translateY(-2px); box-shadow:0 14px 35px rgba(0,0,0,.25); }
.admin-pin-submit:disabled { opacity:.62; cursor:wait; transform:none; }
.admin-pin-dialog.is-loading .admin-pin-submit i { animation:loaderOrbit .7s linear infinite; }
@keyframes adminPinIn { from { opacity:0; transform:translateY(18px) scale(.98); } to { opacity:1; transform:none; } }

.hero {
  min-height: 900px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 130px 42px 70px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: #b9c3d5; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow > span { width: 38px; height: 1px; background: var(--coral); }
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.055em; }
h1 { margin-top: 26px; font-size: clamp(64px, 7.5vw, 116px); line-height: .82; }
h1 .title-line { display: block; }
h1 em { display: block; padding-left: 14%; color: transparent; -webkit-text-stroke: 1px rgba(244,239,223,.48); font-weight: 400; }
h1 > span { display: block; color: var(--blue); }
.hero-intro { max-width: 580px; margin: 38px 0 0; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.35); color: #b5c0d4; font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 170px; padding: 16px 19px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; font-size: 13px; font-weight: 700; transition: .28s ease; }
.button:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.42); }
.button-light { background: var(--cream); color: var(--ink); }
.button-ghost { background: rgba(255,255,255,.03); }

.portrait-stage { position: relative; min-height: 650px; display: grid; place-items: center; }
.portrait-card { position: relative; z-index: 2; width: min(76%, 470px); aspect-ratio: .76; overflow: hidden; border-radius: 180px 180px 28px 28px; background: linear-gradient(145deg, #77849a, #263757 48%, #101b32); box-shadow: 0 50px 100px rgba(0,0,0,.35); }
.portrait-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255,255,255,.16), transparent 32%, rgba(0,0,0,.18)); }
.portrait-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.portrait-light { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; right: -20%; top: 14%; background: rgba(21,88,255,.68); filter: blur(45px); }
.portrait-silhouette { position: absolute; inset: 8% 13% 0; }
.portrait-head { position: absolute; left: 32%; top: 10%; width: 36%; aspect-ratio: .7; border-radius: 50%; background: #e2b998; box-shadow: 0 0 0 20px #0b1426; }
.portrait-body { position: absolute; left: 8%; right: 8%; bottom: -8%; height: 64%; border-radius: 50% 50% 0 0; background: #071126; }
.portrait-code { position: absolute; z-index: 2; right: 24px; bottom: 20px; display:flex; align-items:center; gap:7px; font: 9px monospace; letter-spacing: .2em; }
.portrait-code img { width: 13px; height: 16px; object-fit:contain; filter:invert(1) sepia(.12); }
.portrait-code b { font:inherit; }
.portrait-hint { position: absolute; z-index: 2; left: 22px; bottom: 20px; max-width: 120px; color: rgba(244,239,223,.5); font-size: 8px; text-transform: uppercase; letter-spacing: .14em; }
.orbit { position: absolute; border: 1px solid rgba(119,152,255,.22); border-radius: 34px; animation: drift 9s ease-in-out infinite alternate; }
.orbit-one { width: 72%; height: 74%; transform: rotate(-8deg); }
.orbit-two { width: 84%; height: 62%; transform: rotate(9deg); animation-delay: -3s; }
.focus-card { position: absolute; z-index: 4; left: 2%; bottom: 50px; width: 290px; padding: 24px; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; background: rgba(10,27,63,.84); backdrop-filter: blur(16px); box-shadow: 0 20px 50px rgba(0,0,0,.24); }
.focus-card small, .focus-card strong, .focus-card span { display: block; }
.focus-card small { color: var(--muted); text-transform: uppercase; letter-spacing: .18em; font-size: 9px; }
.focus-card strong { margin: 12px 0 22px; font: 24px/1.12 Georgia, serif; }
.focus-card span { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.focus-card b { color: var(--muted); font-weight: 400; }
.available { position: absolute; right: 2%; bottom: 10px; color: #b9c3d5; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
.available span { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #4cff9a; box-shadow: 0 0 14px #4cff9a; }

.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ticker-track { width:max-content; display:flex; align-items:center; animation:marquee-loop 44s linear infinite; will-change:transform; }
.ticker-group { flex:0 0 auto; padding:18px 32px 18px 0; display:flex; align-items:center; gap:32px; }
.ticker span { color: #c1cad8; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 700; }
.ticker i { color: var(--coral); font-style: normal; }

.section { max-width: 1480px; margin: 0 auto; padding: 130px 42px; border-bottom: 1px solid var(--line); }
.section-label { display: flex; gap: 12px; align-items: center; color: var(--muted); text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; }
.section-label span { color: var(--coral); }
.about-grid { margin-top: 50px; display: grid; grid-template-columns: 1fr .8fr; gap: 12vw; align-items: start; }
.about h2, .section-heading h2, .album-heading h2, .contact h2 { font-size: clamp(52px, 6vw, 88px); line-height: .95; }
h2 em { color: var(--blue); font-weight: 400; }
.about-copy { padding-top: 14px; }
.about-copy > p { margin: 0 0 22px; color: #b5c0d4; font-size: 17px; line-height: 1.8; }
.about-facts { margin-top: 42px; padding-top: 24px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.about-facts span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.about-facts b { display: block; margin-bottom: 7px; color: var(--cream); font-size: 12px; text-transform: none; letter-spacing: 0; }

.section-heading, .album-heading { margin-top: 50px; display: flex; justify-content: space-between; align-items: end; gap: 50px; }
.section-heading > p, .album-heading > p { max-width: 420px; margin: 0; color: var(--muted); line-height: 1.7; }
.experience-grid { position:relative; margin-top:70px; display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:34px; align-items:start; }
.experience-grid::before { content:""; position:absolute; z-index:-1; top:-80px; left:-90px; width:360px; height:360px; pointer-events:none; border-radius:50%; background:radial-gradient(circle,rgba(var(--theme-accent-rgb),.09),transparent 68%); filter:blur(8px); }
.services-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; counter-reset:services; }
.service-card { --card-glow:rgba(var(--theme-accent-rgb),.18); position:relative; min-height:282px; padding:22px 24px 25px; overflow:hidden; isolation:isolate; border:1px solid rgba(var(--theme-accent-rgb),.24); border-radius:25px; background:linear-gradient(145deg,rgba(var(--theme-surface-rgb),.58),rgba(var(--theme-bg-rgb),.18) 64%),radial-gradient(circle at 86% 12%,var(--card-glow),transparent 28%); box-shadow:inset 0 1px rgba(255,255,255,.035),0 16px 48px rgba(0,0,0,.1); transition:border-color .4s ease,transform .45s cubic-bezier(.16,1,.3,1),box-shadow .4s ease; }
.service-card:nth-child(3n+2) { --card-glow:rgba(var(--theme-accent-strong-rgb,var(--theme-accent-rgb)),.16); }
.service-card:nth-child(3n+3) { --card-glow:rgba(var(--theme-detail-rgb,var(--theme-accent-rgb)),.14); }
.service-card::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.35; background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:24px 24px; -webkit-mask-image:linear-gradient(135deg,#000,transparent 64%); mask-image:linear-gradient(135deg,#000,transparent 64%); transition:opacity .4s ease,transform .7s cubic-bezier(.16,1,.3,1); }
.service-card::after { content:""; position:absolute; z-index:2; inset:0 auto auto 24px; width:70px; height:1px; background:linear-gradient(90deg,var(--blue),transparent); box-shadow:0 0 18px rgba(var(--theme-accent-rgb),.4); transform:scaleX(.45); transform-origin:left; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.service-card:hover { border-color:rgba(var(--theme-accent-rgb),.6); box-shadow:0 28px 75px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.06),0 0 44px rgba(var(--theme-accent-rgb),.07); transform:translateY(-9px); }
.service-card:hover::before { opacity:.72; transform:scale(1.06) rotate(-1deg); }
.service-card:hover::after { transform:scaleX(1); }
.service-card header { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.service-card header span { max-width:72%; overflow:hidden; color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.18em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.service-card header b { display:grid; place-items:center; width:31px; height:31px; border:1px solid rgba(var(--theme-accent-rgb),.2); border-radius:50%; color:var(--coral); background:rgba(var(--theme-bg-rgb),.35); font:9px monospace; }
.service-symbol { position:absolute; z-index:0; top:54px; right:22px; width:66px; height:66px; display:grid; place-items:center; border:1px solid rgba(var(--theme-accent-rgb),.22); border-radius:19px; color:var(--blue); background:linear-gradient(145deg,rgba(var(--theme-accent-rgb),.15),rgba(var(--theme-bg-rgb),.42)); box-shadow:inset 0 1px rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.18); transform:rotate(3deg); transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .4s ease,box-shadow .4s ease; }
.service-symbol::before,.service-symbol::after { content:""; position:absolute; border:1px solid rgba(var(--theme-accent-rgb),.17); border-radius:inherit; }
.service-symbol::before { inset:7px -8px -7px 8px; }
.service-symbol::after { width:5px; height:5px; right:9px; bottom:9px; border:0; border-radius:50%; background:var(--coral); box-shadow:0 0 12px rgba(255,107,74,.5); }
.service-symbol i { font:400 20px/1 "Segoe UI",sans-serif; font-style:normal; letter-spacing:-.08em; }
.service-symbol span { position:absolute; left:-18px; width:22px; height:1px; background:linear-gradient(90deg,transparent,var(--blue)); }
.service-card:hover .service-symbol { border-color:rgba(var(--theme-accent-rgb),.58); box-shadow:inset 0 1px rgba(255,255,255,.08),0 20px 46px rgba(var(--theme-accent-rgb),.13); transform:translateY(-5px) rotate(-3deg) scale(1.04); }
.service-card h3 { position:relative; z-index:1; max-width:calc(100% - 82px); min-height:58px; margin:38px 0 24px; font:27px/1.08 Georgia,serif; text-wrap:balance; }
.service-card ul { position:relative; z-index:1; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; list-style:none; }
.service-card li { position:relative; padding:8px 10px 8px 20px; border:1px solid rgba(var(--theme-accent-rgb),.16); border-radius:999px; color:var(--muted); background:rgba(var(--theme-accent-rgb),.045); font-size:9px; line-height:1; transition:border-color .25s ease,color .25s ease,background .25s ease,transform .25s ease; }
.service-card li::before { content:""; position:absolute; left:9px; top:50%; width:4px; height:4px; border-radius:50%; background:var(--blue); box-shadow:0 0 7px rgba(var(--theme-accent-rgb),.48); transform:translateY(-50%); }
.service-card:hover li { color:var(--cream); border-color:rgba(var(--theme-accent-rgb),.28); background:rgba(var(--theme-accent-rgb),.08); transform:translateY(-1px); }
.service-card-line { position:absolute; right:0; bottom:0; left:0; height:3px; opacity:.5; background:linear-gradient(90deg,transparent,var(--blue) 50%,transparent); transform:scaleX(.25); transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease; }
.service-card:hover .service-card-line { opacity:1; transform:scaleX(.8); }
.timeline article { display: grid; grid-template-columns: 140px 1fr 30px; gap: 24px; align-items: center; padding: 26px 4px; border-top: 1px solid var(--line); transition: .3s ease; }
.timeline article:last-child { border-bottom: 1px solid var(--line); }
.timeline article:hover { padding-left: 18px; background: linear-gradient(90deg, rgba(21,88,255,.11), transparent); }
.timeline article > span { color: var(--muted); font-size: 11px; }
.timeline h3 { margin: 0 0 8px; font: 25px Georgia, serif; }
.timeline p { margin: 0; color: var(--muted); font-size: 13px; }
.timeline b { color: var(--coral); font: 10px monospace; }
.cv-card { position:sticky; top:130px; min-height:330px; padding:28px; display:flex; flex-direction:column; border-radius:26px; color:var(--ink); background:var(--cream); transform:rotate(1.5deg); transition:.3s ease; }
.cv-card:hover { transform: rotate(0) translateY(-5px); }
.cv-card p { margin: 0 0 auto; font-size: 10px; text-transform: uppercase; letter-spacing: .15em; }
.cv-card strong { display: block; font: 34px/1 Georgia, serif; }
.cv-card > span { margin: 18px 0 28px; color: #5c6370; font-size: 12px; line-height: 1.5; }
.cv-card button { display: flex; justify-content: space-between; border: 0; border-top: 1px solid rgba(6,17,39,.3); padding: 18px 0 0; color: var(--ink); background: transparent; font-weight: 700; cursor: not-allowed; }

body:has(.music-player){padding-bottom:110px}.music-player { position:fixed; z-index:120; right:0; bottom:14px; left:50%; width:min(1160px,calc(100% - 28px)); min-height:78px; padding:7px 13px 7px 8px; display:grid; grid-template-columns:128px 42px minmax(180px,1.45fr) 132px minmax(180px,1fr) auto; grid-template-areas:"cover queue meta controls timeline links"; align-items:center; gap:14px; border:1px solid rgba(119,152,255,.3); border-radius:24px; background:linear-gradient(115deg,rgba(8,22,49,.97),rgba(9,29,68,.94)); box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 50px rgba(21,88,255,.13); backdrop-filter:blur(24px); transform:translateX(-50%); }
.music-player::before { content:""; position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:inherit; pointer-events:none; background:radial-gradient(circle at 12% 20%,rgba(119,152,255,.19),transparent 28%),linear-gradient(90deg,transparent,rgba(255,255,255,.025),transparent); }
.music-video { grid-area:cover; width:128px; height:64px; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:17px; background:#030914; }
.music-video iframe { width:128px; height:72px; margin-top:-4px; display:block; }
.queue-toggle,.music-controls button,.music-queue button { border:0; color:var(--cream); cursor:pointer; }
.queue-toggle { grid-area:queue; width:42px; height:42px; padding:11px; display:flex; flex-direction:column; justify-content:center; gap:4px; border:1px solid rgba(255,255,255,.13); border-radius:14px; background:rgba(255,255,255,.035); }
.queue-toggle span { width:100%; height:1px; display:block; background:currentColor; transition:.25s ease; }
.queue-toggle:hover { color:var(--blue); border-color:rgba(119,152,255,.5); }
.music-meta { grid-area:meta; min-width:0; }
.music-meta small,.music-meta strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.music-meta small { margin-bottom:6px; color:var(--blue); font-size:8px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.music-meta strong { font:500 16px/1.25 Georgia,serif; }
.music-controls { grid-area:controls; display:flex; align-items:center; justify-content:center; gap:8px; }
.music-controls button { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12); border-radius:50%; background:rgba(255,255,255,.04); font-size:19px; transition:.25s ease; }
.music-controls .music-play { width:46px; height:46px; padding-left:2px; color:var(--ink); border-color:transparent; background:var(--cream); font-size:14px; font-weight:800; box-shadow:0 7px 24px rgba(0,0,0,.25); }
.music-prev::before,.music-next::before { content:""; width:7px; height:7px; display:block; border-bottom:1.7px solid currentColor; border-left:1.7px solid currentColor; transform:rotate(45deg) translate(1px,-1px); }
.music-next::before { transform:rotate(225deg) translate(1px,-1px); }
.music-play { font-size:0!important; padding:0!important; }
.music-play::before { content:""; width:0; height:0; display:block; margin-left:3px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid currentColor; }
.music-player.is-playing .music-play::before { width:11px; height:14px; margin-left:0; border:0; background:linear-gradient(90deg,currentColor 0 3px,transparent 3px 8px,currentColor 8px 11px); border-radius:1px; }
.music-controls button:hover { color:var(--ink); background:var(--blue); transform:scale(1.06); }
.music-player.is-playing .music-play { color:var(--cream); background:var(--cobalt); box-shadow:0 0 24px rgba(21,88,255,.45); }
.music-timeline { grid-area:timeline; min-width:0; display:grid; grid-template-columns:1fr; gap:5px; }
.music-progress { width:100%; height:3px; margin:0; appearance:none; border-radius:99px; outline:none; cursor:pointer; background:linear-gradient(90deg,var(--blue),rgba(255,255,255,.16)); accent-color:var(--blue); }
.music-progress::-webkit-slider-thumb { width:11px; height:11px; appearance:none; border:2px solid var(--ink-2); border-radius:50%; background:var(--cream); box-shadow:0 0 0 2px var(--blue); }
.music-progress::-moz-range-thumb { width:9px; height:9px; border:2px solid var(--ink-2); border-radius:50%; background:var(--cream); box-shadow:0 0 0 2px var(--blue); }
.music-time { color:var(--muted); font:8px/1 monospace; text-align:right; }
.music-youtube { padding:11px 13px; border:1px solid rgba(255,255,255,.13); border-radius:13px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:.25s ease; }
.music-youtube span { color:var(--coral); }
.music-youtube:hover { color:var(--cream); border-color:rgba(255,107,74,.5); background:rgba(255,107,74,.08); }
.music-queue { position:absolute; right:0; bottom:calc(100% + 12px); width:min(520px,calc(100vw - 28px)); max-height:min(540px,70vh); padding:10px; visibility:hidden; overflow:auto; border:1px solid rgba(119,152,255,.28); border-radius:23px; opacity:0; background:rgba(5,15,35,.97); box-shadow:0 25px 80px rgba(0,0,0,.55); backdrop-filter:blur(24px); transform:translateY(14px) scale(.98); transform-origin:bottom right; transition:.32s cubic-bezier(.16,1,.3,1); }
.music-player.queue-open .music-queue { visibility:visible; opacity:1; transform:none; }
.music-queue-head { padding:8px 8px 12px 11px; display:flex; align-items:center; justify-content:space-between; color:var(--cream); font:20px Georgia,serif; }
.music-queue-head button { width:34px; height:34px; border:1px solid rgba(255,255,255,.12); border-radius:11px; background:transparent; font-size:22px; }
.queue-list { display:grid; gap:5px; }
.queue-list button { width:100%; padding:7px; display:grid; grid-template-columns:66px 1fr 30px; align-items:center; gap:12px; border-radius:14px; text-align:left; background:transparent; transition:.25s ease; }
.queue-list button:hover,.queue-list button.active { background:rgba(119,152,255,.12); }
.queue-list button.active { box-shadow:inset 2px 0 var(--blue); }
.queue-list img { width:66px; height:42px; border-radius:9px; object-fit:cover; }
.queue-list span,.queue-list span strong { min-width:0; display:block; }
.queue-list span small { color:var(--coral); font:8px monospace; }
.queue-list span strong { margin-top:3px; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.queue-list i { color:var(--blue); font-style:normal; text-align:center; }

.floating-actions { position: fixed; right: clamp(16px, 2.4vw, 34px); bottom: 108px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.float-button { width: 52px; height: 52px; padding: 0; display: flex; align-items: center; justify-content: center; gap: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; color: var(--cream); background: rgba(6,17,39,.82); box-shadow: 0 12px 40px rgba(0,0,0,.28); backdrop-filter: blur(15px); cursor: pointer; text-decoration: none; transition: width .35s cubic-bezier(.2,.8,.2,1), transform .25s ease, opacity .25s ease, background .25s ease; }
.float-button span { flex: 0 0 50px; text-align: center; font-size: 22px; line-height: 1; }
.float-button b { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font-size: 12px; transition: max-width .35s ease, opacity .25s ease, padding .35s ease; }
.float-button:hover { width: 142px; transform: translateY(-3px); }
.float-button:hover b { max-width: 86px; padding-right: 18px; opacity: 1; }
.whatsapp-button { background: rgba(21,128,61,.92); border-color: rgba(74,222,128,.42); }
.whatsapp-button:hover { background: #16a34a; }
.whatsapp-icon { display:grid; place-items:center; }
.whatsapp-icon img { width:24px; height:24px; display:block; filter:drop-shadow(0 2px 8px rgba(0,0,0,.2)); }
.back-to-top { opacity: 0; pointer-events: none; transform: translateY(10px) scale(.9); }
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top.visible:hover { transform: translateY(-3px); }
.skills-header { margin-top:128px; display:flex; justify-content:space-between; align-items:end; gap:40px; }
.skills-header span { color:var(--coral); font-size:10px; text-transform:uppercase; letter-spacing:.16em; }
.skills-header h3 { margin:8px 0 0; font:clamp(40px,4.5vw,62px)/1 Georgia,serif; letter-spacing:-.025em; }
.skills-header p { max-width:400px; margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.skills-summary { position:relative; margin-top:36px; min-height:90px; padding:18px 22px; display:grid; grid-template-columns:repeat(3,minmax(110px,170px)) 1fr; align-items:center; gap:8px; overflow:hidden; border:1px solid rgba(var(--theme-accent-rgb),.22); border-radius:22px; background:linear-gradient(105deg,rgba(var(--theme-accent-rgb),.1),rgba(var(--theme-surface-rgb),.48) 55%,rgba(var(--theme-bg-rgb),.18)); box-shadow:inset 0 1px rgba(255,255,255,.035); }
.skills-summary::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent); transform:translateX(-100%); animation:skillSummaryScan 6s ease-in-out infinite; }
.skills-summary>span { min-height:48px; padding:0 18px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--line); }
.skills-summary>span:first-child { padding-left:0; }
.skills-summary small { color:var(--muted); font-size:7px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.skills-summary b { margin-top:4px; font:27px/1 Georgia,serif; }
.skills-summary b i { margin-left:2px; color:var(--blue); font:9px "Segoe UI",sans-serif; font-style:normal; }
.skills-summary>em { justify-self:end; width:clamp(120px,24vw,360px); height:36px; opacity:.65; background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(var(--theme-accent-rgb),.48) 12px 13px),linear-gradient(90deg,transparent,var(--blue),transparent); clip-path:polygon(0 48%,7% 48%,7% 22%,14% 22%,14% 62%,21% 62%,21% 38%,28% 38%,28% 72%,35% 72%,35% 28%,42% 28%,42% 58%,49% 58%,49% 17%,56% 17%,56% 68%,63% 68%,63% 35%,70% 35%,70% 80%,77% 80%,77% 25%,84% 25%,84% 55%,91% 55%,91% 43%,100% 43%,100% 57%,0 57%); }
@keyframes skillSummaryScan { 0%,55%{transform:translateX(-100%)} 80%,100%{transform:translateX(100%)} }
.skills { margin-top:18px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.skills article { position:relative; min-height:282px; padding:18px 20px 20px; overflow:hidden; isolation:isolate; border:1px solid rgba(var(--theme-accent-rgb),.2); border-radius:23px; background:linear-gradient(155deg,rgba(var(--theme-surface-rgb),.52),rgba(var(--theme-bg-rgb),.16) 64%),radial-gradient(circle at 18% 22%,rgba(var(--theme-accent-rgb),.1),transparent 32%); box-shadow:inset 0 1px rgba(255,255,255,.035),0 14px 45px rgba(0,0,0,.1); transition:border-color .38s ease,transform .42s cubic-bezier(.16,1,.3,1),box-shadow .38s ease; }
.skills article:first-child { grid-column:span 2; }
.skills article::before { content:""; position:absolute; z-index:-1; right:-80px; bottom:-90px; width:220px; height:220px; pointer-events:none; border:1px solid rgba(var(--theme-accent-rgb),.13); border-radius:50%; box-shadow:0 0 0 28px rgba(var(--theme-accent-rgb),.035),0 0 0 62px rgba(var(--theme-accent-rgb),.025); transition:transform .6s cubic-bezier(.16,1,.3,1); }
.skills article:first-child::after { content:attr(data-level) "%"; position:absolute; right:88px; top:76px; z-index:-1; color:var(--blue); font:96px/1 Georgia,serif; letter-spacing:-.06em; opacity:.055; }
.skills article:hover { border-color:rgba(var(--theme-accent-rgb),.58); box-shadow:0 26px 68px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.06); transform:translateY(-8px); }
.skills article:hover::before { transform:translate(-14px,-10px) scale(1.08); }
.skill-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.skill-card-head span { color:var(--coral); font:8px monospace; }
.skill-card-head i { color:var(--muted); font-size:7px; font-style:normal; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.skill-top { position:relative; min-height:126px; margin-top:12px; display:flex; align-items:center; }
.skill-ring { position:relative; width:116px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--blue) calc(var(--level) * 1%),rgba(255,255,255,.075) 0); box-shadow:0 0 42px rgba(var(--theme-accent-rgb),.1); transform:rotate(-10deg); transition:filter .35s ease,transform .5s cubic-bezier(.16,1,.3,1); }
.skill-ring::before { content:""; width:91px; aspect-ratio:1; border:1px solid rgba(var(--theme-accent-rgb),.15); border-radius:50%; background:radial-gradient(circle at 35% 28%,rgba(var(--theme-accent-rgb),.13),transparent 45%),rgba(var(--theme-bg-rgb),.86); box-shadow:inset 0 0 28px rgba(0,0,0,.2); }
.skill-ring::after { content:""; position:absolute; inset:-7px; border:1px dashed rgba(var(--theme-accent-rgb),.17); border-radius:50%; }
.skill-card:hover .skill-ring { filter:drop-shadow(0 0 12px rgba(var(--theme-accent-rgb),.2)); transform:rotate(0) scale(1.04); }
.skill-ring span { position:absolute; font:27px Georgia,serif; transform:rotate(10deg); }
.skill-card:hover .skill-ring span { transform:rotate(0); }
.skill-ring small { font:9px "Segoe UI",sans-serif; }
.skills h3 { min-height:38px; margin:17px 0 8px; font-size:14px; }
.skills p { margin:0; color:var(--muted); font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; }
.skill-meter { position:absolute; right:20px; bottom:21px; left:20px; height:3px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.075); }
.skill-meter span { width:calc(var(--level) * 1%); height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,var(--blue),var(--coral)); box-shadow:0 0 12px rgba(var(--theme-accent-rgb),.3); transform:scaleX(0); transform-origin:left; animation:skillMeterIn 1.1s calc(var(--skill-order) * 90ms + 250ms) cubic-bezier(.16,1,.3,1) forwards; }
@keyframes skillMeterIn { to{transform:scaleX(1)} }
.program-icon { position:absolute; top:50%; right:4px; width:54px; height:54px; display:grid; place-items:center; border-radius:15px; font:700 21px/1 "Segoe UI",sans-serif; box-shadow:0 13px 30px rgba(0,0,0,.28); transform:translateY(-50%); transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease; }
.skill-card:hover .program-icon { transform:translateY(calc(-50% - 5px)) rotate(4deg) scale(1.08); box-shadow:0 16px 34px rgba(0,0,0,.36); }
.program-ps { color:#31a8ff; background:#001e36; border:1px solid #31a8ff; }
.program-ai { color:#ff9a00; background:#330000; border:1px solid #ff9a00; }
.program-id { color:#ff3366; background:#49021f; border:1px solid #ff3366; }
.program-ae { color:#9999ff; background:#00005b; border:1px solid #9999ff; }
.program-canva { color:#fff; border:1px solid rgba(255,255,255,.38); background:linear-gradient(135deg,#00c4cc,#7d2ae8); font:italic 700 9px/1 Georgia,serif; letter-spacing:-.03em; }
.program-capcut { overflow:hidden; border:1px solid rgba(255,255,255,.7); background:#fff; }
.program-capcut img { width:100%; height:100%; display:block; object-fit:cover; }
.program-app { color:var(--cream); background:#17284a; border:1px solid var(--line); }
.program-figma { display:grid; grid-template-columns:repeat(2,11px); grid-template-rows:repeat(3,11px); place-content:center; gap:0; background:#171717; border:1px solid rgba(255,255,255,.2); }
.program-figma i { display:block; width:11px; height:11px; }
.program-figma i:nth-child(1){background:#f24e1e;border-radius:7px 0 0 7px}.program-figma i:nth-child(2){background:#ff7262;border-radius:0 7px 7px 0}.program-figma i:nth-child(3){background:#a259ff;border-radius:7px 0 0 7px}.program-figma i:nth-child(4){background:#1abcfe;border-radius:50%}.program-figma i:nth-child(5){background:#0acf83;border-radius:7px 0 7px 7px;grid-column:1}

.album-heading { align-items: start; }
.gallery { margin-top: 70px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: clamp(130px,12vw,190px); grid-auto-flow: dense; gap: 18px; }
.gallery figure { grid-column: span 1; grid-row: span 2; min-height: 0; margin: 0; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: #102653; box-shadow: 0 22px 60px rgba(0,0,0,.18); }
.gallery figure > a { display: block; height: 100%; color: inherit; }
.gallery-tall { grid-column: span 2 !important; grid-row: span 4 !important; }
.gallery-wide { grid-column: span 2 !important; grid-row: span 2 !important; }
.gallery-full { grid-column: span 4 !important; grid-row: span 2 !important; }
.gallery figure::after { content:""; position:absolute; inset:38% 0 0; pointer-events:none; background:linear-gradient(to bottom,transparent,rgba(3,10,24,.72)); opacity:.85; transition:opacity .4s ease; }
.gallery-accent { background: #3f1f36 !important; }
.photo-placeholder { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .55s cubic-bezier(.2,.8,.2,1); background: radial-gradient(circle at 70% 25%, rgba(119,152,255,.75), transparent 23%), linear-gradient(145deg, #1b386f, #091a3c 65%, #071126); }
.gallery-accent .photo-placeholder { background: radial-gradient(circle at 35% 30%, rgba(255,107,74,.7), transparent 25%), linear-gradient(145deg, #4c2940, #161329); }
.photo-placeholder::before, .photo-placeholder::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.photo-placeholder::before { width: 45%; aspect-ratio: 1; }
.photo-placeholder::after { width: 78%; aspect-ratio: 1; }
.photo-placeholder span { position:relative; z-index:1; opacity: .25; }
.photo-placeholder span img { width:clamp(52px,7vw,88px); height:auto; display:block; filter:invert(1) sepia(.12); }
.gallery figure:hover .photo-placeholder { transform: scale(1.05); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1), filter .6s ease; }
.gallery figure:hover img { transform: scale(1.055); filter: saturate(1.12) contrast(1.03); }
.gallery figure:hover::after { opacity:1; }
.gallery figcaption { z-index:2; position: absolute; inset: auto 16px 14px; display: flex; gap: 12px; align-items: center; font-size: 10px; font-weight:700; text-transform: uppercase; letter-spacing: .14em; text-shadow:0 2px 12px rgba(0,0,0,.55); }
.gallery figcaption span { color: var(--coral); }
.gallery figcaption i { margin-left: auto; font-style: normal; }

body.lightbox-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 200; padding: 34px clamp(18px,5vw,80px); display: grid; grid-template-columns: 64px minmax(0,1fr) 64px; align-items: center; gap: 24px; visibility: hidden; opacity: 0; background: rgba(2,8,20,.9); backdrop-filter: blur(24px); transition: opacity .35s ease, visibility .35s ease; }
.lightbox.open { visibility: visible; opacity: 1; }
.lightbox figure { min-width: 0; max-width: min(1100px,76vw); max-height: calc(100vh - 68px); margin: auto; position: relative; transform: translateY(18px) scale(.98); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.lightbox.open figure { transform: none; }
.lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 110px); margin: auto; border-radius: 22px; object-fit: contain; box-shadow: 0 32px 100px rgba(0,0,0,.5); }
.lightbox figcaption { position: absolute; right: 14px; bottom: 14px; left: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(6,17,39,.62); backdrop-filter: blur(14px); }
.lightbox figcaption span { flex: 0 0 auto; color: var(--coral); font: 11px monospace; }
.lightbox figcaption b { overflow: hidden; color: var(--cream); font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.lightbox button { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; color: var(--cream); background: rgba(12,29,61,.7); backdrop-filter: blur(12px); cursor: pointer; transition: transform .25s ease, background .25s ease; }
.lightbox button:hover { transform: scale(1.06); background: rgba(119,152,255,.24); }
.lightbox-close { position: absolute; top: 22px; right: 22px; z-index: 3; font-size: 28px; }
.lightbox-nav { font-size: 21px; }

.journal { position:relative; padding-top:120px; padding-bottom:120px; }
.journal::before { content:""; position:absolute; inset:12% 4% auto auto; width:320px; height:320px; border-radius:50%; background:rgba(21,88,255,.08); filter:blur(24px); pointer-events:none; }
.journal-heading { margin-bottom:48px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.55fr); align-items:end; gap:60px; }
.journal-heading .eyebrow { margin-bottom:18px; }
.journal-heading h2 { margin:0; font-size:clamp(48px,6.4vw,96px); }
.journal-heading>p { max-width:460px; margin:0; color:var(--muted); font-size:14px; line-height:1.8; }
.journal-card { position:relative; min-height:540px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr); overflow:hidden; border:1px solid var(--line); border-radius:32px; background:linear-gradient(145deg,rgba(17,43,88,.72),rgba(6,20,45,.82)); box-shadow:0 28px 80px rgba(0,0,0,.18); }
.journal-media { position:relative; min-height:540px; overflow:hidden; background:#0d234a; }
.journal-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 60%,rgba(7,18,41,.22)),linear-gradient(0deg,rgba(4,13,29,.3),transparent 46%); pointer-events:none; }
.journal-media>img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .9s cubic-bezier(.16,1,.3,1),filter .6s ease; }
.journal-media:hover>img { transform:scale(1.045); filter:saturate(1.08); }
.journal-media>span { position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(circle at 65% 24%,rgba(119,152,255,.6),transparent 26%),#0c244d; }
.journal-media>span img { width:90px; filter:invert(1) sepia(.12); opacity:.3; }
.journal-media>i { position:absolute; z-index:2; left:24px; bottom:22px; padding:9px 12px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:var(--cream); background:rgba(6,17,39,.52); backdrop-filter:blur(12px); font-size:9px; font-style:normal; font-weight:700; letter-spacing:.13em; }
.journal-copy { padding:clamp(34px,5vw,74px); display:flex; flex-direction:column; justify-content:center; }
.journal-meta { display:flex; gap:22px; color:#92a0b9; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; }
.journal-meta span+span { position:relative; padding-left:22px; }
.journal-meta span+span::before { content:""; position:absolute; left:0; top:50%; width:9px; height:1px; background:var(--coral); }
.journal-copy h3 { margin:26px 0 22px; color:var(--cream); font:clamp(34px,4vw,62px)/1.02 Georgia,serif; }
.journal-copy h3 a { transition:color .25s ease; }
.journal-copy h3 a:hover { color:var(--blue); }
.journal-copy>p { margin:0; color:#abb6ca; font-size:15px; line-height:1.8; }
.journal-actions { margin-top:40px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.journal-read { padding:14px 0; display:inline-flex; align-items:center; gap:18px; color:var(--cream); font-size:12px; font-weight:700; }
.journal-arrow { position:relative; width:76px; height:10px; display:inline-block; }
.journal-arrow::before { content:""; position:absolute; top:5px; left:0; width:100%; height:1px; background:var(--blue); transition:width .3s ease; }
.journal-arrow::after { content:""; position:absolute; right:0; top:2px; width:6px; height:6px; border-top:1px solid var(--blue); border-right:1px solid var(--blue); transform:rotate(45deg); }
.journal-read:hover .journal-arrow::before { width:82%; }
.journal-all { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.11em; transition:color .25s ease; }
.journal-all:hover { color:var(--cream); }

.contact { max-width: 1480px; min-height: 760px; margin: 0 auto; padding: 150px 42px 36px; display: flex; flex-direction: column; justify-content: center; }
.contact h2 { margin: 30px 0 50px; font-size: clamp(60px, 8vw, 128px); }
.contact > a { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--blue); font: clamp(22px, 4vw, 54px) Georgia, serif; transition: .3s ease; }
.contact > a:hover { color: var(--cream); padding-left: 16px; }
footer { margin-top: auto; padding-top: 90px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
footer div { display: flex; flex-wrap: wrap; gap: 14px 24px; }
footer a:hover { color: var(--cream); }

@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes drift { to { transform: rotate(4deg) translate(18px, -12px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-loop { to { transform: translate3d(-25%,0,0); } }

@supports (animation-timeline: view()) {
  .section > * { animation: reveal linear both; animation-timeline: view(); animation-range: entry 8% cover 28%; }
  @keyframes reveal { from { opacity: .25; transform: translateY(36px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 980px) {
  .site-header { width: calc(100% - 32px); top: 10px; overflow-x: auto; }
  nav { min-width: max-content; }
  nav a { padding: 9px 10px; }
  .hero { min-height: auto; padding: 110px 24px 60px; grid-template-columns: 1fr; }
  .portrait-stage { min-height: 600px; }
  .about-grid, .experience-grid { grid-template-columns: 1fr; gap: 56px; }
  .cv-card { position:relative; top:auto; }
  .journal-card { grid-template-columns:1fr; }
  .journal-media { min-height:440px; }
  .section, .contact { padding-left: 24px; padding-right: 24px; }
  .skills { grid-template-columns: repeat(2,1fr); }
  .skills-summary { grid-template-columns:repeat(3,minmax(100px,1fr)); }
  .skills-summary>em { display:none; }
  .cv-card { max-width: 420px; }
}

@media (max-width: 680px) {
  .site-header { display: block; padding: 12px; border-radius: 18px; }
  .brand { padding: 2px 4px 12px; }
  nav { overflow-x: auto; padding-bottom: 2px; }
  nav a { font-size: 11px; }
  .hero { padding-top: 90px; }
  h1 { font-size: clamp(55px, 18vw, 80px); }
  .portrait-stage { min-height: 480px; }
  .portrait-card { width: 78%; }
  .focus-card { width: 230px; left: 0; padding: 18px; }
  .focus-card strong { font-size: 19px; }
  .available { right: 0; }
  .section { padding-top: 90px; padding-bottom: 90px; }
  .section-heading, .album-heading, .skills-header { display: block; }
  .journal-heading { display:block; }
  .journal-heading>p { margin-top:24px; }
  .journal-card { min-height:0; border-radius:24px; }
  .journal-media { min-height:280px; }
  .journal-copy { padding:30px 22px; }
  .journal-copy h3 { font-size:38px; }
  .journal-actions { align-items:flex-start; flex-direction:column; }
  .section-heading > p, .album-heading > p, .skills-header > p { margin-top: 28px; }
  .about-facts { grid-template-columns: 1fr; gap: 20px; }
  .services-list { grid-template-columns:1fr; }
  .service-card { min-height:0; padding:22px; }
  .service-card h3 { margin:27px 0 18px; font-size:24px; }
  .timeline article { grid-template-columns: 90px 1fr 20px; gap: 12px; }
  .timeline h3 { font-size: 19px; }
  .skills-summary { padding:14px 12px; gap:0; }
  .skills-summary>span { padding:0 12px; }
  .skills-summary>span:first-child { padding-left:4px; }
  .skills-summary>span:last-of-type { border-right:0; }
  .skills-summary b { font-size:22px; }
  .skills { grid-template-columns:1fr; }
  .skills article:first-child { grid-column:span 1; }
  .skills article { min-height:250px; }
  .skills article:first-child::after { right:28px; top:84px; font-size:72px; }
  .skill-top { min-height:108px; }
  .skill-ring { width:96px; }
  .skill-ring::before { width:75px; }
  .gallery { grid-template-columns: repeat(2,1fr); grid-auto-rows: 170px; }
  .gallery figure { grid-column: span 1; grid-row: span 1; }
  .gallery .gallery-tall, .gallery .gallery-wide { grid-column: span 2; }
  .gallery .gallery-tall { grid-column: span 2 !important; grid-row: span 2 !important; }
  .gallery .gallery-wide, .gallery .gallery-full { grid-column: span 2 !important; grid-row: span 1 !important; }
  .lightbox { padding: 70px 14px 18px; grid-template-columns: 46px minmax(0,1fr) 46px; gap: 8px; }
  .lightbox figure { max-width: 100%; }
  .lightbox img { max-height: calc(100vh - 100px); border-radius: 16px; }
  .lightbox button { width: 44px; height: 44px; border-radius: 14px; }
  .lightbox-close { top: 14px; right: 14px; }
  .contact { min-height: 680px; }
  footer { align-items: flex-start; gap: 30px; flex-direction: column; }
}

/* iOS form alanları 16px altındayken sayfayı otomatik büyütmesin. */
@media (max-width: 760px) {
  input:not([type="range"]), select, textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Motion system */
.page-loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--ink); transition: opacity .7s ease, visibility .7s ease; }
.page-loader .loader-logo { position:relative; z-index:2; width:clamp(58px,7vw,96px); height:auto; filter:invert(1) sepia(.12); animation:loaderPulse 1.1s ease-in-out infinite alternate; }
.page-loader i { position: absolute; width: 160px; height: 160px; border: 1px solid rgba(119,152,255,.45); border-radius: 50%; animation: loaderOrbit 1.2s linear infinite; }
body.loaded .page-loader { opacity: 0; visibility: hidden; }
.scroll-progress { position: fixed; z-index: 90; left: 0; top: 0; height: 3px; width: 0; background: linear-gradient(90deg,var(--coral),var(--blue)); box-shadow: 0 0 18px var(--blue); }
.cursor-dot,.cursor-ring { position: fixed; z-index: 999; left: 0; top: 0; pointer-events: none; border-radius: 50%; opacity: 0; }
.cursor-dot { width: 6px; height: 6px; background: var(--cream); }
.cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(244,239,223,.6); transition: width .25s ease,height .25s ease,background .25s ease,border-color .25s ease; }
body.cursor-ready .cursor-dot,body.cursor-ready .cursor-ring { opacity: 1; }
body.cursor-hover .cursor-ring { width: 64px; height: 64px; background: rgba(21,88,255,.16); border-color: var(--blue); }
.noise { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .055; background-image: radial-gradient(rgba(255,255,255,.42) .6px,transparent .8px); background-size: 4px 4px; animation: noiseShift .25s steps(2) infinite; }
.ambient { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(8px); will-change: transform; }
.ambient-one { width: 320px; height: 320px; right: -120px; top: 180px; background: rgba(21,88,255,.15); }
.ambient-two { width: 220px; height: 220px; left: 35%; bottom: 40px; background: rgba(255,107,74,.07); }
.char { display: inline-block; opacity: 0; transform: translateY(100%) rotate(4deg); transition: opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--char-index) * 24ms); }
.title-line.is-visible .char,.reveal.is-visible .char { opacity: 1; transform: none; }
.reveal { opacity: 0; transform: translateY(42px); transition: opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.interactive-card { transform-style: preserve-3d; will-change: transform; }
[data-tilt] { transform-style: preserve-3d; will-change: transform; transition: transform .18s ease-out; }
.magnetic { will-change: transform; transition: transform .22s ease-out,background .3s ease,color .3s ease,border-color .3s ease; }
.portrait-glow { position: absolute; inset: -20%; background: radial-gradient(circle at var(--mx,65%) var(--my,30%),rgba(119,152,255,.65),transparent 28%); transition: background-position .2s ease; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: transparent; }
.menu-toggle span { display: block; width: 16px; height: 1px; margin: 5px auto; background: var(--cream); transition: .3s ease; }

html[data-animation="low"] .noise,html[data-animation="low"] .cursor-dot,html[data-animation="low"] .cursor-ring,html[data-animation="low"] .orbit-three { display:none; }
html[data-animation="low"] .ticker-track,html[data-animation="low"] .orbit { animation-duration: 50s; }
html[data-animation="medium"] .noise { opacity:.018; }

@keyframes loaderPulse { to { transform: scale(.9); color: var(--blue); } }
@keyframes loaderOrbit { to { transform: rotate(360deg) scale(1.2); opacity: 0; } }
@keyframes noiseShift { 0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)} }

@media (max-width:680px) {
  .menu-toggle { display:block; position:absolute; right:12px; top:12px; }
  .site-header nav { max-height:0; opacity:0; overflow:hidden; display:flex; flex-direction:column; align-items:stretch; transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .35s ease; }
  .site-header.menu-open nav { max-height:360px; opacity:1; padding-top:12px; }
  .site-header.menu-open .menu-toggle span:first-child { transform:translateY(3px) rotate(45deg); }
  .site-header.menu-open .menu-toggle span:last-child { transform:translateY(-3px) rotate(-45deg); }
  .cursor-dot,.cursor-ring { display:none; }
  .language-switch { position:absolute; top:14px; right:64px; z-index:3; }
  .language-switch a { min-width:27px; padding:6px; }
  .admin-lock-trigger { width:28px; height:28px; margin-left:2px; }
  .admin-pin-modal { align-items:end; padding:10px; }
  .admin-pin-dialog { max-height:92svh; overflow:auto; padding:27px 21px; border-radius:24px 24px 16px 16px; }
  .admin-pin-dialog h2 { font-size:34px; }
  body { padding-bottom:112px; }
  .music-player { bottom:8px; width:calc(100% - 16px); min-height:94px; padding:10px; grid-template-columns:34px minmax(0,1fr) 112px; grid-template-rows:auto auto; gap:8px 10px; border-radius:20px; }
  .music-video { position:absolute; width:1px; height:1px; opacity:.01; pointer-events:none; }
  .music-video iframe { width:1px; height:1px; }
  .queue-toggle { width:34px; height:34px; padding:8px; border-radius:11px; grid-column:1; grid-row:1; }
  .music-meta { grid-column:2; grid-row:1; }
  .music-meta small { margin-bottom:4px; font-size:7px; }
  .music-meta strong { font-size:13px; }
  .music-controls { grid-column:3; grid-row:1; gap:5px; }
  .music-controls button { width:27px; height:27px; font-size:16px; }
  .music-controls .music-play { width:36px; height:36px; font-size:11px; }
  .music-timeline { grid-column:1 / 4; grid-row:2; grid-template-columns:1fr auto; align-items:center; gap:8px; }
  .music-time { min-width:65px; }
  .music-youtube { display:none; }
  .music-queue { right:-1px; bottom:calc(100% + 8px); }
  .floating-actions { right:12px; bottom:116px; }
  .float-button { width:46px; height:46px; border-radius:15px; }
  .float-button span { flex-basis:44px; }
}

/* Compact service overview and detail dialog */
.experience .services-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.experience .service-card { min-height:178px; padding:20px; display:flex; flex-direction:column; align-items:stretch; text-align:left; color:var(--cream); border:1px solid rgba(var(--theme-accent-rgb),.22); border-radius:18px; background:rgba(var(--theme-surface-rgb),.34); box-shadow:none; cursor:pointer; isolation:auto; transition:border-color .25s ease,background .25s ease,transform .25s ease; }
.experience .service-card::before,.experience .service-card::after,.experience .service-symbol,.experience .service-card-line { display:none; }
.experience .service-card:hover { border-color:rgba(var(--theme-accent-rgb),.68); background:rgba(var(--theme-accent-rgb),.08); box-shadow:none; transform:translateY(-4px); }
.experience .service-card:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.service-card-top { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.service-card-top>span { color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.service-card-top b { display:grid; place-items:center; width:26px; height:26px; border:1px solid rgba(var(--theme-accent-rgb),.28); border-radius:50%; color:var(--coral); font:8px monospace; }
.experience .service-card>strong { max-width:260px; margin:24px 0 12px; color:var(--cream); font:23px/1.06 Georgia,serif; letter-spacing:-.025em; }
.experience .service-card>em { min-height:28px; overflow:hidden; color:var(--muted); font:10px/1.45 "Segoe UI",sans-serif; font-style:normal; }
.service-open-label { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:17px; color:var(--blue); font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.service-open-label i { font-size:15px; font-style:normal; transition:transform .25s ease; }
.service-card:hover .service-open-label i { transform:translateX(4px); }
.service-modal[hidden] { display:none; }
.service-modal { position:fixed; z-index:220; inset:0; display:grid; place-items:center; padding:20px; }
.service-modal-backdrop { position:absolute; inset:0; border:0; background:rgba(2,7,18,.72); backdrop-filter:blur(10px); cursor:pointer; }
.service-modal-dialog { position:relative; width:min(560px,100%); max-height:min(680px,calc(100vh - 40px)); overflow:auto; padding:36px; border:1px solid rgba(var(--theme-accent-rgb),.34); border-radius:26px; color:var(--cream); background:linear-gradient(145deg,rgba(var(--theme-surface-rgb),.98),rgba(var(--theme-bg-rgb),.99)); box-shadow:0 32px 100px rgba(0,0,0,.52); animation:service-dialog-in .28s cubic-bezier(.16,1,.3,1); }
.service-modal-close { position:absolute; top:18px; right:18px; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; color:var(--cream); background:transparent; font-size:23px; cursor:pointer; }
.service-modal-kicker { display:block; color:var(--coral); font:9px monospace; letter-spacing:.14em; text-transform:uppercase; }
.service-modal-dialog h2 { max-width:430px; margin:18px 0; font:clamp(38px,6vw,58px)/.95 Georgia,serif; letter-spacing:-.045em; }
.service-modal-dialog>p { max-width:480px; margin:0; color:#b5c0d4; font-size:16px; line-height:1.75; }
.service-modal-result { margin-top:28px; padding:18px; border:1px solid rgba(var(--theme-accent-rgb),.22); border-radius:16px; background:rgba(var(--theme-accent-rgb),.07); }
.service-modal-result small { display:block; color:var(--blue); font-size:8px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.service-modal-result strong { display:block; margin-top:9px; font:19px/1.28 Georgia,serif; }
.service-modal-items { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }
.service-modal-items span { padding:8px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:10px; }
body.service-modal-open { overflow:hidden; }
@keyframes service-dialog-in { from { opacity:0; transform:translateY(18px) scale(.98); } to { opacity:1; transform:none; } }
@media(max-width:1050px){ .experience .services-list{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:650px){ .experience .services-list{grid-template-columns:1fr;} .experience .service-card{min-height:160px;} .experience .service-card>strong{font-size:22px;} .service-modal{padding:12px}.service-modal-dialog{padding:30px 22px;border-radius:22px}.service-modal-dialog h2{font-size:42px;} }

/* About: a quieter editorial composition with one strong focal point. */
.about { position:relative; overflow:hidden; }
.about::before { content:""; position:absolute; width:460px; height:460px; top:70px; left:-260px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(var(--theme-accent-rgb),.14),transparent 68%); filter:blur(10px); }
.about-grid { position:relative; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(46px,7vw,108px); }
.about-lead { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-height:0; }
.about h2 { position:relative; z-index:1; max-width:650px; margin:24px 0 0; font-size:clamp(54px,5.55vw,88px); letter-spacing:-.058em; }
.about-title { word-break:normal; overflow-wrap:normal; hyphens:none; text-wrap:balance; }
.about-orbit-mark { position:absolute; right:3%; top:12px; width:92px; aspect-ratio:1; border:1px solid rgba(var(--theme-accent-rgb),.34); border-radius:50%; animation:about-orbit 10s linear infinite; }
.about-orbit-mark::before,.about-orbit-mark::after { content:""; position:absolute; border:1px solid rgba(var(--theme-accent-rgb),.21); border-radius:inherit; }
.about-orbit-mark::before { inset:14px; }.about-orbit-mark::after { inset:-17px; border-left-color:transparent; border-bottom-color:transparent; }
.about-orbit-mark span { position:absolute; top:9px; left:50%; width:6px; height:6px; border-radius:50%; background:var(--cream); box-shadow:0 0 13px var(--cream); }.about-orbit-mark i { position:absolute; right:10px; bottom:12px; width:5px; height:5px; border-radius:50%; background:var(--coral); }
.about-signature { position:relative; left:auto; bottom:auto; display:flex; align-items:center; gap:16px; width:min(390px,100%); margin-top:38px; padding:16px 18px; border:1px solid rgba(var(--theme-accent-rgb),.24); border-radius:17px; background:rgba(var(--theme-surface-rgb),.42); backdrop-filter:blur(12px); }
.about-signature-logo { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:50%; background:var(--cream); }.about-signature-logo img { width:18px; max-height:24px; }
.about-signature p { margin:0; color:var(--muted); font:13px/1.38 Georgia,serif; }
.about-copy { position:relative; padding:22px 0 0 30px; border-left:1px solid var(--line); }
.about-copy-number { display:flex; align-items:center; gap:11px; margin:0 0 30px; color:var(--blue); font:9px monospace; letter-spacing:.11em; }.about-copy-number i { width:50px; height:1px; background:linear-gradient(90deg,var(--blue),transparent); }
.about-panda-card { position:relative; z-index:1; width:min(260px,78%); margin:0; padding:7px; overflow:hidden; border:1px solid rgba(var(--theme-accent-rgb),.44); border-radius:46px 46px 34px 34px / 34px 34px 28px 28px; background:linear-gradient(135deg,rgba(var(--theme-surface-rgb),.82),rgba(var(--theme-bg-rgb),.42)); box-shadow:0 18px 44px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,255,255,.04); transform:rotate(-1deg); transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .3s ease; }
.about-panda-card::before { content:""; position:absolute; z-index:1; inset:7px; border:1px solid rgba(255,255,255,.13); border-radius:39px 39px 27px 27px / 28px 28px 22px 22px; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 38%); }
.about-panda-card:hover { border-color:rgba(var(--theme-accent-rgb),.8); box-shadow:0 28px 60px rgba(0,0,0,.34),0 0 36px rgba(var(--theme-accent-rgb),.12); transform:translateY(-5px) rotate(0); }
.about-panda-card img { display:block; width:100%; aspect-ratio:1.52/1; border-radius:39px 39px 27px 27px / 28px 28px 22px 22px; object-fit:cover; object-position:center; mix-blend-mode:screen; opacity:.95; }
.about-panda-card figcaption { position:absolute; z-index:2; right:10px; bottom:9px; display:flex; align-items:center; gap:7px; margin:0; padding:5px 8px; border:1px solid rgba(255,255,255,.17); border-radius:99px; color:var(--cream); background:rgba(var(--theme-bg-rgb),.66); backdrop-filter:blur(8px); font-size:7px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.about-panda-card figcaption span { color:var(--coral); font-size:10px; }
.about-copy>p { max-width:590px; margin:0; color:#c1cada; font-size:18px; line-height:1.82; }.about-copy>p+p { margin-top:23px; }
.about-copy .about-ai-copy { margin-left:clamp(0px,3vw,42px); padding:18px 0 0 18px; border-left:2px solid rgba(var(--theme-accent-rgb),.48); color:#b5c0d4; }
.about-facts { margin-top:46px; padding:0; border:0; gap:10px; }.about-facts span { padding:15px 12px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(var(--theme-bg-rgb),.24); transition:border-color .25s ease,transform .25s ease; }.about-facts span:hover { border-color:rgba(var(--theme-accent-rgb),.42); transform:translateY(-3px); }.about-facts b { color:var(--cream); }
@keyframes about-orbit { to { transform:rotate(360deg); } }
@media(max-width:980px){ .about-grid{grid-template-columns:1fr;gap:48px}.about-lead{min-height:0}.about h2{max-width:760px}.about-copy{padding:0 0 0 18px}.about-orbit-mark{right:8%;top:0}.about-copy .about-ai-copy{margin-left:0}.about-facts{grid-template-columns:repeat(3,1fr)} }
@media(max-width:650px){ .about{padding-top:90px;padding-bottom:90px}.about-lead{min-height:0}.about h2{font-size:clamp(48px,14vw,70px);letter-spacing:-.055em}.about-orbit-mark{width:65px;right:4%;top:-10px}.about-signature{width:100%;margin-top:28px;padding:13px}.about-copy{padding-left:0;border-left:0}.about-panda-card{width:min(310px,100%);padding:7px;border-radius:38px 38px 28px 28px / 28px 28px 22px 22px;transform:none}.about-panda-card::before{inset:7px;border-radius:31px 31px 21px 21px / 22px 22px 17px 17px}.about-panda-card img{border-radius:31px 31px 21px 21px / 22px 22px 17px 17px}.about-copy>p{font-size:16px}.about-copy .about-ai-copy{padding-left:14px}.about-facts{grid-template-columns:1fr;gap:8px;margin-top:32px}.about-facts span{padding:12px}.about::before{top:10px;left:-300px} }

/* A compact hand-off from Şarkı Stüdyosu to EspressoLab Radio. */
.music-links{grid-area:links;display:flex;align-items:center;gap:8px}.music-radio{min-height:38px;padding:7px 10px;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(var(--theme-accent-rgb),.42);border-radius:13px;color:var(--cream);background:linear-gradient(135deg,rgba(var(--theme-accent-rgb),.15),rgba(255,255,255,.035));font-size:9px;font-weight:800;letter-spacing:.04em;line-height:1;text-decoration:none;white-space:nowrap;box-shadow:inset 0 1px rgba(255,255,255,.08);transition:transform .25s ease,border-color .25s ease,background .25s ease}.music-radio:hover{border-color:var(--blue);background:rgba(var(--theme-accent-rgb),.23);transform:translateY(-2px)}.music-radio>span{display:grid;place-items:center;width:18px;height:18px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.32));animation:music-radio-bot-float 2.4s ease-in-out infinite}.music-radio>span svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.music-radio b{font:inherit}.music-radio i{color:var(--coral);font-size:12px;font-style:normal}@keyframes music-radio-bot-float{50%{transform:translateY(-3px) rotate(-5deg)}}
@media(max-width:760px){body:has(.music-player){padding-bottom:92px}.music-player{left:50%;bottom:10px;width:calc(100% - 20px);min-height:70px;padding:8px 9px;grid-template-columns:48px minmax(0,1fr) auto 34px;grid-template-rows:auto auto;grid-template-areas:"cover meta controls links" "cover timeline timeline links";gap:5px 10px;border-radius:20px}.music-video{width:48px;height:48px;border-radius:12px}.music-video iframe{width:90px;height:52px;margin:-2px 0 0 -20px}.queue-toggle{width:34px;height:34px;padding:8px;border-radius:11px;grid-area:queue;position:absolute;opacity:0;pointer-events:none}.music-meta small{margin-bottom:3px;font-size:7px}.music-meta strong{font-size:14px}.music-controls{gap:5px}.music-controls button{width:30px;height:30px}.music-controls .music-play{width:42px;height:42px}.music-player.is-playing .music-play::before{width:12px;height:16px;background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px)}.music-links{justify-self:end}.music-links .music-youtube{display:none}.music-radio{width:34px;height:34px;min-height:0;padding:0;justify-content:center;border-radius:11px}.music-radio>span{width:23px;height:23px}.music-radio>span svg{width:18px;height:18px}.music-radio b,.music-radio i{display:none}.music-timeline{gap:4px}.music-time{font-size:7px}.music-progress{height:3px}}

/* EspressoLab: mobile-safe filled radio icon */
.music-radio .music-radio-icon svg{display:block;fill:currentColor;stroke:none!important}.music-radio .music-radio-icon{color:var(--cream)}

/* Use the supplied EspressoLab radio artwork and keep the hand-off visually clear. */
.music-links{gap:12px}.music-links:before{content:"";width:1px;height:28px;display:block;background:linear-gradient(transparent,rgba(var(--theme-accent-rgb),.58),transparent);box-shadow:0 0 12px rgba(var(--theme-accent-rgb),.22)}
.music-radio .music-radio-icon{overflow:hidden}.music-radio .music-radio-icon svg{display:none}.music-radio .music-radio-icon img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
@media(max-width:760px){.music-links:before{display:none}.music-radio .music-radio-icon{width:24px;height:24px}.music-radio .music-radio-icon img{width:100%;height:100%}}

/* Keep sticky navigation attached to the viewport without horizontal scrolling. */
html, body { overflow-x: clip; }