:root {
  --font-sans-cjk: "Noto Sans CJK SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", sans-serif;
  color-scheme: dark;
  --ink: #e9eaf2;
  --ink-soft: #a1a5b7;
  --paper: #000000;
  --paper-cool: #0b0d14;
  --line: #232530;
  --sea: #83d6de;
  --sea-dark: #a9dfe5;
  --lilac: #ac9ade;
  --coral: #d993c6;
  --sun: #e8cc8c;
  --wide: 1320px;
  font-family: "Aptos", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; min-width: 320px; background: var(--paper); }
body, button, input, textarea, select { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #658ca2; outline-offset: 3px; }
::selection { color: white; background: #64799a; }

.site-header {
  position: absolute; z-index: 20; top: 0; left: 0; display: flex; align-items: center;
  justify-content: space-between; width: 100%; height: 88px; padding: 0 max(38px, calc((100vw - var(--wide)) / 2));
  border-bottom: 1px solid rgb(51 72 84 / 12%); color: var(--ink);
}
.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand > span:last-child { display: grid; gap: 3px; }
.brand strong { font-size: 16px; font-weight: 650; letter-spacing: 0; }
.brand small { color: #77868a; font-size: 9px; letter-spacing: 1.25px; }
.brand-seal { position: relative; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #637b84; border-radius: 50%; }
.brand-seal::before, .brand-seal::after { position: absolute; width: 20px; height: 9px; border: 1px solid #637b84; border-radius: 50%; content: ""; }
.brand-seal::after { transform: rotate(58deg); }
.brand-seal span { width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
.brand-seal img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.brand-seal.has-logo::before, .brand-seal.has-logo::after { display: none; }
.main-nav { display: flex; align-items: center; gap: 42px; margin-left: 30px; }
.main-nav a, .text-action { color: #445760; font-size: 13px; transition: color .2s ease; }
.main-nav a:hover, .text-action:hover { color: #387985; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.text-action, .icon-link, .mobile-menu { display: inline-grid; padding: 8px 2px; border: 0; background: none; cursor: pointer; }
.icon-link { width: 34px; height: 34px; place-items: center; border: 1px solid rgb(58 82 91 / 26%); border-radius: 50%; color: #526f7c; font-size: 16px; transition: background .2s, transform .2s; }
.icon-link:hover { transform: rotate(25deg); background: white; }
.mobile-menu { display: none; gap: 5px; width: 35px; }
.mobile-menu span { display: block; height: 1px; background: currentColor; }

.hero { position: relative; display: flex; min-height: 680px; height: min(840px, 86svh); align-items: center; overflow: hidden; background: #e5edf0; isolation: isolate; }
#world { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.hero::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(231 238 241 / 96%) 0%, rgb(231 238 241 / 84%) 30%, rgb(231 238 241 / 24%) 58%, rgb(231 238 241 / 0%) 100%); content: ""; pointer-events: none; }
.hero-grain { position: absolute; z-index: -1; inset: 0; opacity: .17; pointer-events: none; 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='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.19'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.hero-copy { width: min(570px, 48vw); margin: 62px 0 0 max(9vw, calc((100vw - var(--wide)) / 2)); animation: appear .8s .1s both; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; color: #62777e; font-size: 10px; font-weight: 600; letter-spacing: 1px; }
.eyebrow-dark { color: #78858a; }
.eyebrow-dot, .living-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #65a094; box-shadow: 0 0 0 4px rgb(101 160 148 / 14%); }
.eyebrow-line { width: 29px; height: 1px; background: #9faeb1; }
.hero h1 { margin: 34px 0 14px; color: #263741; font-family: var(--font-sans-cjk); font-size: 72px; font-weight: 500; line-height: 1.15; letter-spacing: 0; }
.hero-motto { margin: 0; color: #526a75; font-size: 21px; line-height: 1.7; }
.hero-description { margin: 21px 0 0; color: #6b7e84; font-size: 13px; line-height: 2; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 22px; margin-top: 32px; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 22px; padding: 0 18px; border: 1px solid transparent; border-radius: 3px; background: transparent; font-size: 12px; font-weight: 560; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:active, .arrow-button:active, .like-button:active { transform: translateY(1px) scale(.97); }
.mini-work:active, .project-image-button:active { transform: scale(.965); }
.button-ink { color: #f7f7f3; background: #334c59; box-shadow: 0 8px 20px rgb(37 62 73 / 13%); }
.button-ink:hover { background: #456a75; box-shadow: 0 11px 25px rgb(37 62 73 / 20%); }
.button-quiet { gap: 9px; color: #506771; }
.button-quiet:hover { color: #294d59; background: rgb(255 255 255 / 47%); }
.plus-mark { color: #c27d70; font-size: 19px; font-weight: 400; }
.button-outline { border-color: #80939a; color: #3a535c; }
.button-outline:hover { border-color: #526e78; background: rgb(255 255 255 / 55%); }
.hero-note { position: absolute; right: max(6vw, calc((100vw - var(--wide)) / 2)); bottom: 96px; display: flex; align-items: center; gap: 10px; color: #526c77; font-size: 10px; }
.hero-note span { font-size: 9px; }
.hero-note i { width: 25px; height: 1px; background: #7f9a9f; }
.scroll-cue { position: absolute; bottom: 32px; left: max(9vw, calc((100vw - var(--wide)) / 2)); display: flex; align-items: center; gap: 12px; color: #60737b; font-size: 10px; }
.scroll-dot { width: 7px; height: 7px; border: 1px solid #62858b; border-radius: 50%; animation: pulse 1.8s infinite; }
.hero-index { position: absolute; right: max(6vw, calc((100vw - var(--wide)) / 2)); bottom: 32px; color: #768b90; font-size: 9px; letter-spacing: .3px; }
.hero-index span { padding: 0 8px; color: var(--coral); }

.section-wrap { width: min(var(--wide), calc(100% - 112px)); margin: 0 auto; }
.artists { padding-top: 105px; padding-bottom: 116px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 49px; }
.section-heading h2 { margin: 15px 0 0; color: #2d3d46; font-family: var(--font-sans-cjk); font-size: 40px; font-weight: 500; line-height: 1.2; }
.heading-aside { color: #879399; font-family: inherit; font-size: 13px; }
.section-intro { margin: 0 3px 4px 0; color: #75848a; font-size: 12px; line-height: 1.9; }
.artist-list { border-top: 1px solid var(--line); }
.artist-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 105px; gap: 28px; align-items: center; padding: 30px 0 31px; border-bottom: 1px solid var(--line); }
.artist-profile { display: grid; justify-items: start; align-content: center; }
.avatar-button { position: relative; width: 74px; height: 74px; overflow: hidden; padding: 0; border: 0; border-radius: 50%; background: #d9e3e4; cursor: pointer; transition: transform .28s cubic-bezier(.2, 1.5, .5, 1), box-shadow .2s; }
.avatar-button:hover { transform: rotate(-5deg) scale(1.08); box-shadow: 0 0 0 5px rgb(83 132 136 / 14%); }
.avatar-button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.artist-name { margin: 12px 0 4px; padding: 0; border: 0; background: none; color: #263a45; font-family: var(--font-sans-cjk); font-size: 20px; cursor: pointer; }
.artist-name:hover { color: #54838a; }
.artist-role { color: #829097; font-size: 10px; }
.artist-bio { max-width: 190px; margin: 11px 0 0; color: #728087; font-size: 11px; line-height: 1.8; }
.artist-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mini-work { position: relative; min-width: 0; overflow: hidden; padding: 0; border: 0; border-radius: 2px; background: #d8e2e1; text-align: left; cursor: pointer; isolation: isolate; }
.mini-work img, .mini-work video { display: block; width: 100%; aspect-ratio: .76 / 1; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.mini-work:hover img { transform: scale(1.06) rotate(-.5deg); }
.mini-work:hover video { transform: scale(1.06); }
.work-placeholder { display: grid; min-height: 120px; aspect-ratio: .76 / 1; place-content: center; gap: 9px; border: 1px dashed #c7d5d1; background: #eef2ef; color: #91a19e; text-align: center; }
.work-placeholder > span { color: #c89585; font-size: 22px; }
.work-placeholder small { font-size: 9px; }
.note-thumbnail { display: flex; min-height: 125px; aspect-ratio: .76 / 1; flex-direction: column; gap: 10px; overflow: hidden; padding: 15px; background: #ded8ed; color: #4c536a; text-align: left; }
.note-thumbnail .note-mark { color: #b77778; font-size: 23px; }
.note-thumbnail strong { font-family: var(--font-sans-cjk); font-size: 13px; }
.note-thumbnail > span:last-child { display: -webkit-box; overflow: hidden; color: #6d7080; font-size: 9px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.mini-work::after { position: absolute; inset: 40% 0 0; z-index: 0; background: linear-gradient(transparent, rgb(27 45 53 / 65%)); content: ""; opacity: .88; transition: opacity .25s; }
.mini-work:hover::after { opacity: 1; }
.mini-caption { position: absolute; z-index: 1; right: 10px; bottom: 10px; left: 11px; display: flex; align-items: end; justify-content: space-between; gap: 6px; color: #fff; }
.mini-caption strong { overflow: hidden; font-size: 11px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.mini-caption small { flex: 0 0 auto; color: rgb(255 255 255 / 77%); font-size: 8px; }
.artist-row-meta { display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 15px; }
.self-likes { color: #aa777c; font-size: 9px; white-space: nowrap; }
.work-count { color: #849198; font-size: 10px; white-space: nowrap; }
.like-button { display: inline-flex; min-width: 67px; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border: 1px solid #d7e0e0; border-radius: 2px; background: transparent; color: #728087; font-size: 10px; cursor: pointer; transition: all .2s ease; }
.like-button span:first-child { color: #c87d81; font-size: 14px; }
.like-button:hover, .like-button[aria-pressed="true"] { border-color: #d7adb0; background: #fbefef; color: #845a62; }
.like-button[aria-pressed="true"] span:first-child { animation: heart .35s cubic-bezier(.2, 1.8, .4, 1); }
.join-strip { display: flex; align-items: center; gap: 14px; margin-top: 31px; padding: 15px 17px; border: 1px solid #e1e6e4; background: #f8f8f5; }
.strip-star { color: #cf927a; font-size: 17px; }
.join-strip p { flex: 1; margin: 0; color: #718087; font-family: var(--font-sans-cjk); font-size: 14px; }
.arrow-button { width: 34px; height: 34px; border: 1px solid #d8e0de; border-radius: 50%; background: transparent; font-size: 16px; cursor: pointer; transition: transform .22s, background .22s; }
.arrow-button:hover { transform: rotate(45deg); background: #edf4f0; }

.project-feature { position: relative; display: grid; min-height: 485px; grid-template-columns: 1.1fr .9fr; overflow: hidden; background: #d7e5e4; }
.feature-art { position: relative; min-height: 485px; overflow: hidden; background-color: #9ebbc0; background-image: url('/art/pixel-matte.svg'); background-position: center; background-size: cover; }
.feature-art:hover { filter: saturate(1.12); }
.feature-art::after { position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 24%); content: ""; pointer-events: none; }
.feature-stamp { position: absolute; top: 35px; left: 39px; display: grid; width: 58px; height: 58px; place-content: center; transform: rotate(-8deg); border: 1px solid rgb(255 249 227 / 77%); border-radius: 50%; color: #fff7dc; font-family: var(--font-sans-cjk); font-size: 12px; line-height: 1.3; text-align: center; }
.feature-coordinate { position: absolute; right: 28px; bottom: 24px; color: rgb(255 255 255 / 83%); font-size: 9px; letter-spacing: 1.3px; text-shadow: 0 1px 4px rgb(35 49 55 / 45%); }
.feature-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 65px clamp(38px, 7vw, 118px); }
.feature-copy .eyebrow { flex-wrap: wrap; }
.living-dot { width: 6px; height: 6px; margin-left: 3px; background: #6d9f80; }
.feature-copy h2 { margin: 27px 0 13px; color: #2d464d; font-family: var(--font-sans-cjk); font-size: 45px; font-weight: 500; }
.feature-lead { margin: 0; color: #405f66; font-family: var(--font-sans-cjk); font-size: 16px; line-height: 1.95; }
.feature-small { margin: 19px 0 29px; color: #738489; font-size: 11px; line-height: 1.9; }
.feature-squiggle { position: absolute; right: 8%; bottom: 31px; transform: rotate(-30deg); color: #8aabab; font-family: serif; font-size: 68px; font-weight: 200; }

.projects { padding-top: 108px; padding-bottom: 110px; }
.project-heading { margin-bottom: 39px; }
.upload-entry { border: 1px solid #d9e0dd; }
.project-toolbar { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.filter-list { display: flex; flex: 1; flex-wrap: wrap; gap: 6px 9px; }
.filter-chip { display: inline-flex; min-height: 32px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid transparent; border-radius: 2px; background: none; color: #718087; font-size: 10px; cursor: pointer; transition: color .18s, background .18s, border-color .18s; }
.filter-chip:hover { color: #38545d; background: #eaf0ee; }
.filter-chip.active { border-color: #bdccca; background: #e7efec; color: #38595c; }
.filter-chip span { color: #a0a9aa; font-size: 8px; }
.collection-count { flex: 0 0 auto; padding-top: 9px; color: #8d999d; font-size: 9px; }
.collection-count span { padding: 0 4px; color: #cf8d7e; }
.project-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; padding-top: 25px; }
.project-card { min-width: 0; animation: appear .4s both; }
.project-image-button { position: relative; display: block; width: 100%; overflow: hidden; padding: 0; border: 0; border-radius: 2px; background: #dbe2e2; cursor: pointer; }
.project-image-button img, .project-image-button video { display: block; width: 100%; aspect-ratio: 1.05 / .91; object-fit: cover; transition: transform .48s cubic-bezier(.2, .7, .3, 1); }
.project-image-button:hover img, .project-image-button:hover video { transform: scale(1.055); }
.project-image-button::after { position: absolute; inset: 0; border: 1px solid rgb(45 68 73 / 6%); content: ""; pointer-events: none; }
.play-mark { position: absolute; top: 50%; left: 50%; display: grid; width: 43px; height: 43px; transform: translate(-50%, -50%); place-items: center; border: 1px solid rgb(255 255 255 / 86%); border-radius: 50%; background: rgb(40 63 72 / 40%); color: white; font-size: 13px; backdrop-filter: blur(4px); }
.project-card-info { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; }
.project-card-info > div { min-width: 0; }
.project-card-title { overflow: hidden; max-width: 100%; padding: 0; border: 0; background: none; color: #364b54; font-family: var(--font-sans-cjk); font-size: 15px; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.project-card-title:hover { color: #54838a; }
.project-card-desc { display: block; overflow: hidden; max-width: 100%; margin-top: 5px; color: #849196; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.project-card-artist { display: flex; flex: 0 0 auto; align-items: start; gap: 6px; padding: 2px 0 0; border: 0; background: none; color: #809095; font-size: 9px; cursor: pointer; }
.project-card-artist:hover { color: #427981; }
.project-card-artist img { width: 21px; height: 21px; border-radius: 50%; object-fit: cover; }
.collection-end { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 57px 0 0; color: #a0a9aa; font-family: var(--font-sans-cjk); font-size: 12px; }
.collection-end span { width: 47px; height: 1px; background: #dce2df; }
.collection-end p { margin: 0; }
.empty-projects { grid-column: 1 / -1; padding: 70px 20px; color: #7f8b8d; text-align: center; }

.about-band { position: relative; display: grid; min-height: 540px; grid-template-columns: 1.05fr .95fr; overflow: hidden; background: #344b59; color: #f3f2ed; }
.about-copy { z-index: 1; width: min(500px, 74%); align-self: center; justify-self: center; padding: 72px 0 74px 35px; }
.about-copy .eyebrow { color: #b9cbca; }
.about-copy h2 { margin: 28px 0 20px; color: #f3f0e8; font-family: var(--font-sans-cjk); font-size: 39px; font-weight: 400; line-height: 1.45; }
.about-copy h2 span { color: #a8d0c5; }
.about-copy > p:not(.eyebrow) { max-width: 385px; margin: 0; color: #cad3d1; font-size: 11px; line-height: 2; }
.about-link { display: inline-flex; align-items: center; gap: 22px; margin-top: 29px; padding-bottom: 8px; border-bottom: 1px solid #a7c2bb; color: #e4e6de; font-size: 11px; transition: gap .2s; }
.about-link:hover { gap: 30px; }
.about-image { position: relative; min-height: 540px; overflow: hidden; background-color: #96b4b7; background-image: url('/art/pixel-matte.svg'); background-position: center; background-size: cover; }
.about-image::before { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(31 51 61 / 41%), transparent 47%); content: ""; }
.about-image span { position: absolute; right: 32px; bottom: 30px; color: white; font-size: 9px; letter-spacing: 1px; line-height: 1.8; text-align: right; }
.about-orbit { position: absolute; top: 13%; left: 7%; width: 120px; height: 45px; transform: rotate(-23deg); border: 1px solid rgb(203 227 216 / 17%); border-radius: 50%; }
.about-orbit span { position: absolute; top: -4px; left: 23px; width: 7px; height: 7px; border-radius: 50%; background: #e2c989; }
.about-orbit i { position: absolute; top: 10px; left: 65px; width: 5px; height: 5px; border-radius: 50%; background: #a8d0c5; }
.about-margin { position: absolute; bottom: 27px; left: 38px; color: rgb(233 237 230 / 55%); font-size: 8px; letter-spacing: .8px; }
.site-footer { display: flex; min-height: 110px; align-items: center; justify-content: space-between; gap: 20px; padding: 22px max(38px, calc((100vw - var(--wide)) / 2)); background: #f5f6f4; }
.footer-brand { transform: scale(.92); transform-origin: left center; }
.site-footer > p { margin: 0; color: #718087; font-family: var(--font-sans-cjk); font-size: 11px; }
.site-footer > p span { display: block; margin-top: 6px; color: #9aa4a5; font-family: inherit; font-size: 9px; }
.back-top { color: #77878b; font-size: 9px; }
.back-top:hover { color: #456f77; }

.modal { position: fixed; width: min(470px, calc(100% - 32px)); max-height: min(90vh, 850px); overflow: auto; padding: 0; border: 1px solid #d5deda; border-radius: 4px; background: #f7f8f5; color: var(--ink); box-shadow: 0 30px 100px rgb(25 45 52 / 26%); }
.modal::backdrop { background: rgb(24 42 50 / 54%); backdrop-filter: blur(5px); }
.modal[open] { animation: modal-in .28s cubic-bezier(.2, .8, .3, 1) both; }
.modal form[method="dialog"] { position: absolute; z-index: 2; top: 14px; right: 14px; }
.modal-close { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #dce3df; border-radius: 50%; background: rgb(249 250 247 / 90%); color: #708084; font-size: 22px; line-height: 1; cursor: pointer; transition: transform .18s, color .18s; }
.modal-close:hover { transform: rotate(90deg); color: #365a65; }
.modal-content { padding: 45px 43px 34px; }
.modal-content h2 { margin: 15px 0 6px; font-family: var(--font-sans-cjk); font-size: 31px; font-weight: 500; }
.modal-subtitle { margin: 0; color: #849093; font-size: 11px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; margin: 25px 0 19px; padding: 3px; border: 1px solid #dce3df; background: #eef2ef; }
.segment { min-height: 35px; border: 0; background: none; color: #7e8a8b; font-size: 11px; cursor: pointer; }
.segment.active { background: white; color: #3d5e65; box-shadow: 0 1px 4px rgb(43 66 70 / 10%); }
.stack-form { display: grid; gap: 13px; margin-top: 21px; }
.stack-form > label { display: grid; gap: 7px; color: #66777d; font-size: 10px; }
.stack-form input:not([type=file]), .stack-form textarea, .stack-form select { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #d9e1de; border-radius: 2px; background: #fcfcfa; color: #344950; font-size: 12px; }
.stack-form textarea { min-height: 78px; resize: vertical; }
.checkbox-line { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 9px !important; min-height: 28px; }
.checkbox-line input { width: 15px; height: 15px; accent-color: #658c82; }
.stack-form input::placeholder, .stack-form textarea::placeholder { color: #a4adae; }
.form-message { min-height: 16px; margin: 0; color: #5c887f; font-size: 10px; line-height: 1.6; }
.form-message.error { color: #af6d6a; }
.form-submit { width: 100%; justify-content: space-between; margin-top: 1px; }
.privacy-note { margin: 16px 0 0; color: #9aa4a2; font-size: 9px; line-height: 1.7; text-align: center; }
.upload-modal { width: min(520px, calc(100% - 32px)); }
.file-drop { min-height: 72px; grid-template-columns: 38px 1fr; align-items: center; padding: 11px 13px; border: 1px dashed #c2d0cc; background: #f0f4f1; cursor: pointer; }
.file-drop input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.file-drop:focus-within { outline: 3px solid #658ca2; outline-offset: 3px; }
.file-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #dce8e2; color: #547a76; font-size: 18px; }
.file-drop strong, .file-drop small { display: block; }
.file-drop strong { color: #50666c; font-size: 11px; font-weight: 550; }
.file-drop small { margin-top: 5px; color: #98a4a3; font-size: 8px; }
.detail-modal { width: min(850px, calc(100% - 36px)); }
.detail-content { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 390px; }
.detail-media { min-height: 390px; background: #d8e1e0; }
.detail-media img, .detail-media video { display: block; width: 100%; height: 100%; min-height: 390px; max-height: 74vh; object-fit: contain; background: #d8e1e0; }
.detail-audio { display: flex; min-height: 390px; flex-direction: column; align-items: center; justify-content: center; gap: 23px; padding: 30px; background: radial-gradient(ellipse at 50% 38%, #252139, #111018 68%, #08080b); color: #e8e3f0; }
.detail-audio .audio-disc { width: min(46%, 190px); }
.detail-audio p { max-width: 100%; margin: 0; overflow-wrap: anywhere; font-size: 14px; }
.detail-audio audio { display: block; width: min(100%, 360px); height: 42px; }
.detail-copy { align-self: center; padding: 54px 36px 40px; }
.detail-note { display: grid; min-height: 390px; align-content: center; justify-items: center; gap: 15px; padding: 38px; background: #ded8ed; color: #4c536a; text-align: center; }
.detail-note span { color: #b77778; font-size: 38px; }
.detail-note p { max-width: 370px; margin: 0; font-family: var(--font-sans-cjk); font-size: 22px; line-height: 1.8; white-space: pre-wrap; }
.work-description { white-space: pre-wrap; }
.work-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid #dee4e0; }
.work-actions small { width: 100%; color: #879397; font-size: 9px; }
.route-page[hidden] { display: none; }
.inner-page .site-header { position: relative; background: #edf1f1; }
.route-page > #projects { width: min(var(--wide), calc(100% - 80px)); margin-inline: auto; }
.studio-cover { position: relative; display: flex; min-height: 470px; flex-direction: column; justify-content: end; padding: 65px max(40px, calc((100vw - var(--wide)) / 2)); background-color: #66858c; background-position: center; background-size: cover; color: #f7f4ec; isolation: isolate; }
.studio-cover::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgb(24 43 52 / 74%), rgb(24 43 52 / 8%) 78%); content: ""; }
.studio-cover h1 { margin: 12px 0; font-family: var(--font-sans-cjk); font-size: 44px; font-weight: 450; }
.studio-cover p:not(.eyebrow) { max-width: 570px; color: #eef1e9; font-size: 13px; line-height: 1.9; }
.studio-cover .eyebrow { color: #d4e2dc; }
.studio-cover .route-back, .author-heading > .route-back { position: absolute; top: 35px; left: max(40px, calc((100vw - var(--wide)) / 2)); color: inherit; font-size: 11px; }
.cover-index { position: absolute; right: max(40px, calc((100vw - var(--wide)) / 2)); bottom: 40px; display: flex; align-items: center; gap: 10px; color: #edf1e8; font-size: 10px; }
.author-heading { position: relative; padding-top: 120px; padding-bottom: 90px; }
.author-intro { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 38px; align-items: center; max-width: 900px; margin: 0 auto 72px; }
.author-avatar { width: 180px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 15px 40px rgb(53 75 80 / 15%); }
.author-intro h1 { margin: 12px 0 5px; font-family: var(--font-sans-cjk); font-size: 38px; font-weight: 500; }
.author-headline { margin: 0; color: #728087; font-size: 12px; }
.author-bio { max-width: 580px; color: #65767c; font-size: 12px; line-height: 1.9; white-space: pre-wrap; }
.author-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 17px; }
.author-work-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 19px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.author-work-heading h2 { margin: 0; font-family: var(--font-sans-cjk); font-size: 23px; font-weight: 500; }
.author-work-heading span { color: #849198; font-size: 10px; }
.project-grid:is(.author-grid,.space-works) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 28px; }
:is(.author-grid,.space-works) .project-image-button :is(img, video, .note-thumbnail, .audio-thumbnail) { aspect-ratio: 4 / 3; }
:is(.author-grid,.space-works) .project-card-title { font-size: 18px; }
.author-intro, .hero-copy, .project-card-info > div { overflow-wrap: anywhere; min-width: 0; }
.detail-copy h2 { margin: 14px 0 9px; color: #344951; font-family: var(--font-sans-cjk); font-size: 29px; font-weight: 500; }
.detail-copy > p:not(.eyebrow) { color: #728188; font-size: 11px; line-height: 1.9; }
.detail-author { display: flex; align-items: center; gap: 11px; margin-top: 25px; padding-top: 18px; border-top: 1px solid #dee4e0; }
.detail-author img { width: 43px; height: 43px; border-radius: 50%; object-fit: cover; }
.detail-author strong, .detail-author small { display: block; }
.detail-author strong { color: #425c63; font-size: 11px; }
.detail-author small { margin-top: 5px; color: #879397; font-size: 9px; }
.toast-rail { position: fixed; z-index: 40; right: 20px; bottom: 20px; display: grid; gap: 8px; pointer-events: none; }
.toast { max-width: min(360px, calc(100vw - 40px)); padding: 13px 16px; transform: translateY(8px); border: 1px solid #d1ded9; background: #f7faf6; color: #48645f; font-size: 11px; line-height: 1.6; box-shadow: 0 8px 30px rgb(30 57 58 / 13%); animation: toast-in .2s ease forwards; }
.toast.error { border-color: #ead1cb; background: #fcf5f1; color: #8c5f5e; }

.admin-page { min-height: 100vh; background: radial-gradient(ellipse at 82% 9%, #d7e7e7 0, transparent 39%), #eef1ef; }
.admin-shell { width: min(920px, calc(100% - 36px)); margin: 0 auto; padding: 44px 0 90px; }
.admin-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid #d3dcd9; }
.admin-back { color: #6c7e82; font-size: 11px; }
.admin-title { margin: 58px 0 8px; color: #31434b; font-family: var(--font-sans-cjk); font-size: 38px; font-weight: 500; }
.admin-lead { margin: 0; color: #7d8a8e; font-size: 11px; }
.admin-login { width: min(430px, 100%); margin-top: 28px; padding: 27px; border: 1px solid #d9e1de; background: #f8f9f6; }
.admin-list { margin-top: 40px; border-top: 1px solid #d4dfdb; }
.admin-list-heading { display: flex; align-items: end; justify-content: space-between; padding: 19px 0; }
.admin-list-heading h2 { margin: 0; color: #3a4f56; font-family: var(--font-sans-cjk); font-size: 22px; font-weight: 500; }
.admin-list-heading span { color: #849394; font-size: 10px; }
.application-row { display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: center; padding: 17px 0; border-bottom: 1px solid #dce3e0; }
.application-row strong, .application-row small { display: block; }
.application-row strong { color: #42575d; font-size: 12px; font-weight: 550; }
.application-row small { margin-top: 6px; color: #879496; font-size: 10px; }
.application-actions { display: flex; gap: 7px; }
.small-button { min-height: 34px; padding: 0 13px; border: 1px solid #c7d7d1; background: #e4efea; color: #446c61; font-size: 10px; cursor: pointer; transition: background .2s; }
.small-button:hover { background: #d6e8df; }
.small-button.reject { border-color: #e5d4cf; background: transparent; color: #96726e; }
.small-button.reject:hover { background: #f6eeea; }
.admin-empty { padding: 29px 0; color: #889496; font-size: 11px; }
.admin-footer { margin-top: 39px; color: #98a2a1; font-size: 9px; }

@keyframes appear { from { transform: translateY(9px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes modal-in { from { transform: translateY(12px) scale(.99); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes toast-in { to { transform: translateY(0); opacity: 1; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(84 134 135 / 0%); } 50% { box-shadow: 0 0 0 7px rgb(84 134 135 / 16%); } }
@keyframes heart { 45% { transform: scale(1.17); } }

@media (min-width: 1500px) {
  .hero-copy { margin-left: max(9vw, calc((100vw - var(--wide)) / 2)); }
}
@media (max-width: 1050px) {
  .site-header { padding-right: 34px; padding-left: 34px; }
  .section-wrap { width: calc(100% - 68px); }
  .artist-row { grid-template-columns: 140px minmax(0, 1fr) 84px; gap: 18px; }
  .artist-bio { max-width: 150px; }
  .artist-row-meta { gap: 8px; flex-direction: column; }
  .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-copy { padding-right: 42px; padding-left: 55px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 65px; }
  .site-header { height: 68px; padding: 0 19px; }
  .brand { gap: 9px; }
  .brand-seal { width: 30px; height: 30px; }
  .brand strong { font-size: 14px; }
  .brand small { font-size: 8px; }
  .main-nav { position: absolute; top: 67px; right: 12px; left: 12px; display: none; align-items: stretch; gap: 0; margin: 0; padding: 6px 14px; border: 1px solid #d9e3e2; background: rgb(246 248 245 / 97%); box-shadow: 0 12px 24px rgb(35 56 63 / 10%); }
  .main-nav.open { display: grid; }
  .main-nav a { padding: 13px 5px; border-bottom: 1px solid #e3e9e6; }
  .main-nav a:last-child { border-bottom: 0; }
  .header-actions { gap: 10px; }
  .text-action { font-size: 10px; }
  .icon-link { width: 30px; height: 30px; }
  .mobile-menu { display: grid; }
  .hero { min-height: 720px; height: 90svh; max-height: 850px; align-items: start; }
  .hero::before { background: linear-gradient(180deg, rgb(230 238 240 / 96%) 0%, rgb(230 238 240 / 88%) 33%, rgb(230 238 240 / 24%) 63%, transparent 100%); }
  .hero-copy { width: auto; margin: 133px 26px 0; }
  .hero h1 { margin-top: 27px; font-size: 54px; }
  .hero-copy h1 { font-size: clamp(34px, 9.8vw, 54px); }
  .hero-motto { max-width: 300px; font-size: 16px; }
  .hero-description { margin-top: 12px; font-size: 11px; }
  .hero-actions { gap: 4px; margin-top: 18px; }
  .button { min-height: 43px; padding: 0 13px; font-size: 10px; }
  .hero-note { right: 24px; bottom: 85px; }
  .scroll-cue { bottom: 28px; left: 22px; }
  .hero-index { right: 20px; bottom: 29px; font-size: 8px; }
  .section-wrap { width: calc(100% - 40px); }
  .artists { padding-top: 74px; padding-bottom: 74px; }
  .section-heading { align-items: start; gap: 16px; margin-bottom: 28px; }
  .section-heading h2 { margin-top: 12px; font-size: 31px; }
  .heading-aside { font-size: 10px; }
  .section-intro { display: none; }
  .artist-row { grid-template-columns: 72px minmax(0, 1fr); gap: 11px 13px; padding: 19px 0 22px; }
  .artist-profile { grid-row: 1; grid-column: 1 / -1; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; }
  .avatar-button { width: 54px; height: 54px; grid-row: 1 / 3; }
  .artist-name { align-self: end; margin: 0 0 3px; font-size: 17px; }
  .artist-role { align-self: start; }
  .artist-bio { grid-column: 2; max-width: none; margin-top: 4px; font-size: 10px; }
  .artist-work-grid { grid-column: 1 / -1; gap: 8px; }
  .mini-work img, .mini-work video, .mini-work .note-thumbnail { aspect-ratio: .76 / 1; }
  .mini-caption { right: 7px; bottom: 7px; left: 7px; display: block; }
  .mini-caption strong { display: block; font-size: 9px; }
  .mini-caption small { display: block; margin-top: 3px; font-size: 7px; }
  .artist-row-meta { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; margin-top: -2px; }
  .join-strip { gap: 9px; margin-top: 22px; padding: 12px; }
  .join-strip p { font-size: 12px; }
  .project-feature { grid-template-columns: 1fr; }
  .feature-art { min-height: 310px; }
  .feature-copy { min-height: 330px; padding: 44px 29px 53px; }
  .feature-copy h2 { margin-top: 18px; font-size: 37px; }
  .feature-lead { font-size: 14px; }
  .feature-small { margin: 13px 0 21px; }
  .feature-squiggle { right: 26px; bottom: 20px; font-size: 54px; }
  .projects { padding-top: 74px; padding-bottom: 76px; }
  .project-heading { align-items: end; margin-bottom: 25px; }
  .project-heading .eyebrow { max-width: 220px; font-size: 8px; }
  .upload-entry { gap: 6px; min-height: 37px; padding: 0 9px; white-space: nowrap; }
  .project-toolbar { display: block; padding-bottom: 12px; }
  .filter-list { gap: 4px; }
  .filter-chip { min-height: 29px; padding: 0 8px; font-size: 9px; }
  .collection-count { display: block; padding-top: 11px; text-align: right; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 11px; padding-top: 16px; }
  .project-card-info { gap: 5px; padding-top: 9px; }
  .project-card-title { font-size: 12px; }
  .project-card-desc { font-size: 8px; }
  .project-card-artist { align-items: center; gap: 4px; font-size: 8px; }
  .project-card-artist img { width: 19px; height: 19px; }
  .route-page > #projects { width: calc(100% - 40px); }
  .studio-cover { min-height: 390px; padding: 75px 24px 65px; }
  .studio-cover h1 { font-size: 34px; }
  .studio-cover .route-back { left: 24px; top: 25px; }
  .cover-index { right: 24px; bottom: 25px; }
  .author-heading { padding-top: 85px; padding-bottom: 60px; }
  .author-heading > .route-back { top: 25px; left: 0; }
  .author-intro { grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 18px; margin-bottom: 42px; }
  .author-avatar { width: 76px; }
  .author-intro h1 { font-size: 29px; }
  .author-actions { gap: 8px; }
  .collection-end { margin-top: 38px; font-size: 11px; }
  .about-band { grid-template-columns: 1fr; }
  .about-copy { width: calc(100% - 56px); justify-self: start; padding: 66px 0 58px; margin-left: 28px; }
  .about-copy h2 { font-size: 33px; }
  .about-image { min-height: 320px; }
  .about-margin { top: 31px; bottom: auto; left: auto; right: 18px; font-size: 7px; }
  .about-orbit { top: 34px; left: auto; right: 18%; }
  .site-footer { min-height: 140px; flex-wrap: wrap; padding: 21px 20px; }
  .footer-brand { flex: 1 0 45%; }
  .site-footer > p { order: 3; flex: 1 0 100%; }
  .site-footer > p span { display: inline; margin-left: 8px; }
  .back-top { margin-left: auto; }
  .modal-content { padding: 41px 23px 26px; }
  .detail-content { grid-template-columns: 1fr; }
  .detail-media { min-height: 260px; }
  .detail-audio { min-height: 250px; padding: 24px; }
  .detail-audio .audio-disc { width: 112px; }
  .detail-media img, .detail-media video { min-height: 260px; max-height: 55vh; }
  .detail-copy { padding: 28px 24px 27px; }
  .admin-shell { padding-top: 23px; }
  .admin-title { margin-top: 42px; font-size: 32px; }
  .application-row { grid-template-columns: 1fr; }
  .application-actions { justify-content: start; }
}
/* Night gallery: artwork provides the colour; the interface stays quiet. */
body { background: #000; }
.site-header { height: 90px; border-color: rgb(255 255 255 / 9%); color: var(--ink); background: linear-gradient(#0009, transparent); }
.brand { gap: 11px; white-space: nowrap; }
.brand-crystal { display: block; flex: 0 0 auto; width: 72px; height: auto; transition: filter .2s ease, transform .2s var(--ease-settle); }
.brand .brand-label { color: #d9dbe5; font-family: "CAGA Qihei", "Microsoft YaHei", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .2px; }
.brand:hover .brand-crystal { filter: brightness(1.15) drop-shadow(0 0 5px #9cdcf43d); }
.brand:active .brand-crystal { transform: scale(.97); }
.brand strong { font-size: 15px; letter-spacing: 2px; }
.brand small { color: #9596ab; font-size: 8px; letter-spacing: 2px; }
.brand-seal, .brand-seal::before, .brand-seal::after { border-color: #b8b0d2; }
.brand-seal span { background: #b6e3e8; box-shadow: 0 0 12px #8bdce66b; }
.main-nav a, .text-action { color: #c2c3d2; }
.main-nav a:hover, .text-action:hover, .artist-name:hover, .project-card-title:hover, .back-top:hover { color: #a0e5ec; }
.icon-link { border-color: #ffffff29; color: #b6b4ce; }
.icon-link:hover { background: #ffffff10; }
.hero { min-height: 740px; height: min(940px, 96svh); max-height: none; align-items: center; justify-content: center; background: #000; }
#world { z-index: -2; cursor: default; }
.hero::before { background: linear-gradient(180deg, #0006, #0000 24%, #0000 60%, #000 100%); }
.hero-grain { display: none; }
.hero-copy { width: min(760px, calc(100% - 52px)); margin: 0; padding: 0 0 56px; text-align: center; pointer-events: none; animation: none; }
.hero-copy .eyebrow { justify-content: center; color: #c2bdde; font-size: 10px; font-weight: 400; letter-spacing: 3px; }
.eyebrow-dot { width: 5px; height: 5px; background: #a6e5f0; box-shadow: 0 0 15px #7bcbff9c; }
.eyebrow-line { background: #a5a8cc66; }
.hero h1 { display: grid; justify-items:center; align-content:center; place-content: center; width: 100%; height: clamp(125px, 22vw, 240px); margin: 0 0 38px; color: #b9e5ef; font-family: "Courier New", monospace; font-size: 120px; font-weight: 900; line-height: .95; letter-spacing: 0; text-indent: 0; text-shadow: 0 0 35px #9278d866; }
.hero h1 span { display:block;width:100%;text-align:center; background: linear-gradient(110deg, #8ae9f0, #a4baff 38%, #deacec 67%, #c1f3f1); background-clip: text; -webkit-background-clip: text; color: transparent; }
.hero h1 span + span { font-size: .444444em; line-height:1; }
.hero.has-voxel-title h1 { opacity: 0; }
/* Remove the fallback paint layer, including clipped gradient text on mobile.
   The fixed-size h1 remains the geometry anchor and keeps its accessible name. */
.hero.has-voxel-title h1 > .pixel-title-fallback { display: none; }
.pixel-title-fallback { display: block; width: 100%; height: 100%; pointer-events: none; }
.hero h1 > .pixel-title-fallback { width: calc(100% - 24px); height: 100%; }
.hero h1 > .sr-only { width: 1px; }
@font-face {
  font-family: "CAGA Qihei";
  src: local("HYQiHei-75S"), local("HYQiHei-75S Bold"), local("汉仪旗黑-75S"), local("汉仪旗黑-75S Bold");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.hero-motto { margin: 0 auto; max-width: 650px; color: #fff; font-family: "CAGA Qihei", "Microsoft YaHei", "PingFang SC", sans-serif; font-weight: 700; font-size: 18px; line-height: 1.9; letter-spacing: 1.2px; text-wrap: balance; text-shadow: 0 2px 18px #000; }
.hero-description { max-width: 480px; margin: 20px auto 0; color: #b2b1c9; font-size: 12px; line-height: 2; letter-spacing: 1px; }
.hero-actions { justify-content: center; gap: 16px; margin-top: 34px; }
.hero-actions > * { pointer-events: auto; }
.button { border-radius: 3px; min-height: 46px; transition: transform .25s cubic-bezier(.2, 1.7, .45, 1), background .2s, border-color .2s, box-shadow .2s; }
.button-ink { color: #ecebf7; border: 1px solid #9b95c166; background: #252135; box-shadow: 0 0 25px #8d75c210; }
.button-ink:hover { background: #373148; border-color: #c2aad4; box-shadow: 0 0 26px #b38fe726; }
.hero .button-ink { border-color: #e9dcff55; background: #c9b8e71c; backdrop-filter: blur(8px); border-radius: 30px; min-width: 180px; }
.hero .button-quiet { border-radius: 30px; }
.button-quiet { color: #aaaac1; }
.button-quiet:hover { color: #e2e1ee; background: #ffffff09; }
.button-outline { color: #c5c4d8; border-color: #7a769566; }
.button-outline:hover { color: #e9ecfb; background: #ffffff09; border-color: #a8a1bb; }
.plus-mark, .strip-star { color: #b8a0d5; }
.hero-note { right: 5vw; bottom: 91px; color: #9995b4; font-size: 9px; letter-spacing: 2px; }
.hero-note i { background: #a49ac555; }
.hero-index { right: 5vw; bottom: 31px; color: #8f8fa7; letter-spacing: 1.8px; }
.scroll-cue { left: 5vw; color: #a8a4bd; letter-spacing: 2px; }
.scroll-dot { border-color: #a9bdd3; }
.hero-controls { position: absolute; bottom: 82px; left: 5vw; display: flex; align-items: center; gap: 10px; }
.background-switch { display: flex; gap: 3px; padding: 4px; border: 1px solid #ffffff20; border-radius: 24px; background: #080b12b8; }
.background-switch button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 13px; border: 0; border-radius: 20px; background: transparent; color: #858c9d; font-size: 11px; letter-spacing: .5px; cursor: pointer; transition: color .2s, background .2s, transform .2s; }
.background-switch button[aria-pressed="true"] { background: #c3d8ff17; color: #e1e9f6; }
.background-switch button:hover { color: #e9f6ff; background: #c3d8ff12; }
.background-switch button:active { transform: scale(.95); }
.background-symbol { position: relative; display: block; width: 12px; height: 12px; flex: 0 0 auto; opacity: .7; }
.nebula-symbol { border: 1px solid currentColor; border-radius: 50%; transform: rotate(-35deg) scaleY(.65); box-shadow: inset 0 0 0 3px #080b12; background: currentColor; }
.sand-symbol { width: 3px; height: 3px; margin: 0 8px 8px 1px; background: currentColor; box-shadow: 5px 0 currentColor, 0 5px currentColor, 5px 5px currentColor, 10px 8px currentColor; }
.motion-toggle { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid #ffffff20; border-radius: 50%; padding: 0; background: #080b12b8; color: #a8b1c4; font-size: 12px; cursor: pointer; }
.grain-size { display: flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 12px; flex: 0 0 auto; border: 1px solid #ffffff20; border-radius: 24px; background: #080b12b8; color: #a8b1c4; font-size: 11px; cursor: pointer; transition: color .2s, border-color .2s, transform .2s; }
.grain-size[hidden] { display: none; }
.grain-size:hover { border-color: #a1cbd288; color: #e1eff7; }
.grain-size:active { transform: scale(.96); }
.grain-size-icon { width: 7px; height: 7px; background: currentColor; opacity: .8; transition: transform .2s; }
.grain-size[data-size="fine"] .grain-size-icon { transform: scale(.65); }
.grain-size[data-size="coarse"] .grain-size-icon { transform: scale(1.35); }
.grain-size[data-size="large"] .grain-size-icon { transform: scale(1.6); }
.motion-toggle:hover { border-color: #a1cbd288; color: #e1eff7; }
.motion-toggle:active { transform: scale(.96); }
.section-wrap { width: min(1250px, calc(100% - 112px)); }
.artists { padding-top: 88px; padding-bottom: 100px; }
.eyebrow-dark { color: #87829e; font-size: 9px; font-weight: 400; letter-spacing: 2px; }
.section-heading h2 { color: #e3e1ed; font-size: 36px; letter-spacing: 2px; }
.heading-aside { margin-left: 8px; color: #9590a6; font-size: 12px; letter-spacing: 1px; }
.section-intro { color: #9290a3; font-size: 11px; }
.artist-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 54px; border: 0; }
.artist-row { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 21px; min-width: 0; padding: 24px 0 20px; border-top: 1px solid var(--line); border-bottom: 0; }
.artist-profile { grid-row: auto; grid-column: auto; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 32px 25px auto; align-items: center; column-gap: 18px; }
.avatar-button { grid-row: 1 / 3; grid-column: 1; width: 58px; height: 58px; border: 1px solid #ffffff26; background: #12141d; }
.avatar-button:hover { transform: scale(1.06); box-shadow: 0 0 24px #a387cb33; }
.artist-name { grid-column: 2; align-self: end; margin: 0; color: #e6e4ef; font-size: 22px; line-height: 1.4; }
.artist-role { grid-column: 2; align-self: center; color: #aaa4ba; font-size: 10px; letter-spacing: .7px; }
.artist-bio { grid-column: 1 / -1; max-width: none; min-height: 40px; margin: 16px 0 0; color: #9694a8; font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.artist-work-grid { grid-column: auto; gap: 11px; }
.mini-work { border-radius: 5px; background: #101019; aspect-ratio: .72; transition: transform .3s cubic-bezier(.2, 1.5, .4, 1), box-shadow .3s; }
.mini-work img, .mini-work video, .mini-work .note-thumbnail { width: 100%; height: 100%; aspect-ratio: .72; }
.mini-work:hover { transform: translateY(-5px); box-shadow: 0 12px 28px #7163ad16; }
.mini-work::after { inset: 35% 0 0; background: linear-gradient(transparent, #03040bc9); }
.mini-caption { display: block; bottom: 13px; right: 12px; left: 12px; }
.mini-caption strong { display: block; font-size: 12px; font-weight: 400; }
.mini-caption small { display: block; margin-top: 6px; font-size: 9px; color: #c8c2d8; }
.artist-row-meta { grid-column: auto; flex-direction: row; justify-content: space-between; margin: -8px 0 0; }
.work-count { color: #9690a8; font-size: 10px; }
.like-button { border-color: #ffffff20; border-radius: 30px; color: #ada4bb; }
.like-button span:first-child { color: #c997c4; }
.like-button:hover, .like-button[aria-pressed="true"] { color: #edcbe7; background: #b57aa21a; border-color: #be87ad77; }
.join-strip { background: #09090f; border-color: #23212d; border-radius: 5px; padding: 18px 22px; }
.join-strip p { color: #aaa1bb; font-size: 13px; }
.arrow-button { border-color: #63557670; }
.arrow-button:hover { background: #272035; }
.project-feature { background: #09090e; border-block: 1px solid #1b1923; }
.feature-art { background-color: #10111c; }
.feature-art::after { border: 0; background: linear-gradient(90deg, #0000 55%, #09090e 100%); }
.feature-stamp { border-color: #e8defa88; color: #e8defa; background: #0004; }
.feature-copy h2 { color: #e2ddee; }
.feature-lead { color: #bfb5ce; }
.feature-small { color: #9b92ac; }
.feature-squiggle { display: none; }
.upload-entry { border-color: #332c41; }
.filter-chip { color: #a19aac; border-radius: 20px; }
.filter-chip:hover { color: #dbd1e6; background: #1c1726; }
.filter-chip.active { border-color: #8a78994d; background: #251e30; color: #dbcaea; }
.project-image-button { background: #14111d; border-radius: 5px; }
.project-card-title { color: #d9d4e3; }
.project-card-desc, .project-card-artist, .collection-count { color: #9691a3; }
.project-card-artist:hover { color: #a7dfe6; }
.collection-end { color: #787383; }
.collection-end span { background: #29242f; }
.note-thumbnail, .detail-note { background: linear-gradient(140deg, #1b1728, #10111d); color: #d4c7e3; }
.note-thumbnail > span:last-child { color: #b0a4c1; }
.work-placeholder { background: #0b0a11; color: #84768f; border-color: #302739; min-height: 0; }
.work-placeholder > span { color: #ae90c1; }
.about-band { background: #07070c; border-block: 1px solid #20202b; }
.about-copy h2 { color: #e5deef; }
.about-copy h2 span { color: #b2a1d6; }
.about-copy > p:not(.eyebrow) { color: #a59cb8; }
.about-copy .eyebrow { color: #a29ab6; }
.about-link { border-color: #6d5a82; color: #c3b5d5; }
.about-image { background-color: #000; background-image: radial-gradient(ellipse at 65% 48%, #111427 0, #080810 30%, #000 72%); }
.about-image::before { background: linear-gradient(90deg, #07070c, #07070c33 70%), linear-gradient(0deg, #07070c, transparent 60%); }
.about-orbit { border-color: #ba9ad329; }
.about-orbit span { background: #ad93cd; }
.site-footer, .inner-page .site-header { background: #000; }
.site-footer > p { color: #9e93ad; }
.site-footer > p span, .back-top { color: #898195; }
.modal { background: #111019; color: var(--ink); border-color: #3c344c; border-radius: 10px; box-shadow: 0 30px 100px #000a; }
.modal::backdrop { background: #000a; backdrop-filter: blur(5px); }
.modal-close { color: #c9bfd7; background: #18141f; border-color: #3a3147; }
.modal-close:hover { color: white; }
.modal-subtitle { color: #a294b1; }
.segmented { border-color: #3a3147; background: #0b0a12; border-radius: 5px; }
.segment { color: #a397b3; }
.segment.active { color: #e0d5ed; background: #31283f; box-shadow: none; }
.stack-form > label { color: #c2b7d0; font-size: 11px; }
.stack-form input:not([type=file]), .stack-form textarea, .stack-form select { background: #090810; color: #e7e0ed; border-color: #3a3147; border-radius: 4px; }
.stack-form input::placeholder, .stack-form textarea::placeholder { color: #887994; }
.form-message { color: #9fd6cb; }
.form-message.error { color: #eda1bc; }
.privacy-note, .file-drop small { color: #a294b1; }
.file-drop { background: #16111f; border-color: #594567; border-radius: 4px; }
.file-icon { background: #2b2039; color: #c5a7df; }
.file-drop strong { color: #cbb9dd; }
.detail-media, .detail-media img, .detail-media video { background: #050508; }
.audio-thumbnail { position: relative; display: grid; width: 100%; height: 100%; aspect-ratio: .76 / 1; align-content: center; justify-items: center; gap: 16px; overflow: hidden; background: radial-gradient(ellipse at 50% 43%, #27243d 0, #151321 48%, #09090e 100%); color: #d8d7ec; }
.audio-thumbnail::before { position: absolute; inset: 0; background: linear-gradient(145deg, #9a87df15, transparent 42%, #8ddde40b); content: ""; }
.audio-disc { position: relative; display: block; width: clamp(94px, 42%, 170px); aspect-ratio: 1; border: 1px solid #cbd1e45e; border-radius: 50%; background: repeating-radial-gradient(circle, #101017 0 3px, #ffffff12 3.5px 4px, #151523 4.5px 7px); box-shadow: 0 0 38px #a99de222, inset 0 0 22px #a6b8e11a; }
.audio-disc::after { position: absolute; inset: 43%; border: 1px solid #eef0ff99; border-radius: 50%; background: radial-gradient(circle, #e3d9f4 0 15%, #9186b1 18% 35%, #211d2e 38% 100%); content: ""; }
.audio-wave { display: block; width: min(62%, 210px); height: 24px; background: repeating-linear-gradient(90deg, #a9a0d6 0 2px, transparent 2px 7px); clip-path: polygon(0 44%, 4% 44%, 4% 29%, 8% 29%, 8% 57%, 12% 57%, 12% 17%, 16% 17%, 16% 76%, 20% 76%, 20% 36%, 24% 36%, 24% 59%, 28% 59%, 28% 8%, 32% 8%, 32% 89%, 36% 89%, 36% 43%, 40% 43%, 40% 28%, 44% 28%, 44% 69%, 48% 69%, 48% 15%, 52% 15%, 52% 82%, 56% 82%, 56% 38%, 60% 38%, 60% 56%, 64% 56%, 64% 23%, 68% 23%, 68% 75%, 72% 75%, 72% 35%, 76% 35%, 76% 61%, 80% 61%, 80% 11%, 84% 11%, 84% 88%, 88% 88%, 88% 40%, 92% 40%, 92% 54%, 96% 54%, 96% 30%, 100% 30%, 100% 70%, 0 70%); opacity: .83; }
.audio-label { color: #a8a2bf; font-size: 8px; letter-spacing: 1.4px; }
.project-image-button .audio-thumbnail { height: auto; aspect-ratio: 1.05 / .91; }
.mini-work .audio-thumbnail { height: auto; aspect-ratio: .76 / 1; }
.detail-audio { background: radial-gradient(ellipse at 50% 38%, #201b32, #0e0d14 68%, #050507); }
.detail-copy h2, .detail-author strong { color: #ddd1ed; }
.detail-copy > p:not(.eyebrow), .author-bio, .author-headline { color: #b2a4c1; }
.detail-author, .work-actions { border-color: #30263c; }
.studio-cover { background-color: #09070f; }
.studio-cover::before { background: linear-gradient(0deg, #000e, #0002); }
.toast { background: #1a1422; color: #d3c7e0; border-color: #53415f; }
.toast.error { background: #281621; color: #edb4d1; border-color: #794357; }
.admin-page { background: #000; }
.admin-title, .admin-list-heading h2 { color: #e0d6ed; }
.admin-login { background: #100d18; border-color: #30263c; border-radius: 8px; }
.admin-list { border-color: #30263c; }
.admin-lead, .admin-back, .admin-empty { color: #a99cb9; }
.small-button { background: #18312d; border-color: #42685d; color: #b8d9cd; }
.small-button:hover { background: #25453c; }
.small-button.reject { border-color: #604051; color: #d6a5be; }
.small-button.reject:hover { background: #321c2a; }
.admin-card, .application-row { background: #0e0b15; border-color: #30263c; }
.admin-top, .admin-card h2, .application-row strong { color: #e0d6ed; border-color: #30263c; }
.admin-subtitle, .admin-footer, .application-row small, .application-row p { color: #aa99ba; }
/* Stable hit areas, short presses, and soft returns across the shared UI. */
:root { --ease-settle: cubic-bezier(.22, .68, .25, 1); }
.button, .avatar-button, .like-button, .arrow-button, .icon-link, .modal-close,
.motion-toggle, .filter-chip, .segment, .small-button {
  transition: transform .28s var(--ease-settle), background-color .24s ease, border-color .24s ease, color .2s ease, box-shadow .3s ease;
}
.button:hover { transform: translateY(-1px); }
.avatar-button:hover { transform: scale(1.025); box-shadow: 0 0 0 3px #a387cb13, 0 0 22px #7b8fd524; }
.arrow-button:hover, .icon-link:hover, .modal-close:hover { transform: none; }
.like-button span:first-child { display: inline-block; }
.like-button[aria-pressed="true"] span:first-child { animation-timing-function: var(--ease-settle); }
.mini-work, .project-image-button {
  isolation: isolate;
  transform: none;
  transition: box-shadow .32s ease;
}
.mini-caption { z-index: 3; }
.mini-work:hover, .project-image-button:hover { transform: none; box-shadow: 0 6px 24px #05081255; }
.mini-work img, .mini-work video, .project-image-button img, .project-image-button video {
  transition: transform .5s var(--ease-settle), filter .25s ease;
}
.mini-work:hover img, .mini-work:hover video, .project-image-button:hover img, .project-image-button:hover video { transform: scale(1.025); }
.mini-work::before, .project-image-button::before {
  content: ""; position: absolute; z-index: 2; inset: -45%; pointer-events: none;
  background: radial-gradient(ellipse at center, #c5daf31a 0%, #b2b8f209 28%, transparent 58%);
  opacity: 0; transform: translate(var(--light-x, 0%), var(--light-y, 0%));
  transition: opacity .4s ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .is-pointer-lit::before { opacity: 1; }
  .is-pointer-lit img, .is-pointer-lit video {
    transform: perspective(700px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1.035);
    transition: transform .09s linear, filter .25s ease;
  }
}
.button:active, .avatar-button:active, .like-button:active, .arrow-button:active,
.icon-link:active, .modal-close:active, .motion-toggle:active, .filter-chip:active,
.segment:active, .small-button:active { transform: scale(.975); transition-duration: .08s; }
.mini-work:active, .project-image-button:active { transform: none; }
.mini-work:active img, .mini-work:active video, .project-image-button:active img, .project-image-button:active video {
  transform: scale(1.012); filter: brightness(.9); transition-duration: .09s;
}
.text-action, .artist-name, .project-card-title, .main-nav a { transition: color .2s ease, opacity .15s ease; }
.text-action:active, .artist-name:active, .project-card-title:active, .main-nav a:active { opacity: .7; }
@media (hover: none) {
  .button:hover, .avatar-button:hover { transform: none; }
  .mini-work:hover img, .mini-work:hover video, .project-image-button:hover img, .project-image-button:hover video { transform: none; }
  .button:active, .avatar-button:active { transform: scale(.975); }
}
@media (prefers-reduced-motion: reduce) {
  .mini-work img, .mini-work video, .project-image-button img, .project-image-button video { transform: none !important; }
  .mini-work::before, .project-image-button::before { display: none; }
  .button, .avatar-button, .like-button, .arrow-button, .icon-link, .modal-close,
  .motion-toggle, .filter-chip, .segment, .small-button { transform: none !important; }
}
@media (max-width: 1050px) {
  .section-wrap { width: calc(100% - 64px); }
  .artist-list { gap: 30px; }
  .hero h1 { font-size: 76px; }
  .about-copy { width: calc(100% - 64px); padding-left: 0; }
  .about-copy h2 { font-size: clamp(26px, 3.2vw, 34px); }
}
@media (max-width: 760px) {
  .site-header { height: 68px; padding-inline: 20px; }
  .brand strong { font-size: 13px; letter-spacing: 1px; }
  .brand small { font-size: 7px; letter-spacing: 1px; }
  .main-nav { background: #100c19f7; border-color: #30263c; }
  .main-nav a { border-color: #30263c; }
  .section-wrap { width: calc(100% - 40px); }
  .hero { min-height: 700px; height: 94svh; }
  .hero-copy { margin: 0; padding: 0 0 36px; width: calc(100% - 42px); }
  .hero-copy .eyebrow { gap: 8px; font-size: 8px; letter-spacing: 1.2px; }
  .hero h1 { height: clamp(118px, 25vw, 185px); margin: 0 0 30px; font-size: 68px; letter-spacing: 0; text-indent: 0; }
  .hero-motto { max-width: 570px; font-size: 16px; letter-spacing: .6px; }
  .hero-description { max-width: 280px; margin-top: 17px; font-size: 11px; }
  .hero-actions { gap: 8px; margin-top: 27px; }
  .hero .button-ink { min-width: 154px; }
  .hero-note { right: 20px; bottom: 90px; font-size: 8px; letter-spacing: 1px; }
  .hero-index { right: 20px; font-size: 7px; letter-spacing: 1px; }
  .scroll-cue { left: 20px; font-size: 9px; letter-spacing: 1px; }
  .hero-controls { left: 20px; bottom: 108px; gap: 6px; }
  .hero-controls .background-switch button { padding: 0 9px; gap: 6px; }
  .grain-size { padding: 0 9px; gap: 5px; }
  .grain-size-icon { width: 6px; height: 6px; }
  .hero-note { bottom: 76px; }
  .artists { padding-top: 62px; padding-bottom: 65px; }
  .section-heading h2 { font-size: 30px; }
  .heading-aside { font-size: 10px; margin-left: 3px; }
  .artist-list { gap: 27px; }
  .artist-profile { grid-template-columns: 54px minmax(0, 1fr); column-gap: 12px; }
  .avatar-button { width: 51px; height: 51px; }
  .artist-name { font-size: 20px; }
  .artist-work-grid { gap: 8px; }
  .mini-caption { left: 9px; right: 7px; bottom: 10px; }
  .mini-caption strong { font-size: 10px; }
  .mini-caption small { font-size: 8px; }
  .feature-art::after { background: linear-gradient(0deg, #09090e, #09090e00 65%); }
  .about-image::before { background: linear-gradient(180deg, #07070c, #07070c33 60%); }
}
@media (max-width: 599px) and (orientation: portrait), (max-width: 499px) {
  .artist-list { grid-template-columns: minmax(0, 1fr); }
  .brand-crystal { width: 60px; }
  .brand .brand-label { font-size: 10px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .hero-motto { max-width: 340px; font-size: 14px; line-height: 1.8; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .brand:active .brand-crystal { transform: none; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* CAGA PORTFOLIO editorial typography and dynamic project collection. */
body { font-family: var(--font-sans-cjk); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font-family: inherit; }
.section-heading h2, .author-heading h1, .author-work-heading h2, .modal h2, .admin-title, .admin-list-heading h2 { font-weight: 600; letter-spacing: .02em; }
.artist-name { font-weight: 600; letter-spacing: .02em; }
.artist-bio, .section-intro { font-size: 12px; line-height: 1.9; }
.artist-role { font-size: 11px; }
.project-card-title { font-weight: 500; }
.project-card-desc { line-height: 1.7; }
.join-strip p { font-family: var(--font-sans-cjk); }
.about-copy h2 { font-weight: 500; letter-spacing: .02em; line-height: 1.6; }
.studio-projects { padding-block: clamp(54px,7vw,100px) 64px; }
.studio-project-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(52px,7vw,96px); }
.studio-project-card { min-width: 0; color: #eeedf5; }
.project-console { position:relative; isolation:isolate; width:100%; aspect-ratio:2.38 / 1; background:transparent; user-select:none; -webkit-user-select:none; }
.console-model,.console-particles { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; display:block; }
.console-model { z-index:0; }
.console-particles { z-index:3; }
.studio-project-art { position:absolute; left:15.35%; top:5.1%; width:69.3%; height:89.5%; display:block; overflow:hidden; cursor:pointer; }
.studio-project-art img { display:block; width:100%; height:100%; object-fit:cover; }
.is-model-ready .studio-project-art img { opacity:0; }
.console-hit { position:absolute; z-index:2; display:none; padding:0; margin:0; min-width:0; min-height:0; border:0; border-radius:0; background:transparent; box-shadow:none; touch-action:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.is-model-ready .console-hit { display:block; }
.console-hit[data-console-stick] { cursor:grab; }
.console-hit.is-held[data-console-stick] { cursor:grabbing; }
.console-hit:focus-visible { outline:1px solid #d4e7ec; outline-offset:4px; }
.studio-project-art:focus-visible { outline:none; box-shadow:inset 0 0 0 2px #d4e7ec; }
.studio-project-caption { display:block; padding:28px 2px 12px; border:0; }
.studio-project-caption > div { min-width:0; display:block; }
.studio-project-caption h3 { margin:0; font-family:"CAGA Qihei",var(--font-sans-cjk); font-size:clamp(24px,2.4vw,34px); font-weight:600; line-height:1.35; letter-spacing:.02em; overflow-wrap:anywhere; }
.studio-project-caption h3 a { color:inherit; text-decoration:none; }
.studio-project-caption h3 a:hover { color:#bdefff; }
.studio-project-caption p { color:#a4acb8; font-size:14px; line-height:1.9; margin:12px 0 0; overflow-wrap:anywhere; max-width:46em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.studio-directory { padding-top: 38px; padding-bottom: 55px; }
.studio-directory h1, .project-detail h1 { color: #efedf7; font-size: clamp(28px,3vw,42px); font-weight: 600; letter-spacing: .02em; margin: 14px 0 0; }
.studio-directory .section-heading { margin-top: 32px; }
.project-detail { padding-top: 36px; padding-bottom: 18px; }
.project-detail-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 28px; border-radius: 8px; background: #11121a; }
.project-detail-copy { display: flex; justify-content: space-between; align-items: start; gap: 40px; padding-block: 36px; }
.project-detail-copy > div { max-width: 780px; min-width: 0; }
.project-detail-copy .button { flex-shrink: 0; margin-top: 15px; }
.project-detail-description { color: #b2afc2; line-height: 1.95; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.project-author { color: #8e8fa6; font-size: 12px; }
.my-projects { margin-top: 58px; border-top: 1px solid #ffffff18; padding-top: 24px; }
.publication-note { color: #9996ac; font-size: 12px; line-height: 1.9; }
.my-project-row { display: grid; grid-template-columns: 100px minmax(0,1fr) auto; align-items: center; gap: 20px; padding-block: 20px; border-bottom: 1px solid #ffffff12; }
.my-project-row img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.my-project-row strong { font-size: 14px; color: #d9d8e7; font-weight: 500; }
.my-project-row p { color: #9693a8; font-size: 12px; line-height: 1.8; margin: 6px 0 0; overflow-wrap: anywhere; }
.review-status { font-size: 12px; color: #c1abde; white-space: nowrap; }
.review-status[data-status="approved"] { color: #98c8d1; }
.review-status[data-status="rejected"] { color: #d0a6b3; }
.project-review-row { display: grid; grid-template-columns: minmax(140px,220px) minmax(0,1fr); gap: 24px; padding-block: 26px; border-bottom: 1px solid #ffffff18; }
.project-review-row img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; }
.project-review-row h3 { margin: 0 0 8px; color: #e3e0ee; font-weight: 600; font-size: 20px; }
.project-review-row small { color: #9390a5; }
.project-review-row p { color: #b1acbf; font-size: 13px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.project-admin > .button { margin-top: 22px; }
.stack-form input[readonly] { color: #9693a8; background: #ffffff04; }
@media (max-width: 760px) {
  .studio-projects { padding-bottom: 50px; }
  .studio-project-grid { gap: 46px; }
  .studio-project-caption { padding:20px 0 24px; }
  .studio-project-caption h3 { font-size: 20px; }
  .studio-project-caption p { font-size: 12px; }
  .project-detail-copy { flex-direction: column; gap: 10px; padding-block: 24px; }
  .project-detail-copy .button { margin-top: 0; }
  .project-review-row { grid-template-columns: 140px minmax(0,1fr); gap: 18px; }
}
@media (max-width: 599px) {
  .studio-project-grid { grid-template-columns: minmax(0,1fr); }
  .studio-projects .section-heading { align-items: start; gap: 20px; flex-direction: column; }
  .studio-projects h2 { font-size: 27px; }
  .studio-projects .heading-aside { display: block; margin: 12px 0 0; }
  .studio-directory .section-heading { align-items: start; flex-direction: column; gap: 18px; }
  .project-review-row { grid-template-columns: minmax(0,1fr); }
  .my-project-row { grid-template-columns: 78px minmax(0,1fr); gap: 14px; }
  .my-project-row .review-status { grid-column: 2; white-space: normal; }
  .my-projects .author-work-heading { align-items: start; flex-direction: column; gap: 12px; }
}

@media (max-width: 420px) {
  .hero-index { display: none; }
}

/* Archive index and per-project handheld controls */
.portfolio-index-link { display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 30px;padding-block:64px 78px;border:0; }
.portfolio-index-link .eyebrow { grid-column:1/-1;margin:0;color:#8493a5; }
.portfolio-index-link>a { color:#e1e9f2;font-size:21px;text-decoration:none; }
.portfolio-index-link>a span { color:#9cc9d4;padding-left:8px; }
.portfolio-index-link>p { margin:0;color:#8996a7;font-size:12px; }
.index-back { padding-top:34px; }
.project-credits { display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:8px 14px;margin-top:22px; }
.credits-label,.project-credits>small { color:#8d9aaa;font-size:11px; }
.credits-list { display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px; }
.credit-link { display:inline-flex;align-items:center;gap:8px;color:#c7d8e2;text-decoration:none;font-size:12px; }
.credit-link:hover { color:#effcff; }
.credit-link img { width:28px;height:28px;object-fit:cover;clip-path:circle(50%); }
.credit-name,.credit-empty { color:#b2c1ce;font-size:12px; }
.project-credits>small { grid-column:2;line-height:1.7; }
.project-open-link { align-self:center;color:#a8c9d9;font-size:12px;text-decoration:none;white-space:nowrap; }
.project-open-link:hover { color:#effcff; }
.console-gallery-toolbar { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 2px 0;color:#93a4b3;font-variant-numeric:tabular-nums; }
.console-gallery-status { font-size:11px; }
.console-guide { position:relative;z-index:4; }
.console-guide summary { color:#a8bbc8;font-size:11px;cursor:pointer;list-style:none; }
.console-guide summary::-webkit-details-marker { display:none; }
.console-guide summary::after { content:"+";padding-left:7px;color:#6a8e9e; }
.console-guide[open] summary::after { content:"−"; }
.console-guide p { position:absolute;right:0;top:calc(100% + 8px);width:min(280px,calc(100vw - 48px));margin:0;padding:12px 14px;background:#111820;border:1px solid #263643;color:#c1cfdb;font-size:11px;line-height:1.9;box-shadow:0 12px 30px #0009; }

@media (max-width:760px) {
 .portfolio-index-link { grid-template-columns:minmax(0,1fr);align-items:start;padding-block:48px 60px; }
 .console-gallery-toolbar { padding-left:26px;padding-right:0; }
}

.project-console.is-zoomed.is-model-ready .studio-project-art { cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none; }
.project-console.is-screen-dragging .studio-project-art { cursor:grabbing; }
.project-console .studio-project-art img { -webkit-user-drag:none; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* Give personal works more room while keeping the profile compact. */
.section-wrap.author-heading, .section-wrap.private-space { width:min(1440px,calc(100% - 80px)); }
.author-heading .author-intro { grid-template-columns:clamp(160px,18vw,216px) minmax(0,1fr); max-width:980px; gap:48px; margin-bottom:36px; }
.author-intro > .avatar-view.author-avatar { width:100%; height:auto; aspect-ratio:1; }
.site-footer { position:relative; padding-bottom:58px; }
.footer-admin { position:absolute; right:18px; bottom:8px; display:grid; place-items:center; width:44px; height:44px; color:#66798d; transition:color .18s ease,transform .18s ease; }
.footer-admin svg { width:22px; height:22px; shape-rendering:crispEdges; }
.footer-admin:hover { color:#c0e1ed; transform:translateY(-2px); }
.footer-admin:active { transform:translateY(1px); }
.footer-admin:focus-visible { outline:2px solid #a8dff2; outline-offset:-4px; }
@media(max-width:760px) {
  .section-wrap.author-heading, .section-wrap.private-space { width:calc(100% - 32px); }
  .project-grid:is(.author-grid,.space-works) { grid-template-columns:minmax(0,1fr); gap:32px; }
  .author-heading .author-intro { grid-template-columns:124px minmax(0,1fr); align-items:center; gap:24px; margin-bottom:24px; }
  :is(.author-grid,.space-works) .project-card-title { font-size:16px; }
  .footer-admin { right:10px; }
}
@media(prefers-reduced-motion:reduce) { .footer-admin { transition:none; } }
@media(max-width:480px) {
  .author-heading .author-intro { grid-template-columns:minmax(0,1fr); gap:20px; }
  .author-intro > .avatar-view.author-avatar { width:144px; }
  .author-intro h1 { margin-top:0; }
}

/* Filing link stays readable without competing with the artwork. */
.footer-icp { position:absolute; bottom:17px; left:50%; transform:translateX(-50%); display:block; padding:6px 4px; color:#a3abb8; font-family:"CAGA Pixel",var(--font-sans-cjk); font-size:12px; line-height:20px; white-space:nowrap; }
.footer-icp:hover { color:#b5e5eb; }
.footer-icp:focus-visible { outline:2px solid #a8dff2; outline-offset:3px; }
/* A quiet, readable note beneath the identity, with its own mobile row. */
.site-identity { min-width:0; max-width:390px; }
.site-purpose { margin:9px 0 0; max-width:390px; color:#8a939f; font-family:var(--font-sans-cjk); font-size:11px; font-weight:400; line-height:1.65; letter-spacing:.02em; text-wrap:pretty; }
.footer-identity { min-width:0; }
.footer-identity .footer-brand { transform:none; }
.footer-identity .site-purpose { margin-top:12px; }
@media (min-width:761px) and (max-width:1050px) {
  .site-identity { max-width:330px; }
  .main-nav { gap:22px; margin-left:12px; }
  .header-actions { gap:10px; }
}
@media (max-width:760px) {
  .site-header { height:108px; padding-bottom:40px; }
  .site-identity .site-purpose { position:absolute; left:16px; right:16px; bottom:8px; max-width:none; margin:0; font-size:11px; line-height:1.55; }
  .main-nav { top:104px; }
  .footer-identity { flex:1 1 calc(100% - 110px); }
  .footer-identity .site-purpose { max-width:310px; font-size:11px; }
}