:root {
  --paper: #f9f9f6;
  --white: #fff;
  --ink: #171717;
  --muted: #777771;
  --line: rgba(23, 23, 23, .15);
  --red: #df3538;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --sans: Manrope, Arial, sans-serif;
  --cn: "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--paper); }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--cn), var(--sans); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.mono { font-family: var(--mono); font-size: 9px; letter-spacing: .09em; }

.grain { position: fixed; inset: 0; z-index: 15; pointer-events: none; opacity: .018; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.scroll-progress { position: fixed; inset: 0 0 auto; z-index: 30; height: 2px; background: transparent; }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--red); transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; }

.site-header { position: fixed; z-index: 20; inset: 2px 0 auto; height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 5.2vw; border-bottom: 1px solid var(--line); background: rgba(249, 249, 246, .88); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-logo { width: 36px; height: 36px; object-fit: contain; }
.brand-lockup { display: flex; flex-direction: column; gap: 4px; }
.brand-lockup strong { font: 800 12px/1 var(--sans); letter-spacing: .14em; }
.brand-lockup small { color: #777771; font-size: 8px; letter-spacing: .05em; }
.site-nav { display: flex; align-items: center; gap: 33px; margin-left: auto; margin-right: 54px; }
.site-nav > a { color: #55554f; font-size: 11px; transition: color .2s; }
.site-nav > a i { margin-right: 7px; color: #989891; font: 9px var(--mono); font-style: normal; }
.site-nav > a:hover, .site-nav > a.active { color: var(--ink); }
.site-nav > a.active i { color: var(--red); }
.nav-motto { padding-left: 20px; border-left: 1px solid var(--line); color: #55554f; font-size: 10px; }
.nav-motto b { margin-left: 6px; color: var(--red); font-weight: 400; }
.header-counter { color: #777771; font-size: 8px; }
.counter-dot, .signal { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--red); vertical-align: 1px; box-shadow: 0 0 10px #df353855; }
.menu-toggle { display: none; }

.hero { position: relative; height: min(920px, 100svh); min-height: 700px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 82px 5.2vw 52px; background: radial-gradient(ellipse at 78% 48%, #eeeDEA 0, #f5f5f1 29%, var(--paper) 68%); }
.hero::after { position: absolute; inset: 0; pointer-events: none; content: ""; background: linear-gradient(90deg, rgba(249,249,246,.98) 0%, rgba(249,249,246,.86) 35%, rgba(249,249,246,.12) 78%, rgba(249,249,246,.44)), linear-gradient(0deg, var(--paper) 0%, transparent 25%); }
.hero-grid { position: absolute; inset: 0 0 0 50%; opacity: .22; background-image: linear-gradient(rgba(23,23,23,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(23,23,23,.12) 1px, transparent 1px); background-size: 10vw 10vw; mask-image: linear-gradient(90deg, transparent, #000 38%, transparent); }
.hero-threads { position: absolute; z-index: 1; top: 7%; right: -2%; width: 74%; height: 91%; overflow: visible; opacity: .66; transform: translateY(var(--threads-y, 0px)); }
.hero-threads path { vector-effect: non-scaling-stroke; stroke: rgba(23,23,23,.25); stroke-width: 1; }
.hero-threads path.thread-red { stroke: var(--red); stroke-width: 1.5; }
.hero-topline { position: relative; z-index: 2; display: flex; justify-content: space-between; color: #777771; font-size: 8px; }
.hero-copy { position: relative; z-index: 3; max-width: 740px; margin: auto 0 80px; transform: translateY(var(--hero-copy-y, 0px)); opacity: var(--hero-copy-opacity, 1); transition: opacity .12s linear; }
.hero-kicker { margin: 0 0 22px; color: #55554f; font-size: 8px; letter-spacing: .15em; }
.hero h1 { margin: 0 0 42px; padding-right: .16em; font-size: clamp(100px, 17vw, 230px); font-weight: 800; letter-spacing: -.13em; line-height: .78; }
.hero h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--ink); }
.hero-stop { color: var(--red); font: 400 .6em var(--sans); letter-spacing: 0; vertical-align: top; }
.hero-summary { display: flex; align-items: flex-start; gap: 24px; }
.summary-index { min-width: 117px; padding-top: 9px; border-top: 1px solid var(--red); color: var(--red); font-size: 8px; }
.hero-summary p { margin: -4px 0 0; color: #55554f; font-size: 13px; font-weight: 300; line-height: 2.1; }
.hero-summary strong { color: var(--ink); font: 700 14px var(--sans); letter-spacing: .02em; }
.hero-seal { position: absolute; z-index: 2; top: 24%; right: 13%; width: min(30vw, 390px); height: min(30vw, 390px); display: grid; place-items: center; transform: translateY(var(--seal-y, 0px)); }
.seal-orbit { position: absolute; border: 1px solid rgba(23,23,23,.23); border-radius: 50%; }
.orbit-a { inset: 8%; border-style: dashed; animation: orbit-spin 48s linear infinite; }
.orbit-b { inset: 21%; border-color: rgba(223,53,56,.65); border-left-color: transparent; transform: rotate(-31deg); }
.seal-logo { width: 59%; height: 59%; object-fit: contain; filter: drop-shadow(0 0 16px #17171712); }
.seal-caption { position: absolute; bottom: 15%; left: 13%; color: #676761; font-size: 7px; line-height: 1.8; transform: rotate(-9deg); }
.seal-cross { position: absolute; top: 14%; right: 16%; color: var(--red); font: 300 26px var(--sans); }
.hero-next { position: absolute; z-index: 3; bottom: 53px; left: 5.2vw; display: flex; align-items: center; gap: 16px; color: #666660; font-size: 8px; }
.hero-next b { color: var(--red); font-size: 18px; font-weight: 400; animation: down-bob 1.6s ease-in-out infinite; }
.hero-edge { position: absolute; z-index: 3; right: 5.2vw; bottom: 47%; display: flex; align-items: center; gap: 12px; color: #777771; font-size: 7px; writing-mode: vertical-rl; }
.hero-edge i { width: 1px; height: 45px; background: var(--red); }
.hero-coordinate { position: absolute; z-index: 3; right: 5.2vw; bottom: 53px; color: #777771; font-size: 8px; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes down-bob { 50% { transform: translateY(5px); } }

.section-pad { padding-right: 11vw; padding-left: 11vw; }
.about { position: relative; padding-top: 42px; padding-bottom: 45px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.section-top { display: flex; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid var(--line); color: #777771; font-size: 8px; }
.section-top b { color: var(--red); font-weight: 400; }
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 11%; padding: 75px 0 66px; }
.about-title { position: relative; padding-left: 36px; }
.title-vertical { position: absolute; top: 12px; left: 0; color: #777771; font-size: 7px; writing-mode: vertical-rl; }
.about-title h2 { margin: 0; font-size: clamp(70px, 10vw, 130px); font-weight: 700; letter-spacing: -.11em; line-height: .96; }
.about-title h2 span { color: var(--red); }
.title-ruler { display: flex; align-items: center; gap: 13px; margin-top: 35px; color: #777771; font-size: 8px; }
.title-ruler i { width: 52px; height: 1px; background: var(--red); }
.about-body { align-self: center; max-width: 490px; padding-top: 12px; }
.about-body p { margin: 0 0 15px; color: #666660; font-size: 12px; font-weight: 300; line-height: 2.2; }
.about-body p.about-lead { margin-bottom: 20px; color: var(--ink); font-size: 21px; font-weight: 400; }
.about-signature { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
.signature-mark { color: var(--red); font: 800 20px var(--sans); letter-spacing: .06em; }
.about-signature > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }
.about-signature strong { font: 700 10px var(--sans); letter-spacing: .12em; }
.about-signature small { color: #777771; font-size: 8px; }
.signature-year { margin-left: auto; color: #777771; font-size: 7px; }
.about-bottom { display: flex; align-items: center; gap: 18px; color: #777771; font-size: 7px; }
.about-redline { flex: 1; max-width: 200px; height: 1px; background: var(--red); }
.motto-art { position: relative; overflow: hidden; padding: 48px 11vw; background: #f3f3ef; }
.motto-art img { display: block; width: 100%; max-height: 460px; object-fit: contain; }
.motto-caption { position: absolute; right: 5.2vw; bottom: 16px; color: #777771; font-size: 7px; }

.work { padding-top: 110px; padding-bottom: 112px; background: var(--paper); }
.work-heading { display: flex; justify-content: space-between; align-items: flex-end; margin: 44px 0 35px; }
.work-heading h2 { margin: 0; font-size: clamp(39px, 6vw, 76px); font-weight: 500; letter-spacing: -.08em; line-height: 1.15; }
.work-heading h2 em { color: #777771; font-style: normal; }
.work-heading p { margin: 0 0 5px; color: #777771; font-size: 10px; line-height: 2; }
.works-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(230px, .65fr); align-items: end; gap: 32px; }
.work-card { min-width: 0; }
.work-poster { position: relative; display: block; width: 100%; aspect-ratio: 1.78; overflow: hidden; border: 1px solid rgba(23,23,23,.15); background: radial-gradient(ellipse at 67% 42%, #eadad4 0, transparent 27%), linear-gradient(140deg, #eeeee9, #deded8 57%, #f5f5f1); text-align: left; cursor: pointer; }
.work-poster::before { position: absolute; z-index: 1; inset: 0; pointer-events: none; content: ""; background: linear-gradient(115deg, transparent 20%, #ffffff8c 44%, transparent 67%); transform: translateX(-70%); transition: transform 1.2s ease; }
.work-poster:hover::before { transform: translateX(80%); }
.work-poster::after { position: absolute; z-index: 2; inset: 0; border: 1px solid rgba(23,23,23,.09); content: ""; pointer-events: none; }
.poster-frame { position: absolute; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .6s, transform 1s; }
.poster-frame.is-ready { opacity: .7; transform: scale(1); }
.poster-grid { position: absolute; z-index: 1; inset: 0; opacity: .18; background-image: linear-gradient(rgba(23,23,23,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(23,23,23,.2) 1px, transparent 1px); background-size: 12.5% 25%; }
.poster-orbit { position: absolute; z-index: 1; border: 1px solid rgba(23,23,23,.25); border-radius: 50%; transform: rotate(-28deg); }
.poster-orbit-one { top: -17%; right: -11%; width: 76%; height: 130%; }
.poster-orbit-two { top: -2%; right: -3%; width: 61%; height: 103%; border-color: rgba(223,53,56,.65); border-left-color: transparent; }
.poster-cross { position: absolute; z-index: 1; top: 24%; right: 13%; color: #171717; font: 200 120px/.6 var(--sans); opacity: .05; transform: rotate(21deg); }
.poster-number { position: absolute; z-index: 3; top: 21px; left: 22px; color: #55554f; font-size: 8px; }
.poster-title { position: absolute; z-index: 3; top: 34%; left: 7%; color: var(--ink); font-size: clamp(30px, 5vw, 68px); font-weight: 700; letter-spacing: -.07em; line-height: 1.06; text-shadow: 0 1px 15px #ffffffd9; }
.poster-title span { color: var(--red); }
.poster-play { position: absolute; z-index: 3; right: 7%; bottom: 23%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.poster-play i { display: grid; width: 51px; height: 51px; place-items: center; padding-left: 3px; border: 1px solid rgba(23,23,23,.7); border-radius: 50%; font-size: 12px; font-style: normal; transition: .25s; }
.work-poster:hover .poster-play i { border-color: var(--red); background: var(--red); color: #fff; transform: scale(1.08); }
.poster-play span { color: #55554f; font-size: 7px; }
.poster-bottom { position: absolute; z-index: 3; right: 22px; bottom: 19px; left: 22px; display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid rgba(23,23,23,.28); color: #55554f; font-size: 7px; }
.work-details { display: flex; justify-content: space-between; align-items: flex-start; padding: 19px 1px 14px; }
.work-category { margin: 0 0 9px; color: var(--red); font-size: 7px; }
.work-details h3 { margin: 0 0 7px; font-size: 20px; font-weight: 400; letter-spacing: -.03em; }
.work-description { margin: 0; color: #777771; font-size: 9px; line-height: 1.8; }
.work-arrow { color: #777771; font-size: 20px; transition: color .2s, transform .2s; }
.work-card:hover .work-arrow { color: var(--red); transform: translate(3px, -3px); }
.work-credits { display: flex; gap: 20px; padding-top: 11px; border-top: 1px solid var(--line); color: #777771; font-size: 7px; }
.next-work { min-height: 212px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 20px; border: 1px solid var(--line); background: #fff; color: #777771; }
.next-cross { color: var(--red); font: 300 30px/1 var(--sans); }
.next-work .mono { font-size: 7px; }
.next-work p { margin: 9px 0 0; color: #55554f; font-size: 13px; }
.next-coordinate { color: #92928c; }

.contact { position: relative; min-height: 630px; overflow: hidden; padding-top: 40px; padding-bottom: 75px; border-top: 1px solid var(--line); background: #f1f1ec; }
.contact-content { position: relative; z-index: 3; max-width: 64%; padding: 78px 0 0 7%; }
.contact-kicker { margin: 0 0 20px; color: var(--red); font-size: 7px; }
.contact h2 { margin: 0; font-size: clamp(70px, 11vw, 138px); font-weight: 600; letter-spacing: -.12em; line-height: .95; }
.contact h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--ink); }
.contact-copy { margin: 25px 0; color: #666660; font-size: 11px; line-height: 2; }
.contact-handle { display: flex; align-items: center; gap: 17px; padding: 0 0 10px; border: 0; border-bottom: 1px solid #a5a59e; background: none; text-align: left; cursor: pointer; }
.handle-label { color: var(--red); font-size: 7px; }
.contact-handle strong { font: 500 12px var(--sans); letter-spacing: .04em; }
.contact-handle b { margin-left: 10px; color: #777771; font: 400 8px var(--mono); }
.contact-handle:hover b { color: var(--red); }
.contact-card-wrap { position: absolute; z-index: 2; top: 31%; right: 7%; width: min(35vw, 450px); text-align: right; transform: rotate(3deg); }
.contact-card { display: block; width: 100%; height: auto; border: 1px solid #d0d0c8; box-shadow: 0 15px 48px #17171718; }
.contact-card-wrap > .mono { display: inline-block; margin-top: 10px; color: #777771; font-size: 6px; }
.contact-orbit { position: absolute; top: 12%; right: 5%; width: min(44vw, 590px); height: min(44vw, 590px); display: grid; place-items: center; border: 1px solid rgba(23,23,23,.09); border-radius: 50%; }
.contact-orbit::before, .contact-orbit::after, .contact-orbit span, .contact-orbit i { position: absolute; inset: 12%; border: 1px solid rgba(23,23,23,.1); border-radius: 50%; content: ""; }
.contact-orbit::after { inset: 25%; border-color: rgba(223,53,56,.28); border-right-color: transparent; }
.contact-orbit span { inset: 37%; border-color: rgba(23,23,23,.14); }
.contact-orbit i { inset: 4%; border-color: #1717171c; border-style: dashed; }
.contact-orbit b { color: #17171708; font: 800 clamp(58px, 9vw, 120px) var(--sans); letter-spacing: -.15em; }
.site-footer { height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 5.2vw; border-top: 1px solid var(--line); background: var(--paper); }
.footer-brand { display: flex; align-items: baseline; gap: 10px; }
.footer-brand strong { font: 800 11px var(--sans); letter-spacing: .14em; }
.footer-brand span { color: #777771; font-size: 9px; }
.site-footer p, .back-top { color: #777771; font-size: 7px; }
.back-top:hover { color: var(--red); }

.toast { position: fixed; z-index: 40; bottom: 26px; left: 50%; padding: 12px 17px; transform: translate(-50%, 15px); opacity: 0; background: var(--ink); color: #fff; font-size: 11px; pointer-events: none; transition: .24s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.reveal { transform: translateY(26px); opacity: 0; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s ease; transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-visible { transform: none; opacity: 1; }
.work-card.reveal .work-poster { clip-path: inset(6% 0 6%); transition: clip-path 1s cubic-bezier(.2,.7,.2,1); }
.work-card.reveal.is-visible .work-poster { clip-path: inset(0); }
.motto-art img.reveal { transform: translateY(18px) scale(.98); transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity 1s ease; }
.motto-art img.reveal.is-visible { transform: none; }

.player-dialog { width: min(1000px, 92vw); padding: 0; border: 1px solid #aaa; background: #111; color: #f1f0ed; box-shadow: 0 20px 100px #0005; }
.player-dialog::backdrop { background: #171717b3; backdrop-filter: blur(7px); }
.player-shell { padding: 15px; }
.player-top, .player-caption { display: flex; align-items: center; justify-content: space-between; }
.player-top { height: 28px; margin-bottom: 12px; color: #aaa; font-size: 8px; }
.player-close { width: 28px; height: 28px; border: 1px solid #555; background: none; font-size: 20px; line-height: 1; cursor: pointer; }
.player-close:hover { border-color: var(--red); color: var(--red); }
.player-shell video { display: block; width: 100%; max-height: 72vh; background: #000; }
.player-caption { padding: 14px 1px 2px; font-size: 11px; }
.player-caption .mono { color: #aaa; font-size: 7px; }
.player-status { min-height: 14px; margin: 8px 0 0; color: #f18b8d; font-size: 8px; }
.player-status:empty { display: none; }

@media (max-width: 850px) {
  .site-header { padding: 0 5vw; }
  .site-nav { gap: 21px; margin-right: 25px; }
  .header-counter { display: none; }
  .hero { padding-right: 6vw; padding-left: 6vw; }
  .hero-seal { top: 26%; right: 7%; width: 38vw; height: 38vw; }
  .hero-edge { right: 5vw; }
  .hero-coordinate { right: 6vw; }
  .section-pad { padding-right: 8vw; padding-left: 8vw; }
  .about-grid { gap: 7%; }
  .about-title h2 { font-size: clamp(75px, 12vw, 110px); }
  .motto-art { padding-right: 8vw; padding-left: 8vw; }
  .works-grid { grid-template-columns: minmax(0, 1.4fr) minmax(190px, .7fr); gap: 20px; }
  .next-work { min-height: 180px; padding: 18px; }
  .contact-orbit { right: -4%; }
  .contact-content { max-width: 68%; }
  .contact-card-wrap { right: 5%; width: 34vw; }
}

@media (max-width: 600px) {
  html { scroll-padding-top: 70px; }
  .site-header { height: 68px; padding: 0 6vw; }
  .brand-logo { width: 30px; height: 30px; }
  .brand-lockup strong { font-size: 11px; }
  .menu-toggle { z-index: 22; display: flex; flex-direction: column; gap: 5px; padding: 10px; border: 0; background: none; }
  .menu-toggle span { width: 22px; height: 1px; background: var(--ink); transition: .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .site-nav { position: absolute; top: 68px; left: 0; display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 20px; margin: 0; padding: 24px 7vw 27px; border-bottom: 1px solid var(--line); background: rgba(249,249,246,.97); }
  .site-nav.is-open { display: flex; }
  .site-nav > a { font-size: 14px; }
  .site-nav > a i { font-size: 9px; }
  .nav-motto { width: 100%; padding: 15px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .hero { height: 94svh; min-height: 660px; padding: 72px 6vw 47px; }
  .hero-topline { font-size: 6px; }
  .hero-topline span:last-child { display: none; }
  .hero::after { background: linear-gradient(90deg, rgba(249,249,246,.98) 0%, rgba(249,249,246,.68) 58%, rgba(249,249,246,.2)), linear-gradient(0deg, var(--paper) 0%, transparent 30%); }
  .hero-threads { top: 16%; right: -39%; width: 130%; height: 73%; opacity: .54; }
  .hero-grid { inset: 0 0 0 26%; background-size: 22vw 15vh; }
  .hero-copy { margin: auto 0 110px; }
  .hero-kicker { margin-bottom: 21px; font-size: 7px; }
  .hero h1 { margin-bottom: 33px; font-size: clamp(104px, 27vw, 155px); letter-spacing: -.14em; }
  .hero-summary { gap: 14px; }
  .summary-index { min-width: 82px; font-size: 7px; }
  .hero-summary p { font-size: 11px; line-height: 2; }
  .hero-summary strong { font-size: 12px; }
  .hero-seal { top: 18%; right: 7%; width: 57vw; height: 57vw; opacity: .64; }
  .seal-caption { font-size: 6px; }
  .hero-edge { display: none; }
  .hero-next { bottom: 45px; left: 6vw; font-size: 7px; }
  .hero-coordinate { right: 6vw; bottom: 47px; font-size: 7px; }
  .section-pad { padding-right: 6vw; padding-left: 6vw; }
  .about { padding-top: 28px; padding-bottom: 30px; }
  .section-top { font-size: 7px; }
  .about-grid { display: block; padding: 45px 0 42px; }
  .about-title { padding-left: 22px; }
  .title-vertical { font-size: 6px; }
  .about-title h2 { font-size: clamp(84px, 23vw, 132px); }
  .title-ruler { margin-top: 25px; }
  .about-body { padding: 43px 0 0 23px; }
  .about-body p { font-size: 11px; }
  .about-body p.about-lead { font-size: 17px; }
  .signature-year { font-size: 6px; }
  .about-bottom { gap: 9px; font-size: 6px; }
  .about-redline { max-width: 58px; }
  .motto-art { padding: 28px 5vw 34px; }
  .motto-art img { min-height: 170px; object-fit: contain; }
  .motto-caption { right: 6vw; bottom: 10px; font-size: 6px; }
  .work { padding-top: 74px; padding-bottom: 78px; }
  .work-heading { display: block; margin: 34px 0 27px; }
  .work-heading h2 { font-size: 40px; }
  .work-heading p { margin-top: 12px; font-size: 9px; }
  .works-grid { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .work-poster { aspect-ratio: 1.19; }
  .poster-title { top: 36%; left: 6%; font-size: clamp(36px, 9vw, 56px); }
  .poster-number { top: 14px; left: 14px; font-size: 6px; }
  .poster-bottom { right: 14px; bottom: 14px; left: 14px; font-size: 6px; }
  .poster-play { right: 7%; bottom: 24%; }
  .poster-play i { width: 43px; height: 43px; font-size: 10px; }
  .poster-play span { font-size: 6px; }
  .poster-cross { font-size: 90px; }
  .work-details { padding-top: 14px; }
  .work-details h3 { font-size: 17px; }
  .work-description { font-size: 8px; }
  .work-credits { gap: 14px; font-size: 6px; }
  .next-work { min-height: 130px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; padding: 15px; }
  .next-cross { align-self: start; }
  .next-work p { font-size: 12px; }
  .next-coordinate { align-self: end; font-size: 6px; }
  .contact { min-height: 650px; padding-top: 28px; padding-bottom: 57px; }
  .contact-content { max-width: 100%; padding: 66px 0 0 3%; }
  .contact-kicker { font-size: 6px; }
  .contact h2 { font-size: clamp(76px, 21vw, 124px); }
  .contact-copy { margin: 22px 0; font-size: 10px; }
  .contact-handle { gap: 11px; }
  .handle-label { font-size: 6px; }
  .contact-handle strong { font-size: 11px; }
  .contact-handle b { font-size: 7px; }
  .contact-card-wrap { top: auto; right: 2%; bottom: 44px; width: 76vw; max-width: 360px; transform: rotate(2deg); }
  .contact-card-wrap > .mono { font-size: 5px; }
  .contact-orbit { top: 14%; right: -41%; width: 92vw; height: 92vw; opacity: .45; }
  .site-footer { height: 72px; padding: 0 6vw; }
  .footer-brand strong { font-size: 10px; }
  .footer-brand span { font-size: 8px; }
  .site-footer p { display: none; }
  .back-top { font-size: 6px; }
  .player-dialog { width: 96vw; }
  .player-shell { padding: 10px; }
  .player-caption { font-size: 9px; }
  .player-caption .mono { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { transform: none; opacity: 1; }
}

/* Frosted liquid-glass treatment for the work player. */
.player-dialog {
  width: min(1060px, 92vw);
  overflow: hidden;
  border: 1px solid #ffffffd9;
  border-radius: 28px;
  background: #f3f4f0a8;
  color: var(--ink);
  box-shadow: 0 34px 110px #17171735, inset 0 1px 0 #ffffff;
  backdrop-filter: blur(30px) saturate(1.55);
  -webkit-backdrop-filter: blur(30px) saturate(1.55);
}
.player-dialog[open] { animation: player-glass-in .48s cubic-bezier(.16,1,.3,1) both; }
.player-dialog::backdrop { background: #e7e9e5a6; backdrop-filter: blur(12px) saturate(1.15); }
.player-shell {
  position: relative;
  overflow: hidden;
  padding: clamp(13px, 2.4vw, 25px);
  border-radius: inherit;
  background: linear-gradient(145deg, #ffffff9c, #f1f3efa8 48%, #ffffff78);
}
.player-shell::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
  background: radial-gradient(ellipse at 8% 0, #fff9 0, transparent 37%), radial-gradient(ellipse at 100% 100%, #df353815 0, transparent 34%);
}
.player-top, .player-caption, .player-status { position: relative; z-index: 1; }
.player-top { height: 34px; margin-bottom: 13px; color: #55554f; }
.player-top .mono { font-size: 8px; }
.player-close {
  width: 34px;
  height: 34px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: #ffffff88;
  color: var(--ink);
  box-shadow: 0 5px 18px #1717170c, inset 0 1px 0 #fff;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .25s, background .25s, color .25s;
}
.player-close:hover { border-color: #ffffff; background: #fff; color: var(--red); transform: rotate(90deg); }
.player-shell video {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid #ffffffc7;
  border-radius: 15px;
  background: #080808;
  box-shadow: 0 18px 48px #17171728, 0 1px 0 #fff9;
}
.player-caption { padding: 16px 2px 2px; color: var(--ink); }
.player-caption .mono { color: #666660; }
.player-status { color: #b3272b; }
@keyframes player-glass-in {
  from { opacity: 0; filter: blur(12px); transform: translateY(20px) scale(.965); }
  to { opacity: 1; filter: none; transform: translateY(0) scale(1); }
}
@media (max-width: 600px) {
  .player-dialog { width: 96vw; border-radius: 22px; }
  .player-shell { padding: 11px; }
  .player-top { margin-bottom: 9px; }
  .player-shell video { border-radius: 11px; }
  .player-caption { gap: 12px; font-size: 9px; }
  .player-caption .mono { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .player-dialog[open] { animation: none; }
}

/* Final cosmic overrides: supersede leftover welcome-screen and light-glass rules. */
body.cosmos-site { overflow-x: hidden; overflow-y: auto; background: #080b14; color: #f1f2f6; }
body.cosmos-site .site-content { position: relative; min-height: 100vh; isolation: isolate; visibility: visible; opacity: 1; filter: none; transform: none; transition: none; }
body.cosmos-site .site-header { border-color: #ffffff19; background: #101522bd; box-shadow: 0 14px 44px #0004, inset 0 1px 0 #ffffff16; }
body.cosmos-site .site-nav > a:hover, body.cosmos-site .site-nav > a.active { border-color: #ffffff20; background: #ffffff0c; box-shadow: 0 7px 22px #0003; }
body.cosmos-site .hero-social-mark, body.cosmos-site .hero-social-link { border-color: #d9ddff2b; background: linear-gradient(145deg, #24283db8, #171b2dc7 52%, #2c2940a8); box-shadow: 0 12px 34px #0005, inset 0 1px 0 #ffffff23; color: #f1f2f6; }
body.cosmos-site .hero-social-mark::after, body.cosmos-site .hero-social-link::after { border-color: #ffffff28; background: linear-gradient(155deg, #ffffff16, transparent 58%, #9eafff12); box-shadow: inset 0 1px 2px #ffffff25; }
body.cosmos-site .hero-social-link::before { background: linear-gradient(112deg, transparent 39%, #ffffff55 47%, #aebaff4d 51%, transparent 61%); }
body.cosmos-site .hero-social-logo { mix-blend-mode: screen; }
body.cosmos-site .hero-social-link:hover { background: linear-gradient(145deg, #34334ecf, #20253bcf 52%, #38304acc); box-shadow: 0 15px 32px #0007, inset 0 1px 0 #ffffff30; }
body.cosmos-site .player-dialog { border-color: #d9ddff36; background: #111522c9; color: #f1f2f6; box-shadow: 0 34px 110px #000b, inset 0 1px 0 #ffffff1a; }
body.cosmos-site .player-dialog::backdrop { background: #03050bc9; }
body.cosmos-site .player-shell { background: linear-gradient(145deg, #20263bd9, #111522ec 48%, #1d1b2ae0); }
body.cosmos-site .player-shell::before { background: radial-gradient(ellipse at 8% 0, #aebaff1c 0, transparent 37%), radial-gradient(ellipse at 100% 100%, #ff667d13 0, transparent 34%); }
body.cosmos-site .player-top, body.cosmos-site .player-caption { color: #f1f2f6; }
body.cosmos-site .player-top .mono, body.cosmos-site .player-caption .mono { color: #aab2c5; }
body.cosmos-site .player-close { border-color: #ffffff2b; background: #ffffff12; color: #f1f2f6; box-shadow: inset 0 1px 0 #ffffff1c; }
body.cosmos-site .player-close:hover { border-color: #ff667d66; background: #ff667d1e; color: #ff91a3; }
body.cosmos-site .player-shell video { border-color: #ffffff24; box-shadow: 0 18px 48px #0008, 0 1px 0 #ffffff1c; }
body.cosmos-site .player-status { color: #ff91a3; }
@media (prefers-reduced-motion: reduce) {
  body.cosmos-site { overflow-y: auto; }
  body.cosmos-site .site-content { visibility: visible; opacity: 1; filter: none; transform: none; }
  body.cosmos-site .cosmos-canvas { display: none; }
  body.cosmos-site .reveal { transform: none; filter: none; opacity: 1; }
}

/* Cinematic pointer response: a quiet focus reticle, moving light, and film-like parallax. */
body.cosmos-site .hero::before { position: absolute; z-index: 1; inset: 0; pointer-events: none; content: ""; background: radial-gradient(ellipse 32% 42% at calc(72% + var(--hero-pointer-x, 0px)) calc(38% + var(--hero-pointer-y, 0px)), #8d84ff20, transparent 78%); transition: background-position .2s ease; }
body.cosmos-site .hero-threads { transform: translate3d(calc(var(--hero-pointer-x, 0px) * -.32), calc(var(--threads-y, 0px) + var(--hero-pointer-y, 0px) * -.32), 0); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
body.cosmos-site .hero-seal { transform: translate3d(calc(var(--hero-pointer-x, 0px) * -.62), calc(var(--seal-y, 0px) + var(--hero-pointer-y, 0px) * -.62), 0); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.cinema-cursor { position: fixed; z-index: 16; top: 0; left: 0; width: 78px; height: 78px; display: none; align-items: center; justify-content: center; pointer-events: none; opacity: 0; color: #eef0ff; mix-blend-mode: screen; transition: opacity .22s ease; will-change: transform; }
.cinema-cursor.is-visible { opacity: .82; }
.cursor-frame { position: absolute; inset: 10px; border: 1px solid #d6dcff87; border-radius: 50%; box-shadow: 0 0 23px #8f9eff24, inset 0 0 18px #8f9eff11; transition: transform .25s, border-color .25s; }
.cursor-frame::before, .cursor-frame::after { position: absolute; inset: 6px; border: 1px dashed #c7ceff40; border-radius: 50%; content: ""; animation: reticle-turn 22s linear infinite; }
.cursor-frame::after { inset: 15px; border-style: solid; border-color: #ff82934b; border-left-color: transparent; animation-duration: 9s; animation-direction: reverse; }
.cursor-frame i { position: absolute; z-index: 2; width: 6px; height: 6px; border: 1px solid #ff9eaa; background: #ff667d; box-shadow: 0 0 9px #ff667d; }
.cursor-frame i:nth-child(1) { top: -3px; left: calc(50% - 3px); }
.cursor-frame i:nth-child(2) { top: calc(50% - 3px); right: -3px; }
.cursor-frame i:nth-child(3) { bottom: -3px; left: calc(50% - 3px); }
.cursor-frame i:nth-child(4) { top: calc(50% - 3px); left: -3px; }
.cursor-core { position: relative; z-index: 2; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 15px 5px #a2aaff85; }
.cursor-label { position: absolute; bottom: -3px; left: 50%; color: #c4c9df; font-size: 6px; letter-spacing: .14em; white-space: nowrap; transform: translateX(-50%); }
.cinema-cursor.is-interactive .cursor-frame { transform: scale(.72); border-color: #ff95a3c9; }
@keyframes reticle-turn { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) { .cinema-cursor { display: flex; } }
@media (max-width: 600px) {
  body.cosmos-site .hero-seal { transform: translate3d(0, var(--seal-y, 0px), 0); }
  body.cosmos-site .hero-threads { transform: translateY(var(--threads-y, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-cursor { display: none; }
  .cursor-frame::before, .cursor-frame::after { animation: none; }
  body.cosmos-site .hero-seal, body.cosmos-site .hero-threads { transition: none; transform: none; }
}

/* Studio application catalog */
.tools-page { min-height: 100vh; overflow-x: clip; background: var(--paper, #f8f8f5); }
.tools-main { position: relative; min-height: calc(100vh - 100px); padding: 122px 7vw 100px; overflow: hidden; }
.tools-main::before { position: absolute; inset: 0; z-index: 0; content: ""; pointer-events: none; background: radial-gradient(ellipse at 76% 22%, #dce5f55c, transparent 32%), radial-gradient(ellipse at 4% 69%, #e4e7df58, transparent 34%); }
.tools-main-inner { position: relative; z-index: 1; width: min(1120px, 100%); margin: 0 auto; }
.tools-intro { position: relative; min-height: 440px; display: flex; align-items: center; padding: 28px 4.5vw 64px; border-bottom: 1px solid #17171720; }
.tools-intro-copy { position: relative; z-index: 2; max-width: 620px; }
.tools-kicker { display: flex; align-items: center; gap: 10px; color: #66665f; font-size: 10px; letter-spacing: .12em; }
.tools-kicker .signal { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px #df35381a; }
.tools-intro h1 { margin: 32px 0 20px; font-size: clamp(58px, 9vw, 112px); line-height: .98; letter-spacing: -.075em; }
.tools-intro h1 em { color: #777871; font-style: normal; font-weight: 400; }
.tools-intro-note { color: #686963; font-size: 15px; line-height: 2; }
.tools-intro-art { position: absolute; top: 50%; right: 3%; width: min(38vw, 390px); aspect-ratio: 1; transform: translateY(-50%); }
.tools-icon-blue, .tools-icon-black { position: absolute; z-index: 2; top: 50%; left: 50%; width: 58%; border: 1px solid #ffffffc7; border-radius: 26%; box-shadow: 0 25px 80px #17171724, inset 0 1px 0 #fff; object-fit: cover; transform: translate(-50%, -50%) rotate(-8deg); }
.tools-icon-black { z-index: 1; width: 46%; transform: translate(-4%, -65%) rotate(9deg); opacity: .9; filter: drop-shadow(0 14px 28px #17171724); }
.tools-art-orbit { position: absolute; top: 50%; left: 50%; width: 90%; aspect-ratio: 1; border: 1px solid #17171720; border-radius: 50%; transform: translate(-50%, -50%); }
.tools-art-orbit::after { position: absolute; top: 10%; left: 18%; width: 8px; height: 8px; border-radius: 50%; background: var(--red); content: ""; }
.tools-art-orbit-b { width: 112%; border-style: dashed; animation: tool-orbit 30s linear infinite; }
.tools-art-orbit-b::after { top: auto; right: 12%; bottom: 23%; left: auto; width: 5px; height: 5px; background: #171717; }
.tools-intro-coordinate { position: absolute; right: 4.5vw; bottom: 24px; color: #777871; font-size: 8px; letter-spacing: .15em; }
.tools-releases { padding: 48px 4.5vw 0; }
.tools-releases .section-top { margin-bottom: 26px; }
.tool-release-card { overflow: hidden; border: 1px solid #fff; border-radius: 28px; background: linear-gradient(145deg, #ffffffb8, #ffffff75 48%, #e9edf27a); box-shadow: 0 24px 70px #1717170b, inset 0 1px 0 #fff; backdrop-filter: blur(24px) saturate(1.35); -webkit-backdrop-filter: blur(24px) saturate(1.35); }
.tool-release-top { display: flex; justify-content: space-between; gap: 20px; padding: 18px 24px; border-bottom: 1px solid #17171712; color: #767770; font-size: 8px; letter-spacing: .13em; }
.tool-release-body { display: grid; grid-template-columns: 138px minmax(0, 1fr) minmax(165px, 190px); align-items: center; gap: 27px; padding: 40px 40px 34px; }
.tool-release-icon { overflow: hidden; width: 138px; aspect-ratio: 1; border: 1px solid #ffffff; border-radius: 30px; box-shadow: 0 14px 40px #15132627, inset 0 1px 0 #fff; }
.tool-release-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tool-release-kicker { margin: 0 0 7px; color: #777871; font-size: 9px; letter-spacing: .1em; }
.tool-release-copy h2 { margin: 0; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.06em; }
.tool-release-tagline { margin: 12px 0 20px; color: #5d5e59; font-size: 15px; line-height: 1.8; }
.tool-release-meta { display: flex; flex-wrap: wrap; gap: 9px 22px; color: #81827b; font-size: 8px; letter-spacing: .1em; }
.tool-release-bottom { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 28px 24px; border-top: 1px solid #17171712; background: #ffffff62; }
.tool-install-note { display: grid; gap: 7px; margin: 0; color: #72736d; font-size: 12px; }
.tool-install-note .mono { color: var(--red); font-size: 8px; letter-spacing: .12em; }
.tool-install-note strong { color: #42433f; font-weight: 500; }
.tool-download-button { position: relative; min-height: 86px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 15px 37px 15px 17px; border: 1px solid #171717; border-radius: 20px; background: #171717; color: #fff; text-decoration: none; transition: transform .25s, box-shadow .25s, background .25s; }
.tool-download-main { display: inline-flex; align-items: center; gap: 9px; }
.tool-download-main svg { width: 18px; height: 18px; fill: currentColor; }
.tool-download-main strong { font-size: 13px; font-weight: 600; white-space: nowrap; }
.tool-download-sub { color: #ffffffa6; font: 8px var(--mono); letter-spacing: .06em; white-space: nowrap; }
.tool-download-button b { position: absolute; top: 50%; right: 14px; color: #fff; font: 400 19px var(--sans); transform: translateY(-50%); }
.tool-download-button:hover { background: #df3538; border-color: #df3538; box-shadow: 0 12px 30px #df35382c; transform: translateY(-2px); }
.tool-download-button:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.tools-footnote { margin: 24px 2px 0; color: #85867f; font-size: 8px; letter-spacing: .12em; text-align: right; }
.tools-footer { position: relative; }
@keyframes tool-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (max-width: 700px) {
  .tools-main { padding: 94px 5vw 64px; }
  .tools-intro { min-height: 680px; align-items: flex-start; padding: 58px 4vw 0; }
  .tools-intro h1 { margin-top: 27px; font-size: clamp(54px, 13vw, 82px); }
  .tools-intro-note { font-size: 13px; }
  .tools-intro-art { top: auto; right: 50%; bottom: 23px; width: min(70vw, 330px); transform: translateX(50%); }
  .tools-intro-coordinate { right: 4vw; bottom: 13px; font-size: 7px; }
  .tools-releases { padding: 34px 0 0; }
  .tool-release-top { padding: 15px 17px; font-size: 7px; }
  .tool-release-body { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 24px 18px; }
  .tool-release-icon { width: 76px; border-radius: 20px; }
  .tool-release-copy h2 { font-size: 34px; }
  .tool-release-tagline { margin: 9px 0 15px; font-size: 12px; }
  .tool-release-meta { font-size: 7px; }
  .tool-download-button { grid-column: 1 / -1; min-height: 58px; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 40px 10px 15px; border-radius: 17px; }
  .tool-download-sub { margin-left: auto; }
  .tool-release-bottom { align-items: stretch; flex-direction: column; padding: 18px; }
  .tool-download-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .tools-art-orbit-b { animation: none; } }

/* Cross-page transitions keep navigation fluid between the studio and its tools. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: studio-header; }
::view-transition-old(root) { animation: route-exit .42s cubic-bezier(.7, 0, .84, 0) both; }
::view-transition-new(root) { animation: route-enter .7s cubic-bezier(.16, 1, .3, 1) both; }
::view-transition-old(studio-header), ::view-transition-new(studio-header) { animation-duration: .7s; }
@keyframes route-exit { to { opacity: 0; filter: blur(9px); transform: scale(.985) translateY(-8px); } }
@keyframes route-enter { from { opacity: 0; filter: blur(12px); transform: scale(1.012) translateY(16px); } to { opacity: 1; filter: blur(0); transform: none; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-old(studio-header), ::view-transition-new(studio-header) { animation: none; }
}

/* Immersive encounter / deep-space palette */
:root {
  --paper: #080b14;
  --white: #111724;
  --ink: #f1f2f6;
  --muted: #a0a8bc;
  --line: rgba(219, 226, 255, .16);
  --red: #ff667d;
  --space-blue: #9eafff;
  --space-glow: #7772f0;
}
html, body { background: #080b14; color: var(--ink); }
body { background: radial-gradient(ellipse at 50% -10%, #151933 0, #080b14 50%, #070910 100%); }
body.cosmos-site { overflow-x: hidden; overflow-y: auto; }
.site-content { position: relative; min-height: 100vh; isolation: isolate; visibility: visible; opacity: 1; filter: none; transform: none; transition: none; }
.cosmos-canvas { position: fixed; z-index: -1; inset: 0; display: block; pointer-events: none; }
.grain { opacity: .035; mix-blend-mode: screen; }
.site-header { border: 1px solid #ffffff19; background: #101522bd; box-shadow: 0 14px 44px #0004, inset 0 1px 0 #ffffff16; backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }
.brand-lockup small, .header-counter { color: #a6aec0; }
.site-nav > a, .nav-motto { color: #c3c9d8; }
.site-nav > a i { color: #798196; }
.site-nav > a:hover, .site-nav > a.active { color: #fff; }
.site-nav > a:hover, .site-nav > a.active { border-color: #ffffff20; background: #ffffff0c; box-shadow: 0 7px 22px #0003; }
.site-nav > a.active i, .hero-next b, .hero-edge i, .hero-stop, .seal-cross { color: var(--red); }
.hero { height: min(940px, 100svh); min-height: 760px; padding-top: 100px; background: radial-gradient(ellipse at 75% 41%, #29244c 0, #15162e 20%, #0a0d19 53%, #080b14 78%); }
.hero::after { z-index: 2; background: linear-gradient(90deg, #080b14ef 0%, #080b14d9 31%, #080b1460 54%, #080b1412 82%), linear-gradient(0deg, #080b14 0%, #080b143b 18%, transparent 42%); }
.hero-grid { z-index: 0; opacity: .13; background-image: linear-gradient(#aebaff16 1px, transparent 1px), linear-gradient(90deg, #aebaff16 1px, transparent 1px); }
.hero-threads { z-index: 3; opacity: .46; }
.hero-threads path { stroke: #c8d1f53d; }
.hero-threads path.thread-red { stroke: #ff8290ad; }
.hero-cosmic-index { position: absolute; top: 112px; right: 5.2vw; z-index: 4; color: #a8afc2; font-size: 7px; letter-spacing: .18em; }
.hero-topline { z-index: 4; color: #a8afc2; }
.hero-copy { z-index: 4; max-width: 800px; margin-bottom: 110px; }
.hero-kicker { color: #b1b9cb; }
.hero h1 { max-width: 800px; margin: 0 0 34px; font-size: clamp(65px, 10vw, 156px); letter-spacing: -.095em; line-height: .99; }
.hero h1 > span { color: #f4f3f7; }
.hero h1 em { color: transparent; background: linear-gradient(100deg, #bcc7ff, #8c94e8 52%, #e9a8c1); background-clip: text; -webkit-background-clip: text; -webkit-text-stroke: 0; }
.hero-stop { color: var(--red); }
.hero-summary p { color: #c3c8d5; }
.hero-summary strong { color: #fff; }
.summary-index { min-width: 125px; }
.hero-seal { z-index: 4; top: 23%; right: 13%; width: min(31vw, 410px); height: min(31vw, 410px); }
.seal-orbit { border-color: #c5caff44; box-shadow: 0 0 22px #8277ff12; }
.orbit-a { border-color: #ccd0ff38; }
.orbit-b { border-color: #ff7b967c; }
.seal-logo { filter: drop-shadow(0 0 28px #d9d4ff32); }
.seal-caption, .hero-next, .hero-edge, .hero-coordinate { color: #aab2c5; }
.hero-next { z-index: 5; }
.hero-star-hint { position: absolute; z-index: 5; right: 5.2vw; bottom: 54px; color: #c1c7d8; font-size: 7px; }
.hero-star-hint i, .encounter-kicker span, .star-message-kicker i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #ff809d; box-shadow: 0 0 13px #ff809d; }
.hero-social-mark, .hero-social-link { border-color: #d4d9ff35; background: linear-gradient(145deg, #747aa13d, #242a4659 48%, #8a71963b); box-shadow: 0 12px 34px #0004, inset 0 1px 0 #ffffff44; color: #f5f3ff; }
.hero-social-logo { mix-blend-mode: screen; }
.hero-social-link::after, .hero-social-mark::after { border-color: #ffffff30; background: linear-gradient(145deg, #ffffff1a, transparent 48%, #b5a4ff15); box-shadow: inset 0 1px 2px #ffffff46; }
.hero-social-link:hover { background: linear-gradient(145deg, #8e8bb354, #45406383 48%, #a475a556); }
.section-pad { position: relative; }
.about { border-color: var(--line); background: linear-gradient(145deg, #111522e8, #0c101beb); }
.section-top, .title-vertical, .title-ruler, .about-bottom, .about-signature small, .signature-year { color: #98a1b5; }
.about-body p { color: #b5bdce; }
.about-body p.about-lead { color: #f2f1f7; }
.about-signature { border-color: var(--line); }
.motto-art { background: transparent; }
.work { background: linear-gradient(180deg, #080b14d9, #0b0f1bdd); }
.work-heading h2 em, .work-heading p { color: #a9b1c2; }
.work-poster { border-color: #cad1f044; background: radial-gradient(ellipse at 65% 38%, #ce9bb228 0, transparent 29%), linear-gradient(140deg, #171b2b, #0d1120 57%, #202037); }
.work-poster::before { background: linear-gradient(115deg, transparent 20%, #ffffff24 44%, transparent 67%); }
.work-poster::after { border-color: #cad1f026; }
.poster-frame.is-ready { opacity: .78; }
.poster-grid { opacity: .12; background-image: linear-gradient(#d8dcff25 1px, transparent 1px), linear-gradient(90deg, #d8dcff25 1px, transparent 1px); }
.poster-orbit { border-color: #c4c8f945; }
.poster-orbit-two { border-color: #ff84956c; }
.poster-cross { color: #e1e2ff; }
.poster-number, .poster-play span, .poster-bottom, .work-description, .work-arrow, .work-credits { color: #b1b9c9; }
.poster-title { color: #f5f3f8; text-shadow: 0 2px 24px #080b14c7; }
.poster-bottom { border-color: #e3e5ff42; }
.next-work { border-color: #cbd1f426; background: linear-gradient(145deg, #171c2acc, #0f1320d9); color: #abb3c6; box-shadow: 0 20px 60px #0003, inset 0 1px 0 #ffffff10; }
.next-work p { color: #e1e2eb; }
.next-coordinate { color: #7f899f; }
.services { background: linear-gradient(180deg, #0b0f1bdd, #111321ed); }
.services-intro p { color: #adb5c8; }
.service-card { border-color: #d1d7f024; background: linear-gradient(145deg, #ffffff0d, #a7b5ff08); color: #f2f1f7; box-shadow: 0 18px 50px #0002, inset 0 1px 0 #ffffff12; }
.service-card-top, .service-card-action { color: #b4bdd1; }
.service-card-description { color: #aab3c5; }
.service-card:hover { border-color: #c5b8ff6b; background: linear-gradient(145deg, #9e91ff1c, #ff8dac0b); box-shadow: 0 25px 70px #0004, 0 0 40px #807aff14; }
.join { background: radial-gradient(ellipse at 77% 60%, #43305b80, transparent 38%), linear-gradient(125deg, #141427, #090c17 64%); }
.join-content { position: relative; z-index: 2; }
.join-content h2 { color: #f1f1f6; }
.join-watermark { color: #dcd9f607; }
.join::before, .join::after { border-color: #bec5fd20; }
.contact { border-color: var(--line); background: radial-gradient(ellipse at 80% 55%, #30294b7a, transparent 45%), #0c101cf0; }
.contact h2 em { -webkit-text-stroke-color: #d7d1fb; }
.contact-copy { color: #b3bbcd; }
.contact-handle { border-color: #d7d8f34a; }
.contact-handle strong { color: #f4f2f8; }
.contact-handle b, .contact-card-wrap > .mono { color: #a2abc0; }
.contact-card { border-color: #f4f1ff40; box-shadow: 0 18px 70px #0008; }
.contact-orbit, .contact-orbit::before, .contact-orbit::after, .contact-orbit span, .contact-orbit i { border-color: #c6cafd1f; }
.contact-orbit::after { border-color: #ff81943a; border-right-color: transparent; }
.contact-orbit b { color: #e3ddff09; }
.site-footer { border-color: var(--line); background: #080b14; }
.footer-brand span, .site-footer p, .back-top { color: #9aa3b8; }
.star-message { position: fixed; z-index: 18; width: min(340px, calc(100vw - 32px)); padding: 14px 17px 16px; border: 1px solid #c9d1ff35; border-radius: 17px 17px 17px 5px; background: linear-gradient(145deg, #25233dbf, #111827d9); box-shadow: 0 20px 64px #0008, inset 0 1px 0 #ffffff22; color: #f3f2fa; opacity: 0; pointer-events: none; backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); transform: translate(-50%, calc(-100% + 12px)) scale(.94); transition: opacity .35s, transform .5s cubic-bezier(.16,1,.3,1); }
.star-message.is-visible { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }
.star-message-kicker { color: #b9c2e3; font-size: 7px; }
.star-message-kicker i { width: 5px; height: 5px; }
.star-message p { margin: 8px 0 0; font-size: 13px; line-height: 1.7; }
.encounter-story { position: relative; min-height: 590px; display: grid; place-items: center; overflow: hidden; padding: 100px 11vw; border-top: 1px solid #cbd1f018; border-bottom: 1px solid #cbd1f018; background: radial-gradient(ellipse at 50% 51%, #322e5694 0, #13172ae6 29%, #080b14f5 72%); }
.encounter-story-copy { position: relative; z-index: 2; max-width: 740px; text-align: center; }
.encounter-kicker { color: #c1c7da; font-size: 8px; letter-spacing: .16em; }
.encounter-story h2 { margin: 31px 0 19px; color: #f2f1f7; font-size: clamp(44px, 7.5vw, 91px); font-weight: 600; letter-spacing: -.08em; line-height: 1.2; }
.encounter-story h2 em { color: transparent; background: linear-gradient(100deg, #c4ceff, #a399f5 52%, #f1a5bf); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.encounter-story-copy > p:not(.encounter-kicker) { color: #b6bed0; font-size: 12px; line-height: 2.1; }
.encounter-link { display: inline-flex; gap: 13px; align-items: center; margin-top: 19px; color: #d9d7e9; font-size: 8px; }
.encounter-link b { color: var(--red); font: 400 16px var(--sans); transition: transform .25s; }
.encounter-link:hover b { transform: translate(3px, 3px); }
.encounter-orbit { position: absolute; top: 50%; left: 50%; width: min(55vw, 680px); aspect-ratio: 1; border: 1px solid #bec5fd20; border-radius: 50%; transform: translate(-50%, -50%) rotate(-20deg); }
.encounter-orbit-one { width: min(69vw, 840px); border-style: dashed; animation: encounter-orbit 70s linear infinite; }
.encounter-orbit-two { width: min(42vw, 510px); border-color: #ff809332; transform: translate(-50%, -50%) rotate(40deg) scaleY(.42); }
.encounter-mark { position: absolute; top: 50%; left: 50%; width: min(55vw, 680px); height: 140px; display: flex; align-items: center; justify-content: space-between; color: #bbc3df69; font: 8px var(--mono); letter-spacing: .18em; transform: translate(-50%, -50%) rotate(-20deg); }
.encounter-mark i { position: absolute; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, #d9c9ff45, #ff859d77, transparent); }
.encounter-dot { position: absolute; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 28px 8px #c3b6ff85; transform: translateX(-50%); }
.player-dialog, .service-dialog { border-color: #d8d6ff45; background: #121728e8; color: #f1f2f6; box-shadow: 0 34px 120px #000a, inset 0 1px 0 #ffffff20; }
.player-dialog::backdrop, .service-dialog::backdrop { background: #02040bbd; backdrop-filter: blur(16px) saturate(1.2); }
.player-shell, .service-dialog-shell { background: linear-gradient(145deg, #242b41e8, #141927ed 54%, #242039df); }
.player-top, .player-dialog .player-caption, .service-dialog-top, .service-dialog-copy { color: #e0e2ef; }
.player-caption .mono, .service-dialog-copy { color: #b8bfd0; }
.player-close, .service-dialog-close { border-color: #ffffff25; background: #ffffff10; color: #f1f2f6; }
.service-contact-item { border-color: #ffffff21; background: #ffffff08; color: #f1f2f6; }
.service-contact-item > span { color: #aeb8cf; }
.tools-page { --paper: #080b14; --ink: #f1f2f6; --line: rgba(219,226,255,.16); background: radial-gradient(ellipse at 70% 12%, #222142 0, #0b0e19 38%, #080b14 78%); color: #f1f2f6; }
.tools-page .site-header { border-color: #ffffff24; background: #101522d9; box-shadow: 0 14px 44px #0004, inset 0 1px 0 #ffffff16; }
.tools-page .brand-lockup small, .tools-page .header-counter { color: #a6aec0; }
.tools-page .site-nav > a, .tools-page .nav-motto { color: #c3c9d8; }
.tools-page .site-nav > a i { color: #798196; }
.tools-page .site-nav > a:hover, .tools-page .site-nav > a.active { color: #fff; border-color: #ffffff20; background: #ffffff0c; box-shadow: 0 7px 22px #0003; }
.tools-page .menu-toggle span { background: #f1f2f6; }
.tools-page .tools-main::before { background: radial-gradient(ellipse at 76% 22%, #7772f03a, transparent 34%), radial-gradient(ellipse at 4% 69%, #8d8ab333, transparent 36%); }
.tools-page .tools-kicker, .tools-page .tools-intro-note { color: #b3bbcd; }
.tools-page .tools-intro h1 em { color: #aeb5ca; }
.tools-page .tools-intro-coordinate { color: #a7afc3; }
.tools-page .section-top, .tools-page .tool-release-top { color: #a3adc1; border-color: #d2d8f322; }
.tools-page .tool-release-card { border-color: #d7ddff29; background: linear-gradient(145deg, #1c2234e8, #101522ed 48%, #171629ed); box-shadow: 0 24px 70px #0004, inset 0 1px 0 #ffffff17; }
.tools-page .tool-release-bottom { border-color: #d2d8f322; background: #ffffff06; }
.tools-page .tool-release-kicker, .tools-page .tool-release-meta, .tools-page .tools-footnote { color: #a3adc1; }
.tools-page .tool-release-tagline { color: #c2c8d7; }
.tools-page .tool-install-note { color: #aeb6c9; }
.tools-page .tool-install-note strong { color: #eef0f7; }
.tools-page .tool-download-button { border-color: #c4bcff69; background: linear-gradient(135deg, #d2ceff, #a69aff); color: #141528; box-shadow: 0 12px 34px #7164cc35; }
.tools-page .tool-download-sub { color: #282344b5; }
.tools-page .tool-download-button b { color: #24203d; }
.tools-page .tool-download-button:hover { border-color: #ff7189; background: linear-gradient(135deg, #ffb4bf, #ff7189); color: #1a1019; }
@keyframes encounter-orbit { to { transform: translate(-50%, -50%) rotate(340deg); } }
@media (max-width: 850px) {
  .hero-copy { max-width: 65vw; }
  .hero-seal { right: 6%; }
  .hero-star-hint { bottom: 46px; }
}
@media (max-width: 600px) {
  .site-header { border-color: #ffffff24; background: #101522e8; }
  .site-nav { border-color: #ffffff22; background: #111625f5; }
  .tools-page .site-header { border-color: #ffffff24; background: #101522e8; }
  .tools-page .site-nav { border-color: #ffffff22; background: #111625f5; }
  .site-nav > a, .nav-motto { color: #e1e4ef; }
  .menu-toggle span { background: #f1f2f6; }
  .hero { min-height: 720px; padding: 84px 6vw 47px; }
  .hero-cosmic-index { top: 94px; right: 6vw; font-size: 5px; }
  .hero::after { background: linear-gradient(90deg, #080b14ed 0%, #080b14cb 53%, #080b1451), linear-gradient(0deg, #080b14 0%, #080b1424 21%, transparent 43%); }
  .hero-threads { top: 16%; right: -39%; width: 130%; height: 73%; opacity: .45; }
  .hero-grid { inset: 0 0 0 26%; }
  .hero-copy { max-width: 100%; margin: auto 0 114px; }
  .hero-kicker { max-width: 90%; margin-bottom: 20px; font-size: 6px; }
  .hero h1 { max-width: 100%; margin-bottom: 29px; font-size: clamp(57px, 14vw, 84px); letter-spacing: -.09em; line-height: 1.05; }
  .hero-summary { gap: 11px; }
  .summary-index { min-width: 82px; font-size: 6px; }
  .hero-summary p { font-size: 10px; line-height: 1.9; }
  .hero-summary strong { font-size: 10px; }
  .hero-seal { top: 19%; right: 5%; width: 49vw; height: 49vw; opacity: .73; }
  .hero-social { right: auto; bottom: 6.5%; left: 50%; transform: translateX(-50%); }
  .hero-star-hint { right: 6vw; bottom: 48px; left: 6vw; text-align: left; font-size: 6px; }
  .hero-coordinate { bottom: 48px; font-size: 5px; }
  .encounter-story { min-height: 540px; padding: 72px 7vw; }
  .encounter-story h2 { font-size: clamp(39px, 10vw, 58px); }
  .encounter-story-copy > p:not(.encounter-kicker) { font-size: 10px; }
  .encounter-orbit-one { width: 112vw; }
  .encounter-orbit-two { width: 68vw; }
  .encounter-mark { width: 86vw; height: 110px; font-size: 6px; }
  .star-message { width: min(310px, calc(100vw - 28px)); }
  .star-message p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .encounter-orbit-one { animation: none; }
  .orbit-a { animation: none; }
}

/* Services and collaboration sections. */
.services { padding-top: 106px; padding-bottom: 112px; border-top: 1px solid var(--line); background: radial-gradient(ellipse at 78% 22%, #eeeeea 0, transparent 34%), var(--paper); }
.services-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin: 54px 0 38px; }
.services-intro h2 { margin: 0; font-size: clamp(55px, 8vw, 102px); font-weight: 600; letter-spacing: -.105em; line-height: .98; }
.services-intro h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--ink); }
.services-intro > p { margin: 0 0 7px; color: #666660; font-size: 11px; line-height: 2; }
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.service-card { position: relative; min-height: 255px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; padding: 27px 29px 24px; border: 1px solid #ffffff; background: #ffffff8c; box-shadow: 0 16px 42px #17171708, inset 0 1px 0 #fff; text-align: left; cursor: pointer; backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .35s; }
.service-card::after { position: absolute; top: 0; left: -65%; width: 35%; height: 100%; content: ""; pointer-events: none; background: linear-gradient(100deg, transparent, #ffffffb8, transparent); transform: skewX(-16deg); transition: left .8s cubic-bezier(.2,.7,.2,1); }
.service-card:hover { transform: translateY(-5px); background: #ffffffc9; box-shadow: 0 25px 56px #17171712, inset 0 1px 0 #fff; }
.service-card:hover::after { left: 135%; }
.service-card:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.service-card-top { width: 100%; display: flex; align-items: center; justify-content: space-between; color: #777771; }
.service-card-top .mono { font-size: 7px; }
.service-card-top b { color: var(--red); font: 300 20px var(--sans); transition: transform .25s; }
.service-card:hover .service-card-top b { transform: translate(3px, -3px); }
.service-card-title { margin: 32px 0 10px; font-size: clamp(28px, 4vw, 42px); font-weight: 500; letter-spacing: -.07em; }
.service-card-description { max-width: 440px; color: #666660; font-size: 11px; line-height: 2; }
.service-card-action { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 23px; color: var(--red); font-size: 7px; }
.service-card-action::after { width: 36px; height: 1px; background: currentColor; content: ""; transition: width .25s; }
.service-card:hover .service-card-action::after { width: 58px; }

.join { position: relative; min-height: 570px; overflow: hidden; border-top: 1px solid var(--line); background: #f1f1ec; }
.join::before, .join::after { position: absolute; right: 10%; bottom: -39%; width: min(57vw, 680px); aspect-ratio: 1; border: 1px solid #17171712; border-radius: 50%; content: ""; pointer-events: none; }
.join::after { right: 17%; bottom: -33%; border-color: #df35382b; }
.join-content { position: relative; z-index: 1; max-width: 920px; padding: 82px 0 88px 4%; }
.join-kicker { margin: 0 0 20px; color: var(--red); font-size: 7px; }
.join-content h2 { margin: 0; font-size: clamp(38px, 6.6vw, 84px); font-weight: 500; letter-spacing: -.09em; line-height: 1.18; }
.join-content h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--ink); }
.join-contact { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; margin-top: 31px; padding: 0 18px; border: 1px solid #ffffff; border-radius: 999px; background: #ffffffa0; box-shadow: 0 8px 28px #1717170a, inset 0 1px 0 #fff; font-size: 10px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .25s, box-shadow .25s, background .25s; }
.join-contact b { color: var(--red); font: 400 13px var(--sans); }
.join-contact:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 14px 34px #17171714, inset 0 1px 0 #fff; }
.join-watermark { position: absolute; right: 3%; bottom: -12%; color: #17171705; font-size: clamp(120px, 25vw, 340px); font-weight: 800; letter-spacing: -.16em; line-height: 1; white-space: nowrap; pointer-events: none; }

.service-dialog { width: min(520px, 92vw); padding: 0; border: 1px solid #ffffffd9; border-radius: 27px; background: #f3f4f0d9; color: var(--ink); box-shadow: 0 34px 110px #17171735, inset 0 1px 0 #fff; backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); }
.service-dialog::backdrop { background: #17171766; backdrop-filter: blur(10px) saturate(1.15); }
.service-dialog-shell { position: relative; overflow: hidden; padding: 24px; border-radius: inherit; background: linear-gradient(145deg, #ffffffb8, #f1f3efb8 54%, #ffffff7d); }
.service-dialog-shell::before { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 8% 0, #fff9, transparent 40%), radial-gradient(ellipse at 100% 100%, #df353817, transparent 36%); content: ""; pointer-events: none; }
.service-dialog-top, .service-dialog-kicker, .service-dialog-shell h2, .service-dialog-copy, .service-contact-list { position: relative; z-index: 1; }
.service-dialog-top { display: flex; align-items: center; justify-content: space-between; color: #666660; font-size: 8px; }
.service-dialog-close { width: 32px; height: 32px; border: 1px solid #fff; border-radius: 50%; background: #ffffff90; box-shadow: 0 5px 18px #1717170c, inset 0 1px 0 #fff; font-size: 21px; line-height: 1; cursor: pointer; transition: transform .25s, color .25s; }
.service-dialog-close:hover { color: var(--red); transform: rotate(90deg); }
.service-dialog-kicker { margin: 30px 0 10px; color: var(--red); font-size: 7px; }
.service-dialog-shell h2 { margin: 0; font-size: clamp(36px, 8vw, 48px); font-weight: 500; letter-spacing: -.08em; }
.service-dialog-copy { margin: 12px 0 25px; color: #666660; font-size: 11px; line-height: 1.9; }
.service-contact-list { display: grid; gap: 9px; }
.service-contact-item { width: 100%; min-height: 54px; display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid #ffffff; border-radius: 14px; background: #ffffffa6; box-shadow: 0 7px 20px #17171708, inset 0 1px 0 #fff; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .2s, background .2s; }
.service-contact-item:hover { transform: translateY(-1px); background: #fff; }
.service-contact-item > span { color: #777771; font-size: 7px; }
.service-contact-item strong { min-width: 0; overflow-wrap: anywhere; font: 500 11px var(--sans); text-align: right; }
.service-contact-item b { color: var(--red); font: 400 8px var(--mono); white-space: nowrap; }

@media (max-width: 1100px) {
  .site-header { padding-inline: 22px; }
  .site-nav { gap: 16px; margin-right: 18px; }
  .site-nav > a { font-size: 10px; }
  .header-counter { display: none; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .services { padding-top: 88px; padding-bottom: 92px; }
  .services-intro h2 { font-size: clamp(52px, 9vw, 82px); }
  .join-content { max-width: 100%; }
}
@media (max-width: 600px) {
  .site-nav { gap: 20px; margin-right: 0; }
  .services { padding-top: 72px; padding-bottom: 76px; }
  .services-intro { display: block; margin: 37px 0 26px; }
  .services-intro h2 { font-size: clamp(52px, 15vw, 74px); }
  .services-intro > p { margin-top: 17px; font-size: 10px; }
  .services-grid { grid-template-columns: 1fr; gap: 12px; }
  .service-card { min-height: 218px; padding: 22px; }
  .service-card-title { margin-top: 25px; font-size: 32px; }
  .service-card-description { font-size: 10px; }
  .service-card-action { padding-top: 18px; }
  .join { min-height: 490px; }
  .join-content { padding: 64px 0 72px; }
  .join-content h2 { font-size: clamp(34px, 9vw, 55px); line-height: 1.3; }
  .join-kicker { font-size: 6px; }
  .join-contact { margin-top: 24px; }
  .join::before { right: -35%; bottom: -18%; width: 92vw; }
  .join::after { right: -26%; bottom: -14%; width: 82vw; }
  .join-watermark { right: -8%; bottom: -5%; font-size: 27vw; }
  .service-dialog { border-radius: 22px; }
  .service-dialog-shell { padding: 18px; }
  .service-dialog-kicker { margin-top: 24px; }
  .service-contact-item { grid-template-columns: 66px minmax(0, 1fr) auto; gap: 6px; padding: 0 10px; }
  .service-contact-item > span { font-size: 6px; }
  .service-contact-item strong { font-size: 10px; }
  .service-contact-item b { font-size: 7px; }
  .contact { min-height: 0; padding-bottom: 72px; }
  .contact-card-wrap { position: relative; top: auto; right: auto; bottom: auto; width: min(100%, 440px); max-width: none; margin: 36px auto 0; transform: none; text-align: center; }
  .contact-card-wrap.reveal { transform: translateY(-34px) scale(.98); }
  .contact-card-wrap.reveal.is-visible { transform: none; }
  .contact-card-wrap > .mono { margin-top: 10px; }
  .contact-orbit { top: 14%; right: -41%; opacity: .2; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card, .service-card::after, .service-card-top b, .service-card-action::after, .join-contact, .service-contact-item, .service-dialog-close { transition: none !important; }
}

/* Liquid-glass welcome and stronger editorial motion. */
body:not(.site-entered) { overflow: hidden; }
.site-content {
  visibility: hidden;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(24px) scale(.985);
  transform-origin: 50% 0;
  transition: opacity 1s cubic-bezier(.16,1,.3,1), filter 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1), visibility 0s linear 1.1s;
}
body.site-entered .site-content {
  visibility: visible;
  opacity: 1;
  filter: none;
  transform: none;
  transition-delay: 0s;
}

.entry-screen {
  --entry-shift-x: 0px;
  --entry-shift-y: 0px;
  --entry-reverse-x: 0px;
  --entry-reverse-y: 0px;
  --entry-tilt-x: 0deg;
  --entry-tilt-y: 0deg;
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  background: #f5f5f1;
  cursor: pointer;
  transition: opacity .85s cubic-bezier(.7,0,.2,1), filter 1s cubic-bezier(.7,0,.2,1), transform 1s cubic-bezier(.7,0,.2,1);
}
.entry-screen::before, .entry-screen::after { position: absolute; z-index: -1; inset: 0; pointer-events: none; content: ""; }
.entry-screen::before {
  background:
    radial-gradient(ellipse at calc(75% + var(--entry-shift-x)) calc(28% + var(--entry-shift-y)), #ffffff 0, #ffffff00 33%),
    radial-gradient(ellipse at calc(15% + var(--entry-reverse-x)) calc(85% + var(--entry-reverse-y)), #df35381b 0, #df353800 36%),
    linear-gradient(135deg, #f0f0ec, #fafaf7 50%, #eeefeb);
  transition: background-position .4s ease;
}
.entry-screen::after {
  opacity: .22;
  background-image: linear-gradient(#17171712 1px, transparent 1px), linear-gradient(90deg, #17171712 1px, transparent 1px);
  background-size: 9vw 9vw;
  mask-image: radial-gradient(ellipse at center, #000 0, transparent 77%);
}
.entry-lines { position: absolute; z-index: -1; inset: -25%; opacity: .54; pointer-events: none; background: repeating-linear-gradient(118deg, transparent 0 10.4vw, #fff8 10.45vw 10.52vw, transparent 10.58vw 18vw); transform: translate3d(var(--entry-reverse-x), var(--entry-reverse-y), 0) rotate(-12deg); animation: entry-lines-drift 16s ease-in-out infinite alternate; }
.entry-orbit { position: absolute; z-index: -1; width: min(72vmin, 880px); aspect-ratio: 1; border: 1px solid #ffffffce; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 60px #fff9, 0 25px 90px #17171709; transform: translate3d(var(--entry-shift-x), var(--entry-shift-y), 0); }
.entry-orbit::before, .entry-orbit::after { position: absolute; inset: 7%; border: 1px solid #17171712; border-radius: inherit; content: ""; }
.entry-orbit::after { inset: 17%; border-color: #df353855; border-left-color: transparent; transform: rotate(-32deg); }
.entry-orbit-one { top: -49%; right: -17%; animation: entry-orbit-drift 11s ease-in-out infinite alternate; }
.entry-orbit-two { bottom: -59%; left: -21%; width: min(80vmin, 960px); border-color: #ffffff8a; animation: entry-orbit-drift 14s ease-in-out infinite alternate-reverse; }
.entry-index, .entry-side, .entry-coordinate { position: absolute; z-index: 2; color: #666660; font-size: 8px; }
.entry-index { top: 36px; left: 5.2vw; }
.entry-side { top: 50%; right: 3.2vw; writing-mode: vertical-rl; }
.entry-coordinate { bottom: 34px; left: 5.2vw; }
.entry-content {
  position: relative;
  z-index: 1;
  width: min(700px, 86vw);
  padding: clamp(36px, 6vw, 76px) 28px clamp(34px, 5vw, 62px);
  overflow: hidden;
  border: 1px solid #ffffffef;
  border-radius: 38px 56px 42px 54px;
  background: linear-gradient(140deg, #ffffffa8, #ffffff61 46%, #ffffff94);
  box-shadow: 0 35px 100px #25251d12, inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff80;
  backdrop-filter: blur(26px) saturate(1.45);
  -webkit-backdrop-filter: blur(26px) saturate(1.45);
  text-align: center;
  transform: perspective(1200px) rotateX(var(--entry-tilt-y)) rotateY(var(--entry-tilt-x));
  animation: entry-card-in 1.3s cubic-bezier(.16,1,.3,1) both;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .55s ease, filter .55s ease;
}
.entry-content::before { position: absolute; inset: 1px; border: 1px solid #ffffffb5; border-radius: inherit; pointer-events: none; content: ""; background: linear-gradient(125deg, #fff9 0%, transparent 23% 68%, #ffffff73 100%); }
.entry-content::after { position: absolute; top: -70%; left: -30%; width: 47%; height: 250%; pointer-events: none; content: ""; background: linear-gradient(90deg, transparent, #ffffff70, transparent); transform: rotate(29deg); animation: entry-glint 5.8s ease-in-out 1.4s infinite; }
.entry-logo { position: relative; width: 82px; height: 82px; margin-bottom: 25px; object-fit: contain; filter: drop-shadow(0 8px 16px #17171714); animation: entry-rise .9s .12s both cubic-bezier(.16,1,.3,1); }
.entry-welcome { position: relative; margin: 0 0 8px; color: #686861; font-size: 14px; letter-spacing: .28em; animation: entry-rise .85s .24s both cubic-bezier(.16,1,.3,1); }
.entry-content h1 { position: relative; margin: 0; font-size: clamp(43px, 8.1vw, 92px); font-weight: 800; letter-spacing: .04em; line-height: 1.2; animation: entry-title-in 1s .31s both cubic-bezier(.16,1,.3,1); }
.entry-content h1 span { color: var(--red); }
.entry-motto { position: relative; margin: 15px 0 35px; color: #6b6b65; font-size: 8px; letter-spacing: .17em; animation: entry-rise .85s .42s both cubic-bezier(.16,1,.3,1); }
.entry-button { position: relative; display: inline-flex; min-height: 53px; align-items: center; gap: 18px; padding: 0 24px; border: 1px solid #ffffffed; border-radius: 999px; background: #ffffff76; box-shadow: 0 9px 25px #1717170d, inset 0 1px 0 #fff; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font-size: 11px; cursor: pointer; animation: entry-rise .9s .54s both cubic-bezier(.16,1,.3,1); transition: transform .3s, background .3s, box-shadow .3s; }
.entry-button:hover { background: #fff; box-shadow: 0 13px 34px #17171719, inset 0 1px 0 #fff; transform: translateY(-3px) scale(1.035); }
.entry-button:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.entry-button b { color: var(--red); font: 400 18px var(--sans); }
.entry-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px #df35381a; animation: entry-pulse 1.8s ease-in-out infinite; }
.entry-screen.is-leaving { opacity: 0; filter: blur(12px); transform: scale(1.045); pointer-events: none; }
.entry-screen.is-leaving .entry-content { animation: none; opacity: 0; filter: blur(10px); transform: perspective(1200px) scale(.91) translateY(-18px); }
@keyframes entry-card-in { from { opacity: 0; filter: blur(14px); transform: perspective(1200px) translateY(54px) scale(.91) rotateX(8deg); } to { opacity: 1; filter: none; } }
@keyframes entry-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes entry-title-in { from { opacity: 0; filter: blur(14px); letter-spacing: .18em; transform: translateY(30px) scale(.9); } to { opacity: 1; filter: none; } }
@keyframes entry-orbit-drift { to { transform: translate3d(calc(var(--entry-shift-x) + 18px), calc(var(--entry-shift-y) - 20px), 0) rotate(10deg) scale(1.04); } }
@keyframes entry-lines-drift { to { background-position: 10vw 5vh; transform: translate3d(calc(var(--entry-reverse-x) + 16px), calc(var(--entry-reverse-y) - 12px), 0) rotate(-8deg); } }
@keyframes entry-glint { 0%, 54% { transform: translateX(-45vw) rotate(29deg); } 78%, 100% { transform: translateX(210vw) rotate(29deg); } }
@keyframes entry-pulse { 50% { box-shadow: 0 0 0 10px #df353800; } }

/* A floating translucent navigation and glass details echo the welcome panel. */
.site-header { inset: 13px 3.2vw auto; height: 70px; padding: 0 28px; border: 1px solid #ffffffdb; border-radius: 999px; background: #ffffffb8; box-shadow: 0 14px 40px #1717170b, inset 0 1px 0 #fff; backdrop-filter: blur(24px) saturate(1.55); -webkit-backdrop-filter: blur(24px) saturate(1.55); }
.site-nav > a { position: relative; padding: 10px 12px; border: 1px solid transparent; border-radius: 999px; transition: color .25s, background .25s, border-color .25s, transform .25s; }
.site-nav > a:hover, .site-nav > a.active { border-color: #ffffff; background: #ffffffa8; box-shadow: 0 5px 18px #1717170b; transform: translateY(-1px); }
.hero-social { position: absolute; z-index: 4; left: 50%; bottom: 8.8%; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); }
.hero-social-links { display: flex; align-items: center; justify-content: center; gap: 9px; }
.hero-social-mark { position: relative; isolation: isolate; width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; border: 1px solid #ffffffc9; border-radius: 50%; background: linear-gradient(145deg, #ffffff91, #dce6f477 48%, #ffffff72); box-shadow: 0 12px 34px #17171718, inset 0 1px 0 #fff; backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.hero-social-mark::before { position: absolute; z-index: -1; inset: -38%; border-radius: 48%; background: conic-gradient(from 0deg, transparent 0 20%, #ffffffc9 30%, #bfd2f18f 39%, transparent 52% 72%, #ffffffa3 83%, transparent 100%); content: ""; filter: blur(9px); opacity: .78; animation: social-glass-flow 8s linear infinite; }
.hero-social-mark::after { position: absolute; z-index: 2; inset: 1px; border: 1px solid #ffffff9c; border-radius: inherit; background: linear-gradient(145deg, #ffffff39, transparent 48%, #cddcf02e); box-shadow: inset 0 1px 2px #fff; content: ""; pointer-events: none; }
.hero-social-logo { position: relative; z-index: 1; display: block; width: 100%; height: 100%; padding: 8px; border-radius: 50%; object-fit: contain; mix-blend-mode: multiply; }
.hero-social-link { position: relative; isolation: isolate; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; border: 1px solid #ffffffd1; border-radius: 50%; background: linear-gradient(145deg, #ffffff99, #dce6f46f 48%, #ffffff82); box-shadow: 0 10px 28px #17171712, inset 0 1px 0 #fff; color: var(--ink); transition: transform .24s, box-shadow .24s, background .24s; backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8); }
.hero-social-link::before { position: absolute; z-index: 0; inset: -55% -70%; background: linear-gradient(112deg, transparent 39%, #ffffffb8 47%, #cad9f074 51%, transparent 61%); content: ""; pointer-events: none; transform: translateX(-75%) rotate(14deg); animation: social-glass-sheen 6.5s ease-in-out infinite; }
.hero-social-link::after { position: absolute; z-index: 1; inset: 1px; border: 1px solid #ffffff85; border-radius: inherit; background: linear-gradient(155deg, #ffffff36, transparent 58%, #c9d7e92b); box-shadow: inset 0 1px 2px #fff; content: ""; pointer-events: none; }
.hero-social-link:nth-child(2)::before { animation-delay: -2.1s; }
.hero-social-link:nth-child(3)::before { animation-delay: -4.2s; }
.hero-social-link svg { position: relative; z-index: 2; width: 18px; height: 18px; fill: currentColor; filter: drop-shadow(0 1px 1px #ffffff7d); }
.hero-social-link:hover { transform: translateY(-2px) scale(1.05); background: linear-gradient(145deg, #ffffffc7, #e6edf4a3 48%, #ffffffbc); box-shadow: 0 15px 32px #1717171c, inset 0 1px 0 #fff; }
.hero-social-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.hero-social:hover .hero-social-mark { transform: rotate(8deg) scale(1.04); box-shadow: 0 16px 40px #1717171e, inset 0 1px 0 #fff; }
@keyframes social-glass-flow { to { transform: rotate(360deg) scale(1.08); } }
@keyframes social-glass-sheen { 0%, 12% { transform: translateX(-75%) rotate(14deg); } 55%, 100% { transform: translateX(75%) rotate(14deg); } }
@media (hover: hover) and (pointer: fine) {
  .hero-social-links { position: absolute; top: calc(100% + 7px); left: 50%; opacity: 0; pointer-events: none; transform: translate(-50%, -8px); transition: opacity .22s ease, transform .28s cubic-bezier(.2,.7,.2,1); }
  .hero-social-links::before { position: absolute; top: -8px; right: 0; left: 0; height: 8px; content: ""; }
  .hero-social:hover .hero-social-links, .hero-social:focus-within .hero-social-links { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
}
.next-work { border-color: #fff; background: #ffffffa3; box-shadow: 0 18px 42px #17171708, inset 0 1px 0 #fff; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.poster-play i { border: 1px solid #ffffffd9; background: #ffffffa8; box-shadow: 0 10px 30px #17171716, inset 0 1px 0 #fff; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.contact-handle { padding: 13px 18px; border: 1px solid #ffffff; border-radius: 999px; background: #ffffff8a; box-shadow: 0 8px 28px #1717170a, inset 0 1px 0 #fff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .25s, box-shadow .25s, background .25s; }
.contact-handle:hover { background: #fff; box-shadow: 0 14px 36px #17171715; transform: translateY(-2px); }
.reveal { transform: translateY(54px) scale(.95) rotateX(3deg); filter: blur(8px); opacity: 0; transition: transform 1s cubic-bezier(.16,1,.3,1), filter .9s ease, opacity .9s ease; }
.reveal.is-visible { transform: none; filter: none; opacity: 1; }
.work-card.reveal .work-poster { clip-path: inset(9% 5% 9% round 28px); transition: clip-path 1.2s cubic-bezier(.16,1,.3,1); }
.work-card.reveal.is-visible .work-poster { clip-path: inset(0 round 2px); }

@media (max-width: 850px) {
  .site-header { inset-inline: 2.2vw; padding-inline: 22px; }
}
@media (max-width: 600px) {
  .entry-index { top: 22px; left: 6vw; font-size: 6px; }
  .entry-side { right: 3.5vw; font-size: 6px; }
  .entry-coordinate { bottom: 22px; left: 6vw; font-size: 6px; }
  .entry-content { width: 86vw; padding: 42px 14px 38px; border-radius: 28px 40px 28px 40px; }
  .entry-logo { width: 64px; height: 64px; margin-bottom: 19px; }
  .entry-welcome { font-size: 12px; }
  .entry-motto { margin: 11px 0 26px; font-size: 6px; }
  .entry-button { min-height: 48px; gap: 13px; padding: 0 18px; font-size: 10px; }
  .site-header { inset: 9px 3vw auto; height: 58px; padding: 0 16px; }
  .site-nav { top: 64px; border: 1px solid #fff; border-radius: 22px; box-shadow: 0 14px 36px #17171712; backdrop-filter: blur(22px); }
  .site-nav > a { padding: 7px 10px; }
  .hero-social { left: auto; right: 7vw; bottom: 14%; gap: 6px; transform: none; }
  .hero-social-mark { width: 44px; height: 44px; }
  .hero-social-logo { padding: 6px; }
  .hero-social-links { gap: 7px; }
  .hero-social-link { width: 36px; height: 36px; }
  .hero-social-link svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.site-entered) { overflow: hidden; }
  .entry-screen, .entry-content, .entry-logo, .entry-welcome, .entry-content h1, .entry-motto, .entry-button, .entry-orbit, .entry-lines, .entry-pulse { animation: none !important; transition: none !important; }
  .entry-content { transform: none; }
  .site-content { visibility: hidden; }
  body.site-entered .site-content { visibility: visible; opacity: 1; filter: none; transform: none; }
  .reveal { transform: none; filter: none; opacity: 1; }
}

/* Keep the player skin last so it always wins over the original dark modal rules. */
.player-dialog { border: 1px solid #ffffffd9; border-radius: 28px; background: #f3f4f0a8; color: var(--ink); box-shadow: 0 34px 110px #17171735, inset 0 1px 0 #fff; backdrop-filter: blur(30px) saturate(1.55); -webkit-backdrop-filter: blur(30px) saturate(1.55); }
.player-dialog::backdrop { background: #e7e9e5a6; backdrop-filter: blur(12px) saturate(1.15); }
.player-shell { position: relative; overflow: hidden; border-radius: inherit; background: linear-gradient(145deg, #ffffff9c, #f1f3efa8 48%, #ffffff78); }
.player-shell::before { position: absolute; z-index: 0; inset: 0; pointer-events: none; content: ""; background: radial-gradient(ellipse at 8% 0, #fff9 0, transparent 37%), radial-gradient(ellipse at 100% 100%, #df353815 0, transparent 34%); }
.player-top, .player-caption, .player-status { position: relative; z-index: 1; }
.player-top { color: #55554f; }
.player-close { border: 1px solid #fff; border-radius: 50%; background: #ffffff88; color: var(--ink); box-shadow: 0 5px 18px #1717170c, inset 0 1px 0 #fff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.player-close:hover { border-color: #fff; background: #fff; color: var(--red); transform: rotate(90deg); }
.player-shell video { z-index: 1; border: 1px solid #ffffffc7; border-radius: 15px; box-shadow: 0 18px 48px #17171728, 0 1px 0 #fff9; }
.player-caption { color: var(--ink); }
.player-caption .mono { color: #666660; }
.player-status { color: #b3272b; }
@media (max-width: 600px) {
  .player-dialog { border-radius: 22px; }
  .player-shell video { border-radius: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .player-dialog[open] { animation: none; }
}
/* Final page-level overrides: remove the old welcome lock and keep every section legible. */
html { min-height: 100%; overflow-y: auto; }
body.cosmos-site { min-height: 100vh; height: auto; overflow-x: hidden; overflow-y: auto; }
body.cosmos-site:not(.site-entered) { overflow-y: auto; }
body.cosmos-site .site-content { min-height: 100vh; height: auto; overflow: visible; visibility: visible; opacity: 1; filter: none; transform: none; }
body.cosmos-site .join { background: radial-gradient(ellipse at 77% 60%, #43305b80, transparent 38%), linear-gradient(125deg, #141427, #090c17 64%); color: #f1f2f6; }
body.cosmos-site .join .section-top { color: #a3abc0; }
body.cosmos-site .join-content h2 { color: #f1f1f6; }
body.cosmos-site .join-content h2 em { color: transparent; background: linear-gradient(100deg, #c4ceff, #a399f5 52%, #f1a5bf); background-clip: text; -webkit-background-clip: text; }
body.cosmos-site .join-kicker { color: #ff91a3; }
body.cosmos-site .join-contact { border-color: #d7d8f34a; background: #ffffff0d; color: #f1f2f6; box-shadow: 0 8px 28px #0004, inset 0 1px 0 #ffffff17; }
body.cosmos-site .join-contact:hover { background: #ffffff18; }
body.cosmos-site .join-watermark { color: #dcd9f609; }
body.cosmos-site .join::before, body.cosmos-site .join::after { border-color: #bec5fd20; }
@media (prefers-reduced-motion: reduce) {
  body.cosmos-site { overflow-y: auto; }
  body.cosmos-site .site-content { visibility: visible; opacity: 1; filter: none; transform: none; }
  body.cosmos-site .reveal { transform: none; filter: none; opacity: 1; }
}
/* Keep the main page scrollable after removing the old welcome gate. */
html { min-height: 100%; overflow-y: auto; }
body.cosmos-site { min-height: 100vh; height: auto; overflow-x: hidden; overflow-y: auto; }
body.cosmos-site .site-content { min-height: 100vh; height: auto; visibility: visible; opacity: 1; filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.cosmos-site { overflow-y: auto; }
  body.cosmos-site .site-content { visibility: visible; opacity: 1; filter: none; transform: none; }
}
/* Restore the original light studio identity while retaining the new interactions. */
body.cosmos-site {
  --paper: #f9f9f6;
  --white: #fff;
  --ink: #171717;
  --muted: #777771;
  --line: rgba(23, 23, 23, .15);
  --red: #df3538;
  --space-blue: #aeb2bc;
  --space-glow: #df3538;
  background: #f9f9f6;
  color: #171717;
}
html:has(body.cosmos-site), html:has(body.tools-page) { background: #f9f9f6; }
body.cosmos-site .site-header { border-color: #ffffffdc; background: #ffffffbd; box-shadow: 0 14px 40px #1717170b, inset 0 1px 0 #fff; }
body.cosmos-site .brand-lockup small, body.cosmos-site .header-counter { color: #777771; }
body.cosmos-site .site-nav > a, body.cosmos-site .nav-motto { color: #55554f; }
body.cosmos-site .site-nav > a i { color: #989891; }
body.cosmos-site .site-nav > a:hover, body.cosmos-site .site-nav > a.active { border-color: #fff; background: #ffffffa8; color: #171717; box-shadow: 0 5px 18px #1717170b; }
body.cosmos-site .menu-toggle span { background: #171717; }
body.cosmos-site .hero { background: radial-gradient(ellipse at 78% 42%, #eeeDEA 0, #f5f5f1 31%, #f9f9f6 72%); }
body.cosmos-site .hero::after { background: linear-gradient(90deg, #f9f9f6f5 0%, #f9f9f6d9 31%, #f9f9f666 54%, #f9f9f611 82%), linear-gradient(0deg, #f9f9f6 0%, #f9f9f63b 18%, transparent 42%); }
body.cosmos-site .hero::before { background: radial-gradient(ellipse 32% 42% at calc(72% + var(--hero-pointer-x, 0px)) calc(38% + var(--hero-pointer-y, 0px)), #df35380b, transparent 78%); }
body.cosmos-site .hero-grid { opacity: .2; background-image: linear-gradient(#17171712 1px, transparent 1px), linear-gradient(90deg, #17171712 1px, transparent 1px); }
body.cosmos-site .hero-threads { opacity: .65; }
body.cosmos-site .hero-threads path { stroke: #17171740; }
body.cosmos-site .hero-threads path.thread-red { stroke: #df3538; }
body.cosmos-site .hero-topline, body.cosmos-site .hero-cosmic-index { color: #777771; }
body.cosmos-site .hero-kicker { color: #55554f; }
body.cosmos-site .hero h1 > span { color: #171717; }
body.cosmos-site .hero h1 em { color: transparent; background: none; -webkit-text-stroke: 1px #171717; }
body.cosmos-site .hero-summary p { color: #55554f; }
body.cosmos-site .hero-summary strong { color: #171717; }
body.cosmos-site .seal-orbit { border-color: #17171735; box-shadow: none; }
body.cosmos-site .orbit-a { border-color: #17171724; }
body.cosmos-site .orbit-b { border-color: #df353887; }
body.cosmos-site .seal-logo { filter: drop-shadow(0 0 16px #17171712); }
body.cosmos-site .seal-caption, body.cosmos-site .hero-next, body.cosmos-site .hero-edge, body.cosmos-site .hero-coordinate { color: #777771; }
body.cosmos-site .hero-social-mark, body.cosmos-site .hero-social-link { border-color: #ffffffd1; background: linear-gradient(145deg, #ffffffdc, #e6e7e38c 48%, #ffffffc9); box-shadow: 0 10px 28px #17171712, inset 0 1px 0 #fff; color: #171717; }
body.cosmos-site .hero-social-mark::after, body.cosmos-site .hero-social-link::after { border-color: #ffffffa0; background: linear-gradient(155deg, #ffffff45, transparent 58%, #c9cbd52b); box-shadow: inset 0 1px 2px #fff; }
body.cosmos-site .hero-social-link::before { background: linear-gradient(112deg, transparent 39%, #ffffffc9 47%, #cad9f074 51%, transparent 61%); }
body.cosmos-site .hero-social-logo { mix-blend-mode: multiply; }
body.cosmos-site .hero-social-link:hover { background: linear-gradient(145deg, #fff, #e6edf4bd 48%, #fff); box-shadow: 0 15px 32px #1717171c, inset 0 1px 0 #fff; }
body.cosmos-site .about { border-color: var(--line); background: #fff; }
body.cosmos-site .section-top, body.cosmos-site .title-vertical, body.cosmos-site .title-ruler, body.cosmos-site .about-bottom, body.cosmos-site .about-signature small, body.cosmos-site .signature-year { color: #777771; }
body.cosmos-site .about-body p { color: #666660; }
body.cosmos-site .about-body p.about-lead { color: #171717; }
body.cosmos-site .about-signature { border-color: var(--line); }
body.cosmos-site .work { background: #f9f9f6; }
body.cosmos-site .work-heading h2 em, body.cosmos-site .work-heading p { color: #777771; }
body.cosmos-site .work-poster { border-color: rgba(23,23,23,.15); background: radial-gradient(ellipse at 67% 42%, #eadad4 0, transparent 27%), linear-gradient(140deg, #eeeee9, #deded8 57%, #f5f5f1); }
body.cosmos-site .work-poster::before { background: linear-gradient(115deg, transparent 20%, #ffffff8c 44%, transparent 67%); }
body.cosmos-site .work-poster::after { border-color: #17171720; }
body.cosmos-site .poster-frame.is-ready { opacity: .88; }
body.cosmos-site .poster-grid { opacity: .18; background-image: linear-gradient(#17171712 1px, transparent 1px), linear-gradient(90deg, #17171712 1px, transparent 1px); }
body.cosmos-site .poster-orbit { border-color: #17171740; }
body.cosmos-site .poster-orbit-two { border-color: #df35388c; }
body.cosmos-site .poster-cross { color: #171717; }
body.cosmos-site .poster-number, body.cosmos-site .poster-play span, body.cosmos-site .poster-bottom, body.cosmos-site .work-description, body.cosmos-site .work-arrow, body.cosmos-site .work-credits { color: #666660; }
body.cosmos-site .poster-title { color: #171717; text-shadow: 0 2px 24px #ffffff9c; }
body.cosmos-site .poster-bottom { border-color: #17171733; }
body.cosmos-site .next-work { border-color: #fff; background: #ffffffa3; color: #777771; box-shadow: 0 18px 42px #17171708, inset 0 1px 0 #fff; }
body.cosmos-site .next-work p { color: #171717; }
body.cosmos-site .next-coordinate { color: #777771; }
body.cosmos-site .services { background: radial-gradient(ellipse at 78% 22%, #eeeeea 0, transparent 34%), #f9f9f6; }
body.cosmos-site .services-intro p { color: #666660; }
body.cosmos-site .service-card { border-color: #fff; background: #ffffffa8; color: #171717; box-shadow: 0 16px 42px #17171708, inset 0 1px 0 #fff; }
body.cosmos-site .service-card-top, body.cosmos-site .service-card-action { color: #55554f; }
body.cosmos-site .service-card-description { color: #666660; }
body.cosmos-site .service-card:hover { border-color: #df353866; background: #ffffffd9; box-shadow: 0 25px 70px #17171712; }
body.cosmos-site .join { background: radial-gradient(ellipse at 77% 60%, #df35380a, transparent 38%), linear-gradient(125deg, #f0f0ec, #fafaf7 64%); color: #171717; }
body.cosmos-site .join .section-top { color: #777771; }
body.cosmos-site .join-content h2 { color: #171717; }
body.cosmos-site .join-content h2 em { color: transparent; background: none; -webkit-text-stroke: 1px #171717; }
body.cosmos-site .join-kicker { color: #df3538; }
body.cosmos-site .join-contact { border-color: #fff; background: #ffffffa8; color: #171717; box-shadow: 0 8px 28px #1717170a, inset 0 1px 0 #fff; }
body.cosmos-site .join-contact:hover { background: #fff; }
body.cosmos-site .join-watermark { color: #17171708; }
body.cosmos-site .join::before, body.cosmos-site .join::after { border-color: #17171718; }
body.cosmos-site .contact { border-color: var(--line); background: radial-gradient(ellipse at 80% 55%, #df35380b, transparent 45%), #f1f1ec; }
body.cosmos-site .contact h2 em { -webkit-text-stroke-color: #171717; }
body.cosmos-site .contact-copy { color: #666660; }
body.cosmos-site .contact-handle { border-color: #fff; background: #ffffff8a; box-shadow: 0 8px 28px #1717170a, inset 0 1px 0 #fff; }
body.cosmos-site .contact-handle strong { color: #171717; }
body.cosmos-site .contact-handle b, body.cosmos-site .contact-card-wrap > .mono { color: #777771; }
body.cosmos-site .contact-card { border-color: #d0d0c8; box-shadow: 0 15px 48px #17171718; }
body.cosmos-site .contact-orbit, body.cosmos-site .contact-orbit::before, body.cosmos-site .contact-orbit::after, body.cosmos-site .contact-orbit span, body.cosmos-site .contact-orbit i { border-color: #17171718; }
body.cosmos-site .contact-orbit::after { border-color: #df35384a; border-right-color: transparent; }
body.cosmos-site .contact-orbit b { color: #17171708; }
body.cosmos-site .site-footer { border-color: var(--line); background: #f9f9f6; }
body.cosmos-site .footer-brand span, body.cosmos-site .site-footer p, body.cosmos-site .back-top { color: #777771; }
body.cosmos-site .encounter-story { background: radial-gradient(ellipse at 50% 51%, #e6e5ee 0, #f5f5f1 32%, #f9f9f6 78%); border-color: #17171718; }
body.cosmos-site .encounter-story h2 { color: #171717; }
body.cosmos-site .encounter-story h2 em { color: #777771; background: none; }
body.cosmos-site .encounter-story-copy > p:not(.encounter-kicker) { color: #666660; }
body.cosmos-site .encounter-kicker, body.cosmos-site .encounter-link { color: #55554f; }
body.cosmos-site .encounter-orbit { border-color: #17171718; }
body.cosmos-site .encounter-orbit-two { border-color: #df35383b; }
body.cosmos-site .encounter-mark { color: #77777160; }
body.cosmos-site .encounter-dot { background: #fff; box-shadow: 0 0 28px 8px #df35384d; }
body.cosmos-site .cosmos-cursor { color: #171717; }
body.cosmos-site .cinema-cursor { color: #171717; mix-blend-mode: multiply; }
body.cosmos-site .cursor-frame { border-color: #17171773; box-shadow: 0 0 20px #1717170b, inset 0 0 18px #17171708; }
body.cosmos-site .cursor-frame::before { border-color: #17171740; }
body.cosmos-site .cursor-frame::after { border-color: #df35386e; border-left-color: transparent; }
body.cosmos-site .cursor-label { color: #55554f; }
body.cosmos-site .player-dialog, body.cosmos-site .service-dialog { border-color: #ffffffd9; background: #f3f4f0d9; color: #171717; box-shadow: 0 34px 110px #17171735, inset 0 1px 0 #fff; }
body.cosmos-site .player-dialog::backdrop, body.cosmos-site .service-dialog::backdrop { background: #e7e9e5a6; backdrop-filter: blur(12px) saturate(1.15); }
body.cosmos-site .player-shell, body.cosmos-site .service-dialog-shell { background: linear-gradient(145deg, #ffffffd9, #f1f3efd9 54%, #ffffffc7); }
body.cosmos-site .player-top, body.cosmos-site .player-caption, body.cosmos-site .service-dialog-top, body.cosmos-site .service-dialog-copy { color: #171717; }
body.cosmos-site .player-top .mono, body.cosmos-site .player-caption .mono, body.cosmos-site .service-dialog-copy { color: #666660; }
body.cosmos-site .player-close, body.cosmos-site .service-dialog-close { border-color: #fff; background: #ffffff90; color: #171717; }
body.cosmos-site .service-contact-item { border-color: #fff; background: #ffffffa6; color: #171717; }
body.cosmos-site .service-contact-item > span { color: #777771; }
body.tools-page { --paper: #f9f9f6; --ink: #171717; --line: rgba(23,23,23,.15); background: radial-gradient(ellipse at 70% 12%, #fff 0, #f9f9f6 52%, #f1f1ec 100%); color: #171717; }
body.tools-page .site-header { border-color: #ffffffdc; background: #ffffffbd; box-shadow: 0 14px 40px #1717170b, inset 0 1px 0 #fff; }
body.tools-page .brand-lockup small, body.tools-page .header-counter { color: #777771; }
body.tools-page .site-nav > a, body.tools-page .nav-motto { color: #55554f; }
body.tools-page .site-nav > a i { color: #989891; }
body.tools-page .site-nav > a:hover, body.tools-page .site-nav > a.active { color: #171717; border-color: #fff; background: #ffffffa8; box-shadow: 0 5px 18px #1717170b; }
body.tools-page .menu-toggle span { background: #171717; }
body.tools-page .tools-main::before { background: radial-gradient(ellipse at 76% 22%, #df35380b, transparent 34%), radial-gradient(ellipse at 4% 69%, #17171706, transparent 36%); }
body.tools-page .tools-kicker, body.tools-page .tools-intro-note, body.tools-page .tools-intro-coordinate { color: #777771; }
body.tools-page .tools-intro h1 em { color: #777771; }
body.tools-page .section-top, body.tools-page .tool-release-top { color: #777771; border-color: #17171720; }
body.tools-page .tool-release-card { border-color: #fff; background: linear-gradient(145deg, #ffffffdb, #ffffffa8 48%, #f1f2eea8); box-shadow: 0 24px 70px #1717170b, inset 0 1px 0 #fff; }
body.tools-page .tool-release-bottom { border-color: #17171716; background: #ffffff65; }
body.tools-page .tool-release-kicker, body.tools-page .tool-release-meta, body.tools-page .tools-footnote { color: #777771; }
body.tools-page .tool-release-tagline, body.tools-page .tool-install-note { color: #666660; }
body.tools-page .tool-install-note strong { color: #171717; }
body.tools-page .tool-download-button { border-color: #171717; background: #171717; color: #fff; box-shadow: none; }
body.tools-page .tool-download-sub, body.tools-page .tool-download-button b { color: #fff; }
body.tools-page .tool-download-button:hover { border-color: #df3538; background: #df3538; color: #fff; }
body.tools-page .tools-footer { background: #f9f9f6; }
@media (max-width: 600px) {
  body.cosmos-site .site-header, body.tools-page .site-header { border-color: #ffffffdc; background: #ffffffed; }
  body.cosmos-site .site-nav, body.tools-page .site-nav { border-color: #fff; background: #fffffff5; box-shadow: 0 14px 36px #17171712; }
  body.cosmos-site .site-nav > a, body.cosmos-site .nav-motto { color: #171717; }
}
@media (prefers-reduced-motion: reduce) {
  body.cosmos-site .site-content { visibility: visible; opacity: 1; filter: none; transform: none; }
  body.cosmos-site .reveal { transform: none; filter: none; opacity: 1; }
  body.cosmos-site .wind-threads { filter: none; }
}