/* Models scene (mscene.js): one story in four beats (download Parakeet, dictate, turn on S1-mini,
   cleaner text) in the Hushpen window. The window copies DESIGN.md (Light) at 1:1 points, 940 by 600,
   on a 1184 by 720 desktop. mscene.js sets the zoom and the width of .msa to fit the column, and on a
   narrow column pans .msa-desk to follow the pointer. */
.msn-sh p { flex: none; max-width: 23em; padding-bottom: 5px; font-size: 17px; line-height: 1.42; letter-spacing: -.015em; color: var(--ink2); text-align: right; text-wrap: pretty; }
.msn-nw { white-space: nowrap; }
.msn-nt, .msn-nt * { transition: none !important; }

/* Spoken words: gray as they are heard, struck when cleanup drops them, then the typed text lands */
.msn .w { display: inline-block; color: rgba(0, 0, 0, .36); background: linear-gradient(currentColor, currentColor) 0 58% / 0 1.5px no-repeat; animation: msnW .22s var(--ease) both; transition: background-size .22s var(--ease), opacity .25s var(--ease); }
.msn .w.x { background-size: 100% 1.5px; opacity: .45; }
.msn .done { animation: msnIn .4s var(--ease) both; }
.msn .done .w { color: inherit; animation: none; }
@keyframes msnW { from { opacity: 0; transform: translateY(3px); } }
@keyframes msnIn { from { opacity: 0; transform: translateY(4px); filter: blur(5px); } }

/* Step rail: one line for each beat; the line of the beat on screen fills over its length */
.msn-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 20px 0 0; padding: 0 2px; list-style: none; }
.msn-rail li { min-width: 0; }
.msn-rail i { display: block; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(0, 0, 0, .1); }
.msn-rail i b { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.msn-rail li.done i b { transform: none; }
.msn-rail li.on i b { transform: none; transition: transform var(--d, 0ms) linear; }
.msn-rail strong { display: flex; gap: 9px; margin-top: 13px; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--ink3); white-space: nowrap; transition: color .3s var(--ease); }
.msn-rail strong span { flex: none; font-variant-numeric: tabular-nums; }
.msn-rail small { display: block; margin-top: 3px; padding-left: 17px; font-size: 13px; line-height: 1.3; color: var(--ink3); text-wrap: pretty; transition: color .3s var(--ease); }
.msn-rail li.on strong, .msn-rail li.done strong { color: var(--ink); }
.msn-rail li.on small { color: var(--ink2); }

/* The desktop: the stage clips it, the desk carries the wallpaper and pans under the camera */
.msa { position: relative; width: 1184px; height: 720px; margin: 0 auto; overflow: hidden; border-radius: 26px; background: #8EC5F2; box-shadow: 0 0 0 .5px var(--line), 0 40px 90px -50px rgba(20, 40, 90, .55); }
.msa-desk { position: absolute; left: 0; top: 0; width: 1184px; height: 720px; background: #8EC5F2 url(assets/wall-blossom.webp) center / cover no-repeat; transition: transform .7s var(--ease); }
.msa-desk > .mb { position: relative; z-index: 3; }

/* The window: 940 by 600, sidebar 232, toolbar 52, traffic lights at (20, 20), the name on the 26 pt line */
.msa-win { --lb: rgba(0, 0, 0, .85); --l2: rgba(0, 0, 0, .5); --l3: rgba(0, 0, 0, .26); --sep: rgba(0, 0, 0, .1); --ctl: rgba(0, 0, 0, .08);
  position: absolute; left: 122px; top: 52px; display: flex; width: 940px; height: 600px; overflow: hidden; border-radius: 10px; color: var(--lb); font: 13px/1.3 var(--text); letter-spacing: 0; text-align: left; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .22), 0 24px 70px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .12); }
.msa-tl { position: absolute; left: 20px; top: 20px; z-index: 2; display: flex; gap: 8px; }
.msa-tl b { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .14); }
.msa-tl b + b { background: #FEBC2E; }
/* macOS draws the sidebar in its translucent material, so the wallpaper shows through, blurred */
.msa-sb { position: relative; flex: none; width: 232px; background: rgba(232, 232, 234, .8); -webkit-backdrop-filter: blur(40px) saturate(1.5); backdrop-filter: blur(40px) saturate(1.5); }
.msa-name { position: absolute; left: 68px; top: 18px; font-weight: 600; line-height: 16px; }
.msa-nav { position: absolute; left: 8px; right: 8px; top: 48px; display: grid; gap: 2px; }
.msa-nav span { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 6px; transition: background-color .1s; }
.msa-nav svg { flex: none; width: 16px; height: 16px; color: var(--l2); }
.msa-nav .on { background: rgba(0, 0, 0, .09); }
.msa-nav .on svg { color: var(--lb); }
.msa-pane { position: relative; flex: 1; min-width: 0; background: #F5F5F5; }
.msa-tb { display: flex; align-items: center; height: 52px; padding: 0 24px; }
.msa-tb b { font-weight: 600; }
.msa-q { display: flex; align-items: center; gap: 5px; width: 300px; height: 22px; margin-left: auto; padding: 0 8px; border-radius: 5px; background: var(--ctl); color: var(--l3); }
.msa-q svg { width: 12px; height: 12px; color: var(--l2); }
.msa-q[hidden] { display: none; }
.msa-v { position: absolute; left: 24px; right: 24px; top: 52px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .13s var(--ease), transform .13s var(--ease), visibility 0s .13s; }
.msa-v.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.msa-v[data-v=home] { top: 57px; }
.msa-v h5 { height: 24px; margin: 0 0 4px 10px; font-size: 13px; font-weight: 600; line-height: 24px; color: var(--l2); }
.msa-g { border-radius: 8px; background: rgba(0, 0, 0, .035); box-shadow: inset 0 0 0 .5px var(--sep); }
.msa-g + .msa-g { margin-top: 25px; }
.msa-g > * + * { box-shadow: inset 0 .5px 0 var(--sep); }
.msa-ft { height: 20px; margin: 4px 0 0 10px; overflow: hidden; font-size: 11px; line-height: 20px; color: var(--l2); white-space: nowrap; }
.msa-ft + h5 { margin-top: 16px; }

/* Rows: one line is 36 pt, a row with a secondary line 44 pt. Columns keep fixed widths. */
.msa-r { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 0 10px; }
.msa-r:has(small) { min-height: 44px; }
.msa-r > svg { flex: none; width: 16px; height: 16px; color: var(--l2); }
.msa-t { flex: 1; min-width: 0; }
.msa-t b { display: block; overflow: hidden; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.msa-t em { margin-left: 8px; font-style: normal; font-size: 11px; color: var(--l2); }
.msa-t small { display: block; margin-top: 1px; overflow: hidden; font-size: 11px; color: var(--l2); white-space: nowrap; text-overflow: ellipsis; }
.msa-sz { flex: none; width: 60px; color: var(--l2); text-align: right; font-variant-numeric: tabular-nums; }
.msa-st { flex: none; width: 104px; color: var(--l2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.msa-st.dl { color: var(--lb); }
.msa-st.ok { color: #34C759; }
.msa-i { flex: none; width: 16px; height: 16px; color: var(--l2); }
.msa-bc { flex: none; display: flex; justify-content: flex-end; width: 124px; }
.msa-btn { display: inline-grid; place-items: center; height: 22px; padding: 0 12px; border-radius: 5px; background: var(--ctl); font-style: normal; font-weight: 500; white-space: nowrap; transition: background-color .1s; }
.msa-btn[hidden] { display: none; }
.msa-btn.press, .msa-nav .press { background: rgba(0, 0, 0, .16); }
.msa-rec { min-width: 68px; }
.msa-pop { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 12px; border-radius: 5px; background: var(--ctl); font-weight: 500; white-space: nowrap; }
.msa-pop svg { width: 11px; height: 11px; color: var(--l2); }
.msa-ds { color: #34C759; }
.msa-ds.on { color: var(--lb); }
.msa-tr { display: grid; place-items: center; min-height: 56px; padding: 16px 24px; text-align: center; }
.msa-tr p { grid-area: 1 / 1; max-width: 100%; }
.msa-ph { color: var(--l2); transition: opacity .13s; }
.msa-tr.has .msa-ph { opacity: 0; }
.msa-sw { position: relative; flex: none; width: 36px; height: 20px; border-radius: 10px; background: rgba(0, 0, 0, .12); transition: background-color .11s var(--ease); }
.msa-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .06); transition: transform .11s var(--ease); }
.msa-sw.on { background: #007AFF; }
.msa-sw.on::after { transform: translateX(16px); }
.msa-n .msa-t { color: var(--l2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The flow bar floats at the bottom of the visible screen, over the wallpaper */
.msa-fb { --s: 1.5; position: absolute; left: 0; right: 0; bottom: 18px; z-index: 4; height: 42px; }
.msa-cur { position: absolute; left: 0; top: 0; z-index: 6; width: 19px; height: 28px; pointer-events: none; transform-origin: 3px 3px; transition: translate .42s var(--ease), scale .1s var(--ease); }
.msa-cur.dn { scale: .86; }

@media (max-width: 820px) {
  .msn-sh { flex-direction: column; align-items: flex-start; gap: 14px; }
  .msn-sh p { padding: 0; text-align: left; }
}
@media (max-width: 700px) {
  .msn-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
}
@media (max-width: 560px) {
  .msn-sh p { font-size: 16px; }
}