/* Minuet — the practice notebook.
   A second direction: the page is somebody's marked-up part, not an engraved
   score. Everything is taped in slightly crooked, the staff wanders, and the
   melody hops along it bar by bar. All site classes are w- prefixed so the
   embedded app screens (app.css / chrome.css) can never collide. */

:root{
  --paper:#F7F0DE;--paper-2:#FBF6E8;
  --ink:#2A241D;--ink-2:#544938;--ink-3:#6D6049;--rule:#C9B68E;
  --red:#A8231C;--blue:#1D4A96;--brass:#7E610C;--green:#2A6349;--plum:#742A66;
  --pen:var(--brass);
  --f-disp:'Playfair Display',Georgia,serif;
  --f-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --f-hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --mast:76px;--bandtop:20%;--u:2.4px;--ph:.8;
  --spring:cubic-bezier(.34,1.5,.5,1);
}
.w-page,.w-page body{height:100%;overflow:hidden}
*{box-sizing:border-box}
body{margin:0;font-family:var(--f-body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-wrap:pretty}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(120% 90% at 50% 0,var(--paper-2),transparent 62%),repeating-linear-gradient(92deg,rgba(120,96,54,.028) 0 1px,transparent 1px 3px)}
a{color:var(--pen)}a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:3px}

.w-skip{position:fixed;left:14px;top:-60px;z-index:99;background:var(--ink);color:var(--paper-2);padding:11px 18px;border-radius:8px;font-size:15px;font-weight:600;text-decoration:none;transition:top .2s}
.w-skip:focus{top:12px;color:var(--paper-2)}

/* ---- masthead: a clipboard across the top of the part ---- */
.w-mast{position:fixed;left:0;right:0;top:0;height:var(--mast);z-index:20;display:flex;align-items:center;gap:14px;padding:0 clamp(16px,3.4vw,40px);background:linear-gradient(180deg,rgba(247,240,222,.97),rgba(247,240,222,.72) 74%,transparent)}
.w-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.w-brand svg{width:31px;height:31px;display:block}
.w-brand b{font-family:var(--f-disp);font-size:1.66rem;font-weight:700;letter-spacing:.01em}
.w-pend{margin-left:6px;width:26px;height:30px;color:var(--ink-3)}
.w-pend .stick{transform-origin:13px 27px;transform:rotate(var(--swing,0deg))}
.w-mast .w-btn{margin-left:auto}

.w-btn{display:inline-block;font-family:var(--f-body);font-size:.95rem;font-weight:600;text-decoration:none;border-radius:11px;padding:11px 20px;border:2px solid var(--ink);color:var(--ink);background:none;transition:transform .16s var(--spring),box-shadow .16s ease}
.w-btn:hover{color:var(--ink);transform:translate(-1px,-2px) rotate(-.8deg);box-shadow:3px 4px 0 var(--ink)}
.w-btn-go{background:var(--ink);color:var(--paper-2);border-color:var(--ink);font-size:1.05rem;padding:14px 26px;box-shadow:4px 5px 0 rgba(42,36,29,.22)}
.w-btn-go:hover{color:var(--paper-2);box-shadow:5px 7px 0 var(--pen)}
.w-btn-quiet{padding:8px 15px;font-size:.88rem;border-width:1.5px}
/* Apple's badge is supplied art. Their guidelines forbid modifying, angling or
   animating it, and require clear space of a quarter its height on every side —
   so it gets no tilt, no hover motion, no shadow, and a hard 14px margin. */
.w-appstore{display:inline-block;line-height:0;margin:14px;transition:none}
.w-appstore img,.w-appstore svg{display:block;height:56px;width:auto}
.w-appstore:focus-visible{outline-offset:4px}
@media (max-width:640px){.w-appstore img,.w-appstore svg{height:48px}.w-appstore{margin:12px}}
.w-getrow:has(.w-appstore){margin:calc(1.5em - 14px) 0 calc(.7em - 14px) -14px}

/* an inline link that carries weight — for prose, not for the download calls */
.w-cta{display:inline-block;font-weight:600;font-size:1.06rem;text-decoration:none;color:var(--ink);border-bottom:2.5px solid var(--pen);padding-bottom:3px;transition:color .16s ease,border-color .16s ease}
.w-cta:hover{color:var(--pen)}
.w-legal{font-size:.72rem;line-height:1.5;color:var(--ink-3);max-width:56ch;margin:.9em 0 0}

/* ---- the score: read sideways ---- */
.w-score{position:fixed;inset:0;overflow-x:auto;overflow-y:hidden;display:flex;align-items:stretch;z-index:1;scrollbar-width:none}
.w-score::-webkit-scrollbar{display:none}
.w-bar{position:relative;flex:0 0 auto;width:min(var(--wbase,1020px),96vw);height:100%;padding:0 clamp(16px,2vw,32px)}
.w-bar:first-child{padding-left:clamp(28px,6vw,90px)}
.w-bar:last-child{padding-right:clamp(40px,10vw,140px)}

/* the staff wanders: each bar draws its own segment, ending where the next begins */
.w-stave{position:absolute;left:0;top:var(--bandtop);width:100%;height:calc(100 * var(--u));overflow:visible;color:var(--rule);z-index:1}
.w-wash{position:absolute;z-index:0;width:clamp(320px,46%,560px);aspect-ratio:1.4;left:var(--wx,3%);top:var(--wy,26%);background:radial-gradient(50% 50% at 50% 50%,var(--pen),transparent 70%);opacity:.085;filter:blur(24px);border-radius:50%;transform:rotate(var(--wr,-8deg))}

/* a notehead per bar, sitting on the line where that bar ends */
.w-note{position:absolute;z-index:3;left:calc(100% - 76px);top:calc(var(--bandtop) + var(--out) * var(--u));width:21px;height:16px;border-radius:50%;background:var(--pen);transform:rotate(-21deg)}
.w-note::after{content:'';position:absolute;right:0;bottom:6px;width:2.8px;height:54px;background:var(--pen);transform-origin:bottom right;transform:rotate(21deg)}
.w-note.down::after{right:auto;left:0;bottom:auto;top:6px;transform-origin:top left}
.w-note.hollow{background:none;border:3.4px solid var(--pen)}
.w-note.hollow::after{bottom:5px}
.w-note.whole::after{display:none}
.w-note.whole{width:23px;height:15px}
.w-bar.pb .w-note{left:auto;right:calc(6% + 390px * var(--ph) + 30px)}

/* ---- words ---- */
.w-text{position:absolute;z-index:4;left:var(--x,7%);width:min(42ch,var(--tw,64%));bottom:calc(28% + var(--lift,0px))}
h1{font-family:var(--f-disp);font-weight:700;font-size:clamp(2.6rem,1.7rem+3.6vw,5rem);line-height:.98;letter-spacing:-.018em;margin:0 0 .34em;color:var(--ink)}
h2{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.85rem,1.3rem+1.9vw,3.05rem);line-height:1.05;letter-spacing:-.012em;margin:0 0 .1em;color:var(--ink)}
.w-under{display:block;width:min(300px,86%);height:13px;margin:0 0 .78em;color:var(--pen);overflow:visible}
.w-under path{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320}
/* NB: scoped to the score. This used to be a bare `p` selector, which leaked the
   44ch measure onto the document pages (doc.css) and made their prose 30%
   narrower than the lists and boxes beside it. */
.w-bar p{margin:0 0 .95em;font-size:clamp(1.02rem,.96rem+.28vw,1.19rem);line-height:1.62;color:var(--ink-2);max-width:44ch}
.w-lede{font-size:clamp(1.12rem,1rem+.45vw,1.36rem);color:var(--ink-2)}
.w-pull{font-family:var(--f-disp);font-style:italic;font-size:clamp(1.18rem,1.02rem+.6vw,1.5rem);line-height:1.34;color:var(--ink);max-width:26ch;margin-top:1.1em;padding-left:16px;border-left:3px solid var(--pen)}
.w-fine{font-size:.88rem;color:var(--ink-3);letter-spacing:.01em}
.w-getrow{margin:1.5em 0 .7em}
.w-mark{font-family:var(--f-hand);font-size:1.5rem;color:var(--pen);letter-spacing:.01em;margin:0 0 .18em;transform:rotate(-1.6deg);transform-origin:left}
.w-kick{font-family:var(--f-hand);font-size:2rem;color:var(--pen);margin:0 0 .1em;transform:rotate(-2deg);transform-origin:left}

/* ---- pencil marginalia, taped notes, arrows ---- */
.w-marg{position:absolute;z-index:6;font-family:var(--f-hand);font-size:1.62rem;line-height:1.14;color:var(--pen);transform:rotate(var(--r,-3deg));max-width:15ch;pointer-events:none}
.w-arrow{position:absolute;z-index:6;color:var(--pen);overflow:visible;pointer-events:none}
.w-arrow path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.w-sticky{position:absolute;z-index:6;width:198px;padding:17px 18px 20px;background:#FBE28A;color:#3A2D0B;font-family:var(--f-hand);font-size:1.5rem;line-height:1.2;border-radius:2px;box-shadow:2px 6px 14px rgba(70,54,20,.22);transform:rotate(var(--r,2.4deg))}
.w-sticky::before{content:'';position:absolute;left:50%;top:-11px;width:86px;height:23px;transform:translateX(-50%) rotate(-1.6deg);background:rgba(246,236,206,.82);box-shadow:0 1px 3px rgba(70,54,20,.18)}
.w-circle{position:absolute;z-index:5;color:var(--pen);overflow:visible;pointer-events:none}
.w-circle path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;opacity:.85;vector-effect:non-scaling-stroke}

/* ---- the app, taped into the notebook ---- */
.w-phone{position:absolute;z-index:5;right:var(--pr,5%);top:50%;width:calc(390px * var(--ph));height:calc(844px * var(--ph));transform:translateY(-50%) rotate(var(--pt,2deg));pointer-events:none}
.w-phone-in{width:390px;height:844px;transform:scale(var(--ph));transform-origin:top left}
.w-phone .dev{box-shadow:0 20px 44px rgba(70,50,22,.3),0 0 0 1px rgba(70,50,22,.12)}
/* a paper screen on a paper page needs a real edge — the .12 ring vanishes */
.w-phone .dev.chrome-light{box-shadow:0 20px 44px rgba(70,50,22,.26),0 0 0 1px rgba(70,50,22,.34)}
.w-phone::before,.w-phone::after{content:'';position:absolute;z-index:4;width:118px;height:31px;background:rgba(246,235,203,.8);box-shadow:0 1px 4px rgba(70,54,20,.2);left:50%}
.w-phone::before{top:-15px;transform:translateX(-58%) rotate(-3.4deg)}
.w-phone::after{bottom:-15px;transform:translateX(-44%) rotate(2.6deg)}

/* ---- skins as swatch chips, pinned in a row ---- */
.w-skins{list-style:none;margin:1.25em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.w-skin{display:flex;align-items:center;gap:9px;padding:7px 13px 7px 8px;border:1.6px solid var(--rule);border-radius:999px;background:rgba(255,252,244,.6);transform:rotate(var(--r,-1deg));transition:transform .2s var(--spring)}
.w-skin:hover{transform:rotate(0) translateY(-2px)}
.w-skin .sw{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.14)}
.w-skin .sn{font-size:.92rem;font-weight:600;color:var(--ink)}
.s-walnut .sw{background:linear-gradient(140deg,#6B4423,#C9A84C)}
.s-comet .sw{background:linear-gradient(140deg,#0C1B33,#8FD3E8)}
.s-paris .sw{background:linear-gradient(140deg,#2E2A3E,#E0A9B4)}
.s-arcade .sw{background:linear-gradient(140deg,#1A0B2E,#FF4FD8)}

/* ---- a rest: the page breathes ---- */
.w-rest{--wbase:260px;display:flex;align-items:center;justify-content:center}
.w-rest .w-fermata{position:absolute;top:calc(var(--bandtop) + 4px);left:50%;transform:translateX(-50%);width:62px;color:var(--ink-3)}
.w-rest .w-blob{position:absolute;top:calc(var(--bandtop) + 44px);left:50%;transform:translateX(-50%) rotate(-2deg);width:44px;height:15px;border-radius:3px;background:var(--ink-3);opacity:.75}
.w-rest .w-marg{top:calc(var(--bandtop) + 84px);left:50%;transform:translateX(-50%) rotate(-2deg);color:var(--ink-3);text-align:center}

/* ---- tail ---- */
.w-tail{--wbase:640px}
.w-tail .w-text{width:min(46ch,82%)}
.w-dc{font-family:var(--f-hand);font-size:1.9rem;color:var(--pen);margin:0 0 .2em;transform:rotate(-2deg);transform-origin:left}
.w-links{display:flex;gap:9px 18px;margin:1.5em 0 .9em;flex-wrap:wrap}
.w-links a{font-size:.98rem;font-weight:600;text-decoration:none;border-bottom:2px solid var(--rule);padding-bottom:2px}
.w-links a:hover{border-color:var(--pen)}
.w-foot{font-size:.85rem;color:var(--ink-3)}

.w-hint{position:fixed;right:22px;bottom:20px;z-index:20;margin:0;font-family:var(--f-hand);font-size:1.5rem;color:var(--ink-3);pointer-events:none;transition:opacity .4s}
body.moved .w-hint{opacity:0}

/* ================= the performance ================= */
html.js .w-text,html.js .w-marg,html.js .w-sticky,html.js .w-phone,html.js .w-note,html.js .w-arrow,html.js .w-circle,html.js .w-wash{opacity:0}
html.js .w-text{transform:translateY(26px)}
html.js .w-marg,html.js .w-sticky{transform:rotate(var(--r,-3deg)) scale(.86)}
html.js .w-phone{transform:translateY(-50%) rotate(var(--pt,2deg)) translateY(30px) scale(.97)}
html.js .w-note{transform:rotate(-21deg) translateY(-38px)}
html.js .w-rest .w-marg{transform:translateX(-50%) rotate(-2deg) scale(.86)}

html.js .sounded .w-text{opacity:1;transform:none;transition:opacity .5s ease,transform .72s var(--spring)}
html.js .sounded .w-wash{opacity:.085;transition:opacity 1.1s ease .1s}
html.js .sounded .w-marg,html.js .sounded .w-sticky{opacity:1;transform:rotate(var(--r,-3deg));transition:opacity .4s ease var(--d,.42s),transform .62s var(--spring) var(--d,.42s)}
html.js .sounded.w-rest .w-marg{opacity:1;transform:translateX(-50%) rotate(-2deg)}
html.js .sounded .w-phone{opacity:1;transform:translateY(-50%) rotate(var(--pt,2deg));transition:opacity .6s ease .16s,transform .86s var(--spring) .16s}
html.js .sounded .w-note{opacity:1;transform:rotate(-21deg);transition:opacity .3s ease .3s,transform .7s cubic-bezier(.28,1.7,.52,1) .3s}
html.js .sounded .w-arrow,html.js .sounded .w-circle{opacity:1;transition:opacity .5s ease .55s}
html.js .w-under path{transition:stroke-dashoffset .9s ease .34s}
html.js .sounded .w-under path{stroke-dashoffset:0}
html.js .w-stave path{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.5s ease}
html.js .sounded .w-stave path{stroke-dashoffset:0}
html.js .sounded .w-note.hop{animation:w-hop 2.4s var(--spring) .9s 2}
@keyframes w-hop{0%,72%,100%{transform:rotate(-21deg) translateY(0)}80%{transform:rotate(-21deg) translateY(-13px)}88%{transform:rotate(-21deg) translateY(0) scaleY(.86)}94%{transform:rotate(-21deg) translateY(0) scaleY(1)}}
html.js .w-hint span{display:inline-block;animation:w-nudge 1.9s ease-in-out infinite}
@keyframes w-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

/* ---- shorter screens: the melody flattens, the app shrinks ---- */
@media (max-height:900px){:root{--ph:.72;--bandtop:18%}}
@media (max-height:800px){:root{--ph:.64;--bandtop:11%}.w-text{bottom:calc(22% + var(--lift,0px) * .55)}}
@media (max-height:700px){:root{--ph:.5;--mast:56px;--bandtop:9%}.w-sticky{width:170px;padding:13px 14px 16px;font-size:1.3rem}}
/* --tw has to survive here too: a bar that narrows its column for marginalia
   still needs that column narrow at 1000px, or the notes land on the words */
@media (max-width:1000px){:root{--ph:.58}.w-text{width:min(40ch,var(--tw,74%))}.w-phone{--pr:-6%;opacity:.5}}
@media (max-width:720px){.w-phone,.w-sticky,.w-marg,.w-arrow,.w-circle{display:none}.w-text{width:auto;right:7%}}

/* ---- printed part: reduced motion, or paper ---- */
@media (prefers-reduced-motion:reduce){html.js *,html.js *::before,html.js *::after{animation:none!important;transition:none!important}}
body.rm .w-score{position:static;display:block;overflow:visible;height:auto}
body.rm .w-bar{width:auto;max-width:900px;height:auto;margin:0 auto;padding:calc(var(--mast) + 40px) 24px 48px}
body.rm .w-text,body.rm .w-phone,body.rm .w-marg,body.rm .w-sticky{position:static;width:auto;max-width:none;transform:none;opacity:1}
body.rm .w-stave,body.rm .w-note,body.rm .w-wash,body.rm .w-arrow,body.rm .w-circle,body.rm .w-hint,body.rm .w-rest{display:none}
body.rm .w-phone{margin:2em 0 0;width:calc(390px * .62);height:calc(844px * .62)}
body.rm .w-phone-in{transform:scale(.62)}
body.rm .w-phone::before,body.rm .w-phone::after{display:none}
body.rm .w-marg,body.rm .w-sticky{margin:1.2em 0 0}
.w-page.rm-page,.w-page.rm-page body{height:auto;overflow:visible}

/* ---- a plain document in the same hand (privacy, terms) ---- */
.w-doc .w-bar{position:static;width:auto;height:auto;max-width:940px;margin:0 auto;padding:calc(var(--mast) + 34px) clamp(16px,5vw,60px) clamp(50px,8vw,90px)}
.w-doc .w-text{position:static;width:auto;max-width:64ch;opacity:1;transform:none}
.w-doc h2{font-size:clamp(1.2rem,1.05rem+.7vw,1.5rem);margin:2em 0 .5em}