/* Make it yours (PLAN.md): the Key Sounds deck, then four notch tiles. Keys and notches are product, so they get light;
   tiles and controls follow DESIGN.md (no shadows, no UI gradients). */
.yours { --grille-mask: radial-gradient(60% 50% at 50% 0, #000, transparent); overflow: clip; }
/* Texture: rows of keycap outlines, for the Key Sounds deck */
.yours .grille { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='3.5' y='3.5' width='37' height='37' rx='8' fill='none' stroke='%23fff' stroke-opacity='.07'/%3E%3C/svg%3E") 0 0 / 44px 44px; }
.yours > .wrap-wide { position: relative; }

/* ---------- Key Sounds deck: a keyboard well with its own notch on the top edge ---------- */
.ks { --lc: 245 245 247; --lx: 50%; --ly: 60%; position: relative; isolation: isolate; overflow: hidden;
  padding: 72px clamp(16px, 3vw, 40px) clamp(20px, 3vw, 36px); border-radius: var(--r-xl);
  background: #0c0c0e; border: 1px solid var(--line); }
/* The light under the keys: it gathers where the last key went down, tinted by the pack */
.ks-light { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--glow, .35);
  background: radial-gradient(38% 60% at var(--lx) var(--ly), rgb(255 255 255 / .07), transparent 70%);
  transition: opacity 900ms var(--ease-out); }
.ks.hot .ks-light { --glow: 1; transition-duration: 60ms; }

.ks-isl { position: absolute; left: 50%; top: 0; translate: -50% 0; z-index: 2; height: 34px; min-width: 220px; padding: 0 14px 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #000; color: var(--notch-text);
  border-radius: 0 0 14px 14px; font: 600 12px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.ks-isl::before, .ks-isl::after { content: ""; position: absolute; top: 0; width: 8px; height: 8px; left: -8px;
  background: radial-gradient(circle at 0 100%, transparent 8px, #000 8.5px); }
.ks-isl::after { left: auto; right: -8px; background: radial-gradient(circle at 100% 100%, transparent 8px, #000 8.5px); }
.ks-wl { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ks-wl .ic { width: 15px; height: 15px; color: rgb(var(--lc)); transition: color var(--m-slow); }
.ks-wl b { font-weight: 600; }
.ks-isl.swap .ks-wl b { animation: ks-name 420ms var(--ease-expo); }
@keyframes ks-name { from { opacity: 0; filter: blur(4px); translate: 0 6px; } }
.ks-wave { width: 64px; height: 18px; flex: none; }
.ks-wave rect { fill: rgb(var(--lc)); }

.ks-head { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.ks-line { flex: 1; min-width: 0; display: flex; align-items: center; height: 52px; padding: 0 18px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); cursor: text; transition: border-color var(--m-base); }
.ks-line:focus-within { border-color: var(--line-strong); }
.ks-line input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--ink);
  font: 400 clamp(17px, 1.6vw, 21px)/1 var(--sans); letter-spacing: -.01em; caret-color: var(--link); }
.ks-line input::placeholder { color: var(--ink-faint); }
.ks-vol { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); }
.ks-vol .ic { width: 18px; height: 18px; }
.ks-vol input { width: 120px; accent-color: var(--ink); }

/* Keyboard: rows in key units (--w), legends in Geist, keys sink 2px and light up when struck */
.kb { position: relative; display: flex; flex-direction: column; gap: clamp(4px, .5vw, 7px); }
.kb-r { display: flex; gap: clamp(4px, .5vw, 7px); }
.kc { flex: var(--w, 1) 1 0; min-width: 0; height: clamp(40px, 4.4vw, 58px); position: relative; border-radius: clamp(6px, .7vw, 9px);
  background: #18181b; color: var(--ink-muted); font: 500 clamp(11px, 1vw, 14px)/1 var(--sans);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -2px 0 rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
  transition: translate 220ms var(--ease-out), background 600ms var(--ease-out), color 600ms var(--ease-out), box-shadow 600ms var(--ease-out); }
.kc.m { justify-content: flex-start; align-items: flex-end; padding: 0 0 8px 10px; font-size: clamp(9px, .8vw, 11px); letter-spacing: .01em; }
.kc.m.r { justify-content: flex-end; padding: 0 10px 8px 0; }
.kc:hover { color: var(--ink); }
/* A struck key sinks and its backlight comes up white, then fades out slowly. Neutral on every pack, like a real backlit keyboard. */
.kc.dn { translate: 0 1.5px; background: #222226; color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .55); transition-duration: 30ms;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .14); }
.kc:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kb .p { display: none; }
.kc-ud { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; }
.kc-ud .kc { height: auto; flex: 1; }

/* Packs: three groups, one row each, scrolling sideways with an edge fade when they run long */
.ks-packs { display: grid; gap: 10px; margin-top: 26px; }
.pk-g { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pk-g > span { flex: none; width: 92px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.pk-row { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; min-width: 0; padding: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.pk-row::-webkit-scrollbar { display: none; }
.pk-c, .pk .pk-c { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; white-space: nowrap; color: var(--ink-muted);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02); display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--m-base), background var(--m-base), border-color var(--m-base), transform var(--press) var(--ease-out); }
.pk-c:hover { color: var(--ink); border-color: var(--line-strong); }
.pk-c:active { transform: scale(.96); }
.pk-c[aria-pressed="true"] { background: var(--ink); color: #000; border-color: var(--ink); }
.pk-c .ic { width: 15px; height: 15px; }
.pk-c.no { animation: no 360ms var(--ease-out); }
@keyframes no { 20%, 60% { translate: -4px 0; } 40%, 80% { translate: 4px 0; } }

.ks-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; margin: 28px 0 0; padding: 0 clamp(4px, 1vw, 12px); list-style: none;
  font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.ks-facts b { color: var(--ink); font-weight: 600; }

/* ---------- Bento: wide Themes, Pages and Pins side by side, wide Hide the notch ---------- */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(64px, 8vw, 112px); }
.bt { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--tile-1); border: 1px solid var(--line); overflow: hidden; }
.bt-theme, .bt-hide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.bt-hide .bt-vis { order: 2; }
.bt-vis { position: relative; min-height: 300px; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate;
  background: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)), url(../img/wall.webp) 50% 30% / cover; }
.bt-theme .bt-vis, .bt-hide .bt-vis { aspect-ratio: auto; min-height: 440px; }
.bt-copy { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 40px); }
.bt-theme .bt-copy, .bt-hide .bt-copy { justify-content: center; }
.bt-h { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.bt-p { color: var(--ink-muted); text-wrap: pretty; max-width: 440px; }
.bt-copy .eyebrow { display: flex; align-items: center; gap: 8px; }
.beta-t { padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 10px; color: var(--ink-muted); }
.pk { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pk-note { width: 100%; margin-top: 4px; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.bt .chip-t { align-self: flex-start; margin-top: 8px; }

/* Mini notch: hangs from the top edge of a tile, with the app's concave shoulders */
.mn { --sh: 12px; position: absolute; left: 50%; top: 0; translate: -50% 0; background: #000; color: var(--notch-text);
  font: 400 12px/1.3 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: 0; }
.mn::before, .mn::after { content: ""; position: absolute; top: 0; width: var(--sh); height: var(--sh); left: calc(var(--sh) * -1);
  background: radial-gradient(circle at 0 100%, transparent var(--sh), #000 calc(var(--sh) + .5px)); }
.mn::after { left: auto; right: calc(var(--sh) * -1); background: radial-gradient(circle at 100% 100%, transparent var(--sh), #000 calc(var(--sh) + .5px)); }
.mn-open { --sh: 16px; width: min(88%, 520px); padding: 44px 14px 14px; border-radius: 0 0 28px 28px; display: flex; flex-direction: column; gap: 8px; overflow: visible; }
.mn .ic { width: 16px; height: 16px; flex: none; }
.mn-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mn-w { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 10px; padding: 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.mn-w .ic { grid-row: span 2; color: var(--notch-text-2); }
.mn-w b { font-weight: 600; font-size: 12px; }
.mn-w small { font-size: 11px; color: var(--notch-text-2); }

/* Themes */
.th-cv { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; z-index: 0; }
.th-vis .mn-open { min-height: 64%; justify-content: flex-end; }
.th-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.th-o { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: var(--r-md); text-align: left;
  border: 1px solid transparent; transition: background var(--m-base), border-color var(--m-base); }
.th-o:hover { background: rgba(255, 255, 255, .03); }
.th-o[aria-pressed="true"] { background: var(--tile-2); border-color: var(--line-strong); }
.th-o i { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.th-o b { display: block; font-size: 14px; font-weight: 600; }
.th-o small { display: block; font-size: 12px; color: var(--ink-faint); line-height: 1.3; }

/* Pages and favorites */
.mn-sm { width: min(84%, 420px); padding: 38px 12px 10px; }
/* Fixed body height so switching pages never jumps the notch */
.pg-body { height: 132px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 62px; gap: 6px; align-content: start; }
.pg-body > * { animation: pg-in 380ms var(--ease-expo) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes pg-in { from { opacity: 0; translate: 0 6px; filter: blur(3px); } }
.pg-t { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 0; border-radius: 12px;
  background: rgba(255, 255, 255, .045); font: 500 10px/1 -apple-system, system-ui, sans-serif; color: var(--notch-text-2); text-align: center;
  transition: background var(--m-base), color var(--m-base); }
.pg-t:hover { background: rgba(255, 255, 255, .08); color: var(--notch-text); }
.pg-t > span { max-width: 100%; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-t .ic { width: 18px; height: 18px; color: var(--notch-text); }
/* Shelf files: tall cards that fill both rows, preview on top, name under it */
.pg-file { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0;
  padding: 0 12px; border-radius: 12px; text-align: center;
  background: rgba(255, 255, 255, .045); font: 500 11.5px/1.25 -apple-system, system-ui, sans-serif; color: var(--notch-text); transition: background var(--m-base); }
.pg-file:hover { background: rgba(255, 255, 255, .08); }
.pg-file > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-file i { height: 54px; border-radius: 5px; flex: none; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.pg-file .pg-png { width: 72px; background: url(../img/wall.webp) 30% 40% / 300%; }
.pg-file .pg-pdf { width: 44px; background: #f5f5f7; position: relative; }
.pg-file .pg-pdf::after { content: "PDF"; position: absolute; left: 4px; bottom: 4px; font: 700 8px/1 system-ui; color: #ff453a; }
.pg-file small { display: block; margin-top: 2px; font-size: 10px; font-weight: 400; color: var(--notch-text-2); }
.pg-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.pg-bar { display: flex; gap: 2px; padding: 2px; border-radius: 15px; background: rgba(255, 255, 255, .06); }
.pg-bar button { height: 26px; padding: 0 11px; border-radius: 13px; font: 600 11px/1 -apple-system, system-ui, sans-serif; color: var(--notch-text-2); position: relative;
  transition: background var(--m-base), color var(--m-base); }
.pg-bar button:hover { color: var(--notch-text); }
.pg-bar button::after { content: ""; position: absolute; inset: -8px 0; }
.pg-bar button[aria-selected="true"] { background: rgba(255, 255, 255, .14); color: var(--notch-text); }
.pg-bar button:focus-visible { outline: 1.5px solid var(--notch-blue); outline-offset: 1px; }
.pg-favs { display: flex; gap: 4px; }
.pg-favs span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06);
  animation: pg-pop var(--sp-reward-d) var(--sp-reward) both; }
.pg-favs .ic { width: 14px; height: 14px; }
@keyframes pg-pop { from { scale: .3; opacity: 0; } }

/* Pinned Actions: the resting notch, its right wing holds the pins */
.mn-rest { --sh: 8px; height: 34px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-radius: 0 0 12px 12px; padding: 0 10px;
  scale: 1.5; transform-origin: 50% 0; }
.pin-cam { width: 150px; flex: none; }
.pin-l, .pin-r { display: flex; align-items: center; gap: 2px; min-width: 16px; }
.pin-l { justify-content: flex-start; }
.pin-r button { width: 22px; height: 26px; display: grid; place-items: center; color: rgba(255, 255, 255, .9); border-radius: 6px;
  animation: pg-pop var(--sp-reward-d) var(--sp-reward) both; transition: background var(--m-fast); }
.pin-r button:hover { background: rgba(255, 255, 255, .1); }
.pin-r .ic { width: 14px; height: 14px; }
.pin-r button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); }
/* A tapped pin opens the notch on its action; the row of pins stays at the top */
.mn-rest[data-open] { height: auto; min-width: 310px; grid-template-rows: 34px auto; border-radius: 0 0 20px 20px; }
/* The notch is scaled 1.5x, so the panel inside runs small and quiet */
.pin-body { grid-column: 1 / -1; padding: 4px 4px 12px; animation: pg-in 380ms var(--ease-expo) both; font-size: 11px; }
.pin-body .nb { height: 24px; padding: 0 11px; border-radius: 12px; font-size: 11px; box-shadow: none; }
.pin-body .nb:focus-visible { border-radius: 12px; }
.pin-body .notes .ct small { display: none; }
.pin-body .tmr { margin-top: 0; gap: 10px; align-items: center; }
.pin-body .tmr .ring { width: 30px; height: 30px; }
.pin-body .tmr .ring circle { stroke-width: 2; }
.pin-body .tmr small { font-size: 10px; letter-spacing: .02em; }
.pin-body .tm { display: block; margin-top: 2px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.pin-body .tmr .nb + .nb { margin-left: -4px; }
.pin-body .clip { grid-template-columns: minmax(0, 1fr); }
.pin-body .clip button { height: 32px; padding: 0 10px; border-radius: 9px; gap: 8px; }
.pin-body .notes button { height: 34px; }
.pin-body .clip .ct { font-size: 11.5px; }
.pin-body .clip .cc { font-size: 10px; }
.pin-body .notes .ck { width: 15px; height: 15px; }
.pin-body .nb { justify-self: start; }
/* Fixed height so Convert doesn't change the panel size */
.pin-body .sfile { width: 72px; height: 76px; border-radius: 10px; gap: 6px; }
.pin-body .sfile small { font-size: 10px; }
.pin-body .thumb { width: 36px; height: 28px; border-width: 2px; box-shadow: none; }
.pin-body .doc-t { width: 26px; height: 32px; }
.pin-body .t1 { font-size: 12px; } .pin-body .t2 { font-size: 10.5px; }
.pin-body .tgl { width: 32px; height: 19px; } .pin-body .tgl::after { width: 15px; height: 15px; } .pin-body .tgl[aria-checked="true"]::after { translate: 13px 0; }
.pin-st { gap: 10px; }
.pin-st .t2 { flex: 1; min-width: 0; line-height: 1.3; }
.pin-tp { height: 96px; }
.pin-tp .tp-in p { font-size: 17px; }
.pin-tp .tp-in { animation: tp-run 7s linear forwards; }
@keyframes tp-run { to { translate: 0 -78px; } }

/* Drag to reorder: pins, page tabs, favorites */
.pin-r button, .pg-bar button, .pg-favs span, .pg-body > * { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* Tiles move in two directions, so a touch on them drags instead of scrolling the page */
.pg-body > * { touch-action: none; }
.sorting { cursor: grabbing !important; scale: 1.12; z-index: 2; background: rgba(255, 255, 255, .2) !important; }

/* Hide the notch: the screen slides below the camera, the bar shows in full */
.hn-vis { --nh: 34px; background: #000; }
.hn-screen { position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), url(../img/wall.webp) 50% 30% / cover;
  transition: inset var(--sp-expand-d) var(--sp-expand); }
.hn-bar { height: var(--nh); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(8, 10, 16, .6);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font: 400 12.5px/1 -apple-system, system-ui, sans-serif; color: rgba(255, 255, 255, .92); white-space: nowrap; }
.hn-l { display: flex; gap: 16px; min-width: 0; max-width: calc(50% - 110px); overflow: hidden; transition: max-width var(--sp-expand-d) var(--sp-expand); }
.hn-l b { font-weight: 700; }
.hn-r { display: flex; gap: 14px; }
.hn-cam { position: absolute; left: 50%; top: 0; translate: -50% 0; width: 196px; height: var(--nh); background: #000; border-radius: 0 0 12px 12px; z-index: 2;
  transition: border-radius var(--sp-expand-d) var(--sp-expand); }
.hn-doc { position: absolute; left: 12%; right: 12%; top: calc(var(--nh) + 40px); bottom: -10px; border-radius: 12px 12px 0 0; background: #f5f5f7; padding: 48px 56px; display: grid; align-content: start; gap: 14px; }
.hn-doc i { height: 10px; border-radius: 5px; background: #d9d9de; } .hn-doc i:first-child { width: 46%; height: 16px; background: #1d1d1f; } .hn-doc i:last-child { width: 72%; }
.hn-vis[data-on] .hn-screen { inset: var(--nh) 0 0; }
.hn-vis[data-on] .hn-l { max-width: 100%; }
.hn-vis[data-on] .hn-cam { border-radius: 0; }

@media (max-width: 1068px) {
  .ks-facts { grid-template-columns: 1fr; gap: 12px; }
  .bt-theme, .bt-hide { grid-template-columns: 1fr; }
  .bt-hide .bt-vis { order: 0; }
  .bt-theme .bt-vis, .bt-hide .bt-vis { min-height: 0; aspect-ratio: 16 / 10; }
  .hn-l { gap: 12px; }
}
@media (max-width: 734px) {
  .ks { padding-top: 64px; border-radius: var(--r-lg); }
  .ks-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .ks-vol input { flex: 1; }
  /* Phone: letters and space only, keys tall enough to hit */
  .kb .x { display: none; }
  .kb .p { display: flex; }
  .kc { height: 46px; font-size: 15px; }
  .pk-c, .pk .pk-c { min-height: 44px; }
  .mn-w { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(28, 28, 32, .72); } /* the theme canvas animates behind these: no live blur on a phone */
  .pk-g { flex-direction: column; align-items: stretch; gap: 8px; }
  .bento { grid-template-columns: 1fr; }
  .bt-theme, .bt-hide { grid-column: auto; }
  .th-list { grid-template-columns: 1fr; }
  .mn-open { padding: 36px 10px 10px; }
  .mn-w { padding: 9px; }
  .mn-rest { scale: 1.15; }
  .mn-rest[data-open] { min-width: 270px; }
  .mn-sm { width: 94%; padding: 34px 10px 10px; }
  .pg-bar button { padding: 0 8px; }
  .pg-favs span { width: 26px; height: 26px; }
  .pg-favs .ic { width: 13px; height: 13px; }
  .pin-cam { width: 120px; }
  .hn-vis { --nh: 28px; }
  .hn-bar { font-size: 10.5px; padding: 0 10px; }
  .hn-l { gap: 9px; max-width: calc(50% - 80px); }
  .hn-r span:not(:last-child) { display: none; }
  .hn-cam { width: 130px; }
  .hn-doc { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .kc, .ks-isl, .hn-screen, .hn-l, .hn-cam { transition: none; }
  .pg-body > *, .pg-favs span, .pin-r button, .pin-body, .pin-tp .tp-in, .ks-isl.swap .ks-wl b { animation: none; }
}