/* Resonance field guide. Local scope; shared site files remain untouched. */
.res-body { --res-muted: #b8b4ad; --res-edge: rgba(201,162,39,.27); --res-ease: cubic-bezier(.22,1,.36,1); --font-body: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-family: var(--font-body); }
.res-page { width: min(1120px,calc(100% - 40px)); margin: 0 auto; font-size: 16px; }
.res-page *, .res-page *::before, .res-page *::after { min-width: 0; }
.res-page p { color: var(--res-muted); font-size: 1rem; line-height: 1.8; }
.res-page strong { color: #f0ece3; font-weight: 600; }
.res-page h2 { font-size: clamp(1.6rem,3.5vw,2.65rem); letter-spacing: .01em; color: #eee7d8; text-transform: none; }
.res-page h3 { font-size: 1.2rem; letter-spacing: .01em; }
.res-page a, .res-page button, .res-page summary { -webkit-tap-highlight-color: transparent; }
.res-page :is(button,a,input,select,summary):focus-visible, .res-body .nav :focus-visible { outline: 2px solid #f1d274; outline-offset: 4px; }
.res-page [hidden] { display: none !important; }
.res-page :is(button,input,select) { font: inherit; }
.res-page button { cursor: pointer; }
.res-page button:disabled, .res-page [aria-disabled="true"] { cursor: not-allowed; opacity: .48; }
.res-page .res-small { font-size: .875rem; color: #a5a098; }
.res-page .res-eyebrow { color: var(--accent-gold); font-size: .7rem; text-transform: uppercase; letter-spacing: .19em; font-weight: 650; margin-bottom: 16px; }
.res-icon { width: 32px; height: 32px; color: var(--accent-gold); flex-shrink: 0; }
.res-icon-large { width: 64px; height: 64px; margin-bottom: 24px; }
.res-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.res-skip { position: fixed; z-index: 2000; top: 10px; left: 10px; background: #e4c466; color: #16110a; padding: 12px 18px; transform: translateY(-200%); }
.res-skip:focus { transform: translateY(0); }
.res-hero { padding-top: 108px; }
.res-breadcrumb { display: flex; gap: 12px; color: #b6ada0; font-size: .8rem; align-items: center; }
.res-breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent-gold); }
.res-hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; padding: 52px 0 48px; }
.res-hero-copy .res-eyebrow span { display: block; color: #979188; letter-spacing: .12em; margin-top: 8px; }
.res-hero h1 { font-size: clamp(2.3rem,5.35vw,4.6rem); letter-spacing: .005em; color: #f4edda; line-height: 1.06; }
.res-hero h1 span { display: block; font-size: .34em; letter-spacing: .17em; color: var(--accent-gold); margin-top: 16px; font-weight: 400; }
.res-hero-copy .res-hero-promise { margin-top: 30px; font-size: clamp(1.1rem,2vw,1.45rem); color: #d7ccad; line-height: 1.6; }
.res-hero-copy > p:not(.res-eyebrow) { max-width: 490px; }
.res-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin: 28px 0 18px; }
.res-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 18px; min-height: 46px; min-width: 44px; border: 1px solid rgba(201,162,39,.5); border-radius: 4px; background: #1d1b16; color: #edda9e; text-align: center; text-decoration: none; line-height: 1.35; transition: background .45s var(--res-ease),border-color .45s var(--res-ease),transform .45s var(--res-ease),box-shadow .45s var(--res-ease); }
.res-button:hover:not(:disabled):not([aria-disabled="true"]) { background: #30291b; border-color: #e5c458; box-shadow: 0 0 25px #c9a22710; }
.res-button-primary { background: var(--accent-gold); color: #12110d; font-weight: 650; }
.res-button-primary:hover:not(:disabled) { background: #e2c154; color: #12110d; }
.res-text-link { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; font-size: .9rem; color: #d6bd77; text-decoration: underline; text-underline-offset: 5px; }
.res-hero-tags { display: flex; flex-wrap: wrap; gap: 8px 18px; color: #928b80; font-size: .72rem; }
.res-hero-tags span::before { content: '·'; color: var(--accent-gold); margin-right: 8px; }
.res-hero-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(ellipse,#c9a2270f 0,transparent 68%); }
.res-sigil { width: 53%; height: 53%; color: #c9a227; filter: drop-shadow(0 0 18px #c9a22738); }
.res-orbit { position: absolute; border: 1px solid #c9a22736; border-radius: 50%; }
.res-orbit-outer { width: 90%; height: 90%; border-style: dashed; }
.res-orbit-inner { width: 73%; height: 73%; border-color: #c9a22720; }
.res-hero-art::before, .res-hero-art::after { content: ''; position: absolute; background: #c9a22740; }
.res-hero-art::before { height: 1px; width: 100%; }
.res-hero-art::after { width: 1px; height: 100%; }
.res-art-top, .res-art-bottom { position: absolute; font-size: .58rem; letter-spacing: .25em; color: #bc9c4d; background: #0d0c12; padding: 7px; z-index: 1; }
.res-art-top { top: 4%; }.res-art-bottom { bottom: 3%; letter-spacing: .17em; }
.res-art-dot { position: absolute; width: 8px; height: 8px; background: #dfc36b; transform: rotate(45deg); box-shadow: 0 0 16px #c9a22790; }.res-dot-a { left: 4%; }.res-dot-b { right: 4%; }
.res-opening-note { padding: 22px 0; border-block: 1px solid var(--res-edge); display: flex; align-items: center; gap: 24px; }
.res-note-number { font-family: var(--font-display); color: var(--accent-gold); font-size: 2rem; }
.res-opening-note p { margin: 0; font-size: .85rem; }.res-opening-note strong { margin-right: 8px; }
.res-jump { display: flex; flex-wrap: wrap; gap: 2px 22px; padding: 12px 0; border-bottom: 1px solid #ffffff0d; }
.res-jump a { display: inline-flex; min-height: 44px; align-items: center; color: #b7ad98; font-size: .82rem; transition: color .4s var(--res-ease); }.res-jump a:hover { color: #f1d274; }
.res-section { padding: 76px 0; border-bottom: 1px solid var(--res-edge); scroll-margin-top: 96px; }
.res-section-heading { max-width: 730px; margin-bottom: 32px; }.res-section-heading h2 { margin-bottom: 20px; }.res-section-heading p:last-child { margin-bottom: 0; }
.res-attribute-row { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 10px; }
.res-stat { display: flex; flex-direction: column; align-items: center; padding: 23px 4px 18px; border: 1px solid #ffffff13; background: #12121bdd; border-radius: 4px; text-align: center; }
.res-stat .res-icon { width: 36px; height: 36px; color: #ada28a; margin-bottom: 12px; }.res-stat abbr { text-decoration: none; font-size: .72rem; letter-spacing: .14em; color: #c0b5a0; }
.res-stat-value { font-size: 1.7rem; line-height: 1.5; color: #f3e8d2; font-variant-numeric: tabular-nums; }.res-stat-name { font-size: .6rem; color: #989184; }
.res-stat-res { border-color: #c9a2279c; background: linear-gradient(140deg,#c9a22720,#12121b); }.res-stat-res .res-icon,.res-stat-res abbr { color: #e0c46c; }
.res-toggle-line { margin-top: 22px; }.res-toggle-line label { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; cursor: pointer; font-size: .9rem; }
.res-page input[type="checkbox"] { accent-color: var(--accent-gold); width: 22px; height: 22px; flex-shrink: 0; }
.res-page .res-inline-note { color: #d7c896; font-size: .9rem; margin: 12px 0; }
.res-ladder-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.res-ladder-buttons { display: flex; flex-direction: column; gap: 10px; }
.res-rung { display: flex; align-items: center; text-align: left; gap: 18px; min-height: 86px; border: 1px solid #c9a22726; background: #111118dd; border-radius: 4px; padding: 16px 18px; color: #d8cab0; transition: border-color .45s var(--res-ease),background .45s var(--res-ease); }
.res-rung-number { color: #9f8644; font-size: .75rem; }.res-rung > span:nth-child(2) { flex: 1; }.res-rung strong { display: block; font-size: 1rem; }.res-rung small { font-size: .76rem; color: #a29c91; display: block; margin-top: 4px; }.res-rung[aria-pressed="true"] { border-color: #c9a227a6; background: linear-gradient(120deg,#b08d261c,#121219); }
.res-ladder-explanation { border: 1px solid var(--res-edge); padding: 32px; background: linear-gradient(140deg,#191812ed,#111018ef); border-radius: 4px; }.res-ladder-explanation h3 { margin-bottom: 18px; font-size: 1.6rem; }.res-ladder-explanation p { font-size: .95rem; }.res-ladder-explanation .res-eyebrow { font-size: .65rem; }.res-ladder-explanation .res-takeaway { border-left: 2px solid #b69539; padding-left: 16px; margin: 24px 0 0; color: #d8c58b; }
.res-resource-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid #ffffff10; margin-top: 28px; }.res-resource-summary article { padding: 22px; }.res-resource-summary article+article { border-left: 1px solid #ffffff10; }.res-resource-label { color: #c0a558; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; display: block; }.res-resource-summary strong { font-family: var(--font-display); font-size: 2rem; display: block; margin: 6px 0; }.res-resource-summary small { font: .85rem var(--font-body); color: #ada79b; }.res-resource-summary p { margin: 0; font-size: .82rem; }
.res-calling-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }.res-story-card { padding: 28px 24px; border: 1px solid #c9a2272c; background: #12121be6; display: flex; flex-direction: column; }.res-card-index { font-size: .65rem; color: #b2a589; letter-spacing: .15em; text-transform: uppercase; }.res-story-card h3 { color: #decc99; margin: 26px 0 18px; min-height: 32px; }.res-story-card p { font-size: .92rem; }.res-story-unknown { background: radial-gradient(circle at 50% 0,#6270761a,transparent 70%),#111119e6; }.res-story-unknown h3 { font-size: 2.2rem; line-height: 1; }.res-tag { margin-top: auto; padding-top: 15px; color: #bc9e50; font-size: .67rem; line-height: 1.7; }
.res-callout { border-left: 2px solid #b99636; padding: 20px 24px; background: #c9a22709; margin-top: 28px; }.res-callout h3 { margin-bottom: 12px; }.res-callout p { font-size: .92rem; }.res-callout p:last-child { margin-bottom: 0; }
.res-page .res-try { border-top: 1px solid #ffffff16; padding-top: 18px; margin-bottom: 24px; font-size: .9rem; }.res-try > span { display: inline-block; padding: 3px 8px; background: #c9a22725; color: #e3c570; margin-right: 8px; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.res-two-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 24px 0; }.res-two-notes p { font-size: .9rem; margin: 0; }
.res-details { border-bottom: 1px solid #c9a22730; }.res-details summary { cursor: pointer; color: #e3d9c3; font-size: .95rem; padding: 20px 32px 20px 0; min-height: 56px; position: relative; list-style: none; }.res-details summary::-webkit-details-marker { display: none; }.res-details summary::after { content: '+'; position: absolute; right: 6px; top: 18px; color: var(--accent-gold); font-size: 1.3rem; }.res-details[open] summary::after { content: '−'; }.res-details > div { padding: 0 20px 8px 0; max-width: 800px; }.res-details p { font-size: .94rem; }
.res-order { display: flex; gap: 18px; justify-content: center; align-items: center; padding: 25px 12px; border-block: 1px solid #c9a22735; margin: 32px 0; }.res-order span { color: #d8c17f; font-family: var(--font-display); font-size: 1.25rem; }.res-order b { color: #867447; }
.res-rest-strip { display: flex; align-items: center; gap: 25px; padding: 24px 0; margin-top: 18px; }.res-rest-strip > span { white-space: nowrap; border: 1px solid #c9a22745; border-radius: 50%; padding: 20px 12px; font-size: .7rem; text-transform: uppercase; color: #dac27c; }.res-rest-strip p { margin: 0; font-size: .95rem; }
.res-scale { position: relative; }.res-scale > p { max-width: 760px; }.res-scale-comparison { display: flex; align-items: center; justify-content: center; gap: 60px; margin: 42px 0; padding: 40px 20px; background: radial-gradient(ellipse,#c9a2270b,transparent 70%); border-block: 1px solid #c9a22729; }.res-scale-comparison > div > span { display: block; color: #c2b085; font-size: .7rem; text-transform: uppercase; letter-spacing: .15em; }.res-scale-comparison strong { font-family: var(--font-display); font-size: 6rem; color: #ddc16a; font-weight: 400; line-height: 1.25; }.res-scale-comparison strong span { font-size: .5em; }.res-scale-comparison p { font-size: .8rem; margin: 0; }.res-scale-divider { color: #73613a; font-size: 3rem; font-weight: 100; }.res-scale blockquote { font-family: var(--font-display); font-size: clamp(1.3rem,2.8vw,2rem); color: #e2ca85; line-height: 1.6; max-width: 900px; margin: 30px 0; padding-left: 24px; border-left: 2px solid var(--accent-gold); }
.res-training-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }.res-training-list li { display: flex; gap: 22px; padding: 24px 0; border-top: 1px solid #ffffff17; }.res-training-list li > span { color: #ac934c; font: .8rem var(--font-display); padding-top: 4px; }.res-training-list h3 { font-size: 1.05rem; margin-bottom: 10px; }.res-training-list p { font-size: .88rem; margin: 0; }
.res-glossary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px 40px; }.res-glossary > div { border-top: 1px solid #ffffff17; padding-top: 18px; }.res-glossary dt { color: #d5bd75; margin-bottom: 8px; font-size: .93rem; }.res-glossary dd { color: var(--res-muted); font-size: .88rem; line-height: 1.75; }
.res-watch { text-align: center; margin-bottom: 64px; }.res-watch h2 { margin-bottom: 20px; }.res-watch .res-text-link { display: flex; justify-content: center; margin-top: 20px; }
/* Widget primitives shared with the small vanilla rules engine. */
.res-panel { border: 1px solid var(--res-edge); border-radius: 5px; padding: 26px; background: #111118ed; margin-bottom: 18px; }
.res-panel h3 { margin-bottom: 18px; color: #e6d9b5; }.res-panel h4 { font-size: 1rem; margin-bottom: 10px; }.res-panel p { font-size: .9rem; }.res-panel p:last-child { margin-bottom: 0; }
.res-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.res-field { display: flex; flex-direction: column; gap: 8px; color: #d3c9b5; font-size: .87rem; margin-bottom: 16px; }
.res-page :is(input[type="number"],select) { font-size: 16px; background: #09090e; color: #eee5cf; border: 1px solid #c9a22760; border-radius: 4px; min-height: 46px; padding: 10px 12px; width: 100%; }
.res-page fieldset { border: 1px solid #ffffff18; padding: 18px; border-radius: 4px; min-width: 0; }.res-page legend { padding: 0 8px; font-size: .85rem; color: #d8c68e; }
.res-result { padding: 20px; background: linear-gradient(125deg,#c9a22715,#16151b); border: 1px solid #c9a22735; border-radius: 4px; margin-top: 20px; font-variant-numeric: tabular-nums; color: #e0d4b3; line-height: 1.8; }
.res-result p { color: #d6c8a5; }.res-page output { color: #eedaa0; font-variant-numeric: tabular-nums; }
.res-page table { border-collapse: collapse; width: 100%; font-size: .85rem; }.res-page th,.res-page td { padding: 12px; text-align: left; border-bottom: 1px solid #ffffff16; }.res-page th { color: #cdb574; font-weight: 500; }.res-page td { color: #ddd3bd; }
.res-body .nav-toggle, .res-body .bg-toggle, .res-body .account-trigger { min-height: 44px; min-width: 44px; }
@media(min-width:1000px) { .res-hero-copy .res-eyebrow span { display: inline; border-left: 1px solid #a4894b66; padding-left: 14px; margin-left: 12px; } }
@media(max-width:800px) { .res-hero-grid { gap: 12px; }.res-hero-art { min-width: 0; }.res-calling-grid { grid-template-columns: 1fr; }.res-story-card { padding: 24px; }.res-story-card h3 { margin: 18px 0 12px; }.res-ladder-layout { grid-template-columns: 1fr; }.res-ladder-explanation { min-height: 305px; }.res-attribute-row { gap: 6px; }.res-stat-name { font-size: .52rem; } }
@media(max-width:600px) { .res-page { width: calc(100% - 36px); }.res-hero { padding-top: 92px; }.res-hero-grid { grid-template-columns: 1fr; padding: 30px 0; }.res-hero h1 { font-size: clamp(2.1rem,9.4vw,3.5rem); }.res-hero-copy .res-hero-promise { margin-top: 26px; font-size: 1.15rem; }.res-hero-art { width: 210px; margin: 12px auto 0; }.res-art-top,.res-art-bottom { font-size: .42rem; }.res-hero-actions { gap: 12px 18px; }.res-button { padding: 12px 14px; font-size: .9rem; }.res-opening-note { gap: 14px; }.res-opening-note p { font-size: .8rem; }.res-opening-note strong { display: block; }.res-jump { gap: 0 21px; }.res-section { padding: 52px 0; }.res-section-heading { margin-bottom: 26px; }.res-section-heading h2 { margin-bottom: 17px; }.res-page .res-eyebrow { font-size: .65rem; }.res-attribute-row { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }.res-stat { padding: 16px 5px; }.res-stat-name { font-size: .6rem; }.res-stat-res { grid-column: 1/-1; display: grid; grid-template-columns: 44px 1fr 50px; gap: 0 16px; text-align: left; padding: 15px 22px; }.res-stat-res .res-icon { grid-row: 1/3; margin: 0; }.res-stat-res abbr { grid-column: 2; }.res-stat-res .res-stat-value { grid-column: 3; grid-row: 1/3; }.res-stat-res .res-stat-name { grid-column: 2; }.res-toggle-line label { font-size: .85rem; }.res-resource-summary { grid-template-columns: 1fr; }.res-resource-summary article { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4px 12px; }.res-resource-summary article+article { border-left: 0; border-top: 1px solid #ffffff10; }.res-resource-summary strong { font-size: 1.65rem; grid-column: 2; grid-row: 1/3; margin: 0; }.res-resource-summary small { display: block; font-size: .72rem; }.res-resource-summary p { grid-column: 1; font-size: .72rem; }.res-resource-label { font-size: .65rem; }.res-ladder-explanation { padding: 24px; }.res-rung { gap: 12px; }.res-two-notes,.res-grid,.res-training-list,.res-glossary { grid-template-columns: 1fr; }.res-two-notes { gap: 18px; }.res-callout { padding: 20px 18px; }.res-order { gap: 9px; padding-inline: 0; }.res-order span { font-size: .9rem; }.res-panel { padding: 18px; }.res-result { padding: 16px; }.res-rest-strip { gap: 15px; }.res-rest-strip p { font-size: .84rem; }.res-scale-comparison { gap: 20px; padding-inline: 0; }.res-scale-comparison strong { font-size: 4rem; }.res-scale-comparison > div > span { font-size: .58rem; }.res-scale-comparison p { font-size: .7rem; }.res-scale-divider { font-size: 2rem; }.res-scale blockquote { padding-left: 18px; }.res-glossary { gap: 18px; }.res-page table { font-size: .76rem; }.res-page th,.res-page td { padding: 9px 6px; }.res-body .bg-toggle-label { display: none; } }
@media(prefers-reduced-motion:reduce) { .res-body *, .res-body *::before, .res-body *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
.res-preset-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin: 20px 0; }
.res-preset-grid .res-button { padding-inline: 8px; font-size: .84rem; }
.res-preset-grid [aria-pressed="true"] { background: #c9a227; border-color: #d9b843; color: #16130b; font-weight: 600; }
.res-control { display: flex; flex-direction: column; gap: 8px; font-size: .88rem; color: #e2d6bd; }
.res-control small { display: block; min-height: 36px; font-size: .73rem; line-height: 1.65; color: #aaa394; }
.res-control .res-field { margin-bottom: 0; }
.res-workshop-controls { margin: 22px 0; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: end; }
.res-panel .res-rule-note { font-size: .78rem; line-height: 1.8; color: #a9a292; margin-block: 18px; }
.res-panel .res-help { font-size: .85rem; color: #bdb5a5; }
.res-chip { display: block; width: fit-content; font-size: .72rem !important; color: #d2b76b !important; border: 1px solid #c9a22730; padding: 5px 9px; border-radius: 3px; margin-block: 12px; }
.res-meter { height: 5px; background: #ffffff15; border-radius: 3px; overflow: hidden; }
.res-meter-fill { display: block; height: 100%; background: linear-gradient(90deg,#937118,#e0c16c); transition: width .5s var(--res-ease); }
.res-panel .res-error { color: #efb69e; margin-block: 10px; min-height: 0; }.res-error:empty { display: none; }
.res-build-card { grid-template-columns: repeat(5,minmax(0,1fr)); margin: 20px 0; gap: 10px; }
.res-panel .res-stat { font-size: .75rem; color: #aea796; padding: 16px 12px; margin: 0; gap: 8px; justify-content: center; }
.res-panel .res-stat strong { font-size: 1.05rem; color: #ead89e; line-height: 1.6; }
.res-vein-state { grid-template-columns: repeat(3,minmax(0,1fr)); margin-block: 20px; gap: 10px; }
.res-vein-preview.res-panel { padding: 20px; margin-bottom: 0; border-color: #ffffff20; }
.res-vein-preview > strong { font-family: var(--font-display); color: #dfc886; font-size: 1.04rem; }
.res-vein-preview p { font-size: .83rem; }
.res-damage-toggles { margin-top: 24px; }
.res-damage-toggles .res-control { flex-direction: row; align-items: center; padding: 12px; min-height: 60px; border: 1px solid #ffffff16; cursor: pointer; }
.res-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 22px 0; }
.res-step { position: relative; border: 1px solid #ffffff20; padding: 16px; background: #101016; margin: 0 !important; transition: border-color .5s var(--res-ease), background .5s var(--res-ease); }
.res-step strong { display: block; font-size: .92rem; margin-bottom: 12px; }.res-step span { display: block; font-size: .78rem; line-height: 1.65; }
.res-step.is-hit { border-color: #c9a22780; background: #c9a2270d; }
.res-flow.is-tracing .res-step { animation: res-trace .55s var(--res-ease) both; }
.res-flow.is-tracing .res-step:nth-child(2) { animation-delay: .45s; }.res-flow.is-tracing .res-step:nth-child(3) { animation-delay: .9s; }.res-flow.is-tracing .res-step:nth-child(4) { animation-delay: 1.35s; }
@keyframes res-trace { from { opacity: .35; box-shadow: inset 3px 0 #edcd62; } to { opacity: 1; box-shadow: inset 0 0 transparent; } }
@media(max-width:800px) { .res-preset-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.res-workshop-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }.res-build-card { grid-template-columns: repeat(3,minmax(0,1fr)); }.res-flow { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .res-workshop-controls { grid-template-columns: 1fr; gap: 18px; }.res-control small { min-height: 0; }.res-panel .res-rule-note { font-size: .8rem; }.res-build-card,.res-vein-state { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.res-build-card .res-stat:last-child,.res-vein-state .res-stat:last-child { grid-column: 1/-1; }.res-panel .res-stat { padding: 14px 10px; }.res-panel .res-stat strong { font-size: .95rem; }.res-flow { grid-template-columns: 1fr; gap: 12px; }.res-step { padding: 18px; display: grid; grid-template-columns: 80px 1fr; gap: 16px; }.res-step strong { margin: 0; font-size: .85rem; }.res-step span { font-size: .85rem; }.res-vein-preview.res-panel { padding: 18px; } }
@media(prefers-reduced-motion:reduce) { .res-flow.is-tracing .res-step { animation: none; } }
/* Short section names still receive a full touch target. */
.res-jump a { min-width: 44px; justify-content: center; }
/* Solid canvas beneath the shared fixed gradient, including full-page captures. */
.res-body { background-color: #0a0a0f; }

/* Keep the local field-guide preview clear of the hosted account promotion. */
html.res-local-preview .res-body #vault-strip { display: none !important; }
html.res-local-preview .res-body { padding-bottom: 0 !important; }

/* ── Fresh touch-up (24 Sep 2026). Same palette and type; softer surfaces, warmer light, gentle motion. ── */
.res-page { --res-glass: linear-gradient(160deg, rgba(201,162,39,.07), rgba(18,18,27,.86) 42%, rgba(12,12,18,.92)); --res-radius: 10px; --res-lift: 0 18px 40px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(201,162,39,.08); }
.res-page h2 { background: linear-gradient(180deg,#f6eedb 30%,#d9bf7a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.res-page .res-eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.res-page .res-eyebrow::before { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg,transparent,var(--accent-gold)); }
.res-hero .res-eyebrow::before { display: none; }
/* surfaces */
.res-stat, .res-rung, .res-ladder-explanation, .res-story-card, .res-panel, .res-step, .res-resource-summary, .res-damage-toggles .res-control, .res-page fieldset { border-radius: var(--res-radius); background: var(--res-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.res-stat, .res-rung, .res-story-card, .res-panel, .res-ladder-explanation { position: relative; box-shadow: var(--res-lift); }
.res-story-card::before, .res-panel::before, .res-ladder-explanation::before { content: ''; position: absolute; inset: 0 18% auto; height: 1px; background: linear-gradient(90deg,transparent,rgba(233,203,110,.55),transparent); pointer-events: none; }
.res-story-card, .res-rung, .res-stat { transition: transform .5s var(--res-ease), border-color .5s var(--res-ease), box-shadow .5s var(--res-ease), background .5s var(--res-ease); }
@media (hover:hover) {
  .res-story-card:hover, .res-rung:hover, .res-stat:hover { transform: translateY(-3px); border-color: rgba(201,162,39,.5); box-shadow: 0 24px 46px -24px rgba(0,0,0,.95), 0 0 30px -8px rgba(201,162,39,.22); }
}
.res-rung[aria-pressed="true"] { border-color: rgba(229,196,88,.7); background: linear-gradient(120deg, rgba(201,162,39,.16), rgba(18,18,27,.9) 60%); }
.res-stat-res { background: radial-gradient(circle at 50% 20%, rgba(201,162,39,.28), rgba(18,18,27,.92) 70%); box-shadow: 0 0 34px -10px rgba(201,162,39,.45), var(--res-lift); }
.res-resource-summary { overflow: hidden; }
.res-callout { border-radius: 0 var(--res-radius) var(--res-radius) 0; background: linear-gradient(90deg, rgba(201,162,39,.09), rgba(201,162,39,.02)); }
/* numbers read as the hero of each widget */
.res-stat-value, .res-panel .res-stat strong, .res-resource-summary strong, .res-page output { font-family: var(--font-display); color: #efd78c; text-shadow: 0 0 18px rgba(201,162,39,.25); }
.res-result { border-radius: var(--res-radius); }
/* controls */
.res-button { border-radius: 999px; padding-inline: 22px; }
.res-button-primary { background: linear-gradient(180deg,#e2c25a,#c49a22); box-shadow: 0 8px 22px -10px rgba(201,162,39,.7); }
.res-button:active:not(:disabled) { transform: translateY(1px); }
.res-preset-grid .res-button { border-radius: 999px; }
.res-page :is(input[type="number"],select) { border-radius: 8px; background: rgba(8,8,12,.85); transition: border-color .4s var(--res-ease), box-shadow .4s var(--res-ease); }
.res-page :is(input[type="number"],select):focus { border-color: #e5c458; box-shadow: 0 0 0 3px rgba(201,162,39,.18); outline: none; }
.res-meter { height: 7px; border-radius: 999px; }.res-meter-fill { border-radius: 999px; box-shadow: 0 0 12px rgba(224,193,108,.55); }
.res-try > span, .res-chip { border-radius: 999px !important; padding-inline: 10px !important; }
/* sticky jump bar */
.res-jump { position: sticky; top: var(--nav-height, 80px); z-index: 50; margin-inline: -20px; padding: 6px 20px; background: rgba(10,10,15,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(201,162,39,.16); }
.res-jump a { position: relative; }
.res-jump a::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: 10px; height: 1px; background: #f1d274; transition: left .4s var(--res-ease), right .4s var(--res-ease); }
.res-jump a:hover::after, .res-jump a[aria-current="true"]::after { left: 0; right: 0; }
.res-jump a[aria-current="true"] { color: #f1d274; }
/* section dividers glow in the middle instead of a flat rule */
.res-section { border-bottom: 0; background: linear-gradient(90deg,transparent,rgba(201,162,39,.3),transparent) bottom / 100% 1px no-repeat; }
/* hero sigil breathes */
.res-sigil { animation: res-breathe 6s ease-in-out infinite; }
.res-orbit-outer { animation: res-spin 90s linear infinite; }
@keyframes res-breathe { 50% { filter: drop-shadow(0 0 30px rgba(201,162,39,.45)); transform: scale(1.025); } }
@keyframes res-spin { to { transform: rotate(360deg); } }
/* reveal on scroll (only when JS has marked the page ready) */
.res-reveal-ready .res-section-heading, .res-reveal-ready .res-section > :not(.res-section-heading) { transition: opacity .7s var(--res-ease), transform .7s var(--res-ease); }
.res-reveal-ready .res-section:not(.is-in) .res-section-heading, .res-reveal-ready .res-section:not(.is-in) > :not(.res-section-heading) { opacity: 0; transform: translateY(18px); }
@media (max-width:600px) { .res-jump { margin-inline: -18px; padding-inline: 18px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .res-jump a { white-space: nowrap; flex-shrink: 0; } .res-jump::-webkit-scrollbar { display: none; } }
@media (prefers-reduced-motion:reduce) { .res-reveal-ready .res-section:not(.is-in) .res-section-heading, .res-reveal-ready .res-section:not(.is-in) > * { opacity: 1 !important; transform: none !important; } .res-sigil, .res-orbit-outer { animation: none !important; } }

/* Watch card: links out to the Patreon episode (Patreon video cannot be embedded). */
.res-video { position: relative; display: block; max-width: 760px; margin: 28px auto 8px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(201,162,39,.45); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), 0 0 40px -18px rgba(201,162,39,.35); transition: transform .5s var(--res-ease), box-shadow .5s var(--res-ease), border-color .5s; }
.res-video img { display: block; width: 100%; height: auto; transition: transform 1s var(--res-ease), filter .5s; }
.res-video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,9,14,.92) 0%, rgba(10,9,14,.2) 45%, transparent 70%); pointer-events: none; }
.res-video-play { position: absolute; z-index: 1; left: 50%; top: 45%; width: 84px; height: 84px; transform: translate(-50%,-50%); border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg,#f2d67e,#c49a22); box-shadow: 0 0 0 10px rgba(201,162,39,.2), 0 12px 30px rgba(0,0,0,.6); transition: transform .5s var(--res-ease), box-shadow .5s var(--res-ease); }
.res-video-play svg { width: 34px; height: 34px; fill: #16110a; margin-left: 4px; }
.res-video-caption { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 18px; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.res-video-caption small { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: #e8c496; }
.res-video-caption strong { font-family: var(--font-display); font-size: clamp(1rem,2.6vw,1.5rem); color: #fbf3dd; }
.res-video:hover, .res-video:focus-visible { transform: translateY(-4px); border-color: rgba(233,203,110,.85); box-shadow: 0 40px 70px -30px rgba(0,0,0,.95), 0 0 60px -16px rgba(201,162,39,.55); }
.res-video:hover img { transform: scale(1.04); }
.res-video:hover .res-video-play { transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 0 0 14px rgba(201,162,39,.28), 0 14px 34px rgba(0,0,0,.6); }
@media (max-width:600px) { .res-video-play { width: 62px; height: 62px; } .res-video-play svg { width: 26px; height: 26px; } .res-video-caption { left: 16px; bottom: 12px; } }
@media (prefers-reduced-motion:reduce) { .res-video, .res-video img, .res-video-play { transition: none; } }