@font-face{font-family:'Clash';font-weight:400;font-style:normal;font-display:swap;src:url(../assets/fonts/clash-400.woff2) format('woff2')}
@font-face{font-family:'Clash';font-weight:700;font-style:normal;font-display:swap;src:url(../assets/fonts/clash-700.woff2) format('woff2')}

:root { --e: cubic-bezier(.2, .8, .2, 1); }
html { --bg: #eadfc0; --fg: #17150e; --acc: #f2b705; --glow: rgba(242, 183, 5, .38); background: var(--bg); color: var(--fg); font-family: 'Clash', system-ui, sans-serif; transition: background-color 1s ease, color 1s ease; -webkit-text-size-adjust: 100%; }
html[data-side="per"] { --bg: #0a0d08; --fg: #efeadb; --acc: #9bd23c; --glow: rgba(155, 210, 60, .3); }
* { box-sizing: border-box; margin: 0; }
body { min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: 0 16px 22px; overflow-x: hidden; position: relative; }
body::before { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; filter: blur(50px); background: radial-gradient(36% 36% at 20% 22%, var(--glow), transparent 70%), radial-gradient(34% 34% at 80% 75%, var(--glow), transparent 70%); animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(4%, 6%) rotate(8deg) scale(1.1); } }
a { color: inherit; }

header { width: min(100%, 1000px); height: 80px; padding-top: env(safe-area-inset-top, 0px); display: flex; justify-content: space-between; align-items: center; }
.logo { font-weight: 700; font-size: 1.6rem; text-decoration: none; letter-spacing: .02em; }
.tg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 2px solid var(--fg); border-radius: 99px; }
.tg i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 99px; background: var(--acc); transition: transform .7s var(--e); }
html[data-side="per"] .tg i { transform: translateX(100%); }
.tg button { position: relative; z-index: 1; border: 0; background: none; color: var(--fg); font: inherit; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; padding: 9px 15px; border-radius: 99px; cursor: pointer; transition: color .3s ease; -webkit-tap-highlight-color: transparent; }
.tg button[aria-pressed="true"] { color: #17150e; }
.tg button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* the flip card */
.stage { flex: 1; width: 100%; display: grid; place-items: center; perspective: 1500px; padding: 6px 0 4px; }
.card { position: relative; width: min(100%, 470px); height: clamp(640px, 86svh, 780px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; --f: 0;
  transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--f) * 180deg + var(--ry, 0deg))); touch-action: none; user-select: none; -webkit-user-select: none; animation: enter 1.1s var(--e) backwards; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html[data-side="per"] .card { --f: 1; }
.card.flipping { transition: transform 1.05s cubic-bezier(.6, -.12, .25, 1.12); }
@keyframes enter { from { translate: 0 70px; scale: .88; rotate: 4deg; } }
.face { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 34px; background: var(--cb); color: var(--cf); overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 36px 50px -20px rgba(0, 0, 0, .55); }
.face > * { position: relative; }
.front { --cb: #17150e; --cf: #f0e6c8; --ca: #f2b705; --cd: #a39a7a; --cl: rgba(240, 230, 200, .16); --ledge: #5a4a12; --ledge2: #000; --cx: #f2b705; --cxf: #17150e; }
.back { --cb: #ece8d4; --cf: #12140d; --ca: #9bd23c; --cd: #5c5f4c; --cl: rgba(18, 20, 13, .16); --ledge: #a6a28a; --ledge2: #6f6c5b; --cx: #2c6a0a; --cxf: #eef7d6; transform: rotateY(180deg); }

.orb { position: absolute !important; right: -34px; top: -34px; width: 150px; aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--ca); animation: spin 22s linear infinite; }
.orb::after { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ca); box-shadow: 0 0 16px var(--ca); }
@keyframes spin { to { rotate: 360deg; } }

.k { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--cd); }
h1 { font-weight: 700; text-transform: uppercase; line-height: .9; letter-spacing: -.01em; font-size: clamp(2.5rem, 12vw, 3.6rem); }
h1 span { display: block; }
.role { font-size: 1.05rem; color: var(--cd); }
.role b { color: var(--ca); font-weight: 700; }
.r { display: flex; flex-direction: column; gap: 3px; padding-top: 12px; border-top: 1px solid var(--cl); }
.r small { font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--cd); font-weight: 700; }
.r b { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.r span { font-size: .88rem; color: var(--cd); }
.live { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ca); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ca) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1.5px solid var(--cl); border-radius: 99px; font-weight: 700; font-size: .78rem; letter-spacing: .03em; text-decoration: none; color: inherit; background: none; font-family: inherit; cursor: pointer; transition: transform .3s var(--e), border-color .3s ease; }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--d, var(--ca)); }
.chip:hover { transform: translateY(-3px) rotate(-2deg); border-color: var(--d, var(--ca)); }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.btn { display: inline-flex; align-items: center; padding: 11px 18px; border: 2px solid var(--cf); border-radius: 99px; font: inherit; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--cf); background: none; cursor: pointer; transition: transform .3s var(--e); }
.btn.p { background: var(--ca); border-color: var(--ca); color: #17150e; }
.btn:hover { transform: translateY(-3px); } .btn:active { transform: scale(.95); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.t { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1.5px solid var(--cl); border-radius: 20px; text-decoration: none; color: inherit; }
.t b { font-size: .95rem; font-weight: 700; text-transform: uppercase; line-height: 1.05; } .t span { font-size: .8rem; color: var(--cd); }
.eq { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.eq u { width: 6px; height: 100%; border-radius: 3px; background: var(--cx); transform-origin: bottom; animation: eq .9s ease-in-out infinite alternate; }
.eq u:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; } .eq u:nth-child(3) { animation-duration: 1.1s; animation-delay: -.6s; } .eq u:nth-child(4) { animation-duration: .8s; animation-delay: -.2s; } .eq u:nth-child(5) { animation-duration: 1s; animation-delay: -.5s; }
@keyframes eq { from { scale: 1 .15; } to { scale: 1 1; } }
.els { display: flex; gap: 6px; height: 34px; }
.els u { text-decoration: none; display: grid; place-items: center; width: 34px; border: 2px solid var(--cx); background: var(--cx); color: var(--cxf); border-radius: 9px; font-weight: 700; font-size: .85rem; animation: bob 3s ease-in-out infinite alternate; }
.els u:nth-child(2) { animation-delay: -1.5s; }
@keyframes bob { to { translate: 0 -4px; } }
.tag { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1; padding: 11px 14px; border: 1.5px solid var(--cl); border-radius: 16px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .3s var(--e), border-color .3s ease; }
.tag small { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cd); font-weight: 700; } .tag b { font-size: 1.1rem; letter-spacing: .03em; }
.tag:hover { border-color: var(--ca); transform: translateY(-3px); } .tag:active { transform: scale(.95); }
.row2 { display: flex; gap: 8px; margin-top: 4px; } .row2 > * { min-width: 0; }

.flip { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg); opacity: .75; }
.flip i { display: inline-block; font-style: normal; font-size: 1.1rem; animation: wob 2.2s ease-in-out infinite; }
@keyframes wob { 0%, 100% { rotate: 0deg; } 50% { rotate: 180deg; } }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 50; translate: -50% 20px; opacity: 0; padding: 12px 22px; border-radius: 99px; background: var(--fg); color: var(--bg); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; transition: .35s var(--e); pointer-events: none; }
.toast.on { opacity: 1; translate: -50% 0; }

/* ===== desktop: landscape trainer-style card ===== */
  .card.dk { width: min(94vw, 720px); height: 450px; animation: enter 1.1s var(--e) backwards, float 7s ease-in-out 1.2s infinite; }
  .dk .face { display: grid; grid-template-columns: minmax(0, 1fr) 240px; grid-template-rows: 78px minmax(0, 1fr) 96px; gap: 0; padding: 0; border-radius: 26px; }
  .dk .hd { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; background: var(--ca); color: #17150e; }
  .dk .hd h2 { font-size: 2.1rem; line-height: 1; text-transform: uppercase; letter-spacing: -.005em; }
  .dk .hd small { font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; border: 2px solid #17150e; border-radius: 99px; padding: 6px 14px; }
  .dk .info { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 18px 12px 18px 30px; }
  .dk .ln { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 11px; border-bottom: 1.5px dashed var(--cl); text-decoration: none; color: inherit; }
  .dk .ln small { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cd); font-weight: 700; }
  .dk .ln b { font-size: 1.2rem; text-transform: uppercase; line-height: 1; }
  .dk a.ln:hover b { color: var(--cd); }
  .dk .tg2 { border: 1.5px solid var(--cl); border-radius: 12px; background: none; color: inherit; font: inherit; font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; padding: 6px 14px; cursor: pointer; transition: transform .3s var(--e), border-color .3s ease; }
  .dk .tg2:hover { border-color: var(--ca); transform: translateY(-2px); } .dk .tg2:active { transform: scale(.95); }
  .dk .av { position: relative; overflow: hidden; }
  .dk .av::before { content: ""; position: absolute; left: 50%; top: 54%; width: min(212px, 70%); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: var(--cl); transform: translate(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -6px)); }
  .dk .av img { position: absolute; inset: 3% 3% 0 3%; width: 94%; height: 97%; object-fit: contain; object-position: center bottom; animation: bob 3.4s ease-in-out infinite alternate; transform: translate(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 7px)); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .dk .av img.jump { animation: bob 3.4s ease-in-out infinite alternate, squash .7s var(--e); }
  .dk .hd h2 { transform: translate(calc(var(--px, 0) * 5px), 0); }
  .dk .ft { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 11px; border-top: 1.5px solid var(--cl); background: color-mix(in srgb, var(--cf) 7%, transparent); }
  .dk .ln em { font-style: normal; font-size: .72em; color: var(--cd); margin-left: 6px; letter-spacing: .03em; }
  .dk .lks { display: flex; gap: 9px; }
  .bd { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 30%; background: var(--b); color: var(--bf, #fff); font-weight: 700; font-size: .8rem; text-decoration: none; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .2), 0 4px 0 rgba(0, 0, 0, .4); transition: transform .3s var(--e); }
  .bd svg { width: 56%; height: 56%; }
  .bd { width: var(--bs, 52px); height: var(--bs, 52px); }
  .dk .hd .bd { --bs: 40px; }
  span.bd { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .bd:hover { transform: translateY(-5px) rotate(-4deg); }
  .bd:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 1px 0 rgba(0, 0, 0, .4); }
  .bd.pop { animation: pop .55s var(--e); }
@keyframes pop { 0% { scale: 1; } 25% { scale: 1.3 .8; rotate: -9deg; } 55% { scale: .9 1.12; rotate: 7deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes squash { 0% { scale: 1; } 18% { scale: 1.1 .88; } 42% { scale: .93 1.08; rotate: -3deg; } 70% { scale: 1.03 .98; rotate: 2deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes float { 50% { translate: 0 -9px; } }
.dk .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.dk .rt span { font-size: .78rem; color: var(--cd); letter-spacing: .02em; }
.dk .ln b { display: inline-flex; align-items: center; gap: 10px; }
.dk .rt b { flex-wrap: wrap; justify-content: flex-end; }
.eq.sm { height: 24px; gap: 3px; } .eq.sm u { width: 5px; }
.els.sm { height: 28px; gap: 5px; } .els.sm u { width: 28px; font-size: .7rem; border-radius: 8px; }
.bld { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.hm { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 30%; background: var(--ca); color: #17150e; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .2), 0 3px 0 rgba(0, 0, 0, .45); }
.hm svg { width: 58%; height: 58%; transform-origin: 75% 80%; animation: hit 1.8s ease-in-out infinite; }
@keyframes hit { 0%, 55%, 100% { rotate: 0deg; } 70% { rotate: -30deg; } 82% { rotate: 10deg; } }
.pb { position: relative; flex: 1; min-width: 0; height: 26px; border-radius: 99px; background: rgba(0, 0, 0, .5); border: 1.5px solid var(--cl); overflow: hidden; }
.pb i { position: absolute; inset: 0 auto 0 0; width: 64%; border-radius: 99px; background: linear-gradient(#ffd54d, #f2b705 55%, #c98f00); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45); animation: grow 1.3s var(--e) .4s backwards; }
@keyframes grow { from { width: 0; } }
.pb span { position: relative; z-index: 1; display: block; line-height: 23px; padding-left: 11px; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #17150e; white-space: nowrap; }
@media (max-width: 760px) {
  html, body { height: 100%; }
  body { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; padding: 0 14px calc(8px + env(safe-area-inset-bottom, 0px)); }
  header { height: 56px; flex: none; }
  .logo { font-size: 1.4rem; }
  .tg button { padding: 8px 13px; font-size: .72rem; }
  .stage { flex: 1 1 0; min-height: 0; display: flex; justify-content: center; align-items: stretch; padding: 2px 0 12px; }
  .card.dk { width: min(100%, 430px); height: auto; align-self: stretch; max-height: 800px; }
  .flip { flex: none; margin: 0; padding-bottom: 2px; font-size: .68rem; }
  .dk .face { grid-template-columns: minmax(0, 1fr); grid-template-rows: 54px auto minmax(0, 1fr) auto; --bs: clamp(36px, 5.6dvh, 46px); }
  .dk .hd { padding: 0 18px; } .dk .hd h2 { font-size: 1.4rem; } .dk .hd small { font-size: .62rem; padding: 5px 11px; }
  .dk .hd .bd { --bs: 34px; } .dk .lks { gap: 7px; }
  .dk .info { padding: 14px 20px 6px; gap: clamp(8px, 1.5dvh, 13px); }
  .dk .ln { gap: 12px; padding-bottom: clamp(8px, 1.4dvh, 12px); }
  .dk .ln b { font-size: clamp(1rem, 2.7dvh, 1.2rem); } .dk .ln small { font-size: .64rem; }
  .dk .rt span { font-size: clamp(.78rem, 2dvh, .9rem); }
  .dk .tg2 { font-size: 1rem; }
  .dk .av img { inset: 2% 8% 0 8%; width: 84%; height: 98%; }
  .dk .ft { flex-wrap: wrap; gap: 8px; padding: 12px calc((100% - 5 * var(--bs) - 4 * 8px - 6px) / 2); }
}
@media (max-width: 400px) {
  .dk .info { padding-left: 16px; padding-right: 16px; }
  .dk .ln { gap: 8px; }
  .dk .ln small { white-space: nowrap; font-size: .56rem; letter-spacing: .09em; }
  .dk .ln b { font-size: clamp(.86rem, 2.5dvh, 1.05rem); white-space: nowrap; }
  .dk .ln em { white-space: nowrap; font-size: .68em; margin-left: 4px; }
  .dk .live { gap: 6px; }
  .dk .rt span { font-size: .72rem; white-space: nowrap; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .dk .face { grid-template-rows: 48px auto minmax(0, 1fr) auto; }
  .dk .hd h2 { font-size: 1.25rem; }
  .dk .info { padding-top: 10px; }
  .dk .ft { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 760px) {
  .stage { padding: 4px 0 24px; }
  .card.dk { height: 100%; max-height: 680px; align-self: center; }
  .dk .face { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 24px 34px -16px rgba(0, 0, 0, .5); }
  .dk .av img { inset: 7% 15% 0 15%; width: 70%; height: 91%; }
  .dk .av::before { width: min(150px, 60%); }
  .dk .info { padding: 14px 20px 8px; gap: clamp(9px, 1.7dvh, 15px); }
  .dk .ln small { font-size: .66rem; white-space: nowrap; }
  .dk .ln b { font-size: clamp(1.1rem, 3dvh, 1.32rem); }
  .dk .ln em { white-space: nowrap; }
  .dk .rt span { font-size: clamp(.8rem, 2.1dvh, .92rem); white-space: nowrap; }
  .pb span { font-size: .66rem; }
}
@media (max-width: 400px) {
  .dk .ln small { font-size: .58rem; letter-spacing: .09em; }
  .dk .ln b { font-size: clamp(.98rem, 2.7dvh, 1.1rem); }
  .dk .ln em { font-size: .66em; }
  .dk .rt span { font-size: .74rem; }
}
@media (max-width: 760px) { .dk .live em { font-size: .6em; margin-left: 2px; } .dk .live { gap: 6px; } .dk .ln { gap: 8px; } }
@media (max-width: 380px) { .dk .live em { font-size: .52em; } .dk .ln small { font-size: .54rem; letter-spacing: .05em; } .dk .live b, .dk .ln b { font-size: .95rem; } .tg button { padding: 8px 10px; font-size: .66rem; } .logo { font-size: 1.2rem; } }
/* ===== consistency: same layout + same image size on both sides ===== */
.dk .sec { display: flex; flex-direction: column; gap: 9px; }
.dk .sec .ln { border-bottom: 0; padding-bottom: 0; }
.dk .av img { inset: auto 0 0 0; width: 100%; height: var(--ih, 80%); }
@media (min-width: 761px) {
  .dk .face { grid-template-columns: minmax(0, 1fr) 260px; }
  .dk .av { --ih: 80%; }
}
@media (max-width: 760px) {
  .stage { padding: 4px 0 12px; }
  .dk .face { --infoH: clamp(205px, 30dvh, 252px); --ftH: calc(2 * var(--bs) + 8px + 24px); grid-template-rows: 54px var(--infoH) minmax(0, 1fr) var(--ftH); }
  .dk .info { padding: 6px 20px; gap: 0; justify-content: space-between; }
  .dk .info > .ln { flex: 1 1 0; min-height: 0; padding: 0; }
  .dk .info > .sec { flex: 1.5 1 0; min-height: 0; justify-content: center; }
  .dk .ft { height: var(--ftH); align-content: center; padding-top: 0; padding-bottom: 0; }
  .dk .av { --ih: 88%; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .dk .face { --infoH: clamp(188px, 31dvh, 212px); grid-template-rows: 48px var(--infoH) minmax(0, 1fr) var(--ftH); }
}
@media (max-width: 380px) { .dk .rt span { font-size: .68rem; letter-spacing: 0; } }
@media (max-width: 760px) {
  .dk .back { grid-template-rows: 54px calc(var(--infoH) + var(--ftH) - var(--bs) - 24px) minmax(0, 1fr) calc(var(--bs) + 24px); }
  .dk .back .ft { height: auto; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .dk .back { grid-template-rows: 48px calc(var(--infoH) + var(--ftH) - var(--bs) - 24px) minmax(0, 1fr) calc(var(--bs) + 24px); }
}
.toast { width: max-content; max-width: calc(100vw - 32px); white-space: nowrap; text-align: center; overflow: hidden; text-overflow: ellipsis; bottom: calc(env(safe-area-inset-bottom, 0px) + 44px); }
@media (max-width: 760px) {
  .dk .face { grid-template-rows: 54px calc(var(--infoH) + var(--ftH) - var(--bs) - 24px) minmax(0, 1fr) calc(var(--bs) + 24px); }
  .dk .front .ft { flex-wrap: nowrap; gap: clamp(3px, 1.1vw, 6px); padding: 0 10px; height: auto; align-content: normal; }
  .dk .front .ft .bd { flex: 1 1 0; min-width: 0; max-width: 42px; width: auto; height: auto; aspect-ratio: 1; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .dk .face { grid-template-rows: 48px calc(var(--infoH) + var(--ftH) - var(--bs) - 24px) minmax(0, 1fr) calc(var(--bs) + 24px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* "View more" + projects sheet */
.dk .wl { text-decoration: none; color: inherit; }
.dk .wl:hover b { color: var(--cd); }
.dk .ds { flex: 1; min-width: 0; font-size: .82rem; line-height: 1.25; color: var(--cd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .dk .ds { font-size: .76rem; white-space: normal; } .dk .bld { gap: 8px; } }
.vm { flex: none; height: 26px; padding: 0 12px; border: 1.5px solid var(--cl); border-radius: 99px; background: none; color: inherit; font: inherit; font-weight: 700; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: transform .3s var(--e), border-color .3s ease; }
.vm:hover { border-color: var(--ca); transform: translateY(-2px); } .vm:active { transform: scale(.95); }
.vm:focus-visible { outline: 2px solid var(--ca); outline-offset: 2px; }
.sheet { --cb: #17150e; --cf: #f0e6c8; --ca: #f2b705; --cd: #a39a7a; --cl: rgba(240, 230, 200, .16); position: fixed; inset: auto 0 0 0; margin: 0 auto; width: min(100%, 520px); max-width: 100%; max-height: 80dvh; padding: 0; border: 0; border-radius: 28px 28px 0 0; background: var(--cb); color: var(--cf); font-family: inherit; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 -20px 50px -20px rgba(0, 0, 0, .6); overflow: auto; }
.sheet[open] { animation: shUp .45s var(--e); }
.sheet.out { animation: shDown .3s ease-in forwards; }
.sheet::backdrop { background: rgba(0, 0, 0, .45); }
.sheet[open]::backdrop { animation: shFade .35s ease; }
.sheet.out::backdrop { animation: shFade .3s ease reverse forwards; }
@keyframes shUp { from { translate: 0 100%; } }
@keyframes shDown { to { translate: 0 100%; } }
@keyframes shFade { from { opacity: 0; } }
.sh-in { display: flex; flex-direction: column; gap: 14px; padding: 12px 22px calc(22px + env(safe-area-inset-bottom, 0px)); }
.grab { align-self: center; width: 44px; height: 5px; border-radius: 99px; background: var(--cl); }
.sh-hd { display: flex; align-items: center; justify-content: space-between; }
.sh-hd h3 { font-size: 1.4rem; font-weight: 700; text-transform: uppercase; line-height: 1; }
.sh-hd .x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.sh-hd .x:hover, .sh-hd .x:focus-visible { color: var(--ca); }
.sh-hd .x:focus { outline: none; }
.pl { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pj { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--cl); border-radius: 18px; text-decoration: none; color: inherit; transition: transform .3s var(--e), border-color .3s ease; }
a.pj:hover { border-color: var(--ca); transform: translateY(-2px); }
.pj span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pj small { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cd); font-weight: 700; }
.pj b { font-size: 1.15rem; text-transform: uppercase; line-height: 1; }
.pj em { flex: none; font-style: normal; font-weight: 700; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ca); }

/* Tech badges: 2 rows (5 + 4) on mobile, same image size on both sides */
@media (max-width: 760px) {
  .dk .front { grid-template-rows: 54px var(--infoH) minmax(0, 1fr) var(--ftH); }
  .dk .back { grid-template-rows: 54px calc(var(--infoH) + var(--ftH) - var(--bs) - 24px) minmax(0, 1fr) calc(var(--bs) + 24px); }
  .dk .front .ft { flex-wrap: wrap; gap: 8px; padding: 0 calc((100% - 5 * var(--bs) - 4 * 8px - 6px) / 2); height: var(--ftH); align-content: center; }
  .dk .front .ft .bd { flex: none; width: var(--bs); height: var(--bs); max-width: none; aspect-ratio: auto; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .dk .front, .dk .back { grid-template-rows: 48px var(--infoH) minmax(0, 1fr) var(--ftH); }
  .dk .back { grid-template-rows: 48px calc(var(--infoH) + var(--ftH) - var(--bs) - 24px) minmax(0, 1fr) calc(var(--bs) + 24px); }
}

@media (max-width: 760px) {
  .dk .face { --ftH: calc(2 * var(--bs) + 12px + 30px); }
  .dk .front .ft { gap: 12px; padding: 0 calc((100% - 5 * var(--bs) - 4 * 12px - 2px) / 2); justify-content: center; align-content: center; }
}

/* tech logos: even grid, outer edges line up with the text margins */
.dk .front .ft { display: grid; grid-template-columns: repeat(10, var(--bs, 52px)); justify-content: space-between; align-content: center; gap: 0; padding: 0 30px; }
.dk .back .ft { display: flex; justify-content: center; gap: 22px; }
@media (max-width: 760px) {
  .dk .front .ft { grid-template-columns: repeat(5, var(--bs)); row-gap: 12px; padding: 0 20px; height: var(--ftH); }
  .dk .front .ft .bd { width: var(--bs); height: var(--bs); }
}
@media (max-width: 400px) { .dk .front .ft { padding: 0 16px; } }

/* tech logos: compact grid like the "Find me" block - small equal gaps, sized to the card */
.dk .front .ft { display: grid; grid-template-columns: repeat(10, 52px); justify-content: center; align-content: center; gap: 12px; padding: 0 20px; }
.dk .back .ft { gap: 14px; }
@media (max-width: 760px) {
  .dk .face { --fp: 20px; --cw: min(100vw - 28px, 430px); --tb: min(54px, calc((var(--cw) - 2 * var(--fp) - 40px) / 5)); --ftH: calc(2 * var(--tb) + 10px + 26px); }
  .dk .front .ft { grid-template-columns: repeat(5, var(--tb)); gap: 10px; padding: 0; height: var(--ftH); justify-content: center; align-content: center; }
  .dk .front .ft .bd { width: var(--tb); height: var(--tb); }
}
@media (max-width: 400px) { .dk .face { --fp: 16px; } }

/* optical vertical centering (the display font sits high in its line box) */
.dk .hd h2 { translate: 0 .12em; }
.dk .live .dot { translate: 0 -1px; }
@media (max-width: 760px) { .dk .hd h2 { translate: 0 .08em; } .dk .live .dot { translate: 0 -2px; } }
@media (max-width: 380px) { .dk .live .dot { translate: 0 -.5px; } }

/* bio line under the name */
.dk .ttl { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.dk .ttl h2 { translate: none; }
.dk .bio { font-weight: 700; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1; white-space: nowrap; opacity: .72; }
@media (min-width: 761px) {
  .dk .face { grid-template-rows: 90px minmax(0, 1fr) 96px; }
  .dk .bio { font-size: .7rem; gap: 6px; }
  .dk .ttl { gap: 6px; }
}
@media (max-width: 760px) {
  .dk .face { --hh: 64px; }
  .dk .front { grid-template-rows: var(--hh) var(--infoH) minmax(0, 1fr) var(--ftH); }
  .dk .back { grid-template-rows: var(--hh) calc(var(--infoH) + var(--ftH) - var(--bs) - 24px) minmax(0, 1fr) calc(var(--bs) + 24px); }
}
@media (max-width: 760px) and (max-height: 700px) { .dk .face { --hh: 58px; } }
@media (max-width: 400px) { .dk .bio { font-size: .56rem; letter-spacing: .09em; } }

/* 1. background: dot grid that lights up around the cursor */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 30%, transparent) 1.1px, transparent 1.6px); background-size: 22px 22px;
  -webkit-mask: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 45%), #000 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.08) 100%);
          mask: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 45%), #000 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.08) 100%); }
@media (max-width: 760px) { body::after { -webkit-mask: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,.5), transparent); mask: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,.5), transparent); } }

/* 2. foil glare that slides across the card as it tilts */
.dk .face::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.13) 44%, rgba(255,255,255,.04) 50%, transparent 62%);
  background-size: 260% 260%; background-position: calc(50% + var(--px, 0) * 30%) calc(50% + var(--py, 0) * 30%); }
/* thin accent rim, brighter on the corners */
.dk .face::before { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; padding: 1.5px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ca) 85%, transparent), transparent 30%, transparent 70%, color-mix(in srgb, var(--ca) 60%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* 3. header band: soft top light + crisp bottom edge */
.dk .hd { background: linear-gradient(180deg, color-mix(in srgb, var(--ca), #fff 16%), var(--ca) 70%); box-shadow: inset 0 -1px 0 rgba(0,0,0,.22); }

/* 4. info rows: quiet solid hairlines instead of dashes */
.dk .ln { border-bottom-style: solid; border-bottom-width: 1px; }
.dk .ln small { opacity: .9; }

/* 5. character: no disc, just a soft contact shadow so it stands on the card */
.dk .av::before { left: 50%; top: auto; bottom: 2.5%; width: 58%; height: 16px; aspect-ratio: auto; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); transform: translateX(calc(var(--px, 0) * -8px));
  animation: shb 3.4s ease-in-out infinite alternate; }
.dk .back .av::before { background: radial-gradient(closest-side, rgba(40,35,10,.32), transparent); }
@keyframes shb { to { scale: .86; opacity: .7; } }
.dk .av::after { content: none; }
@media (max-width: 760px) { .dk .av::before { width: 52%; } }

/* 5b. real 3D: the card has thickness (stacked edge layers, dark > gold > cream) */
.card.dk { --th: 12px; }
.dk .front { transform: translateZ(calc(var(--th) / 2)); }
.dk .back { transform: rotateY(180deg) translateZ(calc(var(--th) / 2)); }
.card .edge { position: absolute; inset: 0; border-radius: 26px; pointer-events: none; background: var(--ec); transform: translateZ(var(--z)); }

/* 5c. depth parallax: character floats above, text sits deeper */
.dk .av img { transform: translate(calc(var(--px, 0) * 18px), calc(var(--py, 0) * 10px)); }
.dk .info { transform: translate(calc(var(--px, 0) * -3px), calc(var(--py, 0) * -2px)); }
.dk .ft .bd { translate: calc(var(--px, 0) * -2px) 0; }

/* 6. tech + social tiles: one calm monochrome set, brand colour on hover / tap */
.dk .ft { background: color-mix(in srgb, var(--cf) 4%, transparent); border-top-width: 1px; }
.dk .ft .bd { background: color-mix(in srgb, var(--cf) 6%, transparent); color: var(--cf); box-shadow: inset 0 0 0 1px var(--cl);
  transition: transform .35s var(--e), background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.dk .ft .bd:hover, .dk .ft .bd:focus-visible, .dk .ft .bd.pop { background: var(--b); color: var(--bf); box-shadow: 0 10px 22px -8px var(--b), inset 0 0 0 1px rgba(255,255,255,.18); outline: none; }
.dk .ft .bd:active { box-shadow: inset 0 0 0 1px var(--cl); }

/* 7. staggered entrance: rows, then tiles */
@keyframes rise { from { opacity: 0; translate: 0 10px; } }
.dk .info > * { animation: rise .6s var(--e) backwards; }
.dk .info > :nth-child(1) { animation-delay: .45s; } .dk .info > :nth-child(2) { animation-delay: .53s; } .dk .info > :nth-child(3) { animation-delay: .61s; } .dk .info > :nth-child(4) { animation-delay: .69s; }
.dk .ft > .bd { animation: rise .5s var(--e) backwards; }
.dk .ft > :nth-child(1) { animation-delay: .7s; } .dk .ft > :nth-child(2) { animation-delay: .74s; } .dk .ft > :nth-child(3) { animation-delay: .78s; } .dk .ft > :nth-child(4) { animation-delay: .82s; } .dk .ft > :nth-child(5) { animation-delay: .86s; }
.dk .ft > :nth-child(6) { animation-delay: .9s; } .dk .ft > :nth-child(7) { animation-delay: .94s; } .dk .ft > :nth-child(8) { animation-delay: .98s; } .dk .ft > :nth-child(9) { animation-delay: 1.02s; } .dk .ft > :nth-child(10) { animation-delay: 1.06s; }
.dk .ft > .bd.pop { animation: pop .55s var(--e); }

/* 8. a soft shadow on the "floor" that follows the tilt */
.stage { position: relative; }
.stage::after { content: ""; position: absolute; left: 50%; bottom: max(6%, 30px); width: min(60vw, 520px); height: 34px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.28), transparent); filter: blur(6px); translate: calc(-50% + var(--sx, 0) * 1px) 0; }
@media (min-width: 761px) { .stage::after { bottom: calc(50% - 265px); } }
@media (max-width: 760px) { .stage::after { display: none; } }