*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(circle at top left,rgba(245,184,62,.24),transparent 34rem),linear-gradient(180deg,#f6f1e4,#ebe6d6 46%,#f8f5eb);color:#1f2933}button,input,select{font:inherit}.guides-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:clamp(56px,8vw,96px) clamp(20px,5vw,72px) clamp(34px,5vw,56px);background:linear-gradient(90deg,#faf7ebf0,#faf7ebad),url(/art/boards/testboard2.png) center/cover;border-bottom:2px solid rgba(68,54,38,.35)}.guides-hero .eyebrow,.guide-detail .eyebrow{margin:0 0 8px;color:#b66b05;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.guides-hero h1,.guide-detail h2,.guide-detail h3,.guide-detail h4,.guide-detail p{margin-top:0}.guides-hero h1{max-width:860px;margin-bottom:16px;color:#1f2933;font-size:clamp(2.5rem,6vw,5rem);line-height:.98}.guide-detail h2{margin-bottom:8px;color:#1f2933;font-size:clamp(2.2rem,5vw,4.4rem);line-height:.95}.guide-detail h3{margin-bottom:10px;color:#1f2933;font-size:1.1rem}.guide-detail h4{margin-bottom:10px;color:#1f2933;font-size:1.25rem}.lede{max-width:780px;margin-bottom:0;color:#2f3b46;font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.65}.catalog-link{display:inline-flex;align-items:center;flex:0 0 auto;min-height:44px;padding:0 18px;border-radius:8px;background:#243447;color:#fff7df;font-weight:800;text-decoration:none}.guide-shell{--accent: #f59e0b;padding:0 clamp(20px,5vw,72px) clamp(52px,7vw,84px);background:radial-gradient(circle at 18% 0,color-mix(in srgb,var(--accent) 30%,transparent),transparent 34rem),linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,#f8f5eb),#f8f5eb 58%)}.class-tabs{position:sticky;top:68px;z-index:10;display:flex;gap:8px;overflow-x:auto;padding:14px 0;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,rgba(255,251,235,.98)),#fffbebf5);border-bottom:2px solid color-mix(in srgb,var(--accent) 38%,rgba(68,54,38,.28));scrollbar-width:thin}.class-tabs button{--tab-accent: #f59e0b;flex:0 0 auto;min-height:38px;padding:0 13px;border:2px solid color-mix(in srgb,var(--tab-accent) 32%,rgba(67,55,40,.24));border-radius:8px;background:color-mix(in srgb,var(--tab-accent) 12%,rgba(255,252,241,.86));color:#2f3b46;cursor:pointer;font:inherit;font-weight:800}.class-tabs button:hover,.class-tabs button.active{border-color:color-mix(in srgb,var(--tab-accent) 80%,#243447);background:color-mix(in srgb,var(--tab-accent) 72%,#243447);color:#fffaf0}.guide-detail{margin-top:30px;border:2px solid color-mix(in srgb,var(--accent) 54%,rgba(67,55,40,.26));border-top:8px solid color-mix(in srgb,var(--accent) 88%,#243447);border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 36%,transparent),transparent 52%),linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,#fffbeb),color-mix(in srgb,var(--accent) 10%,#efe7cd));box-shadow:0 18px 42px color-mix(in srgb,var(--accent) 18%,rgba(93,74,49,.14))}.detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:clamp(24px,5vw,44px);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 34%,rgba(255,252,241,.86)),#fffcf185);border-bottom:2px solid color-mix(in srgb,var(--accent) 42%,rgba(67,55,40,.18))}.detail-header span{flex:0 0 auto;padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 72%,#243447);color:#fffaf0;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.detail-header .preview{background:#f59e0b24;color:#fcd34d}.style{max-width:680px;margin-bottom:0;color:#3d4852;font-size:1.08rem;line-height:1.6}.detail-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:1px;background:color-mix(in srgb,var(--accent) 40%,rgba(67,55,40,.16))}.overview-panel,.tips-panel,.key-cards{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 11%,rgba(255,252,241,.76)),#fffcf1a8)}.overview-panel,.tips-panel,.key-cards{padding:clamp(22px,4vw,34px)}.overview-panel p,.tips-panel p,.tips-panel li,.key-card p{color:#3d4852;line-height:1.65}.overview-panel p,.tips-panel p{margin-bottom:22px}.overview-panel p:last-child,.tips-panel p:last-child{margin-bottom:0}.tips-panel ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}.tips-panel li{padding:14px 16px;border-left:5px solid color-mix(in srgb,var(--accent) 84%,#243447);background:color-mix(in srgb,var(--accent) 14%,rgba(255,255,255,.72))}.key-cards{border-top:2px solid color-mix(in srgb,var(--accent) 42%,rgba(67,55,40,.18))}.section-heading{margin-bottom:18px}.key-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.key-card{display:flex;flex-direction:column;gap:14px;min-height:0;padding:14px;border:2px solid color-mix(in srgb,var(--accent) 48%,rgba(67,55,40,.2));background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,rgba(255,252,241,.84)),#fffcf1b8)}.embedded-card .card-tile{min-height:360px}.key-card-copy{padding:2px 6px 6px}.card-role{margin-bottom:8px;color:var(--accent)!important;font-size:.74rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.hero-powers{padding:clamp(22px,4vw,34px);border-top:2px solid color-mix(in srgb,var(--accent, #f59e0b) 42%,rgba(67,55,40,.18));background:linear-gradient(180deg,color-mix(in srgb,var(--accent, #f59e0b) 18%,rgba(255,252,241,.76)),#fffcf19e)}.hero-power-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.hero-power-card{padding:18px;border:2px solid color-mix(in srgb,var(--accent, #f59e0b) 50%,rgba(67,55,40,.2));background:linear-gradient(135deg,color-mix(in srgb,var(--accent, #f59e0b) 26%,transparent),transparent 62%),color-mix(in srgb,var(--accent, #f59e0b) 10%,rgba(255,252,241,.82))}.hero-power-card p{color:#3d4852;line-height:1.6}.hero-power-card p:last-child{margin-bottom:0}.hero-power-title{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.hero-power-title span{flex:0 0 auto;padding:5px 8px;border:1px solid color-mix(in srgb,var(--accent, #f59e0b) 78%,#243447);border-radius:999px;background:color-mix(in srgb,var(--accent, #f59e0b) 68%,#243447);color:#fffaf0;font-size:.78rem;font-weight:900}.power-text{font-weight:800}@media(max-width:920px){.guides-hero{align-items:flex-start;flex-direction:column}.class-tabs{top:116px}.detail-header,.detail-grid,.key-card-grid,.hero-power-grid{grid-template-columns:1fr}.detail-header{flex-direction:column}}@media(max-width:720px){.class-tabs{position:static}}