:root {
  color-scheme: dark;
  --bg: #05060a;
  --bg-card: #0b1118;
  --ink: #f4f8f8;
  --ink-soft: #a3b0b6;
  --muted: #617078;
  --line: rgba(149, 185, 196, .15);
  --cyan: #67e8f9;
  --cyan-deep: #27bbd6;
  --violet: #9a70ff;
  --board: #c39258;
  --ease: cubic-bezier(.22, .61, .36, 1);
  font-family: "Manrope", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--ink-soft); background: radial-gradient(circle at 74% -7%, rgba(24, 145, 166, .2), transparent 34rem), linear-gradient(145deg, #05060a 0%, #080e15 55%, #05060a 100%); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.ambient { position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(2px); }
.ambient--cyan { width: 40vw; height: 40vw; top: -24vw; right: -14vw; background: radial-gradient(circle, rgba(31, 181, 207, .17), transparent 69%); }
.ambient--violet { width: 34vw; height: 34vw; bottom: -18vw; left: -14vw; background: radial-gradient(circle, rgba(115, 73, 210, .13), transparent 70%); }

.showcase-app { width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 28px 0 26px; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 38px; }
.brand { display: inline-flex; align-items: baseline; gap: 10px; }
.brand-mark { color: var(--ink); font-size: 16px; font-weight: 800; letter-spacing: .17em; }
.brand-mark span { margin-inline: 2px; color: var(--cyan); font-weight: 400; }
.brand small { color: var(--muted); font-size: 11px; letter-spacing: .16em; }
.topbar-right { display: inline-flex; align-items: center; gap: 28px; }
.live-status, .home-link, .work-index, .work-live, .work-soon, .eyebrow, .work-kicker, .footer { font-family: "DM Mono", monospace; }
.live-status { color: var(--cyan); font-size: 9px; letter-spacing: .12em; }
.live-status i, .work-live i { display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(103, 232, 249, .1); }
.home-link { color: var(--ink-soft); font-size: 10px; letter-spacing: .06em; transition: color .2s; }
.home-link span { margin-left: 5px; color: var(--cyan); font-size: 14px; }
.home-link:hover { color: var(--ink); }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 60px; align-items: center; min-height: 430px; padding: 76px 0 72px; }
.eyebrow { margin: 0; color: var(--cyan); font-size: 10px; letter-spacing: .18em; }
.hero h1 { margin: 17px 0 20px; color: var(--ink); font-size: clamp(42px, 6vw, 74px); font-weight: 700; letter-spacing: -.075em; line-height: 1.07; }
.hero h1 em { color: var(--cyan); font-style: normal; }
.hero-lead { max-width: 600px; margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.9; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 31px; color: var(--muted); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .08em; }
.hero-meta b { margin-right: 6px; color: var(--cyan); font-weight: 500; }
.hero-orbit { position: relative; width: 240px; height: 240px; justify-self: end; }
.orbit { position: absolute; inset: 10%; border: 1px solid rgba(103, 232, 249, .23); border-radius: 50%; transform: rotate(-20deg) skewX(-10deg); }
.orbit--inner { inset: 25%; border-color: rgba(154, 112, 255, .35); transform: rotate(31deg) skewX(17deg); }
.orbit-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 7px rgba(103, 232, 249, .08), 0 0 22px rgba(103, 232, 249, .5); }
.orbit-dot--one { top: 14%; right: 22%; }
.orbit-dot--two { bottom: 19%; left: 16%; width: 7px; height: 7px; background: var(--violet); box-shadow: 0 0 0 6px rgba(154, 112, 255, .1), 0 0 18px rgba(154, 112, 255, .5); }
.orbit-core { position: absolute; inset: 38%; display: grid; place-items: center; border: 1px solid rgba(103, 232, 249, .35); border-radius: 50%; color: var(--cyan); background: rgba(15, 44, 54, .72); box-shadow: 0 0 42px rgba(34, 211, 238, .12), inset 0 1px rgba(255, 255, 255, .12); font-family: "DM Mono", monospace; font-size: 13px; letter-spacing: .1em; }

.works { padding: 30px 0 90px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 26px; }
.section-head h2 { margin: 12px 0 0; color: var(--ink); font-size: 31px; letter-spacing: -.05em; }
.section-head > p { margin: 0 0 2px; color: var(--muted); font-size: 12px; }
.works-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.work-card { position: relative; display: flex; flex-direction: column; min-height: 470px; overflow: hidden; padding: 18px; border: 1px solid var(--line); background: rgba(11, 17, 24, .82); box-shadow: 0 22px 60px rgba(0, 0, 0, .18); transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.work-card--featured:hover { border-color: rgba(103, 232, 249, .55); transform: translateY(-4px); box-shadow: 0 28px 70px rgba(0, 0, 0, .35); }
.work-card-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 18px; }
.work-index, .work-live, .work-soon { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.work-live { color: var(--cyan); }
.work-live--gold { color: #efc466; }
.work-soon { color: var(--violet); }
.gomoku-visual { position: relative; aspect-ratio: 2.15; margin: 19px 0 20px; overflow: hidden; border: 1px solid rgba(205, 157, 88, .52); background-color: var(--board); background-image: linear-gradient(rgba(236, 198, 136, .12), rgba(236, 198, 136, .12)), repeating-linear-gradient(0deg, transparent 0 9.05%, rgba(67, 39, 20, .5) 9.13% 9.36%, transparent 9.42% 10%), repeating-linear-gradient(90deg, transparent 0 6.16%, rgba(67, 39, 20, .5) 6.23% 6.45%, transparent 6.53% 6.67%); box-shadow: inset 0 0 55px rgba(65, 34, 13, .24); }
.gomoku-visual::after { position: absolute; inset: 23% 40%; border: 2px solid rgba(73, 40, 18, .42); border-radius: 50%; content: ""; }
.gomoku-star { position: absolute; z-index: 1; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: rgba(73, 40, 18, .7); transform: translate(-50%, -50%); }
.gomoku-stone { position: absolute; z-index: 2; display: block; width: 7%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 2px 4px 8px rgba(41, 22, 10, .38); }
.gomoku-stone--black { background: radial-gradient(circle at 30% 25%, #71807a, #16211e 55%, #050a08); }
.gomoku-stone--white { border: 1px solid rgba(111, 111, 96, .45); background: radial-gradient(circle at 30% 25%, #fff, #e7e6dc 60%, #afb2a9); }
.showcase-visual { position: relative; aspect-ratio: 2.15; margin: 19px 0 20px; overflow: hidden; border: 1px solid rgba(149, 185, 196, .2); background: #10161a; }
.showcase-visual--gold { border-color: rgba(224, 176, 80, .38); background: #111b17; }
.showcase-visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease), filter .45s var(--ease); }
.work-card:hover .showcase-visual img { filter: saturate(1.08) contrast(1.04); transform: scale(1.025); }
.goldmine-visual { position: relative; aspect-ratio: 2.15; margin: 19px 0 20px; overflow: hidden; border: 1px solid rgba(224, 176, 80, .43); background: radial-gradient(circle at 55% 42%, rgba(211, 159, 57, .18), transparent 42%), linear-gradient(160deg, #1b241d, #0c1210); box-shadow: inset 0 0 70px rgba(0, 0, 0, .35); }
.goldmine-visual::before { position: absolute; inset: 14% 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(218, 188, 118, .42), transparent); content: ""; box-shadow: 0 55px rgba(218, 188, 118, .13), 0 108px rgba(218, 188, 118, .1); }
.goldmine-visual::after { position: absolute; right: 8%; bottom: -4%; width: 78%; height: 42%; border: 1px solid rgba(106, 123, 102, .25); border-radius: 50% 50% 0 0; content: ""; transform: rotate(-5deg); }
.mine-beam { position: absolute; z-index: 1; left: 50%; top: 0; width: 1px; height: 74%; background: linear-gradient(rgba(218, 188, 118, .85), rgba(218, 188, 118, .1)); transform-origin: top; }
.mine-beam--one { transform: rotate(-28deg); }.mine-beam--two { transform: rotate(29deg); opacity: .26; }
.mine-hook { position: absolute; z-index: 2; left: 50%; top: 70%; width: 24px; height: 22px; border: 2px solid #d9bd76; border-top: 0; border-radius: 0 0 20px 20px; transform: translateX(-50%); }
.mine-gem { position: absolute; z-index: 2; width: 15px; height: 15px; border: 1px solid rgba(255, 237, 157, .85); background: linear-gradient(135deg, #ffe8a4, #b87919); box-shadow: 0 0 20px rgba(230, 177, 65, .55); transform: rotate(45deg); }.mine-gem--one { left: 26%; top: 59%; }.mine-gem--two { left: 63%; top: 74%; width: 21px; height: 21px; }.mine-gem--three { left: 76%; top: 45%; width: 10px; height: 10px; background: linear-gradient(135deg, #e8fff6, #5ed7be); box-shadow: 0 0 17px rgba(94, 215, 190, .5); }
.mine-rock { position: absolute; z-index: 1; width: 32px; height: 24px; border-radius: 48% 52% 38% 62%; background: linear-gradient(135deg, #9ba49a, #303a32); opacity: .82; transform: rotate(-19deg); }.mine-rock--one { left: 43%; top: 80%; }.mine-rock--two { left: 14%; top: 38%; width: 23px; height: 18px; transform: rotate(21deg); }
.work-card--gold:hover { border-color: rgba(232, 182, 91, .58); transform: translateY(-4px); box-shadow: 0 28px 70px rgba(0, 0, 0, .35); }.work-kicker--gold { color: #efc466; }.work-arrow--gold { border-color: rgba(232, 182, 91, .36); color: #efc466; }.work-card--gold:hover .work-arrow--gold { color: #171207; background: #efc466; }
.work-card--yefire { grid-column: 1 / -1; min-height: 330px; border-color: rgba(255, 184, 93, .25); background: radial-gradient(circle at 86% 18%, rgba(255, 154, 68, .13), transparent 34%), linear-gradient(135deg, rgba(35, 24, 26, .9), rgba(9, 15, 22, .86)); }
.work-card--yefire:hover { border-color: rgba(255, 194, 109, .62); transform: translateY(-4px); box-shadow: 0 28px 70px rgba(0, 0, 0, .35); }
.work-live--warm, .work-kicker--warm { color: #ffb85d; }
.work-arrow--warm { border-color: rgba(255, 184, 93, .38); color: #ffb85d; }
.work-card--yefire:hover .work-arrow--warm { color: #24170f; background: #ffbd68; }
.yefire-card-visual { position: relative; display: grid; place-items: center; aspect-ratio: 3.5; margin: 19px 0 22px; overflow: hidden; border: 1px solid rgba(255, 184, 93, .24); background: radial-gradient(circle at 50% 50%, rgba(255, 169, 71, .18), transparent 30%), linear-gradient(135deg, rgba(32, 30, 33, .88), rgba(9, 17, 22, .94)); }
.yefire-orbit { position: absolute; border: 1px solid rgba(255, 184, 93, .3); border-radius: 50%; transform: rotate(-14deg) skewX(-12deg); }
.yefire-orbit--one { width: 42%; height: 74%; }
.yefire-orbit--two { width: 25%; height: 130%; border-color: rgba(103, 232, 249, .25); transform: rotate(28deg) skewX(13deg); }
.yefire-core { position: relative; z-index: 1; display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid rgba(255, 184, 93, .55); border-radius: 50%; color: #ffd07d; background: rgba(46, 32, 25, .86); box-shadow: 0 0 36px rgba(255, 169, 71, .2), inset 0 1px rgba(255, 255, 255, .12); font-family: "DM Mono", monospace; font-size: 15px; letter-spacing: .1em; }
.yefire-node { position: absolute; z-index: 2; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .15); color: var(--ink-soft); background: rgba(9, 16, 22, .78); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .08em; }
.yefire-node--digital { top: 22%; left: 25%; color: #ffd07d; border-color: rgba(255, 184, 93, .35); }
.yefire-node--geo { right: 25%; bottom: 20%; color: var(--cyan); border-color: rgba(103, 232, 249, .3); }
.work-card--soon { grid-column: 1 / -1; min-height: 220px; }
.work-card-bottom { display: flex; justify-content: space-between; gap: 22px; align-items: end; margin-top: auto; }
.work-kicker { margin: 0 0 9px; color: var(--cyan); font-size: 9px; letter-spacing: .12em; }
.work-card h3 { margin: 0 0 10px; color: var(--ink); font-size: 24px; letter-spacing: -.04em; }
.work-description { max-width: 460px; margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.work-arrow { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(103, 232, 249, .35); color: var(--cyan); font-size: 20px; transition: background .25s, color .25s; }
.work-card--featured:hover .work-arrow { color: #06131a; background: var(--cyan); }
.work-arrow--muted { border-color: rgba(154, 112, 255, .25); color: var(--violet); }
.work-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.work-tags span, .work-tags a { padding: 6px 9px; border: 1px solid rgba(149, 185, 196, .14); color: var(--muted); font-size: 10px; }
.work-tags a:hover { border-color: rgba(255, 184, 93, .42); color: #ffd07d; }
.work-card--soon { border-color: rgba(154, 112, 255, .17); background: linear-gradient(145deg, rgba(20, 17, 35, .58), rgba(9, 14, 21, .84)); }
.next-visual { position: relative; display: grid; place-items: center; aspect-ratio: 1.62; margin: 23px 0 24px; overflow: hidden; border: 1px solid rgba(154, 112, 255, .18); background: radial-gradient(circle at 50% 50%, rgba(115, 73, 210, .14), transparent 58%), repeating-linear-gradient(135deg, rgba(154, 112, 255, .07) 0 1px, transparent 1px 34px); }
.next-line { position: absolute; display: block; width: 62%; height: 1px; background: linear-gradient(90deg, transparent, rgba(154, 112, 255, .8), transparent); transform: rotate(-28deg); }
.next-line--two { width: 42%; transform: rotate(38deg); background: linear-gradient(90deg, transparent, rgba(103, 232, 249, .7), transparent); }
.next-line--three { width: 76%; transform: rotate(76deg); opacity: .45; }
.next-plus { color: rgba(218, 204, 255, .85); font-size: 50px; font-weight: 200; text-shadow: 0 0 28px rgba(154, 112, 255, .5); }
.closing-note { padding: 28px 0 92px; border-top: 1px solid var(--line); text-align: center; }
.closing-note > p:last-child { margin: 15px 0 0; color: var(--ink-soft); font-size: clamp(20px, 3vw, 31px); letter-spacing: -.04em; }
.closing-note em { color: var(--cyan); font-style: normal; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.footer a { color: var(--ink-soft); letter-spacing: .02em; }
.footer b { margin-left: 5px; color: var(--cyan); font-size: 14px; font-weight: 400; }

@media (max-width: 820px) {
  .showcase-app { width: min(100% - 40px, 640px); }
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 82px 0 58px; }
  .hero-orbit { display: none; }
  .works { padding-top: 16px; }
  .works-grid { grid-template-columns: 1fr; }
  .work-card { min-height: 0; }
  .work-card--soon { min-height: 390px; }
  .work-card--yefire { min-height: 0; }
}

@media (max-width: 560px) {
  .showcase-app { width: min(100% - 28px, 500px); padding-top: 20px; }
  .topbar-right { gap: 11px; }
  .live-status { font-size: 0; }
  .live-status i { margin-right: 0; }
  .home-link { font-size: 9px; }
  .hero { padding: 70px 0 48px; }
  .hero h1 { font-size: clamp(39px, 11vw, 56px); }
  .hero-lead { font-size: 13px; }
  .hero-meta { display: grid; gap: 10px; }
  .section-head { align-items: start; flex-direction: column; gap: 10px; }
  .section-head h2 { font-size: 28px; }
  .work-card { padding: 15px; }
  .gomoku-visual, .next-visual, .yefire-card-visual { margin: 19px 0 20px; }
  .work-card h3 { font-size: 21px; }
  .work-description { font-size: 12px; }
  .footer { align-items: start; flex-direction: column; padding-bottom: 12px; line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}