/* generated from src/data/scene.ts */
  :root .scene { --ws: max(min(100vw, 1.793103448275862 * 100svh), min(max(100vw, 1.793103448275862 * 100svh), 2.4961 * 100vw, 3.4272 * 100svh)); --hs: calc(var(--ws) / 1.793103448275862);
    width: var(--ws); height: var(--hs);
    left: clamp(0.3071 * -1 * var(--ws) + 1vw, clamp(min(0px, 100vw - var(--ws)), 50vw - 0.5 * var(--ws), max(0px, 100vw - var(--ws))), 99vw - 0.6917 * var(--ws));
    top: clamp(0.1323 * -1 * var(--hs) + 1svh, clamp(min(0px, 100svh - var(--hs)), 50svh - 0.52 * var(--hs), max(0px, 100svh - var(--hs))), 99svh - 0.6241 * var(--hs)); }
  :root .scene__ambient { left: 3.846%; top: 10.345%; width: 23.077%; height: 84.483%; }
  :root .note:nth-child(1) { display: block; left: 28.966%; top: 64.44%; width: 5.048%;
    --rot: -4deg; --light: 0.55; --c: var(--note-yellow); font-size: calc(var(--fit, 1) * var(--ws) * 0.01097); }
  :root .note:nth-child(2) { display: block; left: 71.274%; top: 16.164%; width: 5.048%;
    --rot: 5deg; --light: 0.5; --c: var(--note-orange); font-size: calc(var(--fit, 1) * var(--ws) * 0.01097); }
  :root .note:nth-child(3) { display: block; left: 79.688%; top: 45.69%; width: 5.529%;
    --rot: 3deg; --light: 0.4; --c: var(--note-pink); font-size: calc(var(--fit, 1) * var(--ws) * 0.01202); }
  :root .note:nth-child(4) { display: block; left: 86.899%; top: 48.06%; width: 5.168%;
    --rot: -5deg; --light: 0.38; --c: var(--note-green); font-size: calc(var(--fit, 1) * var(--ws) * 0.01124); }
  :root .note:nth-child(n + 5) { display: none; }
  :root .poster:nth-child(1) { display: block; left: 7.452%; top: 9.914%; width: 17.188%;
    --rot: -1.2deg; --light: 0.5; }
  :root .poster:nth-child(n + 2) { display: none; }
  :root .crt { left: 30.71%; top: 13.23%; width: 38.46%; height: 49.18%; border-radius: 3% / 4.207%; }
@media (max-aspect-ratio: 90/100) {
  :root .scene { --ws: max(min(100vw, 0.5576923076923077 * 100svh), min(max(100vw, 0.5576923076923077 * 100svh), 1.3885 * 100vw, 1.7171 * 100svh)); --hs: calc(var(--ws) / 0.5576923076923077);
    width: var(--ws); height: var(--hs);
    left: clamp(0.1441 * -1 * var(--ws) + 1vw, clamp(min(0px, 100vw - var(--ws)), 50vw - 0.5 * var(--ws), max(0px, 100vw - var(--ws))), 99vw - 0.8355 * var(--ws));
    top: clamp(0.2504 * -1 * var(--hs) + 1svh, clamp(min(0px, 100svh - var(--hs)), 50svh - 0.6 * var(--hs), max(0px, 100svh - var(--hs))), 99svh - 0.5557 * var(--hs)); }
  
  :root .note:nth-child(1) { display: block; left: 43.534%; top: 10.577%; width: 10.776%;
    --rot: -6deg; --light: 0.5; --c: var(--note-pink); font-size: calc(var(--fit, 1) * var(--ws) * 0.02343); }
  :root .note:nth-child(2) { display: block; left: 10.345%; top: 56.37%; width: 10.345%;
    --rot: -4deg; --light: 0.62; --c: var(--note-yellow); font-size: calc(var(--fit, 1) * var(--ws) * 0.02249); }
  :root .note:nth-child(n + 3) { display: none; }
  :root .poster:nth-child(1) { display: block; left: 11.207%; top: 2.043%; width: 21.983%;
    --rot: -1.5deg; --light: 0.55; }
  :root .poster:nth-child(n + 2) { display: none; }
  :root .crt { left: 14.41%; top: 25.04%; width: 69.14%; height: 30.53%; border-radius: 3% / 3.789%; }
}
/* phones in landscape: the screen is what matters, let the desk crop */
@media (max-height: 500px) and (min-aspect-ratio: 90/100) {
  :root .scene { --ws: max(min(100vw, 1.793103448275862 * 100svh), min(2.4961 * 100vw, 3.4272 * 100svh)); --hs: calc(var(--ws) / 1.793103448275862);
    width: var(--ws); height: var(--hs);
    left: clamp(0.3071 * -1 * var(--ws) + 1vw, clamp(min(0px, 100vw - var(--ws)), 50vw - 0.49939999999999996 * var(--ws), max(0px, 100vw - var(--ws))), 99vw - 0.6917 * var(--ws));
    top: clamp(0.1323 * -1 * var(--hs) + 1svh, clamp(min(0px, 100svh - var(--hs)), 50svh - 0.3782 * var(--hs), max(0px, 100svh - var(--hs))), 99svh - 0.6241 * var(--hs)); }
  :root .scene__ambient { left: 3.846%; top: 10.345%; width: 23.077%; height: 84.483%; }
  :root .note:nth-child(1) { display: block; left: 28.966%; top: 64.44%; width: 5.048%;
    --rot: -4deg; --light: 0.55; --c: var(--note-yellow); font-size: calc(var(--fit, 1) * var(--ws) * 0.01097); }
  :root .note:nth-child(2) { display: block; left: 71.274%; top: 16.164%; width: 5.048%;
    --rot: 5deg; --light: 0.5; --c: var(--note-orange); font-size: calc(var(--fit, 1) * var(--ws) * 0.01097); }
  :root .note:nth-child(3) { display: block; left: 79.688%; top: 45.69%; width: 5.529%;
    --rot: 3deg; --light: 0.4; --c: var(--note-pink); font-size: calc(var(--fit, 1) * var(--ws) * 0.01202); }
  :root .note:nth-child(4) { display: block; left: 86.899%; top: 48.06%; width: 5.168%;
    --rot: -5deg; --light: 0.38; --c: var(--note-green); font-size: calc(var(--fit, 1) * var(--ws) * 0.01124); }
  :root .note:nth-child(n + 5) { display: none; }
  :root .poster:nth-child(1) { display: block; left: 7.452%; top: 9.914%; width: 17.188%;
    --rot: -1.2deg; --light: 0.5; }
  :root .poster:nth-child(n + 2) { display: none; }
  :root .crt { left: 30.71%; top: 13.23%; width: 38.46%; height: 49.18%; border-radius: 3% / 4.207%; }
}