@import url('style2.css');
body{overflow-x:hidden}

/* ─── Cursor adapts to background colour of mockup ─── */
#cur{background:#fff!important;mix-blend-mode:normal!important}
body.cursor-on-light #cur{background:#000!important}
body.cursor-on-black #cur{opacity:0!important}
.page-split{display:grid;grid-template-columns:1fr 1fr;height:calc(100vh - var(--header-h));overflow:hidden}
.split-left{position:relative;overflow:hidden;height:100%}
.split-right{position:relative;height:100%;overflow:hidden;display:grid}
.split-right>*{grid-row:1;grid-column:1}
.right-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:.35;pointer-events:none;user-select:none;width:100%;height:100%;transition:opacity .3s}
.right-empty svg{width:32px;height:32px;color:var(--fg)}
.right-empty span{font-family:'jsans',sans-serif;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--fg)}
.split-right.has-active .right-empty{opacity:0}
.right-mock{width:100%;height:100%;position:relative;overflow:hidden;opacity:0;transform:scale(.98);transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.right-mock.visible{opacity:1;transform:scale(1)}

@media(max-width:768px){
  .page-split{grid-template-columns:1fr;height:auto;display:block}
  .split-left{height:auto;min-height:calc(100vh - var(--header-h));width:100%}
  .split-right{display:none}

  body.detail-mobile-open{overflow:hidden;position:fixed;width:100%}
  body.detail-mobile-open .list-panel{display:none}

  body.detail-mobile-open .split-right{
    display:grid!important;
    position:fixed;
    top:var(--header-h);
    left:0;right:0;
    height:50vh;width:100%;
    z-index:50;
    border-bottom:1px solid var(--line);
    background:var(--bg);
  }
  body.detail-mobile-open .split-right>*{grid-row:1;grid-column:1}
  body.detail-mobile-open .right-mock{
    opacity:1!important;transform:none!important;
    width:100%;height:100%;
  }
  body.detail-mobile-open .right-mock .scene{width:100%;height:100%}

  body.detail-mobile-open .mockup-bottombar{
    opacity:1!important;transform:none!important;pointer-events:all!important;
    padding:8px 14px 12px;
  }

  body.detail-mobile-open .split-left{
    position:fixed;
    top:calc(var(--header-h) + 50vh);
    left:0;right:0;bottom:0;
    height:calc(50vh - var(--header-h));
    width:100%;
    overflow:hidden;
    z-index:40;
    background:var(--bg);
  }
  body.detail-mobile-open .detail-panel{
    position:absolute;inset:0;
    transform:translateX(0)!important;
    overflow-y:auto;
    width:100%;
  }

  .list-panel .font-list{padding:0 20px}
  .list-panel .thumb-clip,.list-panel .thumb-gap,.list-panel .variant-bar{display:none!important}
  .list-panel .font-name{padding:18px 0;font-size:clamp(28px,7vw,44px)}

  .mockup-bottombar{padding:10px 16px}
  .bg-palette{gap:6px}
  .bg-swatch{width:14px;height:14px}
  .ms-label{min-width:80px;font-size:8px}

  .detail-name{font-size:clamp(32px,9vw,52px);padding:12px 20px 6px}
  .detail-alphabet{padding:0 20px 8px;font-size:clamp(11px,3vw,16px)}
  .detail-download-row{padding:10px 20px}
  .detail-typetester{padding:0 20px 14px}
  .detail-typer{font-size:24px!important}
  .info-fields{grid-template-columns:1fr}
  .info-fields.open{max-height:240px}
  .info-field{border-right:none;border-bottom:1px solid var(--line);padding:10px 20px}
  .info-field:last-child{border-bottom:none}
  .detail-marquee-wrap{height:54px}
  .detail-marquee{font-size:clamp(28px,7vw,42px)}

  header{padding:0 16px}
  .search-input{width:120px}

  .suva-footer{flex-direction:column;gap:18px;padding:24px 20px}
}