/* SHEMA's index: dimensional objects above a real landscape. */
body{isolation:isolate;background:#08271f}
#structure{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 280ms var(--ease);transform:perspective(1100px) rotateX(0deg) rotateY(0deg)}
.scene.is-raised #structure{transform:perspective(1100px) translateY(-7px) rotateX(9deg) rotateY(-3deg)}
#strapLinks{position:absolute;inset:0;pointer-events:none}
.band-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 9px 7px #00180f88)}
.band-face{fill:url(#bandMetal)}
.band-side{fill:#344934}
.band-edge{fill:none;stroke:#ccd0b2;stroke-width:.7;opacity:.55}
.snake-light{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4;fill:none;stroke-linecap:round}
.snake-light path{animation:snake 19s linear infinite}
#snakeTrail{stroke:#d6ac46;stroke-width:2;stroke-dasharray:68 932;opacity:.8;filter:drop-shadow(0 2px 3px #c79a3a77)}
#snakeHead{animation-name:snake-head;stroke:#ffdf86;stroke-width:2.7;stroke-dasharray:4 996;filter:drop-shadow(0 1px 3px #ffe09899)}
@keyframes snake{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}



.landscape{position:fixed;inset:0;z-index:-2;background-image:linear-gradient(90deg,rgba(4,30,23,.94) 0%,rgba(5,32,24,.82) 36%,rgba(6,30,23,.36) 62%,rgba(6,30,23,.06) 100%),linear-gradient(0deg,rgba(4,26,20,.65),transparent 48%,rgba(4,26,20,.22)),url(assets/mountain-runner.png);background-size:cover;background-position:center;pointer-events:none}
header{max-width:none;height:80px;margin:0 3.5%;padding:0;border-color:#e1e3d229;position:relative}
.logo{width:190px;height:72px}.header-side{gap:24px}.demo{color:#eeeadd}.switch{background:#082b22bd;border-color:#c1c3ac66}.switch button{min-height:36px}
main{max-width:1600px;padding:30px 4.5% 14px;margin:auto}
.intro{display:block}.intro h1{font-size:clamp(40px,4.1vw,62px);margin-bottom:12px}.intro p{font-size:14px;color:#dddccf}
#ringIndex{width:60%;max-width:760px}.workspace{display:block;margin:30px 0 0}.universe{min-width:0}
.scene{width:100%;max-width:630px;aspect-ratio:600/510;position:relative;isolation:isolate;margin:0 auto}
.node{--size:104px;position:absolute;left:var(--x);top:var(--y);width:152px;min-height:146px;transform:translate(-50%,-50%);border:0;background:none;padding:0;display:flex;align-items:center;flex-direction:column;gap:12px;z-index:2;perspective:650px;-webkit-tap-highlight-color:transparent}
.node:active{transform:translate(-50%,-50%) scale(.98)}
.ring{position:relative;flex-shrink:0;width:var(--size);height:var(--size);display:grid;place-items:center;border-radius:50%;padding:10px;background:conic-gradient(from -35deg,#e2ddc1 0deg,#8c9a83 42deg,#3c5745 88deg,#7f947c 148deg,#ced3b6 190deg,#7b8c71 228deg,#244233 270deg,#a9b398 327deg,#e2ddc1);box-shadow:inset 0 1px 1px #fcf4d6b3,inset 0 -2px 2px #071e1bb3,0 3px 2px #304634,0 9px 16px #00150ec4;transform:translateZ(0);transition:box-shadow 300ms var(--ease);will-change:auto}
.ring:before{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid #f6efce66;pointer-events:none}
.core{position:relative;width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(ellipse at 35% 15%,#355b43,#173f2e 55%,#082b21);box-shadow:inset 0 2px 6px #001b13cc,0 1px 1px #e3e1b780;overflow:hidden;border:0}
.core:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,#f7f2d514,transparent 55%);pointer-events:none}
.core svg{width:34px;height:34px;stroke:#f3eedb;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 1px #001b1466)}
.assembly{position:relative;display:block;flex-shrink:0;width:var(--size);height:var(--size);transform-style:preserve-3d;transform:translateY(0) rotateX(0) rotateY(0);transition:transform 380ms var(--ease)}
.case-layer,.caseback{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;pointer-events:none}
.case-layer{background:linear-gradient(100deg,hsl(77 12% var(--shade)),#73806c 30%,#334431 68%,#182b20);transform:translateZ(var(--depth));box-shadow:inset 0 0 1px #c8cbb344}
.caseback{background:#152a20;transform:translateZ(-21px);box-shadow:0 15px 24px #00191099}
.central .case-layer{background:linear-gradient(100deg,#605330,#aa9254 30%,#665830 68%,#3c381f)}
.node.is-lifted{z-index:3}.is-lifted .assembly{transform:translateY(-14px) rotateX(var(--rx,28deg)) rotateY(var(--ry,-6deg))}
.is-lifted .ring{box-shadow:inset 0 1px 1px #fcf4d6b3,inset 0 -2px 2px #071e1bb3,0 1px 1px #2a3e2b}
.node .label{font-size:15px;font-weight:700;line-height:1.2;max-width:150px;text-shadow:0 2px 9px #00180f}
.node .state{font-size:11px;line-height:1.2;color:#c0c6b8;margin-top:-5px}
.node.inactive .ring{background:conic-gradient(from -35deg,#718573,#3d5b49,#68806a,#244432,#718573);opacity:1;box-shadow:inset 0 1px 1px #f2efd433,0 3px 5px #001a1577}
.node.inactive .core{background:#193d2e}.node.inactive .core svg{stroke:#b7c4b5}.node.inactive .label{color:#c3cbbc}.node.inactive .assembly{opacity:1}
.node.central{--size:144px;min-height:144px;width:160px;gap:0}.central .ring{padding:11px;background:conic-gradient(from -35deg,#ead9a2,#b39754 40deg,#69592b 88deg,#a78f49 146deg,#eddda4 190deg,#bb9c51 230deg,#6a5726 278deg,#e3d29a)}
.central .core{display:flex;flex-direction:column;justify-content:center;gap:5px;background:radial-gradient(ellipse at 30% 10%,#3b5334,#102f22 70%)}.central strong{font:700 29px/1.1 Domaine}.central .core svg{width:26px;height:26px;stroke:#e1c67e}
.node:focus-visible{outline:none}.node:focus-visible .ring{outline:2px solid #f2db97;outline-offset:6px}.node:focus-visible .label{text-decoration:underline;text-underline-offset:5px}
.scene-controls{display:flex;justify-content:center;align-items:center;gap:24px;font-size:12px;color:#d0d5c7;margin-top:22px}.text-button{font-size:12px;color:#e8e6d7;border:0;background:none;padding:12px 0;text-decoration:underline;text-underline-offset:5px;min-height:44px}
.bottom{width:60%;border-color:#d6d6c033;margin-top:12px;padding:14px 0 0;font-size:11px;color:#c3cbbb}
.arrival .assembly{animation:arrive 1100ms var(--ease) both;animation-delay:var(--delay)}
@keyframes arrive{0%{transform:translateY(-18px) rotateX(36deg) rotateY(-12deg)}100%{transform:translateY(0) rotateX(0) rotateY(0)}}
.paused .snake-light path{animation-play-state:paused}.paused .assembly{animation:none!important}
.category{border-bottom:1px solid #c1c3ac33;padding:0 0 12px;margin:0 0 12px}.category summary,.daily-settings summary{cursor:pointer;font-weight:700;padding:7px 0;min-height:40px}.category ul{padding-left:20px;margin:8px 0;color:var(--muted);font-size:13px;line-height:1.65}.category li+li{margin-top:7px}.new-category{background:none;border:1px dashed #81917a;border-radius:10px;min-height:46px;text-align:left;padding:10px 14px;color:#e3d3a4}.category-editor label{display:grid;gap:8px}.category-editor>div{display:flex;gap:18px;align-items:center;margin-top:12px}.empty-category{margin:0;font-size:13px}.daily-settings{margin-top:12px}.daily-settings label{margin:10px 0}.destination-categories{margin-top:24px}
#ringDestination{max-width:620px;min-height:calc(100dvh - 195px)}.back-link{display:flex;align-items:center;gap:12px;background:none;border:0;padding:8px 0 22px;min-height:44px;font-size:14px}.back-link span{font-size:22px}.detail{border:0;padding:20px 28px 28px;min-height:0;background:#082b22f0;border-radius:16px;box-shadow:0 20px 60px #001d1633}.detail:focus{outline:none}.detail h2{margin-top:14px}.in-destination .landscape{background-position:center}.in-medical .landscape{opacity:.14}.medical{padding-bottom:20px}.medical-actions{background:#08271f}.in-medical .demo{color:var(--muted)}
@media(min-width:1600px){#ringIndex{width:62%}.scene{max-width:680px}}
@media(max-width:1050px){#ringIndex{width:68%}.node{--size:90px;width:136px;min-height:132px}.node .label{font-size:14px;max-width:132px}.node.central{--size:128px;min-height:128px}.scene{max-width:580px}.landscape{background-position:58% center}.intro h1{font-size:46px}.demo{display:none}}
@media(max-width:700px){header{height:74px;margin:0 20px;gap:8px}.logo{width:150px;height:62px}.switch button{font-size:12px;padding:0 12px}.header-side{gap:0}main{padding:25px 18px 16px}#ringIndex{width:100%;max-width:none}.intro h1{font-size:40px;max-width:10ch}.intro p{max-width:27ch;font-size:13px;line-height:1.6}.landscape{background-size:auto 100%;background-position:62% top;background-image:linear-gradient(90deg,#05291ff0 0%,#05291fb3 52%,#05291f44 100%),linear-gradient(0deg,#06281fe6 0%,#06281f88 45%,transparent 90%),url(assets/mountain-runner.png)}.workspace{margin-top:18px}.scene{max-width:470px;aspect-ratio:600/630}.connections{top:0;height:100%}.node{--size:80px;width:118px;min-height:123px;gap:10px}.node .ring{width:var(--size);height:var(--size);padding:8px}.node .label{font-size:12px;max-width:108px}.node .state{font-size:10px}.node.central{--size:112px;width:120px;min-height:112px}.central .ring{padding:9px}.central strong{font-size:25px}.core svg{width:29px;height:29px}.central .core svg{width:24px;height:24px}.scene-controls{margin-top:22px;gap:20px;font-size:11px}.scene-controls .text-button{font-size:11px}.bottom{width:100%;margin-top:12px;font-size:10px}.bottom p{max-width:none}.detail{padding:22px 20px}#ringDestination{min-height:calc(100dvh - 190px)}.in-destination .landscape{opacity:.6}}
@media(max-width:360px){.node{--size:72px;width:104px}.node .label{font-size:11px;max-width:100px}.node.central{--size:100px}.intro h1{font-size:36px}.switch button{padding:0 10px}header{margin:0 14px}.logo{width:135px}}
@media(prefers-reduced-motion:reduce){.assembly,.strap-link,.snake-light path{animation:none!important;transition:none!important}.node.is-lifted .assembly{transform:none!important}.snake-light{display:none}.strap-link.raised{translate:0 0!important}}

.medical-tools{margin:28px 0 34px;max-width:970px}.medical-tools h2{font:700 28px Domaine;margin:0 0 18px}.medical-tools .category{max-width:640px}

@keyframes snake-head{from{stroke-dashoffset:-64}to{stroke-dashoffset:-1064}}

/* One molded band contains the six rings; only Orden has a separate case. */
.node:not(.central) .case-layer,.node:not(.central) .caseback{display:none}
.node:not(.central) .ring{box-shadow:inset 0 1px 1px #fcf4d666,inset 0 -1px 2px #071e1b99; background:conic-gradient(from -35deg,#b9c1a5,#657b61 85deg,#a6b495 190deg,#3e5a43 275deg,#b9c1a5)}
.arrival .assembly{animation:none}
.node:not(.central) .assembly{transform:none}
#snakeTrail{stroke-width:1.6;opacity:.85}
#snakeHead{stroke-width:2.2}
@media(prefers-reduced-motion:reduce){#structure,.scene.is-raised #structure{transition:none;transform:none}}

.shape-choices{display:flex;gap:4px;margin-top:20px;width:fit-content;padding:3px;border:1px solid #c1c3ac66;border-radius:24px;background:#082b22bd}.shape-choices button{border:0;border-radius:20px;min-height:38px;padding:0 20px;background:none;font-size:13px}.shape-choices button[aria-pressed=true]{background:#edeae1;color:#08271f;font-weight:700}
body[data-shape=square] .ring,body[data-shape=square] .case-layer,body[data-shape=square] .caseback{border-radius:27%}
body[data-shape=square] .ring:before{border-radius:25%}
body[data-shape=square] .core{border-radius:23%}
body[data-shape=square] .central .ring{border-radius:27%}
.workspace{margin-top:24px}

/* Smoked liquid glass: dense seats, transparent necks, a fine refractive rim. */
.glass-backdrop{position:absolute;inset:0;mask-image:var(--glass-mask);-webkit-mask-image:var(--glass-mask);mask-size:100% 100%;-webkit-mask-size:100% 100%;backdrop-filter:blur(1.5px) saturate(.75);-webkit-backdrop-filter:blur(1.5px) saturate(.75);background:#c4cbd006}
.band-svg{filter:drop-shadow(0 5px 5px #00000030)}
#snakeTrail,#snakeHead{visibility:hidden;animation:none;filter:none}
.ribbon-surface{filter:drop-shadow(0 2px 1px #111a1a55)}
.ribbon-surface path{animation:none;stroke:none}
@media(prefers-reduced-motion:reduce){.ribbon-surface{display:none}}

/* Oblique view of solid columns. Every face and wall shares one camera. */
#structure{transform:perspective(1400px) rotateX(38deg) rotateY(-5deg);transform-origin:50% 50%;transition:transform 600ms var(--ease)}
.scene.is-raised #structure{transform:perspective(1400px) translateY(-8px) rotateX(49deg) rotateY(4deg)}
#nodes{position:absolute;inset:0;transform-style:preserve-3d}
.node{transform-style:preserve-3d;perspective:none}
.node .assembly,.node:not(.central) .assembly{transform:scaleZ(1.8);transform-style:preserve-3d}
.node:not(.central) .case-layer,.node:not(.central) .caseback{display:block}
.case-layer{backface-visibility:visible;background:linear-gradient(105deg,#1c3228,#72816b 24%,#4a614c 40%,#172e22 78%,#071c15);box-shadow:inset 0 0 1px #b7c4aa55}
.caseback{box-shadow:0 17px 20px #00150ec2}
.node .ring{outline:1px solid #d7dcca55;outline-offset:-1px}
.node .label{transform:translateY(9px) rotateX(-20deg);transform-origin:center top}
.node .state{transform:translateY(7px) rotateX(-20deg)}
#strapLinks{transform-style:preserve-3d;transform:translateZ(-3px)}
.glass-backdrop{background:transparent;backdrop-filter:blur(.65px) saturate(1.12);-webkit-backdrop-filter:blur(.65px) saturate(1.12)}
.band-svg{filter:drop-shadow(0 7px 4px #00140c33)}
.node.inactive .ring{background:linear-gradient(130deg,#dce1e43b,#9ca6ad12 40%,#67757d29 70%,#e0e7ec33);box-shadow:inset 0 1px 1px #f4f7fa66,inset 0 -1px 2px #39464e66;outline-color:#dce1e455}
.node.inactive .core{background:#bdc8d00a;box-shadow:inset 0 1px 4px #0f202544,0 1px 1px #e3e9ed22}
.node.inactive .core svg{stroke:#d0d7da;filter:none}
.node.inactive .case-layer{background:none;box-shadow:inset 0 0 0 1px #c1cbd114}
.node.inactive .caseback{background:#a8b5bd0c;box-shadow:0 12px 18px #00171055,inset 0 0 0 1px #cbd3d62b}
.node.inactive .label,.node.inactive .state{color:#d2d8d9}
.ribbon-surface{filter:drop-shadow(0 2px 1px #111a1a66)}
.ribbon-surface path{fill:none;stroke-width:.85;stroke-linejoin:round;stroke-linecap:round;opacity:.83;animation:none}
.snake-light{transform:translateZ(1px);transform-style:preserve-3d}
@media(max-width:700px){#structure{transform:perspective(1100px) rotateX(32deg) rotateY(-4deg)}.scene.is-raised #structure{transform:perspective(1100px) translateY(-5px) rotateX(42deg) rotateY(3deg)}.node .assembly,.node:not(.central) .assembly{transform:scaleZ(1.5)}.ribbon-surface path{stroke-width:.65}}
@media(prefers-reduced-motion:reduce){#structure,.scene.is-raised #structure{transform:perspective(1400px) rotateX(38deg) rotateY(-5deg);transition:none}.snake-light{display:block}.ribbon-surface{display:block}}
.ribbon-surface path:nth-child(1){stroke:#e4d2a0}
.ribbon-surface path:nth-child(2){stroke:#ac915f}
.ribbon-surface path:nth-child(3){stroke:#f4e6c4}
.node .label{transform:translateY(16px) rotateX(-20deg)}
.node .state{transform:translateY(14px) rotateX(-20deg)}
/* Clip empty projected SVG bounds, while retaining the complete visible seats. */
#ringIndex{overflow-x:clip;overflow-y:visible}

/* Frontal centered rest; pitch only on hover, with no lateral rotation. */
#structure{transform:perspective(1400px) rotateX(19deg);transition:transform 650ms var(--ease)}
.scene.is-raised #structure{transform:perspective(1400px) rotateX(48deg)}
.node .label{transform:translateY(11px);transition:transform 650ms var(--ease)}
.node .state{transform:translateY(9px);transition:transform 650ms var(--ease)}
.scene.is-raised .node .label{transform:translateY(16px) rotateX(-20deg)}
.scene.is-raised .node .state{transform:translateY(14px) rotateX(-20deg)}
.band-volume{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:.2}
.band-volume.is-base{opacity:.75;filter:drop-shadow(0 8px 7px #00140c66)}
.ribbon-surface path{stroke-width:1.05;opacity:.9}
@media(max-width:700px){#structure{transform:perspective(1100px) rotateX(16deg)}.scene.is-raised #structure{transform:perspective(1100px) rotateX(44deg)}.ribbon-surface path{stroke-width:.85}}
@media(prefers-reduced-motion:reduce){#structure,.scene.is-raised #structure{transform:perspective(1400px) rotateX(19deg);transition:none}.node .label,.node .state{transition:none}}

.scene-controls{margin-top:32px}

/* Names belong to the face; hit targets remain stationary after arrival. */
.node:not(.central) .core{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:5px 3px}
.node:not(.central) .core svg{width:23px;height:23px;flex-shrink:0}
.inset-label{display:block;max-width:100%;font:700 12px/1.13 Averta,sans-serif;text-align:center;color:#edeae1;text-wrap:balance;letter-spacing:-.015em}
.node.inactive .inset-label{color:#d2d8d9}
#structure{transition:none}
.scene.is-raised #structure{transform:perspective(1400px) rotateX(19deg)}
@media(max-width:1050px){.inset-label{font-size:10.5px}.node:not(.central) .core svg{width:20px;height:20px}}
@media(max-width:700px){.inset-label{font-size:10.5px;line-height:1.1}.node:not(.central) .core{gap:3px;padding:3px 1px}.node:not(.central) .core svg{width:18px;height:18px}.scene.is-raised #structure{transform:perspective(1100px) rotateX(16deg)}}
@media(max-width:360px){.inset-label{font-size:8.5px}.node:not(.central) .core svg{width:16px;height:16px}}

/* The photographic surface dissolves into the selected app appearance. */
html {overflow-x:clip;background:transparent;}
body {position:relative;--page-rgb:237,234,225;--ink:#013220;--muted:#354d40;background:transparent;color:var(--ink);}
body[data-theme="olive"] {--page-rgb:28,35,23;--ink:#eeeadd;--muted:#d6dccb;}
body[data-theme="black"] {--page-rgb:10,10,10;--ink:#eeeadd;--muted:#d7d2c7;}
.landscape {position:absolute;z-index:0;inset:0;background-image:linear-gradient(to bottom,rgba(var(--page-rgb),1),rgba(var(--page-rgb),0) 12%,rgba(var(--page-rgb),0) 84%,rgba(var(--page-rgb),1)),linear-gradient(90deg,rgba(var(--page-rgb),.98) 0%,rgba(var(--page-rgb),.88) 39%,rgba(var(--page-rgb),.26) 82%,rgba(var(--page-rgb),1) 100%),linear-gradient(0deg,rgb(var(--page-rgb)) 0%,rgba(var(--page-rgb),0) 48%),url(assets/mountain-runner.png);background-size:cover;background-position:58% top;}
/* Match the parent color scheme so a transparent iframe does not acquire a black canvas. */
html:has(body[data-theme="light"]) {color-scheme:normal;}
/* Long, eased veils soften the photo edges without blurring the original image. */
body[data-theme="olive"] .landscape {opacity:.85;}
body[data-theme="black"] .landscape {opacity:.68;}
/* The photograph sits on the shared cotton canvas, with no rectangular edge. */
body[data-theme="light"] {background:rgb(var(--page-rgb));}
body[data-theme="light"] .landscape {
 opacity:.42;
 background-image:url(assets/mountain-runner.png);
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 30%,#000 65%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 12%,#000 80%,transparent 100%);
 mask-image:linear-gradient(90deg,transparent 0%,transparent 30%,#000 65%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 12%,#000 80%,transparent 100%);
 -webkit-mask-composite:source-in;
 mask-composite:intersect;
}

main {position:relative;z-index:1;padding-top:clamp(24px,3vw,38px);padding-bottom:28px;}
.intro h1 {color:var(--ink);text-wrap:balance;}
.intro p {color:var(--muted);}
.central strong {color:#edeae1;}
body[data-theme="light"] .node.inactive .inset-label,body[data-theme="light"] .node.inactive .state {color:#42554a;}
body[data-theme="light"] .node.inactive .core svg {stroke:#42554a;}
body[data-theme="light"] .node.inactive .ring {outline-color:#41594c40;}
.scene-controls {margin:30px 0 0;padding:22px 0 4px;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent);color:var(--ink);}
.scene-controls p {margin:0;max-width:36ch;}
.scene-controls strong {display:block;font:700 clamp(22px,2.8vw,28px)/1.15 Domaine,serif;letter-spacing:-.015em;text-wrap:balance;}
.scene-controls span {display:block;margin-top:9px;color:var(--muted);font:400 14px/1.5 Gopher,sans-serif;}
/* Shared depth textures preserve the original silhouette without repeated filters. */
.band-volume {opacity:.2;}

@media(max-width:700px){.landscape{background-position:62% top;background-image:linear-gradient(to bottom,rgba(var(--page-rgb),1),rgba(var(--page-rgb),0) 12%,rgba(var(--page-rgb),0) 84%,rgba(var(--page-rgb),1)),linear-gradient(90deg,rgba(var(--page-rgb),.97),rgba(var(--page-rgb),.72) 65%,rgba(var(--page-rgb),.48)),linear-gradient(0deg,rgb(var(--page-rgb)),transparent 65%),url(assets/mountain-runner.png)}.scene-controls{margin-top:24px;padding-top:18px}.scene-controls strong{font-size:23px;max-width:25ch}.scene-controls span{font-size:13px}}

/* Do not flash a static camera pose before the one-time arrival starts. */
body:not([data-scene-ready="true"]) #structure {visibility:hidden;}

/* Desktop: enlarge ring faces by 30% while retaining the previous compact gaps. */
@media(min-width:820px){
 #ringIndex{width:78%;max-width:988px;}
 .scene{--seat-radius:75.6px;max-width:717px;margin-inline:0;transform:translateX(calc(var(--seat-radius) - 18%));}
 .node{--size:135.2px;width:197.6px;min-height:189.8px;}
 .node.central{--size:187.2px;width:208px;min-height:187.2px;}
 .node .ring{padding:13px;}
 .central .ring{padding:14.3px;}
 .inset-label{font-size:15.6px;}
 .node:not(.central) .core{gap:6.5px;}
 .node:not(.central) .core svg{width:29.9px;height:29.9px;}
 .central .core svg{width:33.8px;height:33.8px;}
 .central strong{font-size:37.7px;}
 .scene-controls{width:100%;}
 .scene-controls p{flex:1;min-width:0;max-width:none;}
 .scene-controls strong{max-width:38ch;}
}
@media(min-width:820px) and (max-width:1050px){
 #ringIndex{width:88.4%;}
 .scene{--seat-radius:66.5px;max-width:655px;}
 .node{--size:117px;width:176.8px;min-height:171.6px;}
 .node.central{--size:166.4px;min-height:166.4px;}
 .inset-label{font-size:13.65px;}
 .node:not(.central) .core svg{width:26px;height:26px;}
}
@media(min-width:1600px){#ringIndex{width:80.6%;}.scene{max-width:767px;}}

/* Fit the complete desktop constellation beneath the real patient header.
   Ring face sizes stay fixed; only the vertical distance between seats adapts. */
@media(min-width:820px){.scene{max-height:max(452px,calc(var(--ring-available-height,900px) - 210px));}}

@media(min-width:820px){html[data-fit-compact="true"] main{padding-top:4px}html[data-fit-compact="true"] .intro p{margin:0;font-size:13px}html[data-fit-compact="true"] .workspace{margin-top:12px}}

/* Raise the introduction and give the recovered height back to the ring layout. */
@media(min-width:820px){html main{padding-top:4px}html .intro h1{margin-bottom:8px}html .intro p{margin:0}}