.catalog-live {
  --pen-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5C75 3 126 6 198 4S325 5 402 3.8S527 5 598 3' fill='none' stroke='%231467b7' stroke-width='1.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --radio-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 2.5C16 1.9 19.3 6.1 19 11.2C18.8 16.3 15.7 19.2 10.6 19C5.2 18.8 2 15.5 2.5 10.4C2.9 5.5 6.2 2.3 11 2.5' fill='none' stroke='%231467b7' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --radio-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M8.3 6.8C12 5.4 15.8 8.4 15.2 11.8C15 15.1 11 16.6 8.4 14.7C5.9 13 5.8 8.6 8.3 6.8Z' fill='%231467b7'/%3E%3C/svg%3E");
  display: grid;
  grid-template-columns: 220px minmax(0,1fr);
  gap: 28px 34px;
}
.catalog-live .control-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.catalog-live .control-frame path { fill: none; stroke: var(--pen); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.catalog-live > .catalog-head { grid-column: 1/-1; grid-row: auto; align-items: center; }
.catalog-live > .catalog-sidebar { grid-column: 1; }
.catalog-live > .catalog-results { grid-column: 2; grid-row: auto; }
.catalog-live .catalog-head:focus,.catalog-live #problem-list:focus { outline: 0; }
.notebook .catalog-live #catalog-title { margin: 0; color: var(--ink); font: 600 34px/42px Caveat,cursive; }
.catalog-live .result-count { margin-left: 10px; font-size: 13px; }
.catalog-order { display: flex; flex-wrap: wrap; gap: 4px 18px; min-width: 0; margin: 0 0 0 auto; padding: 0; border: 0; }
.catalog-order label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; cursor: pointer; }
.catalog-live input[type=radio] { appearance: none; flex: 0 0 21px; width: 21px; height: 21px; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--radio-ring) center / 21px no-repeat; cursor: pointer; }
.catalog-live input[type=radio]:checked { background-image: var(--radio-dot),var(--radio-ring); }
.catalog-live input[type=radio]:focus-visible { outline: 0; }
.catalog-live label:has(> input[type=radio]:focus-visible) { background: #f3dc6240; box-shadow: 0 2px var(--pen); }
.catalog-live label:has(> input[type=radio]:checked) { color: var(--pen); font-weight: 600; }
.catalog-live .filter-panel { border: 0; padding: 0; background: none; }
.catalog-live .filters { padding: 0; }
.catalog-live .filter-group { margin: 0 0 20px; }
.catalog-live .filter-group > label:not(.filter-option),.catalog-live .filter-group > legend { margin-bottom: 6px; font-size: 14px; }
.catalog-live .filter-option { min-height: 38px; gap: 7px; }
.catalog-live .filter-levels { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0 2px; }
.catalog-live .filter-any { grid-column: 1/-1; }
.catalog-live .filter-levels .filter-option:not(.filter-any) { min-width: 0; }
.catalog-live .level-help { margin-top: 6px; }
.catalog-live .level-help > summary,.catalog-origins > summary { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; list-style: none; text-decoration: none; font-size: 14px; }
.catalog-live .level-help > summary::-webkit-details-marker,.catalog-origins > summary::-webkit-details-marker { display: none; }
.catalog-live .level-help > summary::after,.catalog-origins > summary::after,.daily-reading-details summary::after,.daily-reveal > summary::after { content: ''; width: 7px; height: 7px; margin-left: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.catalog-live details[open] > summary::after { transform: rotate(135deg); }
.catalog-origins[open] > summary { margin-bottom: 12px; }
.catalog-live .catalog-tool { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 7px 2px; border: 0; border-radius: 0; background: none; color: var(--ink); font: 400 14px/22px 'IBM Plex Sans',sans-serif; text-decoration: none; cursor: pointer; }
.catalog-live :is(.catalog-tool,.level-help > summary,.catalog-origins > summary):hover { background: linear-gradient(transparent 35%,#f3dc6266 35%,#f3dc6266 78%,transparent 78%); text-decoration: none; }
.catalog-live :is(.catalog-tool,.level-help > summary,.catalog-origins > summary):focus-visible { outline: 0; background: #f3dc6240; box-shadow: 0 3px var(--pen); }
.catalog-live .catalog-tool .icon { width: 23px; height: 25px; flex-basis: 23px; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.catalog-live .catalog-reset { margin-top: 8px; color: var(--pen); }
.catalog-live .filter-propose { margin-top: 22px; }
.catalog-live .filter-propose .catalog-tool { font-size: 13px; }
.catalog-live .catalog-request-error { grid-column: 1/-1; color: var(--no); font-size: 14px; }
.notebook .catalog-live .item { position: relative; padding: 18px 20px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.catalog-live .item h3 { margin: 0; font: 600 19px/26px 'IBM Plex Sans',sans-serif; }
.catalog-live .item .top { gap: 4px 12px; margin-bottom: 12px; }
.catalog-live .item .num,.catalog-live .item .num:visited { color: var(--pen); text-decoration: none; }
.catalog-live .item .num .icon { display: inline-block; width: 23px; height: 23px; vertical-align: -5px; color: var(--pen); }
.catalog-live .item.card-clickable:hover:not(:has(a:not(.num):hover,.num:focus-visible)) .num { background: #f3dc6240; text-decoration: none; }
.catalog-live .item .num:focus-visible { outline: 0; box-shadow: 0 3px var(--pen); }
.catalog-live .item .text { font-size: 17px; line-height: 27px; }
.catalog-live .item .meta { gap: 6px 14px; margin-top: 12px; font-size: 13px; line-height: 20px; }
.catalog-live .item .meta .state { margin-left: auto; }
.catalog-live .day-tag { color: var(--pen); font-size: 12px; }
.catalog-live .problem-list { gap: 24px; padding-top: 0; }
.notebook .catalog-live .daily-inline { position: relative; grid-column: 1/-1; padding: 24px 32px 28px; background: #fff; }
.daily-inner { width: 100%; max-width: 760px; margin: auto; }
.catalog-live .daily-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 16px; }
.notebook .catalog-live .daily-heading h1 { margin: 0; color: var(--pen); font: 600 34px/42px Caveat,cursive; }
.catalog-live .daily-heading time { color: var(--muted); font-size: 13px; }
.notebook .catalog-live .daily-name { margin: 0 0 16px; color: var(--pen); font: 600 20px/28px 'IBM Plex Sans',sans-serif; }
.catalog-live .daily-source { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 18px; }
.daily-citation[open] { flex-basis: 100%; }
.daily-citation > summary { min-height: 30px; cursor: pointer; }
.daily-source .icon { width: 13px; height: 13px; vertical-align: -2px; }
.catalog-live .daily-statement { font-size: 17px; line-height: 27px; }
.catalog-live .daily-answer { margin-top: 20px; }
.daily-answer-row { display: flex; align-items: center; gap: 26px; max-width: 470px; }
.daily-number-field { position: relative; display: flex; align-items: center; flex: 1 1 160px; gap: 10px; max-width: 230px; min-width: 0; }
.daily-number-field::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 7px; background: var(--pen); mask: var(--pen-stroke) center / 100% 100% no-repeat; }
.daily-number-field:focus-within { box-shadow: 0 2px var(--pen); }
.catalog-live .daily-number-field input { width: 100%; min-width: 0; min-height: 48px; padding: 7px 5px 10px; border: 0; border-radius: 0; outline: 0; background: transparent; color: var(--ink); text-align: center; font: 20px/30px Literata,Georgia,serif; }
.daily-number-field > span { flex-shrink: 0; color: var(--ink); font: 20px/30px Literata,Georgia,serif; }
.catalog-live .catalog-primary { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 10px 18px; border: 0; border-radius: 0; background: transparent; color: #fff; font: 600 16px/24px 'IBM Plex Sans',sans-serif; text-decoration: none; cursor: pointer; }
.catalog-live .catalog-primary::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--pen); clip-path: polygon(1% 5%,98% 0,100% 92%,0 100%); pointer-events: none; }
.catalog-live .catalog-primary:hover::before { background: var(--accent-hover); }
.catalog-live .catalog-primary:focus-visible { outline: 0; box-shadow: 0 3px var(--pen); }
.catalog-live .catalog-primary:disabled { opacity: .55; cursor: wait; }
.catalog-live .catalog-primary .icon { width: 23px; height: 25px; stroke-width: 1.7; }
.daily-choice { min-width: 0; margin: 0 0 12px; padding: 0; border: 0; }
.daily-choice legend { margin-bottom: 8px; font-size: 14px; }
.daily-choice .filter-option { min-height: 44px; align-items: flex-start; padding-block: 8px; }
.daily-choice input { margin-top: 2px; }
.daily-attempts { display: flex; align-items: center; gap: 12px; min-height: 36px; margin-top: 8px; color: var(--muted); font-size: 13px; }
.daily-attempts > span:last-child { display: flex; gap: 11px; align-items: center; min-height: 28px; }
.daily-attempts i { display: inline-block; width: 2px; height: 20px; background: var(--pen); clip-path: polygon(100% 0,80% 42%,22% 100%,0 87%,32% 30%); transform: rotate(15deg); }
.daily-attempts i.used { background: var(--muted); opacity: .35; }
.daily-feedback { min-height: 0; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 20px; }
.daily-feedback:empty { display: none; }
.daily-feedback.err,.daily-request-error { color: var(--no); }
.daily-entry { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 13px; }
.daily-entry > span { color: var(--muted); }
.daily-reveal { margin-top: 10px; font-size: 13px; }
.daily-reveal > p { max-width: 430px; margin: 4px 0; }
.daily-outcome { width: 100%; }
.catalog-live .daily-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 36px; padding: 14px 0; background: #fff; }
.notebook .catalog-live .daily-summary h2 { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--pen); font: 600 32px/38px Caveat,cursive; }
.daily-summary h2:focus { outline: 0; }
.daily-summary h2 .icon { width: 36px; height: 39px; stroke-width: 2; }
.daily-summary dl { display: flex; flex-wrap: wrap; gap: 16px 30px; margin: 0; }
.daily-summary dt { color: var(--muted); font-size: 13px; }
.daily-summary dd { margin: 3px 0 0; color: var(--ink); font: 600 24px/30px 'IBM Plex Sans',sans-serif; font-variant-numeric: tabular-nums; }
.daily-reading-details { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 12px; }
.daily-reading-details details { width: fit-content; max-width: 100%; }
.daily-reading-details details[open] { width: 100%; }
.daily-reading-details .text { max-width: 760px; padding: 12px 0; font-size: 17px; line-height: 27px; }
.daily-reading-details .text section { margin-top: 20px; }
.daily-solution-author { font: 400 13px/20px 'IBM Plex Sans',sans-serif; }
.daily-celebration { padding: 8px 16px 16px; background: #fff; text-align: center; }
.daily-celebration:focus { outline: 0; }
.daily-art { display: block; width: 260px; max-width: 100%; height: 140px; margin: 0 auto; overflow: visible; }
.daily-sheet-shadow { fill: #285ea812; }
.daily-sheet-edge { fill: #fff; stroke: var(--pen); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.daily-sheet-line { fill: none; stroke: #e7edf4; stroke-width: 1.4; stroke-linecap: round; }
.daily-check { fill: none; stroke: var(--pen); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.notebook .catalog-live .daily-celebration h2 { margin: 0 0 6px; font: 600 32px/38px Caveat,cursive; }
.daily-playing .daily-sheet { animation: daily-paper-in 480ms ease-out both; transform-origin: center; }
.daily-playing .daily-check { stroke-dasharray: 105; animation: daily-check-in 520ms 180ms ease-out both; }
@keyframes daily-paper-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes daily-check-in { from { stroke-dashoffset: 105; } to { stroke-dashoffset: 0; } }
@media (width < 920px) {
  .catalog-live { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .catalog-live > :is(.catalog-sidebar,.catalog-results) { grid-column: 1; }
  .catalog-live .filter-panel { position: relative; padding-bottom: 12px; }
  .catalog-live .filter-panel::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--pen); mask: var(--pen-stroke) center / 100% 100% no-repeat; pointer-events: none; }
  .catalog-live .filter-panel > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; font-size: 14px; }
  .catalog-live .filter-panel[open] > summary { margin-bottom: 18px; }
  .catalog-live .filter-propose { margin-top: 12px; }
}
@media (width < 640px) {
  .notebook .catalog-live .daily-inline { padding: 18px 16px 22px; }
  .catalog-live .catalog-head { gap: 8px 20px; }
  .notebook .catalog-live #catalog-title,.notebook .catalog-live .daily-heading h1 { font-size: 30px; line-height: 36px; }
  .catalog-order { margin-left: 0; gap: 0 14px; }
  .notebook .catalog-live .daily-name { font-size: 18px; line-height: 26px; }
  .catalog-live .daily-statement,.daily-reading-details .text { font-size: 16px; line-height: 25px; }
  .daily-answer-row { gap: 14px; }
  .daily-number-field { max-width: 175px; }
  .catalog-live .catalog-primary { padding-inline: 14px; font-size: 15px; }
  .catalog-live .daily-summary { gap: 16px; }
  .daily-summary dl { gap: 16px 24px; }
  .notebook .catalog-live .item { padding: 16px; }
  .catalog-live .item h3 { font-size: 17px; line-height: 24px; }
  .catalog-live .item .text { font-size: 16px; line-height: 25px; }
  .catalog-live .item .meta .state { margin-left: 0; }
}
@media (width < 380px) { .daily-answer-row { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .catalog-live .daily-outcome * { animation: none !important; } }
@media (forced-colors: active) { .catalog-live input[type=radio] { appearance: auto; background: none; } }
