:root{
  --ink:#ECE5D6; --case:#F5F0E6; --line:#DACFB9;
  --brass:#BF5E3A; --patina:#997554; --paper:#33302A; --dim:#8A8072; --pencil:#5E584E;
  --on:#FBF7EE; --dot:#CDBE9E;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --cond:'Barlow Condensed',Oswald,'Arial Narrow',sans-serif;
  --body:Inter,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
::placeholder{color:var(--dim)}
[hidden]{display:none!important}
html,body{margin:0;background:var(--ink);color:var(--paper);}
body{font-family:var(--body);-webkit-font-smoothing:antialiased;
  padding:max(28px,env(safe-area-inset-top)) 20px calc(48px + env(safe-area-inset-bottom));}
.wrap{max-width:880px;margin:0 auto}
/* Today stays a readable column; the header + reference pages use the full width. */
#view-today{max-width:640px;margin:0 auto}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)}
.faint{opacity:.65}

.title{font-family:var(--cond);font-weight:600;font-size:30px;letter-spacing:.14em;
  text-transform:uppercase;margin:0}
.head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px}
.head-right{display:flex;align-items:center;gap:12px}
#date{font-size:11px;letter-spacing:.16em}
/* Header gets tight on phones — the date is the first thing to go. */
@media (max-width:560px){#date{display:none}}
.icon-btn{background:none;border:1px solid var(--line);color:var(--dim);width:32px;height:30px;
  border-radius:2px;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;
  justify-content:center;flex:none;padding:0}
.icon-btn:hover{color:var(--brass);border-color:var(--brass)}

/* One box, full width: the key's identity on the left, its harmony on the right. */
.key-box{border:1px solid var(--line);background:var(--case);border-radius:2px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
@media (max-width:560px){.key-box{grid-template-columns:1fr}}
.key-head{display:flex;flex-direction:column;width:100%;padding:18px 18px 12px}
.key-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.key-name{font-family:var(--cond);font-size:27px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass);margin:4px 0 7px}
.key-notes{font-family:var(--mono);font-size:12.5px;color:var(--paper);opacity:.85;
  letter-spacing:.06em;line-height:1.55}
.key-detail{padding:18px 18px 16px;display:grid;gap:8px}
@media (max-width:560px){.key-detail{padding-top:0}}
.key-group{font-family:var(--mono);font-size:12px;color:var(--paper)}
.key-group b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--patina);font-weight:500;margin-right:8px}
.chord-table{margin-top:4px;border-top:1px solid var(--line);padding-top:8px;display:grid;gap:5px}
.chord-row{display:grid;grid-template-columns:34px 46px 1fr;gap:8px;font-family:var(--mono);font-size:12px}
.ch-roman{color:var(--dim)}
.ch-name{color:var(--brass)}
.ch-notes{color:var(--paper);opacity:.85}

.block{margin-top:30px}
.block-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.block-name{font-family:var(--cond);font-size:15px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--patina);white-space:nowrap}
.rule{flex:1;height:1px;background:var(--line)}

/* A folding block's header is a row of parts, not one button: `edit` has to sit
   in it, and a button can't hold another. The title carries the fold for the
   keyboard and the caret repeats it for the thumb. */
.fold-btn{background:none;border:none;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.fold-btn:hover,.fold-btn:hover~.item-toggle{color:var(--brass)}
.block-edit{background:none;border:none;padding:2px;cursor:pointer;color:var(--dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.block-edit:hover,.block-edit.on{color:var(--brass)}

.item-wrap{border-bottom:1px solid rgba(218,207,185,.7)}
.item-wrap:last-child{border-bottom:none}
.item{display:flex;gap:13px;padding:11px 0;-webkit-tap-highlight-color:transparent}
.box{width:15px;height:15px;border:1px solid var(--dim);border-radius:2px;flex:none;margin-top:2px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .16s,border-color .16s}
.box:hover{border-color:var(--brass)}
.item-main.has-toggle{cursor:pointer}
.box.on{background:var(--brass);border-color:var(--brass)}
.box.on::after{content:"";width:4px;height:8px;border:solid var(--on);border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px)}
.item-main{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px}
.item-name{flex:1;font-size:15px;line-height:1.35;transition:opacity .16s}
.item-toggle{flex:none;align-self:center;background:none;border:none;color:var(--dim);
  cursor:pointer;font-size:17px;line-height:1;padding:2px 5px;transition:transform .16s,color .16s}
.item-toggle:hover{color:var(--brass)}
.item-toggle.open{transform:rotate(90deg)}
.item-details{padding:0 0 12px 28px}
.item.done .item-name{opacity:.4;text-decoration:line-through;text-decoration-color:var(--dim)}
.item-sub{font-size:12.5px;color:var(--dim);margin-top:3px;line-height:1.45}
.item-sub+.item-sub{margin-top:6px}
/* Folded blocks (Additional exercises, Projects, All keys, Progressions): the
   whole header is the toggle, so it has to shed its button styling. */
.fold-head{width:100%;background:none;border:none;padding:0;text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.fold-head:hover .item-toggle,.fold-head:hover .block-name{color:var(--brass)}
/* Additional exercises. Each drill is one run-in line: the title sets the type
   for the paragraph, the note flows on from it a size down and a shade back.
   That contrast is what separates them, so they can share a baseline and the
   note can wrap under the title without the two blurring together.
   The gap between groups has to beat the gap between items, or the headings
   stop reading as headings. */
.extras-list{display:grid;gap:22px;padding-bottom:4px}
.extras-group{display:grid;gap:9px}
.extras-group-name{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:1px}
.extras-items{display:grid;gap:9px}
.extras-item{font-size:12.5px;line-height:1.55;color:var(--dim)}
.extras-title{font-size:14px;color:var(--patina);margin-right:7px}

/* ---------- editing the plan ---------- */

/* An exercise opened up: what it's called, where it lives, what it says. The
   select is the move — it names the routine and every group, so a drill crosses
   between them by being told where it belongs, the same gesture from either
   side. The rules between rows are the reading list's, kept so the two faces of
   the block sit on the same grid. */
.ex-list{display:grid;gap:13px}
.ex{display:grid;gap:6px;padding-bottom:13px;border-bottom:1px solid rgba(218,207,185,.7)}
.ex:last-of-type{border-bottom:none;padding-bottom:0}
.ex-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ex-title,.ex-note,.ex-home,.ex-group-name{box-sizing:border-box;background:var(--ink);
  border:1px solid var(--line);border-radius:2px;color:var(--paper);
  font-family:var(--body);font-size:13px;padding:7px 9px}
.ex-title{flex:1 1 160px;min-width:0}
.ex-home{flex:none;max-width:100%;font-family:var(--mono);font-size:11px;padding:6px 8px}
.ex-note{width:100%;line-height:1.5;resize:vertical;min-height:46px}

/* The controls stay in the type the rest of the small print uses, so a row of
   them doesn't read louder than the exercise it belongs to. */
.ex-acts{display:flex;align-items:center;gap:2px;margin-left:auto}
.ex-act,.ex-add{background:none;border:none;cursor:pointer;color:var(--dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 6px}
.ex-act:hover,.ex-add:hover{color:var(--brass)}
.ex-add{justify-self:start;padding-left:0}
.ex-nudge{font-size:13px;letter-spacing:0;padding:3px 5px}
.ex-group-head{display:flex;align-items:center;gap:8px}
.ex-group-name{flex:1;min-width:0;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 8px}

/* The Guitar Aerobics line is the one thing here the app writes, so it reads
   under the box rather than sitting in it. */
.ex-auto{font-size:12px;line-height:1.45;color:var(--dim);opacity:.75}

/* No sync key, no log: the blocks give way, and the reason reads as a footnote
   under the rule that would have closed the day. */
.locked-line{margin:0 0 14px;font-size:12.5px;line-height:1.6;color:var(--dim);
  max-width:58ch}

.foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line)}
.tally{display:flex;justify-content:flex-end;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.1em;color:var(--dim)}
.tally-right{display:flex;gap:14px;align-items:center}
.sync{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.sync.ok{color:var(--patina)} .sync.pending{color:var(--dim)} .sync.err{color:var(--brass)}
.link{background:none;border:none;color:var(--dim);font:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:0}
.link:hover{color:var(--brass)}

.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(51,45,37,.35);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.modal-card{position:relative;background:var(--case);border:1px solid var(--line);border-radius:3px;
  padding:20px;max-width:420px;width:100%;box-shadow:0 20px 60px rgba(51,45,37,.18)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.modal-title{font-family:var(--cond);font-weight:600;font-size:20px;letter-spacing:.12em;
  text-transform:uppercase;margin:0}

.settings{font-size:11.5px;color:var(--dim);display:grid;gap:12px}
.srow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.slabel{width:118px;flex:none}
.indent{padding-left:0}
.srow input,.srow select,.srow textarea{background:var(--ink);border:1px solid var(--line);color:var(--paper);
  padding:4px 7px;border-radius:2px;font:inherit}
/* Controls share a right edge as well as a left one: three rows of selects at
   three widths is the whole reason the panel looked busy. */
.srow select{flex:1;min-width:0}
.srow .narrow{width:60px}
.srow .key-in{flex:1;min-width:90px;font-family:var(--mono);font-size:12px}
/* A phone hasn't the width for a label column and a control beside it, and the
   longest option is the one you'd most want to read. The label takes the line
   and the control takes the next. */
@media (max-width:560px){
  .slabel{width:100%}
  .srow .narrow{width:52px}
}
.settings-div{height:1px;background:var(--line);margin:4px 0}
/* A row whose control wants the whole width rather than the column beside the
   label — which on a phone is every row already. */
.srow-stack{flex-direction:column;align-items:stretch;gap:7px}
.srow-stack .slabel{width:100%}
.cal-feeds{font-family:var(--mono);font-size:11px;line-height:1.6;width:100%;
  resize:vertical;min-height:62px}
#cal-holidays{accent-color:var(--brass);width:14px;height:14px}
.ok-text{color:var(--patina)}
.btn-sm{background:var(--brass);border:none;color:var(--on);font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;padding:5px 12px;border-radius:2px;cursor:pointer;flex:none}
.btn-sm:hover{filter:brightness(1.06)}
.srow select:disabled,.srow input:disabled{opacity:.5;cursor:not-allowed}

button:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible,
.box:focus-visible,.tab:focus-visible{outline:2px solid var(--patina);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- tabs ---------- */
.head-left{display:flex;align-items:baseline;gap:16px;min-width:0}
.tabs{display:inline-flex;gap:16px;flex:none}
.tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--dim);cursor:pointer;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  padding:1px 0 3px}
.tab:hover{color:var(--paper)}
.tab.active{color:var(--brass);border-bottom-color:var(--brass)}
/* The two rows mustn't read as one, and size is the whole of the difference:
   same mono label, a little larger for the row that names the sites themselves.
   Anything more — another face, another case — turned out to be more than the
   distinction needed. The public reference doesn't take this: its top row is a
   page's tabs, whatever height of the page it sits at. */
.sitenav .tab{font-size:12.5px;letter-spacing:.15em}

/* Where the title is itself a tab, it's a button — and lights the way the rest
   of the row does rather than growing a rule of its own, which under a word
   that size reads as a heading's underline and not as a nav state. */
.title-tab{background:none;border:none;padding:0;margin:0;cursor:pointer;
  color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
.title-tab:hover,.title-tab.active{color:var(--brass)}

/* Music's own tabs, a row below the site's. No rule under them: the row is set
   apart by its face already, and a full-width line there read as the top of the
   page rather than the bottom of the nav. It scrolls sideways at every width —
   six tabs is more than the column is wide before the viewport is narrow. */
.subtabs{display:flex;gap:15px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  margin:-6px 0 24px;padding-bottom:2px}
.subtabs::-webkit-scrollbar{display:none}
.subtabs .tab{flex:none}

/* ---------- reference pages ---------- */
/* Every tab but Today is a page of stacked sections. */
.page{display:grid;gap:36px}
/* Grid items refuse to shrink below their content by default, so a long row of
   diagrams would stretch the page sideways instead of scrolling inside itself. */
.page>*{min-width:0}
.sec .block-head{margin-bottom:8px}
.sec-sub{font-size:12.5px;color:var(--dim);line-height:1.55;margin:0 0 16px;max-width:52ch}
.sec-group{margin-top:22px}
.sec-group-name{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--patina);margin:0 0 12px}
/* Segmented control: swaps a section between two diagram sets. */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;margin:2px 0 18px}
.seg-btn{background:none;border:none;color:var(--dim);cursor:pointer;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  padding:6px 13px;white-space:nowrap;transition:background .16s,color .16s}
.seg-btn+.seg-btn{border-left:1px solid var(--line)}
.seg-btn:hover{color:var(--paper)}
.seg-btn.active{background:var(--brass);color:var(--on)}
.diagram-grid{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:26px 22px}
/* Major & pentatonic: three per row, centered, so the last row (2) stays centred. */
.diagram-grid.cols-3{justify-content:center;gap:30px 44px}
.diagram-grid.cols-3 .diagram{flex:0 0 calc((100% - 88px) / 3)}
/* Modes: box beside its full-neck pattern, pulled off the edges with even space. */
.diagram-grid.cols-modes{justify-content:space-around}
/* Chords: center the forms so a row of 3 clusters in the middle rather than
   pinning the outer two to the edges. */
.diagram-grid.cols-center{justify-content:center;gap:30px 44px}
.diagram{display:flex;flex-direction:column;align-items:center;gap:6px}
.diagram-title{font-family:var(--mono);font-size:11px;color:var(--paper);text-align:center;line-height:1.25}
.diagram-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;color:var(--dim);text-align:center}
.fb{display:block;max-width:100%;height:auto}
.fb .gridline{stroke:var(--line);stroke-width:1}
.fb .dot{fill:var(--dot)}
.fb .dot.root{fill:var(--brass)}
.fb .deg{fill:var(--paper);font-family:var(--mono);font-size:11px;font-weight:500;
  text-anchor:middle;dominant-baseline:central}
.fb .deg.root{fill:var(--on)}
.fb .slabel{fill:var(--dim);font-family:var(--mono);font-size:10px;text-anchor:end;dominant-baseline:central}
.fb .mute{fill:var(--dim);font-family:var(--mono);font-size:15px;text-anchor:middle;dominant-baseline:central}

/* ---------- Fretboard: one key across the whole neck ----------
   Prefixed .neck- and not .fb-, which is already the diagram SVG itself. */
.neck-controls{display:grid;gap:10px}
/* min-width:0 twice over: a grid item and a flex item both refuse to shrink
   below their content until told they may. */
.neck-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
/* Twelve keys don't fit a phone's width — the bar scrolls inside the row rather
   than pushing the page sideways. */
.neck-row .seg{margin:0;min-width:0;overflow-x:auto}
/* A roman numeral's case is what tells you the chord is minor — ii is not II. */
.neck-row .seg.roman .seg-btn{text-transform:none;letter-spacing:.06em}
/* A control that doesn't apply greys out in place; it never leaves the layout,
   so the board below it never moves. */
.neck-row .seg-btn:disabled{cursor:default;opacity:.4}
.neck-row .seg-btn:disabled:hover{color:var(--dim)}
.neck-row.inactive .neck-label{opacity:.45}
.neck-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--patina);width:38px;flex:none}
/* The board is drawn at a fixed, readable size — too wide for a phone, so it
   scrolls inside the page rather than shrinking its labels away. */
.neck-scroll{overflow-x:auto;padding-bottom:4px}
.nk{display:block}
.nk .gridline{stroke:var(--line);stroke-width:1}
.nk .nut{stroke:var(--patina);stroke-width:3}
/* A note outside the selected set keeps its place as an outline: the scale stays
   legible behind whichever subset is lit. */
.nk .dot{fill:var(--dot)}
.nk .dot.root{fill:var(--brass)}
.nk .dot.off{fill:var(--ink);stroke:var(--line)}
.nk .dot.root.off{stroke:var(--brass)}
.nk .deg{fill:var(--paper);font-family:var(--mono);font-size:10.5px;font-weight:500;
  text-anchor:middle;dominant-baseline:central}
.nk .deg.root{fill:var(--on)}
.nk .deg.off{fill:var(--dim)}
.nk .deg.root.off{fill:var(--brass)}
.nk .slabel{fill:var(--dim);font-family:var(--mono);font-size:10px;text-anchor:end;dominant-baseline:central}
.nk .fnum{fill:var(--patina);font-family:var(--mono);font-size:10px;text-anchor:middle}
.neck-cap{font-family:var(--mono);font-size:11.5px;color:var(--paper);margin-top:12px;letter-spacing:.02em}

/* Chords: seventh-chord grip formula sits at the end of each section head. */
.chord-formula{color:var(--patina);font-size:11px;letter-spacing:.08em;white-space:nowrap;padding-left:2px}

/* Triads: each string set is a 3×3 matrix (quality rows × inversion columns). */
.triad-sets{display:grid;grid-template-columns:1fr;gap:32px;margin-top:4px}
.triad-set{min-width:0;text-align:center}
.triad-scroll{overflow-x:auto;padding-bottom:2px}
.triad-matrix{display:grid;grid-template-columns:auto repeat(3,auto);gap:20px 36px;
  align-items:center;justify-items:center;width:max-content;margin-inline:auto}
.tm-head{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--patina)}
.tm-rowhead{font-family:var(--mono);font-size:11.5px;color:var(--paper);justify-self:end}

/* Phones: keep the title and settings button on the top row, and drop the tabs
   onto their own full-width line beneath, where they'd otherwise run under the
   settings button. More of them than fit that line scroll sideways rather than
   wrapping — a nav reads as one row, and a second row of two tabs reads as a
   second nav. The tab cut off at the edge is the affordance, so the scrollbar
   itself is hidden; the padding under them is the active tab's rule, which a
   flush edge would otherwise clip. */
@media (max-width:560px){
  .head{align-items:flex-start}
  .head-left{flex:1;flex-wrap:wrap;align-items:center;row-gap:12px}
  .head-left .tabs{flex:0 1 100%;min-width:0;flex-wrap:nowrap;gap:15px;
    overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .head-left .tabs::-webkit-scrollbar{display:none}
}

/* Mobile: keep each section's diagrams on one horizontally-scrollable row
   at natural size rather than shrinking them or wrapping into many rows. */
@media (max-width:640px){
  .diagram-grid.cols-3,.diagram-grid.cols-modes,.diagram-grid.cols-center{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;padding-bottom:8px;gap:22px}
  .diagram-grid.cols-3 .diagram,.diagram-grid.cols-modes .diagram,
  .diagram-grid.cols-center .diagram{flex:0 0 auto}
}

/* ---------- progressions ---------- */
/* One list per mode, each under its name. The name is a label on what follows
   rather than a heading competing with the fold's own, so it reads small and
   in the margin, the way an album's does over its songs. */
.prog-body{display:grid;gap:18px}
.prog-mode{padding:0 0 6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* Hairline-separated rows: the numerals on the left, a name for the ones that
   have one on the right. The gap plus the wrapper's background is the rule. */
.prog-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:2px}
.prog-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  background:var(--case);padding:9px 14px}
.prog-degs{font-family:var(--mono);font-size:13.5px;word-spacing:.5em;color:var(--paper)}
.prog-name{flex:none;font-size:11.5px;color:var(--dim);text-align:right}

/* ---------- fifths (circle of fifths) ---------- */
.cof-block .fifths-wrap{margin-bottom:14px}
.fifths-wrap{display:flex;justify-content:center;margin:4px 0 24px}
.cof{width:100%;max-width:440px;height:auto;display:block}
.cof text{text-anchor:middle;dominant-baseline:central;pointer-events:none}
.cof .seg{cursor:pointer;stroke:var(--line);stroke-width:1.5;transition:fill .12s}
.cof .seg.maj{fill:var(--case)}
.cof .seg.min{fill:var(--ink)}
.cof .seg:hover{fill:rgba(191,94,58,.12)}
.cof .seg.on.maj{fill:rgba(191,94,58,.17)}
.cof .seg.on.min{fill:rgba(191,94,58,.1)}
.cof .seg.tonic{fill:rgba(191,94,58,.34);stroke:var(--brass);stroke-width:2}
.cof-name{font-family:var(--cond);font-size:15px;font-weight:600;fill:var(--paper)}
.cof-name-min{font-size:12px;fill:var(--patina)}
.cof-alt{font-family:var(--mono);font-size:7.5px;fill:var(--dim)}
.cof-roman{font-family:var(--mono);font-size:11px;font-weight:500;fill:var(--brass)}
.cof-hub{fill:var(--case);stroke:var(--line);stroke-width:1.5}
.cof-center-key{font-family:var(--cond);font-size:30px;font-weight:600;fill:var(--paper)}
.cof-center-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--dim)}
.cof-center-sig{font-family:var(--mono);font-size:9px;fill:var(--patina)}

.fifths-legend{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.chip{display:inline-flex;align-items:baseline;gap:7px;padding:6px 12px;border:1px solid var(--line);
  border-radius:5px;background:var(--case)}
.chip-roman{font-family:var(--mono);font-size:10px;color:var(--patina);letter-spacing:.05em;min-width:26px}
.chip-name{font-family:var(--cond);font-size:16px;font-weight:600;color:var(--paper)}
.chip.tonic{border-color:var(--brass);background:rgba(191,94,58,.14)}
.chip.dim{border-style:dashed}

/* ---------- keys (major scales chart) ---------- */
.keys-scroll{overflow-x:auto;padding-bottom:2px}
.keys-table{border-collapse:collapse;font-family:var(--mono);font-size:13px;min-width:570px}
.keys-table th,.keys-table td{border:1px solid var(--line);padding:7px 12px;text-align:center;
  background:var(--case);color:var(--paper);white-space:nowrap}
.keys-table thead th{background:var(--ink);color:var(--patina);font-size:11px;font-weight:500;
  letter-spacing:.08em}
.keys-table .kt-key{text-align:left;font-family:var(--cond);font-size:14px;font-weight:600;background:var(--ink)}
/* The enharmonic twin is a cross-reference, not a second key: mono and dim, so
   it reads as a note on the row rather than another name in the column. */
.keys-table .kt-twin{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--dim);margin-left:8px}
/* The signature reads as a label on the row, not as one of its notes. */
.keys-table .kt-sig{color:var(--patina);font-size:12px;background:var(--ink)}
.keys-table .kt-fifth{background:rgba(191,94,58,.15)}
.keys-table thead .kt-fifth{background:rgba(191,94,58,.24);color:var(--paper)}

/* ---------- songs (the repertoire tab) ---------- */
.song-groups{display:grid;gap:20px}

/* A group heading is an artist, or a rung of the ladder. It shares the block
   header's build one size down, so the nesting reads without a box around it. */
.grp-head{display:flex;align-items:center;gap:10px}
.grp-name{font-family:var(--cond);font-size:17px;font-weight:600;letter-spacing:.08em;
  color:var(--paper);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .16s;white-space:nowrap}
.grp-name:hover{color:var(--brass)}
/* A progression heads its group by its numerals, which are notation and not a
   name: mono, a size down from an artist's, with what it's called beside it
   where a subtitle would go. */
.grp-name-degs{font-family:var(--mono);font-size:13.5px;font-weight:500;
  letter-spacing:.02em;word-spacing:.35em;white-space:normal}
.grp-note{flex:none;font-size:11.5px;color:var(--dim)}
.grp-count{font-size:11px;color:var(--patina);flex:none}
.grp-body{display:grid;gap:14px;margin-top:2px}

/* An album inside an artist. Its name is a label on the rows below it, not
   another heading competing with the artist above. Mono and small keeps it
   in the margin where it belongs. */
.alb-head{padding:8px 0 2px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* The ways to read the list, offered side by side rather than as a dropdown:
   there are only three, and seeing the others named is the whole affordance. */
.grp-modes{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.grp-mode{background:none;border:1px solid transparent;color:var(--dim);cursor:pointer;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px}
.grp-mode:hover{color:var(--brass)}
.grp-mode.on{border-color:var(--line);color:var(--patina)}

.trk{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:9px 0}
.trk-status{flex:none;min-width:78px;text-align:center;background:none;border:1px solid var(--line);
  border-radius:2px;color:var(--dim);cursor:pointer;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 9px}
.trk-status:hover{border-color:var(--brass);color:var(--brass)}
.trk-status.s-learning{border-color:var(--brass);color:var(--brass);background:rgba(191,94,58,.12)}
.trk-status.s-done{border-color:var(--patina);background:var(--patina);color:var(--on)}
.trk-main{flex:1;min-width:0;display:flex;align-items:baseline;gap:9px}
.trk-title{font-size:15px;line-height:1.35}
/* Whatever the headings didn't already say: artist, album, or neither. */
.trk-sub{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk.done .trk-title{opacity:.45;text-decoration:line-through;text-decoration-color:var(--dim)}

/* Hear it, then check the tabs, and edit, which is the only way to a URL. All
   three read as one set of choices, so the button borrows the links' type
   rather than announcing itself as a control. On a phone they drop to their own
   line under the title rather than squeezing it. */
.trk-links{flex:none;display:flex;align-items:baseline;gap:12px}
.trk-out,.trk-edit{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none}
.trk-out{color:var(--patina)}
.trk-out:hover{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.trk-edit{background:none;border:none;padding:0;cursor:pointer;color:var(--dim)}
.trk-edit:hover,.trk-edit.on{color:var(--brass)}
@media (max-width:560px){
  .trk-links{order:1;flex-basis:100%;margin:-4px 0 2px 90px}
}

/* The key a song is in and the progressions it's made of, in the column the
   title starts in. The key heads the block the way an album heads its songs,
   since it's one fact about the song and the chords below it are chords of it.

   On each line the numerals come first because that's what songs share, then
   the chords they are in this key, then the name where there is one. All at one
   size: the two runs are the same line read twice, and making one of them
   louder than the other buried whichever lost. They part on colour alone, far
   enough to tell where the numerals stop. */
.trk-progs{margin:-1px 0 8px 90px;display:grid;gap:3px}
.trk-key-name{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);padding-bottom:2px}
.trk-prog{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 15px}
.trk-prog-degs,.trk-prog-chords{font-family:var(--mono);font-size:11.5px;word-spacing:.35em}
.trk-prog-degs{color:var(--patina)}
.trk-prog-chords{color:var(--pencil)}
.trk-prog-name{font-size:11px;color:var(--dim)}

/* A note reads under its song, in the column the title starts in. */
.trk-note{margin:-2px 0 10px 90px;font-size:12.5px;line-height:1.45;color:var(--dim);
  white-space:pre-wrap}

/* The panel behind `edit`. One rule parts it from the row and that's the last
   of them: a label and a rule over every field made five boxes read as five
   separate forms, when what they are is one song. Each box says what it is by
   what's in it, and the placeholder covers the empty case. */
.trk-details{border-top:1px solid var(--line);margin-top:2px;padding:12px 0 14px;
  display:grid;gap:8px}
.trk-pair{display:flex;gap:8px}
.trk-pair>*{flex:1;min-width:0}
.trk-field,.trk-notes{width:100%;box-sizing:border-box;background:var(--ink);
  border:1px solid var(--line);border-radius:2px;color:var(--paper);
  font-family:var(--body);font-size:13px;padding:7px 9px}
.f-link{font-family:var(--mono);font-size:11.5px}
/* The key is two short answers — a tonic and the mode it's read in — so the
   pair takes the width of the answers and not the width of the panel. */
.trk-pair>.trk-key,.trk-pair>.trk-mode{width:auto;flex:none;
  font-family:var(--mono);font-size:12px;padding:6px 8px}
/* A progression per line, each with the × that drops it, and a blank one
   waiting at the bottom. The × keeps its column whether or not it's shown, so
   the fields above and below it line up. */
.trk-prog-row{display:flex;align-items:center;gap:8px}
.trk-prog-in{flex:1;min-width:0;font-family:var(--mono);font-size:12px}
.trk-prog-del{flex:none;width:20px;background:none;border:none;color:var(--dim);cursor:pointer;
  font-size:16px;line-height:1;padding:2px}
.trk-prog-del:hover{color:var(--brass)}
.trk-prog-del[hidden]{display:block;visibility:hidden}
.trk-notes{line-height:1.5;resize:vertical;min-height:54px}
.trk-del{justify-self:end;background:none;border:none;color:var(--dim);cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 2px;margin-top:2px}
.trk-del:hover{color:var(--brass)}

.song-new{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.song-new-title{flex:2;min-width:150px}
.song-new-artist,.song-new-album{flex:1;min-width:110px}
.song-new input{background:var(--ink);border:1px solid var(--line);
  color:var(--paper);border-radius:2px;font:inherit;font-size:13px;padding:5px 8px}

/* ---------- home ---------- */
/* The date is a sentence and is set like one, at the scale the rest of the site
   reads at rather than as a display heading. */
#view-home{max-width:640px;margin:0 auto}
.home-hello{font-family:var(--body);font-size:14px;font-weight:400;line-height:1.68;
  color:var(--paper);margin:6px 0 0}

/* What's coming up. A quiet mono label rather than a section header with a rule
   through it: three lines of dates don't need announcing that hard, and Home
   has no horizontal line on it to keep one company. */
.upnext{margin:30px 0 0}
.upnext-name{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  margin-bottom:11px}
.cal-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
/* The day column is fixed so the titles line up, and wraps under it on a phone
   rather than squeezing a date onto two lines. */
.cal-row{display:grid;grid-template-columns:152px minmax(0,1fr);gap:14px;align-items:baseline}
.cal-when{font-size:11px;letter-spacing:.06em;color:var(--patina);white-space:nowrap}
.cal-what{font-size:13.5px;line-height:1.45;color:var(--paper)}
/* Said quietly. It's a note about the plumbing, not about the day. */
.cal-note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--dim)}
@media (max-width:480px){
  .cal-row{grid-template-columns:1fr;gap:1px}
}

/* ---------- todo board ---------- */
/* Three columns at desk width, stacked on a phone. The columns are equal
   thirds rather than sized to their contents, so a busy TODO doesn't squeeze
   Done down to a sliver and the board keeps the same shape all week. */
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:720px){.board{grid-template-columns:1fr;gap:22px}}
.col{border:1px solid var(--line);background:var(--case);border-radius:2px;padding:12px}
.col-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.col-name{font-family:var(--cond);font-size:14px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--patina)}
.col-count{font-size:11px;color:var(--dim)}
.col-body{display:grid;gap:8px}
/* An empty column still holds its place, so the board doesn't jump as the last
   card leaves it. */
.col-body:empty{min-height:8px}

/* A card is its title and nothing else — everything else about the item is
   behind a tap. It carries both gestures, so it takes no text selection (a
   mouse drag would otherwise select the words) and pans vertically on touch
   until the hold arms a drag, at which point the view stops it scrolling. */
.card{display:flex;align-items:flex-start;gap:8px;border:1px solid var(--line);
  background:var(--ink);border-radius:2px;padding:8px 10px;cursor:grab;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.card:hover{border-color:var(--dot)}
.card-text{flex:1;min-width:0;font-size:13.5px;line-height:1.45;color:var(--paper);
  word-break:break-word}
.col[data-status="done"] .card-text{color:var(--dim);text-decoration:line-through;
  text-decoration-color:var(--line)}
/* That a card has notes is worth seeing from the board. What they say isn't. */
.card-has-note{flex:none;width:5px;height:5px;border-radius:50%;background:var(--dot);margin-top:6px}
.col[data-status="done"] .card-has-note{opacity:.5}

/* Lifted, the card stays in the column as its own placeholder and slides
   between them, so the board under the ghost is already the answer. */
.card-lifted{opacity:.26}
.card-ghost{position:fixed;left:0;top:0;z-index:60;margin:0;pointer-events:none;
  border-color:var(--patina);box-shadow:0 14px 34px rgba(51,45,37,.22)}
.is-dragging,.is-dragging .card{cursor:grabbing}

.col-add{width:100%;margin-top:10px;background:none;border:none;border-top:1px solid var(--line);
  color:var(--paper);font:inherit;font-size:13.5px;padding:9px 2px 2px;border-radius:0}
.col-add:focus{outline:none;border-top-color:var(--patina)}

/* ---------- one todo item ---------- */
/* The modal Settings uses, with the item in it: the title as a field because
   renaming is the commonest reason to have opened this, the column as the same
   segmented control the reference tabs use, and the notes taking the room. */
.todo-detail{display:grid;gap:13px}
.todo-title-in,.todo-notes{background:var(--ink);border:1px solid var(--line);color:var(--paper);
  border-radius:2px;font:inherit;width:100%;padding:8px 10px}
.todo-title-in{font-size:15px}
.todo-notes{font-size:13.5px;line-height:1.55;resize:vertical;min-height:130px}
.todo-detail .seg{margin:0}
.todo-detail-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:10.5px;letter-spacing:.06em;color:var(--dim)}