/* Update 3 QA additions only: preserve approved Round 3 styles and motion. */
.u3-kicker{font-size:11px;font-weight:760;letter-spacing:.13em;opacity:.67}
.u3-mode-trigger{margin-right:auto!important;border-radius:18px!important;padding:8px 13px!important;font-size:12px!important;font-weight:700!important}
.u3-mode-list{display:grid;gap:10px}.u3-mode-choice{display:flex;align-items:center;gap:12px;width:100%;padding:17px 15px!important;text-align:left;border-radius:20px!important;border:1px solid var(--border,rgba(120,150,130,.22))!important;background:var(--surface,rgba(180,200,185,.08))!important;color:inherit!important}
.u3-mode-choice.selected{outline:2px solid var(--accent,#328b73)}.u3-mode-choice>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:5px}.u3-mode-choice b{font-size:15px}.u3-mode-choice small{font-size:12px;opacity:.68;line-height:1.45}.u3-mode-choice em{font-style:normal;color:var(--accent,#328b73)}.u3-mode-icon{display:grid;place-items:center;flex:0 0 35px;height:35px;border-radius:13px;background:rgba(87,151,130,.13);font-size:19px}.u3-default-option{width:100%;display:flex;flex-direction:column;text-align:left;gap:5px;border:1px solid var(--border,#d0d7d1)!important;border-radius:15px!important;padding:14px!important;background:transparent!important;color:inherit!important}.u3-default-option span{opacity:.7;font-size:12px}
.u3-smart-explain{border:0!important;background:transparent!important;text-decoration:underline;font-size:12px!important}
.u3-finance-reports{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 18px}.u3-finance-reports>button{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:3px 9px;text-align:left;padding:15px 12px;border:1px solid var(--border,rgba(80,110,95,.2));border-radius:17px;background:var(--card-bg,rgba(130,160,145,.08));color:inherit}.u3-finance-reports>button>span{font-size:22px;grid-row:span 2}.u3-finance-reports>button b{font-size:13px}.u3-finance-reports>button small{font-size:11px;grid-column:2;opacity:.7;line-height:1.3}.u3-finance-reports>button em{font-style:normal;grid-column:3;grid-row:1/3}
.u3-settings-rewinds{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:0;background:transparent;color:inherit;padding:15px 18px}.u3-settings-rewinds>span:nth-child(2){display:flex;flex-direction:column;gap:3px;flex:1}.u3-settings-rewinds small{font-size:12px;opacity:.68}.u3-settings-rewinds em{font-style:normal}
.u3-report-page{display:grid;gap:13px;margin:15px 0 95px}.u3-report-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:15px 0}.u3-report-metrics>div{min-width:0;display:flex;flex-direction:column;gap:7px}.u3-report-metrics small{font-size:12px;opacity:.7}.u3-report-metrics b{font-size:clamp(17px,3vw,26px);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.u3-report-row{width:100%;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:11px 2px!important;border:0!important;border-bottom:1px solid rgba(127,143,136,.14)!important;background:transparent!important;color:inherit;text-align:left}.u3-report-row strong{font-variant-numeric:tabular-nums}.u3-trend{height:152px;display:flex;gap:10px;align-items:end;justify-content:space-around;border-bottom:1px solid rgba(140,155,150,.24);margin:22px 0}.u3-trend-column{width:calc(100% / 6);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:7px}.u3-trend-column>span{display:block;min-height:1px;width:60%;border-radius:7px 7px 0 0;background:var(--accent,#087555)}.u3-trend-column>small{font-size:11px;opacity:.65}
.u3-archive{padding:14px 0 90px}.u3-archive h2{font-size:clamp(24px,5vw,34px);letter-spacing:-.03em;margin:8px 0 12px}.u3-archive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}.u3-archive-grid button,.u3-rewind-home{color:#fff!important;background:var(--u3-bg)!important;border:0!important;text-align:left;display:flex;flex-direction:column;justify-content:space-between;gap:20px;border-radius:24px!important;padding:23px!important;min-height:170px;overflow:hidden}.u3-archive-grid button span,.u3-rewind-home span{color:var(--u3-accent);font-size:11px;letter-spacing:.09em;font-weight:800}.u3-archive-grid button strong,.u3-rewind-home b{font-size:22px;letter-spacing:-.03em}.u3-archive-grid button small,.u3-rewind-home small{opacity:.8}.u3-rewind-home{width:100%;min-height:130px;margin:15px 0 16px;gap:10px;justify-content:center;position:relative}
/* Empty Rewind archive: center the explanation in the available content area, not just its first row. */
.u3-archive-grid.u3-archive-grid-empty{display:flex;align-items:center;justify-content:center;min-height:clamp(220px,44dvh,660px);margin:12px 0 0}
.u3-archive-grid-empty>.u3-archive-empty{width:min(100%,420px);min-height:0;margin:auto;padding:18px 24px;background:transparent;border:0;box-shadow:none;color:var(--muted,#858a9b);text-align:center;line-height:1.5}
.u3-viewer{max-width:670px;margin:10px auto 110px}.u3-viewer-head,.u3-story-controls{display:flex;justify-content:space-between;align-items:center;gap:12px}.u3-viewer-head button,.u3-story-controls button{border-radius:15px;padding:9px 14px;background:var(--surface,rgba(125,150,140,.1));color:inherit}.u3-story-progress{display:flex;gap:5px;margin:13px 0}.u3-story-progress span{flex:1;height:4px;border-radius:5px;background:rgba(130,135,135,.24)}.u3-story-progress span.active{background:var(--accent,#378a74)}
.u3-story-card{background:var(--u3-bg);color:#fff;aspect-ratio:9/14;max-height:min(73vh,910px);min-height:410px;width:100%;border-radius:27px;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,5vw,42px);position:relative;overflow:hidden;isolation:isolate}.u3-story-card:before,.u3-story-card:after{content:'';position:absolute;border-radius:50%;background:var(--u3-accent);opacity:.13;z-index:-1}.u3-story-card:before{width:380px;height:380px;right:-150px;top:13%}.u3-story-card:after{width:220px;height:220px;left:-115px;bottom:13%}.u3-story-top,.u3-story-bottom{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:700;letter-spacing:.07em}.u3-story-top span,.u3-story-bottom span{opacity:.7}.u3-story-center>small{color:var(--u3-accent);font-size:12px;font-weight:800;letter-spacing:.09em}.u3-story-center h2{font-size:clamp(30px,6vw,56px);line-height:1.09;letter-spacing:-.045em;margin:12px 0 20px}.u3-story-card>p{font-size:clamp(12px,2vw,16px);opacity:.8;line-height:1.55}.u3-story-detail{display:flex;flex-direction:column;gap:13px}.u3-story-detail small{font-size:13px;opacity:.75;line-height:1.5}.u3-story-detail strong{font-size:clamp(26px,5vw,48px);overflow-wrap:anywhere;color:var(--u3-accent)}.u3-story-summary{font-size:clamp(20px,4vw,32px)!important;line-height:1.45!important;opacity:1!important}.u3-story-symbol{font-size:130px;color:var(--u3-accent);text-align:center}.u3-story-controls{padding:14px 5px}.u3-story-controls span{font-size:12px;opacity:.7}.u3-story-controls button:disabled{opacity:.3}
.u3-share-toggles{display:grid;gap:11px;margin:12px 0}.u3-share-toggles label{display:flex;align-items:center;gap:9px;font-size:13px}.u3-share-actions{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}.u3-share-actions button{flex:1 1 auto}.u3-share-preview{display:block;width:min(100%,260px);height:auto;border-radius:16px;margin:10px auto}
.u3-archive-orb{position:fixed;z-index:12050;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:rgba(239,250,243,.96);box-shadow:0 7px 22px rgba(14,72,56,.2);color:#136c50;font-size:25px;pointer-events:none}.u3-archive-pill{position:fixed;z-index:12060;width:198px;min-height:44px;display:grid;place-items:center;border-radius:99px;background:rgba(237,250,243,.96);color:#126c4d;box-shadow:0 8px 30px rgba(7,65,49,.18);font-size:13px;font-weight:700;pointer-events:none}
@media(max-width:480px){.u3-finance-reports{grid-template-columns:1fr}.u3-report-metrics{gap:10px}.u3-report-metrics b{font-size:17px}.u3-archive-grid button{min-height:150px;padding:17px!important}.u3-archive-grid button strong{font-size:19px}.u3-story-card{max-height:69vh;min-height:380px}.u3-story-top,.u3-story-bottom{font-size:10px}.u3-story-symbol{font-size:88px}}
@media(prefers-reduced-motion:reduce){.u3-rewind-home,.u3-story-card,.u3-archive-orb,.u3-archive-pill{transition:none!important;animation:none!important}}

.u3-music-option{display:flex;gap:8px;align-items:center;font-size:12px;margin:12px 0;opacity:.85}.u3-share-thumbnails{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:10px 0 20px}.u3-share-thumbnail{padding:2px!important;border-radius:8px!important;border:2px solid transparent!important;background:transparent!important;min-width:0}.u3-share-thumbnail.active{border-color:var(--accent,#118567)!important}.u3-share-thumbnail img{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;border-radius:5px}.u3-share-thumbnail:focus-visible{outline:3px solid #317f6c}

/* Share-media fallback for iOS Safari: save/share actions require an explicit tap. */
.u3-export-ready{display:grid;justify-items:center;gap:8px;margin:13px 0 22px;max-width:100%;min-width:0}
.u3-export-ready>img,.u3-export-ready>video{width:min(100%,280px);max-height:420px;object-fit:contain;border-radius:16px;background:#17392f}
.u3-export-ready .u3-share-actions{width:100%;max-width:420px}

/* Featured Rewind always sits above the editable dashboard, regardless of Home mode. */
#app .u3-rewind-featured{width:100%;margin:14px 0 19px;position:relative;z-index:1;box-shadow:0 14px 31px rgba(17,50,55,.14);cursor:pointer}
#app .u3-rewind-featured:focus-visible{outline:3px solid #69be9e;outline-offset:3px}
@media(max-width:600px){#app .u3-rewind-featured{margin:10px 0 14px;min-height:135px}}

/* 29 Oct iPad QA: the single Home mode chooser occupies the former right-side Customize position. */
#app .home-customize-bar{justify-content:flex-end!important;align-items:center!important;overflow:visible!important}
#app .home-customize-bar .u3-mode-trigger{margin-left:auto!important;margin-right:0!important;white-space:nowrap!important;text-align:right!important;padding:8px 6px!important;border-radius:14px!important}

/* Update 3 Round 2: Reports is the sole Finance shortcut; Rewinds live under More. */
.u3-finance-reports.u3-reports-only{grid-template-columns:minmax(0,1fr)}

/* U3 Finance month chart: zero months are explicit, not fake miniature bars. */
.u3-report-page .u3-trend{height:190px;gap:5px;align-items:stretch;padding:0;margin:14px 0 10px}
.u3-report-page .u3-trend-column{width:auto;flex:1;min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;justify-content:end;gap:6px;padding:3px 2px;border:0;background:transparent;cursor:pointer;color:inherit;border-radius:10px}
.u3-report-page .u3-trend-column:focus-visible,.u3-report-page .u3-trend-column[aria-pressed=true]{outline:2px solid var(--accent,#087555);outline-offset:1px}
.u3-report-page .u3-trend-value{font-size:10px;font-variant-numeric:tabular-nums;line-height:1.1;overflow-wrap:anywhere;max-width:100%;text-align:center}
.u3-report-page .u3-trend-bar-holder{height:115px;width:100%;display:flex;align-items:flex-end;justify-content:center;flex-shrink:0}
.u3-report-page .u3-trend-bar-holder i{display:block;width:min(75%,54px);background:var(--accent,#087555);border-radius:7px 7px 0 0}
.u3-report-page .u3-trend-bar-holder em{font-style:normal;font-size:9px;opacity:.65;text-align:center;padding-bottom:6px}
.u3-report-page .u3-trend-column>small{font-size:11px;opacity:.75}
@media(max-width:430px){.u3-report-page .u3-trend-value{font-size:9px}.u3-report-page .u3-trend-bar-holder em{font-size:8px}}

/* 29 Oct deployed QA regression: legacy .u3-trend-column>span painted every
   value and chart-track span emerald. Only actual data bars may be filled. */
.u3-report-page .u3-trend-column > .u3-trend-value {
  display:block;
  width:100%;
  min-height:0;
  background:transparent;
  border-radius:0;
  color:inherit;
  font-weight:600;
}
.u3-report-page .u3-trend-column > .u3-trend-bar-holder {
  display:flex;
  width:100%;
  min-height:0;
  background:transparent;
  border-radius:0;
  box-shadow:none;
}
.u3-report-page .u3-trend-empty > .u3-trend-value {opacity:.62;font-weight:400;}
.u3-report-page .u3-trend-bar-holder:empty {background:transparent;}

/* Round 3: vertical page scrolling remains fluid; sideways swipes advance Rewind only. */
.u3-story-card{touch-action:pan-y}

/* October-only QA story preview: never part of the Home scheduler or archive. */
.u3-qa-preview-entry{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:22px 0 4px;padding:17px 18px;border:1px solid rgba(13,115,87,.22);border-radius:22px;background:rgba(204,235,225,.45)}
.u3-qa-preview-entry>div{display:flex;flex:1;min-width:0;flex-direction:column;gap:7px}
.u3-qa-preview-tag{font-size:10px;letter-spacing:.12em;font-weight:800;color:#096b4f}
.u3-qa-preview-entry strong{font-size:16px;color:var(--text,#182836)}
.u3-qa-preview-entry small{font-size:12px;line-height:1.5;color:var(--muted,#71808e)}
.u3-qa-preview-entry button{flex:none;padding:12px 16px!important;border-radius:14px!important;background:#087456!important;color:white!important;font-weight:750;font-size:12px!important}
.u3-preview-notice{background:rgba(12,104,79,.10);color:#17694e;font-size:11px;font-weight:800;letter-spacing:.05em;text-align:center;padding:11px 12px;border-radius:13px;line-height:1.5;margin:9px 0 13px}
@media(max-width:600px){.u3-qa-preview-entry{flex-direction:column;align-items:stretch}.u3-qa-preview-entry button{width:100%}}


/* 29 Oct U3 Round 3 — immersive Rewind story viewer. The app underneath is
   left intact; exiting the story removes the fixed viewer with the shell. */
#app .u3-viewer.u3-story-immersive {
  position:fixed!important; inset:0!important; inset-block:0!important;
  width:100vw!important; height:100vh!important; height:100dvh!important;
  max-width:none!important; max-height:none!important; min-height:0!important;
  margin:0!important; padding:0!important; overflow:hidden!important;
  border-radius:0!important; background:var(--u3-bg,#142b28)!important;
  color:#fff!important; z-index:2147481600!important; isolation:isolate;
  overscroll-behavior:contain;
}
#app .u3-story-immersive .u3-story-card {
  position:absolute!important; inset:0!important; width:100%!important;
  height:100%!important; min-height:0!important; max-height:none!important;
  aspect-ratio:auto!important; margin:0!important; border-radius:0!important;
  padding: max(128px,calc(env(safe-area-inset-top) + 122px)) clamp(22px,7vw,90px)
           max(91px,calc(env(safe-area-inset-bottom) + 90px))!important;
  background:var(--u3-bg)!important; touch-action:pan-y;
}
#app .u3-story-immersive .u3-story-card:before{width:min(85vw,620px);height:min(85vw,620px);right:-25vw;top:15%}
#app .u3-story-immersive .u3-story-card:after{width:min(50vw,360px);height:min(50vw,360px);left:-19vw;bottom:10%}
#app .u3-story-immersive .u3-story-top,
#app .u3-story-immersive .u3-story-bottom {font-size:clamp(10px,1.4vw,14px);}
#app .u3-story-immersive .u3-story-center {width:100%;max-width:850px;margin-inline:auto;}
#app .u3-story-immersive .u3-story-center h2 {font-size:clamp(32px,5.5vw,70px);}
#app .u3-story-immersive .u3-story-card>p {max-width:850px;margin-inline:auto;width:100%;}
#app .u3-story-immersive .u3-story-detail strong {font-size:clamp(31px,5vw,65px);}
#app .u3-story-immersive .u3-story-summary {font-size:clamp(23px,3.7vw,48px)!important;max-width:810px;}
#app .u3-story-immersive .u3-viewer-head {
  position:absolute; z-index:6; top:calc(env(safe-area-inset-top) + 29px);
  left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));
  color:white; font-size:14px; font-weight:700; margin:0!important;
}
#app .u3-story-immersive .u3-viewer-head button,
#app .u3-story-immersive .u3-story-controls button {
  color:white!important; background:rgba(255,255,255,.17)!important;
  border:1px solid rgba(255,255,255,.35)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  min-height:38px;min-width:40px;cursor:pointer;
}
#app .u3-story-immersive .u3-story-progress {
  position:absolute;z-index:6; top:calc(env(safe-area-inset-top) + 12px);
  left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));
  margin:0!important; gap:5px;
}
#app .u3-story-immersive .u3-story-progress span {background:rgba(255,255,255,.25)!important;height:3px}
#app .u3-story-immersive .u3-story-progress span.active{background:#fff!important}
#app .u3-story-immersive .u3-preview-notice {
  position:absolute;z-index:5;top:calc(env(safe-area-inset-top) + 77px);
  left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 30px);
  margin:0!important;padding:7px 12px; font-size:10px;line-height:1.3;
  background:rgba(0,0,0,.20);color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.18);border-radius:99px;
}
#app .u3-story-immersive .u3-story-controls {
  position:absolute;z-index:6;bottom:max(10px,env(safe-area-inset-bottom));
  left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));
  padding:0!important; color:rgba(255,255,255,.85);
}
#app .u3-story-immersive .u3-story-controls button:disabled{opacity:.33!important}
/* Hide application chrome only while the immersive story exists. This is
   lifecycle-safe even if a different route replaces the story unexpectedly. */
body:has(.u3-story-immersive) #u1-qa-bar,
body:has(.u3-story-immersive) #u1-qa-details,
body:has(.u3-story-immersive) #u2-sync-toast,
body:has(.u3-story-immersive) #u2w-dock-area,
body:has(.u3-story-immersive) .bottom,
body:has(.u3-story-immersive) .fab,
body:has(.u3-story-immersive) .fab-wrap {visibility:hidden!important;pointer-events:none!important;}
/* Sharing remains usable over the full-screen viewer. */
body:has(.u3-story-immersive) #modal-root .modal-wrap,
body:has(.u3-story-immersive) #modal-root .modal-overlay {z-index:2147482200!important;}
@media(max-width:480px){
 #app .u3-story-immersive .u3-story-card {
   padding-top:max(135px,calc(env(safe-area-inset-top) + 130px))!important;
   padding-bottom:max(88px,calc(env(safe-area-inset-bottom) + 86px))!important;
 }
 #app .u3-story-immersive .u3-story-center h2{font-size:clamp(30px,8vw,44px)}
 #app .u3-story-immersive .u3-story-top span,
 #app .u3-story-immersive .u3-story-bottom span{font-size:10px;}
 #app .u3-story-immersive .u3-preview-notice{font-size:9px;text-align:center;}
}
@media(max-height:660px){
 #app .u3-story-immersive .u3-story-card{padding-top:100px!important;padding-bottom:72px!important;}
 #app .u3-story-immersive .u3-preview-notice{display:none;}
 #app .u3-story-immersive .u3-story-center h2{margin-bottom:10px;}
}
@media(prefers-reduced-motion:reduce){#app .u3-story-immersive .u3-story-card{transition:none!important;animation:none!important;}}

/* 29 Oct U3 Rewind — Instagram-style timed story playback.
   Only the actual active segment fills. Previous segments remain complete. */
#app .u3-story-immersive .u3-story-progress {
  pointer-events:none;
}
#app .u3-story-immersive .u3-story-progress span {
  position:relative; display:block; height:3px; overflow:hidden;
  border-radius:999px; background:rgba(255,255,255,.29)!important;
}
#app .u3-story-immersive .u3-story-progress span i {
  display:block; width:0; height:100%; border-radius:inherit;
  background:#fff!important; transition:none!important;
}
#app .u3-story-immersive .u3-viewer-head {
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none; gap:12px;
}
#app .u3-story-immersive .u3-story-count {
  color:rgba(255,255,255,.92);font-variant-numeric:tabular-nums;
  font-size:13px;letter-spacing:.02em;
}
#app .u3-story-immersive .u3-story-header-actions {
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  pointer-events:auto;
}
#app .u3-story-immersive .u3-story-header-actions button {
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;min-width:44px;min-height:44px;padding:0!important;
  border-radius:999px!important;line-height:1;
}
#app .u3-story-immersive .u3-story-header-actions .u3-story-close {
  font-size:29px;font-weight:400;line-height:1;
}
#app .u3-story-immersive .u3-story-header-actions .u3-story-share svg {
  display:block;width:23px;height:23px;
}
#app .u3-story-immersive .u3-story-card {cursor:pointer;user-select:none;-webkit-user-select:none;}
#app .u3-story-immersive .u3-story-center,
#app .u3-story-immersive .u3-story-card>p {user-select:text;-webkit-user-select:text;}


/* Update 3 Round 3: richer data-grounded story scenes. Only the source
   RufiyaaU3RewindEngine computes values; these styles never change balances. */
#app .u3-story-immersive .u3-story-center{position:relative;z-index:1;}
#app .u3-story-immersive .u3-story-card{background:radial-gradient(circle at 94% 28%,rgba(255,255,255,.065),transparent 39%),var(--u3-bg)!important;}
#app .u3-story-immersive .u3-story-card:before{border:1px solid rgba(255,255,255,.12);background:transparent;opacity:1;}
#app .u3-story-immersive .u3-story-card:after{background:var(--u3-accent);opacity:.10;filter:blur(2px);}
#app .u3-story-immersive .u3-story-center h2{font-size:clamp(34px,5.1vw,70px);line-height:1.06;letter-spacing:-.05em;margin:12px 0 clamp(18px,3.2vh,32px);}
#app .u3-story-immersive .u3-story-center>small{font-weight:800;letter-spacing:.15em;}
#app .u3-story-immersive .u3-story-card>p{position:relative;z-index:1;opacity:.85;line-height:1.55;max-width:690px;}
#app .u3-story-immersive .u3-story-kind-intro .u3-story-center h2{font-size:clamp(48px,8vw,96px);max-width:11ch;}
#app .u3-story-immersive .u3-story-kind-money{background:radial-gradient(ellipse at 98% 50%,rgba(255,255,255,.12),transparent 45%),var(--u3-bg)!important;}
#app .u3-story-immersive .u3-story-kind-category{background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 70%),var(--u3-bg)!important;}
#app .u3-story-immersive .u3-story-kind-merchant{background:radial-gradient(ellipse at 75% 70%,rgba(255,255,255,.1),transparent 55%),var(--u3-bg)!important;}
#app .u3-story-immersive .u3-story-kind-summary{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.1),transparent 65%),var(--u3-bg)!important;}
.u3-rich-cover{display:grid;gap:14px;}
.u3-rich-orbit{position:relative;display:grid;place-items:center;width:clamp(110px,20vw,175px);aspect-ratio:1;border:1px solid rgba(255,255,255,.46);border-radius:50%;margin:4px 0 8px;}
.u3-rich-orbit>span{font-size:clamp(55px,10vw,100px);color:var(--u3-accent);filter:drop-shadow(0 4px 25px rgba(255,255,255,.25));}
.u3-rich-orbit i{position:absolute;border-radius:50%;background:var(--u3-accent);width:10px;height:10px;}
.u3-rich-orbit-one{right:-4px;top:35%;}.u3-rich-orbit-two{left:24%;bottom:-5px;}
.u3-rich-cover>p{font-size:11px;font-weight:800;letter-spacing:.16em;opacity:.85;}
.u3-rich-chips{display:flex;flex-wrap:wrap;gap:8px;max-width:560px;}
.u3-rich-chips>span{font-size:12px;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 11px;background:rgba(255,255,255,.07);}
.u3-rich-footnote{font-size:13px;opacity:.79;margin-top:6px;}
.u3-rich-number>span,.u3-rich-track-title,.u3-rich-delta>span,.u3-rich-merchant-hero>small,.u3-rich-category-hero>small{font-size:11px;font-weight:760;letter-spacing:.09em;opacity:.85;}
.u3-rich-number strong{display:block;color:var(--u3-accent);font-size:clamp(36px,7vw,88px);font-variant-numeric:tabular-nums;letter-spacing:-.04em;margin:7px 0 22px;overflow-wrap:anywhere;}
.u3-rich-chart{display:grid;gap:10px;padding:17px 18px;border:1px solid rgba(255,255,255,.22);border-radius:23px;background:rgba(255,255,255,.065);backdrop-filter:blur(4px);}
.u3-rich-track-title{display:flex;gap:10px;align-items:center;justify-content:space-between;letter-spacing:0;opacity:1;font-weight:500;}
.u3-rich-track-title>b{font-size:clamp(13px,1.8vw,18px);font-weight:750;font-variant-numeric:tabular-nums;text-align:right;}
.u3-rich-track{height:9px;background:rgba(255,255,255,.20);border-radius:100px;overflow:hidden;margin-bottom:5px;}
.u3-rich-track i{display:block;width:var(--u3-fill,0);height:100%;background:var(--u3-accent);border-radius:inherit;transform-origin:left;}
.u3-rich-track-alt i{background:#fff;}
.u3-rich-statline{display:flex;gap:9px;justify-content:space-between;align-items:center;padding:13px 2px;font-size:12px;opacity:.93;}
.u3-rich-statline b{font-size:clamp(14px,2vw,19px);font-variant-numeric:tabular-nums;text-align:right;}
.u3-rich-category{display:flex;align-items:center;gap:clamp(15px,4vw,38px);margin-bottom:23px;}
.u3-rich-ring{width:clamp(125px,25vw,210px);height:clamp(125px,25vw,210px);aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--u3-accent) var(--u3-percent),rgba(255,255,255,.22) 0);padding:13px;display:grid;place-items:center;flex-shrink:0;box-shadow:0 0 30px rgba(0,0,0,.08);}
.u3-rich-ring>div{width:100%;height:100%;background:var(--u3-bg);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;}
.u3-rich-ring small,.u3-rich-ring span{font-size:9px;opacity:.8;letter-spacing:.08em;}
.u3-rich-ring b{font-size:clamp(27px,5vw,47px);letter-spacing:-.05em;}
.u3-rich-category-hero{display:flex;flex-direction:column;gap:7px;min-width:0;}
.u3-rich-category-hero strong{font-size:clamp(26px,5vw,46px);color:var(--u3-accent);overflow-wrap:anywhere;line-height:1.05;}
.u3-rich-category-hero span{font-size:clamp(16px,2.5vw,24px);font-weight:700;font-variant-numeric:tabular-nums;}
.u3-rich-ranks{display:grid;gap:6px;max-width:800px;}
.u3-rich-rank{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 12px;background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.16);border-radius:15px;}
.u3-rich-rank-index{color:var(--u3-accent);font-size:13px;font-weight:800;}
.u3-rich-rank-name{font-size:clamp(12px,1.8vw,17px);font-weight:600;overflow-wrap:anywhere;min-width:0;}
.u3-rich-rank>b{font-size:clamp(11px,1.6vw,16px);font-variant-numeric:tabular-nums;text-align:right;}
.u3-rich-merchant-hero{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:18px 0 21px;}
.u3-rich-crown{width:62px;height:62px;border:1px solid rgba(255,255,255,.28);border-radius:22px;display:grid;place-items:center;color:var(--u3-accent);font-size:38px;background:rgba(255,255,255,.1);}
.u3-rich-merchant-hero strong{font-size:clamp(29px,5.3vw,62px);line-height:1.02;overflow-wrap:anywhere;max-width:100%;}
.u3-rich-merchant-hero>b{color:var(--u3-accent);font-size:clamp(23px,3.2vw,33px);font-variant-numeric:tabular-nums;}
.u3-rich-note{font-size:12px;opacity:.75;margin-top:10px;}
.u3-rich-comparison{display:grid;grid-template-columns:1fr 1fr;gap:25px;min-height:clamp(168px,29vh,295px);max-width:600px;margin:0 auto 22px;}
.u3-rich-compare-column{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-width:0;}
.u3-rich-compare-bar{width:100%;height:clamp(115px,22vh,215px);background:rgba(255,255,255,.07);border-radius:17px;display:flex;align-items:flex-end;overflow:hidden;border:1px solid rgba(255,255,255,.20);}
.u3-rich-compare-bar>i{display:block;width:100%;height:var(--u3-height,0);background:var(--u3-accent);min-height:0;border-radius:12px 12px 0 0;}
.u3-rich-compare-bar.alt>i{background:rgba(255,255,255,.55);}
.u3-rich-compare-column>span{font-size:12px;opacity:.82;}
.u3-rich-compare-column>b{font-size:clamp(13px,2vw,20px);font-variant-numeric:tabular-nums;text-align:center;overflow-wrap:anywhere;}
.u3-rich-delta{display:flex;flex-direction:column;gap:7px;background:rgba(255,255,255,.09);padding:14px 17px;border:1px solid rgba(255,255,255,.17);border-radius:18px;}
.u3-rich-delta>b{font-size:clamp(14px,2.2vw,21px);line-height:1.35;font-weight:700;}
.u3-rich-aavi{display:grid;gap:16px;max-width:780px;}
.u3-rich-aavi-mark{width:65px;height:65px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.10);border-radius:21px;font-size:38px;color:var(--u3-accent);}
.u3-rich-speech{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:25px;padding:clamp(20px,3vw,32px);}
.u3-rich-speech>span{display:block;color:var(--u3-accent);font-weight:800;letter-spacing:.13em;font-size:11px;margin-bottom:12px;}
#app .u3-story-immersive .u3-rich-speech>p{font-size:clamp(21px,3.3vw,40px);line-height:1.35;letter-spacing:-.02em;overflow-wrap:anywhere;}
.u3-rich-aavi-outro{font-size:12px;opacity:.82;}
@media(prefers-reduced-motion:no-preference){
 #app .u3-story-immersive .u3-story-center .u3-rich-chart,#app .u3-story-immersive .u3-rich-category,#app .u3-story-immersive .u3-rich-merchant-hero,#app .u3-story-immersive .u3-rich-delta,#app .u3-story-immersive .u3-rich-speech{animation:u3-rich-arrive .62s ease both;}
 #app .u3-story-immersive .u3-rich-track i,#app .u3-story-immersive .u3-rich-compare-bar i{animation:u3-rich-grow .8s .12s ease-out both;}
 #app .u3-story-immersive .u3-rich-orbit>span{animation:u3-rich-float 3.4s ease-in-out infinite alternate;}
}
@keyframes u3-rich-arrive{from{opacity:.1;transform:translateY(19px)}to{opacity:1;transform:translateY(0)}}
@keyframes u3-rich-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes u3-rich-float{from{transform:translateY(-5px) rotate(-8deg)}to{transform:translateY(5px) rotate(8deg)}}
@media(max-width:480px){
 #app .u3-story-immersive .u3-story-center h2{font-size:clamp(31px,8vw,41px);margin:9px 0 15px;}
 #app .u3-story-immersive .u3-story-kind-intro .u3-story-center h2{font-size:clamp(42px,12vw,67px);}
 #app .u3-story-immersive .u3-story-card>p{font-size:11px;line-height:1.4;}
 .u3-rich-ring{width:116px;height:116px;padding:9px;}.u3-rich-category{gap:10px;margin-bottom:13px;}
 .u3-rich-ring b{font-size:27px;}.u3-rich-category-hero strong{font-size:25px;}
 .u3-rich-rank{grid-template-columns:22px minmax(0,1fr) auto;padding:8px;gap:5px;}
 .u3-rich-rank>b{font-size:11px;}.u3-rich-rank-name{font-size:12px;}
 .u3-rich-chart{gap:8px;padding:12px 13px;}.u3-rich-number strong{font-size:35px;margin-bottom:12px;}
 .u3-rich-merchant-hero{gap:8px;padding:6px 0 13px;}.u3-rich-crown{height:47px;width:47px;font-size:28px;border-radius:16px;}
 .u3-rich-merchant-hero strong{font-size:29px;}.u3-rich-comparison{gap:13px;min-height:160px;}
 .u3-rich-compare-bar{height:130px;}.u3-rich-delta{padding:11px 12px;}.u3-rich-delta>b{font-size:14px;}
 .u3-rich-orbit{width:105px;}.u3-rich-orbit>span{font-size:60px;}.u3-rich-speech{padding:17px;}
 #app .u3-story-immersive .u3-rich-speech>p{font-size:clamp(20px,5.5vw,29px);}
}
@media(max-height:680px){.u3-rich-ring{height:103px;width:103px}.u3-rich-rank{padding:5px 8px}.u3-rich-compare-bar{height:105px}.u3-rich-orbit{height:90px;width:90px}.u3-rich-chips>span{padding:5px 8px}}
@media(prefers-reduced-motion:reduce){#app .u3-story-immersive .u3-rich-track i,#app .u3-story-immersive .u3-rich-compare-bar i{animation:none!important;}}

#app .u3-story-immersive,#app .u3-story-immersive .u3-story-card{box-sizing:border-box!important;}
#app .u3-story-immersive .u3-story-center{min-width:0;}
.u3-rich-chart,.u3-rich-category,.u3-rich-merchant-hero,.u3-rich-speech{min-width:0;}
.u3-rich-track-title>b{min-width:0;overflow-wrap:anywhere;}


/* 30 Oct U3 Round 3 device QA: iPad viewport fitting + iPhone non-scrolling
   player. Restrict these to the story scene, not Finance/Home/modals. */
html:has(#app .u3-story-immersive),
body:has(#app .u3-story-immersive){
 overflow:hidden!important;
 overscroll-behavior:none!important;
}
#app .u3-viewer.u3-story-immersive{touch-action:none!important;overscroll-behavior:none!important;}
#app .u3-story-immersive .u3-story-card{
 touch-action:none!important;
 overscroll-behavior:none!important;
 box-sizing:border-box!important;
 justify-content:space-between;
 gap:clamp(4px,.7dvh,12px);
}
/* Avoid the very large fixed top/bottom insets on iPad landscape and short
   Safari visual viewports: the rich content must fit without being clipped. */
@media (min-width:650px) and (max-height:900px){
 #app .u3-story-immersive .u3-story-card{
  padding-top:clamp(76px,11dvh,106px)!important;
  padding-bottom:clamp(35px,6dvh,67px)!important;
 }
 #app .u3-story-immersive .u3-story-center h2{font-size:clamp(29px,4.4dvh,48px);margin:8px 0 13px;}
 #app .u3-story-immersive .u3-story-kind-intro .u3-story-center h2{font-size:clamp(38px,6dvh,58px);}
 #app .u3-story-immersive .u3-rich-comparison{min-height:0;margin-bottom:10px;gap:12px;}
 #app .u3-story-immersive .u3-rich-compare-bar{height:clamp(85px,15dvh,135px);}
 #app .u3-story-immersive .u3-rich-speech{padding:clamp(12px,2dvh,18px);}
 #app .u3-story-immersive .u3-rich-speech>p{font-size:clamp(18px,3.1dvh,29px);}
 #app .u3-story-immersive .u3-rich-aavi{gap:9px;}
 #app .u3-story-immersive .u3-rich-delta{padding:10px 12px;}
}
@media(min-width:650px) and (max-height:820px){
 #app .u3-story-immersive .u3-story-center{max-width:min(90%,720px);}
 #app .u3-story-immersive .u3-rich-category{gap:15px;margin-bottom:12px;}
 #app .u3-story-immersive .u3-rich-ring{width:110px;height:110px;padding:8px;}
 #app .u3-story-immersive .u3-rich-ring b{font-size:26px;}
 #app .u3-story-immersive .u3-rich-category-hero strong{font-size:28px;}
 #app .u3-story-immersive .u3-rich-merchant-hero{padding:8px 0 12px;gap:8px;}
 #app .u3-story-immersive .u3-rich-merchant-hero strong{font-size:32px;}
 #app .u3-story-immersive .u3-rich-crown{width:44px;height:44px;font-size:25px;}
 #app .u3-story-immersive .u3-rich-rank{padding:7px 10px;}
 #app .u3-story-immersive .u3-rich-ranks{gap:5px;}
 #app .u3-story-immersive .u3-rich-orbit{width:95px;height:95px;}
}
/* iPhone: no vertical rubber-band or behind-the-scenes page scroll. The
   share dialog can still scroll independently while displayed. */
@media(max-width:480px){
 #app .u3-story-immersive .u3-story-card{touch-action:none!important;}
}

/* Very short iPhones still get reduced insets; regular-height phones retain
   the previously approved composition (only scrolling is disabled). */
@media(max-width:480px) and (max-height:700px){
 #app .u3-story-immersive .u3-story-card{
  padding-top:clamp(76px,11dvh,100px)!important;
  padding-bottom:clamp(35px,6dvh,60px)!important;
 }
 #app .u3-story-immersive .u3-story-center h2{margin:8px 0 13px;}
 #app .u3-story-immersive .u3-rich-speech>p{font-size:clamp(18px,3dvh,24px);}
 #app .u3-story-immersive .u3-rich-aavi{gap:9px;}
}
/* Update 3 QA-only Year Rewind preview: visually distinct from monthly previews. */
.u3-qa-year-entry{background:linear-gradient(125deg,#101f2b,#064e3b)!important;border:1px solid #e7c68a80!important;color:#f7f0d8!important}
.u3-qa-year-entry strong,.u3-qa-year-entry small,.u3-qa-year-entry .u3-qa-preview-tag{color:#f7f0d8!important}
.u3-qa-year-entry .u3-qa-preview-tag{letter-spacing:.09em;color:#e7c68a!important}
.u3-qa-year-entry button{background:#e7c68a!important;color:#101f2b!important}
.u3-story-immersive:has(.u3-story-top span) .u3-story-card{--u3-gold:#e7c68a}

/* Update 3: eighth-story monthly rhythm and little-wins layouts */
#app .u3-story-immersive .u3-rich-rhythm,#app .u3-story-immersive .u3-rich-wins{display:flex;flex-direction:column;gap:clamp(10px,2.3dvh,24px);min-width:0}
#app .u3-story-immersive .u3-rich-rhythm-sun,#app .u3-story-immersive .u3-rich-wins-spark{font-size:clamp(54px,12dvh,105px);line-height:1;color:var(--u3-accent);filter:drop-shadow(0 12px 30px color-mix(in srgb,var(--u3-accent),transparent 66%))}
#app .u3-story-immersive .u3-rich-rhythm>small,#app .u3-story-immersive .u3-rich-wins-row>small{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--u3-accent)}
#app .u3-story-immersive .u3-rich-rhythm>strong{font-size:clamp(24px,5dvh,43px);overflow-wrap:anywhere}
#app .u3-story-immersive .u3-rich-rhythm-stats{display:grid;grid-template-columns:1fr 1fr;gap:11px}
#app .u3-story-immersive .u3-rich-rhythm-stats>div,#app .u3-story-immersive .u3-rich-wins-row{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:clamp(12px,2dvh,22px);display:flex;flex-direction:column;gap:8px;min-width:0}
#app .u3-story-immersive .u3-rich-rhythm-stats b,#app .u3-story-immersive .u3-rich-wins-row strong{font-size:clamp(25px,5dvh,45px);color:var(--u3-accent)}
#app .u3-story-immersive .u3-rich-rhythm-stats span,#app .u3-story-immersive .u3-rich-wins>p{font-size:13px;line-height:1.4}
@media(max-height:650px){#app .u3-story-immersive .u3-rich-rhythm,#app .u3-story-immersive .u3-rich-wins{gap:7px}#app .u3-story-immersive .u3-rich-rhythm-sun,#app .u3-story-immersive .u3-rich-wins-spark{font-size:48px}}

#app .u3-story-immersive .u3-story-sound{display:grid;place-items:center;min-width:34px;min-height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.13);color:white;font-size:21px;cursor:pointer;touch-action:manipulation}


/* U3 Rewind art direction: 12 distinct animated monthly atmospheres +
   championship-style annual navy/emerald/champagne atmosphere. Scoped only
   to the full-screen viewer; no changes to Home, Finance or Wallet. */
#app .u3-story-immersive .u3-story-card{
 --u3-story-art: radial-gradient(circle at 84% 24%, color-mix(in srgb,var(--u3-accent) 23%,transparent), transparent 42%),var(--u3-bg);
 background:var(--u3-story-art)!important;
}
#app .u3-story-immersive[data-art-month="01"]{--u3-art-name:'Frost & Focus'}
#app .u3-story-immersive[data-art-month="01"] .u3-story-card{--u3-story-art:repeating-linear-gradient(112deg,transparent 0 44px,rgba(166,220,236,.045) 46px 48px,transparent 50px 94px),radial-gradient(ellipse at 75% 30%,rgba(166,220,236,.32),transparent 53%),linear-gradient(154deg,#122F4B,#0B2139)}
#app .u3-story-immersive[data-art-month="02"] .u3-story-card{--u3-story-art:radial-gradient(ellipse at 80% 22%,rgba(244,199,218,.27),transparent 50%),repeating-radial-gradient(ellipse at 90% 14%,transparent 0 46px,rgba(244,199,218,.09) 48px 50px,transparent 52px 116px),linear-gradient(150deg,#553E67,#32254F)}
#app .u3-story-immersive[data-art-month="03"] .u3-story-card{--u3-story-art:radial-gradient(ellipse at 74% 26%,rgba(180,232,200,.22),transparent 50%),repeating-radial-gradient(ellipse at 90% 60%,transparent 0 53px,rgba(180,232,200,.12) 55px 56px,transparent 57px 139px),linear-gradient(155deg,#125645,#073C37)}
#app .u3-story-immersive[data-art-month="04"] .u3-story-card{--u3-story-art:radial-gradient(ellipse at 84% 30%,rgba(248,200,178,.35),transparent 52%),linear-gradient(145deg,transparent 35%,rgba(248,200,178,.12) 45%,transparent 56%),linear-gradient(155deg,#783D54,#502C47)}
#app .u3-story-immersive[data-art-month="05"] .u3-story-card{--u3-story-art:repeating-conic-gradient(from 205deg at 95% 14%,transparent 0deg 11deg,rgba(245,217,157,.07) 13deg 15deg,transparent 17deg 32deg),radial-gradient(circle at 92% 10%,rgba(245,217,157,.30),transparent 55%),linear-gradient(155deg,#594218,#3C301D)}
#app .u3-story-immersive[data-art-month="06"] .u3-story-card{--u3-story-art:repeating-radial-gradient(ellipse at 90% 20%,transparent 0 61px,rgba(158,218,226,.11) 63px 65px,transparent 67px 145px),radial-gradient(ellipse at 85% 24%,rgba(158,218,226,.25),transparent 50%),linear-gradient(175deg,#064D61,#083346)}
#app .u3-story-immersive[data-art-month="07"] .u3-story-card{--u3-story-art:repeating-linear-gradient(153deg,transparent 0 100px,rgba(230,218,161,.075) 105px 112px,transparent 117px 220px),radial-gradient(ellipse at 90% 15%,rgba(230,218,161,.19),transparent 52%),linear-gradient(160deg,#544A2B,#302F24)}
#app .u3-story-immersive[data-art-month="08"] .u3-story-card{--u3-story-art:repeating-radial-gradient(ellipse at 100% 110%,transparent 0 80px,rgba(166,229,206,.12) 84px 87px,transparent 90px 175px),radial-gradient(ellipse at 90% 25%,rgba(166,229,206,.21),transparent 44%),linear-gradient(155deg,#203B48,#102D3C)}
#app .u3-story-immersive[data-art-month="09"] .u3-story-card{--u3-story-art:repeating-radial-gradient(circle at 91% 37%,transparent 0 55px,rgba(198,196,250,.10) 58px 60px,transparent 63px 120px),radial-gradient(ellipse at 77% 40%,rgba(198,196,250,.20),transparent 56%),linear-gradient(145deg,#403F68,#262F56)}
#app .u3-story-immersive[data-art-month="10"] .u3-story-card{--u3-story-art:radial-gradient(ellipse at 86% 20%,rgba(243,201,172,.39),transparent 46%),radial-gradient(ellipse at 5% 84%,rgba(248,163,158,.12),transparent 51%),linear-gradient(156deg,#67374A,#48263E)}
#app .u3-story-immersive[data-art-month="11"] .u3-story-card{--u3-story-art:repeating-linear-gradient(165deg,transparent 0 55px,rgba(194,214,227,.05) 60px 63px,transparent 69px 145px),radial-gradient(ellipse at 76% 23%,rgba(194,214,227,.26),transparent 54%),linear-gradient(145deg,#283E53,#1A3042)}
#app .u3-story-immersive[data-art-month="12"] .u3-story-card{--u3-story-art:radial-gradient(circle at 82% 15%,rgba(246,214,198,.32),transparent 29%),radial-gradient(circle at 65% 43%,rgba(246,214,198,.13),transparent 35%),repeating-linear-gradient(125deg,transparent 0 72px,rgba(246,214,198,.06) 75px 78px,transparent 82px 170px),linear-gradient(155deg,#44365A,#2D2A4A)}
#app .u3-story-immersive[data-art-month="year"] .u3-story-card{
 --u3-story-art:radial-gradient(ellipse at 78% 23%,rgba(231,198,138,.27),transparent 46%),radial-gradient(ellipse at 10% 85%,rgba(6,112,82,.40),transparent 51%),repeating-conic-gradient(from 225deg at 105% -10%,transparent 0deg 10deg,rgba(231,198,138,.055) 12deg 14deg,transparent 16deg 35deg),linear-gradient(145deg,#101F2B,#082C35 68%,#101F2B);
}
/* Each chapter has a changed arrangement within its month's family. */
#app .u3-story-immersive .u3-story-kind-category:before{width:58vmin;height:58vmin;top:28%;right:-25%;border:4px solid var(--u3-accent);background:transparent;opacity:.18;filter:none}
#app .u3-story-immersive .u3-story-kind-merchant:before{width:30vmin;height:86vmin;top:8%;right:-18%;border-radius:50%;transform:rotate(-35deg);opacity:.13}
#app .u3-story-immersive .u3-story-kind-rhythm:before{width:70vmin;height:70vmin;top:40%;right:-30%;border:4px dashed var(--u3-accent);background:transparent;opacity:.22}
#app .u3-story-immersive .u3-story-kind-wins:after{width:42vmin;height:42vmin;left:-13%;bottom:40%;opacity:.15;filter:blur(25px)}
#app .u3-story-immersive .u3-story-kind-endcard:before{width:55vmin;height:55vmin;top:-12%;right:-22%;filter:blur(32px);opacity:.22}
#app .u3-story-immersive .u3-story-kind-endcard:after{width:36vmin;height:36vmin;bottom:2%;left:1%;filter:blur(25px);opacity:.17}
#app .u3-story-immersive .u3-story-kind-endcard .u3-story-center{display:flex;flex-direction:column;align-items:stretch;gap:0;max-width:690px}
#app .u3-story-immersive .u3-story-kind-endcard .u3-story-center>small{letter-spacing:.23em}
#app .u3-story-immersive .u3-story-kind-endcard .u3-story-center>h2{font-size:clamp(38px,8.4vw,85px);line-height:.95;max-width:12ch;margin:clamp(12px,3dvh,38px) 0 clamp(14px,2dvh,28px)}
#app .u3-story-immersive .u3-story-kind-endcard>.u3-story-card>p{display:none}
#app .u3-story-immersive .u3-story-kind-endcard>p{display:none}
#app .u3-story-immersive .u3-story-kind-endcard .u3-story-top{opacity:.65}
#app .u3-story-immersive .u3-story-kind-endcard .u3-story-bottom{font-size:clamp(9px,1.2vw,12px)}
#app .u3-story-immersive .u3-rewind-poster{display:flex;flex-direction:column;gap:clamp(12px,2.5dvh,30px);position:relative;isolation:isolate}
#app .u3-story-immersive .u3-poster-ornament{position:absolute;right:5%;top:-19%;width:clamp(70px,18vw,160px);height:auto;aspect-ratio:1;display:block;color:var(--u3-accent);opacity:.24;pointer-events:none;flex:none}
#app .u3-story-immersive .u3-poster-overline{font-weight:900;letter-spacing:.18em;font-size:clamp(10px,1.5vw,13px);color:var(--u3-accent);margin:0}
#app .u3-story-immersive .u3-poster-stats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6dvh,20px);align-items:start}
#app .u3-story-immersive .u3-poster-stat{padding:0 0 clamp(8px,1.5dvh,17px);min-width:0;border-bottom:1px solid rgba(255,255,255,.20)}
#app .u3-story-immersive .u3-poster-stat:first-child{grid-column:1 / -1}
#app .u3-story-immersive .u3-poster-stat small{display:block;font-size:clamp(9px,1.2vw,12px);font-weight:850;letter-spacing:.12em;color:var(--u3-accent)}
#app .u3-story-immersive .u3-poster-stat strong{display:block;font-size:clamp(20px,3.8vw,37px);line-height:1.13;margin-top:7px;overflow-wrap:anywhere;letter-spacing:-.035em}
#app .u3-story-immersive .u3-poster-stat:first-child strong{font-size:clamp(26px,5vw,48px)}
#app .u3-story-immersive .u3-poster-aavi{border:1px solid rgba(255,255,255,.19);background:rgba(255,255,255,.07);border-radius:clamp(16px,2.4vw,25px);padding:clamp(13px,2.5vw,25px);backdrop-filter:blur(12px)}
#app .u3-story-immersive .u3-poster-aavi>span{display:block;font-weight:800;letter-spacing:.14em;color:var(--u3-accent);font-size:clamp(9px,1.3vw,12px)}
#app .u3-story-immersive .u3-poster-aavi p{font-size:clamp(15px,2.8vw,27px);font-weight:550;line-height:1.26;margin:8px 0 0;overflow-wrap:anywhere}
#app .u3-story-immersive .u3-poster-signoff{font-size:10px;letter-spacing:.16em;color:var(--u3-accent);font-weight:800}
@media(max-width:550px){
 #app .u3-story-immersive .u3-story-kind-endcard .u3-story-center>h2{font-size:clamp(34px,7.4dvh,52px);margin:10px 0 18px}
 #app .u3-story-immersive .u3-rewind-poster{gap:clamp(9px,1.3dvh,15px)}
 #app .u3-story-immersive .u3-poster-stat strong{font-size:clamp(17px,4.8vw,25px)}
 #app .u3-story-immersive .u3-poster-stat:first-child strong{font-size:clamp(24px,6.3vw,35px)}
 #app .u3-story-immersive .u3-poster-aavi{padding:13px}
 #app .u3-story-immersive .u3-poster-aavi p{font-size:clamp(15px,4.4vw,22px)}
}
@media(prefers-reduced-motion:no-preference){
 #app .u3-story-immersive .u3-story-kind-intro:before,#app .u3-story-immersive .u3-story-kind-endcard:before{animation:u3-rewind-art-float 9s ease-in-out infinite alternate}
 #app .u3-story-immersive .u3-poster-ornament{animation:u3-rewind-art-float 5s ease-in-out infinite alternate}
}
@keyframes u3-rewind-art-float{from{transform:translate3d(0,0,0) rotate(-4deg)}to{transform:translate3d(-18px,18px,0) rotate(9deg)}}

/* The poster already carries its own quiet signature; omit duplicate footer. */
#app .u3-story-immersive .u3-story-kind-endcard .u3-story-bottom{display:none!important}


/* 30 Oct isolated QA polish: adaptive iPad layout, uncluttered story compositions,
   correct sound states, animated metrics and seamless browser-safe-area backdrop. */
html:has(#app .u3-story-immersive),body:has(#app .u3-story-immersive){
 background:var(--u3-active-rewind-bg,#101F2B)!important;
}
#app .u3-viewer.u3-story-immersive{
 background:var(--u3-bg,#101F2B)!important;
 min-height:100dvh!important;
}
/* The compact top controls need room but never 128px of unused padding on iPad. */
#app .u3-story-immersive .u3-story-card{
 padding-top:clamp(88px,calc(10dvh + env(safe-area-inset-top)),116px)!important;
 padding-bottom:clamp(24px,calc(4dvh + env(safe-area-inset-bottom)),58px)!important;
 gap:clamp(4px,.7dvh,10px)!important;
}
#app .u3-story-immersive .u3-story-header-actions button{
 background:rgba(19,27,32,.24)!important;
 border:1px solid rgba(255,255,255,.24)!important;
 box-shadow:none!important;
 appearance:none;-webkit-appearance:none;
}
#app .u3-story-immersive .u3-story-header-actions button:before,
#app .u3-story-immersive .u3-story-header-actions button:after{content:none!important;display:none!important;}
#app .u3-story-immersive .u3-story-sound{font-size:initial!important;}
#app .u3-story-immersive .u3-sound-svg{display:block;width:21px;height:21px;flex-shrink:0;}
#app .u3-story-immersive .u3-story-sound[aria-pressed="true"]{background:rgba(255,255,255,.19)!important;}
/* The top segmented white bar is the intentional story timer; no second controls bar. */
#app .u3-story-immersive .u3-story-controls{display:none!important;}
/* Present winners once: don't duplicate the first-ranked merchant/category. */
#app .u3-story-immersive .u3-rich-ranks{gap:clamp(3px,.65dvh,7px);}
#app .u3-story-immersive .u3-rich-rank{padding:clamp(6px,1.1dvh,11px) 12px;}
#app .u3-story-immersive .u3-rich-category{margin-bottom:clamp(7px,1.5dvh,18px);}
#app .u3-story-immersive .u3-rich-aavi-outro{opacity:.6;font-size:11px;}
#app .u3-story-immersive .u3-rich-rhythm-stats>div{padding:clamp(10px,1.4dvh,16px);}
#app .u3-story-immersive .u3-rich-wins-row{padding:clamp(10px,1.4dvh,16px);}
/* Donut ring: animate stroke from zero to actual share; text stays accurate. */
#app .u3-story-immersive .u3-rich-ring{
 position:relative;background:transparent!important;padding:16px;isolation:isolate;
 border:0;box-shadow:none;
}
#app .u3-story-immersive .u3-rich-ring>div{background:transparent!important;position:relative;z-index:1;}
#app .u3-story-immersive .u3-ring-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;}
#app .u3-story-immersive .u3-ring-svg circle{fill:none;stroke-width:10;}
#app .u3-story-immersive .u3-ring-track{stroke:rgba(255,255,255,.22);}
#app .u3-story-immersive .u3-ring-progress{stroke:var(--u3-accent);stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.18,.65,.2,1);}
/* Horizontal bars should grow horizontally, and comparison columns vertically. */
@media(prefers-reduced-motion:no-preference){
 #app .u3-story-immersive .u3-rich-track i{animation:u3-rewind-grow-x 1.05s .15s cubic-bezier(.18,.72,.25,1) both!important;}
 #app .u3-story-immersive .u3-rich-compare-bar i{animation:u3-rewind-grow-y 1.05s .15s cubic-bezier(.18,.72,.25,1) both!important;}
}
@keyframes u3-rewind-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes u3-rewind-grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
#app .u3-story-immersive .u3-rich-compare-bar i{transform-origin:bottom center;}
@media (min-width:650px){
 #app .u3-story-immersive .u3-story-center{max-width:min(82%,720px);}
 #app .u3-story-immersive .u3-story-center h2{font-size:clamp(29px,4.3dvh,53px);margin:7px 0 clamp(10px,1.9dvh,22px);}
 #app .u3-story-immersive .u3-story-kind-intro .u3-story-center h2{font-size:clamp(39px,6.5dvh,70px);}
 #app .u3-story-immersive .u3-story-detail strong{font-size:clamp(27px,4.5dvh,50px);}
 #app .u3-story-immersive .u3-rich-ring{width:clamp(105px,17dvh,185px);height:clamp(105px,17dvh,185px);}
 #app .u3-story-immersive .u3-rich-compare-bar{height:clamp(90px,17dvh,160px);}
 #app .u3-story-immersive .u3-rich-merchant-hero{gap:clamp(7px,1.3dvh,13px);padding:8px 0 10px;}
 #app .u3-story-immersive .u3-rich-merchant-hero strong{font-size:clamp(28px,4.5dvh,50px);}
 #app .u3-story-immersive .u3-rich-wins-spark,#app .u3-story-immersive .u3-rich-rhythm-sun{font-size:clamp(45px,8dvh,78px);}
 #app .u3-story-immersive .u3-rich-rhythm,#app .u3-story-immersive .u3-rich-wins{gap:clamp(7px,1.3dvh,14px);}
}
#app .u3-story-immersive .u3-story-card.u3-story-compact{
 padding-top:clamp(70px,calc(8dvh + env(safe-area-inset-top)),96px)!important;
 padding-bottom:clamp(13px,calc(2dvh + env(safe-area-inset-bottom)),31px)!important;
}
#app .u3-story-immersive .u3-story-card.u3-story-tight .u3-story-center h2{font-size:clamp(25px,3.9dvh,43px);margin:4px 0 8px;}
#app .u3-story-immersive .u3-story-card.u3-story-tight .u3-rich-chips,
#app .u3-story-immersive .u3-story-card.u3-story-tight .u3-rich-footnote,
#app .u3-story-immersive .u3-story-card.u3-story-tight .u3-rich-aavi-outro{display:none;}
#app .u3-story-immersive .u3-story-card.u3-story-tight .u3-rich-number strong{margin-bottom:9px;}
#app .u3-story-immersive .u3-story-card.u3-story-tight .u3-rich-ranks{gap:3px;}
#app .u3-story-immersive .u3-story-card.u3-story-tight .u3-rich-compare-bar{height:clamp(62px,11dvh,112px);}
#app .u3-story-immersive .u3-story-card.u3-story-tight .u3-rich-speech{padding:12px 14px;}
#app .u3-story-immersive .u3-story-card.u3-story-tight .u3-rich-speech>p{font-size:clamp(18px,2.6dvh,26px);}
@media(max-width:480px){
 #app .u3-story-immersive .u3-story-card{padding-top:max(96px,calc(env(safe-area-inset-top) + 84px))!important;padding-bottom:max(32px,calc(env(safe-area-inset-bottom) + 23px))!important;}
 #app .u3-story-immersive .u3-story-card.u3-story-compact{padding-top:max(80px,calc(env(safe-area-inset-top) + 69px))!important;padding-bottom:max(20px,calc(env(safe-area-inset-bottom) + 14px))!important;}
}
@media(prefers-reduced-motion:reduce){
 #app .u3-story-immersive .u3-ring-progress{transition:none!important;}
 #app .u3-story-immersive .u3-rich-track i,#app .u3-story-immersive .u3-rich-compare-bar i{animation:none!important;transform:none!important;}
}

/* Keep purely decorative rhythm circle inside its clipped canvas so it cannot
   inflate iPad scrollHeight and trigger unnecessary shrink-to-fit. */
#app .u3-story-immersive .u3-story-kind-rhythm:before{top:23%;width:min(70vmin,510px);height:min(70vmin,510px);}

/* 30 Oct QA follow-up — Instagram-style vertical balance.
   The end-card hides its caption/footer, so space-between incorrectly sends
   the only remaining content block to the bottom of the viewport. Keep both
   monthly and annual summary content in normal document flow, below the
   story header, and let the existing viewport-fit routine compact if needed.
   Scope is deliberately confined to the immersive Rewind viewer. */
#app .u3-story-immersive .u3-story-card.u3-story-kind-endcard{
 justify-content:flex-start!important;
}
#app .u3-story-immersive .u3-story-card.u3-story-kind-endcard .u3-story-center{
 flex:0 1 auto;
 /* Center the poster in the safe story body; auto margins collapse if
    a small screen needs the space for its full content. */
 margin-block:auto;
}
/* Ordinary scenes have four visible regions; lift only the middle content,
   not the header, interactive controls, captions, or safe-area insets. */
#app .u3-story-immersive .u3-story-card:not(.u3-story-kind-endcard):not(.u3-story-compact):not(.u3-story-tight) .u3-story-center{
 transform:translateY(clamp(-28px,-2.8dvh,-12px));
}
/* Constrained landscape and short devices should never trade fit for lift. */
/* The QA preview pill already identifies this story. Never print the
   redundant in-card metadata beneath it in the same coordinates. */
#app .u3-story-immersive:has(.u3-preview-notice) .u3-story-top{
 visibility:hidden;
}
@media(max-height:700px){
 #app .u3-story-immersive .u3-story-card:not(.u3-story-kind-endcard) .u3-story-center{
  transform:none;
 }
}


/* 30 Oct QA feedback: iPhone story chrome & uninterrupted full-screen art.
   The viewer itself gets the largest available CSS viewport (including the
   iOS toolbar/home-indicator bleed where WebKit permits painting), while
   the document backdrop uses the SAME computed scene gradient for Safari's
   area outside the fixed viewport. Do not repaint a flat-color bottom band. */
html:has(#app .u3-story-immersive),
body:has(#app .u3-story-immersive){
 background-color:var(--u3-active-rewind-bg,#101f2b)!important;
 background-image:var(--u3-active-rewind-paint,none)!important;
 background-repeat:no-repeat!important;
 background-position:left top!important;
 background-size:100vw max(100dvh,100lvh)!important;
 background-attachment:fixed!important;
}
#app .u3-viewer.u3-story-immersive{
 /* lv(h) prevents dvh from ending above the bottom browser safe area. */
 height:max(100dvh,100lvh)!important;
 min-height:max(100dvh,100lvh)!important;
 bottom:auto!important;
 background-color:var(--u3-bg,#101f2b)!important;
 background-image:var(--u3-active-rewind-paint,none)!important;
 background-repeat:no-repeat!important;
 background-size:100vw max(100dvh,100lvh)!important;
 background-position:left top!important;
}
/* Keep the *content* in the visible dynamic viewport so extending the art
   never pushes the end-card below the Safari toolbar. Both layers paint the
   same scene gradient at the same full-height scale. */
#app .u3-story-immersive .u3-story-card{
 height:100dvh!important;
 background-size:100vw max(100dvh,100lvh)!important;
 background-position:left top!important;
}
/* Tuck the progress and controls below the actual iOS top safe-area;
   the entire group moves together, including the QA-only notice. */
#app .u3-story-immersive .u3-story-progress{
 top:max(12px,calc(env(safe-area-inset-top,0px) + 4px))!important;
}
#app .u3-story-immersive .u3-viewer-head{
 top:max(31px,calc(env(safe-area-inset-top,0px) + 19px))!important;
}
#app .u3-story-immersive .u3-preview-notice{
 top:max(79px,calc(env(safe-area-inset-top,0px) + 67px))!important;
}
/* True translucent Liquid Glass circles, not flat dark tinted buttons.
   Isolated from in-app Wallet/Undo glass and active only in the story. */
#app .u3-story-immersive .u3-story-header-actions button,
#app .u3-story-immersive .u3-story-header-actions .u3-story-sound[aria-pressed="true"]{
 background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(255,255,255,.07) 57%,rgba(255,255,255,.13))!important;
 border:1px solid rgba(255,255,255,.35)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.27),inset 0 -1px 0 rgba(255,255,255,.08),0 5px 18px rgba(0,0,0,.12)!important;
 backdrop-filter:blur(22px) saturate(1.65)!important;
 -webkit-backdrop-filter:blur(22px) saturate(1.65)!important;
 color:#fff!important;
}
#app .u3-story-immersive .u3-story-header-actions button:active{
 background:rgba(255,255,255,.30)!important;
 transform:scale(.96);
}
#app .u3-story-immersive .u3-story-header-actions button:focus-visible{
 outline:2px solid #fff!important;
 outline-offset:3px;
}
@media(prefers-reduced-transparency:reduce){
 #app .u3-story-immersive .u3-story-header-actions button{
  background:rgba(22,29,36,.88)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 }
}


/* 30 Oct iPad follow-up — fit the READABLE slide to Safari's actual visible
   area; the decorative background may still overscan into browser chrome.
   iPad Split View, landscape address bars, and installed PWA can report a
   smaller visual viewport than CSS dvh. This override is tablet-only and
   does not change the approved iPhone composition. */
@media (min-width:600px){
 #app .u3-story-immersive .u3-story-card {
   height:min(100dvh,var(--u3-readable-height,100dvh))!important;
   min-height:0!important;
   max-height:min(100dvh,var(--u3-readable-height,100dvh))!important;
   padding-top:clamp(84px,calc(env(safe-area-inset-top) + 77px),110px)!important;
   padding-bottom:clamp(18px,calc(env(safe-area-inset-bottom) + 22px),45px)!important;
 }
 #app .u3-story-immersive .u3-story-card.u3-story-compact {
   padding-top:clamp(77px,calc(env(safe-area-inset-top) + 70px),100px)!important;
   padding-bottom:clamp(14px,calc(env(safe-area-inset-bottom) + 12px),29px)!important;
 }
 #app .u3-story-immersive .u3-story-center{min-height:0;max-width:min(90%,780px);}
}
/* The heading and Aavi note previously retained desktop-scale type on a
   short iPad, even though the poster itself had a smaller content area. */
@media (min-width:600px) and (max-height:920px){
 #app .u3-story-immersive .u3-story-kind-endcard .u3-story-center>h2{
   font-size:clamp(35px,6.4dvh,58px);
   line-height:1.02;
   margin:clamp(8px,1.5dvh,15px) 0 clamp(11px,1.9dvh,17px);
   max-width:16ch;
 }
 #app .u3-story-immersive .u3-story-kind-endcard .u3-rewind-poster {gap:clamp(8px,1.5dvh,14px);}
 #app .u3-story-immersive .u3-story-kind-endcard .u3-poster-aavi{padding:clamp(12px,1.9dvh,18px);}
 #app .u3-story-immersive .u3-story-kind-endcard .u3-poster-aavi p{font-size:clamp(16px,2.7dvh,22px);}
 #app .u3-story-immersive .u3-story-kind-endcard .u3-poster-stat strong{font-size:clamp(18px,3.1dvh,29px);}
 #app .u3-story-immersive .u3-story-kind-endcard .u3-poster-stat:first-child strong{font-size:clamp(24px,4.5dvh,35px);}
}
@media (min-width:600px) and (max-height:700px){
 #app .u3-story-immersive .u3-story-card{padding-top:max(79px,calc(env(safe-area-inset-top) + 63px))!important;padding-bottom:max(12px,env(safe-area-inset-bottom))!important;}
 #app .u3-story-immersive .u3-story-card.u3-story-compact{padding-top:max(72px,calc(env(safe-area-inset-top) + 58px))!important;padding-bottom:max(10px,env(safe-area-inset-bottom))!important;}
 #app .u3-story-immersive .u3-story-kind-endcard .u3-story-center>h2{font-size:clamp(32px,6.6dvh,45px);}
}

/* 30 Oct iPad screenshot regression: a fixed Rewind was clipped at the right
   edge because .shell retains the app's pull-to-refresh translate3d() and
   will-change:transform. Those create a containing block for fixed children,
   while .shell also has a limited width and overflow-x:hidden. The viewer must
   use the real viewport on ALL devices, including narrow iPad page columns.
   Only disable the page wrapper effects while its Rewind viewer exists;
   restore automatically when the viewer closes. Leave the pull-to-refresh
   styling and behaviour unchanged everywhere else. */
body:has(#app .u3-story-immersive) #app > .shell {
  transform:none!important;
  will-change:auto!important;
  overflow:visible!important;
}


/* 30 Oct iPhone field QA: the bottom ~34 CSS-pixel Safari/PWA safe area
   showed the plain --u3-bg beneath an otherwise continuous story gradient.
   Keep the readable story card within 100dvh, but extend only the viewer's
   decorative scene behind the bottom inset. This does not shift end-card
   content or alter the responsive iPad viewport fix. */
@media (max-width:599px){
 html:has(#app .u3-story-immersive),
 body:has(#app .u3-story-immersive),
 #app .u3-viewer.u3-story-immersive{
  --u3-ios-bottom-bleed:env(safe-area-inset-bottom,0px);
  --u3-ios-story-height:calc(max(100dvh,100lvh) + var(--u3-ios-bottom-bleed));
 }
 html:has(#app .u3-story-immersive),
 body:has(#app .u3-story-immersive){
  background-size:100vw var(--u3-ios-story-height)!important;
  background-position:left top!important;
 }
 #app .u3-viewer.u3-story-immersive{
  height:var(--u3-ios-story-height)!important;
  min-height:var(--u3-ios-story-height)!important;
  background-color:var(--u3-bg,#101f2b)!important;
  background-image:var(--u3-active-rewind-paint,none)!important;
  background-position:left top!important;
  background-repeat:no-repeat!important;
  background-size:100vw var(--u3-ios-story-height)!important;
 }
 /* The card keeps the exact visible story height so text, controls and
    fitting calculations don't move into the system gesture area. The
    viewer underneath now carries the same gradient into that area. */
 #app .u3-story-immersive .u3-story-card{
  height:100dvh!important;
  /* Paint the visible card at the same full-bleed scale as the overscanning
     viewer. Otherwise two copies of the gradient meet at a visible seam. */
  background-size:100vw var(--u3-ios-story-height)!important;
  background-position:left top!important;
 }
}

/* Update 3 final annual storytelling QA — dedicated compositions for
   record-backed yearly awards, rankings, timelines and comparisons. */
#app .u3-story-immersive .u3-annual-battle,
#app .u3-story-immersive .u3-annual-timeline,
#app .u3-story-immersive .u3-annual-award,
#app .u3-story-immersive .u3-annual-compare,
#app .u3-story-immersive .u3-annual-single{display:flex;flex-direction:column;gap:clamp(9px,1.7dvh,20px);width:100%;min-width:0}
#app .u3-story-immersive .u3-annual-crown{color:var(--u3-accent);font-size:clamp(35px,6dvh,65px);text-align:center;line-height:1}
#app .u3-story-immersive .u3-annual-battle-row{padding:clamp(9px,1.4dvh,17px);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.17);border-radius:17px;min-width:0}
#app .u3-story-immersive .u3-annual-battle-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:clamp(13px,1.8dvh,20px);font-weight:700}
#app .u3-story-immersive .u3-annual-battle-header>strong{color:var(--u3-accent);white-space:nowrap;font-variant-numeric:tabular-nums}
#app .u3-story-immersive .u3-annual-battle-track{height:9px;background:rgba(255,255,255,.17);border-radius:99px;overflow:hidden;margin-top:12px}
#app .u3-story-immersive .u3-annual-battle-track i{display:block;width:var(--u3-fill,0%);height:100%;background:var(--u3-accent);border-radius:inherit}
#app .u3-story-immersive .u3-annual-timeline-spark{font-size:clamp(30px,6dvh,60px);color:var(--u3-accent)}
#app .u3-story-immersive .u3-annual-timeline-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(7px,1.1dvh,12px)}
#app .u3-story-immersive .u3-annual-timeline-month{display:flex;flex-direction:column;gap:3px;padding:clamp(8px,1.1dvh,13px);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:13px;min-width:0}
#app .u3-story-immersive .u3-annual-timeline-month span{font-size:clamp(12px,1.8dvh,17px);opacity:.84}
#app .u3-story-immersive .u3-annual-timeline-month b{font-size:clamp(13px,2dvh,22px);color:var(--u3-accent);overflow-wrap:anywhere}
#app .u3-story-immersive .u3-annual-award{align-items:flex-start;gap:clamp(15px,2.3dvh,27px)}
#app .u3-story-immersive .u3-annual-award-medal{font-size:clamp(70px,14dvh,142px);line-height:1;color:var(--u3-accent);align-self:center;animation:u3-rewind-art-float 9s ease-in-out infinite alternate}
#app .u3-story-immersive .u3-annual-award>span{font-size:clamp(12px,1.8dvh,16px);letter-spacing:.18em;font-weight:800;color:var(--u3-accent)}
#app .u3-story-immersive .u3-annual-award>strong{font-size:clamp(35px,7dvh,70px);line-height:1.07;letter-spacing:-.04em}
#app .u3-story-immersive .u3-annual-award-pills{display:flex;flex-wrap:wrap;gap:8px}
#app .u3-story-immersive .u3-annual-award-pills span{border:1px solid rgba(255,255,255,.28);border-radius:99px;padding:8px 12px;font-size:clamp(12px,1.8dvh,17px)}
#app .u3-story-immersive .u3-annual-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,2.5vw,22px)}
#app .u3-story-immersive .u3-annual-compare-column{min-width:0;display:flex;flex-direction:column;gap:9px;align-items:stretch}
#app .u3-story-immersive .u3-annual-compare-track{height:clamp(100px,23dvh,270px);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);display:flex;align-items:flex-end;overflow:hidden;border-radius:18px}
#app .u3-story-immersive .u3-annual-compare-track i{display:block;width:100%;height:var(--u3-height,0%);background:rgba(255,255,255,.37);border-radius:15px 15px 0 0}
#app .u3-story-immersive .u3-annual-compare-track i.latest{background:var(--u3-accent)}
#app .u3-story-immersive .u3-annual-compare-column>span{font-size:clamp(12px,1.8dvh,18px);font-weight:700}
#app .u3-story-immersive .u3-annual-compare-column>b{font-size:clamp(16px,2.4dvh,28px);color:var(--u3-accent)}
#app .u3-story-immersive .u3-annual-compare>p{grid-column:1/-1;font-size:clamp(12px,1.8dvh,16px);opacity:.8}
#app .u3-story-immersive .u3-annual-single>span{font-size:clamp(80px,15dvh,160px);color:var(--u3-accent)}
#app .u3-story-immersive .u3-annual-single>strong{font-size:clamp(30px,6dvh,58px)}
#app .u3-story-immersive .u3-annual-single>p{font-size:clamp(15px,2.2dvh,24px)}
#app .u3-story-immersive .u3-annual-single>b{color:var(--u3-accent)}
@media(prefers-reduced-motion:reduce){#app .u3-story-immersive .u3-annual-award-medal{animation:none!important}}
@media(prefers-reduced-motion:no-preference){#app .u3-story-immersive .u3-annual-battle-track i{animation:u3-rewind-grow-x 1s ease-out both;transform-origin:left center}#app .u3-story-immersive .u3-annual-compare-track i{animation:u3-rewind-grow-y .9s ease-out both;transform-origin:bottom center}}
.u3-year-archive-group{margin:clamp(15px,2vw,25px) 0 32px}
.u3-year-archive-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border,rgba(140,160,150,.28));margin-bottom:15px;padding-bottom:8px}
.u3-year-archive-heading h3{margin:0;font-size:clamp(21px,4vw,30px)}
.u3-year-archive-heading span{font-size:12px;opacity:.6}
.u3-year-archive-card{display:flex;flex-direction:column;gap:10px;width:100%;margin:0 0 15px;padding:24px!important;text-align:left;color:#f8f1dc!important;background:linear-gradient(135deg,#101f2b,#064e3b)!important;border:1px solid rgba(231,198,138,.36)!important;border-radius:22px!important}
.u3-year-archive-card span{font-size:11px;letter-spacing:.16em;color:#e7c68a}
.u3-year-archive-card strong{font-size:clamp(20px,4vw,31px)}
.u3-year-archive-card small{opacity:.75}

/* 30 Oct Update 3 — Theme-linked Share Studio.
   Single Rewind-derived monthly palette (12 themes) or annual navy/emerald/gold.
   No changes to Finance, Wallet, Undo, or other app modals. */
#modal-root .modal-wrap:has(.u3-share-studio){
 z-index:2147482500!important;align-items:center!important;justify-content:center!important;
 padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 12px)!important;
 background:rgba(9,13,25,.65)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
body #modal-root .modal-wrap:has(.u3-share-studio) > .modal,
body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal-wrap:has(.u3-share-studio) > .modal{
 width:min(940px,100%)!important;max-width:none!important;
 max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)!important;
 padding:0!important;overflow:auto!important;overscroll-behavior:contain;
 color:#fff!important;background:var(--u3-share-bg,#101F2B)!important;
 border:1px solid rgba(255,255,255,.24)!important;border-radius:28px!important;
 box-shadow:0 28px 85px rgba(2,8,20,.45)!important;
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
#modal-root .u3-share-studio{
 --u3-share-bg:#101F2B;--u3-share-accent:#E7C68A;--u3-share-glow:#064E3B;
 position:relative;isolation:isolate;min-width:0;padding:26px;
 background:radial-gradient(ellipse at 85% 4%,color-mix(in srgb,var(--u3-share-accent) 29%,transparent),transparent 51%),
 radial-gradient(ellipse at 2% 94%,color-mix(in srgb,var(--u3-share-glow) 30%,transparent),transparent 54%),
 linear-gradient(135deg,color-mix(in srgb,var(--u3-share-bg) 90%,#fff),var(--u3-share-bg));
 color:#fff!important;
}
#modal-root .u3-share-studio[data-rewind-year="true"]{
 background:radial-gradient(ellipse at 85% 8%,rgba(231,198,138,.22),transparent 55%),
 radial-gradient(ellipse at 6% 96%,rgba(6,78,59,.69),transparent 59%),
 linear-gradient(138deg,#162b39,#101F2B 67%,#112e30);
}
#modal-root .u3-share-studio *{box-sizing:border-box;min-width:0}
#modal-root .u3-share-studio button{font:inherit;cursor:pointer;color:#fff}
#modal-root .u3-share-studio button:focus-visible,
#modal-root .u3-share-studio input:focus-visible{outline:2px solid var(--u3-share-accent);outline-offset:3px}
#modal-root .u3-share-studio-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:22px}
#modal-root .u3-share-studio-head h2{color:#fff!important;font-size:clamp(22px,3vw,30px);line-height:1.15;letter-spacing:-.045em;margin:5px 0!important}
#modal-root .u3-share-studio-head p{font-size:13px;color:rgba(255,255,255,.77);margin:5px 0 0}
#modal-root .u3-share-kicker{font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--u3-share-accent)}
#modal-root .u3-share-studio .u3-share-close{border-radius:50%!important;border:1px solid rgba(255,255,255,.3)!important;
 background:rgba(255,255,255,.12)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.17);backdrop-filter:blur(16px);
 width:42px;height:42px;flex:none;display:grid;place-items:center;font-size:26px!important;font-weight:400;line-height:1;padding:0}
#modal-root .u3-share-studio-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:22px;align-items:start}
#modal-root .u3-share-preview-panel{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);
 padding:15px;border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.11);
 -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);min-width:0}
#modal-root .u3-share-preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:9px}
#modal-root .u3-share-preview-head strong{font-size:10px;letter-spacing:.12em;color:var(--u3-share-accent)}
#modal-root .u3-share-preview-head span{padding:4px 9px;font-size:10px;border-radius:99px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.85)}
#modal-root .u3-share-studio .u3-share-frame-label{font-size:11px;color:rgba(255,255,255,.72);text-align:center;margin:5px 0 8px}
#modal-root .u3-share-studio .u3-share-preview{
 display:block;width:auto;max-width:100%;height:min(38dvh,375px);aspect-ratio:9/16;object-fit:contain;
 margin:0 auto 13px;border-radius:13px;border:1px solid rgba(255,255,255,.18);
 box-shadow:0 9px 26px rgba(0,0,0,.19);background:var(--u3-share-bg)}
#modal-root .u3-share-studio .u3-share-thumbnails{display:flex;gap:7px;overflow-x:auto;scrollbar-width:thin;
 padding:3px 2px 8px;margin:7px 0 3px;scroll-snap-type:x proximity}
#modal-root .u3-share-studio .u3-share-thumbnail{flex:0 0 39px;padding:2px!important;scroll-snap-align:start;
 border:2px solid transparent!important;background:transparent!important;border-radius:8px!important;line-height:0}
#modal-root .u3-share-studio .u3-share-thumbnail.active{border-color:var(--u3-share-accent)!important}
#modal-root .u3-share-studio .u3-share-thumbnail img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:4px}
#modal-root .u3-share-studio .u3-share-frame-note{font-size:11px;color:rgba(255,255,255,.77);text-align:center;margin:8px 0 0}
#modal-root .u3-share-settings-panel{display:grid;gap:15px;align-content:start;min-width:0}
#modal-root .u3-share-studio .u3-share-option-label,
#modal-root .u3-share-studio legend{font-size:12px;font-weight:750;color:rgba(255,255,255,.94);margin:0 0 10px;padding:0}
#modal-root .u3-share-studio .u3-share-format{display:grid;grid-template-columns:1fr 1fr;gap:9px}
#modal-root .u3-share-studio .u3-share-format button{
 min-height:103px;padding:12px!important;border:1px solid rgba(255,255,255,.23)!important;
 border-radius:18px!important;background:rgba(255,255,255,.08)!important;
 display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;
 box-shadow:none!important}
#modal-root .u3-share-studio .u3-share-format button.is-selected{border:1.5px solid var(--u3-share-accent)!important;background:rgba(255,255,255,.17)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--u3-share-accent) 24%,transparent)!important}
#modal-root .u3-share-studio .u3-share-format-icon{font-size:22px;color:var(--u3-share-accent);line-height:1}
#modal-root .u3-share-studio .u3-share-format strong{font-size:14px;font-weight:760}
#modal-root .u3-share-studio .u3-share-format small{font-size:11px;color:rgba(255,255,255,.73)}
#modal-root .u3-share-studio fieldset{border:0;padding:0;margin:0;min-width:0}
#modal-root .u3-share-studio .u3-share-segments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;
 padding:5px;background:rgba(0,0,0,.2);border-radius:16px;border:1px solid rgba(255,255,255,.13)}
#modal-root .u3-share-studio .u3-share-segments button{background:transparent!important;border:0!important;border-radius:12px!important;
 min-height:41px!important;padding:9px 5px!important;font-weight:700;font-size:12px;box-shadow:none!important}
#modal-root .u3-share-studio .u3-share-segments button.is-selected{background:color-mix(in srgb,var(--u3-share-accent) 30%,rgba(255,255,255,.08))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.25)!important}
#modal-root .u3-share-studio .u3-share-privacy-hint{display:flex;gap:8px;align-items:flex-start;margin:9px 1px 0;font-size:11px;line-height:1.55;color:rgba(255,255,255,.8)}
#modal-root .u3-share-studio .u3-share-privacy-hint span{color:var(--u3-share-accent)}
#modal-root .u3-share-studio .u3-share-toggles{display:grid;gap:9px}
#modal-root .u3-share-studio .u3-share-toggles label{display:flex;align-items:center;gap:9px;font-size:13px;color:#fff}
#modal-root .u3-share-studio input[type="checkbox"]{width:18px;height:18px;accent-color:var(--u3-share-accent);flex:none}
#modal-root .u3-share-studio .u3-share-music-row{display:flex;justify-content:space-between;align-items:center;gap:13px;
 border-radius:17px;padding:12px 13px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15)}
#modal-root .u3-share-studio .u3-share-music-row[hidden]{display:none!important}
#modal-root .u3-share-studio .u3-share-music-row>span{display:flex;flex-direction:column;gap:3px}
#modal-root .u3-share-studio .u3-share-music-row strong{font-size:13px}
#modal-root .u3-share-studio .u3-share-music-row small{font-size:11px;color:rgba(255,255,255,.75)}
#modal-root .u3-share-studio .u3-share-export-caption{font-size:11px;line-height:1.5;color:rgba(255,255,255,.72);margin:0}
#modal-root .u3-share-studio .u3-share-export-button{
 min-height:49px;width:100%;padding:12px!important;border:1px solid color-mix(in srgb,var(--u3-share-accent) 64%,#fff)!important;
 border-radius:15px!important;background:var(--u3-share-accent)!important;color:var(--u3-share-bg)!important;
 box-shadow:0 10px 28px rgba(0,0,0,.18)!important;font-weight:850!important}
#modal-root .u3-share-studio .u3-share-export-hint{font-size:11px;color:rgba(255,255,255,.74);line-height:1.45;margin:0;text-align:center}
#modal-root .u3-share-studio #u3-export-status{margin:0;color:#fff;font-size:12px;line-height:1.5}
#modal-root .u3-share-studio .u3-export-ready{margin:10px 0 0;color:#fff}
#modal-root .u3-share-studio .u3-export-ready .u3-share-actions{width:100%;max-width:none;display:grid;grid-template-columns:1fr 1fr}
#modal-root .u3-share-studio .u3-export-ready .u3-share-actions button{min-height:43px;font-size:13px;border-radius:12px!important}
#modal-root .u3-share-studio .u3-export-ready .u3-share-actions .primary{background:var(--u3-share-accent)!important;color:var(--u3-share-bg)!important}
#modal-root .u3-share-studio .u3-export-ready .u3-share-actions .secondary{background:rgba(255,255,255,.16)!important;color:#fff!important}
@media(max-width:650px){
 #modal-root .modal-wrap:has(.u3-share-studio){align-items:flex-end!important;padding:0!important}
 body #modal-root .modal-wrap:has(.u3-share-studio)>.modal,
 body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal-wrap:has(.u3-share-studio)>.modal{
  width:100%!important;max-height:calc(100dvh - env(safe-area-inset-top) - 9px)!important;
  border-radius:25px 25px 0 0!important;border-bottom:0!important}
 #modal-root .u3-share-studio{padding:19px 17px calc(22px + env(safe-area-inset-bottom))}
 #modal-root .u3-share-studio-head{margin-bottom:14px}
 #modal-root .u3-share-studio-grid{grid-template-columns:minmax(0,1fr);gap:16px}
 #modal-root .u3-share-studio .u3-share-preview{height:clamp(180px,28dvh,285px);margin-bottom:6px}
 #modal-root .u3-share-studio .u3-share-thumbnails{gap:5px;margin:5px 0 0}
 #modal-root .u3-share-studio .u3-share-thumbnail{flex-basis:30px}
 #modal-root .u3-share-studio .u3-share-frame-note{margin-top:3px}
 #modal-root .u3-share-studio .u3-share-format button{min-height:88px;padding:10px!important}
 #modal-root .u3-share-settings-panel{gap:12px}
}
@media(prefers-reduced-motion:reduce){#modal-root .u3-share-studio *{animation:none!important;transition:none!important}}

/* 30 Oct iPhone export QA — keep the approved themed Share Studio, but
   present finished media as its own review stage. Never duplicate a large
   export underneath the editable live preview. Scoped to Rewind only. */
#modal-root .u3-share-studio.is-reviewing>.u3-share-studio-head,
#modal-root .u3-share-studio.is-reviewing>.u3-share-studio-grid{display:none!important}
#modal-root .u3-share-review-screen{display:grid;gap:16px;min-width:0;max-width:100%;color:#fff}
#modal-root .u3-share-review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#modal-root .u3-share-review-head h2{font-size:clamp(23px,3vw,31px);line-height:1.15;letter-spacing:-.035em;color:#fff!important;margin:8px 0 4px!important}
#modal-root .u3-share-review-head p{font-size:12px;line-height:1.5;color:rgba(255,255,255,.8);margin:3px 0}
#modal-root .u3-share-review-media{display:grid;place-items:center;min-height:0;max-width:100%;padding:11px;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:rgba(255,255,255,.075)}
#modal-root .u3-share-review-media img,
#modal-root .u3-share-review-media video{display:block;max-width:100%;width:auto;height:auto;max-height:min(58dvh,640px);aspect-ratio:9/16;object-fit:contain;border-radius:13px;border:1px solid rgba(255,255,255,.15);background:transparent}
#modal-root .u3-share-review-actions{display:grid;gap:12px;max-width:100%}
#modal-root .u3-share-review-back{justify-self:start;border:1px solid rgba(255,255,255,.25)!important;border-radius:13px!important;background:rgba(255,255,255,.10)!important;padding:11px 15px!important;font-weight:650}
#modal-root .u3-share-review-main-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#modal-root .u3-share-review-main-actions button{min-height:49px!important;border-radius:15px!important;padding:11px!important;font-size:14px;font-weight:750}
#modal-root .u3-share-review-save{color:#fff!important;background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.30)!important}
#modal-root .u3-share-review-share{color:var(--u3-share-bg)!important;background:var(--u3-share-accent)!important;border:1px solid var(--u3-share-accent)!important}
#modal-root .u3-share-review-footnote{text-align:center;color:rgba(255,255,255,.76);font-size:11px;margin:0;line-height:1.45}
@media(max-width:650px){
 /* More of the actual image and less empty framing on iPhone. */
 #modal-root .u3-share-studio:not(.is-reviewing) .u3-share-preview-panel{padding:12px;border-radius:21px}
 #modal-root .u3-share-studio:not(.is-reviewing) .u3-share-preview{height:clamp(270px,43dvh,400px);max-height:none;margin-bottom:9px;border-radius:12px}
 #modal-root .u3-share-studio:not(.is-reviewing) .u3-share-frame-label{margin:2px 0 6px}
 #modal-root .u3-share-studio:not(.is-reviewing) .u3-share-thumbnails{padding-bottom:4px}
 #modal-root .u3-share-studio:not(.is-reviewing) .u3-share-frame-note{margin:4px 0 0}
 #modal-root .u3-share-studio.is-reviewing{padding:17px 15px calc(14px + env(safe-area-inset-bottom))}
 #modal-root .u3-share-review-screen{gap:12px}
 #modal-root .u3-share-review-media{padding:7px;border-radius:16px}
 #modal-root .u3-share-review-media img,
 #modal-root .u3-share-review-media video{max-height:clamp(290px,49dvh,500px)}
 #modal-root .u3-share-review-main-actions button{min-height:46px!important}
}
@media(max-width:360px){#modal-root .u3-share-review-main-actions{grid-template-columns:1fr}}
@media(max-width:650px){
 /* A true edge-to-edge mobile sheet, rather than a centered modal with an
    unrelated page strip under it. Safe-area padding lives INSIDE the studio. */
 body #modal-root .modal-wrap:has(.u3-share-studio),
 body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal-wrap:has(.u3-share-studio){
  position:fixed!important;inset:0!important;height:100dvh!important;min-height:100dvh!important;
  padding:max(8px,env(safe-area-inset-top)) 0 0!important;
  align-items:stretch!important;justify-content:center!important;
 }
 body #modal-root .modal-wrap:has(.u3-share-studio)>.modal,
 body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal-wrap:has(.u3-share-studio)>.modal{
  height:100%!important;min-height:0!important;max-height:none!important;flex:1 1 auto;
  border-radius:25px 25px 0 0!important;overflow-y:auto!important;
 }
}
@media(max-width:650px){
 /* Paint the themed sheet through its full visible height, including below
    review controls. Use spare room for the final image rather than a dead band. */
 #modal-root .u3-share-studio{min-height:100%}
 #modal-root .u3-share-studio.is-reviewing{display:flex;flex-direction:column}
 #modal-root .u3-share-studio.is-reviewing .u3-share-review-screen{display:flex;flex:1;flex-direction:column;min-height:0}
 #modal-root .u3-share-studio.is-reviewing .u3-share-review-media{flex:1 1 auto;min-height:0}
 #modal-root .u3-share-studio.is-reviewing .u3-share-review-media img,
 #modal-root .u3-share-studio.is-reviewing .u3-share-review-media video{max-height:min(63dvh,550px)}
 #modal-root .u3-share-studio.is-reviewing .u3-share-review-actions{margin-top:auto;width:100%}
}

/* 30 Oct QA: Safari video exports must not appear as a broken black player.
   Show a filtered first-frame poster until playback has actually loaded. */
#modal-root .u3-share-review-media:has(video){position:relative;overflow:hidden;isolation:isolate;min-height:clamp(280px,45dvh,530px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
#modal-root .u3-share-review-media .u3-share-video-poster{max-height:min(52dvh,500px);width:auto;max-width:100%;aspect-ratio:9/16;object-fit:contain;border-radius:12px}
/* Never display:none the player before Safari decodes: WebKit can defer
   media loading for hidden players. Use the privacy-filtered poster as an
   overlay, without removing the real video from document layout. */
#modal-root .u3-share-review-media:has(video){position:relative}
#modal-root .u3-share-review-media video{display:block!important;max-height:min(52dvh,500px);width:min(100%,282px)!important;height:auto!important;min-width:0;aspect-ratio:9/16;object-fit:contain;background:var(--u3-share-bg,#18252b);}
#modal-root .u3-share-review-media .u3-share-video-poster{position:absolute;z-index:2;inset:auto;pointer-events:none;width:min(100%,282px)!important;height:auto!important;aspect-ratio:9/16;object-fit:contain;}
#modal-root .u3-share-review-media.u3-video-playable video{display:block!important;max-height:min(52dvh,500px)}
#modal-root .u3-share-review-media.u3-video-playable .u3-share-video-poster{display:none}
#modal-root .u3-share-video-playback-hint{max-width:38ch;margin:0;text-align:center;color:rgba(255,255,255,.86);font-size:12px;line-height:1.5}
#modal-root .u3-video-unavailable .u3-share-video-playback-hint{color:#ffdfc3}
#modal-root .u3-share-review-share:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.5)}
@media(max-width:650px){#modal-root .u3-share-review-media:has(video){min-height:0;flex:1 1 auto}#modal-root .u3-share-review-media video,#modal-root .u3-share-review-media .u3-share-video-poster{max-height:min(51dvh,470px)}}

/* Oct 30 Safari field report: final review must always fit the device.
   Scope to exported results only; approved Share Studio layout stays intact. */
#modal-root .u3-share-studio.is-reviewing{min-width:0!important;max-width:100%!important;overflow:hidden!important}
#modal-root .u3-share-studio.is-reviewing>.u3-share-review-screen{min-width:0!important;width:100%!important;max-width:100%!important;overflow-x:hidden!important}
#modal-root .u3-share-studio.is-reviewing .u3-share-review-media{width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important}
#modal-root .u3-share-studio.is-reviewing .u3-share-review-media>img:not(.u3-share-video-poster),
#modal-root .u3-share-studio.is-reviewing .u3-share-review-media>video{display:block;box-sizing:border-box;max-width:min(100%,330px)!important;width:min(100%,330px)!important;height:auto!important;max-height:min(56dvh,600px)!important;object-fit:contain!important;flex-shrink:1;}
@media(max-width:650px){
 #modal-root .u3-share-studio.is-reviewing .u3-share-review-media>img:not(.u3-share-video-poster),
 #modal-root .u3-share-studio.is-reviewing .u3-share-review-media>video{max-width:min(100%,260px)!important;width:min(100%,260px)!important;max-height:min(48dvh,470px)!important}
 #modal-root .u3-share-studio.is-reviewing .u3-share-review-media>.u3-share-video-poster{max-width:min(100%,260px)!important;width:min(100%,260px)!important;max-height:min(48dvh,470px)!important}
}

/* One contained 9:16 video stage, not two independently sized layers.
   Keep the player in layout for Safari, but cover its undecoded frame with
   the privacy-filtered thumbnail. The message belongs BELOW the frame. */
#modal-root .u3-share-studio.is-reviewing .u3-share-review-media:has(video){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden}
#modal-root .u3-share-studio.is-reviewing .u3-share-video-frame{
 position:relative;flex:none;display:block;overflow:hidden;border-radius:13px;
 aspect-ratio:9/16;width:min(100%,290px);height:auto;max-height:min(52dvh,500px);
 background:var(--u3-share-bg,#15252b);border:1px solid rgba(255,255,255,.18)
}
#modal-root .u3-share-studio.is-reviewing .u3-share-video-frame>video{
 display:block!important;position:absolute;inset:0;box-sizing:border-box;
 width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
 border:0!important;border-radius:inherit;object-fit:contain!important;min-width:0
}
#modal-root .u3-share-studio.is-reviewing .u3-share-video-frame>.u3-share-video-poster{
 display:block!important;position:absolute;inset:0;z-index:2;box-sizing:border-box;
 width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
 border:0!important;object-fit:cover!important;pointer-events:none;border-radius:inherit
}
#modal-root .u3-share-studio.is-reviewing .u3-share-review-media.u3-video-playable .u3-share-video-frame>.u3-share-video-poster{display:none!important}
#modal-root .u3-share-studio.is-reviewing .u3-share-video-playback-hint{position:static;flex:none;max-width:39ch;text-align:center}
@media(max-width:650px){#modal-root .u3-share-studio.is-reviewing .u3-share-video-frame{width:min(100%,245px);max-height:min(48dvh,460px)}}

/* 30 Oct isolated QA — save to Photos via iOS native share sheet. Files download
   stays an explicit secondary action, with no added giant preview/scroll area. */
#modal-root .u3-share-review-download{justify-self:center;background:transparent!important;border:0!important;text-decoration:underline;text-underline-offset:3px;color:rgba(255,255,255,.85)!important;font-size:12px!important;min-height:34px!important;padding:5px 12px!important}
#modal-root .u3-share-review-save-hint{color:rgba(255,255,255,.78);font-size:11px;text-align:center;line-height:1.45;margin:0!important}
#modal-root .u3-share-review-main-actions .u3-share-review-save{border-color:var(--u3-share-accent,rgba(255,255,255,.7))!important}
@media(max-width:650px){#modal-root .u3-share-review-actions{gap:7px}#modal-root .u3-share-review-save-hint{max-width:36ch;align-self:center}}

/* 30 Oct 2026 — Rewind Motion Studio (isolated QA only).
   Choreography is confined to immersive live stories. The exported film uses
   the same staged design language, but a separate privacy-filtered renderer.
   Preserve the approved page geometry, touch gestures, Liquid Glass and
   all monthly/yearly background treatments. */
@media (prefers-reduced-motion:no-preference){
 #app .u3-story-immersive .u3-story-center>small{
  animation:u3-motion-label .55s .08s both cubic-bezier(.18,.83,.24,1);
 }
 #app .u3-story-immersive .u3-story-center>h2{
  animation:u3-motion-headline .86s .17s both cubic-bezier(.19,1,.22,1);
  transform-origin:15% 50%;
 }
 #app .u3-story-immersive .u3-story-card>p{
  animation:u3-motion-label .72s .8s both ease-out;
 }
 #app .u3-story-immersive .u3-rich-cover .u3-rich-orbit{
  animation:u3-motion-pop .8s .34s both cubic-bezier(.16,1.18,.27,1);
 }
 #app .u3-story-immersive .u3-rich-chips>span,
 #app .u3-story-immersive .u3-rich-rank,
 #app .u3-story-immersive .u3-annual-battle-row,
 #app .u3-story-immersive .u3-annual-timeline-month,
 #app .u3-story-immersive .u3-poster-stat,
 #app .u3-story-immersive .u3-annual-award-pills>span{
  animation:u3-motion-pop .72s both cubic-bezier(.17,.99,.26,1);
 }
 #app .u3-story-immersive .u3-rich-chips>span:nth-child(1),
 #app .u3-story-immersive .u3-rich-rank:nth-child(1),
 #app .u3-story-immersive .u3-annual-battle-row:nth-child(2),
 #app .u3-story-immersive .u3-poster-stat:nth-child(1){animation-delay:.48s}
 #app .u3-story-immersive .u3-rich-chips>span:nth-child(2),
 #app .u3-story-immersive .u3-rich-rank:nth-child(2),
 #app .u3-story-immersive .u3-annual-battle-row:nth-child(3),
 #app .u3-story-immersive .u3-poster-stat:nth-child(2){animation-delay:.66s}
 #app .u3-story-immersive .u3-rich-chips>span:nth-child(3),
 #app .u3-story-immersive .u3-rich-rank:nth-child(3),
 #app .u3-story-immersive .u3-annual-battle-row:nth-child(4),
 #app .u3-story-immersive .u3-poster-stat:nth-child(3){animation-delay:.84s}
 #app .u3-story-immersive .u3-annual-timeline-month:nth-child(3n+1){animation-delay:.46s}
 #app .u3-story-immersive .u3-annual-timeline-month:nth-child(3n+2){animation-delay:.66s}
 #app .u3-story-immersive .u3-annual-timeline-month:nth-child(3n){animation-delay:.84s}
 #app .u3-story-immersive .u3-rich-rhythm-stats>div,
 #app .u3-story-immersive .u3-rich-wins-row,
 #app .u3-story-immersive .u3-annual-compare-column,
 #app .u3-story-immersive .u3-rich-compare-column{
  animation:u3-motion-rise .76s .62s both cubic-bezier(.19,1,.22,1);
 }
 #app .u3-story-immersive .u3-rich-rhythm-stats>div:nth-child(2),
 #app .u3-story-immersive .u3-rich-wins-row:nth-child(3),
 #app .u3-story-immersive .u3-annual-compare-column:nth-child(2),
 #app .u3-story-immersive .u3-rich-compare-column:nth-child(2){animation-delay:.79s}
 #app .u3-story-immersive .u3-poster-aavi,
 #app .u3-story-immersive .u3-rich-speech{
  animation:u3-motion-soft-note 1.04s 1.13s both ease-out;
 }
 #app .u3-story-immersive .u3-story-kind-endcard .u3-poster-ornament{
  animation:u3-motion-ornament 3.8s .85s both ease-in-out;
 }
 #app .u3-story-immersive .u3-story-card:before{
  animation:u3-motion-bg-drift 8s ease-in-out infinite alternate;
 }
 #app .u3-story-immersive .u3-story-card:after{
  animation:u3-motion-bg-drift-alt 11s ease-in-out infinite alternate;
 }
 #app .u3-story-immersive.u3-motion-paused .u3-story-card *,
 #app .u3-story-immersive.u3-motion-paused .u3-story-card:before,
 #app .u3-story-immersive.u3-motion-paused .u3-story-card:after{
  animation-play-state:paused!important;
 }
}
@keyframes u3-motion-label{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes u3-motion-headline{0%{opacity:0;transform:translate3d(-28px,24px,0) scale(.93)}74%{opacity:1;transform:translate3d(2px,-2px,0) scale(1.015)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes u3-motion-pop{0%{opacity:0;transform:translate3d(0,18px,0) scale(.84)}72%{opacity:1;transform:translate3d(0,-2px,0) scale(1.045)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes u3-motion-rise{0%{opacity:0;transform:translateY(23px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes u3-motion-soft-note{0%{opacity:0;transform:translateY(15px);filter:blur(7px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes u3-motion-ornament{0%{opacity:0;transform:rotate(-25deg) scale(.5)}40%{opacity:.33;transform:rotate(9deg) scale(1.1)}100%{opacity:.24;transform:rotate(0) scale(1)}}
@keyframes u3-motion-bg-drift{from{transform:translate(-12px,-10px) scale(.98)}to{transform:translate(13px,14px) scale(1.045)}}
@keyframes u3-motion-bg-drift-alt{from{transform:translate(14px,12px) scale(1)}to{transform:translate(-12px,-16px) scale(1.045)}}
@media (prefers-reduced-motion:reduce){
 #app .u3-story-immersive .u3-story-card *,
 #app .u3-story-immersive .u3-story-card:before,
 #app .u3-story-immersive .u3-story-card:after{
  animation:none!important;transition:none!important;
 }
}

/* 30 Oct 2026 isolated QA: iPad story caption alignment.
   In the full-screen viewer the main story column becomes a centered
   max-780px column at tablet widths, but its sibling caption previously
   used a different, wider column. Match the title/chart/Aavi column so
   the closing sentence begins at the same left edge. Footer signatures,
   safe areas, iPhone layouts, and motion choreography are untouched. */
@media (min-width:600px){
 #app .u3-story-immersive .u3-story-card > p{
  box-sizing:border-box;
  width:min(90%,780px)!important;
  max-width:min(90%,780px)!important;
  margin-inline:auto!important;
 }
}

/* U5 Settings cleanup: keep Rewinds in More, not Settings. */
#app .settings-redesign-v1286 .u3-settings-rewinds, #app .u3-settings-rewinds { display: none !important; }

/* V68: concise, quiet Rewind collection introduction. */
.u3-archive .u3-archive-summary{font-size:12px;line-height:1.45;max-width:48ch;opacity:.78;margin:0 0 14px}