:root {
  --dgc: #6d5bd0; --lum: #8a6600; --ven: #111; --kmin: #a83263; --haven: #2b5fd9;
  --ink: #2c3340; --muted: #4c5560; --line: #e3e3ea; --ctl: #2c3340;
  --paper: #fff8ec; --panel: #fff; --butter: #f5c518; --outline: #2c3340;
  --primary: #111; --primary-ink: #fff;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px;
  --radius-s: 6px; --radius-m: 10px; --radius-l: 999px;
  --shadow: 0 1px 2px rgba(0,0,0,.06);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 64px; min-height: 100%; background: var(--paper); }
body { margin: 0; color: var(--ink); background: transparent; font: 16px/1.45 system-ui, sans-serif; max-width: 640px; margin-inline: auto; padding: 12px; position: relative; z-index: 0; }
.skip { position: absolute; left: 8px; top: -48px; background: var(--primary); color: #fff; padding: 8px 12px; border-radius: var(--radius-s); z-index: 50; }
.skip:focus { top: 8px; color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.top { display: flex; gap: var(--space-2); align-items: center; background: #fff; border-radius: var(--radius-m); padding: 8px; }
.search { flex: 1; display: flex; }
.logo { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 28px; color: var(--ink); text-decoration: none; }
.logo-mark { width: 28px; height: 28px; flex: none; }
#q { flex: 1; width: 100%; padding: 10px 12px; border-radius: var(--radius-l); border: 2px solid var(--outline); background: #fff; font-size: 16px; color: var(--ink); }
.card { display: flex; justify-content: space-between; gap: var(--space-2); border: 2px solid var(--outline); border-left-width: 6px; border-radius: var(--radius-m); padding: 10px 12px; margin: 8px 0; background: #fff; box-shadow: var(--shadow); }
.card h2, .card h3 { font-size: 16px; margin: 0 0 4px; color: var(--ink); }
.card-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; min-height: 24px; }
.card-link:hover { text-decoration-color: currentColor; }
.meta { font-size: 13px; color: var(--muted); margin: 2px 0; }
.studio-dgcdance { border-left-color: var(--dgc); }
.studio-lum3x { border-left-color: var(--lum); }
.studio-ventures { border-left-color: var(--ven); }
.studio-kpoplondonmin { border-left-color: var(--kmin); }
.studio-haven { border-left-color: var(--haven); }
.card-side { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end; }
.book-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--radius-s); border: 2px solid var(--outline); background: var(--butter); color: #111; text-decoration: none; font-weight: 600; }
.mark { display: inline-block; min-width: 28px; text-align: center; border-radius: var(--radius-l); background: #fff; border: 1px solid var(--outline); font-size: 12px; padding: 4px 6px; }
.level { display: inline-block; border-radius: var(--radius-l); background: #fff; border: 1px solid var(--outline); font-size: 12px; padding: 4px 8px; color: var(--ink); }
.landing, .stale { font-size: 13px; color: var(--muted); }
.landing { position: relative; background: #fff; border-radius: var(--radius-m); padding: 8px 10px; border: 2px solid var(--outline); }
#landingHide { min-height: 44px; padding: 8px 12px; border-radius: var(--radius-s); border: 1px solid var(--ctl); background: #fff; }
#resultCount { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.month { border-collapse: collapse; width: 100%; font-size: 12px; }
.month th { font-weight: 600; color: var(--muted); padding: 4px; text-align: center; }
.month td { border: 1px solid var(--line); padding: 4px; vertical-align: top; height: 56px; }
.month td.out { color: #aaa; }
.month td.today { outline: 2px solid var(--primary); outline-offset: -2px; }
.month td > button[data-day] { min-height: 44px; min-width: 44px; border-radius: var(--radius-s); border: 1px solid transparent; background: none; font: inherit; cursor: pointer; }
.dots { display: flex; gap: 3px; }
.dot { width: 8px; height: 8px; border-radius: var(--radius-l); background: #999; display: inline-block; }
.dot.studio-dgcdance { background: var(--dgc); } .dot.studio-lum3x { background: var(--lum); }
.dot.studio-ventures { background: var(--ven); } .dot.studio-kpoplondonmin { background: var(--kmin); }
.dot.studio-haven { background: var(--haven); }
dialog { border: 2px solid var(--outline); border-radius: 12px; max-width: 480px; width: 90vw; background: #fff; }
dialog button { min-height: 44px; padding: 8px 14px; border-radius: var(--radius-s); border: 2px solid var(--outline); background: #fff; color: var(--ink); font: inherit; }
.detail-list { display: grid; gap: var(--space-2); margin: 12px 0; }
.detail-list > div { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-2); }
.detail-list dt { color: var(--muted); font-size: 13px; }
.detail-list dd { margin: 0; }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.book-cta { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 20px; border-radius: var(--radius-s); border: 2px solid var(--outline); background: var(--butter); color: #111; text-decoration: none; font-weight: 700; }
.actions a:not(.book-cta) { display: inline-flex; align-items: center; min-height: 48px; padding: 12px; }
.empty { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--outline); border-radius: var(--radius-m); padding: var(--space-3); margin: 12px 0; background: #fff; }
.empty-mark { width: 48px; height: 48px; flex: none; }
.empty-copy { min-width: 0; }
.empty-action { display: inline-flex; align-items: center; min-height: 44px; }
#clearFilters { min-height: 44px; padding: 8px 12px; border-radius: var(--radius-s); border: 1px solid var(--ctl); background: #fff; }
.week { display: flex; gap: 4px; overflow-x: auto; margin: 8px 0; }
.week button { flex: 1; min-width: 44px; min-height: 44px; padding: 6px 2px; border-radius: var(--radius-s); border: 1px solid var(--ctl); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.week button[aria-current] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.subhead { display: flex; gap: var(--space-2); align-items: center; margin: 8px 0; flex-wrap: wrap; background: #fff; border-radius: var(--radius-m); padding: 8px; }
.subhead input[type="month"] { min-height: 44px; border-radius: var(--radius-s); border: 1px solid var(--ctl); padding: 8px; font-size: 14px; }
#filtersBtn { min-height: 44px; padding: 8px 14px; border-radius: var(--radius-s); border: 1px solid var(--ctl); background: #fff; }
.tl { display: flex; flex-direction: column; }
.trow { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-2); }
.gutter { font-size: 12px; color: var(--muted); padding: 8px 2px; background: #fff; border-radius: var(--radius-s); align-self: start; }
.week button { min-height: 44px; }
body[data-view="list"] #weekWrap { display: none; }
body[data-view="list"] .month-wrap { display: none; }
body[data-view="week"] .week { display: none; }
body[data-view="month"] .week { display: none; }
body[data-view="week"] #results { display: none; }
body[data-view="week"] .month-wrap { display: none; }
body[data-view="month"] #results { display: none; }
body[data-view="month"] #weekWrap { display: none; }
.weeknav { display: flex; gap: var(--space-2); align-items: center; margin: 8px 0; font-size: 13px; }
.weeknav button { min-height: 44px; padding: 8px 12px; border-radius: var(--radius-s); border: 1px solid var(--ctl); background: #fff; }
.weekgrid { display: grid; grid-template-columns: repeat(7, minmax(72px, 1fr)); gap: 4px; overflow-x: auto; }
.wday { display: flex; flex-direction: column; gap: 4px; min-width: 72px; }
.wday-head { min-height: 44px; border-radius: var(--radius-s); border: 1px solid var(--ctl); background: #fff; }
.wday-head[aria-current] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.chip { min-height: 44px; border-radius: var(--radius-s); border: 1px solid var(--line); border-left-width: 6px; background: #fff; font-size: 12px; padding: 6px; text-align: left; }
.wempty { font-size: 12px; color: #aaa; padding: 6px; }
#viewToggle { display: flex; border: 1px solid var(--ctl); border-radius: var(--radius-l); overflow: hidden; }
#viewToggle a { padding: 8px 14px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); font-size: 14px; }
#viewToggle a[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
.landing h1 { font-size: 20px; margin: 12px 0 4px; }
.landing p { margin: 0 0 8px; }
.card .sub { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.day-group { margin: 12px 0; }
.day-header { position: sticky; top: 0; background: #fff; border: 1px solid var(--line); padding: 8px 10px; border-radius: var(--radius-s); font-size: 14px; display: flex; justify-content: space-between; align-items: center; margin: 0 0 4px; z-index: 1; }
.day-count { font-size: 12px; color: var(--muted); font-weight: 400; }
.week-timegrid { display: grid; grid-template-columns: 52px repeat(7, minmax(120px, 1fr)); gap: 4px; overflow: auto; max-height: 70vh; align-items: start; }
.week-hours { display: flex; flex-direction: column; position: sticky; left: 0; background: #fff; z-index: 2; }
.week-corner { height: 44px; }
.hour-row { height: 48px; font-size: 11px; color: var(--muted); border-top: 1px solid #eee; padding-top: 2px; }
.wday-col { min-width: 120px; }
.wday-col .wday-head { position: sticky; top: 0; z-index: 1; }
.day-column { position: relative; height: 864px; border-left: 1px solid #eee; }
.hour-cell { height: 48px; border-top: 1px solid #f0f0f3; }
.event-block { position: absolute; overflow: hidden; min-height: 32px; }
.overflow-badge { position: absolute; right: 2px; bottom: 2px; z-index: 5; background: var(--primary); color: #fff; font-size: 11px; padding: 4px 6px; border-radius: var(--radius-l); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.month-nav { display: flex; gap: 12px; align-items: center; margin: 8px 0; font-size: 14px; }
.month-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid var(--ctl); border-radius: var(--radius-s); text-decoration: none; color: var(--ink); background: #fff; }
.month-chips { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.month-chip { font-size: 11px; border-radius: var(--radius-s); border: 1px solid var(--line); border-left-width: 4px; background: #fff; padding: 4px 6px; text-align: left; min-height: 44px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-link { font-size: 12px; display: inline-flex; align-items: center; min-height: 44px; }
.week-agenda { display: block; }
.filters fieldset { border: 1px solid var(--line); border-radius: var(--radius-s); margin: 0 0 8px; padding: 8px; }
.filters legend { font-weight: 700; font-size: 14px; padding: 0 4px; }
.filters label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; }
.filters input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
.filter-long { border: 1px solid var(--line); border-radius: var(--radius-s); margin: 0 0 8px; padding: 8px; }
.filter-long summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; font-size: 14px; cursor: pointer; }
.filter-long label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.filter-actions { display: flex; gap: var(--space-2); align-items: center; }
.filter-actions button { min-height: 44px; padding: 8px 16px; border-radius: var(--radius-s); border: 2px solid var(--outline); background: var(--butter); color: #111; font-weight: 600; }
.filter-actions a { display: inline-flex; align-items: center; min-height: 44px; }
.skeleton { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 12px; margin: 8px 0; color: var(--muted); }
.netfail { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px; background: #fff8e1; }
@media (max-width: 719px) {
  .week-timegrid, .weekgrid { display: none; }
  .month-chips { display: none; }
}
@media (min-width: 720px) {
  .week-agenda { display: none; }
  .dots { display: none; }
  .month td { height: 150px; }
}
@media (min-width: 900px) { body { max-width: 1024px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none; } }
:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
.week button[aria-current]:focus-visible,
#viewToggle a[aria-pressed="true"]:focus-visible,
.wday-head[aria-current]:focus-visible { outline-color: var(--butter); }
a { color: inherit; }
.stale { display: flex; align-items: center; gap: 6px; width: fit-content; background: #fff; border-radius: var(--radius-m); padding: 6px 8px; }
.icon-milk { width: 16px; height: 16px; flex: none; }
#resultCount { display: inline-block; background: #fff; border-radius: var(--radius-s); padding: 4px 8px; }
#filtersSection { background: #fff; border-radius: var(--radius-m); padding: 8px; }
.month, .week-hours, .wday-head, .chip, .month-chip { background: #fff; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dairy-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.dairy-bg .motif { position: absolute; width: 36px; height: 36px; opacity: 0.12; }
.dairy-bg .motif.sm { width: 28px; height: 28px; }
.dairy-bg .motif:nth-child(1) { top: 3%; left: 2%; transform: rotate(-12deg); }
.dairy-bg .motif:nth-child(2) { top: 8%; left: 14%; transform: rotate(10deg); }
.dairy-bg .motif:nth-child(3) { top: 15%; left: 3%; transform: rotate(6deg); }
.dairy-bg .motif:nth-child(4) { top: 2%; right: 3%; transform: rotate(8deg); }
.dairy-bg .motif:nth-child(5) { top: 10%; right: 14%; transform: rotate(-8deg); }
.dairy-bg .motif:nth-child(6) { top: 16%; right: 2%; transform: rotate(-4deg); }
.dairy-bg .motif:nth-child(7) { top: 38%; left: 1%; transform: rotate(18deg); }
.dairy-bg .motif:nth-child(8) { top: 48%; left: 7%; transform: rotate(-10deg); }
.dairy-bg .motif:nth-child(9) { top: 36%; right: 2%; transform: rotate(12deg); }
.dairy-bg .motif:nth-child(10) { top: 47%; right: 8%; transform: rotate(-16deg); }
.dairy-bg .motif:nth-child(11) { top: 44%; left: 46%; transform: rotate(4deg); }
.dairy-bg .motif:nth-child(12) { top: 76%; left: 2%; transform: rotate(6deg); }
.dairy-bg .motif:nth-child(13) { top: 84%; left: 13%; transform: rotate(-8deg); }
.dairy-bg .motif:nth-child(14) { top: 91%; left: 2%; transform: rotate(16deg); }
.dairy-bg .motif:nth-child(15) { top: 74%; right: 5%; transform: rotate(10deg); }
.dairy-bg .motif:nth-child(16) { top: 83%; right: 2%; transform: rotate(-12deg); }
.dairy-bg .motif:nth-child(17) { top: 90%; right: 12%; transform: rotate(8deg); }
body > :not(.dairy-bg):not(.icon-sprite):not(.skip):not(dialog) { position: relative; z-index: 1; }