.save-feedback{position:fixed;z-index:1000;left:50%;bottom:max(28px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:9px;padding:12px 18px;border-radius:28px;background:#f7faf8;color:#294b3c;box-shadow:0 3px 22px #0002;font:500 14px/1.3 system-ui;pointer-events:none;transform:translateX(-50%);white-space:nowrap;animation:save-feedback-in .38s cubic-bezier(.22,1,.36,1) both}
.save-feedback svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.save-feedback path{stroke-dasharray:24;stroke-dashoffset:0;animation:save-check .35s .12s both}
@keyframes save-feedback-in{from{opacity:0;transform:translate(-50%,10px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes save-check{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.save-feedback,.save-feedback path{animation:none}}

/* A bounded stage provides the same neighbouring-card hint on a wide desktop. */
.story-viewer{--preview-inset:42px;--preview-width:min(380px,calc((100svh - 250px)*.5625),calc(100vw - 84px));width:calc(var(--preview-width) + 84px);max-width:100%;margin:0 auto;color:#777;text-align:center}
.story-viewer .share-sheet{display:flex;flex-direction:column;align-items:center;gap:8px}
.story-viewer .viewer-stage{position:relative;width:100%;overflow:hidden}
.story-viewer .clip-choices{position:relative;display:flex;gap:16px;width:100%;padding:6px var(--preview-inset) 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--preview-inset);overscroll-behavior-x:contain;scrollbar-width:none;box-sizing:border-box}
.story-viewer .clip-choices::-webkit-scrollbar{display:none}
.story-viewer .clip-choices>[data-kind]{position:relative;flex:0 0 var(--preview-width);min-width:0;margin:0;padding:0;border:0;border-radius:16px;background:#fff;box-shadow:0 3px 15px #00000012,0 1px 3px #0000000c;overflow:hidden;scroll-snap-align:center;scroll-snap-stop:always;color:#666;font:inherit;cursor:pointer}
.story-viewer .clip-choices canvas,.story-viewer .clip-choices video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:#fff;object-fit:contain}
.story-viewer .clip-state{position:absolute;left:10px;right:10px;bottom:20px;padding:9px 5px;border-radius:8px;background:#ffffffed;color:#666;font-size:12px;line-height:1.4}
.story-viewer .clip-dots{display:flex;align-items:center;justify-content:center;gap:0;height:44px}
.story-viewer .clip-dots button{display:grid;place-items:center;width:20px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.story-viewer .clip-dots button::after{content:"";width:6px;height:6px;border-radius:50%;background:#d5d5d5;transition:background .15s,transform .15s}
.story-viewer .clip-dots button[aria-current=true]::after{background:#555;transform:scale(1.2)}
.story-viewer .viewer-arrow{position:absolute;z-index:1;top:calc(50% - 18px);display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#ffffffed;box-shadow:0 1px 7px #0000000c;color:#555;cursor:pointer}
.story-viewer .viewer-arrow svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.story-viewer [data-action=previous]{left:0}.story-viewer [data-action=next]{right:0}
.story-viewer .viewer-arrow:disabled{visibility:hidden}
.story-viewer .button-row{width:var(--preview-width);max-width:100%;margin:0;padding:0}
.story-viewer #download-card{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:50px;margin:0;padding:11px 18px;border:0;border-radius:12px;background:#222;color:#fff;font:inherit;font-size:15px;cursor:pointer}
.story-viewer #download-card svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.story-viewer #download-card:disabled{opacity:.4;cursor:default}
.story-viewer [role=status]{width:var(--preview-width);max-width:100%;margin:0;color:#777;font-size:12px;line-height:1.5}
.story-viewer [role=status]:empty{display:none}
.story-viewer [data-action=claim]{width:var(--preview-width);max-width:100%;min-height:38px;padding:5px;border:0;background:none;color:#777;font:inherit;font-size:12px;text-decoration:underline;cursor:pointer}
.story-viewer button:focus-visible,.story-viewer .clip-choices:focus-visible{outline:2px solid #667586;outline-offset:2px}
.story-viewer .viewer-overlay{position:absolute;z-index:2;inset:6px var(--preview-inset) 12px;display:grid;place-items:center;border-radius:16px;background:#ffffff9c;pointer-events:none}
.story-viewer .viewer-overlay-copy{max-width:100%;padding:20px;box-sizing:border-box;color:#444;font-size:13px;line-height:1.5}
.story-viewer .viewer-overlay-copy p{margin:0 0 14px;text-wrap:balance}
.story-viewer .viewer-overlay [role=status]{width:auto;max-width:none;color:inherit;font-size:inherit;line-height:inherit}
.story-viewer .viewer-overlay button{display:block;min-height:44px;max-width:100%;margin:8px auto 0;padding:10px 18px;border:0;border-radius:10px;background:#222;color:#fff;font:inherit;cursor:pointer;pointer-events:auto}
.story-viewer[data-scrolling=true] .viewer-overlay button{pointer-events:none}
.story-viewer .viewer-overlay [data-action=ready-version]{padding:8px;background:transparent;color:#555;text-decoration:underline;font-size:12px}
.story-viewer .viewer-overlay.is-demo{background:#0006}
.story-viewer .viewer-overlay.is-loading{background:transparent}
.story-viewer .is-loading .viewer-overlay-copy{color:#777;font-size:12px}
.story-viewer .is-loading .viewer-overlay-copy::before{content:"";display:block;width:20px;height:20px;margin:0 auto 12px;border:2px solid #ddd;border-top-color:#777;border-radius:50%;animation:viewer-loading .8s linear infinite}
@keyframes viewer-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.story-viewer .is-loading .viewer-overlay-copy::before{animation:none}}
.story-viewer .is-demo .viewer-overlay-copy{color:#fff}
.story-viewer .is-demo [data-action=claim]{width:auto;background:#fff;color:#222;text-decoration:none;font-size:13px}
.story-viewer .viewer-example{display:block;margin-bottom:10px;font-size:11px;font-weight:600;letter-spacing:.02em}
.story-viewer[data-claim-preview=true] #card-handles{visibility:hidden}
@media(pointer:coarse){.story-viewer .viewer-arrow{display:none}}
/* The phone screen supplies the crop; the surrounding page must not add gutters. */
@media(pointer:coarse) and (max-width:600px) and (orientation:portrait){
 .story-viewer .viewer-stage{width:100vw;--preview-inset:calc((100vw - var(--preview-width))/2)}
}
@media(max-height:540px) and (min-width:480px){
 .story-viewer{--preview-width:calc((100svh - 84px)*.5625);width:min(100%,600px)}
 .story-viewer .share-sheet{display:grid;grid-template-columns:calc(var(--preview-width) + 84px) minmax(140px,1fr);column-gap:20px;row-gap:6px;align-content:center}
 .story-viewer .viewer-stage{grid-column:1;grid-row:1 / span 5}
 .story-viewer .clip-dots,.story-viewer .button-row,.story-viewer #card-handles,.story-viewer [role=status],.story-viewer [data-action=claim]{grid-column:2;width:100%;align-self:center}
 .story-viewer .clip-dots{align-self:end}.story-viewer .button-row{align-self:start}
 .story-viewer .clip-state{bottom:8px;font-size:11px;padding:5px}
 .story-viewer .viewer-overlay-copy{padding:10px;font-size:11px;line-height:1.35}
 .story-viewer .viewer-overlay-copy p{margin-bottom:6px}
 .story-viewer .viewer-overlay button{min-height:36px;margin-top:4px;padding:6px 10px;font-size:11px}
 .story-viewer .viewer-example{margin-bottom:5px;font-size:10px}
}