:root {
    color-scheme: light;
    --desk: #C49A6C;
    --desk-deep: #9C6F43;
    --desk-ink: #3A2616;
    --paper: #FFFDF7;
    --paper-edge: #EFE7D6;
    --graphite: #2F2B36;
    --muted: #6B5B4B;
    --red: #E23B34;
    --red-ink: #8E1F1A;
    --blue: #2E6BD6;
    --navy: #1D3F8A;
    --orange: #F58A1F;
    --green: #2E8A3E;
    --green-deep: #1F6A2C;
    --yellow: #F6C421;
    --pink: #F28DB2;
    --sticky: #FFE98A;
    --tape: rgba(236, 222, 176, 0.78);
    --hand-radius: 255px 14px 225px 14px / 14px 225px 14px 255px;
    --shadow: 0 1px 0 rgba(58, 38, 22, 0.25), 0 10px 22px -8px rgba(58, 38, 22, 0.45);
    --font-hand: "Patrick Hand", "Comic Sans MS", "Chalkboard SE", cursive;
    --font-sketch: "Cabin Sketch", "Patrick Hand", "Comic Sans MS", cursive;
  }
  html, body { height: 100%; }
  body {
    margin: 0;
    overflow-x: clip;
    background-color: var(--desk);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.035' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.15 0 0 0 0 0.06 0 0 0 0.55 -0.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0.35 -0.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: auto;
    color: var(--desk-ink);
    font-family: var(--font-hand);
    font-size: 18px;
    line-height: 1.35;
  }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: 3px dashed var(--navy); outline-offset: 3px; }

  /* ---------- header ---------- */
  .top { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; }
  .logo {
    margin: 0;
    font-family: var(--font-sketch);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1;
    letter-spacing: 0.01em;
    display: flex; gap: 0.28em; align-items: baseline;
  }
  .logo-mascot { width: 44px; height: 44px; object-fit: contain; align-self: center; flex: none; }
  .logo .w1 { color: var(--red-ink); transform: rotate(-2deg); display: inline-block; }
  .logo .w2 { color: var(--navy); transform: rotate(1deg); display: inline-block; }
  .top-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .chip {
    color: inherit; text-decoration: none;
    background: var(--paper);
    border: 2px solid var(--desk-ink);
    border-radius: var(--hand-radius);
    padding: 4px 14px 5px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 2px 3px 0 rgba(58, 38, 22, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  .chip:hover { transform: translate(-1px, -1px) rotate(-1deg); box-shadow: 3px 4px 0 rgba(58, 38, 22, 0.35); }
  .chip:active { transform: translate(1px, 2px); box-shadow: 1px 1px 0 rgba(58, 38, 22, 0.35); }
  .chip[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }


  .logo { text-decoration: none; }
  .workspace-tabs { display: flex; gap: 8px; }
  .workspace-tabs .chip[aria-selected="true"] { background: var(--sticky); color: var(--desk-ink); text-decoration: none; }
  .workspace-tabs .chip { white-space: nowrap; }

  .crayon-tooltip {
    position: fixed; z-index: 1000; box-sizing: border-box; width: 270px; max-width: calc(100vw - 24px);
    padding: 12px 14px; background: var(--paper); color: var(--graphite);
    border: 2px solid var(--graphite); border-radius: var(--hand-radius);
    box-shadow: 2px 3px 0 rgba(47, 43, 54, 0.25), var(--shadow);
    font: 18px/1.3 var(--font-hand);
  }
  .crayon-tooltip::before {
    content: ''; position: absolute; width: 12px; height: 12px; top: -8px; left: calc(var(--tip-arrow) - 7px);
    background: var(--paper); border-top: 2px solid var(--graphite); border-left: 2px solid var(--graphite); transform: rotate(45deg);
  }
  .crayon-tooltip[data-side="above"]::before { top: auto; bottom: -8px; transform: rotate(225deg); }
  .crayon-tooltip-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
  .crayon-tooltip-heading .stick { flex: none; width: 38px; height: 12px; }
  .crayon-tooltip strong { font: 700 22px/1.1 var(--font-sketch); }
  .crayon-tooltip kbd { margin-left: auto; padding: 0 5px; border: 1px solid var(--paper-edge); border-radius: 3px; background: #f7f2e5; color: var(--muted); font: 14px/1.35 var(--font-hand); }
  .crayon-tooltip p { margin: 0; }
  @media (max-width: 640px) {
    .logo-mascot { width: 34px; height: 34px; }
    .top .logo { font-size: 28px; }
    .top .chip { padding: 3px 8px; font-size: 16px; }
  }