/* packet-sales — colorful and friendly, not utilitarian.
   ⚠️ Andrew on the HQ front end, and it reads across: "I want it to look
   beautiful and modern, as if Apple built it, but maybe with a little more
   colorful leeway than Apple might normally allow." A parent meets this while
   holding a toddler in a daycare hallway — it should feel like a photograph
   studio, not a payment terminal.
   No external fonts, no image assets: on a phone in a car park, every byte is
   latency. Everything below is system fonts and CSS. */

:root{
  /* 🎨 PACKET 1.72 (2026-11-13, Andrew: "update its color scheme to that website"): the jellybeanimages.com palette
     (website/public/site.css): warm paper, near-black ink, pumpkin, berry, honey. The variable NAMES are kept so every rule
     below follows; orange = pumpkin-2, pink = berry, violet = pumpkin (the accent), sky = the site's dusk blue. */
  --ink:#1d1a16; --ink-soft:#6e6558; --line:#e6ddcf; --card:#fffdf9;
  --orange:#e0783a; --pink:#b0303f; --violet:#ad4a18; --sky:#6f8fb0; --green:#4f8a4a;
  --grad:linear-gradient(120deg,var(--orange),var(--violet) 50%,var(--pink));
  --shadow:0 1px 1px rgba(40,26,10,.06),0 12px 28px -10px rgba(40,26,10,.22); --radius:20px;
  --serif:"Newsreader Variable",Newsreader,Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink); background:#f6f1e9; min-height:100vh;
  display:flex; flex-direction:column; overflow-x:hidden;
}

/* soft blobs — pure CSS, decorative only */
.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;filter:blur(70px);opacity:.22}
.blobs i{position:absolute;display:block;border-radius:50%}
.blobs i:nth-child(1){width:42vw;height:42vw;background:var(--orange);top:-8vw;left:-8vw}
.blobs i:nth-child(2){width:34vw;height:34vw;background:var(--pink);top:22vh;right:-10vw}
.blobs i:nth-child(3){width:38vw;height:38vw;background:var(--violet);bottom:-12vw;left:12vw}
.blobs i:nth-child(4){width:24vw;height:24vw;background:var(--sky);bottom:18vh;right:8vw}

.top{padding:20px 22px 6px}
.brand{display:flex;align-items:center;gap:12px}
.brandtext{display:flex;flex-direction:column;line-height:1.15}
.brandtext b{font-size:18px;letter-spacing:-.2px}
.brandtext small{color:var(--ink-soft);font-size:12.5px}

main{flex:1;width:100%;max-width:720px;margin:0 auto;padding:8px 22px 40px}

/* views: one at a time, no router, no framework */
.view{display:none;animation:rise .34s cubic-bezier(.2,.7,.3,1)}
.view.is-on{display:block}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .view{animation:none}
  *{transition:none!important}
}

.huge{font-family:var(--serif);font-size:clamp(32px,8vw,50px);line-height:1.06;letter-spacing:-.02em;margin:18px 0 10px;font-weight:400}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--ink-soft);font-size:17px;margin:0 0 22px}
.lede.small{font-size:15px}
.h2{font-family:var(--serif);font-size:25px;font-weight:450;letter-spacing:-.01em;margin:26px 0 12px}
.h2.center{text-align:center}

/* ── the code field ─────────────────────────────────────────────────────── */
.codelabel,.fieldlabel{display:block;font-weight:650;font-size:14px;margin:0 0 8px;color:var(--ink)}
.codeinput{
  width:100%;padding:20px 18px;border:2px solid var(--line);border-radius:var(--radius);
  background:var(--card);box-shadow:var(--shadow);
  font:800 clamp(26px,7vw,34px)/1 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  letter-spacing:.16em;text-align:center;text-transform:uppercase;color:var(--ink);
}
.codeinput:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 5px rgba(173,74,24,.16),var(--shadow)}
.codeinput::placeholder{color:#dccfbd;letter-spacing:.16em}
.hint{color:var(--ink-soft);font-size:13.5px;margin:10px 2px 18px;text-align:center}

.field{width:100%;padding:14px 16px;border:2px solid var(--line);border-radius:14px;background:var(--card);
  font-size:16px;color:var(--ink);margin-bottom:16px}
.field:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(173,74,24,.14)}

button{font-family:inherit}
.big{
  width:100%;padding:18px 20px;border:0;border-radius:var(--radius);color:#fff;
  background:var(--grad);font-size:18px;font-weight:750;cursor:pointer;box-shadow:var(--shadow);
  transition:transform .12s ease,filter .12s ease;
}
.big:hover{filter:brightness(1.05)}
.big:active{transform:scale(.985)}
.big[disabled]{opacity:.55;cursor:not-allowed;filter:grayscale(.35)}
.big.pay{background:linear-gradient(120deg,var(--green),#16a34a)}
.secondary{
  width:100%;padding:15px 18px;border:2px solid var(--line);border-radius:16px;background:var(--card);
  font-size:16px;font-weight:700;color:var(--violet);cursor:pointer;margin:6px 0 4px;
}
.secondary:hover{border-color:var(--violet)}
.back{background:none;border:0;color:var(--ink-soft);font-size:15px;padding:10px 0;cursor:pointer}
.back:hover{color:var(--violet)}

.msg{min-height:22px;margin:14px 2px 0;font-size:15px;font-weight:600;text-align:center}
.msg.err{color:#c02a52}
.msg.ok{color:#15803d}
.msg.warn{color:#a16207}

/* ── the photograph ─────────────────────────────────────────────────────── */
.photowrap{background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);margin:6px 0 10px}
.preview{display:block;width:100%;height:auto;border-radius:12px;background:#efe7db}
.protecc{color:var(--ink-soft);font-size:12.5px;text-align:center;margin:10px 0 2px}
.daycare{color:var(--ink-soft);font-size:14.5px;margin:6px 2px 14px;text-align:center}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.grid figure{margin:0;background:var(--card);border-radius:14px;padding:8px;box-shadow:var(--shadow)}
.grid img{width:100%;height:auto;border-radius:9px;display:block;background:#efe7db}
.grid figcaption{font:600 12px/1.3 ui-monospace,Menlo,monospace;color:var(--ink-soft);text-align:center;padding:7px 2px 2px}
.grid .mine{outline:3px solid var(--violet);outline-offset:2px}

/* ── products ───────────────────────────────────────────────────────────── */
.products{display:flex;flex-direction:column;gap:12px}
.product{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--card);border:2px solid var(--line);border-radius:18px;padding:16px 18px;
  box-shadow:var(--shadow);transition:border-color .12s ease,transform .12s ease;
}
.product:hover{border-color:var(--violet)}
.product:active{transform:scale(.99)}
.product .pname{font-weight:750;font-size:16.5px}
.product .pblurb{color:var(--ink-soft);font-size:13.5px;margin-top:3px}
.product .pprice{margin-left:auto;font-weight:800;font-size:19px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}

.summary{background:var(--card);border-radius:18px;padding:18px;box-shadow:var(--shadow);margin-bottom:20px}
.summary .row{display:flex;justify-content:space-between;gap:12px;font-size:15.5px}
.summary .row+.row{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.summary b{font-size:18px}

.cardwrap{margin:6px 0 18px}
#card-container{min-height:56px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:6px 10px}
.cardoff{background:#fff7ed;border:2px solid #fed7aa;border-radius:14px;padding:16px;color:#9a3412;font-size:15px}

.tick{display:flex;justify-content:center;margin:18px 0 4px}
.donebody{background:var(--card);border-radius:18px;padding:20px;box-shadow:var(--shadow);font-size:16px}
.donebody .ref{font:800 22px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;margin:6px 0 14px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.donebody ul{margin:10px 0 0;padding-left:20px}
/* ⭐⭐ THE COLLECT PANEL. Andrew's ruling, 2026-08-24: the confirmation shows
   the purchase date and time, to the minute, so a reused screenshot is obvious
   to a staff member at a glance. ⚠️ THE TIME IS THE LARGEST THING IN THE PANEL
   AND SITS FIRST — a staff member is reading this while a parent talks to them,
   and a timestamp set in body copy is a timestamp nobody reads. */
.donebody .collect{margin-top:16px;padding:14px;border-radius:12px;background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d}
.donebody .collect-when{display:flex;flex-direction:column;gap:2px;margin:0 0 10px;padding:0 0 10px;
  border-bottom:1px solid #bbf7d0}
.donebody .collect-when-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#15803d}
.donebody .collect-when-time{font-size:20px;font-weight:800;line-height:1.25;color:#14532d}
.donebody .collect-what{font-size:15px;line-height:1.45}
.donebody .collect-ref{margin-top:8px;font:700 15px/1.3 ui-monospace,Menlo,monospace;letter-spacing:.04em;color:#166534}
@media (max-width:380px){.donebody .collect-when-time{font-size:18px}}

.foot{border-top:1px solid var(--line);padding:20px 22px 30px;text-align:center;background:rgba(255,255,255,.7)}
.help{margin:0 0 8px;font-size:14.5px;font-weight:600;color:var(--ink)}
.tiny{color:var(--ink-soft);font-size:12.5px;margin:6px 0 0;text-align:center}

/* ⭐ One-tap wallets (PACKET 1.13). Apple's own button is drawn by Safari from
   these properties, exactly as Apple's guidelines require; Google's button is
   drawn by Google inside its div. Both fill the column like the Pay button. */
.wallets{margin:4px 0 14px}
.gpay{min-height:48px;margin:0 0 10px}
.applepay{display:block;width:100%;height:48px;margin:0 0 10px;border:0;border-radius:12px;cursor:pointer;
  -webkit-appearance:-apple-pay-button;-apple-pay-button-type:buy;-apple-pay-button-style:black}
.applepay[hidden],.gpay[hidden]{display:none}
.or{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:13px;margin:6px 0 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

/* ⭐ Who is behind this page (PACKET 1.14): real, checkable contact details. */
.trust{margin:10px auto 4px;max-width:520px}
.trust p{margin:4px 0}
.trust-who,.trust-contact{font-size:14px;color:var(--ink)}
.trust a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* PACKET 1.36 — the parents' door. [hidden] must win over a button class's own display rule. */
#view-door [hidden]{display:none!important}
.doorchild{padding:10px 0 4px;border-top:1px solid var(--line);margin-top:6px}
.doorchild .field{margin-bottom:10px}

/* ── 📮 PACKET 1.62: the Proof order form (public/proof.js) ─────────────────── */
.proof-when{background:var(--card);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);font-weight:650;text-align:center;margin:4px 0 16px}
.proof-when.late{color:#a16207}
.proof-poses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.proof-pose{margin:0;background:var(--card);border-radius:16px;padding:10px;box-shadow:var(--shadow);text-align:center}
.proof-pose img,.proof-picker img{width:100%;height:auto;border-radius:10px;display:block;background:#efe7db}
.proof-pose figcaption{font-weight:800;margin:8px 0 0}
.proof-nophoto{padding:40px 8px;color:var(--ink-soft);font-size:13px;background:#efe7db;border-radius:10px}
.proof-picker{background:var(--card);border-radius:16px;padding:12px;box-shadow:var(--shadow);margin:12px 0}
.proof-picker figure{margin:0}
.proof-picked{outline:3px solid var(--violet);outline-offset:2px;border-radius:12px}
.proof-pkgs,.proof-adds{display:flex;flex-direction:column;gap:10px}
.proof-pkg,.proof-add{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow)}
.proof-pkg-head,.proof-add-name{display:flex;align-items:center;gap:12px}
.proof-letter{flex:none;width:40px;height:40px;border-radius:12px;background:var(--grad);color:#fff;font-weight:800;font-size:20px;
  display:flex;align-items:center;justify-content:center}
.proof-pkg-what{flex:1;min-width:0}
.proof-pkg .pname,.proof-add .pname{font-weight:700;font-size:15px}
.proof-pkg .pblurb{color:var(--ink-soft);font-size:13px}
.proof-pkg .pprice,.proof-add .pprice{margin-left:auto;font-weight:800;white-space:nowrap;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.proof-posebtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{border:2px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;font-size:14.5px;font-weight:700;
  color:var(--violet);cursor:pointer;min-height:44px}
.chip:hover{border-color:var(--violet)}
.chip:active{transform:scale(.97)}
/* 📮 PACKET 1.64: what is chosen is plain to see. A picked chip is filled; tapping it again takes it off. A card with
   anything picked glows, and lists "In your order" with its own − / + right there. */
.chip.on{background:var(--violet);border-color:var(--violet);color:#fff}
.chip.on:hover{border-color:var(--violet)}
.proof-pkg.on,.proof-add.on{border-color:var(--violet);box-shadow:0 0 0 3px rgba(173,74,24,.2),var(--shadow);background:#fbf7f0}
.proof-chosen{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px}
.proof-chosen-row{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:650}
.proof-chosen-row > span:first-child{flex:1;min-width:0}
.proof-sub{color:var(--ink-soft);font-size:13.5px}
.proof-sub b{font-weight:600}
#proofRoot{padding-bottom:140px}
.proof-check{display:flex;gap:10px;align-items:flex-start;background:var(--card);border-radius:14px;padding:14px;margin:12px 0;
  box-shadow:var(--shadow);font-weight:600;cursor:pointer}
.proof-check input{width:22px;height:22px;flex:none;margin-top:2px}
.proof-lines{background:var(--card);border-radius:16px;padding:6px 14px;box-shadow:var(--shadow)}
.proof-line{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.proof-line:last-child{border-bottom:0}
.proof-line-what{flex:1;min-width:0;font-size:14.5px}
.proof-qty{display:flex;align-items:center;gap:8px}
.qbtn{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);background:#fff;font-size:18px;font-weight:800;color:var(--violet);cursor:pointer}
.proof-line-price{min-width:64px;text-align:right}
.proof-bar{position:sticky;bottom:0;margin:20px -6px 0;padding:12px;background:rgba(246,241,233,.96);
  border-radius:18px 18px 0 0;box-shadow:0 -8px 24px rgba(40,26,10,.12);display:flex;flex-direction:column;gap:10px;
  padding-bottom:max(12px,env(safe-area-inset-bottom))}
.proof-total{display:flex;justify-content:space-between;align-items:baseline;font-size:18px;padding:0 6px}
.proof-total small{display:block;color:var(--ink-soft);font-size:12.5px;font-weight:500}
.proof-total b{font-size:24px}
@media (min-width:720px){ .proof-bar{flex-direction:row;align-items:center} .proof-bar .big{width:auto;flex:none;padding:16px 28px} .proof-total{flex:1} }

/* 🛋️ PACKET 1.70 — "See them at home" (public/room.js). The room is a rendered photograph (public/room/); every
   print is the parent's own photo placed in perspective, with the room's light multiplied over it, the glass's
   glare screened over that, and the frame laid on top. Sizes in the stage are the render's pixels; the stage is
   scaled to the box's width, so one layout serves a phone and a computer alike. */
.room{margin:18px 0 6px}
.room-head .h2{margin-bottom:2px}
.room-box{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:22px;background:#3a3530;
  box-shadow:0 22px 50px rgba(40,25,20,.28),0 2px 6px rgba(40,25,20,.18);isolation:isolate;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.room-box.is-loading::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.10) 50%,rgba(255,255,255,0) 80%) #3a3530;
  background-size:200% 100%;animation:roomShimmer 1.2s linear infinite}
@keyframes roomShimmer{from{background-position:120% 0}to{background-position:-80% 0}}
.room-stage{position:absolute;left:0;top:0;transform-origin:0 0}
.room-layer{position:absolute;display:block;max-width:none;pointer-events:none}
.room-plate{opacity:0;transition:opacity .45s ease}
.room-box:not(.is-loading) .room-plate{opacity:1}
.room-group{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s ease}
.room-photo{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#d9d2c8;backface-visibility:hidden}
.room-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.room-pic.is-in{opacity:0;transform:scale(1.04)}
.room-shade{mix-blend-mode:multiply}
.room-refl{mix-blend-mode:screen;opacity:.85;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.room-sweep{position:absolute;inset:-20%;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,250,240,.55) 50%,rgba(255,255,255,0) 62%);
  transform:translateX(-70%)}
.room-sweep.go{animation:roomSweep .9s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes roomSweep{0%{opacity:0;transform:translateX(-70%)}20%{opacity:1}100%{opacity:0;transform:translateX(70%)}}
/* the tap: the frame rocks back on its easel and settles; the glare slides across the glass as it moves */
.room-group.is-nudge{animation:roomNudge .65s cubic-bezier(.3,.7,.25,1)}
.room-group.is-nudge .room-refl{transform:translate(-6px,3px)}
@keyframes roomNudge{0%{transform:none}28%{transform:scale(.982) rotate(-.7deg)}58%{transform:scale(1.006) rotate(.35deg)}100%{transform:none}}
.room-w.is-nudge{animation:roomSlide .65s cubic-bezier(.3,.7,.25,1)}
@keyframes roomSlide{0%{transform:none}35%{transform:translate(var(--sx,0),var(--sy,-12px))}70%{transform:translate(calc(var(--sx,0) * -.15),calc(var(--sy,-12px) * -.15))}100%{transform:none}}
.room-group.is-hover:not(.is-nudge){filter:brightness(1.05)}
.room-group.is-picking{filter:brightness(1.07) drop-shadow(0 0 18px rgba(255,214,150,.45))}
.room-hit{position:absolute;background:transparent;border:0;padding:0;margin:0;cursor:pointer;border-radius:10px;
  -webkit-tap-highlight-color:transparent}
.room-hit:focus-visible{outline:4px solid rgba(255,255,255,.85);outline-offset:4px}
.room-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0 2px}
.room-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
  border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;box-shadow:0 3px 10px rgba(40,26,10,.08);
  transition:transform .15s ease,box-shadow .15s ease}
.room-chip b{font-weight:800}
.room-chip span{color:var(--ink-soft)}
.room-chip:active{transform:scale(.97)}
.room-note{text-align:center;color:var(--ink-soft);font-size:13px;margin:6px 0 0}

/* the sheet */
.room-sheet-back{position:fixed;inset:0;z-index:60;background:rgba(20,17,14,0);transition:background .3s ease}
.room-sheet-back.on{background:rgba(20,17,14,.22)}
.room-sheet{position:fixed;z-index:61;left:0;right:0;bottom:0;margin:0 auto;max-width:560px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  border-radius:24px 24px 0 0;box-shadow:0 -12px 40px rgba(40,26,10,.25);
  padding:8px 16px calc(14px + env(safe-area-inset-bottom));transform:translateY(105%);
  transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.room-sheet.on{transform:none}
.room-grip{display:block;width:40px;height:5px;border-radius:5px;background:#d8cdbd;margin:2px auto 8px}
.room-sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.room-sheet-title{display:block;font-size:18px;letter-spacing:-.2px}
.room-sheet-sub{display:block;font-size:13px;color:var(--ink-soft)}
.room-done{border:0;border-radius:999px;padding:9px 18px;font:inherit;font-weight:700;color:#fff;background:var(--grad);cursor:pointer}
.room-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.room-strip::-webkit-scrollbar{display:none}
.room-opt{flex:0 0 auto;width:104px;scroll-snap-align:center;border:0;background:none;padding:0;cursor:pointer;font:inherit;text-align:center;color:var(--ink)}
.room-opt-pic{position:relative;width:100%;border-radius:12px;overflow:hidden;background:#ece3d5;
  box-shadow:0 4px 12px rgba(40,26,10,.16);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease;font-size:11px;color:var(--ink-soft);display:flex;align-items:center;justify-content:center}
.room-opt-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;border-radius:0}
.room-opt-name{display:block;font-size:12.5px;margin-top:6px;color:var(--ink-soft)}
.room-opt:active .room-opt-pic{transform:scale(.96)}
.room-opt.on .room-opt-pic{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--pink),0 8px 18px rgba(176,48,63,.3);transform:translateY(-2px)}
.room-opt.on .room-opt-name{color:var(--ink);font-weight:800}
.room-opt:focus-visible{outline:none}
.room-opt:focus-visible .room-opt-pic{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--violet)}
@media (min-width:700px){
  .room-sheet{bottom:24px;border-radius:24px}
  .room-opt{width:120px}
}
@media (prefers-reduced-motion:reduce){
  .room-group,.room-pic,.room-sheet,.room-refl{transition:none}
  .room-box.is-loading::after{animation:none}
}