/* Shared reset, fonts and skeuomorphic app icons (used by both Mac and iOS skins).
   Everything is drawn in CSS so no Apple artwork is redistributed. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #1b2433;
  color: #222;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; }
[hidden] { display: none !important; }
.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;
}

:root {
  --font-ios: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mac: "Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-marker: "Marker Felt", "Noteworthy", "Chalkboard SE", "Comic Neue", "Trebuchet MS", sans-serif;
  --ease-spring: cubic-bezier(.2, .9, .25, 1.05);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------------------------------------------------------------
   App icons: original SVG artwork in assets/icons (gloss is baked in).
   .icon is a square; size comes from --s.
---------------------------------------------------------------- */
.icon {
  --s: 60px;
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: calc(var(--s) * .175);
  overflow: hidden;
  flex: none;
  box-shadow: 0 calc(var(--s) * .03) calc(var(--s) * .07) rgba(0, 0, 0, .6);
}
.icon img { width: 100%; height: 100%; display: block; -webkit-user-drag: none; }
.icon-doc { border-radius: 0; box-shadow: none; overflow: visible; }

/* live clock hands over the clock icon face */
.icon-clock .hand {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: calc(var(--s) * .04); margin-left: calc(var(--s) * -.02);
  background: #111; border-radius: 99px;
  transform-origin: 50% 100%;
}
.icon-clock .hand.h { height: 19%; margin-top: -19%; }
.icon-clock .hand.m { height: 27%; margin-top: -27%; }
.icon-clock .hand.s { height: 30%; margin-top: -30%; width: 1px; margin-left: 0; background: #d0021b; }
.icon-clock .pin { position: absolute; left: 50%; top: 50%; width: 7%; height: 7%; margin: -3.5% 0 0 -3.5%; background: #d0021b; border-radius: 50%; z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}