:root{--reference-scale:.75}
body[data-view=rings] #scene,body[data-view=rings] .vignette{display:none}
.reference-rings-art{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:auto;background:#080b0a;filter:brightness(.88) saturate(.88)}
.reference-rings-art image,.reference-ring-layer,.reference-ring-foot,.reference-orbit{pointer-events:none}
.reference-ring-layer{opacity:0;transform:translateY(0);transition:transform .6s cubic-bezier(.22,.65,.25,1),opacity 0s .6s,filter .25s;filter:brightness(1)}
.reference-ring-layer[data-active=true]{transition:transform .6s cubic-bezier(.22,.65,.25,1),opacity 0s,filter .25s;filter:brightness(1.06)}
.reference-ring-foot{opacity:0;transition:opacity 0s .6s}
.reference-ring-foot[data-active=true]{transition:opacity 0s}
.reference-ring-hit{fill:transparent;pointer-events:fill}
.reference-orbit{filter:drop-shadow(0 0 4px #f5c75f)}
body[data-view=rings] #tree-labels{z-index:2;pointer-events:none}
.reference-plaque{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:11px;width:64px;padding:12px 8px 16px;border:1px solid #c6b17c30;border-radius:28px 28px 6px 6px;background:linear-gradient(180deg,#28241e9e,#101614cf);color:#d0c3a1;font:21px/1.12 var(--serif);white-space:nowrap;transform:translateX(-50%) scale(var(--plaque-scale));transform-origin:top center;pointer-events:auto;transition:color .25s,border-color .25s,background .25s;box-shadow:none}
span.reference-plaque{cursor:default}
.reference-seal{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;border:1px solid #bca97755;background:#6e674129;color:#c9ba8f;font-size:23px;line-height:1}
.reference-name{writing-mode:vertical-rl;letter-spacing:4px;line-height:1.12}
.reference-plaque[data-active=true]{color:#ecd9ac;border-color:#d6bf7770;background:linear-gradient(180deg,#393022b3,#151c16df)}
body[data-view=rings] .masthead{top:calc(34px * var(--reference-scale));z-index:6}
body[data-view=rings] .brand{height:calc(72px * var(--reference-scale));gap:calc(12px * var(--reference-scale));padding:calc(7px * var(--reference-scale)) calc(23px * var(--reference-scale)) calc(7px * var(--reference-scale)) calc(8px * var(--reference-scale));border-radius:40px;background:#12131ce0;border-color:#b1a6883d}
body[data-view=rings] .brand-mark{width:calc(52px * var(--reference-scale));height:calc(52px * var(--reference-scale));background:#333034}
body[data-view=rings] .brand-mark img{width:70%;height:70%}
body[data-view=rings] .brand strong{font-size:calc(27px * var(--reference-scale));letter-spacing:calc(5px * var(--reference-scale))}
body[data-view=rings] .brand small{font-size:calc(14px * var(--reference-scale));letter-spacing:calc(2px * var(--reference-scale));margin-top:calc(4px * var(--reference-scale))}
body[data-view=rings] .motion-toggle{opacity:.25}
body[data-view=rings] .motion-toggle:hover,body[data-view=rings] .motion-toggle:focus-visible{opacity:1}
body[data-view=rings] .age-navigation{z-index:4;bottom:clamp(22px,6.67vh,80px);width:min(94vw,calc(950px * var(--reference-scale)))}
body[data-view=rings] .age-navigation nav{gap:calc(14px * var(--reference-scale))}
body[data-view=rings] .age-navigation button{height:calc(70px * var(--reference-scale));padding:0 5px;font-size:calc(22px * var(--reference-scale));border-radius:calc(15px * var(--reference-scale));background:#0e111cd9;border:1px solid #9c92794d;color:#bcb08d}
body[data-view=rings] .age-navigation button:hover,body[data-view=rings] .age-navigation button[data-active=true]{background:#20221de6;border-color:#d5c08d88;color:#e7d49f;box-shadow:none}
.reduced-motion .reference-ring-layer,.reduced-motion .reference-ring-foot{transition:none;transform:none!important}
@media(max-width:480px){body[data-view=rings] .age-navigation button{font-size:max(10px,calc(22px * var(--reference-scale)))}body[data-view=rings] .age-navigation nav{gap:4px}body[data-view=rings] .masthead{left:10px;right:10px}}