/* ==========================================================================
   TURNitURE — layout is authored on a fixed 1920 x 1080 artboard (the same
   one the Reference PNGs were exported from) and scaled to fit the window,
   so the arrangement stays identical to the reference at any size.
   ========================================================================== */

:root{
  --c1: #00A698;   /* colour slot 1 — type, shapes, boxes */
  --c2: #6F5D00;   /* colour slot 2 — page background     */
  --fg: var(--c1);
  --bg: var(--c2);
  --on: #FFFFFF;   /* active tab                          */
  --k : 1;         /* artboard scale, set from app.js     */
}
/* the "Let's Make" step runs the palette the other way round, as in Tray_01 */
:root.is-flip{ --fg: var(--c2); --bg: var(--c1); }

*{ margin:0; padding:0; box-sizing:border-box; cursor:none; }

html,body{
  height:100%;
  background:var(--bg);
  transition: background-color .35s ease;
}

body{
  /* Avenir first: it is the family with real Black (900) and Heavy (800).
     Avenir Next stops at Heavy, so 900 there would silently fall back. */
  font-family:'Avenir','Avenir Next','Montserrat',system-ui,-apple-system,sans-serif;
  font-weight:900;
  letter-spacing:-.04em;                    /* -4% everywhere */
  color:var(--fg);
  overflow:hidden;
  cursor:none;
}
button{ font:inherit; color:inherit; background:none; border:0; }
a{ color:inherit; text-decoration:none; }

/* ══ the opening film ════════════════════════════════════════════════════════
   The main page is two screens deep: the film, and the title sequence one
   scroll below it (Reference/Main_Video). The film is laid against the window
   and not against the artboard — the stage is a fixed 1920 x 1080 box that
   letterboxes in a window of another shape, and the film is meant to meet
   every edge — so it is cropped to the window's own proportions instead. */
.hero{
  position:fixed; inset:0; z-index:0;
  overflow:hidden;
  background:var(--bg);
  opacity:0; visibility:hidden;
  transition: transform .78s cubic-bezier(.62,0,.2,1),
              opacity .4s ease, visibility 0s linear .4s;
}
:root.is-home .hero{
  opacity:1; visibility:visible;
  transition: transform .78s cubic-bezier(.62,0,.2,1),
              opacity .4s ease, visibility 0s;
}
.hero__v{
  display:block; width:100%; height:100%;
  object-fit:cover;                         /* fills whatever shape the window is */
}
/* scrolled down — the film leaves upwards and the type comes up after it */
:root.is-down .hero{ transform:translateY(-100%); }

.viewport{
  position:fixed; inset:0; z-index:1;       /* over the film */
  display:flex; align-items:center; justify-content:center;
}

.stage{
  position:relative;
  width:1920px; height:1080px;
  flex:0 0 auto;
  transform:scale(var(--k));
  transform-origin:center center;
}

/* ── header ─────────────────────────────────────────────────────────────── */

.logo{
  position:absolute; left:21px; top:19px; z-index:11;
  width:207px; height:30px;                 /* 369 x 54, then 20% and 30% off */
  display:block;
  color:var(--fg);
  transition: color .35s ease;
}
.logo svg{ display:block; width:100%; height:100%; }

/* 20% smaller than the reference; the baseline follows so the wordmark and
   the tabs still line up along the same optical band. */
.nav{
  position:absolute; right:22px; top:15px; z-index:11;
  display:flex; align-items:baseline; gap:27px;
}
.nav__pre{
  position:relative; top:-10px;
  font-size:17px; line-height:1; font-weight:500;
}
.nav__tab{
  font-size:40px; line-height:1; font-weight:900;
  transition: color .2s ease;
}
.nav__tab.is-on{ color:var(--on); }
/* while the box is sitting behind an item, that item reads as a cut-out */
.nav__tab.is-boxed, .logo.is-boxed{ color:var(--bg); }
.nav__tab.is-boxed.is-on{ color:var(--bg); }

/* ══ option bar box ══════════════════════════════════════════════════════════
   Nothing until you point at something. Then it appears where the pointer is,
   and from then on it slides to whatever you point at next, with enough
   overshoot to land with a bump. Clicking parks it. */
.navbox{
  position:absolute; left:0; top:0; z-index:10;
  background:var(--fg);
  opacity:0;
  transform-origin:center;
  pointer-events:none;
  transition: transform .34s cubic-bezier(.34,1.42,.44,1),
              width     .34s cubic-bezier(.34,1.42,.44,1),
              height    .34s cubic-bezier(.34,1.42,.44,1),
              opacity   .16s ease,
              background-color .35s ease;
}
.navbox.is-pop{                       /* first appearance — no sliding, just pop */
  transition: opacity .16s ease, transform .3s cubic-bezier(.3,1.5,.5,1),
              background-color .35s ease;
}
.navbox.is-on{ opacity:1; }

/* ── pages ──────────────────────────────────────────────────────────────── */

.page{ position:absolute; inset:0; display:none; }
.page.is-on{ display:block; }

/* The title sequence waits one screen below the film and rides up with it.
   Clipped top and bottom only — a line of type still tracks out past the
   artboard the way it always could. */
.page--home{ clip-path: inset(0 -2000px); }
.page--home .intro{
  transform:translateY(1080px);
  transition: transform .78s cubic-bezier(.62,0,.2,1);
}
:root.is-down .page--home .intro{ transform:translateY(0); }

/* the one hint that there is something under the film */
.scroller{
  position:absolute; left:50%; bottom:40px; z-index:12;
  width:48px; height:28px; margin-left:-24px;
  color:var(--fg);
  animation: nudge 2.1s ease-in-out infinite;
  transition: opacity .3s ease, visibility 0s linear .3s, color .35s ease;
}
.scroller svg{ display:block; width:100%; height:100%; }
:root.is-down .scroller{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes nudge{
  0%,100%{ transform:translateY(0);  opacity:.75 }
  50%    { transform:translateY(9px); opacity:1 }
}
@media (prefers-reduced-motion: reduce){ .scroller{ animation:none } }

/* main page — the looping title sequence (see intro.js).
   Type is set at the 메인_1 hero size, centred on the artboard. */
.intro{
  position:absolute; inset:0;
  font-size:251px; line-height:1; font-weight:900;
}
.intro__line{
  position:absolute; left:50%; top:50%;
  white-space:nowrap;
  opacity:0; visibility:hidden;
  transition: opacity .46s ease, visibility 0s linear .46s;
}
.intro__line.is-on{
  opacity:1; visibility:visible;
  transition: opacity .46s ease, visibility 0s;
}
/* a slight ease-up as each line arrives, so the hand-overs read as one move */
.intro__fx{
  display:block;
  transform:translate(-50%,-50%) scale(.975);
  transform-origin:center;
  transition: transform .62s cubic-bezier(.2,.8,.25,1);
}
.intro__line.is-on .intro__fx{ transform:translate(-50%,-50%) scale(1); }



/* The word is built from fixed-width cells so that re-dealing the typefaces
   swaps the glyph without the line jittering. intro.js keeps it centred by
   translating it half its own width, which is why this one is not -50%. */
#introWord .intro__fx{
  transform:translate(0,-50%) scale(.975);
}
#introWord.is-on .intro__fx{ transform:translate(0,-50%) scale(1); }
.word{ display:inline-block; transition: transform .16s ease-out, letter-spacing .16s ease-out; }
/* while a line tracks out to meet the next one's edges */
.word.is-stretch{ transition: transform .62s cubic-bezier(.4,0,.2,1), letter-spacing .62s cubic-bezier(.4,0,.2,1); }
#introTagline .intro__fx.is-stretch{ transition: transform .62s cubic-bezier(.2,.8,.25,1), letter-spacing .62s cubic-bezier(.4,0,.2,1); }
.is-instant{ transition:none !important; }
.word .ch{ display:inline-block; text-align:center; }

/* wider than "Turn It Yours" sets naturally, so the tagline has to track out
   to reach the wordmark's edges before it dissolves into it */
#introLogo .intro__fx{ width:1700px; color:var(--fg); }
#introLogo svg{ display:block; width:100%; height:auto; }

/* images / sounds page */
.picker__title{
  position:absolute; left:30px; top:203px;
  font-size:140px; line-height:1; font-weight:900;
  white-space:nowrap;
}

.arrow{
  position:absolute; top:679px;
  width:62px; height:62px; color:var(--fg);
  transition: opacity .25s ease;
}
.arrow--next{ left:1829px; }
.arrow--prev{ left:29px; transform:scaleX(-1); }   /* same glyph, mirrored */
.arrow.is-off{ opacity:0; pointer-events:none; }

/* ── the item row ───────────────────────────────────────────────────────────
   Four cells of 408px are visible at a time out of six. The window slides to
   whichever edge it is pinned to (left / centre / right) while the track
   inside it steps one cell per click, so the two move together.           */

.window{
  position:absolute; top:423px; left:22px;
  width:1632px; height:574px;                 /* exactly four 408px cells */
  overflow:hidden;
  transition: left var(--slide);
}
.page--picker[data-align="center"] .window{ left:144px; }
.page--picker[data-align="right"]  .window{ left:266px; }

.items{
  position:absolute; left:23.5px; top:0;      /* centres cell 0 on x = 226 */
  transform:translateX(calc(var(--pos, 0) * -408px));
  transition: transform var(--slide);
}

:root{ --slide: .52s cubic-bezier(.34,1.28,.4,1); }   /* snappy, slight overshoot */

.item{
  position:absolute; top:0; left:calc(var(--i) * 408px);
  width:361px; height:574px;
}

/* the box that grows out of the centre on hover */
.item__box{
  position:absolute; inset:0;
  background:var(--fg);
  opacity:0;
  transform:scale(.72);
  transition: transform .34s cubic-bezier(.22,.9,.3,1), opacity .22s ease,
              background-color .35s ease;
}
.item.is-hot .item__box{ opacity:1; transform:scale(1); }

.item__shape{
  position:absolute; left:0; right:0; bottom:209px; height:0;
}
.item__shape svg{
  display:block; position:absolute; left:50%; bottom:calc(0px - var(--dy, 0px));
  transform:translateX(-50%);
}
.item__shape svg path{ transition: fill .35s ease; }
.item__shape .s-rest { fill:var(--fg); transition: opacity .18s ease, fill .35s ease; }
.item__shape .s-hover{ fill:var(--bg); opacity:0; transition: opacity .18s ease .06s, fill .35s ease; }
.item.is-hot .s-rest { opacity:0; }
.item.is-hot .s-hover{ opacity:1; }

.item__label{
  position:absolute; left:0; right:0; top:404px;
  text-align:center;
  font-size:61px; line-height:1; font-weight:900;
  transition: color .2s ease;
}
.item__size{
  position:absolute; left:0; right:0; top:464px;
  text-align:center;
  font-size:44px; line-height:1; font-weight:800;   /* Heavy */
  color:var(--bg);
  opacity:0;
  transition: opacity .2s ease, color .35s ease;
}
.item.is-hot .item__label{ color:var(--bg); }
.item.is-hot .item__size { opacity:1; }

/* ── colour panel ───────────────────────────────────────────────────────── */

.colors{
  position:absolute; inset:0;
  pointer-events:none;          /* only the swatches themselves are clickable */
  visibility:hidden;
}
.colors.is-open{ visibility:visible; }
.colors.is-open .swatch,
.colors.is-open .colors__close{ pointer-events:auto; }

/* The list is anchored on the CENTRE of the first chip (1794, 130); every
   hit target is a 58px circle around that centre, while the chip you see
   stays 46px. 60px pitch - 58px target = 2px, so they never overlap.
   Fourteen colours at the old 100px pitch would have run off the artboard. */
.colors__list{ position:absolute; left:1794px; top:130px; }

.swatch{
  position:absolute; left:-29px;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  opacity:0; transform:translateY(-26px);
  transition: opacity .28s ease, transform .34s cubic-bezier(.22,.9,.3,1);
}
.colors.is-open .swatch{ opacity:1; transform:translateY(0); }

.swatch__chip{
  position:relative;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  font-size:17px; font-weight:600; color:#FFFFFF;
}
.swatch.is-picked .swatch__chip::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:rgba(0,0,0,.3);
}
.swatch__n{ position:relative; z-index:1; opacity:0; transition:opacity .18s ease; }
.swatch.is-picked .swatch__n{ opacity:1; }

.colors__close{
  position:absolute; left:1765px; top:956px;
  width:58px; height:58px;
  display:grid; place-items:center;
  opacity:0; transform:translateY(-26px);
  transition: opacity .28s ease .32s, transform .34s cubic-bezier(.22,.9,.3,1) .32s;
}
.colors.is-open .colors__close{ opacity:1; transform:translateY(0); }

/* ── 05: progressive blur behind the chips ───────────────────────────────
   Six stacked backdrop layers. Each one blurs a little harder and is masked
   to a band a little further right, so the blur ramps up from nothing on the
   left edge of the strip to its full strength on the right. */
.colors__blur{
  position:absolute; right:0; top:100px; bottom:0; width:470px;
  opacity:0; transition:opacity .3s ease;
}
.colors.is-open .colors__blur{ opacity:1; }
.colors__blur > div{ position:absolute; inset:0; }

/* --blur-max is the strength at the right edge; the layers below are fixed
   fractions of it, so this one value tunes the whole ramp. */
.colors__blur{ --blur-max:28px; }

.colors__blur > div:nth-child(1){ backdrop-filter:blur(calc(var(--blur-max) / 28));
  -webkit-mask-image:linear-gradient(to right, transparent 0%,  #000 16%, #000 33%, transparent 50%);
          mask-image:linear-gradient(to right, transparent 0%,  #000 16%, #000 33%, transparent 50%); }
.colors__blur > div:nth-child(2){ backdrop-filter:blur(calc(var(--blur-max) / 14));
  -webkit-mask-image:linear-gradient(to right, transparent 16%, #000 33%, #000 50%, transparent 66%);
          mask-image:linear-gradient(to right, transparent 16%, #000 33%, #000 50%, transparent 66%); }
.colors__blur > div:nth-child(3){ backdrop-filter:blur(calc(var(--blur-max) / 7));
  -webkit-mask-image:linear-gradient(to right, transparent 33%, #000 50%, #000 66%, transparent 83%);
          mask-image:linear-gradient(to right, transparent 33%, #000 50%, #000 66%, transparent 83%); }
.colors__blur > div:nth-child(4){ backdrop-filter:blur(calc(var(--blur-max) / 3.5));
  -webkit-mask-image:linear-gradient(to right, transparent 50%, #000 66%, #000 83%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 50%, #000 66%, #000 83%, transparent 100%); }
.colors__blur > div:nth-child(5){ backdrop-filter:blur(calc(var(--blur-max) / 1.75));
  -webkit-mask-image:linear-gradient(to right, transparent 66%, #000 83%, #000 100%);
          mask-image:linear-gradient(to right, transparent 66%, #000 83%, #000 100%); }
.colors__blur > div:nth-child(6){ backdrop-filter:blur(var(--blur-max));
  -webkit-mask-image:linear-gradient(to right, transparent 83%, #000 100%);
          mask-image:linear-gradient(to right, transparent 83%, #000 100%); }

/* ── cursor ─────────────────────────────────────────────────────────────── */

.cursor{
  position:absolute; left:0; top:0;
  width:0; height:0;
  pointer-events:none;
  z-index:50;
  will-change: transform;
}
.cursor__dot{
  position:absolute; left:-17px; top:-17px;
  width:34px; height:34px; border-radius:50%;
  background:#FFFFFF;
  transition: transform .3s cubic-bezier(.22,.9,.3,1);
}
.cursor.is-small .cursor__dot{ transform:scale(.38); }


/* ══ make page ═══════════════════════════════════════════════════════════════
   Step 2 picks an input (drop a file, or use the camera / microphone), step 3
   shows what came out. Geometry is taken from Tray_01.png.                   */

.make__title{
  position:absolute; left:0; right:0; top:136px;
  text-align:center;
  font-size:140px; line-height:1; font-weight:900;
  white-space:nowrap;
}

.make__io{
  position:absolute; left:155px; top:337px;
  width:1568px; height:694px;          /* 694 + 180 + 694, as in Tray_01 */
  display:flex; align-items:center; justify-content:space-between;
}
.make__or{ font-size:52px; line-height:1; font-weight:900; }

.drop{
  position:relative;
  width:694px; height:694px;
  border:3px solid var(--fg);
  display:grid; place-items:center;
  overflow:hidden;
  transition: background-color .18s ease, color .18s ease;
}
.drop:hover, .drop.is-armed{ background:var(--fg); color:var(--bg); }
.drop__label{ font-size:52px; line-height:1; font-weight:900; position:relative; z-index:1; }
.drop__cam{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scaleX(-1);        /* mirrored, like a mirror */
  filter:grayscale(1) contrast(1.1);
}
.drop.is-busy{ pointer-events:none; }

.page--make.is-result .make__title{ display:none; }
.make__out{ position:absolute; inset:0; display:none; }
.make__out.is-on{ display:block; }
.make__io.is-off{ display:none; }

/* what went in, on the left — the photo cut into the bands each form came
   from, or the sound drawn as circles. Geometry from ImageConvert_1. */
.make__src{
  position:absolute; left:91px; top:205px;
  width:546px; height:709px;
}
/* and what came out, on the right */
.make__canvas{
  position:absolute; left:745px; top:205px;
  width:1125px; height:709px;
}

/* Scrubbing through a recording. A long take is hard to walk through a form
   at a time, so the bar lets you jump straight to a moment. */
.scrub{
  position:absolute; left:61px; top:976px;
  width:1270px; height:34px;
  touch-action:none;
}
.scrub[hidden]{ display:none; }
.scrub__track{
  position:absolute; left:0; right:0; top:13px; height:8px;
  border-radius:4px; background:var(--fg);
}
.scrub__knob{
  position:absolute; top:0; left:0; width:34px; height:34px;
  margin-left:-17px; border-radius:50%;
  background:var(--fg);
}

.make__btns{
  position:absolute; right:61px; top:947px;
  display:flex; align-items:center; gap:26px;
}
.rbtn{
  width:92px; height:92px; border-radius:46px;
  border:3px solid var(--fg); color:var(--fg);
  display:grid; place-items:center;
  font-size:38px; line-height:1; font-weight:900;
  transition: background-color .18s ease, color .18s ease, opacity .18s ease;
}
.rbtn[hidden]{ display:none; }          /* a sound has no flat view to show */
.rbtn svg{ width:100%; height:100%; display:block; fill:currentColor; }
.rbtn:hover, .rbtn.is-on{ background:var(--fg); color:var(--bg); }
.rbtn--cart{ width:260px; }
.rbtn--again{ width:72px; height:72px; border-radius:36px; opacity:.55; }
.rbtn[data-cart].is-added{ background:var(--fg); color:var(--bg); }

.i-pause{ display:none; }
.rbtn.is-on .i-play{ display:none; }
.rbtn.is-on .i-pause{ display:block; }

/* ══ option bar icons ═══════════════════════════════════════════════════════
   The wordmark-sized type sets the rhythm; the two icons sit on the same
   baseline at the end of it. The font-size is here only so the box behind
   them is padded like the one behind a word (see boxRect in app.js). */

/* Hung off the top of the row rather than off the baseline: an icon is taller
   above its own baseline than a capital is, and sharing the baseline pushed
   the whole option bar down by several px. */
.nav__icon{
  align-self:flex-start;
  position:relative;
  padding:4px 0;
  font-size:40px; line-height:0;
  color:var(--fg);
  transition: color .2s ease;
}
/* the icon's own height is what is set, not the button's — the padding is
   there to give the box behind it the same air a word gets */
.nav__icon svg{ display:block; width:auto; }
.nav__icon--profile{ margin-left:9px; top:-2px; }
.nav__icon--profile svg{ height:29px; }
.nav__icon--cart{ margin-left:-2px; top:-4px; }
.nav__icon--cart svg{ height:31px; }
.nav__icon.is-on{ color:var(--on); }
.nav__icon.is-boxed, .nav__icon.is-boxed.is-on{ color:var(--bg); }

/* ══ profile ════════════════════════════════════════════════════════════════
   Geometry from 01_Profile_01: a 307px circle centred on the artboard, three
   844px lines under it, and the two buttons. */

.avatar{
  position:absolute; left:807px; top:163px;
  width:307px; height:307px; border-radius:50%;
  background:var(--fg);
  display:grid; place-items:center;
  overflow:hidden;
  color:var(--bg);
  transition: background-color .35s ease, color .35s ease;
}
.avatar__glyph{ display:block; width:175px; }
.avatar__glyph svg{ display:block; width:100%; height:auto; }
/* the lens is a hole in the camera body, so it is stroked in the colour of
   the circle behind it rather than in the body's own ink */
.avatar__glyph circle{ stroke:var(--fg); transition:stroke .35s ease; }
.avatar__img,
.avatar__cam{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.avatar__cam{ transform:scaleX(-1); }        /* mirrored, like a mirror */
.avatar__hint{
  position:absolute; left:0; right:0; bottom:38px;
  text-align:center;
  font-size:40px; line-height:1; font-weight:900;
  color:var(--fg);
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.avatar.is-set{ background:var(--fg); }

/* which way — the camera now, or something already on the machine */
.pick{
  position:absolute; left:742px; top:494px; z-index:12;
  width:436px;
  display:flex; flex-direction:column; gap:10px;
}
.pick[hidden]{ display:none; }
.pick__b{
  height:74px; border-radius:37px;
  background:var(--fg); color:var(--bg);
  font-size:34px; line-height:1; font-weight:900;
  transition: background-color .35s ease, color .35s ease, opacity .18s ease;
}
.pick__b:hover{ opacity:.82; }

.pform{ position:absolute; left:539px; top:498px; width:844px; }

/* Empty is an outline with the label sitting in it; filled is solid, and both
   the label and what was typed read as cut-outs (01_Profile_02). */
.pfield{
  position:relative;
  display:grid; grid-template-columns:200px 1fr; align-items:center;
  height:96px; margin-bottom:18px;
  padding:0 50px;
  border:3px solid var(--fg); border-radius:48px;
  transition: background-color .22s ease, border-color .35s ease;
}
.pfield--tall{ height:177px; align-items:start; padding-top:34px; }
.pfield.is-on{ background:var(--fg); }

.pfield__k{
  font-size:39px; line-height:1; font-weight:900;
  color:var(--fg);
  transition: color .22s ease;
}
.pfield.is-on .pfield__k{ color:var(--bg); }

.pfield__v{
  font:inherit; font-size:49px; line-height:1.05; font-weight:900;
  color:var(--bg);
  background:none; border:0; outline:none;
  width:100%; min-width:0;
  opacity:0;
  transition: opacity .22s ease, color .35s ease;
}
.pfield.is-on .pfield__v,
.page--profile.is-editing .pfield__v{ opacity:1; }
/* while you are typing into a line that is still empty, the ink has to read
   against the page rather than against a fill that is not there yet */
.page--profile.is-editing .pfield:not(.is-on) .pfield__v{ color:var(--fg); }
.pfield__v:disabled{ -webkit-text-fill-color:currentColor; }
textarea.pfield__v{ resize:none; height:110px; }

.pbtns{
  position:absolute; left:778px; top:918px;
  display:flex; gap:19px;
}
.pbtn{
  width:174px; height:76px; border-radius:38px;
  border:3px solid var(--fg); color:var(--fg);
  font-size:52px; line-height:1; font-weight:900;
  transition: background-color .18s ease, color .18s ease;
}
.pbtn--fill,
.pbtn.is-on,
.pbtn:hover{ background:var(--fg); color:var(--bg); }
.pbtn--fill.is-saved{ opacity:.6; }

/* ══ cart ═══════════════════════════════════════════════════════════════════
   Four steps on one page, switched by data-step. */

.page--cart [data-cstep]{ display:none; }
.page--cart[data-step="1"] [data-cstep="1"],
.page--cart[data-step="2"] [data-cstep="23"],
.page--cart[data-step="3"] [data-cstep="23"],
.page--cart[data-step="4"] [data-cstep="4"]{ display:block; }
.page--cart[data-step="2"] [data-cform="3"],
.page--cart[data-step="3"] [data-cform="2"]{ display:none; }

.cart__title, .floor, .floor__empty{ display:none; }
.page--cart[data-step="1"] .cart__title,
.page--cart[data-step="1"] .floor{ display:block; }
.page--cart[data-step="1"] .floor__empty:not([hidden]){ display:block; }

.cart__title{
  position:absolute; left:22px; top:136px;
  font-size:107px; line-height:1; font-weight:900;
  white-space:nowrap;
}

/* ── the floor ─────────────────────────────────────────────────────────────
   Everything made so far, lying about on the left. Each one can be pushed
   anywhere inside this box and stays where it is left; the bill owns the
   right of the screen, so the box stops short of it. */
.floor{
  position:absolute; left:20px; top:238px;
  width:1185px; height:840px;
}
.floor__empty{
  position:absolute; left:22px; top:270px;
  font-size:44px; line-height:1; font-weight:800;
  opacity:.5;
}

.piece{
  position:absolute; width:360px;
  touch-action:none;
}
.piece.is-held{ z-index:3; }
.piece__cv{ display:block; width:360px; height:300px; }
.piece__row{
  display:flex; align-items:center; gap:18px;
  height:64px;
}
.piece__name{
  font-size:56px; line-height:1; font-weight:900;
  white-space:nowrap;
}
.piece__x{
  margin-left:auto;
  width:52px; height:52px; flex:0 0 auto;
  color:var(--fg);
  transition: opacity .18s ease;
}
.piece__x svg{ display:block; width:100%; height:100%; }
.piece__x:hover{ opacity:.6; }
.piece__price{
  font-size:50px; line-height:1; font-weight:900;
  margin-top:6px;
}

/* ── the bill paper ────────────────────────────────────────────────────────
   One corner is turned down: the sheet is cut away along the diagonal and the
   crease is drawn as a line down to where the cut meets the edge. */
.paper{ position:absolute; --fold:125px; --pad:56px; }

.paper__sheet{
  position:absolute; inset:0;
  background:var(--fg);
  clip-path:polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
  transition: background-color .35s ease;
}
.paper__fold{
  position:absolute; top:0; right:var(--fold);
  width:4px; height:var(--fold);
  background:var(--bg);
  transition: background-color .35s ease;
}
.paper__in{
  position:absolute; inset:0;
  color:var(--bg);
  transition: color .35s ease;
}

.paper--side{ left:1233px; top:264px; width:656px; height:816px; }
.paper--wide{ left:268px;  top:264px; width:1359px; height:816px; --fold:115px; --pad:51px; }
.paper--slip{ left:707px;  top:124px; width:481px;  height:854px; --fold:115px; --pad:69px; }

.paper__t{
  position:absolute; left:var(--pad); top:24px;
  font-size:50px; line-height:1; font-weight:900;
}
.paper__t--slip{ top:52px; font-size:55px; }

/* the dotted rules above and below the figures */
.rule{
  position:absolute; left:var(--pad); top:97px; height:0;
  width:calc(100% - var(--pad) - var(--fold) - 36px);
  border-top:3px dotted var(--bg);
}
/* the opened-out sheet runs its rule on under the turned corner */
.rule--wide{ width:calc(100% - var(--pad) - 42px); }
.rule--low{
  position:static; width:100%;
  margin:calc(38px * var(--bs)) 0 0; border-top:3px dotted var(--bg);
}

/* A long bill is written smaller rather than run past the buttons: --avail is
   how far down it may go, and checkout.js sets --bs to fit. */
.bill{
  position:absolute; left:var(--pad); top:240px;
  width:calc(100% - var(--pad) * 2);
  --bs:1; --avail:300px;
}
.bill--wide{ width:480px; --avail:520px; }

.bill__row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; margin-bottom:calc(28px * var(--bs));
}
.bill__k{ font-size:calc(44px * var(--bs)); line-height:1; font-weight:900; white-space:nowrap; }
.bill__v{ font-size:calc(33px * var(--bs)); line-height:1; font-weight:900; white-space:nowrap; }
.bill__row--total{ margin-bottom:0; }
.bill__row--total .bill__k,
.bill__row--total .bill__v{ font-size:calc(54px * var(--bs)); }

.bill__tag{
  display:flex; align-items:center; justify-content:flex-end; gap:14px;
  margin-top:calc(36px * var(--bs));
  font-size:calc(36px * var(--bs)); line-height:1; font-weight:900;
}
.bill__tag[hidden]{ display:none; }
.bill__tagi{ display:block; width:calc(30px * var(--bs)); }
.bill__tagi svg{ display:block; width:100%; height:auto; }

/* Buy, and the two round ones beside it */
.paper__btns{
  position:absolute; right:58px; bottom:172px;
  display:flex; align-items:center; gap:17px;
}
.pill{
  height:76px; padding:0 40px; min-width:174px;
  border-radius:38px;
  background:var(--bg); color:var(--fg);
  font-size:46px; line-height:1; font-weight:900;
  transition: background-color .35s ease, color .35s ease, opacity .18s ease;
}
.pill:hover{ opacity:.82; }
.pill--wide{ width:100%; padding:0; }
.rnd{
  width:74px; height:74px; border-radius:50%;
  border:3px solid var(--bg); color:var(--bg);
  display:grid; place-items:center;
  transition: border-color .35s ease, color .35s ease, background-color .18s ease;
}
.rnd svg{ display:block; height:38px; width:auto; }
.rnd:hover{ background:rgba(0,0,0,.12); }

/* ── the forms on the opened-out sheet ─────────────────────────────────── */

.cform{
  position:absolute; left:592px; top:240px; width:651px;
  display:flex; flex-direction:column; gap:15px;
}
.crow{ display:flex; gap:18px; }
.crow--3{ gap:16px; }
.crow > *{ flex:1 1 0; min-width:0; }

.cin, .csel{
  height:62px; border-radius:31px;
  border:3px solid var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: border-color .35s ease;
}
.cin{
  font:inherit; font-size:30px; font-weight:900;
  color:var(--bg); background:none; outline:none;
  text-align:center;
  padding:0 20px;
}
.cin::placeholder{ color:var(--bg); opacity:1; }

/* a select has to keep its own arrow — the chevron is drawn on the wrapper */
.csel{ position:relative; }
.csel select{
  appearance:none; -webkit-appearance:none;
  font:inherit; font-size:30px; font-weight:900;
  color:var(--bg); background:none; border:0; outline:none;
  width:100%; height:100%;
  text-align:center; text-align-last:center;
  padding:0 34px 0 14px;
}
.csel select option{ color:#111; }
.csel::after{
  content:''; position:absolute; right:22px; top:calc(50% - 7px);
  width:13px; height:13px;
  border-right:4px solid var(--bg); border-bottom:4px solid var(--bg);
  transform:rotate(45deg);
  pointer-events:none;
}

.ccheck{
  display:flex; align-items:center; gap:14px;
  margin-top:7px;
  font-size:36px; line-height:1; font-weight:900;
}
.ccheck input{ position:absolute; opacity:0; width:0; height:0; }
.ccheck__b{
  width:40px; height:40px; flex:0 0 auto;
  border:4px solid var(--bg);
  transition: background-color .18s ease, border-color .35s ease;
}
.ccheck input:checked + .ccheck__b{ background:var(--bg); }

.cform .pill{ margin-top:5px; }

/* ── the receipt ───────────────────────────────────────────────────────────
   Everything bought, drawn on the paper itself, which then takes it away. */
.slip__items{
  position:absolute; left:var(--pad); top:194px; right:var(--pad);
  display:flex; flex-direction:column; gap:94px;
}
.slip__cv{ display:block; width:343px; height:233px; }

.paper--slip{
  transition: transform .95s cubic-bezier(.45,0,.7,.2), opacity .95s ease;
}
.page--cart.is-away .paper--slip{
  transform:translateY(-170%) rotate(-4deg);
  opacity:0;
}