/* Shared visual roles. Important declarations in this named layer take priority
   over legacy screen overrides, including their unlayered !important rules.
   Keep layout, colours and illustrations in the individual screen styles. */
@layer design-system {
 :root {
  --ds-title:48px; --ds-display:64px; --ds-section:24px; --ds-card-title:18px;
  --ds-body:16px; --ds-lead:18px; --ds-caption:14px; --ds-eyebrow:12px;
  --ds-surface:20px; --ds-card:16px; --ds-control:12px; --ds-image:12px;
 }
 @media(max-width:1023px){:root{--ds-title:40px;--ds-display:48px}}
 @media(max-width:599px){:root{--ds-title:32px;--ds-display:32px;--ds-section:20px;--ds-card-title:16px;--ds-lead:16px}}
 @media(max-width:359px){:root{--ds-title:28px;--ds-display:28px}}
 body{font-family:var(--font-site)!important;font-size:var(--ds-body)!important;line-height:1.6!important}
 h1,h2,h3,h4,h5,h6 {
  font-family:var(--font-heading)!important;font-weight:500!important;
  letter-spacing:-.04em!important;line-height:1.25!important;text-wrap:pretty!important;
 }
 h1{font-size:var(--ds-title)!important;white-space:normal!important}
 h2{font-size:var(--ds-section)!important}
 h3,h4,h5,h6{font-size:var(--ds-card-title)!important;line-height:1.4!important}
 :is(h1,h2,h3,h4,h5,h6) :is(span,em,strong):not([aria-hidden='true']):not(.album-month-count){font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important}
 .dashboard-page .welcome-copy h1{font-size:var(--ds-display)!important}
 :is(.library-card:not(.craft-card) h2,.recent-work h3,.story-hero-card h2,.craft-original h2){font-size:var(--ds-card-title)!important;line-height:1.4!important}
 .album-month-title button{font-family:var(--font-heading)!important;font-size:var(--ds-section)!important;font-weight:500!important;line-height:1.4!important;letter-spacing:-.04em!important}
 :is(.eyebrow,.album-eyebrow,.welcome-eyebrow,.story-eyebrow,.section-kicker,.upload-eyebrow,.small-label){font-size:var(--ds-eyebrow)!important;font-weight:700!important;line-height:1.5!important;letter-spacing:.07em!important}
 :is(.home-lead,.welcome-copy p,#album-intro,.page-heading p){font-size:var(--ds-lead)!important;font-weight:500!important;line-height:1.6!important}
 :is(.story-content,.story-text p){font-size:18px!important;font-weight:500!important;line-height:1.7!important}
 :is(button,.ui-button,.action,.button,.welcome-action,.cta,summary){font-family:var(--font-site)!important;font-size:var(--ds-body)!important;font-weight:700!important;line-height:1.4!important}
 :is(input,select,textarea){font-family:var(--font-site)!important;font-size:16px!important;font-weight:500!important;line-height:1.5!important}
 :is(label,legend){font-size:var(--ds-body)!important;line-height:1.5!important}
 :is(small,time,.created,.craft-state,.album-month-count,.video-scene-hint,.video-auto-caption,.selected-work-detail,.selection-summary,.step-heading p,.upload-heading p,.craft-reference-meta dt,.game-help,.story-hero-copy p,.story-hero-card p,.story-status,.video-status){font-size:var(--ds-caption)!important;font-weight:500!important;line-height:1.5!important}
 :is(.upload-purpose label,.upload-purpose small){font-size:var(--ds-body)!important;line-height:1.5!important}
 :is(.album-categories button,.card-footer a,.album-work-type,.story-card,.story-mood-choice,.scene-option,.video-options label span,.add-hero-button,.service-install-button){font-size:var(--ds-caption)!important;line-height:1.4!important}
 :is(.video-topbar-note,.video-footer-note,.upload-keepsake){font-family:var(--font-site)!important;font-size:var(--ds-body)!important;font-weight:500!important;line-height:1.5!important}
 .video-topbar-note span{font-family:var(--font-site)!important}
 /* Surfaces, cards, controls and images each have one corner radius. */
 :is(.album-heading,.album-collection,.album-controls,.upload-card,.processing-card,.state-card,.story-paper,.story-history,.story-create,.story-hero-card,.craft-original,.craft-character,.craft-notes-actions,.craft-form,.video-step,.video-options fieldset,.account-card,.share-card,.access-card,.game-panel,.game-sheet,dialog,.collection,.seabed-panel,.selected-panel,.dashboard-keepsake){border-radius:var(--ds-surface)!important}
 :is(.library-card:not(.craft-card),.recent-work,.story-card,.hero-option,.scene-option,.fish-card,.seabed-choice,.craft-reference-meta,.work-selection-row,.story-next-actions,.play-guide-card,.account-result,.account-list li){border-radius:var(--ds-card)!important}
 :where(button,.ui-button,.action,.button,.welcome-action,.cta,input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),select,textarea,.story-mood-choice,.video-options label span,.upload-purpose label){border-radius:var(--ds-control)!important}
 :is(.hero-preview,.hero-preview img,.hero-option img,.scene-option img,.recent-work img,.story-portrait-paper,.story-portrait-paper img,.craft-original .hero-preview,.craft-original img,.welcome-art img,.recent-picture,.editorial-banner img){border-radius:var(--ds-image)!important}
 /* Text tabs and links are flat; icon-only circles and pills retain their roles. */
 :is(.album-categories button,.album-month-title button,.story-text-button,.album-refresh,.text-link){border-radius:0!important}
 :is(.album-quick-favorite,.site-menu-toggle,.service-account-entry,.craft-edit-title,.album-card-menu>summary,.step-number,.video-option-icon,.game-round,.game-panel-close,.album-dialog-close,.game-scene-arrows button,#gift-drawing [data-gift-color]){border-radius:50%!important}
 :is(.card-footer a,.album-work-type,.album-month-count){border-radius:999px!important}
 .nav-item{border-radius:var(--ds-control)!important}
 .site-header .nav-item{font-size:16px!important}
 #mobile-game-ui .game-menu button{border-radius:50%!important}
 :is(.game-panel-close,.album-dialog-close,[data-gift-close]){font-size:26px!important;line-height:1!important}
 .craft-edit-title{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;flex:0 0 44px!important}
 :is(.story-reader-heading,.step-heading,.craft-play-intro)>div{min-width:0}
 :is(.ui-button,.action,.button,.welcome-action){text-align:center;overflow-wrap:normal}
 :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #ef6a36!important;outline-offset:3px!important}
 .account-card [role="status"]:empty,.works-page #status:empty{display:none!important}
 .works-page .card{border-radius:var(--ds-surface)!important}
 .works-page #history{margin-top:16px!important}
 .works-page .history-item:first-child{border-top:0!important;padding-top:0!important}
 .works-page .history-item:last-child{padding-bottom:0!important}
 .works-page>main{padding-inline:16px!important}
 .share-card{box-sizing:border-box!important;width:min(672px,calc(100% - 32px))!important}
 .album-filters-dialog label{font-size:var(--ds-caption)!important;line-height:1.4!important}
 #mobile-game-ui #motions{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))!important}
 #mobile-game-ui #motions button{font-size:var(--ds-caption)!important}
 #mobile-game-ui #motions button>span{overflow-wrap:normal!important;word-break:normal!important}
 #continuation-form textarea{min-height:104px!important;height:104px!important}
 .story-status:not(:empty){position:relative!important;top:auto!important;left:auto!important;transform:none!important;width:auto!important;max-width:100%!important;margin:0 0 16px!important;border-radius:var(--ds-control)!important}
 /* No imaginary card surface around the album's mobile collection. */
 @media(max-width:599px){
  .album-page:not(.craft-page) .album-collection{border-radius:0!important}
  .album-page:not(.craft-page) .album-heading{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)!important}
  .album-page:not(.craft-page) .album-illustration{margin-left:0!important}
  .album-page:not(.craft-page) .album-categories{column-gap:10px!important}
  .album-page:not(.craft-page) .album-controls{grid-template-columns:minmax(0,1fr) 112px!important}
  .album-page:not(.craft-page) .album-view-options button{width:52px!important}
  .album-page:not(.craft-page) .album-child-filter select{padding-left:34px!important;padding-right:18px!important}
  .album-page:not(.craft-page) #mobile-search input{padding-left:32px!important}
  .album-page:not(.craft-page) .album-eyebrow{white-space:normal!important}
  .album-filters-dialog .album-dialog-actions{grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr)!important}
  .album-filters-dialog #reset-filters{font-size:var(--ds-caption)!important}
  .video-page .video-heading{max-width:calc(100% - 100px)!important;padding-bottom:18px!important}
  .video-page .video-heading h1{white-space:normal!important}
  .video-page .video-topbar{min-height:134px!important}
  .video-page .video-topbar-note{display:none!important}
  .video-page .video-options{grid-template-columns:1fr!important}
  .video-page .video-frame-options{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .video-page .video-frame-options label span{min-height:44px!important;padding:8px 4px!important}
  .video-page .video-options legend{min-height:32px!important}
  .video-page .create-video-button{padding-inline:42px!important}
  .video-page .scene-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .video-page .work-selection-row{grid-template-columns:1fr!important}
  .video-page .add-hero-button{grid-column:1!important;grid-row:3!important;max-width:none!important;width:100%!important}
  .video-page .step-heading{min-height:0!important}
  #continuation-form textarea{min-height:128px!important;height:128px!important}
  .story-page .story-create{background:var(--surface)!important;padding:20px!important}
  .story-page .story-create>h2{padding:0 0 0 48px!important}
  .story-page .story-create>p{padding:0!important;margin-top:16px!important}
  .story-create-mark{left:20px!important;top:20px!important;width:34px!important;height:34px!important}
  .story-page #new-story{width:100%!important;margin-inline:0!important}
 }
 @media(max-width:1023px){
  .story-page.site-header-page>main.responsive-container{padding-top:16px!important}
  .story-page .story-screen{padding-inline:0!important}
  .story-page .story-paper{padding-top:20px!important}
  .story-page .story-reader-heading{gap:12px!important}
  .story-page .story-topbar{min-height:48px!important;margin-inline:0!important;padding-inline:0!important}
  .site-header .brand-lockup{font-size:clamp(21px,4.2vw,28px)!important;gap:6px!important}
  .site-header .brand-lockup>svg{width:25px!important;height:25px!important;flex-basis:25px!important}
  .site-header :is(.service-account-entry,.site-menu-toggle){width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;padding:12px!important}
  .video-page .site-header .install-slot{position:static!important;order:5!important;flex:1 1 100%!important;margin:4px 0 0!important}
  .video-page .site-header .service-install-button{width:max-content!important;max-width:100%!important;font-size:14px!important;padding:8px 12px!important}
  .video-page .site-header .app-navigation{flex-wrap:wrap!important;gap:8px!important;background:transparent!important}
  .video-page .site-header .app-navigation .nav-item{flex:1 1 calc(50% - 8px)!important;width:auto!important;font-size:16px!important;min-height:48px!important;height:auto!important;padding:10px!important}
 }
 @media(max-width:1023px) and (max-height:500px){
  #hero-games-layer .hero-game-hud{bottom:auto!important;max-height:calc(100dvh - 84px)!important;overflow:auto!important}
 }
 @media(max-width:359px){
  .site-header .brand-lockup{font-size:19px!important}
  .site-header .brand-lockup>svg{width:21px!important;height:21px!important;flex-basis:21px!important}
  .site-header :is(.service-account-entry,.site-menu-toggle){width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:10px!important}
  .album-page:not(.craft-page) .album-controls{grid-template-columns:minmax(0,1fr) 104px!important}
  .album-page:not(.craft-page) .album-view-options button{width:48px!important}
  .video-page .video-frame-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 }
}