/* One shared ring. Its visible centre-line arc is 0.17 × 360° = 61.2°. */
html:has(body.story-app){width:100%;height:100%;overflow:hidden;background:#e9e3d9}
body.story-app{--ring-paper:#fffaf1;--ring-ink:#433629;--ring-muted:#766453;--ring-line:#e8d8c2;--ring-accent:#a3441e;--ring-glow:#f8dba9;width:100%;max-width:460px;height:100dvh;min-height:0;margin:0 auto;overflow:hidden;box-shadow:0 0 90px #38280d18}
body.story-app.dark{--ring-paper:#10182b;--ring-ink:#f4eddc;--ring-muted:#b9c3d6;--ring-line:#344059;--ring-accent:#f4ce7b;--ring-glow:#30344b}
body.story-app.violet{--ring-paper:#faf7ff;--ring-ink:#39285a;--ring-muted:#77628f;--ring-line:#dfd1f0;--ring-accent:#7636b2;--ring-glow:#ebddff}
body.story-app.violet.dark{--ring-paper:#161329;--ring-ink:#f5edff;--ring-muted:#c2b2df;--ring-line:#473b61;--ring-accent:#e4bcff;--ring-glow:#332545}
body.story-app .screen{height:100%;min-height:0}
body.story-app .content{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;padding-bottom:24px;scrollbar-width:thin}
/* Legacy screens used flex:1/min-height:0 to fit a fixed 812px canvas.
 * Their sections must retain content height above the new, fixed ring. */
body.story-app .content>*{flex-shrink:0!important;flex-basis:auto!important;min-height:min-content!important}
body.story-app .header{height:auto;min-height:62px;padding-right:58px;padding-bottom:10px}
body.story-app .header .h-chip{margin-right:0}
body.story-app .header .h-title{white-space:normal;line-height:1.25;overflow-wrap:anywhere}
.story-app .content svg{max-width:100%}
.story-app.ring-ready .bottomnav,.story-app.ring-ready .homebar{display:none!important}
.story-app.ring-onboarding .bottomnav{display:none!important}
.story-app button,.story-app a{-webkit-tap-highlight-color:transparent}
.story-app :focus-visible{outline:3px solid var(--ring-accent);outline-offset:4px}
.story-ring{flex:none;position:relative;z-index:30;background:var(--ring-paper);color:var(--ring-ink);border-top:1px solid var(--ring-line);padding:8px 8px max(8px,env(safe-area-inset-bottom));box-shadow:0 -10px 30px #24170606}
.ring-toolbar{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;gap:10px}
.ring-toolbar-title{font-size:10px;letter-spacing:1.1px;text-transform:uppercase;font-weight:900;color:var(--ring-muted)}
.ring-all{font-family:inherit;font-weight:800;font-size:12px;background:transparent;color:var(--ring-ink);border:1px solid var(--ring-line);border-radius:20px;min-height:36px;padding:0 14px;cursor:pointer;flex:none}
.ring-stage{position:relative;height:112px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.ring-stage.dragging{cursor:grabbing}
.ring-track{position:absolute;inset:0;width:100%;height:112px;pointer-events:none;overflow:visible}
.ring-band{fill:none;stroke:var(--ring-glow);stroke-width:43;opacity:.44}
.ring-rail{fill:none;stroke:var(--ring-line);stroke-width:1.5}
.ring-tick{stroke:var(--ring-accent);stroke-width:1;opacity:.35}
.ring-node{position:absolute;width:96px;height:82px;display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:var(--ring-muted);font-size:11px;font-weight:800;line-height:1.2;text-align:center;will-change:transform;outline-offset:-1px!important}
.ring-node[hidden]{display:none}
.ring-icon{width:43px;height:43px;display:grid;place-items:center;background:var(--ring-paper);border:1px solid var(--ring-line);border-radius:50%;box-shadow:0 3px 8px #25190406;transition:background .16s,color .16s,box-shadow .16s}
.ring-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ring-node.selected{color:var(--ring-ink);font-weight:900}
.ring-node.selected .ring-icon{background:var(--ring-accent);color:var(--ring-paper);border-color:var(--ring-accent);box-shadow:0 4px 16px #8a431c22}
.ring-node[aria-current=page] .ring-label::after{content:' ·';color:var(--ring-accent)}
.ring-foot{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 8px;margin-top:-6px}
.ring-arrow{width:44px;height:36px;flex:none;border:1px solid var(--ring-line);border-radius:18px;color:var(--ring-ink);background:transparent;font-family:inherit;line-height:1;cursor:pointer;font-size:23px}
.ring-hint{font-size:10px;color:var(--ring-muted);font-weight:700}
.ring-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ring-dialog{position:fixed;inset:0;margin:auto;width:min(100% - 24px,436px);max-height:calc(100dvh - 32px);padding:20px;border:1px solid var(--ring-line);border-radius:26px;background:var(--ring-paper);color:var(--ring-ink);box-shadow:0 24px 90px #0004;overflow-y:auto;overscroll-behavior:contain}
.ring-dialog::backdrop{background:#18132180;backdrop-filter:blur(5px)}
.ring-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.ring-dialog h2{font-size:23px;font-weight:900;letter-spacing:-.7px}
.ring-close{height:44px;width:44px;border:1px solid var(--ring-line);border-radius:50%;background:transparent;color:inherit;font-size:24px;cursor:pointer;flex:none}
.ring-dialog-sub{font-size:12px;line-height:1.5;color:var(--ring-muted);margin-bottom:16px}
.ring-search{width:100%;height:48px;border:1px solid var(--ring-line);background:transparent;border-radius:14px;padding:0 14px;color:inherit;font:inherit;font-size:14px}
.ring-result-count{font-size:11px;color:var(--ring-muted);margin:10px 0 4px;min-height:16px}
.ring-group h3{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:var(--ring-muted);padding:16px 0 8px}
.ring-destinations{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ring-destination{min-height:49px;padding:10px;border:1px solid var(--ring-line);border-radius:12px;display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-size:12px;font-weight:800;line-height:1.3}
.ring-destination:hover,.ring-destination[aria-current=page]{background:var(--ring-glow)}
.ring-destination svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ring-group[hidden],.ring-destination[hidden]{display:none}
.ring-empty{font-size:14px;padding:24px 0;color:var(--ring-muted)}
@media(min-width:600px){body.story-app{border-left:1px solid #0001;border-right:1px solid #0001}}
@media(prefers-reduced-motion:reduce){.story-app *, .story-app *::before,.story-app *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}