*{box-sizing:border-box}html{background:#020817}body{margin:0;background:#020817;color:#f7fbff;font-family:Inter,Segoe UI,Arial,sans-serif;font-size:14px}a{color:inherit;text-decoration:none}button,input{font:inherit}.topbar{height:76px;padding:0 4.2%;display:grid;grid-template-columns:300px 1fr 350px;align-items:center;border-bottom:1px solid #16325c;background:#030817;position:relative;z-index:10}.brand img{width:245px;height:64px;object-fit:contain}.topbar nav{display:flex;justify-content:center;gap:12px}.topbar nav a{padding:12px 16px;border-radius:8px;font-weight:700}.topbar nav .active{background:#0b3976;border:1px solid #1555a1}.head-actions{display:flex;gap:14px;align-items:center;justify-content:flex-end}.head-actions label{width:265px;height:42px;border:1px solid #1853a0;border-radius:24px;display:flex;align-items:center;padding:0 14px;color:#6fc5ff}.head-actions input{border:0;outline:0;background:transparent;color:#fff;width:100%;padding-left:8px}.head-actions button{height:42px;border:1px solid #713bd1;border-radius:24px;background:#071124;color:#ffd84a;padding:0 16px}.mobile{display:none}.hero{height:365px;position:relative;overflow:hidden;border-bottom:1px solid #18395d;background:#020817}.hero-art{position:absolute;right:0;top:0;width:68%;height:100%;background:url('hero-art.webp') center center/cover no-repeat}.hero-fade{position:absolute;inset:0;background:linear-gradient(90deg,#020817 0%,#020817 28%,rgba(2,8,23,.93) 36%,rgba(2,8,23,.28) 50%,rgba(2,8,23,0) 66%)}.hero-copy{position:relative;z-index:2;width:48%;padding:34px 0 0 5.2%}.eyebrow{color:#16c7ff;font-weight:900;letter-spacing:7px;font-size:14px;margin-bottom:12px}.hero h1{font-size:48px;line-height:.95;margin:0 0 15px;font-weight:1000;letter-spacing:-1px}.hero h1 span{font-size:50px;background:linear-gradient(90deg,#fff0a1,#ffc342,#ff762f);-webkit-background-clip:text;color:transparent}.hero p{font-size:16px;line-height:1.45;color:#d8e3f4;margin:0 0 22px}.hero-buttons{display:flex;gap:14px}.hero-buttons button,.hero-buttons a{height:52px;border-radius:10px;padding:0 24px;display:flex;align-items:center;gap:14px;font-weight:800}.primary{border:0;color:white;background:linear-gradient(100deg,#8517ff,#ec27ba,#ff9c31);box-shadow:0 0 24px #9a1dff55}.secondary{border:2px solid #10b9ff;background:#071123}.benefits{display:flex;margin-top:22px}.benefits>div{display:flex;gap:10px;align-items:center;padding:0 22px;border-right:1px solid #263c5c;font-size:22px}.benefits>div:first-child{padding-left:0}.benefits>div:last-child{border:0}.benefits span{display:flex;flex-direction:column;font-size:12px}.benefits small{color:#aabbd2;margin-top:3px}.featured{padding:20px 2.2% 16px}.section-head,.panel-head{display:flex;justify-content:space-between;align-items:end}.section-head h2,.panel-head h2{margin:0;font-size:20px}.section-head h2{color:#fff}.section-head h2::first-letter{color:#d72cff}.section-head p,.panel-head p{margin:4px 0 12px;color:#9db0c8;font-size:12px}.section-head>a,.panel-head>a{color:#14bfff;font-size:12px;margin-bottom:14px}.featured-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.fcard{border:1px solid #1b5686;border-radius:9px;overflow:hidden;background:#061124;min-width:0;position:relative}.fcard .pic{height:112px;position:relative}.fcard img{width:100%;height:100%;object-fit:cover}.badge{position:absolute;left:8px;top:8px;padding:5px 9px;border-radius:6px;background:#922bff;font-size:11px;font-weight:800}.badge.trend{background:#1777df}.fmeta{padding:8px}.fmeta b{display:block;font-size:13px}.fmeta small{display:block;color:#9bb0c8;margin:4px 0 8px}.play{height:30px;border:1px solid #0fc3ff;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}.fcard:first-child .play{border:0;background:linear-gradient(90deg,#9625ff,#ff5c72)}.panel{margin:12px auto;border:1px solid #183651;background:#071326;border-radius:12px;width:94.5%;padding:16px}.panel-head span,.quick-title span,.rail-head span,.discover>span{color:#ff2de2;font-size:10px;font-weight:900;letter-spacing:1px}.trend-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.tcard{border:1px solid #1c405e;border-radius:8px;overflow:hidden;background:#061124}.tcard img{width:100%;height:86px;object-fit:cover}.tmeta{padding:8px}.tmeta b{font-size:12px}.tmeta span{display:flex;justify-content:space-between;color:#22ffbd;font-size:10px;margin-top:8px;font-weight:800}.quick-discover{width:94.5%;margin:12px auto;display:grid;grid-template-columns:3fr 1fr;gap:12px}.quick-discover .panel{width:100%;margin:0}.quick-title{display:grid;grid-template-columns:190px 1fr;gap:18px;align-items:center}.quick-title h2{font-size:22px;margin:2px 0}.quick-title p{margin:0;color:#a7bad0;font-size:12px}.quick-title button{height:34px;border:0;border-radius:7px;background:linear-gradient(90deg,#951cff,#ff28a7);color:#fff;font-weight:900}.quick-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:10px}.qcard{border:1px solid #1b4565;border-radius:7px;overflow:hidden;background:#071426}.qcard img{width:100%;height:72px;object-fit:cover}.qcard b{display:block;padding:7px;font-size:11px}.discover{border:1px solid #7832ba;background:linear-gradient(135deg,#14102d,#24103d);border-radius:12px;padding:22px}.discover h2{font-size:26px;line-height:1;margin:8px 0}.discover p{color:#d0d4e5;line-height:1.45}.stats{display:flex;gap:24px;margin-top:20px}.stats b{display:flex;flex-direction:column}.stats i{font-style:normal;font-size:22px}.stats small{font-size:9px;color:#9cb0c7}.railway{padding:14px 16px}.rail-head{display:grid;grid-template-columns:180px 1fr 180px;align-items:center;gap:20px}.rail-head h2{margin:3px 0;font-size:21px}.rail-head p{color:#a9b9ce;font-size:12px}.rail-head a{border:1px solid #09bfff;border-radius:6px;padding:9px;text-align:center;color:#20c7ff;font-size:11px}.rail-grid{display:flex;gap:10px;margin-top:10px}.rcard{width:230px;border:1px solid #1a527c;border-radius:7px;overflow:hidden;background:#071426}.rcard img{width:100%;height:72px;object-fit:cover}.rcard b{display:block;padding:7px}.feature-strip{width:94.5%;margin:14px auto;border:1px solid #183651;border-radius:12px;background:#071326;display:grid;grid-template-columns:repeat(4,1fr);padding:18px}.feature-strip>div{display:flex;gap:14px;align-items:center;justify-content:center;border-right:1px solid #23435f;font-size:24px}.feature-strip>div:last-child{border:0}.feature-strip span{display:flex;flex-direction:column;font-size:12px}.feature-strip small{color:#9eb0c7;margin-top:3px}footer{min-height:92px;border-top:1px solid #17395b;display:grid;grid-template-columns:280px 1fr 300px;align-items:center;padding:0 4%;color:#8fa5bf;font-size:11px}footer img{width:180px}footer nav{display:flex;justify-content:center;gap:22px}.search-results{position:fixed;right:8%;top:68px;z-index:50;background:#071326;border:1px solid #22517d;border-radius:10px;padding:8px;width:280px}.search-results a{display:flex;gap:10px;padding:8px}.search-results img{width:50px;height:34px;object-fit:cover}.light-preview{filter:brightness(1.08)}
@media(max-width:1100px){.topbar{grid-template-columns:220px 1fr 250px}.brand img{width:190px}.topbar nav a{padding:9px}.hero-copy{width:60%}.featured-grid{overflow-x:auto;display:flex}.fcard{min-width:180px}.trend-grid{overflow-x:auto;display:flex}.tcard{min-width:210px}.quick-discover{grid-template-columns:1fr}.head-actions label{width:190px}}@media(max-width:760px){.topbar{grid-template-columns:1fr auto;height:64px}.brand img{width:180px}.topbar nav,.head-actions{display:none}.mobile{display:block;background:transparent;color:#fff;border:0;font-size:24px}.hero{height:520px}.hero-art{width:100%;height:55%;top:auto;bottom:0}.hero-fade{background:linear-gradient(180deg,#020817 0%,#020817 45%,rgba(2,8,23,.2) 75%)}.hero-copy{width:100%;padding:25px 22px}.hero h1,.hero h1 span{font-size:38px}.benefits{display:none}.featured-grid{display:flex;overflow:auto}.quick-title{grid-template-columns:1fr}.rail-head{grid-template-columns:1fr}.feature-strip{grid-template-columns:1fr;gap:14px}.feature-strip>div{border-right:0;justify-content:flex-start}footer{grid-template-columns:1fr;text-align:center;gap:15px;padding:20px}footer nav{flex-wrap:wrap}}

/* =========================================================
   BeatlePlay V2.7.1 — Pixel Match & Scale Correction
   Desktop calibration against approved master reference.
   No structural/database changes.
   ========================================================= */
@media (min-width:1101px){
  body{font-size:15px}

  /* Header: stronger brand and navigation presence */
  .topbar{height:72px;padding-left:4.4%;padding-right:4.4%;grid-template-columns:320px 1fr 380px}
  .brand img{width:270px;height:66px}
  .topbar nav{gap:14px}
  .topbar nav a{padding:12px 18px;font-size:14px}
  .head-actions{gap:15px}
  .head-actions label{width:285px;height:44px}
  .head-actions button{height:44px;padding:0 18px}

  /* Hero: zoom artwork OUT and keep it sharp.  The source is never stretched
     with cover; it is fitted to hero height and allowed to extend naturally. */
  .hero{height:342px}
  .hero-art{right:0;top:0;width:70%;height:100%;background-size:auto 100%;background-position:right center;background-repeat:no-repeat}
  .hero-fade{background:linear-gradient(90deg,#020817 0%,#020817 27%,rgba(2,8,23,.96) 34%,rgba(2,8,23,.64) 42%,rgba(2,8,23,.15) 53%,rgba(2,8,23,0) 63%)}
  .hero-copy{width:46%;padding:29px 0 0 5.2%}
  .eyebrow{font-size:15px;letter-spacing:7.5px;margin-bottom:12px}
  .hero h1{font-size:51px;line-height:.94;margin-bottom:14px;letter-spacing:-1.2px}
  .hero h1 span{font-size:53px}
  .hero p{font-size:16px;line-height:1.42;max-width:520px;margin-bottom:19px}
  .hero-buttons{gap:15px}
  .hero-buttons button,.hero-buttons a{height:54px;padding:0 25px;border-radius:10px;font-size:14px}
  .benefits{margin-top:20px}
  .benefits>div{padding:0 24px;font-size:24px}
  .benefits span{font-size:12.5px}

  /* Featured rail: larger cards and artwork, matching approved visual density */
  .featured{padding:18px 2.2% 18px}
  .section-head h2,.panel-head h2{font-size:22px}
  .section-head p,.panel-head p{font-size:12.5px;margin-top:5px}
  .section-head>a,.panel-head>a{font-size:12.5px}
  .featured-grid{gap:11px}
  .fcard{border-radius:10px}
  .fcard .pic{height:124px}
  .fmeta{padding:9px}
  .fmeta b{font-size:14px}
  .fmeta small{font-size:11px;margin:5px 0 9px}
  .play{height:32px;font-size:11.5px}

  /* Lower content: retain V2.7 structure, increase legibility and card height */
  .panel{margin-top:14px;margin-bottom:14px;padding:18px;width:95%}
  .panel-head span,.quick-title span,.rail-head span,.discover>span{font-size:10.5px}
  .trend-grid{gap:13px}
  .tcard img{height:101px}
  .tmeta{padding:9px}
  .tmeta b{font-size:13px}
  .tmeta span{font-size:10.5px;margin-top:9px}
  .quick-discover{width:95%;gap:14px;margin-top:14px;margin-bottom:14px}
  .quick-title{grid-template-columns:205px 1fr;gap:20px}
  .quick-title h2{font-size:23px}
  .quick-title button{height:38px}
  .quick-grid{gap:11px;margin-top:12px}
  .qcard img{height:82px}
  .qcard b{font-size:12px;padding:8px}
  .discover{padding:24px}
  .discover h2{font-size:28px}
  .discover p{font-size:14px}
  .railway{padding:16px 18px}
  .rail-grid{gap:11px;margin-top:11px}
  .rcard{width:240px}
  .rcard img{height:82px}
  .feature-strip{width:95%;padding:20px;margin-top:16px;margin-bottom:16px}
  .feature-strip>div{font-size:26px}
  .feature-strip span{font-size:13px}
  footer{min-height:98px;font-size:11.5px}
  footer img{width:195px}
}

/* Preserve clean laptop fit without forcing desktop scale onto 1366px screens. */
@media (min-width:1101px) and (max-width:1450px){
  .topbar{grid-template-columns:270px 1fr 315px}
  .brand img{width:230px}
  .topbar nav{gap:8px}
  .topbar nav a{padding:10px 12px;font-size:12px}
  .head-actions label{width:225px}
  .hero{height:326px}
  .hero h1{font-size:45px}.hero h1 span{font-size:47px}
  .hero-copy{width:48%;padding-top:27px}
  .fcard .pic{height:108px}
  .fmeta b{font-size:12.5px}
  .tcard img{height:88px}
}