/* 3D carousel for the brit stages (#how). Default = snap list; JS adds .is-3d when motion is allowed. */
html.ng[data-theme] #how .ng-car{position:relative;margin:.2rem 0 .4rem;min-width:0}
html.ng[data-theme] #how .ng-car-stage{display:flex;gap:.8rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:.8rem 9% 2.4rem;margin-bottom:-1.2rem;scrollbar-width:none;overscroll-behavior-x:contain;position:relative;outline:none;border-radius:var(--ng-r,26px)}
html.ng[data-theme] #how .ng-car-stage::-webkit-scrollbar{display:none}
html.ng[data-theme] #how .ng-car-stage:focus-visible{box-shadow:0 0 0 3px rgba(194,154,69,.55)}
html.ng[data-theme] #how .ng-car .ng-slide{flex:0 0 82%;scroll-snap-align:center;position:relative;overflow:hidden;text-align:center;padding:1.5rem 1.2rem 1.3rem!important;background:linear-gradient(165deg,rgba(255,255,255,.92),rgba(250,243,228,.86))!important;border:1px solid rgba(194,154,69,.38)!important;box-shadow:0 12px 22px -16px rgba(120,88,24,.45),inset 0 1px 0 rgba(255,255,255,.9)!important}
html.ng[data-theme] #how .ng-car .ng-slide::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--ng-grad,linear-gradient(90deg,#c29a45,#ebd193,#c29a45));opacity:.85}
html.ng[data-theme] #how .ng-car .ng-step{position:absolute;top:.55rem;inset-inline-end:.95rem;font-family:"Frank Ruhl Libre",serif;font-weight:700;font-size:2.6rem;line-height:1;background:var(--ng-grad,linear-gradient(90deg,#b08d3c,#ebd193));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;opacity:.85;pointer-events:none}
html.ng[data-theme] #how .ng-car .ng-slide h3{font-size:1.3rem;margin:.55rem 0 .5rem}
html.ng[data-theme] #how .ng-car .ng-slide ul{padding:0!important;margin:0;list-style:none}
html.ng[data-theme] #how .ng-car .ng-slide li{font-size:.95rem}
html.ng[data-theme] #how .ng-car-dots{position:relative;z-index:30;display:flex;justify-content:center;gap:.35rem;margin:.1rem 0 0}
html.ng[data-theme] #how .ng-dot{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;border-radius:50%}
html.ng[data-theme] #how .ng-dot::before{content:"";display:block;width:9px;height:9px;border-radius:9px;background:rgba(176,141,60,.35);transition:width .45s cubic-bezier(.2,.8,.2,1),background .45s}
html.ng[data-theme] #how .ng-dot[aria-current="true"]::before{width:28px;background:var(--ng-grad,#b08d3c);box-shadow:0 2px 8px -2px rgba(150,110,30,.6)}
html.ng[data-theme] #how .ng-dot:focus-visible{outline:2px solid #b08d3c;outline-offset:1px}
html.ng[data-theme] #how .ng-car-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0}
/* ---- 3D coverflow ---- */
html.ng[data-theme] #how .ng-car.is-3d{overflow:hidden;padding:.4rem 0 .2rem}
html.ng[data-theme] #how .ng-car.is-3d .ng-car-stage{display:block;overflow:visible;height:calc(var(--h,320px) + 2.2rem);padding:0;margin-bottom:0;perspective:1100px;perspective-origin:50% 40%;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;scroll-snap-type:none}
html.ng[data-theme] #how .ng-car.is-3d .ng-car-stage.dragging{cursor:grabbing}
html.ng[data-theme] #how .ng-car.is-3d .ng-car-stage::after{content:"";position:absolute;left:50%;bottom:.1rem;width:calc(var(--cw,280px) * 1.25);height:2.2rem;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(194,154,69,.32),rgba(194,154,69,0) 70%);filter:blur(2px);pointer-events:none}
html.ng[data-theme] #how .ng-car.is-3d .ng-slide{position:absolute!important;top:.5rem;left:calc(50% - var(--cw,280px) / 2);width:var(--cw,280px)!important;min-height:var(--h,0px);box-sizing:border-box;margin:0!important;transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:box-shadow .5s,border-color .5s;background:linear-gradient(165deg,#fffefb,#fbf5e8)!important}
html.ng[data-theme] #how .ng-car.is-3d .ng-slide:not(.is-active){cursor:pointer;border-color:rgba(194,154,69,.5)!important;box-shadow:0 18px 36px -22px rgba(120,88,24,.5)!important}
html.ng[data-theme] #how .ng-car.is-3d .ng-slide.is-active{border-color:rgba(194,154,69,.7)!important;box-shadow:0 26px 50px -24px rgba(120,88,24,.55),0 0 0 1px rgba(235,209,147,.5),inset 0 1px 0 rgba(255,255,255,.9)!important}
html.ng[data-theme] #how .ng-car.is-3d .ng-slide.is-active .s3-ic{box-shadow:0 0 0 6px rgba(235,209,147,.25),0 10px 22px -10px rgba(150,110,30,.9)}
html.ng[data-theme] #how .ng-car.is-3d .ng-slide .ng-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(247,240,224,.5),rgba(240,230,205,.62));opacity:var(--sh,0);pointer-events:none;border-radius:inherit}
@media (min-width:720px){
 html.ng[data-theme] #how .ng-car .ng-slide{flex:0 0 31%}
 html.ng[data-theme] #how .ng-car-stage{justify-content:center;padding-inline:1rem}
 html.ng[data-theme] #how .ng-car.is-3d .ng-car-stage{perspective:1400px}
}
@media (max-width:719px){
 html.ng[data-theme] #how .ng-car.is-3d{margin-inline:-1.25rem}
}
@media (prefers-reduced-motion:reduce){html.ng[data-theme] #how .ng-car .ng-slide{transform:none!important}}
html.ng.a11y-noanim #how .ng-car .ng-slide{transform:none!important}