/* Shared across all four approaches: Potato Head design system,
   the detail sheet, the QR handoff, and 1080x1920 scaling. */
:root{
  --bg:#0C0C0C; --card:#1B181A; --card-2:#272727;
  --fg:#F9F7F3; --muted:#A0A0A0; --muted-2:#DCD5C7;
  --accent:#ED7127; --line:#2A2A2A;
  --helv:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#000}
body{font-family:var(--helv);display:flex;align-items:center;justify-content:center}
#shell{width:1080px;height:1920px;transform-origin:center center;position:relative}
.screen{width:1080px;height:1920px;position:relative;overflow:hidden;
  background:var(--bg);color:var(--fg);font-family:var(--helv)}

.head{position:absolute;top:0;left:0;right:0;height:200px;z-index:30;background:var(--bg);padding:44px 40px 0}
.head .row{display:flex;align-items:center}
.logo{width:280px;height:40px;flex:none}
.logo path{fill:var(--fg)}
.clock{margin-left:auto;text-align:right}
.clock .t{display:block;font-size:50px;font-weight:700;letter-spacing:-.03em;line-height:1}
.clock .d{display:block;font-size:25px;color:var(--muted);margin-top:8px}
.season{margin-top:26px;font-size:28px;color:var(--accent)}

/* detail sheet */
.scrim{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.74);opacity:0;
  pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:41;height:1300px;background:var(--card);
  border-radius:34px 34px 0 0;transform:translateY(100%);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);display:flex;flex-direction:column;overflow:hidden}
.sheet.on{transform:none}
.grab{width:120px;height:8px;border-radius:4px;background:#4A4A4A;margin:22px auto 0;flex:none}
.sheet .pic{height:430px;margin:24px 40px 0;border-radius:18px;background:#242424 center/cover no-repeat;flex:none}
.sheet .in{padding:30px 40px 0;flex:1;min-height:0}
.sheet .cat{font-size:28px;color:var(--accent)}
.sheet h2{font-size:58px;line-height:1.08;font-weight:700;letter-spacing:-.028em;margin:14px 0 24px}
.fact{display:flex;align-items:center;gap:16px;font-size:32px;color:var(--muted-2);margin-bottom:12px}
.fact svg{width:32px;height:32px;flex:none;fill:none;stroke:var(--muted-2);stroke-width:2}
.sheet p{font-size:31px;line-height:1.45;color:var(--muted-2);margin-top:22px}
.foot{display:flex;align-items:center;gap:32px;padding:26px 40px 44px;flex:none}
.qrbox{width:250px;height:250px;background:#fff;border-radius:14px;padding:18px;flex:none;line-height:0}
.qrbox canvas,.qrbox img{width:100%;height:100%;image-rendering:pixelated;display:block}
.foot .scan b{display:block;font-size:36px;font-weight:700;letter-spacing:-.02em}
.foot .scan s{display:block;font-size:28px;color:var(--muted);margin-top:10px;text-decoration:none}
.close{margin-left:auto;width:112px;height:112px;border-radius:50%;background:var(--card-2);border:0;
  color:var(--fg);cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center}
.close svg{width:44px;height:44px;stroke:var(--fg);stroke-width:3;fill:none;stroke-linecap:round}

/* bottom filter, common to B, C and D */
.filter{position:absolute;left:0;right:0;bottom:0;height:206px;z-index:30;background:var(--bg);
  border-top:2px solid var(--line);display:flex;gap:16px;padding:32px 40px 40px}
.fbtn{flex:1;border:0;border-radius:20px;background:var(--card-2);color:var(--fg);cursor:pointer;
  font-family:var(--helv);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.fbtn b{font-size:38px;font-weight:700;letter-spacing:-.024em}
.fbtn s{font-size:26px;color:var(--muted);text-decoration:none}
.fbtn.on{background:var(--fg);color:#0C0C0C}
.fbtn.on s{color:#5C5347}