@font-face { font-family: "Note Felt"; src: local("MarkerFelt-Thin"), local("Marker Felt Thin"); }
/* The phone: hardware in real pixels (scaled by --s), the screen in points (320 x 480, scaled as a whole). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2a2b2e; }
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid #5ea2ff; outline-offset: 1px; }
[hidden] { display: none !important; }

#desk { position: fixed; inset: 0; overflow: hidden; background: #3b3c40 url(art/linen.webp); background-size: 180px 180px; touch-action: manipulation; }
#desk::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 42%, rgba(255,255,255,.10), rgba(0,0,0,0) 60%), radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%); }

/* ---------------- the hardware (desktop) */
#device { position: absolute; --s: 1; }
#body { position: absolute; left: 50%; top: 50%; width: calc(368px * var(--s)); height: calc(688px * var(--s));
  margin: calc(-344px * var(--s)) 0 0 calc(-184px * var(--s)); border-radius: calc(58px * var(--s)); transform-origin: 50% 50%;
  filter: drop-shadow(0 calc(28px * var(--s)) calc(30px * var(--s)) rgba(0,0,0,.55)) drop-shadow(0 calc(4px * var(--s)) calc(6px * var(--s)) rgba(0,0,0,.45)); }
#body .band { position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, #6f7378 0%, #d9dce0 3%, #9da1a6 7%, #f3f4f6 16%, #b4b8bc 34%, #eceef0 52%, #a9adb2 74%, #f1f2f4 88%, #a0a4a9 95%, #6b6f74 100%); }
#body .band::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 6%, rgba(0,0,0,0) 94%, rgba(0,0,0,.35));
  box-shadow: inset 0 0 0 calc(.6px * var(--s)) rgba(0,0,0,.35); }
#body .front { position: absolute; inset: calc(4.6px * var(--s)); border-radius: calc(53.5px * var(--s)); overflow: hidden;
  background: radial-gradient(ellipse 120% 70% at 30% 0%, #26272b 0%, #0d0d0f 55%, #050506 100%);
  box-shadow: inset 0 0 0 calc(1px * var(--s)) rgba(255,255,255,.07), inset 0 calc(2px * var(--s)) calc(3px * var(--s)) rgba(255,255,255,.08); }
#body .front::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 34%, rgba(255,255,255,0) 34.2%); }
#body .earpiece { position: absolute; left: 50%; top: calc(62px * var(--s)); width: calc(54px * var(--s)); height: calc(7px * var(--s)); margin-left: calc(-27px * var(--s));
  border-radius: calc(4px * var(--s)); background: #17181b; box-shadow: inset 0 calc(1px * var(--s)) calc(2px * var(--s)) #000, 0 calc(.8px * var(--s)) 0 rgba(255,255,255,.10);
  background-image: radial-gradient(circle, #3a3c42 28%, transparent 30%); background-size: calc(2.4px * var(--s)) calc(2.4px * var(--s)); }
#body .cam { position: absolute; left: calc(50% - 47px * var(--s)); top: calc(59px * var(--s)); width: calc(11px * var(--s)); height: calc(11px * var(--s)); border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #3d4a66 0%, #12151d 45%, #050507 70%); box-shadow: 0 0 0 calc(1.5px * var(--s)) #141518, 0 calc(.8px * var(--s)) 0 calc(1.6px * var(--s)) rgba(255,255,255,.08); }
#body .homebtn { position: absolute; left: 50%; bottom: calc(31px * var(--s)); width: calc(56px * var(--s)); height: calc(56px * var(--s)); margin-left: calc(-28px * var(--s)); }
.homebtn { border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 30%, #1f2023 0%, #0b0b0d 60%, #151619 100%);
  box-shadow: inset 0 calc(1px * var(--s)) calc(2px * var(--s)) rgba(0,0,0,.9), inset 0 calc(-1px * var(--s)) calc(1px * var(--s)) rgba(255,255,255,.10), 0 0 0 calc(1px * var(--s)) #000, 0 calc(1px * var(--s)) 0 calc(1px * var(--s)) rgba(255,255,255,.09); }
.homebtn i { position: absolute; left: 50%; top: 50%; width: 32%; height: 32%; transform: translate(-50%, -50%); border-radius: 22%; border: calc(1.6px * var(--s)) solid rgba(200,200,205,.42); }
.homebtn:active { background: radial-gradient(circle at 50% 40%, #151619 0%, #070708 70%); }
#body .hw { position: absolute; background: linear-gradient(90deg, #8e9297, #eef0f2 45%, #a3a7ac); border-radius: calc(2px * var(--s)); }
#body .sleep { top: calc(-3.2px * var(--s)); right: calc(62px * var(--s)); width: calc(40px * var(--s)); height: calc(5px * var(--s)); cursor: pointer;
  background: linear-gradient(180deg, #f2f3f5, #9ea2a7); border-radius: calc(2px * var(--s)) calc(2px * var(--s)) 0 0; }
#body .ring { left: calc(-3.2px * var(--s)); top: calc(118px * var(--s)); width: calc(5px * var(--s)); height: calc(20px * var(--s)); cursor: pointer;
  background: linear-gradient(90deg, #f0f1f3, #9ea2a7); border-radius: calc(2px * var(--s)) 0 0 calc(2px * var(--s)); }
#body .ring i { position: absolute; left: calc(-1.5px * var(--s)); top: calc(3px * var(--s)); width: calc(4px * var(--s)); height: calc(7px * var(--s)); border-radius: calc(1px * var(--s));
  background: linear-gradient(90deg, #cfd2d6, #7c8085); transition: top .15s; }
#body .ring.silent i { top: calc(10px * var(--s)); }
#body .ring.silent::after { content: ""; position: absolute; left: calc(1px * var(--s)); top: calc(3px * var(--s)); width: calc(1.6px * var(--s)); height: calc(6px * var(--s)); background: #ff7a12; }
#body .vol { left: calc(-3.6px * var(--s)); width: calc(5px * var(--s)); height: calc(24px * var(--s)); border-radius: calc(3px * var(--s)) 0 0 calc(3px * var(--s));
  background: linear-gradient(90deg, #f0f1f3, #9ea2a7); }
#body .vol.up { top: calc(168px * var(--s)); }
#body .vol.down { top: calc(214px * var(--s)); }

#glass { position: absolute; overflow: hidden; background: #000; border-radius: calc(1.5px * var(--s)); }
#screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #000; color: #000;
  font-size: 14px; line-height: 1.25; user-select: none; -webkit-user-select: none; }
#chin { display: none; }

/* ---------------- phone visitors: the page is the screen, with the home button below it */
body.mobile #desk { background: #000; }
body.mobile #desk::before { display: none; }
body.mobile #body { display: none; }
body.mobile #glass { border-radius: 0; }
body.mobile #chin { display: flex; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; align-items: center; justify-content: center;
  background: linear-gradient(#0e0e10, #050506); border-top: 1px solid #1d1e21; padding-bottom: env(safe-area-inset-bottom); }
body.mobile #chin .homebtn { position: relative; width: 38px; height: 38px; --s: .7; }

/* ---------------- layers */
.layer { position: absolute; inset: 0; }
.wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#home { z-index: 1; background: #000; }
#apps { z-index: 5; pointer-events: none; }
#apps > .app { pointer-events: auto; }
#lock { z-index: 20; }
#viewer { z-index: 30; background: #000; }
#sheet { z-index: 40; }
#sb { z-index: 50; }
#off { z-index: 70; background: #000; }
#boot { z-index: 60; background: #000; display: grid; place-items: center; transition: opacity .35s; cursor: pointer; }
#boot .bar { width: 46%; max-width: 160px; height: 7px; border-radius: 4px; background: #3a3a3c; overflow: hidden; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); margin-top: 18%; }
#boot .bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(#fff, #cfcfcf); transition: width .25s; }
#boot.gone { opacity: 0; }

/* ---------------- status bar */
#sb { position: absolute; left: 0; top: 0; right: 0; height: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 5px;
  font: bold 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background: rgba(0,0,0,.45); pointer-events: none; transition: background .3s; }
#sb.gray { color: #000; background: linear-gradient(#e7e7e7, #b4b4b4); border-bottom: 1px solid #8e8e8e; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
#sb.black { background: #000; }
#sb.clear { background: rgba(0,0,0,.45); }
#sb.hide { opacity: 0; }
#sb .sb-l, #sb .sb-r { display: flex; align-items: center; gap: 4px; min-width: 60px; }
#sb .sb-r { justify-content: flex-end; }
#sb svg { display: block; }

/* ---------------- lock screen */
#lock .lock-top, #lock .lock-bot { position: absolute; left: 0; right: 0; background: linear-gradient(rgba(70,70,70,.55), rgba(0,0,0,.62) 50%, rgba(0,0,0,.7));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22); transition: transform .4s cubic-bezier(.45,0,.2,1); }
#lock .lock-top { top: 0; height: 106px; padding-top: 21px; text-align: center; color: #fff; border-bottom: 1px solid rgba(0,0,0,.5); }
#lock .clock { font: 300 62px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -1px; margin-top: 2px; text-shadow: 0 -1px 0 rgba(0,0,0,.6); }
#lock .date { font: bold 15px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; margin-top: 3px; text-shadow: 0 -1px 0 rgba(0,0,0,.6); }
#lock .lock-bot { bottom: 0; height: 96px; border-top: 1px solid rgba(0,0,0,.5); }
#lock .groove { position: absolute; left: 20px; right: 20px; top: 21px; height: 54px; border-radius: 13px; background: rgba(0,0,0,.55);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.95), inset 0 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.22); }
#lock .slide-text { position: absolute; left: 92px; right: 10px; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  font: 23px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .2px; color: transparent; white-space: nowrap;
  background: linear-gradient(100deg, #6c6c6c 0%, #6c6c6c 40%, #fff 50%, #6c6c6c 60%, #6c6c6c 100%); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; animation: shimmer 2.6s linear infinite; pointer-events: none; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
#lock .knob { position: absolute; left: 4px; top: 4px; width: 80px; height: 46px; border-radius: 10px; display: grid; place-items: center; touch-action: none;
  background: linear-gradient(#fefefe 0%, #ececec 48%, #d6d6d6 52%, #c3c3c3 100%); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.6); cursor: grab; }
#lock .knob svg { width: 31px; height: 23px; }
#lock.unlocking .lock-top { transform: translateY(-100%); }
#lock.unlocking .lock-bot { transform: translateY(100%); }
#lock .wall { transition: opacity .4s; }
#lock.unlocking .wall { opacity: 0; }

/* ---------------- home screen */
#home .grid { position: absolute; left: 0; right: 0; top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px 4px 0; row-gap: 12px; }
#home .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; display: flex; justify-content: space-evenly; align-items: flex-start; padding: 13px 18px 0; }
#home .dock::before { content: ""; position: absolute; left: -12px; right: -12px; bottom: 0; height: 64px; transform-origin: 50% 100%; transform: perspective(220px) rotateX(38deg);
  background: linear-gradient(rgba(255,255,255,.62), rgba(235,240,245,.36) 14%, rgba(190,200,210,.24) 60%, rgba(120,130,140,.32));
  border-top: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 2px 1px rgba(255,255,255,.5); }
#home .dock::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.18)); pointer-events: none; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; width: 76px; justify-self: center; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.tile .label { margin-top: 4px; font: bold 11px/13px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 1px rgba(0,0,0,.6); white-space: nowrap; }
.dock .tile { z-index: 1; width: 66px; }
.dock .tile .ic { -webkit-box-reflect: below 3px linear-gradient(rgba(0,0,0,0) 62%, rgba(255,255,255,.28)); }
.ic { position: relative; width: 57px; height: 57px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 3px rgba(0,0,0,.55); background: #333; }
.ic > svg, .ic > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ic > img { object-fit: cover; }
.ic::after { content: ""; position: absolute; left: -12px; right: -12px; top: -38px; height: 66px; border-radius: 0 0 50% 50% / 0 0 34% 34%;
  background: linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.14)); pointer-events: none; }
.tile:active .ic { filter: brightness(.55); }
.badge { position: absolute; top: -9px; right: 0; min-width: 29px; height: 29px; padding: 0 7px; border-radius: 15px; border: 2px solid #fff;
  background: linear-gradient(#ff7b7b, #e3140f 50%, #c5000b); color: #fff; font: bold 16px/25px "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center;
  box-shadow: 0 2px 3px rgba(0,0,0,.55); z-index: 2; }
.badge::after { content: ""; position: absolute; left: 2px; right: 2px; top: 1px; height: 11px; border-radius: 12px 12px 30px 30px / 10px 10px 6px 6px; background: rgba(255,255,255,.35); }
#home.away .grid .tile, #home.away .dock .tile { opacity: 0; }
#home .grid, #home .dock { transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .35s; }
#home.zoomed .grid, #home.zoomed .dock { transform: scale(1.7); opacity: 0; }
#home .wall { transition: transform .4s cubic-bezier(.4,0,.2,1); }
#home.zoomed .wall { transform: scale(1.06); }

/* ---------------- apps */
.app { position: absolute; inset: 0; overflow: hidden; background: #fff; transition: transform .38s cubic-bezier(.3,.1,.2,1), opacity .3s; will-change: transform; }
.app .views { position: absolute; left: 0; right: 0; top: 64px; bottom: 0; overflow: hidden; }
.app.has-toolbar .views { bottom: 44px; }
.view { position: absolute; inset: 0; background: #fff; transition: transform .36s cubic-bezier(.35,.1,.25,1); }
.scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.scroll > .inner { min-height: 100%; will-change: transform; }
.scroll.dragging { cursor: grabbing; }
.indicator { position: absolute; right: 2px; width: 3px; border-radius: 2px; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 3; }
.indicator.on { opacity: 1; transition: opacity .1s; }
.dark .indicator, .album .indicator { background: rgba(0,0,0,.45); }

/* nav bar */
.nav { position: absolute; left: 0; right: 0; top: 20px; height: 44px; z-index: 4; overflow: hidden;
  background: linear-gradient(#b4bfcf 0%, #8a9db6 50%, #8095af 50%, #6c83a2 100%); border-bottom: 1px solid #2d3642; box-shadow: inset 0 1px 0 #ced6e0; }
.nav .title { position: absolute; left: 70px; right: 70px; top: 0; height: 44px; font: bold 20px/44px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; text-align: center;
  text-shadow: 0 -1px 0 rgba(0,0,0,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s, transform .36s; }
.nav .title.out { opacity: 0; }
.nav .back { position: absolute; left: 13px; top: 7px; height: 30px; max-width: 110px; padding: 0 8px 0 7px; border-radius: 5px; border: 1px solid #36506f; border-left: 0;
  font: bold 12px/28px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.45); white-space: nowrap; overflow: visible; text-overflow: ellipsis;
  background: linear-gradient(#97a9c1, #6f88aa 50%, #6380a3 51%, #57749a); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(255,255,255,.25);
  transition: opacity .3s; z-index: 2; }
.nav .back::before { content: ""; position: absolute; left: -10px; top: 3.6px; width: 21px; height: 21px; transform: rotate(45deg) skew(-6deg, -6deg); border-radius: 0 0 0 4px;
  border-left: 1px solid #36506f; border-bottom: 1px solid #36506f; background: linear-gradient(135deg, #97a9c1, #6f88aa 50%, #6380a3 51%, #57749a); z-index: -1; }
.nav .back span { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.nav .back.out { opacity: 0; pointer-events: none; }
.nav .back:active, .nav .back:active::before { background: linear-gradient(#6e83a3, #48638a); }
.nav.black { background: linear-gradient(rgba(84,84,84,.96) 0%, rgba(40,40,40,.96) 50%, rgba(20,20,20,.96) 51%, rgba(0,0,0,.96) 100%); border-bottom-color: #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.nav.black .back, .nav.black .back::before { border-color: #000; background: linear-gradient(135deg, #5c5c5c, #2a2a2a 50%, #161616 51%, #0b0b0b); }
.nav.black .back { background: linear-gradient(#5c5c5c, #2a2a2a 50%, #161616 51%, #0b0b0b); }
.nav.leather { background: #8a5a35 url(art/leather.webp); background-size: 192px 192px; border-bottom: 1px solid #3a2414; box-shadow: inset 0 1px 0 rgba(255,220,180,.35), inset 0 -8px 12px rgba(40,20,5,.35); }
.nav.leather::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; border-top: 1.5px dashed rgba(255,226,180,.55); pointer-events: none; }
.nav.leather::before { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; border-top: 1.5px dashed rgba(255,226,180,.45); pointer-events: none; }
.nav.leather .title { color: #fff7e8; text-shadow: 0 -1px 0 rgba(50,25,5,.8); }
.nav.leather .back, .nav.leather .back::before { border-color: #3d2412; background: linear-gradient(135deg, #a77a52, #7c522f 50%, #6c4426 51%, #5c381d); }
.nav.leather .back { background: linear-gradient(#a77a52, #7c522f 50%, #6c4426 51%, #5c381d); }
.nav.wood { background: linear-gradient(#a0703f, #7c4f25 50%, #6e4320 51%, #5a3518); border-bottom-color: #2f1a08; box-shadow: inset 0 1px 0 rgba(255,215,160,.4); }
.nav.wood .back, .nav.wood .back::before { border-color: #3a210c; background: linear-gradient(135deg, #a67946, #7a4e24 50%, #6a411c 51%, #5a3516); }
.nav.wood .back { background: linear-gradient(#a67946, #7a4e24 50%, #6a411c 51%, #5a3516); }

/* toolbar */
.toolbar { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
  background: linear-gradient(#b4bfcf 0%, #8a9db6 50%, #8095af 50%, #6c83a2 100%); border-top: 1px solid #2d3642; box-shadow: inset 0 1px 0 #ced6e0; }
.toolbar.leather { background: #8a5a35 url(art/leather.webp); background-size: 192px 192px; border-top-color: #3a2414; box-shadow: inset 0 1px 0 rgba(255,220,180,.35); }
.tb-btn { width: 44px; height: 44px; display: grid; place-items: center; }
.tb-btn svg { width: 22px; height: 22px; filter: drop-shadow(0 -1px 0 rgba(0,0,0,.45)); }
.tb-btn[disabled] { opacity: .4; cursor: default; }

/* plain table */
.rows { background: #fff; }
.row { position: relative; display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 30px 0 10px; border-bottom: 1px solid #e0e0e0; color: #000;
  font: bold 20px/1.15 "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left; }
.row .chev { position: absolute; right: 11px; top: 50%; width: 10px; height: 14px; margin-top: -7px; }
.row:active, .row.sel { background: linear-gradient(#058cf5, #015fe6); color: #fff; }
.row:active .sub, .row.sel .sub, .row:active .count, .row.sel .count { color: #fff; }
.row:active .chev path, .row.sel .chev path { fill: #fff; }
.row .count { color: #7f7f7f; font-weight: normal; margin-left: 6px; }
.row .sub { display: block; color: #7f7f7f; font: 14px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; margin-top: 2px; }
.row .txt { min-width: 0; flex: 1; overflow: hidden; }
.row .txt .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shead { position: sticky; top: 0; z-index: 2; height: 23px; padding-left: 12px; font: bold 17px/22px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.35); background: linear-gradient(#a5b1ba, #b6c0c8); border-top: 1px solid #98a6b0; border-bottom: 1px solid #9aa6af; opacity: .97;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 26px; }

/* grouped table on pinstripes */
.pin { background-color: #c5ccd4; background-image: linear-gradient(90deg, rgba(255,255,255,0) 0 5px, rgba(255,255,255,.16) 5px 7px); background-size: 7px 100%; }
.group { margin: 10px 9px 0; background: #fff; border: 1px solid #a7abb1; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.7); }
.ghead { margin: 18px 19px -2px; font: bold 17px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4c566c; text-shadow: 0 1px 0 #fff; }
.gfoot { margin: 8px 19px 0; font: 15px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4c566c; text-shadow: 0 1px 0 rgba(255,255,255,.8); text-align: center; }
.cell { position: relative; display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px 30px 10px 10px; border-top: 1px solid #d9d9d9; text-align: left;
  font: bold 17px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; text-decoration: none; }
.cell:first-child { border-top: 0; }
.cell .chev { position: absolute; right: 11px; top: 50%; width: 10px; height: 14px; margin-top: -7px; }
button.cell:active, a.cell:active { background: linear-gradient(#058cf5, #015fe6); color: #fff; }
button.cell:active .lab, a.cell:active .lab { color: #fff; }
.cell .lab { flex: 0 0 74px; margin-right: 10px; text-align: right; font: bold 13px/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #516691; align-self: flex-start; padding-top: 2px; }
.cell .val { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.cell .val.plain { font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: pre-line; }
.cell .sicon { width: 29px; height: 29px; border-radius: 6px; overflow: hidden; margin-right: 10px; flex: none; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,.4); }
.cell .sicon > * { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------------- Photos */
.thumbrow { padding: 0 34px 0 0; height: 57px; min-height: 57px; }
.thumbrow img { width: 57px; height: 57px; object-fit: cover; flex: none; margin-right: 10px; display: block; background: #ddd; }
.album { background: #fff; }
.case { padding: 4px 4px 0; }
.case.ab-media { --ab-gap: 4px; gap: 10px; color: #000; }
.case .ab-section { gap: 4px; }
.case .ab-lede { margin: 18px 12px 0; font: 15px/1.35 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4c566c; text-align: center; }
.case .ab-heading { margin: 12px 6px 0; font: bold 13px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; text-transform: none;
  background: linear-gradient(#a5b1ba, #b6c0c8); border-top: 1px solid #98a6b0; border-bottom: 1px solid #9aa6af; margin-left: -4px; margin-right: -4px; padding: 2px 10px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.case .ab-text { margin: 2px 8px 4px; font: 13px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #555; }
.case .ab-credits { margin: 14px 12px 0; font: 12px/1.45 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #7f7f7f; text-align: center; }
.case figcaption { margin: 3px 2px 0; font: 12px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #7f7f7f; }
.case .ab-image { background: #fff; }
.case .ab-image img { max-height: calc(var(--sh) - 76px); box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.case .ab-portrait .ab-film { width: min(100%, calc((var(--sh) - 84px) * 9 / 16)); }
.case .ab-portrait { grid-template-columns: minmax(0, 1fr); }
.case .ab-group { gap: 4px; }
/* the screen is 320 points wide whatever the window: one picture per row, as on the phone (the kit's pairs follow the window's width) */
.case .ab-group[data-layout] { grid-template-columns: minmax(0, 1fr); }
.case .ab-audio { display: none; }
.case figcaption.filmcap { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fullplay { flex: none; width: 34px; height: 24px; display: grid; place-items: center; color: #2b5fb4; border-radius: 5px; }
.fullplay svg { width: 22px; height: 16px; }
.fullplay:active { background: #dde6f5; }
.foot { padding: 18px 10px 26px; text-align: center; font: 17px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #7f7f7f; }

/* the sound rows (album and voicemail) */
.vm { display: flex; align-items: center; width: 100%; gap: 9px; min-height: 52px; padding: 6px 12px 6px 8px; border-bottom: 1px solid #e0e0e0; text-align: left; background: #fff; }
.vm .dot { flex: none; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8ec5ff, #1e6fe0 70%); box-shadow: inset 0 0 0 1px rgba(0,40,120,.35); }
.vm .dot.heard { visibility: hidden; }
.vm .pp { flex: none; width: 26px; height: 26px; display: grid; place-items: center; }
.vm .who { flex: 1; min-width: 0; }
.vm .who b { display: block; font: bold 17px/1.15 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm .who span { display: block; font: 14px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #2b5fb4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.vm .len { flex: none; font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #2b5fb4; }
.vm .info { flex: none; width: 29px; height: 29px; display: grid; place-items: center; }
.vm.sel { background: linear-gradient(#058cf5, #015fe6); }
.vm.sel .who b, .vm.sel .who span, .vm.sel .len { color: #fff; }
.vm.sel .pp path, .vm.sel .pp rect { fill: #fff; }
.case .vm { border: 1px solid #e3e3e3; border-radius: 8px; margin: 0; }
.scrub { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px; background: linear-gradient(#e9ebee, #c9ced5); border-bottom: 1px solid #9aa2ad;
  font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4c566c; text-shadow: 0 1px 0 #fff; }
.scrub .track { position: relative; flex: 1; height: 9px; border-radius: 5px; background: linear-gradient(#bfc4ca, #e6e8eb); box-shadow: inset 0 1px 2px rgba(0,0,0,.45); cursor: pointer; }
.scrub .track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; background: linear-gradient(#7fb4f7, #2766c9); }
.scrub .track b { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #fff, #d6d6d6 70%, #b9b9b9); box-shadow: 0 1px 3px rgba(0,0,0,.55); }
.scrub.idle .track b { display: none; }
.scrub span { min-width: 36px; text-align: center; }

/* ---------------- viewer (photos) and player (films) */
#viewer { overflow: hidden; color: #fff; transition: opacity .25s; }
#viewer.fade { opacity: 0; }
#viewer > * { transition: opacity .25s; }
#viewer.blank > * { opacity: 0; }
.vbar { position: absolute; left: 0; right: 0; height: 44px; z-index: 3; display: flex; align-items: center; transition: opacity .3s;
  background: linear-gradient(rgba(60,60,60,.72), rgba(20,20,20,.72) 50%, rgba(0,0,0,.72) 51%, rgba(0,0,0,.78)); box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.vbar.top { top: 0; padding: 0 8px; }
.vbar.bot { bottom: 0; justify-content: center; gap: 60px; }
#viewer.bare .vbar { opacity: 0; pointer-events: none; }
.vbar .title { flex: 1; text-align: center; font: bold 17px/44px "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 64px 0 0; text-shadow: 0 -1px 0 #000; }
.btn-dark { flex: none; height: 30px; padding: 0 10px; border-radius: 5px; border: 1px solid #000; font: bold 12px/28px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff;
  background: linear-gradient(#5c5c5c, #2a2a2a 50%, #161616 51%, #0b0b0b); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 0 rgba(255,255,255,.12); text-shadow: 0 -1px 0 #000; }
.btn-dark.done { background: linear-gradient(#7aa5ea, #3d72d6 50%, #2a62cc 51%, #2459c0); border-color: #10306b; }
.strip { position: absolute; inset: 0; display: flex; will-change: transform; touch-action: pan-y; }
.strip.anim { transition: transform .32s cubic-bezier(.25,.8,.3,1); }
.page { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 44px 0; transition: padding .3s; }
#viewer.bare .page, #viewer.single .page { padding-bottom: 0; }
#viewer.bare .page { padding-top: 0; }
.page img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; -webkit-user-drag: none; flex: none; }
.page.zoom { overflow-y: auto; align-items: flex-start; }
.page.zoom img { max-height: none; width: 100%; }
.player { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; display: grid; place-items: center; }
.player .frame { position: relative; background: #000; }
.player .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------- Videos */
.show { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 30px 6px 6px; border-bottom: 1px solid #e0e0e0; position: relative; text-align: left; background: #fff; }
.show img { width: 106px; height: 60px; object-fit: cover; flex: none; display: block; box-shadow: 0 1px 2px rgba(0,0,0,.45); background: #222; }
.show b { display: block; font: bold 16px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; }
.show span { display: block; font: 13px/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #7f7f7f; margin-top: 2px; }
.show .chev { position: absolute; right: 11px; top: 50%; width: 10px; height: 14px; margin-top: -7px; }
.show:active { background: linear-gradient(#058cf5, #015fe6); }
.show:active b, .show:active span { color: #fff; }

.season .art { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.season .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.season .art .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 8px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.78));
  color: #fff; font: bold 20px/1.15 "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: 0 1px 2px #000; }
.season .art .cap span { display: block; font: 13px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ddd; margin-top: 2px; }
.ep { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border-bottom: 1px solid #e0e0e0; text-align: left;
  font: bold 16px/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; background: #fff; }
.ep .play { flex: none; width: 24px; height: 24px; }
.ep .t { flex: 1; min-width: 0; }
.ep .t span { display: block; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #7f7f7f; margin-top: 1px; }
.ep:active { background: linear-gradient(#058cf5, #015fe6); color: #fff; }
.ep:nth-child(even) { background: #f5f7fa; }

/* ---------------- Notes: the yellow legal pad */
.pad { --line: 30px; background-color: #fbf2a7; color: #2b2116;
  background-image: linear-gradient(rgba(255,255,255,0) calc(var(--line) - 1px), rgba(146,128,80,.36) calc(var(--line) - 1px), rgba(146,128,80,.36) var(--line));
  background-size: 100% var(--line); font-family: "Note Felt", "Kalam", "Chalkboard SE", "Comic Sans MS", cursive; font-weight: 400; }
.pad.list { --line: 44px; }
.view.padbg { background: #fbf2a7; }
.view.album, .view.season { background: #fff; }
.torn { height: 7px; background: linear-gradient(135deg, #fbf2a7 33%, transparent 33.5%) 0 0 / 8px 8px repeat-x, linear-gradient(225deg, #fbf2a7 33%, transparent 33.5%) 0 0 / 8px 8px repeat-x, #9a7a4f; position: relative; z-index: 2; }
.note-row { position: relative; display: block; width: 100%; height: 44px; padding: 0 34px 0 12px; text-align: left; font: 20px/44px "Note Felt", "Kalam", "Chalkboard SE", cursive; color: #2b2116;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-row .chev { position: absolute; right: 12px; top: 15px; width: 10px; height: 14px; }
.note-row:active { background: rgba(120,90,40,.18); }
.note { padding: 0 14px 30px 16px; font-size: 18px; line-height: 30px; }
.note .when { display: flex; justify-content: space-between; font-size: 15px; color: #8c6d3f; height: 30px; }
.note p { margin: 0; overflow-wrap: anywhere; }
.note p.first { font-size: 18px; }

/* ---------------- Contacts */
.idx { position: absolute; right: 0; top: 4px; bottom: 4px; width: 18px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; z-index: 5;
  font: bold 10px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #6d7b8f; }
.idx button { width: 18px; text-align: center; padding: 0; }
.crow { position: relative; display: flex; width: 100%; height: 44px; align-items: center; padding: 0 30px 0 10px; border-bottom: 1px solid #e0e0e0; text-align: left;
  font: bold 20px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; background: #fff; }
.crow .me { margin-left: auto; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #7f7f7f; }
.crow:active { background: linear-gradient(#058cf5, #015fe6); color: #fff; }
.card-top { display: flex; align-items: center; gap: 12px; padding: 14px 10px 4px; }
.photo { flex: none; width: 66px; height: 66px; border-radius: 5px; background: #fff; padding: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.photo img, .photo svg { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.card-top .nm { font: bold 20px/1.15 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.card-top .co { font: 14px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #2b3242; text-shadow: 0 1px 0 rgba(255,255,255,.8); margin-top: 3px; }
.card-pad { padding-bottom: 24px; }

/* ---------------- Books: the wooden shelf */
.shelf { background: #6b4320 url(art/shelf.webp) 0 0 / 100% auto repeat-y; min-height: 100%; }
.shelf-row { position: relative; display: flex; justify-content: space-evenly; align-items: flex-end; padding: 0 10px; }
.book { position: relative; display: block; transform-origin: 50% 100%; }
.book img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1px 3px 3px 1px; box-shadow: 0 -1px 0 rgba(255,255,255,.12), 3px 4px 6px rgba(30,10,0,.6), 1px 0 2px rgba(0,0,0,.4); background: #eee; }
.book::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7%; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.28) 45%, rgba(0,0,0,.08)); z-index: 1; border-radius: 1px 0 0 1px; pointer-events: none; }
.book::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%); pointer-events: none; z-index: 1; }
.reader { touch-action: none; position: absolute; left: 0; right: 0; bottom: 0; top: 20px; z-index: 6; background: #3e2a1a url(art/leather.webp); background-size: 192px; overflow: hidden; perspective: 1400px; }
.leaf { position: absolute; left: 6px; right: 6px; top: 6px; bottom: 6px; background: #fbf7ec; border-radius: 2px 4px 4px 2px; box-shadow: 0 1px 4px rgba(0,0,0,.6), inset 6px 0 10px -6px rgba(0,0,0,.35);
  display: grid; grid-template-rows: 30px 1fr auto; padding: 0 14px 12px; transform-origin: 0 50%; backface-visibility: hidden; transition: transform .5s cubic-bezier(.4,.1,.3,1), filter .5s; }
.leaf::before { content: ""; position: absolute; top: 2px; bottom: 2px; right: -4px; width: 4px; background: repeating-linear-gradient(90deg, #e9e2d0 0 1px, #fff 1px 2px); border-radius: 0 2px 2px 0; }
.leaf .rh { font: 11px/30px Georgia, "Times New Roman", serif; letter-spacing: .12em; text-transform: uppercase; color: #9a8f7c; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaf .pic { position: relative; min-height: 0; }
.leaf .pic img { position: absolute; inset: 0; margin: auto; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.leaf .cap { font: italic 13px/1.4 Georgia, "Times New Roman", serif; color: #5d5446; text-align: center; padding-top: 8px; }
.leaf.turned { transform: rotateY(-100deg); filter: brightness(.7); }
.bookbar { position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 44px; display: flex; align-items: center; padding: 0 8px; transition: opacity .3s;
  background: linear-gradient(rgba(251,247,236,.97), rgba(232,225,207,.97)); border-bottom: 1px solid #b9ae95; }
.bookbar .title { flex: 1; text-align: center; font: bold 15px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #5d5446; padding-right: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-tan { height: 30px; padding: 0 10px; border-radius: 5px; border: 1px solid #8b7b5a; font: bold 12px/28px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff;
  background: linear-gradient(#c3ab7e, #9c8459 50%, #8f774d 51%, #7f6942); text-shadow: 0 -1px 0 rgba(0,0,0,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.reader.bare .bookbar { opacity: 0; pointer-events: none; }
.flybook { position: absolute; z-index: 10; pointer-events: none; transform-origin: 0 50%; transition: all .55s cubic-bezier(.4,.1,.3,1); box-shadow: 4px 6px 14px rgba(0,0,0,.6); }
.flybook img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------- Settings and wallpaper */
.wp-pair { display: flex; justify-content: center; gap: 22px; padding: 14px 0; }
.wp-mini { position: relative; width: 84px; height: 126px; border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); overflow: hidden; background: #000; }
.wp-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wp-mini .mt { position: absolute; left: 0; right: 0; top: 0; height: 22px; background: rgba(0,0,0,.55); color: #fff; font: 300 13px/22px "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; }
.wp-mini .mb { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: rgba(0,0,0,.55); }
.wp-mini .mi { position: absolute; left: 6px; right: 6px; top: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.wp-mini .mi i { display: block; aspect-ratio: 1; border-radius: 2px; background: rgba(255,255,255,.75); }
.preview { position: absolute; inset: 0; z-index: 6; background: #000; overflow: hidden; touch-action: none; cursor: grab; }
.preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.preview .lock-top { position: absolute; left: 0; right: 0; top: 0; height: 106px; padding-top: 20px; text-align: center; color: #fff; background: linear-gradient(rgba(70,70,70,.55), rgba(0,0,0,.62) 50%, rgba(0,0,0,.7)); }
.preview .mv { position: absolute; left: 0; right: 0; top: 124px; text-align: center; font: bold 16px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; text-shadow: 0 1px 3px #000; pointer-events: none; }
.preview .pbar { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px;
  background: linear-gradient(rgba(60,60,60,.72), rgba(0,0,0,.8)); }
.preview .pbar .btn-dark { height: 40px; padding: 0 22px; font-size: 16px; line-height: 38px; border-radius: 8px; }

/* action sheet */
#sheet { background: rgba(0,0,0,.42); transition: opacity .25s; }
#sheet.fade { opacity: 0; }
#sheet .box { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 20px; display: grid; gap: 9px;
  background: linear-gradient(rgba(70,80,95,.92), rgba(20,25,35,.95)); border-top: 1px solid rgba(255,255,255,.3); transition: transform .3s cubic-bezier(.3,.1,.2,1); }
#sheet.fade .box { transform: translateY(100%); }
#sheet .sbtn { height: 46px; border-radius: 9px; font: bold 19px/44px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; text-align: center;
  background: linear-gradient(#fff, #e9e9e9 50%, #dcdcdc 51%, #cfcfcf); border: 1px solid #2a2f3a; box-shadow: inset 0 1px 0 #fff; text-shadow: 0 1px 0 #fff; }
#sheet .sbtn.cancel { margin-top: 8px; color: #fff; text-shadow: 0 -1px 0 #000; background: linear-gradient(#5c5c5c, #2a2a2a 50%, #161616 51%, #0b0b0b); border-color: #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }

/* ---------------- linen tray (double press of the home button) */
#tray { z-index: 0; top: auto; height: 92px; background: #2f3033 url(art/linen.webp); background-size: 160px; box-shadow: inset 0 10px 12px -5px rgba(0,0,0,.9);
  display: flex; align-items: flex-start; justify-content: space-evenly; padding: 13px 10px 0; }
#tray .tile .label { color: #fff; }
#home, #apps { transition: transform .3s cubic-bezier(.3,.1,.2,1); }
#screen.tray-open #home, #screen.tray-open #apps { transform: translateY(-92px); }

@media (prefers-reduced-motion: reduce) {
  .app, .view, .tile, #lock .lock-top, #lock .lock-bot, .leaf, .strip.anim, #home .slide, #home .grid, #home .dock { transition-duration: .01s !important; }
  #lock .slide-text { animation: none; color: #bcbcbc; background: none; }
}