* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: #f6e4d2; color: #5b4636; font: 15px/1.3 ui-rounded, "Nunito", "Trebuchet MS", system-ui, sans-serif; overflow: hidden; }
body { background: radial-gradient(120% 80% at 50% 0%, #ffd9b8, #f3dfe8 55%, #dfe6f3); }
#room { height: 100dvh; display: flex; flex-direction: column; align-items: center; }
#stage { position: relative; flex: 1 1 auto; width: 100%; min-height: 0; display: grid; place-items: center; }
#stage { cursor: pointer; touch-action: manipulation; }
#still, #films video { position: absolute; height: 100%; max-width: 100%; aspect-ratio: 480 / 832; object-fit: cover; border-radius: 0 0 28px 28px; }
#films { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
#films video { opacity: 0; }
#films video.on { opacity: 1; }
#now { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); font-weight: 700; letter-spacing: .04em; font-size: 16px;
  color: #fff; background: #c9766a99; padding: 4px 14px; border-radius: 99px; pointer-events: none; white-space: nowrap; backdrop-filter: blur(4px); }
#panel { flex: 0 0 auto; width: 100%; max-width: 520px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); display: grid; gap: 6px; }
#modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
#modes button { min-height: 44px; font: inherit; font-weight: 700; color: #7a5a48; background: #fff8f1; border: 2px solid #efd3c0; border-radius: 22px;
  cursor: pointer; transition: transform .15s, background .25s, color .25s, border-color .25s; padding: 0 2px; }
#modes button:active { transform: scale(.94); }
#modes button[aria-pressed="true"] { background: #f2a38e; color: #fff; border-color: #e88a74; box-shadow: 0 4px 12px #e88a7455; }
#dials { display: grid; grid-template-columns: 1fr; gap: 10px; }
.dial { display: grid; gap: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a07f6c; }
.dial input { width: 100%; height: 44px; margin: -6px 0 -8px; accent-color: #e88a74; }
#home { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 16px; font: inherit; color: #fff;
  background: linear-gradient(90deg, #e88a74, #f2a38e 60%, #f6b7a0); border: 0; border-radius: 22px; cursor: pointer; box-shadow: 0 4px 14px #e88a7455; }
#home b { font-size: 16px; letter-spacing: .02em; white-space: nowrap; }
#home span { font-size: 13px; font-weight: 700; opacity: .92; white-space: nowrap; }
#home:active { transform: scale(.97); }
#take { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; padding: 12px; background: #5b463666; backdrop-filter: blur(6px); }
#take[hidden] { display: none; }
#take.short .devices { display: none; }
#take .sheet { position: relative; width: min(100%, 420px); max-height: 100%; overflow-y: auto; padding: 18px 18px 16px; display: grid; gap: 10px;
  background: #fff8f1; border-radius: 26px; box-shadow: 0 20px 60px #5b463655; animation: rise .35s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes rise { from { transform: translateY(24px) scale(.96); opacity: 0; } }
#take h2 { font-size: 19px; line-height: 1.2; padding-right: 36px; color: #7a4a3a; }
#take .what { font-size: 14px; color: #7a5a48; }
#take .what b { color: #d9705a; }
#take .close { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; font: 700 24px/1 inherit; color: #a07f6c; background: #f6e4d2;
  border: 0; border-radius: 50%; cursor: pointer; }
.devices { display: flex; align-items: flex-end; justify-content: center; gap: 22px; padding: 4px 0; }
.devices .phone { position: relative; width: 104px; aspect-ratio: 480 / 832; border: 5px solid #5b4636; border-radius: 20px; overflow: hidden; background: #f6e4d2; }
.devices .watch { position: relative; width: 92px; padding: 22px 0; display: grid; }
.devices .watch::before { content: ""; position: absolute; left: 22%; right: 22%; top: 0; bottom: 0; background: #c9a58f; border-radius: 12px; }
.devices .face { position: relative; width: 100%; aspect-ratio: 1; border: 6px solid #5b4636; border-radius: 50%; overflow: hidden; background: #f6e4d2; }
.devices video { position: absolute; display: block; }
.devices .phone video { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.devices .face video { width: 120%; left: -20%; top: -89.25%; }   /* the pack's watch box, 400x400 at (80, 357) of the 480x832 clip */
#take .ways { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
#pay, #buy { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 52px; padding: 6px 18px; font: inherit;
  text-decoration: none; border-radius: 26px; cursor: pointer; }
#pay { color: #fff; background: linear-gradient(90deg, #e88a74, #f2a38e 60%, #f6b7a0); border: 0; box-shadow: 0 4px 14px #e88a7455; }
#buy { align-items: center; padding: 6px 14px; color: #c0634d; background: none; border: 2px solid #efc0ae; }
#pay b { font-size: 16px; } #pay span { font-size: 12px; font-weight: 700; opacity: .9; }
#buy b { font-size: 14px; white-space: nowrap; }
#pay .star { width: 1.05em; height: 1.05em; vertical-align: -0.15em; fill: #ffe7a3; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; } #buy span { font-size: 12px; font-weight: 700; }
#pay:active, #buy:active { transform: scale(.97); }
#pay:focus-visible, #buy:focus-visible { outline: 3px solid #7a4a3a; outline-offset: 2px; }
#paid { font-size: 14px; font-weight: 700; color: #7a4a3a; }
#paid a { color: #d9705a; }
#paid[hidden] { display: none; }
#free { display: grid; gap: 8px; }
#free label { font-size: 13px; color: #7a5a48; }
#free .row { display: flex; gap: 6px; }
#free input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 14px; font: inherit; color: #5b4636; background: #fff; border: 2px solid #efd3c0; border-radius: 22px; }
#free input:focus { outline: none; border-color: #e88a74; }
#free button { flex: 0 0 auto; min-height: 44px; padding: 0 18px; font: inherit; font-weight: 700; color: #fff; background: #e88a74; border: 0; border-radius: 22px; cursor: pointer; }
#said { min-height: 1.3em; font-size: 13px; color: #a0604c; }
#said a { color: #d9705a; font-weight: 700; }
@media (max-height: 640px) { .devices .phone { width: 72px; } .devices .watch { width: 64px; padding: 14px 0; } #take .sheet { gap: 6px; padding: 14px; } }
#hint { text-align: center; font-size: 12px; color: #a07f6c; }
@media (max-width: 430px) { #modes { gap: 4px; } #modes button { font-size: 13px; letter-spacing: -.01em; } }
@media (orientation: landscape) and (max-height: 500px) {
  #room { flex-direction: row; justify-content: center; gap: 12px; padding: 0 12px; }
  #stage { flex: 0 1 auto; height: 100%; width: auto; aspect-ratio: 480 / 832; }
  #panel { width: 340px; max-height: 100%; align-content: center; }
  #modes { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  #room { flex-direction: row; justify-content: center; gap: 32px; padding: 0 28px; }
  #stage { flex: 0 1 auto; height: calc(100% - 40px); margin: 20px 0; width: auto; aspect-ratio: 480 / 832; }
  #still, #films video { border-radius: 28px; }
  #still { box-shadow: 0 18px 50px #b4869a40; }
  #panel { width: 300px; max-height: 100%; overflow-y: auto; align-content: safe center; gap: 18px; }
  #modes { grid-template-columns: 1fr 1fr; }
  #dials { grid-template-columns: 1fr; gap: 14px; }
  #home { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 20px; border-radius: 26px; }
  #home b { font-size: 19px; }
  #take .sheet { width: 460px; padding: 24px; gap: 14px; }
  .devices .phone { width: 140px; } .devices .watch { width: 120px; padding: 28px 0; }
}
/* the landscape phone last: a 915-wide phone also matches the desktop rule above */
@media (max-height: 500px) and (orientation: landscape) {
  #take .sheet { width: min(100%, 720px); grid-template-columns: auto 1fr; column-gap: 18px; align-items: start; }
  #take h2, #take .what, #take .ways, #paid, #free { grid-column: 2; }
  #take .devices { grid-column: 1; grid-row: 1 / span 4; align-self: center; width: 170px; gap: 14px; }
  .devices .phone { width: 76px; } .devices .watch { width: 66px; padding: 14px 0; }
  #take .close { grid-column: 1 / -1; grid-row: 1; }
  #take .what { padding-right: 40px; }
}