@font-face { font-family: "Untitled Sans"; src: url("assets/untitled-sans-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Untitled Sans"; src: url("assets/untitled-sans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Untitled Sans"; src: url("assets/untitled-sans-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Untitled Sans"; src: url("assets/untitled-sans-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
* { box-sizing: border-box; }
html { background: #000; color: #f0efef; color-scheme: dark; }
body { margin: 0; background: #000 url("assets/stars.svg") repeat; background-size: 1600px 1200px; background-attachment: fixed; font: clamp(15px, .958vw, 20.5px)/1.2 "Untitled Sans", Arial, sans-serif; }
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background-repeat: repeat; background-size: 1600px 1200px; opacity: .12; }
body::before { background-image: url("assets/stars-twinkle-1.svg"); animation: star-twinkle 9s ease-in-out infinite alternate; }
body::after { background-image: url("assets/stars-twinkle-2.svg"); animation: star-twinkle 13s ease-in-out -7s infinite alternate; }
.intro, .projects { position: relative; z-index: 1; }
@keyframes star-twinkle { from { opacity: .08; } to { opacity: .42; } }
[hidden] { display: none !important; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid #a889e7; outline-offset: 6px; }
.intro { width: min(82.5%, 1765px); margin: 0 auto; height: clamp(350px, 24vw, 520px); margin-bottom: 64px; padding-top: 0; display: flex; align-items: center; justify-content: flex-start; gap: 56px; box-sizing: border-box; text-align: right; }
.intro-copy { flex-shrink: 0; }
.intro-copy .name-row { justify-content: flex-end; }
.cube { position: relative; width: clamp(240px, 14.01vw, 300px); aspect-ratio: 1; margin: 0 0 0 calc(-1 * clamp(30px, 1.75125vw, 37.5px)); flex-shrink: 0; }
.cube video, .cube img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cube video { pointer-events: none; }
.cube img { position: absolute; inset: 0; pointer-events: none; }
.cube.playing img { visibility: hidden; }
h1, h2, h3, h4, h5, h6, strong, b { font-family: "Untitled Sans", Arial, sans-serif; font-weight: 700; }
h1 { margin: 0 0 28px; font-size: clamp(25px, 1.495vw, 32px); line-height: 1.1; }
.intro p { margin: 0; line-height: 1.9; }
.projects { width: min(82.5%, 1765px); margin: 0 auto; padding-bottom: 100px; }
h2 { margin: 0 0 55px; font-size: clamp(25px, 1.495vw, 32px); line-height: 1.1; }
.project-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 96px; margin-bottom: 60px; }
.project-tab { display: inline-flex; align-items: center; gap: 17px; padding: 0; height: 60px; border: 0; background: none; color: inherit; cursor: pointer; }
.project-tab[aria-selected="false"] { filter: grayscale(1); opacity: .29; }
.slate-wordmark { width: clamp(158px, 10.35vw, 223px); height: auto; }
.bolt { width: clamp(32px, 2.1vw, 45px); height: auto; }
.wordmark { width: clamp(72px, 4.42vw, 95px); height: auto; }
.sprk-tab { gap: 16px; }
.wordmark { display: block; }
.project-links { display: flex; align-items: center; gap: 30px; margin-bottom: 44px; }
.project-links a { display: inline-flex; align-items: center; gap: 16px; }
.link-icon { width: 40px; height: 40px; filter: invert(1); }
.slate-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 112px; row-gap: 120px; align-items: start; margin-top: 80px; }
.product-column, .team-column { min-width: 0; }
.slate-layout .project-copy, .slate-layout .photo-caption { margin: 0; min-height: 0; }
.slate-layout .photo-caption { margin-bottom: 24px; }
.slate-layout .project-copy p { margin-bottom: 32px; }
.slate-story-column { min-width: 0; }
.writeup-image-cluster { display: grid; grid-template-columns: 1fr; align-items: start; gap: 56px; margin: 80px 0 0; min-width: 0; }
.writeup-image-cluster:last-child { margin-bottom: 0; }
.project-copy .writeup-image { margin: 0; }
.writeup-image-cluster .cluster-wide { grid-column: 1 / -1; }
.writeup-image-cluster .extension-image { max-width: 690px; }
.team-photos { display: grid; gap: 24px; }
.slate-layout .team-column { grid-column: 1 / -1; }
.slate-final-image { grid-column: 1 / -1; min-width: 0; }
.slate-final-image .project-image { aspect-ratio: 2172 / 1344; height: 100%; object-fit: cover; }
.slate-design-inspiration { grid-column: 1 / -1; min-width: 0; }
.slate-design-inspiration p { max-width: 750px; margin: 0 0 80px; }
.inspiration-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.inspiration-images .project-image { aspect-ratio: 16 / 9; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .inspiration-images { grid-template-columns: 1fr; } }
.slate-layout .team-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.project-intro { margin: 0 0 30px; min-height: 40px; }
.project-image { display: block; width: 100%; height: auto; }
.image-zoom { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: zoom-in; text-align: left; }
.image-zoom:focus-visible { outline: 2px solid white; outline-offset: 6px; }
.image-viewer-open { overflow: hidden; }
.image-viewer { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 64px 40px 40px; border: 0; box-sizing: border-box; background: rgba(0, 0, 0, .94); }
.image-viewer[open] { display: flex; align-items: center; justify-content: center; }
.image-viewer::backdrop { background: rgba(0, 0, 0, .9); }
.image-viewer img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.image-viewer-close { position: absolute; top: 12px; right: 20px; padding: 4px 12px; border: 0; background: transparent; color: white; font: 36px Arial, sans-serif; cursor: pointer; }
.project-copy { margin: 42px 0; }
.project-copy p { margin: 0 0 17px; }
.project-copy p:last-child { margin-bottom: 0; }
.photo-caption { font-style: italic; margin: 0 0 30px; min-height: 40px; }

.sprk-layout { display: grid; grid-template-columns: 751fr 863fr; gap: 30px; }
.sprk-copy { margin-bottom: 36px; max-width: 750px; }
.sprk-copy p { margin: 0 0 20px; }
.sprk-copy p:last-child { margin-bottom: 0; }
.sprk-videos { display: grid; grid-template-columns: 751fr 863fr; gap: 30px; margin-top: 32px; }
.sprk-videos figure { margin: 0; min-width: 0; }
.demo-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.no-script { margin-top: 30px; color: #999; }
@media (max-width: 1000px) {
  .projects { width: calc(100% - 64px); }
  .desktop-break { display: none; }
  .sprk-layout, .sprk-videos { gap: 24px; }
  .slate-layout { column-gap: 64px; row-gap: 96px; }
}
@media (max-width: 720px) {
  body { font-size: 15px; line-height: 1.35; }
  .intro { width: calc(100% - 40px); height: 373px; padding-top: 0; flex-direction: column; gap: 15px; }
  .cube { width: 217.5px; height: 217.5px; margin-bottom: 15px; margin-left: -27.1875px; }
  h1 { font-size: 23px; margin-bottom: 17px; }
  .projects { width: calc(100% - 40px); padding-bottom: 60px; }
  h2 { font-size: 23px; margin-bottom: 28px; }
  .project-tabs { gap: 60px; margin-bottom: 44px; }
  .project-links { margin-bottom: 30px; }
  .slate-layout, .sprk-layout, .sprk-videos { grid-template-columns: 1fr; gap: 36px; }
  .project-intro, .photo-caption { min-height: 0; margin-bottom: 24px; }
  .project-copy { margin: 28px 0; }
  .writeup-image-cluster { grid-template-columns: 1fr; gap: 32px; margin: 28px 0 60px; }
  .slate-layout { margin-top: 56px; row-gap: 40px; }
  .slate-layout .team-photos { grid-template-columns: 1fr; gap: 32px; }
  .product-column, .team-column { grid-row: auto; grid-template-rows: auto auto; gap: 24px; }
  .sprk-copy { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; opacity: .18; }
}

.raven-tab { gap: 30px; height: 68px; }
.raven-icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 14px; background: #f0efef; flex-shrink: 0; }
.raven-mark { display: block; width: 52px; height: auto; filter: brightness(0); }
.raven-wordmark { width: clamp(117px, 6.93vw, 149px); height: auto; }

.devpost-icon { display: block; width: 40px; height: 40px; }

.raven-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; row-gap: 64px; }
.raven-hackathon-photo { aspect-ratio: 3 / 4; object-fit: cover; }
.raven-video-link { display: block; position: relative; }
.raven-video-link .project-image { display: block; width: 100%; height: auto; }
.video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 64px; height: 46px; border-radius: 12px; background: #e62117; color: #fff; font: 24px Arial, sans-serif; padding-left: 3px; }

#sprk-panel { padding-top: 24px; }

.auth-artifact { position: relative; width: 100%; height: 1250px; margin-bottom: 32px; overflow: hidden; background: #000; }
.auth-artifact iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.auth-poster { width: 100%; height: 100%; object-fit: contain; }
.auth-artifact.loaded .auth-poster { visibility: hidden; }

.slate-artifact { position:relative;width:100%;height:900px;margin-bottom:32px;overflow:hidden;background:transparent; }
.slate-artifact iframe {position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;color-scheme:dark;}
.slate-artifact.loaded .island-poster {visibility:hidden;}
@media(max-width:720px){.slate-artifact{height:600px;}}

.name-row { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 28px; }
.name-row h1 { margin: 0; }
.avatar { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
@media(max-width:720px) { .name-row { gap: 20px; margin-bottom: 17px; } .avatar { width: 44px; height: 44px; } }

h1, h2 { font-weight: 500; }

.project-tab:hover, .project-tab:focus-visible { filter: none; opacity: 1; }

.sprk-credit { margin-bottom: 36px; text-align: right; margin-left: auto; max-width: 750px; }

.sprk-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; margin-bottom: 36px; }
.sprk-overview .sprk-copy { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.sprk-overview .sprk-credit { grid-column: 2; grid-row: 1; margin: 0; max-width: none; }
@media(max-width:720px) { .sprk-overview { grid-template-columns: 1fr; gap: 24px; } .sprk-overview .sprk-copy { grid-row: 2; } .sprk-overview .sprk-credit { grid-column: 1; text-align: left; } }

.sprk-credit { line-height: 1.7; }

.sprk-videos { grid-template-columns: minmax(0, 1fr); }

/* Compact layouts retain the same content and interactive artifacts. */
@media (max-width: 1000px) {
  .intro { width: calc(100% - 64px); gap: 32px; }
  .project-links { flex-wrap: wrap; row-gap: 16px; }
  .auth-artifact { height: 1100px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; line-height: 1.5; }
  .intro { width: calc(100% - 40px); height: auto; min-height: 0; align-items: center; gap: 8px; padding: 8px 0 120px; margin-bottom: 0; }
  .cube { width: 200px; height: 200px; margin: 0; }
  .intro-copy { width: 100%; min-width: 0; }
  .intro-copy .name-row { justify-content: center; gap: 16px; margin-bottom: 12px; }
  .intro-copy p { text-align: center; padding-left: 0; line-height: 1.6; }
  h1 { font-size: 24px; }
  .project-tabs { display: flex; flex-direction: column; align-items: center; gap: 32px; margin-bottom: 64px; }
  .project-tab { min-width: 0; height: 64px; justify-content: center; align-items: center; }
  .slate-wordmark { width: 180px; max-width: 100%; }
  .sprk-tab { gap: 16px; }
  .bolt { width: 32px; }
  .wordmark { width: 72px; }
  .raven-tab { gap: 20px; height: 64px; }
  .raven-icon { width: 48px; height: 48px; border-radius: 10px; }
  .raven-mark { width: 80%; }
  .raven-wordmark { width: 100px; }
  .project-links { gap: 8px 24px; margin-bottom: 32px; }
  .project-links a { min-height: 44px; gap: 10px; }
  .link-icon, .devpost-icon { width: 32px; height: 32px; flex-shrink: 0; }
  .project-intro { margin-bottom: 24px; }
  .slate-artifact { height: 500px; margin-bottom: 24px; }
  .slate-layout { margin-top: 40px; row-gap: 64px; }
  .slate-layout .project-copy p { margin-bottom: 24px; }
  .writeup-image-cluster { gap: 24px; margin: 40px 0 0; }
  .slate-design-inspiration p { margin-bottom: 32px; }
  .inspiration-images, .slate-layout .team-photos { gap: 24px; }
  .auth-artifact { height: 1060px; margin-bottom: 24px; }
  .sprk-overview { gap: 32px; margin-bottom: 32px; }
  .sprk-overview .sprk-copy { grid-row: 1; }
  .sprk-overview .sprk-credit { grid-row: 2; }
  .sprk-videos { gap: 32px; margin-top: 24px; }
  .raven-gallery { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .image-viewer { padding: 64px 16px 24px; }
  .image-viewer-close { min-width: 44px; min-height: 44px; right: 12px; }
}
@media (max-width: 360px) {
  .intro, .projects { width: calc(100% - 32px); }
  .project-tabs { gap: 32px; }
  .name-row { gap: 12px; }
  h1 { font-size: 22px; }
}