:root { color: #30204e; background: #e1f05a; font-family: "Segoe UI", Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
.showroom { height: 100svh; min-height: 280px; display: grid; grid-template-rows: minmax(0, 1fr) auto; position: relative; isolation: isolate; overflow: clip; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.colour-field { position: absolute; z-index: -1; width: 82%; height: 76%; left: 9%; top: 6%; background: #b5a1dd; border-radius: 48% 52% 42% 58% / 55% 48% 52% 45%; transform: rotate(-8deg); }
.models { width: min(1360px, 100%); margin: 0 auto; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; padding-top: 32px; }
.model { min-width: 0; min-height: 0; position: relative; margin: 0; }
.model-long { transform: translateY(-3%); }
.model-square { transform: translateY(5%); }
.model img, .model canvas { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(8px 22px 9px #39245340); }
.model img { transform: rotate(-8deg); }
.model-square img { transform: rotate(12deg); }
.model canvas { cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.model canvas:active { cursor: grabbing; }
.model canvas:focus, .model canvas:focus-visible { outline: none; }
.purchase { display: flex; justify-content: center; padding-top: 12px; position: relative; z-index: 2; }
.buy { display: inline-flex; align-items: center; justify-content: space-between; gap: 58px; padding: 19px 27px; border-radius: 40px; color: #fff; background: #493492; font-size: 16px; font-weight: 600; text-decoration: none; box-shadow: 0 5px 0 #30204e; }
.buy svg { width: 21px; height: 21px; }
.buy:hover { background: #35236f; }
.buy:active { transform: translateY(2px); box-shadow: 0 3px 0 #30204e; }
:focus-visible { outline: 3px solid #30204e; outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (orientation: portrait) {
  .showroom { padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .models { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; padding-top: 36px; max-width: 650px; }
  .model-long { transform: translate(-5%, 0); }
  .model-square { transform: translate(8%, -3%); }
  .model canvas { filter: drop-shadow(5px 13px 6px #39245340); }
  .colour-field { width: 94%; height: 78%; left: 3%; top: 8%; border-radius: 48% 48% 38% 45%; transform: rotate(8deg); }
  .purchase { padding-top: 0; }
  .buy { min-width: 190px; padding: 17px 25px; font-size: 15px; }
}
@media (max-height: 450px) and (orientation: landscape) {
  .showroom { padding-block: 8px 17px; }
  .models { padding-top: 12px; max-width: 900px; }
  .buy { padding: 12px 23px; font-size: 14px; }
  .purchase { padding-top: 0; }
}