/* Global finishing layer — clean chrome + lightweight motion system. */
*{scrollbar-width:none!important;-ms-overflow-style:none!important}*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}

:root{
  --dap-motion-fast:140ms;
  --dap-motion-base:220ms;
  --dap-motion-page:420ms;
  --dap-ease:cubic-bezier(.2,.8,.2,1);
  --dap-ease-pop:cubic-bezier(.2,1.35,.35,1);
}

html{scroll-behavior:smooth}
body{overflow-x:hidden}

@keyframes dapPageIn{from{opacity:0;transform:translate3d(0,10px,0) scale(.995)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes dapFadeIn{from{opacity:0}to{opacity:1}}
@keyframes dapRise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes dapPop{0%{opacity:0;transform:scale(.94)}100%{opacity:1;transform:scale(1)}}
@keyframes dapTabPop{0%{transform:scale(.82)}65%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes dapSoftPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes dapSlideRight{from{opacity:0;transform:translate3d(-8px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes dapBackdropIn{from{opacity:0}to{opacity:1}}

/* Page changes no longer feel like hard cuts. */
.content>*{animation:dapPageIn var(--dap-motion-page) var(--dap-ease) both}
.leisurePage,.communityPage,.profilePage{transform-origin:50% 0}

/* Universal tactile response. */
button:not(:disabled),a,.menuItem,.lessonListItem,.petChoiceCard,.audiusTrackCard{
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--dap-motion-fast) var(--dap-ease),background-color var(--dap-motion-base) ease,border-color var(--dap-motion-base) ease,color var(--dap-motion-base) ease,box-shadow var(--dap-motion-base) ease,opacity var(--dap-motion-base) ease;
}
button:not(:disabled):active,.menuItem:active,.lessonListItem:active,.petChoiceCard:active,.audiusTrackCard:active{transform:scale(.965)}

/* Inputs also respond instead of feeling static. */
input,textarea,select{transition:border-color var(--dap-motion-base) ease,box-shadow var(--dap-motion-base) ease,background-color var(--dap-motion-base) ease,transform var(--dap-motion-fast) ease}
input:focus,textarea:focus,select:focus{border-color:rgba(203,57,9,.5)!important;box-shadow:0 0 0 3px rgba(203,57,9,.08)}

/* Cards lift just enough on pointer devices. */
.quickCard,.scheduleCard,.materialCard,.workbookCard,.lessonResourceBlock,.nextClass,.progressCard,.profileIdentity,.profileForm,.petChoiceCard,.feedPost,.audiusTrackCard,.leisureTabs button,.drawInspectorPanel{
  transition:transform var(--dap-motion-base) var(--dap-ease),box-shadow var(--dap-motion-base) ease,border-color var(--dap-motion-base) ease,background-color var(--dap-motion-base) ease;
}

@media(hover:hover) and (pointer:fine){
  .menuItem:hover{transform:translate3d(4px,0,0)}
  .quickCard:hover,.scheduleCard:hover,.materialCard:hover,.workbookCard:hover,.lessonResourceBlock:hover,.petChoiceCard:hover,.audiusTrackCard:hover,.leisureTabs button:hover{transform:translate3d(0,-3px,0);box-shadow:0 12px 32px rgba(27,27,26,.09)}
  .nextClass:hover,.progressCard:hover,.profileIdentity:hover{transform:translate3d(0,-2px,0)}
  .mobileBottomNav button:hover,.socialMobileTabs button:hover{transform:translate3d(0,-2px,0)}
}

/* Primary actions get a subtle living surface. */
.drawPublishTop,.primary,.musicLoadMore,.nextClass button,.lessonMainActions button,.profileSaveButton{
  position:relative;
  overflow:hidden;
}
.drawPublishTop:before,.primary:before,.musicLoadMore:before,.profileSaveButton:before{
  content:"";
  position:absolute;
  inset:-30% auto -30% -55%;
  width:35%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transform:skewX(-18deg);
  transition:left .45s var(--dap-ease);
}
@media(hover:hover){.drawPublishTop:hover:before,.primary:hover:before,.musicLoadMore:hover:before,.profileSaveButton:hover:before{left:125%}}

/* Menu, dialogs and sheets enter instead of simply appearing. */
.portalDialogOverlay,.drawShortcutBackdrop,.drawShareBackdrop{animation:dapBackdropIn .18s ease both}
.mobileNavOpen .mobileSidebarBackdrop{animation:dapBackdropIn .18s ease both}
.sidebar.sidebarOpen{animation:dapSlideRight .25s var(--dap-ease) both}
.portalDialog,.drawShortcutModal,.drawShareModal,.profileSheet{animation:dapPop .24s var(--dap-ease-pop) both;transform-origin:50% 80%}

/* Bottom navigation feels like an app. */
.mobileBottomNav button.active>span,.socialMobileTabs button.active>span{animation:dapTabPop .32s var(--dap-ease-pop) both}
.mobileBottomNav button.active,.socialMobileTabs button.active{box-shadow:inset 0 0 0 1px rgba(203,57,9,.06)}
.mobileMenuButton:active{transform:scale(.9) rotate(-2deg)}
.mobileMenuButton span{transition:transform .2s var(--dap-ease),opacity .2s ease}

/* Community interaction polish. */
.feedActions button.liked{animation:dapTabPop .3s var(--dap-ease-pop)}
.socialChatCalls button:not(:disabled):hover{transform:translateY(-2px) scale(1.03)}
.socialChatCalls button:not(:disabled):active{transform:scale(.92)}

/* DAP Draw touch-inspired surface polish. */
.drawToolRail button.active .lineIcon,.drawTouchTool.active .lineIcon{animation:dapTabPop .28s var(--dap-ease-pop)}
.drawToolRail button:hover .lineIcon,.drawTouchTool:hover .lineIcon{transform:scale(1.08)}
.drawToolRail .lineIcon,.drawTouchTool .lineIcon{transition:transform .16s var(--dap-ease)}
.drawToolFlyout,.drawShapeFlyout,.drawBrushFlyout{animation:dapSlideRight .18s var(--dap-ease) both}
.drawCanvasFrame{transition:width .16s var(--dap-ease),box-shadow .22s ease!important}
.drawCanvasFrame:hover{box-shadow:0 26px 80px rgba(0,0,0,.58)}

/* Leisure cards appear with a tiny stagger. */
.leisureTabs button{animation:dapRise .34s var(--dap-ease) both}
.leisureTabs button:nth-child(2){animation-delay:45ms}.leisureTabs button:nth-child(3){animation-delay:90ms}
.audiusTrackCard{animation:dapRise .3s var(--dap-ease) both}
.audiusTrackCard:nth-child(2n){animation-delay:24ms}

/* Existing pet settings polish. */
.petSettings{margin-top:14px;display:grid;gap:7px}.petSettingRow{min-height:62px;padding:12px 13px;border:1px solid rgba(27,27,26,.12);border-radius:15px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;transition:transform var(--dap-motion-fast) var(--dap-ease),border-color var(--dap-motion-base) ease,background-color var(--dap-motion-base) ease}.petSettingRow:hover{border-color:rgba(27,27,26,.22);background:rgba(255,255,255,.34);transform:translateY(-1px)}.petSettingRow:active{transform:scale(.985)}.petSettingRow>div{min-width:0;display:grid;gap:3px}.petSettingRow strong{font-size:11px;line-height:1.1}.petSettingRow small{max-width:520px;color:rgba(27,27,26,.5);font-size:8px;line-height:1.4}.petSettingRow input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;width:42px;height:24px;flex:0 0 42px;border:1px solid rgba(27,27,26,.2);border-radius:999px;background:rgba(27,27,26,.1);cursor:pointer;transition:.18s ease}.petSettingRow input[type=checkbox]:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#1b1b1a;transition:transform .18s var(--dap-ease-pop),background .18s ease}.petSettingRow input[type=checkbox]:checked{border-color:#cb3909;background:rgba(203,57,9,.17)}.petSettingRow input[type=checkbox]:checked:after{transform:translateX(18px);background:#cb3909}.profilePetTitle+.petChoiceGrid{margin-bottom:14px}.profileBioField:has(input[placeholder="Ex.: Pixel"]){margin-top:14px;padding:14px;border:1px solid rgba(27,27,26,.12);border-radius:15px;background:rgba(255,255,255,.16)}
.petChoiceCard.active .petChoiceSprite,.petChoiceCard.selected .petChoiceSprite{animation:dapSoftPulse 1.8s ease-in-out infinite}

/* Pixel-accurate pet sprite playback. Percentage positioning caused frame drift on scaled sheets. */
@keyframes petWalk48x6{from{background-position:0 0}to{background-position:-432px 0}}
@keyframes petIdle48x4{from{background-position:0 0}to{background-position:-288px 0}}
@keyframes petWalk32x6{from{background-position:0 0}to{background-position:-336px 0}}
@keyframes petIdle32x4Bird{from{background-position:0 0}to{background-position:-224px 0}}
@keyframes petWalk32x4Rat{from{background-position:0 0}to{background-position:-208px 0}}
@keyframes petIdle32x4Rat{from{background-position:0 0}to{background-position:-208px 0}}

html body .portal .pet-cat-orange .petSpritewalk,
html body .portal .pet-dog-1 .petSpritewalk{
  animation-name:petWalk48x6!important;
  animation-timing-function:steps(6,end)!important;
  animation-iteration-count:infinite!important;
}
html body .portal .pet-cat-orange .petSpriteidle,
html body .portal .pet-dog-1 .petSpriteidle{
  animation-name:petIdle48x4!important;
  animation-timing-function:steps(4,end)!important;
  animation-iteration-count:infinite!important;
}
html body .portal .pet-bird-1 .petSpritewalk{
  animation-name:petWalk32x6!important;
  animation-timing-function:steps(6,end)!important;
  animation-iteration-count:infinite!important;
}
html body .portal .pet-bird-1 .petSpriteidle{
  animation-name:petIdle32x4Bird!important;
  animation-timing-function:steps(4,end)!important;
  animation-iteration-count:infinite!important;
}
html body .portal .pet-rat-1 .petSpritewalk{
  animation-name:petWalk32x4Rat!important;
  animation-timing-function:steps(4,end)!important;
  animation-iteration-count:infinite!important;
}
html body .portal .pet-rat-1 .petSpriteidle{
  animation-name:petIdle32x4Rat!important;
  animation-timing-function:steps(4,end)!important;
  animation-iteration-count:infinite!important;
}

/* Stability pass — cards and long text must never escape their own layout. */
*,*::before,*::after{box-sizing:border-box}
.portal :where(img,video,canvas,svg){max-width:100%}
.portal :where(input,textarea,select,button){max-width:100%}
.portal :where(h1,h2,h3,h4,h5,h6,p,strong,small,label,a,button,.summaryText,.classDescription,.scheduleIntro,.workbookIntro,.lessonsIntro,.materialsIntro,.profileIntro,.feedCaption,.feedComments){overflow-wrap:anywhere;word-break:normal}
.portal :where(.dashboardGrid,.quickGrid,.weekCards,.workbookCards,.materialsGrid,.profileLayout,.profileFieldsGrid,.feedLayout,.messagesLayout,.groupsLayout,.peopleGrid,.notificationsList,.lessonResourcesGrid,.lessonMainActions)>*{min-width:0;max-width:100%}
.portal :where(.quickCard,.nextClass,.progressCard,.scheduleCard,.workbookCard,.materialCard,.lessonResourceBlock,.profileIdentity,.profileForm,.feedPost,.socialComposer,.feedAsideCard,.feedPeopleMini,.personCard,.notificationCard,.groupCard,.audiusTrackCard,.musicPlayerCard,.leisureTabs button){min-width:0;max-width:100%}
.portal :where(.primaryButton,.scheduleCardFooter button,.lessonMainActions button,.materialsToolbar button){white-space:normal}

/* Community's fixed tab bar must stay attached to the viewport. A transformed ancestor breaks position:fixed. */
html body .portal .content>.socialApp{animation:dapFadeIn .32s ease both!important;transform:none!important;transform-origin:initial!important}
html body .portal .socialApp .socialMobileTabs{position:fixed!important}

/* One source of truth for pet switches. This neutralizes the old left + translate double movement. */
html body .portal .petSettingRow input[type="checkbox"]{width:40px!important;height:22px!important;flex:0 0 40px!important;border-radius:999px!important;padding:0!important}
html body .portal .petSettingRow input[type="checkbox"]::after{width:16px!important;height:16px!important;left:2px!important;top:2px!important;border-radius:50%!important;transform:none!important;transition:left .18s var(--dap-ease),background-color .18s ease!important}
html body .portal .petSettingRow input[type="checkbox"]:checked::after{left:20px!important;transform:none!important;background:#fff!important}

@media(max-width:760px){
  .mobileSidebarBackdrop{z-index:155!important}.sidebar{z-index:160!important}.mobilePortalHeader{z-index:150!important}

  /* Lazer becomes immersive on phones: no top portal chrome. */
  .portal:has(.leisurePage) .mobilePortalHeader{display:none!important}
  .portal:has(.leisurePage) .content{padding-top:12px!important;transition:padding .22s var(--dap-ease)}
  .portal:has(.leisurePage) .leisurePage{animation:dapPageIn .38s var(--dap-ease) both}

  .petSettings{gap:8px}.petSettingRow{min-height:68px;padding:13px;border-radius:16px}.petSettingRow strong{font-size:11px}.petSettingRow small{font-size:8px}.profileBioField:has(input[placeholder="Ex.: Pixel"]){padding:13px!important;border-radius:16px!important}.petChoiceGridSpecies .petChoiceCard{min-height:132px!important}.petChoiceGridSpecies .petChoiceSprite{transform:scale(1.08)}.profileSectionTitle.profilePetTitle h2{font-size:24px!important;letter-spacing:-.04em!important}.profileSectionTitle.profilePetTitle p{max-width:92%;font-size:9px!important;line-height:1.45!important}

  /* Pets remain a first-class mobile feature and sit above the app navigation. */
  html body .portal .petCompanion{display:block!important;bottom:max(80px,calc(env(safe-area-inset-bottom) + 74px))!important;z-index:118!important}
  html body .portal:has(.socialApp) .petCompanion{bottom:max(146px,calc(env(safe-area-inset-bottom) + 140px))!important}

  /* Mobile layouts wrap instead of overflowing their cards. */
  .portal :where(.nextClassContent,.scheduleCardTop,.scheduleCardFooter,.weekHeader,.workbookWeekHeader,.materialsWeekHeader,.socialComposerHead,.socialComposerFoot,.socialTopbar,.profileSectionTitle){min-width:0!important;max-width:100%!important;flex-wrap:wrap!important}
  .portal :where(.scheduleCardTop,.workbookCard,.profileFieldsGrid,.messagesLayout,.groupsLayout){min-width:0!important;max-width:100%!important}
  .portal :where(h1,h2,h3,h4,p,strong,small,span,label,a,button){max-width:100%;overflow-wrap:anywhere}

  .mobileBottomNav,.socialMobileTabs{transition:transform .25s var(--dap-ease),box-shadow .25s ease,background-color .25s ease}
  .mobileBottomNav button:active,.socialMobileTabs button:active{transform:scale(.9)}
  .quickCard:active,.scheduleCard:active,.materialCard:active,.workbookCard:active,.audiusTrackCard:active{transform:scale(.985)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}