@font-face{font-family:"Noto Sans TC";src:url("assets/story-font.ttf") format("truetype");font-weight:100 900;font-display:swap}
:root{--ink:#31251b;--cream:#fff5df;font-family:"Noto Sans TC","PingFang TC",sans-serif;color-scheme:light}*{box-sizing:border-box}html{overflow-anchor:none;scroll-behavior:auto;scrollbar-color:#8c6951 #f4e9d9}body{margin:0;color:var(--ink);background:#e6b8b5}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:5px}button:focus-visible,a:focus-visible{outline:3px solid #6a3b22;outline-offset:6px}::selection{background:#f3a739;color:#31251b}.skip{position:fixed;z-index:99;top:-100px;left:20px;background:white;padding:12px}.skip:focus{top:20px}header{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:flex-start;justify-content:space-between;padding:29px 42px;pointer-events:none}header button{pointer-events:auto}.wordmark{position:relative;padding:0 36px 0 0;font-size:24px;font-weight:850;line-height:1.05;text-align:left;letter-spacing:-.035em}.wordmark span{display:block}.wordmark svg{position:absolute;right:0;bottom:3px;width:28px;height:33px;color:#aa4a20}.tools{display:flex;gap:27px;font-size:12px;font-weight:650}.tools button{padding:8px 0;border-bottom:1px solid}#stage{position:fixed;inset:0;isolation:isolate;overflow:hidden;background:#e6b8b5}#world{position:absolute;left:50%;top:50%;width:1440px;height:900px;transform-origin:center;pointer-events:none}#floor{position:absolute;top:77%;left:0;right:0;height:40%;filter:brightness(.92);border-top:4px solid #73543a22}.sprite,.shape{position:absolute;transform-origin:center;will-change:transform}.sprite{overflow:hidden;isolation:isolate}.sprite img{position:absolute;max-width:none;object-fit:fill;pointer-events:none;user-select:none}.crate-front{clip-path:inset(38% 0 0 0)}.table-front{clip-path:inset(14% 0 0 0)}.cargo{border:8px solid #f3e6c8;border-radius:8px;background:#5b5447;box-shadow:inset 0 5px 12px #0002}.conveyor{position:absolute;height:50px;border:7px solid #655b4c;border-radius:22px;background:repeating-linear-gradient(90deg,#8f9d9d 0 16px,#cbd2ca 16px 25px);z-index:7}.conveyor:before,.conveyor:after{content:"";position:absolute;top:40px;width:15px;height:105px;background:#655b4c}.conveyor:before{left:50px}.conveyor:after{right:50px}.community-table{position:absolute;height:45px;background:#be8750;border-radius:7px;z-index:7}.community-table:before,.community-table:after{content:"";position:absolute;top:40px;width:24px;height:175px;background:#956536}.community-table:before{left:55px}.community-table:after{right:55px}#narrative,#metrics{position:absolute;inset:0;pointer-events:none;z-index:20}#metrics{z-index:22}.copy{position:absolute;visibility:hidden;pointer-events:none;max-width:610px}.copy.active{visibility:visible;pointer-events:auto}.copy h1,.copy h2{font-size:clamp(38px,4.2vw,62px);line-height:1.22;letter-spacing:-.04em;font-weight:850;margin:0 0 20px;text-wrap:balance}.copy p{font-size:clamp(15px,1.28vw,19px);line-height:1.85;margin:0;text-wrap:pretty}.metric{position:absolute;visibility:hidden;pointer-events:none;transform:scale(var(--reveal,1));transform-origin:center}.metric.active{visibility:visible;pointer-events:auto}.figure{display:flex;align-items:baseline;gap:12px;white-space:nowrap;line-height:1.05;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.count{font-size:clamp(100px,12vw,180px);font-weight:850;line-height:1.05;display:block}.prefix{font-size:24px;font-weight:700;letter-spacing:0}.metric-unit{font-size:clamp(22px,2.15vw,33px);font-weight:750;letter-spacing:-.015em;margin:10px 0 12px;line-height:1.5}.exact{font-size:14px;line-height:1.75;margin:0}.metric-note{font-size:12px;line-height:1.7;margin:5px 0 0}.closing-actions{display:flex;gap:28px;margin-top:26px}.closing-actions a,.closing-actions button{font-size:16px;font-weight:650;border-bottom:1px solid;padding:10px 0;text-decoration:none}.scroll-cue{position:absolute;z-index:24;left:7%;bottom:13%;display:flex;gap:18px;align-items:flex-start;font-size:13px;font-weight:650}.scroll-cue svg{width:46px;height:53px;margin-top:-3px}#copy-0{left:7%;top:24%;width:46%}#copy-1{left:55%;top:19%;width:40%}#metric-1{left:55%;top:45%;width:42%}#copy-2{left:8%;top:19%;width:44%}#metric-2{left:8%;top:46%;width:47%}#copy-3{left:57%;top:18%;width:39%}#metric-3{left:8%;top:22%;width:43%;background:#fff7e5;padding:22px 27px 25px;box-shadow:0 9px 24px #4f4b3020;border-radius:4px}#metric-3 .count{font-size:clamp(95px,10.5vw,155px)}#copy-4{left:7%;top:19%;width:45%}#metric-4{left:61%;top:18%;width:34%;padding:20px 25px;background:#fff7e5;border:2px solid #bd9a6d;border-radius:4px}#copy-5{left:7%;top:19%;width:46%}#metric-5{left:7%;top:47%;width:46%}#copy-6{left:53%;top:27%;width:43%}
#scroll-space{height:1100vh}footer{position:fixed;inset:auto 0 0;height:62px;z-index:41;display:flex;align-items:center;justify-content:flex-end;gap:20px;background:#fff5df;color:#31251b;padding-inline:42px;pointer-events:none}footer button{pointer-events:auto}.concept-label{font-size:10px;margin-right:auto}#chapters{display:flex;gap:2px}#chapters button{padding:10px;display:grid;place-items:center}#chapters button:before{content:"";width:6px;height:6px;border:1px solid currentColor;border-radius:50%;opacity:.7}#chapters button[aria-current="step"]:before{background:currentColor;opacity:1;transform:scale(1.5)}#chapter-name{font-size:12px;min-width:34px}#next{width:34px;height:34px;border-radius:50%;background:#31251b;color:#fff5df;padding:7px}#next svg{width:100%}.progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#31251b11}#progress{display:block;height:100%;width:100%;background:#ae5a28;transform:scaleX(0);transform-origin:left}dialog{max-width:620px;width:calc(100% - 40px);max-height:85svh;overflow:auto;padding:32px;border:0;background:#fff8e8;color:#31251b;border-radius:6px;box-shadow:0 15px 70px #182d3c44}dialog::backdrop{background:#182d3c88}dialog h2{font-size:26px;line-height:1.5;margin:30px 0 25px}dialog p{font-size:14px;line-height:1.8;margin:22px 0}#close-sources{float:right;font-size:13px;padding:5px}dialog dl>div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid #8067502e}dialog dt{font-size:14px}dialog dd{font-size:16px;font-weight:650;margin:0}.report-link{display:inline-block;font-weight:650;margin:10px 0 20px}#reading{position:relative;background:white;padding:120px 24px 90px;min-height:100vh}#reading article{max-width:780px;margin:auto;padding:40px 0 65px;border-bottom:1px solid #e5dfd4}#reading h1,#reading h2{font-size:35px;line-height:1.3;letter-spacing:-.03em}#reading article>p{font-size:19px;line-height:1.9}.reading-metric{margin-top:30px}.reading-metric .count{font-size:70px}.reading-metric .metric-unit{font-size:24px}.reading-mode header{background:white}.reading-mode footer,.reading-mode #stage,.reading-mode #scroll-space{display:none}.no-js{position:relative;z-index:50;background:white;max-width:700px;padding:35px;margin:130px auto 0;line-height:1.8}
@media(max-width:759px){header{padding:20px 24px}.wordmark{font-size:21px;padding-right:29px}.wordmark svg{width:23px;height:27px}.tools{gap:15px;font-size:11px}.tools button{padding-top:2px}#world{top:calc(50% + 40px);width:760px;height:1200px;clip-path:inset(550px 0 0 0)}#floor{top:74%}.copy h1,.copy h2{font-size:35px;line-height:1.22;margin-bottom:12px}.copy p{font-size:13px;line-height:1.75}.copy{max-width:none!important;width:84%!important;left:8%!important;top:14%!important}#copy-1{text-align:right}#copy-3{text-align:center}#copy-6{text-align:center;top:17%!important}.metric{width:84%!important;top:36%!important;background:transparent!important;padding:0!important;box-shadow:none!important;border:0!important;border-radius:0!important}#metric-1{left:8%!important;text-align:left}#metric-2{left:8%!important;text-align:right}#metric-3{left:8%!important;text-align:left}#metric-4{left:8%!important;text-align:right}#metric-5{left:8%!important;text-align:center}.figure{gap:8px}.count,#metric-3 .count{font-size:82px;line-height:1}.prefix{font-size:17px}#metric-2 .figure,#metric-4 .figure{justify-content:flex-end}#metric-5 .figure{justify-content:center}.metric-unit{font-size:17px;line-height:1.4;margin:6px 0 6px}.exact{font-size:10px;line-height:1.5}.metric-note{font-size:10px;line-height:1.5;margin-top:3px}.closing-actions{gap:24px;margin-top:18px;justify-content:center}.closing-actions a,.closing-actions button{font-size:14px;padding-block:8px}.scroll-cue{font-size:11px;bottom:11%;gap:7px;left:8%}.scroll-cue svg{width:35px;height:40px}footer{height:54px;padding-inline:20px;gap:10px}.concept-label{font-size:9px}#chapters{gap:0}#chapters button{padding:7px}#chapter-name{display:none}#next{width:28px;height:28px}dialog{padding:25px}dialog dt{font-size:12px}dialog dd{font-size:14px}#reading{padding-top:90px}#reading h1,#reading h2{font-size:28px}.reading-metric .count{font-size:60px}#reading article>p{font-size:17px}}
@media(max-width:359px){.copy h1,.copy h2{font-size:30px}.copy p{font-size:12px}.count,#metric-3 .count{font-size:72px}.metric{top:35%!important}.metric-unit{font-size:15px}.exact,.metric-note{font-size:9px}.wordmark{font-size:18px}.tools{font-size:10px;gap:12px}}
@media(max-height:650px) and (min-width:760px){.copy h1,.copy h2{font-size:34px;margin-bottom:12px}.copy p{font-size:14px}.count{font-size:105px}#metric-3 .count{font-size:95px}.metric-unit{font-size:21px;margin:6px 0}.exact{font-size:11px}.metric-note{font-size:10px}#metric-1,#metric-2,#metric-5{top:48%}header{padding-block:18px}footer{height:48px}}
@media(max-width:759px){.exact,.metric-note{font-size:11px}.concept-label{font-size:10px}}
@media(max-width:359px){.tools{font-size:11px}.exact,.metric-note{font-size:11px}}

@media(min-width:760px){#metric-3{left:7%;width:37%}#metric-4{left:70%;top:17%;width:27%}#metric-4 .metric-unit{font-size:26px}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:759px){#chapters button{min-width:24px;min-height:24px;padding:9px}footer{gap:8px}}
@media(min-width:760px){#metric-4{top:13.5%}}
@media(min-width:760px) and (max-width:1100px){#metric-4{padding:14px 16px}#metric-4 .metric-unit{font-size:20px}#metric-4 .exact{font-size:12px}#metric-4 .metric-note{font-size:11px}}

/* Shorter, direct Chinese copy: keep a clear gap above the rescue figure. */
@media(min-width:760px) and (min-height:651px){#metric-1{top:48%}}

/* Each location has its own surfaces and the props remain independently scrollable. */
#floor {
  top: 70%;
  border: 0;
  filter: none;
  background-image: var(--floor-pattern);
  background-blend-mode: multiply;
  transition: top .16s ease-out;
}
#stage[data-location="shop"] {
  --floor-pattern: repeating-linear-gradient(90deg,#86513927 0 2px,transparent 2px 144px);
}
#stage[data-location="receive"] {
  --floor-pattern: repeating-linear-gradient(90deg,#8c6e4d33 0 2px,transparent 2px 102px),repeating-linear-gradient(0deg,#8c6e4d33 0 2px,transparent 2px 88px);
}
#stage[data-location="market"] {
  --floor-pattern: repeating-linear-gradient(90deg,#9e82583c 0 2px,transparent 2px 116px);
}
#stage[data-location="warehouse"] {
  --floor-pattern: linear-gradient(90deg,transparent 11%,#cfa347 11% 12%,transparent 12% 84%,#cfa347 84% 85%,transparent 85%);
}
#stage[data-location="loading"] {
  --floor-pattern: repeating-linear-gradient(90deg,#374c46 0 5%,#e2c35b 5% 8%,#374c46 8% 13%);
}
#stage[data-location="centre"],
#stage[data-location="table"] {
  --floor-pattern: repeating-linear-gradient(0deg,#996a412d 0 2px,transparent 2px 29px);
}
#stage #floor {background-image:var(--floor-pattern);background-color:var(--floor-color,#d6bb98)}
#stage[data-location="loading"] #floor {top:76%;background-size:100% 10px;background-repeat:no-repeat}
#stage[data-location="table"] #floor {top:75%}
.transfer-jamb {
  background:linear-gradient(90deg,#5c4636,#a58766 15% 42%,#ead7b5 43% 57%,#92745a 58% 91%,#5c4636);
  box-shadow:8px 0 20px #362c2638;
}
.food-sleeve {
  border:2px solid #fff9eabf;
  border-top:9px double #fff9eac7;
  border-bottom:5px double #edf6f4ac;
  border-radius:9% 7% 13% 11%;
  background:linear-gradient(122deg,#fff9e954 0 12%,#fff9e911 18% 60%,#f5fff16b 65% 70%,#e9fff018 75%);
  box-shadow:inset 0 -6px 8px #405e5a22;
}
.delivery-back {
  background:linear-gradient(155deg,#64877d,#406459);
  border:4px solid #365e53;
  border-radius:9px 9px 6px 6px;
}
.delivery-front {
  background:repeating-linear-gradient(0deg,#7eaa99 0 11px,#6c9987 12px 14px);
  border:4px solid #456f61;
  border-radius:4px 4px 9px 9px;
  box-shadow:inset 0 7px #a8c8b8,inset 0 -7px #487668,0 6px 7px #0002;
}
.delivery-front::after {
  content:"";
  position:absolute;
  left:38%;top:25%;
  width:24%;height:23%;
  border-radius:4px;
  background:#385f53;
}
.delivery-lid {
  background:linear-gradient(#b0cbbd 0 22%,#6c9e8a 24% 78%,#456f61 80%);
  border:3px solid #456f61;
  border-radius:6px 6px 4px 4px;
}
.metric-unit {display:flex;align-items:center;gap:.55em}
.metric-icon {flex:none;width:1.2em;height:1.2em}
#metric-1 .count,#metric-5 .count {font-family:Georgia,"Noto Sans TC",serif;font-weight:700}
#metric-2 .count {font-family:"Avenir Next Condensed","Arial Narrow","Noto Sans TC",sans-serif}
#metric-3 .metric-unit {font-family:"Kaiti TC","Noto Sans TC",serif}
#copy-4 h2,#copy-6 h2 {font-family:"Songti TC","Noto Sans TC",serif;font-weight:800}
#copy-4 h2 {font-size:clamp(36px,3.5vw,52px)}
#metric-1 {left:59%;top:26%;width:35%}
#metric-2 {top:26%;width:40%}
#metric-2 .metric-unit {font-size:clamp(17px,1.7vw,26px)}
#metric-3 {top:18%;width:min(37%,515px);background:#f4efda;border:1px solid #7b79534a}
#metric-4 {top:17%;color:#294a41;background:#f1f2dd;border-color:#749181}
#metric-4 .count {font-size:clamp(67px,7.7vw,108px)}
#metric-5 {top:24%}
@media(max-width:759px){
  #stage #floor {top:73%}
  #copy-4 h2 {font-size:32px}
  #metric-1,#metric-2,#metric-3,#metric-5 {top:21%!important}
  #metric-4 {top:36%!important}
  #metric-4 .count {font-size:60px}
  #metric-2 .metric-unit {font-size:16px}
  #metric-2 .metric-unit,#metric-4 .metric-unit {justify-content:flex-end}
  #metric-5 .metric-unit {justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  #floor {transition:none}
}

#stage #floor {background-color:color-mix(in srgb,var(--floor-color) 88%,#694f39)}

.shop-name {
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff5df;
  color:#483529;
  font-size:22px;
  font-weight:750;
  letter-spacing:.06em;
}
#copy-0 {top:15%;width:70%}
#metric-1 {top:44%}
@media(max-width:759px){
  #copy-1 h2 {font-size:clamp(25px,7.4vw,35px)}
  #copy-1 p {display:none}
  #metric-1 {top:32%!important}
}

@media(max-width:759px){
  #start {top:47%;bottom:auto}
}

.shop-name {
  border-radius:3px;
  border:2px solid #8e6240;
  background:#f0d7a6;
  color:#513622;
  box-shadow:0 3px #614a3344;
}
.shop-name::before,.shop-name::after {
  content:"";position:absolute;top:45%;width:3px;height:3px;border-radius:50%;background:#79553a;
}
.shop-name::before {left:8px}
.shop-name::after {right:8px}
#produce-stall-name {background:#d9dfb4;border-color:#72774c;color:#3f5032}
#restaurant-name {background:#426b64;border-color:#294e48;color:#fff3d8}
.extra-shop-left {filter:saturate(.77)}
.extra-shop-right {filter:hue-rotate(-24deg) saturate(.72)}
#metric-2 {top:18%}
#metric-2 .count {font-family:"Noto Sans TC","PingFang TC",sans-serif}
#metric-3 {
  background:#f4efda;
  border:8px solid #775d41;
  border-radius:7px;
  box-shadow:inset 0 0 0 1px #b9a388,0 7px 12px #57462f29;
}
#metric-3::before,#metric-3::after {
  content:"";position:absolute;top:11px;width:8px;height:8px;border-radius:50%;background:#876a4b;
}
#metric-3::before {left:11px}
#metric-3::after {right:11px}
#metric-3 .metric-unit {font-family:inherit}
.delivery-route {
  background:repeating-linear-gradient(90deg,#e7f2de 0 12px,#4c7b69 12px 26px);
  border-radius:3px;
}
.delivery-stop.east,.delivery-van.east {filter:hue-rotate(24deg) saturate(.85)}
.delivery-stop.south,.delivery-van.south {filter:hue-rotate(-21deg) saturate(.78)}
@media(min-width:760px) and (min-height:651px){
  #metric-3 {top:13%;width:35%}
}
@media(max-width:759px){
  #metric-3 {
    width:84%!important;
    background:#f4efda!important;
    border:4px solid #775d41!important;
    border-radius:6px!important;
    padding:9px 15px 12px!important;
  }
  #metric-3 .count {font-size:clamp(56px,18vw,76px)}
}

@media(min-width:760px) and (min-height:651px){
  #metric-2 {top:14%}
  #metric-3 {top:10.5%}
}

.delivery-route {
  border:2px solid #63706c;
  border-radius:20px;
  background:#465550;
  box-shadow:0 2px #2c413847;
}
.delivery-route::after {
  content:"";
  position:absolute;
  left:3%;right:3%;top:calc(50% - 1px);
  height:2px;
  background:repeating-linear-gradient(90deg,#ebdba5 0 13px,transparent 13px 26px);
}

.food-sleeve[data-bag="open"] {
  border-top:2px solid #f7fff4c9;
  border-left-color:transparent;
  border-radius:5% 22% 20% 6%;
}
.food-sleeve[data-bag="open"]::before {
  content:"";
  position:absolute;
  left:-8px;top:-2px;bottom:-2px;width:21px;
  border:2px solid #fff9eae8;
  border-radius:50%;
  box-shadow:inset 2px 0 #79978a66;
}
.closing-actions {flex-wrap:wrap;gap:12px 24px}
.closing-actions a {
  padding:8px 13px;
  border:1px solid #77553b;
  border-radius:4px;
  background:#fff5df;
}
.closing-actions .restart {font-size:.8em}

.warehouse-facade {
  border-top:9px solid #778580;
  border-radius:8px 8px 2px 2px;
  background:repeating-linear-gradient(0deg,#c0c9bc 0 15px,#aebbae 15px 17px);
}
.warehouse-facade.east {background:repeating-linear-gradient(0deg,#dbcc9d 0 15px,#c9ba8e 15px 17px)}
.warehouse-facade.south {background:repeating-linear-gradient(0deg,#cbb2a3 0 15px,#bfa89b 15px 17px)}

.warehouse-aisle {
  border:1px solid #71856a48;
  border-bottom:4px solid #7889688a;
  border-radius:4px;
  background:linear-gradient(#a3b59455,#8ca28275);
  clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);
}
.rear-rack {filter:saturate(.76)}

/* Live text sits on objects with different silhouettes, materials and scroll actions. */
.scene-item {
  --prop-open:1;
  --surface:#fff5df;
  background:var(--surface);
  color:var(--ink);
}
.copy.scene-item {padding:22px 27px}
.copy.scene-item h1,.copy.scene-item h2 {
  font-size:clamp(28px,3.15vw,47px);
  margin:0 0 10px;
  text-wrap:pretty;
}
.copy.scene-item p {font-size:clamp(14px,1.18vw,17px);line-height:1.65}
.scene-metric-inline#metric-1,.scene-metric-inline#metric-4 {
  position:static;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  transform:none;
  color:inherit;
}
.scene-metric-inline .count {font-size:clamp(64px,8vw,115px)}
.scene-metric-inline .metric-unit {margin:0;font-size:clamp(17px,1.65vw,24px)}
/* Painted hanging shop sign. */
#copy-0 {
  --surface:#694733;
  top:18%;
  width:min(46%,600px);
  color:#fff2d8;
  border:4px solid #a9784d;
  border-radius:2px 2px 19px 19px;
  box-shadow:0 8px 0 #44302350,inset 0 -7px #492e232d;
}
#copy-0::before {
  content:"";
  position:absolute;
  top:-43px;left:17%;right:17%;height:40px;
  border-left:3px solid #775d46;
  border-right:3px solid #775d46;
  pointer-events:none;
}
#start {
  padding:9px 12px;
  background:#e4c393;
  border:2px solid #886542;
  border-radius:3px;
  box-shadow:0 3px #6448293a;
  align-items:center;
}
#start svg {width:24px;height:26px;margin:0}
/* Receipt emerges from a dark printer slot. */
#copy-1 {
  --surface:#fff4d9;
  top:14%;left:55%;width:38%;
  padding:21px 24px 25px;
  border-top:15px solid #50483a;
  border-radius:8px 8px 0 0;
  clip-path:inset(0 -5px calc((1 - var(--prop-open)) * 100%) -5px);
}
#copy-1::before {
  content:"";
  position:absolute;
  left:10px;right:10px;top:-9px;height:3px;
  border-radius:9px;
  background:#221e19;
}
#copy-1::after {
  content:"";
  position:absolute;
  bottom:-1px;left:0;right:0;height:9px;
  background:linear-gradient(135deg,transparent 52%,#f7ddad 53%) 0 0/14px 10px,
             linear-gradient(225deg,transparent 52%,#f7ddad 53%) 0 0/14px 10px;
}
/* Fabric banner drops over the merchant street. */
#metric-2 {
  --surface:#934730;
  top:13%;
  width:min(36%,490px);
  padding:12px 26px 29px;
  border:0;
  border-top:8px solid #6d3828;
  color:#fff2d7;
  clip-path:polygon(0 0,100% 0,100% calc(var(--prop-open) * 100%),50% calc(var(--prop-open) * 94%),0 calc(var(--prop-open) * 100%));
  background:linear-gradient(90deg,#703b2d52,transparent 16% 84%,#6c322c61),var(--surface);
}
#metric-2 .count {font-size:clamp(76px,9.4vw,133px)}
/* Open stock book with a checklist leaf and a numbered leaf. */
#metric-3 {
  --surface:#eee6c4;
  top:12%;left:7%;width:min(39%,540px);
  padding:13px 22px 17px 21%;
  border:0;
  border-radius:8px 12px 12px 8px;
  background:linear-gradient(90deg,#e3d5ae 0 28%,#b7a17b 29%,#f4ebcb 31% 100%);
  padding-left:clamp(86px,13vw,173px);
  box-shadow:0 6px #bda97d,0 12px #6c513c,0 17px 17px #40332428;
  clip-path:inset(-6px calc((1 - var(--prop-open)) * 70%) -22px -6px);
  transform:none;
}
#metric-3::before {
  content:"";
  top:21%;left:7%;
  width:15%;height:61%;
  border-radius:0;
  background:repeating-linear-gradient(180deg,#8d795965 0 1px,transparent 1px 21px);
}
#metric-3::after {
  content:"✓\A✓\A✓";
  white-space:pre;
  left:9%;right:auto;top:13%;
  width:auto;height:auto;
  background:none;
  color:#577053;
  font:700 20px/21px sans-serif;
}
#metric-3 .count {font-size:clamp(70px,8.3vw,122px)}
#metric-3 .metric-unit {margin:4px 0 0;font-size:clamp(18px,1.8vw,26px)}
/* Waybill slides from a document sleeve. */
#copy-4 {
  --surface:#dce7e7;
  top:13%;width:38%;
  border-left:9px solid #5e7e84;
  border-bottom:9px solid #6d8d91;
  border-radius:0 9px 3px 3px;
  box-shadow:7px 7px #42605e38;
  translate:calc((1 - var(--prop-open)) * -50px) 0;
  clip-path:inset(0 calc((1 - var(--prop-open)) * 100%) -10px 0);
}
#copy-4.scene-item h2 {font-size:clamp(26px,2.85vw,42px)}
#copy-4 .scene-metric-inline .count {font-size:clamp(64px,7vw,100px)}
/* Oval woven placemat unrolls as diners arrive. */
#metric-5 {
  --surface:#e5b36d;
  top:15%;width:min(35%,480px);
  padding:12px 42px 19px;
  border:3px dashed #6b4729;
  border-radius:48% / 21%;
  background:repeating-linear-gradient(0deg,#92653c18 0 1px,transparent 1px 4px),var(--surface);
  box-shadow:0 0 0 7px #e4b578,0 9px 15px #43301d38;
  transform:scaleX(calc(.30 + .70 * var(--prop-open)));
  transform-origin:left center;
}
#metric-5 .count {font-size:clamp(76px,9vw,130px)}
/* Kraft tag pivots into view when the collection basket returns. */
#copy-6 {
  --surface:#d9ae73;
  top:23%;
  border:0;
  padding:23px 27px 21px 46px;
  clip-path:polygon(28px 0,100% 0,100% 100%,28px 100%,0 50%);
  transform:rotate(calc((1 - var(--prop-open)) * -9deg));
  transform-origin:20px center;
}
#copy-6::before {
  content:"";
  position:absolute;
  top:calc(50% - 6px);left:14px;width:12px;height:12px;
  border:2px solid #815e38;border-radius:50%;background:#f3d8b2;
}
#copy-6 .closing-actions {margin-top:15px}

@media(max-width:759px){
  .copy.scene-item {top:11%!important;padding:16px 17px}
  .copy.scene-item h1,.copy.scene-item h2,#copy-4.scene-item h2 {font-size:clamp(24px,6.7vw,32px)}
  .copy.scene-item p {font-size:13px}
  #copy-0::before {height:21px;top:-24px}
  #copy-1,#copy-4 {text-align:left}
  #copy-1 p {display:block}
  .scene-metric-inline#metric-1,.scene-metric-inline#metric-4 {
    width:100%!important;
    padding:0!important;
  }
  .scene-metric-inline#metric-1 .figure,.scene-metric-inline#metric-4 .figure {justify-content:flex-start}
  .scene-metric-inline#metric-4 .metric-unit {justify-content:flex-start}
  .scene-metric-inline#metric-1 .count,.scene-metric-inline#metric-4 .count {font-size:clamp(46px,15vw,64px)}
  #metric-2,#metric-3,#metric-5 {top:17%!important}
  #metric-2 {
    background:var(--surface)!important;
    border-top:6px solid #6d3828!important;
    padding:8px 15px 20px!important;
  }
  #metric-2 .count,#metric-5 .count {font-size:clamp(60px,17vw,80px)}
  #metric-3 {
    background:linear-gradient(90deg,#e3d5ae 0 25%,#b7a17b 26%,#f4ebcb 28%)!important;
    border:0!important;
    border-radius:8px!important;
    box-shadow:0 6px #bda97d,0 11px #6c513c!important;
    padding:9px 12px 11px 26%!important;
  }
  #metric-3 .count {font-size:clamp(47px,15vw,72px)}
  #metric-3 .metric-unit {font-size:15px}
  #metric-5 {
    background:var(--surface)!important;
    border:2px dashed #6b4729!important;
    border-radius:46% / 22%!important;
    padding:8px 20px 11px!important;
    box-shadow:0 0 0 5px #e4b578!important;
  }
  #copy-6.scene-item {padding-left:36px}
  #copy-6 .closing-actions {gap:8px 12px}
  #copy-6 .closing-actions a {font-size:12px;padding:6px 8px}
  #start {top:39%;bottom:auto}
}
@media(max-height:650px) and (min-width:760px){
  .copy.scene-item {padding:15px 19px}
  #copy-6.scene-item {padding-left:40px}
  .copy.scene-item h1,.copy.scene-item h2 {font-size:34px}
  #copy-1,#copy-4 {top:15%}
  .scene-metric-inline .count {font-size:72px}
}