/* iPhone OS 3 (iPhone 3GS, 2009) phone skin: black springboard, glossy icons, grey dock shelf, blue-grey nav bars, pinstripe grouped tables */
:root { --stripe: repeating-linear-gradient(90deg, #c5ccd4 0 5px, #cfd5dc 5px 7px); }

#phone-root { background: #000; display: flex; justify-content: center; font-family: var(--ui); }
.ios { position: relative; width: min(100vw, 480px); height: 100%; overflow: hidden; background: #000; font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif; color: #000; -webkit-user-select: none; user-select: none; touch-action: manipulation; --chin: calc(50px + env(safe-area-inset-bottom, 0px)); --chinw: 0px; --ico: 60px; --dock-h: 92px; --home: 0px; --sbh: calc(20px + env(safe-area-inset-top, 0px)); }
.ios input, .ios textarea { -webkit-user-select: text; user-select: text; }
.scr { position: absolute; inset: 0 var(--chinw) var(--chin) 0; overflow: hidden; background: #000; }
.wp-wrap { position: absolute; inset: 0; }

/* status bar */
.sb { position: absolute; z-index: 120; top: 0; left: 0; right: var(--chinw); height: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; color: #fff; font-size: 12px; font-weight: bold; text-shadow: 0 -1px 0 rgba(0,0,0,.7); background: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.48)); border-bottom: 1px solid rgba(0,0,0,.4); padding-top: env(safe-area-inset-top, 0); box-sizing: content-box; pointer-events: none; }
.sb > span { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; min-width: 70px; }
.sb-c { justify-content: center; }
.sb-r { justify-content: flex-end; }
.bars { display: flex; gap: 1px; align-items: flex-end; height: 9px; font-style: normal; }
.bars u { width: 3px; background: #fff; display: block; text-decoration: none; }
.bars u:nth-child(1) { height: 3px; } .bars u:nth-child(2) { height: 4.5px; } .bars u:nth-child(3) { height: 6px; } .bars u:nth-child(4) { height: 7.5px; } .bars u:nth-child(5) { height: 9px; opacity: .45; }
.batt { width: 22px; height: 10px; border: 1px solid #fff; border-radius: 2.5px; padding: 1px; display: block; position: relative; }
.batt::after { content: ""; position: absolute; right: -3px; top: 2.5px; width: 2px; height: 4px; background: #fff; border-radius: 0 1px 1px 0; }
.batt u { display: block; height: 100%; width: 80%; background: #fff; border-radius: 1px; }

/* lock screen: wallpaper, translucent black clock bar on top, slide-to-unlock bar at the bottom */
.lock { position: absolute; inset: 0; z-index: 80; background: #000; transition: opacity .5s ease, transform .6s var(--ease); }
.lock.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.wp-shade.lk { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,0) 40%, rgba(0,0,0,.3)); }
.lk-band { position: absolute; top: var(--sbh); left: 0; right: 0; height: 104px; text-align: center; color: #fff; padding-top: 12px; background: linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.5)); border-bottom: 1px solid rgba(255,255,255,.22); }
.lk-time { font-size: 62px; font-weight: bold; line-height: 1; letter-spacing: -.01em; text-shadow: 0 1px 0 #000; }
.lk-date { margin-top: 6px; font-size: 16px; font-weight: bold; color: #e6e6e6; text-shadow: 0 1px 0 #000; }
.lk-slider { position: absolute; left: 0; right: 0; bottom: var(--home); height: 104px; padding: 18px 14px 0; background: linear-gradient(rgba(40,40,44,.55), rgba(0,0,0,.78)); border-top: 1px solid rgba(255,255,255,.35); }
.lk-track { position: relative; height: 56px; border-radius: 9px; background: linear-gradient(#050506, #26272b 50%, #15161a 51%, #2b2c31); border: 1px solid #000; box-shadow: 0 1px 0 rgba(255,255,255,.28), 0 2px 8px rgba(0,0,0,.8) inset; overflow: hidden; cursor: pointer; }
.lk-txt { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 62px; font-size: clamp(17px, 5vw, 24px); white-space: nowrap; font-weight: 400; letter-spacing: .01em; background: linear-gradient(105deg, #7d828c 0%, #7d828c 38%, #fff 48%, #fff 52%, #7d828c 62%, #7d828c 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: shimmer 2.6s linear infinite; pointer-events: none; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -60% 0; } }
.lk-knob { position: absolute; left: 2px; top: 2px; width: 66px; height: 50px; border-radius: 7px; border: 1px solid #222; padding: 0; background: linear-gradient(#fafafb, #d6d8dc 49%, #b3b6bd 50%, #d9dbe0); box-shadow: 0 1px 0 #fff inset, 0 2px 4px rgba(0,0,0,.7); cursor: grab; touch-action: none; display: grid; place-items: center; animation: knobnudge 2.4s ease-in-out infinite; }
.lk-knob svg { width: 28px; height: 28px; }
@keyframes knobnudge { 0%, 70%, 100% { margin-left: 0; } 85% { margin-left: 10px; } }
.lk-cap { position: absolute; left: 0; right: 0; bottom: calc(var(--home) + 7px); text-align: center; font-size: 12px; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.9); pointer-events: none; z-index: 3; animation: lkcap 2.4s ease-in-out infinite; }
@keyframes lkcap { 50% { opacity: .45; } }

/* springboard: plain black, one page of glossy app icons, grey reflective dock shelf */
.home { position: absolute; inset: 0; background: #000; opacity: 0; transform: scale(1.08); transition: opacity .55s, transform .6s var(--ease); pointer-events: none; }
.home.in { opacity: 1; transform: none; pointer-events: auto; }
.home.under { filter: brightness(.6); transition: filter .3s; }
.pager { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.pager::-webkit-scrollbar { display: none; }
.pgx { flex: 0 0 100%; scroll-snap-align: start; position: relative; height: 100%; }
.pg-search { background: #1c2027 repeating-linear-gradient(90deg, #1c2027 0 5px, #232830 5px 7px); padding-top: calc(var(--sbh) + 4px); }
.ss-bar { padding: 7px 8px; background: linear-gradient(#a9b6c9, #7c8fac); border-bottom: 1px solid #3a4658; }
.ss-bar label { position: relative; display: flex; align-items: center; gap: 6px; background: #fff; height: 30px; border-radius: 15px; padding: 0 11px; box-shadow: 0 1px 3px rgba(0,0,0,.5) inset; }
.ss-bar label::before { content: ""; position: absolute; inset: -8px 0; }
.ss-bar input { border: 0; outline: 0; flex: 1; font-size: 15px; background: none; min-width: 0; }
.ss-res { background: #fff; color: #111; }
.ss-h { background: linear-gradient(#8a98ae, #6f7f98); color: #fff; font-size: 14px; font-weight: bold; padding: 2px 10px; text-shadow: 0 -1px 0 rgba(0,0,0,.4); }
.ss-r { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 44px; padding: 5px 10px; background: #fff; border: 0; border-bottom: 1px solid #ccc; font-size: 16px; text-align: left; }
.ss-r .ico { width: 34px; height: 34px; border-radius: 8px; }
.ss-none, .ss-egg { padding: 16px; text-align: center; color: #777; background: #fff; font-size: 18px; }
.sb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 0; padding: calc(var(--sbh) + 20px) 4px 0; }
.sbi { background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 2px 0; position: relative; color: #fff; cursor: pointer; transition: transform .38s var(--ease); }
.sbi .si { display: block; width: var(--ico); height: var(--ico); border-radius: calc(var(--ico) * .225); position: relative; }
.si .ico { filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.sbi:active .si { filter: brightness(.6); }
.sl { font-size: 11px; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,.9); max-width: 88px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbi { min-width: 0; }
.sbi .sl { max-width: calc(100% - 2px); font-size: 10.5px; }
.dots { position: absolute; left: 0; right: 0; bottom: calc(var(--home) + var(--dock-h) + 8px); display: flex; justify-content: center; gap: 8px; align-items: center; transition: opacity .3s; pointer-events: none; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); box-shadow: 0 1px 1px rgba(0,0,0,.6); }
.dots i.on { background: #fff; }
.dots i.mg { width: 8px; height: 8px; background: none; border: 1.5px solid rgba(255,255,255,.7); position: relative; border-radius: 50%; box-shadow: none; }
.sb-dock { position: absolute; left: 0; right: 0; bottom: var(--home); height: var(--dock-h); display: flex; justify-content: space-around; align-items: flex-start; padding: 12px 6px 0; background: linear-gradient(#b4b9c1 0, #b4b9c1 1px, #6a6e76 1px, #3c3f45 6px, #25272b 48%, #131416 49%, #08080a); box-shadow: 0 -2px 10px rgba(0,0,0,.7); transition: transform .38s var(--ease); }
.sb-dock::before { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 46%; background: linear-gradient(rgba(255,255,255,.26), rgba(255,255,255,.03)); pointer-events: none; }
.sb-dock .sbi { z-index: 1; }
.sb-dock .sbi::after { content: ""; position: absolute; left: 50%; top: calc(2px + var(--ico)); width: var(--ico); height: 14px; margin-left: calc(var(--ico) / -2); background: linear-gradient(rgba(255,255,255,.22), transparent); opacity: .55; border-radius: 0 0 14px 14px; pointer-events: none; }

/* jiggle (edit mode, new in OS 3 too) */
.x { display: none; position: absolute; top: -4px; left: 6px; z-index: 5; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 50% 25%, #8c8c8c, #1c1c1c); border: 1.5px solid #fff; box-shadow: 0 1px 3px #000; color: #fff; font: bold 17px/19px Arial, sans-serif; text-align: center; }
.home.jig .x { display: block; }
.home.jig .sbi { animation: jiggle .26s ease-in-out infinite alternate; animation-delay: var(--d); }
.home.jig .sbi:nth-child(2n) { animation-name: jiggle2; }
@keyframes jiggle { from { transform: rotate(-2deg) translateY(.4px); } to { transform: rotate(2deg) translateY(-.4px); } }
@keyframes jiggle2 { from { transform: rotate(2deg); } to { transform: rotate(-2deg) translateY(.5px); } }
.sbi.bump { animation: bump .35s ease-out !important; }
@keyframes bump { 30% { transform: scale(1.12) rotate(5deg); } 60% { transform: scale(.94) rotate(-4deg); } }

/* home button in the black chin */
.chin { position: absolute; z-index: 130; left: 0; right: 0; bottom: 0; height: var(--chin); display: flex; justify-content: center; align-items: flex-start; padding-top: 6px; background: linear-gradient(#1b1c20, #050506 45%, #000); border-top: 1px solid #000; box-shadow: 0 -1px 0 rgba(255,255,255,.08); }
.chin .homebtn { flex: none; }
.homebtn { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 18%, #52555b, #131417 62%, #000); box-shadow: 0 0 0 2px rgba(255,255,255,.32), 0 0 0 3px rgba(0,0,0,.9), 0 1px 1px rgba(255,255,255,.45) inset; cursor: pointer; }
.homebtn::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.homebtn i { display: block; width: 14px; height: 14px; border: 1.5px solid #aaa; border-radius: 3.5px; }
.homebtn:active { transform: scale(.94); filter: brightness(1.4); }

/* app shell + the one blue-grey navigation bar used everywhere */
.apps { position: absolute; inset: 0; z-index: 100; pointer-events: none; }
.app { position: absolute; inset: 0; pointer-events: auto; background: var(--stripe), #c5ccd4; display: flex; flex-direction: column; padding-top: var(--sbh); overflow: hidden; will-change: transform; }
.nb { flex: none; position: relative; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 8px; background: linear-gradient(#a9b9d0, #8da1be 49%, #7b92b3 50%, #6d84a2); border-bottom: 1px solid #2e3a4d; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 1px 3px rgba(0,0,0,.45); z-index: 4; margin-top: -20px; padding-top: 20px; box-sizing: content-box; }
.nb h1 { margin: 0; font-size: 20px; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.45); font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56%; }
.nb-back { position: absolute; left: 6px; bottom: 7px; height: 30px; display: flex; align-items: stretch; background: none; border: 0; padding: 0; color: #fff; font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,.5); }
.nb-tip { display: block; flex: none; width: 14px; height: 30px; margin-right: -1px; }
.nb-tip path:first-child { fill: url(#nbg); }
.nb-back span { display: flex; align-items: center; padding: 0 9px 0 2px; border: 1px solid #2d405f; border-left: 0; border-radius: 0 5px 5px 0; background: linear-gradient(#9fb2cf, #6c86ae 50%, #587499 51%, #6a86ad); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-back:active .nb-tip, .nb-back:active span { filter: brightness(.8); }
.nb-btn { position: absolute; left: 8px; bottom: 7px; height: 30px; padding: 0 10px; border: 1px solid #2d405f; border-radius: 5px; background: linear-gradient(#9fb2cf, #6c86ae 50%, #587499 51%, #6a86ad); color: #fff; font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,.5); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset; }
.nb-back::before, .nb-btn::before { content: ""; position: absolute; inset: -8px -6px; }

/* grouped table views on the pinstripe background */
.tv { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; background: var(--stripe), #c5ccd4; }
.tv-in { padding: 12px 0 0; }
.tv-pad { height: calc(var(--home) + 20px); }
.grp { display: block; margin: 0 10px 14px; background: #fff; border: 1px solid #a9afb9; border-radius: 9px; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.8); width: calc(100% - 20px); font-family: inherit; }
.gh { margin: 14px 18px 7px; font-size: 16px; font-weight: bold; color: #4c566c; text-shadow: 0 1px 0 #fff; }
.row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; min-height: 44px; border-top: 1px solid #c8cbd0; font-size: 16px; line-height: 1.35; background: #fff; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; color: #111; }
.row:first-child { border-top: 0; }
.row.txt { font-size: 15px; display: block; }
.row.tags { flex-wrap: wrap; gap: 6px; }
.row .num { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(#9fb2cf, #567299); color: #fff; font-size: 13px; font-weight: bold; display: grid; place-items: center; flex: none; text-shadow: 0 -1px 0 rgba(0,0,0,.4); }
.row .rt { flex: 1; }
.row .val { color: #385487; font-size: 15px; text-align: right; max-width: 60%; }
.row.sel { cursor: pointer; }
.row:active.sel { background: linear-gradient(#5b9cf0, #2a6fd8); color: #fff; }
.row .ck { color: #385487; font-style: normal; font-weight: bold; font-size: 20px; }
a.row { text-decoration: none; }
.foot { text-align: center; color: #4c566c; font-size: 13px; margin: 8px 20px; text-shadow: 0 1px 0 #fff; }
.tagp { padding: 3px 10px; border-radius: 11px; background: linear-gradient(#f6f8fb, #dfe4ec); border: 1px solid #a9b2c0; font-size: 12px; color: #334; }
.app-head { display: flex; gap: 12px; align-items: center; padding: 2px 16px 12px; }
.si.lg { width: 72px; height: 72px; flex: none; display: block; }
.app-head h2 { margin: 0; font-size: 22px; text-shadow: 0 1px 0 #fff; }
.app-head p { margin: 3px 0 0; color: #5b6578; font-size: 14px; text-shadow: 0 1px 0 #fff; }

/* career: Settings-style table, drill-down detail */
.row.nav { cursor: pointer; padding-right: 30px; position: relative; }
.row.nav::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -5px; border-right: 3px solid #8892a3; border-top: 3px solid #8892a3; transform: rotate(45deg); }
.row.nav .rt b { display: block; font-size: 17px; }
.row.nav .rt small { display: block; margin-top: 1px; font-size: 13px; color: #6b7487; line-height: 1.3; }
.row.nav:active { background: linear-gradient(#5b9cf0, #2a6fd8); }
.row.nav:active .rt b, .row.nav:active .rt small { color: #fff; }
.cdetail { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; padding-top: var(--sbh); background: var(--stripe), #c5ccd4; }
.cd-head { text-align: center; padding: 4px 18px 6px; }
.cd-head h2 { margin: 0; font-size: 24px; text-shadow: 0 1px 0 #fff; }
.cd-head p { margin: 3px 0 0; color: #4c566c; font-size: 14px; text-shadow: 0 1px 0 #fff; }
.row.hl { display: block; font-size: 15px; }
.gh small { font-weight: normal; font-size: 13px; margin-left: 8px; color: #6b7487; }

/* contacts-style info card (About, Contact) */
.ci-head { display: flex; gap: 14px; align-items: center; padding: 6px 16px 10px; }
.ci-av { width: 72px; height: 72px; flex: none; border-radius: 9px; background: radial-gradient(circle at 50% 25%, #43464e, #0e0f12); color: #fff; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.55); position: relative; overflow: hidden; }
.ci-av::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.04)); }
.ci-av .logo { height: 18px; }
.ci-head h2 { margin: 0; font-size: 22px; text-shadow: 0 1px 0 #fff; }
.ci-head p { margin: 3px 0 0; font-size: 13px; color: #4c566c; line-height: 1.35; text-shadow: 0 1px 0 #fff; }
.ci-row { display: flex; gap: 12px; align-items: baseline; padding: 9px 12px; min-height: 44px; border-top: 1px solid #c8cbd0; font-size: 16px; line-height: 1.35; color: #111; }
.ci-row:first-child { border-top: 0; }
.ci-row label { width: 74px; flex: none; text-align: right; color: #385487; font-size: 12.5px; font-weight: bold; }
.ci-row span, .ci-row a { flex: 1; min-width: 0; }
.ci-row a { color: #1f4f9a; word-break: break-word; }
.ci-row.j b { font-weight: bold; }
.ci-skills { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 12px; }
.btn-w { display: flex; align-items: center; justify-content: center; width: calc(100% - 20px); margin: 0 10px 14px; min-height: 48px; border-radius: 9px; border: 1px solid #a9afb9; background: linear-gradient(#fff, #e9ebee 50%, #dcdfe4 51%, #eef0f2); color: #111; font: bold 17px "Helvetica Neue", Helvetica, Arial, sans-serif; box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 1px 0 #fff inset; }
.btn-w:active { background: linear-gradient(#5b9cf0, #2a6fd8); color: #fff; }

/* notes: yellow legal pad (this one was right in 2009) */
.notes-app { background: #f7f0b8; }
.pad-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fbf3b4; }
.pad { min-height: 100%; padding: 6px 16px 0 38px; position: relative; background-image: repeating-linear-gradient(transparent 0 33px, rgba(80,130,190,.55) 33px 34px); background-position: 0 6px; background-color: #fbf3b4; box-shadow: 0 0 40px rgba(180,150,40,.35) inset; }
.pad::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; width: 1px; background: rgba(220,80,80,.5); }
.pad-d { text-align: center; font: bold 13px/34px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #b09a4a; }
.pad-t { font: 22px/34px "Marker Felt", "Kalam", "Segoe Print", "Bradley Hand", cursive; color: #2f2a1c; white-space: pre-wrap; }

/* project screen + demo */
.launch6 { display: flex; align-items: center; justify-content: center; gap: 10px; width: calc(100% - 20px); margin: 2px 10px 4px; height: 52px; border-radius: 10px; border: 1px solid #1f4a94; background: linear-gradient(#86b6f7, #4585e4 50%, #2565cf 51%, #3f82e2); color: #fff; font: bold 19px "Helvetica Neue", Helvetica, Arial, sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,.45); box-shadow: 0 1px 0 rgba(255,255,255,.65) inset, 0 2px 5px rgba(0,0,0,.3); }
.launch6:active { filter: brightness(.82); }
.demo-screen { position: absolute; inset: 0; z-index: 8; pointer-events: auto; display: flex; flex-direction: column; padding-top: var(--sbh); background: #fff; overflow: hidden; }
.demo-screen .nb h1 { max-width: 62%; font-size: 17px; }
.dm6 { flex: 1; min-height: 0; background: #fff; }
.dm6 iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

/* a11y */
.sbi:focus-visible .si, .lk-knob:focus-visible, .homebtn:focus-visible, .nb-back:focus-visible span, .nb-btn:focus-visible, .row:focus-visible, .btn-w:focus-visible { box-shadow: var(--focus); outline: 0; }
.nb-back:focus-visible { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .lk-txt { animation: none; -webkit-text-fill-color: #aab; } .home.jig .sbi { animation-duration: 1s; } .lk-cap, .lk-knob { animation: none; } }

/* wider windows (an iPad did not exist in 2009): the phone stays a phone, centred on black */
@media (min-width: 600px) and (min-height: 700px) {
  .ios { width: 420px; height: min(100%, 900px); margin: auto; border-radius: 0; box-shadow: 0 0 0 1px #222; }
  #phone-root { align-items: center; }
}

/* landscape phones: home button sits on the right, the springboard goes wide and short */
@media (max-height: 500px) and (min-width: 560px) {
  .ios { width: 100vw; height: 100%; margin: 0; --chin: 0px; --chinw: calc(54px + env(safe-area-inset-right, 0px)); --ico: 50px; --dock-h: 74px; --sbh: 20px; }
  .sb { padding-left: calc(6px + env(safe-area-inset-left, 0px)); padding-top: 0; }
  .chin { top: 0; bottom: 0; left: auto; right: 0; width: var(--chinw); height: auto; align-items: center; justify-content: center; padding: 0 env(safe-area-inset-right, 0px) 0 0; border-top: 0; border-left: 1px solid #000; background: linear-gradient(90deg, #1b1c20, #050506 45%, #000); box-shadow: 1px 0 0 rgba(255,255,255,.08) inset; }
  .scr { inset: 0 var(--chinw) 0 env(safe-area-inset-left, 0px); }
  .sb-grid { gap: 12px 0; padding: calc(var(--sbh) + 8px) 6% 0; }
  .sbi { gap: 3px; }
  .sbi .sl { font-size: 11px; }
  .sb-dock { padding-top: 5px; justify-content: center; gap: 7vw; }
  .sb-dock .sbi .si { width: 46px; height: 46px; }
  .sb-dock .sl { font-size: 10px; line-height: 12px; }
  .sb-dock .sbi::after { display: none; }
  .dots { bottom: calc(var(--dock-h) + 6px); }
  .lk-band { height: 74px; padding-top: 6px; } .lk-time { font-size: 44px; } .lk-date { font-size: 13px; margin-top: 3px; }
  .lk-slider { height: 80px; padding: 12px 14% 0; } .lk-track { height: 50px; } .lk-knob { height: 44px; width: 60px; }
  .lk-cap { display: none; }
    .tv-in { max-width: 640px; margin: 0 auto; }
  .grp { margin-left: 0; margin-right: 0; width: 100%; } .gh { margin-left: 8px; }
  .launch6 { width: 100%; margin: 2px 0 4px; height: 44px; }
  .btn-w { width: 100%; margin-left: 0; margin-right: 0; }
  .nb h1 { font-size: 18px; }
}

/* lock screen: iPhone OS 3 calendar alert (dark glass box under the clock) */
.lk-note { position: absolute; left: 14px; right: 14px; top: calc(var(--sbh) + 122px); display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px; color: #fff; background: linear-gradient(rgba(60,64,78,.88), rgba(18,20,28,.9) 52%, rgba(10,11,16,.92)); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 18px rgba(0,0,0,.6); text-shadow: 0 -1px 0 rgba(0,0,0,.6); animation: lknote .55s .5s var(--ease) both; }
.lk-cal { flex: none; width: 44px; height: 46px; border-radius: 8px; overflow: hidden; background: linear-gradient(#fff, #e6e6e6); box-shadow: 0 1px 2px rgba(0,0,0,.6); text-align: center; color: #222; text-shadow: none; }
.lk-cal b { display: block; height: 15px; font-size: 8px; letter-spacing: -.01em; line-height: 15px; text-transform: uppercase; color: #fff; background: linear-gradient(#e2554d, #b81f17); }
.lk-cal span { display: block; font-size: 24px; font-weight: bold; line-height: 31px; letter-spacing: -.03em; }
.lk-nt { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.3; }
.lk-nt strong { font-size: 15px; line-height: 1.25; }
.lk-nt span { color: #d8dbe3; }
.lk-nt em { font-style: normal; font-size: 11px; color: #9aa0ad; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
@keyframes lknote { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lk-note { animation: none; } }