/* notei.co/shelf, "staff paper" (2026-10-19, v s3). Rides on style.css for the
   tokens, nav, footer, buttons, Bravura and the in-app escape sheet. The page is
   manuscript paper: faint five-line staves behind everything, the intro set like
   the opening system of a score (and a short demo of the editor at work), and
   each reel's seek bar a playhead crossing a little staff. The player is
   shelf.js; the browser's own media chrome never shows. Light only, like every
   marketing page. */

.cb{
  --rule:rgba(122,96,58,.15);
  --line:rgba(26,26,26,.62);
  background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='120'%3E%3Cg fill='%237a603a' fill-opacity='.12'%3E%3Crect y='44' width='8' height='1'/%3E%3Crect y='52' width='8' height='1'/%3E%3Crect y='60' width='8' height='1'/%3E%3Crect y='68' width='8' height='1'/%3E%3Crect y='76' width='8' height='1'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
}
.cb .nav{position:relative}
.cb .foot{position:relative}
.cb-vh,.sh-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.sh-wrap{width:100%;max-width:1120px;margin:0 auto;padding:22px 16px 64px}

/* ---------- intro: the opening system ---------- */
.cb-intro{position:relative;margin:0 0 22px}
.cb-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;letter-spacing:.01em;color:#8f5d12;margin-bottom:10px}
.cb-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--honey);flex:none}
.cb-intro h1{font-size:clamp(1.85rem,7.6vw,3.3rem);line-height:1.04;letter-spacing:-.03em;font-weight:800;max-width:17ch;color:var(--ink)}
.cb-system{position:relative;height:96px;margin:12px 0 10px;background:transparent}
.cb-system svg{display:block;overflow:visible}
.cb-system .ln{stroke:var(--line);stroke-width:1}
.cb-system .bl{stroke:var(--line);stroke-width:1.2}
.cb-system .fb{fill:var(--ink)}
.cb-system .g{font-family:'Bravura';fill:var(--ink)}
.cb-system .ph{stroke:var(--honey);stroke-width:2.2;stroke-linecap:round;opacity:0}
.cb-system .sel{fill:rgba(244,162,59,.12);stroke:rgba(200,134,30,.62);stroke-width:1;stroke-dasharray:3 3}
.cb-system .ch{fill:var(--honey-deep)}
.cb-system .stm{stroke:var(--ink);transform-box:fill-box;transform-origin:50% 100%}
.cb-ask{position:absolute;left:0;top:70px;white-space:nowrap;font-size:12px;line-height:1;font-weight:600;color:var(--ink);background:#fff;
  border:1px solid var(--border);border-radius:999px;padding:6px 11px 6px 9px;box-shadow:0 4px 10px -6px rgba(120,80,20,.35)}
.cb-ask b{color:var(--honey-deep);margin-right:3px;font-weight:700}
.cb-what{font-size:1.06rem;line-height:1.45;color:var(--ink2);max-width:46ch}
.cb-wm{display:inline-block;height:1.08em;width:auto;vertical-align:-.16em;margin-right:.08em}
.cb-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:16px}
.cb-go{padding:12px 13px 12px 22px}
.cb-about{font-size:.95rem;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--honey);text-decoration-thickness:2px;text-underline-offset:4px;padding:11px 2px}
.cb-about:hover{color:var(--honey-deep)}
.cb-hint{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:.86rem;font-weight:500;color:var(--muted)}
.cb-hint-i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--honey);position:relative;flex:none}
.cb-hint-i::after{content:"";position:absolute;left:50%;top:3px;width:5px;height:5px;margin-left:-3px;border-right:1.6px solid var(--honey-deep);border-bottom:1.6px solid var(--honey-deep);transform:rotate(45deg)}

/* ---------- the list ---------- */
.sh-list{display:grid;grid-template-columns:1fr;gap:14px}
.sh-card{display:grid;grid-template-columns:40% minmax(0,1fr);gap:14px;align-items:start;
  background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);padding:10px;
  box-shadow:0 14px 30px -24px rgba(70,46,12,.45);scroll-margin-top:12px}
.cb-player{position:relative;min-width:0}
.sh-media{position:relative;aspect-ratio:9/16;border-radius:11px;overflow:hidden;background:#0a0a0b}
.sh-video{display:block;width:100%;height:100%;object-fit:contain;background:#0a0a0b}
.sh-play{position:absolute;inset:0;display:grid;place-items:center;border:0;padding:0;margin:0;cursor:pointer;
  background:linear-gradient(to top,rgba(10,10,11,.42),rgba(10,10,11,0) 55%);-webkit-tap-highlight-color:transparent}
.sh-play svg{width:56px;height:56px;padding:16px 14px 16px 18px;border-radius:50%;background:var(--honey);fill:#1a1a1a;
  box-shadow:0 0 0 6px rgba(244,162,59,.22),0 8px 22px rgba(0,0,0,.34);transition:transform .25s var(--spring),box-shadow .25s var(--ease)}
.sh-play:hover svg{transform:scale(1.05);box-shadow:0 0 0 9px rgba(244,162,59,.22),0 8px 22px rgba(0,0,0,.34)}
.sh-play:active svg{transform:scale(.94)}
.sh-play:focus-visible{outline:3px solid var(--honey);outline-offset:-3px}
.cb-chip{position:absolute;left:8px;bottom:8px;font-size:.72rem;font-weight:700;line-height:1;color:#f3ece0;
  background:rgba(10,10,11,.6);padding:5px 8px;border-radius:999px;pointer-events:none;font-variant-numeric:tabular-nums}
.sh-card.on .sh-play,.sh-card.on .cb-chip{display:none}

.sh-text{min-width:0;padding:4px 4px 6px 0;display:flex;flex-direction:column;gap:8px}
.cb-meta{display:flex;align-items:center;gap:8px}
.cb-mark{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 4px;border:1.6px solid var(--ink);border-radius:2px;
  font-size:.78rem;font-weight:800;line-height:1;color:var(--ink)}
.cb-len{font-size:.76rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.sh-q{font-size:1.02rem;line-height:1.22;font-weight:700;letter-spacing:-.01em}
.sh-answer{font-size:.9rem;line-height:1.45;color:var(--ink2)}
.sh-cta{align-self:flex-start;margin-top:2px;display:inline-block;min-height:44px;font-size:.82rem;font-weight:700;line-height:20px;white-space:nowrap;
  color:var(--cream);background:var(--ink);text-decoration:none;padding:12px 14px;border-radius:999px;
  transition:transform .15s var(--ease),background .2s}
.sh-cta::after{content:"\00a0\2192"}
.sh-cta:hover{background:#000}
.sh-cta:active{transform:scale(.97)}
.sh-cta:focus-visible,.cb-deck-cta:focus-visible,.cb-about:focus-visible,.cb-go:focus-visible,.cb-does-go:focus-visible,.cb-sticky-go:focus-visible,.cb-end-cta:focus-visible{outline:3px solid var(--honey-deep);outline-offset:3px}

/* an open reel takes the full card width on a phone: its mark and question stay
   ABOVE the video, the answer and CTA go under the deck, and the video is sized
   so question + video + deck fit one screen */
.sh-card.on{grid-template-columns:minmax(0,1fr);grid-template-areas:"meta" "q" "player" "answer" "cta";gap:6px 0}
.sh-card.on .sh-text{display:contents}
.sh-card.on .cb-meta{grid-area:meta;padding:2px 4px 0}
.sh-card.on .sh-q{grid-area:q;padding:0 4px 4px}
.sh-card.on .cb-player{grid-area:player;width:min(100%,calc((100svh - 250px) * 9 / 16));justify-self:center}
.sh-card.on .sh-answer{grid-area:answer;padding:6px 4px 0}
.sh-card.on .sh-cta{grid-area:cta;justify-self:start;margin:6px 4px 4px}

/* tap feedback and the paused mark, centred on the video */
.cb-flash,.cb-hold{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  display:grid;place-items:center;pointer-events:none;opacity:0}
.cb-flash{background:rgba(10,10,11,.5)}
.cb-flash svg{width:28px;height:28px;fill:#f3ece0}
.cb-flash.go{animation:cbFlash .6s var(--ease) both}
@keyframes cbFlash{0%{opacity:.95;transform:scale(.8)}100%{opacity:0;transform:scale(1.15)}}
.cb-hold{background:var(--honey);box-shadow:0 0 0 6px rgba(244,162,59,.22),0 8px 22px rgba(0,0,0,.34);transition:opacity .2s}
.cb-hold svg{width:26px;height:26px;fill:#1a1a1a;margin-left:3px}
.sh-card.on.paused:not(.ended) .cb-hold{opacity:1}

/* end of the reel: a final barline, replay, and the card's way in */
.cb-end{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;
  background:rgba(14,11,8,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-align:center}
.sh-card.ended .cb-end{display:flex;animation:cbIn .35s var(--ease) both}
@keyframes cbIn{from{opacity:0}to{opacity:1}}
.cb-end-l{font-size:1rem;font-weight:700;font-variant-caps:all-small-caps;letter-spacing:.09em;line-height:1;color:var(--honey);margin-bottom:2px}
.cb-again{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.92rem;font-weight:700;color:#f3ece0;background:transparent;
  border:1.5px solid rgba(243,236,224,.38);border-radius:999px;padding:10px 18px 10px 14px;cursor:pointer}
.cb-again svg{width:18px;height:18px;fill:#f3ece0}
.cb-again svg .w{fill:none;stroke:#f3ece0;stroke-width:2;stroke-linecap:round}
.cb-again:hover{background:rgba(243,236,224,.1)}
.cb-again:focus-visible{outline:3px solid var(--honey);outline-offset:3px}
.cb-end-cta{display:inline-block;font-size:.92rem;font-weight:700;color:#1a1a1a;background:var(--honey);text-decoration:none;padding:12px 18px;border-radius:999px;box-shadow:0 8px 22px rgba(200,134,30,.3)}
.cb-end-cta::after{content:"\00a0\2192"}

/* ---------- the deck: a playhead on a staff ---------- */
.cb-deck{display:none;margin-top:8px;container-type:inline-size}
.sh-card.on .cb-deck{display:block}
.cb-lane{display:flex;align-items:center;gap:4px}
.cb-clef{flex:none;overflow:visible}
.cb-clef text{font-family:'Bravura';font-size:24px;fill:var(--ink)}
.cb-track{position:relative;flex:1;min-width:0;height:44px;cursor:pointer;touch-action:none;outline:none;border-radius:6px;-webkit-tap-highlight-color:transparent}
.cb-track:focus-visible{box-shadow:0 0 0 3px var(--honey-deep)}
.cb-lines{position:absolute;left:0;right:0;top:10px;height:25px;
  background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 6px)}
.cb-lines::before,.cb-lines::after{content:"";position:absolute;top:0;bottom:0;background:var(--ink)}
.cb-lines::before{right:5px;width:1px}
.cb-lines::after{right:0;width:3px}
.cb-bl{position:absolute;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--line)}
.cb-fill{position:absolute;left:0;width:7px;top:10px;height:25px;background:rgba(244,162,59,.34)}
.cb-head{position:absolute;top:3px;bottom:3px;width:2px;margin-left:-1px;left:7px;background:var(--honey-deep);border-radius:2px}
.cb-head i{position:absolute;left:50%;top:14px;width:14px;height:10px;margin-left:-7px;border-radius:50%;background:var(--ink);
  transform:rotate(-22deg);transition:transform .15s var(--ease)}
.cb-track.drag .cb-head i{transform:rotate(-22deg) scale(1.35)}
.sh-card.wait .cb-head{animation:cbWait 1s ease-in-out infinite}
@keyframes cbWait{50%{opacity:.25}}
.cb-row{display:flex;align-items:center;gap:12px;margin-top:2px}
.cb-pp,.cb-mute{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.cb-pp{background:var(--ink);border:0}
.cb-pp svg{width:20px;height:20px;fill:var(--cream)}
.cb-mute{margin-left:auto;background:var(--paper);border:1px solid var(--border)}
/* the card's way in, on screen for the whole reel (same href and shelf_cta event as the card CTA) */
.cb-deck-cta{margin-left:auto;display:inline-block;min-height:44px;padding:12px 2px;font-size:.86rem;font-weight:700;line-height:20px;white-space:nowrap;
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--honey);text-decoration-thickness:2px;text-underline-offset:4px}
.cb-deck-cta:hover{color:#8f5d12}
.cb-deck-cta+.cb-mute{margin-left:0}
@container (max-width:259px){.cb-deck-cta{display:none}.cb-deck-cta+.cb-mute{margin-left:auto}}
.cb-mute svg{width:21px;height:21px;fill:var(--ink)}
.cb-mute svg .w{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.cb-pp:focus-visible,.cb-mute:focus-visible{outline:3px solid var(--honey-deep);outline-offset:2px}
.cb-time{font-size:.86rem;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.cb-time b{color:var(--ink);font-weight:700}

/* ---------- what notei does: five bars ---------- */
.cb-does{grid-column:1/-1;margin:10px 0;padding:24px 18px 22px;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:0 14px 30px -24px rgba(70,46,12,.45)}
.cb-does-head h2{font-size:clamp(1.5rem,6vw,2.2rem);line-height:1.08;letter-spacing:-.025em;font-weight:800}
.cb-does-head p:not(.cb-eyebrow){margin-top:8px;color:var(--ink2);font-size:.98rem;max-width:42ch}
.cb-bars{list-style:none;margin:18px 0 20px;padding:0;border-top:1px solid var(--border)}
.cb-bars li{display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.cb-g{display:block}
.cb-g line{stroke:var(--line);stroke-width:1}
.cb-g .m{font-family:'Bravura';font-size:24px;fill:var(--ink)}
.cb-g .sp{font-family:var(--font);font-size:24px;fill:var(--honey-deep);text-anchor:middle}
.cb-t{font-size:.93rem;line-height:1.4;color:var(--ink2)}
.cb-t b{display:block;color:var(--ink);font-weight:800;font-size:1rem;margin-bottom:1px}

/* ---------- phones: the slim bar ---------- */
.cb-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom)) 16px;background:var(--paper);border-top:1px solid var(--border);
  box-shadow:0 -10px 24px -18px rgba(70,46,12,.4);transform:translateY(110%);visibility:hidden;
  transition:transform .35s var(--ease),visibility 0s linear .35s}
.cb-sticky.on{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
.cb-sticky img{height:19px;width:auto;flex:none}
.cb-sticky-t{flex:1;min-width:0;font-size:.8rem;line-height:1.25;font-weight:600;color:var(--ink2);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.cb-sticky-go{flex:none;font-size:.88rem;font-weight:700;color:#1a1a1a;background:var(--honey);text-decoration:none;padding:12px 16px;border-radius:999px}
@media (max-width:699px){.cb .foot{padding-bottom:calc(40px + 68px)}}
/* small phones: a wider text column so the card CTA stays on one line */
@media (max-width:379px){.sh-card{grid-template-columns:37% minmax(0,1fr)}.sh-cta{font-size:.78rem;padding:12px 11px}}
/* under ~350px even that column is too narrow: the label wraps rather than overflow the card */
@media (max-width:349px){.sh-card:not(.on) .sh-cta{white-space:normal}}

/* ---------- wider screens ---------- */
@media (min-width:700px){
  .sh-wrap{padding:40px clamp(24px,5vw,56px) 88px}
  .cb-intro{margin-bottom:34px}
  .cb-system{height:112px;margin:18px 0 14px}
  .cb-what{font-size:1.14rem}
  .sh-list{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;grid-auto-flow:row}
  .sh-card{grid-template-columns:1fr;align-content:start;padding:12px}
  /* an open reel plays in its own cell: video where the poster was, the deck under
     it, so no card moves, the order holds and the strip stays after C */
  .sh-card.on{grid-template-areas:"player" "meta" "q" "answer" "cta";gap:10px 0;padding:12px}
  .sh-card.on .cb-player{width:min(100%,calc((100svh - 130px) * 9 / 16))}
  .sh-card.on .cb-meta{padding:2px 4px 0}
  .sh-card.on .sh-q{padding:0 4px}
  .sh-card.on .sh-answer{padding:0 4px}
  .sh-card.on .sh-cta{margin:2px 4px 6px}
  .sh-text{padding:2px 4px 6px}
  .cb-does{display:grid;grid-template-columns:minmax(0,1fr);padding:30px 32px 30px}
  .cb-bars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:0;margin:24px 0 26px}
  /* one continuous staff across the strip: each capability is a bar */
  .cb-bars li{position:relative;grid-template-columns:1fr;align-content:start;gap:12px;padding:0 18px 4px;border-bottom:0;
    background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 6px) 0 8px/100% 25px no-repeat}
  .cb-bars li::before{content:"";position:absolute;left:0;top:8px;height:25px;width:1.2px;background:var(--line)}
  .cb-bars li:last-child{margin-right:6px}
  .cb-bars li:last-child::after{content:"";position:absolute;right:-6px;top:8px;height:25px;width:3.5px;background:var(--ink);box-shadow:-5px 0 0 -2px var(--ink)}
  .cb-g line{display:none}
  .cb-does-go{justify-self:start}
  .cb-sticky{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sh-play svg,.sh-cta,.cb-sticky,.cb-head i,.cb-hold{transition:none}
  .cb-flash.go,.sh-card.ended .cb-end,.sh-card.wait .cb-head{animation:none}
}