:root{color-scheme:light;--paper:#fff3e2;--ink:#472718;--orange:#a73e1b;--rule:#e9cbae;--muted:#794b33}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 "DM Sans",sans-serif}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(#ac5f2930 .65px,transparent .65px);background-size:7px 7px;mask-image:linear-gradient(100deg,transparent 24%,#000 90%);z-index:-1}
.shell{--content-width:min(1192px,calc(100% - 104px));width:var(--content-width);min-height:100svh;margin:auto;display:grid;grid-template-rows:auto 1fr auto}
.home-shell{width:100%;grid-template-columns:minmax(0,1fr)}
.home-shell>header,.home-shell>main,.footer-credit,.social-links{width:var(--content-width);margin-inline:auto}
header,footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-color:var(--rule);border-style:solid;border-width:0}
header{height:83px;border-bottom-width:1px}
.brand{display:flex;align-items:center;gap:12px;font:700 24px/1 "Pixelify Sans",monospace}
.icon{display:inline-grid;place-items:center;width:32px;height:32px;background:#f8d7b5;color:#a83f20;clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 4px,4px 4px)}
.pixel{width:18px;height:18px;image-rendering:pixelated}
.hero{display:grid;grid-template-columns:.89fr 1.11fr;align-items:center;gap:clamp(24px,5vw,76px);padding:60px 0 65px}
.copy{padding-bottom:16px}
h1{font:700 clamp(64px,8.1vw,126px)/.82 "Pixelify Sans",monospace;letter-spacing:-.065em;margin:24px 0 28px}
h1 span{color:var(--orange);display:block;margin-top:10px;white-space:nowrap}
p{margin:0;color:var(--muted);font-size:clamp(16px,1.6vw,21px);max-width:28ch}
.spark{width:28px;height:28px;color:#c66431;display:block}
button{display:inline-flex;align-items:center;gap:10px;margin-top:33px;border:1px solid #b96941;background:#ffe2c4;color:#6b301d;padding:10px 15px;font:700 14px/1.4 "DM Sans",sans-serif;box-shadow:3px 3px 0 #b96941;cursor:pointer}
button:hover{background:#ffd2aa}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #b96941}
button:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
figure{margin:0;background:#ffedda;padding:11px;border:1px solid #bd7851;box-shadow:6px 6px 0 #e9b48c;transform:rotate(1.15deg)}
canvas{display:block;width:100%;height:auto;image-rendering:pixelated;border:1px solid #9c593b;background:#e9a06c}
figcaption{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:10px 3px 0;font:600 15px "Pixelify Sans",monospace;color:#74442c}
.section-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;row-gap:4px;column-gap:clamp(12px,3vw,32px);font:600 16px "Pixelify Sans",monospace}
.section-nav a{color:var(--orange);text-decoration:none;text-underline-offset:5px}
.section-nav a:hover{text-decoration:underline}
.section-nav a:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
.about,.email{padding:48px 0 62px;border-top:1px solid var(--rule);scroll-margin-top:24px}
.about h2,.email h2{margin:0 0 16px;color:var(--orange);font:700 clamp(40px,6vw,66px)/1 "Pixelify Sans",monospace;letter-spacing:-.04em}
.about p{max-width:40ch}
.about p a{color:var(--orange);text-underline-offset:3px}
.about p+p:not(.about-links-label){margin-top:12px}
.about-links-label{margin-top:24px}
.about-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.email-content{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 32px}
.email-content p{max-width:40ch}
.social-links{display:flex;flex-wrap:wrap;gap:14px;margin-block:0;padding:0;list-style:none}
.social-links a,.email-link,.page-button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid #b96941;background:#ffe2c4;color:#6b301d;box-shadow:3px 3px 0 #b96941;font:600 18px/1.4 "Pixelify Sans",monospace;text-decoration:none}
.social-links svg,.email-link svg{width:16px;height:16px;flex:none}
.social-links a:hover,.email-link:hover,.page-button:hover{background:#ffd2aa;text-decoration:underline;text-underline-offset:4px}
.social-links a:focus-visible,.email-link:focus-visible,.page-button:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
.age-counter{display:inline-block;padding:0 .35em;background:#ffe2c4;border-bottom:2px solid #b96941;color:var(--orange);font:700 .9em/1.45 "DM Sans",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
a.brand{color:inherit;text-decoration:none}
.section-nav a[aria-current="page"]{text-decoration:underline}
.games,.songs,.miscellaneous,.films{padding:38px 0 56px}
.games h1,.songs h1,.miscellaneous h1,.films h1{margin:0 0 26px;color:var(--orange);font-size:clamp(44px,7vw,90px);line-height:1}
.films{padding-top:26px}
.films h1{margin-bottom:18px}
.film-card{
  display:flex;
  flex-direction:column;
  border:1px solid #775041;
  background:#3e2b27;
  color:#fff3e2;
}
.film-poster{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;background:#2d201f}
.film-info{padding:14px 12px}
@media(min-width:900px){.game-library.film-library{grid-template-columns:repeat(3,minmax(0,1fr))}}
.miscellaneous h1{font-size:clamp(34px,7vw,90px)}
.pc-setup{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  border:1px solid #bd7851;
  background:#ffedda;
  box-shadow:5px 5px 0 #e9b48c;
}
.pc-stage{
  display:grid;
  place-items:center;
  min-height:304px;
  padding:30px 12px;
  background:radial-gradient(#ffba7440 1px,transparent 1px) 0 0/10px 10px,#382626;
}
.pc-tower{
  display:grid;
  grid-template-columns:minmax(0,1fr) 60px;
  width:min(220px,100%);
  height:208px;
  border:6px solid #21191c;
  background:#35262a;
  box-shadow:7px 7px #21191c,0 12px #a364473b;
}
.pc-window{
  display:grid;
  grid-template-columns:1fr auto;
  align-content:center;
  align-items:center;
  gap:16px 8px;
  margin:8px;
  padding:10px;
  border:4px solid #6e4946;
  background:linear-gradient(145deg,#8d58553b,transparent 55%),#271d24;
}
.pc-board{height:54px;background:#58404b;border:5px solid #3c3037;box-shadow:inset 0 0 0 5px #a1685c}
.pc-ram{width:14px;height:52px;border-inline:3px solid #ffb77e;background:#56363a}
.pc-graphics{grid-column:1/-1;height:24px;background:#58404b;border-bottom:4px solid #dc885b}
.pc-front{display:grid;place-content:center;gap:10px;border-left:4px solid #21191c}
.pc-fan{
  display:grid;
  place-items:center;
  width:42px;
  aspect-ratio:1;
  border:4px solid #d67b4d;
  border-radius:50%;
  background:#271d24;
  box-shadow:0 0 10px #f29a5866;
}
.pc-fan::after{
  content:"";
  width:28px;
  aspect-ratio:1;
  background:#ffb77e;
  clip-path:polygon(42% 0,70% 0,64% 41%,100% 42%,100% 70%,59% 64%,58% 100%,30% 100%,36% 59%,0 58%,0 30%,41% 36%);
}
.pc-details{padding:clamp(20px,4vw,44px)}
.pc-details h2{margin:0 0 12px;font:700 clamp(28px,4vw,42px)/1 "Pixelify Sans",monospace}
.pc-specs{margin:0}
.pc-specs>div{display:grid;grid-template-columns:4.25rem minmax(0,1fr);gap:12px;padding:8px 0}
.pc-specs>div+div{border-top:1px solid var(--rule)}
.pc-specs dt{color:var(--orange);font-weight:700}
.pc-specs dd{margin:0}
.peripherals{margin-top:32px}
.peripherals .pc-stage{align-self:stretch;min-height:208px}
.peripherals-specs>div{grid-template-columns:5rem minmax(0,1fr)}
.pixel-keyboard{
  display:grid;
  gap:4px;
  width:min(232px,100%);
  padding:10px;
  border:5px solid #21191c;
  background:#593831;
  box-shadow:5px 5px #21191c,0 10px #a364473b;
}
.key-row{
  height:13px;
  background:repeating-linear-gradient(90deg,#ffbf87 0 6.25%,transparent 6.25% 8.3333%);
}
.key-row:nth-child(2){margin-inline:4px;background:repeating-linear-gradient(90deg,#e98c5b 0 6.25%,transparent 6.25% 8.3333%)}
.key-row:nth-child(3){margin-inline:8px}
.key-row-bottom{position:relative}
.key-row-bottom::after{
  content:"";
  position:absolute;
  inset:0 27%;
  border-inline:4px solid #593831;
  background:#e98c5b;
}
@media(max-width:620px){.pc-setup{grid-template-columns:1fr}}
.playlist{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,4vw,36px);padding:clamp(18px,4vw,36px);background:#ffedda;border:1px solid #bd7851;box-shadow:5px 5px 0 #e9b48c}
.playlist-record{flex:none;width:clamp(88px,20vw,160px);aspect-ratio:1;border:6px solid #e7a576;background:radial-gradient(circle,#ffedda 0 5%,#d87643 5% 24%,transparent 24%),repeating-radial-gradient(circle,#3e2b27 0 5px,#5e3d31 5px 7px);border-radius:50%}
.playlist-info h2,.tracklist h2{margin:0 0 12px;color:var(--ink);font:700 clamp(28px,4vw,42px)/1 "Pixelify Sans",monospace}
.tracklist{margin-top:40px}
.tracklist-note{margin-bottom:20px;max-width:none}
.tracklist ol{margin:0;padding:0 16px 0 44px;background:#ffedda;border:1px solid #bd7851;box-shadow:5px 5px 0 #e9b48c}
.tracklist li::marker{color:var(--orange);font:600 16px "Pixelify Sans",monospace}
.tracklist li+li{border-top:1px solid var(--rule)}
.track{display:grid;grid-template-columns:auto minmax(0,2fr) minmax(0,1fr) auto;align-items:center;gap:4px clamp(8px,2vw,18px);padding:10px 0}
.track-cover{display:block;width:44px;height:44px;object-fit:cover;background:#f8d7b5;border:1px solid var(--rule)}
.track-artist,.track time{color:var(--muted);font-size:14px}
.track time{font-variant-numeric:tabular-nums}
@media(max-width:560px){.track{grid-template-columns:auto minmax(0,1fr) auto}.track-cover{grid-row:span 2}.track-artist{grid-column:2}.track time{grid-area:1/3}}
.playlist-link{display:inline-block;padding:8px 14px;border:1px solid #b96941;background:#ffe2c4;color:#6b301d;box-shadow:3px 3px 0 #b96941;font-weight:700;text-decoration:none}
.playlist-link:hover{background:#ffd2aa;text-decoration:underline;text-underline-offset:4px}
.playlist-link:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
.game-library{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px);padding:clamp(12px,2.4vw,28px);margin:0;background:#2d201f;border:1px solid #6c4436;box-shadow:5px 5px 0 #e9b48c;list-style:none}
.game-card{display:flex;flex-direction:column;height:100%;border:1px solid #775041;background:#3e2b27;color:#fff3e2;text-decoration:none}
.game-card:hover{border-color:#ffb582;background:#4b322a}
.game-card:focus-visible{outline:2px solid #ffb582;outline-offset:3px}
.game-card img{display:block;width:100%;height:auto;aspect-ratio:460/215;object-fit:cover;background:#533329}
.game-info{display:grid;align-content:start;gap:5px;padding:14px 16px 16px}
.game-info h2,.film-card h2{margin:0;font:700 clamp(21px,3vw,32px)/1.1 "Pixelify Sans",monospace}
.game-info p{font-size:14px;color:#edcbb2}
.game-store{margin-top:8px;color:#ffb582;font-size:14px;font-weight:700}
.game-card:hover .game-store{text-decoration:underline;text-underline-offset:4px}
@media(max-width:560px){.game-library{grid-template-columns:1fr}}
footer{min-height:64px;border-top-width:1px;color:var(--muted);font:500 15px "Pixelify Sans",monospace}
.home-footer{display:block}
.footer-credit{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.footer-note{width:var(--content-width);max-width:none;margin:16px auto 0;color:#edcbb2;font-size:13px}
.social{padding:22px 0 26px;background:#3e2b27;border-top:3px solid #b96941}
.social-links a:focus-visible{outline-color:#ffb582}
:root.night{color-scheme:dark;--paper:#211a29;--ink:#fff0e4;--orange:#ffbb91;--rule:#584051;--muted:#e4c5c2}
.night body::before{background-image:radial-gradient(#ffb98c26 .65px,transparent .65px)}
.night .icon{background:#503344;color:var(--orange)}
.night .spark,.night figcaption{color:var(--orange)}
.night figure{background:#362738;border-color:#9b6b72;box-shadow:6px 6px 0 #4c3448}
.night canvas{background:#33263e;border-color:#754f63}
.night button,.night .email-link,.night .social-links a,.night .page-button{background:#51364a;color:var(--ink);border-color:#af7b83;box-shadow:3px 3px 0 #825865}
.night button:hover,.night .email-link:hover,.night .social-links a:hover,.night .page-button:hover{background:#654256}
.night button:active{box-shadow:1px 1px 0 #825865}
.night .age-counter{background:#432d40;border-color:#af7b83}
.night .social{background:#181320;border-color:#754f63}
.night .playlist,.night .tracklist ol,.night .pc-setup,
.night .game-library{background:#362738;border-color:#9b6b72;box-shadow:5px 5px 0 #4c3448}
.night .game-card,.night .film-card{background:#432d40;border-color:#754f63}
.night .game-card:hover{background:#51364a;border-color:var(--orange)}
.night .film-poster,.night .game-card img,.night .pc-stage{background-color:#281e30}
.night .track-cover{background:#503344}
.night .playlist-link{background:#51364a;color:var(--ink);border-color:#af7b83;box-shadow:3px 3px 0 #825865}
.night .playlist-link:hover{background:#654256}
@media(max-width:840px){.shell{--content-width:calc(100% - 48px)}.hero{grid-template-columns:1fr;gap:34px;padding:38px 0 48px}.about,.email{padding:38px 0 48px}figure{width:min(100%,620px);justify-self:center;transform:none}.copy{padding:0}h1{font-size:clamp(65px,13vw,110px)}header{height:64px}}
@media(max-width:350px){.shell{--content-width:calc(100% - 34px)}h1{font-size:57px}}