@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500&family=Archivo+Narrow:wght@700&display=swap');
:root{color-scheme:light;background:#e7e4dd;--header-height:72px}
*{box-sizing:border-box}
body{margin:0}
main{height:calc(100svh - var(--header-height) - var(--controls-height,104px));display:flex;align-items:flex-start;justify-content:center;padding:16px 20px 0}
.frame-stage{position:relative;height:100%;aspect-ratio:1440/6406;max-width:100%}
#frame{display:block;width:100%;height:100%;object-fit:contain;object-position:top}
#frame:not([src]){visibility:hidden}
.scrubber{min-height:104px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;padding:20px 24px max(20px,env(safe-area-inset-bottom));background:#061b20;color:#f6f5e9}
.commit{width:min(100%,640px);color:#bac9c8;font:12px/1.5 Archivo,Arial,sans-serif}
.commit-reference{white-space:nowrap;margin-right:8px}
.commit code{color:#28cec7;margin-left:4px;font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace}
.commit span{min-width:0;overflow-wrap:anywhere}
#timeline{appearance:none;-webkit-appearance:none;width:min(100%,640px);height:32px;margin:0;background:transparent;cursor:pointer}
#timeline::-webkit-slider-runnable-track{height:4px;background:linear-gradient(to right,#28cec7 0 var(--timeline-progress,0%),#375056 var(--timeline-progress,0%) 100%)}
#timeline::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:0;background:#28cec7;box-shadow:0 0 0 4px #061b20}
#timeline::-moz-range-track{height:4px;background:#375056}
#timeline::-moz-range-progress{height:4px;background:#28cec7}
#timeline::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:0;background:#28cec7;box-shadow:0 0 0 4px #061b20}
#timeline:focus-visible{outline:2px solid #f6f5e9;outline-offset:4px}
.size-controls{display:flex;gap:4px;margin-left:auto}
.playback-controls{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;width:min(100%,640px)}
.size-controls button,#playback,.back-to-site{min-height:48px;padding:12px 18px;border:0;border-radius:0;font:700 16px/1 'Archivo Narrow','Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.size-controls button{min-width:64px;background:#102d34;color:#bac9c8}
.size-controls button[aria-pressed="true"]{background:#f3ead9;color:#061b20}
#playback{min-width:84px;background:#183b42;color:#f6f5e9}
.size-controls button:hover,#playback:hover{background:#295059;color:#fff}
.size-controls button[aria-pressed="true"]:hover{background:#fff;color:#061b20}
.size-controls button:focus-visible,#playback:focus-visible,.back-to-site:focus-visible{outline:2px solid #f6f5e9;outline-offset:3px}
.back-to-site{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#28cec7;color:#061b20;text-decoration:none}
.back-to-site:hover{background:#64e1d9}
#playback:disabled{opacity:.5;cursor:wait}
@media(min-width:601px){
  body{padding-bottom:var(--controls-height,150px)}
  .scrubber{position:fixed;inset:auto 0 0;z-index:1;background:#061b20;box-shadow:0 -8px 28px #061b201a}
  body.is-scaled main{height:auto;min-height:calc(100svh - var(--header-height) - var(--controls-height,150px))}
  body.is-scaled .frame-stage{width:var(--frame-width);height:auto}
}
@media(max-width:600px){
  .size-controls{display:none}
  .back-to-site{flex:1}
  #playback{min-width:96px}
  body{padding-bottom:var(--controls-height,120px)}
  main{height:auto;padding:0}
  .frame-stage{width:100%;height:auto}
  .scrubber{position:fixed;inset:auto 0 0;z-index:1;padding:16px 20px calc(20px + env(safe-area-inset-bottom));background:#061b20;box-shadow:0 -8px 28px #061b201a}
}