:root {
  --ink: #f5f2ea;
  --paper: #121218;
  --soft: #1b1b24;
  --lime: #d7ff4f;
  --violet: #aa9cff;
  --coral: #ff846b;
  --mint: #83dbc9;
  --gold: #ffd36a;
  --line: rgba(245, 242, 234, .24);
  --text-muted: #c6c1cf;
  --surface: #1b1b24;
  --surface-2: #252432;
  --on-accent: #171717;
  --graphic-ink: #171717;
  --graphic-paper: #f4f1ea;
  --footer-bg: #09090d;
  --footer-text: #f5f2ea;
  --lift-shadow: #f5f2ea;
  --mono: "DM Mono", monospace;
  --display: "Syne", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --page-bg: #121218;
  --page-accent: #aa9cff;
  --page-accent-2: #ff846b;
  --wipe: #aa9cff;
}

html[data-theme="light"] {
  --ink: #171717;
  --paper: #f4f1ea;
  --soft: #e7e2d8;
  --violet: #8d7cff;
  --coral: #ff7457;
  --mint: #7ed7c4;
  --line: rgba(23, 23, 23, .22);
  --text-muted: #55514d;
  --surface: #f4f1ea;
  --surface-2: #e7e2d8;
  --footer-bg: #171717;
  --footer-text: #f4f1ea;
  --lift-shadow: #171717;
  --page-bg: #f4f1ea;
  color-scheme: light;
}

html[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page-bg); color: var(--ink); font-family: var(--display); font-size: 16px; line-height: 1.55; overflow-x: clip; transition: background-color .28s linear; isolation: isolate; }
body[data-page="home"] { --page-accent: #8d7cff; --page-accent-2: #ff7457; --wipe: #ff8e71; }
body[data-page="projects"] { --page-accent: #d7ff4f; --page-accent-2: #8d7cff; --wipe: #9c8cff; }
body[data-page="skills"] { --page-accent: #ff7457; --page-accent-2: #d7ff4f; --wipe: #ff8065; }
body[data-page="hobbies"] { --page-accent: #7ed7c4; --page-accent-2: #ffd36a; --wipe: #75d6c0; }
body[data-page="contact"] { --page-accent: #ff9e83; --page-accent-2: #8d7cff; --wipe: #b59cff; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: var(--page-accent); color: var(--on-accent); }
*:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--paper) 82%, transparent); }

.page-shell { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.section-space { padding-block: clamp(80px, 9vw, 140px); }
.eyebrow { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.eyebrow > span { display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: var(--coral); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }

/* Short, calm entry and page transitions. */
.boot { display: none; position: fixed; z-index: 1000; inset: 0; place-items: center; background: var(--ink); color: var(--paper); pointer-events: none; clip-path: inset(0); }
.js .boot { display: grid; }
.skip-boot .boot { display: none; }
.boot span { font: 700 clamp(2.5rem, 6vw, 5rem)/1 var(--display); letter-spacing: -.06em; }
.boot i { position: absolute; bottom: 0; left: 0; width: 0; height: 5px; background: var(--wipe); }
body.is-ready .boot { animation: boot-away .38s .05s var(--ease) forwards; }
body.is-ready .boot i { animation: boot-line .26s ease-out forwards; }
.page-wipe { position: fixed; z-index: 900; inset: 0; overflow: hidden; background: linear-gradient(115deg, var(--wipe), color-mix(in srgb, var(--wipe) 58%, var(--page-accent-2))); pointer-events: none; transform: translateX(-101%); transition: transform .32s var(--ease); }
body.wipe-reverse .page-wipe { transform: translateX(101%); }
body.is-leaving .page-wipe { transform: translateX(0); }
.page-wipe span, .page-wipe i, .page-wipe b { position: absolute; display: block; border: 2px solid var(--ink); }
.page-wipe span { width: clamp(140px, 20vw, 300px); aspect-ratio: 1; left: 11%; top: 17%; border-radius: 50%; background: color-mix(in srgb, var(--paper) 34%, transparent); }
.page-wipe i { width: clamp(80px, 12vw, 180px); aspect-ratio: 1; right: 15%; bottom: 14%; background: var(--lime); transform: rotate(18deg); }
.page-wipe b { width: clamp(40px, 7vw, 100px); aspect-ratio: 1; left: 48%; top: 44%; border-radius: 50%; background: var(--coral); }
body.is-leaving .page-wipe span { animation: wipe-shape-spin .9s linear infinite; }
body.is-leaving .page-wipe i { animation: wipe-shape-bob .55s var(--ease) infinite alternate; }

/* Header */
.site-header { position: sticky; z-index: 100; top: 0; height: 80px; padding-inline: max(32px, calc((100% - 1240px) / 2)); display: flex; align-items: center; justify-content: space-between; background: color-mix(in srgb, var(--page-bg) 88%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); transition: background-color .28s linear; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.03em; }
.brand i { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 30px); }
.site-nav a { position: relative; font: 500 13px var(--mono); }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ease); }
.site-nav a:hover::after, .site-nav a.active::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 10px 0 10px 12px; cursor: pointer; align-items: center; gap: 10px; }
.menu-toggle span { font: 500 13px var(--mono); }
.menu-toggle i, .menu-toggle i::before { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .25s; }
.menu-toggle i { position: relative; transform: translateY(-4px); }
.menu-toggle i::before { content: ""; position: absolute; transform: translateY(8px); }
.menu-toggle.is-open i { transform: rotate(45deg); }
.menu-toggle.is-open i::before { transform: rotate(-90deg); }

/* Home hero */
.hero { min-height: calc(100svh - 80px); padding-block: clamp(64px, 7vw, 110px); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); gap: clamp(52px, 7vw, 110px); align-items: center; }
.hero h1 { margin: 22px 0 28px; font: 700 clamp(4rem, 8vw, 7.4rem)/.92 var(--display); letter-spacing: -.065em; }
.hero h1 em, .page-intro h1 em, .learning h2 em { font: 400 1.05em/1 var(--serif); }
.name-effect { position: relative; display: inline-block; isolation: isolate; cursor: default; transition: transform .32s var(--ease), text-shadow .32s var(--ease); }
.name-effect::after { content: attr(data-text); position: absolute; z-index: -1; inset: 0; color: transparent; -webkit-text-stroke: 1px var(--violet); opacity: 0; transform: translate(0); pointer-events: none; }
.hero-intro { max-width: 640px; margin-bottom: 34px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 50px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; font: 500 13px var(--mono); transition: transform .25s var(--ease), background .25s, color .25s; }
.button:hover { transform: translateY(-3px); }
.button-dark { background: var(--ink); color: var(--paper); }
.button-dark:hover { background: var(--lime); color: var(--ink); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; font: 500 13px var(--mono); border-bottom: 1px solid var(--ink); padding-block: 8px 4px; }
.text-link span { transition: transform .25s; }.text-link:hover span { transform: translate(3px, -3px); }
.social-icon-links, .footer-icons { display: flex; align-items: center; gap: 10px; }
.icon-button, .footer-icons a { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; transition: transform .25s var(--ease), background .25s, color .25s; }
.icon-button:hover { transform: translateY(-3px) rotate(6deg); background: var(--page-accent); }
.icon-button svg, .footer-icons svg { width: 21px; height: 21px; overflow: visible; }
.icon-button svg path, .footer-icons svg path { fill: currentColor; stroke: none; }
.icon-button svg path[d^="M3.5"], .footer-icons svg path[d^="M3.5"] { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.icon-button svg path + path, .footer-icons svg path + path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-visual { position: relative; min-height: 480px; overflow: hidden; border: 1px solid var(--ink); background: var(--violet); isolation: isolate; }
.visual-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; }
.visual-card { position: absolute; z-index: 2; left: 12%; right: 12%; top: 20%; padding: 26px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 14px 14px 0 var(--ink); transform: rotate(-3deg); animation: card-float 5s ease-in-out infinite; }
.visual-card small { font: 500 12px var(--mono); }.visual-card strong { display: block; margin-top: 30px; font-size: clamp(2rem, 4vw, 3.6rem); line-height: .98; letter-spacing: -.055em; }.visual-card b { position: absolute; right: 22px; top: 20px; font-size: 24px; animation: slow-spin 8s linear infinite; }
.visual-orbit { position: absolute; z-index: 1; width: 210px; aspect-ratio: 1; right: -45px; bottom: -45px; border: 1px solid var(--ink); border-radius: 50%; animation: slow-spin 18s linear infinite; }
.visual-orbit span { position: absolute; inset: 0; display: grid; place-items: start center; padding-top: 9px; font: 500 9px var(--mono); }
.visual-orbit i { position: absolute; width: 24px; height: 24px; left: calc(50% - 12px); top: -12px; border: 1px solid var(--ink); border-radius: 50%; background: var(--lime); }
.visual-dot { position: absolute; border: 1px solid var(--ink); border-radius: 50%; }.dot-one { width: 42px; height: 42px; left: 9%; bottom: 11%; background: var(--coral); }.dot-two { width: 18px; height: 18px; right: 10%; top: 9%; background: var(--lime); animation: dot-move 3s ease-in-out infinite alternate; }

/* Shared headings and cards */
.section-heading { display: flex; justify-content: space-between; gap: 50px; align-items: end; margin-bottom: 42px; }
.section-heading h2, .contact-cta h2, .learning h2 { margin: 14px 0 0; font: 600 clamp(2.5rem, 5vw, 5rem)/1 var(--display); letter-spacing: -.055em; }
.section-note { max-width: 390px; margin: 0; font-size: 16px; line-height: 1.65; }
.project-preview { border-top: 1px solid var(--line); }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; perspective: 1200px; }
.project-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-grid.single-project { grid-template-columns: minmax(0, 820px); }
.project-card { display: block; border: 1px solid var(--ink); overflow: hidden; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .18s ease-out, box-shadow .25s var(--ease); transform-style: preserve-3d; }
.project-card:hover { box-shadow: 10px 10px 0 var(--lift-shadow); }
.card-lime { background: var(--lime); }.card-violet { background: var(--violet); }.card-coral { background: var(--coral); }
.project-art { height: clamp(280px, 35vw, 430px); position: relative; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--ink); }
.browser-frame { width: 76%; height: 66%; position: relative; border: 1px solid var(--ink); background: var(--paper); box-shadow: 12px 12px 0 var(--ink); padding: 16px; transform: rotate(-3deg); transition: transform .35s var(--ease); }
.project-card:hover .browser-frame { transform: rotate(2deg) scale(1.03); }
.browser-frame > span { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border: 1px solid var(--ink); border-radius: 50%; }.browser-frame b { position: absolute; left: 14%; bottom: 13%; font-size: clamp(3.5rem, 9vw, 7rem); letter-spacing: -.1em; }.browser-frame i { position: absolute; right: 13%; top: 25%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: var(--coral); animation: soft-pulse 3s ease-in-out infinite; }
.art-placeholder > span { position: absolute; top: 18px; left: 20px; font: 500 13px var(--mono); }.art-placeholder > div { width: 66%; aspect-ratio: 1; position: relative; }.art-placeholder i { position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: 50%; animation: ring-breathe 4s ease-in-out infinite; }.art-placeholder i:nth-child(2) { inset: 18%; animation-delay: -.8s; }.art-placeholder i:nth-child(3) { inset: 36%; background: var(--lime); animation-delay: -1.6s; }.art-placeholder small { position: absolute; right: 18px; bottom: 16px; font: 500 11px var(--mono); }
.art-seedha { background: var(--coral); }.store-window { width: 78%; min-height: 64%; padding: 20px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 11px 11px 0 var(--ink); transform: rotate(2deg); transition: transform .35s var(--ease); }.project-card:hover .store-window { transform: rotate(-1deg) scale(1.025); }.store-window > span { display: block; margin-bottom: 18px; font-size: clamp(1.35rem, 2.5vw, 2rem); font-weight: 700; }.store-window > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }.store-window i { aspect-ratio: 1.45; border: 1px solid var(--ink); background: var(--lime); }.store-window i:nth-child(2), .store-window i:nth-child(3) { background: var(--violet); }.store-window b { display: block; margin-top: 14px; padding: 8px 10px; background: #58c96c; border: 1px solid var(--ink); font: 500 10px var(--mono); text-align: center; }
.art-youtube { background: var(--violet); }.video-window { position: relative; width: 78%; aspect-ratio: 1.35; display: grid; place-items: center; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); box-shadow: 11px 11px 0 var(--coral); transform: rotate(-2deg); transition: transform .35s var(--ease); }.project-card:hover .video-window { transform: rotate(1deg) scale(1.025); }.video-window > span { position: absolute; top: 14px; left: 16px; font: 500 11px var(--mono); }.video-window i { width: 70px; aspect-ratio: 1; border-radius: 50%; background: var(--lime); }.video-window i::after { content: ""; position: absolute; left: calc(50% - 8px); top: calc(50% - 12px); border-left: 20px solid var(--ink); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }.video-window b { position: absolute; right: 14px; bottom: 12px; font: 500 10px var(--mono); }
.project-info { min-height: 230px; padding: 24px; display: flex; justify-content: space-between; gap: 24px; background: var(--paper); }
.project-info small { font: 500 12px var(--mono); }.project-info h3 { margin: 12px 0 10px; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -.045em; }.project-info p { max-width: 470px; margin: 0; font-size: 16px; line-height: 1.65; }.arrow { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: 20px; transition: transform .25s, background .25s; }.project-card:hover .arrow { transform: rotate(45deg); background: var(--lime); }

.skills-preview { border-top: 1px solid var(--line); }
.skill-list { border-top: 1px solid var(--ink); }
.skill-list a { min-height: 104px; display: grid; grid-template-columns: 52px 1fr minmax(250px, .8fr) auto; align-items: center; gap: 18px; border-bottom: 1px solid var(--ink); transition: padding .25s var(--ease), background .25s; }
.skill-list a:hover { padding-inline: 18px; background: var(--lime); }.skill-list span, .skill-list small { font: 500 12px var(--mono); }.skill-list b { font-size: clamp(1.35rem, 2.2vw, 2rem); letter-spacing: -.035em; }.skill-list i { font-style: normal; font-size: 22px; }
.contact-cta { border-top: 1px solid var(--line); }.contact-cta > div { margin-top: 18px; display: flex; justify-content: space-between; align-items: end; gap: 40px; }.round-button { flex: 0 0 150px; width: 150px; height: 150px; padding: 28px; border-radius: 50%; display: flex; flex-direction: column; justify-content: space-between; background: var(--lime); color: var(--on-accent); border: 1px solid var(--graphic-ink); font: 500 13px var(--mono); transition: transform .3s var(--ease), box-shadow .3s; }.round-button i { align-self: flex-end; font-size: 28px; font-style: normal; }.round-button:hover { transform: rotate(7deg); box-shadow: 8px 8px 0 var(--lift-shadow); }

/* Subpages */
.page-intro { min-height: 560px; padding-block: clamp(90px, 10vw, 150px) clamp(70px, 8vw, 110px); display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: end; border-bottom: 1px solid var(--ink); }
.page-intro .eyebrow { grid-column: 1 / -1; align-self: start; }.page-intro h1 { margin: 0; font: 700 clamp(3.8rem, 8vw, 7.5rem)/.92 var(--display); letter-spacing: -.06em; }.page-intro > p:last-child { max-width: 480px; margin: 0; font-size: 18px; line-height: 1.65; }
.project-cases { display: flex; flex-direction: column; gap: clamp(90px, 10vw, 150px); }
.more-projects { min-height: 160px; padding: 28px; border: 1px solid var(--ink); background: var(--soft); display: flex; align-items: center; justify-content: space-between; gap: 30px; font-size: clamp(1.4rem, 2.5vw, 2rem); letter-spacing: -.03em; }.more-projects i { flex: 0 0 auto; font-style: normal; font-size: 32px; color: var(--coral); animation: slow-spin 10s linear infinite; }
.case-card { display: grid; grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr); gap: clamp(44px, 7vw, 96px); align-items: start; }.case-reverse .case-copy { order: 2; }.case-reverse .case-visual { order: 1; }
.case-card[id] { scroll-margin-top: 100px; }
.case-copy h2 { margin: 14px 0 20px; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .98; letter-spacing: -.055em; }.case-copy > p:not(.eyebrow) { font-size: 17px; line-height: 1.7; }.case-copy ul { margin: 26px 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }.case-copy li { padding: 12px 0; border-bottom: 1px solid var(--line); font: 500 13px/1.55 var(--mono); }.case-links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.button-light { background: var(--paper); color: var(--ink); }.button-light:hover { background: var(--violet); }
.case-visual { min-height: 520px; position: relative; overflow: hidden; border: 1px solid var(--ink); background: var(--lime); transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .18s ease-out; }
.window-ui { position: absolute; inset: 11%; padding: 18px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 14px 14px 0 var(--ink); transform: rotate(-2deg); }.window-top { display: flex; gap: 6px; }.window-top i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--ink); }.window-ui strong { position: absolute; left: 9%; bottom: 10%; font-size: clamp(3rem, 6vw, 6rem); line-height: .78; letter-spacing: -.08em; }.window-ui strong em { font: 400 1em var(--serif); }.window-ui > span { position: absolute; top: 18px; right: 18px; font: 500 10px var(--mono); }.floating-chip { position: absolute; padding: 9px 12px; background: var(--violet); border: 1px solid var(--ink); font: 500 10px var(--mono); animation: card-float 4s ease-in-out infinite; }.chip-one { top: 8%; right: 3%; }.chip-two { left: 3%; bottom: 8%; animation-delay: -1.4s; background: var(--coral); }
.visual-seedha { background: var(--coral); }.service-window { position: absolute; inset: 10%; padding: 22px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 13px 13px 0 var(--ink); transform: rotate(1.5deg); }.service-top { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--ink); }.service-top b { font-size: clamp(1.35rem, 2.6vw, 2rem); }.service-top span { font: 500 10px var(--mono); }.service-products { margin-block: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.service-products i { min-height: 92px; border: 1px solid var(--ink); background: var(--lime); }.service-products i:nth-child(2), .service-products i:nth-child(3) { background: var(--violet); }.service-checkout { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px; border: 1px solid var(--ink); background: #75db86; font: 500 9px var(--mono); }.service-checkout strong { text-align: right; }
.visual-meinbrok { background: var(--violet); }.channel-window { position: absolute; inset: 10%; padding: 20px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); box-shadow: 13px 13px 0 var(--coral); transform: rotate(-1.5deg); }.channel-head { min-height: 46px; display: flex; justify-content: space-between; align-items: start; font: 500 12px var(--mono); }.channel-head i { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }.channel-video { position: relative; min-height: 240px; display: grid; place-items: center; border: 1px solid var(--paper); background: linear-gradient(135deg, #292929, #111); }.channel-video b { width: 76px; aspect-ratio: 1; border-radius: 50%; background: var(--lime); }.channel-video b::after { content: ""; position: absolute; left: calc(50% - 7px); top: calc(50% - 13px); border-left: 21px solid var(--ink); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }.channel-video strong { position: absolute; bottom: 12px; right: 14px; font: 500 10px var(--mono); }.channel-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 12px; }.channel-strip i { height: 28px; border: 1px solid var(--paper); }.channel-strip i:nth-child(2) { background: var(--coral); }.channel-strip i:nth-child(3) { background: var(--lime); }
.visual-slot { display: grid; place-items: center; background: var(--violet); }.visual-slot-alt { background: var(--coral); }.visual-slot > span { position: absolute; top: 20px; left: 22px; font: 500 13px var(--mono); }.visual-slot strong { position: relative; z-index: 2; text-align: center; font-size: clamp(2.7rem, 6vw, 5.5rem); line-height: .88; letter-spacing: -.06em; }.slot-orbit { position: absolute; width: min(64%, 340px); aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; animation: slow-spin 16s linear infinite; }.slot-orbit::before, .slot-orbit::after { content: ""; position: absolute; inset: 18%; border: 1px solid var(--ink); border-radius: 50%; }.slot-orbit::after { inset: 36%; background: var(--lime); }.slot-orbit i { position: absolute; width: 22px; height: 22px; top: -12px; left: calc(50% - 11px); border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); }
.next-page { padding-block: clamp(70px, 8vw, 120px); border-top: 1px solid var(--ink); }.next-page a { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }.next-page a span { font-size: clamp(3.2rem, 8vw, 7rem); line-height: 1; letter-spacing: -.06em; }.next-page a i { font: 400 clamp(3rem, 8vw, 7rem) var(--serif); transition: transform .25s; }.next-page a:hover i { transform: translateX(12px); }

/* Skills */
.skills-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.skill-card { min-height: 450px; padding: 28px; border: 1px solid var(--ink); display: flex; flex-direction: column; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }.skill-card:hover { transform: translateY(-7px); box-shadow: 8px 8px 0 var(--lift-shadow); }.skill-card-dark { background: var(--ink); color: var(--paper); }.skill-card-lime { background: var(--lime); }.skill-card-violet { background: var(--violet); }.skill-card-react { background: #18242e; color: #f5f2ea; }.skill-card-paper { background: var(--soft); }
.skill-number { font: 500 12px var(--mono); }.skill-icon { height: 150px; margin-block: 32px; display: grid; place-items: center; position: relative; }.skill-card h2 { margin: auto 0 14px; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -.05em; }.skill-card > p { max-width: 540px; margin-bottom: 22px; font-size: 16px; line-height: 1.65; }.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }.tag-row span { padding: 6px 9px; border: 1px solid currentColor; border-radius: 999px; font: 500 12px var(--mono); }
.code-icon { display: flex; gap: 14px; font: 600 70px/1 var(--display); }.code-icon i { color: var(--lime); font-style: normal; animation: soft-pulse 2.8s ease-in-out infinite; }.js-icon { width: 130px; height: 130px; justify-self: center; margin-inline: auto; background: var(--ink); color: var(--lime); font: 600 50px var(--display); transform: rotate(-5deg); }.css-icon { font-size: 38px; }.js-icon i { position: absolute; inset: -12px; border: 1px solid var(--ink); animation: slow-spin 12s linear infinite; }.git-icon i { position: absolute; width: 86px; height: 86px; border: 3px solid var(--ink); border-radius: 50%; }.git-icon i:nth-child(2) { transform: translateX(-55px) scale(.55); }.git-icon i:nth-child(3) { transform: translateX(55px) scale(.55); }.git-icon::before, .git-icon::after { content: ""; position: absolute; width: 68px; height: 3px; background: var(--ink); transform: rotate(20deg); }.git-icon::after { transform: rotate(-20deg); }.screen-icon span { width: 150px; height: 105px; border: 3px solid var(--ink); background: var(--paper); }.screen-icon i { position: absolute; width: 38px; height: 38px; border-radius: 50%; background: var(--coral); animation: screen-dot 4s var(--ease) infinite; }
.brand-skill-icon .logo-plate { width: 132px; height: 132px; border-color: rgba(255, 255, 255, .36); background: #101820; }.brand-skill-icon .logo-plate svg { width: 92px; height: 92px; }
.learning { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: end; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }.learning > p { margin: 0; max-width: 480px; font-size: 17px; line-height: 1.7; }

.toolbox, .languages { border-top: 1px solid var(--ink); }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tool-card { min-height: 230px; padding: 22px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; border: 1px solid var(--ink); background: var(--soft); transition: transform .28s var(--ease), box-shadow .28s; }
.tool-card:hover { transform: translateY(-5px); box-shadow: 7px 7px 0 var(--lift-shadow); }
.tool-card-dark { background: var(--ink); color: var(--paper); }.tool-card-violet { background: var(--violet); }.tool-card-coral { background: var(--coral); }.tool-card-lime { background: var(--lime); }
.tool-mark { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 500 16px var(--mono); transition: transform .3s var(--ease); }.tool-card:hover .tool-mark { transform: rotate(8deg) scale(1.04); }.cube-mark { border-radius: 8px; transform: rotate(-5deg); }
.tool-level { display: inline-block; margin-bottom: 10px; padding: 4px 8px; border: 1px solid currentColor; border-radius: 999px; font: 500 10px var(--mono); text-transform: uppercase; }.tool-card h3 { margin-bottom: 9px; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.05; letter-spacing: -.04em; }.tool-card p { margin: 0; font-size: 14px; line-height: 1.55; }
.languages-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ink); }
.languages-strip > div { min-height: 130px; padding: 20px; display: grid; grid-template-columns: auto 1fr; align-content: space-between; gap: 16px; border-right: 1px solid var(--ink); }.languages-strip > div:last-child { border-right: 0; }.languages-strip span, .languages-strip small { font: 500 11px var(--mono); }.languages-strip strong { grid-column: 1 / -1; font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: -.04em; }.languages-strip small { grid-column: 2; grid-row: 1; justify-self: end; }

/* Hobbies */
.hobbies-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hobby-card { min-height: 360px; padding: 24px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--ink); background: var(--soft); transition: transform .3s var(--ease), box-shadow .3s; }.hobby-card:hover { transform: translateY(-6px); box-shadow: 8px 8px 0 var(--lift-shadow); }.hobby-games { background: var(--violet); }.hobby-music { background: var(--lime); }.hobby-drums { background: var(--coral); }.hobby-badminton { background: #92ddcb; }.hobby-anime { background: #ffd36a; grid-column: span 2; }
.hobby-number { font: 500 11px var(--mono); }.hobby-icon { height: 145px; margin-block: 22px; position: relative; display: grid; place-items: center; }.hobby-card h2 { margin: auto 0 12px; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.05em; }.hobby-card p { max-width: 520px; margin: 0; font-size: 15px; line-height: 1.6; }
.gamepad-icon i { width: 150px; height: 88px; border: 3px solid var(--ink); border-radius: 46% 46% 38% 38%; background: var(--paper); transform: rotate(-4deg); }.gamepad-icon b, .gamepad-icon span { position: absolute; font: 600 34px/1 var(--display); }.gamepad-icon b { left: calc(50% - 49px); }.gamepad-icon span { right: calc(50% - 52px); top: 51px; letter-spacing: 5px; font-size: 18px; }
.wave-icon { display: flex; gap: 8px; align-items: center; }.wave-icon i { width: 8px; height: 44px; border: 1px solid var(--ink); background: var(--ink); animation: wave-bar 1.4s ease-in-out infinite alternate; }.wave-icon i:nth-child(2) { height: 88px; animation-delay: -.9s; }.wave-icon i:nth-child(3) { height: 120px; animation-delay: -.5s; }.wave-icon i:nth-child(4) { height: 74px; animation-delay: -.2s; }.wave-icon i:nth-child(5) { height: 52px; animation-delay: -.7s; }
.drum-icon b { width: 118px; height: 74px; border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: 0 25px 0 -2px var(--coral), 0 27px 0 0 var(--ink); }.drum-icon i, .drum-icon span { position: absolute; width: 92px; height: 3px; background: var(--ink); top: 36px; }.drum-icon i { transform: rotate(28deg) translate(-30px, -26px); }.drum-icon span { transform: rotate(-28deg) translate(30px, -26px); }
.shuttle-icon b { width: 52px; height: 70px; border: 3px solid var(--ink); border-radius: 50% 50% 12px 12px; background: var(--paper); transform: rotate(12deg); }.shuttle-icon i, .shuttle-icon span { position: absolute; width: 3px; height: 64px; background: var(--ink); transform-origin: bottom; }.shuttle-icon i { transform: translateY(-17px) rotate(24deg); }.shuttle-icon span { transform: translateY(-17px) rotate(-24deg); }
.anime-icon { display: flex; gap: 28px; }.anime-icon i { width: 94px; height: 50px; border: 3px solid var(--ink); border-radius: 70% 12%; background: var(--paper); transform: rotate(8deg); }.anime-icon i:nth-child(2) { transform: scaleX(-1) rotate(8deg); }.anime-icon b { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: -61px 0 0 var(--ink), 61px 0 0 var(--ink); }

/* Contact */
.contact-hero { min-height: calc(100svh - 80px); padding-block: clamp(80px, 9vw, 140px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: clamp(50px, 8vw, 110px); align-items: center; }
.contact-copy h1 { margin: 22px 0 26px; font: 700 clamp(3.7rem, 7vw, 7rem)/.93 var(--display); letter-spacing: -.06em; }.contact-copy h1 em { font: 400 1.05em var(--serif); }.contact-copy > p { max-width: 600px; margin-bottom: 38px; font-size: 18px; line-height: 1.7; }.email-link { width: 100%; padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: flex; justify-content: space-between; gap: 18px; align-items: center; font-size: clamp(1.25rem, 2.5vw, 2rem); font-weight: 600; letter-spacing: -.04em; overflow-wrap: anywhere; }.email-link i { flex: 0 0 auto; font: 400 1.4em var(--serif); transition: transform .25s; }.email-link:hover i { transform: rotate(45deg); }.copy-email { margin-top: 18px; display: inline-flex; align-items: center; gap: 24px; padding: 10px 14px; background: transparent; border: 1px solid var(--ink); border-radius: 999px; cursor: pointer; font: 500 12px var(--mono); transition: background .25s; }.copy-email.copied { background: var(--lime); }.copy-email i { font-size: 18px; font-style: normal; }
.contact-visual { position: relative; min-height: 460px; border: 1px solid var(--ink); background: var(--coral); overflow: hidden; }.contact-card { position: absolute; z-index: 2; left: 11%; right: 11%; top: 24%; padding: 25px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); transform: rotate(3deg); animation: card-float 5s ease-in-out infinite reverse; }.contact-card small, .contact-card span { display: block; font: 500 12px var(--mono); }.contact-card strong { display: block; margin: 35px 0 30px; font-size: clamp(3rem, 5vw, 4.5rem); letter-spacing: -.06em; }.contact-orbit { position: absolute; width: 240px; aspect-ratio: 1; right: -60px; bottom: -60px; border: 1px solid var(--ink); border-radius: 50%; animation: slow-spin 20s linear infinite; }.contact-orbit span { display: block; padding-top: 8px; text-align: center; font: 500 9px var(--mono); }.contact-orbit i { position: absolute; width: 25px; height: 25px; left: calc(50% - 12px); top: -13px; border: 1px solid var(--ink); border-radius: 50%; background: var(--lime); }
.contact-details { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; border-top: 1px solid var(--ink); }.contact-details.single-detail { grid-template-columns: minmax(0, 1fr); }.contact-details div { min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; }.contact-details a { font-size: clamp(1.25rem, 2.5vw, 2rem); overflow-wrap: anywhere; }.contact-details a span { margin-left: 8px; }.contact-details div > p:last-child { max-width: 460px; margin: 0; font-size: 17px; line-height: 1.7; }

.site-footer { min-height: 100px; padding: 18px max(140px, calc((100% - 1240px) / 2)) max(18px, env(safe-area-inset-bottom)) max(32px, calc((100% - 1240px) / 2)); display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 12px var(--mono); }.footer-icons a { min-height: 48px; border-color: rgba(244, 241, 234, .65); }.footer-icons a:hover { color: var(--ink); background: var(--page-accent); transform: translateY(-3px); }

/* Compact, opt-in SoundCloud controls. */
.music-controller { position: fixed; z-index: 200; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 8px; font-family: var(--display); }
.menu-open .music-controller { visibility: hidden; opacity: 0; pointer-events: none; }
.music-main, .music-panel-toggle { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--ink); color: var(--paper); cursor: pointer; box-shadow: 4px 4px 0 color-mix(in srgb, var(--page-accent) 80%, var(--ink)); transition: transform .25s var(--ease), background .25s, color .25s; }.music-main:hover, .music-panel-toggle:hover { transform: translateY(-3px); background: var(--page-accent); color: var(--ink); }.music-main svg, .music-panel-toggle svg { width: 22px; height: 22px; fill: currentColor; }.music-main .music-off-line { stroke: currentColor; stroke-width: 2; opacity: 1; }.music-controller.is-playing .music-main .music-off-line { opacity: 0; }.music-panel-toggle { width: 44px; height: 44px; box-shadow: none; background: var(--paper); color: var(--ink); }.music-panel-toggle svg { width: 16px; height: 16px; transition: transform .25s; }.music-controller.is-open .music-panel-toggle svg { transform: rotate(180deg); }
.music-panel { position: absolute; right: 0; bottom: 66px; width: min(350px, calc(100vw - 32px)); max-height: min(440px, calc(100svh - 96px)); overflow: auto; padding: 18px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--ink); visibility: hidden; opacity: 0; transform: translateY(12px) scale(.98); transform-origin: bottom right; transition: opacity .22s, transform .22s var(--ease), visibility 0s .22s; }.music-controller.is-open .music-panel { visibility: visible; opacity: 1; transform: none; transition: opacity .22s, transform .22s var(--ease), visibility 0s; }
.music-kicker { margin: 0 0 8px; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }.music-track { display: block; margin-bottom: 3px; font-size: 1.25rem; line-height: 1.15; letter-spacing: -.035em; }.music-artist { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; font: 500 11px var(--mono); border-bottom: 1px solid var(--ink); }
.music-controls { display: grid; grid-template-columns: 44px 52px 44px 1fr; gap: 8px; align-items: center; margin-block: 18px; }.music-controls button { min-width: 44px; min-height: 44px; border: 1px solid var(--ink); border-radius: 50%; background: transparent; cursor: pointer; font-size: 18px; }.music-controls button:hover { background: var(--page-accent); }.music-controls .music-play { min-width: 52px; min-height: 52px; background: var(--ink); color: var(--paper); }.music-loop { justify-self: end; border-radius: 999px !important; padding-inline: 11px; font: 500 10px var(--mono); }.music-loop.is-active { background: var(--lime); color: var(--ink); }
.music-field { display: grid; gap: 7px; margin-top: 13px; }.music-field label { display: flex; justify-content: space-between; gap: 12px; font: 500 10px var(--mono); text-transform: uppercase; }.music-field select { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font: 500 12px var(--mono); }.music-field input[type="range"] { width: 100%; min-height: 30px; accent-color: var(--page-accent); }.music-status { min-height: 18px; margin: 10px 0 0; font: 500 10px/1.5 var(--mono); color: #555; }.soundcloud-frame { position: fixed; width: 1px; height: 1px; left: -10px; bottom: -10px; border: 0; opacity: .01; pointer-events: none; }

/* Motion: visible but contained. */
.js .reveal-block { clip-path: inset(0 0 12% 0); transform: translateY(26px); transition: clip-path .7s var(--ease), transform .7s var(--ease); }
.js .reveal-block.is-visible { clip-path: inset(-12px); transform: translateY(0); }
@keyframes boot-away { to { clip-path: inset(0 0 100% 0); } }
@keyframes boot-line { to { width: 100%; } }
@keyframes slow-spin { to { transform: rotate(360deg); } }
@keyframes card-float { 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes dot-move { to { transform: translate(-20px, 14px); } }
@keyframes soft-pulse { 50% { transform: scale(.88); } }
@keyframes ring-breathe { 50% { transform: scale(.92); } }
@keyframes screen-dot { 0%, 100% { transform: translate(-45px, -25px); } 50% { transform: translate(45px, 25px); } }
@keyframes name-echo { to { transform: translate(5px, -4px) skewX(-3deg); clip-path: polygon(0 0, 100% 0, 100% 48%, 0 62%); } }
@keyframes wipe-shape-spin { to { transform: rotate(360deg); } }
@keyframes wipe-shape-bob { to { transform: translateY(-24px) rotate(28deg); } }
@keyframes wave-bar { to { transform: scaleY(.45); } }

@media (max-width: 1100px) {
  .hero, .contact-hero { grid-template-columns: 1fr minmax(320px, .72fr); gap: 48px; }
  .hero h1, .contact-copy h1 { font-size: clamp(3.7rem, 7.8vw, 6rem); }
  .hero-visual, .contact-visual { min-height: 420px; }
  .case-card { grid-template-columns: .9fr 1.1fr; gap: 48px; }.case-visual { min-height: 450px; }
  .project-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .case-card, .case-reverse { grid-template-columns: 1fr; gap: 38px; }
  .case-reverse .case-copy, .case-reverse .case-visual { order: initial; }
  .case-visual { min-height: min(64vw, 500px); }
}

@media (max-width: 900px) {
  .page-shell { width: min(100% - 40px, 680px); }
  .site-header { height: auto; min-height: 70px; padding-inline: 20px; flex-wrap: wrap; }
  .js .site-header { height: 70px; flex-wrap: nowrap; }
  .js .menu-toggle { display: inline-flex; z-index: 2; }
  .site-nav { position: static; flex-basis: 100%; padding: 10px 0 20px; display: grid; gap: 0; background: var(--lime); }
  .js .site-nav { position: absolute; top: 69px; left: 0; right: 0; max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; border-bottom: 1px solid var(--ink); transform: scaleY(0); transform-origin: top; visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; }
  .js .site-nav.is-open { transform: scaleY(1); visibility: visible; transition: transform .3s var(--ease), visibility 0s; }
  .site-nav a { min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid rgba(23,23,23,.25); }
  .site-nav a::after { display: none; }
  .hero, .contact-hero { min-height: auto; padding-block: 72px 90px; grid-template-columns: 1fr; gap: 56px; }
  .hero h1, .contact-copy h1 { font-size: clamp(3.4rem, 12vw, 5.6rem); }
  .hero-visual, .contact-visual { min-height: min(520px, 90vw); }
  .section-heading { align-items: start; flex-direction: column; gap: 24px; }
  .project-grid, .skills-grid { grid-template-columns: 1fr; }
  .tool-grid, .hobbies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hobby-anime { grid-column: span 2; }
  .project-art { height: min(70vw, 430px); }.project-info { min-height: auto; }
  .skill-list a { grid-template-columns: 42px 1fr auto; padding-block: 22px; }.skill-list small { grid-column: 2; }.skill-list i { grid-column: 3; grid-row: 1 / span 2; }
  .contact-cta > div { align-items: start; flex-direction: column; }.round-button { width: 130px; height: 130px; flex-basis: 130px; }
  .page-intro { min-height: auto; padding-block: 90px 70px; grid-template-columns: 1fr; gap: 34px; }.page-intro .eyebrow { grid-column: auto; }.page-intro h1 { font-size: clamp(3.4rem, 12vw, 5.8rem); }.page-intro > p:last-child { font-size: 17px; }
  .case-visual { min-height: min(78vw, 520px); }
  .learning { grid-template-columns: 1fr; gap: 30px; }
  .contact-details { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 520px) {
  .page-shell { width: calc(100% - 32px); }
  .section-space { padding-block: 72px; }
  .hero, .contact-hero { padding-block: 58px 76px; gap: 44px; }
  .hero h1, .contact-copy h1, .page-intro h1 { font-size: clamp(3rem, 15vw, 4.4rem); letter-spacing: -.05em; line-height: .96; }
  .hero-intro, .contact-copy > p, .page-intro > p:last-child { font-size: 16px; line-height: 1.65; }
  .hero-visual, .contact-visual { min-height: 340px; }.visual-card { left: 9%; right: 9%; top: 18%; padding: 20px; box-shadow: 8px 8px 0 var(--ink); }.visual-card strong { font-size: 2.2rem; }.visual-orbit { width: 160px; }
  .section-heading h2, .contact-cta h2, .learning h2 { font-size: clamp(2.25rem, 11vw, 3.4rem); line-height: 1.03; }
  .project-art { height: clamp(320px, 84vw, 400px); }.browser-frame { width: 82%; height: 62%; box-shadow: 8px 8px 0 var(--ink); }.browser-frame b { font-size: 4.6rem; }.store-window, .video-window { width: 82%; box-shadow: 8px 8px 0 var(--ink); }.store-window { padding: 14px; }.store-window > span { margin-bottom: 10px; }.store-window > div { gap: 6px; }.store-window i { aspect-ratio: 2; }.store-window b { margin-top: 10px; padding: 6px 8px; }.project-info { min-height: auto; padding: 20px; flex-direction: column; }.project-info .arrow { align-self: flex-end; }.project-info small { font-size: 12px; }
  .skill-list a { grid-template-columns: 32px 1fr auto; gap: 12px; }.skill-list b { font-size: 1.25rem; }.skill-list small { font-size: 12px; line-height: 1.5; }
  .contact-cta > div { gap: 28px; }.round-button { width: 116px; height: 116px; flex-basis: 116px; padding: 22px; }
  .case-copy h2 { font-size: 2.8rem; }.case-copy > p:not(.eyebrow) { font-size: 16px; }.case-links .button { width: 100%; }.case-visual { min-height: 340px; }.window-ui, .service-window, .channel-window { inset: 8%; box-shadow: 8px 8px 0 var(--ink); }.window-ui strong { font-size: 3.2rem; }.floating-chip { font-size: 10px; }.visual-slot strong { font-size: 3rem; }.service-products { margin-block: 14px; }.service-products i { min-height: 54px; }.service-checkout { font-size: 8px; }.channel-video { min-height: 150px; }
  .skill-card { min-height: 410px; padding: 22px; }.skill-icon { height: 125px; margin-block: 24px; }.skill-card h2 { font-size: 2.4rem; }.code-icon { font-size: 55px; }
  .tool-grid, .hobbies-grid, .languages-strip { grid-template-columns: 1fr; }.tool-card { min-height: 210px; }.hobby-card { min-height: 330px; }.hobby-anime { grid-column: auto; }.languages-strip > div { border-right: 0; border-bottom: 1px solid var(--ink); }.languages-strip > div:last-child { border-bottom: 0; }
  .email-link { align-items: flex-start; font-size: 1.2rem; }.contact-card { left: 8%; right: 8%; padding: 20px; box-shadow: 8px 8px 0 var(--ink); }.contact-card strong { font-size: 3rem; }.contact-orbit { width: 180px; }
  .next-page a span { font-size: 3.6rem; }.site-footer { min-height: 150px; padding: 24px 92px calc(78px + env(safe-area-inset-bottom)) 16px; align-items: flex-start; flex-wrap: wrap; }.footer-page { display: none; }.footer-icons { width: 100%; }.music-controller { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }.music-panel { width: calc(100vw - 24px); }.music-controls { grid-template-columns: 44px 52px 44px 1fr; }
}

@media (min-width: 521px) and (max-width: 1440px) {
  .next-page a { padding-right: 64px; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .site-nav { max-height: calc(100vh - 69px); overflow-y: auto; }
  .hero, .contact-hero { min-height: auto; }
  .hero-visual, .contact-visual { min-height: 330px; }
  .music-panel { max-height: calc(100dvh - 160px); }
}

@media (pointer: coarse) {
  .project-card, .case-visual { transform: none !important; }
  .tool-card:hover, .hobby-card:hover, .contact-orb:hover { transform: none; box-shadow: none; }
  .tool-card:hover .tool-mark { transform: none; }
  .github-feature:hover { box-shadow: none; }
}

@media (hover: hover) and (pointer: fine) {
  .name-effect:hover { transform: translateY(-2px) rotate(-.7deg); text-shadow: -3px 2px 0 var(--coral), 3px -2px 0 var(--lime); }
  .name-effect:hover::after { opacity: .85; animation: name-echo .7s steps(2, end) infinite alternate; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .boot, .page-wipe { display: none; }
  .js .reveal-block { clip-path: none; transform: none; }
  .project-card, .case-visual { transform: none !important; }
}

/* Dark-first theme, shared controls, and ambient depth. */
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; will-change: transform; backface-visibility: hidden; }
body::before { width: min(54vw, 760px); aspect-ratio: 1; left: -18vw; top: 8vh; border-radius: 50%; background: radial-gradient(circle at 58% 42%, color-mix(in srgb, var(--page-accent) 28%, transparent), transparent 65%); filter: blur(20px); opacity: .75; animation: ambient-drift 18s ease-in-out infinite alternate; }
body::after { inset: -52px; background-image: radial-gradient(color-mix(in srgb, var(--page-accent-2) 26%, transparent) .7px, transparent .7px); background-size: 26px 26px; mask-image: linear-gradient(120deg, transparent 6%, #000 48%, transparent 96%); opacity: .28; animation: ambient-grid 24s linear infinite; }
html[data-theme="light"] body::before { width: min(62vw, 900px); left: -17vw; top: 3vh; background: radial-gradient(circle at 60% 36%, color-mix(in srgb, var(--page-accent) 42%, transparent), transparent 60%), radial-gradient(circle at 32% 72%, color-mix(in srgb, var(--page-accent-2) 34%, transparent), transparent 54%); opacity: .68; filter: blur(24px); }
html[data-theme="light"] body::after { background-image: radial-gradient(color-mix(in srgb, var(--page-accent-2) 38%, transparent) .8px, transparent .8px), linear-gradient(118deg, transparent 28%, color-mix(in srgb, var(--page-accent) 9%, transparent) 48%, transparent 68%); background-size: 26px 26px, 100% 100%; opacity: .3; }
main { position: relative; z-index: 0; }

.site-header { justify-content: flex-start; gap: clamp(16px, 2vw, 28px); }
.brand { flex: 0 0 auto; }
.site-nav { margin-left: auto; }
.header-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.header-icon-button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--paper) 72%, transparent); color: var(--ink); cursor: pointer; transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s; }
.theme-toggle, .cat-toggle { width: auto; min-width: 78px; padding-inline: 11px; grid-template-columns: 20px auto; gap: 7px; border-radius: 999px; }
.theme-toggle::after, .cat-toggle::after { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.theme-toggle::after { content: "Light"; }
html[data-theme="light"] .theme-toggle::after { content: "Dark"; }
.cat-toggle::after { content: "Cat"; }
.cat-toggle[aria-pressed="true"]::after { content: "Cat on"; }
.header-icon-button:hover, .header-icon-button[aria-pressed="true"] { background: var(--page-accent); color: var(--on-accent); border-color: var(--graphic-ink); transform: translateY(-2px); }
.header-icon-button:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.header-icon-button svg { width: 20px; height: 20px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-sun { display: block; }
.theme-icon-moon { display: none; }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-moon { display: block; fill: currentColor; stroke: none; }

.page-wipe { transform: translateX(-105%); transition-duration: .44s; }
body.wipe-reverse .page-wipe { transform: translateX(105%); }
body.is-leaving .page-wipe { transform: translateX(0); }
body.is-entering:not(.wipe-reverse) .page-wipe { transform: translateX(105%); }
body.is-entering.wipe-reverse .page-wipe { transform: translateX(-105%); }
body.wipe-reset .page-wipe { transition: none !important; }
.page-wipe, .hero-visual, .case-visual, .contact-visual, .card-lime, .card-violet, .card-coral, .skill-card-lime, .skill-card-violet, .tool-card-violet, .tool-card-coral, .tool-card-lime, .hobby-card { --ink: var(--graphic-ink); --paper: var(--graphic-paper); --line: rgba(23, 23, 23, .22); color: var(--on-accent); }
.page-wipe span, .page-wipe i, .page-wipe b { border-color: var(--graphic-ink); }

html[data-theme="dark"] .skill-card-dark, html[data-theme="dark"] .tool-card-dark, html[data-theme="dark"] .channel-window { --ink: #f5f2ea; --paper: #121218; color: #f5f2ea; background: #101016; }
html[data-theme="dark"] .skill-card-paper, html[data-theme="dark"] .tool-card:not(.tool-card-dark):not(.tool-card-violet):not(.tool-card-coral):not(.tool-card-lime) { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] .more-projects { background: var(--surface-2); }
html[data-theme="dark"] .button-light { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .button-light:hover { background: var(--violet); color: var(--on-accent); }
html[data-theme="dark"] .button-dark { background: var(--ink); color: var(--paper); }
html[data-theme="dark"] .button-dark:hover { background: var(--lime); color: var(--on-accent); }
.icon-button:hover, .footer-icons a:hover, .music-main:hover, .music-panel-toggle:hover, .music-controls button:hover, .project-card:hover .arrow, .copy-email.copied, .music-loop.is-active { color: var(--on-accent); }

.project-grid-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 28px); }
.project-grid-featured .project-card { min-width: 0; display: flex; flex-direction: column; }
.project-grid-featured .project-art { height: clamp(220px, 24vw, 320px); }
.project-grid-featured .project-info { min-height: 190px; flex: 1; padding: 22px; }
.project-grid-featured .project-info h3 { font-size: clamp(1.65rem, 2.4vw, 2.3rem); }

.skill-flow { position: relative; display: grid; gap: 10px; overflow: hidden; padding: 62px 12px 12px; border: 1px solid var(--ink); background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(12px); }
.skill-flow-label { position: absolute; inset: 0 0 auto; min-height: 50px; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.skill-flow-label i { font-style: normal; font-size: 18px; transition: transform .25s var(--ease); }
.skill-flow:hover .skill-flow-label i { transform: translate(3px, -3px); }
.skill-lane { display: block; overflow: hidden; min-width: 0; border: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 82%, transparent); }
.skill-track { width: 100%; min-height: 76px; padding: 8px; display: flex; align-items: center; gap: 10px; transform: translateX(0); transition: none; will-change: transform; }
.skill-track.is-shifting { transform: translateX(calc(-20% - 2px)); transition: transform .72s var(--ease); }
.skill-chip { flex: 0 0 calc(20% - 8px); min-width: 0; height: 58px; padding: 7px 10px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.skill-chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 clamp(10px, 1vw, 12px) var(--mono); }
.brand-logo { display: inline-grid; place-items: center; flex: 0 0 auto; }
.brand-logo svg { width: 72%; height: 72%; overflow: visible; }
.logo-plate { width: 42px; height: 42px; border: 1px solid rgba(23, 23, 23, .22); border-radius: 11px; background: #fff; color: #171717; box-shadow: 0 2px 0 rgba(23, 23, 23, .16); }

.home-contact-panel { position: relative; min-height: 310px; padding: clamp(28px, 4vw, 54px); overflow: hidden; align-items: center !important; border: 1px solid var(--ink); background: linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 23%, var(--surface)), color-mix(in srgb, var(--page-accent-2) 16%, var(--surface))); }
.home-contact-panel > div:first-child { position: relative; z-index: 2; }
.home-contact-panel h2 { margin-bottom: 22px; }
.home-contact-panel p { margin: 0; color: var(--text-muted); }
.contact-orbs { position: relative; z-index: 2; min-width: 290px; min-height: 180px; display: flex; justify-content: center; align-items: center; gap: 18px; }
.contact-orb { width: 126px; height: 126px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; border: 1px solid var(--graphic-ink); border-radius: 50%; background: var(--lime); color: var(--on-accent); transition: transform .28s var(--ease), box-shadow .28s; }
.contact-orb:nth-of-type(2) { background: var(--violet); }
.contact-orb:hover { transform: rotate(7deg) translateY(-6px); box-shadow: 8px 8px 0 var(--lift-shadow); }
.contact-orb svg { width: 30px; height: 30px; }
.contact-orb svg path { fill: currentColor; }
.contact-orb svg path[d^="M3.5"], .contact-orb svg path + path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-orb span { font: 500 11px var(--mono); }
.contact-orbit-lines { position: absolute; z-index: -1; width: 260px; aspect-ratio: 1; border: 1px dashed color-mix(in srgb, var(--ink) 44%, transparent); border-radius: 50%; animation: slow-spin 18s linear infinite; }
.contact-orbit-lines i, .contact-orbit-lines b { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--coral); }
.contact-orbit-lines i { left: 15px; top: 36px; }.contact-orbit-lines b { right: 10px; bottom: 52px; background: var(--lime); }

.novice-languages { border-top: 1px solid var(--ink); }
.novice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ink); }
.novice-grid article { min-width: 0; min-height: 150px; padding: 20px; display: flex; align-items: end; justify-content: space-between; gap: 16px; border-right: 1px solid var(--ink); background: color-mix(in srgb, var(--surface) 82%, transparent); }
.novice-grid article:last-child { border-right: 0; }
.novice-grid h3 { margin: 5px 0 0; font-size: clamp(1.45rem, 2.6vw, 2.25rem); letter-spacing: -.04em; }
.novice-grid small { font: 500 10px var(--mono); text-transform: uppercase; }
.tool-mark.logo-plate { width: 68px; height: 68px; border-radius: 16px; border-color: rgba(23, 23, 23, .22); }

.hobby-anime { grid-column: auto; }
.hobby-drawing { background: var(--violet); }
.drawing-icon span { width: 120px; height: 82px; border: 3px solid var(--graphic-ink); background: var(--graphic-paper); transform: rotate(-5deg); box-shadow: 8px 8px 0 var(--graphic-ink); }
.drawing-icon i { position: absolute; width: 92px; height: 13px; border: 2px solid var(--graphic-ink); border-radius: 999px 4px 4px 999px; background: var(--coral); transform: rotate(-28deg); }
.drawing-icon i::after { content: ""; position: absolute; right: -16px; top: -2px; border-left: 17px solid var(--graphic-ink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.drawing-icon b { position: absolute; width: 42px; height: 25px; left: calc(50% - 36px); bottom: 28px; border: 3px solid var(--graphic-ink); border-top: 0; border-right: 0; transform: skew(-18deg) rotate(-6deg); }

.github-feature { min-height: 300px; padding: clamp(28px, 5vw, 62px); display: flex; justify-content: space-between; align-items: center; gap: 40px; overflow: hidden; border: 1px solid var(--ink); background: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 90%, var(--violet)), var(--surface)); transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .18s ease-out, box-shadow .28s var(--ease); }
.github-feature:hover { box-shadow: 10px 10px 0 var(--page-accent); }
.github-feature-copy { display: flex; flex-direction: column; align-items: start; }
.github-feature-copy small { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.github-feature-copy strong { margin-block: 18px 28px; font-size: clamp(2.5rem, 6vw, 5.6rem); line-height: .9; letter-spacing: -.06em; }
.github-feature-copy em { font: 500 13px var(--mono); font-style: normal; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.github-feature-copy i { margin-left: 8px; font-style: normal; }
.github-feature-mark { position: relative; flex: 0 0 clamp(130px, 18vw, 220px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--on-accent); }
.github-feature-mark::before { content: ""; position: absolute; inset: -18px; border: 1px dashed currentColor; border-radius: inherit; animation: slow-spin 15s linear infinite reverse; }
.github-feature-mark svg { width: 52%; height: 52%; fill: currentColor; }
.github-feature-mark i, .github-feature-mark b { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--coral); animation: orbit-dot 5s linear infinite; }.github-feature-mark b { width: 10px; height: 10px; background: var(--violet); animation-duration: 8s; animation-direction: reverse; }

.site-footer { padding-inline-start: max(32px, calc((100% - 1240px) / 2)); padding-inline-end: max(140px, calc((100% - 1240px) / 2)); background: var(--footer-bg); color: var(--footer-text); border-top-color: rgba(245, 242, 234, .32); }
.footer-icons a { border-color: rgba(245, 242, 234, .62); }
.music-controller { transform: translate3d(0, var(--music-shift, 0px), 0); transition: transform .18s ease-out; }
.music-panel { max-height: min(440px, var(--music-panel-max, calc(100svh - 96px))); }
.music-status { color: var(--text-muted); }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.cursor-cat { position: fixed; z-index: 180; left: 0; top: 0; width: 32px; height: 32px; pointer-events: none; opacity: 0; image-rendering: pixelated; background-image: url("data:image/gif;base64,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"); background-repeat: no-repeat; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .22)); transition: opacity .18s; will-change: transform, background-position; }
.cursor-cat.is-visible { opacity: 1; }
.cursor-cat { z-index: 90; }
.cursor-cat { filter: none; contain: strict; backface-visibility: hidden; }

@keyframes ambient-drift { to { transform: translate3d(24vw, 8vh, 0) scale(1.16) rotate(18deg); } }
@keyframes ambient-grid { to { transform: translate3d(52px, 26px, 0); } }
@keyframes orbit-dot { from { transform: rotate(0) translateX(clamp(72px, 10vw, 126px)) rotate(0); } to { transform: rotate(360deg) translateX(clamp(72px, 10vw, 126px)) rotate(-360deg); } }

@media (max-width: 1100px) {
  .site-header { height: 70px; min-height: 70px; padding-inline: 20px; }
  .js .menu-toggle { display: inline-flex; z-index: 2; }
  .js .site-nav { margin-left: 0; position: absolute; top: 69px; left: 0; right: 0; max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; display: grid; gap: 0; background: var(--lime); color: var(--on-accent); border-bottom: 1px solid var(--graphic-ink); transform: scaleY(0); transform-origin: top; visibility: hidden; transition: transform .36s var(--ease), visibility 0s .36s; }
  .js .site-nav.is-open { transform: scaleY(1); visibility: visible; transition: transform .36s var(--ease), visibility 0s; }
  .site-nav a { min-height: 52px; display: flex; align-items: center; border-bottom: 1px solid rgba(23, 23, 23, .25); }
  .site-nav a::after { display: none; }
  .header-actions { margin-left: auto; }
}

@media (max-width: 900px) {
  .project-grid-featured { grid-template-columns: 1fr; }
  .home-contact-panel { align-items: start !important; }
  .novice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .novice-grid article:nth-child(2) { border-right: 0; }
  .novice-grid article:nth-child(-n + 2) { border-bottom: 1px solid var(--ink); }
}

@media (max-width: 620px) {
  .site-header { gap: 10px; }
  .brand span { max-width: 126px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-actions { gap: 4px; }
  .header-icon-button { width: 42px; height: 42px; }
  .theme-toggle, .cat-toggle { min-width: 42px; padding: 0; grid-template-columns: 1fr; }
  .theme-toggle::after, .cat-toggle::after { display: none; }
  .menu-toggle { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .skill-flow { padding-inline: 8px; }
  .skill-track { min-height: 62px; gap: 6px; padding: 6px; }
  .skill-track.is-shifting { transform: translateX(calc(-20% - 1.2px)); }
  .skill-chip { flex-basis: calc(20% - 4.8px); height: 48px; padding: 4px; justify-content: center; }
  .skill-chip b { display: none; }
  .skill-chip .logo-plate { width: 36px; height: 36px; }
  .home-contact-panel { min-height: 460px; }
  .contact-orbs { min-width: 0; width: 100%; min-height: 170px; gap: 10px; }
  .contact-orb { flex: 0 1 calc(50% - 5px); width: calc(50% - 5px); max-width: 112px; height: auto; aspect-ratio: 1; }
  .novice-grid { grid-template-columns: 1fr; }
  .novice-grid article, .novice-grid article:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--ink); }
  .novice-grid article:last-child { border-bottom: 0; }
  .github-feature { min-height: 410px; align-items: flex-start; flex-direction: column; }
  .github-feature-mark { align-self: center; width: 145px; flex-basis: 145px; }
  .site-footer { padding: 24px 92px calc(78px + env(safe-area-inset-bottom)) 16px; }
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-cat { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
  .skill-flow.is-static .skill-track { flex-wrap: nowrap; transform: none; }
}

@media (pointer: coarse) {
  .contact-orb:hover { transform: none; box-shadow: none; }
  .github-feature:hover { box-shadow: none; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .music-panel { max-height: min(calc(100dvh - 120px), var(--music-panel-max, calc(100dvh - 120px))); }
}