/* Derived from the approved recording-scenarios prototype. */






#recordings img,#recordings video{display: block; max-width: 100%;}
#recordings{width: min(1120px, 100% - 64px); margin: 0px auto; padding: 82px 0px 124px;}
#recordings .intro{max-width: none; margin: 0px auto 72px; text-align: center;}
#recordings .intro h2{margin: 0px; font-family: var(--display); font-size: clamp(52px, 5vw, 68px); font-weight: 400; line-height: 0.91; letter-spacing: 0.005em; white-space: nowrap;}
#recordings .intro p{max-width: 650px; margin: 22px auto 0px; font-family: var(--mono); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; color: rgb(57, 56, 52);}
#recordings .grid{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); align-items: start; gap: 78px 48px;}
#recordings .scene{min-width: 0px; opacity: 0; transform: translateY(6px); transition: opacity .35s ease,transform .45s var(--ease);}
#recordings .scene.is-visible{opacity: 1; transform: none;}
#recordings .copy{padding: 0px 4px 22px;}
#recordings .copy h3{margin: 0px; font-size: clamp(28px, 2.35vw, 32px); font-weight: 720; line-height: 1.08; letter-spacing: -0.043em;}
#recordings .copy p{max-width: 540px; margin: 13px 0px 0px; color: var(--muted); font-size: clamp(17px, 1.55vw, 20px); font-weight: 500; line-height: 1.42; letter-spacing: -0.018em;}
#recordings .visual{position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; background: rgb(255, 255, 255); box-shadow: rgba(22, 22, 18, 0.34) 0px 22px 54px -34px;}
#recordings .visual::after{content: ""; position: absolute; inset: 0px; z-index: 20; pointer-events: none; border-radius: inherit; box-shadow: rgba(0, 0, 0, 0.035) 0px 0px 0px 1px inset;}
#recordings .meeting-visual,#recordings .lecture-visual,#recordings .course-visual,#recordings .interview-visual{aspect-ratio: 1 / 1;}
#recordings .motion{will-change: transform, opacity, clip-path; animation-play-state: paused !important;}
#recordings .scene.is-playing .motion{animation-play-state: running !important;}
#recordings .app-surface{overflow: hidden; background: rgb(255, 255, 255); border-radius: 20px; box-shadow: rgba(20, 20, 18, 0.44) 0px 22px 48px -28px;}
#recordings .app-surface img{width: 100%; height: auto;}
#recordings .meeting-call{position: absolute; left: 5%; top: 6%; width: 44%; height: 66%; overflow: hidden; border-radius: 21px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.42) 0px 20px 42px -28px;}
#recordings .meeting-call video{width: 100%; height: 100%; object-fit: cover; object-position: 68% center;}
#recordings .meeting-app{position: absolute; z-index: 4; right: 5%; top: 6%; width: 42%; height: 70%; overflow: hidden; background: rgb(255, 255, 255); border-radius: 20px; box-shadow: none;}
#recordings .meeting-app iframe{display: block; width: 100%; height: 100%; border: 0px; background: rgb(255, 255, 255); pointer-events: none;}
#recordings .meeting-icons{position: absolute; z-index: 7; left: 4%; bottom: 5%; display: flex; align-items: center; gap: 7px; padding: 0px; background: transparent; box-shadow: none;}
#recordings .meeting-icons span{width: 70px; height: 70px; display: grid; place-items: center; background: transparent; filter: none;}
#recordings .meeting-icons span:nth-child(1){transform: translateY(9px) rotate(-5deg);}
#recordings .meeting-icons span:nth-child(2){transform: translateY(-2px) rotate(3deg);}
#recordings .meeting-icons span:nth-child(3){transform: translateY(7px) rotate(-2deg);}
#recordings .meeting-icons span:nth-child(4){transform: translateY(-5px) rotate(5deg);}
#recordings .meeting-icons img{width: 64px; height: 64px; object-fit: contain;}
#recordings .meeting-icons .discord{width: 65px; height: 65px; border-radius: 16px;}
#recordings .lecture-photo{position: absolute; inset: 4.5% 4.5% auto; height: 31%; overflow: hidden; border-radius: 21px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.38) 0px 20px 42px -28px;}
#recordings .lecture-photo img{width: 100%; height: 100%; object-fit: cover; object-position: 58% top;}
#recordings .lecture-output{position: absolute; z-index: 4; inset: 38% 5% 5%; overflow: hidden;}
#recordings .lecture-output iframe{display: block; width: 100%; height: 100%; border: 0px; background: rgb(255, 255, 255); pointer-events: none;}
#recordings .course-demo{position: absolute; inset: 0px; overflow: hidden; border-radius: inherit; background: rgb(255, 255, 255); box-shadow: none;}
#recordings .course-demo video{width: 100%; height: 100%; object-fit: cover; object-position: center center;}
#recordings .youtube-mark{position: absolute; z-index: 8; left: 7%; top: 7%; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 14px; background: rgb(255, 255, 255); font-size: 15px; font-weight: 700; box-shadow: rgba(0, 0, 0, 0.4) 0px 13px 27px -18px;}
#recordings .youtube-mark svg{width: 28px; height: auto;}
#recordings .interview-photo{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; background: rgb(233, 233, 230);}
#recordings .interview-live{position: absolute; z-index: 4; left: 4%; width: 52%; bottom: 4%; height: 292px; overflow: hidden; background: rgb(35, 35, 38); border-radius: 18px; box-shadow: rgba(0, 0, 0, 0.35) 0px 12px 32px -12px, rgba(255, 255, 255, 0.12) 0px 0px 0px 1px;}
#recordings .interview-live iframe{display: block; width: 100%; height: 100%; border: 0px; background: rgb(35, 35, 38); pointer-events: none;}
#recordings .widget-live{position: absolute; z-index: 9; right: 3%; bottom: 2.5%; width: 188px; height: 132px; overflow: visible; pointer-events: none; filter: drop-shadow(rgba(0, 0, 0, 0.15) 0px 12px 13px);}
#recordings .meeting-visual .widget-live{filter: none;}
#recordings .widget-live iframe{display: block; width: 336px; height: 236px; border: 0px; background: transparent; transform: scale(0.56); transform-origin: left top;}
#recordings .interview-widget{right: 3%; bottom: 4%; width: 35%; max-width: 188px; height: auto; aspect-ratio: 336 / 236;}
#recordings .interview-widget iframe{position: absolute; left: 0px; top: 0px;}
@media (max-width: 900px){#recordings{width: min(650px, 100% - 40px); padding-top: 68px;}
#recordings .grid{grid-template-columns: 1fr; gap: 58px;}
#recordings .intro{margin-bottom: 58px;}}
@media (max-width: 520px){#recordings{width: calc(100% - 28px); padding: 54px 0px 84px;}
#recordings .intro h2{font-size: 38px;}
#recordings .intro p{font-size: 14px;}
#recordings .copy{padding-bottom: 18px;}
#recordings .copy h3{font-size: 28px;}
#recordings .copy p{font-size: 17px; margin-top: 10px;}
#recordings .visual{border-radius: 21px;}
#recordings .app-surface,#recordings .meeting-call,#recordings .lecture-photo,#recordings .course-demo{border-radius: 16px;}
#recordings .meeting-call,#recordings .meeting-app{height: 60%;}
#recordings .meeting-icons{transform: scale(0.82); transform-origin: left top;}
#recordings .lecture-output{left: 5%; right: 5%; bottom: 5%;}
#recordings .widget-live{right: 2%; bottom: 2%; width: 168px; height: 118px;}
#recordings .widget-live iframe{transform: scale(0.5);}}
@media (max-width: 520px){#recordings .intro h2{white-space: normal;}
#recordings .meeting-visual,#recordings .lecture-visual{aspect-ratio: 4 / 5;}
#recordings .interview-visual{aspect-ratio: 3 / 4;}
#recordings .interview-photo{height: 80%; object-position: center top;}
#recordings .interview-live{width: 57%; border-radius: 16px;}
#recordings .meeting-call,#recordings .meeting-app{height: 72%;}
#recordings .meeting-call{width: 35%; left: 4%;}
#recordings .meeting-app{width: 53%; right: 4%;}
#recordings .interview-widget{right: 2%; bottom: 4%; width: 34%; height: auto; aspect-ratio: 336 / 236;}}
@media (max-width: 360px){#recordings .meeting-visual{aspect-ratio: 3 / 5;}
#recordings .interview-visual{aspect-ratio: 3 / 5;}
#recordings .interview-photo{height: 78%;}}
@media (prefers-reduced-motion: reduce){
#recordings .scene{opacity: 1; transform: none; transition: none;}
#recordings .motion{animation: auto ease 0s 1 normal none running none !important;}}
/* All component styles stay scoped; the homepage owns its fonts and wallpaper. */
#recordings{--ink:#090909;--muted:#77756f;--ease:cubic-bezier(.22,.72,.2,1);padding-top:90px;padding-bottom:80px}
#recordings .scene{opacity:1;transform:none;transition:none}
#recordings .intro h2{white-space:normal;font-size:clamp(46px,5.75vw,78px)}
#recordings .copy h3{font-family:var(--sans)}
#recordings .copy p{font-family:var(--mono);font-size:clamp(14px,1.2vw,16px);font-weight:400;line-height:1.6;letter-spacing:0}
#recordings .grid{align-items:start;--scene-extra:150px}
#recordings .scene{display:flex;flex-direction:column}
#recordings a.scene{color:inherit;text-decoration:none;border-radius:12px;cursor:pointer}
#recordings a.scene:hover h3{text-decoration:none}
#recordings a.scene:focus-visible{outline:3px solid #b9593b;outline-offset:6px}
#recordings .copy{flex:none}
#recordings .visual{flex-shrink:0;width:100%}
/* Equal added height, one tall demo per column; keep DOM reading order. */
#recordings .interview-visual,#recordings .lecture-visual{aspect-ratio:auto}
#recordings .interview-visual::before,#recordings .lecture-visual::before{content:"";display:block;padding-top:calc(100% + var(--scene-extra))}
#recordings .interview-photo{height:100%;object-position:center top}
/* Keep the lecture image at its original size: extra space belongs to notes. */
#recordings .lecture-photo{top:calc(4.5% - var(--scene-extra)*.045);height:calc(31% - var(--scene-extra)*.31)}
#recordings .lecture-output{top:calc(38% - var(--scene-extra)*.38);bottom:calc(5% - var(--scene-extra)*.05)}
@media(min-width:901px){
  #recordings .scene:nth-child(3){margin-top:calc(-1 * var(--scene-extra))}
}
#recordings .meeting-app{height:66%}
#recordings .meeting-icons{width:56%;max-width:301px}
#recordings .meeting-icons span{width:auto;height:auto;flex:1;min-width:0;aspect-ratio:1}
#recordings .meeting-icons img,#recordings .meeting-icons .discord{width:100%;height:auto}
#recordings .meeting-widget{width:35%;max-width:188px;height:auto;aspect-ratio:336/236}
#recordings .meeting-widget iframe{position:absolute;left:0;top:0}
#recordings .intro{position:static;margin-bottom:64px}
@media(max-width:520px){
  #recordings{padding-top:64px;padding-bottom:64px}
  #recordings .grid{--scene-extra:120px}
  #recordings .lecture-visual::before{padding-top:calc(125% + var(--scene-extra))}
  #recordings .interview-visual::before{padding-top:calc(133.333333% + var(--scene-extra))}
  #recordings .meeting-call,#recordings .meeting-app{height:62%}
  #recordings .meeting-icons{left:4%;bottom:6%;width:43%;gap:3px;transform:none}
  #recordings .meeting-icons span{width:auto;height:auto;flex:1;min-width:0;aspect-ratio:1}
  #recordings .meeting-icons img,#recordings .meeting-icons .discord{width:100%;height:auto;border-radius:0}
  #recordings .meeting-widget{right:3%;bottom:3%;width:44%;height:auto;aspect-ratio:336/236}
  #recordings .meeting-widget iframe{position:absolute;left:0;top:0}
}
@media(max-width:360px){
  #recordings .interview-visual::before{padding-top:calc(166.666667% + var(--scene-extra))}
}