:root{color-scheme:dark;--paper:#101112;--wall:#151718;--ink:#e7e8e5;--muted:#a8b1b2;--line:#343a3b;--teal:#70c7ca;--blue:#70c7ca}
html,body{background:#101112;color:#e7e8e5}
.site-header{background:#101112f5!important;border-color:#333a3b!important}
.entrance{background:radial-gradient(ellipse at 85% 10%,#15333555,transparent 45%)!important}
main>section,.photography-exhibit,.curiosity-exhibit,.cats-exhibit,.writing-exhibit,.murlocs-exhibit,.recognition-exhibit{background-color:#101112!important}
h1,h2,h3,h4,blockquote,strong,.brand,.brand small,.intro-note,.large-copy,.studio-door>strong{color:#e7e8e5!important}
h1 em,h2 em,h3 em,.context-manifesto strong,.no-wrong-door{color:#79c9cb!important}
p,figcaption,.exhibit-copy,.door-description,.room-link-description,.context-copy{color:#aeb9ba!important}
a,.inline-link,.historical,.eyebrow,.section-kicker,.wall-lettering,.more-rooms-heading{color:#8fcacc!important}
.site-header #main-nav .nav-directory,.site-header #main-nav .nav-origin{background:transparent!important;color:#b9dbdc!important;border-color:#456467!important}
#main-nav .destinations-toggle,#main-nav .nav-cats{color:#dce4e2!important}
#main-nav .nav-contact{background:#2a646b!important;color:white!important}
.studio-door,.studio-destinations>a,.studio-destinations>a:nth-child(n),.quick-destinations{background:#1b1e20!important;border-color:#363d3e!important;box-shadow:0 12px 25px -15px #000!important;color:#e7e8e5!important}
.studio-door:hover,.studio-destinations>a:hover{background:#23292b!important;border-color:#6aa4a7!important}
#main-nav .quick-link-grid>a{color:#d7e4e2!important}
#main-nav .quick-link-grid>a:hover{background:#293638!important}
.doorway-origin{--door-accent:#ee8098}.doorway-channel{--door-accent:#ee8098}.doorway-world{--door-accent:#91a9ff}.doorway-words{--door-accent:#ce9ee2}
.studio-door .door-label,.studio-door .door-action{color:var(--door-accent)!important}
.studio-door .door-action b{background:#1b1e20!important}
.frame,.light-frame{background:#25292a!important;border-color:#626b6b!important;box-shadow:0 8px 20px #0008!important}
.studio-room,.studio-main,.studio-history-window{background-color:#191c1d!important}
.context-manifesto,.studio-callback,.timeline li{border-color:#40494a!important}
.context-manifesto blockquote span{color:#e7e8e5!important}
.context-copy p{line-height:1.8}
.contact-sheet,.contact-panel,dialog{background:#1b1e20!important;color:#e7e8e5!important}
footer{background:#101112!important;color:#aeb9ba!important}
::selection{background:#3d7278;color:#fff}
.intro-breadcrumbs,.studio-identity .intro-note em{color:#91bfc2!important}
.context-manifesto strong{display:block;font-size:clamp(34px,3.2vw,52px);line-height:1.15}
.timeline h3,.journey-timeline h3,.room-link-label,.door-kind{color:#d9e2df!important}
.more-rooms-heading span,.wall-caption,.studio-callback .eyebrow{color:#91bfc2!important}
.context-copy strong{display:inline;font-size:inherit;line-height:inherit;color:#e7e8e5!important}
/* Light exhibition walls make the illuminated photographs feel like a gallery. */
#studio-wall,.studio-room.dance-chamber,.studio-room.fashion-chamber,.studio-room.romance-chamber{background:radial-gradient(ellipse at 50% 43%,#fff 35%,#e7e6e1 100%)!important;border-color:#b6bdbb!important;color:#173b48!important}
:is(#studio-wall,.dance-chamber,.fashion-chamber,.romance-chamber) :is(h2,h3,h4,strong,figcaption,p,blockquote,.room-name,.wall-lettering,.eyebrow){color:#243f4b!important}
:is(#studio-wall,.dance-chamber,.fashion-chamber,.romance-chamber) :is(a,.inline-link){color:#087484!important}
:is(#studio-wall,.dance-chamber,.fashion-chamber,.romance-chamber) :is(.frame,.light-frame){background:#fafaf6!important;border-color:#d4d8d4!important;box-shadow:0 10px 24px -12px #0006!important}
/* UOAlive keeps its atmospheric dark setting. */
.studio-room.uo-studio-room{background:radial-gradient(ellipse at 50% 25%,#23392f,transparent 70%),#101a17!important;border-color:#45594b!important}
/* Ink, watercolor blue and violet accents from the supplied palette. */
.studio-room.uo-studio-room{background:radial-gradient(ellipse at 50% 30%,#1b2229 0%,#101215 58%,#08090b 100%)!important;border-color:#3b4149!important}
main>section:not(.entrance):not(.work-directory) h2{color:#e7f0ee!important;text-shadow:0 0 18px rgba(79,169,184,.22),0 0 38px rgba(75,103,168,.10)}
main>section:not(.entrance) h2 em{color:#8ed3dc!important;text-shadow:0 0 14px rgba(57,177,202,.33),0 0 32px rgba(104,116,193,.18)}
#uoalive h2 em,#youtube h2 em{color:#86cee0!important}
#motion h2 em,#writing h2 em{color:#c7b8eb!important;text-shadow:0 0 18px rgba(147,113,206,.30)}
.section-kicker,.eyebrow{letter-spacing:.14em}
main>section:not(.entrance) .eyebrow,main>section:not(.entrance) .section-kicker{color:#83c3cc!important}
.studio-room.uo-studio-room .room-name,.studio-room.uo-studio-room .world-note,.studio-room.uo-studio-room .world-note em,.studio-room.uo-studio-room .quiet-motion{color:#c3e0e0!important}
main>section .studio-room:is(.dance-chamber,.fashion-chamber,.romance-chamber) :is(h2,h3,h4,strong){color:#214453!important;text-shadow:none!important}
main>section .studio-room:is(.dance-chamber,.fashion-chamber,.romance-chamber) :is(h2 em,h3 em){color:#126b79!important;text-shadow:0 0 14px rgba(73,169,185,.18)!important}
/* Each room keeps its own atmosphere and the journey retains its changing colors. */
#twitch{background:radial-gradient(ellipse at 80% 25%,#27404c 0%,#122a35 45%,#10232d 100%)!important}
#twitch .section-kicker,#twitch .eyebrow{color:#9edee2!important}
#twitch .twitch-platform{color:#d2b7ff!important}
#twitch .twitch-handle{color:#fff!important;text-shadow:0 0 18px #9965d670}
#twitch .twitch-button{background:#7945bd!important;color:#fff!important}
#journey{background:radial-gradient(ellipse at 10% 10%,#192b38 0%,#11171c 45%,#101112 100%)!important}
#journey .journey-timeline:before{background:linear-gradient(#6fa7bc,#a798c7,#63b7ba,#7daec7)}
#journey .journey-timeline>li{border-bottom-color:#364046!important}
#journey .journey-timeline>li:before{background:#77bbc4;box-shadow:0 0 0 4px #131a1e,0 0 10px #61bbcf66}
#journey .journey-era{color:#8fc3cc!important}
#journey .journey-timeline>li:nth-child(4n+1) h3{color:#8ecada!important}
#journey .journey-timeline>li:nth-child(4n+2) h3{color:#c8b4e5!important}
#journey .journey-timeline>li:nth-child(4n+3) h3{color:#87c6da!important}
#journey .journey-timeline>li:nth-child(4n) h3{color:#8ed0c2!important}
#journey .journey-timeline>li:nth-child(4n+2):before{background:#c8aee5}
#journey .journey-timeline>li:nth-child(4n+3):before{background:#87c6da}
#journey .journey-coda{color:#a5c8ce!important}

/* Cool light in the exhibition rooms, drawn from the supplied ink-blue palette. */
#journey .journey-timeline>li:nth-child(4n+3) h3{color:#87c6da!important}
#journey .journey-timeline>li:nth-child(4n+3):before{background:#87c6da!important}
/* The illuminated galleries use their original light surfaces and dark text. */
.studio-room:is(.writing-room,.youtube-chamber,.switcher-chamber,.murlocs-room){background:radial-gradient(ellipse at 50% 43%,#fff 35%,#e7e8e7 100%)!important;border-color:#b6bdbb!important;color:#243f4b!important}
.studio-room:is(.writing-room,.youtube-chamber,.switcher-chamber,.murlocs-room) :is(h2,h3,h4,strong,figcaption,p,blockquote,.room-name,.eyebrow,.large-copy){color:#243f4b!important;text-shadow:none!important}
.studio-room:is(.writing-room,.youtube-chamber,.switcher-chamber,.murlocs-room) :is(h2 em,h3 em){color:#126b79!important;text-shadow:none!important}
.studio-room:is(.writing-room,.youtube-chamber,.switcher-chamber,.murlocs-room) :is(a,.inline-link){color:#086576!important}
.studio-room:is(.writing-room,.youtube-chamber,.switcher-chamber,.murlocs-room) :is(.frame,.light-frame){background:#fafaf8!important;border-color:#d4d8d8!important}
.studio-room:is(.writing-room,.youtube-chamber,.switcher-chamber,.murlocs-room) :is(.button,.twitch-button){color:#fff!important}
.studio-room:is(.writing-room,.youtube-chamber,.switcher-chamber,.murlocs-room) button.quiet-button,.studio-room:is(.writing-room,.youtube-chamber,.switcher-chamber,.murlocs-room) .quiet-button{color:#174a56!important;background:#f8fafb!important;border-color:#819faa!important}
.studio-room:is(.writing-room,.youtube-chamber,.switcher-chamber,.murlocs-room) .button.outline{color:#174a56!important;border-color:#819faa!important;background:#f7f9fa!important}
.uo-studio-room .uo-animated-frame>span{color:#d4e9ec!important}
.uo-studio-room .gallery-floor{background:linear-gradient(#31363a,#202428)!important;border-color:#50585c!important}
.uo-studio-room .uo-animated-frame{background:#1e2529!important;border-color:#55636a!important}
.button.teal,.button.blue{color:#fff!important}
@media(max-width:800px){.site-header #main-nav{background:#15191c!important;border-color:#39454a!important}.site-header #main-nav .nav-directory,.site-header #main-nav .nav-origin,#main-nav .nav-cats{color:#c7e6e8!important}.site-header #main-nav .quick-destinations{background:transparent!important;box-shadow:none!important}.quick-destinations-title{color:#edf4f3!important}}
#recognition article:not(.award-emmy) :is(h3,h4,strong,p,span){color:#264450!important}
#recognition article:not(.award-emmy) a{color:#075c70!important}
.fashion-chamber .caption{color:#405e68!important}
/* Watercolor-inspired ink, blue, and violet: layered softly behind the content. */
.entrance{background:radial-gradient(ellipse at 76% 18%,#1e486038,transparent 42%),radial-gradient(ellipse at 15% 75%,#39304d24,transparent 42%),#101112!important}
#motion{background:radial-gradient(ellipse at 88% 20%,#34305136,transparent 44%),#101112!important}
#photography{background:radial-gradient(ellipse at 12% 5%,#1f506033,transparent 40%),#101112!important}
#film{background:radial-gradient(ellipse at 80% 12%,#4138542c,transparent 45%),#101112!important}
#writing{background:radial-gradient(ellipse at 16% 40%,#30294c38,transparent 42%),#101112!important}
#youtube{background:radial-gradient(ellipse at 90% 12%,#173f5038,transparent 42%),#101112!important}
.journey-note{background:#e9f0f1!important;border-color:#b4c9cf!important}
.journey-note :is(h3,p,span,strong){color:#233e4b!important}
.journey-note a{color:#075b70!important}
.skip{background:#edf4f4!important;color:#123e4c!important}
main>section .journey-note .eyebrow{color:#24576a!important}
#machinima .film-kind{color:#72c3d4!important}
#machinima .film-description{color:#c1ced1!important}
.closing .signature{color:#9fcbd2!important}
#art-count{color:#c4d5d8!important}
#close-contact{color:#173c4a!important;background:#edf4f6!important}
#contact-sheet :is(input,textarea,select){color:#173c4a!important;background:#f3f6f7!important}
#contact-sheet :is(input,textarea)::placeholder{color:#536a72!important}
/* Extend the timeline atmosphere to the viewport while preserving its content width. */
#journey{position:relative;isolation:isolate;background:transparent!important}
#journey::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:radial-gradient(ellipse at 12% 10%,#192b38 0%,#11171c 45%,#101112 100%);pointer-events:none}
/* Keep the three early-film frames level so their links sit close to the cards. */
@media(min-width:801px){.early-film-wall .movie-image img{width:100%;aspect-ratio:1.94;object-fit:contain;background:#161b1d}.early-film-wall{align-items:start}}
#machinima .machinima-more{margin-top:28px}
#machinima{padding-bottom:55px}

/* Atmospheric, irregular ink and watercolor texture stays behind readable content. */
/* Give the archive destinations the presence of actual next steps. */
#machinima .machinima-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:32px}
#machinima .machinima-more a{display:flex;align-items:center;min-height:62px;padding:15px 18px;border:1px solid #476b78;border-radius:10px;background:linear-gradient(145deg,#203541,#17242d);color:#d2eef1!important;font-size:14px;line-height:1.4;box-shadow:0 8px 22px #0003;text-decoration:none}
#machinima .machinima-more a:hover,#machinima .machinima-more a:focus-visible{background:#294957;border-color:#a1dce1;outline:2px solid #a1dce1;outline-offset:3px}
@media(max-width:800px){#machinima .machinima-more{grid-template-columns:1fr;gap:10px}#machinima .machinima-more a{min-height:52px}}
/* Film labels on the lit Switcher wall use dark ink for contrast. */
#machinima .switcher-chamber .film-kind{color:#276577!important}
#machinima .switcher-chamber .film-description{color:#435b66!important}
#machinima .switcher-chamber .film-watch{color:#086478!important}
/* A seamless ink wash: no repeated image tiles or rectangular texture edges. */
body{background-image:radial-gradient(ellipse 85% 45% at 12% 12%,#21425638,transparent 72%),radial-gradient(ellipse 75% 52% at 90% 55%,#26364d2c,transparent 73%);background-size:100% 100%;background-attachment:fixed}
.entrance{background:radial-gradient(ellipse 88% 66% at 80% 13%,#19405155,transparent 75%),radial-gradient(ellipse 70% 55% at 11% 65%,#29374938,transparent 76%),#101519!important;background-size:auto!important}
#journey::before{background:radial-gradient(ellipse 85% 70% at 14% 10%,#243e4e80,transparent 72%),radial-gradient(ellipse 75% 65% at 88% 80%,#292d433d,transparent 75%),#101519!important;background-size:auto!important}
#twitch{background:radial-gradient(ellipse 85% 70% at 80% 25%,#28445270,transparent 72%),radial-gradient(ellipse 70% 60% at 10% 80%,#3533473d,transparent 75%),#101a20!important;background-size:auto!important}


/* Dark charcoal is the backdrop; the title carries the red. */
#film{background:#101112!important}
#film h2 .romance-word{color:#e46c71!important;text-shadow:none!important}