:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #e9e7df; background: #11110f; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-height: 100dvh; margin: 0; padding: clamp(18px, 4vw, 56px); display: grid; place-items: center; background: radial-gradient(circle at 16% 10%, #3b382f 0, transparent 38%), linear-gradient(145deg, #1b1b18, #0d0d0c); }
main { width: min(1180px, 100%); height: min(760px, calc(100dvh - clamp(36px, 8vw, 112px))); min-height: 520px; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; border: 1px solid #ffffff18; border-radius: 24px; background: #1d1d1a; box-shadow: 0 28px 90px #0009, 0 3px 14px #0008; }
.viewer { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #242421; }
canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
output { position: absolute; left: 22px; bottom: 22px; max-width: calc(100% - 44px); padding: 8px 12px; overflow: hidden; border: 1px solid #ffffff25; border-radius: 99px; background: #111c; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
aside { min-width: 0; padding: 26px 32px 28px; display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) auto; gap: 0 34px; align-items: center; background: #1d1d1a; box-shadow: 0 -12px 40px #0008; }
aside.is-pending { opacity: .42; filter: saturate(.35); pointer-events: none; }
.intro p { margin: 6px 0 0; font-size: 13px; }
.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 22px; }
.controls label { margin: 6px 0; }
.eyebrow { color: #d4a85c; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 750; }
h1 { font: 500 31px/1.05 Georgia, serif; margin: 7px 0 0; }
p { color: #aaa79d; line-height: 1.55; }
label { display: grid; min-width: 0; gap: 7px; margin: 17px 0; color: #ccc8bd; font-size: 13px; }
input[type=text], input:not([type]), select { width: 100%; min-width: 0; border: 1px solid #ffffff25; border-radius: 7px; color: white; background: #292925; padding: 9px 11px; font: inherit; }
input#text { font: 20px Georgia, serif; }
input[type=range] { width: 100%; accent-color: #d4a85c; }
dl { border-top: 1px solid #ffffff18; padding-top: 15px; }
dl div { display: flex; justify-content: space-between; margin: 8px 0; }
dt { color: #8d8a82; }
dd { margin: 0; }
.price { display: grid; justify-items: end; gap: 4px; align-content: center; padding-left: 30px; border-left: 1px solid #ffffff25; white-space: nowrap; }
.price strong { font: 500 29px Georgia, serif; color: #e4bd78; }
button { margin-top: 24px; width: 100%; padding: 11px; border: 1px solid #ffffff2e; border-radius: 7px; color: #ddd; background: transparent; cursor: pointer; }
/* Any portrait viewport stacks, plus anything narrow in landscape.
   Width alone was not enough: a 12.9in tablet is 1024px wide in portrait and a
   Surface is 912px, so both cleared the old breakpoint and got the desktop
   aside, which crams the intro, six controls in three columns and the price
   into one row. Every select and slider ended up in a ~150px track. */
@media (orientation: portrait), (max-width: 900px) {
  body { min-height: 100dvh; padding: 14px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); padding-bottom: max(14px, env(safe-area-inset-bottom)); place-items: start center; }
  main { height: auto; min-height: 0; grid-template-rows: auto auto; border-radius: 18px; }
  .viewer { height: clamp(300px, 52dvh, 460px); }
  aside { padding: 28px 22px 32px; display: block; overflow: visible; box-shadow: 0 -12px 40px #0008; }
  .controls { grid-template-columns: 1fr; gap: 0; }
  .controls label { margin: 17px 0; }
  .price { display: flex; justify-content: space-between; align-items: baseline; margin-top: 22px; padding: 18px 0 0; border-left: none; border-top: 1px solid #ffffff25; }
  h1 { font-size: 32px; }
}

/* Two control columns once the stacked panel is wide enough to hold them
   without either column going narrow again. Written as two queries because
   the `or` combinator is newer than the browsers these demos target. */
@media (min-width: 620px) and (orientation: portrait) {
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
}
@media (min-width: 620px) and (max-width: 900px) {
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
}

@media (max-width: 420px) {
  body { padding: 10px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  main { border-radius: 15px; }
  .viewer { height: clamp(270px, 44dvh, 350px); }
  output { left: 14px; bottom: 14px; max-width: calc(100% - 28px); }
}

/* Phone or small tablet held sideways: the viewport is wide and very short, so
   stacking leaves the viewer a sliver under a panel that runs off the bottom.
   Put the panel beside the viewer and let it scroll on its own. Bounded at
   1100px so a short desktop window keeps the desktop layout. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 1100px) {
  body { padding: 10px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); place-items: center; }
  main { height: calc(100dvh - 20px); min-height: 0; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) min(46%, 380px); border-radius: 16px; }
  .viewer { height: auto; min-height: 0; }
  aside { padding: 18px 20px; display: block; overflow-y: auto; overscroll-behavior: contain; box-shadow: -12px 0 40px #0008; }
  .controls { grid-template-columns: 1fr; gap: 0; }
  .controls label { margin: 14px 0; }
  .intro p { display: none; }
  h1 { font-size: 24px; }
  .price { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding: 14px 0 0; border-left: none; border-top: 1px solid #ffffff25; }
}

/* Short desktop window: keep the card inside the viewport instead of letting
   min-height push its foot off screen. */
@media (orientation: landscape) and (min-width: 901px) and (max-height: 650px) {
  body { padding: 16px; }
  main { height: calc(100dvh - 32px); min-height: 0; }
  aside { padding-top: 18px; padding-bottom: 20px; }
  .intro p { display: none; }
}

/* Touch: the default range thumb and select box are too small to hit. */
@media (pointer: coarse) {
  input[type=range] { height: 34px; }
  select, input[type=text], input:not([type]) { padding: 12px 11px; }
}