/* disassembled.com: the teardown pages.
   Only the teardown pages link this file. tools/build.py writes those pages, and teardown.js runs them.

   A teardown page is a full browser stage, like the game on knolling.com. The whole window is the sheet of colour the thing
   was knolled on. The parts roll in from the edges of the window like little trains, and each one stops in its place. The
   title leads, big, then steps aside. A counter ticks up as each part lands. When the knoll is whole you can look round it:
   tap a numbered spot to see what is inside, flick through the facts, or step to the next teardown with the arrows.

   With no scripts, or in a browser too old to cut a part to its outline, the same page is a plain page that scrolls: the
   title, the photo, the video and the words. The class "live" on <html> switches the stage on. A line of script in the
   head adds it. Rules that start with .live are for the stage. The rest are for both, or for the plain page. */

html:not(.live) .live-only{display:none !important}

/* ---------- the plain page ---------- */
.stage{background:var(--mat,#ddd);padding:14px 20px 26px}
.hud{max-width:900px;margin:0 auto}
.title{margin:14px 0 6px}
.kick{display:block;margin:0 0 8px;font:700 13px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.name{display:block}
.tally{display:inline-flex;align-items:baseline;gap:7px;max-width:none;margin:8px 0 14px;padding:6px 10px 5px;background:var(--ink);color:#fff;font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.tally b{font:400 30px/1 var(--head);letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* the print of the thing in one piece: a snapshot with a white edge */
.whole{display:block;width:min(280px,72%);max-width:900px;margin:12px 0 4px;padding:8px 8px 7px;border:0;border-radius:0;background:#fff;color:var(--ink);box-shadow:0 8px 20px rgba(0,0,0,.28);text-align:left;cursor:default;
  -webkit-tap-highlight-color:transparent}
.whole img{display:block;width:100%;height:auto}
.whole-t{display:block;margin-top:6px;font:400 15px/1 var(--head);letter-spacing:.06em;text-transform:uppercase}
.board{max-width:900px;margin:0 auto}
.still{display:block;width:100%;height:auto}
.cap{max-width:900px;margin:10px auto 0;font-size:18px;line-height:1.45}
.toolbox{display:none}
.deck{max-width:900px;margin:0 auto;padding:0 20px}
.slide{margin:0}
.slide h2{margin-top:44px}
.eyebrow{margin:34px 0 0;font:700 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.fact-h{margin:8px 0 6px;font-size:28px;line-height:1.12;letter-spacing:.015em}
.spots{padding-left:1.2em}
.more{margin-top:18px}

/* The facts at a glance: the same rows on every page, in a plain table of two columns. */
.glance{margin:18px 0 0;max-width:32em;border-top:2px solid var(--ink)}
.glance div{display:grid;grid-template-columns:8.5em 1fr;gap:0 16px;padding:9px 0;border-bottom:1px solid var(--ink)}
.glance dt{font-family:var(--head);text-transform:uppercase;letter-spacing:.03em;font-size:18px;line-height:1.55}
.glance dd{margin:0;font-size:20px;line-height:1.4}

/* The buy box: a small picture of the thing in pieces, its name, one line, and a button. */
.buy{display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:center;max-width:32em;margin:14px 0 0;padding:16px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.buy img{display:block;width:112px;height:112px;object-fit:cover;border:2px solid var(--ink)}
.buy p{max-width:none}
.buy-name{margin:0 0 4px;font-size:24px;font-weight:700;line-height:1.2}
.buy-line{margin:0 0 12px;font-size:18px;line-height:1.4}
.buy-btn{display:inline-block;padding:12px 16px;border:2px solid var(--ink);background:var(--yellow);color:var(--ink);font-family:var(--head);font-size:20px;line-height:1;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.buy-btn:visited{color:var(--ink)}
.buy-btn:hover,.buy-btn:focus-visible{background:var(--ink);color:var(--paper)}
@media (max-width:480px){
  .glance div{grid-template-columns:1fr;padding:8px 0}
  .glance dt{font-size:15px}
  .buy{grid-template-columns:84px 1fr;gap:12px;padding:12px;box-shadow:4px 4px 0 var(--ink)}
  .buy img{width:84px;height:84px}
  .buy-name{font-size:21px}
  .buy-btn{font-size:18px;padding:11px 13px}
}
@media (max-width:380px){
  .buy{grid-template-columns:1fr}
  .buy img{width:72px;height:72px}
}

/* ---------- the stage ----------
   The window has three parts, as on knolling.com. The two site tabs hang from the top. The sheet fills the middle.
   The toolbox sits at the bottom, close to your hands on a phone. */
html.live,html.live body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--mat)}
.live .plain-only{display:none !important}
.live .tabbar{position:fixed;top:0;left:0;right:0;z-index:30;pointer-events:none}
.live .tabs{pointer-events:auto}
.live .td{position:fixed;inset:0;display:flex;flex-direction:column;margin:0;background:var(--mat)}
.live .stage{position:relative;flex:1 1 auto;min-height:0;padding:0;overflow:hidden;isolation:isolate;background:var(--mat);-webkit-user-select:none;user-select:none;touch-action:manipulation}

/* The board holds every part. A part is a box that shows its bit of the photo, cut to its outline: the same trick as the
   game. The box is made at the photo's own size and scaled by --s, which teardown.js sets to fit the window. */
.live .board{position:absolute;inset:0;max-width:none;margin:0}
.pc{position:absolute;left:0;top:0;width:calc(var(--w) * var(--s,1) * 1px);height:calc(var(--h) * var(--s,1) * 1px);transform-origin:50% 50%;pointer-events:none}
.tp{display:block;background-repeat:no-repeat;transform-origin:0 0;transform:scale(var(--s,1))}
.pc.off{visibility:hidden}
/* a part on the move casts a small shadow, on a big screen with a mouse. A part drawn by hand gets none, or its drawn shape shows. */
@media (hover:hover) and (pointer:fine){
  .pc.mv{filter:drop-shadow(0 4px 3px rgba(20,16,10,.36))}
  .pc.mv.soft{filter:none}
}
/* The whole photo, soft shadows and all. It fades in over the parts when the last one has landed.
   Its outer edge fades out, so the grain of the sheet in the photo runs into the flat colour of the window with no line.
   The parts lie under it, so nothing of them is lost at the edge. */
.live .still{position:absolute;left:0;top:0;z-index:950;max-width:none;opacity:0;transition:opacity .9s;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(to bottom,transparent,#000 2.5%,#000 97.5%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(to bottom,transparent,#000 2.5%,#000 97.5%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.live .stage.done .still{opacity:1}
.live .stage.wait .still{opacity:0;transition:none}
/* the light changes a touch from pose to pose, as it does on a real stop motion shoot */
.flick{position:absolute;inset:0;z-index:955;pointer-events:none;opacity:0}

/* ---------- the title ----------
   It sits top left, with the counter under it. At the start it is big, in the middle of the empty sheet. Then it steps
   aside as the first parts roll in. teardown.js works out the move and puts it in --intro. */
.live .hud{position:absolute;z-index:1000;left:max(16px,env(safe-area-inset-left,0px));top:var(--top,44px);width:max-content;max-width:min(42vw,600px);margin:0;pointer-events:none;
  transform-origin:0 0;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.live .stage.intro .hud{transform:var(--intro,none);transition:none}
.live .title{margin:0}
.live .kick{margin:0 0 6px;font-size:12px}
.live .name{font-size:clamp(30px,4.2vw,76px);line-height:.98;letter-spacing:.005em}
.live .name.long{font-size:clamp(26px,3.1vw,54px)}
.live .tally{margin:10px 0 0;opacity:0;transition:opacity .4s .5s,background-color .4s,color .4s}
.live .stage.run .tally,.live .stage.done .tally{opacity:1}
.live .stage.intro .tally{opacity:0;transition:none}
.live .stage.done .tally{background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.live .stage.run .tally .about{display:none}
@media (max-width:700px){
  .live .hud{left:12px;max-width:calc(100% - 24px)}
  .live .kick{margin-bottom:4px;font-size:11px;letter-spacing:.2em}
  .live .name{font-size:clamp(30px,11.5vw,50px)}
  .live .name.long{font-size:clamp(21px,7vw,32px);line-height:1.02}
  .live .tally{margin-top:7px;padding:5px 8px 4px;font-size:11px}
  .live .tally b{font-size:24px}
}
/* a phone on its side: little height, so the title is small */
@media (max-height:480px){
  .live .name,.live .name.long{font-size:24px}
  .live .tally b{font-size:20px}
}

/* ---------- the thing in one piece ----------
   A print of the thing before it was taken apart. At the start it is big, beside the title. Then it gives a shake and steps
   aside to a small print: under the counter on a wide window, in the top right corner on a phone. A tap shows it big again.
   teardown.js works out the two places and puts them in --w-dock and --w-big. */
/* The print is laid out at its big size, --bw wide, and scaled down to its small place. Never the other way: a browser that
   draws the small one and stretches it would show a blurred photo. Every size inside is a share of --bw, and printH() in
   teardown.js adds the same shares up, so keep the two in step. The shadow is big here because it shrinks with the print. */
.live .whole{position:absolute;left:0;top:0;z-index:1001;width:var(--bw,300px);margin:0;padding:calc(var(--bw,300px) * .04);padding-bottom:calc(var(--bw,300px) * .035);transform-origin:0 0;transform:var(--w-dock,none);
  transition:transform .9s cubic-bezier(.7,0,.2,1),box-shadow .3s;cursor:zoom-in;box-shadow:0 26px 60px rgba(0,0,0,.3)}
.live .whole-t{margin-top:calc(var(--bw,300px) * .03);font-size:calc(var(--bw,300px) * .068);line-height:1;letter-spacing:.05em;white-space:nowrap;overflow:hidden}
.live .stage.intro .whole{transform:var(--w-big,none);transition:none;cursor:default;box-shadow:0 10px 26px rgba(0,0,0,.34)}
.live .whole.big{transform:var(--w-big,none);transition-duration:.5s;cursor:zoom-out;box-shadow:0 10px 26px rgba(0,0,0,.34)}
.live .stage.wait .whole{visibility:hidden}
.whole.shake{animation:shake .5s steps(1,end)}
@keyframes shake{0%{rotate:0deg;translate:0 0}20%{rotate:-2.5deg;translate:-4px 2px}40%{rotate:2deg;translate:5px -2px}60%{rotate:-3deg;translate:-3px -3px}80%{rotate:1.5deg;translate:3px 2px}100%{rotate:0deg;translate:0 0}}
.whole:focus-visible{outline:3px solid var(--link);outline-offset:3px}
/* on a phone the small print sits in the top right corner, so the title keeps clear of it */
@media (max-width:700px){
  .live .stage.has-whole .hud{max-width:calc(100% - 96px)}
}

/* ---------- the spots ----------
   Numbered pins on the knoll, one for each thing to look at inside. Tap one: its parts stay bright, the rest fade back,
   and a note says what you are looking at. */
.pin{position:absolute;left:0;top:0;z-index:970;width:32px;height:32px;margin:-16px 0 0 -16px;padding:0;border:2px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--ink);
  font:400 17px/28px var(--head);text-align:center;box-shadow:3px 3px 0 var(--ink);cursor:pointer;opacity:0;visibility:hidden;scale:.4;transition:opacity .3s,scale .35s cubic-bezier(.2,1.6,.4,1),visibility 0s .3s;
  -webkit-tap-highlight-color:transparent}
.pin::before{content:"";position:absolute;inset:-9px}                 /* a bigger target for a finger */
.pin::after{content:"";position:absolute;inset:-2px;border:2px solid var(--ink);border-radius:50%;opacity:0;animation:ping 2.4s ease-out infinite}
.stage.done .pin{opacity:1;visibility:visible;scale:1;transition-delay:.9s,.9s,0s}
.pin.on{background:var(--yellow)}
.stage.spot .pin::after,.stage.seen .pin::after{animation:none}
.pin:focus-visible{outline:3px solid var(--link);outline-offset:3px}
@keyframes ping{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.1)}}
@media (hover:hover){.pin:hover{background:var(--yellow)}}
.live .stage.spot .still{opacity:0;transition:opacity .25s}
.stage.spot .pc{opacity:.16;transition:opacity .3s}
.stage.spot .pc.hot{opacity:1;z-index:960;filter:drop-shadow(0 5px 4px rgba(20,16,10,.4))}
/* when the deck opens on a wide window the knoll slides over to make room for it */
.stage.glide .pc,.stage.glide .tp,.stage.glide .pin{transition:transform .4s cubic-bezier(.3,.8,.3,1),opacity .3s}
.live .stage.glide .still{transition:left .4s cubic-bezier(.3,.8,.3,1),top .4s cubic-bezier(.3,.8,.3,1),width .4s cubic-bezier(.3,.8,.3,1),height .4s cubic-bezier(.3,.8,.3,1),opacity .9s}
.note{position:absolute;z-index:980;left:50%;bottom:10px;width:min(430px,calc(100% - 20px));margin:0;padding:11px 46px 12px 13px;transform:translateX(-50%);background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);font-size:17px;line-height:1.38;-webkit-user-select:text;user-select:text}
.note[hidden]{display:none}
.note.top{bottom:auto;top:var(--note-top,60px)}
.note.left{left:max(16px,env(safe-area-inset-left,0px));transform:none;bottom:16px}
.note b{display:block;margin:0 0 3px;font:400 21px/1.1 var(--head);letter-spacing:.03em;text-transform:uppercase}
.note .nx{margin-top:9px;font-size:14px}
.note b i{display:inline-block;width:24px;height:24px;margin:0 7px 0 0;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);font:400 14px/20px var(--head);text-align:center;vertical-align:2px}
.x{position:absolute;right:6px;top:6px;z-index:2;display:grid;place-items:center;width:36px;height:36px;padding:0;border:2px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.x svg{display:block;width:16px;height:16px}
.x:hover,.x:active{background:var(--yellow)}
.x:focus-visible,.dk:focus-visible,.show:focus-visible{outline:3px solid var(--link);outline-offset:2px}

/* ---------- the toolbox ----------
   A black box at the bottom, as on knolling.com. The tip line on top says what to do, then shows the fun facts one by one.
   Under it: an arrow to the teardown before, play it again, the facts, the buy box, the game, and an arrow to the next. */
.live .toolbox{display:block;flex:0 0 auto;position:relative;z-index:20;background:var(--ink);color:#fff;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.tip{display:flex;align-items:center;justify-content:center;width:100%;height:42px;max-width:none;margin:0;padding:0 12px;overflow:hidden;border:0;border-top:2px solid var(--ink);border-radius:0;
  background:var(--yellow);color:var(--ink);font:700 14px/1.2 var(--sans);text-align:center;cursor:default;-webkit-tap-highlight-color:transparent}
.tip.go{cursor:pointer}
.tip.new{animation:tipnew .6s ease-out}
@keyframes tipnew{0%{background:#fff}100%{background:var(--yellow)}}
.tip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-row{display:flex;align-items:center;gap:8px;padding:8px 12px 10px;padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
.nav,.tool{flex:0 0 auto;display:grid;place-items:center;height:44px;padding:0;border-radius:0;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}
.nav{grid-auto-flow:column;gap:6px;min-width:46px;border:0;background:var(--paper);color:var(--ink);font:400 15px/1 var(--head);letter-spacing:.05em;text-transform:uppercase}
.nav:visited{color:var(--ink)}
.nav svg{display:block;width:22px;height:22px}
.nav-w{display:none;white-space:nowrap}
.tool{width:46px;border:2px solid #fff;background:transparent;color:#fff}
.tool svg{display:block;width:20px;height:20px}
.tbtn{flex:1 1 0;min-width:0;height:44px;padding:0 4px;border:2px solid #fff;border-radius:0;background:transparent;color:#fff;font:400 16px/40px var(--head);letter-spacing:.06em;text-transform:uppercase;
  text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tbtn:visited{color:#fff}
.tbtn.go,.tbtn.go:visited{flex-grow:1.5;background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.nav:active,.tool:active,.tbtn:active{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.nav:focus-visible,.tool:focus-visible,.tbtn:focus-visible,.tip:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
@media (hover:hover){
  .nav:hover,.tool:hover,.tbtn:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
  .tbtn.go:hover{background:#fff;border-color:#fff}
}
@media (max-width:480px){
  .tbtn{font-size:15px;letter-spacing:.04em}
}
@media (max-width:380px){
  .tb-row{gap:6px;padding-left:8px;padding-right:8px}
  .nav{min-width:42px}
  .tool{width:42px}
  .tbtn{font-size:14px;letter-spacing:.03em}
  .tip{font-size:13px}
}
@media (max-width:340px){
  .tb-row{gap:5px;padding-left:6px;padding-right:6px}
  .nav{min-width:38px}
  .tool{width:38px}
  .tbtn{padding:0 2px;font-size:13px;letter-spacing:.02em}
}
@media (max-height:480px){
  .tip{height:32px}
}
/* a wide window: the buttons sit in the middle, and each arrow says where it leads */
@media (min-width:820px){
  .tb-row{justify-content:center;padding:10px 14px 12px}
  .tbtn,.tbtn.go{flex:0 0 auto;padding:0 22px}
  .nav{padding:0 12px}
  .nav-w{display:block}
  .nav.prev{margin-right:auto}
  .nav.next{margin-left:auto}
}

/* ---------- the deck ----------
   The facts, one card at a time, like a deck you flick through: how many parts, what is inside, five fun facts, the buy box
   and the link to the game. On a phone the card sits over the knoll. On a wide window it sits at the right, and the knoll
   stays in view beside it. On the plain page the cards are just the sections of the page. */
/* the deck covers the sheet and not the toolbox, so the buttons down there still work while it is open */
.live .deck{position:fixed;inset:0 0 var(--tb,0px) 0;z-index:100;display:none;max-width:none;padding:44px 12px 12px;background:rgba(8,12,10,.32)}
.live .deck.open{display:flex}
.live .deck-card:focus{outline:none}
.live .deck-card{position:relative;display:flex;flex-direction:column;width:min(460px,100%);max-height:100%;margin:auto;background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  animation:cardin .35s cubic-bezier(.2,.9,.3,1) both}
@keyframes cardin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.live .deck-top{display:flex;align-items:center;gap:10px;padding:10px 10px 0 16px}
.bars{flex:1 1 auto;display:flex;gap:4px}
.bars i{flex:1 1 0;height:5px;background:#d2d2d2}
.bars i.on{background:var(--ink)}
.live .deck-top .x{position:static;flex:0 0 auto}
.live .slides{flex:1 1 auto;min-height:0;overflow:auto;padding:6px 18px 12px;overscroll-behavior:contain;font-size:19px;line-height:1.45}
.live .slide{display:none}
.live .slide.on{display:block;animation:slidein .25s ease-out both}
@keyframes slidein{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.live .slide h2{margin:8px 0 8px;font-size:30px}
.live .slide p,.live .slide ul,.live .slide ol{margin-bottom:11px}
.live .slide .big{font-size:76px;margin:2px 0 6px}
.live .eyebrow{margin:10px 0 0}
.live .fact-h{margin:8px 0 10px;font-size:34px;line-height:1.06}
.live .slide.fact p{font-size:21px}
.live .glance{margin-top:12px}
.live .glance div{grid-template-columns:7.2em 1fr;padding:7px 0}
.live .glance dt{font-size:16px}
.live .glance dd{font-size:18px}
.live .spots{list-style:none;padding:0}
.live .spots li{position:relative;margin:0 0 12px;padding:0 0 12px 40px;border-bottom:1px solid var(--ink)}
.live .spots li:last-child{border-bottom:0}
.live .spots .num{position:absolute;left:0;top:2px;width:28px;height:28px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);font:400 15px/24px var(--head);text-align:center}
.show{display:block;margin:8px 0 0;padding:8px 12px 7px;border:2px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:400 15px/1 var(--head);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.show:hover,.show:active{background:var(--yellow)}
.live .buy{margin-top:8px;box-shadow:4px 4px 0 var(--ink)}
.live .deck-nav{display:flex;align-items:center;gap:10px;padding:10px 12px 12px;border-top:2px solid var(--ink)}
.dk{flex:0 0 auto;height:42px;padding:0 16px;border:2px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:400 17px/38px var(--head);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.dk.next{background:var(--yellow)}
.dk:hover,.dk:active{background:var(--ink);color:var(--paper)}
.dk:disabled{border-color:#bdbdbd;background:var(--paper);color:#bdbdbd;cursor:default}
.dk-n{flex:1 1 auto;font:700 13px/1 var(--sans);letter-spacing:.14em;text-align:center}
@media (max-width:480px){
  .live .slides{padding:4px 14px 10px;font-size:18px}
  .live .slide .big{font-size:64px}
  .live .fact-h{font-size:29px}
  .live .slide.fact p{font-size:19px}
  .live .glance div{grid-template-columns:1fr;padding:6px 0}
  .live .glance dt{font-size:14px;line-height:1.3}
}
/* a wide window: the card docks at the right and the knoll stays in view, and in use, beside it */
@media (min-width:1000px){
  .live .deck{background:none;pointer-events:none;padding:54px 20px 20px}
  .live .deck-card{pointer-events:auto;margin:auto max(4px,2vw) auto auto;width:min(430px,100%)}
}

@media (prefers-reduced-motion:reduce){
  .live .hud,.live .whole,.pin,.live .still,.stage.spot .pc{transition-duration:.01s;transition-delay:0s}
  .whole.shake{animation:none}
  .pin::after,.tip.new,.live .deck-card,.live .slide.on{animation:none}
}