:root{--guide-paper:#d8d0c1;--guide-ink:#0b0b09;--guide-gold:#c6a76b}
.guide-hero,.demo-lab-hero{min-height:420px;padding:64px clamp(28px,5vw,78px);display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:48px;align-items:end;border:1px solid rgba(198,167,107,.2);background:radial-gradient(circle at 82% 15%,rgba(198,167,107,.16),transparent 32%),linear-gradient(135deg,#0c0c0a,#050504);position:relative;overflow:hidden}
.guide-hero:after,.demo-lab-hero:after{content:"";position:absolute;inset:22px;border:1px solid rgba(255,255,255,.045);pointer-events:none}
.guide-hero h1,.demo-lab-hero h1{font:600 clamp(48px,7vw,92px)/.88 "Cormorant Garamond",serif;letter-spacing:-.045em;color:#eee9df;margin:20px 0 22px}
.guide-hero h1 em,.demo-lab-hero h1 em{color:var(--guide-gold);font-weight:500}
.guide-hero p,.demo-lab-hero p{max-width:700px;color:#aaa398;font-size:16px;line-height:1.7}
.guide-hero aside,.demo-lab-hero aside{height:210px;border-left:1px solid var(--guide-gold);padding:18px 0 0 24px;display:flex;flex-direction:column;justify-content:flex-end}
.guide-hero aside span,.demo-lab-hero aside span{font-size:10px;letter-spacing:.17em;color:var(--guide-gold)}
.guide-hero aside b,.demo-lab-hero aside b{font:600 92px/.8 "Cormorant Garamond",serif;color:#e9e3d7}
.guide-hero aside small,.demo-lab-hero aside small{margin-top:14px;color:#777168;text-transform:uppercase;letter-spacing:.11em}
.guide-layout{display:grid;grid-template-columns:270px minmax(0,1fr);margin-top:20px;border:1px solid rgba(255,255,255,.08);background:#090908;min-height:590px}
.guide-rail{padding:22px;border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:5px}
.guide-rail button{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;text-align:left;color:#6e6961;padding:12px;border:0;background:transparent;cursor:pointer;border-radius:2px}
.guide-rail button:hover,.guide-rail button.active{background:#151410;color:#ece6db}
.guide-rail button.active i{color:var(--guide-gold);border-color:var(--guide-gold)}
.guide-rail i{width:32px;height:32px;display:grid;place-items:center;border:1px solid #34312b;border-radius:50%;font-size:9px;font-style:normal}
.guide-rail span{font-size:12px;line-height:1.25}
.guide-stage{padding:clamp(30px,5vw,72px);align-self:start}
.guide-step{display:none;max-width:880px}
.guide-step.active{display:block;animation:guideIn .35s ease both}
@keyframes guideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.guide-kicker{font-size:10px;color:var(--guide-gold);letter-spacing:.17em}
.guide-step h2{font:600 clamp(42px,6vw,76px)/.95 "Cormorant Garamond",serif;color:#ede8df;margin:22px 0 18px}
.guide-step>p{color:#aaa49b;font-size:17px;line-height:1.75;max-width:760px}
.guide-example,.guide-deep{margin:32px 0;padding:24px 26px;border-left:2px solid var(--guide-gold);background:#11110e}
.guide-example b,.guide-deep h3{display:block;color:#eee7db;margin:0 0 9px;font-size:13px}
.guide-example span,.guide-deep p,.guide-deep li{color:#928c83;font-size:13px;line-height:1.65}
.guide-deep ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;padding-left:18px;margin:18px 0 0}
.guide-flow{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:22px}
.guide-flow span{padding:10px 12px;background:#201d16;color:#d1b878;font-size:9px;letter-spacing:.12em}
.guide-flow i{color:#5a554d;font-style:normal}
.guide-memberships{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#2d2a25;margin:34px 0}
.guide-memberships div{background:#11110f;padding:20px}.guide-memberships b{font-size:10px;letter-spacing:.14em;color:var(--guide-gold)}.guide-memberships p{font-size:12px;color:#8d877f;line-height:1.55}
.guide-step-actions{display:flex;align-items:center;gap:18px;margin-top:38px}
.guide-next{border:0;background:transparent;color:#aaa49b;cursor:pointer;padding:14px}.guide-next:hover{color:#fff}
.guide-map{margin-top:20px;padding:clamp(28px,5vw,66px);background:#d9d2c5;color:#10100e}
.guide-map header{display:flex;justify-content:space-between;align-items:end;margin-bottom:34px}.guide-map h2{font:600 clamp(38px,5vw,64px)/1 "Cormorant Garamond",serif;margin:0}
.guide-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#aaa294}
.guide-module{background:#d9d2c5;padding:24px;min-height:230px;display:flex;flex-direction:column;gap:17px}
.guide-module-icon{width:42px;height:42px;border:1px solid #978c79;border-radius:50%;display:grid;place-items:center}.guide-module-icon svg{width:19px}
.guide-module h3{font-size:16px;margin:0 0 8px}.guide-module p{font-size:12px;line-height:1.55;color:#5e594f;margin:0}.guide-module button{margin-top:auto;text-align:left;border:0;border-top:1px solid #aaa294;padding:13px 0 0;background:transparent;font-size:11px;cursor:pointer;color:#171611}.guide-module button span{float:right}
.demo-how{display:flex;align-items:center;justify-content:center;gap:24px;padding:22px;background:#c6a76b;color:#0a0907;font-size:10px;letter-spacing:.16em}.demo-how i{font-style:normal;opacity:.5}
.demo-personas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.demo-persona{background:#0c0c0a;border:1px solid rgba(255,255,255,.08)}
.demo-persona-cover{height:150px;background-size:cover;background-position:center;padding:18px;display:flex;justify-content:space-between;color:#d7c49b}.demo-persona-cover span{font-size:9px;letter-spacing:.15em}.demo-persona-cover b{font:500 42px/1 "Cormorant Garamond",serif}
.demo-persona-body{padding:0 22px 22px}.demo-persona-body>.avatar{transform:translateY(-28px);margin-bottom:-18px}.demo-persona h2{font:600 30px/1 "Cormorant Garamond",serif;color:#ece7de;margin:8px 0}.demo-persona-body>p,.demo-persona-body>em{font-size:11px;color:#918b83;font-style:normal}.demo-persona-body>div{padding:15px 0;border-top:1px solid #292722;margin-top:17px}.demo-persona-body small{font-size:8px;letter-spacing:.14em;color:#b9a269}.demo-persona-body div p{font-size:11px;line-height:1.55;color:#989188;margin:6px 0 0}.demo-persona button{width:100%;padding:14px;border:1px solid #a78d55;background:#b99b5f;color:#080806;font-weight:700;cursor:pointer}.demo-persona button span{float:right}
.demo-safety{margin-top:18px;padding:25px;display:flex;gap:18px;background:#14130f;border:1px solid #332e24}.demo-safety>span{color:#c6a76b}.demo-safety svg{width:26px}.demo-safety h3{margin:0 0 7px;color:#e7e0d4}.demo-safety p{margin:0;color:#8f8980;font-size:12px;line-height:1.6}
.demo-ribbon{position:fixed;z-index:1000;left:calc(264px + 22px);right:22px;bottom:20px;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#c6a76b;color:#080806;box-shadow:0 18px 50px #000}
.demo-ribbon span{display:flex;align-items:center;gap:10px}.demo-ribbon i{width:8px;height:8px;border-radius:50%;background:#080806;animation:pulse 1.4s infinite}.demo-ribbon b{font-size:10px;letter-spacing:.14em}.demo-ribbon small{font-size:11px}.demo-ribbon button{border:1px solid #17140d;background:#0a0907;color:#eee6d6;padding:9px 13px;cursor:pointer}
body.demo-session #app{padding-bottom:94px}
@media(max-width:1000px){.guide-modules,.demo-personas{grid-template-columns:repeat(2,1fr)}.demo-ribbon{left:18px;bottom:82px}}
@media(max-width:720px){.guide-hero,.demo-lab-hero{grid-template-columns:1fr;padding:42px 24px;min-height:auto}.guide-hero aside,.demo-lab-hero aside{height:auto;border-left:0;border-top:1px solid #403824;padding:18px 0 0}.guide-hero aside b,.demo-lab-hero aside b{font-size:62px}.guide-layout{display:block}.guide-rail{border-right:0;border-bottom:1px solid #2b2924;display:grid;grid-template-columns:repeat(4,1fr);padding:12px;overflow:auto}.guide-rail button{display:block;text-align:center;padding:7px}.guide-rail button span{display:none}.guide-rail i{margin:auto}.guide-stage{padding:30px 22px}.guide-deep ul{grid-template-columns:1fr}.guide-memberships,.guide-modules,.demo-personas{grid-template-columns:1fr}.guide-map header{display:block}.guide-map h2{margin-top:12px}.demo-how{gap:8px;font-size:8px}.demo-ribbon{left:8px;right:8px;bottom:72px;align-items:flex-start}.demo-ribbon span{display:grid;grid-template-columns:auto 1fr}.demo-ribbon small{grid-column:1/3}.demo-ribbon button{font-size:10px}}