@import url('guide-prima.css?v=20260803-2');

/* Shared shell for long-form articles inside Elmoria Wiki. */
:root{--edge:clamp(20px,4vw,56px);--space-5:14px}
html{scroll-padding-top:24px}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:16px}
.page{min-height:100vh;background:radial-gradient(1000px 650px at 100% 18%,color-mix(in srgb,var(--color-accent-900) 76%,transparent),transparent 60%),var(--color-bg);text-wrap:pretty}
.wrap{width:auto;max-width:1280px;margin:0 auto;padding-inline:var(--edge)}
.topbar{border-bottom:1px solid var(--color-divider);background:rgba(4,5,4,.56)}
.topbar .wrap{display:flex;align-items:center;gap:var(--space-6);padding-block:7px;font-size:14px;color:color-mix(in srgb,var(--color-text) 62%,transparent)}
.topbar .sp{margin-left:auto}.topbar a{color:inherit;text-decoration:none}.topbar a:hover{color:var(--color-accent)}
.tnum{font-feature-settings:"tnum" 1}.livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-accent)}
.statusrow{display:inline-flex;align-items:center;gap:7px}.st-txt{color:var(--color-accent)}
.mast{position:relative;padding:var(--space-4) 0;background:transparent;border:0}
.mast .wrap{display:flex;align-items:center;gap:var(--space-6)}
.brand{display:flex;flex-direction:column;line-height:1;margin-right:auto;text-decoration:none;color:var(--color-text)}
.brand b{font-family:var(--font-heading);font-weight:600;font-size:22px;letter-spacing:.16em;text-transform:uppercase;color:inherit}
.brand small{font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--color-accent);margin-top:5px}
.navlinks{display:flex;align-items:center;gap:var(--space-6);font-size:14px}
.navlinks a{color:var(--color-text);text-decoration:none;padding:4px 0;position:relative}
.navlinks a:hover,.navlinks a[aria-current=page]{color:var(--color-accent)}
.navlinks a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--color-accent)}
.mast .actions{display:flex;gap:var(--space-3)}
.mast .btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 16px;border-radius:1px;font-family:var(--font-heading);font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.beta-strip{background:color-mix(in srgb,var(--color-accent) 8%,transparent);border-block:1px solid var(--color-accent-800)}
.beta-strip .wrap{display:flex;align-items:center;gap:var(--space-3);padding-block:9px;font-size:14px;color:color-mix(in srgb,var(--color-text) 78%,transparent)}
.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:22px 0 16px;font-size:14px;color:color-mix(in srgb,var(--color-text) 50%,transparent)}
.breadcrumbs a{color:var(--color-accent);text-decoration:none}.breadcrumbs span{opacity:.45}
.hero{position:relative;min-height:clamp(430px,48vw,590px);display:flex;align-items:end;overflow:hidden;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:#111}
.hero::before{background-image:linear-gradient(90deg,rgba(7,8,7,.97) 0%,rgba(7,8,7,.84) 31%,rgba(7,8,7,.18) 63%,rgba(7,8,7,.08) 100%),linear-gradient(0deg,rgba(7,8,7,.72),transparent 48%),var(--hero)}
.hero::after{inset:14px;border:1px solid color-mix(in srgb,var(--color-accent) 22%,transparent)}
.hero-copy{width:min(620px,65%);padding:clamp(34px,6vw,78px)}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-family:var(--font-body);font-size:14px;font-weight:400;letter-spacing:.17em;text-transform:uppercase;color:var(--color-accent)}
.hero h1{margin:0 0 20px;font-family:var(--font-heading);font-size:clamp(40px,6vw,72px);font-weight:var(--font-heading-weight);line-height:.94;letter-spacing:-.035em;text-transform:uppercase}
.lead{margin:0 0 26px;max-width:49ch;font-size:16px;line-height:1.75;color:color-mix(in srgb,var(--color-text) 78%,transparent)}
.meta{display:flex;flex-wrap:wrap;gap:8px}.meta span{padding:7px 10px;border:1px solid color-mix(in srgb,var(--color-accent) 28%,transparent);background:rgba(7,8,7,.45);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 72%,transparent)}
.quick{display:none}
.layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:start;padding-block:clamp(42px,6vw,78px)}
.side{position:sticky;top:24px;align-self:start;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:linear-gradient(145deg,color-mix(in srgb,var(--color-surface) 95%,transparent),color-mix(in srgb,var(--color-bg) 92%,transparent));overflow:hidden}
.side-label{margin:0;padding:18px 20px 14px;font-family:var(--font-heading);font-size:17px;letter-spacing:0;text-transform:none;color:var(--color-text)}
.side nav{display:block;border:0}
.side a{display:block;padding:12px 20px;border-top:1px solid var(--color-divider);color:color-mix(in srgb,var(--color-text) 66%,transparent);text-decoration:none;font-size:14px;line-height:1.35}
.side a:hover{margin:0;border-left:0;color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 5%,transparent)}
.article{min-width:0}
.section{scroll-margin-top:28px;padding:clamp(38px,5vw,62px) 0;border-bottom:1px solid var(--color-divider)}
.section:first-child{padding-top:0}.section+.section{padding-top:clamp(38px,5vw,62px);border-top:0}
.section-head{display:block;margin-bottom:26px}
.section-no{padding-top:9px;font-family:var(--font-heading);font-size:14px;letter-spacing:0;color:var(--color-accent)}
.section h2{margin:0 0 9px;font-family:var(--font-heading);font-size:clamp(27px,3.2vw,38px);font-weight:var(--font-heading-weight);line-height:1.12;letter-spacing:0}
.section-head p{max-width:66ch;margin:0;font-size:14px;line-height:1.7;color:color-mix(in srgb,var(--color-text) 60%,transparent)}
.prose{padding-left:68px}.prose>p,.prose p{font-size:14px;line-height:1.8;color:color-mix(in srgb,var(--color-text) 72%,transparent)}
.prose h3{margin:28px 0 10px;font-family:var(--font-heading);font-size:19px;font-weight:var(--font-heading-weight);color:var(--color-text)}
.prose ul,.prose ol{font-size:14px;line-height:1.65;color:color-mix(in srgb,var(--color-text) 70%,transparent)}
.card,.icon-card,.crystal,.role,.check,.figure,.step{border-color:var(--color-divider);border-radius:0;background:linear-gradient(145deg,color-mix(in srgb,var(--color-surface) 94%,transparent),color-mix(in srgb,var(--color-bg) 95%,transparent))}
.card b,.crystal b,.role b,.next b{font-family:var(--font-heading);font-weight:var(--font-heading-weight);color:var(--color-text)}
.card p,.card span,.role p,.check span,.crystal small{color:color-mix(in srgb,var(--color-text) 60%,transparent)}
.card .tag,.timeline em{color:var(--color-accent);border-color:var(--color-accent-800)}
.table-scroll{border-color:var(--color-divider)}.table-scroll table{background:color-mix(in srgb,var(--color-bg) 96%,black)}
.table-scroll th{background:color-mix(in srgb,var(--color-surface) 88%,black);color:var(--color-accent)}.table-scroll th,.table-scroll td{border-color:var(--color-divider)}
.note,.warning{border-left-color:var(--color-accent);background:linear-gradient(90deg,color-mix(in srgb,var(--color-accent) 8%,transparent),transparent)}
.warning{border-left-color:#b85446}.note b,.warning b{color:var(--color-accent)}
.next{border-color:var(--color-divider);border-radius:0;background:color-mix(in srgb,var(--color-surface) 80%,transparent)}
.next span,.next i,.source{color:var(--color-accent)}
.foot{border-top:1px solid var(--color-divider);margin-top:var(--space-8);background:transparent}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-8);padding-block:var(--space-8)}
.foot h5{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 55%,transparent);margin:0 0 var(--space-3)}
.foot a{display:block;margin:0;padding:3px 0;color:color-mix(in srgb,var(--color-text) 72%,transparent);text-decoration:none;font-size:14px}.foot a:hover{color:var(--color-accent)}
.foot .disc{max-width:40ch;font-size:14px;line-height:1.6;color:color-mix(in srgb,var(--color-text) 50%,transparent)}.foot .brand b{font-size:18px}
@media(max-width:1020px){.layout{grid-template-columns:1fr}.side{position:static}.side-label{padding-bottom:10px}.side nav{display:flex;overflow-x:auto;scrollbar-width:none}.side a{flex:0 0 auto;min-width:145px;border-left:1px solid var(--color-divider)}}
@media(max-width:920px){.navlinks{display:none}.topbar .sp~a{display:none}.hero-copy{width:72%}}
@media(max-width:720px){.hero{min-height:540px}.hero::before{background-image:linear-gradient(0deg,rgba(7,8,7,.98) 0%,rgba(7,8,7,.76) 48%,rgba(7,8,7,.1) 78%),var(--hero);background-position:70% center}.hero-copy{width:100%;padding:34px}.lead{font-size:14px}.prose{padding-left:0}.section-head{grid-template-columns:38px minmax(0,1fr);gap:10px}.foot .wrap{grid-template-columns:1fr}.topbar .wrap{gap:12px}.beta-strip .wrap{align-items:flex-start}}
@media(max-width:520px){.mast .actions{display:none}.hero{min-height:530px}.hero::after{inset:9px}.hero-copy{padding:30px 26px}.hero h1{font-size:37px}.layout{padding-top:32px}.side{margin-inline:calc(var(--edge)*-.5)}.section-head h2{font-size:25px}}
