:root {
    --ground: #F4F6F1; --card: #FFFFFF; --ink: #1F2B24; --muted: #66756B;
    --faint: #9AA79E; --line: #E3E9E1; --border: #E9EEE7; --accent: #4E7A63;
    --accent-deep: #3E6350; --tint: #E7EFE7; --amber: #B5854C; --amber-bg: #F5EDDD;
    --disabled: #C3CCC4; --bar: #A9C4AB;
    --display: 'Bricolage Grotesque', 'Avenir Next', sans-serif;
    --body: 'Hanken Grotesk', 'Avenir Next', 'Helvetica Neue', sans-serif;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body { margin: 0; background: #E9EDE6; color: var(--ink); font-family: var(--body);
    -webkit-font-smoothing: antialiased; display: flex; justify-content: center; }
  a { color: var(--accent); } a:hover { color: var(--accent-deep); }
  button { font-family: var(--body); border: none; cursor: pointer; color: inherit; background: none; padding: 0; }
  input, select { font-family: var(--body); font-size: 16px; }
  input:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .phone { width: 100%; max-width: 420px; height: 100dvh; background: var(--ground);
    display: flex; flex-direction: column; overflow: hidden; position: relative; }
  @media (min-width: 480px) {
    body { align-items: center; padding: 16px 0; }
    .phone { height: calc(100dvh - 32px); max-height: 920px; border-radius: 28px;
      box-shadow: 0 12px 40px rgba(31,43,36,0.18); }
  }

  .screen { flex: 1 1 auto; overflow-y: auto; padding: 20px 18px 24px 18px; }
  .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
  .h1 { font-family: var(--display); font-size: 27px; font-weight: 600; line-height: 1.12; }
  .card { background: var(--card); border: 1px solid var(--border); border-radius: 18px;
    box-shadow: 0 1px 2px rgba(31,43,36,0.04); }
  .row { display: flex; align-items: center; }
  .col { display: flex; flex-direction: column; }
  .grow { flex-grow: 1; min-width: 0; }
  .wrap { flex-wrap: wrap; }
  .tnum { font-variant-numeric: tabular-nums; }
  .trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .pill-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--accent);
    color: #FFFFFF; font-size: 15px; font-weight: 600; }
  .pill-btn:active { background: var(--accent-deep); }
  .pill-btn.ghost { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
  .icon-btn { width: 44px; height: 44px; border-radius: 999px; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0; }
  .ring-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
  .chip { min-height: 40px; border-radius: 999px; display: inline-flex; align-items: center;
    justify-content: center; font-size: 13.5px; font-weight: 600; padding: 0 14px; white-space: nowrap;
    background: var(--card); border: 1px solid var(--line); color: var(--muted); }
  .chip.on { background: var(--accent); border-color: var(--accent); color: #FFFFFF; font-weight: 700; }
  .chip.flex { flex: 1 1 0; padding: 0 8px; min-height: 44px; }
  .tag { background: var(--tint); color: var(--accent-deep); border-radius: 999px;
    padding: 5px 10px; font-size: 11.5px; font-weight: 700; }
  .tag.amber { background: var(--amber-bg); color: #8A6234; }
  .field { background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    padding: 12px 14px; font-size: 16px; font-weight: 600; color: var(--ink); width: 100%; }

  .nav { background: var(--card); border-top: 1px solid var(--line); display: flex;
    padding: 6px 6px calc(12px + env(safe-area-inset-bottom, 6px)) 6px; flex-shrink: 0; }
  .nav button { flex: 1 1 0; min-height: 48px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; color: var(--faint);
    font-size: 10.5px; font-weight: 600; }
  .nav button.on { color: var(--accent); font-weight: 700; }

  .overlay { position: absolute; inset: 0; background: var(--ground); display: flex;
    flex-direction: column; z-index: 10; overflow: hidden; }
  .ov-head { display: flex; align-items: center; padding: 14px 6px 0 6px; flex-shrink: 0; }
  .ov-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 18px 24px 18px; }
  .ov-foot { background: var(--card); border-top: 1px solid var(--line); flex-shrink: 0;
    padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 6px)) 18px; display: flex; flex-direction: column; gap: 10px; }

  .shot { position: relative; overflow: hidden; background: var(--tint); flex-shrink: 0; }
  .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .shot .f1 { opacity: 0; }
  .shot.play .f0 { animation: sm0 3s ease-in-out infinite; }
  .shot.play .f1 { animation: sm1 3s ease-in-out infinite; }
  .shot.play.fast .f0 { animation-duration: 2.2s; }
  .shot.play.fast .f1 { animation-duration: 2.2s; }
  @keyframes sm0 { 0%, 28% { opacity: 1; } 48%, 78% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes sm1 { 0%, 28% { opacity: 0; } 48%, 78% { opacity: 1; } 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .shot.play .f0, .shot.play .f1 { animation: none; } .shot.play .f1 { opacity: 0; } }
  .phase { position: absolute; left: 8px; bottom: 8px; background: rgba(31,43,36,0.78);
    color: #FFFFFF; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
  .frames { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .frames .fr { position: relative; border-radius: 14px; overflow: hidden; background: var(--tint); aspect-ratio: 3/2; }
  .frames .fr img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .frames .cap { position: absolute; left: 6px; bottom: 6px; background: rgba(31,43,36,0.78);
    color: #FFFFFF; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }

  .seg { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
  .seg > div { height: 100%; border-radius: 2px; background: var(--accent); }
  .cue-num { width: 22px; height: 22px; border-radius: 999px; background: var(--tint);
    color: var(--accent-deep); font-size: 12px; font-weight: 700; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
  .feel { display: inline-flex; align-items: center; gap: 8px; background: var(--amber-bg);
    border-radius: 999px; padding: 8px 13px; font-size: 12.5px; font-weight: 700; color: #8A6234; }
  .feel .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--amber); flex-shrink: 0; }

  .set-pill { background: var(--tint); color: var(--accent-deep); border-radius: 999px;
    padding: 6px 11px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .stepper { display: flex; align-items: center; gap: 2px; }
  .stepper button { width: 42px; height: 44px; border-radius: 13px; background: var(--ground);
    font-size: 20px; font-weight: 600; color: var(--accent-deep); }
  .stepper .val { min-width: 58px; text-align: center; font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .stepper .unit { font-size: 11.5px; color: var(--muted); font-weight: 600; }

  .rest { position: absolute; left: 14px; right: 14px; bottom: 14px; background: var(--ink);
    color: #FFFFFF; border-radius: 18px; padding: 12px 12px 12px 18px; display: flex;
    align-items: center; gap: 12px; z-index: 20; box-shadow: 0 8px 24px rgba(31,43,36,0.3); }
  .rest .t { font-family: var(--display); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .rest button { margin-left: auto; min-height: 44px; padding: 0 18px; border-radius: 999px;
    background: rgba(255,255,255,0.14); color: #FFFFFF; font-size: 14px; font-weight: 700; }

  .scroller { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .scroller::-webkit-scrollbar { display: none; }
  .footnote { font-size: 12px; color: var(--faint); }
  .divider { height: 1px; background: #EDF1EB; }
  .empty { text-align: center; color: var(--faint); font-size: 13.5px; padding: 18px 8px; line-height: 1.5; }
  .toast { position: absolute; left: 50%; transform: translateX(-50%); bottom: 92px; background: var(--ink);
    color: #FFF; padding: 11px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
    z-index: 40; box-shadow: 0 6px 20px rgba(31,43,36,0.3); }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mini { border-radius: 14px; background: var(--ground); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
  .mini .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .mini .l { font-size: 11.5px; color: var(--muted); }
  .swatch { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }