@layer reset, base, tokens, recipes, utilities;
@layer recipes { @layer base, slots, variants, compound_variants; }
@layer recipes.slots { @layer base, variants, compound_variants; }
@layer base {
  :root {
    --made-with-panda: '🐼';
  }
  :root {
    --bg: var(--colors-canvas);
    --panel: var(--colors-surface);
    --line: var(--colors-line);
    --text: var(--colors-text);
    --muted: var(--colors-muted);
    --accent: var(--colors-accent);
    --gold: var(--colors-gold);
    color-scheme: dark;
  }
  * {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    background: var(--colors-canvas);
    font: 15px/1.65,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
    color: var(--text);
  }
  button,input,select {
    font: inherit;
    border-radius: 0px;
  }
  button,select,input[type=time] {
    border: 1px solid var(--line);
    background: #192536;
    padding: 7px 13px;
    border-radius: 0px;
    color: var(--text);
    min-height: 42px;
  }
  button {
    transition: background .15s,border-color .15s;
    cursor: pointer;
  }
  button:hover {
    background: #27394b;
    border-color: #68878f;
  }
  button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }
  button:disabled {
    opacity: .4;
    cursor: not-allowed;
  }
  .shell {
    margin: auto;
    padding: 0 36px;
    max-width: 1280px;
  }
  header {
    padding: 26px 0;
    border-bottom: 1px solid var(--colors-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .brand {
    text-decoration: none;
    display: block;
    color: var(--text);
  }
  .brand img {
    object-fit: contain;
    display: block;
  }
  .logo-fallback {
    font-size: 36px;
    letter-spacing: 8px;
  }
  .tag {
    font-size: 11px;
    letter-spacing: 2.5px;
    color: var(--gold);
  }
  .intro {
    padding: 42px 0 28px;
    gap: 20px;
    display: flex;
    align-items: end;
    justify-content: space-between;
  }
  h1 {
    margin: 8px 0 12px;
    font-size: clamp(24px,3.3vw,36px);
    line-height: 1.45;
    letter-spacing: .03em;
  }
  p {
    margin: 7px 0;
  }
  .muted,.scope-note {
    color: var(--muted);
    font-size: 13px;
  }
  .membership {
    color: var(--gold);
    font-size: 12px;
    white-space: nowrap;
  }
  .panel {
    border: 1px solid var(--line);
    background: var(--colors-surface);
    padding: 22px;
    border-radius: 0px;
    border-top: 2px solid var(--colors-line);
  }
  .controls {
    gap: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .select-field>label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 7px;
  }
  .row {
    gap: 8px;
    display: flex;
    align-items: center;
  }
  .row select {
    flex: 1;
    min-width: 0;
  }
  .small-actions {
    gap: 14px;
    display: flex;
    margin-top: 5px;
  }
  .small-actions button {
    background: none;
    border: 0;
    padding: 2px;
    color: var(--muted);
    font-size: 12px;
    min-height: 32px;
  }
  .summary {
    border-left: 1px solid var(--line);
    padding-left: 28px;
  }
  .summary strong {
    display: block;
    font-size: 32px;
    line-height: 1.6;
    color: var(--accent);
  }
  .summary small {
    font-size: 13px;
    color: var(--muted);
    font-weight: 400;
  }
  progress {
    border: 0;
    border-radius: 0px;
    overflow: hidden;
    display: block;
    accent-color: var(--accent);
    width: 100%;
    height: 6px;
  }
  progress::-webkit-progress-bar {
    background: #2b3947;
  }
  progress::-webkit-progress-value {
    background: var(--accent);
  }
  .schedule {
    margin: 16px 0 26px;
    gap: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font-size: 12px;
    flex-wrap: wrap;
  }
  .schedule button {
    font-size: 12px;
    min-height: 34px;
  }
  .toolbar {
    gap: 14px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
  }
  .filters {
    gap: 5px;
    display: flex;
  }
  .filters button {
    background: transparent;
    border-color: transparent;
    font-size: 13px;
  }
  .filters button[aria-pressed=true] {
    background: #243d40;
    border-color: #43675f;
    color: #c1f2e5;
    box-shadow: inset 0 -2px 0 var(--colors-accent);
  }
  .hide-done {
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  input[type=checkbox] {
    border: 1px solid #647383;
    background: var(--colors-canvas);
    border-radius: 0px;
    place-content: center;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
    appearance: none;
    display: grid;
    width: 19px;
    height: 19px;
  }
  .columns {
    gap: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 26px;
  }
  .section-heading {
    gap: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .section-heading h2 {
    margin: 0;
    font-size: 21px;
  }
  .section-heading span {
    color: var(--gold);
    font-size: 12px;
    overflow-wrap: anywhere;
    max-width: 50%;
  }
  .scope-note {
    margin: 3px 0 19px;
    font-size: 12px;
  }
  .group {
    background: var(--colors-surface);
    border: 1px solid var(--line);
    border-radius: 0px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .group-head {
    padding: 13px 17px;
    background: var(--colors-raised);
    border-bottom: 1px solid var(--line);
    border-left: 3px solid var(--colors-accent);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .group-head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
  }
  .group-head span {
    font-size: 12px;
    color: var(--accent);
  }
  .task {
    padding: 16px;
    gap: 12px;
    border-bottom: 1px solid #223043;
    transition: background .15s;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
  }
  .task:last-child {
    border-bottom: 0;
  }
  .task:hover {
    background: #1a2838;
  }
  .task input {
    margin: 4px 0 0;
  }
  .task strong {
    font-size: 14px;
    font-weight: 600;
    display: block;
    line-height: 1.65;
  }
  .task p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.8;
  }
  .task.checked strong {
    text-decoration: line-through;
    color: #9aaab7;
  }
  .task.checked {
    background: #111e26;
  }
  .empty {
    padding: 24px 17px;
    color: var(--muted);
    font-size: 13px;
  }
  .bottom {
    margin: 20px 0;
    gap: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .bottom strong {
    font-size: 13px;
  }
  .bottom p, .bottom button {
    font-size: 12px;
  }
  .wrap {
    flex-wrap: wrap;
  }
  footer {
    padding: 24px 0 34px;
    text-align: center;
    color: #92a2b6;
    font-size: 11px;
  }
  dialog {
    background: #131f2d;
    border: 1px solid #43566b;
    padding: 25px;
    overflow: auto;
    border-radius: 0px;
    color: var(--text);
    max-width: 540px;
    width: calc(100% - 28px);
    max-height: 90vh;
  }
  dialog::backdrop {
    background: #030913c9;
  }
  dialog h2 {
    font-size: 21px;
    margin-top: 0;
  }
  .setting {
    margin: 22px 0;
    gap: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
  }
  .end {
    justify-content: flex-end;
    margin-top: 23px;
  }
  .primary {
    background: #31564e;
    border-color: #56867b;
  }
  hr {
    border: 0;
    margin: 25px 0;
    border-top: 1px solid var(--line);
  }
  #message:not(:empty) {
    padding: 12px 16px;
    border: 1px solid #a3844c;
    background: #342b1f;
    border-radius: 0px;
    font-size: 13px;
    margin-bottom: 15px;
  }
  .noscript {
    padding: 20px;
    text-align: center;
    color: #f4c885;
  }
  .select-field,.summary,.columns>section, .select-field .row {
    min-width: 0;
  }
  .select-field select {
    flex: 1 1 0;
    width: 0;
  }
  .task>div {
    overflow-wrap: anywhere;
    min-width: 0;
  }
  input[type=text] {
    border: 1px solid var(--colors-line);
    background: var(--colors-canvas);
    padding: 9px 12px;
    border-radius: 0px;
    color: var(--colors-text);
    min-height: 42px;
  }
  input[type=checkbox]::before {
    border-left: 2px solid var(--colors-canvas);
    border-bottom: 2px solid var(--colors-canvas);
    content: "";
    transform: translateY(-1px) rotate(-45deg);
    opacity: 0;
    width: 10px;
    height: 6px;
  }
  input[type=checkbox]:checked {
    background: var(--colors-accent);
    border-color: var(--colors-accent);
  }
  input[type=checkbox]:checked::before {
    opacity: 1;
  }
  #action-input {
    display: block;
    width: 100%;
    margin-top: 8px;
  }
  @media(max-width:850px) {
    .shell {
      padding: 0 22px;
    }
    .intro {
      display: block;
    }
    .membership {
      display: inline-block;
      margin-top: 12px;
    }
    .controls {
      gap: 16px;
    }
    .summary {
      padding-left: 16px;
    }
    .columns {
      gap: 20px;
    }
    .bottom {
      display: block;
    }
    .bottom>.row {
      margin-top: 15px;
    }
  }
  @media(max-width:600px) {
    .shell {
      padding: 0 16px;
    }
    header {
      padding: 18px 0;
    }
    .brand img {
      width: 135px;
      height: 55px;
    }
    .tag {
      font-size: 8px;
      letter-spacing: 1px;
      text-align: right;
      max-width: 110px;
    }
    .intro {
      padding-top: 27px;
    }
    .controls {
      padding: 16px;
      gap: 15px;
      grid-template-columns: 1fr;
    }
    .summary {
      padding: 12px 0 0;
      grid-column: auto;
      border-left: 0;
      border-top: 1px solid var(--line);
    }
    .summary strong {
      font-size: 26px;
    }
    .columns {
      gap: 12px;
      grid-template-columns: 1fr;
      padding-top: 22px;
    }
    .toolbar {
      gap: 6px;
      flex-wrap: wrap;
    }
    .filters button {
      padding: 7px 10px;
      font-size: 12px;
    }
    .task {
      padding: 15px;
    }
    .setting {
      flex-wrap: wrap;
    }
    h1 {
      font-size: 25px;
    }
    .schedule {
      margin-bottom: 18px;
    }
    .section-heading h2 {
      font-size: 20px;
    }
  }
}
@layer tokens {
  :where(:root, :host) {
    --colors-canvas: #0b1017;
    --colors-surface: #121b25;
    --colors-raised: #18232e;
    --colors-line: #30404f;
    --colors-text: #edf2f7;
    --colors-muted: #a7b5c4;
    --colors-accent: #9fd7ca;
    --colors-gold: #d6ba88;
  }
}