:root {
  --ink: #0b0907;
  --ink-2: #100d09;
  --panel: #15110c;
  --panel-2: #1b160f;
  --gold: #b99550;
  --gold-bright: #d7bc7a;
  --gold-dark: #5c4828;
  --paper: #e4d2a6;
  --cream: #f1e7cf;
  --muted: #a99c82;
  --line: rgba(185,149,80,.36);
  --blue: #789fac;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: Inter, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.site-header { position: fixed; z-index: 20; inset: 0 0 auto; height: 78px; padding: 0 clamp(24px,5vw,84px); display: flex; align-items: center; gap: 44px; border-bottom: 1px solid rgba(185,149,80,.23); background: linear-gradient(#0b0907ed,#0b0907bc); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: baseline; gap: 14px; margin-right: auto; }
.brand span { color: var(--gold-bright); font: 600 20px/1 Cinzel, serif; letter-spacing: .28em; }
.brand small { color: #84765e; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
nav { display: flex; gap: 32px; color: #b8ad96; font-size: 14px; }
nav a:hover { color: var(--cream); }
.button { display: inline-flex; gap: 16px; align-items: center; justify-content: center; padding: 15px 22px; color: var(--cream); border: 1px solid var(--gold); background: rgba(101,73,31,.26); text-transform: uppercase; letter-spacing: .13em; font-size: 14px; transition: .25s ease; }
.button:hover { background: var(--gold); color: #100c07; }
.button-small { padding: 11px 16px; font-size: 10px; }
.hero { position: relative; min-height: 100vh; display: grid; align-items: center; overflow: hidden; padding: 130px clamp(24px,8vw,150px) 100px; }
.hero-image, .hero-shade { position: absolute; inset: 0; }
.hero-image { background: url('assets/orb-beach.png') center/cover no-repeat; filter: sepia(.08) contrast(1.07) brightness(.72); transform: scale(1.01); }
.hero-shade { background: linear-gradient(90deg, rgba(8,6,4,.94) 0%, rgba(8,6,4,.64) 43%, rgba(8,6,4,.17) 74%), linear-gradient(0deg, #0b0907 0%, transparent 22%, rgba(0,0,0,.2) 100%); }
.hero-copy { position: relative; z-index: 2; max-width: 790px; }
.eyebrow, .panel-label { margin: 0 0 22px; color: var(--gold); font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
h1,h2,h3 { font-family: 'Libre Baskerville', Georgia, serif; font-weight: 400; }
h1 { margin: 0; color: var(--cream); font-size: clamp(52px,6.4vw,104px); line-height: 1.01; letter-spacing: -.045em; text-shadow: 0 4px 40px #000; }
.hero-intro { max-width: 650px; margin: 30px 0 34px; color: #d2c4a7; font: 400 clamp(16px,1.4vw,20px)/1.75 'Libre Baskerville', serif; }
.hero-actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.text-link { color: #cabd9f; font-size: 14px; letter-spacing: .08em; border-bottom: 1px solid #6d5a35; padding: 10px 0; }
.hero-command { position: absolute; z-index: 2; right: 5vw; bottom: 11vh; width: min(420px,32vw); padding: 17px 20px; display: flex; align-items: center; gap: 12px; color: #d8c9a7; background: rgba(10,8,5,.79); border: 1px solid var(--line); box-shadow: 0 22px 70px #0008; font: 13px/1.4 ui-monospace, monospace; }
.hero-command > span:first-child { color: var(--gold); }
.hero-command i { display: block; width: 7px; height: 16px; background: var(--gold); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.scroll-cue { position: absolute; z-index: 2; left: 42px; bottom: 45px; color: #75684e; font-size: 8px; letter-spacing: .28em; writing-mode: vertical-rl; }
.section { padding: 120px clamp(20px,5vw,80px); }
.experience { position: relative; background: radial-gradient(circle at 50% 20%, #1d170e 0, var(--ink) 47%); }
.experience:before { content: ''; position: absolute; inset: 0; opacity: .055; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.section-heading { position: relative; max-width: 760px; margin: 0 auto 62px; }
.centered { text-align: center; }
.section-heading h2 { margin: 0 0 20px; color: var(--cream); font-size: clamp(36px,4vw,60px); line-height: 1.13; }
.section-heading > p:last-child { color: var(--muted); font: 16px/1.8 'Libre Baskerville', serif; }
.demo-shell { position: relative; max-width: 1400px; margin: auto; border: 1px solid var(--gold-dark); background: #0d0b08; box-shadow: 0 38px 100px #000b; }
.demo-topbar { min-height: 60px; padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gold-dark); }
.demo-topbar > div { display: grid; grid-template-columns: 34px auto; column-gap: 10px; align-items: center; }
.demo-topbar strong { color: var(--gold-bright); font: 11px Cinzel,serif; letter-spacing: .16em; }
.demo-topbar small { grid-column: 2; color: #71654f; font-size: 9px; }
.demo-mark { grid-row: 1/3; display: grid; place-items: center; width: 32px; aspect-ratio: 1; color: var(--gold-bright); border: 1px solid var(--gold-dark); font-family: Cinzel,serif; }
.art-toggle { color: #c9b98f; padding: 9px 12px; border: 1px solid var(--gold-dark); background: #19140e; cursor: pointer; font-size: 10px; }
.art-toggle span { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #99aa79; box-shadow: 0 0 8px #9caf7c; }
.demo-grid { display: grid; grid-template-columns: minmax(0,1.28fr) minmax(360px,.8fr) 280px; min-height: 510px; }
.demo-art { position: relative; min-height: 460px; margin: 0; overflow: hidden; border-right: 1px solid var(--gold-dark); transition: .35s ease; }
.demo-art img { width: 100%; height: 100%; object-fit: cover; }
.demo-art figcaption { position: absolute; inset: auto 0 0; padding: 32px 22px 18px; color: var(--cream); background: linear-gradient(transparent,#080604e8); font: 18px 'Libre Baskerville',serif; }
.demo-shell.art-off .demo-grid { grid-template-columns: 0 minmax(0,1fr) 280px; }
.demo-shell.art-off .demo-art { opacity: 0; min-width: 0; border: 0; }
.demo-shell.art-off .art-toggle span { background: #665e51; box-shadow: none; }
.demo-story, .event-panel { padding: 28px; }
.demo-story { display: flex; flex-direction: column; min-width: 0; }
.panel-label { margin-bottom: 16px; font-size: 8px; }
.demo-story h3, .event-panel h3 { margin: 0 0 22px; color: var(--cream); font-size: 23px; }
.story-output { min-height: 210px; color: #cbbd9e; font: 16px/1.75 'Libre Baskerville',serif; }
.story-output .command-echo { color: var(--gold); font-family: ui-monospace,monospace; }
.story-output .success { color: #dfd4b7; }
.suggestions { margin-top: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: #6f6555; font-size: 9px; }
.suggestions button { color: #aa9871; border: 1px solid #3f3320; background: transparent; padding: 6px 8px; cursor: pointer; font-size: 9px; }
.suggestions button:hover { border-color: var(--gold); color: var(--cream); }
.command-line { margin-top: 14px; display: flex; align-items: center; border: 1px solid var(--gold-dark); background: #070604; }
.command-line label { padding-left: 13px; color: var(--gold); }
.command-line input { width: 100%; padding: 13px 10px; color: var(--cream); border: 0; outline: 0; background: transparent; font: 12px ui-monospace,monospace; }
.command-line button { align-self: stretch; padding: 0 12px; border: 0; color: #74684f; background: transparent; font-size: 9px; text-transform: uppercase; }
.event-panel { border-left: 1px solid var(--gold-dark); background: #120f0b; }
.event-panel ol { list-style: none; padding: 0; margin: 0; }
.event-panel li { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 12px 0 20px; opacity: .38; transition: .4s ease; }
.event-panel li:not(:last-child):after { content: ''; position: absolute; top: 39px; bottom: -2px; left: 13px; border-left: 1px solid #4b3e28; }
.event-panel li > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #4b3e28; color: #8a7550; font-size: 8px; }
.event-panel li small { display: block; color: #786b53; text-transform: uppercase; letter-spacing: .16em; font-size: 7px; }
.event-panel li strong { color: #c4b590; font: 10px/1.6 Inter,sans-serif; }
.event-panel li.active { opacity: 1; }
.event-panel li.active > span { color: #151008; background: var(--gold-bright); box-shadow: 0 0 20px #b9955044; }
.event-note { margin-top: 28px; color: #776c58; font: italic 10px/1.6 'Libre Baskerville',serif; }
@media (max-width: 1000px) { nav { display:none; } .hero-command { display:none; } .demo-grid { grid-template-columns: 1fr 1fr; } .event-panel { grid-column: 1/-1; border-left:0; border-top: 1px solid var(--gold-dark); } .event-panel ol { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .event-panel li:after { display:none; } }
@media (max-width: 700px) { .site-header { height:68px; padding:0 16px; } .brand small { display:none; } .site-header .button { display:none; } .hero { padding:120px 22px 80px; min-height:92vh; } h1 { font-size:48px; } .hero-shade { background: linear-gradient(90deg,rgba(8,6,4,.93),rgba(8,6,4,.45)),linear-gradient(0deg,#0b0907,transparent 40%); } .section { padding:84px 14px; } .demo-grid,.demo-shell.art-off .demo-grid { display:block; } .demo-art { min-height:250px; height:250px; border-right:0; border-bottom:1px solid var(--gold-dark); } .demo-shell.art-off .demo-art { display:none; } .event-panel ol { display:block; } }

.actual-play { position:relative; background:#0d0a07; }
.actual-heading { max-width:1400px; margin:0 auto 55px; display:grid; grid-template-columns:1fr .75fr; gap:10vw; align-items:end; }
.actual-heading h2 { margin:0; color:var(--cream); font-size:clamp(42px,5vw,72px); line-height:1.06; }
.actual-heading > p { color:var(--muted); font:14px/1.85 'Libre Baskerville',serif; }
.actual-frame { max-width:1500px; margin:auto; padding:12px; border:1px solid var(--gold-dark); background:#080604; box-shadow:0 45px 100px #000b; }
.actual-bar { min-height:42px; padding:0 8px 12px; display:flex; align-items:center; gap:15px; color:#6e6350; font-size:8px; letter-spacing:.12em; text-transform:uppercase; }
.actual-bar span { color:var(--gold-bright); font-family:Cinzel,serif; }.actual-bar small { margin-right:auto; color:#75694f; }.actual-bar i { font:italic 8px 'Libre Baskerville',serif; text-transform:none; letter-spacing:0; }
.actual-switch { display:flex; gap:4px; margin-right:15px; }
.actual-switch button { padding:7px 10px; color:#7b705b; border:1px solid #3d3020; background:#0b0906; cursor:pointer; font-size:7px; letter-spacing:.12em; text-transform:uppercase; }
.actual-switch button.active { color:#171008; border-color:var(--gold); background:var(--gold-bright); }
.actual-screen { position:relative; overflow:hidden; border:1px solid #352918; }
.actual-screen[hidden] { display:none; }
.actual-screen > img { display:block; width:100%; filter:saturate(.9) brightness(.84); transition:.3s ease; }
.actual-screen:hover > img { filter:saturate(1) brightness(.92); }
.actual-pin { position:absolute; z-index:2; display:flex; align-items:center; gap:8px; padding:8px 10px; color:#d3c39e; border:1px solid #84683a; background:#080604e8; box-shadow:0 8px 22px #000c; font-size:8px; backdrop-filter:blur(8px); }
.actual-pin b { display:grid; place-items:center; width:22px; height:22px; color:#161007; border-radius:50%; background:var(--gold-bright); font:7px Cinzel,serif; }
.pin-art { left:2%; top:4%; }.pin-prose { left:58%; top:4%; }.pin-state { right:2%; top:40%; }.pin-history { left:2%; bottom:4%; }
.actual-frame figcaption { display:flex; justify-content:center; gap:4vw; padding:17px 10px 6px; color:#796d56; font-size:8px; letter-spacing:.12em; text-transform:uppercase; }
.actual-frame figcaption span:before { content:'◈'; margin-right:8px; color:var(--gold); }
.systems { background: linear-gradient(180deg,#0b0907,#12100b 45%,#0b0907); }
.systems-heading { max-width: 1400px; margin: 0 auto 55px; display:grid; grid-template-columns:1fr .75fr; gap:10vw; align-items:end; }
.systems-heading h2 { margin:0; color:var(--cream); font-size:clamp(42px,5vw,72px); line-height:1.05; }
.systems-heading > p { color:var(--muted); font:14px/1.85 'Libre Baskerville',serif; }
.systems-showcase { max-width:1400px; margin:auto; border:1px solid var(--gold-dark); background:#0c0a07; box-shadow:0 35px 100px #000a; }
.system-tabs { min-height:66px; display:grid; grid-template-columns:repeat(6,1fr); border-bottom:1px solid var(--gold-dark); }
.system-tabs button { position:relative; padding:0 22px; color:#82765f; border:0; border-right:1px solid #302516; background:#0e0b08; cursor:pointer; text-align:left; text-transform:uppercase; letter-spacing:.13em; font-size:9px; }
.system-tabs button:last-child { border-right:0; }
.system-tabs button span { margin-right:12px; color:#4f422d; font-family:Cinzel,serif; }
.system-tabs button.active { color:var(--gold-bright); background:#18130d; }
.system-tabs button.active:after { content:''; position:absolute; inset:auto 18px -1px; height:2px; background:var(--gold); box-shadow:0 0 14px #b99550; }
.system-tabs button.active span { color:var(--gold); }
.system-stage { min-height:590px; }
.system-panel { min-height:590px; display:grid; grid-template-columns:minmax(420px,.9fr) minmax(440px,1.1fr); }
.system-panel[hidden] { display:none; }
.system-narrative { padding:60px clamp(35px,5vw,75px); border-left:1px solid var(--gold-dark); }
.system-narrative h3 { max-width:650px; margin:0 0 23px; color:var(--cream); font-size:clamp(28px,3vw,43px); line-height:1.18; }
.system-narrative > p:not(.panel-label) { color:#a99c83; font:16px/1.85 'Libre Baskerville',serif; }
.system-narrative blockquote { margin:32px 0 0; padding:14px 0 14px 24px; color:#c9b78f; border-left:1px solid var(--gold); font:italic 13px/1.75 'Libre Baskerville',serif; }
.npc-portrait { position:relative; display:grid; place-items:end center; overflow:hidden; background:radial-gradient(circle at 50% 55%,#292218,#0a0806 66%); }
.npc-portrait:before { content:''; position:absolute; inset:8%; border:1px solid #3b2e1c; }
.npc-portrait img { position:relative; z-index:1; width:min(90%,530px); max-height:550px; object-fit:contain; }
.npc-portrait > span { position:absolute; z-index:2; inset:auto 0 0; padding:38px 25px 22px; color:var(--cream); background:linear-gradient(transparent,#090705); text-align:center; font:17px 'Libre Baskerville',serif; }
.dialogue-sample { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:25px; }
.dialogue-sample small { width:100%; margin-bottom:4px; color:#74684f; font-size:8px; letter-spacing:.16em; text-transform:uppercase; }
.topic { padding:9px 10px; color:#b7a57f; border:1px solid #4b3a22; background:#17120d; cursor:pointer; font-size:9px; }
.topic.active { color:#171008; border-color:var(--gold); background:var(--gold-bright); }
.topic.locked { color:#514a3e; border-color:#29231b; }
.combat-art { position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; padding:85px 20px 0; background:radial-gradient(circle at 50% 75%,#473923,#17120c 48%,#080604 75%); }
.combat-art:after { content:''; position:absolute; inset:auto 0 0; height:30%; background:linear-gradient(transparent,#080604); }
.combat-art img { position:relative; z-index:1; width:100%; max-height:500px; object-fit:contain; filter:drop-shadow(0 25px 25px #000); }
.health-label { position:absolute; z-index:2; top:32px; left:34px; right:34px; display:flex; justify-content:space-between; color:#cdbd99; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.health-label b { color:#8e7a54; font-weight:500; }
.health-bar { position:absolute; z-index:2; top:55px; left:34px; right:34px; height:5px; background:#251d12; }
.health-bar i { display:block; width:75%; height:100%; background:linear-gradient(90deg,#8b6b37,#cfad65); box-shadow:0 0 9px #b9955066; }
.combat-log { margin-top:25px; padding:15px 17px; color:#aaa087; border:1px solid #352b1c; background:#090705; font:10px/1.6 ui-monospace,monospace; }
.combat-log p { margin:4px 0; }
.combat-log span { color:var(--gold); }
.combat-log .enemy { color:#c7a96d; }
.mini-tags { display:flex; gap:7px; flex-wrap:wrap; list-style:none; margin:18px 0 0; padding:0; }
.mini-tags li { padding:6px 8px; color:#837354; border:1px solid #3b3020; font-size:7px; letter-spacing:.11em; text-transform:uppercase; }
.spell-visual { position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at center,#182c35 0,#101a1e 25%,#0a0907 66%); }
.spell-ring { display:grid; place-items:center; width:260px; height:260px; color:#b9d9dd; border:1px solid #668c935c; border-radius:50%; box-shadow:0 0 45px #6ca7af26,inset 0 0 40px #6ca7af18; animation:pulse 3s ease-in-out infinite; }
.spell-ring:before,.spell-ring:after { content:''; position:absolute; width:205px; height:205px; border:1px dashed #8bbac25c; border-radius:50%; animation:spin 18s linear infinite; }
.spell-ring:after { width:310px; height:310px; animation-direction:reverse; }
.spell-ring span { font-size:78px; text-shadow:0 0 30px #9dd4dc; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 50% { box-shadow:0 0 75px #6ca7af44,inset 0 0 55px #6ca7af26; } }
.spell-card { position:absolute; padding:13px 16px; min-width:155px; border:1px solid #52727a; background:#0b1113d9; box-shadow:0 10px 30px #0008; }
.spell-card.primary { left:8%; bottom:13%; }.spell-card.secondary { right:8%; top:14%; }
.spell-card small,.spell-card span { display:block; color:#687f82; font-size:7px; letter-spacing:.13em; text-transform:uppercase; }
.spell-card strong { display:block; margin:5px 0; color:#c3d9d7; font:16px 'Libre Baskerville',serif; }
.spell-flow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:28px; }
.spell-flow span { padding:8px 9px; color:#95adb0; border:1px solid #3a555b; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }.spell-flow i { color:#53727a; font-style:normal; }
.puzzle-art { position:relative; overflow:hidden; background:#080604; }
.puzzle-art img { width:100%; height:100%; object-fit:cover; filter:brightness(.64) sepia(.15); }
.puzzle-art:after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#090705 0,transparent 55%); }
.sequence { position:absolute; z-index:1; left:50%; bottom:44px; transform:translateX(-50%); display:flex; align-items:center; gap:14px; padding:13px 18px; border:1px solid #64502e; background:#090705da; }
.sequence span { display:grid; place-items:center; width:38px; height:38px; color:#5f5542; border:1px solid #403522; }.sequence span.solved { color:#171008; border-color:var(--gold); background:var(--gold-bright); }.sequence i { color:#6f5c3a; font-style:normal; }
.clue-list { margin-top:25px; border-top:1px solid #302719; }
.clue-list div { display:flex; gap:16px; padding:13px 0; border-bottom:1px solid #302719; }
.clue-list span { min-width:50px; color:#a38b5c; font-size:7px; letter-spacing:.13em; text-transform:uppercase; }.clue-list strong { color:#a99d84; font:10px 'Libre Baskerville',serif; }.clue-list .pending { opacity:.42; }
.event-web { padding:55px; display:flex; flex-direction:column; justify-content:center; background:radial-gradient(circle at center,#1d170d,#090705 68%); }
.event-web div { position:relative; padding:18px 20px; border:1px solid #5c4828; background:#110d08; }
.event-web div:before { content:''; position:absolute; top:-1px; left:-1px; width:4px; height:calc(100% + 2px); background:var(--gold); }
.event-web small { display:block; margin-bottom:6px; color:#766447; font-size:7px; letter-spacing:.16em; text-transform:uppercase; }.event-web strong { color:#c2b18c; font:12px/1.7 'Libre Baskerville',serif; }
.event-web > i { height:42px; margin-left:35px; border-left:1px solid #5c4828; }
.event-web .event-result { background:#1c160d; box-shadow:0 0 35px #b9955015; }
.crafting-visual { padding:55px; display:flex; flex-direction:column; justify-content:center; gap:0; background:radial-gradient(circle at center,#25200f,#090705 68%); }
.crafting-visual div { padding:18px 20px; border:1px solid #5c4828; background:#110d08; }
.crafting-visual small,.crafting-visual span { display:block; color:#766447; font-size:7px; letter-spacing:.16em; text-transform:uppercase; }
.crafting-visual strong { display:block; margin-top:7px; color:#c2b18c; font:15px 'Libre Baskerville',serif; }
.crafting-visual > i { height:38px; margin-left:35px; border-left:1px solid #5c4828; font-size:0; }
.crafting-visual .crafting-result { background:#1c160d; box-shadow:0 0 35px #b9955022; }
.crafting-visual .crafting-result span { margin-top:8px; color:#b6924d; }
.event-actions { columns:2; padding:0; margin:25px 0 0; list-style:none; }.event-actions li { margin:0 0 12px; color:#9f927a; font-size:9px; }.event-actions li:before { content:'◈'; margin-right:8px; color:var(--gold); }
.system-footnote { margin:0; padding:16px 25px; color:#695f4f; border-top:1px solid var(--gold-dark); background:#090705; text-align:center; font:italic 9px 'Libre Baskerville',serif; }.system-footnote span { margin-right:8px; color:var(--gold); }
.adventures { overflow: hidden; background: #0d0a07; }
.split-heading { max-width: 1400px; margin: 0 auto 70px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 10vw; align-items: end; }
.split-heading h2, .create-intro h2, .room-copy h2, .trial h2 { margin: 0; color: var(--cream); font-size: clamp(40px,5.1vw,75px); line-height: 1.07; letter-spacing: -.035em; }
.split-heading > p { color: var(--muted); font: 14px/1.85 'Libre Baskerville',serif; }
.orb-feature { position: relative; max-width: 1400px; min-height: 660px; margin: auto; overflow: hidden; border: 1px solid var(--gold-dark); }
.orb-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.orb-feature:after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, transparent 22%,rgba(9,7,5,.24) 42%,rgba(9,7,5,.96) 72%); }
.orb-copy { position: relative; z-index: 1; width: 44%; margin-left: auto; padding: 100px 7% 80px 4%; }
.orb-copy h3 { margin: 0 0 25px; color: var(--cream); font-size: clamp(42px,5vw,70px); }
.orb-copy > p:not(.eyebrow) { color:#c1b398; font: 14px/1.9 'Libre Baskerville',serif; }
.tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:28px 0 34px; }
.tags li { padding:7px 10px; color:#a9966e; border:1px solid #4d3d24; font-size:8px; letter-spacing:.12em; text-transform:uppercase; }
.ghost-button { padding:12px 0; color:var(--gold-bright); border:0; border-bottom:1px solid var(--gold-dark); background:none; font-size:10px; letter-spacing:.13em; text-transform:uppercase; cursor:pointer; }
.ghost-button span { margin-left:15px; }
.treasure-heading { max-width:1400px; margin:120px auto 38px; display:flex; gap:40px; justify-content:space-between; align-items:end; }
.treasure-heading h3 { margin:0; color:var(--cream); font-size:40px; }
.treasure-heading > p { max-width:560px; margin:0; color:var(--muted); font:13px/1.8 'Libre Baskerville',serif; }
.treasure-grid { max-width:1400px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.adventure-card { border:1px solid var(--gold-dark); background:#120f0b; transition:.35s ease; }
.adventure-card:hover { transform:translateY(-5px); border-color:#9a7840; box-shadow:0 30px 60px #0008; }
.card-image { position:relative; aspect-ratio:16/9; overflow:hidden; }
.card-image:after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#120f0b,transparent 44%); }
.card-image img { width:100%; height:100%; object-fit:cover; transition:.6s ease; }
.adventure-card:hover img { transform:scale(1.025); }
.card-image span { position:absolute; z-index:1; top:18px; right:18px; padding:9px 11px; color:var(--gold-bright); border:1px solid #9a7840; background:#090705b8; font:10px Cinzel,serif; }
.card-copy { padding:4px 32px 34px; }
.card-copy small { color:var(--gold); font-size:8px; letter-spacing:.2em; text-transform:uppercase; }
.card-copy h3 { margin:8px 0 13px; color:var(--cream); font-size:29px; }
.card-copy p { margin:0; color:#9f947f; font:12px/1.8 'Libre Baskerville',serif; }
.create { position:relative; background:linear-gradient(180deg,#0b0907,#12100c 60%,#0b0907); }
.create-intro { max-width:850px; margin:0 auto 70px; text-align:center; }
.create-intro > p:last-child { max-width:680px; margin:28px auto 0; color:var(--muted); font:14px/1.9 'Libre Baskerville',serif; }
.builder-frame { position:relative; max-width:1350px; margin:auto; padding:16px; border:1px solid #584528; background:#080604; box-shadow:0 55px 110px #000; }
.builder-caption { height:45px; display:flex; align-items:center; gap:16px; padding:0 4px 12px; }
.builder-caption span { color:var(--gold-bright); font:10px Cinzel,serif; letter-spacing:.18em; }
.builder-caption small { color:#675d4d; font-size:9px; }
.builder-screen { position:relative; overflow:hidden; border:1px solid #302619; }
.builder-frame img { display:block; width:100%; aspect-ratio:16/8.4; object-fit:cover; object-position:top; filter:saturate(.86) brightness(.78); transition:.35s ease; }
.builder-screen:hover > img { filter:saturate(.95) brightness(.9); }
.builder-callout { position:absolute; z-index:2; display:flex; gap:10px; align-items:center; width:240px; padding:11px 13px; color:#a99a7a; border:1px solid #7a6035; background:#090705e8; box-shadow:0 12px 35px #000b; backdrop-filter:blur(8px); font-size:8px; line-height:1.5; }
.builder-callout b { display:grid; flex:0 0 auto; place-items:center; width:27px; height:27px; color:#171008; border-radius:50%; background:var(--gold-bright); font:8px Cinzel,serif; }
.builder-callout strong { display:block; color:#ddcca6; font:10px 'Libre Baskerville',serif; }
.library-callout { left:1.5%; bottom:3%; }.map-callout { left:43%; top:4%; }.inspector-callout { right:1.5%; bottom:3%; }
.builder-glow { position:absolute; inset:30% 10% -10%; z-index:-1; background:#9a733530; filter:blur(70px); }
.system-grid { max-width:1350px; margin:65px auto 0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--gold-dark); border-bottom:1px solid var(--gold-dark); }
.system-grid article { padding:35px 28px 38px; border-right:1px solid var(--gold-dark); }
.system-grid article:last-child { border-right:0; }
.system-grid article > span { color:#5e4d30; font:11px Cinzel,serif; }
.system-grid h3 { margin:27px 0 13px; color:var(--cream); font-size:19px; }
.system-grid p { color:#8d8371; font:16px/1.75 'Libre Baskerville',serif; }
.tutorials { background:#090705; }
.tutorial-heading { max-width:1400px; margin:0 auto 55px; display:grid; grid-template-columns:1.2fr .8fr; gap:10vw; align-items:end; }
.tutorial-heading h2 { margin:0; color:var(--cream); font-size:clamp(40px,5.1vw,75px); line-height:1.07; letter-spacing:-.035em; }
.tutorial-heading > div:last-child { display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:end; }
.tutorial-heading > div:last-child > strong { color:var(--gold-bright); font:58px/1 Cinzel,serif; }
.tutorial-heading > div:last-child > span { padding-bottom:7px; color:#8f8067; font-size:9px; letter-spacing:.16em; text-transform:uppercase; }
.tutorial-heading > div:last-child > p,.tutorial-heading > div:last-child > a { grid-column:1/-1; }
.tutorial-heading > div:last-child > p { color:var(--muted); font:16px/1.8 'Libre Baskerville',serif; }
.tutorial-grid { max-width:1400px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.tutorial-card { display:block; overflow:hidden; color:inherit; border:1px solid var(--gold-dark); background:#110e0a; transition:.35s ease; }
.tutorial-card:hover { transform:translateY(-5px); border-color:#9a7840; box-shadow:0 30px 60px #0008; }
.tutorial-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.tutorial-card > div { padding:28px 30px 32px; }
.tutorial-card small { color:var(--gold); font-size:8px; letter-spacing:.16em; text-transform:uppercase; }
.tutorial-card h3 { margin:10px 0 12px; color:var(--cream); font-size:25px; }
.tutorial-card p { color:#968b75; font:16px/1.75 'Libre Baskerville',serif; }
.tutorial-card span { color:var(--gold-bright); font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.course-strip { max-width:1400px; margin:24px auto 0; padding:18px 24px; display:flex; justify-content:center; gap:5vw; color:#776b55; border:1px solid #2d2418; font-size:8px; letter-spacing:.13em; text-transform:uppercase; }
.course-strip span:before { content:'◈'; margin-right:8px; color:var(--gold); }
.one-room { max-width:1600px; margin:auto; display:grid; grid-template-columns:1.15fr .85fr; gap:7vw; align-items:center; }
.room-art { position:relative; min-height:620px; }
.room-art:before { content:''; position:absolute; inset:30px -22px -24px 25px; border:1px solid var(--gold-dark); }
.room-art img { position:relative; width:100%; height:620px; object-fit:cover; filter:brightness(.72) sepia(.12); }
.status-pill { position:absolute; top:20px; left:20px; padding:9px 12px; color:var(--gold-bright); border:1px solid var(--gold-dark); background:#0b0907d9; font-size:8px; letter-spacing:.16em; text-transform:uppercase; }
.room-copy > p:not(.eyebrow) { color:var(--muted); font:14px/1.85 'Libre Baskerville',serif; }
.room-copy blockquote { margin:35px 0; padding:5px 0 5px 26px; color:#cfbd95; border-left:1px solid var(--gold); font:italic 16px/1.7 'Libre Baskerville',serif; }
.room-stats { display:flex; gap:35px; border-top:1px solid var(--gold-dark); padding-top:25px; }
.room-stats div { display:flex; flex-direction:column; gap:6px; }
.room-stats strong { color:var(--gold-bright); font:18px 'Libre Baskerville',serif; }
.room-stats span { color:#6f6553; font-size:8px; text-transform:uppercase; letter-spacing:.17em; }
.principles { border-top:1px solid #241b10; border-bottom:1px solid #241b10; background:#100d09; }
.principles > .eyebrow { max-width:1300px; margin-left:auto; margin-right:auto; }
.principle-grid { max-width:1300px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:8vw; }
.principle-grid h3 { color:var(--cream); font-size:21px; }
.principle-grid p { color:#8f8470; font:12px/1.8 'Libre Baskerville',serif; }
.trial { min-height:650px; display:grid; place-items:center; text-align:center; background:radial-gradient(circle at 50% 52%,#2a2113 0,#100d09 33%,#090705 72%); }
.trial-inner { max-width:780px; }
.trial p:not(.eyebrow) { max-width:650px; margin:25px auto 34px; color:#aa9e86; font:14px/1.85 'Libre Baskerville',serif; }
.trial .button { margin-bottom:18px; }
.trial small { display:block; color:#6c6251; font:italic 9px 'Libre Baskerville',serif; }
.trial small + small { margin-top:9px; }
.trial small a { color:#a89062; text-decoration:underline; text-underline-offset:3px; }
.trial small a:hover { color:var(--cream); }
footer { min-height:130px; padding:40px clamp(24px,5vw,84px); display:flex; align-items:center; gap:40px; color:#796e5b; border-top:1px solid var(--gold-dark); background:#070604; font-size:10px; }
footer p { margin-right:auto; }
footer strong { color:#aa9875; font-weight:500; }
footer > div { display:flex; gap:30px; }
footer a:hover { color:var(--cream); }
@media (max-width:1000px) { .actual-heading,.systems-heading,.split-heading,.tutorial-heading,.one-room { grid-template-columns:1fr; } .system-panel { grid-template-columns:1fr; }.npc-portrait,.combat-art,.spell-visual,.puzzle-art,.event-web,.crafting-visual { min-height:480px; }.system-narrative { border-left:0;border-top:1px solid var(--gold-dark); }.orb-feature { min-height:600px; } .orb-feature:after { background:linear-gradient(0deg,rgba(9,7,5,.97) 0,rgba(9,7,5,.35) 70%,transparent); } .orb-copy { width:100%; margin-top:250px; padding:120px 8% 60px; } .system-grid { grid-template-columns:1fr 1fr; } .system-grid article:nth-child(2) { border-right:0; } .system-grid article:nth-child(-n+2) { border-bottom:1px solid var(--gold-dark); } .room-art { order:2; } }
@media (max-width:700px) { .actual-heading,.systems-heading,.split-heading,.treasure-heading,.tutorial-heading { display:block; } .actual-heading > p,.systems-heading > p,.split-heading > p,.treasure-heading > p,.tutorial-heading > div:last-child { margin-top:25px; }.actual-pin { display:none;}.actual-bar i { display:none;}.actual-frame figcaption { display:grid; grid-template-columns:1fr 1fr; gap:12px;}.actual-screen { overflow:auto;}.actual-screen > img { width:180%; max-width:none;}.system-tabs { grid-template-columns:repeat(6,1fr);min-height:58px;}.system-tabs button { padding:0;text-align:center;font-size:0;}.system-tabs button span { margin:0;font-size:9px;}.system-panel { display:block;}.npc-portrait,.combat-art,.spell-visual,.puzzle-art,.event-web,.crafting-visual { min-height:360px;height:360px;}.event-web,.crafting-visual { height:auto;padding:35px 25px;}.system-narrative { padding:40px 24px;}.event-actions { columns:1;}.spell-card { min-width:130px;}.spell-card.primary{left:3%}.spell-card.secondary{right:3%}.orb-feature { min-height:680px; } .orb-copy { margin-top:190px; padding-top:130px; } .treasure-grid,.tutorial-grid,.system-grid,.principle-grid { grid-template-columns:1fr; } .system-grid article { border-right:0; border-bottom:1px solid var(--gold-dark); } .adventure-card + .adventure-card { margin-top:6px; }.builder-frame { padding:8px;}.builder-caption small { display:none;}.builder-frame img { aspect-ratio:1.25/1; width:180%; max-width:none; transform:translateX(-22%);}.builder-callout { display:none;}.room-art,.room-art img { min-height:380px; height:380px; }.course-strip { align-items:flex-start; flex-direction:column; gap:12px; } footer { align-items:flex-start; flex-direction:column; gap:14px; } footer p { margin:0; } }