@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    color: #21211e;
    background: #f3efe5;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    --paper: #f3efe5;
    --ink: #21211e;
    --muted: #79776e;
    --line: rgb(33 33 30 / 15%);
    --mono: 'DM Mono', Consolas, monospace;
    --display: 'Space Grotesk', 'Segoe UI', sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: var(--paper);
}

button,
a {
    color: inherit;
    font: inherit;
}

a {
    text-decoration: none;
}

button {
    cursor: pointer;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #f05432;
    outline-offset: 4px;
}

.concept-header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(100% - 80px, 1440px);
    height: 82px;
    margin: 0 auto;
    border-bottom: 1px solid var(--line);
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.08em;
}

.wordmark-mark {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1.5px solid currentColor;
    border-radius: 9px 9px 9px 2px;
    font-size: 17px;
    letter-spacing: -0.12em;
}

.wordmark-period {
    color: #ef573a;
}

.concept-nav {
    display: flex;
    align-items: center;
    gap: 29px;
    color: #66645c;
    font-family: var(--mono);
    font-size: 11px;
}

.concept-nav a,
.header-contact {
    transition: color 160ms ease;
}

.concept-nav a:hover,
.header-contact:hover {
    color: #ed5538;
}

.header-contact {
    font-size: 13px;
    font-weight: 600;
}

.header-contact span {
    padding-left: 5px;
}

.eyebrow {
    margin: 0;
    color: #737168;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.09em;
}

.status-dot,
.hud-live {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #ec6849;
    box-shadow: 0 0 0 3px rgb(236 104 73 / 13%);
    vertical-align: 1px;
}

/*============================================
  CONCEPT PICKER
============================================*/
.concept-picker {
    background: var(--paper);
    background-image: radial-gradient(rgb(56 54 47 / 12%) 0.7px, transparent 0.7px);
    background-position: -5px -5px;
    background-size: 21px 21px;
}

.picker-hero,
.concept-grid,
.picker-footer {
    width: min(100% - 80px, 1440px);
    margin-right: auto;
    margin-left: auto;
}

.picker-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 71px 0 43px;
}

.picker-intro {
    max-width: 720px;
}

.picker-intro h1,
.playroom-copy h1,
.island-intro h1,
.atelier-copy h1 {
    margin: 22px 0 17px;
    font-family: var(--display);
    font-size: clamp(48px, 6.5vw, 86px);
    font-weight: 600;
    letter-spacing: -0.078em;
    line-height: 0.98;
}

.picker-intro h1 span {
    color: #918f85;
}

.intro-copy {
    max-width: 560px;
    margin: 0;
    color: #64625b;
    font-size: 15px;
    line-height: 1.7;
}

.picker-note {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 257px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgb(255 254 250 / 72%);
}

.note-icon {
    display: grid;
    width: 36px;
    height: 36px;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: #f5d4c8;
    color: #9e432e;
    font-size: 21px;
}

.picker-note p {
    margin: 0;
    color: #6a685f;
    font-size: 11px;
    line-height: 1.55;
}

.picker-note strong {
    color: var(--ink);
    font-size: 12px;
}

.concept-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.concept-card {
    overflow: hidden;
    border: 1px solid rgb(34 33 30 / 13%);
    border-radius: 12px;
    background: #fffdf8;
    box-shadow: 0 3px 8px rgb(38 34 27 / 4%);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.concept-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 32px rgb(38 34 27 / 11%);
}

.card-art {
    position: relative;
    height: 282px;
    overflow: hidden;
    isolation: isolate;
}

.art-index,
.art-caption {
    position: absolute;
    z-index: 5;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.08em;
}

.art-index {
    top: 18px;
    left: 18px;
}

.art-caption {
    right: 17px;
    bottom: 15px;
    color: rgb(255 255 255 / 75%);
    font-size: 8px;
}

.art-playroom {
    background: #f06948;
    image-rendering: pixelated;
}

.pixel-sun {
    position: absolute;
    top: 45px;
    right: 61px;
    width: 73px;
    height: 73px;
    background: #f3c754;
    box-shadow: 0 0 0 9px rgb(243 199 84 / 15%);
}

.pixel-cloud {
    position: absolute;
    z-index: 2;
    width: 69px;
    height: 14px;
    background: #ffe4c4;
    box-shadow: 18px -12px 0 -2px #ffe4c4, 39px 0 0 #ffe4c4;
    opacity: 0.9;
}

.cloud-one {
    top: 78px;
    left: 41px;
}

.cloud-two {
    top: 145px;
    right: 73px;
    transform: scale(0.6);
}

.pixel-mountain {
    position: absolute;
    z-index: 1;
    bottom: 60px;
    width: 0;
    height: 0;
    border-right: 140px solid transparent;
    border-bottom: 128px solid #bb3f3b;
    border-left: 140px solid transparent;
}

.mountain-one {
    left: -15px;
}

.mountain-two {
    right: -65px;
    border-right-width: 177px;
    border-bottom-width: 168px;
    border-left-width: 177px;
    border-bottom-color: #9b3540;
}

.pixel-ground {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 65px;
    background: #374e48;
    box-shadow: 0 -14px 0 #536449, inset 0 8px 0 rgb(29 49 43 / 20%);
}

.pixel-character {
    position: absolute;
    z-index: 3;
    bottom: 60px;
    left: 47%;
    width: 25px;
    height: 41px;
    background: #192b30;
    box-shadow: -7px 40px 0 -4px #192b30, 8px 40px 0 -4px #192b30;
}

.pixel-character::before {
    position: absolute;
    top: -17px;
    left: 2px;
    width: 21px;
    height: 20px;
    background: #f5cb9d;
    content: '';
}

.pixel-character::after {
    position: absolute;
    top: -21px;
    left: 0;
    width: 24px;
    height: 8px;
    background: #243235;
    box-shadow: -3px 5px 0 #243235;
    content: '';
}

.art-playroom .art-caption {
    color: #e6d6b1;
}

.art-island {
    background: #b8d9ca;
}

.island-cloud {
    position: absolute;
    top: 50px;
    left: 51px;
    width: 78px;
    height: 16px;
    background: #f6efd4;
    border-radius: 10px;
    box-shadow: 18px -14px 0 -2px #f6efd4, 37px 1px 0 -1px #f6efd4;
}

.island-sun {
    position: absolute;
    top: 41px;
    right: 49px;
    width: 61px;
    height: 61px;
    border-radius: 50%;
    background: #f5bb5c;
}

.island-hill {
    position: absolute;
    border-radius: 50% 50% 0 0;
}

.hill-back {
    bottom: 53px;
    left: -43px;
    width: 405px;
    height: 149px;
    background: #59917d;
    transform: rotate(-8deg);
}

.hill-front {
    right: -50px;
    bottom: 37px;
    width: 440px;
    height: 125px;
    background: #3f765e;
    transform: rotate(7deg);
}

.island-water {
    position: absolute;
    right: -40px;
    bottom: 0;
    left: -40px;
    height: 58px;
    background: #528b91;
    box-shadow: 0 -8px 0 rgb(235 219 169 / 75%);
}

.island-palm {
    position: absolute;
    z-index: 2;
    top: 97px;
    color: #22574d;
    font-size: 49px;
    text-shadow: 0 8px 0 #754c42;
}

.palm-left {
    left: 64px;
    transform: rotate(-13deg);
}

.palm-right {
    right: 71px;
    top: 131px;
    font-size: 39px;
    transform: rotate(22deg);
}

.island-house {
    position: absolute;
    z-index: 3;
    right: 39%;
    bottom: 81px;
    display: grid;
    width: 55px;
    height: 49px;
    place-items: center;
    background: #f3dcb1;
    color: #bc654b;
    font-size: 47px;
    line-height: 0.5;
    text-shadow: 0 4px 0 #b65e47;
}

.island-person {
    position: absolute;
    z-index: 4;
    bottom: 51px;
    left: 46%;
    width: 16px;
    height: 24px;
    background: #e66748;
    box-shadow: 2px -11px 0 -2px #f4d19e, 0 23px 0 -5px #f4d19e;
}

.art-island .art-caption {
    color: #e4e0c1;
}

.art-atelier {
    background: #242a3c;
}

.art-atelier::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: radial-gradient(rgb(225 223 255 / 50%) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.5;
    content: '';
}

.atelier-orbit {
    position: absolute;
    z-index: 1;
    top: 58px;
    left: calc(50% - 105px);
    width: 210px;
    height: 166px;
    border: 1px solid rgb(234 227 190 / 65%);
    border-radius: 50%;
    transform: rotate(-34deg);
}

.orbit-two {
    transform: rotate(53deg);
}

.atelier-planet {
    position: absolute;
    z-index: 2;
    top: 94px;
    left: calc(50% - 55px);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #e66b50;
    box-shadow: inset -18px -6px 0 #b64b48, 0 0 0 12px rgb(233 155 111 / 10%);
}

.atelier-planet::before,
.atelier-planet::after {
    position: absolute;
    border-radius: 40%;
    background: #f3c873;
    content: '';
}

.atelier-planet::before {
    top: 24px;
    left: 20px;
    width: 39px;
    height: 12px;
    transform: rotate(-17deg);
}

.atelier-planet::after {
    right: 12px;
    bottom: 21px;
    width: 28px;
    height: 10px;
    transform: rotate(20deg);
}

.atelier-spark {
    position: absolute;
    z-index: 2;
    color: #e7d28f;
    font-size: 20px;
}

.spark-one {
    top: 70px;
    left: 24%;
}

.spark-two {
    right: 21%;
    bottom: 61px;
    color: #e98268;
    font-size: 14px;
}

.atelier-window {
    position: absolute;
    z-index: 3;
    right: 46px;
    bottom: 51px;
    display: flex;
    width: 75px;
    height: 47px;
    gap: 5px;
    padding: 8px;
    border: 1px solid rgb(255 255 255 / 45%);
    border-radius: 5px;
    background: rgb(21 24 36 / 88%);
}

.atelier-window i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e66b50;
}

.atelier-window i:nth-child(2) {
    background: #efcb7c;
}

.atelier-window i:nth-child(3) {
    background: #8ab9a3;
}

.card-copy {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    min-height: 151px;
    padding: 20px 22px 21px;
}

.card-kicker {
    margin: 0 0 8px;
    color: #8a887f;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.04em;
}

.card-copy h2 {
    margin: 0;
    font-family: var(--display);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.06em;
}

.card-copy p {
    max-width: 300px;
    margin: 8px 0 0;
    color: #77756c;
    font-size: 12px;
    line-height: 1.55;
}

.card-arrow {
    display: grid;
    width: 35px;
    height: 35px;
    flex: none;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: transform 180ms ease, background 180ms ease;
}

.concept-card:hover .card-arrow {
    transform: rotate(45deg);
    background: #f4d5c7;
}

.picker-footer {
    display: flex;
    justify-content: space-between;
    padding: 27px 0 34px;
    color: #817f76;
    font-family: var(--mono);
    font-size: 10px;
}

.picker-footer p {
    margin: 0;
}

.picker-footer p span {
    padding: 0 6px;
    color: #ee6848;
}

.footer-prompt span {
    padding-left: 8px !important;
}

/*============================================
  CONCEPT 01: PLAYROOM
============================================*/
.concept-playroom {
    --paper: #f4f0e6;
    background: var(--paper);
}

.concept-playroom .playroom-main,
.playroom-work,
.playroom-contact {
    width: min(100% - 120px, 1320px);
    margin: 0 auto;
}

.playroom-main {
    display: grid;
    min-height: 674px;
    grid-template-columns: 0.94fr 1.06fr;
    align-items: center;
    gap: 46px;
    padding: 54px 0 70px;
}

.playroom-copy {
    position: relative;
    z-index: 2;
    padding-bottom: 8px;
}

.playroom-copy h1 {
    margin-top: 24px;
    font-size: clamp(53px, 6.1vw, 80px);
}

.playroom-copy h1 span {
    color: #e85d40;
}

.playroom-description {
    max-width: 438px;
    color: #68665f;
    font-size: 16px;
    line-height: 1.7;
}

.playroom-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

.button {
    display: inline-flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;
    border: 0;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
}

.button-dark {
    background: #25251f;
    color: #fffdf8;
}

.button-dark:hover {
    background: #e85d40;
}

.button-quiet {
    border: 1px solid var(--line);
    background: transparent;
}

.button-quiet:hover {
    border-color: #e85d40;
}

.button-play {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    background: #f1d4bd;
    color: #9a402b;
    font-size: 9px;
}

.playroom-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 23px;
    margin-top: 49px;
    color: #858278;
    font-family: var(--mono);
    font-size: 9px;
}

.playroom-meta b {
    padding: 0 4px;
    color: #e85d40;
}

.meta-spark {
    margin-right: 4px;
    color: #e85d40;
    font-size: 13px;
    font-style: normal;
}

.playroom-art-wrap {
    position: relative;
    padding: 30px 24px 37px;
}

.playroom-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 0.94;
    overflow: hidden;
    border: 9px solid #23241f;
    border-radius: 7px;
    background: #eda45f;
    box-shadow: 12px 12px 0 #e5d8c3, 13px 13px 0 1px rgb(35 36 31 / 70%);
    isolation: isolate;
    image-rendering: pixelated;
}

.cover-sky {
    position: absolute;
    inset: 0 0 35% 0;
    background: linear-gradient(#e88057 0%, #f0b36c 72%, #eac07d 100%);
}

.cover-stars {
    position: absolute;
    z-index: 4;
    top: 19px;
    right: 31px;
    color: #f8e4ae;
    font-size: 19px;
}

.cover-stars span {
    padding: 0 13px;
    font-size: 14px;
}

.cover-sun {
    position: absolute;
    z-index: 1;
    top: 26%;
    left: 46%;
    width: 31%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #f3d783;
    box-shadow: 0 0 0 14px rgb(243 215 131 / 17%);
}

.cover-mountain {
    position: absolute;
    z-index: 2;
    bottom: 31%;
    width: 0;
    height: 0;
    border-style: solid;
}

.cover-mountain-back {
    left: -14%;
    border-width: 0 0 49vw 52vw;
    border-color: transparent transparent #a44242 transparent;
    border-width: 0 0 min(31vw, 405px) min(54vw, 650px);
}

.cover-mountain-front {
    right: -14%;
    border-width: 0 min(57vw, 675px) min(39vw, 460px) 0;
    border-color: transparent #763b49 transparent transparent;
}

.cover-cloud {
    position: absolute;
    z-index: 1;
    top: 25%;
    left: 11%;
    width: 46px;
    height: 12px;
    background: rgb(255 233 195 / 86%);
    box-shadow: 16px -9px 0 -1px rgb(255 233 195 / 86%), 33px 1px 0 rgb(255 233 195 / 86%);
}

.cover-cloud-right {
    top: 41%;
    right: 13%;
    left: auto;
    transform: scale(0.72);
}

.cover-platform {
    position: absolute;
    z-index: 3;
    right: -4%;
    bottom: 0;
    left: -4%;
    height: 30%;
    background: #354e46;
    box-shadow: 0 -13px 0 #57664c, inset 0 12px 0 rgb(18 39 34 / 20%);
}

.cover-platform::before {
    position: absolute;
    top: 53%;
    left: 12%;
    width: 22%;
    height: 8px;
    background: #71805a;
    box-shadow: 150px 31px 0 -2px #71805a, 302px -15px 0 -1px #71805a;
    content: '';
}

.cover-flower {
    position: absolute;
    z-index: 4;
    bottom: 22%;
    color: #e5c67d;
    font-size: 26px;
}

.flower-one {
    left: 9%;
}

.flower-two {
    right: 12%;
    bottom: 17%;
    color: #e5845e;
    font-size: 20px;
}

.cover-hero {
    position: absolute;
    z-index: 5;
    bottom: 26%;
    left: 43%;
    width: 36px;
    height: 61px;
    background: #314547;
    box-shadow: -8px 57px 0 -8px #e7c993, 12px 57px 0 -8px #e7c993;
    transition: transform 450ms cubic-bezier(.2, .8, .2, 1);
}

.cover-hero.is-moving {
    transform: translate(22px, -14px) rotate(7deg);
}

.hero-hair {
    position: absolute;
    top: -20px;
    left: 6px;
    width: 28px;
    height: 23px;
    background: #342a2b;
    box-shadow: -4px 7px 0 #342a2b;
}

.hero-face {
    position: absolute;
    top: -16px;
    left: 9px;
    width: 22px;
    height: 21px;
    background: #eac496;
}

.hero-shirt {
    position: absolute;
    top: 6px;
    left: 0;
    width: 36px;
    height: 38px;
    background: #d85e4b;
    box-shadow: -7px 4px 0 -2px #d85e4b, 7px 3px 0 -2px #d85e4b;
}

.hero-pack {
    position: absolute;
    z-index: -1;
    top: 8px;
    right: -7px;
    width: 11px;
    height: 24px;
    background: #e1b851;
}

.cover-copy {
    position: absolute;
    z-index: 6;
    top: 10%;
    left: 8%;
    color: #273935;
    text-shadow: 1px 2px rgb(248 219 162 / 55%);
}

.cover-copy span,
.cover-copy i {
    display: block;
    font-family: var(--mono);
    font-size: clamp(7px, 0.72vw, 10px);
    font-style: normal;
    letter-spacing: 0.14em;
}

.cover-copy strong {
    display: block;
    margin-top: 15px;
    font-family: var(--display);
    font-size: clamp(38px, 5.2vw, 69px);
    font-weight: 700;
    letter-spacing: -0.105em;
    line-height: 0.8;
}

.cover-copy em {
    color: #fff3d6;
    font-size: 0.82em;
    font-style: normal;
    letter-spacing: -0.07em;
}

.cover-copy i {
    margin-top: 12px;
    font-size: clamp(6px, 0.6vw, 8px);
}

.cover-rating {
    position: absolute;
    z-index: 7;
    top: 13px;
    right: 13px;
    display: grid;
    width: 34px;
    height: 41px;
    place-content: center;
    border: 1px solid #2a3832;
    color: #2a3832;
    font-family: var(--mono);
    font-size: 10px;
    text-align: center;
}

.playroom-cover.is-playing .cover-hero {
    animation: cover-jump 650ms ease-in-out infinite alternate;
}

.playroom-cover.is-playing .cover-sun {
    animation: sun-pulse 1.6s ease-in-out infinite alternate;
}

@keyframes cover-jump {
    from { transform: translateY(0); }
    to { transform: translateY(-16px); }
}

@keyframes sun-pulse {
    from { box-shadow: 0 0 0 14px rgb(243 215 131 / 17%); }
    to { box-shadow: 0 0 0 28px rgb(243 215 131 / 7%); }
}

.playroom-sticker {
    position: absolute;
    z-index: 8;
    display: grid;
    width: 86px;
    height: 86px;
    place-content: center;
    border: 1px solid #272822;
    border-radius: 50%;
    background: #f4f0e6;
    color: #272822;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    transform: rotate(-9deg);
}

.playroom-sticker span {
    display: block;
    color: #e85d40;
    font-size: 17px;
}

.sticker-top {
    top: 6px;
    right: 2px;
}

.sticker-bottom {
    bottom: 0;
    left: 0;
    background: #e9c552;
    transform: rotate(8deg);
}

.art-footnote {
    position: absolute;
    right: 20px;
    bottom: -3px;
    margin: 0;
    color: #8a887f;
    font-family: var(--mono);
    font-size: 9px;
}

.playroom-work {
    padding: 41px 0 72px;
    border-top: 1px solid var(--line);
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.section-heading h2,
.island-bottom h2,
.atelier-work-title h2 {
    margin: 7px 0 0;
    font-family: var(--display);
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.065em;
    line-height: 1.08;
}

.section-number {
    color: #8a887f;
    font-family: var(--mono);
    font-size: 9px;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fffdf8;
}

.work-card {
    min-height: 195px;
    padding: 20px 22px 18px;
}

.work-card + .work-card {
    border-left: 1px solid var(--line);
}

.work-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    font-size: 18px;
}

.icon-game { background: #f8ded2; color: #b64b35; }
.icon-web { background: #dbe3f4; color: #384d91; }
.icon-ai { background: #e6ead2; color: #66703f; }

.work-card > p {
    display: flex;
    justify-content: space-between;
    margin: 19px 0 6px;
    color: #8a887f;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.06em;
}

.work-card h3 {
    margin: 0;
    font-family: var(--display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.05em;
}

.work-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 17px;
    color: #77756c;
    font-size: 11px;
}

.work-bottom a {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
}

.work-bottom a:hover {
    background: #f5d3c6;
}

.playroom-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 87px;
    border-top: 1px solid var(--line);
}

.playroom-contact > span {
    color: #8a887f;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.07em;
}

.playroom-contact > a {
    font-size: 13px;
}

.playroom-contact b {
    padding-left: 7px;
    color: #e85d40;
}

/*============================================
  CONCEPT 02: ISLAND EXPLORER
============================================*/
.concept-island-page {
    background: #f1f0df;
}

.concept-island-page .concept-header {
    border-color: rgb(40 66 56 / 17%);
}

.island-intro,
.island-game,
.island-bottom {
    width: min(100% - 100px, 1340px);
    margin: 0 auto;
}

.island-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 47px 0 26px;
}

.island-intro h1 {
    margin: 15px 0 0;
    font-size: clamp(41px, 5vw, 66px);
}

.island-intro h1 span {
    color: #3e8268;
}

.island-intro > p {
    margin: 0 0 3px;
    color: #77796c;
    font-size: 12px;
    line-height: 1.8;
    text-align: right;
}

.island-intro > p strong {
    color: #3d5549;
    font-weight: 600;
}

.island-game {
    overflow: hidden;
    border: 1px solid #36534a;
    border-radius: 9px;
    background: #284940;
    box-shadow: 0 15px 40px rgb(37 59 47 / 13%);
}

.island-hud,
.island-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #f1efdb;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.08em;
}

.island-hud {
    height: 43px;
    padding: 0 18px;
    background: #263c37;
}

.hud-live {
    width: 6px;
    height: 6px;
    background: #efbe58;
    box-shadow: 0 0 0 3px rgb(239 190 88 / 16%);
}

.island-hud > span:last-child {
    color: #efca73;
}

.island-hud b {
    margin-left: 5px;
    color: #f1efdb;
    font-weight: 400;
}

.island-world {
    position: relative;
    height: clamp(390px, 46vw, 570px);
    overflow: hidden;
    background: #add4c4;
    outline: none;
    isolation: isolate;
}

.world-sky {
    position: absolute;
    inset: 0 0 40%;
    background: linear-gradient(#a6d1c4, #d2dfbe);
}

.world-sun {
    position: absolute;
    top: 11%;
    right: 16%;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f0c571;
    box-shadow: 0 0 0 13px rgb(240 197 113 / 15%);
}

.world-cloud {
    position: absolute;
    top: 15%;
    left: 16%;
    width: 83px;
    height: 16px;
    border-radius: 20px;
    background: #f5f0db;
    box-shadow: 18px -12px 0 -2px #f5f0db, 41px 1px 0 #f5f0db;
    opacity: 0.78;
}

.cloud-b {
    top: 27%;
    right: 22%;
    left: auto;
    transform: scale(0.61);
}

.world-mountains {
    position: absolute;
    z-index: 1;
    bottom: 34%;
    width: 0;
    height: 0;
    border-style: solid;
}

.mountain-a {
    left: -12%;
    border-width: 0 0 210px 440px;
    border-color: transparent transparent #719b88 transparent;
}

.mountain-b {
    right: -8%;
    border-width: 0 500px 245px 0;
    border-color: transparent #668e7a transparent transparent;
}

.world-hill {
    position: absolute;
    z-index: 2;
    bottom: 11%;
    height: 38%;
    border-radius: 50% 50% 0 0;
}

.hill-a {
    left: -11%;
    width: 74%;
    background: #53836c;
    transform: rotate(-6deg);
}

.hill-b {
    right: -19%;
    bottom: 15%;
    width: 79%;
    background: #42725e;
    transform: rotate(8deg);
}

.world-water {
    position: absolute;
    z-index: 1;
    right: -4%;
    bottom: 0;
    left: -4%;
    height: 17%;
    background: #629b9b;
    box-shadow: 0 -13px 0 rgb(241 226 178 / 70%);
}

.world-island {
    position: absolute;
    z-index: 2;
    right: -6%;
    bottom: 13%;
    left: -6%;
    height: 32%;
    border-radius: 51% 49% 0 0 / 25% 27% 0 0;
    background: #7d9a61;
    transform: rotate(-2deg);
}

.world-track {
    position: absolute;
    z-index: 3;
    bottom: 16%;
    left: 8%;
    width: 79%;
    height: 117px;
    border-top: 9px solid #e9d29c;
    border-radius: 51% 49% 0 0 / 100% 90% 0 0;
    transform: rotate(-4deg);
}

.world-door {
    position: absolute;
    z-index: 5;
    bottom: 29%;
    width: 120px;
    height: 150px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f7eed3;
    transition: transform 150ms ease;
}

.world-door:hover,
.world-door.is-visited {
    transform: translateY(-7px);
}

.door-game { left: 26%; }
.door-web { left: 52%; bottom: 33%; }
.door-ai { left: 76%; bottom: 27%; }

.door-sign {
    position: absolute;
    top: -10px;
    left: 50%;
    padding: 5px 7px;
    background: #30483e;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.06em;
    transform: translateX(-50%);
}

.door-roof {
    position: absolute;
    z-index: 2;
    top: 24px;
    left: 15px;
    width: 90px;
    height: 56px;
    background: #c86f4e;
    clip-path: polygon(50% 0, 100% 57%, 89% 63%, 89% 100%, 11% 100%, 11% 63%, 0 57%);
    filter: drop-shadow(0 4px 0 #995b48);
}

.door-building {
    position: absolute;
    bottom: 14px;
    left: 25px;
    display: grid;
    width: 70px;
    height: 69px;
    place-items: center;
    background: #f0d9aa;
    box-shadow: inset 0 -10px 0 rgb(105 87 57 / 12%);
    color: #4f6854;
    font-size: 31px;
}

.door-building::after {
    position: absolute;
    bottom: 0;
    left: 27px;
    width: 18px;
    height: 34px;
    background: #a9714f;
    content: '';
}

.door-building i {
    margin-top: -14px;
    font-style: normal;
}

.door-web .door-roof { background: #758fac; }
.door-web .door-building { color: #54718d; }
.door-ai .door-roof { background: #d7a950; }
.door-ai .door-building { color: #b05c4d; }

.world-character {
    position: absolute;
    z-index: 7;
    bottom: 15%;
    left: 16%;
    width: 36px;
    height: 67px;
    padding: 0;
    border: 0;
    background: transparent;
    transition: left 90ms linear, transform 150ms ease;
}

.world-character.facing-left {
    transform: scaleX(-1);
}

.character-shadow {
    position: absolute;
    bottom: 0;
    left: -3px;
    width: 43px;
    height: 12px;
    border-radius: 50%;
    background: rgb(43 56 42 / 29%);
}

.character-body {
    position: absolute;
    top: 24px;
    left: 6px;
    width: 25px;
    height: 34px;
    border-radius: 7px 7px 3px 3px;
    background: #e36e4c;
    box-shadow: inset -5px 0 0 rgb(100 55 46 / 15%);
}

.character-body::before {
    position: absolute;
    top: -19px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f1c995;
    box-shadow: 0 -5px 0 #4a3833, 5px -2px 0 #4a3833;
    content: '';
}

.character-body i {
    position: absolute;
    z-index: 2;
    top: -9px;
    right: 2px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #423933;
}

.character-backpack {
    position: absolute;
    z-index: 2;
    top: 28px;
    left: 1px;
    width: 10px;
    height: 22px;
    border-radius: 3px;
    background: #e0ad54;
}

.character-legs {
    position: absolute;
    bottom: 4px;
    left: 9px;
    width: 7px;
    height: 15px;
    background: #536b5c;
    box-shadow: 11px 0 0 #536b5c;
}

.world-character.is-walking .character-legs {
    animation: walk-bob 120ms steps(2) infinite alternate;
}

.world-flower {
    position: absolute;
    z-index: 5;
    bottom: 24%;
    color: #f1d18e;
    font-size: 22px;
}

.flower-a { left: 9%; }
.flower-b { left: 67%; bottom: 22%; color: #e9a878; }
.flower-c { right: 8%; bottom: 19%; }

.world-sign {
    position: absolute;
    z-index: 5;
    bottom: 16%;
    left: 43%;
    padding: 9px 12px;
    background: #f0dba9;
    color: #52684f;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.07em;
    transform: rotate(-3deg);
}

.world-sign b {
    padding-left: 6px;
    color: #dc694a;
}

.island-card {
    position: absolute;
    z-index: 9;
    top: 22px;
    right: 21px;
    width: 235px;
    padding: 17px 18px;
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: 7px;
    background: rgb(247 242 221 / 94%);
    box-shadow: 0 7px 22px rgb(32 54 45 / 15%);
    backdrop-filter: blur(7px);
}

.island-card-kicker {
    display: block;
    margin-bottom: 9px;
    color: #7b7c69;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.08em;
}

.island-card strong {
    font-family: var(--display);
    font-size: 19px;
    letter-spacing: -0.05em;
}

.island-card p {
    margin: 5px 0 12px;
    color: #77796b;
    font-size: 10px;
    line-height: 1.5;
}

.island-card a {
    color: #47755e;
    font-size: 10px;
    font-weight: 700;
}

.island-card.is-open {
    animation: card-pop 220ms ease-out;
}

.island-controls {
    min-height: 48px;
    gap: 13px;
    padding: 0 18px;
    background: #334d43;
    color: #ecedda;
    font-size: 8px;
    letter-spacing: 0.02em;
}

.island-controls span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.island-controls kbd {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid rgb(241 239 219 / 38%);
    border-radius: 4px;
    font: inherit;
}

.island-controls span b {
    padding-left: 7px;
    color: #efcb73;
}

.island-controls button {
    padding: 6px 9px;
    border: 1px solid rgb(241 239 219 / 30%);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
}

.island-bottom {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 44px;
    padding: 55px 0 74px;
}

.island-bottom h2 {
    font-size: 39px;
}

.island-projects {
    border-top: 1px solid rgb(46 67 52 / 20%);
}

.island-projects a {
    display: grid;
    grid-template-columns: 35px 1fr auto 25px;
    align-items: center;
    min-height: 54px;
    gap: 11px;
    border-bottom: 1px solid rgb(46 67 52 / 20%);
}

.island-projects a > span,
.island-projects a > i {
    color: #8a907d;
    font-family: var(--mono);
    font-size: 8px;
    font-style: normal;
}

.island-projects a > strong {
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: -0.04em;
}

.island-projects a > b {
    text-align: right;
}

.island-projects a:hover > strong,
.island-projects a:hover > b {
    color: #d76042;
}

@keyframes walk-bob {
    from { transform: translateY(0); }
    to { transform: translateY(-3px); }
}

@keyframes card-pop {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/*============================================
  CONCEPT 03: PIXEL ATELIER
============================================*/
.concept-atelier-page {
    --paper: #f8f6f0;
    --ink: #21232c;
    background: #f8f6f0;
}

.concept-atelier-page .concept-header {
    border-color: rgb(33 35 44 / 13%);
}

.atelier-hero,
.atelier-work,
.atelier-note {
    width: min(100% - 100px, 1340px);
    margin: 0 auto;
}

.atelier-hero {
    display: grid;
    min-height: 600px;
    grid-template-columns: 0.88fr 1.12fr;
    align-items: center;
    gap: 40px;
    padding: 57px 0 72px;
}

.atelier-copy h1 {
    margin: 22px 0 21px;
    font-size: clamp(53px, 6vw, 76px);
}

.atelier-copy h1 span {
    color: #787d9a;
}

.atelier-copy > p:not(.eyebrow) {
    max-width: 430px;
    color: #6d6f79;
    font-size: 14px;
    line-height: 1.8;
}

.atelier-cta {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    margin-top: 21px;
    padding: 13px 0;
    border-bottom: 1px solid #b5b4bd;
    font-size: 12px;
    font-weight: 700;
}

.atelier-cta span {
    color: #ea694e;
    font-size: 16px;
}

.atelier-cta:hover {
    border-color: #ea694e;
}

.atelier-index {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 17px;
    margin-top: 51px;
    color: #8b8b91;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.05em;
}

.atelier-scene {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    border-radius: 8px;
    background: #222737;
    isolation: isolate;
}

.scene-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgb(233 230 208 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(233 230 208 / 7%) 1px, transparent 1px);
    background-position: center;
    background-size: 34px 34px;
    mask-image: linear-gradient(transparent, #000 18%, #000 77%, transparent);
}

.scene-halo {
    position: absolute;
    top: 14%;
    left: 23%;
    width: 53%;
    aspect-ratio: 1;
    border: 1px solid rgb(236 218 174 / 29%);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgb(236 218 174 / 4%), 0 0 0 54px rgb(236 218 174 / 3%);
}

.scene-planet {
    position: absolute;
    z-index: 2;
    top: 23%;
    left: 33%;
    width: 36%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: #ea7958;
    box-shadow: inset -20px -13px 0 rgb(99 62 91 / 36%), 0 17px 32px rgb(8 11 19 / 27%);
}

.planet-land {
    position: absolute;
    border-radius: 50%;
    background: #e5bc75;
}

.land-a {
    top: 25%;
    left: 17%;
    width: 38%;
    height: 15%;
    transform: rotate(-23deg);
}

.land-b {
    right: 12%;
    bottom: 27%;
    width: 31%;
    height: 13%;
    background: #6d9a87;
    transform: rotate(26deg);
}

.planet-sea {
    position: absolute;
    right: 21%;
    bottom: 11%;
    width: 15%;
    height: 10%;
    border-radius: 50%;
    background: #677a9f;
}

.planet-crater {
    position: absolute;
    width: 7%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(120 62 70 / 38%);
    box-shadow: inset 2px 2px 2px rgb(65 42 54 / 26%);
}

.crater-a { top: 58%; left: 23%; }
.crater-b { top: 18%; right: 26%; width: 5%; }

.scene-ring {
    position: absolute;
    z-index: 3;
    top: 29%;
    left: 14%;
    width: 73%;
    height: 28%;
    border: 1px solid #e7d69b;
    border-radius: 50%;
    transform: rotate(-25deg);
}

.scene-satellite {
    position: absolute;
    z-index: 4;
    top: 32%;
    right: 16%;
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 1px solid #ead89d;
    border-radius: 8px;
    background: #353d58;
    transform: rotate(14deg);
}

.scene-satellite i,
.scene-satellite b {
    position: absolute;
    top: 10px;
    width: 24px;
    height: 22px;
    border: 1px solid rgb(234 216 157 / 78%);
    background: #7287a8;
}

.scene-satellite i { left: -28px; }
.scene-satellite b { right: -28px; }

.scene-star {
    position: absolute;
    z-index: 2;
    color: #eedb9e;
}

.star-a { top: 16%; left: 18%; font-size: 20px; }
.star-b { top: 19%; right: 18%; color: #e58263; font-size: 18px; }
.star-c { bottom: 26%; left: 19%; color: #a5b89d; font-size: 12px; }

.scene-label {
    position: absolute;
    z-index: 5;
    color: #d9d6c8;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.1em;
}

.label-top { top: 19px; left: 20px; }
.label-bottom { right: 20px; bottom: 18px; color: #999ba1; }

.scene-robot {
    position: absolute;
    z-index: 5;
    right: 17%;
    bottom: 13%;
    width: 58px;
    height: 91px;
    animation: robot-hover 2.5s ease-in-out infinite alternate;
}

.robot-antenna {
    position: absolute;
    top: -10px;
    left: 28px;
    width: 2px;
    height: 13px;
    background: #e8d89e;
}

.robot-antenna::before {
    position: absolute;
    top: -4px;
    left: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ed7958;
    content: '';
}

.robot-head {
    position: absolute;
    top: 1px;
    left: 7px;
    width: 46px;
    height: 39px;
    border: 2px solid #292d3e;
    border-radius: 12px 12px 8px 8px;
    background: #e4d6aa;
    box-shadow: inset -7px 0 0 rgb(91 91 99 / 13%);
}

.robot-head i,
.robot-head b {
    position: absolute;
    top: 16px;
    width: 6px;
    height: 7px;
    border-radius: 2px;
    background: #48566c;
}

.robot-head i { left: 10px; }
.robot-head b { right: 10px; }

.robot-body {
    position: absolute;
    top: 39px;
    left: 12px;
    width: 36px;
    height: 36px;
    border: 2px solid #292d3e;
    border-radius: 6px;
    background: #7a9c89;
}

.robot-body i {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e7ca77;
}

.robot-arm {
    position: absolute;
    top: 45px;
    right: 0;
    width: 15px;
    height: 23px;
    border: 2px solid #292d3e;
    border-radius: 6px;
    background: #e4d6aa;
    transform: rotate(-18deg);
}

.robot-leg {
    position: absolute;
    bottom: 0;
    left: 19px;
    width: 8px;
    height: 14px;
    background: #e4d6aa;
    box-shadow: 13px 0 0 #e4d6aa;
}

.atelier-work {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 72px;
    padding: 57px 0 74px;
    border-top: 1px solid rgb(33 35 44 / 14%);
}

.atelier-work-title h2 {
    margin-top: 14px;
    font-size: 38px;
}

.atelier-work-title > p:last-child {
    max-width: 350px;
    color: #777881;
    font-size: 12px;
    line-height: 1.7;
}

.atelier-services {
    border-top: 1px solid rgb(33 35 44 / 17%);
}

.atelier-services a {
    display: grid;
    grid-template-columns: 35px 1fr 1fr 25px;
    align-items: center;
    min-height: 63px;
    gap: 13px;
    border-bottom: 1px solid rgb(33 35 44 / 17%);
    transition: padding 160ms ease, color 160ms ease;
}

.atelier-services a:hover {
    padding-right: 5px;
    padding-left: 5px;
    color: #e5684a;
}

.service-number,
.service-detail {
    color: #878890;
    font-family: var(--mono);
    font-size: 8px;
}

.service-title {
    font-family: var(--display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.atelier-services a > b {
    text-align: right;
}

.atelier-note {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    align-items: center;
    min-height: 100px;
    gap: 30px;
    border-top: 1px solid rgb(33 35 44 / 14%);
}

.atelier-note > span {
    color: #878890;
    font-family: var(--mono);
    font-size: 8px;
}

.atelier-note p {
    margin: 0;
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: -0.04em;
}

.atelier-note p em {
    color: #e5684a;
    font-style: normal;
}

.atelier-note a {
    font-size: 10px;
}

.atelier-note a b {
    padding-left: 7px;
    color: #e5684a;
}

@keyframes robot-hover {
    from { transform: translateY(0) rotate(-2deg); }
    to { transform: translateY(-8px) rotate(2deg); }
}

/*============================================
  RESPONSIVE
============================================*/
@media (max-width: 980px) {
    .concept-header,
    .picker-hero,
    .concept-grid,
    .picker-footer,
    .concept-playroom .playroom-main,
    .playroom-work,
    .playroom-contact,
    .island-intro,
    .island-game,
    .island-bottom,
    .atelier-hero,
    .atelier-work,
    .atelier-note {
        width: min(100% - 48px, 760px);
    }

    .concept-grid {
        grid-template-columns: 1fr;
    }

    .concept-card {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
    }

    .card-art {
        height: 240px;
    }

    .card-copy {
        min-height: 0;
        align-items: center;
    }

    .playroom-main,
    .atelier-hero {
        grid-template-columns: 1fr 1fr;
        gap: 22px;
    }

    .playroom-art-wrap {
        padding-right: 5px;
        padding-left: 5px;
    }

    .atelier-scene {
        min-height: 385px;
    }

    .atelier-work {
        gap: 35px;
    }
}

@media (max-width: 680px) {
    .concept-header,
    .picker-hero,
    .concept-grid,
    .picker-footer,
    .concept-playroom .playroom-main,
    .playroom-work,
    .playroom-contact,
    .island-intro,
    .island-game,
    .island-bottom,
    .atelier-hero,
    .atelier-work,
    .atelier-note {
        width: min(100% - 36px, 540px);
    }

    .concept-header {
        height: 69px;
    }

    .wordmark {
        font-size: 17px;
    }

    .wordmark-mark {
        width: 27px;
        height: 27px;
    }

    .concept-nav {
        gap: 10px;
        font-size: 8px;
    }

    .concept-nav a {
        white-space: nowrap;
    }

    .header-contact {
        display: none;
    }

    .picker-hero {
        display: block;
        padding: 48px 0 26px;
    }

    .picker-intro h1,
    .playroom-copy h1,
    .atelier-copy h1 {
        font-size: clamp(46px, 12vw, 65px);
    }

    .intro-copy {
        font-size: 13px;
    }

    .picker-note {
        width: max-content;
        max-width: 100%;
        margin-top: 20px;
    }

    .concept-grid {
        gap: 12px;
    }

    .concept-card {
        display: block;
    }

    .card-art {
        height: 220px;
    }

    .card-copy {
        min-height: 122px;
        padding: 16px 17px;
    }

    .card-copy h2 {
        font-size: 22px;
    }

    .card-copy p {
        font-size: 11px;
    }

    .picker-footer {
        display: block;
        padding: 23px 0;
        line-height: 2;
    }

    .footer-prompt {
        margin-top: 7px !important;
    }

    .playroom-main,
    .concept-atelier-page .atelier-hero {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-top: 49px;
        padding-bottom: 55px;
    }

    .playroom-copy h1 {
        margin: 16px 0 12px;
    }

    .playroom-description {
        font-size: 14px;
    }

    .playroom-meta {
        margin-top: 28px;
        font-size: 8px;
    }

    .playroom-art-wrap {
        padding: 25px 14px 31px;
    }

    .playroom-cover {
        aspect-ratio: 1.05;
        border-width: 6px;
    }

    .cover-copy strong {
        font-size: clamp(42px, 13vw, 63px);
    }

    .playroom-sticker {
        width: 68px;
        height: 68px;
        font-size: 8px;
    }

    .sticker-top { right: 0; }
    .sticker-bottom { left: 1px; }

    .art-footnote {
        right: 15px;
        font-size: 7px;
    }

    .playroom-work {
        padding-top: 31px;
    }

    .section-heading h2,
    .island-bottom h2,
    .atelier-work-title h2 {
        font-size: 29px;
    }

    .section-number {
        max-width: 100px;
        text-align: right;
        line-height: 1.5;
    }

    .work-grid {
        grid-template-columns: 1fr;
    }

    .work-card {
        min-height: 160px;
    }

    .work-card + .work-card {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .playroom-contact {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 11px;
        padding: 21px 0;
    }

    .island-intro {
        display: block;
        padding: 36px 0 20px;
    }

    .island-intro h1 {
        font-size: clamp(40px, 10vw, 57px);
    }

    .island-intro > p {
        margin-top: 14px;
        text-align: left;
    }

    .island-world {
        height: 445px;
    }

    .island-card {
        top: 12px;
        right: 12px;
        width: 176px;
        padding: 12px;
    }

    .island-card strong {
        font-size: 16px;
    }

    .island-card p {
        font-size: 9px;
    }

    .world-door {
        transform: scale(0.78);
        transform-origin: bottom center;
    }

    .world-door:hover,
    .world-door.is-visited {
        transform: scale(0.78) translateY(-5px);
    }

    .door-game { left: 9%; bottom: 29%; }
    .door-web { left: 37%; bottom: 32%; }
    .door-ai { left: 66%; bottom: 25%; }

    .world-character {
        bottom: 14%;
    }

    .world-sign {
        bottom: 14%;
        left: 42%;
        font-size: 6px;
    }

    .island-controls {
        flex-wrap: wrap;
        justify-content: center;
        min-height: 61px;
        padding: 8px;
        font-size: 7px;
    }

    .island-controls span {
        gap: 3px;
    }

    .island-controls span:nth-child(2) {
        display: none;
    }

    .island-bottom {
        grid-template-columns: 1fr;
        gap: 23px;
        padding: 39px 0 53px;
    }

    .island-projects a {
        grid-template-columns: 25px 1fr auto 15px;
        gap: 6px;
    }

    .island-projects a > strong {
        font-size: 12px;
    }

    .island-projects a > i {
        font-size: 7px;
    }

    .atelier-hero {
        padding-top: 42px;
    }

    .atelier-copy h1 {
        margin: 18px 0 15px;
    }

    .atelier-index {
        margin-top: 29px;
    }

    .atelier-scene {
        min-height: 370px;
    }

    .atelier-work {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 38px 0 51px;
    }

    .atelier-work-title > p:last-child {
        font-size: 11px;
    }

    .atelier-services a {
        grid-template-columns: 26px 1fr 22px;
        gap: 9px;
    }

    .service-title {
        font-size: 11px;
    }

    .service-detail {
        display: none;
    }

    .atelier-note {
        grid-template-columns: 1fr auto;
        gap: 8px;
        padding: 19px 0;
    }

    .atelier-note > span {
        grid-column: 1 / -1;
    }

    .atelier-note p {
        max-width: 260px;
        font-size: 15px;
        line-height: 1.5;
    }

    .atelier-note a {
        max-width: 112px;
        text-align: right;
        line-height: 1.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/*============================================
  COSMIC STUDIO HOME
============================================*/
.cosmic-home {
    --paper: #202536;
    --ink: #f3eedc;
    --muted: #a2a7b9;
    --line: rgb(236 230 211 / 14%);
    position: relative;
    overflow: hidden;
    color: var(--ink);
    background-color: #202536;
    background-image: radial-gradient(1px 1px at 7% 13%, #f1d99e 99%, transparent), radial-gradient(1.5px 1.5px at 81% 17%, #f1d99e 99%, transparent), radial-gradient(1px 1px at 91% 53%, #f1d99e 99%, transparent), radial-gradient(1px 1px at 14% 72%, #f1d99e 99%, transparent), radial-gradient(1px 1px at 62% 84%, #f1d99e 99%, transparent), radial-gradient(1px 1px at 39% 44%, #f1d99e 99%, transparent), linear-gradient(90deg, rgb(233 230 208 / 3%) 1px, transparent 1px), linear-gradient(rgb(233 230 208 / 3%) 1px, transparent 1px);
    background-size: 277px 241px, 311px 289px, 347px 313px, 293px 281px, 359px 307px, 269px 337px, 42px 42px, 42px 42px;
}

.cosmic-home .concept-header {
    border-color: rgb(236 230 211 / 16%);
    color: var(--ink);
}

.cosmic-home .wordmark-mark {
    border-color: #eb795d;
    color: #eb795d;
}

.cosmic-home .wordmark-period,
.cosmic-home .header-contact span {
    color: #eb795d;
}

.cosmic-home .concept-header a,
.cosmic-home .concept-nav a {
    color: var(--ink);
}

.wordmark > span:last-child {
    position: relative;
}

.wordmark small {
    display: block;
    margin-top: 1px;
    color: #9298ac;
    font-family: var(--mono);
    font-size: 7px;
    font-weight: 400;
    letter-spacing: 0.14em;
}

.cosmic-hero {
    min-height: calc(100vh - 78px);
    grid-template-columns: 0.82fr 1.18fr;
    gap: clamp(25px, 5vw, 80px);
    padding-top: 38px;
    padding-bottom: 48px;
}

.cosmic-home .atelier-copy h1 {
    color: #f3eedc;
    font-size: clamp(54px, 6.5vw, 87px);
    line-height: 0.99;
    letter-spacing: -0.075em;
}

.cosmic-home .atelier-copy h1 span {
    color: #e98265;
}

.cosmic-home .atelier-copy > p:not(.eyebrow) {
    max-width: 390px;
    color: #b2b6c5;
    font-size: 14px;
}

.cosmic-home .eyebrow {
    color: #b7bac6;
}

.cosmic-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px 25px;
}

.cosmic-home .atelier-cta {
    padding: 12px 16px;
    border: 1px solid rgb(235 217 168 / 45%);
    border-radius: 3px;
    color: #f3eedc;
    background: rgb(255 255 255 / 3%);
    cursor: pointer;
    font: 600 11px var(--mono);
}

.cosmic-home .atelier-cta:hover {
    border-color: #e98265;
    background: rgb(233 130 101 / 10%);
}

.cosmic-text-link {
    color: #c1c4ce;
    font: 10px var(--mono);
}

.cosmic-home .atelier-index {
    color: #969caf;
}

.cosmic-scene {
    min-height: min(57vw, 510px);
    border: 1px solid rgb(236 230 211 / 8%);
    border-radius: 8px;
    box-shadow: 0 25px 80px rgb(8 11 19 / 20%);
    background: #222737;
}

.cosmic-scene .scene-grid {
    background-image: linear-gradient(rgb(233 230 208 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(233 230 208 / 7%) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: none;
}

.cosmic-scene .scene-halo {
    top: 14%;
    left: 20%;
    width: 58%;
    border-color: rgb(236 218 174 / 25%);
}

.cosmic-planet {
    --planet-color: #ed7858;
    --land-color-a: #eac77f;
    --land-color-b: #6fa18d;
    position: absolute;
    z-index: 2;
    top: 23%;
    left: 32%;
    width: 37%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 50%;
    background: var(--planet-color);
    box-shadow: inset -22px -13px 0 rgb(51 45 73 / 32%), 0 18px 35px rgb(8 11 19 / 25%);
    transition: background-color 420ms ease, border-radius 420ms ease, transform 500ms ease;
}

.cosmic-land {
    position: absolute;
    display: block;
    border-radius: 48% 52% 42% 58%;
    background: var(--land-color-a);
    transform: rotate(-24deg);
}

.cosmic-land.land-a {
    top: 26%;
    left: 18%;
    width: 39%;
    height: 16%;
}

.cosmic-land.land-b {
    right: 11%;
    bottom: 28%;
    width: 31%;
    height: 13%;
    background: var(--land-color-b);
    transform: rotate(25deg);
}

.cosmic-ocean {
    position: absolute;
    right: 22%;
    bottom: 11%;
    width: 16%;
    height: 10%;
    border-radius: 50%;
    background: #7485ad;
}

.cosmic-crater {
    position: absolute;
    display: block;
    width: 7%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(81 52 68 / 31%);
    box-shadow: inset 2px 2px 2px rgb(55 41 57 / 25%);
}

.cosmic-crater.crater-a { top: 58%; left: 23%; }
.cosmic-crater.crater-b { top: 19%; right: 27%; width: 5%; }
.cosmic-crater.crater-c { top: 47%; right: 18%; width: 3%; }

.cosmic-planet.planet-variant-1 { border-radius: 46% 54% 50% 50%; }
.cosmic-planet.planet-variant-2 { border-radius: 50% 43% 51% 48%; }
.cosmic-planet.planet-variant-3 { border-radius: 47% 51% 44% 57%; }

.cosmic-planet.planet-variant-1 .cosmic-land { border-radius: 28% 72% 55% 45%; }
.cosmic-planet.planet-variant-2 .cosmic-land { border-radius: 67% 33% 72% 28%; }
.cosmic-planet.planet-variant-3 .cosmic-land { border-radius: 48% 52% 20% 80%; }

.cosmic-planet.planet-variant-1 .land-a { top: 18%; left: 28%; width: 24%; height: 32%; transform: rotate(32deg); }
.cosmic-planet.planet-variant-2 .land-a { top: 30%; left: 12%; width: 50%; height: 12%; transform: rotate(-42deg); }
.cosmic-planet.planet-variant-3 .land-b { right: 20%; bottom: 18%; width: 17%; height: 34%; transform: rotate(-35deg); }

.cosmic-home .scene-ring {
    top: 29%;
    left: 14%;
    width: 75%;
    height: 29%;
}

.cosmic-ship {
    position: absolute;
    z-index: 4;
    top: 35%;
    right: 13%;
    width: 37px;
    height: 35px;
    border: 1px solid #ead89d;
    border-radius: 10px 14px 10px 14px;
    background: #39435d;
    transform: rotate(14deg);
    animation: ship-drift 8s ease-in-out infinite alternate;
}

.cosmic-ship i,
.cosmic-ship b {
    position: absolute;
    top: 8px;
    width: 20px;
    height: 17px;
    border: 1px solid rgb(234 216 157 / 78%);
    background: #7187ab;
}

.cosmic-ship i { left: -24px; }
.cosmic-ship b { right: -24px; }
.cosmic-ship span { position: absolute; top: 13px; left: 14px; width: 8px; height: 8px; border-radius: 50%; background: #efbd71; }
.cosmic-ship.ship-variant-1 { width: 45px; height: 26px; border-radius: 20px 8px 16px 8px; filter: hue-rotate(38deg); }
.cosmic-ship.ship-variant-2 { width: 30px; height: 42px; border-radius: 50% 50% 8px 8px; filter: hue-rotate(176deg); }
.cosmic-ship.ship-variant-3 { width: 40px; height: 32px; border-radius: 4px 18px 5px 18px; filter: hue-rotate(287deg); }

.cosmic-asteroid {
    position: absolute;
    z-index: 1;
    border: 1px solid rgb(238 223 180 / 55%);
    background: #586078;
    clip-path: polygon(27% 0, 76% 9%, 100% 52%, 78% 100%, 18% 86%, 0 35%);
}

.cosmic-asteroid.asteroid-a { top: 22%; right: 31%; width: 17px; height: 15px; }
.cosmic-asteroid.asteroid-b { bottom: 22%; left: 25%; width: 12px; height: 11px; transform: rotate(26deg); }
.cosmic-asteroid.asteroid-c { top: 65%; right: 22%; width: 9px; height: 8px; transform: rotate(-18deg); }

.cosmic-bot {
    position: absolute;
    z-index: 5;
    right: 16%;
    bottom: 15%;
    width: 58px;
    height: 91px;
    animation: robot-hover 2.5s ease-in-out infinite alternate;
    transition: filter 350ms ease, transform 350ms ease;
}

.cosmic-bot .bot-antenna { position: absolute; top: -10px; left: 28px; width: 2px; height: 13px; background: #e8d89e; }
.cosmic-bot .bot-antenna::before { position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ed7958; content: ''; }
.cosmic-bot .bot-head { position: absolute; top: 1px; left: 7px; width: 46px; height: 39px; border: 2px solid #292d3e; border-radius: 12px 12px 8px 8px; background: #e4d6aa; box-shadow: inset -7px 0 0 rgb(91 91 99 / 13%); }
.cosmic-bot .bot-head i,
.cosmic-bot .bot-head b { position: absolute; top: 14px; width: 6px; height: 7px; border-radius: 2px; background: #48566c; }
.cosmic-bot .bot-head i { left: 9px; }
.cosmic-bot .bot-head b { right: 9px; }
.cosmic-bot .bot-head em { position: absolute; bottom: 6px; left: 19px; width: 6px; height: 3px; border-radius: 0 0 4px 4px; background: #d28062; }
.cosmic-bot .bot-body { position: absolute; top: 39px; left: 12px; width: 36px; height: 36px; border: 2px solid #292d3e; border-radius: 6px; background: #7a9c89; }
.cosmic-bot .bot-body i { position: absolute; top: 9px; left: 9px; width: 11px; height: 11px; border-radius: 50%; background: #e7ca77; }
.cosmic-bot .bot-arm { position: absolute; top: 45px; right: 0; width: 15px; height: 23px; border: 2px solid #292d3e; border-radius: 6px; background: #e4d6aa; transform: rotate(-18deg); }
.cosmic-bot .bot-leg { position: absolute; bottom: 0; left: 16px; width: 8px; height: 14px; background: #e4d6aa; }
.cosmic-bot .bot-leg-two { left: 31px; }
.cosmic-bot.bot-variant-1 { filter: hue-rotate(35deg); transform: scale(1.08); }
.cosmic-bot.bot-variant-2 { filter: hue-rotate(165deg); }
.cosmic-bot.bot-variant-3 { filter: hue-rotate(285deg); transform: scale(.94); }
.cosmic-bot.bot-variant-1 .bot-head { border-radius: 50% 50% 7px 7px; }
.cosmic-bot.bot-variant-2 .bot-head { border-radius: 5px; }
.cosmic-bot.bot-variant-3 .bot-body { border-radius: 14px 6px; }

.scene-reroll {
    position: absolute;
    z-index: 7;
    bottom: 18px;
    left: 19px;
    padding: 8px 10px;
    border: 1px solid rgb(236 230 211 / 24%);
    border-radius: 2px;
    color: #e8d9aa;
    background: rgb(34 39 55 / 78%);
    cursor: pointer;
    font: 8px var(--mono);
    letter-spacing: 0.08em;
}

.scene-reroll:hover { border-color: #e98265; color: #fff2d1; }

.cosmic-map,
.cosmic-footer-note {
    width: min(100% - 100px, 1340px);
    margin: 0 auto;
}

.cosmic-map {
    padding: 88px 0 90px;
    border-top: 1px solid rgb(236 230 211 / 13%);
}

.cosmic-section-heading {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    align-items: end;
    gap: 10px 40px;
}

.cosmic-section-heading .eyebrow { grid-column: 1 / -1; margin: 0; color: #afb4c4; }
.cosmic-section-heading h2 { margin: 11px 0 0; font: 500 clamp(38px, 5vw, 58px)/1.04 var(--display); letter-spacing: -0.07em; }
.cosmic-section-heading h2 span { color: #e98265; }
.cosmic-section-heading > p:last-child { max-width: 340px; margin: 0 0 5px; color: #aeb3c2; font-size: 12px; line-height: 1.8; }

.cosmic-destinations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 43px;
}

.destination {
    position: relative;
    display: flex;
    min-height: 194px;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: 21px;
    border: 1px solid rgb(236 230 211 / 15%);
    border-radius: 5px;
    background: linear-gradient(145deg, rgb(255 255 255 / 3%), transparent 64%);
    transition: transform 180ms ease, border-color 180ms ease;
}

.destination:hover { transform: translateY(-4px); border-color: rgb(233 130 101 / 67%); }
.destination-planet { position: absolute; top: 13px; right: 25px; width: 89px; aspect-ratio: 1; border: 1px solid rgb(230 220 190 / 50%); border-radius: 50%; background: #628c91; box-shadow: inset -13px -8px 0 rgb(33 42 67 / 35%), 0 0 0 13px rgb(255 255 255 / 2%); }
.destination-planet i { position: absolute; top: 32px; left: 18px; width: 45px; height: 13px; border-radius: 50%; background: #d4b77e; transform: rotate(-26deg); }
.destination-web .destination-planet { width: 72px; top: 26px; background: #e98265; }
.destination-web .destination-planet i { top: 20px; left: 9px; width: 46px; height: 23px; background: #7b9e8a; }
.destination-ai .destination-planet { width: 64px; top: 40px; right: 43px; background: #8278ab; }
.destination-ai .destination-planet i { top: 13px; left: 12px; width: 36px; height: 27px; background: #e2ce91; }
.destination-code { margin-bottom: 9px; color: #a9afc0; font: 8px var(--mono); letter-spacing: 0.08em; }
.destination strong { font: 500 20px var(--display); letter-spacing: -0.04em; }
.destination-hint { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; color: #a9afc0; font-size: 10px; }
.destination-hint b { color: #ed8566; font-size: 14px; }

.cosmic-footer-note {
    display: flex;
    min-height: 86px;
    align-items: center;
    gap: 14px;
    border-top: 1px solid rgb(236 230 211 / 13%);
    color: #bec2cd;
}

.cosmic-footer-note p { flex: 1; font: 11px var(--mono); }
.cosmic-footer-note a { font-size: 11px; }
.cosmic-footer-note a b { padding-left: 7px; color: #e98265; }
.footer-orbit { color: #edbf77; }

@keyframes ship-drift {
    from { transform: translate(0, 0) rotate(14deg); }
    to { transform: translate(13px, -8px) rotate(25deg); }
}

@media (max-width: 980px) {
    .cosmic-map,
    .cosmic-footer-note { width: min(100% - 48px, 760px); }
    .cosmic-hero { min-height: auto; grid-template-columns: 1fr; gap: 24px; padding-top: 52px; }
    .cosmic-copy { max-width: 650px; }
    .cosmic-scene { min-height: min(58vw, 470px); }
}

@media (max-width: 680px) {
    .cosmic-hero { padding-top: 38px; padding-bottom: 48px; }
    .cosmic-home .atelier-copy h1 { font-size: clamp(49px, 13vw, 72px); }
    .cosmic-scene { min-height: 330px; }
    .cosmic-planet { top: 22%; left: 24%; width: 49%; }
    .cosmic-home .scene-halo { left: 13%; width: 72%; }
    .cosmic-home .scene-ring { left: 6%; width: 87%; }
    .cosmic-bot { right: 9%; bottom: 15%; transform: scale(.82); transform-origin: bottom right; }
    .cosmic-ship { right: 8%; }
    .cosmic-map { padding: 59px 0; }
    .cosmic-section-heading { grid-template-columns: 1fr; gap: 14px; }
    .cosmic-section-heading .eyebrow { grid-column: auto; }
    .cosmic-section-heading > p:last-child { margin-top: 2px; }
    .cosmic-destinations { grid-template-columns: 1fr; gap: 10px; margin-top: 27px; }
    .destination { min-height: 160px; }
    .cosmic-footer-note { min-height: 78px; }
}

/*============================================
  DEEP SPACE EXPLORER
============================================*/
html:has(.cosmic-universe-page),
.cosmic-universe-page {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background: #202536;
}

.cosmic-universe-page {
    --paper: #202536;
    --ink: #f0ecdf;
    --muted: #9da6ba;
    --line: rgb(229 230 235 / 13%);
    position: relative;
    color: #f0ecdf;
    overscroll-behavior: none;
}

.cosmic-universe-page main,
.universe {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cosmic-universe-page,
.cosmic-universe-page button,
.cosmic-universe-page a {
    cursor: none;
}

.cosmic-universe-page.planet-info-open,
.cosmic-universe-page.planet-info-open * {
    cursor: auto !important;
}

.cosmic-universe-page main {
    z-index: 0;
}

.universe {
    isolation: isolate;
    background: #202536;
}

.universe-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    cursor: none;
    touch-action: none;
}

.universe-canvas.is-dragging {
    cursor: none;
}

.space-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7;
    width: 42px;
    height: 42px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--ship-rotation, 0deg));
    transition: opacity 180ms ease;
}

.space-cursor.is-visible {
    opacity: 1;
}

.space-cursor.is-hidden {
    opacity: 0;
}

.space-cursor.is-experience {
    animation: cursor-experience 430ms ease-out;
}

@keyframes cursor-experience {
    0% { filter: drop-shadow(0 0 0 rgb(104 246 158 / 0%)); transform: translate(-50%, -50%) rotate(var(--ship-rotation, 0deg)) scale(1); }
    48% { filter: drop-shadow(0 0 18px rgb(104 246 158 / 94%)); transform: translate(-50%, -50%) rotate(var(--ship-rotation, 0deg)) scale(1); }
    100% { filter: drop-shadow(0 0 0 rgb(104 246 158 / 0%)); transform: translate(-50%, -50%) rotate(var(--ship-rotation, 0deg)) scale(1); }
}

.space-cursor svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.space-cursor-body {
    fill: #f2e8d3;
    stroke: #aabed5;
    stroke-width: 1.8;
    filter: drop-shadow(0 0 5px rgb(226 198 151 / 72%));
}

.space-cursor-wing {
    fill: #698ba8;
    stroke: #d6c39c;
    stroke-width: 1.5;
}

.space-cursor-window {
    fill: #ef805f;
    stroke: #202536;
    stroke-width: 1.4;
}

.space-cursor-detail {
    fill: none;
    stroke: #d88667;
    stroke-width: 2;
    stroke-linecap: round;
}

.space-cursor-flame {
    fill: #ffb45f;
    opacity: var(--ship-thrust, 0.35);
    filter: drop-shadow(0 0 3px #ff9a50) drop-shadow(0 0 8px rgb(255 118 67 / 88%));
    transform-origin: 40px 49px;
    animation: cursor-engine-flicker 120ms steps(2, end) infinite alternate;
}

@keyframes cursor-engine-flicker {
    to { transform: scaleY(1.24); }
}

@media (hover: none), (pointer: coarse) {
    .space-cursor {
        display: none;
    }
}

.event-horizon-overlay {
    position: fixed;
    inset: 0;
    z-index: 12;
    overflow: hidden;
    background: rgb(3 4 11 / var(--horizon-dim, 0%));
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.event-horizon-overlay.is-active {
    opacity: 1;
}

.event-horizon-overlay::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280vmax;
    aspect-ratio: 1;
    border: 2px solid rgb(240 174 139 / 84%);
    border-radius: 50%;
    background: radial-gradient(circle, #02030a 0 57%, rgb(14 13 28 / 98%) 68%, rgb(116 103 159 / 92%) 70%, rgb(245 169 133 / 98%) 71%, #050610 72% 100%);
    box-shadow: 0 0 25px rgb(246 169 131 / 48%), 0 0 85px rgb(137 123 203 / 28%);
    content: '';
    opacity: var(--horizon-ring-opacity, 0);
    transform: translate(-50%, -50%) scale(var(--horizon-progress, 0));
    transition: opacity 100ms linear;
    animation: horizon-rotation 7s linear infinite;
}

.event-horizon-overlay::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 230vmax;
    height: 58vmax;
    border: 3px solid rgb(238 164 133 / 59%);
    border-right-color: rgb(169 159 220 / 88%);
    border-left-color: rgb(250 203 148 / 88%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgb(239 162 131 / 38%), inset 0 0 18px rgb(138 123 197 / 32%);
    content: '';
    opacity: var(--horizon-ring-opacity, 0);
    transform: translate(-50%, -50%) rotate(-18deg) scale(var(--horizon-progress, 0));
    animation: accretion-spin 3.8s linear infinite;
}

.event-horizon-caption {
    position: absolute;
    top: calc(50% + 75px);
    left: 50%;
    color: #f2e7d4;
    font: 600 14px var(--mono);
    letter-spacing: 0.16em;
    text-align: center;
    text-shadow: 0 0 18px rgb(236 173 138 / 72%);
    transform: translateX(-50%);
    white-space: nowrap;
}

@keyframes horizon-rotation {
    from { filter: hue-rotate(0deg); }
    to { filter: hue-rotate(35deg); }
}

@keyframes accretion-spin {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

.cosmic-universe-page .concept-header {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 10;
    width: min(100% - 64px, 1480px);
    height: 64px;
    margin: 0;
    border: 0;
    color: #f0ecdf;
    transform: translateX(-50%);
    pointer-events: none;
}

.cosmic-universe-page .concept-header > * {
    pointer-events: auto;
}

.cosmic-universe-page .wordmark {
    position: absolute;
    top: 4px;
    left: 50%;
    gap: 13px;
    font-size: 52px;
    letter-spacing: -0.075em;
    transform: translateX(-50%);
}

.cosmic-universe-page .wordmark-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.cosmic-universe-page .wordmark-name {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    line-height: 0.9;
}

.cosmic-universe-page .wordmark-mark {
    width: 58px;
    height: 58px;
    border-color: #ed8566;
    border-radius: 50%;
    color: #ed8566;
    font: 500 22px/1 var(--mono);
    letter-spacing: -0.19em;
    padding-right: 0.19em;
    box-shadow: 0 0 0 1px rgb(237 133 102 / 8%), 0 0 22px rgb(237 133 102 / 12%);
    animation: wordmark-mark-glow 4s ease-in-out infinite;
}

.cosmic-universe-page .wordmark-period {
    color: #ed8566;
}

.cosmic-universe-page .wordmark small {
    margin-top: 6px;
    color: rgb(195 204 221 / 76%);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.24em;
    line-height: 1;
    text-align: left;
}

.universe-vignette {
    display: none;
}

.speed-lines {
    position: absolute;
    z-index: 2;
    inset: -30%;
    opacity: 0;
    background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 5.2deg, rgb(211 221 236 / 12%) 5.25deg 5.34deg, transparent 5.4deg 15deg);
    mask-image: radial-gradient(ellipse, transparent 20%, #000 88%);
    transition: opacity 240ms ease;
    pointer-events: none;
}

.speed-lines.is-active {
    opacity: 0.32;
    animation: speed-lines-pulse 2s ease-in-out infinite alternate;
}

.planet-info {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    z-index: 8;
    width: min(720px, calc(100vw - 32px));
    height: min(530px, calc(100dvh - 36px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 34px 42px 38px;
    border: 1px solid rgb(171 187 209 / 22%);
    border-left: 2px solid rgb(237 133 102 / 78%);
    background: linear-gradient(145deg, #1e2436, #141928);
    box-shadow: 0 24px 80px rgb(5 8 18 / 48%), inset 0 1px rgb(255 255 255 / 5%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
    transform-origin: center;
    transition: opacity 260ms ease, transform 480ms cubic-bezier(0.18, 0.8, 0.2, 1);
    backdrop-filter: blur(18px);
    scrollbar-color: rgb(237 133 102 / 60%) rgb(255 255 255 / 5%);
    scrollbar-width: thin;
}

.planet-info.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.planet-info.is-arrival {
    border-left-color: rgb(237 133 102 / 88%);
}

.planet-info-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    min-width: 0;
}

.planet-info-heading-copy {
    min-width: 0;
    flex: 1;
    text-align: center;
}

.planet-info-image {
    display: block;
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    margin: 0;
    border: 1px solid rgb(171 187 209 / 18%);
    border-radius: 5px;
    background: #9aaebe;
    object-fit: contain;
}

.planet-info-image[hidden] {
    display: none;
}

.planet-info-image[data-page-id="alfantin"] {
    border-color: transparent;
    mix-blend-mode: screen;
}

.planet-info-image[data-page-id="robonette"] {
    image-rendering: pixelated;
}

.planet-info-image[data-page-id="developer"] {
    border-radius: 50%;
    object-fit: cover;
}

.planet-info-image[data-page-id="github"],
.planet-info-image[data-page-id="youtube"],
.planet-info-image[data-page-id="linkedin"],
.planet-info-image[data-page-id="twitter"] {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
    padding: 11px;
    border: 1px solid rgb(171 187 209 / 24%);
    border-radius: 24px;
    background: #f3f2ed;
    object-fit: contain;
}

.planet-info[hidden] {
    display: none;
}

.planet-info-close {
    position: absolute;
    top: 11px;
    right: 14px;
    width: 46px;
    height: 46px;
    border: 0;
    color: #aeb5c4;
    background: transparent;
    font-size: 34px;
    font-weight: 300;
}

.planet-info-close:hover {
    color: #ed8566;
}

.planet-info-kicker {
    color: #e5bd83;
    font: 11px/1.2 var(--mono);
    letter-spacing: 0.14em;
}

.planet-info h1 {
    margin: 7px 0 0;
    padding: 0 0 13px;
    border-bottom: 1px solid rgb(171 187 209 / 22%);
    color: #f0ecdf;
    font: 500 30px/1.08 var(--display);
    letter-spacing: -0.05em;
    text-align: center;
}

.planet-info p {
    max-width: 610px;
    margin: 20px auto 0;
    color: #b4bac8;
    font-size: 15px;
    line-height: 1.65;
    text-align: center;
}

.planet-info.is-arrival h1 {
    margin: 7px 0 0;
    font-size: 32px;
}

.planet-info.is-arrival p {
    font-size: 15px;
    line-height: 1.65;
}

.planet-info-action {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin: 22px auto 0;
    padding: 12px 16px;
    border: 1px solid rgb(237 185 131 / 48%);
    border-radius: 3px;
    color: #edb983;
    font: 12px var(--mono);
    letter-spacing: 0.08em;
    text-align: center;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.planet-info-action[hidden] {
    display: none;
}

.planet-info-action:hover {
    border-color: #edb983;
    color: #fff0cf;
    background: rgb(237 185 131 / 9%);
}

.planet-info:not([hidden])[data-page-id="github"],
.planet-info:not([hidden])[data-page-id="youtube"],
.planet-info:not([hidden])[data-page-id="linkedin"],
.planet-info:not([hidden])[data-page-id="twitter"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.planet-info[data-page-id="github"] .planet-info-heading,
.planet-info[data-page-id="youtube"] .planet-info-heading,
.planet-info[data-page-id="linkedin"] .planet-info-heading,
.planet-info[data-page-id="twitter"] .planet-info-heading {
    width: 100%;
    flex-direction: column;
    gap: 18px;
}

.planet-info[data-page-id="github"] .planet-info-image,
.planet-info[data-page-id="youtube"] .planet-info-image,
.planet-info[data-page-id="linkedin"] .planet-info-image,
.planet-info[data-page-id="twitter"] .planet-info-image {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 20px;
}

.planet-info[data-page-id="github"] .planet-info-heading-copy,
.planet-info[data-page-id="youtube"] .planet-info-heading-copy,
.planet-info[data-page-id="linkedin"] .planet-info-heading-copy,
.planet-info[data-page-id="twitter"] .planet-info-heading-copy {
    width: 100%;
    flex: 0 0 auto;
}

.planet-info[data-page-id="github"] .planet-info-action,
.planet-info[data-page-id="youtube"] .planet-info-action,
.planet-info[data-page-id="linkedin"] .planet-info-action,
.planet-info[data-page-id="twitter"] .planet-info-action {
    margin-top: 24px;
}

@keyframes wordmark-mark-orbit {
    to { rotate: 360deg; }
}

@keyframes wordmark-mark-glow {
    0%, 100% { box-shadow: 0 0 0 1px rgb(237 133 102 / 8%), 0 0 18px rgb(237 133 102 / 10%); }
    50% { box-shadow: 0 0 0 2px rgb(237 133 102 / 16%), 0 0 30px rgb(237 133 102 / 22%); }
}

.cosmic-universe-page {
    font-size: 16px;
}

.cosmic-universe-page .planet-info-kicker,
.cosmic-universe-page .planet-info-action {
    font-size: 12px;
}

.cosmic-universe-page .planet-info h1 {
    font-size: 25px;
}

.cosmic-universe-page .planet-info p {
    font-size: 15px;
    line-height: 1.7;
}

.cosmic-universe-page .planet-info.is-arrival h1 {
    font-size: 40px;
}

.cosmic-universe-page .planet-info.is-arrival p {
    font-size: 16px;
}

.sound-toggle {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border: 1px solid rgb(214 221 235 / 24%);
    border-radius: 3px;
    color: #aab3c6;
    background: rgb(28 34 51 / 76%);
    cursor: pointer;
    font: 12px var(--mono);
    letter-spacing: 0.04em;
    backdrop-filter: blur(8px);
}

.content-menu .sound-toggle {
    position: static;
    padding: 9px 11px;
    border-color: rgb(235 142 104 / 38%);
    color: rgb(255 240 212 / 68%);
    background: rgb(235 142 104 / 5%);
    font: 10px/1 var(--mono);
    letter-spacing: 0.08em;
}

.content-menu .sound-toggle:hover,
.content-menu .sound-toggle:focus-visible {
    border-color: rgb(235 142 104 / 82%);
    color: #fff0d4;
    background: rgb(235 142 104 / 16%);
    transform: translateY(-2px);
}

.sound-toggle i {
    color: #8993aa;
    font-size: 17px;
    font-style: normal;
}

.sound-toggle.is-enabled i {
    color: #79e8a0;
    text-shadow: 0 0 11px rgb(121 232 160 / 56%);
}

.sound-toggle:hover {
    border-color: rgb(237 133 102 / 66%);
    color: #f0ecdf;
}

.universe-touch-controls {
    display: none;
}

.accessible-destinations {
    position: fixed;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.cosmic-universe-page :focus-visible {
    outline-color: #edb983;
}

@keyframes speed-lines-pulse {
    from { transform: scale(1); }
    to { transform: scale(1.035); }
}

@media (max-width: 760px) {
    .cosmic-universe-page .concept-header {
        width: calc(100% - 36px);
        height: 58px;
    }

    .cosmic-universe-page .wordmark {
        top: 6px;
        gap: 9px;
        font-size: 38px;
    }

    .cosmic-universe-page .wordmark-mark {
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    .sound-toggle {
        right: 20px;
        bottom: 19px;
        padding: 8px 10px;
        font-size: 10px;
    }

    .planet-info.is-open {
        width: calc(100vw - 28px);
        height: min(530px, calc(100dvh - 28px));
        padding: 25px 22px 28px;
    }
}

@media (max-width: 420px) {
    .cosmic-universe-page .wordmark {
        gap: 7px;
        font-size: 32px;
    }

    .cosmic-universe-page .wordmark-mark {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .planet-info h1 {
        font-size: 24px;
    }
}

/*============================================
  ALFANTIN SPACE PROGRAM
============================================*/
html:has(.survival-program-page),
.survival-program-page {
    width: 100%;
    min-width: 320px;
    min-height: 100%;
    overflow: hidden;
    color: #f1eddf;
    background: #171b2a;
}

.survival-program-page,
.survival-program-page button,
.survival-program-page a,
.survival-program-page [role="button"] {
    cursor: none;
}

.survival-program-page .concept-header {
    display: none;
}

.survival-program-page main,
.survival-program {
    width: 100%;
    height: 100dvh;
    min-height: 520px;
}

.survival-program {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.survival-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: none;
    touch-action: none;
}

.survival-canvas.is-playing {
    cursor: none;
}

.brand-launch {
    --logo-tone: #f1eddf;
    --logo-glow: rgb(237 133 102 / 0%);
    --integrity: 1;
    position: absolute;
    top: calc(50% - 18px);
    left: 50%;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 8px;
    color: #f1eddf;
    cursor: none;
    text-align: center;
    text-shadow: none;
    transform: translate(-50%, -50%);
    transition: filter 180ms ease, transform 180ms ease;
}

.brand-integrity {
    position: absolute;
    bottom: 18px;
    left: 0;
    display: block;
    width: 100%;
    height: 4px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgb(208 220 239 / 20%);
    background: rgb(7 12 22 / 82%);
    box-shadow: 0 0 10px rgb(3 7 17 / 48%);
    z-index: 1;
}

.brand-integrity::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, #ea665d, #f0b273 55%, #b8e5bf);
    box-shadow: 0 0 10px rgb(234 102 93 / 56%);
    transform: scaleX(var(--integrity));
    transform-origin: left center;
    transition: transform 280ms ease;
}

.brand-launch:hover,
.brand-launch:focus-visible {
    filter: brightness(1.15);
    transform: translate(-50%, -50%) scale(1.05);
}

.brand-launch.is-experience {
    animation: logo-experience 420ms ease-out;
}

.brand-launch.is-damaged {
    animation: logo-damage 420ms ease-out;
}

@keyframes logo-experience {
    0% { filter: drop-shadow(0 0 0 rgb(119 242 170 / 0%)); transform: translate(-50%, -50%) scale(1); }
    45% { filter: drop-shadow(0 0 24px rgb(119 242 170 / 85%)); transform: translate(-50%, -50%) scale(1.07); }
    100% { filter: drop-shadow(0 0 0 rgb(119 242 170 / 0%)); transform: translate(-50%, -50%) scale(1); }
}

@keyframes logo-damage {
    0% { filter: drop-shadow(0 0 0 rgb(245 97 91 / 0%)); transform: translate(-50%, -50%) scale(1); }
    45% { filter: drop-shadow(0 0 24px rgb(245 97 91 / 82%)); transform: translate(-50%, -50%) scale(0.96); }
    100% { filter: drop-shadow(0 0 0 rgb(245 97 91 / 0%)); transform: translate(-50%, -50%) scale(1); }
}

.brand-launch-logo {
    display: inline-flex;
    align-items: center;
    gap: 0;
    color: var(--logo-tone);
    font-family: var(--display);
    font-size: clamp(38px, 6vw, 59px);
    font-weight: 700;
    letter-spacing: -0.09em;
    line-height: 1;
    filter: none;
    transition: color 280ms ease, filter 280ms ease;
}

.brand-launch-logo .wordmark-mark {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    place-items: center;
    padding-right: 0.19em;
    border: 1px solid #ed8566;
    border-radius: 50%;
    color: #ed8566;
    font: 500 22px/1 var(--mono);
    letter-spacing: -0.19em;
    box-shadow: 0 0 22px rgb(237 133 102 / 22%);
}

.brand-launch-logo .wordmark-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-bottom: 29px;
}

.brand-launch-logo .wordmark-name {
    display: inline-flex;
    line-height: 0.85;
}

.brand-launch-logo .wordmark-period {
    color: #ed8566;
}

.brand-launch-logo small {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    width: max-content;
    min-width: 310px;
    margin: 0;
    transform: translateX(-50%);
    color: color-mix(in srgb, var(--logo-tone) 76%, #9aa7bf);
    font: 500 9px/1 var(--mono);
    letter-spacing: 0.16em;
    text-align: center;
    white-space: nowrap;
}

.content-menu {
    position: absolute;
    top: auto;
    bottom: max(22px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 4;
    display: flex;
    max-width: min(760px, calc(100vw - 38px));
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    transform: translateX(-50%);
}

.content-menu button,
.content-menu a {
    padding: 9px 11px;
    border: 1px solid rgb(235 142 104 / 38%);
    border-radius: 3px;
    color: rgb(255 240 212 / 68%);
    background: rgb(235 142 104 / 5%);
    box-shadow: inset 0 1px rgb(255 255 255 / 4%);
    cursor: pointer;
    font: 10px/1 var(--mono);
    letter-spacing: 0.08em;
    transition: border-color 170ms ease, color 170ms ease, background 170ms ease, transform 170ms ease;
    backdrop-filter: blur(8px);
    text-decoration: none;
}

.survival-program-page .content-menu button,
.survival-program-page .content-menu a,
.survival-program-page .planet-info button,
.survival-program-page .planet-info a {
    cursor: none;
}

.content-menu button:hover,
.content-menu button:focus-visible,
.content-menu a:hover,
.content-menu a:focus-visible {
    border-color: rgb(235 142 104 / 82%);
    color: #fff0d4;
    background: rgb(235 142 104 / 16%);
    transform: translateY(-2px);
}

.content-menu[data-damage="damaged"] button {
    border-color: rgb(179 73 69 / 55%);
    background: rgb(93 29 35 / 58%);
}

.content-menu[data-damage="warning"] button {
    border-color: rgb(202 75 68 / 72%);
    background: rgb(103 25 31 / 76%);
}

.content-menu[data-damage="critical"] button {
    border-color: rgb(239 93 77 / 88%);
    background: rgb(86 17 24 / 92%);
    box-shadow: 0 0 17px rgb(213 56 50 / 23%);
}

.game-hud {
    position: absolute;
    top: 24px;
    left: 26px;
    right: 26px;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr minmax(230px, 360px) 1fr;
    align-items: start;
    gap: 20px;
    pointer-events: none;
}

.hud-brand {
    color: #e9e4d6;
    font: 700 16px/1 var(--display);
    letter-spacing: -0.045em;
}

.hud-brand span {
    display: block;
    margin-top: 4px;
    color: #9aa8bf;
    font: 8px/1 var(--mono);
    letter-spacing: 0.2em;
}

.station-health {
    display: grid;
    gap: 5px;
    color: #d5dbe5;
    font: 9px/1 var(--mono);
    letter-spacing: 0.11em;
}

.station-health > div {
    height: 8px;
    overflow: hidden;
    border: 1px solid rgb(220 228 243 / 25%);
    background: rgb(10 14 25 / 54%);
}

.station-health i {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #e88065, #f2c87b);
    box-shadow: 0 0 14px rgb(239 142 101 / 50%);
    transition: width 160ms ease;
}

.station-health b {
    color: #9faabd;
    font: 9px/1 var(--mono);
    font-weight: 400;
    text-align: right;
}

.game-readout {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    color: #d5dbe5;
    font: 9px/1.3 var(--mono);
    letter-spacing: 0.08em;
    text-align: right;
}

.game-readout span:last-child {
    color: #e9c881;
}

.survival-program-page .sound-toggle {
    position: absolute;
    right: 20px;
    bottom: 18px;
    z-index: 6;
}

.skill-draft {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 12;
    width: min(850px, calc(100vw - 40px));
    padding: 30px;
    border: 1px solid rgb(237 185 131 / 38%);
    background: linear-gradient(145deg, rgb(30 36 54 / 97%), rgb(17 21 35 / 98%));
    box-shadow: 0 30px 100px rgb(4 7 15 / 72%);
    text-align: center;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(17px);
}

.skill-draft-kicker {
    color: #e8bd7d;
    font: 10px var(--mono);
    letter-spacing: 0.17em;
}

.skill-draft h2 {
    margin: 8px 0 0;
    color: #f1eddf;
    font: 600 clamp(26px, 5vw, 42px)/1 var(--display);
    letter-spacing: -0.06em;
}

.skill-draft > p {
    margin: 11px 0 25px;
    color: #aab4c7;
    font-size: 14px;
}

.skill-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.skill-card {
    display: flex;
    min-height: 158px;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    border: 1px solid rgb(202 215 237 / 23%);
    color: #eae5d7;
    background: rgb(82 99 132 / 13%);
    cursor: pointer;
    text-align: left;
    transition: border-color 170ms ease, background 170ms ease, transform 170ms ease;
}

.skill-card:hover,
.skill-card:focus-visible {
    border-color: #efad75;
    background: rgb(239 173 117 / 11%);
    transform: translateY(-5px);
}

.skill-card strong {
    color: #f1c77f;
    font: 500 16px/1.1 var(--display);
    letter-spacing: -0.04em;
}

.skill-card span {
    margin-top: 12px;
    color: #bac2d0;
    font-size: 13px;
    line-height: 1.45;
}

.defeat-screen {
    position: absolute;
    z-index: 11;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    color: #f0ebdd;
    background: radial-gradient(circle at center, rgb(86 34 42 / 47%), rgb(3 5 12 / 94%) 64%);
    pointer-events: none;
    text-align: center;
    transition: opacity 700ms ease;
}

.defeat-screen.is-visible {
    opacity: 1;
}

.survival-program:has(.defeat-screen.is-visible) .brand-launch,
.survival-program:has(.defeat-screen.is-visible) .content-menu {
    display: none;
}

.defeat-screen > span {
    color: #e58468;
    font: 10px var(--mono);
    letter-spacing: 0.22em;
}

.defeat-screen h2 {
    margin: 10px 0;
    font: 600 clamp(42px, 8vw, 92px)/0.9 var(--display);
    letter-spacing: -0.08em;
}

.defeat-screen p {
    color: #dfc18c;
    font: 11px var(--mono);
    letter-spacing: 0.13em;
}

.survival-program-page .planet-info {
    z-index: 15;
    height: auto;
    min-height: min(420px, calc(100dvh - 54px));
}

.survival-program-page .space-cursor {
    z-index: 14;
}

.survival-program-page *,
.survival-program-page *::before,
.survival-program-page *::after {
    cursor: none !important;
}

.survival-program-page.survival-info-open,
.survival-program-page.survival-info-open * {
    cursor: auto !important;
}

.survival-program-page.survival-info-open .space-cursor {
    display: none;
}

.survival-program-page .planet-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: min(470px, calc(100dvh - 54px));
    padding: 42px 56px;
    text-align: center;
}

.survival-program-page .planet-info[hidden] {
    display: none;
}

.survival-program-page .planet-info-heading {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.survival-program-page .planet-info-heading-copy {
    width: 100%;
    flex: 0 0 auto;
    text-align: center;
}

.survival-program-page .planet-info-image,
.survival-program-page .planet-info-image[data-page-id="github"],
.survival-program-page .planet-info-image[data-page-id="youtube"],
.survival-program-page .planet-info-image[data-page-id="linkedin"],
.survival-program-page .planet-info-image[data-page-id="twitter"] {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    margin: 0;
}

.survival-program-page .planet-info h1 {
    width: 100%;
    margin: 8px 0 0;
    text-align: center;
}

.survival-program-page .planet-info p {
    max-width: 590px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.survival-program-page .planet-info-action {
    margin-right: auto;
    margin-left: auto;
}

.survival-program-page .planet-info-links {
    display: flex;
    max-width: 590px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin: 24px auto 0;
}

.survival-program-page .planet-info-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 10px 13px;
    border: 1px solid rgb(237 185 131 / 48%);
    border-radius: 3px;
    color: #edb983;
    background: rgb(237 185 131 / 5%);
    font: 11px/1 var(--mono);
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.survival-program-page .planet-info-link:hover,
.survival-program-page .planet-info-link:focus-visible {
    border-color: #edb983;
    color: #fff0cf;
    background: rgb(237 185 131 / 13%);
}

@media (max-width: 760px) {
    .survival-program-page main,
    .survival-program {
        min-height: 100dvh;
    }

    .brand-launch-logo {
        gap: 0;
        font-size: 36px;
    }

    .brand-launch-logo .wordmark-mark {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        font-size: 17px;
    }

    .content-menu {
        top: auto;
        bottom: max(16px, env(safe-area-inset-bottom));
        gap: 6px;
    }

    .content-menu button,
    .content-menu a {
        padding: 8px 9px;
        font-size: 9px;
    }

    .game-hud {
        top: 17px;
        left: 17px;
        right: 17px;
        grid-template-columns: 1fr 1.15fr;
        gap: 10px;
    }

    .station-health {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .game-readout {
        gap: 8px;
        font-size: 8px;
    }

    .skill-draft {
        padding: 23px 17px;
    }

    .skill-cards {
        grid-template-columns: 1fr;
    }

    .skill-card {
        min-height: 92px;
        padding: 15px;
    }

    .skill-card span {
        margin-top: 7px;
    }
}

/* Run status, toast, pause, noscript */
.run-status {
    position: absolute;
    top: auto;
    bottom: 74px;
    left: 50%;
    z-index: 4;
    margin: 0;
    color: rgb(255 240 212 / 46%);
    font: 9px/1 var(--mono);
    letter-spacing: 0.16em;
    pointer-events: none;
    transform: translateX(-50%);
    white-space: nowrap;
}

.run-toast {
    position: absolute;
    top: 14%;
    left: 50%;
    z-index: 6;
    margin: 0;
    padding: 9px 16px;
    border: 1px solid rgb(237 133 102 / 55%);
    color: #ffe8c8;
    background: rgb(12 14 24 / 72%);
    font: 11px/1 var(--mono);
    letter-spacing: 0.2em;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity 260ms ease, transform 260ms ease;
}

.run-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.pause-notice {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    color: #f1eddf;
    background: rgb(4 6 14 / 74%);
    backdrop-filter: blur(3px);
}

.pause-notice[hidden] {
    display: none;
}

.pause-notice strong {
    font: 600 clamp(34px, 7vw, 72px)/1 var(--display);
    letter-spacing: -0.06em;
}

.pause-notice span {
    color: #dfc18c;
    font: 11px var(--mono);
    letter-spacing: 0.16em;
}

.noscript-card {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 20;
    width: min(520px, calc(100vw - 34px));
    color: #f1eddf;
    text-align: center;
    transform: translate(-50%, -50%);
}

.noscript-card h1 {
    font: 700 52px/1 var(--display);
    letter-spacing: -0.09em;
}

.defeat-screen p {
    max-width: calc(100vw - 34px);
    text-align: center;
    line-height: 1.8;
}

@media (max-width: 760px) {
    .run-status {
        top: auto;
        bottom: 92px;
        font-size: 8px;
        letter-spacing: 0.1em;
    }

    .run-toast {
        top: 10%;
        font-size: 9px;
    }
}

@media (hover: none), (pointer: coarse) {
    .survival-canvas {
        touch-action: none;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

.contact-panel h2 {
    margin: 10px 0 18px;
    font: 600 32px/1 var(--display);
    letter-spacing: -0.05em;
}

.contact-form {
    display: grid;
    width: min(460px, 100%);
    gap: 12px;
    text-align: left;
}

.contact-form label {
    display: grid;
    gap: 6px;
    color: #dfc18c;
    font: 10px/1 var(--mono);
    letter-spacing: 0.14em;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgb(237 185 131 / 40%);
    border-radius: 3px;
    color: #f1eddf;
    background: rgb(8 11 20 / 70%);
    font: 14px/1.4 var(--mono);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    outline: 2px solid #edb983;
    outline-offset: 1px;
}

.contact-trap {
    position: absolute;
    left: -9999px;
}

.contact-form .planet-info-link {
    justify-self: start;
    cursor: pointer;
}

.contact-status {
    min-height: 1.4em;
    margin: 0;
    color: #b8e5bf;
    font: 11px/1.4 var(--mono);
    letter-spacing: 0.08em;
}

.contact-status.is-error {
    color: #f08a71;
}

.survival-program-page .content-menu .sound-toggle {
    position: static;
}

/* Per-universe accent (set from universe.js on every new system) */
.survival-program-page .brand-launch-logo .wordmark-period {
    color: rgb(var(--accent-rgb, 237 133 102));
}

.content-menu button,
.content-menu a,
.content-menu .sound-toggle {
    border-color: rgb(var(--accent-rgb, 235 142 104) / 38%);
    background: rgb(var(--accent-rgb, 235 142 104) / 6%);
}

.content-menu button:hover,
.content-menu button:focus-visible,
.content-menu a:hover,
.content-menu a:focus-visible,
.content-menu .sound-toggle:hover,
.content-menu .sound-toggle:focus-visible {
    border-color: rgb(var(--accent-rgb, 235 142 104) / 85%);
    background: rgb(var(--accent-rgb, 235 142 104) / 18%);
}

.survival-program-page .planet-info-link,
.run-toast {
    border-color: rgb(var(--accent-rgb, 237 185 131) / 50%);
}

/* Run status pinned to the top of the screen */
.run-status {
    top: max(16px, env(safe-area-inset-top));
    bottom: auto;
}

@media (max-width: 760px) {
    .run-status {
        top: max(12px, env(safe-area-inset-top));
        bottom: auto;
    }
}

/* Era banner, era overlays, timeline */
.era-banner {
    position: absolute;
    top: 20%;
    left: 50%;
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.96);
}

.era-banner.is-visible {
    animation: era-banner 3600ms ease both;
}

.era-banner span {
    color: rgb(var(--accent-rgb, 237 133 102));
    font: 700 clamp(34px, 7vw, 76px)/1 var(--mono);
    letter-spacing: 0.08em;
}

.era-banner strong {
    color: #f4efe0;
    font: 700 clamp(12px, 1.6vw, 18px)/1.3 var(--mono);
    letter-spacing: 0.22em;
}

.era-banner em {
    color: #dfc18c;
    font: italic 12px/1.4 var(--mono);
    letter-spacing: 0.12em;
}

@keyframes era-banner {
    0% { opacity: 0; transform: translate(-50%, 14px) scale(0.94); }
    12% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -10px) scale(1.02); }
}

.survival-program::after {
    position: absolute;
    inset: 0;
    z-index: 3;
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 1400ms ease;
    background: repeating-linear-gradient(0deg, rgb(0 0 0 / 22%) 0 1px, transparent 1px 3px);
}

body[data-era="scan"] .survival-program::after {
    opacity: 0.7;
}

body[data-era="soft"] .survival-program::after {
    opacity: 0.22;
}

.info-timeline {
    display: grid;
    width: min(560px, 100%);
    margin: 22px auto 0;
    padding: 0;
    gap: 10px;
    list-style: none;
    text-align: left;
}

.info-timeline li {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 14px;
    color: #d7d2c2;
    font: 12px/1.5 var(--mono);
}

.info-timeline b {
    color: rgb(var(--accent-rgb, 237 185 131));
    font-weight: 700;
    letter-spacing: 0.06em;
}

.survival-program-page .planet-info .info-timeline {
    margin-right: auto;
    margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
    .era-banner.is-visible {
        animation-duration: 1ms;
        opacity: 1;
    }
}

.defeat-screen p + p {
    margin-top: 10px;
    color: #e58468;
}

/* Skill badges, universe label */
.skill-badges {
    position: absolute;
    top: max(38px, calc(env(safe-area-inset-top) + 34px));
    left: 50%;
    z-index: 4;
    display: flex;
    max-width: calc(100vw - 32px);
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
    transform: translateX(-50%);
}

.skill-badge {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1.5px solid #79e8a0;
    border-radius: 50%;
    color: #dff9e8;
    background: rgb(10 16 28 / 82%);
    font: 700 8px/1 var(--mono);
    letter-spacing: 0.02em;
}

.skill-badge[data-level="2"] {
    border-color: #6ab6ff;
    color: #dcecff;
}

.skill-badge[data-level="3"] {
    border-color: #c08bff;
    color: #f0e2ff;
}

.universe-label {
    position: absolute;
    bottom: max(20px, env(safe-area-inset-bottom));
    left: 20px;
    z-index: 3;
    margin: 0;
    color: rgb(255 240 212 / 38%);
    font: 9px/1.4 var(--mono);
    letter-spacing: 0.14em;
    pointer-events: none;
}

@media (max-width: 760px) {
    .universe-label {
        display: none;
    }
}

.era-banner span:empty {
    display: none;
}

/* Opaque menu: it sits at the bottom now, so it can be fully readable */
.content-menu button,
.content-menu a,
.content-menu .sound-toggle {
    border-color: rgb(var(--accent-rgb, 235 142 104) / 60%);
    color: #f3ecd9;
    background: #0f1424;
    backdrop-filter: none;
}

.content-menu button:hover,
.content-menu button:focus-visible,
.content-menu a:hover,
.content-menu a:focus-visible,
.content-menu .sound-toggle:hover,
.content-menu .sound-toggle:focus-visible {
    border-color: rgb(var(--accent-rgb, 235 142 104));
    color: #ffffff;
    background: color-mix(in srgb, rgb(var(--accent-rgb, 235 142 104)) 24%, #0f1424);
}

/* Retro scanlines are always present; some banners make them stronger */
.survival-program::after {
    opacity: 0.3;
}

body[data-era="scan"] .survival-program::after {
    opacity: 0.7;
}

body[data-era="soft"] .survival-program::after {
    opacity: 0.3;
}

/* Panels follow the universe: palette and accent are set per run by universe.js */
.survival-program-page .planet-info {
    border: 1px solid rgb(var(--accent-rgb, 171 187 209) / 30%);
    border-left: 2px solid rgb(var(--accent-rgb, 237 133 102));
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--panel-bg-2, #1e2436) 70%, #0a0d18),
        color-mix(in srgb, var(--panel-bg, #141928) 80%, #070a12));
    scrollbar-color: rgb(var(--accent-rgb, 237 133 102) / 60%) rgb(255 255 255 / 5%);
}

.survival-program-page .planet-info-kicker {
    color: rgb(var(--accent-rgb, 229 189 131));
}

.survival-program-page .planet-info-link {
    border-color: rgb(var(--accent-rgb, 237 185 131) / 55%);
    color: color-mix(in srgb, rgb(var(--accent-rgb, 237 185 131)) 75%, #ffffff);
    background: rgb(var(--accent-rgb, 237 185 131) / 8%);
}

.survival-program-page .planet-info-link:hover,
.survival-program-page .planet-info-link:focus-visible {
    border-color: rgb(var(--accent-rgb, 237 185 131));
    color: #ffffff;
    background: rgb(var(--accent-rgb, 237 185 131) / 22%);
}

.contact-form label {
    color: color-mix(in srgb, rgb(var(--accent-rgb, 223 193 140)) 70%, #ffffff);
}

.contact-form input,
.contact-form textarea {
    border-color: rgb(var(--accent-rgb, 237 185 131) / 45%);
    background: color-mix(in srgb, var(--panel-bg, #0e111c) 55%, #05070d);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    outline-color: rgb(var(--accent-rgb, 237 185 131));
}

/* Bigger, clearer site menu so visitors read this as a website first */
.content-menu {
    gap: 12px;
    max-width: min(900px, calc(100vw - 28px));
}

.content-menu .menu-tagline {
    flex: 0 0 100%;
    margin: 0 0 2px;
    color: rgb(255 240 212 / 62%);
    font: 600 11px/1.2 var(--mono);
    letter-spacing: 0.22em;
    text-align: center;
}

.content-menu button,
.content-menu a {
    min-height: 46px;
    padding: 14px 22px;
    font: 700 13px/1 var(--mono);
    letter-spacing: 0.12em;
}

@media (max-width: 760px) {
    .content-menu {
        gap: 8px;
    }

    .content-menu .menu-tagline {
        font-size: 9px;
        letter-spacing: 0.14em;
    }

    .content-menu button,
    .content-menu a {
        min-height: 42px;
        padding: 12px 14px;
        font-size: 11px;
    }
}

/* Form: no browser-blue autofill, accent focus rings */
.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover,
.contact-form input:-webkit-autofill:focus,
.contact-form textarea:-webkit-autofill {
    -webkit-text-fill-color: #f1eddf;
    caret-color: #f1eddf;
    -webkit-box-shadow: 0 0 0 1000px #0b0f1a inset;
    box-shadow: 0 0 0 1000px #0b0f1a inset;
    transition: background-color 99999s ease-out;
}

.contact-form .planet-info-link:focus-visible,
.content-menu button:focus-visible {
    outline: 2px solid rgb(var(--accent-rgb, 237 185 131));
    outline-offset: 2px;
}

/* Menu size: between the compact and the large version; slightly larger logo */
.content-menu {
    gap: 10px;
}

.content-menu .menu-tagline {
    font-size: 10px;
}

.content-menu button,
.content-menu a {
    min-height: 40px;
    padding: 12px 17px;
    font: 700 11.5px/1 var(--mono);
    letter-spacing: 0.1em;
}

.brand-launch-logo {
    font-size: clamp(42px, 6.6vw, 66px);
}

.brand-launch-logo small {
    font-size: 10px;
}

@media (max-width: 760px) {
    .content-menu button,
    .content-menu a {
        min-height: 38px;
        padding: 10px 12px;
        font-size: 10px;
    }

    .brand-launch-logo {
        font-size: 40px;
    }
}

/* Charge cannon progress: a thin ring around the rocket window instead of a big arc */
.space-cursor-charge {
    fill: none;
    stroke: #ffd9ff;
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: 0;
    transform: rotate(-90deg);
    transform-origin: 40px 31px;
    transition: opacity 200ms ease;
}

.space-cursor.has-charge .space-cursor-charge {
    opacity: 0.9;
}

.space-cursor.charge-ready .space-cursor-charge {
    stroke: #ffffff;
    stroke-width: 2.2;
}