/* kennygeiler.com as a device: iOS home screen on phones, macOS desktop on wide screens.
   One set of app markup; CSS decides whether an app is a full-screen sheet or a window. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --blue: #0A84FF;
  --ios-blue: #007AFF;
  --red: #FF3B30;
  --glass: rgba(255, 255, 255, .18);
  --glass-strong: rgba(246, 246, 248, .72);
  --ink: #111;
  --ink-2: #6B6B70;
  --sep: rgba(60, 60, 67, .18);
  --icon: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Chrome (and Safari) on iPhone fill a band above/behind the bottom toolbar with ONE solid colour taken from the
   page (its background / theme-color). It cannot show the picture, so the picture layers fade into that exact colour
   at the bottom (see .lock::after and .wall__shade) and the band reads as a continuation. os.js swaps to the home
   colour on unlock (class + theme-color). Keep --edge-* in sync with the theme-color values in index.html and os.js. */
:root { --edge-lock: #0e0c0c; --edge-home: #07111a; }
html { background: var(--edge-lock); }
html.is-home { background: var(--edge-home); }
body {
  background: transparent; color: #fff; font: 400 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none;
}
img, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.noscript { position: fixed; inset: auto 0 0 0; z-index: 999; margin: 0; padding: 16px; background: #fff; color: #000; text-align: center; }

/* ================= LOCK ================= */
.lock {
  position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  padding: max(56px, env(safe-area-inset-top)) 16px calc(28px + var(--safe-b));
  transition: transform .55s cubic-bezier(.3, .7, .2, 1), opacity .55s;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.lock.is-gone { transform: translateY(-100%); opacity: .4; pointer-events: none; }
.lock__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; z-index: -1; filter: saturate(1.05) brightness(.82); }
.lock::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 35%, rgba(0,0,0,.55)); }
.lock__top { text-align: center; }
.lock__date { margin: 0; font-size: clamp(17px, 2vw + 10px, 22px); font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.lock__time {
  margin: -6px 0 0; white-space: nowrap; font-weight: 600; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(76px, 24vw, 168px); text-shadow: 0 2px 24px rgba(0,0,0,.3);
  font-variant-numeric: tabular-nums;
}
.lock__notes { margin-top: auto; width: 100%; max-width: 420px; display: grid; gap: 8px; }
.notif {
  display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start;
  padding: 12px 14px; border-radius: 22px; background: rgba(30, 30, 34, .5);
  backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
}
.notif .icon { --icon: 38px; }
.notif__body p { margin: 0; font-size: 14px; line-height: 1.32; }
.notif__head { display: flex; justify-content: space-between; gap: 8px; }
.notif__head span { color: rgba(255,255,255,.6); font-size: 13px; white-space: nowrap; }
.lock__hint { margin: 22px 0 0; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.85); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lock__chev { width: 12px; height: 12px; border-left: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(-5px) rotate(45deg); } }

/* ================= HOME ================= */
.os { position: fixed; inset: 0; overflow: hidden; }
.wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wall__shade { position: absolute; inset: 0; background: rgba(0,0,0,.22); }
/* iPhone Safari draws the page under its bottom toolbar. The UI stays inside the visible area (inset: 0 above),
   but the wallpaper layers run the full large-viewport height so that strip shows the picture, not black. */
/* The layers run 200px past the reported viewport (Safari draws under its toolbar). The bottom fade is anchored to the
   reported bottom (bottom 200px of the layer) and everything below it is solid --edge, matching the band iPhone
   browsers paint themselves. */
.lock__bg, .lock::after, .wall, .wall__shade { position: fixed; top: 0; left: 0; right: 0; bottom: auto; height: calc(100% + 200px); }
.lock__bg { object-position: 58% 0; }
.wall { object-position: 50% 0; }
.lock::after { background:
  linear-gradient(rgba(14,12,12,0), var(--edge-lock)) left 0 bottom 199px / 100% 26% no-repeat,
  linear-gradient(var(--edge-lock), var(--edge-lock)) left 0 bottom 0 / 100% 200px no-repeat,
  linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.55)); }
.wall__shade { background:
  linear-gradient(rgba(7,17,26,0), var(--edge-home)) left 0 bottom 199px / 100% 22% no-repeat,
  linear-gradient(var(--edge-home), var(--edge-home)) left 0 bottom 0 / 100% 200px no-repeat,
  rgba(0,0,0,.22); }

.status {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5; height: 48px;
  padding: max(14px, env(safe-area-inset-top)) 28px 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  font-weight: 600; font-size: 15px;
}
.status__r { display: flex; gap: 6px; align-items: center; }
.status svg { fill: #fff; }
.batt { width: 25px; height: 12px; border: 1.5px solid rgba(255,255,255,.6); border-radius: 4px; padding: 1.5px; position: relative; }
.batt::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(255,255,255,.6); }
.batt i { display: block; height: 100%; width: 82%; background: #fff; border-radius: 1.5px; }

.menubar { display: none; }

.home {
  position: relative; z-index: 2; height: 100%;
  padding: 62px 22px calc(120px + var(--safe-b));
  display: flex; flex-direction: column; gap: 22px; max-width: 520px; margin: 0 auto;
}

.widget {
  position: relative; display: block; width: 100%; aspect-ratio: 2.1 / 1; border-radius: 22px; overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.35); text-align: left;
}
.widget img { width: 100%; height: 100%; object-fit: cover; }
.widget::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0) 55%); }
.widget__label { position: absolute; left: 14px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; line-height: 1.2; }
.widget__label b { font-size: 16px; }
.widget__label span { font-size: 12.5px; color: rgba(255,255,255,.8); }
.widget__play { position: absolute; right: 14px; bottom: 14px; z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.9); }
.widget__play::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid #111; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }

.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 0; justify-items: center; }
.app-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; width: 76px; }
.app-btn__label { font-size: 12px; font-weight: 500; line-height: 1.1; text-shadow: 0 1px 4px rgba(0,0,0,.5); white-space: nowrap; }
.app-btn:active .icon { filter: brightness(.75); }

.dock {
  position: absolute; z-index: 3; left: 12px; right: 12px; bottom: calc(10px + var(--safe-b));
  max-width: 496px; margin: 0 auto;
  display: flex; justify-content: space-around; padding: 14px 6px 8px; border-radius: 32px;
  background: var(--glass); backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5);
}
.dock .app-btn__label { font-size: 11px; opacity: .92; }
.app-btn.is-open::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.9); margin-top: -3px; }

/* ================= ICONS ================= */
.icon {
  width: var(--icon); height: var(--icon); border-radius: 22.5%; flex: none; position: relative; overflow: hidden;
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.icon svg { width: 100%; height: 100%; }
.icon--gh svg, .icon--li svg { width: 58%; height: 58%; }
.icon--lg { --icon: 96px; }
.icon--cal { background: #fff; color: #000; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 7%; }
.cal__dow { color: var(--red); font-size: calc(var(--icon) * .17); font-weight: 600; letter-spacing: .02em; line-height: 1; }
.cal__day { font-size: calc(var(--icon) * .52); font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.icon--photos { background: #fff; }
.icon--safari { background: #fff; }
.icon--notes { background: #FDFBF5; }
.icon--mail { background: linear-gradient(180deg, #1BAEFF, #1C6DF0); }
.icon--phone { background: linear-gradient(180deg, #5DF27A, #1EBE3C); }
.icon--moody { background: linear-gradient(160deg, #2A2F3D, #0D0F14); }
.icon--gh { background: #111; }
.icon--li { background: #0A66C2; }

/* ================= APP WINDOWS: phone = full-screen sheet ================= */
.win {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  background: #fff; color: var(--ink);
  animation: sheet .38s cubic-bezier(.25, .8, .25, 1);
}
@keyframes sheet { from { transform: translateY(100%) scale(.96); opacity: .4; } }
.win.is-closing { animation: sheet-out .26s ease-in forwards; }
@keyframes sheet-out { to { transform: translateY(100%) scale(.96); opacity: 0; } }
.win__bar {
  flex: none; position: relative; display: flex; align-items: center; justify-content: center;
  padding: max(48px, env(safe-area-inset-top)) 16px 10px; min-height: 92px;
  background: var(--glass-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: .5px solid var(--sep);
}
.win__title { margin: 0; font-size: 17px; font-weight: 600; }
.win__back { position: absolute; left: 10px; bottom: 9px; color: var(--ios-blue); font-size: 17px; padding: 4px 6px; min-height: 36px; }
.lights { display: none; }
.win__body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(40px + var(--safe-b)); }
.homebar { display: none; }
body.has-app .homebar {
  display: block; position: fixed; z-index: 60; left: 50%; bottom: calc(8px + var(--safe-b)); transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.75); pointer-events: none;
}
body.has-app.dark-app .homebar { background: rgba(255,255,255,.8); }

/* shared bits inside apps */
.kicker { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.pill {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px;
  background: rgba(118,118,128,.14); color: var(--ios-blue); font-weight: 600; font-size: 15px; text-decoration: none;
}
.pill--blue { background: var(--ios-blue); color: #fff; }
.pill:hover { filter: brightness(1.06); }

/* ---- Notes ---- */
.win--notes { background: #FBFAF6; }
.notes { display: flex; padding-bottom: 0; }
.notes__side { width: 100%; display: flex; flex-direction: column; }
.notes__list { list-style: none; margin: 0; padding: 0; width: 100%; }
.notes__list button { width: 100%; text-align: left; padding: 12px 20px; display: flex; flex-direction: column; gap: 2px; border-bottom: .5px solid var(--sep); }
.notes__list b { font-size: 16px; font-weight: 600; }
.notes__list span { color: var(--ink-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes__pane { display: none; width: 100%; padding: 8px 22px 48px; }
.notes.is-reading .notes__side { display: none; }
.notes.is-reading .notes__pane { display: block; }
.note__date { color: var(--ink-2); font-size: 13px; text-align: center; margin: 4px 0 14px; }
.note h3 { margin: 0 0 12px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.note p { margin: 0 0 14px; font-size: 17px; line-height: 1.5; max-width: 60ch; }
.note a { color: #C48B00; }
.notes__group { margin: 0; padding: 16px 20px 6px; font-size: 20px; font-weight: 700; }
.notes__back { color: #C48B00; font-size: 17px; padding: 6px 0; min-height: 36px; }
.note__tag { color: var(--ink-2); font-style: italic; }
.pill--substack, .note .pill--substack { background: #FF6719; color: #fff; text-decoration: none; }

/* ---- Featured writing widget ---- */
.wwidget {
  margin-top: auto; width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 14px 16px 15px; border-radius: 22px; color: #111;
  background: rgba(255,255,255,.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.wwidget__head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #FF6719; letter-spacing: .01em; }
.wwidget__icon { width: 22px; height: 22px; border-radius: 6px; background: #FF6719; display: grid; place-items: center; }
.wwidget__icon svg { width: 16px; height: 16px; }
.wwidget__title { font-size: 17px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wwidget__meta { font-size: 13px; color: #6B6B70; }
.wwidget:active { transform: scale(.98); }
/* short phone screens (toolbars, in-app browsers): keep the writing widget clear of the dock */
@media (max-width: 899px) and (max-height: 720px) {
  .home { gap: 14px; padding-top: 54px; }
  .widget { aspect-ratio: 2.7 / 1; }
  .grid { gap: 14px 0; }
  .wwidget { padding: 12px 14px; gap: 4px; }
  .wwidget__title { font-size: 16px; -webkit-line-clamp: 2; }
}

/* ---- Safari ---- */
.win--safari { background: #F2F2F7; }
.tabs {
  flex: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 12px;
  background: var(--glass-strong); border-bottom: .5px solid var(--sep);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; padding: 7px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.safari { padding: 0; }
.page { background: #fff; min-height: 100%; }
.url {
  margin: 0; display: flex; align-items: center; gap: 6px; justify-content: center;
  padding: 9px 14px; font-size: 13px; color: var(--ink-2); background: #F2F2F7; border-bottom: .5px solid var(--sep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.url__lock { width: 9px; height: 7px; background: var(--ink-2); border-radius: 1.5px; position: relative; margin-top: 4px; flex: none; }
.url__lock::before { content: ""; position: absolute; left: 1.5px; top: -5px; width: 6px; height: 7px; border: 1.5px solid var(--ink-2); border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; }
.page__shot { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #ddd; }
.page__shot--tall { aspect-ratio: 4 / 3; object-position: 50% 35%; }
.page__text { padding: 18px 20px 40px; }
.page__text h3 { margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -.015em; }
.lede { margin: 0 0 10px; font-size: 18px; line-height: 1.35; font-weight: 500; }
.page__text p:not(.kicker):not(.lede):not(.btns) { margin: 0; color: #3A3A3C; max-width: 60ch; }

/* ---- Photos ---- */
.win--photos { background: #000; color: #fff; }
.win--photos .win__bar { background: rgba(20,20,22,.8); border-bottom-color: rgba(255,255,255,.1); }
.win--photos .win__title { color: #fff; }
.photos { padding: 0 0 40px; position: relative; }
.photos__h { margin: 0; padding: 14px 16px 10px; font-size: 28px; font-weight: 700; }
.photos__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.tile { position: relative; aspect-ratio: 1; overflow: hidden; background: #1a1a1a; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.tile:hover img { transform: scale(1.03); }
.tile--wide { grid-column: 1 / -1; aspect-ratio: 2.39 / 1; }
img.tile--paper { object-fit: contain; background: #F2EEE6; }
.tile__dur { position: absolute; right: 6px; bottom: 5px; font-size: 12px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.tile__cap { position: absolute; left: 6px; bottom: 5px; font-size: 11.5px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.tile:has(.tile--paper) .tile__cap { color: #111; text-shadow: none; }
.viewer { position: absolute; inset: 0; z-index: 3; background: #000; display: flex; flex-direction: column; min-height: 100%; }
.viewer__bar { display: flex; justify-content: flex-end; padding: 10px 14px; }
.viewer__done { padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.16); font-weight: 600; }
.viewer__media { background: #000; }
.viewer__media video, .viewer__media img { width: 100%; max-height: 60vh; object-fit: contain; margin: 0 auto; }
.viewer__media img.tile--paper { background: #F2EEE6; }
.viewer__info { padding: 16px 18px 40px; }
.viewer__info .kicker { color: rgba(255,255,255,.55); }
.viewer__info h3 { margin: 0 0 8px; font-size: 24px; font-weight: 700; }
.viewer__info p:not(.kicker):not(.btns) { margin: 0; color: rgba(255,255,255,.78); max-width: 62ch; }
.viewer .pill { background: rgba(255,255,255,.14); color: #fff; }
.viewer .pill--blue { background: var(--ios-blue); }

/* ---- Calendar (teaching) ---- */
.cal { padding: 18px 20px 48px; }
.cal__month { margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--red); line-height: 1.1; }
.cal__lead { margin: 0 0 18px; font-size: 17px; line-height: 1.45; max-width: 60ch; }
.events { list-style: none; margin: 0; padding: 0; border-top: .5px solid var(--sep); }
.event { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 14px 0; border-bottom: .5px solid var(--sep); }
.event__time { font-size: 13px; color: var(--ink-2); padding-top: 2px; }
.event > div { border-left: 4px solid; padding: 2px 0 2px 12px; border-radius: 2px; display: flex; flex-direction: column; gap: 2px; }
.event b { font-size: 17px; }
.event > div span { color: #3A3A3C; }
.event--red > div { border-color: var(--red); }
.event--blue > div { border-color: var(--ios-blue); }
.event--green > div { border-color: #34C759; }
.cal__where { margin: 16px 0 0; color: var(--ink-2); }

/* ---- Mail ---- */
.mail { display: flex; flex-direction: column; padding: 0 0 40px; }
.mail__row { margin: 0; display: flex; gap: 8px; align-items: center; padding: 12px 20px; border-bottom: .5px solid var(--sep); font-size: 16px; }
.mail__row span { color: var(--ink-2); }
.mail__row input { flex: 1; border: 0; font: inherit; padding: 0; background: none; outline: none; min-width: 0; }
.mail__body textarea { width: 100%; border: 0; resize: vertical; font: 16px/1.5 var(--font); padding: 14px 20px; outline: none; min-height: 180px; }
.mail__foot { margin: 0; padding: 0 20px; display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: 13px; }

/* ---- Contact ---- */
.win--contact { background: #F2F2F7; }
.contact { padding: 22px 18px 48px; text-align: center; }
.contact__avatar { width: 96px; height: 96px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; font-weight: 600; color: #fff; background: linear-gradient(180deg, #A5A9B4, #858A96); }
.contact h3 { margin: 0; font-size: 28px; font-weight: 600; }
.contact__sub { margin: 4px 0 18px; color: var(--ink-2); }
.contact__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 420px; margin: 0 auto 18px; }
.contact__actions a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; border-radius: 12px; background: #fff; color: var(--ios-blue); text-decoration: none; font-size: 12px; }
.ca { width: 30px; height: 30px; border-radius: 50%; background: var(--ios-blue); display: grid; place-items: center; }
.ca svg { width: 20px; height: 20px; }
.contact__fields { margin: 0 auto; max-width: 420px; background: #fff; border-radius: 12px; text-align: left; }
.contact__fields div { padding: 10px 16px; border-bottom: .5px solid var(--sep); }
.contact__fields div:last-child { border-bottom: 0; }
.contact__fields dt { font-size: 13px; color: var(--ink-2); }
.contact__fields dd { margin: 0; font-size: 16px; }
.contact__fields a { color: var(--ios-blue); text-decoration: none; }

/* ---- App Store page ---- */
.store { padding: 18px 20px 48px; }
.store__head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-bottom: 18px; }
.store__head h3 { margin: 0; font-size: 22px; font-weight: 700; }
.store__head p { margin: 2px 0 0; color: var(--ink-2); }
.store__video { width: 100%; max-width: 280px; aspect-ratio: 720 / 1172; object-fit: cover; border-radius: 18px; background: #000; margin-bottom: 16px; }
.store h4 { margin: 0 0 6px; font-size: 17px; }
.store p { margin: 0; max-width: 60ch; }

/* ================= DESKTOP (macOS) ================= */
@media (min-width: 900px) and (min-height: 560px) {
  .status { display: none; }
  .menubar {
    display: flex; justify-content: space-between; align-items: center;
    position: absolute; top: 0; left: 0; right: 0; z-index: 70; height: 28px; padding: 0 16px;
    font-size: 13.5px; background: rgba(20,20,22,.35); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  }
  .menubar__l, .menubar__r { display: flex; gap: 20px; }
  .home { max-width: none; margin: 0; padding: 48px 28px 0; display: block; }
  .widget { width: 340px; position: absolute; left: 28px; top: 48px; }
  .grid { position: absolute; right: 22px; top: 48px; grid-template-columns: 1fr; gap: 18px; }
  .dock {
    left: 50%; right: auto; transform: translateX(-50%); bottom: 10px; max-width: none;
    gap: 6px; padding: 8px 12px 6px; border-radius: 22px; background: rgba(255,255,255,.2);
    border: .5px solid rgba(255,255,255,.25);
  }
  .dock .app-btn { width: 72px; }
  .dock .icon { --icon: 56px; transition: transform .15s; }
  .dock .app-btn:hover .icon { transform: translateY(-6px) scale(1.08); }

  .win {
    position: absolute; inset: auto; animation: pop .2s ease-out;
    width: min(860px, calc(100vw - 80px)); height: min(620px, calc(100vh - 28px - 120px));
    border-radius: 12px; overflow: hidden; resize: both; min-width: 420px; min-height: 320px;
    box-shadow: 0 24px 70px rgba(0,0,0,.45), 0 0 0 .5px rgba(0,0,0,.4);
  }
  @keyframes pop { from { transform: scale(.94); opacity: 0; } }
  .win.is-closing { animation: pop-out .14s ease-in forwards; }
  @keyframes pop-out { to { transform: scale(.94); opacity: 0; } }
  .win__bar { min-height: 38px; padding: 0 12px; cursor: grab; user-select: none; -webkit-user-select: none; }
  .win__bar:active { cursor: grabbing; }
  .win__title { font-size: 13.5px; font-weight: 600; color: #4A4A4E; }
  .win--photos .win__title { color: #ddd; }
  .win__back { display: none; }
  .lights { display: flex; gap: 8px; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); }
  .light { width: 12px; height: 12px; border-radius: 50%; display: block; background: #D0D0D3; }
  .light--close { background: #FF5F57; }
  .light--min { background: #FEBC2E; }
  .light--max { background: #28C840; }
  .win__body { padding-bottom: 0; }
  body.has-app .homebar { display: none; }

  .notes { display: grid; grid-template-columns: 280px 1fr; }
  .notes__side, .notes.is-reading .notes__side { display: flex; border-right: .5px solid var(--sep); overflow: auto; }
  .notes__list { padding: 0 8px; }
  .notes__group { padding: 14px 20px 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
  .notes__back { display: none; }
  .wwidget { position: absolute; left: 28px; top: 228px; width: 340px; margin: 0; }
    .notes__list button { border-radius: 8px; border-bottom: 0; padding: 10px 12px; }
  .notes__list button[aria-current] { background: #FBE7A1; }
  .notes__pane, .notes.is-reading .notes__pane { display: block; overflow: auto; padding: 16px 36px 40px; }
    .notes__pane { display: flex !important; flex-direction: column; }
  
  .page { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto 1fr; }
  .url { grid-column: 1 / -1; }
  .page__shot { height: 100%; aspect-ratio: auto; min-height: 320px; }
  .page__text { padding: 24px 28px; }

  .photos__grid { grid-template-columns: repeat(4, 1fr); }
  .tile--wide { aspect-ratio: 2.8 / 1; }
  .viewer { position: absolute; }
  .viewer__media video, .viewer__media img { max-height: 380px; }

  .cal, .store { padding: 24px 32px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}