/* The OS family: one source-defined spectrum, distinct public roles. */
.studio-page[data-page="systems"] {--jso-gold:#e5cc85;--jso-muted:#c5c1cf;--jso-line:#e5cc8530;background:#090a18;}
.jso-wrap {width:min(1240px,calc(100% - 96px));margin-inline:auto;}
.studio-page[data-page="systems"] main em {font-style:normal;color:var(--jso-gold);}
.jso-kicker {display:flex;align-items:center;gap:12px;color:var(--jso-gold);font-size:11px;line-height:1.6;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin:0 0 22px;}
.jso-kicker>span {width:6px;height:6px;border-radius:50%;background:#edc136;box-shadow:0 0 16px #edc13644;}
.jso-link {display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:13px;line-height:1.7;}
.jso-hero {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:70px;align-items:center;padding-block:75px 60px;}
.jso-hero h1 {font-size:clamp(58px,6.2vw,87px);line-height:1.05;letter-spacing:-.055em;max-width:730px;}
.jso-lede {font-size:21px;line-height:1.7;max-width:530px;color:#e9e5da;margin:29px 0 0;}
.jso-intro {font-size:15px;line-height:1.9;max-width:500px;color:var(--jso-muted);margin:18px 0 20px;}
.jso-spectrum {margin:0;justify-self:end;width:100%;max-width:400px;}
.jso-spectrum-art {position:relative;display:grid;place-items:center;aspect-ratio:1;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 58% 26%,#16c56713,transparent 52%),radial-gradient(ellipse at 36% 70%,#8238f11c,transparent 54%);}
.jso-spectrum img {position:relative;z-index:1;display:block;width:87%;height:auto;aspect-ratio:1;margin:0;object-fit:contain;filter:drop-shadow(0 20px 22px #0005);}
.jso-orbit {position:absolute;inset:4% 12%;border:1px solid #e5cc8524;border-radius:50%;transform:rotate(35deg);}
.jso-orbit::before {content:"";position:absolute;inset:13% -15%;border:1px solid #43e3ff16;border-radius:50%;transform:rotate(42deg);}
.jso-spectrum figcaption {text-align:center;font-size:11px;line-height:1.7;letter-spacing:.025em;color:#e5ddc8;margin-top:10px;}
.jso-spectrum figcaption>span {color:var(--jso-muted);}
.jso-business {--os:22 197 103;--os-label:#65dda2;}
.jso-showing {--os:241 238 229;--os-label:#f1eee5;}
.jso-creator {--os:248 102 196;--os-label:#f89cd6;}
.jso-founder {--os:130 56 241;--os-label:#c39bff;}
.jso-affiliate {--os:205 70 6;--os-label:#ffa777;}
.jso-core-color {--os:67 227 255;--os-label:#74e7fc;}
.jso-index {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;padding-block:10px 56px;}
.jso-index>a {position:relative;text-decoration:none;display:flex;flex-direction:column;gap:8px;padding:19px 0 14px;border-top:2px solid rgb(var(--os)/.6);transition:border-color .2s,color .2s;}
.jso-index>a:hover {border-top-color:rgb(var(--os));color:var(--os-label);}
.jso-index>a>span {font-size:14px;line-height:1.5;font-weight:600;}
.jso-index>a>small {font-size:10px;line-height:1.6;color:var(--os-label);}
.jso-feature {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:70px;align-items:center;padding:52px 56px;border:1px solid #16c56745;border-radius:32px;background:radial-gradient(ellipse at 100% 18%,#16c56712,transparent 60%),linear-gradient(120deg,#0d171f,#0d1020);box-shadow:inset 0 1px 0 #ffffff06;}
.jso-feature .jso-kicker,.jso-foundation .jso-kicker {color:var(--os-label);}
.jso-feature .jso-kicker>span {background:rgb(var(--os));box-shadow:0 0 15px rgb(var(--os)/.25);}
.jso-feature h2 {font-size:clamp(47px,5vw,68px);line-height:1.05;letter-spacing:-.045em;}
.jso-feature-line {font:400 29px/1.3 Georgia,serif;letter-spacing:-.025em;margin:22px 0 26px;}
.jso-feature .jso-feature-line em {color:#acdabf;}
.jso-feature-copy>p:not(.jso-kicker,.jso-feature-line) {font-size:15px;line-height:1.85;max-width:500px;color:var(--jso-muted);margin:14px 0;}
.jso-feature-copy>.button {margin:16px 20px 0 0;}
.jso-feature-copy>.jso-link {color:var(--os-label);}
.jso-product-art {width:min(235px,75%);aspect-ratio:1;margin:0 auto 32px;background:radial-gradient(ellipse,#16c56716,transparent 66%);}
.jso-product-art img {display:block;width:100%;height:100%;object-fit:contain;}
.jso-method {display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;list-style:none;margin:0;padding:0;}
.jso-method li {font-size:10px;color:#c6e3d4;line-height:1.8;white-space:nowrap;}
.jso-method li+li::before {content:"·";color:#16c567;margin-right:18px;}
.jso-feature-aside>p {font-size:11px;line-height:1.8;text-align:center;color:var(--jso-muted);margin:16px 0 0;}
.jso-worlds {padding-block:86px 70px;}
.jso-worlds-heading {display:flex;justify-content:space-between;gap:70px;align-items:end;margin-bottom:48px;}
.jso-wrap h2:not(.jso-feature h2,.jso-foundation h2) {font-size:clamp(37px,3.8vw,52px);line-height:1.1;letter-spacing:-.045em;}
.jso-worlds-heading>p {max-width:330px;color:var(--jso-muted);font-size:14px;line-height:1.85;margin:0 0 4px;}
.jso-world {position:relative;display:grid;grid-template-columns:105px minmax(0,.95fr) minmax(0,1.1fr);gap:38px;align-items:center;padding:39px 27px 39px 8px;border-top:1px solid rgb(var(--os)/.22);isolation:isolate;}
.jso-world::before {content:"";position:absolute;z-index:-1;inset:0;border-radius:0 28px 28px 0;background:radial-gradient(ellipse at 10% 20%,rgb(var(--os)/.045),transparent 65%);}
.jso-world-mark {width:94px;aspect-ratio:1;background:radial-gradient(ellipse,rgb(var(--os)/.1),transparent 68%);}
.jso-world-mark img {display:block;width:100%;height:100%;object-fit:contain;}
.jso-world .jso-kicker {color:var(--os-label);font-size:10px;margin-bottom:12px;}
.jso-world h3 {font:400 clamp(34px,3.2vw,43px)/1.12 Georgia,serif;letter-spacing:-.04em;margin:0;}
.jso-world-name>span {display:block;font-size:12px;line-height:1.7;color:var(--jso-muted);margin-top:13px;}
.jso-world-copy>p {font-size:16px;line-height:1.75;margin:0;color:#e8e4dd;max-width:490px;}
.jso-world-copy>p+p {font-size:13px;color:var(--jso-muted);line-height:1.85;margin-top:12px;}
.jso-foundation {padding:46px 54px;border:1px solid #43e3ff38;border-radius:30px;background:radial-gradient(ellipse at 0% 5%,#43e3ff0e,transparent 65%),#0b1220;}
.jso-foundation-intro {display:flex;gap:32px;align-items:center;}
.jso-core-mark {flex:none;width:108px;aspect-ratio:1;}
.jso-core-mark img {display:block;width:100%;height:100%;object-fit:contain;}
.jso-foundation .jso-kicker {margin-bottom:12px;}
.jso-foundation h2 {font-size:clamp(38px,4.6vw,61px);line-height:1.05;letter-spacing:-.045em;}
.jso-foundation-intro p:last-child {font-size:15px;color:#c5d5dc;margin:15px 0 0;line-height:1.75;}
.jso-foundation-copy {max-width:720px;font-size:15px;line-height:1.85;color:var(--jso-muted);margin:30px 0;}
.jso-foundation-details {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px;margin:0;}
.jso-foundation-details>div {border-top:1px solid #43e3ff27;padding-top:23px;}
.jso-foundation-details dt {font:400 25px/1.25 Georgia,serif;letter-spacing:-.025em;}
.jso-foundation-details dd {font-size:13px;line-height:1.8;color:var(--jso-muted);margin:12px 0 0;}
.jso-foundation-note {font-size:11px;line-height:1.8;color:var(--jso-muted);margin:28px 0 0;}
.jso-close {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:90px;align-items:center;padding-block:90px 100px;}
.jso-close>div>p:not(.jso-kicker) {font-size:16px;line-height:1.85;color:var(--jso-muted);max-width:450px;margin:25px 0 0;}
.jso-close .jso-close-action>p {font-size:12px;max-width:330px;margin:19px 0 0;}
.jso-close .jso-close-action>p+p {margin-top:12px;}
.jso-close-action>.jso-link {font-size:12px;margin-top:15px;}
.jso-wrap a:focus-visible {outline:2px solid var(--os-label,var(--jso-gold));outline-offset:5px;border-radius:5px;}
.jso-wrap[tabindex="-1"]:focus,.jso-world:focus {outline:none;}
.jso-wrap[tabindex="-1"]:focus-visible,.jso-world:focus-visible {outline:1px solid var(--os-label,var(--jso-gold));outline-offset:7px;}
@media(max-width:1100px) {
  .jso-wrap {width:calc(100% - 64px);}
  .jso-hero {gap:38px;padding-block:62px 42px;}
  .jso-hero h1 {font-size:clamp(54px,6.3vw,72px);}
  .jso-index {gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:46px;}
  .jso-feature {padding:40px 36px;gap:35px;}
  .jso-world {grid-template-columns:75px minmax(0,1fr) minmax(0,1.1fr);gap:25px;padding-right:12px;}
  .jso-world-mark {width:70px;}
  .jso-worlds-heading {gap:45px;}
  .jso-foundation {padding:38px 36px;}
  .jso-close {gap:50px;padding-block:75px;}
}
@media(max-width:850px) {
  .jso-hero {grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:25px;}
  .jso-hero h1 {font-size:clamp(48px,6.5vw,58px);}
  .jso-lede {font-size:18px;}
  .jso-intro {font-size:14px;}
  .jso-feature {grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:25px;}
  .jso-feature h2 {font-size:48px;}
  .jso-feature-line {font-size:26px;}
  .jso-method {display:block;text-align:center;}
  .jso-method li {margin-top:7px;}
  .jso-method li+li::before {content:none;}
  .jso-world {grid-template-columns:65px minmax(0,1fr);gap:18px 25px;}
  .jso-world-copy {grid-column:2;}
  .jso-world-mark {width:62px;}
  .jso-worlds-heading {align-items:start;gap:35px;}
  .jso-worlds-heading>p {max-width:255px;}
  .jso-foundation h2 {font-size:48px;}
  .jso-foundation-details {gap:25px;}
}
@media(max-width:700px) {
  .jso-wrap {width:calc(100% - 48px);}
  .jso-hero {grid-template-columns:1fr;gap:20px;padding-block:45px 28px;}
  .jso-hero h1 {font-size:clamp(43px,10.6vw,65px);line-height:1.05;}
  .jso-kicker {font-size:10px;margin-bottom:21px;}
  .jso-lede {font-size:18px;margin-top:24px;}
  .jso-intro {font-size:15px;}
  .jso-spectrum {width:min(300px,90%);justify-self:center;}
  .jso-spectrum figcaption {font-size:10px;margin-top:2px;}
  .jso-index {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px;padding-block:14px 36px;}
  .jso-index>a {padding-block:14px 12px;gap:6px;}
  .jso-index>a>span {font-size:13px;}
  .jso-index>a>small {font-size:10px;}
  .jso-feature {grid-template-columns:1fr;padding:29px 25px;gap:28px;border-radius:25px;}
  .jso-feature h2 {font-size:clamp(38px,10.5vw,48px);}
  .jso-feature-line {font-size:25px;margin-block:19px 22px;}
  .jso-feature-copy>p:not(.jso-kicker,.jso-feature-line) {font-size:14px;}
  .jso-feature-copy>.button {font-size:12px;margin-right:12px;}
  .jso-feature-copy>.jso-link {font-size:12px;margin-top:5px;}
  .jso-feature-aside {border-top:1px solid #16c5672b;padding-top:24px;}
  .jso-product-art {width:132px;margin-bottom:18px;}
  .jso-method {display:flex;gap:5px 14px;}
  .jso-method li {margin:0;}
  .jso-feature-aside>p {font-size:10px;}
  .jso-worlds {padding-block:57px 42px;}
  .jso-worlds-heading {display:block;margin-bottom:30px;}
  .jso-wrap h2:not(.jso-feature h2,.jso-foundation h2) {font-size:clamp(34px,8.9vw,48px);}
  .jso-worlds-heading>p {font-size:14px;max-width:430px;margin-top:22px;}
  .jso-world {grid-template-columns:48px minmax(0,1fr);gap:19px 16px;padding:29px 0;}
  .jso-world-mark {width:48px;align-self:start;margin-top:20px;}
  .jso-world .jso-kicker {font-size:10px;margin-bottom:10px;}
  .jso-world h3 {font-size:clamp(30px,8vw,38px);}
  .jso-world-name>span {font-size:11px;margin-top:9px;}
  .jso-world-copy {grid-column:1/-1;}
  .jso-world-copy>p {font-size:15px;}
  .jso-world-copy>p+p {font-size:13px;margin-top:10px;}
  .jso-foundation {padding:29px 24px;border-radius:25px;}
  .jso-foundation-intro {display:block;}
  .jso-core-mark {width:68px;margin-bottom:20px;}
  .jso-foundation h2 {font-size:clamp(31px,8.7vw,47px);overflow-wrap:anywhere;}
  .jso-foundation-intro p:last-child {font-size:14px;}
  .jso-foundation-copy {font-size:14px;margin:23px 0;}
  .jso-foundation-details {grid-template-columns:1fr;gap:24px;}
  .jso-foundation-details>div {padding-top:22px;}
  .jso-foundation-details dt {font-size:26px;}
  .jso-foundation-note {font-size:11px;}
  .jso-close {grid-template-columns:1fr;gap:30px;padding-block:58px 75px;}
  .jso-close>div>p:not(.jso-kicker) {font-size:15px;margin-top:22px;}
  .jso-close .jso-close-action>p {font-size:12px;}
}
@media(prefers-reduced-motion:reduce) {.jso-index>a {transition:none;}}
@media(forced-colors:active) {
  .jso-orbit {display:none;}
  .jso-spectrum-art,.jso-product-art,.jso-world-mark {background:none;}
  .jso-world::before {display:none;}
  .jso-feature,.jso-foundation {background:Canvas;border-color:CanvasText;box-shadow:none;}
  .jso-index>a,.jso-world,.jso-foundation-details>div,.jso-feature-aside {border-color:CanvasText;}
}