/* Notch Stage (D17 section 3). Everything inside .screen is in macOS points on a 1512 x 982 display.
   The stage shows a crop (--cw x --ch points, centered on x --cx) and scales it with --k (set by js/notch.js). */
.stage {
  --cw: 1512; --ch: 600; --cx: 756; --k: .6;
  position: relative; aspect-ratio: var(--cw) / var(--ch); overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl); background: #05060a; box-shadow: var(--product-shadow);
  font: 400 13px/1.35 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: 0; color: var(--notch-text);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
/* 10px bezel drawn inside so the crop keeps its aspect ratio */
.stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 10px solid #000; pointer-events: none; z-index: 20;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.stage.flat { border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line); }
.stage.flat::after { border-width: 0; box-shadow: none; }
.stage.flat { --bz: 0px; }

/* --z is the camera: it zooms about the notch (x = --cx, y = 0) and eases like a dolly move. */
.screen { --kz: calc(var(--k) * var(--z, 1)); position: absolute; left: 50%; top: var(--bz, 10px); width: 1512px; height: 982px; transform-origin: 0 0;
  translate: calc(var(--cx) * var(--kz) * -1px) 0; scale: var(--kz); overflow: hidden;
  transition: translate var(--cam, 0ms) var(--ease-expo), scale var(--cam, 0ms) var(--ease-expo); }

/* Desktop */
/* Wallpaper: img/wall.webp, an original dusk scene rendered by hand for the site (Tools note in PLAN.md). */
.wall { position: absolute; inset: 0; background: url(../img/wall.webp) center / cover, linear-gradient(180deg, #12143a, #6b52b8 55%, #f2a9bf 66%, #2a2466);
  transition: filter var(--m-slow) var(--ease-inout); }
.stage[data-theme="dusk"] .wall { filter: hue-rotate(-38deg) saturate(1.25); }
.stage[data-theme="sea"] .wall { filter: hue-rotate(52deg) saturate(1.1) brightness(1.06); }
.mbar { position: absolute; left: 0; right: 0; top: 0; height: 32px; padding: 0 18px; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,.9);
  background: rgba(8,10,16,.55); }
.mbar span { margin-left: 18px; } .mbar div:first-child span { margin: 0 0 0 18px; }
.mbar b { font-weight: 600; }
.mbar .clock { font-variant-numeric: tabular-nums; }
.win { position: absolute; background: #1c1d22; border: 1px solid #2a2b31; border-radius: 12px; overflow: hidden;
  transition: translate var(--m-slow) var(--ease-quint), width var(--m-slow) var(--ease-quint), height var(--m-slow) var(--ease-quint), opacity var(--m-base); }
.win .bar { height: 36px; display: flex; gap: 8px; align-items: center; padding: 0 14px; border-bottom: 1px solid #26272c; }
.win .bar i { width: 12px; height: 12px; border-radius: 50%; background: #3a3b41; }
.win .ln { height: 9px; margin: 14px 18px 0; border-radius: 5px; background: #2a2b31; }
.dock { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; display: flex; gap: 10px; padding: 9px 12px; z-index: 2;
  border-radius: 22px; background: rgba(40,44,58,.55); border: 1px solid rgba(255,255,255,.12); }
.dock i { width: 52px; height: 52px; border-radius: 13px; display: block; }
.props { position: absolute; inset: 0; z-index: 3; }

/* Hardware notch and island. The island is one element that morphs width, height and bottom radius (WEB-N-1). */
.hw { position: absolute; left: 50%; top: 0; width: 190px; height: 32px; translate: -50% 0; background: #000; border-radius: 0 0 10px 10px; z-index: 4; }
.stage[data-notchless] .hw { opacity: 0; }
.isl { --sh: 6px; position: absolute; left: 50%; top: 0; width: 190px; height: 32px; translate: -50% 0; z-index: 5;
  border-radius: 0 0 10px 10px; color: var(--notch-text);
  background: linear-gradient(180deg, #000 0, #000 36px, rgba(6,7,12,.82) 84px, rgba(6,7,12,.72) 100%);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }
.isl[data-mode="open"], .isl[data-mode="drop"], .isl[data-mode="peek"] { box-shadow: inset 0 -1px 0 rgba(255,255,255,.1), 0 18px 40px -12px rgba(0,0,0,.7); }
/* Concave shoulders join the island to the top edge: min(14, height x 0.19) in the app (NotchSupport.swift) */
.isl::before, .isl::after { content: ""; position: absolute; top: 0; width: var(--sh); height: var(--sh); pointer-events: none;
  background: radial-gradient(circle at 0 100%, transparent var(--sh), #000 calc(var(--sh) + .5px)); left: calc(var(--sh) * -1); }
.isl::after { left: auto; right: calc(var(--sh) * -1); background: radial-gradient(circle at 100% 100%, transparent var(--sh), #000 calc(var(--sh) + .5px)); }
.isl[data-mode="open"], .isl[data-mode="peek"], .isl[data-mode="drop"] { --sh: 14px; }
/* Notchless Mac: the app draws a 180 point capsule (D14 3.2) */
/* No notch: a capsule centred inside the menu bar (NotchSupport.swift: capsule inset in the bar), wings grow sideways only */
.stage[data-notchless] .isl:is([data-mode="rest"], [data-mode="wings"]) { height: 24px !important; top: 4px; border-radius: 12px !important; }
.stage[data-notchless] .isl[data-mode="rest"] { width: 180px !important; }
.stage[data-notchless] .wl, .stage[data-notchless] .wr { height: 24px; }
.stage[data-notchless] .isl { top: 4px; border-top-left-radius: 15px; border-top-right-radius: 15px; --sh: 0px; }

.wl, .wr { position: absolute; top: 0; height: 32px; display: flex; align-items: center; gap: 7px; opacity: 0;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: opacity 140ms var(--ease-inout); }
.wl { left: 0; padding-left: 14px; } .wr { right: 0; padding-right: 14px; justify-content: flex-end; }
.isl[data-mode="wings"] .wl, .isl[data-mode="wings"] .wr,
.isl[data-mode="peek"] .wl, .isl[data-mode="peek"] .wr { opacity: 1; transition-delay: 200ms; transition-duration: 200ms; }
.ib { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.ib > .v { position: absolute; inset: 0; animation: vin 220ms 200ms var(--ease-out) both; }
.ib > .v.out { animation: vout 120ms var(--ease-inout) both; }
@keyframes vin { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes vout { to { opacity: 0; } }
.isl[data-mode="rest"] .ib, .isl[data-mode="wings"] .ib { visibility: hidden; }

/* Content inside the island */
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pad { position: absolute; left: 20px; right: 20px; top: 42px; bottom: 16px; }
.pad.pp-room { bottom: 58px; }
.row { display: flex; align-items: center; gap: 12px; }
.chipg { border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.t1 { font-weight: 600; font-size: 13px; } .t2 { font-size: 12px; color: var(--notch-text-2); }
.big { font: 600 26px/1 -apple-system, system-ui; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.peek-t.spot { padding: 0 22px; justify-content: flex-start; text-align: left; }
.peek-t.spot .ic { font-size: 22px; flex: none; }
.peek-t.spot small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 400; margin-top: 2px; }
.peek-t { position: absolute; left: 0; right: 0; top: 36px; display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--notch-text-2); flex: none; }
.dot.g { background: var(--notch-green); } .dot.a { background: var(--notch-amber); } .dot.r { background: var(--notch-red); }
.dot.pulse { animation: dotp 1.2s var(--ease-inout) infinite; }
@keyframes dotp { 50% { opacity: .35; } }
.art { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #1f4fbf, #6b3fb3 60%, #0e7490); flex: none; }
.art.lg { width: 52px; height: 52px; border-radius: 10px; }
.bars { display: flex; align-items: center; gap: 2.5px; height: 16px; }
.bars b { width: 3px; height: 6px; border-radius: 2px; background: var(--notch-teal); animation: eq 900ms ease-in-out infinite alternate; }
.bars b:nth-child(2) { animation-delay: -300ms; } .bars b:nth-child(3) { animation-delay: -600ms; } .bars b:nth-child(4) { animation-delay: -150ms; }
.paused .bars b { animation-play-state: paused; }
@keyframes eq { from { height: 4px; } to { height: 16px; } }
.ring { width: 18px; height: 18px; rotate: -90deg; }
.ring circle { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.ring .bg { stroke: rgba(255,255,255,.18); }
.ring .fg { stroke: currentColor; stroke-dasharray: 1; transition: stroke-dashoffset 1s linear; }

/* Glass buttons inside the notch (WEB-N-4). Hit area grows past the visible chip for touch. */
.nb { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 15px;
  font: 600 12px/1 -apple-system, system-ui; color: var(--notch-text); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14); cursor: pointer; transition: background var(--m-base), transform var(--m-fast) var(--ease-quint); }
.nb::after { content: ""; position: absolute; inset: -10px -4px; }
.nb:hover { background: rgba(255,255,255,.16); }
.nb:active, .nb.press { transform: scale(.94); }
.nb.pri { background: rgba(10,132,255,.78); border-color: rgba(255,255,255,.2); }
.nb.pri:hover { background: rgba(10,132,255,.92); }
.nb:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; border-radius: 15px; }

/* Page pill under the open panel (WEB-N-5) */
.pp { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; display: flex; gap: 2px; padding: 2px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.06); }
.pp button { height: 32px; padding: 0 14px; border-radius: 16px; font: 600 12px/1 -apple-system, system-ui; color: var(--notch-text-2); display: inline-flex; align-items: center; gap: 6px; position: relative; white-space: nowrap;
  transition: background var(--m-base), color var(--m-base); }
.pp button:hover { color: var(--notch-text); }
.pp button::after { content: ""; position: absolute; inset: -8px 0; }
.pp button[aria-pressed="true"] { background: rgba(255,255,255,.14); color: var(--notch-text); }
.pp .ic { font-size: 13px; }

/* Ghost pointer */
.ptr { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 9; opacity: 0; pointer-events: none; transition: opacity var(--m-base); filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.ptr.on { opacity: 1; }
.ptr.tap { animation: tap 260ms var(--ease-out); }
@keyframes tap { 40% { scale: .82; } }

/* Desk props */
.fileo { position: absolute; width: 112px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border-radius: 14px; cursor: grab; touch-action: none; }
.fileo > span:last-child { font-size: 12px; font-weight: 500; padding: 2px 7px; border-radius: 5px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.fileo:hover > span:last-child, .fileo.lift > span:last-child { background: var(--notch-blue); text-shadow: none; }
.fileo.lift { cursor: grabbing; scale: 1.06; }
.fileo .thumb { width: 72px; height: 54px; }
.fileo:focus-visible { outline: 2px solid var(--notch-blue); }
.dropglow { position: absolute; left: 0; right: 0; top: 0; height: 80px; z-index: 4; opacity: 0; pointer-events: none;
  background: radial-gradient(40% 100% at 50% 0, rgba(10,132,255,.45), transparent 70%); transition: opacity var(--m-base); }
.dropglow.on { opacity: 1; }
.field { position: absolute; padding: 14px 18px; border-radius: 12px; background: #1c1d22; border: 1px solid #2a2b31; font-size: 15px; min-height: 52px; }
.field.focus { border-color: rgba(10,132,255,.9); box-shadow: 0 0 0 3px rgba(10,132,255,.3); }
.field .caret { display: inline-block; width: 2px; height: 18px; background: var(--notch-blue); vertical-align: -3px; margin-left: 1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Reduce Motion, Reduce Transparency, more contrast */
@media (prefers-reduced-motion: reduce) {
  .ib > .v, .ib > .v.out { animation: none; }
  .bars b, .dot.pulse, .field .caret { animation: none; }
  .wl, .wr, .win, .wall { transition: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .isl { background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Scene content */
.hello { position: absolute; left: 0; right: 0; top: 50px; display: flex; justify-content: center; align-items: center; gap: 12px;
  font: 600 24px/1 -apple-system, system-ui; letter-spacing: -.02em; animation: materialize 900ms var(--ease-expo) both; }
.hello .mark { width: 34px; height: 34px; color: #f5f5f7; --mark-cut: #000; }
@keyframes materialize { from { opacity: 0; filter: blur(12px); transform: scale(.98); } to { opacity: 1; filter: none; transform: none; } }
.wgrid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.wg { display: flex; align-items: center; gap: 12px; padding: 0 14px; min-width: 0; text-align: left; border-radius: 14px; color: inherit;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: background var(--m-base), transform var(--m-fast) var(--ease-quint); }
.wg:hover { background: rgba(255,255,255,.1); }
.wg:active { transform: scale(.97); }
.wg:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }
.wg > .ic { font-size: 22px; color: var(--notch-text); }
.wg > span:not(.art):not(.bars) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wg small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg.col { flex-direction: column; justify-content: center; gap: 6px; width: 120px; flex: none; }
.wg .bars { margin-left: auto; }
.slot { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; min-height: 52px;
  border: 1px dashed rgba(255,255,255,.24); color: var(--notch-text-2); font-size: 13px; font-weight: 500; transition: border-color var(--m-base), background var(--m-base); }
.slot .ic { font-size: 22px; }
.slot.on { border-color: rgba(10,132,255,.85); background: rgba(10,132,255,.12); color: var(--notch-text); }
.isl[data-mode="drop"] .slot { flex-direction: row; }
.sfile { width: 96px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; background: rgba(255,255,255,.07); }
.sfile.in { animation: settle 520ms var(--sp-reward) both; }
@keyframes settle { from { transform: scale(.6) translateY(-20px); opacity: 0; } }
.sfile small { font-size: 11px; color: var(--notch-text-2); }
/* Photo thumbnail: sky, sun, two hills, white frame */
.thumb { width: 44px; height: 34px; border-radius: 5px; flex: none; border: 2.5px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,.45);
  background: radial-gradient(circle at 72% 30%, #ffe08a 0 9%, transparent 10%), radial-gradient(120% 70% at 25% 105%, #2f8f5b 0 50%, transparent 51%),
    radial-gradient(110% 60% at 85% 108%, #43b277 0 50%, transparent 51%), linear-gradient(180deg, #5eaefc, #a8d8ff); }
.doc { width: 34px; height: 42px; border-radius: 5px; background: linear-gradient(180deg, #f5f5f7, #c9cbd3); position: relative; flex: none; }
.doc::after { content: attr(data-ext); position: absolute; left: 4px; bottom: 4px; font: 700 8px/1 system-ui; color: #0a84ff; }
.conv { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 14px 16px; min-width: 0; }
.conv .ic { font-size: 16px; color: var(--notch-blue); }
.fmt { display: flex; gap: 6px; }
.fmt span { font: 600 11px/1 -apple-system, system-ui; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.07); color: var(--notch-text-2); }
.fmt .on { background: var(--notch-blue); color: #fff; animation: pop 400ms var(--sp-reward); }
@keyframes pop { from { scale: .8; } }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--notch-blue); color: #fff; font-size: 11px; animation: pop 420ms var(--sp-reward); }
.ag { gap: 10px; }
.agi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #d97757, #b4532a); flex: none; }
.agi .ic { font-size: 17px; color: #fff; }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--notch-text-2); }
.q { margin: 16px 0 16px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.meterbar, .vol { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; flex: 1; }
.meterbar i, .vol i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--notch-text); transition: width 420ms var(--ease-out); }
.meterbar i { background: var(--notch-green); }
.egrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.eg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 14px; background: rgba(255,255,255,.05); font-size: 11px; color: var(--notch-text-2); }
.eg .ic { font-size: 20px; color: var(--notch-text); }
.egg { width: 26px; height: 32px; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; flex: none;
  background: radial-gradient(circle at 34% 30%, #fff 0 8%, transparent 9%), radial-gradient(circle at 64% 62%, #d9c2ff 0 10%, transparent 11%), radial-gradient(circle at 36% 72%, #b7e3ff 0 8%, transparent 9%), linear-gradient(160deg, #fff6e9, #f0d9b5);
  transform-origin: 50% 100%; animation: wobble var(--sp-reward-d) var(--sp-reward) 300ms both; }
.egg.still { animation: none; }
@keyframes wobble { 0% { rotate: 0deg; } 30% { rotate: -12deg; } 60% { rotate: 9deg; } 100% { rotate: 0deg; } }
.tl { font-size: 14px; color: var(--notch-text-2); }
.tl b { color: var(--notch-text); margin-right: 8px; font-weight: 600; }
.ans { margin-top: 12px; padding: 12px 14px; }
.ans-p { margin-top: 6px; font-size: 14px; line-height: 1.4; min-height: 38px; color: var(--notch-text); }
.stl { position: absolute; left: 0; right: 0; bottom: 0; gap: 10px; }
.stl .t2 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgl { position: relative; width: 38px; height: 22px; border-radius: 11px; flex: none; background: rgba(255,255,255,.18); cursor: pointer; transition: background var(--m-base); }
.tgl::before { content: ""; position: absolute; inset: -11px -4px; }
.tgl::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: translate var(--sp-expand-d) var(--sp-expand); }
.tgl[aria-checked="true"] { background: var(--notch-green); }
.tgl[aria-checked="true"]::after { translate: 16px 0; }
.tgl.press { transform: scale(.94); }
.tgl:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }
.share { position: absolute; left: 836px; top: 318px; width: 300px; border-radius: 12px; overflow: hidden; background: #1c1d22; border: 1px solid #2f3036; box-shadow: 0 20px 40px -12px rgba(0,0,0,.6);
  animation: rise 500ms var(--ease-quint) both; }
.share-bar { height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 11px; color: var(--notch-text-2); border-bottom: 1px solid #2a2b31; }
.share-bar i { width: 8px; height: 8px; border-radius: 50%; background: #3a3b41; }
.share-bar span { margin-left: 6px; }
.share-scr { position: relative; display: block; height: 168px; background: radial-gradient(60% 55% at 22% 78%, #1d3a6b, transparent 70%), radial-gradient(55% 50% at 80% 24%, #44235f, transparent 70%), #0d1220; }
.share-mb { position: absolute; left: 0; right: 0; top: 0; height: 9px; background: rgba(0,0,0,.3); }
/* Screen captures do not show the hardware notch, only Macadoodle's island, so the copy shows the island alone */
.share-isl { position: absolute; left: 50%; top: 0; translate: -50% 0; width: 50px; height: 9px; border-radius: 0 0 4px 4px; background: #000;
  transition: width var(--sp-expand-d) var(--sp-expand), height var(--sp-expand-d) var(--sp-expand), opacity 300ms, border-radius var(--sp-expand-d) var(--sp-expand); }
.share.wings .share-isl { width: 95px; }
.share.open .share-isl { width: 128px; height: 66px; border-radius: 0 0 9px 9px; }
.share.stealth .share-isl { opacity: 0; }
.share-cap { padding: 8px 10px; font-size: 11px; font-weight: 600; color: var(--notch-text-2); transition: color var(--m-base); }
.share.stealth .share-cap { color: var(--notch-green); }
.pod { position: absolute; left: calc(756px + 205px); top: 0; height: 32px; padding: 0 12px; border-radius: 16px; background: #000; display: flex; align-items: center; gap: 6px;
  font: 600 12px/1 -apple-system, system-ui; animation: pod 520ms var(--ease-expo) both; }
.pod .ic { font-size: 15px; }
@keyframes pod { from { opacity: 0; transform: scale(.6); filter: blur(6px); } }
.wave { display: flex; align-items: center; gap: 2.5px; height: 18px; }
.wave b { width: 2.5px; border-radius: 2px; background: var(--notch-text); height: 6px; animation: eq 600ms ease-in-out infinite alternate; }
.wave b:nth-child(2n) { animation-delay: -200ms; } .wave b:nth-child(3n) { animation-delay: -400ms; } .wave b:nth-child(5n) { animation-delay: -100ms; }
.ask { padding: 12px 14px; font-size: 14px; color: var(--notch-text-2); }
.ask .aq { color: var(--notch-text); }
.caret { display: inline-block; width: 2px; height: 16px; background: var(--notch-blue); vertical-align: -3px; margin-left: 1px; animation: caret 1s steps(1) infinite; }
.tp { overflow: hidden; mask-image: linear-gradient(transparent, #000 20%, #000 70%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 70%, transparent); }
.tp-in p { font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; }
.tp-in p:first-child { color: var(--notch-text); } .tp-in p { color: var(--notch-text-2); }
.vol { width: 170px; flex: none; }
.mix { display: grid; grid-template-columns: 70px 1fr 50px; align-items: center; gap: 12px; height: 40px; }
.mix .t2 { text-align: right; }
.cpu { width: 100%; height: 26px; }
.cpu path { fill: none; stroke: var(--notch-green); stroke-width: 2; vector-effect: non-scaling-stroke; animation: breathe 2.4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes breathe { to { transform: scaleY(.7); } }
.menu { position: absolute; left: 50%; top: 40px; translate: -50% 0; width: 240px; padding: 6px; border-radius: 12px; z-index: 8;
  background: rgba(28,28,31,.82); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 40px -10px rgba(0,0,0,.6);
  transform-origin: top center; animation: menu 220ms var(--ease-expo) both; }
@keyframes menu { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.menu div { padding: 5px 10px; border-radius: 6px; font-size: 13px; display: flex; justify-content: space-between; }
.menu div:hover { background: var(--notch-blue); }
.menu hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 5px 8px; }
.menu kbd { font: inherit; color: var(--notch-text-2); }

/* Voice: a small mic with a soft pulse, a waveform shaped like speech, and the words as they arrive */
.micv { display: flex; flex-direction: column; gap: 12px; }
.mic-row { display: flex; align-items: center; gap: 10px; }
.mic-row .t2 { margin-left: auto; }
.mic-o { position: relative; display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--notch-red); color: #fff; }
.mic-o .ic { font-size: 16px; position: relative; z-index: 1; }
.mic-o i { position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 69, 58, .45); opacity: 0; }
.micv.live .mic-o i { animation: ripple 1.8s var(--ease-out) infinite; }
.micv.live .mic-o i + i { animation-delay: .9s; }
@keyframes ripple { 0% { opacity: .8; scale: 1; } 100% { opacity: 0; scale: 2.1; } }
.micv:not(.live) .mic-o { background: rgba(255, 255, 255, .14); }
.wave2 { display: flex; align-items: center; justify-content: center; gap: 3px; height: 40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.wave2 b { width: 3px; height: var(--h); border-radius: 2px; background: linear-gradient(180deg, #fff, #c9b8ff); transform-origin: 50% 50%; scale: 1 .25;
  transition: scale 500ms var(--ease-out); }
.micv.live .wave2 b { animation: say var(--t) var(--ease-inout) var(--o) infinite alternate; }
@keyframes say { 0% { scale: 1 .18; } 55% { scale: 1 1; } 100% { scale: 1 .42; } }
.micv:not(.live) .wave2 b { scale: 1 .12; opacity: .45; }
.mic-tx { min-height: 18px; font-size: 13px; color: var(--notch-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mic-ok { display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto; border-radius: 50%; background: var(--notch-green); color: #fff; font-size: 13px; flex: none; animation: pop 420ms var(--sp-reward); }

/* The DMG window from the Get section's journey */
.dmg { position: absolute; left: 496px; top: 196px; width: 520px; border-radius: 14px; overflow: hidden; z-index: 4; color: #f5f5f7;
  background: rgba(30, 30, 34, .94); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
  animation: dmg-in 600ms var(--ease-expo) both; transition: opacity 350ms, scale 350ms var(--ease-inout); }
.dmg.out { opacity: 0; scale: .96; }
@keyframes dmg-in { from { opacity: 0; scale: .92; translate: 0 16px; } }
.dmg-bar { position: relative; display: flex; gap: 8px; align-items: center; height: 40px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.dmg-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; } .dmg-bar i:nth-child(2) { background: #febc2e; } .dmg-bar i:nth-child(3) { background: #28c840; }
.dmg-bar b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 600; pointer-events: none; }
.dmg-in { display: flex; align-items: center; justify-content: space-between; padding: 34px 70px 10px; }
.dmg-app, .dmg-dst { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; }
.app-ic.big { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); position: relative; z-index: 2; transition: opacity 200ms; }
.app-ic.big .mark { width: 58px; height: 58px; }
.app-ic.lift { scale: 1.06; }
.dmg-arrow { width: 90px; height: 30px; fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 6; }
.folder { position: relative; width: 84px; height: 66px; border-radius: 8px; background: linear-gradient(180deg, #6fb6ff, #3b8cf2); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.folder::before { content: ""; position: absolute; left: 0; top: -9px; width: 36px; height: 14px; border-radius: 6px 6px 0 0; background: #5aa6fb; }
.folder::after { content: ""; position: absolute; inset: 14px 26px 18px; border-radius: 4px; border: 2px solid rgba(255, 255, 255, .7); border-top-width: 0; }
.dmg-dst.got .folder { animation: got 520ms var(--sp-reward); }
@keyframes got { 30% { scale: 1.12; } }
.dmg-t { padding: 6px 0 22px; text-align: center; font-size: 13px; color: var(--notch-text-2); }

/* Cue: a bubble that points at the control you can use right now */
.cue { position: absolute; translate: -50% 0; z-index: 8; padding: 8px 14px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, system-ui; color: #fff; background: var(--notch-blue); box-shadow: 0 8px 24px -6px rgba(10, 132, 255, .7);
  animation: cue-in 420ms var(--ease-expo) both, cue-bob 1.6s 420ms var(--ease-inout) infinite; }
.cue::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; translate: -50% 0; rotate: 45deg; border-radius: 2px; background: inherit; }
@keyframes cue-in { from { opacity: 0; scale: .7; translate: -50% 8px; } }
@keyframes cue-bob { 50% { translate: -50% -3px; } }

/* Get: what is inside, checkout, the app mark in a wing */
.inbox .row { gap: 12px; margin-bottom: 14px; }
.app-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #f5f5f7; flex: none; --mark-cut: #f5f5f7; }
.app-ic .mark { width: 30px; height: 30px; color: #1d1d1f; }
.app-ic.sm { width: 20px; height: 20px; border-radius: 6px; } .app-ic.sm .mark { width: 16px; height: 16px; }
.inbox .egrid { grid-template-rows: 64px 64px; }
.co { display: flex; align-items: center; justify-content: center; gap: 14px; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin 700ms linear infinite; flex: none; }
@keyframes spin { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .hello, .sfile.in, .fmt .on, .badge, .egg, .share, .pod, .menu, .mic-ok { animation: none; }
  .micv.live .mic-o i, .micv.live .wave2 b, .spin, .cue, .dmg, .dmg-dst.got .folder { animation: none; }
  .screen { transition: none; }
  .wave b, .cpu path, .caret { animation: none; }
}
/* Phone crops are narrow: the share copy moves under the island so both stay in view */
@media (max-width: 734px) {
  .stage .share { left: 606px; top: 262px; }
  .stage .share-scr { height: 120px; }
  /* A live blur in every island and menu costs frames on a phone while it morphs; near-solid black reads the same at this size */
  .isl { background: linear-gradient(180deg, #000 0, #000 36px, rgba(6, 7, 12, .95) 100%); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .menu { background: rgba(28, 28, 31, .97); backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* A thinner bezel: the crop is all screen, the way a phone's own display runs nearly edge to edge */
  .stage { --bz: 6px; }
  .stage::after { border-width: 6px; }
}

/* Bare stage: only the notch, for the hero, where the page itself is the desktop */
.stage.bare { aspect-ratio: auto; border-radius: 0; background: none; box-shadow: none; --bz: 0px; overflow: visible; }
.stage.bare::after { display: none; }
.stage.bare .wall, .stage.bare .desk, .stage.bare .mbar, .stage.bare .dropglow { display: none; }
.stage.bare .screen { overflow: visible; pointer-events: none; }
.stage.bare .isl, .stage.bare .menu, .stage.bare .props > * { pointer-events: auto; }
/* The hero notch is solid black: a live blur behind it only costs frames while it morphs over the wallpaper */
.stage.bare .isl { background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* While a file is dragged: a dashed halo around the notch says where to drop it */
.halo { position: absolute; left: 576px; top: 0; width: 360px; height: 92px; border-radius: 0 0 34px 34px; border: 2px dashed rgba(255, 255, 255, .85); border-top: 0;
  background: rgba(10, 132, 255, .16); pointer-events: none !important; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px;
  animation: halo-in 360ms var(--ease-expo) both, halo-pulse 1.4s var(--ease-inout) 360ms infinite; }
.halo span { font: 600 13px/1 -apple-system, BlinkMacSystemFont, system-ui; color: #fff; padding: 6px 12px; border-radius: 999px; background: var(--notch-blue); }
.halo.hot { border-color: var(--notch-blue); border-style: solid; background: rgba(10, 132, 255, .3); animation: none; }
.halo.hot span { opacity: 0; }
@keyframes halo-in { from { opacity: 0; scale: .9; } }
@keyframes halo-pulse { 50% { scale: 1.04; background: rgba(10, 132, 255, .26); } }
/* Notch pages, made to feel like the app: the same header everywhere, a fine light edge on every tile, round controls that press on the
   app's spring, and one-shot changes (a ticked note, a new Keep Awake choice) animating once on the redrawn page (S.fx, scenes.js). */
.pg-h { display: flex; align-items: center; gap: 8px; height: 26px; margin-bottom: 8px; }
.pg-h .back { width: 26px; height: 26px; padding: 0; margin: 0 2px 0 -2px; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.08); }
.pg-h .back .ic { font-size: 14px; }
.pg-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.1); font-size: 13px; color: var(--notch-text); }
.wg, .eg, .clip button, .ev { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.pad.pp-room.egrid { bottom: 66px; } /* Explore's tiles keep clear of the pill bar */
.rb { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--notch-text); background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background var(--m-base), transform var(--sp-reward-d) var(--sp-reward); }
.rb:hover { background: rgba(255,255,255,.16); }
.rb:active { transform: scale(.88); transition-duration: 90ms; }
.rb .ic { font-size: 19px; }
.rb.pri { color: #000; background: var(--notch-amber); box-shadow: none; }
.rb.pri:hover { background: #ffe14d; }

/* Timer: a Clock-style dial. Reset and Start sit either side; while it runs the glow under the arc breathes. */
.tdial { display: flex; align-items: center; justify-content: center; gap: 30px; height: 150px; }
.tdial.on .rb.pri { color: var(--notch-amber); background: rgba(255,214,10,.18); }
.big-r { width: 54px; height: 54px; } /* the directory's timer scene (scenes/live.js) */
.tmr { gap: 14px; margin-top: 10px; } .tm { font-size: 30px; font-weight: 600; } /* the Customize page demo (yours.js) */
.dial { position: relative; flex: none; width: 146px; height: 146px; }
.dial-s { display: block; width: 100%; height: 100%; }
.dial .ticks line { stroke: rgba(255,255,255,.2); stroke-width: 1.1; stroke-linecap: round; }
.dial .ticks line:nth-child(5n + 1) { stroke: rgba(255,255,255,.5); stroke-width: 1.4; }
.dial .trk, .dial .arc, .dial .glow { fill: none; stroke-width: 5; }
.dial .trk { stroke: rgba(255,255,255,.07); }
.dial .arc, .dial .glow { stroke: var(--notch-amber); stroke-linecap: round; stroke-dasharray: 1; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dashoffset 1s linear; }
.dial .glow { stroke-width: 14; opacity: .16; }
.dial .head { transform-origin: 60px 60px; transition: rotate 1s linear; }
.dial .head circle { fill: #fff; }
.tdial.on .dial .glow { animation: dial-breathe 2.4s var(--ease-inout) infinite; }
@keyframes dial-breathe { 50% { opacity: .32; } }
.dial-c { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; }
.dial-c .tm { font-size: 31px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.dial-c small { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--notch-amber); }

/* Notes: the check draws itself in and a strike sweeps across, only for the note just tapped */
.notes button { height: 48px; }
.notes .ck { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); transition: background var(--m-base), border-color var(--m-base); }
.notes .ck .ic { font-size: 13px; color: #000; stroke-width: 2.6; }
.notes .ck path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; } /* the hero's check; the Customize demo draws a plain one */
.notes button[aria-pressed="true"] .ck { background: var(--notch-green); border-color: var(--notch-green); }
.notes button[aria-pressed="true"] .ck path[pathLength] { stroke-dashoffset: 0; }
.notes .ctt { position: relative; display: inline-block; }
.notes .ctt::after { content: ""; position: absolute; left: -1px; right: -1px; top: 54%; height: 1.5px; border-radius: 1px; background: currentColor; scale: 0 1; transform-origin: 0 50%; }
.notes button[aria-pressed="true"] .ct { color: var(--notch-text-2); text-decoration: line-through; }
.notes button[aria-pressed="true"] .ct:has(.ctt) { text-decoration: none; } /* the hero's notes sweep their own strike */
.notes button[aria-pressed="true"] .ctt::after { scale: 1 1; }
.notes .ct small { display: block; font-size: 11px; color: var(--notch-text-2); }
.notes .fx[aria-pressed="true"] .ck { animation: ck-pop 460ms var(--ease-out); }
.notes .fx[aria-pressed="true"] .ck path { animation: ck-draw 320ms 80ms var(--ease-out) both; }
.notes .fx[aria-pressed="true"] .ctt::after { animation: strike 380ms 140ms var(--ease-out) both; }
@keyframes ck-pop { 40% { scale: 1.22; } }
@keyframes ck-draw { from { stroke-dashoffset: 1; } }
@keyframes strike { from { scale: 0 1; } }

/* Keep Awake: a night sky that warms and twinkles while the Mac is kept awake. The thumb slides from the last choice on the app's spring. */
.awk { display: flex; align-items: center; gap: 18px; height: 140px; }
.sky { position: relative; flex: none; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 22px; overflow: hidden; background: #0a0f22;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sky::before { content: ""; position: absolute; width: 60px; height: 60px; border-radius: 50%; background: var(--notch-amber); opacity: 0; filter: blur(24px); transition: opacity 700ms var(--ease-out); }
.sky .aw-moon { position: relative; font-size: 46px; stroke-width: 1.4; color: rgba(255,255,255,.5); fill: transparent; transition: color 600ms var(--ease-out), fill 600ms var(--ease-out); }
.sky i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .3; transition: opacity 600ms; }
.sky i:nth-child(1) { left: 18px; top: 20px; } .sky i:nth-child(2) { left: 86px; top: 16px; width: 3px; height: 3px; } .sky i:nth-child(3) { left: 92px; top: 76px; }
.sky i:nth-child(4) { left: 22px; top: 84px; width: 3px; height: 3px; } .sky i:nth-child(5) { left: 58px; top: 11px; }
.awk.on .sky::before { opacity: .5; }
.awk.on .sky .aw-moon { color: var(--notch-amber); fill: rgba(255,214,10,.22); }
.awk.on .sky i { opacity: .9; animation: twinkle 2.6s var(--ease-inout) infinite; }
.awk.on .sky i:nth-child(2n) { animation-delay: -1.3s; } .awk.on .sky i:nth-child(3n) { animation-duration: 3.4s; }
@keyframes twinkle { 50% { opacity: .2; } }
.awk-r { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.awk-r .t2 { font-size: 13px; }
.seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.seg button { position: relative; z-index: 1; height: 32px; border-radius: 9px; font: 600 12px/1 -apple-system, system-ui; color: var(--notch-text-2); transition: color var(--m-base); }
.seg button:hover { color: var(--notch-text); }
.seg button[aria-pressed="true"] { color: #000; }
.seg-t { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc((100% - 6px) / 3); border-radius: 9px; background: var(--notch-amber);
  translate: calc(var(--i) * 100%) 0; animation: seg-slide var(--sp-expand-d) var(--sp-expand) both; }
.seg-t.pop { animation: seg-pop var(--sp-reward-d) var(--sp-reward) both; }
@keyframes seg-slide { from { translate: calc(var(--was) * 100%) 0; } }
@keyframes seg-pop { from { scale: .5; opacity: 0; } }
.awk-off { position: relative; padding: 2px 0; font: 600 12px/1 -apple-system, system-ui; color: var(--notch-text-2); }
.awk-off::after { content: ""; position: absolute; inset: -12px -8px; }
.awk-off:hover { color: var(--notch-text); }

/* Music: the art glows its own colours and settles on the spring as it plays or pauses */
.art-w { position: relative; flex: none; }
.art-w::before { content: ""; position: absolute; inset: 10px 4px -6px; border-radius: 14px; background: linear-gradient(135deg, #1f4fbf, #6b3fb3 60%, #0e7490); filter: blur(16px); opacity: .8; transition: opacity 500ms; }
.art-w .art { position: relative; display: block; } /* an inline span ignores its size */
.np .art.lg { width: 58px; height: 58px; border-radius: 12px; animation: art-play var(--sp-reward-d) var(--sp-reward) both; }
.np.paused .art.lg { scale: .9; animation-name: art-pause; }
.np.paused .art-w::before { opacity: .3; }
@keyframes art-play { from { scale: .9; } }
@keyframes art-pause { from { scale: 1; } }
.np .prog { height: 5px; overflow: visible; }
.np .prog i::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; }

/* Calendar: the event as a tile, a ring that fills as the standup nears, and Join that turns green and calls when it starts */
.ev { gap: 14px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); }
.ev-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ev .cal-d { overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; background: rgba(255,255,255,.1); }
.ev .cal-d small { align-self: stretch; padding: 4px 0 3px; text-align: center; color: #fff; background: var(--notch-red); }
.callrow .cd-r { width: 20px; height: 20px; }
.nb.go { background: var(--notch-green); border-color: transparent; animation: join-call 1.6s var(--ease-out) infinite; }
@keyframes join-call { 0% { box-shadow: 0 0 0 0 rgba(48,209,88,.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(48,209,88,0); } }
/* The hero notch on a phone: pages are laid out 360 points wide and drawn near full size (main.js), so the small parts get room */
@media (max-width: 734px) {
  .hero-notch .pg-h .back::after { inset: -10px; }
  .hero-notch .eg small { font-size: 12px; }
  .hero-notch .seg button::after { content: ""; position: absolute; inset: -8px 0; }
  .hero-notch .awk { gap: 14px; }
  .hero-notch .sky { width: 96px; height: 96px; }
  .hero-notch .tdial { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .tdial.on .dial .glow, .awk.on .sky i, .nb.go, .seg-t, .np .art.lg, .notes .fx .ck, .notes .fx .ck path, .notes .fx .ctt::after { animation: none; }
  .dial .arc, .dial .glow, .dial .head, .rb, .sky::before, .sky .aw-moon { transition: none; }
}
/* A soft ring that breathes out of an idle notch: the one hint that it can be touched */
.beacon { position: absolute; left: 641px; top: 0; width: 230px; height: 46px; border-radius: 0 0 24px 24px; border: 2px solid rgba(255, 255, 255, .9); border-top: 0; background: rgba(12, 8, 40, .22);
  pointer-events: none; opacity: 0; transform-origin: 50% 0; animation: beacon 2.6s var(--ease-out) infinite; }
.beacon + .beacon { animation-delay: 1.3s; }
@keyframes beacon { 0% { opacity: .75; scale: .86; } 100% { opacity: 0; scale: 1.22; } }
@media (prefers-reduced-motion: reduce) { .beacon { animation: none; opacity: .5; scale: 1; } .beacon + .beacon { display: none; } }

/* Notch pages: back, music, calendar, clipboard, shelf */
.pad.sub { top: 38px; }
.back { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 8px 0 2px; margin: 0 0 8px -4px; border-radius: 12px; font: 600 12px/1 -apple-system, system-ui; color: var(--notch-text-2); position: relative; }
.back::after { content: ""; position: absolute; inset: -8px -4px; }
.back:hover { color: var(--notch-text); background: rgba(255,255,255,.08); }
.back .ic { font-size: 14px; }
.np .row { gap: 14px; }
.lyric { display: block; margin-top: 6px; font-size: 12px; color: var(--notch-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog { position: relative; height: 4px; margin: 14px 0 0; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.prog i { position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: 2px; background: var(--notch-text); animation: play-prog 60s linear forwards; }
.np.paused .prog i, .np.paused .bars b { animation-play-state: paused; }
@keyframes play-prog { to { width: 100%; } }
.ctrls { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 10px; }
.ctrls button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--notch-text); position: relative; transition: background var(--m-base), transform var(--m-fast) var(--ease-quint); }
.ctrls button::after { content: ""; position: absolute; inset: -6px; }
.ctrls button:hover { background: rgba(255,255,255,.1); }
.ctrls button:active { transform: scale(.9); }
.ctrls .ic { font-size: 16px; }
.ctrls .big-b { width: 40px; height: 40px; background: rgba(255,255,255,.12); }
.ctrls .big-b .ic { font-size: 18px; }
.cal-d { display: grid; place-items: center; width: 46px; height: 50px; border-radius: 10px; background: rgba(255,255,255,.08); flex: none; line-height: 1; }
.cal-d small { font-size: 10px; font-weight: 600; color: var(--notch-red); }
.cal-d b { font-size: 22px; font-weight: 600; }
.callrow { margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06); gap: 10px; animation: vin 260ms var(--ease-out); }
.callrow .cd { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.clip { display: grid; gap: 4px; }
.clip button { width: 100%; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 12px; text-align: left; color: var(--notch-text); background: rgba(255,255,255,.05); transition: background var(--m-base); }
.clip button:hover { background: rgba(255,255,255,.1); }
.clip .ic { font-size: 15px; color: var(--notch-text-2); }
.clip .ct { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip .cc { font: 600 11px/1 -apple-system, system-ui; color: var(--notch-text-2); }
.doc-t { width: 34px; height: 42px; border-radius: 5px; flex: none; position: relative; background: #f5f5f7;
  background-image: linear-gradient(#c9cbd3, #c9cbd3), linear-gradient(#c9cbd3, #c9cbd3), linear-gradient(#c9cbd3, #c9cbd3);
  background-size: 60% 2px, 70% 2px, 50% 2px; background-position: 6px 10px, 6px 16px, 6px 22px; background-repeat: no-repeat; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.meterbar.run { margin-top: 10px; }
.meterbar.run i { width: 0; background: var(--notch-blue); animation: conv 900ms var(--ease-inout) forwards; }
@keyframes conv { to { width: 100%; } }
button.eg { color: inherit; transition: background var(--m-base); }
button.eg:hover { background: rgba(255,255,255,.1); }
.eg span.eg { cursor: default; }

/* Draw Gestures: trackpad prop and the island's drawing pad (DrawGestureViews.swift) */
.tpad { position: absolute; width: 300px; height: 188px; border-radius: 18px; background: rgba(28,29,34,.86); border: 1px solid #34353c; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.tpad i, .tpad b { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: rgba(255,255,255,.85);
  box-shadow: 0 0 14px rgba(107,204,255,.6); opacity: 0; scale: .5; transition: opacity 180ms var(--ease-out), scale 260ms var(--ease-quint); }
.tpad i:nth-child(1) { translate: 112px 92px; } .tpad i:nth-child(2) { translate: 150px 78px; } .tpad i:nth-child(3) { translate: 188px 94px; }
.tpad b { translate: 100px 102px; }
.tpad.hold i, .tpad b.on { opacity: 1; scale: 1; }
.gp { position: absolute; left: 14px; right: 14px; top: 38px; bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.gp-h { display: flex; align-items: center; gap: 8px; height: 18px; }
.gp-h small { margin-left: auto; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.55); white-space: nowrap; }
.gp-i { display: flex; width: 18px; justify-content: center; font-size: 14px; }
.gp.hit .gp-i { color: var(--notch-green); }
.gp-c { flex: 1; min-height: 0; width: 100%; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); transition: border-color 200ms;
  background: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px) 0 0 / 14px 14px, rgba(255,255,255,.045); }
.gp.ink .gp-c { border-color: rgba(107,204,255,.35); }
.gp-s { fill: none; stroke: url(#gpInk); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1;
  filter: drop-shadow(0 0 3px rgba(107,204,255,.7)); transition: stroke 250ms; }
.gp.hit .gp-s { stroke: #5ce08f; filter: drop-shadow(0 0 3px rgba(92,224,143,.7)); }
.gp-tip { fill: #fff; opacity: 0; filter: drop-shadow(0 0 3px #6bccff); }
.gp.ink .gp-tip { opacity: 1; }
.gp-ok { opacity: 0; transform-box: fill-box; transform-origin: center; }
.gp-ok circle { fill: #5ce08f; filter: drop-shadow(0 0 4px rgba(92,224,143,.8)); }
.gp-ok path { fill: none; stroke: #000; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gp.hit .gp-ok { opacity: 1; animation: pop 400ms var(--sp-reward); }
.gp-l { display: flex; justify-content: center; gap: 6px; }
.gp-l span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 13px; font-size: 11px; font-weight: 500;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.06); transition: opacity 250ms, scale 360ms var(--sp-reward), background 250ms; }
.gp-l svg { width: 16px; height: 14px; fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.gp.hit .gp-l span:not(.on) { opacity: .4; }
.gp-l span.on { background: rgba(92,224,143,.22); border-color: rgba(92,224,143,.6); scale: 1.06; }
.gp-l span.on svg { stroke: #5ce08f; }
@media (prefers-reduced-motion: reduce) {
  .tpad i, .tpad b, .gp-c, .gp-s, .gp-l span { transition: none; }
  .gp.hit .gp-ok { animation: none; }
}