@font-face {
  font-family: "Minecraftia";
  src: url("./fonts/Minecraftia-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --background: 0 0% 4%;
  --foreground: 70 35% 94%;
  --card: 140 20% 8%;
  --card-foreground: 70 35% 94%;
  --popover: 140 20% 8%;
  --popover-foreground: 70 35% 94%;
  --primary: 82 86% 72%;
  --primary-foreground: 150 24% 8%;
  --secondary: 140 14% 12%;
  --secondary-foreground: 70 35% 94%;
  --muted: 140 12% 14%;
  --muted-foreground: 112 10% 63%;
  --accent: 82 86% 72%;
  --accent-foreground: 150 24% 8%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 140 14% 20%;
  --input: 140 14% 20%;
  --ring: 82 86% 72%;
  --radius: 0.8rem;
  --sidebar-background: 150 24% 6%;
  --sidebar-foreground: 112 10% 63%;
  --sidebar-primary: 82 86% 72%;
  --sidebar-primary-foreground: 150 24% 8%;
  --sidebar-accent: 140 14% 12%;
  --sidebar-accent-foreground: 70 35% 94%;
  --sidebar-border: 140 14% 20%;
  --sidebar-ring: 82 86% 72%;
  --lime: #c3f87b;
  --forest: #537e48;
  --deep: #080e0b;
  --surface: #101a14;
  --line: #26352b;
  --muted-copy: #8c9d90;
  --pixel-font: "Minecraftia", monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.dark {
  --background: 0 0% 4%;
  --foreground: 70 35% 94%;
  --card: 140 20% 8%;
  --card-foreground: 70 35% 94%;
  --popover: 140 20% 8%;
  --popover-foreground: 70 35% 94%;
  --primary: 82 86% 72%;
  --primary-foreground: 150 24% 8%;
  --secondary: 140 14% 12%;
  --secondary-foreground: 70 35% 94%;
  --muted: 140 12% 14%;
  --muted-foreground: 112 10% 63%;
  --accent: 82 86% 72%;
  --accent-foreground: 150 24% 8%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 140 14% 20%;
  --input: 140 14% 20%;
  --ring: 82 86% 72%;
  --sidebar-background: 150 24% 6%;
  --sidebar-foreground: 112 10% 63%;
  --sidebar-primary: 82 86% 72%;
  --sidebar-primary-foreground: 150 24% 8%;
  --sidebar-accent: 140 14% 12%;
  --sidebar-accent-foreground: 70 35% 94%;
  --sidebar-border: 140 14% 20%;
  --sidebar-ring: 82 86% 72%;
}

@layer base {
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; background: var(--deep); }
  body {
    margin: 0;
    min-width: 320px;
    background: var(--deep);
    color: #f1f4e8;
    font-family: var(--pixel-font);
    font-size: 11px;
    -webkit-font-smoothing: antialiased;
  }
  button, a { font: inherit; color: inherit; }
  a { text-decoration: none; }
  button { cursor: pointer; }
  button:focus-visible, a:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
  ::selection { color: #080e0b; background: var(--lime); }
}

.portfolio { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 10%, #17271b 0, #0b120d 42rem, var(--deep) 82rem); }
.page-progress { position: fixed; z-index: 50; inset: 0 auto auto 0; width: 100%; height: 2px; transform-origin: left; background: linear-gradient(90deg, var(--lime), #8dbf55); box-shadow: 0 0 15px #c3f87b88; }
.scene-glow { position: absolute; width: 40vw; height: 40vw; max-width: 600px; max-height: 600px; border-radius: 50%; filter: blur(110px); opacity: .13; pointer-events: none; z-index: -1; animation: glow-drift 18s ease-in-out infinite alternate; }
.scene-glow-a { top: 70px; left: -15vw; background: #7bcf48; }
.scene-glow-b { top: 270px; right: -18vw; background: #436c8a; animation-delay: -8s; }
.film-wall { position: absolute; z-index: -1; top: -120px; left: 50%; width: min(1200px, 110vw); height: 800px; display: flex; justify-content: center; gap: 18px; transform: translateX(-50%) perspective(800px) rotateX(-8deg) rotateZ(-3deg); opacity: .68; mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); }
.film-column { flex: 0 0 128px; display: flex; flex-direction: column; gap: 16px; animation: film-scroll 58s linear infinite; }
.film-column-1 { animation-duration: 76s; animation-direction: reverse; transform: translateY(-160px); }
.film-column-2 { animation-duration: 68s; transform: translateY(-50px); }
.film-tile { position: relative; display: block; width: 128px; height: 180px; flex: 0 0 180px; overflow: hidden; border: 1px solid #b3d69214; border-radius: 17px; background: linear-gradient(140deg, #293c2b80, #0d171080 70%); box-shadow: inset 0 0 35px #bdf28b09; }
.film-tile::before { content: ""; position: absolute; inset: 12px; border: 1px solid #b3d69214; border-radius: 11px; background: repeating-linear-gradient(0deg, transparent 0 14px, #d7f0d006 15px 16px); }
.film-tile i { position: absolute; inset: 28% 25%; background: linear-gradient(135deg, #8dbf5521, transparent 70%); clip-path: polygon(50% 0, 100% 25%, 78% 100%, 15% 80%, 0 25%); }
.tile-1 { background: linear-gradient(140deg, #3a463380, #132019aa 70%); }
.tile-2 { background: linear-gradient(140deg, #364e3b80, #111b15aa 70%); }
.tile-3 { background: linear-gradient(140deg, #323f4a80, #111a1eaa 70%); }

.site-nav { position: relative; z-index: 3; width: min(1080px, calc(100% - 48px)); height: 64px; margin: 22px auto 0; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #ffffff18; border-radius: 18px; background: #101a14c9; backdrop-filter: blur(18px); box-shadow: 0 18px 45px #0003; animation: nav-in .8s var(--ease) both; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: #f2f7ee; }
.brand-cube { display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border: 1px solid #c3f87b66; border-radius: 9px; background: linear-gradient(140deg, #c3f87b, #72a947); box-shadow: 0 5px 18px #a4dc6633; }
.brand-cube img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.mark-dot, .footer-logo span { color: var(--lime); }
.site-nav nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 38px); color: #b5c3b5; }
.site-nav nav a { transition: color .2s ease, transform .2s ease; }
.site-nav nav a:hover { color: var(--lime); transform: translateY(-2px); }
.nav-cta { padding: 12px 17px; border: 1px solid #c3f87b30; border-radius: 999px; background: #c3f87b12; color: var(--lime) !important; }
.nav-cta span { margin-left: 8px; }

.hero { position: relative; min-height: min(780px, calc(100svh - 86px)); width: min(1080px, calc(100% - 48px)); margin: 0 auto; display: flex; align-items: center; justify-content: center; text-align: center; padding: 96px 0 130px; }
.hero-copy { position: relative; z-index: 1; animation: hero-rise 1s var(--ease) both; }
.eyebrow { margin: 0 0 22px; color: #a8bcaa; font-size: 8px; letter-spacing: .06em; line-height: 1.8; }
.live-dot { display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px #c3f87b1c; animation: blink 2s infinite; }
.hero-title-wrap { position: relative; display: inline-block; margin: 5px 0 28px; }
.hero h1 { margin: 0; color: #f4f5ec; font-size: clamp(68px, 13vw, 156px); line-height: 1.2; letter-spacing: -.075em; text-shadow: 5px 6px 0 #020502, 0 0 60px #c3f87b16; animation: title-float 5s ease-in-out infinite; }
.hero h1 span { color: var(--lime); }
.hero-coordinate { position: absolute; top: 17px; left: -56px; color: #8a9f8c; font-size: 6px; writing-mode: vertical-rl; }
.coordinate-right { left: auto; right: -62px; top: auto; bottom: 12px; }
.hero-subtitle { margin: 0; color: #edf3e8; font-size: clamp(15px, 2.3vw, 22px); line-height: 1.8; }
.hero-subtitle span { color: var(--lime); }
.hero-description { margin: 13px 0 0; color: var(--muted-copy); font-size: 9px; line-height: 2; }
.hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 27px; }
.button { min-height: 45px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 18px; border: 1px solid #ffffff22; border-radius: 999px; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s, background .25s; }
.button:hover { transform: translateY(-3px); border-color: #c3f87b80; box-shadow: 0 10px 30px #0004; }
.button span { color: var(--lime); font-size: 13px; }
.button-primary { color: #101b12; border-color: #c3f87b; background: linear-gradient(135deg, #d1ff8e, #a9df69); box-shadow: 0 7px 20px #a1dc6033; }
.button-primary span { color: #273b20; }
.button-ghost { background: #ffffff08; color: #e9efe4; }
.social-row { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 24px; color: #809183; font-size: 8px; }
.social-row a:hover { color: var(--lime); }
.scroll-cue { position: absolute; bottom: 28px; left: 50%; display: flex; align-items: center; gap: 10px; transform: translateX(-50%); color: #839487; font-size: 7px; letter-spacing: .05em; }
.scroll-cue span { width: 1px; height: 26px; background: linear-gradient(transparent, var(--lime)); transform-origin: top; animation: scroll-stem 2s ease-in-out infinite; }
.motion-button { position: absolute; z-index: 2; right: max(0px, calc((100% - 1080px) / 2)); bottom: 31px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid #ffffff20; border-radius: 999px; background: #111b14b5; color: var(--lime); }
.motion-button span { font-size: 10px; }
.motion-button small { color: #a8b7a7; font-size: 6px; }

.page-width { width: min(1010px, calc(100% - 48px)); margin-inline: auto; }
.work-section { position: relative; z-index: 1; padding: 90px 0 80px; border-top: 1px solid #ffffff10; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section-heading .eyebrow, .about-copy .eyebrow, .contact-panel .eyebrow { margin-bottom: 14px; color: var(--lime); }
.section-heading h2, .about-copy h2, .contact-panel h2 { margin: 0; font-size: clamp(22px, 3vw, 34px); line-height: 1.65; letter-spacing: -.06em; }
.section-heading h2 span, .about-copy h2 span, .contact-panel h2 span { color: var(--lime); }
.section-aside { margin: 0 0 5px; color: var(--muted-copy); font-size: 8px; line-height: 2; text-align: right; }
.work-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; margin-bottom: 19px; border-block: 1px solid #ffffff12; }
.filter-list { display: flex; flex-wrap: wrap; gap: 6px; }
.filter { padding: 9px 13px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #8e9c8f; transition: color .2s, background .2s, border .2s; }
.filter:hover, .filter.active { border-color: #c3f87b30; background: #c3f87b12; color: var(--lime); }
.video-count { color: #7f9081; font-size: 7px; white-space: nowrap; }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.video-card { min-width: 0; display: flex; flex-direction: column; padding: 7px; overflow: hidden; text-align: left; border: 1px solid #ffffff18; border-radius: 14px; background: linear-gradient(145deg, #18241b, #0c130e 78%); animation: card-rise .65s var(--ease) both; transition: transform .35s var(--ease), border-color .3s, box-shadow .3s; }
.video-card:hover { transform: translateY(-7px); border-color: #c3f87b70; box-shadow: 0 18px 45px #0005; }
  .video-art, .preview-art { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1.58; overflow: hidden; border-radius: 9px; isolation: isolate; background: radial-gradient(ellipse at 25% 12%, color-mix(in srgb, var(--tone) 38%, #101a14), #101810 72%); }
  .video-art > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }

.tone-lime { --tone: #c3f87b; }
.tone-purple { --tone: #c4a2fa; }
.tone-blue { --tone: #8ed9e3; }
.tone-orange { --tone: #efbf78; }
.tone-pink { --tone: #ed9bb9; }
.art-grid { position: absolute; inset: -10%; opacity: .7; background-image: linear-gradient(color-mix(in srgb, var(--tone) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--tone) 10%, transparent) 1px, transparent 1px); background-size: 25px 25px; transform: perspective(180px) rotateX(54deg) scale(1.4) translateY(12%); mask-image: linear-gradient(transparent, #000 25%, #000 80%, transparent); }
.video-art::before, .preview-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 76% 28%, color-mix(in srgb, var(--tone) 25%, transparent), transparent 30%), linear-gradient(180deg, transparent 50%, #080e0bc9); }
.video-art strong, .preview-art strong { position: relative; z-index: 1; color: var(--tone); font-size: clamp(16px, 2.6vw, 28px); letter-spacing: -.07em; transform: rotate(-6deg); text-shadow: 3px 4px 0 #080e0b; transition: transform .4s var(--ease); }
.video-card:hover .video-art strong { transform: rotate(-2deg) scale(1.07); }
.art-tag, .preview-tag { position: absolute; z-index: 2; top: 10px; padding: 6px 8px; border: 1px solid #ffffff20; border-radius: 5px; background: #07100bd9; color: #d9e4d5; font-size: 6px; }
.art-tag { left: 10px; }
.preview-tag { right: 10px; color: var(--tone); }
.play-icon { position: absolute; z-index: 1; left: 13px; bottom: 12px; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid color-mix(in srgb, var(--tone) 60%, transparent); border-radius: 50%; background: #07100bd9; color: var(--tone); font-size: 8px; transition: transform .25s; }
.video-card:hover .play-icon { transform: scale(1.12); }
.art-spark { position: absolute; right: 18px; bottom: 5px; color: var(--tone); opacity: .4; font-size: 34px; animation: spark-turn 16s linear infinite; }
.video-card-copy { display: flex; flex-direction: column; gap: 9px; padding: 15px 10px 11px; }
.video-kicker { color: #94a494; font-size: 7px; }
.video-kicker i { margin: 0 5px; color: var(--lime); font-style: normal; }
.video-title { min-height: 38px; color: #e5ede0; font-size: 10px; line-height: 1.8; }
.watch-label { display: flex; justify-content: space-between; margin-top: 3px; color: var(--lime); font-size: 7px; }
.watch-label span { font-size: 12px; transition: transform .2s; }
.video-card:hover .watch-label span { transform: translate(3px, -2px); }
.work-note { margin: 28px 0 0; color: var(--muted-copy); font-size: 8px; text-align: center; }
.work-note a { color: var(--lime); }

.about-section { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; padding: 86px 0; border-top: 1px solid #ffffff10; }
.about-art { position: relative; display: grid; place-items: center; min-height: 330px; overflow: hidden; }
.avatar-frame { position: relative; z-index: 1; padding: 17px; border: 1px solid #c3f87b38; border-radius: 17px; background: linear-gradient(145deg, #192a1d, #0b130e); box-shadow: 13px 13px 0 #030704, 0 0 65px #c3f87b0d; animation: avatar-hover 5s ease-in-out infinite; }
.avatar-face { position: relative; display: grid; place-items: center; width: 205px; height: 205px; border-radius: 11px; background: linear-gradient(145deg, #243c29, #101a13); color: var(--lime); font-size: 115px; line-height: 1; text-shadow: 6px 7px 0 #18271a; }
.avatar-face::before { content: ""; position: absolute; inset: 14px; border: 1px solid #c3f87b15; border-radius: 7px; background-image: linear-gradient(#c3f87b08 1px, transparent 1px), linear-gradient(90deg, #c3f87b08 1px, transparent 1px); background-size: 17px 17px; }
.avatar-face span, .avatar-face b { position: relative; z-index: 1; }
.avatar-face b { position: absolute; top: 22px; right: 27px; font-size: 25px; }
.avatar-status { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 14px; color: #a8baaa; font-size: 7px; }
.avatar-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
.coordinates { position: absolute; bottom: 10px; color: #768878; font-size: 7px; }
.orbit { position: absolute; width: 280px; height: 280px; border: 1px solid #c3f87b0c; border-radius: 50%; animation: orbit 24s linear infinite; }
.orbit::before { content: ""; position: absolute; top: 32px; left: 41px; width: 7px; height: 7px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 18px var(--lime); }
.orbit-two { width: 340px; height: 230px; transform: rotate(-35deg); animation-direction: reverse; }
.about-copy > p:not(.eyebrow) { max-width: 430px; margin: 20px 0 0; color: var(--muted-copy); font-size: 9px; line-height: 2.2; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tag-row span { padding: 8px 11px; border: 1px solid #ffffff15; border-radius: 6px; color: #b9c7b9; font-size: 7px; }

.contact-section { padding: 18px 0 85px; }
.contact-panel { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 48px 52px; overflow: hidden; border: 1px solid #c3f87b29; border-radius: 20px; background: radial-gradient(ellipse at 20% 0, #293d2a, transparent 65%), linear-gradient(130deg, #152219, #0d160f); box-shadow: inset 0 1px #ffffff0a; }
.contact-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, #c3f87b0a 50%, transparent 70%); transform: translateX(-100%); animation: panel-sheen 11s ease-in-out infinite; }
.contact-panel > div { position: relative; z-index: 1; }
.contact-panel > div > p:not(.eyebrow) { margin: 14px 0 0; color: var(--muted-copy); font-size: 8px; }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.contact-actions .button { min-height: 42px; padding-inline: 14px; font-size: 8px; }
.panel-cross { position: absolute; z-index: 1; color: #c3f87b77; font-size: 17px; }
.cross-a { top: 15px; left: 19px; }
.cross-b { bottom: 15px; right: 19px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 90px; border-top: 1px solid #ffffff10; color: #839284; font-size: 7px; }
.footer-logo { color: #edf3e8; font-size: 12px; }
.site-footer > a:last-child:hover { color: var(--lime); }

.preview-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: #030704dc; backdrop-filter: blur(10px); animation: fade-in .2s ease both; }
.preview-dialog { width: min(500px, 100%); padding: 19px; border: 1px solid #c3f87b4a; border-radius: 17px; background: #101a14; box-shadow: 0 25px 80px #0009; animation: dialog-in .3s var(--ease) both; }
.preview-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; color: var(--lime); font-size: 7px; }
.preview-top button { width: 32px; height: 32px; border: 1px solid #ffffff18; border-radius: 8px; background: #ffffff08; font-size: 19px; }
.preview-art { aspect-ratio: 16 / 9; }
.preview-art strong { font-size: clamp(26px, 6vw, 45px); }
.preview-dialog h2 { margin: 20px 0 8px; color: #f1f4e8; font-size: 13px; line-height: 1.8; }
.preview-dialog p { margin: 0 0 18px; color: var(--muted-copy); font-size: 8px; line-height: 2; }
.preview-dialog .button { min-height: 40px; font-size: 8px; }

.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
@keyframes film-scroll { to { transform: translateY(-54%); } }
@keyframes glow-drift { to { transform: translate(45px, 30px) scale(1.12); } }
@keyframes nav-in { from { opacity: 0; transform: translateY(-15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: translateY(0); } }
@keyframes title-float { 50% { transform: translateY(-7px); } }
@keyframes blink { 50% { opacity: .48; box-shadow: 0 0 0 7px #c3f87b0d; } }
@keyframes scroll-stem { 50% { transform: scaleY(.55); opacity: .4; } }
@keyframes card-rise { from { opacity: 0; transform: translateY(17px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spark-turn { to { transform: rotate(360deg); } }
@keyframes avatar-hover { 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes panel-sheen { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (min-width: 1300px) { .film-wall { top: -90px; gap: 25px; } .film-column { flex-basis: 155px; } .film-tile { width: 155px; height: 205px; flex-basis: 205px; } }
@media (max-width: 760px) { .site-nav { width: calc(100% - 28px); margin-top: 14px; height: 58px; padding-inline: 13px; border-radius: 14px; } .site-nav nav { gap: 14px; font-size: 8px; } .site-nav nav a:nth-child(2) { display: none; } .nav-cta { padding: 10px 11px; } .hero { width: calc(100% - 28px); min-height: 690px; padding: 80px 0 120px; } .hero h1 { font-size: clamp(68px, 18vw, 128px); } .hero-coordinate { left: -29px; font-size: 5px; } .coordinate-right { left: auto; right: -31px; } .motion-button { right: 0; bottom: 25px; } .work-section { padding-top: 66px; } .page-width { width: calc(100% - 32px); } .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .video-card-copy { padding: 12px 7px 8px; } .video-art strong { font-size: clamp(14px, 4vw, 23px); } .about-section { grid-template-columns: 1fr; gap: 35px; padding-block: 65px; } .about-art { min-height: 300px; } .about-copy { max-width: 520px; margin-inline: auto; } .contact-panel { align-items: flex-start; flex-direction: column; padding: 37px 26px; } .contact-actions { justify-content: flex-start; } .contact-actions .button { padding-inline: 13px; } }
@media (max-width: 430px) { .site-nav nav { gap: 11px; } .site-nav nav a { font-size: 7px; } .wordmark { gap: 7px; font-size: 11px; } .brand-cube { width: 27px; height: 27px; } .hero { min-height: 650px; } .hero-actions { gap: 8px; } .button { min-height: 43px; padding-inline: 13px; font-size: 8px; } .social-row { gap: 8px; font-size: 7px; } .section-heading { align-items: flex-start; flex-direction: column; gap: 8px; } .section-aside { display: none; } .filter { padding: 8px 10px; font-size: 7px; } .video-count { font-size: 6px; } .video-grid { gap: 9px; } .video-card { padding: 5px; border-radius: 10px; } .video-art { aspect-ratio: 1.2; } .art-tag, .preview-tag { top: 6px; padding: 5px; font-size: 5px; } .art-tag { left: 6px; } .preview-tag { right: 6px; } .video-card-copy { gap: 7px; padding: 10px 5px 7px; } .video-title { font-size: 8px; } .video-kicker, .watch-label { font-size: 6px; } .avatar-face { width: 180px; height: 180px; font-size: 100px; } .contact-panel { padding: 33px 20px; } .contact-actions { gap: 7px; } .contact-actions .button { font-size: 7px; } .site-footer { font-size: 6px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

.brand-trigger { appearance: none; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-shadow: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: filter .16s, transform .16s; }
.brand-trigger:hover { filter: brightness(1.15) drop-shadow(0 0 20px #c3f87b55); }
.brand-trigger:active { transform: scale(.94) rotate(-2deg); }
.brand-trigger:focus-visible { outline: 2px dashed var(--lime); outline-offset: 12px; border-radius: 8px; }
.title-hint { margin: -15px 0 17px; color: #96aa96; font-size: 6px; letter-spacing: .05em; opacity: .85; animation: hint-pulse 2.2s ease-in-out infinite; }
.sound-toggle { position: fixed; z-index: 12; right: 19px; bottom: 18px; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 13px; border: 1px solid #c3f87b38; border-radius: 999px; background: #101a14ed; color: #a9b8a8; font-size: 7px; box-shadow: 0 8px 25px #0006; backdrop-filter: blur(10px); transition: transform .2s, border-color .2s, color .2s; }
.sound-toggle:hover { transform: translateY(-3px); border-color: var(--lime); color: var(--lime); }
.sound-toggle span { color: var(--lime); font-size: 12px; }
.burst-layer { position: fixed; z-index: 14; inset: 0; overflow: hidden; pointer-events: none; }
.burst-loot, .burst-dust { position: fixed; display: block; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; animation: loot-burst var(--burst-time) cubic-bezier(.12,.74,.32,1) forwards; }
.burst-loot { border: 1px solid #ffffff7a; border-radius: 2px; image-rendering: pixelated; box-shadow: inset -4px -5px #0004, inset 3px 3px #ffffff44, 0 6px 10px #0005; background-image: linear-gradient(135deg,#ffffff22 25%,transparent 25% 50%,#00000020 50% 75%,transparent 75%); background-size: 8px 8px; }
.burst-loot::before, .burst-loot::after { content: ""; position: absolute; width: 3px; height: 3px; background: #efffdc; box-shadow: 7px 5px #ffffff88, 3px 12px #17251666; }
.burst-loot::before { left: 3px; top: 4px; }
.burst-loot::after { right: 4px; bottom: 4px; background: #273b2a; }
.burst-loot b { position: absolute; inset: 0; display: grid; place-items: center; color: #f6ffdf; font: bold 12px/1 system-ui,sans-serif; text-shadow: 1px 2px #263626; }
.loot-grass { background-color: #805a3d; border-top: 4px solid #73b846; }
.loot-stone { background-color: #777d78; }
.loot-diamond { background-color: #54d9d5; box-shadow: inset -4px -5px #188b90, inset 3px 3px #c5ffff, 0 6px 10px #0005; }
.loot-emerald { background-color: #5bd269; box-shadow: inset -4px -5px #248d45, inset 3px 3px #d6ffd6, 0 6px 10px #0005; }
.loot-goldore { background-color: #626762; }
.loot-goldore::before, .loot-goldore::after { background: #ffd84c; box-shadow: 8px 5px #e9aa25, 3px 12px #ffed8b; }
.loot-gold { height: 9px !important; border-radius: 2px; background: linear-gradient(#fff3ad,#e9b83b 45%,#a96a16); }
.loot-iron { height: 9px !important; border-radius: 2px; background: linear-gradient(#ffffff,#bec7c6 45%,#707d7c); }
.loot-gold::before, .loot-iron::before { left: 1px; top: 2px; width: 2px; height: 3px; background: #fff; box-shadow: 8px 0 #ffffff80, 16px 0 #ffffff66; }
.loot-gold::after, .loot-iron::after { display: none; }
.loot-ingot.loot-diamond { height: 9px !important; border-radius: 2px; background: linear-gradient(#d5ffff,#56d9df 45%,#168a95); }
.loot-ingot.loot-diamond::before { width: 2px; height: 3px; left: 2px; top: 2px; background: #fff; box-shadow: 8px 0 #ffffffaa, 16px 0 #ffffff88; }
.loot-ingot.loot-diamond::after { display: none; }
.dust-lime { background: #c3f87b; box-shadow: 0 0 11px #c3f87b; }
.dust-gold { background: #ffd767; box-shadow: 0 0 11px #ffd767; }
.dust-diamond { background: #70f2ef; box-shadow: 0 0 11px #70f2ef; }
.dust-purple { background: #c4a2fa; box-shadow: 0 0 11px #c4a2fa; }
.tnt-warning { position: fixed; z-index: 13; left: 50%; bottom: 76px; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 10px 15px 10px 10px; border: 1px solid #ff5147a6; border-radius: 8px; background: #200d0cf2; color: #fff1e8; font-size: clamp(6px,1.5vw,9px); text-align: center; box-shadow: 0 9px 35px #0008, 0 0 22px #f43e2b24; transform: translateX(-50%); animation: warning-in .6s cubic-bezier(.2,1.6,.4,1) both, warning-pulse 1.4s ease-in-out infinite 0.7s; }
.tnt-warning small { color: #f3a097; font-size: 6px; white-space: nowrap; }
.tnt-block, .death-tnt { position: relative; display: grid; place-items: center; flex: 0 0 36px; height: 36px; overflow: hidden; border: 2px solid #ffe3c7; border-radius: 2px; background: repeating-linear-gradient(0deg,#d72c22 0 8px,#f64a36 8px 15px); box-shadow: inset -4px -4px #8c1c1b, inset 3px 3px #ff8063; transform: rotate(-7deg); animation: tnt-wiggle .32s steps(2,end) infinite alternate; }
.tnt-block::before, .death-tnt::before { content: ""; position: absolute; inset: 5px 0 auto; height: 7px; border-block: 1px solid #ffefd7aa; background: #f4d7b6; }
.tnt-block i, .death-tnt i { z-index: 1; padding: 2px 3px; background: #fff0d8; color: #a52019; font: bold 7px/1 system-ui,sans-serif; font-style: normal; letter-spacing: 1px; }
.tnt-block b, .death-tnt b { position: absolute; bottom: 2px; left: 5px; width: 4px; height: 4px; border-radius: 50%; background: #fff2ca; box-shadow: 10px 2px #fff2ca, 20px -1px #fff2ca; }
.scroll-reveal { opacity: 0; transform: translateY(32px) scale(.985); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.scroll-reveal.is-visible { opacity: 1; transform: none; }
.video-card.scroll-reveal { animation: none; transition-delay: var(--card-delay,0ms); }
.video-card.scroll-reveal.is-visible { animation: card-pop .65s var(--ease) both; animation-delay: var(--card-delay,0ms); }
.work-toolbar, .section-heading { animation: fade-slide .7s var(--ease) both; }
.filter { position: relative; overflow: hidden; }
.filter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg,transparent,#ffffff22,transparent); transform: translateX(-120%); }
.filter:hover::after { animation: filter-flash .55s ease; }
.death-overlay { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(ellipse at 50% 30%,#5d1c15e8,#270d11f4 70%), repeating-linear-gradient(0deg,#10080a20 0 2px,transparent 2px 5px); animation: death-flash .8s ease both; }
.death-overlay::before { content: ""; position: absolute; inset: -10%; opacity: .22; background: repeating-linear-gradient(135deg,transparent 0 36px,#f1472c 37px,#f1472c 39px,transparent 40px 72px); animation: death-lines 12s linear infinite; }
.death-content { position: relative; width: min(530px,100%); padding: clamp(24px,6vw,50px); border: 2px solid #e8a79c66; background: #140a0ced; box-shadow: 0 20px 100px #000b, inset 0 0 50px #db35231c; text-align: center; animation: death-card-in .8s cubic-bezier(.15,1.5,.35,1) both; }
.death-heading { display: flex; align-items: center; justify-content: center; gap: 17px; color: #ffdfd8; font-size: clamp(18px,5vw,34px); line-height: 1.6; text-shadow: 3px 4px #681d1a; animation: death-text 2s ease-in-out infinite; }
.death-tnt { flex-basis: 47px; height: 47px; }
.death-content p { margin: 27px 0 8px; color: #fff1e9; font-size: clamp(10px,2.8vw,15px); line-height: 2.2; }
.death-score { display: block; margin-bottom: 24px; color: #f7bdb0; font-size: 9px; }
.respawn-button, .title-screen-button { display: block; width: min(340px,100%); min-height: 44px; margin: 10px auto; border: 1px solid #efc8bd; border-radius: 2px; background: linear-gradient(#674039,#39221f); color: #fff4e9; font-family: var(--pixel-font); font-size: 9px; box-shadow: 0 4px #130a09; transition: transform .16s, filter .16s, background .16s; }
.respawn-button:hover, .title-screen-button:hover { transform: scale(1.035); filter: brightness(1.2); background: linear-gradient(#855047,#482925); }
.respawn-button:active, .title-screen-button:active { transform: translateY(3px); box-shadow: 0 1px #130a09; }
.death-content small { display: block; margin-top: 19px; color: #b98a84; font-size: 6px; }
.motion-paused .burst-loot, .motion-paused .burst-dust, .motion-paused .scroll-reveal { animation-play-state: paused !important; }
@keyframes loot-burst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0); } 9% { opacity: 1; transform: translate(-50%,-50%) scale(1.25) rotate(calc(var(--burst-spin)*.12)); } 76% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y))) scale(.38) rotate(var(--burst-spin)); } }
@keyframes warning-in { from { opacity: 0; bottom: 45px; } to { opacity: 1; bottom: 76px; } }
@keyframes warning-pulse { 50% { border-color: #ff8a4a; box-shadow: 0 9px 35px #0008,0 0 28px #ff402f55; } }
@keyframes tnt-wiggle { to { transform: rotate(7deg) scale(1.08); } }
@keyframes hint-pulse { 50% { opacity: .5; letter-spacing: .14em; } }
@keyframes card-pop { 0% { opacity: 0; transform: translateY(30px) scale(.92) rotate(-1deg); } 70% { opacity: 1; transform: translateY(-5px) scale(1.02) rotate(.4deg); } 100% { opacity: 1; transform: none; } }
@keyframes fade-slide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes filter-flash { to { transform: translateX(120%); } }
@keyframes death-flash { 0% { background-color: #fff; } 100% { background-color: transparent; } }
@keyframes death-lines { to { background-position: 200px 200px; } }
@keyframes death-card-in { 0% { opacity: 0; transform: scale(.82) translateY(50px) rotateX(22deg); } 70% { opacity: 1; transform: scale(1.035) translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes death-text { 50% { text-shadow: 3px 4px #681d1a,0 0 25px #ff7053aa; } }

@media (max-width: 500px) { .tnt-warning { bottom: 72px; gap: 7px; padding: 8px; font-size: 6px; } .tnt-block { flex-basis: 29px; width: 29px; height: 29px; } .tnt-block b { transform: scale(.75); transform-origin: left bottom; } .sound-toggle { right: 10px; bottom: 10px; } .death-content { padding: 26px 16px; } }
@media (prefers-reduced-motion: reduce) { .scroll-reveal { opacity: 1; transform: none; } }
[hidden] { display: none !important; }

.video-card.scroll-reveal { animation: none; transition-delay: var(--card-delay,0ms); }
.video-card.scroll-reveal.is-visible { animation: card-pop .65s var(--ease) both; animation-delay: var(--card-delay,0ms); }