:root {
  --ink: #173232;
  --subtle: #557070;
  --paper: #fbf6e9;
  --cream: #fffdf7;
  --line: #d9d2c1;
  --orange: #ff6546;
  --sun: #f7c84b;
  --mint: #91d8c7;
  --blue: #5f9bd3;
  --purple: #8b7bd1;
  --shadow: 0 12px 0 rgba(23, 50, 50, .12);
  --soft-shadow: 0 9px 24px rgba(23, 50, 50, .1);
  --serif: "Noto Serif SC", serif;
  --sans: "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; min-width: 320px; color: var(--ink); font-family: var(--sans); background: var(--paper); }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.grain { position: fixed; inset: 0; opacity: .16; pointer-events: none; z-index: 5; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); }
.skip-link { position: fixed; left: 16px; top: -64px; z-index: 20; padding: 12px 16px; color: #fff; background: var(--ink); border-radius: 9px; transition: top .2s ease; }
.skip-link:focus { top: 16px; }
.site-header, .site-footer { position: relative; z-index: 6; max-width: 1240px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 48px); }
.site-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 22px/1 var(--serif); letter-spacing: -.06em; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; color: var(--orange); background: var(--sun); border: 2px solid var(--ink); border-radius: 50% 45% 50% 43%; transform: rotate(-6deg); }
.brand-mark svg { width: 26px; height: 26px; fill: currentColor; stroke: var(--ink); stroke-width: 2; }
.main-nav { display: flex; gap: clamp(10px, 2vw, 28px); font-weight: 700; color: var(--subtle); }
.main-nav a { position: relative; padding: 12px 3px; }
.main-nav a[aria-current="page"] { color: var(--ink); }
.main-nav a[aria-current="page"]::after { content: ""; position: absolute; right: 1px; bottom: 5px; left: 1px; height: 3px; border-radius: 999px; background: var(--orange); }
.header-draw, .button { min-height: 44px; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.header-draw { padding: 9px 16px; background: var(--sun); box-shadow: 3px 3px 0 var(--ink); }
.header-draw:hover, .button:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.header-draw:active, .button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
main { min-height: calc(100vh - 176px); }
.page { max-width: 1240px; margin: 0 auto; padding: clamp(36px, 7vw, 88px) clamp(20px, 4vw, 48px) 74px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--subtle); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 7vw, 90px); align-items: center; padding-top: clamp(18px, 4vw, 54px); }
.hero h1, .channel-title, .article-title, .draw-title { margin: 0; font-family: var(--serif); font-weight: 900; letter-spacing: -.075em; line-height: 1.05; }
.hero h1 { max-width: 670px; font-size: clamp(54px, 8vw, 112px); }
.hero h1 em { color: var(--orange); font-style: normal; }
.hero-copy { max-width: 490px; margin: 25px 0 31px; color: var(--subtle); font-size: clamp(16px, 1.7vw, 20px); line-height: 1.85; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; background: var(--orange); color: #fff; }
.button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.button.secondary { color: var(--ink); background: var(--cream); }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.hero-art { position: relative; min-height: 350px; isolation: isolate; }
.bubble { position: absolute; display: grid; place-items: center; color: var(--ink); border: 2px solid var(--ink); box-shadow: 5px 6px 0 rgba(23,50,50,.22); }
.bubble svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 2; }
.bubble.one { top: 8%; right: 16%; width: 224px; height: 224px; color: var(--cream); background: var(--orange); border-radius: 48% 52% 44% 56% / 56% 45% 55% 44%; transform: rotate(7deg); }
.bubble.two { top: 47%; left: 2%; width: 147px; height: 147px; color: var(--ink); background: var(--mint); border-radius: 42% 58% 63% 37% / 47% 39% 61% 53%; transform: rotate(-12deg); }
.bubble.three { right: 0; bottom: 5%; width: 104px; height: 104px; background: var(--sun); border-radius: 50%; transform: rotate(12deg); }
.bubble.four { top: 1%; left: 24%; width: 83px; height: 83px; background: var(--purple); border-radius: 36% 64% 55% 45% / 59% 39% 61% 41%; }
.hero-squiggle { position: absolute; inset: 15% 14% auto auto; z-index: -1; width: 310px; height: 310px; border: 2px dashed var(--ink); border-radius: 47% 53% 58% 42%; transform: rotate(-14deg); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: clamp(68px, 9vw, 118px) 0 26px; }
.section-head h2 { margin: 0; font: 800 clamp(30px, 4vw, 50px)/1 var(--serif); letter-spacing: -.06em; }
.section-head p { max-width: 330px; margin: 0; color: var(--subtle); line-height: 1.7; }
.channel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.channel-card { display: flex; flex-direction: column; min-height: 265px; padding: 20px; border: 2px solid var(--ink); border-radius: 24px; overflow: hidden; box-shadow: 0 7px 0 rgba(23,50,50,.14); transition: transform .2s ease, box-shadow .2s ease; }
.channel-card:hover { transform: translateY(-7px) rotate(-.5deg); box-shadow: var(--shadow); }
.channel-card:nth-child(1) { background: var(--mint); }.channel-card:nth-child(2) { background: var(--sun); }.channel-card:nth-child(3) { background: #bdd4f0; }.channel-card:nth-child(4) { background: #d5c8ef; }
.card-index { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; letter-spacing: .09em; }.card-index svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.channel-card h3 { margin: auto 0 7px; font: 800 34px/1 var(--serif); letter-spacing: -.07em; }.channel-card p { margin: 0; line-height: 1.6; color: rgba(23,50,50,.82); }
.display-card { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 330px; border: 2px solid var(--ink); border-radius: 26px; overflow: hidden; background: var(--cream); box-shadow: var(--soft-shadow); }.display-card::before { content: "首批展品"; position: absolute; top: 18px; right: 18px; z-index: 2; padding: 6px 11px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--cream); font-size: 12px; font-weight: 800; }.display-body { display: flex; flex-direction: column; justify-content: end; padding: clamp(28px,5vw,56px); }.display-body h3 { max-width: 450px; margin: 10px 0 14px; font: 800 clamp(27px, 4vw, 48px)/1.16 var(--serif); letter-spacing: -.06em; }.display-body p { max-width: 470px; margin: 0 0 23px; color: var(--subtle); line-height: 1.8; }.display-art { display: grid; place-items: center; background: var(--orange); overflow: hidden; }.abstract-art { position: relative; width: 220px; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 49% 51% 47% 53% / 40% 54% 46% 60%; background: var(--sun); transform: rotate(-8deg); box-shadow: 13px 13px 0 rgba(23,50,50,.2); }.abstract-art::before, .abstract-art::after { content: ""; position: absolute; border: 2px solid var(--ink); background: var(--mint); }.abstract-art::before { top: 28%; left: -38%; width: 120px; height: 74px; border-radius: 57% 43% 49% 51%; transform: rotate(27deg); }.abstract-art::after { right: -23%; bottom: -17%; width: 105px; height: 105px; border-radius: 50%; background: var(--purple); }
.channel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 28px; border-bottom: 2px solid var(--ink); }.channel-title { font-size: clamp(56px, 10vw, 115px); }.channel-note { max-width: 300px; margin: 0 0 10px; color: var(--subtle); line-height: 1.75; }.channel-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 30px; }.content-card { display: flex; flex-direction: column; min-height: 250px; padding: 22px; border: 1.5px solid var(--ink); border-radius: 18px; background: var(--cream); transition: transform .18s ease, background .18s ease; }.content-card:hover { transform: translateY(-4px); background: #fff; }.content-card .type { color: var(--subtle); font-size: 12px; font-weight: 800; letter-spacing: .08em; }.content-card h2 { margin: auto 0 13px; font: 800 27px/1.18 var(--serif); letter-spacing: -.05em; }.content-card p { margin: 0; color: var(--subtle); font-size: 14px; line-height: 1.7; }.content-card .arrow { margin-top: 17px; font-weight: 900; }.article { max-width: 780px; margin: 0 auto; }.article .back { display: flex; width: fit-content; min-height: 44px; align-items: center; color: var(--subtle); font-weight: 700; }.article-title { margin-top: 26px; font-size: clamp(42px, 7vw, 82px); }.article-summary { margin: 25px 0 36px; padding-bottom: 33px; border-bottom: 1px solid var(--line); color: var(--subtle); font-size: 19px; line-height: 1.8; }.article-body { font-family: var(--serif); font-size: 18px; line-height: 2.05; }.article-body p { margin: 0 0 1.5em; }.source { margin-top: 46px; padding: 16px; border-left: 4px solid var(--orange); background: #f5eedf; color: var(--subtle); font-size: 14px; line-height: 1.7; }.game-shell, .draw-shell { max-width: 780px; margin: 45px auto 0; padding: clamp(26px, 5vw, 58px); border: 2px solid var(--ink); border-radius: 32px; background: var(--cream); box-shadow: var(--soft-shadow); text-align: center; }.game-orb { display: grid; place-items: center; width: min(41vw, 220px); aspect-ratio: 1; margin: 10px auto 32px; border: 2px solid var(--ink); border-radius: 50%; background: var(--mint); font: 800 clamp(38px,7vw,70px)/1 var(--serif); box-shadow: 8px 9px 0 var(--ink); }.game-help, .draw-help { max-width: 500px; margin: 14px auto 28px; color: var(--subtle); line-height: 1.8; }.game-actions, .draw-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }.result-copy { min-height: 1.6em; margin: 21px 0 0; color: var(--subtle); font-weight: 700; }.draw-shell { position: relative; overflow: hidden; }.draw-shell::before, .draw-shell::after { content: ""; position: absolute; width: 130px; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 48% 52% 56% 44%; background: var(--sun); opacity: .6; }.draw-shell::before { top: -65px; left: -55px; }.draw-shell::after { right: -57px; bottom: -70px; background: var(--mint); }.draw-title { position: relative; z-index: 1; font-size: clamp(37px,6vw,64px); }.draw-result { position: relative; z-index: 1; display: grid; place-items: center; min-height: 170px; margin: 34px 0 30px; padding: 24px; border: 2px dashed var(--ink); border-radius: 20px; background: rgba(255,253,247,.8); font: 700 clamp(23px,4vw,36px)/1.4 var(--serif); }.draw-result.empty { color: var(--subtle); font-size: 18px; }.not-found { max-width: 730px; margin: 70px auto; text-align: center; }.not-found .big { font: 900 clamp(100px,20vw,230px)/.8 var(--serif); color: var(--orange); }.not-found h1 { margin: 20px 0; font: 800 42px/1 var(--serif); }.not-found p { max-width: 410px; margin: 0 auto 25px; color: var(--subtle); line-height: 1.8; }.site-footer { display: flex; justify-content: space-between; gap: 20px; align-items: center; min-height: 88px; border-top: 1px solid var(--line); color: var(--subtle); font-size: 13px; }.site-footer p { margin: 0; }.site-footer a { font-weight: 800; color: var(--ink); }.footer-mark { color: var(--orange); }.toast { position: fixed; right: 22px; bottom: 24px; z-index: 20; max-width: 330px; padding: 13px 17px; border: 2px solid var(--ink); border-radius: 12px; color: var(--paper); background: var(--ink); box-shadow: 5px 5px 0 var(--orange); opacity: 0; pointer-events: none; transform: translateY(calc(100% + 56px)); transition: transform .2s ease, opacity .2s ease; }.toast.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
@media (max-width: 780px) { .site-header { min-height: auto; flex-wrap: wrap; padding-top: 16px; padding-bottom: 14px; }.main-nav { order: 3; width: 100%; justify-content: space-between; }.header-draw { font-size: 13px; }.hero { grid-template-columns: 1fr; }.hero-art { min-height: 260px; grid-row: 1; }.bubble.one { width: 170px; height: 170px; }.bubble.two { width: 116px; height: 116px; }.channel-grid, .channel-list { grid-template-columns: repeat(2, 1fr); }.channel-heading { display: block; }.channel-note { margin-top: 18px; }.display-card { grid-template-columns: 1fr; }.display-art { min-height: 190px; grid-row: 1; }.article-body { font-size: 17px; }.site-footer { padding-top: 20px; padding-bottom: 20px; flex-wrap: wrap; } }
@media (max-width: 480px) { .page { padding-inline: 18px; }.main-nav { gap: 6px; font-size: 14px; }.main-nav a { padding-inline: 2px; }.header-draw { padding: 7px 10px; }.channel-grid, .channel-list { grid-template-columns: 1fr; }.channel-card { min-height: 200px; }.hero-art { min-height: 215px; }.hero-squiggle { width: 220px; height: 220px; }.bubble.three { width: 78px; height: 78px; }.game-orb { width: 160px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

.header-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 11px; border: 1px solid rgba(255,243,209,.7); border-radius: 999px; color: var(--ink); background: rgba(23,25,54,.68); box-shadow: 0 0 3px #fff, 0 0 9px rgba(103,169,255,.35); cursor: pointer; font-size: 13px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 0 3px #fff, 0 0 14px rgba(255,212,90,.65); }
.theme-toggle:active { transform: translateY(1px); }
.theme-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.theme-icon[hidden] { display: none; }

/* Story Weaver — a stateful narrative table inside the play room. */
.adventure-intro { max-width: 1120px; }
.adventure-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 36px; margin: 34px 0 70px; }
.adventure-hero h1, .adventure-topbar h1 { margin: 8px 0 14px; font: 900 clamp(48px, 8vw, 92px)/.95 var(--serif); letter-spacing: -.07em; color: #fffdf1; text-shadow: 0 0 3px #fff, 0 0 18px rgba(177,137,255,.55); }
.adventure-hero > div > p:last-child { max-width: 590px; margin: 0; color: var(--subtle); font-size: 17px; line-height: 1.8; }
.loop-mark { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; color: var(--mint); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.loop-mark span { display: grid; place-items: center; width: 62px; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; background: rgba(72,224,193,.05); box-shadow: 0 0 13px rgba(72,224,193,.22), inset 0 0 10px rgba(72,224,193,.08); }
.loop-mark span:nth-of-type(2) { color: var(--sun); }
.loop-mark span:nth-of-type(3) { color: var(--orange); }
.loop-mark i { color: var(--subtle); font-style: normal; }
.seed-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.seed-heading > div { display: flex; align-items: baseline; gap: 14px; }
.seed-heading span { color: var(--orange); font: 800 13px/1 var(--sans); }
.seed-heading h2 { margin: 0; font: 800 clamp(26px, 4vw, 38px)/1.1 var(--serif); }
.seed-heading p { margin: 0; color: var(--subtle); font-size: 14px; }
.seed-groups { display: grid; gap: 42px; }
.seed-group h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--subtle); font: 800 13px/1 var(--sans); letter-spacing: .14em; }
.seed-group h3::after { content: ""; height: 1px; flex: 1; background: rgba(183,184,213,.2); }
.seed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.seed-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 285px; padding: 28px; overflow: hidden; border: 1px solid rgba(255,243,209,.58); border-radius: 22px; color: var(--seed-accent, var(--blue)); background: linear-gradient(155deg, rgba(23,25,54,.92), rgba(11,13,34,.9)); text-align: left; box-shadow: 0 0 18px rgba(103,169,255,.14), inset 0 0 28px rgba(103,169,255,.04); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.seed-card::after { content: ""; position: absolute; width: 150px; aspect-ratio: 1; right: -55px; top: -55px; border: 1px solid currentColor; border-radius: 47% 53% 60% 40%; opacity: .18; box-shadow: 0 0 30px currentColor; }
.seed-card:hover { transform: translateY(-7px); border-color: currentColor; box-shadow: 0 0 4px #fff, 0 0 24px currentColor, inset 0 0 26px rgba(255,255,255,.04); }
.seed-symbol { display: grid; place-items: center; width: 46px; aspect-ratio: 1; margin-bottom: auto; border: 1px solid currentColor; border-radius: 50%; font: 700 26px/1 var(--serif); box-shadow: 0 0 12px currentColor; }
.seed-genre { margin-top: 30px; color: currentColor; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.seed-card strong { margin: 8px 0 12px; color: #fffdf1; font: 800 25px/1.25 var(--serif); letter-spacing: -.03em; }
.seed-card > span:not(.seed-symbol):not(.seed-genre):not(.seed-enter) { color: var(--subtle); font-size: 14px; line-height: 1.75; }
.seed-card .seed-enter { margin-top: 22px; color: #fffdf1; font-size: 13px; font-weight: 800; }
.adventure-note { margin: 24px 0 0; color: var(--subtle); font-size: 13px; text-align: center; }
.adventure-note span { margin-right: 7px; color: var(--sun); }

.adventure-page { max-width: 1240px; padding-top: 38px; }
.adventure-topbar { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.adventure-topbar .back { display: inline-block; margin-bottom: 22px; }
.adventure-topbar .eyebrow { margin: 0 0 7px; }
.adventure-topbar h1 { margin: 0; font-size: clamp(34px, 5vw, 56px); }
.adventure-tools { display: flex; align-items: center; gap: 16px; padding-bottom: 5px; }
.gm-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(72,224,193,.48); border-radius: 999px; color: var(--mint); background: rgba(72,224,193,.07); font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.gm-status i { width: 7px; aspect-ratio: 1; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; animation: gm-pulse 2s ease-in-out infinite; }
@keyframes gm-pulse { 50% { opacity: .35; } }
.text-button { padding: 7px 0; border: 0; border-bottom: 1px solid currentColor; color: var(--subtle); background: transparent; font-size: 12px; font-weight: 700; }
.text-button:hover { color: var(--ink); }
.adventure-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 22px; }
.story-panel, .state-card { border: 1px solid rgba(255,243,209,.45); border-radius: 22px; background: rgba(15,17,42,.84); box-shadow: 0 0 18px rgba(103,169,255,.12), inset 0 0 28px rgba(103,169,255,.035); }
.story-panel { min-width: 0; overflow: hidden; }
.story-scroll { padding: clamp(25px, 4.5vw, 54px); }
.story-turn { position: relative; padding: 0 0 38px 34px; border-left: 1px solid rgba(183,184,213,.2); }
.story-turn::before { content: ""; position: absolute; width: 7px; aspect-ratio: 1; left: -4px; top: 10px; border-radius: 50%; background: var(--line); }
.story-turn.latest::before { background: var(--sun); box-shadow: 0 0 10px var(--sun); }
.story-turn:last-child { padding-bottom: 4px; }
.story-copy { font: 500 clamp(16px, 2vw, 19px)/2 var(--serif); letter-spacing: .02em; }
.story-copy p { margin: 0 0 1.05em; }
.story-copy p:last-child { margin-bottom: 0; }
.player-action { display: flex; align-items: baseline; gap: 12px; margin: 0 0 19px; color: var(--blue); font-size: 13px; font-weight: 700; }
.player-action span { flex: 0 0 auto; padding: 4px 8px; border: 1px solid currentColor; border-radius: 5px; font-size: 10px; letter-spacing: .14em; }
.action-panel { padding: clamp(22px, 4vw, 36px); border-top: 1px solid rgba(255,243,209,.22); background: rgba(7,9,22,.55); }
.action-label { margin: 0 0 15px; color: var(--sun); font: 700 16px/1.4 var(--serif); }
.choice-list { display: grid; gap: 9px; }
.choice-button { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; width: 100%; padding: 12px 15px 12px 10px; border: 1px solid rgba(183,184,213,.3); border-radius: 10px; color: var(--ink); background: rgba(23,25,54,.56); text-align: left; line-height: 1.5; transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.choice-button span { color: var(--subtle); font: 700 10px/1 var(--sans); letter-spacing: .1em; }
.choice-button:hover { transform: translateX(4px); border-color: var(--blue); background: rgba(103,169,255,.1); }
.choice-button:disabled, .free-action :disabled { cursor: wait; opacity: .45; }
.free-action { margin-top: 24px; }
.free-action label { display: block; margin-bottom: 9px; color: var(--subtle); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.free-action > div { display: grid; grid-template-columns: minmax(0,1fr) auto; }
.free-action input { min-width: 0; height: 48px; padding: 0 15px; border: 1px solid rgba(183,184,213,.42); border-right: 0; border-radius: 10px 0 0 10px; color: var(--ink); background: rgba(7,9,22,.75); outline: 0; }
.free-action input:focus { border-color: var(--mint); box-shadow: inset 0 0 10px rgba(72,224,193,.1); }
.free-action button { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border: 1px solid var(--mint); border-radius: 0 10px 10px 0; color: #071412; background: var(--mint); font-weight: 900; }
.free-action button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.free-action > p { margin: 8px 0 0; color: var(--subtle); font-size: 10px; }
.thinking-dot { display: inline-block; width: 8px; aspect-ratio: 1; margin-right: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 10px var(--sun); animation: gm-pulse .8s ease-in-out infinite; }

.state-panel { display: grid; position: sticky; top: 18px; gap: 14px; }
.state-card { padding: 22px; }
.identity-card { border-color: rgba(177,137,255,.48); box-shadow: 0 0 16px rgba(177,137,255,.12), inset 0 0 22px rgba(177,137,255,.06); }
.state-kicker { margin: 0 0 8px; color: var(--purple); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.identity-card h2 { margin: 0 0 19px; color: #fffdf1; font: 800 21px/1.35 var(--serif); }
.identity-card dl, .identity-card dd { margin: 0; }
.identity-card dl { display: grid; gap: 12px; }
.identity-card dl div { display: grid; grid-template-columns: 38px 1fr; gap: 8px; font-size: 11px; line-height: 1.55; }
.identity-card dt { color: var(--subtle); }.identity-card dd { color: var(--ink); }
.state-title, .hp-row, .location { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.state-title { margin-bottom: 20px; }
.state-title h2 { margin: 0; font: 800 17px/1 var(--serif); }
.state-title span { color: var(--mint); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.hp-row { font-size: 11px; }.hp-row span { color: var(--subtle); }.hp-row strong { color: var(--mint); }
.hp-track { height: 5px; margin: 9px 0 20px; overflow: hidden; border-radius: 99px; background: rgba(183,184,213,.16); }
.hp-track i { display: block; height: 100%; border-radius: inherit; background: var(--mint); box-shadow: 0 0 9px var(--mint); }
.location { align-items: flex-start; padding: 14px 0; border-block: 1px solid rgba(183,184,213,.16); font-size: 11px; }
.location span { flex: 0 0 auto; color: var(--subtle); }.location strong { text-align: right; line-height: 1.45; }
.state-card details { border-bottom: 1px solid rgba(183,184,213,.14); }
.state-card summary { padding: 15px 0 11px; color: var(--subtle); cursor: pointer; font-size: 11px; font-weight: 700; list-style: none; }
.state-card summary::-webkit-details-marker { display: none; }
.state-card summary::before { content: "+"; display: inline-block; width: 18px; color: var(--blue); }
.state-card details[open] summary::before { content: "−"; }
.state-card summary b { float: right; color: var(--ink); font-weight: 600; }
.state-card ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px 18px; padding: 0; list-style: none; }
.state-card li { padding: 5px 7px; border: 1px solid rgba(183,184,213,.25); border-radius: 5px; color: var(--ink); font-size: 10px; }
.state-card li.muted { color: var(--subtle); border-style: dashed; }
.memory-note { margin: 0; padding: 13px 16px; border: 1px solid rgba(255,212,90,.28); border-radius: 12px; color: var(--subtle); background: rgba(255,212,90,.04); font-size: 10px; line-height: 1.55; }
.memory-note span { margin-right: 6px; color: var(--sun); }.memory-note strong { color: var(--ink); }

@media (max-width: 920px) {
  .seed-grid { grid-template-columns: 1fr; }
  .seed-card { min-height: 250px; }
  .adventure-layout { grid-template-columns: 1fr; }
  .state-panel { position: static; grid-template-columns: repeat(2, 1fr); }
  .memory-note { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .adventure-hero { grid-template-columns: 1fr; margin-bottom: 50px; }
  .loop-mark { justify-content: center; }
  .loop-mark span { width: 55px; }
  .seed-heading, .adventure-topbar { display: block; }
  .seed-heading p { margin-top: 9px; }
  .adventure-tools { justify-content: space-between; margin-top: 20px; }
  .state-panel { grid-template-columns: 1fr; }
  .memory-note { grid-column: auto; }
  .story-scroll { padding-inline: 20px; }
  .story-turn { padding-left: 22px; }
  .free-action > div { grid-template-columns: 1fr; gap: 8px; }
  .free-action input { border-right: 1px solid rgba(183,184,213,.42); border-radius: 10px; }
  .free-action button { justify-content: center; min-height: 45px; border-radius: 10px; }
}
/* Immersive living ocean homepage */
body.is-ocean { background:#04243c; color:#e8f8ff; }
.is-ocean .grain { display:none; }
.is-ocean .site-header { position:absolute; top:0; left:0; right:0; z-index:10; max-width:none; min-height:82px; padding-inline:clamp(24px,8vw,145px); background:linear-gradient(90deg,rgba(2,28,53,.9),rgba(3,43,71,.6)); border:0; color:#ecfaff; }
.is-ocean .brand { font-size:28px; letter-spacing:.12em; }
.is-ocean .brand-mark { background:transparent; border:0; color:#89e7f2; }
.is-ocean .main-nav { color:#e3f6ff; gap:38px; }
.is-ocean .header-draw { background:#11618690; color:#d3f7ff; border:1px solid #63cbe873; box-shadow:none; font-weight:500; }
.is-ocean .theme-toggle { color:#b6efff; border-color:#66c7dc66; background:#074465; }
.ocean-home { position:relative; min-height: max(850px,100svh); overflow:hidden; isolation:isolate; }
.ocean-backdrop { position:absolute; inset:0; z-index:-3; background:#075178 url('/assets/ocean-village.d059fdbb0980.webp') center/cover no-repeat; }
.ocean-backdrop::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(1,26,48,.38),transparent 70%),linear-gradient(0deg,#04243c,transparent 24%); }
.water-light { position:absolute; top:-25%; left:30%; width:65%; height:120%; z-index:-2; background:repeating-conic-gradient(from 170deg at 50% 0%,transparent 0deg 8deg,#78edff12 9deg 13deg,transparent 14deg 23deg); filter:blur(14px); animation:water-light 15s ease-in-out infinite alternate; pointer-events:none; }
.ocean-content { position:relative; z-index:2; max-width:1320px; margin:auto; padding:160px 48px 240px; }
.ocean-intro h1 { margin:0; font-family:'Noto Serif SC',serif; font-size:clamp(38px,4.3vw,66px); font-weight:600; letter-spacing:.035em; line-height:1.55; text-shadow:0 3px 18px #042a43; }
.ocean-intro h1 span { color:#78f4ef; }
.ocean-eyebrow { color:#a1dbe7; letter-spacing:.25em; font-size:13px; margin:0 0 14px; }
.ocean-copy { color:#cae9f7; line-height:1.95; font-size:17px; letter-spacing:.1em; margin:18px 0 25px; }
.mobile-break { display:none; }
.ocean-random { display:flex; align-items:center; justify-content:center; gap:16px; min-height:64px; padding:12px 34px; color:white; background:linear-gradient(105deg,#3fe2df,#2782ff); border:1px solid #8ff8ff; border-radius:99px; box-shadow:inset 0 0 16px #a5ffff70,0 0 24px #42d6f360; font-size:23px; font-weight:700; transition:filter .2s,transform .2s; }
.ocean-random svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.7; }
.ocean-random:hover { filter:brightness(1.15); transform:translateY(-2px); }
.ocean-online { display:flex; align-items:center; gap:9px; font-size:14px; color:#e4f7ff; }
.ocean-online svg { width:42px; height:30px; }
.ocean-online strong { color:#60f1ed; font-size:19px; }
.ocean-cards { width:610px; max-width:58%; margin: -120px 0 0 auto; display:grid; grid-template-columns:1fr 1fr; gap:23px; }
.floating-card { animation:card-float 8s ease-in-out infinite; animation-delay:var(--float-delay); }
.ocean-card { position:relative; display:flex; align-items:center; gap:12px; padding:22px 24px 22px 12px; min-height:148px; border:1px solid #85eaffb3; border-radius:22px; background:linear-gradient(135deg,#238fbe9c,#073e61d9); box-shadow:inset 0 0 20px #55ddff30,0 10px 26px #012a455c,0 0 2px 1px #54e0f8; backdrop-filter:blur(9px); transition:background .25s,box-shadow .25s; }
.ocean-card:hover { background:linear-gradient(135deg,#36a8d8b3,#075480ee); box-shadow:inset 0 0 25px #55ddff50,0 0 24px #6cecff50; }
.ocean-card h2 { font-size:20px; margin:0 0 12px; white-space:nowrap; color:#f0faff; }
.ocean-card p { font-size:14px; color:#b9dfee; line-height:1.75; margin:0; }
.ocean-card-art { display:grid; place-items:center; flex:0 0 90px; height:100px; border-radius:45%; background:radial-gradient(ellipse,#66cfec60,transparent 70%); color:#fff0c6; }
.ocean-card-art svg { width:78px; height:78px; stroke:currentColor; stroke-width:1.2; }
.ocean-card-art.knowledge svg { width:110px; height:100px; stroke:none; }
.ocean-card-art.movie { color:#c6efff; background:radial-gradient(ellipse,#4886ff90,transparent 70%); }
.ocean-card-art.shell { color:#ffdbec; background:radial-gradient(ellipse,#f5bac17a,transparent 70%); }
.ocean-card-arrow { position:absolute; right:14px; bottom:14px; font-size:32px; font-weight:300; }
.ocean-meter { position:absolute; z-index:2; left:clamp(24px,4vw,72px); bottom:74px; padding:18px 24px; border:1px solid #349ec05c; border-radius:38px 45px 35px 30px; background:#032b3ed9; box-shadow:inset 0 0 20px #15759066; width:325px; }
.ocean-meter>p:first-child { margin:0 0 8px; color:#a4e2f1; font-size:12px; letter-spacing:.15em; }
.meter-title { display:flex; align-items:center; justify-content:space-between; color:#6ae9eb; font-size:14px; }
.mood-face { font-size:38px; font-weight:300; }
.water-bars { color:#39b0d6; letter-spacing:3px; font-size:28px; }
.population-legend { display:flex; justify-content:space-between; font-size:12px; color:#d8effb; margin:12px 0; }
.ocean-meter small { color:#95c6d6; font-size:11px; }
.ocean-sign { position:absolute; bottom:150px; left:36%; z-index:2; background:linear-gradient(10deg,#463d31,#75614a); border:1px solid #a18b64; border-radius:5px; padding:14px 22px; color:#ffe5bb; transform:rotate(-7deg); box-shadow:0 6px 0 #192d33; font-family:var(--serif); }
.ocean-sign span { display:block; text-align:center; font-size:13px; margin-bottom:4px; }
.ocean-scroll { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); text-align:center; color:#a2dcec; font-size:24px; z-index:2; }
.ocean-scroll span { display:block; font-size:12px; letter-spacing:.15em; }
.swimmers { position:absolute; inset:85px 0 8%; z-index:1; pointer-events:none; }
.swimmer { position:absolute; left:var(--x); top:var(--y); width:65px; animation:swim var(--duration) ease-in-out infinite; animation-delay:var(--delay); }
.creature { position:relative; transform:scaleX(var(--direction)); animation:fin-drift 4s ease-in-out infinite; }
.creature svg { width:100%; filter:drop-shadow(0 0 7px #9eeeff33); }
.swimmer.ray { width:110px; }.swimmer.jelly { width:100px; }.swimmer.whale { width:230px; }
.population-tag { position:absolute; bottom:0; left:50%; font-size:11px; border-radius:20px; color:#e9faff; background:#073a62b3; padding:2px 7px; transform:scaleX(var(--direction)); }
.ocean-bubbles { position:absolute; inset:0; pointer-events:none; z-index:1; }
.ocean-bubbles i { position:absolute; left:var(--left); bottom:-20px; width:7px; height:7px; border:1px solid #b1f5ff88; border-radius:50%; animation:bubble-rise var(--time) linear infinite; animation-delay:var(--delay); }
.ocean-explore { max-width:1240px; margin:auto; padding:60px 48px 90px; }
.ocean-explore h2 { font:600 34px/1.5 var(--serif); margin:0 0 32px; color:#ddf6ff; }
.is-ocean .site-footer { color:#a1c9da; border-color:#29536a; }
.is-ocean :focus-visible { outline:3px solid #a0ffff; outline-offset:5px; }
@keyframes card-float { 0%,100% { transform:translateY(0) rotate(var(--tilt)); } 50% { transform:translateY(-10px) rotate(calc(var(--tilt) + 1.5deg)); } }
@keyframes swim { 0%,100% { transform:translate(-25px,0); } 50% { transform:translate(55px,-14px); } }
@keyframes fin-drift { 0%,100% { rotate:-3deg; } 50% { rotate:4deg; } }
@keyframes bubble-rise { 0% { transform:translateY(0); opacity:0; } 10% { opacity:.7; } 90% { opacity:.5; } 100% { transform:translate(24px,-95vh); opacity:0; } }
@keyframes water-light { from { transform:rotate(-5deg); opacity:.4; } to { transform:rotate(5deg); opacity:.8; } }
@media(min-width:1500px) { .ocean-content { padding-top:190px; }.ocean-cards { margin-top:-125px; } }
@media(max-width:1050px) { .is-ocean .site-header { padding-inline:28px; }.ocean-content { padding:145px 32px 255px; }.ocean-cards { max-width:70%; margin-top:40px; }.ocean-card { padding:16px 20px 16px 8px; }.ocean-card-art { flex-basis:65px; }.ocean-card-art svg { width:60px; }.ocean-card h2 { font-size:18px; }.ocean-sign { left:auto; right:45px; bottom:120px; } }
@media(max-width:650px) { .is-ocean .site-header { min-height:100px; flex-wrap:wrap; gap:4px; padding:14px 22px; }.is-ocean .brand { font-size:22px; }.is-ocean .main-nav { order:3; width:100%; justify-content:space-between; gap:20px; font-size:14px; }.is-ocean .main-nav a { padding:8px 3px; }.is-ocean .header-draw { display:none; }.ocean-home { min-height:1100px; }.ocean-backdrop { background-position:53% center; }.ocean-content { padding:145px 24px 250px; }.ocean-intro h1 { font-size:36px; line-height:1.6; }.mobile-break { display:block; }.ocean-copy { font-size:13px; letter-spacing:.04em; }.ocean-random { min-height:57px; font-size:19px; padding:10px 27px; }.ocean-online { font-size:12px; }.ocean-cards { width:100%; max-width:none; margin-top:40px; gap:18px 12px; }.ocean-card { flex-direction:column; gap:0; align-items:flex-start; min-height:190px; padding:10px 15px 20px; border-radius:18px; }.ocean-card-art { flex-basis:auto; height:62px; width:70px; }.ocean-card-art svg,.ocean-card-art.knowledge svg { width:70px; height:65px; }.ocean-card h2 { font-size:16px; margin:5px 0 7px; }.ocean-card p { font-size:12px; }.ocean-meter { left:24px; bottom:88px; width:calc(100% - 48px); max-width:350px; }.ocean-sign { display:none; }.ocean-explore { padding:45px 24px 60px; }.ocean-explore h2 { font-size:26px; }.swimmer.whale { width:150px; } }
@media(prefers-reduced-motion:reduce) { .is-ocean *, .is-ocean *::before, .is-ocean *::after { animation:none!important; scroll-behavior:auto!important; transition:none!important; } }
@media(min-width:1051px) { .ocean-content { padding-bottom:200px; }.ocean-cards { margin-top:-220px; } }
.ocean-card-art svg { fill:none; }
.is-ocean .brand,.is-ocean .channel-card h3 { text-shadow:none; }
.is-ocean .brand-mark { box-shadow:none; }
.is-ocean .ocean-random svg { fill:none; }
@media(max-width:650px) { .ocean-content { padding-bottom:335px; } }
.floating-card:hover,.floating-card:focus-within { animation-play-state:paused; }

/* Shared ocean design system: a quieter sea for reading and playing. */
:root {
  color-scheme: dark;
  --ink:#e8f6fc; --subtle:#a7c9d9; --paper:#052a40; --cream:#0b3c55;
  --line:#8edffb30; --orange:#6be7df; --sun:#f7d793; --mint:#76e5dc;
  --blue:#8ad8fa; --purple:#c6b6ed;
  --surface:linear-gradient(145deg,#13506bc9,#083349ed);
  --surface-solid:#0c3b53; --surface-hover:linear-gradient(145deg,#1a6480da,#0c435aee);
  --surface-inset:#052b42ba; --edge:#8edffb4d; --accent-ink:#05364c;
  --shadow:0 14px 32px #001b2b45; --soft-shadow:0 14px 40px #001b2b40,inset 0 1px 0 #b4f0ff15;
}
html[data-theme="day"] {
  color-scheme:light;
  --ink:#123e54; --subtle:#436c80; --paper:#d9eff3; --cream:#effafd;
  --line:#2a809d30; --orange:#087f86; --sun:#92672b; --mint:#087f79;
  --blue:#237b9f; --purple:#78629f;
  --surface:linear-gradient(145deg,#f5fdffdf,#d5edf3e8);
  --surface-solid:#eaf7fb; --surface-hover:linear-gradient(145deg,#fff,#e1f5fa);
  --surface-inset:#cfebf280; --edge:#2a809d45; --accent-ink:#efffff;
  --shadow:0 14px 32px #29668016; --soft-shadow:0 14px 40px #29668018,inset 0 1px 0 #ffffff90;
}
html { background:var(--paper); scroll-behavior:smooth; }
body { background:radial-gradient(ellipse at 65% -10%,#19749655,transparent 48rem),radial-gradient(ellipse at 0 65%,#13607b30,transparent 38rem),var(--paper); color:var(--ink); }
.grain { display:none; }
.depth-atmosphere { display:none; position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.is-depth .depth-atmosphere { display:block; }
.depth-rays { position:absolute; top:-10%; left:25%; width:65%; height:90%; background:repeating-conic-gradient(from 165deg at 55% 0%,transparent 0deg 9deg,#96e9ff06 10deg 16deg,transparent 17deg 25deg); filter:blur(10px); animation:depth-current 22s ease-in-out infinite alternate; }
.depth-orb { position:absolute; border:1px solid var(--line); border-radius:50%; background:radial-gradient(circle at 30% 25%,#93edff0c,transparent 60%); }
.orb-one { width:310px; height:310px; left:-180px; top:32%; }.orb-two { width:150px; height:150px; right:-70px; top:20%; }.orb-three { width:430px; height:430px; right:-280px; bottom:-130px; }
.is-depth main { position:relative; z-index:1; }
.site-header { max-width:none; min-height:82px; padding-inline:max(24px,calc((100vw - 1144px)/2)); background:#032c43a6; border-bottom:1px solid var(--line); box-shadow:none; backdrop-filter:blur(14px); }
.brand { color:var(--ink); font-size:28px; font-weight:700; letter-spacing:.12em; text-shadow:none; }
.brand-mark { background:transparent; border:0; box-shadow:none; color:var(--blue); }
.brand-mark svg { fill:currentColor; stroke:var(--blue); filter:none; }
.main-nav { color:var(--subtle); gap:32px; font-weight:500; }
.main-nav a { text-shadow:none; transition:color .2s; }
.main-nav a:hover,.main-nav a[aria-current="page"] { color:var(--ink); text-shadow:none; }
.main-nav a[aria-current="page"]::after { height:2px; bottom:7px; background:var(--mint); }
.header-draw,.theme-toggle { min-height:44px; color:var(--ink); background:var(--surface-inset); border:1px solid var(--edge); box-shadow:none; font-weight:500; text-shadow:none; }
.header-draw:hover,.theme-toggle:hover { transform:translateY(-2px); background:var(--surface-solid); box-shadow:0 4px 14px #03273925; }
html[data-theme="day"] .site-header { background:#e3f5f8bf; }
html[data-theme="day"] body { background:radial-gradient(ellipse at 65% -10%,#ffffffa6,transparent 48rem),radial-gradient(ellipse at 0 65%,#86ccd330,transparent 38rem),var(--paper); }
.page { padding-top:54px; padding-bottom:80px; }
.eyebrow { color:var(--mint); font-weight:500; letter-spacing:.14em; }
.channel-heading { border-bottom:1px solid var(--line); padding-bottom:30px; align-items:center; }
.channel-title { font-size:clamp(44px,6vw,72px); font-weight:600; line-height:1.35; letter-spacing:.04em; text-shadow:none; }
.channel-note { font-size:15px; max-width:330px; margin:0; }
.channel-list { gap:22px; padding-top:34px; }
.channel-card,.content-card,.seed-card,.game-shell,.draw-shell,.story-panel,.state-card,.display-card {
  border:1px solid var(--edge); border-radius:24px; background:var(--surface); box-shadow:var(--soft-shadow); backdrop-filter:blur(10px);
}
.channel-card { color:var(--blue); min-height:235px; padding:26px; }
.channel-card:nth-child(1) { color:var(--mint); background:var(--surface); }
.channel-card:nth-child(2) { color:var(--sun); background:var(--surface); }
.channel-card:nth-child(3) { color:var(--blue); background:var(--surface); }
.channel-card:nth-child(4) { color:var(--purple); background:var(--surface); }
.channel-card h3 { color:var(--ink); font-size:30px; font-weight:600; letter-spacing:.04em; text-shadow:none; }
.channel-card p { color:var(--subtle); font-size:14px; }
.content-card { min-height:275px; padding:28px; transition:transform .25s,background .25s,border-color .25s,box-shadow .25s; }
.content-card:hover,.channel-card:hover,.seed-card:hover { transform:translateY(-4px); border-color:var(--blue); background:var(--surface-hover); box-shadow:var(--shadow),inset 0 1px 0 var(--line); }
.content-card .type { align-self:flex-start; padding:5px 10px; border:1px solid var(--line); border-radius:99px; color:var(--mint); font-weight:500; letter-spacing:.08em; }
.content-card h2 { margin:28px 0 14px; font-size:25px; font-weight:600; line-height:1.55; letter-spacing:0; color:var(--ink); text-shadow:none; }
.content-card p { font-size:14px; line-height:1.9; }
.content-card .arrow { margin-top:auto; padding-top:24px; color:var(--blue); font-size:13px; font-weight:500; text-shadow:none; }
.back { display:inline-flex; align-items:center; min-height:44px; color:var(--subtle); font-size:14px; transition:color .2s; }
.back:hover { color:var(--mint); }
.article { max-width:880px; margin:48px auto 72px; padding:34px clamp(24px,5vw,72px) 54px; border:1px solid var(--edge); border-radius:28px; background:var(--surface); box-shadow:var(--soft-shadow); }
.article .eyebrow { display:flex; margin-top:28px; }
.article-title { font-size:clamp(30px,4vw,48px); font-weight:600; line-height:1.65; letter-spacing:.02em; text-shadow:none; margin-top:12px; }
.article-summary { font-size:17px; margin:22px 0 30px; padding-bottom:26px; }
.article-body { font-size:18px; line-height:2.2; color:var(--ink); }
.source { padding:16px 20px; border-left:2px solid var(--mint); border-radius:0 12px 12px 0; background:var(--surface-inset); color:var(--subtle); font-size:12px; }
.button { min-height:48px; padding:12px 24px; border:1px solid #9cf7f36b; background:linear-gradient(105deg,#61ddd8,#69bfff); color:#06334b; font-weight:600; text-shadow:none; box-shadow:inset 0 1px 0 #cfffff60,0 4px 18px #05395735; }
.button.secondary { color:var(--ink); background:var(--surface-inset); border:1px solid var(--edge); box-shadow:none; }
.button:hover { transform:translateY(-2px); box-shadow:0 6px 22px #217f9c30; filter:brightness(1.08); }
.button:active { transform:translateY(0); box-shadow:none; }
.button:disabled { filter:none; }
.game-shell,.draw-shell { margin:12px auto 0; padding:clamp(28px,5vw,58px); }
.draw-title { font-size:clamp(28px,4vw,42px); font-weight:600; line-height:1.6; letter-spacing:.02em; text-shadow:none; }
.game-orb { color:var(--ink); border:1px solid var(--edge); background:radial-gradient(circle at 32% 23%,#8af9ee28,#2995bf16 55%,#06324730); box-shadow:inset 0 0 32px #8eeaff18,0 12px 32px #00253b25; text-shadow:none; font-weight:500; }
.game-help,.draw-help { font-size:15px; line-height:1.95; }
.draw-shell::before,.draw-shell::after { border:1px solid var(--line); background:radial-gradient(circle,#79dde71a,transparent); opacity:.7; border-radius:50%; }
.draw-result { color:var(--ink); border:1px solid var(--edge); background:var(--surface-inset); box-shadow:inset 0 0 25px #79dae90a; font-weight:500; font-size:clamp(22px,3vw,30px); line-height:1.8; text-shadow:none; }
.draw-result.empty { color:var(--subtle); }
.result-copy { font-size:14px; font-weight:400; }
.adventure-hero { margin-bottom:48px; }
.adventure-hero h1,.adventure-topbar h1 { color:var(--ink); font-weight:600; font-size:clamp(38px,5.5vw,64px); line-height:1.45; letter-spacing:.04em; text-shadow:none; }
.adventure-hero > div > p:last-child { font-size:16px; }
.loop-mark span { background:var(--surface-inset); border-color:var(--edge); box-shadow:none; }
.loop-mark span:nth-of-type(3) { color:var(--blue); }
.seed-heading h2 { font-weight:600; line-height:1.5; font-size:clamp(23px,3vw,32px); letter-spacing:.02em; }
.seed-group h3 { color:var(--subtle); font-weight:500; }
.seed-group h3::after { background:var(--line); }
.seed-card { color:var(--seed-accent,var(--blue)); min-height:275px; }
.seed-card::after { box-shadow:none; border-color:var(--line); background:radial-gradient(circle,#9aefff0a,transparent); }
.seed-symbol { color:var(--seed-accent,var(--blue)); border-color:var(--line); background:var(--surface-inset); box-shadow:none; }
.seed-card strong { color:var(--ink); font-weight:600; line-height:1.55; }
.seed-card .seed-enter { color:var(--blue); font-weight:500; }
.seed-genre { font-weight:500; }
.adventure-page { padding-top:34px; }
.adventure-topbar h1 { font-size:clamp(28px,4vw,44px); }
.gm-status { color:var(--mint); border-color:var(--edge); background:var(--surface-inset); font-weight:500; }
.gm-status i { box-shadow:none; }
.identity-card { border-color:var(--edge); box-shadow:var(--soft-shadow); }
.identity-card h2 { color:var(--ink); font-weight:600; line-height:1.55; }
.state-title h2 { font-weight:600; line-height:1.4; }
.state-card dl div,.hp-row,.location,.state-card summary { font-size:12px; }
.state-kicker,.state-title span { font-size:11px; font-weight:500; }
.state-card li,.memory-note,.free-action>p { font-size:12px; line-height:1.65; }
.state-card li,.state-card details,.location { border-color:var(--line); }
.hp-track { background:var(--line); }.hp-track i { box-shadow:none; background:linear-gradient(90deg,var(--mint),var(--blue)); }
.memory-note { color:var(--subtle); border-color:var(--edge); background:var(--surface-inset); }
.story-turn { border-left-color:var(--line); }
.story-turn.latest::before { background:var(--mint); box-shadow:0 0 8px #78e5db35; }
.story-copy { font-weight:400; line-height:2.1; }
.action-panel { background:var(--surface-inset); border-color:var(--line); }
.action-label { color:var(--mint); font-weight:500; }
.choice-button { color:var(--ink); border-color:var(--edge); background:var(--surface-solid); min-height:48px; border-radius:12px; }
.choice-button:hover { transform:translateX(2px); background:var(--surface-hover); border-color:var(--blue); }
.free-action label { color:var(--subtle); font-size:12px; font-weight:500; }
.free-action input { color:var(--ink); border-color:var(--edge); background:var(--surface-inset); font:inherit; font-size:14px; }
.free-action input::placeholder { color:var(--subtle); opacity:.85; }
.free-action input:focus-visible { outline:2px solid var(--blue); outline-offset:2px; box-shadow:none; }
.free-action button { color:var(--accent-ink); background:var(--mint); border-color:var(--mint); font-weight:600; }
.not-found { margin:35px auto; padding:54px 28px; border:1px solid var(--edge); border-radius:28px; background:var(--surface); box-shadow:var(--soft-shadow); }
.not-found .big { color:var(--blue); font-weight:500; font-size:clamp(100px,16vw,170px); }
.not-found h1 { font-size:clamp(26px,4vw,36px); font-weight:600; line-height:1.5; }
.site-footer { max-width:1240px; color:var(--subtle); border-color:var(--line); background:transparent; }
.site-footer a { color:var(--blue); font-weight:500; }
.footer-mark { color:var(--mint); }
.toast { color:var(--ink); background:var(--surface-solid); border:1px solid var(--edge); box-shadow:var(--shadow); border-radius:16px; }
.skip-link { color:var(--accent-ink); background:var(--mint); }
:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
@keyframes depth-current { from { transform:rotate(-4deg); opacity:.4; } to { transform:rotate(4deg); opacity:1; } }
@media(max-width:780px) { .site-header { padding:16px 24px 12px; gap:12px; }.main-nav { gap:18px; }.brand { font-size:24px; }.page { padding-top:36px; }.channel-note { margin-top:16px; }.article { margin:28px 24px 48px; }.site-footer { padding-inline:24px; } }
@media(max-width:480px) { .site-header { gap:10px; padding-inline:20px; }.brand { font-size:22px; }.header-draw { display:none; }.main-nav { font-size:14px; }.channel-list { gap:16px; }.content-card { min-height:235px; padding:24px; }.content-card h2 { font-size:23px; }.article { margin:22px 18px 42px; padding:22px 22px 34px; border-radius:22px; }.article-body { font-size:17px; line-height:2.05; }.article-summary { font-size:15px; }.game-shell,.draw-shell { padding:28px 22px; border-radius:24px; }.game-actions .button { flex:1; padding-inline:14px; }.seed-card { padding:24px; }.adventure-hero { margin-top:22px; margin-bottom:36px; }.story-scroll { padding:26px 20px; }.state-card { padding:22px; } }
@media(prefers-reduced-motion:reduce) { .depth-rays,.gm-status i,.thinking-dot { animation:none; } }
/* The illustrated entrance retains its deep-water palette in either reading theme. */
.is-ocean .site-header { background:linear-gradient(90deg,#021c35e6,#032b4799); }
.is-ocean .brand { color:#ecfaff; }
.is-ocean .brand-mark svg { fill:#89e7f2; stroke:#89e7f2; }
.is-ocean .main-nav a { color:#e3f6ff; }
.is-ocean .site-header .theme-toggle { color:#b6efff; border-color:#66c7dc66; background:#074465; }
#main:focus { outline:none; }
.article-title,.content-card h2,.draw-title,.not-found h1 { text-wrap:balance; }
.skip-link { opacity:0; pointer-events:none; }
.skip-link:focus { opacity:1; pointer-events:auto; }

/* Clear sapphire water, milky highlights, and illustrated discovery cards. */
:root {
 --ink:#edf7ff; --subtle:#b4d3f1; --paper:#062452; --cream:#0e3973;
 --line:#91cfff2e; --orange:#65e9fb; --mint:#73e8f6; --blue:#93d5ff;
 --surface:linear-gradient(145deg,#124882e6,#0c326beF);
 --surface-solid:#103b75; --surface-hover:linear-gradient(145deg,#1b5796,#103c7b);
 --surface-inset:#082c60a6; --edge:#8dceff4d; --accent-ink:#063468;
 --shadow:0 14px 34px #00184635; --soft-shadow:0 14px 38px #001a4730,inset 0 1px 0 #c6eaff20;
}
html[data-theme="day"] {
 --ink:#15385f; --subtle:#55759b; --paper:#f1f7ff; --cream:#ffffff;
 --line:#95b9e13d; --orange:#086dcc; --mint:#176fad; --blue:#2379c9;
 --surface:linear-gradient(145deg,#fffffffa,#f7fbfffa);
 --surface-solid:#fff; --surface-hover:linear-gradient(145deg,#fff,#ecf6ff);
 --surface-inset:#eaf3ffb3; --edge:#91b7df4d; --accent-ink:#fff;
 --shadow:0 14px 32px #205d9d0e; --soft-shadow:0 12px 35px #265c990d,inset 0 1px 0 #fff;
}
body { background:radial-gradient(ellipse at 55% -10%,#106bba38,transparent 50rem),var(--paper); }
html[data-theme="day"] body { background:radial-gradient(ellipse at 55% -10%,#dceeff70,transparent 48rem),var(--paper); }
.site-header { background:#052656b3; }
html[data-theme="day"] .site-header { background:#f8fbffeb; }
.depth-rays { background:repeating-conic-gradient(from 165deg at 55% 0%,transparent 0deg 9deg,#b2e3ff07 10deg 16deg,transparent 17deg 25deg); }
.depth-orb { border-color:#a4cdff1a; background:none; }
html[data-theme="day"] .depth-orb { border-color:#95bceb20; }
.button { color:#fff; background:linear-gradient(105deg,#20bbed,#2578ff); border-color:#93d9ff80; box-shadow:inset 0 1px 0 #c4f1ff60,0 5px 16px #0662c329; }
.button.secondary { color:var(--ink); background:var(--surface-inset); border-color:var(--edge); }
.game-orb { background:radial-gradient(circle at 32% 23%,#a9e2ff2e,#458fff12 60%,transparent); box-shadow:inset 0 0 32px #b0e0ff15,0 12px 32px #00307115; }
.free-action button { color:white; border-color:#2884eb; background:linear-gradient(100deg,#21a9e5,#297cff); }
body.is-ocean { background:#f1f7ff; }
.ocean-home { min-height:780px; height:auto; background:#064f94; }
.ocean-backdrop { background-image:url('/assets/ocean-clear-v2.5a9c14dae3a9.webp'); background-position:center; }
.ocean-backdrop::after { background:linear-gradient(90deg,#031f5215,transparent 55%); }
.ocean-content { max-width:1380px; padding:132px 48px 70px; }
.ocean-intro { min-height:398px; }
.ocean-eyebrow { display:none; }
.ocean-intro h1 { color:#f4faff; font-family:'Ma Shan Zheng','Noto Serif SC',serif; font-size:clamp(44px,4.4vw,68px); line-height:1.4; letter-spacing:.03em; font-weight:400; text-shadow:0 2px 10px #03275745; }
.ocean-intro h1 span { color:#82f1fa; }
.ocean-copy { margin:20px 0; color:#d6edff; font-weight:400; font-size:17px; line-height:1.85; letter-spacing:.06em; }
.ocean-random { min-height:64px; padding:13px 34px; gap:16px; border-color:#8deeff; color:white; background:linear-gradient(105deg,#37d8f3,#2575ff); box-shadow:inset 0 0 14px #bdffff55,0 0 25px #27baff40; font-size:23px; }
.ocean-online { margin:17px 0 2px; color:#f0f8ff; }
.ocean-online strong { color:#70f3ff; }
.ocean-population-key { color:#bedcfa; font-size:11px; margin:0 0 0 52px; letter-spacing:.05em; }
.ocean-cards { width:100%; max-width:none; margin:45px 0 0; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; }
.ocean-card { min-height:138px; gap:8px; padding:17px 22px 17px 8px; border:1px solid #67e1ffc9; border-radius:18px; background:linear-gradient(135deg,#157cc5bf,#084582de); backdrop-filter:blur(6px); box-shadow:inset 0 1px 0 #c0f4ff40,0 6px 18px #01305b30; }
.ocean-card:hover { background:linear-gradient(135deg,#208ed9d9,#09529bea); box-shadow:0 0 20px #65dfff36,inset 0 1px 0 #ddfcff60; }
.ocean-card h2 { font-size:19px; font-weight:600; margin-bottom:10px; }
.ocean-card p { color:#c5e2ff; font-size:13px; line-height:1.8; }
.ocean-card-art,.ocean-card-art.movie,.ocean-card-art.shell { flex:0 0 100px; width:100px; height:105px; background:none; }
.card-illustration { display:block; width:100%; aspect-ratio:1; background-image:url('/assets/ocean-card-atlas.1d8d04d2abf2.webp'); background-size:400% 100%; background-repeat:no-repeat; filter:drop-shadow(0 4px 6px #04347630); }
.knowledge .card-illustration { background-position:0% 50%; }.movie .card-illustration { background-position:33.333% 50%; }.book .card-illustration { background-position:66.667% 50%; }.shell .card-illustration { background-position:100% 50%; }
.ocean-card-arrow { bottom:43%; right:12px; font-size:28px; }
.water-light { opacity:.5; filter:blur(20px); }
.swimmers { inset:90px 7% 26%; }.swimmer { opacity:.95; }
.is-ocean .site-header { min-height:78px; padding-inline:max(24px,calc((100vw - 1284px)/2)); background:linear-gradient(90deg,#032653e8,#063265bf); border:0; }
.is-ocean .brand { font-family:'Ma Shan Zheng','Noto Serif SC',serif; font-size:32px; font-weight:400; letter-spacing:.08em; }
.is-ocean .brand-mark { width:48px; }
.is-ocean .brand-mark svg { width:40px; height:40px; }
.is-ocean .main-nav { gap:38px; font-size:17px; font-weight:500; }
.is-ocean .header-draw { background:#258bd045; border-color:#8bcfff5c; }
.is-ocean .site-header .theme-toggle { background:#0a417450; border-color:#8bcfff5c; }
.ocean-explore { position:relative; z-index:2; max-width:none; margin:0; padding:24px max(28px,calc((100vw - 1284px)/2)) 70px; background:#f1f7ff; color:#15385f; }
.ocean-explore::before { content:''; position:absolute; left:0; right:0; top:-25px; height:42px; background:#f1f7ff; clip-path:polygon(0 35%,8% 10%,17% 0,26% 8%,37% 36%,48% 44%,60% 25%,71% 0,84% 8%,94% 30%,100% 48%,100% 100%,0 100%); }
.explore-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; }
.ocean-explore h2 { color:#15385f; font-family:var(--sans); font-size:27px; font-weight:700; line-height:1.5; margin:0 0 3px; }
.explore-heading p { color:#6687b0; font-size:15px; margin:0; letter-spacing:.06em; }
.explore-heading>a { display:flex; align-items:center; justify-content:center; gap:12px; min-height:46px; border-radius:99px; background:#e0efff; color:#1768b5; font-size:14px; padding:12px 26px; }
.explore-heading>a svg { width:20px; fill:none; stroke:currentColor; stroke-width:2; }
.ocean-explore .channel-grid { gap:20px; }
.ocean-explore .channel-card { position:relative; background:linear-gradient(150deg,#fff,#f7fbff); color:#2379c9; border-color:#b2cdec60; box-shadow:0 8px 20px #2e64aa0b; min-height:205px; padding:24px; }
.ocean-explore .channel-card:hover { background:#fff; border-color:#77b7e9; box-shadow:0 12px 25px #2e64aa12; }
.ocean-explore .channel-card h3 { color:#173e72; }.ocean-explore .channel-card p { color:#6480a2; }
.is-ocean .site-footer { max-width:none; padding-inline:max(28px,calc((100vw - 1284px)/2)); color:#6180a5; background:#f1f7ff; border-color:#c8dbef; }
.is-ocean .site-footer a { color:#2579c2; }.is-ocean .footer-mark { color:#3a9ed5; }
@media(min-width:1600px) { .ocean-content { padding-top:145px; }.ocean-intro { min-height:405px; } }
@media(max-width:1180px) { .ocean-card-art { flex-basis:72px; width:72px; height:82px; }.ocean-card h2 { font-size:16px; }.ocean-card p { font-size:12px; }.ocean-content { padding-inline:32px; } }
@media(max-width:900px) { .ocean-home { min-height:850px; }.ocean-content { padding:140px 28px 65px; }.ocean-intro { min-height:350px; }.ocean-intro h1 { font-size:46px; }.ocean-cards { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:42px; gap:18px; }.ocean-card-art { flex-basis:100px; width:100px; height:95px; }.ocean-card h2 { font-size:19px; }.ocean-card { min-height:128px; }.ocean-backdrop { background-position:62% center; }.explore-heading { align-items:flex-start; }.explore-heading p { font-size:13px; } }
@media(max-width:650px) { .is-ocean .site-header { min-height:103px; padding:14px 22px 8px; }.is-ocean .brand { font-size:27px; }.is-ocean .main-nav { font-size:14px; gap:20px; }.ocean-content { padding:140px 22px 60px; }.ocean-home { min-height:980px; }.ocean-backdrop { background-position:58% top; background-size:auto 100%; }.ocean-backdrop::after { background:linear-gradient(90deg,#04295870,#04295808),linear-gradient(0deg,#053c7b60,transparent 50%); }.ocean-intro { min-height:386px; }.ocean-intro h1 { font-size:40px; line-height:1.45; }.ocean-copy { font-size:13px; margin:17px 0 20px; }.ocean-random { min-height:58px; font-size:20px; padding:12px 27px; }.ocean-online { font-size:12px; }.ocean-population-key { font-size:10px; margin-left:49px; }.ocean-cards { margin-top:33px; gap:14px; }.ocean-card { min-height:188px; flex-direction:column; padding:10px 15px 18px; align-items:flex-start; gap:0; }.ocean-card-art,.ocean-card-art.movie,.ocean-card-art.shell { flex-basis:auto; width:80px; height:83px; }.ocean-card h2 { font-size:16px; margin:4px 0 6px; }.ocean-card p { font-size:12px; }.ocean-card-arrow { bottom:13px; right:12px; }.ocean-explore { padding:24px 22px 50px; }.ocean-explore h2 { font-size:21px; }.explore-heading { display:block; }.explore-heading p { font-size:12px; line-height:1.8; margin-top:7px; }.explore-heading>a { width:120px; padding:10px 18px; margin-top:16px; }.ocean-explore .channel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.ocean-explore .channel-card { min-height:190px; padding:18px; }.ocean-explore .channel-card h3 { font-size:25px; }.ocean-explore .channel-card p { font-size:12px; }.swimmers { inset:120px 10% 40%; } }
.card-illustration { aspect-ratio:3/4; }
.brand-mark { width:48px; }.brand-mark svg { width:46px; height:36px; }
.is-ocean .brand-mark svg { width:48px; height:38px; }
.swimmer.fish .creature>svg { visibility:hidden; }
.swimmer.fish .creature::before { content:''; position:absolute; inset:-14px -4px; background:url('/assets/ocean-card-atlas.1d8d04d2abf2.webp') 0 50% / 400% 100% no-repeat; filter:drop-shadow(0 3px 6px #03235420); }
@media(max-width:650px) { .ocean-backdrop::after { background:linear-gradient(90deg,#0525559c,#05356b25 75%),linear-gradient(0deg,#053c7b40,transparent 50%); } }
.swimmers { inset:300px 10% 30% 48%; }
@media(max-width:650px) { .swimmers { inset:335px 4% 46% 70%; }.swimmer { width:50px; } }
/* Content pages share the entrance's pale blue-white shore. */
body.is-depth { background:#f1f7ff; color:#15385f; }
.is-depth .site-header { background:#f8fbffeb; border-bottom-color:#c8dbef; }
/* Keep the illustrated homepage navigation dark in the light content theme. */
html[data-theme="day"] body.is-ocean .site-header {
  --ink:#f2f8ff; --subtle:#cee7ff; --surface-solid:#10518b;
  background:linear-gradient(90deg,#032653f5,#073365ed);
  color:#f2f8ff;
  border-bottom:1px solid #6bc9ff24;
}
.is-ocean .site-header .header-draw { color:#e8f5ff; }
.is-ocean .site-header .main-nav a:hover { color:#8cefff; }
/* Compact shared navigation and the story selection shore. */
.breadcrumbs { display:flex; align-items:center; gap:10px; min-width:0; margin:0 0 20px; color:var(--subtle); font-size:13px; font-weight:500; line-height:20px; white-space:nowrap; overflow-x:auto; }
.breadcrumbs a { flex-shrink:0; }.breadcrumbs a:hover { color:var(--blue); }.breadcrumbs [aria-current] { overflow:hidden; text-overflow:ellipsis; }
.page { padding-top:28px; }.article { padding-top:28px; }.adventure-page { padding-top:28px; }
.is-depth .site-header { min-height:66px; padding-inline:max(24px,calc((100vw - 1400px)/2)); }
.is-depth .brand { font-size:29px; }.is-depth .main-nav { gap:38px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.adventure-intro { position:relative; max-width:1496px; padding:28px 48px 64px; }
.adventure-intro::before { content:''; position:absolute; z-index:-1; top:0; left:calc((100% - 100vw)/2); width:100vw; height:254px; border-bottom:1px solid #d9e8fb; background:linear-gradient(110deg,#eff7ff,#e5f1ff9c); }
.adventure-intro .breadcrumbs { margin-bottom:18px; }
.weaver-hero { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:40px; min-height:178px; margin-bottom:30px; padding-bottom:26px; }
.weaver-heading h1 { margin:0 0 12px; color:#15385f; font:700 clamp(38px,4vw,56px)/1.25 var(--serif); letter-spacing:.04em; }
.weaver-heading>p { margin:0 0 22px; color:var(--subtle); font-size:17px; line-height:1.7; }
.weaver-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:var(--subtle); font-size:14px; }.weaver-meta>span+span { margin-left:20px; }.weaver-meta svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; }
.weaver-explainer { z-index:1; align-self:center; max-width:440px; text-align:center; }.weaver-handwriting { margin:0 0 16px; font:400 25px/1.35 'Ma Shan Zheng',var(--serif); color:#6797ca; letter-spacing:.1em; transform:rotate(-6deg); text-align:left; padding-left:12px; }
.weaver-loop { display:flex; align-items:center; gap:9px; }.weaver-loop>span { display:flex; align-items:center; justify-content:center; gap:13px; border:1px solid #cce2ff; background:#f5faff99; border-radius:99px; padding:13px 18px; color:#0671cb; font-size:24px; }.weaver-loop b { font-size:14px; font-weight:600; }.weaver-loop i { color:#9fbfe2; font-style:normal; }.weaver-explainer>p:last-child { color:var(--subtle); font-size:13px; margin:12px 0 0; }
.weaver-door { position:absolute; right:-8px; top:-27px; width:195px; height:190px; opacity:.4; pointer-events:none; }.weaver-door>div { position:absolute; right:90px; width:75px; height:142px; border:6px solid #94c7ff; transform:skewY(-8deg); background:linear-gradient(140deg,#fff9,#b8e8ff); box-shadow:10px 15px 30px #d5eaff; }.weaver-door>div::before { content:''; position:absolute; top:-7px; left:-48px; width:39px; height:142px; border:5px solid #94c7ff; background:#c6e2ff8c; transform:skewY(28deg); }.weaver-door>span { position:absolute; right:-10px; bottom:8px; font:21px/1.5 'Ma Shan Zheng',var(--serif); color:#659aca; transform:rotate(-12deg); }
.weaver-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; }.weaver-filters { display:flex; gap:8px; overflow-x:auto; padding:3px 0; }.weaver-filters button { flex-shrink:0; border:0; border-radius:99px; padding:10px 24px; background:transparent; color:var(--subtle); font-size:14px; font-weight:500; }.weaver-filters button[aria-pressed="true"] { color:white; background:linear-gradient(110deg,#087ac7,#045fa3); }.weaver-filters button:hover { background:#dcecff; color:#086bb8; }.weaver-filters button[aria-pressed="true"]:hover { background:#086bb8; }.weaver-sort select { font:500 14px var(--sans); border:0; background:transparent; color:var(--subtle); padding:10px 0; cursor:pointer; }
.weaver-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.weaver-card { position:relative; display:flex; flex-direction:column; text-align:left; padding:0; min-width:0; overflow:hidden; border:1px solid #dbe8f8; border-radius:15px; background:linear-gradient(140deg,#fff,#fbfdff); color:var(--ink); box-shadow:0 7px 20px #477cb808; transition:transform .2s,border-color .2s,box-shadow .2s; }.weaver-card:hover { transform:translateY(-3px); border-color:#83bae6; box-shadow:0 10px 24px #477cb817; }.weaver-cover { display:block; flex-shrink:0; width:100%; height:134px; background-image:url('/assets/weaver-covers.c099a74700a2.webp'); background-size:200% 200%; background-repeat:no-repeat; background-color:#163646; }.scene-0 { background-position:left top; }.scene-1 { background-position:right top; }.scene-2 { background-position:left bottom; }.scene-3 { background-position:right bottom; }
.weaver-card-body { display:flex; flex-direction:column; position:relative; flex:1; padding:22px 21px 18px; }.weaver-genre { align-self:flex-start; padding:4px 10px; background:#eaf3ff; color:#2d78b8; border-radius:9px; font-size:12px; line-height:1.4; margin-top:-31px; margin-bottom:12px; }.weaver-card strong { font:600 21px/1.45 var(--serif); margin-bottom:5px; }.weaver-teaser { color:var(--subtle); font-size:13px; line-height:1.7; }.weaver-card-bottom { margin-top:auto; padding-top:14px; }.weaver-card-meta { display:flex; flex-wrap:wrap; gap:16px; font-size:12px; color:#6586ab; }.weaver-enter { display:inline-block; color:#0071c9; font-weight:600; font-size:14px; margin-top:13px; }.weaver-pick { position:absolute; top:22px; right:20px; background:#fff5e7; color:#e58c32; border-radius:99px; padding:5px 11px; font-size:12px; }
.weaver-featured { grid-column:1/-1; flex-direction:row; min-height:220px; }.weaver-featured .weaver-cover { width:53%; height:auto; min-height:220px; }.weaver-featured .weaver-card-body { padding:24px; }.weaver-featured .weaver-genre { margin:0 0 11px; }.weaver-featured strong { font-size:32px; }.weaver-featured .weaver-teaser { font-size:15px; }.weaver-featured .weaver-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; }.weaver-featured .weaver-enter { margin:0; padding:13px 22px; color:white; background:linear-gradient(110deg,#087bce,#046bc1); border-radius:99px; white-space:nowrap; }
@media(max-width:1180px) { .weaver-door { display:none; }.weaver-filters button { padding-inline:16px; }.weaver-hero { gap:24px; }.weaver-featured strong { font-size:27px; }.weaver-featured .weaver-card-bottom { flex-wrap:wrap; }.weaver-loop>span { padding:12px 15px; } }
@media(max-width:800px) { .adventure-intro { padding-inline:24px; }.weaver-hero { grid-template-columns:1fr; gap:20px; }.adventure-intro::before { height:390px; }.weaver-heading h1 { font-size:42px; }.weaver-explainer { text-align:left; }.weaver-handwriting { display:none; }.weaver-toolbar { align-items:flex-start; }.weaver-filters { gap:0; }.weaver-sort { flex-shrink:0; }.weaver-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.weaver-featured .weaver-cover { width:45%; }.weaver-featured strong { font-size:24px; }.weaver-pick { display:none; }.is-depth .main-nav { gap:20px; } }
@media(max-width:520px) { .adventure-intro { padding:20px 20px 40px; }.breadcrumbs { font-size:12px; margin-bottom:16px; }.weaver-heading h1 { font-size:38px; }.weaver-heading>p { font-size:14px; margin-bottom:15px; }.weaver-meta { font-size:12px; gap:7px; }.weaver-meta>span+span { margin-left:10px; }.weaver-hero { min-height:0; margin-bottom:22px; padding-bottom:20px; }.weaver-loop>span { padding:10px 14px; font-size:21px; }.weaver-explainer>p:last-child { font-size:11px; }.adventure-intro::before { height:326px; }.weaver-toolbar { display:block; }.weaver-sort { display:block; text-align:right; }.weaver-grid { grid-template-columns:1fr; }.weaver-featured { flex-direction:column; }.weaver-featured .weaver-cover { width:100%; height:170px; min-height:0; }.weaver-featured .weaver-card-body { padding:21px; }.weaver-featured strong { font-size:24px; }.weaver-featured .weaver-teaser { font-size:13px; }.weaver-card .weaver-cover { height:155px; }.is-depth .brand { font-size:24px; } }
.adventure-intro { isolation:isolate; }
@media(max-width:520px) { .is-depth .site-header { padding:14px 20px 10px; min-height:104px; row-gap:10px; }.is-depth .brand { line-height:1.3; }.is-depth .main-nav a { padding-block:8px; } }
@media(min-width:801px) { .weaver-hero { margin-bottom:0; } }
/* Play channel: a featured world and a shelf of small interactions. */
.play-landing { max-width:1568px; padding:24px 48px 56px; }
.play-landing .breadcrumbs { margin:0 40px 20px; color:#1b75bb; }
.play-heading { display:flex; justify-content:space-between; gap:32px; align-items:center; margin:0 40px 26px; }
.play-heading h1 { margin:0 0 5px; font:700 clamp(48px,5vw,72px)/1.15 var(--serif); color:#15385f; letter-spacing:.02em; }.play-heading>div>p { margin:0; color:#6288b4; font-size:18px; line-height:1.7; }
.play-heading-note { position:relative; padding:6px 76px 0 0; color:#6288b4; min-width:370px; }.play-heading-note p { font-size:15px!important; }.play-heading-note>svg { position:absolute; top:0; right:0; width:50px; height:36px; opacity:.55; }.play-heading-note>span { display:block; text-align:right; margin-top:30px; font-size:12px; line-height:1.7; color:#98b7db; }.play-heading-note::after { content:''; position:absolute; right:55px; top:24px; width:250px; height:35px; border-bottom:1px solid #bddcff; border-radius:50%; transform:rotate(-5deg); }
.play-feature { position:relative; overflow:hidden; min-height:350px; border:1px solid #d8e8fd; border-radius:24px; background:#eaf4ff; box-shadow:0 15px 40px #668ac70b; }
.play-feature-art { position:absolute; inset:0; background:url('/assets/play-feature.85f6d3b7d84f.webp') center 53%/cover no-repeat; }
.play-feature-art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#f4f9fff5 0%,#f0f7fff5 24%,#eff6ffbd 34%,#eaf4ff00 49%); }
.play-feature-copy { position:relative; z-index:1; max-width:540px; padding:27px 46px 29px; }.play-feature-badge { display:inline-flex; border-radius:99px; background:#c1e1fa; color:#1769a8; padding:6px 14px; font-size:14px; font-weight:500; }.play-feature-copy h2 { margin:15px 0 9px; font:700 clamp(36px,4vw,55px)/1.25 var(--serif); color:#15385f; }.play-feature-copy>p { font-size:16px; margin:0 0 16px; color:#5379a2; line-height:1.7; }.play-feature-copy .weaver-meta { border-top:1px solid #dbe8f8; padding-top:17px; gap:8px; font-size:14px; }.play-feature-copy .weaver-meta>span+span { margin-left:12px; }.play-feature-start { display:inline-flex; justify-content:center; align-items:center; min-height:52px; margin-top:30px; padding:12px 36px; border-radius:99px; color:#fff; background:linear-gradient(105deg,#087ac8,#146bb0); font-size:17px; font-weight:500; transition:background .2s,transform .2s; }.play-feature-start:hover { background:#0564aa; transform:translateY(-2px); }
.play-previews { position:absolute; z-index:2; bottom:24px; right:27px; left:38%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }.play-preview { display:flex; align-items:center; min-width:0; gap:12px; text-align:left; padding:0 12px 0 0; border:2px solid #e5f2ff; border-radius:14px; background:#edf6ffdf; color:#15385f; box-shadow:0 4px 15px #06335425; backdrop-filter:blur(8px); overflow:hidden; transition:transform .2s,background .2s; }.play-preview:hover { background:#fff; transform:translateY(-3px); }.play-preview .weaver-cover { width:35%; height:78px; flex-shrink:0; border-radius:10px; }.play-preview>span:nth-child(2) { min-width:0; flex:1; }.play-preview strong { display:block; font:600 16px/1.45 var(--serif); }.play-preview small { display:block; font-size:11px; margin-top:7px; color:#7a99b9; }.play-preview>b { font-weight:400; color:#286ba9; }
.play-more { margin-top:29px; }.play-more-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }.play-more-heading>div:first-child { display:flex; align-items:baseline; gap:22px; }.play-more h2 { font:700 25px/1.4 var(--sans); color:#15385f; margin:0; white-space:nowrap; }.play-more-heading p { margin:0; color:#819fc6; font-size:13px; }.play-tabs { display:flex; gap:10px; overflow-x:auto; padding:2px; }.play-tabs button { flex-shrink:0; border:1px solid #d8e8fb; background:#f7fbff; color:#618abd; border-radius:99px; padding:8px 17px; font-size:13px; font-weight:500; }.play-tabs button[aria-pressed="true"] { background:linear-gradient(110deg,#147bc4,#0867b5); border-color:#147bc4; color:#fff; }.play-tabs button:hover { border-color:#6babdb; }
.play-game-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }.play-game-card { position:relative; min-width:0; min-height:206px; margin:0; padding:19px 23px 20px; border:1px solid #dbe8fb; border-radius:22px; overflow:hidden; background:linear-gradient(120deg,#fcfeff,#f2f8ff); box-shadow:0 8px 25px #658ccb08; }.play-game-card:is(a):hover { border-color:#82b9e2; box-shadow:0 12px 28px #658ccb18; }.play-game-tag { position:relative; z-index:1; display:inline-block; border:1px solid #d8e9fc; background:#f5faff; color:#3081c8; border-radius:99px; padding:3px 11px; font-size:12px; }.play-game-card h3 { position:relative; z-index:1; margin:14px 0 10px; font:600 18px/1.45 var(--serif); color:#15385f; }.play-game-card p { position:relative; z-index:1; max-width:75%; margin:0 0 30px; font-size:12px; line-height:1.75; color:#6e94c0; }.play-game-enter { position:absolute; z-index:1; bottom:20px; left:23px; color:#0879c9; font-size:13px; font-weight:500; }.play-game-art { position:absolute; right:-7px; top:36px; width:98px; height:135px; opacity:.55; pointer-events:none; filter:drop-shadow(0 6px 10px #86c6e82a); }.play-game-art>svg { width:100%; height:100%; }.play-game-art.fish { width:110px; top:53px; right:-20px; transform:rotate(15deg); }.play-game-art.door { width:64px; height:112px; top:38px; right:-7px; border:7px solid #a8cefa; border-radius:38px 38px 0 0; background:linear-gradient(115deg,#deedff,#8cbcf080); box-shadow:-8px 4px 0 #d7e8ff; }.play-game-art.door::after { content:''; position:absolute; right:7px; top:60px; width:5px; height:12px; border-radius:99px; background:#79a7d6; }.play-game-art.mystery { top:40px; right:-4px; height:125px; background:linear-gradient(100deg,#b4d5ff,#86b8ed); clip-path:polygon(25% 0,70% 3%,78% 47%,100% 91%,60% 100%,35% 94%,0 100%,19% 50%); border-radius:15px; }.play-game-art.mystery span { display:block; color:#eef9ff; font-size:51px; text-align:center; padding-top:28px; }
@media(max-width:1250px) { .play-more-heading { align-items:flex-start; flex-direction:column; }.play-game-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.play-preview strong { font-size:13px; }.play-preview small { display:none; }.play-feature-copy { max-width:460px; padding-inline:32px; }.play-previews { left:42%; }.play-feature-copy>p { font-size:14px; }.play-feature-copy .weaver-meta { font-size:12px; } }
@media(max-width:800px) { .play-landing { padding-inline:24px; }.play-landing .breadcrumbs,.play-heading { margin-inline:0; }.play-heading-note { display:none; }.play-heading h1 { font-size:50px; }.play-heading>div>p { font-size:15px; }.play-feature { min-height:490px; }.play-feature-copy { max-width:100%; padding:26px; }.play-feature-art { background-position:65% center; }.play-feature-art::after { background:linear-gradient(90deg,#f4f9fff5,#f0f7ffce 40%,#eff6ff33); }.play-previews { left:24px; right:24px; bottom:22px; }.play-preview { flex-direction:column; padding:0 0 12px; gap:10px; }.play-preview .weaver-cover { width:100%; height:68px; }.play-preview>span:nth-child(2) { padding-inline:8px; }.play-preview>b { display:none; }.play-more-heading>div:first-child { gap:12px; }.play-game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.play-tabs { max-width:100%; } }
@media(max-width:520px) { .play-landing { padding:20px 20px 40px; }.play-heading { margin-bottom:20px; }.play-heading h1 { font-size:45px; }.play-heading>div>p { font-size:13px; }.play-feature { min-height:500px; border-radius:20px; }.play-feature-copy { padding:22px; }.play-feature-copy h2 { font-size:37px; }.play-feature-copy .weaver-meta { font-size:11px; gap:6px; }.play-feature-copy .weaver-meta>span+span { margin-left:4px; }.play-feature-start { font-size:15px; padding-inline:24px; margin-top:22px; }.play-previews { left:14px; right:14px; gap:7px; }.play-preview strong { font-size:11px; }.play-more-heading>div:first-child { display:block; }.play-more h2 { font-size:23px; }.play-more-heading p { margin-top:8px; font-size:12px; }.play-tabs { gap:7px; }.play-tabs button { padding:7px 12px; font-size:12px; }.play-game-grid { gap:12px; }.play-game-card { padding:17px; min-height:220px; border-radius:18px; }.play-game-card h3 { font-size:16px; }.play-game-card p { max-width:100%; font-size:11px; }.play-game-art { opacity:.22; }.play-game-enter { left:17px; }.play-game-tag { font-size:11px; padding-inline:8px; } }
@media(prefers-reduced-motion:reduce) { .play-feature-start,.play-preview { transition:none; } }
/* Draw channel: pearly moonlight, a featured draw, and six ways to leave it to chance. */
.draw-landing { max-width:1550px; }.draw-landing .play-heading h1 { font-size:clamp(48px,5vw,72px); }.draw-landing .play-heading-note>p { font-family:var(--serif); transform:rotate(-4deg); }.draw-landing .play-heading { margin-bottom:24px; }
.draw-feature { position:relative; min-height:328px; overflow:hidden; border:2px solid #fff; border-radius:28px; background:#e7f3ff; box-shadow:0 10px 35px #5286c310,inset 0 0 0 1px #d6e8fc; }.draw-feature-art { position:absolute; inset:0; background:url('/assets/draw-feature.5428426bad5d.webp') center 54%/cover no-repeat; }.draw-feature-art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#f4fafff5 0%,#f2f9fff2 25%,#eaf5ff8c 38%,transparent 51%); }.draw-feature-copy { position:relative; z-index:1; max-width:550px; padding:24px 36px; }.draw-feature .play-feature-badge { color:white; background:linear-gradient(100deg,#7db4ed,#2c8ae0); }.draw-feature-copy h2 { margin:14px 0 7px; font:700 clamp(35px,3.7vw,55px)/1.2 var(--serif); color:#15385f; white-space:nowrap; }.draw-feature-copy>p { margin:0 0 15px; color:#426b9c; font:500 21px/1.5 var(--serif); }.draw-feature-meta { display:flex; flex-wrap:wrap; gap:10px; }.draw-feature-meta>span { padding:7px 12px; border:1px solid #c7e1ff; border-radius:99px; background:#f6fbffc7; color:#5081b7; font-size:13px; font-weight:500; }.draw-feature-start { display:inline-flex; align-items:center; justify-content:center; border:1px solid #72bafa; margin-top:14px; min-height:57px; padding:11px 36px; color:#fff; background:linear-gradient(110deg,#479ded,#1b7bdc); box-shadow:inset 0 1px 0 #fff5,0 5px 16px #448bdf19; border-radius:99px; font-size:21px; font-weight:600; transition:transform .2s,background .2s; }.draw-feature-start:hover { transform:translateY(-2px); background:#207dd0; }
.draw-shortcuts { position:absolute; z-index:2; right:26px; bottom:18px; width:36.5%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.draw-shortcut { position:relative; min-width:0; display:flex; flex-direction:column; padding:110px 13px 13px; border:5px solid #fafdff; border-radius:21px; background:linear-gradient(135deg,#f4fbfff5,#e6f2fff2); overflow:hidden; box-shadow:0 5px 20px #426ca812; transition:transform .2s; }.draw-shortcut:hover { transform:translateY(-3px); }.draw-shortcut strong { font:600 17px/1.5 var(--serif); color:#15385f; }.draw-shortcut>span:last-child { color:#6b91be; font-size:12px; margin-top:2px; line-height:1.5; }.draw-shortcut .draw-card-art { top:0; left:0; width:100%; height:104px; background:linear-gradient(145deg,#d1e7fe,#e4f3ff); opacity:1; }.draw-shortcut .draw-card-art svg { width:100%; height:100%; padding:6px; }
.draw-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }.draw-card { position:relative; min-width:0; min-height:242px; padding:15px 17px 40px; border:1px solid #d5e5fb; border-radius:21px; background:linear-gradient(125deg,#fcfeff,#f4faff); overflow:hidden; box-shadow:0 8px 25px #658ccb08; }.draw-card:is(a):hover { border-color:#82b9e2; box-shadow:0 12px 28px #658ccb18; }.draw-card-art { position:absolute; top:3px; right:3px; width:76%; height:116px; border-radius:17px 17px 0 0; background:radial-gradient(ellipse at 75% 12%,#b8d8f4a6,transparent 80%); pointer-events:none; }.draw-card-art svg { width:100%; height:100%; padding:5px; filter:drop-shadow(0 3px 4px #749cbd20); }.draw-card h3 { position:relative; margin:51px 0 6px; color:#15385f; font:600 17px/1.5 var(--serif); }.draw-card p { position:relative; margin:0; color:#6d8fba; font-size:12px; line-height:1.7; }.draw-card .play-game-enter { left:17px; bottom:16px; }.draw-card .play-game-tag { background:#f9fcffdf; }.draw-mystery { display:block; position:absolute; top:20px; left:15%; width:80%; height:89px; background:linear-gradient(110deg,#cbe3fc,#a9ccf2); clip-path:polygon(22% 0,74% 5%,83% 68%,100% 92%,70% 100%,34% 88%,0 98%,14% 57%); color:#4d93d4; text-align:center; font:600 47px/1.8 var(--sans); }
@media(max-width:1250px) { .draw-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.draw-shortcuts { width:40%; right:20px; gap:8px; }.draw-shortcut { padding:95px 9px 11px; border-width:3px; }.draw-shortcut .draw-card-art { height:90px; }.draw-shortcut strong { font-size:14px; }.draw-shortcut>span:last-child { font-size:11px; }.draw-feature-copy { padding:24px 28px; max-width:490px; }.draw-feature-copy h2 { font-size:45px; }.draw-feature-meta { gap:6px; }.draw-feature-meta>span { font-size:12px; padding-inline:9px; }.draw-card h3 { max-width:75%; } }
@media(max-width:800px) { .draw-feature { min-height:490px; }.draw-feature-copy { padding:24px; max-width:100%; }.draw-feature-art { background-position:58% center; }.draw-feature-art::after { background:linear-gradient(90deg,#f4faffed,#edf6ffae 50%,#e4f3ff26); }.draw-shortcuts { left:20px; right:20px; bottom:20px; width:auto; }.draw-shortcut { padding-top:104px; }.draw-shortcut .draw-card-art { height:100px; }.draw-feature-copy h2 { font-size:42px; }.draw-feature-copy>p { font-size:19px; }.draw-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.draw-card h3 { max-width:100%; } }
@media(max-width:520px) { .draw-feature { min-height:483px; border-radius:22px; }.draw-feature-copy { padding:22px; }.draw-feature-copy h2 { font-size:34px; }.draw-feature-copy>p { font-size:17px; }.draw-feature-meta { gap:5px; }.draw-feature-meta>span { padding:6px 8px; font-size:11px; }.draw-feature-start { font-size:18px; padding-inline:26px; min-height:52px; margin-top:18px; }.draw-shortcuts { left:12px; right:12px; gap:7px; bottom:14px; }.draw-shortcut { border-radius:16px; padding:95px 7px 10px; }.draw-shortcut strong { font-size:13px; }.draw-shortcut>span:last-child { font-size:10px; }.draw-shortcut .draw-card-art { height:90px; }.draw-grid { gap:12px; }.draw-card { padding:14px 15px 42px; min-height:249px; border-radius:18px; }.draw-card h3 { font-size:15px; }.draw-card p { font-size:11px; }.draw-card .play-game-enter { left:15px; } }
@media(prefers-reduced-motion:reduce) { .draw-feature-start,.draw-shortcut { transition:none; } }
/* Repainted Draw artwork follows the reference's airy storybook composition. */
.draw-feature-art { background-image:url('/assets/draw-feature-v2.f971d562aa68.webp'); background-position:center; background-size:100% 100%; }
.draw-feature-art::after { background:linear-gradient(90deg,#f4faff40,transparent 42%); }
.draw-card-art { background:linear-gradient(135deg,#f5faff,#e2effd); width:76%; height:116px; overflow:hidden; }
.draw-painted { position:absolute; top:50%; right:0; width:100%; aspect-ratio:1; transform:translateY(-50%); background-image:url('/assets/draw-card-atlas-v2.f632979c9408.webp'); background-repeat:no-repeat; background-size:300% 200%; }
.jar .draw-painted { background-position:0% 0%; }.movie .draw-painted { background-position:50% 0%; }.bowl .draw-painted { background-position:100% 0%; }.bottle .draw-painted { background-position:0% 100%; }.sign .draw-painted { background-position:50% 100%; }.mystery .draw-painted { background-position:100% 100%; }
.draw-card .draw-card-art { width:100%; top:3px; right:3px; height:120px; background:linear-gradient(110deg,#fcfeff,#e4f0ff); }
.draw-card .draw-painted { width:145px; }.draw-card .draw-card-art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#fcfeffcc,transparent 38%),linear-gradient(0deg,#f8fcff,transparent 25%); }
.draw-shortcut .draw-card-art { background:#dbeeff; }.draw-shortcut .draw-painted { width:100%; }
@media(max-width:800px) { .draw-feature-art { background-size:auto 100%; background-position:52% center; }.draw-feature-art::after { background:linear-gradient(90deg,#f4faffdf,#edf6ff7a 60%,transparent); } }
@media(max-width:520px) { .draw-card .draw-painted { width:125px; }.draw-feature-art { background-position:50% center; } }
@media(min-width:801px) { .draw-feature-art::after { background:linear-gradient(90deg,#f4fafff5 0%,#f3f9fff2 24%,#f0f7ff8c 35%,transparent 45%); } }
.draw-card .draw-card-art::after { background:linear-gradient(90deg,#fcfefff5,transparent 48%),linear-gradient(0deg,#f8fcff 7%,#f8fcffcc 20%,transparent 43%); }
.draw-card h3 { margin-top:60px; }
/* Editorial channels share the reference's illustrated feature and five-column shelf. */
.editorial-landing { max-width:1624px; padding:24px 48px 54px; }.editorial-landing .breadcrumbs { margin:0 34px 12px; }
.editorial-heading { display:flex; justify-content:space-between; align-items:center; gap:30px; margin:0 34px 20px; }.editorial-heading h1 { margin:0 0 5px; color:#15385f; font:700 clamp(45px,5vw,72px)/1.1 var(--serif); letter-spacing:.025em; }.editorial-heading>div>p { margin:0; color:#5076a8; font:500 20px/1.6 var(--serif); }
.editorial-heading-note { position:relative; min-width:380px; padding-right:72px; }.editorial-heading-note>p { font:400 23px/1.4 'Ma Shan Zheng',var(--serif); letter-spacing:.06em; transform:rotate(-7deg); color:#6289bd; }.editorial-heading-note>svg { position:absolute; top:15px; right:0; width:53px; height:39px; opacity:.7; }.editorial-heading-note>span { display:block; font-size:12px; color:#7d9fca; text-align:right; line-height:1.7; }.editorial-heading-note::after { content:''; position:absolute; top:65px; left:50px; width:250px; height:23px; border-bottom:1px solid #7bb5ff; border-radius:50%; transform:rotate(-8deg); }
.editorial-feature { position:relative; overflow:hidden; min-height:330px; border:1px solid #cfe3ff; border-radius:24px; background:#eaf4ff; box-shadow:0 10px 30px #4678b00b; }.editorial-feature-art { position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:cover; }.editorial-browse .editorial-feature-art { background-image:url('/assets/browse-feature.46e4b2bbe5ce.webp'); }.editorial-read .editorial-feature-art { background-image:url('/assets/read-feature.bad8d75c5f93.webp'); }.editorial-feature-art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#f5fafff7 0%,#f3f9fff5 24%,#f1f8ffbc 33%,transparent 45%); }
.editorial-feature-copy { position:relative; z-index:1; width:39%; padding:18px 34px 20px; }.editorial-feature-copy .play-feature-badge { background:linear-gradient(105deg,#80b5ff,#2387dd); color:white; }.editorial-feature-copy h2 { margin:14px 0 12px; font:700 clamp(25px,2.6vw,38px)/1.4 var(--serif); color:#15385f; text-wrap:balance; }.editorial-feature-copy>p { margin:0 0 18px; font-size:16px; color:#557cae; line-height:1.6; }.editorial-meta { display:flex; align-items:center; gap:18px; color:#5680b5; font-size:14px; }.editorial-meta>span { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }.editorial-meta>span+span { border-left:1px solid #cde2ff; padding-left:18px; }.editorial-meta svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; }
.editorial-start { display:inline-flex; min-height:50px; align-items:center; justify-content:center; margin-top:18px; padding:10px 42px; border-radius:99px; color:white; background:linear-gradient(110deg,#3998e9,#1672c6); font-size:18px; font-weight:500; }.editorial-start:hover { background:#126ebd; }
.editorial-shortcuts { position:absolute; z-index:2; left:49%; right:20px; bottom:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.editorial-browse .editorial-shortcuts { left:39%; }.editorial-shortcut { display:flex; min-width:0; align-items:center; gap:12px; border:2px solid #eaf5ff; border-radius:17px; padding:0 12px 0 0; background:#f2f8fff0; backdrop-filter:blur(7px); overflow:hidden; color:#15385f; transition:transform .2s; }.editorial-shortcut:hover { transform:translateY(-3px); }.editorial-shortcut>.editorial-cover { flex-shrink:0; width:34%; height:78px; border-radius:13px; }.editorial-shortcut strong { flex:1; min-width:0; font:600 14px/1.5 var(--serif); }.editorial-shortcut>span:last-child { color:#306cb0; }
.editorial-cover { position:relative; display:block; overflow:hidden; background:#d7e8fb; }.editorial-cover>span { position:absolute; width:100%; aspect-ratio:1; top:50%; left:0; transform:translateY(-50%); background:url('/assets/editorial-card-atlas.85707767d28a.webp') no-repeat; background-size:300% 300%; }.editorial-scene-0>span { background-position:0% 0%; }.editorial-scene-1>span { background-position:50% 0%; }.editorial-scene-2>span { background-position:100% 0%; }.editorial-scene-3>span { background-position:0% 50%; }.editorial-scene-4>span { background-position:50% 50%; }.editorial-scene-5>span { background-position:100% 50%; }.editorial-scene-6>span { background-position:0% 100%; }.editorial-scene-7>span { background-position:50% 100%; }.editorial-scene-8>span { background-position:100% 100%; }
.editorial-more { margin-top:25px; }.editorial-more .play-more-heading { margin-bottom:14px; }.editorial-more h2 { margin:0; color:#15385f; font:700 29px/1.5 var(--serif); white-space:nowrap; }.editorial-more .play-more-heading p { font-size:13px; }.editorial-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }.editorial-card { position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; margin:0; border:1px solid #d9e8fc; border-radius:18px; background:linear-gradient(140deg,#fff,#f5faff); box-shadow:0 7px 20px #4678b008; }.editorial-card:is(a):hover { border-color:#88bce5; box-shadow:0 9px 25px #4678b014; }.editorial-card>.editorial-cover { height:139px; width:100%; flex-shrink:0; }.editorial-tag { position:absolute; top:11px; left:13px; padding:6px 13px; color:#2275bf; background:#ffffffed; border-radius:99px; font-size:12px; font-weight:500; }.editorial-card-copy { display:flex; flex:1; flex-direction:column; padding:10px 18px 14px; }.editorial-card h3 { margin:0 0 6px; font:600 18px/1.45 var(--serif); color:#15385f; text-wrap:balance; }.editorial-card p { margin:0 0 9px; font-size:13px; line-height:1.55; color:#5f86b7; }.editorial-card-copy>span { margin-top:auto; color:#167dd2; font-size:14px; font-weight:500; }
@media(max-width:1250px) { .editorial-feature-copy { width:43%; padding-inline:26px; }.editorial-feature-copy h2 { font-size:29px; }.editorial-feature-copy>p { font-size:14px; }.editorial-meta { gap:10px; font-size:12px; }.editorial-meta>span+span { padding-left:10px; }.editorial-shortcuts { left:43%; }.editorial-browse .editorial-shortcuts { left:43%; }.editorial-shortcut { gap:7px; padding-right:8px; }.editorial-shortcut strong { font-size:12px; }.editorial-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.editorial-more .play-more-heading { flex-direction:column; align-items:flex-start; } }
@media(max-width:800px) { .editorial-landing { padding-inline:24px; }.editorial-landing .breadcrumbs,.editorial-heading { margin-inline:0; }.editorial-heading-note { display:none; }.editorial-heading h1 { font-size:50px; }.editorial-heading>div>p { font-size:16px; }.editorial-feature { min-height:490px; }.editorial-feature-copy { width:100%; padding:24px; max-width:470px; }.editorial-feature-copy h2 { font-size:30px; }.editorial-feature-art { background-position:58% center; }.editorial-feature-art::after { background:linear-gradient(90deg,#f5faffed,#f1f8ffae 55%,#e6f3ff33); }.editorial-shortcuts,.editorial-browse .editorial-shortcuts { left:18px; right:18px; bottom:18px; }.editorial-shortcut { flex-direction:column; padding:0 0 10px; gap:9px; }.editorial-shortcut>.editorial-cover { width:100%; height:80px; }.editorial-shortcut strong { padding-inline:9px; font-size:12px; }.editorial-shortcut>span:last-child { display:none; }.editorial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.editorial-more .play-tabs { max-width:100%; } }
@media(max-width:520px) { .editorial-landing { padding:20px 20px 40px; }.editorial-heading h1 { font-size:45px; }.editorial-heading>div>p { font-size:14px; }.editorial-feature { min-height:500px; border-radius:20px; }.editorial-feature-copy { padding:20px; }.editorial-feature-copy h2 { font-size:27px; }.editorial-feature-copy>p { font-size:13px; }.editorial-meta { gap:8px; font-size:11px; }.editorial-meta>span+span { padding-left:8px; }.editorial-meta svg { width:19px; }.editorial-start { min-height:47px; font-size:16px; padding-inline:30px; }.editorial-shortcuts,.editorial-browse .editorial-shortcuts { left:12px; right:12px; gap:7px; bottom:14px; }.editorial-shortcut { border-radius:14px; }.editorial-shortcut strong { font-size:11px; }.editorial-more h2 { font-size:25px; }.editorial-grid { gap:12px; }.editorial-card>.editorial-cover { height:105px; }.editorial-card-copy { padding:10px 12px 13px; }.editorial-card h3 { font-size:15px; }.editorial-card p { font-size:11px; }.editorial-tag { padding:4px 9px; font-size:11px; top:9px; left:9px; }.editorial-card-copy>span { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .editorial-shortcut { transition:none; } }
.editorial-browse .editorial-feature-art { background-image:url('/assets/browse-feature-v2.01997d1438de.webp'); }
.editorial-cover[class*="browse-scene-"]>span { background-image:url('/assets/browse-card-atlas-v2.5571cbe9968a.webp'); background-size:300% 200%; }
.browse-scene-0>span { background-position:0% 0%; }.browse-scene-1>span { background-position:50% 0%; }.browse-scene-2>span { background-position:100% 0%; }.browse-scene-3>span { background-position:0% 100%; }.browse-scene-4>span { background-position:50% 100%; }.browse-scene-5>span { background-position:100% 100%; }
.source a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
@media(min-width:801px) { .editorial-landing { padding-top:12px; }.editorial-more { margin-top:21px; }.editorial-feature-copy>p { font-size:17px; }.editorial-card h3 { font-size:19px; }.editorial-card p { font-size:14px; }.editorial-feature-copy h2 { text-wrap:initial; } }
/* Every seed has its own painted narrative cover; crop without stretching. */
.weaver-cover.story-cover { background-size:cover; background-position:center; background-repeat:no-repeat; }

/* Channel home scenes: a shared navigation, four distinct places. */
html body:where([data-channel-home]:not([data-channel-home=""])) { --home-ink:#123a70; --home-muted:#4f7098; --home-border:#c8dff4; --home-surface:#ffffffec; --home-accent:#217ee0; background:#edf8ff; color:var(--home-ink); }
html body[data-channel-home="play"] { --home-ink:#f2f7ff; --home-muted:#c0d5fa; --home-border:#4a81ce; --home-surface:#153b78; --home-accent:#ffe77a; background:radial-gradient(ellipse at 50% 15%,#174aab,#0c2054 70%); }
html body[data-channel-home="read"] { --home-ink:#eef6ff; --home-muted:#b8cde5; --home-border:#2c5b82; --home-surface:#0d2c4a; --home-accent:#fff1d5; background:radial-gradient(ellipse at 65% 0,#103f62,#04172d 70%); }
html body[data-channel-home="draw"] { --home-ink:#183e79; --home-muted:#5c6ea5; --home-accent:#7474df; background:linear-gradient(160deg,#dcf1ff,#eff0ff 45%,#f8fbff); }
body[data-channel-home]:not([data-channel-home=""]) .depth-atmosphere { display:none; }
body[data-channel-home]:not([data-channel-home=""]) .site-header { position:relative; color:var(--home-ink); background:transparent; border-color:var(--home-border); }
body[data-channel-home]:not([data-channel-home=""]) .brand,body[data-channel-home]:not([data-channel-home=""]) .main-nav a { color:var(--home-ink); }
body[data-channel-home]:not([data-channel-home=""]) .main-nav a[aria-current="page"]::after { background:var(--home-accent); }
body[data-channel-home]:not([data-channel-home=""]) .header-draw { color:var(--home-ink); border-color:var(--home-border); background:var(--home-surface); box-shadow:none; }
body[data-channel-home]:not([data-channel-home=""]) .site-footer { color:var(--home-muted); border-color:var(--home-border); }
body[data-channel-home]:not([data-channel-home=""]) .site-footer a { color:var(--home-ink); }
.channel-home { max-width:1560px; padding:22px 48px 64px; color:var(--home-ink); }
.channel-home .breadcrumbs { margin:0 0 18px; color:var(--home-muted); }
.channel-home h1,.channel-home h2,.channel-home h3,.channel-home p { margin:0; }
.channel-kicker { font-size:13px; letter-spacing:.12em; color:var(--home-muted); margin-bottom:12px!important; }
.channel-home svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; flex-shrink:0; }
.channel-primary { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:52px; padding:12px 28px; border:0; border-radius:99px; font-weight:700; color:#173460; background:#ffe778; transition:transform .2s,box-shadow .2s; }
.channel-primary:hover { transform:translateY(-2px); box-shadow:0 6px 24px #071c4830; }
.channel-badge { display:inline-flex; padding:6px 13px; border-radius:99px; font-size:13px; font-weight:600; background:#2885ed; color:#fff; }
.channel-section-bar { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:20px; }
.channel-section-bar>div:first-child { display:flex; align-items:baseline; gap:20px; }
.channel-section-bar h2 { font:700 27px/1.5 var(--serif); }
.channel-section-bar p { color:var(--home-muted); font-size:14px; }
.channel-filters { display:flex; flex-wrap:wrap; gap:8px; }
.channel-filters button { padding:9px 17px; min-height:44px; border:1px solid var(--home-border); border-radius:99px; color:var(--home-muted); background:transparent; font-size:14px; transition:background .2s,color .2s; }
.channel-filters button:hover { border-color:var(--home-accent); color:var(--home-ink); }
.channel-filters button[aria-pressed="true"] { color:#fff; background:#237de0; border-color:#237de0; }
.channel-home :focus-visible { outline:3px solid #51bfee; outline-offset:4px; }
.channel-empty { padding:24px; color:var(--home-muted); grid-column:1/-1; }
.channel-card-tag { position:absolute; z-index:1; top:14px; left:14px; font-size:12px; padding:5px 12px; background:#eff8ff; color:#165693; border-radius:99px; }
.channel-card-copy { padding:18px 20px; display:flex; flex:1; flex-direction:column; }
.channel-card-copy h3 { font:600 20px/1.5 var(--serif); }
.channel-card-copy p { margin-top:8px; font-size:14px; line-height:1.7; color:var(--home-muted); }
.channel-card-footer { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:20px; font-size:13px; color:var(--home-accent); }
.channel-card-footer svg { width:17px; height:17px; }
/* Discovery: bright coastal strip, an editorial feature and a curiosity sidebar. */
.discovery-banner { position:relative; display:flex; justify-content:space-between; align-items:center; min-height:206px; padding:20px 40px; margin-bottom:22px; border-radius:24px; overflow:hidden; background:linear-gradient(90deg,#e6f8fff2,#d6f2ffd9 60%,#cff1ff90),url('/assets/ocean-clear-v2.5a9c14dae3a9.webp') center 55%/cover; }
.discovery-banner h1 { font:400 40px/1.3 'Ma Shan Zheng',var(--serif); color:#0a3776; }
.discovery-banner p:last-child { margin-top:14px; font-size:15px; line-height:1.7; }
.discovery-fish { position:relative; width:32%; text-align:center; }
.discovery-fish>svg { width:170px; height:110px; filter:drop-shadow(0 12px 15px #548aba40); transform:rotate(-8deg); }
.discovery-fish>span { position:absolute; top:-8px; right:0; padding:14px 18px; border-radius:30px 30px 30px 0; background:#fff; font:400 21px/1.4 'Ma Shan Zheng',var(--serif); transform:rotate(-7deg); }
.discovery-top { display:grid; grid-template-columns:minmax(0,2.35fr) minmax(280px,1fr); gap:20px; }
.discovery-feature { min-height:340px; border:6px solid #fff; border-radius:24px; overflow:hidden; background:url('/assets/browse-feature-v2.01997d1438de.webp') center/cover; box-shadow:0 12px 32px #4c8baf0b; }
.discovery-feature-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:328px; width:60%; padding:25px 30px; background:linear-gradient(90deg,#f5fcfff5,#f5fcffe0 70%,#f5fcff00); }
.discovery-feature h2 { margin:14px 0 10px; font:700 clamp(23px,2.3vw,34px)/1.45 var(--serif); }
.discovery-feature p { color:#3f6798; line-height:1.7; font-size:15px; max-width:340px; }
.feature-caption { display:flex; align-items:center; gap:8px; color:#3c6293; margin:16px 0; font-size:13px; }
.discovery-aside { border:1px solid var(--home-border); background:#ffffffd9; border-radius:24px; padding:22px; }
.discovery-aside h2 { font:700 20px/1.5 var(--serif); margin-bottom:14px; }
.discovery-bubble { background:#e5f5ff; padding:16px; border-radius:18px 18px 4px 18px; min-height:106px; }
.discovery-bubble strong { font-size:15px; line-height:1.5; display:block; }
.discovery-bubble p { margin-top:7px; font-size:13px; color:#416994; line-height:1.6; }
.discovery-refresh { min-height:44px; padding:8px 19px; margin:12px 0 18px; background:#2784e8; color:white; border:0; border-radius:99px; font-size:14px; }
.discovery-aside h3 { font-size:14px; margin-bottom:12px; }
.discovery-paths { display:flex; justify-content:space-between; gap:10px; }
.discovery-paths button { display:flex; flex-direction:column; align-items:center; gap:7px; background:transparent; border:0; color:#234c79; font-size:12px; padding:0; }
.discovery-paths button>span { display:grid; place-items:center; width:48px; height:48px; border:1px solid #bae3ff; border-radius:50%; background:#e7f6ff; color:#2283cd; }
.discovery-feed { margin-top:28px; }
.discovery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.discovery-card { position:relative; display:flex; flex-direction:column; min-width:0; border:1px solid #d5e7f8; border-radius:16px; overflow:hidden; background:white; transition:transform .2s,box-shadow .2s; }
.discovery-card:hover { transform:translateY(-4px); box-shadow:0 10px 25px #467bb41a; }
.discovery-card>.editorial-cover { height:140px; }
.discovery-card .channel-card-copy h3 { font-family:var(--sans); font-size:17px; }
.discovery-card .channel-card-copy { padding:15px 18px; }
/* Reading: one quiet room, followed directly by a shelf of stories. */
.reading-room { position:relative; min-height:330px; border:1px solid var(--home-border); border-radius:24px; background:linear-gradient(90deg,#061a32f2,#061a3280 55%,transparent),url('/assets/read-room-v3.dd3b21e193c2.webp') center/cover; overflow:hidden; }
.reading-room-copy { padding:40px 44px; max-width:760px; }
.reading-room h1 { font:500 clamp(30px,3.1vw,46px)/1.5 var(--serif); letter-spacing:.04em; }
.reading-room-copy>p:not(.channel-kicker) { color:#c1d8f2; margin-top:18px; font-size:16px; line-height:1.8; }
.reading-room-note { display:flex; align-items:center; gap:12px; color:#d9e8f8; margin-top:28px; font-size:14px; }
.reading-shelf { margin-top:28px; }
.reading-shelf-bar { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:22px; }
.reading-home .channel-filters button[aria-pressed="true"] { background:#fff1d5; border-color:#fff1d5; color:#12395b; }
.shelf-note { font-size:13px; color:var(--home-muted); }
.reading-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.reading-card { position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--home-border); border-radius:16px; background:linear-gradient(145deg,#123755,#092540); transition:transform .2s,border-color .2s; }
.reading-card:hover { transform:translateY(-4px); border-color:#90c7e7; }
.reading-card>.editorial-cover { height:172px; background:#123957; }
.reading-card .channel-card-copy h3 { font-size:20px; color:#f1f5ff; }
.reading-card .channel-card-footer { color:#e8dcc0; }
.reading-card .channel-card-copy { min-height:214px; }
.reading-endnote { text-align:center; color:#94aec9; padding-top:42px; font:400 23px/1.8 'Ma Shan Zheng',var(--serif); }
/* Play: an immersive laboratory and a horizontal story machine. */
.laboratory-banner { display:flex; align-items:center; justify-content:space-between; min-height:220px; padding:24px 42px; border-radius:20px; background:linear-gradient(90deg,#0d2c7190,transparent 75%),url('/assets/play-lab-v3.daf6a8725bb8.webp') center/cover; }
.laboratory-banner h1 { font:400 56px/1.15 'Ma Shan Zheng',var(--serif); }
.laboratory-banner h1>span { display:block; font-size:32px; margin-top:8px; color:#c3f4ff; }
.laboratory-banner>div>p:last-child { margin-top:14px; font-size:16px; color:#dfedff; }
.laboratory-sticky { display:block; padding:18px 24px; background:#fff2d8; color:#224772; font:400 23px/1.6 'Ma Shan Zheng',var(--serif); transform:rotate(-8deg); margin-right:50px; box-shadow:0 12px 25px #051a4840; }
.laboratory-feature { display:grid; grid-template-columns:1.2fr 1.35fr auto; gap:28px; align-items:center; padding:24px 30px; margin-top:22px; border:1px solid #58bbf4; border-radius:22px; background:linear-gradient(120deg,#1d3b9fe8,#12508cbd); box-shadow:inset 0 0 20px #55caff12,0 0 24px #03c6ff0d; }
.laboratory-feature .channel-badge { background:#ffe779; color:#233e70; }
.laboratory-feature h2 { font:700 43px/1.3 var(--sans); margin:10px 0; }
.laboratory-feature-copy>p { color:#d7e7ff; font-size:14px; line-height:1.7; }
.laboratory-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:#d7e7ff; font-size:13px; margin-top:18px; }
.laboratory-meta>span+span { padding-left:10px; border-left:1px solid #80a2dc; }
.laboratory-story-window { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:172px; padding:24px; border-radius:16px; border:1px solid #82cded70; background:linear-gradient(90deg,transparent,#072949e8),url('/assets/play-feature.85f6d3b7d84f.webp') 72% center/cover; }
.laboratory-story-window>span { display:grid; place-items:center; width:58px; height:58px; border:2px solid white; border-radius:50%; background:#118ad4ba; }
.laboratory-story-window p { color:white; font:400 24px/1.7 'Ma Shan Zheng',var(--serif); }
.laboratory-games { margin-top:30px; }
.laboratory-home .channel-filters button[aria-pressed="true"] { color:#103667; background:#71edfa; border-color:#71edfa; }
.laboratory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.laboratory-card { position:relative; display:block; min-height:228px; padding:58px 22px 24px; border:1px solid #8ebdf8; border-radius:18px; background:linear-gradient(125deg,#eef6ff,#b9d9ff); overflow:hidden; color:#113566; }
.laboratory-card.is-live:hover { border-color:#fff6b1; box-shadow:0 0 24px #8de6ff30; }
.laboratory-card>div { position:relative; z-index:1; width:72%; }
.laboratory-card h3 { font:700 21px/1.5 var(--sans); }
.laboratory-card p { margin-top:8px; font-size:14px; color:#3f6594; line-height:1.65; }
.laboratory-card-action { display:inline-flex; border:1px solid #83b4f3; border-radius:99px; padding:7px 16px; margin-top:18px; font-size:13px; color:#174b82; background:#f3faffba; }
.laboratory-card.is-upcoming .laboratory-card-action { border-color:transparent; background:#e4efff; color:#46658e; }
.laboratory-card-art { position:absolute; right:-4px; bottom:18px; width:116px; height:150px; opacity:.8; }
.laboratory-card-art>svg { width:100%; height:100%; }
.laboratory-card-art.door { width:74px; right:10px; border:7px solid #83b1eb; border-radius:45px 45px 0 0; background:linear-gradient(125deg,#e8ebff,#b1b8f5); box-shadow:-16px 8px 0 #c9ddff; }
.laboratory-card-art.mystery { width:110px; background:linear-gradient(140deg,#97c4f3,#60a8db); border-radius:45px 45px 10px 10px; display:grid; place-items:center; color:#f6fbff; font:700 65px/1 var(--serif); }
/* Draw: pastel sky, a pearl oracle, and a curved shore of choices. */
.chance-home { max-width:1560px; }
.chance-sky { display:grid; grid-template-columns:1fr 1.5fr; gap:40px; align-items:center; min-height:290px; padding:18px 36px 42px; }
.chance-intro h1 { font:400 clamp(36px,4vw,58px)/1.4 'Ma Shan Zheng',var(--serif); }
.chance-intro>p:not(.channel-kicker) { margin-top:10px; font:500 22px/1.5 var(--serif); }
.chance-intro>span { display:block; color:var(--home-muted); font-size:14px; margin-top:12px; line-height:1.8; }
.chance-oracle { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; min-height:260px; gap:10px; padding:20px 28px 20px 12px; border:2px solid #ffffffd9; border-radius:30px; background:linear-gradient(120deg,#ffffffad,#e6f0ffad); box-shadow:0 12px 40px #779acd18; }
.chance-pearl { width:100%; height:224px; border-radius:50%; background:url('/assets/draw-card-atlas-v2.f632979c9408.webp') 0 0/300% 200%; mask-image:radial-gradient(ellipse,#000 48%,transparent 71%); }
.chance-oracle .channel-badge { color:#465ab0; background:#ffffffb5; border:1px solid #d3d9f5; }
.chance-oracle h2 { font:700 30px/1.4 var(--sans); margin:10px 0 6px; }
.chance-oracle p { font-size:15px; color:var(--home-muted); line-height:1.7; }
.chance-oracle .channel-primary { color:white; margin-top:20px; background:linear-gradient(100deg,#32c4e4,#9d77e4); box-shadow:0 5px 20px #a496df30,inset 0 0 0 2px #ffffff60; }
.chance-shore { position:relative; padding:30px; border-radius:60px 60px 24px 24px; border-top:3px solid white; background:linear-gradient(155deg,#f9fcfff7,#eff8ffdb); }
.chance-note { color:#656baa; font:400 24px/1.5 'Ma Shan Zheng',var(--serif); }
.chance-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.chance-card { min-width:0; border-radius:18px; background:#fff; border:1px solid #dce9fc; overflow:hidden; transition:transform .2s,box-shadow .2s; }
.chance-card:hover { transform:translateY(-4px); box-shadow:0 10px 24px #768fc41c; }
.chance-card-art.draw-card-art { display:block; position:relative; inset:auto; width:100%; height:120px; opacity:1; overflow:hidden; border-radius:0; background:#deedff; }
.chance-card-art .draw-painted { width:100%; }
.chance-card>div { position:relative; padding:15px 38px 18px 16px; }
.chance-card h3 { font:700 17px/1.5 var(--sans); }
.chance-card p { margin-top:5px; font-size:12px; line-height:1.6; color:var(--home-muted); }
.chance-arrow { position:absolute; top:19px; right:10px; color:#466dcc; font-size:17px; }
.chance-moods { margin-top:30px; }
.chance-mood-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.chance-mood-grid>a { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid #dce9fc; background:#ffffffd9; border-radius:18px; }
.chance-mood-grid h3 { font-size:16px; line-height:1.5; }
.chance-mood-grid p { color:var(--home-muted); font-size:12px; margin-top:4px; line-height:1.5; }
.chance-mood-grid>a>span:last-child { margin-left:auto; color:#6375cd; }
.mood-art.draw-card-art { position:relative; inset:auto; width:48px; height:48px; opacity:1; flex-shrink:0; overflow:hidden; border-radius:50%; }
.mood-art .draw-painted { width:100%; }
@media(min-width:1600px) { .discovery-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:1200px) { .channel-home { padding-inline:32px; }.channel-section-bar { align-items:flex-start; flex-direction:column; }.channel-section-bar>div:first-child { flex-wrap:wrap; gap:8px 18px; }.laboratory-feature { grid-template-columns:1fr 1fr; gap:20px; }.laboratory-feature>.channel-primary { grid-column:1; justify-self:start; }.laboratory-story-window { grid-row:1/3; grid-column:2; height:100%; }.chance-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.chance-card-art.draw-card-art { height:146px; }.chance-mood-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.reading-grid,.discovery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.chance-sky { gap:20px; padding-inline:12px; }.chance-intro h1 { font-size:40px; }.chance-oracle { padding-right:18px; }.laboratory-sticky { margin-right:0; } }
@media(max-width:800px) { .channel-home { padding:20px 24px 44px; }.discovery-top { grid-template-columns:1fr; }.discovery-aside { display:grid; grid-template-columns:1fr auto; gap:12px 20px; }.discovery-aside h2 { grid-column:1/-1; margin:0; }.discovery-bubble { grid-column:1; }.discovery-refresh { align-self:center; }.discovery-aside h3 { grid-column:1/-1; margin:0; }.discovery-paths { grid-column:1/-1; justify-content:start; gap:24px; }.discovery-banner { padding:24px; }.discovery-banner h1 { font-size:32px; }.discovery-fish { width:24%; }.discovery-fish>svg { width:100%; }.discovery-fish>span { display:none; }.reading-grid,.discovery-grid,.laboratory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.reading-room-copy { padding:32px; }.reading-room { min-height:320px; background-position:65% center; }.reading-room h1 { font-size:32px; }.reading-shelf-bar { align-items:flex-start; flex-direction:column; gap:12px; }.laboratory-banner { padding:24px; }.laboratory-banner h1 { font-size:46px; }.laboratory-sticky { font-size:19px; }.laboratory-feature { padding:24px; }.laboratory-feature h2 { font-size:35px; }.laboratory-story-window { padding:18px; flex-direction:column; justify-content:center; }.laboratory-story-window p { font-size:23px; }.chance-sky { grid-template-columns:1fr; padding:8px 0 30px; }.chance-intro { text-align:center; }.chance-intro h1 { font-size:46px; }.chance-oracle { max-width:600px; width:100%; justify-self:center; }.chance-shore { padding:28px 20px; border-radius:38px 38px 20px 20px; }.chance-note { display:none; } }
@media(max-width:520px) { .channel-home { padding:16px 18px 36px; }.channel-home .breadcrumbs { font-size:12px; }.channel-kicker { font-size:12px; }.channel-section-bar h2 { font-size:23px; }.channel-section-bar p { font-size:13px; }.channel-filters { gap:6px; }.channel-filters button { font-size:13px; padding:8px 13px; }.discovery-banner { padding:22px; min-height:200px; }.discovery-banner h1 { font-size:32px; }.discovery-banner p:last-child { font-size:13px; }.discovery-fish { display:none; }.discovery-feature { min-height:330px; background-position:65% center; }.discovery-feature-copy { width:100%; min-height:330px; padding:22px; background:linear-gradient(90deg,#f8fcfff5,#f8fcffd9 60%,#f8fcff40); }.discovery-feature h2 { font-size:25px; }.discovery-feature p { font-size:14px; max-width:260px; }.discovery-aside { display:block; padding:20px; }.discovery-aside h2 { margin-bottom:14px; }.discovery-aside h3 { margin-bottom:12px; }.discovery-grid { gap:12px; }.discovery-card>.editorial-cover { height:105px; }.channel-card-tag { font-size:11px; top:10px; left:10px; padding:4px 9px; }.discovery-card .channel-card-copy { padding:12px; }.discovery-card .channel-card-copy h3 { font-size:15px; }.channel-card-copy p { font-size:13px; }.reading-room-copy { padding:26px; }.reading-room { min-height:340px; background-position:65% center; }.reading-room h1 { font-size:27px; }.reading-room-copy>p:not(.channel-kicker) { font-size:14px; }.reading-grid { grid-template-columns:1fr; gap:18px; }.reading-card>.editorial-cover { height:180px; }.reading-card .channel-card-copy { min-height:auto; }.reading-card .channel-card-copy h3 { font-size:21px; }.reading-endnote { font-size:21px; }.laboratory-banner { min-height:208px; padding:24px; background-position:65% center; }.laboratory-banner h1 { font-size:44px; }.laboratory-banner h1>span { font-size:27px; }.laboratory-banner>div>p:last-child { font-size:14px; }.laboratory-sticky { display:none; }.laboratory-feature { grid-template-columns:1fr; padding:22px; gap:18px; }.laboratory-feature>.channel-primary { grid-column:auto; grid-row:3; }.laboratory-story-window { grid-column:auto; grid-row:2; height:150px; min-height:150px; flex-direction:row; }.laboratory-story-window p { font-size:24px; }.laboratory-grid { grid-template-columns:1fr; gap:14px; }.laboratory-card { min-height:216px; }.laboratory-card>div { width:73%; }.laboratory-card-art { width:106px; }.chance-intro h1 { font-size:40px; }.chance-intro>p:not(.channel-kicker) { font-size:20px; }.chance-oracle { grid-template-columns:.85fr 1.2fr; gap:0; padding:12px; min-height:224px; border-radius:24px; }.chance-pearl { height:190px; }.chance-oracle h2 { font-size:25px; }.chance-oracle p { font-size:13px; }.chance-oracle .channel-primary { padding:10px 16px; font-size:14px; gap:8px; min-height:48px; }.chance-shore { padding:24px 14px; }.chance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.chance-card-art.draw-card-art { height:100px; }.chance-card>div { padding:12px; }.chance-card h3 { font-size:15px; }.chance-card p { font-size:12px; }.chance-arrow { display:none; }.chance-mood-grid { grid-template-columns:1fr; gap:12px; } }

.channel-home h1,.laboratory-feature h2 { color:var(--home-ink); }
.chance-pearl { background-image:url('/assets/draw-feature-v2.f971d562aa68.webp'); background-size:auto 100%; background-position:center; }
.chance-grid .chance-card:first-child .draw-painted { height:100%; aspect-ratio:auto; top:0; transform:none; background-image:url('/assets/draw-feature-v2.f971d562aa68.webp'); background-size:auto 100%; background-position:center; }
@media(min-width:801px) { .laboratory-sticky { align-self:flex-end; font-size:19px; padding:12px 18px; margin-right:0; } }
@media(max-width:520px) { .laboratory-story-window p { font-size:20px; line-height:1.6; }.laboratory-banner { background-image:linear-gradient(90deg,#082854ba,transparent 90%),url('/assets/play-lab-v3.daf6a8725bb8.webp'); } }

/* Play v4: the laboratory is the environment; the content sits inside it. */
html body[data-channel-home="play"] { position:relative; background:#071b4d; isolation:isolate; }
body[data-channel-home="play"]::before { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(0deg,#071b4d 0%,#071b4d20 40%,transparent 75%),url('/assets/play-lab-v4.31a3690b9d40.webp') center top/100% auto no-repeat; }
body[data-channel-home="play"] .site-header { max-width:1376px; min-height:72px; padding-inline:40px; border:0; border-radius:0 0 28px 28px; background:linear-gradient(90deg,#071a51d9,#113b7abd); box-shadow:0 10px 32px #03123a22; }
body[data-channel-home="play"] .site-footer { background:transparent; }
.laboratory-home { max-width:1440px; padding:10px 48px 50px; }
.laboratory-home .breadcrumbs { font-size:12px; margin-bottom:0; opacity:.8; }
.laboratory-banner { position:relative; min-height:180px; padding:16px 44px 24px; margin:0; border:0; border-radius:0; background:none; align-items:center; }
.laboratory-banner h1 { font-size:55px; letter-spacing:.08em; text-shadow:0 3px 20px #001b52; }
.laboratory-banner h1>span { margin-top:3px; font-size:32px; font-weight:400; }
.laboratory-banner .channel-kicker { display:none; }
.laboratory-banner>div>p:last-child { margin-top:12px; font-size:16px; font-weight:400; text-shadow:0 2px 8px #00183e; }
.laboratory-sticky { position:absolute; right:4%; top:20px; align-self:auto; margin:0; padding:14px 20px; font-size:21px; line-height:1.6; background:#fff0d9ee; border-radius:2px; box-shadow:0 8px 16px #03193f35; transform:rotate(-10deg); }
.laboratory-sticky::before { content:''; position:absolute; top:-9px; left:48%; width:12px; height:22px; border-radius:3px; background:#80abd0; transform:rotate(7deg); }
.laboratory-feature { position:relative; grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) auto; gap:26px; min-height:196px; margin:0 36px; padding:24px 28px; border:1px solid #3ac5ffe0; border-radius:20px; background:linear-gradient(115deg,#1930a8b8,#144ea894 65%,#13338db0); backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 #b9eaff5c,inset 0 0 18px #4bc7ff15,0 0 7px #15c1ff40,0 14px 40px #00154155; }
.laboratory-feature .channel-badge { position:absolute; top:12px; left:16px; transform:rotate(-3deg); padding:6px 18px; background:linear-gradient(100deg,#fffaaa,#ffe377); box-shadow:0 0 20px #ffe88155; }
.laboratory-feature-copy { padding-top:24px; }
.laboratory-feature h2 { font-size:41px; margin:6px 0 10px; font-weight:800; line-height:1.3; }
.laboratory-feature-copy>p { font-size:13px; font-weight:400; line-height:1.7; }
.laboratory-meta { margin-top:16px; font-size:12px; font-weight:400; }
.laboratory-story-window { position:relative; display:grid; grid-template-columns:1.15fr 1fr; min-height:152px; height:100%; padding:0; gap:0; border:0; background:linear-gradient(90deg,#237cb32b,#092b7050); border-radius:14px; overflow:hidden; }
.laboratory-castle { position:relative; display:block; height:100%; min-height:152px; background:#64bbef; overflow:hidden; border-radius:14px; }
.laboratory-castle::before { content:''; position:absolute; inset:0; background:url('/assets/play-card-atlas-v4.30a5cdf3ed10.webp') 100% 100%/300% 200%; }
.laboratory-castle i { position:absolute; display:grid; place-items:center; right:18px; bottom:22px; width:46px; height:46px; border:2px solid white; border-radius:50%; background:#127cd4c9; color:white; box-shadow:0 0 18px #42d9ff70; }
.laboratory-story-window p { padding:16px; font:400 23px/1.6 'Ma Shan Zheng',var(--serif); color:#fff; transform:rotate(-5deg); text-shadow:0 2px 10px #001b50; }
.laboratory-feature>.channel-primary { grid-column:auto; grid-row:auto; min-height:54px; padding:12px 26px; font-size:18px; background:linear-gradient(100deg,#fff6a5,#ffe166); border:1px solid #fff8c5; box-shadow:0 0 22px #ffec7052,inset 0 1px 4px white; }
.laboratory-games { margin-top:28px; }
.laboratory-games .channel-section-bar { flex-direction:row; align-items:center; gap:20px; margin-bottom:16px; }
.laboratory-games .channel-section-bar>div:first-child { gap:16px; }
.laboratory-games h2 { font:700 27px/1.4 var(--sans); text-shadow:0 2px 12px #082366; }
.laboratory-games .channel-section-bar p { font-size:13px; font-weight:400; color:#c7deff; }
.laboratory-home .channel-filters { gap:8px; }
.laboratory-home .channel-filters button { min-height:40px; padding:7px 16px; background:#0b2b683e; border-color:#7eb6fb60; color:#d5e8ff; font-size:13px; font-weight:400; }
.laboratory-home .channel-filters button[aria-pressed="true"] { background:linear-gradient(100deg,#8dffff,#26d9f5); border-color:#b7faff; color:#103c71; box-shadow:0 0 16px #22dfff65; font-weight:600; }
.laboratory-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.laboratory-card { min-height:192px; padding:46px 20px 18px; border:1px solid #aecaff; border-radius:17px; background:#d4eaff; box-shadow:inset 0 1px 0 #fff,0 8px 24px #00153c30; }
.laboratory-card:first-child { grid-column:span 2; }
.laboratory-card:nth-child(n+4) { grid-column:span 2; }
.laboratory-card .channel-card-tag { top:12px; left:16px; padding:4px 13px; background:#f6faffde; color:#255dab; }
.laboratory-card>div { width:70%; }
.laboratory-card h3 { font-size:19px; line-height:1.4; color:#092b64; font-weight:700; }
.laboratory-card p { max-width:225px; margin-top:8px; color:#325382; font-size:13px; line-height:1.6; font-weight:400; }
.laboratory-card-action { position:relative; padding:5px 15px; font-size:13px; margin-top:12px; min-height:32px; background:#f6fcffb8; border:1px solid #7caeec; color:#124c93; }
.laboratory-card.is-upcoming .laboratory-card-action { background:#f2f8ffe0; border:1px solid #a4c7f3; color:#375d89; }
.laboratory-card-art { position:absolute; z-index:0; inset:0; width:auto; height:auto; opacity:1; }
.laboratory-card-art>span { position:absolute; top:50%; right:0; width:100%; aspect-ratio:1.6; transform:translateY(-50%); background-image:url('/assets/play-card-atlas-v4.30a5cdf3ed10.webp'); background-repeat:no-repeat; background-size:300% 200%; }
.laboratory-card-art.hourglass>span { background-position:0 0; }.laboratory-card-art.door>span { background-position:50% 0; }.laboratory-card-art.fish>span { background-position:100% 0; }.laboratory-card-art.bottle>span { background-position:0 100%; }.laboratory-card-art.mystery>span { background-position:50% 100%; }
.laboratory-card-art.door,.laboratory-card-art.mystery { inset:0; width:auto; right:0; border:0; border-radius:0; background:none; box-shadow:none; display:block; }
.laboratory-card-art::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#eef6ffed 0%,#eaf3ffd4 28%,#d9edff5c 57%,transparent 78%); }
.laboratory-card:is(a):hover { transform:translateY(-3px); border-color:#d8faff; box-shadow:0 0 18px #6fd8ff25,0 12px 26px #00153c40; transition:transform .2s,box-shadow .2s; }
@media(min-width:1600px) { .laboratory-home { max-width:1560px; }.laboratory-banner { min-height:204px; }.laboratory-feature { min-height:208px; }.laboratory-card { min-height:208px; } }
@media(max-width:1200px) { .laboratory-home { padding-inline:32px; }.laboratory-feature { margin-inline:8px; grid-template-columns:1.1fr 1.2fr auto; gap:18px; padding:22px; }.laboratory-feature h2 { font-size:35px; }.laboratory-story-window { grid-column:auto; grid-row:auto; }.laboratory-story-window p { font-size:21px; padding:12px; }.laboratory-feature>.channel-primary { font-size:16px; padding:10px 20px; }.laboratory-games .channel-section-bar { flex-wrap:wrap; }.laboratory-card h3 { font-size:17px; }.laboratory-card>div { width:78%; } }
@media(max-width:800px) { body[data-channel-home="play"]::before { background-size:auto 760px; background-position:60% top; }.laboratory-home { padding:12px 24px 40px; }.laboratory-banner { min-height:190px; padding:22px 16px; }.laboratory-banner h1 { font-size:48px; }.laboratory-sticky { right:0; top:32px; font-size:18px; padding:10px 16px; }.laboratory-feature { margin:0; grid-template-columns:1fr 1.2fr; gap:18px; padding:22px; }.laboratory-feature>.channel-primary { grid-column:1; grid-row:2; justify-self:start; }.laboratory-story-window { grid-column:2; grid-row:1/3; grid-template-columns:1fr; grid-template-rows:140px auto; }.laboratory-castle { min-height:140px; }.laboratory-story-window p { text-align:center; padding:12px; }.laboratory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.laboratory-card:first-child { grid-column:span 2; }.laboratory-card:nth-child(n+4) { grid-column:auto; }.laboratory-card { min-height:200px; }.laboratory-card>div { width:72%; }.laboratory-games .channel-section-bar { align-items:flex-start; flex-direction:column; } }
@media(max-width:520px) { body[data-channel-home="play"] .site-header { padding-inline:20px; border-radius:0; }.laboratory-home { padding:8px 18px 36px; }.laboratory-banner { padding:18px 6px 24px; min-height:202px; background:none; }.laboratory-banner h1 { font-size:48px; }.laboratory-banner h1>span { font-size:28px; }.laboratory-banner>div>p:last-child { font-size:13px; max-width:200px; }.laboratory-sticky { display:none; }.laboratory-feature { grid-template-columns:1fr; gap:16px; padding:20px; }.laboratory-feature-copy { padding-top:26px; }.laboratory-feature h2 { font-size:37px; }.laboratory-feature-copy>p { font-size:14px; }.laboratory-story-window { grid-column:1; grid-row:2; grid-template-columns:1fr 1fr; grid-template-rows:1fr; min-height:140px; height:140px; }.laboratory-story-window p { font-size:22px; line-height:1.5; padding:14px; }.laboratory-feature>.channel-primary { grid-column:1; grid-row:3; min-height:48px; }.laboratory-home .channel-filters { gap:6px; }.laboratory-home .channel-filters button { min-height:44px; padding:8px 13px; }.laboratory-grid { grid-template-columns:1fr; gap:14px; }.laboratory-card:first-child,.laboratory-card:nth-child(n+4) { grid-column:auto; }.laboratory-card { min-height:205px; padding:50px 20px 18px; }.laboratory-card h3 { font-size:20px; }.laboratory-card p { font-size:14px; }.laboratory-card>div { width:70%; }.laboratory-games .channel-section-bar>div:first-child { align-items:flex-start; flex-direction:column; gap:8px; } }
.laboratory-card-art>span { max-width:350px; aspect-ratio:1; }
.laboratory-castle::before { inset:auto; top:50%; left:0; width:100%; aspect-ratio:1; transform:translateY(-50%); }
.laboratory-story-window>.laboratory-castle { display:block; width:100%; height:100%; min-height:152px; border:0; border-radius:14px; background:#64bbef; }
@media(max-width:800px) { .laboratory-story-window>.laboratory-castle { min-height:140px; } }
@media(max-width:520px) { body[data-channel-home="play"]::before { background-image:linear-gradient(0deg,#071b4d 0%,#071b4d40 45%,transparent 80%),linear-gradient(90deg,#06205770,transparent 80%),url('/assets/play-lab-v4.31a3690b9d40.webp'); }.laboratory-banner h1 { text-shadow:0 2px 16px #00153a; } }

/* A warm, illuminated story machine stands forward from the blue laboratory. */
.laboratory-feature { background:linear-gradient(115deg,#fff8eaf5 0%,#f4f6fff2 58%,#e3f2fff0 100%); border-color:#c0edff; box-shadow:inset 0 1px 0 #fff,0 0 0 1px #82dcff40,0 0 24px #7bd8ff28,0 18px 44px #00143770; }
.laboratory-feature h2 { color:#103568; text-shadow:none; }
.laboratory-feature-copy>p,.laboratory-meta { color:#3b557c; }
.laboratory-meta>span+span { border-color:#a0bad3; }
.laboratory-feature .channel-badge { background:#164d9b; color:#fff7d5; box-shadow:0 4px 12px #17488624; }
.laboratory-story-window { background:linear-gradient(115deg,#2874b9,#103e7b); }
.laboratory-feature>.channel-primary { color:#fff8e9; background:linear-gradient(110deg,#1558ac,#123e83); border-color:#1d58a4; box-shadow:0 6px 20px #1c4d9a30,inset 0 1px 0 #8ebcf74d; }
.laboratory-feature>.channel-primary:hover { background:linear-gradient(110deg,#1a68c4,#164997); box-shadow:0 8px 24px #1c4d9a45; }

/* The story machine's action glows like a vial of luminous liquid. */
.laboratory-feature { min-height:220px; padding-block:32px; }
.laboratory-feature>.channel-primary { position:relative; isolation:isolate; overflow:hidden; min-height:58px; padding-inline:30px; color:#073968; background:linear-gradient(110deg,#a2ffff 0%,#42e2f1 38%,#6cc5ff 72%,#a4a5ff 100%); border:1px solid #c3ffff; box-shadow:inset 0 2px 5px #ffffffd9,inset 0 -5px 10px #217cd24d,0 0 12px #52dfffa6,0 0 28px #40ccef4d,0 8px 20px #1b68ac30; transition:box-shadow .22s ease,transform .22s ease,filter .22s ease; }
.laboratory-feature>.channel-primary::before { content:''; position:absolute; z-index:-1; left:-12%; right:-12%; top:-70%; height:120%; border-radius:50%; background:linear-gradient(180deg,#ffffffeb,#ffffff40); transform:rotate(-8deg); pointer-events:none; transition:transform .3s ease,opacity .3s ease; }
.laboratory-feature>.channel-primary::after { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(circle at 18% 72%,#ffffffa8 0 2px,transparent 3px),radial-gradient(circle at 78% 28%,#ffffffbf 0 3px,transparent 4px),radial-gradient(ellipse at 55% 95%,#c1ffff85,transparent 60%); }
.laboratory-feature>.channel-primary:hover,.laboratory-feature>.channel-primary:focus-visible { background:linear-gradient(110deg,#b4ffff,#53f3f4 38%,#77d4ff 72%,#b6b4ff); transform:translateY(-2px); filter:brightness(1.06); box-shadow:inset 0 2px 6px #fff,inset 0 -5px 12px #247bce40,0 0 16px #5feaffd9,0 0 36px #35deff85,0 0 58px #62baff45,0 10px 24px #1763a83d; }
.laboratory-feature>.channel-primary:hover::before,.laboratory-feature>.channel-primary:focus-visible::before { transform:translateY(5px) rotate(-4deg); }
.laboratory-feature>.channel-primary:active { transform:translateY(0); filter:brightness(.98); }
@media(min-width:1600px) { .laboratory-feature { min-height:232px; } }
@media(max-width:800px) { .laboratory-feature { padding-block:28px; } }
@media(max-width:520px) { .laboratory-feature { padding-block:24px; }.laboratory-feature>.channel-primary { min-height:52px; padding-inline:26px; } }
@media(prefers-reduced-motion:reduce) { .laboratory-feature>.channel-primary,.laboratory-feature>.channel-primary::before { transition:none; }.laboratory-feature>.channel-primary:hover,.laboratory-feature>.channel-primary:focus-visible { transform:none; } }

/* Reference balance: a blue glass machine with warm yellow focal points. */
.laboratory-feature { background:linear-gradient(115deg,#172f91e8 0%,#164b9bd6 58%,#123779e6 100%); border-color:#43caff; box-shadow:inset 0 1px 0 #b5ecff70,inset 0 0 24px #43baff16,0 0 8px #25c9ff45,0 18px 44px #00143770; }
.laboratory-feature h2 { color:#fff; text-shadow:0 2px 14px #00195340; }
.laboratory-feature-copy>p,.laboratory-meta { color:#dceaff; }
.laboratory-meta>span+span { border-color:#92b6e580; }
.laboratory-feature .channel-badge { color:#173b76; background:linear-gradient(105deg,#fffbb1,#ffe06b); border:1px solid #fff4ae; box-shadow:0 0 18px #ffdd6b65,0 4px 12px #061a4a30; }
.laboratory-story-window { background:linear-gradient(115deg,#1d63a780,#08265b85); }
.laboratory-feature>.channel-primary { color:#143568; background:linear-gradient(110deg,#fff6ac 0%,#ffe66b 38%,#ffd454 72%,#ffe98a 100%); border-color:#fff5b6; box-shadow:inset 0 2px 5px #ffffede6,inset 0 -5px 10px #da9a2840,0 0 14px #ffe6719e,0 0 30px #ffcf534d,0 8px 20px #071a553d; }
.laboratory-feature>.channel-primary::after { background:radial-gradient(circle at 18% 72%,#ffffddc4 0 2px,transparent 3px),radial-gradient(circle at 78% 28%,#fffde4dc 0 3px,transparent 4px),radial-gradient(ellipse at 55% 95%,#fff5b28c,transparent 60%); }
.laboratory-feature>.channel-primary:hover,.laboratory-feature>.channel-primary:focus-visible { background:linear-gradient(110deg,#fffbc9,#ffec88 38%,#ffde68 72%,#fff0a4); box-shadow:inset 0 2px 6px #fff,inset 0 -5px 12px #dda62b3d,0 0 18px #ffea8ce6,0 0 38px #ffd75e99,0 0 60px #ffd6594d,0 10px 24px #071a554d; }

/* Draw v3: an inviting pearl oracle in a luminous ocean scene. */
html body[data-channel-home="draw"] { position:relative; isolation:isolate; background:linear-gradient(160deg,#e3f4ff,#eff0ff 58%,#f6fbff); }
body[data-channel-home="draw"]::before { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(0deg,#f4f9ff 0%,#edf5ff70 52%,transparent 85%),url('/assets/draw-sky-v3.b67788551c07.webp') center top/100% auto no-repeat; }
body[data-channel-home="draw"] .site-header { max-width:1440px; min-height:72px; border:0; border-radius:0 0 32px 32px; background:linear-gradient(110deg,#5484c8d9,#79b5f080); color:#fff; }
body[data-channel-home="draw"] .site-header .brand,body[data-channel-home="draw"] .main-nav a { color:#fff; }
body[data-channel-home="draw"] .main-nav a[aria-current="page"]::after { background:#a0f8ff; }
body[data-channel-home="draw"] .header-draw { background:#e5f4ff20; border-color:#d5f0ff70; color:#fff; }
.chance-home { max-width:1560px; padding:12px 40px 44px; }
.chance-home .breadcrumbs { margin-bottom:0; font-size:12px; }
.chance-sky { position:relative; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.8fr) minmax(110px,.35fr); gap:24px; min-height:376px; padding:28px 18px 42px; }
.chance-intro { align-self:center; }
.chance-intro .channel-kicker { color:#35598d; }
.chance-intro h1 { font:400 clamp(35px,3.5vw,52px)/1.35 'Ma Shan Zheng',var(--serif); text-shadow:0 2px 20px #ffffffd9; }
.chance-intro h1>span { display:inline-block; vertical-align:top; font-size:32px; color:#ffce66; margin-left:6px; }
.chance-intro>p:not(.channel-kicker) { font-size:21px; margin-top:14px; }
.chance-intro>span { font-size:14px; color:#466694; max-width:310px; }
.chance-oracle { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; min-height:318px; padding:20px 28px 20px 10px; border:2px solid #fff; border-radius:30px; background:linear-gradient(125deg,#ffffff96,#f1f2ffb8 58%,#dfeeffad); backdrop-filter:blur(5px); box-shadow:inset 0 1px 8px #fff,0 14px 38px #668dcc26,0 0 30px #ffffff70; }
.chance-pearl { position:relative; width:100%; height:272px; border-radius:0; mask-image:none; background:url('/assets/draw-shell-v3.9f8dfdf9cbd5.webp') center/contain no-repeat; filter:drop-shadow(0 0 18px #d0bbfb80); transition:transform .3s ease,filter .3s ease; }
.chance-oracle:hover .chance-pearl { transform:translateY(-4px) scale(1.025); filter:drop-shadow(0 0 24px #b7c9ffb3); }
.chance-oracle-copy { position:relative; z-index:1; }
.chance-oracle .channel-badge { padding:4px 12px; border-color:#ffffffcc; background:#ffffffa8; color:#3656a6; font-size:12px; }
.chance-oracle h2 { font-size:31px; margin-top:10px; color:#173e79; }
.chance-oracle #chance-oracle-description { margin-top:6px; font-size:14px; color:#4b68a0; }
.chance-result-wrap { display:flex; align-items:center; min-height:94px; margin:8px 0 10px; }
.chance-oracle #chance-result { font:400 23px/1.5 'Ma Shan Zheng',var(--serif); color:#6870ae; }
.chance-oracle.has-result #chance-result { font:500 15px/1.7 var(--sans); color:#254574; }
.chance-oracle.has-result .chance-result-wrap { padding-left:12px; border-left:2px solid #ac91e3; }
.chance-oracle .channel-primary { position:relative; isolation:isolate; overflow:hidden; min-height:58px; padding:13px 28px; margin:0; font-size:18px; color:#fff; background:linear-gradient(100deg,#28c4e8,#7289f3 55%,#bc7ae5); border:1px solid #edfcff; box-shadow:inset 0 2px 6px #e0ffffc9,inset 0 -3px 10px #5f64c340,0 0 18px #8cb7f98c,0 6px 22px #8c83df45; transition:transform .22s ease,box-shadow .22s ease; }
.chance-oracle .channel-primary::before { content:''; position:absolute; z-index:-1; width:120%; left:-10%; top:-60%; height:95%; border-radius:50%; transform:rotate(-8deg); background:linear-gradient(180deg,#fff9,#fff2); pointer-events:none; }
.chance-oracle .channel-primary:hover,.chance-oracle .channel-primary:focus-visible { transform:translateY(-2px); box-shadow:inset 0 2px 6px #fff,0 0 24px #91e5ffbd,0 0 42px #baa0ef75,0 8px 24px #8c83df59; }
.chance-oracle .channel-primary:disabled { cursor:wait; transform:none; }
.chance-result-link { display:block; width:fit-content; margin-top:10px; color:#5269a9; font-size:12px; }
.chance-result-link[hidden] { display:none; }
.chance-sky-note { align-self:end; padding-bottom:26px; color:#365b99; font:400 21px/1.7 'Ma Shan Zheng',var(--serif); transform:rotate(-8deg); }
.chance-shore { margin-inline:-12px; padding:30px 28px 24px; border:0; border-radius:46px 46px 24px 24px; background:linear-gradient(150deg,#f8fcfff5,#eef7fff0); box-shadow:0 -3px 0 #fff; }
.chance-shore::before { content:''; position:absolute; left:0; right:0; top:-16px; height:28px; z-index:-1; background:#f8fcff; clip-path:polygon(0 60%,10% 18%,24% 30%,38% 72%,52% 80%,69% 40%,84% 20%,95% 34%,100% 70%,100% 100%,0 100%); }
.chance-shore .channel-section-bar { margin-bottom:18px; }
.chance-shore .channel-section-bar h2 { font-size:27px; }
.chance-shore .channel-section-bar p { font-size:13px; color:#5576a5; }
.chance-grid { gap:16px; }
.chance-card { display:block; padding:0; text-align:left; font:inherit; color:#183e79; border:1px solid #d7e7ff; background:linear-gradient(155deg,#fff,#f9fcff); box-shadow:0 8px 24px #5689cc0a; }
.chance-card:hover,.chance-card:focus-visible { transform:translateY(-5px); border-color:#94c6f9; box-shadow:0 12px 26px #698ee329; }
.chance-card-art.draw-card-art { height:138px; border-radius:0 0 45% 8%; background:#dceeff; }
.chance-card-copy { position:relative; display:flex; flex-direction:column; padding:14px 40px 16px 15px; min-height:94px; }
.chance-card-copy>strong { font-size:17px; line-height:1.5; }
.chance-card-copy>span:not(.chance-arrow) { font-size:12px; line-height:1.7; color:#4d70a2; margin-top:4px; }
.chance-card .chance-arrow { display:grid; place-items:center; right:10px; top:18px; width:28px; height:28px; border:1px solid #c7dcff; border-radius:50%; color:#4368ba; }
.chance-grid .chance-card:first-child .draw-painted { background-image:url('/assets/draw-shell-v3.9f8dfdf9cbd5.webp'); background-size:contain; background-position:center; background-repeat:no-repeat; }
.chance-moods { margin-top:26px; }
.chance-mood-grid>button { display:flex; align-items:center; gap:12px; padding:14px 16px; min-height:84px; text-align:left; color:#183e79; border:1px solid #d7e7ff; background:#ffffffde; border-radius:18px; transition:transform .2s ease,box-shadow .2s ease; }
.chance-mood-grid>button:hover { transform:translateY(-3px); box-shadow:0 8px 20px #91a9d51c; }
.chance-mood-grid>button>span:nth-child(2) { display:flex; flex-direction:column; gap:4px; }
.chance-mood-grid strong { font-size:16px; line-height:1.5; }
.chance-mood-grid>button>span:nth-child(2)>span { font-size:12px; line-height:1.5; color:#4f709e; }
.chance-mood-grid>button>span:last-child { margin-left:auto; color:#6e7bd1; }
.chance-bottom-note { padding-top:24px; text-align:center; color:#6379a5; font:400 20px/1.6 'Ma Shan Zheng',var(--serif); }
.chance-oracle.is-drawing .chance-pearl { animation:pearl-reveal .65s ease both; }
.chance-oracle.is-drawing .chance-result-wrap { opacity:.7; }
@keyframes pearl-reveal { 0% { transform:scale(1); } 50% { transform:translateY(-6px) scale(1.07); filter:drop-shadow(0 0 28px #a8cfff); } 100% { transform:scale(1); } }
@media(max-width:1200px) { .chance-home { padding-inline:32px; }.chance-sky { grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr); gap:24px; padding-inline:0; }.chance-sky-note { display:none; }.chance-intro h1 { font-size:42px; }.chance-oracle { padding-right:22px; }.chance-pearl { height:260px; }.chance-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.chance-card-art.draw-card-art { height:140px; }.chance-shore .channel-section-bar { flex-direction:row; }.chance-note { display:none; } }
@media(max-width:800px) { body[data-channel-home="draw"]::before { background-size:auto 760px; background-position:65% top; }.chance-home { padding-inline:24px; }.chance-sky { grid-template-columns:1fr; gap:20px; padding:26px 0 36px; }.chance-intro { text-align:center; }.chance-intro>span { margin-inline:auto; }.chance-oracle { max-width:640px; min-height:320px; padding:18px 28px 18px 12px; }.chance-intro h1 { font-size:46px; }.chance-pearl { height:278px; }.chance-shore .channel-section-bar { align-items:flex-start; flex-direction:column; }.chance-shore { padding:28px 20px; } }
@media(max-width:520px) { body[data-channel-home="draw"] .site-header { border-radius:0 0 22px 22px; }.chance-home { padding:10px 18px 32px; }.chance-sky { padding-top:22px; }.chance-intro h1 { font-size:39px; }.chance-intro h1>span { font-size:25px; }.chance-intro>p:not(.channel-kicker) { font-size:19px; margin-top:8px; }.chance-intro>span { font-size:13px; margin-top:8px; }.chance-oracle { grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); gap:0; min-height:300px; padding:18px 16px 18px 4px; border-radius:25px; }.chance-pearl { height:220px; }.chance-oracle h2 { font-size:27px; }.chance-oracle #chance-oracle-description { font-size:13px; }.chance-oracle #chance-result { font-size:21px; }.chance-oracle.has-result #chance-result { font-size:14px; }.chance-result-wrap { min-height:102px; }.chance-oracle .channel-primary { font-size:15px; min-height:52px; gap:8px; padding:10px 18px; }.chance-oracle .channel-primary svg { width:18px; }.chance-shore { margin-inline:-4px; padding:25px 14px 20px; border-radius:30px 30px 20px 20px; }.chance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.chance-card-art.draw-card-art { height:110px; }.chance-card-copy { padding:12px 12px 14px; min-height:88px; }.chance-card-copy>strong { font-size:16px; }.chance-card .chance-arrow { display:none; }.chance-mood-grid { grid-template-columns:1fr; gap:12px; }.chance-shore .channel-section-bar>div:first-child { gap:6px; align-items:flex-start; flex-direction:column; }.chance-bottom-note { font-size:18px; } }
@media(prefers-reduced-motion:reduce) { .chance-pearl,.chance-card,.chance-mood-grid>button,.chance-oracle .channel-primary { transition:none; }.chance-oracle.is-drawing .chance-pearl { animation:none; }.chance-oracle:hover .chance-pearl,.chance-card:hover,.chance-mood-grid>button:hover,.chance-oracle .channel-primary:hover { transform:none; } }
body[data-channel-home="draw"] .site-header .main-nav a { color:#fff; }
body[data-channel-home="draw"] .site-header .main-nav a[aria-current="page"]::after { background:#a0f8ff; }
body[data-channel-home="draw"] .site-header .header-draw { background:#e5f4ff20; border-color:#d5f0ff70; color:#fff; }

/* Shared sea rhythm: buoyancy, rising bubbles, and gentle water resistance. */
:root { --sea-ease:cubic-bezier(.22,.61,.36,1); --sea-response:240ms; --sea-float:8s; --sea-lift:4px; }
.reading-home { --sea-float:12s; --sea-lift:2px; }
.channel-home { position:relative; isolation:isolate; }
.channel-sea-motion { position:absolute; inset:0; z-index:2; overflow:hidden; border-radius:28px; pointer-events:none; }
.channel-sea-motion i { position:absolute; top:min(90vh,760px); left:var(--x); width:var(--size); height:var(--size); border:1px solid #7dcce7; border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff9,transparent 50%); box-shadow:inset 0 0 3px #fff8; animation:sea-bubble-rise var(--rise) linear var(--phase) infinite; opacity:0; }
.channel-caustics { position:absolute; top:0; left:-10%; width:120%; height:440px; background:repeating-conic-gradient(from 160deg at 50% -20%,transparent 0deg 12deg,#b4eaff12 14deg 20deg,transparent 23deg 32deg); mask-image:linear-gradient(#000,transparent); animation:sea-light-sway 18s ease-in-out infinite alternate; }
.reading-home .channel-sea-motion { opacity:.45; }
.laboratory-home .channel-sea-motion i { border-color:#b9f4ff; }
:is(.discovery-card,.reading-card,.laboratory-card,.chance-card,.discovery-aside,.laboratory-feature,.chance-oracle) { animation:sea-buoyancy var(--sea-float) ease-in-out infinite; transition:transform var(--sea-response) var(--sea-ease),box-shadow var(--sea-response) var(--sea-ease),border-color var(--sea-response) ease; }
:is(.discovery-card,.reading-card,.laboratory-card,.chance-card):nth-child(3n+1) { animation-delay:-2.7s; }
:is(.discovery-card,.reading-card,.laboratory-card,.chance-card):nth-child(3n+2) { animation-delay:-5.3s; }
:is(.discovery-card,.reading-card,.laboratory-card,.chance-card,.discovery-aside,.laboratory-feature,.chance-oracle):is(:hover,:focus-within) { animation-play-state:paused; }
:is(.discovery-card,.reading-card,.laboratory-card,.chance-card)::after { content:''; position:absolute; right:14px; bottom:18px; width:7px; height:7px; border:1px solid #80c5e6a6; border-radius:50%; box-shadow:9px -18px 0 -1px #b4eaff66; pointer-events:none; animation:sea-card-bubble 6s ease-in-out infinite; }
.discovery-fish { animation:sea-buoyancy 7s ease-in-out -2s infinite; }
:is(.discovery-fish>svg,.laboratory-castle,.reading-room-note svg) { animation:sea-fin-sway 9s ease-in-out infinite; }
.chance-oracle:not(.is-drawing) .chance-pearl { animation:sea-buoyancy 9s ease-in-out -3s infinite; }
.chance-oracle.is-drawing .chance-pearl { animation:pearl-reveal .65s ease both; }
:is(button,.button,.channel-primary,.main-nav a,.content-card,.channel-card,.ocean-card) { transition:transform var(--sea-response) var(--sea-ease),background-color var(--sea-response) ease,color var(--sea-response) ease,box-shadow var(--sea-response) ease,border-color var(--sea-response) ease; }
:is(button,.button,.channel-primary):active:not(:disabled) { transform:translateY(1px) scale(.975); }
.main-nav a:hover { transform:translateY(-2px); }
:is(.discovery-card,.reading-card,.laboratory-card.is-live,.chance-card):active { transform:scale(.985); }
#editorial-cards,#play-games,.discovery-bubble,.draw-result { animation:sea-content-arrive 400ms var(--sea-ease) both; }
#main { view-transition-name:sea-page; }
::view-transition-old(root) { animation:sea-page-out 180ms ease both; }
::view-transition-new(root) { animation:sea-page-in 420ms var(--sea-ease) both; }
::view-transition-old(sea-page) { animation:sea-page-out 160ms ease both; }
::view-transition-new(sea-page) { animation:sea-content-arrive 420ms var(--sea-ease) both; }
@keyframes sea-buoyancy { 0%,100% { translate:0 0; } 50% { translate:0 calc(-1 * var(--sea-lift,4px)); } }
@keyframes sea-bubble-rise { 0% { transform:translate(0,0); opacity:0; } 12% { opacity:.5; } 45% { transform:translate(var(--drift),-45vh); } 85% { opacity:.35; } 100% { transform:translate(0,-110vh); opacity:0; } }
@keyframes sea-card-bubble { 0%,100% { translate:0 0; opacity:0; } 25% { opacity:.6; } 75% { translate:5px -42px; opacity:0; } }
@keyframes sea-light-sway { from { transform:translateX(-2%) rotate(-3deg); opacity:.35; } to { transform:translateX(2%) rotate(3deg); opacity:.85; } }
@keyframes sea-fin-sway { 0%,100% { rotate:-2deg; } 50% { rotate:2deg; } }
@keyframes sea-content-arrive { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes sea-page-out { to { opacity:0; } }
@keyframes sea-page-in { from { opacity:0; } to { opacity:1; } }
@media (hover:hover) and (pointer:fine) {
  :root { --fish-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M24 15l6-6v14l-6-5' fill='%23ffd779' stroke='%231b527b' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M3 15Q9 4 21 10Q30 16 21 22Q9 28 3 15Z' fill='%238ce3f0' stroke='%231b527b' stroke-width='1.3'/%3E%3Cpath d='m14 10 4-5 3 6M13 22l5 4 3-5' fill='%23ffd779' stroke='%231b527b' stroke-width='1'/%3E%3Ccircle cx='9' cy='14' r='2' fill='%23143761'/%3E%3Ccircle cx='8.5' cy='13.5' r='.65' fill='white'/%3E%3Cpath d='m16 15 4 2-4 2' fill='%23fff5c9'/%3E%3C/svg%3E") 3 15; }
  body { cursor:var(--fish-cursor),auto; }
  a,button,[role="button"],summary { cursor:var(--fish-cursor),pointer; }
  input,textarea,[contenteditable="true"],.article-body,.story-copy { cursor:text; }
  :disabled,[aria-disabled="true"] { cursor:not-allowed; }
  [aria-busy="true"] { cursor:progress; }
}
@media(max-width:800px) { .channel-sea-motion i:nth-child(n+7) { display:none; } .channel-caustics { height:320px; } .channel-home { --sea-lift:2px; } }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .channel-sea-motion { display:none; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none!important; }
}

/* Welcome reminder above the home entry cards. */
.ocean-notice { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:22px; margin-top:28px; padding:20px 24px; border:1px solid #8cecffb3; border-radius:22px; color:#eefaff; background:linear-gradient(115deg,#07529bde,#137fbbba 70%,#095497de); box-shadow:inset 0 1px 0 #d9faff70,inset 0 0 22px #55dfff24,0 6px 20px #002e5b30; backdrop-filter:blur(8px); }
.ocean-notice-heading { display:flex; align-items:center; gap:16px; }
.ocean-notice-speaker { flex:0 0 54px; width:54px; height:58px; filter:drop-shadow(0 3px 6px #002e5b50); }
.ocean-notice-label { display:inline-block; padding:4px 13px; border-radius:20px; background:linear-gradient(110deg,#28baf0,#238ff0); box-shadow:0 0 12px #66ddff50; font-size:12px; font-weight:600; letter-spacing:.06em; }
.ocean-notice h2 { margin:8px 0 0; font-family:'Ma Shan Zheng','Noto Serif SC',serif; font-size:25px; font-weight:400; line-height:1.4; white-space:nowrap; }
.ocean-notice h2 span { margin-left:5px; color:#ffa2d5; font-family:sans-serif; font-size:19px; }
.ocean-notice-copy { margin:0; padding-left:22px; border-left:1px solid #a5e8ff70; color:#d4ecff; font-size:13px; line-height:1.9; }
.ocean-notice-return { display:flex; align-items:center; gap:10px; padding:10px 15px; border:1px solid #98e4ff80; border-radius:28px; color:#d9f2ff; font-size:12px; font-weight:600; line-height:1.6; }
.ocean-notice-return span { font-size:28px; line-height:1; }
.ocean-notice + .ocean-cards { margin-top:18px; }
@media(max-width:1180px) { .ocean-notice { grid-template-columns:auto minmax(0,1fr); gap:18px; }.ocean-notice-return { grid-column:2; justify-self:start; }.ocean-notice-heading { grid-row:1 / 3; }.ocean-notice-break { display:none; } }
@media(max-width:650px) { .ocean-notice { grid-template-columns:minmax(0,1fr); gap:16px; margin-top:24px; padding:20px; border-radius:18px; }.ocean-notice-heading { grid-row:auto; gap:12px; }.ocean-notice-speaker { flex-basis:44px; width:44px; height:48px; }.ocean-notice h2 { font-size:23px; white-space:normal; }.ocean-notice-copy { border-left:0; border-top:1px solid #a5e8ff50; padding:14px 0 0; font-size:13px; }.ocean-notice-return { grid-column:auto; justify-self:start; font-size:11px; padding:9px 12px; }.ocean-notice + .ocean-cards { margin-top:18px; } }