/* Phone shells (phone.js). iPhone OS 3: status bar, lock screen, black springboard, glossy icons, Dock, navigation
   bars, and the Home button under the screen. Only applies to body.phone. */

body.phone { --ph-top: 20px; --ph-chin: 56px; background: #000; }
body.phone #taskbar, body.phone #startmenu, body.phone #icons, body.phone #wallpaper, body.phone #assistant,
body.phone #aquabar, body.phone #dock, body.phone #gnomebar, body.phone .sidebar { display: none !important; }
body.phone #desktop { inset: var(--ph-top) 0 var(--ph-chin) 0 !important; background: #000; }
body.phone:has(#logon:not([hidden])) .ph-chrome, body.phone:has(#logon:not([hidden])) .ph-lock { display: none; }

/* status bar */
.ph-chrome.ph-top { position: fixed; left: 0; right: 0; top: 0; height: var(--ph-top); z-index: 9500; }
.ph-status { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; color: #fff;
  font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif; background: linear-gradient(#3a3a3a, #000); text-shadow: 0 -1px 0 #000; }
.ph-time { position: absolute; left: 50%; transform: translateX(-50%); }
.ph-carrier { display: flex; align-items: center; gap: 3px; font-weight: normal; }
.ph-bars { display: inline-flex; align-items: flex-end; gap: 1px; height: 10px; }
.ph-bars b { width: 2px; background: #fff; }
.ph-bars b:nth-child(1) { height: 2px; } .ph-bars b:nth-child(2) { height: 4px; } .ph-bars b:nth-child(3) { height: 6px; } .ph-bars b:nth-child(4) { height: 8px; } .ph-bars b:nth-child(5) { height: 10px; }
.ph-3g { font-weight: bold; }
.ph-batt i { display: inline-block; width: 22px; height: 10px; border: 1px solid #fff; border-radius: 2px; position: relative; padding: 1px; }
.ph-batt i::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 4px; background: #fff; }
.ph-batt b { display: block; height: 100%; width: 80%; background: linear-gradient(#bdf27a, #59b815); }

/* the Home button, on the black chin under the screen */
.ph-chrome.ph-chin { position: fixed; left: 0; right: 0; bottom: 0; height: var(--ph-chin); z-index: 9500; display: grid; place-items: center;
  background: linear-gradient(#111, #000); }
.ph-home { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #333; background: radial-gradient(circle at 50% 30%, #2a2a2a, #050505); padding: 0; cursor: pointer; }
.ph-home i { display: block; width: 12px; height: 12px; margin: auto; border: 1.5px solid #888; border-radius: 3px; }
.ph-home:active { background: #000; }

/* springboard: pages that snap, over the grass */
#phone { position: absolute; inset: 0; display: flex; flex-direction: column; background: #000; transition: transform .35s ease, opacity .35s ease; }
#phone.zoomed { transform: scale(1.6); opacity: 0; pointer-events: none; }
.ph-board { display: flex; flex-direction: column; height: 100%; }
.ph-pages { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ph-pages::-webkit-scrollbar { display: none; }
.ph-page { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 92px; align-content: start; padding: 12px 6px 0; }
.ph-app { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: #fff; cursor: pointer; }
.ph-app.tapped .ph-ic { filter: brightness(.6); }
.ph-ic { position: relative; width: 57px; height: 57px; border-radius: 11px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(color-mix(in srgb, var(--tint) 70%, #fff), var(--tint) 55%, color-mix(in srgb, var(--tint) 75%, #000));
  box-shadow: 0 2px 3px rgba(0,0,0,.6); }
.ph-ic img, .ph-ic .ph-glyph { width: 40px; height: 40px; position: relative; z-index: 0; }
.ph-ic .ph-glyph svg { width: 100%; height: 100%; }
/* the gloss: a bright arc over the top half */
.ph-ic::after { content: ""; position: absolute; left: -15%; right: -15%; top: -60%; height: 105%; border-radius: 0 0 50% 50% / 0 0 22% 22%;
  background: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.12)); pointer-events: none; z-index: 1; }
.ph-lbl { font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: 0 1px 2px #000; max-width: 74px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-dots { display: flex; justify-content: center; gap: 8px; padding: 6px 0; }
.ph-dots i { width: 6px; height: 6px; border-radius: 50%; background: #555; }
.ph-dots i.on { background: #fff; }
.ph-dock { display: grid; grid-template-columns: repeat(4, 1fr); padding: 10px 6px 6px; position: relative;
  background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.08) 50%, rgba(0,0,0,.3)); border-top: 1px solid rgba(255,255,255,.4); }
.ph-app.dock .ph-ic { -webkit-box-reflect: below 2px linear-gradient(transparent 70%, rgba(255,255,255,.25)); }

/* lock screen */
.ph-lock { position: fixed; inset: 0 0 var(--ph-chin) 0; z-index: 9400; display: flex; flex-direction: column; padding-top: var(--ph-top);
  background: #000; transition: transform .45s ease-in; }
.ph-lock.gone { transform: translateY(-100%); }
.ph-lock-top, .ph-lock-bottom { background: linear-gradient(rgba(60,60,60,.85), rgba(0,0,0,.85)); color: #fff; text-align: center; border-bottom: 1px solid #222; }
.ph-lock-top { padding: 6px 0 10px; }
.ph-lock-time { font: 200 64px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.ph-lock-date { font: bold 15px "Helvetica Neue", Helvetica, Arial, sans-serif; }
.ph-lock-art { flex: 1; background:
  radial-gradient(circle at 50% 120%, #f6c35b 0 18%, transparent 18.5%),
  radial-gradient(ellipse at 50% 100%, #ff9a3c 0%, #c2462a 30%, #3a1050 62%, #07051a 100%); }
.ph-lock-bottom { padding: 16px 18px; border-top: 1px solid #333; }
.ph-track { --fade: 1; position: relative; height: 46px; border-radius: 12px; background: linear-gradient(#111, #2a2a2a); border: 1px solid #000; box-shadow: inset 0 1px 3px #000; }
.ph-knob { position: absolute; left: 4px; top: 4px; width: 66px; height: 36px; border-radius: 9px; z-index: 1; display: grid; place-items: center;
  background: linear-gradient(#fdfdfd, #c9c9c9); color: #777; font-size: 20px; cursor: grab; touch-action: none; }
.ph-knob.held { cursor: grabbing; }
.ph-slide { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 60px; opacity: var(--fade);
  font: 21px "Helvetica Neue", Helvetica, Arial, sans-serif; color: transparent;
  background: linear-gradient(90deg, #666 0 40%, #fff 50%, #666 60% 100%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text;
  animation: ph-shimmer 2.4s linear infinite; }
@keyframes ph-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* apps: full screen under a navigation bar */
body.phone .window { inset: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
body.phone .window .glass { display: none; }
body[data-phone="iphone"] .window > .titlebar { height: 44px; padding: 0 6px; display: flex; align-items: center; justify-content: center; position: relative;
  background: linear-gradient(#b0bccd, #8195af 50%, #6d84a2 51%, #6d83a1) !important; border-bottom: 1px solid #2d3642; border-radius: 0;
  color: #fff; font: bold 20px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: 0 -1px 0 #4a5566; }
body.phone .window > .titlebar > .ico, body.phone .window > .titlebar > .tbtns { display: none !important; }
body.phone .window > .titlebar .ttext { max-width: calc(100% - 2 * min(30%, 110px) - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font: inherit; }
.ph-back { position: absolute; left: 6px; top: 7px; height: 30px; max-width: 30%; padding: 0 10px 0 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fff; font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: 0 -1px 0 #333; border: 0;
  background: linear-gradient(#90a0b8, #536a8a 50%, #3e5a80 51%, #4b6a92);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); border-radius: 0 5px 5px 0; cursor: pointer; }
.ph-back:active { filter: brightness(.8); }
/* the navigation bar's Action button (iPhone OS 3's curved arrow), right side */
.ph-action { position: absolute; right: 6px; top: 7px; width: 40px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 5px;
  border: 1px solid #3b4a63; background: linear-gradient(#90a0b8, #536a8a 50%, #3e5a80 51%, #4b6a92); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); cursor: pointer; }
.ph-action:active { filter: brightness(.8); }
body.phone .window > .wbody { background: #fff; }
body.phone .window > .statusbar, body.phone .window > .grip { display: none; }
body.phone .window.ph-opening { animation: ph-open .36s ease-out; }
body.phone .window.ph-closing { animation: ph-close .26s ease-in forwards; }
@keyframes ph-open { from { transform: scale(.15); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ph-close { to { transform: scale(.15); opacity: 0; } }

/* Settings: grouped tables on pinstripes */
.ph-settings { min-height: 100%; padding: 4px 10px 20px; font: 16px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000;
  background: repeating-linear-gradient(90deg, #c5ccd4 0 5px, #cbd2d8 5px 9px); }
.ph-group-t { margin: 14px 8px 6px; font-weight: bold; color: #4c566c; text-shadow: 0 1px 0 #fff; }
.ph-group { background: #fff; border: 1px solid #aaa; border-radius: 9px; overflow: hidden; }
.ph-row { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 10px; background: #fff; border: 0; border-bottom: 1px solid #ddd;
  font: bold 16px "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left; color: #000; }
.ph-row:last-child { border-bottom: 0; }
.ph-row b { color: #385487; } .ph-row i { font-style: normal; font-weight: normal; color: #385487; }
.ph-row.on { color: #385487; }
.ph-note { margin: 8px; font-size: 13px; color: #4c566c; text-shadow: 0 1px 0 #fff; }
@media (prefers-reduced-motion: reduce) { #phone, .ph-lock { transition: none; } .ph-slide { animation: none; } }

/* the springboard's wallpaper: glossy grass under a bright sky (two layers of blades sway; a glossy light passes) */
.ph-wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(ellipse 160% 70% at 50% 100%, #4fae32 0 50%, transparent 51%), radial-gradient(ellipse at 30% 20%, #ffffff 0, rgba(255,255,255,0) 30%),
    linear-gradient(#3d9cf0, #8fd0ff 42%, #d9f2ff 58%); }
.ph-wall::before, .ph-wall::after, .ph-wall i { content: ""; position: absolute; left: -10%; right: -10%; transform-origin: 50% 100%; will-change: transform; }
.ph-wall::before { bottom: 0; height: 58%; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%2290%22%3E%3Cpath%20d%3D%22M49.1%2090%20Q53.0%2061.2%2054.8%2042.0%20Q53.7%2063.6%2054.5%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M55.9%2090%20Q58.6%2064.0%2058.7%2046.6%20Q59.6%2066.1%2061.1%2090Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M64.3%2090%20Q67.3%2058.6%2067.9%2037.6%20Q68.2%2061.2%2069.6%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M148.9%2090%20Q152.3%2047.0%20153.3%2018.3%20Q153.1%2050.6%20154.2%2090Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M5.1%2090%20Q8.4%2059.1%209.1%2038.6%20Q9.3%2061.7%2010.8%2090Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M18.5%2090%20Q21.5%2062.2%2019.3%2043.7%20Q22.9%2064.5%2027.6%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3Cpath%20d%3D%22M13.7%2090%20Q14.0%2048.7%2010.2%2021.2%20Q15.6%2052.2%2019.2%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M86.5%2090%20Q90.3%2047.3%2090.2%2018.9%20Q91.3%2050.9%2094.1%2090Z%22%20fill%3D%22%23358a22%22%2F%3E%3Cpath%20d%3D%22M71.4%2090%20Q73.4%2038.3%2071.7%203.8%20Q74.7%2042.6%2077.6%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3Cpath%20d%3D%22M108.0%2090%20Q112.4%2058.5%20113.3%2037.4%20Q113.3%2061.1%20115.7%2090Z%22%20fill%3D%22%23358a22%22%2F%3E%3Cpath%20d%3D%22M113.9%2090%20Q120.6%2057.1%20126.3%2035.2%20Q120.6%2059.9%20119.5%2090Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M22.8%2090%20Q29.9%2055.5%2035.1%2032.6%20Q30.0%2058.4%2029.9%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M119.0%2090%20Q125.3%2048.7%20129.8%2021.1%20Q125.6%2052.1%20125.6%2090Z%22%20fill%3D%22%23358a22%22%2F%3E%3Cpath%20d%3D%22M90.5%2090%20Q94.7%2048.5%2094.2%2020.8%20Q95.8%2051.9%2099.7%2090Z%22%20fill%3D%22%23358a22%22%2F%3E%3Cpath%20d%3D%22M71.6%2090%20Q72.3%2046.0%2067.1%2016.6%20Q74.2%2049.6%2080.1%2090Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M43.0%2090%20Q46.9%2054.2%2048.9%2030.4%20Q47.5%2057.2%2048.1%2090Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M53.8%2090%20Q56.8%2047.6%2056.7%2019.3%20Q57.8%2051.1%2059.9%2090Z%22%20fill%3D%22%23358a22%22%2F%3E%3Cpath%20d%3D%22M16.0%2090%20Q19.8%2058.3%2018.5%2037.2%20Q21.0%2061.0%2025.4%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M23.8%2090%20Q24.8%2053.8%2022.2%2029.6%20Q26.3%2056.8%2029.5%2090Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M134.8%2090%20Q137.6%2057.4%20136.5%2035.7%20Q138.7%2060.1%20141.6%2090Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M150.2%2090%20Q150.6%2061.2%20146.8%2042.0%20Q152.3%2063.6%20156.3%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3Cpath%20d%3D%22M-1.3%2090%20Q-0.6%2041.0%20-4.4%208.4%20Q1.0%2045.1%205.1%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3Cpath%20d%3D%22M62.1%2090%20Q67.6%2054.7%2068.4%2031.2%20Q68.4%2057.7%2071.9%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M68.9%2090%20Q76.7%2039.8%2082.1%206.4%20Q76.8%2044.0%2077.3%2090Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M60.2%2090%20Q63.5%2054.0%2063.3%2030.0%20Q64.6%2057.0%2067.2%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3Cpath%20d%3D%22M7.4%2090%20Q8.1%2059.5%204.0%2039.2%20Q9.7%2062.0%2014.1%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M11.5%2090%20Q16.7%2048.9%2017.1%2021.4%20Q17.6%2052.3%2021.3%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M7.2%2090%20Q10.3%2059.5%208.8%2039.2%20Q11.5%2062.1%2015.3%2090Z%22%20fill%3D%22%23358a22%22%2F%3E%3Cpath%20d%3D%22M92.6%2090%20Q93.3%2051.6%2088.7%2026.0%20Q95.1%2054.8%20100.1%2090Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M72.5%2090%20Q74.0%2056.4%2069.7%2034.1%20Q75.7%2059.2%2081.2%2090Z%22%20fill%3D%22%23358a22%22%2F%3E%3Cpath%20d%3D%22M73.6%2090%20Q76.7%2045.1%2076.9%2015.2%20Q77.7%2048.9%2079.6%2090Z%22%20fill%3D%22%23358a22%22%2F%3E%3Cpath%20d%3D%22M19.6%2090%20Q19.7%2049.6%2014.0%2022.6%20Q21.6%2052.9%2027.3%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M108.5%2090%20Q110.3%2057.9%20108.7%2036.6%20Q111.6%2060.6%20114.3%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3Cpath%20d%3D%22M82.2%2090%20Q83.9%2042.6%2081.8%2010.9%20Q85.2%2046.5%2088.3%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3Cpath%20d%3D%22M125.9%2090%20Q130.9%2041.4%20133.8%209.0%20Q131.4%2045.4%20132.0%2090Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M53.7%2090%20Q53.1%2064.8%2047.4%2048.1%20Q55.1%2066.9%2060.1%2090Z%22%20fill%3D%22%23358a22%22%2F%3E%3Cpath%20d%3D%22M26.5%2090%20Q29.7%2047.7%2027.9%2019.5%20Q31.0%2051.3%2035.5%2090Z%22%20fill%3D%22%23358a22%22%2F%3E%3Cpath%20d%3D%22M149.7%2090%20Q150.6%2054.9%20147.2%2031.5%20Q152.1%2057.8%20155.9%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3Cpath%20d%3D%22M50.0%2090%20Q57.9%2051.4%2063.7%2025.6%20Q57.9%2054.6%2058.1%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M74.0%2090%20Q79.1%2046.3%2082.7%2017.2%20Q79.5%2049.9%2079.4%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M141.9%2090%20Q147.6%2042.5%20150.6%2010.8%20Q148.1%2046.4%20149.3%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3Cpath%20d%3D%22M64.6%2090%20Q66.1%2046.8%2061.2%2018.0%20Q67.9%2050.4%2074.3%2090Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M71.2%2090%20Q70.8%2043.6%2065.8%2012.7%20Q72.6%2047.5%2077.0%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3Cpath%20d%3D%22M0.3%2090%20Q4.1%2048.2%203.7%2020.3%20Q5.2%2051.6%208.5%2090Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M102.3%2090%20Q105.6%2055.3%20106.1%2032.2%20Q106.5%2058.2%20108.0%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M123.5%2090%20Q124.7%2044.1%20120.0%2013.5%20Q126.5%2047.9%20132.3%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3Cpath%20d%3D%22M66.4%2090%20Q72.0%2039.8%2075.9%206.3%20Q72.4%2044.0%2072.4%2090Z%22%20fill%3D%22%23358a22%22%2F%3E%3Cpath%20d%3D%22M30.7%2090%20Q36.2%2050.8%2039.3%2024.7%20Q36.6%2054.1%2037.4%2090Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M128.7%2090%20Q135.4%2063.9%20138.3%2046.5%20Q135.9%2066.1%20138.2%2090Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M129.5%2090%20Q129.4%2039.6%20125.0%206.0%20Q131.1%2043.8%20135.2%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M135.2%2090%20Q140.5%2042.6%20141.8%2011.1%20Q141.3%2046.6%20144.1%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3Cpath%20d%3D%22M23.7%2090%20Q29.4%2051.6%2032.1%2026.1%20Q29.9%2054.8%2031.5%2090Z%22%20fill%3D%22%23358a22%22%2F%3E%3Cpath%20d%3D%22M104.7%2090%20Q109.0%2049.9%20108.8%2023.2%20Q110.1%2053.3%20113.6%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M36.0%2090%20Q41.9%2057.5%2045.2%2035.8%20Q42.4%2060.2%2043.5%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M117.6%2090%20Q121.1%2038.6%20120.5%204.3%20Q122.3%2042.9%20125.6%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3Cpath%20d%3D%22M107.1%2090%20Q111.1%2052.3%20111.5%2027.1%20Q112.0%2055.4%20114.5%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3Cpath%20d%3D%22M108.7%2090%20Q115.4%2039.7%20120.7%206.1%20Q115.5%2043.9%20115.0%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3Cpath%20d%3D%22M130.8%2090%20Q131.4%2061.6%20126.8%2042.7%20Q133.1%2064.0%20138.0%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M104.1%2090%20Q105.1%2053.0%20101.6%2028.3%20Q106.7%2056.1%20110.6%2090Z%22%20fill%3D%22%233f9b2a%22%2F%3E%3Cpath%20d%3D%22M139.4%2090%20Q145.3%2061.1%20147.8%2041.9%20Q145.8%2063.5%20147.7%2090Z%22%20fill%3D%22%234fae32%22%2F%3E%3C%2Fsvg%3E") repeat left top / 160px 90px, linear-gradient(#5cc23a, #2f8a1c 55%, #1f6512);
  animation: ph-sway 6s ease-in-out infinite alternate; }
.ph-wall::after { bottom: -4px; height: 36%; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22110%22%3E%3Cpath%20d%3D%22M31.1%20110%20Q35.2%2075.3%2034.8%2052.2%20Q36.2%2078.2%2039.8%20110Z%22%20fill%3D%22%236fd645%22%2F%3E%3Cpath%20d%3D%22M51.2%20110%20Q59.7%2062.6%2065.6%2031.0%20Q59.7%2066.6%2060.3%20110Z%22%20fill%3D%22%2384e65a%22%2F%3E%3Cpath%20d%3D%22M95.3%20110%20Q98.1%2044.2%2097.0%200.4%20Q99.3%2049.7%20102.4%20110Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M40.7%20110%20Q40.7%2054.1%2035.0%2016.8%20Q42.7%2058.7%2048.5%20110Z%22%20fill%3D%22%239cf06e%22%2F%3E%3Cpath%20d%3D%22M95.2%20110%20Q98.6%2066.3%2098.8%2037.2%20Q99.5%2070.0%20101.7%20110Z%22%20fill%3D%22%236fd645%22%2F%3E%3Cpath%20d%3D%22M11.1%20110%20Q13.6%2047.0%2010.4%204.9%20Q15.2%2052.2%2020.5%20110Z%22%20fill%3D%22%236fd645%22%2F%3E%3Cpath%20d%3D%22M34.0%20110%20Q39.4%2078.9%2042.8%2058.1%20Q39.9%2081.5%2040.4%20110Z%22%20fill%3D%22%2384e65a%22%2F%3E%3Cpath%20d%3D%22M109.9%20110%20Q116.2%2049.5%20118.3%209.1%20Q116.8%2054.5%20119.6%20110Z%22%20fill%3D%22%239cf06e%22%2F%3E%3Cpath%20d%3D%22M16.7%20110%20Q21.5%2046.9%2022.3%204.9%20Q22.3%2052.2%2025.2%20110Z%22%20fill%3D%22%236fd645%22%2F%3E%3Cpath%20d%3D%22M34.3%20110%20Q36.5%2051.3%2032.7%2012.1%20Q38.2%2056.2%2043.8%20110Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M128.7%20110%20Q133.8%2057.3%20137.4%2022.1%20Q134.2%2061.7%20134.1%20110Z%22%20fill%3D%22%2384e65a%22%2F%3E%3Cpath%20d%3D%22M6.0%20110%20Q9.0%2049.0%208.4%208.3%20Q10.0%2054.1%2012.7%20110Z%22%20fill%3D%22%239cf06e%22%2F%3E%3Cpath%20d%3D%22M125.9%20110%20Q126.8%2070.6%20122.3%2044.3%20Q128.5%2073.9%20133.6%20110Z%22%20fill%3D%22%2384e65a%22%2F%3E%3Cpath%20d%3D%22M128.4%20110%20Q129.4%2045.1%20126.6%201.9%20Q130.9%2050.5%20134.3%20110Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M84.4%20110%20Q85.7%2061.0%2082.1%2028.4%20Q87.2%2065.1%2091.6%20110Z%22%20fill%3D%22%2384e65a%22%2F%3E%3Cpath%20d%3D%22M35.3%20110%20Q41.8%2051.1%2047.8%2011.9%20Q41.8%2056.0%2040.5%20110Z%22%20fill%3D%22%236fd645%22%2F%3E%3Cpath%20d%3D%22M98.9%20110%20Q100.1%2060.3%2096.4%2027.2%20Q101.8%2064.4%20106.3%20110Z%22%20fill%3D%22%239cf06e%22%2F%3E%3Cpath%20d%3D%22M11.1%20110%20Q14.3%2050.6%2013.5%2011.0%20Q15.5%2055.5%2018.6%20110Z%22%20fill%3D%22%239cf06e%22%2F%3E%3Cpath%20d%3D%22M132.8%20110%20Q133.6%2069.1%20130.1%2041.9%20Q135.1%2072.5%20138.9%20110Z%22%20fill%3D%22%2384e65a%22%2F%3E%3Cpath%20d%3D%22M113.0%20110%20Q117.6%2054.6%20119.2%2017.7%20Q118.3%2059.3%20120.0%20110Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M133.4%20110%20Q133.6%2049.9%20127.7%209.9%20Q135.5%2054.9%20141.5%20110Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M56.9%20110%20Q61.6%2078.3%2063.6%2057.1%20Q62.3%2080.9%2063.8%20110Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M80.9%20110%20Q80.2%2055.2%2074.7%2018.6%20Q82.1%2059.7%2086.8%20110Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M57.5%20110%20Q66.1%2070.7%2071.7%2044.6%20Q66.2%2074.0%2067.3%20110Z%22%20fill%3D%22%235cc23a%22%2F%3E%3Cpath%20d%3D%22M30.8%20110%20Q32.7%2045.2%2030.4%202.1%20Q34.1%2050.6%2037.6%20110Z%22%20fill%3D%22%236fd645%22%2F%3E%3Cpath%20d%3D%22M42.8%20110%20Q45.2%2077.3%2042.5%2055.4%20Q46.6%2080.0%2051.1%20110Z%22%20fill%3D%22%2384e65a%22%2F%3E%3Cpath%20d%3D%22M67.9%20110%20Q68.8%2080.1%2065.9%2060.2%20Q70.2%2082.6%2073.4%20110Z%22%20fill%3D%22%239cf06e%22%2F%3E%3Cpath%20d%3D%22M78.1%20110%20Q80.5%2066.0%2078.1%2036.7%20Q81.9%2069.7%2086.2%20110Z%22%20fill%3D%22%236fd645%22%2F%3E%3Cpath%20d%3D%22M77.8%20110%20Q84.0%2061.1%2087.0%2028.5%20Q84.5%2065.2%2086.1%20110Z%22%20fill%3D%22%239cf06e%22%2F%3E%3Cpath%20d%3D%22M103.8%20110%20Q107.0%2054.1%20106.9%2016.9%20Q108.0%2058.8%20110.2%20110Z%22%20fill%3D%22%2384e65a%22%2F%3E%3Cpath%20d%3D%22M2.1%20110%20Q9.3%2050.0%2014.0%2010.0%20Q9.5%2055.0%2010.2%20110Z%22%20fill%3D%22%2384e65a%22%2F%3E%3Cpath%20d%3D%22M122.9%20110%20Q127.9%2053.0%20128.8%2015.0%20Q128.8%2057.7%20131.9%20110Z%22%20fill%3D%22%236fd645%22%2F%3E%3Cpath%20d%3D%22M111.5%20110%20Q118.8%2059.1%20123.6%2025.2%20Q119.1%2063.3%20119.9%20110Z%22%20fill%3D%22%2384e65a%22%2F%3E%3Cpath%20d%3D%22M7.0%20110%20Q13.0%2078.8%2014.7%2058.0%20Q13.7%2081.4%2016.8%20110Z%22%20fill%3D%22%239cf06e%22%2F%3E%3Cpath%20d%3D%22M112.9%20110%20Q118.0%2060.0%20119.6%2026.7%20Q118.8%2064.2%20121.1%20110Z%22%20fill%3D%22%2384e65a%22%2F%3E%3Cpath%20d%3D%22M64.1%20110%20Q70.9%2080.2%2074.5%2060.3%20Q71.3%2082.7%2072.9%20110Z%22%20fill%3D%22%236fd645%22%2F%3E%3Cpath%20d%3D%22M89.2%20110%20Q94.2%2077.9%2097.0%2056.5%20Q94.7%2080.6%2095.4%20110Z%22%20fill%3D%22%236fd645%22%2F%3E%3Cpath%20d%3D%22M115.4%20110%20Q120.5%2071.8%20123.6%2046.3%20Q121.0%2075.0%20121.5%20110Z%22%20fill%3D%22%239cf06e%22%2F%3E%3C%2Fsvg%3E") repeat-x left bottom / 140px 110px; animation: ph-sway 4.2s ease-in-out -1.3s infinite alternate-reverse; }
/* the gloss: a soft band of light that drifts across, and a glassy highlight over the top half */
.ph-wall i { top: 0; bottom: 0; left: -60%; right: auto; width: 50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); animation: ph-gloss 9s linear infinite; }
.ph-wall b { position: absolute; left: 0; right: 0; top: 0; height: 46%; background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.05)); border-radius: 0 0 50% 50% / 0 0 14% 14%; }
@keyframes ph-sway { from { transform: skewX(-3deg); } to { transform: skewX(3deg); } }
@keyframes ph-gloss { from { transform: translateX(0); } to { transform: translateX(400%); } }
.ph-board { position: relative; z-index: 1; }
.ph-lbl { text-shadow: 0 1px 2px #000, 0 0 4px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) { .ph-wall::before, .ph-wall::after, .ph-wall i { animation: none; } }

/* springboard wallpapers (Settings > Wallpaper); grass is the default above */
.ph-wall[data-wall="sunset"] { background: radial-gradient(circle at 50% 118%, #f6c35b 0 18%, transparent 18.5%), radial-gradient(ellipse at 50% 100%, #ff9a3c 0%, #c2462a 30%, #3a1050 62%, #07051a 100%); }
.ph-wall[data-wall="aurora"] { background: radial-gradient(ellipse at 30% 110%, #b44bff 0%, transparent 45%), radial-gradient(ellipse at 70% 120%, #2fd6c0 0%, transparent 50%), linear-gradient(#020414, #0c1440 60%, #20105a); }
.ph-wall[data-wall="teal"] { background: radial-gradient(ellipse at 20% 10%, #13858a 0%, #0d6c70 55%, #0a4f57 100%); }
.ph-wall[data-wall="black"] { background: #000; }
.ph-wall:not([data-wall="grass"])::before, .ph-wall:not([data-wall="grass"])::after { display: none; }
.ph-wall[data-wall="aurora"]::before { display: block; height: 100%; bottom: 0; background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent),
  radial-gradient(1px 1px at 40% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 45%, #fff, transparent), radial-gradient(1px 1px at 10% 75%, #fff, transparent); animation: ph-twinkle 4s ease-in-out infinite alternate; transform: none; }
@keyframes ph-twinkle { to { opacity: .4; } }
.ph-swatch { display: inline-block; width: 22px; height: 22px; margin-right: 10px; vertical-align: middle; border-radius: 4px; border: 1px solid rgba(0,0,0,.35); }
.ph-swatch[data-wall="grass"] { background: linear-gradient(#5fb8ff 45%, #4fae32 46%); } .ph-swatch[data-wall="sunset"] { background: linear-gradient(#3a1050, #ff9a3c); }
.ph-swatch[data-wall="aurora"] { background: linear-gradient(#020414, #b44bff); } .ph-swatch[data-wall="teal"] { background: #0d6c70; } .ph-swatch[data-wall="black"] { background: #000; }
.ph-row > span { display: flex; align-items: center; }

/* the on/off switch */
.ph-switch { position: relative; width: 94px; height: 27px; padding: 0; border-radius: 5px; border: 1px solid #8a8f99; overflow: hidden; cursor: pointer;
  background: linear-gradient(#fff, #e8e8e8); font: bold 15px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #7a7a7a; }
.ph-switch span { position: absolute; top: 0; bottom: 0; width: 60px; display: grid; place-items: center; transition: transform .2s; }
.ph-switch span:nth-of-type(1) { left: -46px; color: #fff; background: linear-gradient(#1f63d6, #4c8ef0); padding-right: 6px; }
.ph-switch span:nth-of-type(2) { right: -12px; }
.ph-switch i { position: absolute; top: 0; bottom: 0; left: 0; width: 40px; z-index: 1; border-radius: 4px; background: linear-gradient(#fcfcfc, #cfcfcf); border: 1px solid #9a9a9a; transition: transform .2s; }
.ph-switch.on i { transform: translateX(53px); } .ph-switch.on span:nth-of-type(1) { transform: translateX(46px); } .ph-switch.on span:nth-of-type(2) { transform: translateX(60px); }

/* alerts: the blue glass box in the middle of the screen */
.ph-alert-ov { position: fixed; inset: 0; z-index: 9700; display: grid; place-items: center; background: rgba(0,0,0,.45); padding: 20px; }
.ph-alert { width: min(284px, 100%); padding: 12px 14px 10px; border-radius: 10px; color: #fff; text-align: center; border: 2px solid rgba(255,255,255,.85);
  background: linear-gradient(rgba(100,128,170,.97), rgba(40,64,112,.97) 40%, rgba(24,46,96,.97)); box-shadow: 0 6px 20px rgba(0,0,0,.6);
  font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,.6); }
.ph-alert b { display: block; font-size: 17px; margin: 2px 0 6px; } .ph-alert p { margin: 0 0 8px; line-height: 1.3; }
.ph-alert-btns { display: flex; gap: 8px; margin-top: 4px; } .ph-alert-btns.col { flex-direction: column; }
.ph-alert-btns button { flex: 1; height: 42px; border-radius: 6px; border: 1px solid rgba(0,0,0,.6); color: #fff; font: bold 16px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.15) 50%, rgba(255,255,255,.06) 51%, rgba(255,255,255,.12)); }
.ph-alert-btns button.cancel { background: linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.05) 50%, rgba(0,0,0,.15) 51%); }

/* action sheets: long press (and the menu bar's menus) */
.ph-sheet-ov { position: fixed; inset: 0; z-index: 9700; background: rgba(0,0,0,0); transition: background .25s; }
.ph-sheet-ov.on { background: rgba(0,0,0,.4); }
.ph-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 80%; overflow-y: auto; padding: 16px 20px calc(16px + var(--ph-chin, 0px));
  display: flex; flex-direction: column; gap: 9px; transform: translateY(100%); transition: transform .25s ease-out;
  background: linear-gradient(rgba(90,100,118,.96), rgba(40,46,58,.96)); border-top: 1px solid #222; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.ph-sheet-ov.on .ph-sheet { transform: none; }
.ph-sheet-btn { min-height: 44px; padding: 6px 12px; border-radius: 9px; border: 1px solid #1a1d24; font: bold 17px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222;
  background: linear-gradient(#fff, #e6e6e6 50%, #d8d8d8 51%, #ececec); box-shadow: 0 1px 0 rgba(255,255,255,.25); }
.ph-sheet-btn:disabled { color: #9a9a9a; } .ph-sheet-btn.b { color: #0b3d91; }
.ph-sheet-btn.cancel { margin-top: 6px; color: #fff; text-shadow: 0 -1px 0 #000; background: linear-gradient(#5d5f66, #2a2c32 50%, #18191d 51%, #2a2c32); }
.ph-sheet-btn.back { color: #fff; background: linear-gradient(#7d93b8, #4d6390 50%, #3e5684 51%, #4d6390); }
.ph-sheet-btn:active:not(:disabled) { filter: brightness(.85); }

/* Gregory 98's own controls, dressed as iPhone OS 3 (on a phone it's always the Gregory 98 theme underneath) */
body[data-phone="iphone"] .window .wbody { font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #000; -webkit-font-smoothing: antialiased; }
body[data-phone="iphone"] .window .menubar { display: flex; gap: 0; padding: 0 4px; height: 34px; align-items: center; border: 0; margin: 0;
  background: linear-gradient(#b0bccd, #8195af 50%, #6d84a2 51%, #6d83a1); border-bottom: 1px solid #2d3642; }
body[data-phone="iphone"] .window .menubar span { padding: 4px 10px; margin: 0 2px; border-radius: 5px; color: #fff; font: bold 13px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: 0 -1px 0 #4a5566;
  border: 1px solid #3b4a63; background: linear-gradient(#90a0b8, #536a8a 50%, #3e5a80 51%, #4b6a92); box-shadow: none; }
body[data-phone="iphone"] .btn { min-height: 34px; padding: 4px 14px; border-radius: 8px; border: 1px solid #8a8f99; background: linear-gradient(#fff, #f0f0f0 50%, #e2e2e2 51%, #f2f2f2); color: #385487;
  font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif; box-shadow: none; text-shadow: 0 1px 0 #fff; }
body[data-phone="iphone"] .btn.primary { color: #fff; border-color: #2c4c86; text-shadow: 0 -1px 0 #1d3360; background: linear-gradient(#80a6e6, #4a7bd6 50%, #3567c8 51%, #4a7bd6); outline: none; }
body[data-phone="iphone"] .btn:disabled { color: #9aa0aa; }
body[data-phone="iphone"] input.field, body[data-phone="iphone"] select.field, body[data-phone="iphone"] textarea.field, body[data-phone="iphone"] .window input[type=text], body[data-phone="iphone"] .window input[type=password], body[data-phone="iphone"] .window input[type=email], body[data-phone="iphone"] .window input[type=search] {
  min-height: 32px; padding: 4px 9px; border-radius: 7px; border: 1px solid #9aa0aa; background: #fff; box-shadow: inset 0 2px 3px rgba(0,0,0,.18); font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif; }
body[data-phone="iphone"] .window input[type=checkbox], body[data-phone="iphone"] .window input[type=radio] { accent-color: #3567c8; width: 18px; height: 18px; }
body[data-phone="iphone"] .tabs, body[data-phone="iphone"] .tabstrip { display: flex; margin: 8px; border-radius: 8px; overflow: hidden; border: 1px solid #4a5f80; }
body[data-phone="iphone"] .tab { flex: 1; margin: 0 !important; border: 0 !important; border-right: 1px solid #4a5f80 !important; border-radius: 0 !important; padding: 7px 4px; text-align: center;
  background: linear-gradient(#fdfdfd, #e2e2e2) !important; color: #4a5f80; font: bold 13px "Helvetica Neue", Helvetica, Arial, sans-serif; box-shadow: none !important; }
body[data-phone="iphone"] .tab:last-child { border-right: 0 !important; }
body[data-phone="iphone"] .tab.on { color: #fff; background: linear-gradient(#80a6e6, #3567c8) !important; text-shadow: 0 -1px 0 #1d3360; }
body[data-phone="iphone"] .tabpage { border: 0 !important; box-shadow: none !important; background: transparent !important; }
body[data-phone="iphone"] fieldset { margin: 10px 8px; padding: 6px 10px 10px; border: 1px solid #a5abb5; border-radius: 10px; background: #fff; box-shadow: none; }
body[data-phone="iphone"] legend { padding: 0 6px; background: transparent; color: #4c566c; font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif; transform: none; }
body[data-phone="iphone"] .raised, body[data-phone="iphone"] .sunken { box-shadow: none; border: 1px solid #c8ccd2; border-radius: 8px; }
body[data-phone="iphone"] table.list { border-collapse: separate; border-spacing: 0; width: 100%; background: #fff; }
body[data-phone="iphone"] table.list th { padding: 5px 8px; text-align: left; color: #fff; font: bold 13px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: 0 -1px 0 #4a5566;
  background: linear-gradient(#a5b1c2, #8494aa) !important; border: 0 !important; }
body[data-phone="iphone"] table.list td { padding: 9px 8px; border: 0; border-bottom: 1px solid #e0e0e0; font-size: 14px; }
body[data-phone="iphone"] table.list tr.sel td { background: linear-gradient(#058cf5, #015fe6) !important; color: #fff; }
body[data-phone="iphone"] .dialog-buttons { display: flex; gap: 10px; justify-content: center; padding: 10px; }
body[data-phone="iphone"] .window ::-webkit-scrollbar { width: 4px; height: 4px; } body[data-phone="iphone"] .window ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.4); border-radius: 2px; }
body[data-phone="iphone"] .window * { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.4) transparent; }

/* app content, iPhone-style: grouped cells, Helvetica, pills, no bevels */
body[data-phone="iphone"] .window .wbody, body[data-phone="iphone"] .window .pane { background: repeating-linear-gradient(90deg, #c5ccd4 0 5px, #cbd2d8 5px 9px); }
body[data-phone="iphone"] .window .pane { padding: 8px; }
body[data-phone="iphone"] .window .wbody * { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
body[data-phone="iphone"] .window .wbody .term, body[data-phone="iphone"] .window .wbody .term *, body[data-phone="iphone"] .window .wbody pre, body[data-phone="iphone"] .window .wbody code, body[data-phone="iphone"] .window .wbody .mono { font-family: "Lucida Console", "DejaVu Sans Mono", monospace; }
body[data-phone="iphone"] .hero { margin: 8px; border-radius: 10px; background: linear-gradient(#7d9cc9, #3d64a8) !important; box-shadow: 0 1px 0 #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.4); }
body[data-phone="iphone"] .bottomline { border: 1px solid #a5abb5 !important; border-radius: 10px; box-shadow: 0 1px 0 #fff; background: #fff !important; margin: 0 0 10px; }
body[data-phone="iphone"] .bottomline .badge { border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
body[data-phone="iphone"] .bottomline .bl-head { font: bold 16px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; }
body[data-phone="iphone"] .pred { background: #fff; border: 1px solid #a5abb5; border-bottom: 0; padding: 10px; margin: 0; }
body[data-phone="iphone"] .pred:first-of-type { border-radius: 10px 10px 0 0; } body[data-phone="iphone"] .pred:last-of-type { border-bottom: 1px solid #a5abb5; border-radius: 0 0 10px 10px; }
body[data-phone="iphone"] .chip { border-radius: 10px; padding: 1px 8px; }
body[data-phone="iphone"] .chartbox, body[data-phone="iphone"] .kv, body[data-phone="iphone"] .card-like { background: #fff; border: 1px solid #a5abb5; border-radius: 10px; padding: 8px; }
body[data-phone="iphone"] .window h1, body[data-phone="iphone"] .window h2, body[data-phone="iphone"] .window h3 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #4c566c; text-shadow: 0 1px 0 #fff; }
body[data-phone="iphone"] .window .hero h1, body[data-phone="iphone"] .window .hero h2 { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.4); }
body[data-phone="iphone"] .window a { color: #2a5bd7; }

/* ======================================================================== Android 2.3 (Gingerbread) */
body[data-phone="android"] { --ph-top: 25px; --ph-chin: 48px; }
body[data-phone="android"] .ph-back, body[data-phone="blackberry"] .ph-back { display: none; }
body[data-phone="android"] .ph-action, body[data-phone="blackberry"] .ph-action { display: none; }
body[data-phone="iphone"] .window .menubar { display: none !important; }
.ph-wall[data-wall="galaxy"] { background: radial-gradient(ellipse at 70% 30%, rgba(80,200,120,.35), transparent 45%), radial-gradient(ellipse at 20% 80%, rgba(40,90,200,.45), transparent 50%), linear-gradient(#050a12, #0c1a2a 60%, #050a12); }
.ph-wall[data-wall="galaxy"]::before { display: block; height: 100%; bottom: 0; transform: none; animation: ph-twinkle 5s ease-in-out infinite alternate;
  background: radial-gradient(1px 1px at 15% 20%, #fff, transparent), radial-gradient(1px 1px at 55% 12%, #cfe, transparent), radial-gradient(1.5px 1.5px at 80% 35%, #fff, transparent), radial-gradient(1px 1px at 35% 55%, #fff, transparent), radial-gradient(1px 1px at 90% 70%, #dff, transparent), radial-gradient(1px 1px at 8% 88%, #fff, transparent); }
.ph-swatch[data-wall="galaxy"] { background: linear-gradient(#0c1a2a, #3a8a5a); } .ph-swatch[data-wall="bbblue"] { background: radial-gradient(#3a7bd5, #061428); }
.ad-status { height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 6px; background: #000; color: #9fe03a; font: 13px "Droid Sans", Roboto, Arial, sans-serif; cursor: pointer; }
.ad-notes { display: flex; gap: 6px; } .ad-notes i { font-style: normal; color: #9fe03a; font-weight: bold; }
.ad-right { display: flex; gap: 6px; align-items: center; } .ad-right .ph-time { color: #fff; position: static; transform: none; font-weight: normal; }
.ad-3g { font-style: normal; font-size: 10px; font-weight: bold; } .ad-status .ph-bars b { background: #9fe03a; } .ad-status .ph-batt i { border-color: #9fe03a; } .ad-status .ph-batt i::after { background: #9fe03a; } .ad-status .ph-batt b { background: #9fe03a; }
.ad-home { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding: 10px 8px 0; }
.ad-clock { text-align: center; color: #fff; text-shadow: 0 1px 4px #000; margin: 6px 0 10px; } .ad-clock-t { display: block; font: 300 56px/1 "Droid Sans", Roboto, Arial, sans-serif; } .ad-clock-d { font: 14px "Droid Sans", Roboto, Arial, sans-serif; }
.ad-search { display: flex; align-items: center; gap: 8px; margin: 0 4px 14px; padding: 6px 10px; border: 0; border-radius: 4px; background: rgba(255,255,255,.92); box-shadow: 0 2px 6px rgba(0,0,0,.5); font: 15px "Droid Sans", Arial, sans-serif; color: #888; }
.ad-search b { color: #3c78d8; font-size: 17px; } .ad-search span { flex: 1; text-align: left; } .ad-search i { font-style: normal; color: #444; font-size: 18px; }
.ad-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 88px; align-content: start; }
.ad-app { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: #fff; padding: 2px; border-radius: 6px; }
.ad-app:active, .ad-app:focus-visible { background: rgba(255,140,0,.55); outline: none; }
.ad-ic { width: 48px; height: 48px; display: grid; place-items: center; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.ad-ic img, .ad-ic .ph-glyph { width: 46px; height: 46px; } .ad-ic .ph-glyph svg { width: 100%; height: 100%; }
.ad-app .ph-lbl { font: 12px "Droid Sans", Roboto, Arial, sans-serif; font-weight: normal; }
.ad-dock { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; justify-items: center; height: 84px; margin: 0 -8px; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.ad-drawerbtn { width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(0,0,0,.4); display: grid; place-items: center; }
.ad-drawerbtn i { width: 26px; height: 26px; background: radial-gradient(circle, #fff 2.5px, transparent 3px) 0 0 / 9px 9px; }
.ad-drawer { position: absolute; inset: 0; z-index: 2; overflow-y: auto; padding: 14px 6px; background: rgba(0,0,0,.88); }
.ad-drawer[hidden] { display: none; }
.ad-drawer-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 92px; }
.ad-keys { display: flex !important; justify-content: space-around; align-items: center; background: linear-gradient(#1a1a1a, #000) !important; }
.ad-keys button { width: 64px; height: 40px; border: 0; background: none; color: #ddd; font-size: 24px; border-radius: 6px; }
.ad-keys button:active { background: rgba(255,140,0,.6); }
.ad-shade { position: fixed; left: 0; right: 0; top: 0; z-index: 9600; max-height: 85%; overflow: auto; background: #1f1f1f; color: #fff; font: 15px "Droid Sans", Roboto, Arial, sans-serif; box-shadow: 0 6px 20px #000; animation: ad-shade .2s ease-out; }
@keyframes ad-shade { from { transform: translateY(-100%); } }
.ad-shade-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: linear-gradient(#4a4a4a, #2c2c2c); }
.ad-shade-h button { border: 1px solid #777; border-radius: 4px; background: linear-gradient(#666, #3a3a3a); color: #fff; padding: 4px 12px; }
.ad-shade-t { padding: 4px 12px; font-size: 13px; color: #aaa; background: #3a3a3a; }
.ad-shade-n { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #333; background: none; color: #fff; text-align: left; font: inherit; }
.ad-shade-n i { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 4px; background: #9fe03a; color: #000; font: bold 16px Arial, sans-serif; font-style: normal; }
.ad-shade-n b { display: block; } .ad-shade-n span { color: #aaa; font-size: 13px; }
.ad-shade-grip { height: 22px; background: linear-gradient(#3a3a3a, #222); border-top: 1px solid #555; }
/* Android apps: a dark title bar with the app's name on the left; controls in grey with orange selection */
body[data-phone="android"] .window > .titlebar { height: 32px; padding: 0 10px; display: flex; align-items: center; background: linear-gradient(#5d5d5d, #2f2f2f) !important; border-bottom: 1px solid #000;
  color: #fff; font: 16px "Droid Sans", Roboto, Arial, sans-serif; text-shadow: none; }
body[data-phone="android"] .window > .titlebar > .ico { display: inline-block !important; width: 22px; height: 22px; margin-right: 8px; }
body[data-phone="android"] .window > .titlebar > .tbtns { display: none !important; }
body[data-phone="android"] .window .menubar { display: none; }
body[data-phone="android"] .window .wbody, body[data-phone="android"] .window .wbody * { font-family: "Droid Sans", Roboto, Arial, sans-serif; }
body[data-phone="android"] .window .wbody .term, body[data-phone="android"] .window .wbody .term * { font-family: "Droid Sans Mono", "DejaVu Sans Mono", monospace; }
body[data-phone="android"] .btn { min-height: 38px; padding: 4px 16px; border-radius: 6px; border: 1px solid #9a9a9a; background: linear-gradient(#fafafa, #dcdcdc); color: #000; font-size: 15px; box-shadow: none; }
body[data-phone="android"] .btn:active, body[data-phone="android"] .btn.pressed { background: linear-gradient(#ffb44a, #ff8a00); border-color: #c06400; }
body[data-phone="android"] input.field, body[data-phone="android"] select.field, body[data-phone="android"] textarea { min-height: 34px; border-radius: 5px; border: 1px solid #999; background: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); font-size: 15px; }
body[data-phone="android"] input.field:focus, body[data-phone="android"] textarea:focus { outline: 2px solid #ff8a00; }
body[data-phone="android"] .tab { background: linear-gradient(#6a6a6a, #3a3a3a) !important; color: #ddd; border: 0 !important; border-radius: 0 !important; padding: 8px 6px; }
body[data-phone="android"] .tab.on { background: linear-gradient(#9a9a9a, #6a6a6a) !important; color: #fff; box-shadow: inset 0 -3px 0 #ff8a00 !important; }
body[data-phone="android"] table.list tr.sel td { background: linear-gradient(#ffb44a, #ff8a00) !important; color: #000; }
body[data-phone="android"] .raised, body[data-phone="android"] .sunken { box-shadow: none; border: 1px solid #ccc; border-radius: 4px; }
/* the long-press menu: a dark dialog with a list (no cancel button on Android: tap outside, or Back) */
.ph-sheet-ov[data-shell="android"] .ph-sheet { left: 24px; right: 24px; top: 50%; bottom: auto; transform: translateY(-50%) scale(.95); opacity: 0; transition: transform .15s, opacity .15s;
  padding: 0; gap: 0; border: 1px solid #555; border-radius: 6px; background: #2b2b2b; box-shadow: 0 6px 30px #000; max-height: 70%; }
.ph-sheet-ov[data-shell="android"].on .ph-sheet { transform: translateY(-50%); opacity: 1; }
.ph-sheet-ov[data-shell="android"] .ph-sheet-btn { min-height: 52px; border: 0; border-bottom: 1px solid #444; border-radius: 0; background: none; color: #fff; text-align: left; padding: 0 18px; font: 18px "Droid Sans", Roboto, Arial, sans-serif; }
.ph-sheet-ov[data-shell="android"] .ph-sheet-btn:active:not(:disabled) { background: linear-gradient(#ffb44a, #ff8a00); filter: none; }
.ph-sheet-ov[data-shell="android"] .ph-sheet-btn:disabled { color: #777; } .ph-sheet-ov[data-shell="android"] .ph-sheet-btn.cancel { display: none; }
.ph-sheet-ov[data-shell="android"] .ph-sheet-btn.back { color: #ff8a00; }
.ph-alert-ov[data-shell="android"] .ph-alert { border-radius: 6px; border: 1px solid #555; background: #2b2b2b; text-align: left; padding: 0; font-family: "Droid Sans", Roboto, Arial, sans-serif; text-shadow: none; }
.ph-alert-ov[data-shell="android"] .ph-alert b { padding: 12px 14px; margin: 0; border-bottom: 2px solid #ff8a00; font-size: 18px; }
.ph-alert-ov[data-shell="android"] .ph-alert p { padding: 10px 14px 0; font-size: 15px; color: #ddd; }
.ph-alert-ov[data-shell="android"] .ph-alert-btns { padding: 8px; background: #3c3c3c; margin: 8px 0 0; }
.ph-alert-ov[data-shell="android"] .ph-alert-btns button { border-radius: 6px; border: 1px solid #999; background: linear-gradient(#fafafa, #dcdcdc); color: #000; text-shadow: none; font-weight: normal; }
.ph-lock[data-shell="android"] { background: #000; }
.ph-lock[data-shell="android"] .ph-lock-top, .ph-lock[data-shell="android"] .ph-lock-bottom { background: none; border: 0; }
.ph-lock[data-shell="android"] .ph-lock-time { font: 300 72px "Droid Sans", Roboto, Arial, sans-serif; } .ph-lock[data-shell="android"] .ph-lock-art { background: radial-gradient(ellipse at 50% 60%, #102838, #000 70%); }
.ph-lock[data-shell="android"] .ph-track { border-radius: 30px; background: #222; border: 1px solid #444; }
.ph-lock[data-shell="android"] .ph-knob { border-radius: 26px; background: linear-gradient(#bfe86a, #6fb700); color: #183400; }
.ph-lock[data-shell="android"] .ph-slide { background: none; color: #888; -webkit-background-clip: border-box; background-clip: border-box; animation: none; font-family: "Droid Sans", Roboto, Arial, sans-serif; }

/* ======================================================================== BlackBerry OS 5 */
body[data-phone="blackberry"] { --ph-top: 18px; --ph-chin: 58px; }
.ph-wall[data-wall="bbblue"] { background: radial-gradient(ellipse at 50% 35%, #3a7bd5 0%, #12345f 40%, #061428 75%); }
.ph-wall[data-wall="bbblue"]::before { display: block; height: 60%; bottom: 0; transform: none; animation: none; background: radial-gradient(ellipse 120% 60% at 50% 100%, rgba(120,190,255,.25), transparent 70%); }
.bb-status { height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 6px; background: #000; color: #ccc; font: 11px Tahoma, "BBAlpha Sans", Arial, sans-serif; }
.bb-status .ph-time { position: static; transform: none; font-weight: normal; }
.bb-home { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; color: #fff; font: 14px Tahoma, "BBAlpha Sans", Arial, sans-serif; }
.bb-top { display: flex; justify-content: space-between; padding: 12px 12px 4px; text-shadow: 0 1px 3px #000; }
.bb-time { display: block; font: 44px/1 Tahoma, Arial, sans-serif; } .bb-date { font-size: 14px; color: #cde; }
.bb-carrier { display: flex; gap: 5px; align-items: center; font-size: 12px; } .bb-carrier .ph-bars b { background: #fff; }
.bb-notes { display: flex; gap: 14px; padding: 4px 12px; font-size: 13px; color: #cfe2ff; }
.bb-dockwrap { margin-top: auto; padding-bottom: 6px; }
.bb-focus-l { text-align: center; font: bold 15px Tahoma, Arial, sans-serif; text-shadow: 0 1px 3px #000; margin-bottom: 6px; }
.bb-dock { display: grid; grid-template-columns: repeat(6, 1fr); padding: 8px 4px; background: linear-gradient(rgba(255,255,255,.15), rgba(0,0,0,.55)); border-top: 1px solid rgba(255,255,255,.3); }
.bb-app { display: flex; flex-direction: column; align-items: center; background: none; border: 2px solid transparent; border-radius: 8px; padding: 4px 0; color: #fff; outline: none; }
.bb-app .ph-lbl { display: none; } .bb-all .bb-app .ph-lbl { display: block; font: 11px Tahoma, Arial, sans-serif; margin-top: 3px; }
.bb-app:focus, .bb-app:focus-visible { border-color: #4aa3ff; background: radial-gradient(rgba(74,163,255,.45), rgba(74,163,255,.1)); box-shadow: 0 0 10px #4aa3ff; }
.bb-app .ad-ic { width: 42px; height: 42px; } .bb-app .ad-ic img, .bb-app .ad-ic .ph-glyph { width: 40px; height: 40px; }
.bb-allic { font-size: 30px; color: #fff; }
.bb-all { position: absolute; inset: 0; z-index: 2; overflow-y: auto; background: rgba(4,12,26,.92); padding: 8px; }
.bb-all[hidden] { display: none; }
.bb-all-t { color: #fff; font: bold 16px Tahoma, Arial, sans-serif; padding: 4px 6px 8px; border-bottom: 1px solid #2a4a7a; margin-bottom: 8px; }
.bb-all-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 84px; }
.bb-keys { display: flex !important; justify-content: space-around; align-items: center; padding: 0 6px; background: linear-gradient(#3a3a3a, #0a0a0a 45%, #1a1a1a) !important; border-top: 1px solid #555; }
.bb-keys button { height: 40px; border: 0; background: none; color: #ddd; font-size: 22px; border-radius: 6px; }
.bb-keys .send { color: #4cd04c; width: 54px; } .bb-keys .end { color: #e53a2a; width: 54px; transform: rotate(135deg); } .bb-keys .esc { width: 54px; }
.bb-keys .pad { width: 52px; height: 36px; border-radius: 10px; background: radial-gradient(circle at 50% 35%, #e8e8e8, #8a8a8a 70%, #555); box-shadow: inset 0 1px 2px #fff, 0 0 0 2px #222; }
.bb-logo { display: grid; grid-template-columns: repeat(3, 6px); gap: 2px; } .bb-logo b { width: 6px; height: 5px; border-radius: 2px; background: #ddd; } .bb-logo b:nth-child(1) { grid-column: 2; }
.bb-keys .menu { width: 54px; display: grid; place-items: center; }
/* BlackBerry apps: a dark header with the app's name, a blue line, blue selection */
body[data-phone="blackberry"] .window > .titlebar { height: 28px; padding: 0 10px; display: flex; align-items: center; background: linear-gradient(#4a4a4a, #111) !important; border-bottom: 2px solid #2a7de1;
  color: #fff; font: bold 15px Tahoma, "BBAlpha Sans", Arial, sans-serif; text-shadow: none; }
body[data-phone="blackberry"] .window > .titlebar > .tbtns, body[data-phone="blackberry"] .window > .titlebar > .ico { display: none !important; }
body[data-phone="blackberry"] .window .menubar { display: none; }
body[data-phone="blackberry"] .window .wbody, body[data-phone="blackberry"] .window .wbody * { font-family: Tahoma, "BBAlpha Sans", Arial, sans-serif; }
body[data-phone="blackberry"] .window .wbody .term, body[data-phone="blackberry"] .window .wbody .term * { font-family: "Lucida Console", "DejaVu Sans Mono", monospace; }
body[data-phone="blackberry"] .btn { min-height: 34px; padding: 3px 14px; border-radius: 4px; border: 1px solid #777; background: linear-gradient(#f4f4f4, #c8c8c8); color: #000; box-shadow: none; }
body[data-phone="blackberry"] .btn:focus, body[data-phone="blackberry"] .btn:active { background: linear-gradient(#6cb0ff, #1f6fd6); color: #fff; border-color: #1452a8; }
body[data-phone="blackberry"] table.list tr.sel td, body[data-phone="blackberry"] .list .sel { background: linear-gradient(#6cb0ff, #1f6fd6) !important; color: #fff; }
body[data-phone="blackberry"] input.field, body[data-phone="blackberry"] textarea { border: 1px solid #888; border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
body[data-phone="blackberry"] .raised, body[data-phone="blackberry"] .sunken { box-shadow: none; border: 1px solid #bbb; border-radius: 3px; }
/* the BlackBerry menu: a white list that pops up from the left, blue highlight */
.ph-sheet-ov[data-shell="blackberry"] { background: none !important; }
.ph-sheet-ov[data-shell="blackberry"] .ph-sheet { left: 6px; right: auto; width: 62%; bottom: calc(var(--ph-chin) + 6px); padding: 3px 0; gap: 0; border: 1px solid #555; border-radius: 4px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.6); transform: translateY(12px); opacity: 0; transition: transform .12s, opacity .12s; }
.ph-sheet-ov[data-shell="blackberry"].on .ph-sheet { transform: none; opacity: 1; }
.ph-sheet-ov[data-shell="blackberry"] .ph-sheet-btn { min-height: 34px; border: 0; border-radius: 0; background: none; color: #000; text-align: left; padding: 0 12px; font: 15px Tahoma, Arial, sans-serif; box-shadow: none; }
.ph-sheet-ov[data-shell="blackberry"] .ph-sheet-btn:hover:not(:disabled), .ph-sheet-ov[data-shell="blackberry"] .ph-sheet-btn:focus { background: linear-gradient(#6cb0ff, #1f6fd6); color: #fff; outline: none; filter: none; }
.ph-sheet-ov[data-shell="blackberry"] .ph-sheet-btn.cancel { margin: 0; border-top: 1px solid #ccc; color: #000; text-shadow: none; background: none; }
.ph-sheet-ov[data-shell="blackberry"] .ph-sheet-btn.back { color: #1f6fd6; background: none; }
.ph-alert-ov[data-shell="blackberry"] .ph-alert { border-radius: 6px; border: 1px solid #888; background: rgba(40,40,40,.95); text-align: left; font-family: Tahoma, Arial, sans-serif; text-shadow: none; }
.ph-alert-ov[data-shell="blackberry"] .ph-alert-btns button { border-radius: 4px; border: 1px solid #777; background: linear-gradient(#f4f4f4, #c8c8c8); color: #000; text-shadow: none; font-weight: normal; }
.ph-alert-ov[data-shell="blackberry"] .ph-alert-btns button:focus, .ph-alert-ov[data-shell="blackberry"] .ph-alert-btns button:hover { background: linear-gradient(#6cb0ff, #1f6fd6); color: #fff; }
/* Talk to Gregory as BBM */
body[data-phone="blackberry"] .talk-log { background: #fff; }
body[data-phone="blackberry"] .talk-msg .talk-text { background: none !important; border: 0 !important; padding: 2px 4px; font: 15px Tahoma, Arial, sans-serif !important; color: #000; }
body[data-phone="blackberry"] .talk-msg.assistant .talk-text::before { content: "Gregory: "; color: #1f6fd6; font-weight: bold; }
body[data-phone="blackberry"] .talk-msg.user .talk-text::before { content: "Me: "; color: #c0392b; font-weight: bold; }
body[data-phone="blackberry"] .talk-msg { max-width: 100%; align-self: stretch; border-bottom: 1px dotted #ccc; } body[data-phone="blackberry"] .talk-msg .ico { display: none; }

/* the iPhone's default wallpaper: Coleman's own photograph of two dewy blades of grass (static/phone/mine/, logged-in
   sessions only), cropped close, kept gently alive like a modern Mac's wallpaper: a slow drift and zoom, sunlight
   passing over, a cloud's shadow, and the dew glinting. Compositor-only (transforms and opacity). */
.ph-wall[data-wall="grass"] { background: #1d3a12 url("phone/mine/dew-blades.jpg?v=2") center / cover no-repeat; animation: ph-drift 46s ease-in-out infinite alternate; transform-origin: 46% 52%; }
@keyframes ph-drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-1.6%, 1.2%); } }
.ph-wall[data-wall="grass"]::before { display: block; content: ""; left: -40%; right: auto; top: -20%; bottom: auto; width: 90%; height: 140%; transform: none;
  background: radial-gradient(ellipse at center, rgba(255,246,214,.38), rgba(255,246,214,.12) 35%, transparent 65%); mix-blend-mode: soft-light;
  animation: ph-sun 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes ph-sun { from { transform: translate(0, 0); } to { transform: translate(95%, 18%); } }
.ph-wall[data-wall="grass"]::after { display: block; content: ""; inset: -30% -60%; height: auto; background: radial-gradient(ellipse 45% 35% at 50% 50%, rgba(0,20,0,.38), transparent 70%);
  mix-blend-mode: multiply; animation: ph-cloud 34s linear infinite; transform: translateX(-60%); will-change: transform; }
@keyframes ph-cloud { from { transform: translateX(-55%); } to { transform: translateX(55%); } }
.ph-wall[data-wall="grass"] > b { display: none; }
.ph-wall[data-wall="grass"] > i { display: block; left: 0; right: 0; top: 0; bottom: 0; width: auto; transform: none; animation: none; pointer-events: none;
  background: radial-gradient(circle at 26% 53%, rgba(255,255,255,.95) 0 1.8px, transparent 5px), radial-gradient(circle at 41% 40%, rgba(255,255,255,.95) 0 1.8px, transparent 5px), radial-gradient(circle at 46% 35%, rgba(255,255,255,.95) 0 1.8px, transparent 5px), radial-gradient(circle at 15% 67%, rgba(255,255,255,.95) 0 1.8px, transparent 5px), radial-gradient(circle at 56% 52%, rgba(255,255,255,.95) 0 1.8px, transparent 5px), radial-gradient(circle at 74% 47%, rgba(255,255,255,.95) 0 1.8px, transparent 5px), radial-gradient(circle at 89% 44%, rgba(255,255,255,.95) 0 1.8px, transparent 5px), radial-gradient(circle at 43% 66%, rgba(255,255,255,.95) 0 1.8px, transparent 5px), radial-gradient(circle at 33% 75%, rgba(255,255,255,.95) 0 1.8px, transparent 5px);
  animation: ph-glint 3.8s ease-in-out infinite; }
.ph-wall[data-wall="grass"] > i::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 41% 40%, rgba(255,255,255,.7), transparent 2.6%), radial-gradient(circle at 74% 47%, rgba(255,255,255,.6), transparent 2.4%), radial-gradient(circle at 26% 53%, rgba(255,255,255,.6), transparent 2.4%);
  animation: ph-glint 5.3s ease-in-out -2s infinite; }
@keyframes ph-glint { 0%, 100% { opacity: .15; } 45% { opacity: 1; } 60% { opacity: .5; } }
.ph-swatch[data-wall="grass"] { background: url("phone/mine/dew-blades.jpg?v=2") center / cover; }
/* the stock photograph, kept as "Morning Dew" */
.ph-wall[data-wall="stockdew"] { background: #1d3a12 url("phone/grass-dew.jpg") center / cover no-repeat; animation: ph-drift 46s ease-in-out infinite alternate; }
.ph-swatch[data-wall="stockdew"] { background: url("phone/grass-dew.jpg") center / cover; }
@media (prefers-reduced-motion: reduce) { .ph-wall[data-wall="grass"], .ph-wall[data-wall="grass"]::before, .ph-wall[data-wall="grass"]::after, .ph-wall[data-wall="grass"] > i, .ph-wall[data-wall="grass"] > i::after { animation: none; } }
/* three of the user's own prairie photographs (static/phone/mine/, served to logged-in sessions only), gently drifting */
.ph-wall[data-wall="pond"], .ph-wall[data-wall="road"], .ph-wall[data-wall="elevator"] { background-position: center; background-size: cover; animation: ph-drift 50s ease-in-out infinite alternate; }
.ph-wall[data-wall="pond"] { background-image: url("phone/mine/pond.jpg"); } .ph-wall[data-wall="road"] { background-image: url("phone/mine/road.jpg"); } .ph-wall[data-wall="elevator"] { background-image: url("phone/mine/elevator.jpg"); }
.ph-wall[data-wall="pond"]::before, .ph-wall[data-wall="road"]::before, .ph-wall[data-wall="elevator"]::before { display: block; content: ""; left: -40%; right: auto; top: -20%; bottom: auto; width: 90%; height: 140%; transform: none;
  background: radial-gradient(ellipse at center, rgba(255,240,205,.32), transparent 62%); mix-blend-mode: soft-light; animation: ph-sun 26s ease-in-out infinite alternate; }
.ph-swatch[data-wall="pond"] { background: url("phone/mine/pond.jpg") center / cover; } .ph-swatch[data-wall="road"] { background: url("phone/mine/road.jpg") center / cover; } .ph-swatch[data-wall="elevator"] { background: url("phone/mine/elevator.jpg") center / cover; }