:root {
  color-scheme: dark;
  --ink: #f8fafc;
  --muted: #cbd5e1;
  --panel: rgba(5, 9, 16, .88);
  --edge-mid: #9299a1;
  --accent: #a3e635;
  --unit: clamp(2px, .24vw, 4px);
  --content: min(880px, calc(100vw - 40px));
  font-family: "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #07101c; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--ink); background: transparent; letter-spacing: .02em; text-shadow: 2px 2px 0 rgba(0,0,0,.88); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 12px 16px; color: #fff; background: #111; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.world, .world > * { position: fixed; inset: 0; pointer-events: none; }
.world { z-index: 0; overflow: hidden; background: linear-gradient(to bottom, #4675a8 0 46%, #87b755 46% 67%, #46692f 67% 100%); }
.world::before { content: ""; position: absolute; inset: -5%; 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: 16px 16px; image-rendering: pixelated; animation: world-drift 24s ease-in-out infinite alternate; }
.sun { inset: 9vh auto auto 12vw; width: clamp(60px,7vw,110px); aspect-ratio: 1; background: #f7e79f; box-shadow: 0 0 60px rgba(255,239,165,.5); opacity: .8; }
.cloud { width: 170px; height: 36px; background: rgba(244,247,239,.75); box-shadow: 32px -28px 0 rgba(244,247,239,.75),82px -12px 0 rgba(244,247,239,.75),128px 4px 0 rgba(244,247,239,.75); filter: blur(2px); }
.cloud-one { inset: 12vh auto auto 23vw; }
.cloud-two { inset: 20vh 13vw auto auto; transform: scale(.72); }
.ridge { top: auto; clip-path: polygon(0 68%,8% 42%,16% 58%,24% 30%,31% 59%,39% 36%,47% 65%,56% 22%,66% 57%,76% 36%,87% 62%,94% 45%,100% 68%,100% 100%,0 100%); }
.ridge-back { bottom: 29%; height: 38%; background: #315a46; opacity: .8; }
.ridge-front { bottom: 16%; height: 39%; background: #1f452e; transform: translateX(5%); }
.water { inset: auto auto 0 -10%; width: 48%; height: 31%; transform: skewX(-18deg); background: repeating-linear-gradient(0deg,transparent 0 18px,rgba(135,208,243,.18) 18px 23px),#174f7d; }
.ground { top: 62%; background: linear-gradient(140deg,transparent 0 30%,rgba(112,151,60,.9) 30% 100%),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 35px,transparent 35px 75px),#507b37; }
.tree { width: 50px; height: 220px; background: linear-gradient(90deg,#3f2516 0 50%,#2f1b11 50%); }
.tree::before { content: ""; position: absolute; left: -68px; top: -74px; width: 185px; height: 145px; background: linear-gradient(90deg,rgba(255,255,255,.04) 0 50%,transparent 50%),#244f29; box-shadow: 38px -38px 0 #2f6534,-22px 34px 0 #193e21; }
.tree-one { inset: auto 16vw 4% auto; transform: scale(1.2); }
.tree-two { inset: auto auto 8% 18vw; transform: scale(.78); }
.tree-three { inset: auto 38vw 18% auto; transform: scale(.55); opacity: .8; }
.world-shade { background: radial-gradient(circle at 50% 38%,rgba(8,14,23,.04),rgba(2,6,12,.72) 95%); backdrop-filter: blur(5px); }

.app { position: relative; z-index: 1; min-height: 100vh; }
.screen { min-height: 100vh; width: 100%; padding: clamp(28px,5vh,54px) 20px 76px; }
.screen[hidden] { display: none; }
.screen.is-active { animation: screen-in .24s steps(4,end); }
.home-screen { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; }
.brand { position: relative; width: var(--content); text-align: center; }
.eyebrow, .section-kicker { margin: 0 0 8px; color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.brand-name { display: grid; margin: 0; font-family: Impact,"Arial Black",sans-serif; font-size: clamp(3.2rem,8vw,7.3rem); font-weight: 900; letter-spacing: .035em; line-height: .76; color: #e5e7eb; -webkit-text-stroke: clamp(2px,.35vw,6px) #080b0e; text-shadow: 0 calc(4 * var(--unit)) 0 #73777d,calc(2 * var(--unit)) calc(6 * var(--unit)) 0 #07090b,calc(-2 * var(--unit)) calc(6 * var(--unit)) 0 #07090b; transform: perspective(600px) rotateX(-2deg); }
.brand-name span:last-child { font-size: .78em; }
.brand-subtitle { margin: clamp(12px,2vh,20px) 0 0; font: 900 clamp(1.3rem,3.5vw,3rem)/1 Impact,"Arial Black",sans-serif; letter-spacing: .18em; color: #fff; -webkit-text-stroke: 2px #111; text-shadow: 0 5px 0 #59606a,3px 7px 0 #050608; }
.splash { position: absolute; right: 2%; bottom: -18px; margin: 0; color: #fff21a; font-weight: 900; font-size: clamp(.78rem,1.8vw,1.25rem); transform: rotate(-8deg); animation: splash 1.5s ease-in-out infinite alternate; }
.main-menu { align-self: center; display: grid; gap: 12px; width: min(650px,calc(100vw - 40px)); padding: 36px 0 16px; }

.pixel-button { position: relative; min-height: 52px; border: 3px solid #08090b; border-radius: 0; color: #fff; background: linear-gradient(rgba(255,255,255,.08),rgba(0,0,0,.1)),repeating-linear-gradient(135deg,#777 0 3px,#717171 3px 7px,#7c7c7c 7px 10px); box-shadow: inset 2px 2px 0 var(--edge-mid),inset -2px -2px 0 #333,0 3px 0 rgba(0,0,0,.75); cursor: pointer; text-decoration: none; text-shadow: 2px 2px 0 #222; display: grid; place-items: center; padding: 10px 18px; font-size: clamp(1rem,2vw,1.45rem); }
.pixel-button:hover:not(:disabled) { border-color: #fff; background: linear-gradient(rgba(117,170,255,.22),rgba(82,102,181,.18)),repeating-linear-gradient(135deg,#7782a7 0 3px,#69759a 3px 7px,#7f88aa 7px 10px); }
.pixel-button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 2px 2px 0 #333,inset -2px -2px 0 #999; }
.pixel-button:disabled { cursor: not-allowed; color: #aaa; filter: brightness(.65); }
.menu-row { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 10px; margin-top: 20px; }
.icon-button { padding: 8px; font-size: .95rem; }
.home-footer { display: flex; justify-content: space-between; align-self: end; width: 100%; max-width: 1200px; color: #f1f5f9; font-size: clamp(.7rem,1.2vw,.9rem); }

.panel-screen { display: grid; place-items: center; }
.panel-shell { width: min(1040px,calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; padding: clamp(24px,4vw,52px); border: 2px solid rgba(240,244,248,.38); background: linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,0)),var(--panel); box-shadow: inset 0 0 0 3px #07090d,0 20px 70px rgba(0,0,0,.55); }
.panel-shell > h2 { margin: 0 0 clamp(24px,4vw,44px); text-align: center; font-size: clamp(2rem,5vw,4rem); letter-spacing: .05em; }
.panel-shell > .section-kicker { text-align: center; }
.slot-list { display: grid; gap: 16px; }
.slot-card, .project-card, .inventory-item { border: 2px solid #080b10; background: rgba(15,23,42,.88); box-shadow: inset 2px 2px 0 rgba(255,255,255,.13),inset -2px -2px 0 rgba(0,0,0,.65); }
.slot-card { display: grid; grid-template-columns: 82px 1fr; gap: 22px; align-items: center; padding: 22px; }
.slot-card h3, .project-card h3, .inventory-item h3 { margin: 0 0 8px; font-size: clamp(1.05rem,2vw,1.35rem); }
.slot-card p, .project-card p, .inventory-item p { margin: 0; color: var(--muted); line-height: 1.6; }
.slot-label { color: var(--accent) !important; font-size: .72rem; font-weight: 700; letter-spacing: .16em; }
.slot-icon { display: grid; place-items: center; width: 68px; aspect-ratio: 1; background: #315b46; border: 4px solid #162e25; box-shadow: inset 5px 5px 0 #4c8062; font: 900 1.35rem/1 Impact,sans-serif; }
.is-muted { opacity: .72; }
.back-button { width: min(320px,100%); margin: 32px auto 0; }

.project-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.project-card { display: grid; grid-template-columns: 150px 1fr; min-height: 210px; }
.project-visual { display: grid; place-items: center; min-height: 100%; border-right: 3px solid #080b10; font: 900 3rem/1 Impact,sans-serif; }
.project-visual-site { background: linear-gradient(145deg,#386a4b 0 48%,#234131 48%); }
.project-visual-next { background: repeating-linear-gradient(45deg,#283342 0 12px,#222b38 12px 24px); }
.project-copy { align-self: center; padding: 22px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.tag-row span { padding: 5px 8px; color: #d9f99d; background: rgba(63,98,18,.45); border: 1px solid #4d7c0f; font-size: .72rem; }

.about-layout { display: grid; grid-template-columns: minmax(180px,280px) 1fr; gap: clamp(30px,6vw,70px); align-items: center; }
.avatar { position: relative; width: min(240px,62vw); aspect-ratio: .78; margin: 0 auto; filter: drop-shadow(10px 12px 0 rgba(0,0,0,.35)); }
.avatar > span { position: absolute; image-rendering: pixelated; }
.avatar-hair { inset: 0 10% 50%; background: #201813; box-shadow: inset 25px 16px 0 #3a2b22; }
.avatar-face { inset: 18% 14% 36%; background: #d6a278; box-shadow: inset -22px -10px 0 #b77e5d; }
.avatar-eye { top: 35%; width: 14%; height: 9%; background: #18212b; box-shadow: inset 0 45% 0 #e5f3f3; }
.avatar-eye-left { left: 27%; }
.avatar-eye-right { right: 27%; }
.avatar-shirt { inset: 64% 5% 0; background: #325f73; box-shadow: inset 34px 18px 0 #477f95; }
.about-copy p { color: var(--muted); line-height: 1.8; }
.about-copy .about-lead { color: #fff; font-size: clamp(1.3rem,3vw,2rem); }
.text-link { display: inline-block; margin-top: 12px; color: #bef264; text-underline-offset: 5px; }

.inventory { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.inventory-item { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; align-items: center; padding: 20px; }
.inventory-item > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 58px; aspect-ratio: 1; color: #d9f99d; background: #2d4723; border: 3px solid #182912; font-weight: 900; }

.blog-shell { padding-top: clamp(22px,3vw,40px); }
.blog-shell > h2 { margin-bottom: 22px; }
.blog-search-wrap { width: min(640px,100%); margin: 0 auto 16px; }
.blog-search { width: 100%; height: 52px; border: 3px solid #9ca3af; border-radius: 0; padding: 9px 14px; color: #fff; background: #050608; box-shadow: inset 2px 2px 0 #131821,0 0 0 2px #08090b; font-size: 1rem; text-shadow: 2px 2px 0 #000; }
.blog-search::placeholder { color: #a9adb2; font-style: italic; }
.blog-world-panel { min-height: min(450px,48vh); padding: 12px; border: 2px solid #111827; background: rgba(3,7,13,.83); box-shadow: inset 0 2px 0 rgba(255,255,255,.12); }
.blog-world-list { display: grid; gap: 8px; }
.blog-world-row { display: grid; grid-template-columns: 68px 1fr; gap: 16px; width: 100%; border: 2px solid transparent; padding: 10px; color: #fff; background: transparent; text-align: left; cursor: pointer; text-shadow: 2px 2px 0 #000; }
.blog-world-row:hover, .blog-world-row[aria-pressed="true"] { border-color: #d6d8dd; background: rgba(86,96,110,.48); }
.blog-world-cover { display: grid; place-items: center; width: 68px; aspect-ratio: 1; background: linear-gradient(145deg,#4f7f45 0 50%,#30522f 50%); border: 3px solid #142415; box-shadow: inset 5px 5px 0 rgba(255,255,255,.12); font: 900 1.4rem/1 Impact,sans-serif; }
.blog-world-copy { display: grid; align-content: center; gap: 4px; min-width: 0; }
.blog-world-title { font-size: 1.05rem; }
.blog-world-description, .blog-world-meta { overflow: hidden; color: #c3c8d0; white-space: nowrap; text-overflow: ellipsis; }
.blog-world-meta { font-size: .78rem; color: #a3e635; }
.blog-empty { padding: 60px 20px; text-align: center; color: var(--muted); }
.blog-empty p:first-child { color: #fff; font-size: 1.2rem; }
.blog-clear { border: 0; color: #fff; background: transparent; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
.blog-list-status { min-height: 1.4em; margin: 10px 0; color: #d8dee9; text-align: center; font-size: .78rem; }
.blog-actions { display: grid; grid-template-columns: repeat(2,minmax(0,320px)); justify-content: center; gap: 14px; }

.corner-controls { position: fixed; z-index: 20; left: 14px; bottom: 12px; display: flex; gap: 8px; }
.square-button { width: 54px; min-height: 54px; padding: 4px; font-size: 1.15rem; }
.small-button { min-height: 38px; font-size: .85rem; }
dialog { color: #fff; border: 3px solid #9ca3af; border-radius: 0; background: #10141c; box-shadow: inset 0 0 0 3px #020306,0 24px 80px rgba(0,0,0,.8); text-shadow: 2px 2px 0 #000; }
dialog::backdrop { background: rgba(1,4,9,.78); backdrop-filter: blur(5px); }
.options-dialog { width: min(440px,calc(100vw - 30px)); padding: 26px; }
.options-dialog h2 { margin: 0 0 22px; text-align: center; }
.option-row { display: grid; grid-template-columns: 1fr 120px; gap: 18px; align-items: center; margin: 12px 0; }
.options-dialog form > .pixel-button:last-child { width: 100%; margin-top: 24px; }
.post-reader { width: min(760px,calc(100vw - 30px)); max-height: calc(100vh - 40px); padding: clamp(24px,5vw,54px); }
.post-reader article > h2 { margin: 6px 0 24px; font-size: clamp(1.8rem,4vw,3rem); }
.reader-body { color: var(--muted); line-height: 1.8; }
.reader-body p { margin: 0 0 1em; }
.post-reader .pixel-button { width: 100%; margin-top: 24px; }
body.no-motion *, body.no-motion *::before, body.no-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }

@keyframes screen-in { from { opacity: 0; transform: scale(.99); } to { opacity: 1; transform: scale(1); } }
@keyframes splash { from { transform: rotate(-8deg) scale(.96); } to { transform: rotate(-8deg) scale(1.06); } }
@keyframes world-drift { from { transform: translate3d(-1.5%,-1%,0) scale(1.02); } to { transform: translate3d(1.5%,1%,0) scale(1.06); } }

@media (max-width: 760px) {
  .screen { padding: 24px 14px 86px; }
  .brand-name { font-size: clamp(2.65rem,14vw,5.5rem); line-height: .8; }
  .splash { right: -2%; bottom: -25px; }
  .main-menu { padding-top: 48px; }
  .menu-row { grid-template-columns: 54px 1fr 1fr; }
  .home-footer { display: none; }
  .panel-shell { width: calc(100vw - 22px); max-height: calc(100vh - 24px); padding: 24px 16px; }
  .project-grid, .inventory { grid-template-columns: 1fr; }
  .project-card { grid-template-columns: 92px 1fr; min-height: 164px; }
  .about-layout { grid-template-columns: 1fr; }
  .avatar { width: 150px; }
  .blog-world-row { grid-template-columns: 56px 1fr; padding: 8px; }
  .blog-world-cover { width: 56px; }
  .blog-actions { gap: 8px; }
  .corner-controls { left: 8px; bottom: 8px; }
  .square-button { width: 46px; min-height: 46px; }
}

@media (max-width: 460px) {
  .menu-row { grid-template-columns: 1fr 1fr; }
  .menu-row .icon-button { grid-column: 1 / -1; grid-row: 2; }
  .slot-card { grid-template-columns: 1fr; }
  .slot-icon { width: 54px; }
  .inventory-item { grid-template-columns: 54px 1fr; padding: 14px; }
  .inventory-item > span { width: 50px; }
  .project-card { grid-template-columns: 1fr; }
  .project-visual { min-height: 92px; border-right: 0; border-bottom: 3px solid #080b10; }
  .blog-world-description { display: none; }
}

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

/* Reference-matched menu and blog presentation. */
@font-face{font-family:Minecraft;src:url('assets/fonts/minecraft-regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Minecraft;src:url('assets/fonts/minecraft-bold.otf') format('opentype');font-weight:700;font-display:swap}
:root{--u:clamp(1.5px,min(.2344vw,.375vh),3.25px);font-family:Minecraft,monospace}
body{font-family:Minecraft,monospace;letter-spacing:0}
.world{background:#566d83}
.world>div:not(.world-shade),.world::before{display:none}
.world>canvas{width:100%;height:100%;filter:blur(5px);transform:scale(1.025)}
.world-shade{background:#0005;backdrop-filter:none}
.home-screen{padding:calc(12 * var(--u)) 16px 16px;grid-template-rows:auto 1fr auto}
.brand{width:min(calc(260 * var(--u)),92vw);height:calc(65 * var(--u))}
.eyebrow{display:none}
.brand-name{font-family:Minecraft,monospace;font-weight:700;font-size:calc(25 * var(--u));line-height:1.05;letter-spacing:-.045em;color:#c6bdb7;-webkit-text-stroke:calc(.65 * var(--u)) #111;text-shadow:0 calc(2 * var(--u)) #706a66,0 calc(4 * var(--u)) #343431,calc(1.3 * var(--u)) calc(5 * var(--u)) #050505;transform:perspective(600px) rotateX(-5deg)}
.brand-name span:last-child{font-size:.8em}
.brand-subtitle{font:700 calc(14 * var(--u))/1 Minecraft,monospace;letter-spacing:.025em;margin:calc(3 * var(--u)) 0 0;-webkit-text-stroke:calc(.5 * var(--u)) #111;color:#bfb7b0;text-shadow:0 calc(2 * var(--u)) #55524e,calc(1 * var(--u)) calc(3 * var(--u)) #000}
.brand-name:focus{outline:none}
.splash{font-weight:400;right:calc(-24 * var(--u));bottom:calc(-3 * var(--u));font-size:calc(9 * var(--u));color:#ff0;transform:rotate(-20deg);text-shadow:3px 3px #3f3f00}
.main-menu{position:absolute;top:34.2vh;align-self:auto;width:calc(200 * var(--u));gap:calc(3 * var(--u));padding:0}
.pixel-button{min-height:0;height:calc(20 * var(--u));padding:0 calc(5 * var(--u));border:0;box-shadow:none;border-radius:0;background:url('assets/textures/button-bg.png') center/100% 100% no-repeat;font:400 calc(8 * var(--u))/1 Minecraft,monospace;text-shadow:2px 2px #3f3f3f;letter-spacing:.02em;image-rendering:pixelated}
.pixel-button:hover:not(:disabled){border:0;background:url('assets/textures/button-bg.png') center/100% 100% no-repeat;color:#ff0;text-shadow:2px 2px #3f3f00;filter:brightness(1.1) saturate(1.4) hue-rotate(-12deg)}
.pixel-button:active:not(:disabled){transform:none;box-shadow:none;filter:brightness(.85)}
.pixel-button:disabled{filter:brightness(.6) saturate(.3)}
.menu-row{grid-template-columns:calc(20 * var(--u)) 1fr 1fr;gap:calc(2 * var(--u));margin-top:calc(8 * var(--u))}
.icon-button,.square-button{background-image:url('assets/textures/button-texture.png');width:calc(20 * var(--u));font-size:calc(7 * var(--u))}
.corner-controls{left:calc(4 * var(--u));bottom:calc(3 * var(--u));gap:calc(3 * var(--u))}
.square-button{width:calc(17 * var(--u));height:calc(17 * var(--u));min-height:30px}
.home-footer{max-width:none;align-self:end;padding-left:calc(38 * var(--u));font-size:calc(7 * var(--u));line-height:1.2}
.panel-screen{padding:16px}
.blog-screen{padding:0 16px 16px;height:100dvh;min-height:0}
.blog-shell{width:100%;height:100%;max-height:none;display:flex;flex-direction:column;align-items:center;padding:0;border:0;background:none;box-shadow:none;overflow:visible}
.blog-shell>.section-kicker{display:none}
.blog-shell>h2{font:700 26px/1.2 Minecraft,monospace;margin:20px 0 18px}
.blog-search-wrap{width:min(100%,640px);margin:0 auto 16px}
.blog-search{height:46px;border:2px solid #aaa;padding:8px 12px;font:18px/1.3 Minecraft,monospace;background:#050505;box-shadow:inset 2px 2px #242424}
.blog-world-panel{flex:1;width:100%;min-height:0;padding:8px 14px 24px;overflow:auto;border:0;border-block:2px solid #ffffff30;background:#0009;backdrop-filter:blur(2px);box-shadow:inset 0 0 22px #0009,0 0 0 1px #0009}
.blog-world-list{width:min(100%,850px);margin:0 auto;display:block}
.blog-world-row{display:flex;align-items:center;gap:14px;min-height:96px;margin:2px 0;padding:5px;font:inherit}
.blog-world-row:hover{background:#0006;border-color:transparent}
.blog-world-row[aria-pressed=true],.blog-world-row:focus-visible{background:#000b;border-color:#bdbdbd;outline:1px solid #393939}
.blog-world-cover{width:80px;height:80px;flex:0 0 80px;border:1px solid #ffffff15}
.blog-world-copy{display:flex;flex-direction:column;gap:3px}
.blog-world-title{font-size:20px;line-height:1.3}
.blog-world-description,.blog-world-meta{font-size:15px;line-height:1.4;color:#aaa}
.blog-list-status{font-size:12px;margin:10px 0 16px}
.blog-actions{width:min(640px,100vw - 32px);grid-template-columns:1fr 1fr;gap:12px}
.blog-actions .pixel-button{height:calc(17 * var(--u));min-height:36px;font-size:clamp(13px,calc(7 * var(--u)),22px)}
.blog-empty{padding:60px 20px;font-size:18px}.blog-empty p:first-child{font-size:20px}
.brand-name{display:flex;justify-content:center;gap:.25em;font-size:calc(18 * var(--u));white-space:nowrap;line-height:1.35;transform:scaleY(1.5);transform-origin:top center}
.brand-name span:last-child{font-size:1em}
.brand-subtitle{margin-top:calc(13 * var(--u));font-size:calc(20 * var(--u))}
.home-footer span:last-child{text-align:right}
@media(max-width:760px){.brand-name{font-size:clamp(16px,5.3vw,38px) !important;gap:.18em}.brand-subtitle{font-size:30px;margin-top:20px}.splash{font-size:13px;right:0;bottom:0}.home-footer{padding-left:78px}}
.options-dialog .pixel-button,.post-reader .pixel-button{min-height:40px;font-size:18px}
@media(max-width:760px){.home-screen{padding-top:28px}.brand{width:92vw;height:155px}.brand-name{font-size:clamp(32px,9vw,68px)}.brand-subtitle{font-size:24px}.splash{font-size:13px;right:0;bottom:0}.main-menu{width:min(650px,90vw);top:34vh}.menu-row{grid-template-columns:42px 1fr 1fr}.menu-row .icon-button{grid-column:auto;grid-row:auto;width:42px}.pixel-button{height:48px;font-size:20px}.home-footer{display:flex;font-size:12px;padding-left:90px}.home-footer span:last-child{display:none}.square-button{width:38px;height:38px;font-size:18px}.blog-screen{padding:0 10px 60px}.blog-shell>h2{font-size:26px}.blog-world-cover{width:56px;height:56px;flex-basis:56px}.blog-world-title{font-size:16px}.blog-world-meta{font-size:12px}.blog-world-description{display:block;font-size:12px}.blog-world-row{gap:10px}.blog-actions{width:100%}}

/* Resume experience timeline. */
.experience-employer { margin: -12px 0 24px; color: var(--muted); text-align: center; line-height: 1.7; }
.experience-employer strong { color: #fff; }
.experience-list .slot-card { align-items: start; }
.experience-list .slot-card > div { min-width: 0; }
.experience-details { margin: 14px 0 0; padding-left: 1.25em; color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; }
.experience-details li + li { margin-top: 10px; }

/* Flat experience rows with a quiet backdrop and separate date column. */
.experience-screen {
  height: 100dvh;
  min-height: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(10,15,24,.97), rgba(7,9,17,.93));
}
.experience-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: hidden;
}
.experience-shell > .section-kicker { display: none; }
.experience-shell > h2 {
  flex: none;
  margin: 24px 20px 10px;
  font-size: clamp(1.5rem,3vw,2rem);
}
.experience-employer {
  flex: none;
  margin: 0 20px 20px;
  font-size: .8rem;
  line-height: 1.7;
}
.experience-list {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 0 max(24px, calc((100vw - 1000px) / 2)) 32px;
}
.experience-list .slot-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 28px;
  padding: 24px 8px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.13);
  background: none;
  box-shadow: none;
}
.experience-list .slot-card:last-child { border-bottom: 0; }
.experience-list .experience-date {
  padding-top: 3px;
  color: #aaa;
  font-size: .8rem;
  line-height: 1.7;
}
.experience-list h3 {
  margin: 0;
  color: #f3f3f3;
  font-size: clamp(1rem,1.65vw,1.25rem);
  line-height: 1.5;
}
.experience-details {
  margin: 12px 0 0;
  padding-left: 14px;
  color: #d1d1d1;
  font-size: .875rem;
  line-height: 1.65;
  list-style-type: square;
}
.experience-details li { padding-left: 2px; }
.experience-details li::marker { color: #66ef63; font-size: .9em; }
.experience-details li + li { margin-top: 8px; }
.experience-footer {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 32px;
  padding: 14px 80px;
  border-top: 1px solid rgba(255,255,255,.2);
  background: rgba(15,17,32,.95);
}
.experience-footer .text-link { margin: 0; font-size: .75rem; }
.experience-footer .back-button {
  width: min(300px,100%);
  height: 40px;
  min-height: 40px;
  margin: 0;
  font-size: 18px;
}
@media (max-width: 640px) {
  .experience-shell > h2 { margin-top: 18px; }
  .experience-employer { margin-bottom: 12px; font-size: .75rem; }
  .experience-list { padding: 0 20px 24px; }
  .experience-list .slot-card { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 22px 0; }
  .experience-list .experience-date { padding: 0; font-size: .75rem; }
  .experience-details { font-size: .8rem; }
  .experience-footer { padding: 12px 18px 64px; gap: 12px; }
  .experience-footer .text-link { text-align: center; }
}

.experience-company {
  display: inline-block;
  color: #999;
  font-weight: inherit;
  white-space: nowrap;
  font-size: .85em;
}
@media (max-width: 640px) {
  .experience-company { display: block; margin-top: 4px; font-size: .8em; }
}

/* Keep desktop role and employer on the same line. */
.experience-shell > h2 { margin-bottom: 20px; }
.experience-list { padding-inline: max(24px, calc((100vw - 1200px) / 2)); }
.experience-list .slot-card { grid-template-columns: 160px minmax(0, 1fr); gap: 24px; }
.experience-list h3 {
  font-size: clamp(.875rem, 1.4vw, 1.125rem);
  line-height: 1.5;
}
.experience-company { display: inline; margin: 0; font-size: inherit; }
@media (min-width: 1000px) {
  .experience-list h3 { white-space: nowrap; }
}
@media (max-width: 999px) {
  .experience-list .slot-card { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .experience-list .experience-date { padding: 0; }
}
@media (max-width: 640px) {
  .experience-list { padding-inline: 20px; }
  .experience-list h3 { font-size: .9375rem; }
  .experience-company { display: inline; margin: 0; font-size: inherit; white-space: normal; }
}

/* Main menu inspired by the classic block-world title screen. */
body:has(.home-screen.is-active) .world > canvas {
  filter: brightness(.64) saturate(.85);
  transform: scale(1.025);
}
body:has(.home-screen.is-active) .world-shade {
  background: linear-gradient(180deg, #10182455, #080b1420 55%, #05081055);
}
.home-screen {
  height: 100dvh;
  min-height: 620px;
  padding: clamp(38px, 7vh, 84px) 24px 18px;
  grid-template-rows: auto 1fr auto;
}
.home-screen .brand {
  width: min(1050px, 92vw);
  height: auto;
  position: relative;
}
.home-screen .brand-name {
  display: flex;
  justify-content: center;
  gap: .24em;
  font-size: clamp(28px, 5.15vw, 84px) !important;
  line-height: 1.2;
  letter-spacing: -.055em;
  transform: perspective(900px) rotateX(8deg) scaleY(1.35);
  transform-origin: center;
  color: #c5c5c5;
  -webkit-text-stroke: clamp(1px, .16vw, 3px) #141414;
  text-shadow: 0 2px #eee, 0 5px #787878, 0 9px #525252,
    0 13px #353535, 0 17px #101010, 4px 19px #050505, -4px 19px #050505;
}
.home-screen .brand-subtitle {
  margin: clamp(24px, 4vh, 42px) 0 0;
  font-size: clamp(22px, 2.6vw, 42px);
  letter-spacing: .08em;
  color: #d0d0d0;
  -webkit-text-stroke: 1.5px #151515;
  text-shadow: 0 3px #777, 0 6px #333, 2px 8px #050505;
}
.home-screen .splash {
  right: 1%;
  bottom: -5px;
  font-size: clamp(12px, 1.65vw, 25px);
  white-space: nowrap;
}
.home-screen .main-menu {
  position: absolute;
  top: 39vh;
  width: min(560px, calc(100vw - 96px));
  gap: 12px;
  padding: 0;
}
.home-screen .menu-button,
.home-screen .menu-row > .pixel-button {
  height: 54px;
  min-height: 44px;
  font-size: clamp(18px, 1.6vw, 25px);
}
.home-screen .menu-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 32px;
}
.home-screen .menu-row .icon-button,
.home-screen .menu-row .home-options-button {
  position: absolute;
  top: 0;
  width: 54px;
  height: 54px;
  padding: 0;
  background-image: url('assets/textures/button-texture.png');
  font-size: 20px;
}
.home-screen .menu-row .icon-button { left: -68px; grid-column: auto; grid-row: auto; }
.home-screen .menu-row .home-options-button { right: -68px; }
.home-screen .home-footer {
  display: flex;
  width: 100%;
  padding: 0 0 0 54px;
  gap: 24px;
  font-size: 12px;
  line-height: 1.5;
}
.home-screen .home-footer span:last-child { display: block; }
.home-options-button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (max-width: 760px) {
  .home-screen { min-height: 620px; padding: 48px 20px 16px; }
  .home-screen .brand { width: 94vw; height: auto; }
  .home-screen .brand-name { font-size: clamp(22px, 5.15vw, 40px) !important; }
  .home-screen .brand-subtitle { margin-top: 30px; font-size: 26px; }
  .home-screen .splash { right: 0; bottom: -20px; font-size: 12px; }
  .home-screen .main-menu { top: max(240px, 37vh); width: min(560px, calc(100vw - 40px)); }
  .home-screen .menu-row { grid-template-columns: 44px 1fr 1fr 44px; gap: 8px; margin-top: 24px; }
  .home-screen .menu-row .icon-button,
  .home-screen .menu-row .home-options-button {
    position: static;
    width: 44px;
    height: 48px;
    font-size: 16px;
  }
  .home-screen .menu-row > .pixel-button { height: 48px; font-size: 16px; }
  .home-screen .home-footer { padding-left: 40px; font-size: 10px; }
  .home-screen .home-footer span:last-child { max-width: 210px; font-size: 9px; }
}
@media (max-height: 650px) and (min-width: 761px) {
  .home-screen { min-height: 520px; padding-top: 24px; }
  .home-screen .main-menu { top: 40vh; gap: 8px; }
  .home-screen .menu-button, .home-screen .menu-row > .pixel-button { height: 44px; min-height: 44px; }
  .home-screen .menu-row { margin-top: 16px; }
  .home-screen .menu-row .icon-button, .home-screen .menu-row .home-options-button { height: 44px; }
}