:root {
          --bg: #f8f5ff;
          --card: #fff9f1;
          --card-alt: #f4fffd;
          --accent: #a0c4ff;
          --accent-2: #ffafcc;
          --accent-3: #caffbf;
          --ink: #1f1f1f;
          --text-muted: #545454;
          font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
              'Segoe UI', sans-serif;
      }

      *,
      *::before,
      *::after {
          box-sizing: border-box;
      }

      body {
          margin: 0;
          min-height: 100vh;
          background: var(--bg);
          color: var(--ink);
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          padding: 2rem clamp(1rem, 4vw, 3rem) 3rem;
      }

      main {
          width: min(960px, 100%);
      }

      .card {
          background: var(--card);
          border: 3px solid var(--ink);
          box-shadow: 8px 8px 0 var(--ink);
          border-radius: 1rem;
          padding: clamp(1.5rem, 3vw, 2.5rem);
      }

      header h1 {
          font-size: clamp(2rem, 5vw, 3rem);
          margin: 0 0 0.25rem;
      }

      header p {
          margin: 0;
          color: var(--text-muted);
          font-size: 1rem;
      }

      section+section {
          margin-top: clamp(1.5rem, 3vw, 2.5rem);
      }

      .controls {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
          gap: 1rem;
      }

      .input-group {
          background: var(--card-alt);
          border: 2px solid var(--ink);
          border-radius: 0.75rem;
          padding: 1rem;
          box-shadow: 4px 4px 0 var(--ink);
      }

      label {
          display: block;
          font-weight: 600;
          margin-bottom: 0.5rem;
      }

      .input-row {
          display: flex;
          align-items: center;
          gap: 0.75rem;
      }

      input[type='number'] {
          width: 100%;
          border: 2px solid var(--ink);
          border-radius: 0.6rem;
          padding: 0.6rem 0.75rem;
          font-size: 1rem;
          font-weight: 600;
          background-color: white;
          box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.05);
          -moz-appearance: textfield;
          appearance: textfield;
      }

      input[type='number']::-webkit-inner-spin-button,
      input[type='number']::-webkit-outer-spin-button {
          -webkit-appearance: none;
          margin: 0;
      }

      .hint {
          font-size: 0.8rem;
          color: var(--text-muted);
          margin-top: 0.35rem;
      }

      .sound-btn {
          margin-top: 1.5rem;
          width: 100%;
          border: 3px solid var(--ink);
          border-radius: 1rem;
          padding: 0.9rem 1rem;
          font-size: 1rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          cursor: pointer;
          box-shadow: 6px 6px 0 var(--ink);
          transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;
      }

      .sound-btn:active {
          transform: translate(2px, 2px);
          box-shadow: 3px 3px 0 var(--ink);
      }

      .sound-btn:focus-visible {
          outline: 3px dashed var(--ink);
          outline-offset: 3px;
      }

      .sound-btn--on {
          background: var(--accent);
          color: var(--ink);
      }

      .sound-btn--off {
          background: #ffd9e2;
          color: var(--ink);
      }

      .timer-card {
          background: var(--accent-3);
          border-radius: 1.25rem;
          border: 3px solid var(--ink);
          padding: 2rem;
          box-shadow: 10px 10px 0 var(--ink);
          text-align: center;
      }

      .phase-label {
          font-size: 1.1rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          color: var(--text-muted);
      }

      .time-display {
          font-size: clamp(3rem, 16vw, 5.5rem);
          margin: 0.5rem 0 1rem;
          font-weight: 700;
      }

      .progress-track {
          width: 100%;
          height: 12px;
          background: white;
          border-radius: 999px;
          border: 2px solid var(--ink);
          overflow: hidden;
      }

      .progress-bar {
          height: 100%;
          width: 0%;
          background: linear-gradient(90deg, var(--accent), var(--accent-2));
          transition: width 0.3s ease;
      }

      .actions {
          display: flex;
          gap: 1rem;
          justify-content: center;
          flex-wrap: wrap;
          margin-top: 1.5rem;
      }

      button {
          border: 3px solid var(--ink);
          border-radius: 0.85rem;
          padding: 0.85rem 1.8rem;
          font-size: 1rem;
          font-weight: 700;
          cursor: pointer;
          background: white;
          box-shadow: 6px 6px 0 var(--ink);
          transition: transform 0.1s ease;
      }

      footer {
          width: min(960px, 100%);
          background: var(--card);
          border: 3px solid var(--ink);
          border-radius: 0.85rem;
          box-shadow: 6px 6px 0 var(--ink);
          padding: 0.85rem 1.25rem;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
      }

      footer a {
          font-weight: 600;
          color: var(--ink);
          text-decoration: none;
          text-align: center;
      }

      footer a:hover,
      footer a:focus-visible {
          text-decoration: underline;
      }

      button:active {
          transform: translate(2px, 2px);
          box-shadow: 3px 3px 0 var(--ink);
      }

      button:disabled {
          cursor: not-allowed;
          opacity: 0.5;
          box-shadow: none;
      }

      .btn-primary {
          background: var(--accent);
      }

      .btn-accent {
          background: var(--accent-2);
      }

      .btn-muted {
          background: #ffeedd;
      }

      .time-summary {
          margin-top: 0.75rem;
          display: flex;
          flex-direction: column;
          gap: 0.35rem;
          align-items: center;
      }

      .meta-text {
          margin: 0;
          font-size: 1.05rem;
          font-weight: 600;
          color: var(--ink);
      }

      .schedule {
          background: white;
          border: 2px solid var(--ink);
          border-radius: 1rem;
          padding: 1.25rem;
          box-shadow: 6px 6px 0 var(--ink);
      }

      .schedule h3 {
          margin: 0 0 1rem;
      }

      .phase-list {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
      }

      .phase-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border: 2px solid var(--ink);
          border-radius: 0.75rem;
          padding: 0.65rem 0.85rem;
          background: var(--card);
      }

      .phase-item strong {
          font-size: 0.95rem;
      }

      .phase-item span {
          color: var(--text-muted);
          font-size: 0.85rem;
      }

      footer {
          margin-top: 2rem;
          text-align: center;
          color: var(--text-muted);
          font-size: 0.85rem;
      }

      @media (max-width: 600px) {
          body {
              padding: 1.25rem;
          }

          .timer-card {
              padding: 1.5rem 1rem;
          }

          .actions {
              flex-direction: column;
          }

          button {
              width: 100%;
          }
      }