:root {
    color-scheme: light;
    --page: #ecefe9; --page-ink: #14181a; --page-muted: #6b7370;
    --ink: #14181a; --muted: #6b7370; --line: #e4e7e1; --bg: #f5f6f3; --card: #ffffff;
    --green: #1f5a33; --green-d: #174427; --green-bg: #e8f3e6; --lime: #8fd17a;
    --dark: #111412; --dark2: #1b1f1c; --amber: #b7791f; --amber-bg: #fbf3e1; --red: #b23a3a; --red-bg: #f8e6e6;
    --shadow: 0 1px 2px rgba(20,24,26,.04), 0 4px 14px rgba(20,24,26,.05);
    --display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
    --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  }
  html, body { background: var(--page); color: var(--page-ink); margin: 0; }
  body { font-family: var(--body); -webkit-font-smoothing: antialiased; min-height: 100vh; }
  * { box-sizing: border-box; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
  button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
  input, textarea { font: inherit; color: var(--ink); }
  a { color: var(--green); }
  img { display: block; }

  .stage { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px 16px 48px; }
  .stage-head { width: 100%; max-width: 760px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .stage-head h1 { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: .01em; margin: 0; line-height: 1; }
  .stage-head p { margin: 6px 0 0; font-size: 14px; color: var(--page-muted); max-width: 52ch; line-height: 1.45; }
  .stage-btn { height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid #cfd4cc; background: #fff; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
  .stage-btn:hover { border-color: var(--green); }

  .phone { width: 390px; height: 844px; background: var(--bg); color: var(--ink); border-radius: 44px; overflow: hidden; position: relative; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(20,24,26,.22), 0 0 0 10px #1b1f1c, 0 0 0 12px #3a413c; }
  @media (max-width: 520px) {
    .stage { padding: 0; gap: 0; }
    .stage-head { display: none; }
    .phone { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
  }

  .hdr { background: var(--dark); padding: 54px 20px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; color: #fff; }
  .hdr .ttl { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: .02em; line-height: 1; }
  .hdr .sub { font-size: 12px; color: #a9b3ab; margin-top: 3px; }
  .hbtn { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; transition: background .15s; }
  .hbtn:hover { background: rgba(255,255,255,.08); }
  .hbtn .dot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); border: 2px solid var(--dark); }
  .content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 14px; padding: 16px 20px 28px; scrollbar-width: none; }
  .content::-webkit-scrollbar { display: none; }
  .content > * { flex-shrink: 0; }
  .content.fwd { animation: fwd .22s cubic-bezier(.2,.8,.2,1); }
  .content.bwd { animation: bwd .22s cubic-bezier(.2,.8,.2,1); }
  .content.tabin { animation: tabin .18s ease; }
  @keyframes fwd { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes bwd { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes tabin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .tabbar { flex: 0 0 auto; height: 84px; background: var(--card); border-top: 1px solid var(--line); display: flex; align-items: flex-start; padding: 4px 8px 0; }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 56px; border-radius: 12px; color: var(--muted); font-size: 11px; font-weight: 500; transition: color .15s; }
  .tab.on { color: var(--green); font-weight: 600; }

  .h2 { display: flex; align-items: baseline; justify-content: space-between; }
  .h2 .t { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: .03em; text-transform: uppercase; }
  .h2 .r { font-size: 13px; font-weight: 600; color: var(--green); height: 28px; display: inline-flex; align-items: center; }
  .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
  .card.tight { padding: 14px 16px; }
  .card.list { padding: 2px 16px; gap: 0; }
  .card.flat { box-shadow: none; }
  button.card { transition: transform .12s ease, box-shadow .12s ease; }
  button.card:active { transform: scale(.985); }
  .btn { height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; flex: 1; padding: 0 16px; white-space: nowrap; transition: transform .08s ease, filter .12s ease; }
  .btn:active { transform: scale(.97); }
  .btn.sm { height: 44px; font-size: 14px; }
  .btn.fit { flex: 0 0 auto; }
  .btn.primary { background: var(--green); color: #fff; }
  .btn.primary:hover { filter: brightness(1.08); }
  .btn.ghost { color: var(--green); border: 1.5px solid var(--green); }
  .btn.dark { background: var(--dark); color: #fff; }
  .btn.quiet { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
  .btn.lime { background: var(--lime); color: var(--dark); }
  .btn.danger { color: var(--red); border: 1.5px solid #e2b9b9; }
  .btn.onDark { color: #fff; border: 1px solid #3a413c; }
  .btn[disabled] { opacity: .5; cursor: default; }
  .row2 { display: flex; gap: 8px; }
  .pill { height: 44px; padding: 0 16px; border-radius: 22px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--card); color: var(--ink); border: 1px solid var(--line); transition: background .15s, color .15s; }
  .pill.on { background: var(--dark); color: #fff; border-color: var(--dark); }
  .chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
  .chips::-webkit-scrollbar { display: none; }
  .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
  .tag.green { background: var(--green-bg); color: var(--green); }
  .tag.amber { background: var(--amber-bg); color: var(--amber); }
  .tag.grey { background: #eef0ec; color: var(--muted); }
  .tag.dark { background: var(--dark); color: var(--lime); }
  .tag.red { background: var(--red-bg); color: var(--red); }
  .av { border-radius: 50%; background: var(--green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; flex: 0 0 auto; overflow: hidden; }
  .av img { width: 100%; height: 100%; object-fit: cover; }
  .bar { height: 6px; border-radius: 6px; background: #e6e9e4; overflow: hidden; display: flex; }
  .bar > div { background: var(--green); border-radius: 6px; transition: width .4s ease; }
  .lrow { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--line); width: 100%; }
  .lrow:last-child { border-bottom: 0; }
  .lrow .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--green-bg); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .lrow .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .lrow .tx b { font-size: 15px; font-weight: 600; }
  .lrow .tx span { font-size: 12.5px; color: var(--muted); }
  .badge { width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
  .stat { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; box-shadow: var(--shadow); }
  .stat b { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1; }
  .stat span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
  .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; min-height: 118px; box-shadow: var(--shadow); text-align: left; transition: transform .12s ease; }
  .tile:active { transform: scale(.985); }
  .tile .k { font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; justify-content: space-between; }
  .tile .v { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1; }
  .tile .v small { font-family: var(--body); font-size: 12px; color: var(--muted); font-weight: 600; margin-left: 4px; }
  .tile .s { font-size: 12px; color: var(--muted); }
  .muted { color: var(--muted); }
  .small { font-size: 12.5px; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
  .field input, .field textarea { width: 100%; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 12px 14px; font-size: 15px; }
  .field textarea { min-height: 84px; resize: vertical; }
  .num { font-variant-numeric: tabular-nums; }
  .thumb { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; background: var(--dark); }

  .scrim { position: absolute; inset: 0; background: rgba(17,20,18,.55); display: flex; flex-direction: column; justify-content: flex-end; z-index: 20; animation: fade .18s ease; }
  .sheet { background: var(--card); border-radius: 22px 22px 0 0; padding: 10px 20px 34px; display: flex; flex-direction: column; gap: 14px; max-height: 92%; overflow-y: auto; animation: up .24s cubic-bezier(.2,.8,.2,1); }
  .sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); align-self: center; }
  .sheet .sh { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .sheet .sh .t { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: .01em; }
  .sheet .sh .s { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
  .x { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin: -8px -10px 0 0; border-radius: 12px; }
  @keyframes up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  .toast { position: absolute; left: 20px; right: 20px; bottom: 100px; background: var(--dark); color: #fff; border-radius: 14px; padding: 12px 16px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; z-index: 30; animation: up .22s ease; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
  .timer { position: absolute; left: 20px; right: 20px; bottom: 100px; background: var(--dark); color: #fff; border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; z-index: 25; animation: up .22s ease; }
  .timer b { font-family: var(--display); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; min-width: 80px; }
  .setrow { display: flex; align-items: center; gap: 10px; }
  .setrow .n { width: 22px; font-size: 13px; font-weight: 700; color: var(--muted); }
  .setrow .p { width: 74px; font-size: 12px; color: var(--muted); }
  .setrow input { flex: 1; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); text-align: center; font-weight: 600; font-size: 16px; min-width: 0; transition: border-color .15s; }
  .setrow input:focus { border-color: var(--green); }
  .setrow .ck { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
  .setrow .ck span { width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
  .setrow.done input { background: var(--bg); color: var(--muted); }
  .setrow.done .ck span { background: var(--green); border-color: var(--green); }
  .bub { max-width: 78%; padding: 11px 14px; font-size: 14.5px; line-height: 1.45; border: 1px solid var(--line); background: var(--card); border-radius: 16px 16px 16px 4px; }
  .bub.me { background: var(--green); color: #fff; border-color: var(--green); border-radius: 16px 16px 4px 16px; align-self: flex-end; }
  .syscard { align-self: center; display: flex; align-items: center; gap: 10px; background: var(--green-bg); border-radius: 12px; padding: 10px 14px; max-width: 92%; }
  .syscard b { font-size: 13px; color: var(--green-d); display: block; }
  .syscard span { font-size: 12px; color: var(--green); }
  .when { font-size: 11px; color: var(--muted); padding: 0 4px; }
  .compose { display: flex; align-items: center; gap: 8px; padding: 10px 20px 14px; border-top: 1px solid var(--line); background: var(--bg); flex: 0 0 auto; }
  .compose input { flex: 1; height: 44px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); padding: 0 16px; font-size: 14px; }
  .rnd { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .dayb { flex: 1; height: 62px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--card); border: 1px solid var(--line); position: relative; transition: background .15s; }
  .dayb small { font-size: 11px; font-weight: 600; color: var(--muted); }
  .dayb b { font-family: var(--display); font-weight: 600; font-size: 18px; }
  .dayb.on { background: var(--dark); color: #fff; border-color: var(--dark); }
  .dayb.on small { color: var(--lime); }
  .dayb .dots { display: flex; gap: 3px; height: 5px; }
  .dayb .dots i { width: 5px; height: 5px; border-radius: 50%; display: block; }
  .cls { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); width: 100%; }
  .cls:last-child { border-bottom: 0; }
  .cls .tm { width: 52px; display: flex; flex-direction: column; line-height: 1; }
  .cls .tm b { font-family: var(--display); font-weight: 600; font-size: 18px; }
  .cls .tm small { font-size: 11px; color: var(--muted); margin-top: 3px; }
  .cls .tx { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .cls .tx b { font-size: 15.5px; font-weight: 700; }
  .cls .tx span { font-size: 12.5px; color: var(--muted); }
  .cls .tx em { font-style: normal; font-size: 12px; color: var(--green); font-weight: 600; }
  .grid7 { display: flex; gap: 6px; }
  .grid7 > div { flex: 1; height: 22px; border-radius: 6px; background: #e6e9e4; }
  .qr { width: 200px; height: 200px; align-self: center; display: grid; grid-template-columns: repeat(21, 1fr); background: #fff; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
  .qr i { display: block; }
  .qr i.k { background: var(--dark); }
  .hex { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
  .hex .h { width: 52px; height: 58px; background: var(--green); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: flex; align-items: center; justify-content: center; }
  .hex .h.dim { background: #d9dde0; }
  .hex span { font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.2; }
  .habit { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); width: 100%; }
  .habit:last-child { border-bottom: 0; }
  .habit .ck { width: 32px; height: 32px; border-radius: 10px; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background .15s, border-color .15s; }
  .habit.on .ck { background: var(--green); border-color: var(--green); }
  .habit .wk { display: flex; gap: 3px; }
  .habit .wk i { width: 8px; height: 8px; border-radius: 50%; background: #e6e9e4; display: block; }
  .habit .wk i.on { background: var(--green); }
  .chart { width: 100%; height: 170px; display: block; }
  .tip { position: absolute; background: var(--dark); color: #fff; font-size: 12px; padding: 6px 9px; border-radius: 8px; pointer-events: none; white-space: nowrap; transform: translate(-50%, -110%); z-index: 5; }
  .acc { border-bottom: 1px solid var(--line); }
  .acc:last-child { border-bottom: 0; }
  .acc .q { display: flex; align-items: center; justify-content: space-between; min-height: 48px; width: 100%; font-weight: 600; font-size: 14px; }
  .acc .a { font-size: 13.5px; color: var(--muted); line-height: 1.5; padding: 0 0 12px; }

  .grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .gcol { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .gday { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 2px; }
  .gfocus { font-size: 9.5px; color: var(--green); font-weight: 600; text-align: center; line-height: 1.15; min-height: 22px; }
  .gcell { border-radius: 6px; padding: 4px 3px; font-size: 10px; line-height: 1.15; text-align: center; background: var(--green-bg); color: var(--green-d); font-weight: 600; width: 100%; min-height: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
  .gcell small { font-size: 9px; font-weight: 500; color: var(--green); }
  .gcell.cond { background: #e9eef6; color: #2b4a73; } .gcell.cond small { color: #3d5f8a; }
  .gcell.box { background: #f6e9e1; color: #7a3e1e; } .gcell.box small { color: #9a5a3a; }
  .gcell.pil { background: #f1e9f6; color: #5a3a7a; } .gcell.pil small { color: #7a5a9a; }
  .gcell.youth { background: var(--amber-bg); color: #7a5a1e; } .gcell.youth small { color: #9a7a3a; }
  .gcell.run { background: var(--dark); color: #fff; } .gcell.run small { color: var(--lime); }
  .gcell.mine { outline: 2px solid var(--green); outline-offset: -1px; }
  .login { flex: 1; display: flex; flex-direction: column; background: var(--dark); color: #fff; padding: 70px 24px 36px; gap: 16px; position: relative; overflow: hidden; }
  .login .field label { color: #a9b3ab; } .login .field input { background: #1b1f1c; border-color: #2a2f2b; color: #fff; }
  .login .field input::placeholder { color: #6b7370; }
  .radio { display: flex; align-items: center; gap: 12px; min-height: 48px; width: 100%; font-size: 14.5px; }
  .radio i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .radio.on i::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--green); display: block; }
  .strip { background: var(--green); color: #fff; border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; width: 100%; text-align: left; }
  .strip span { flex: 1; } .strip b { color: var(--lime); }
  .lockrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--amber-bg); border-radius: 12px; font-size: 13px; color: #7a5a1e; line-height: 1.4; }
  .explore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .exp { background: var(--dark); color: #fff; border-radius: 16px; min-height: 124px; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; text-align: left; background-size: cover; background-position: center; transition: transform .12s ease; }
  .exp:active { transform: scale(.985); }
  .exp b { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1; }
  .exp span { font-size: 11.5px; color: #c9d1cb; }
  .demo { position: absolute; top: 12px; right: 12px; z-index: 40; display: flex; gap: 6px; }
  .demo button { height: 30px; padding: 0 10px; border-radius: 15px; background: rgba(17,20,18,.75); color: #fff; font-size: 11px; font-weight: 600; border: 1px solid #3a413c; backdrop-filter: blur(6px); }
  @media (prefers-reduced-motion: reduce) { .sheet, .toast, .timer, .scrim, .content { animation: none !important; } }

  /* ---- soft, modern layer ---- */
  :root { --line: #e9ece6; --bg: #f6f7f4; --shadow: 0 1px 2px rgba(20,24,26,.03), 0 8px 24px rgba(20,24,26,.06); --r: 20px; }
  .phone { border-radius: 48px; }
  .hdr { background: linear-gradient(160deg, #141a16 0%, #0f1512 60%, #16261b 100%); border-radius: 0 0 26px 26px; padding-bottom: 18px; position: relative; z-index: 2; }
  .hdr .ttl { font-weight: 500; letter-spacing: .01em; }
  .content { padding-top: 18px; }
  .card { border-radius: var(--r); border-color: rgba(20,24,26,.05); padding: 18px; }
  .card.tight { padding: 15px 18px; }
  .card.list { padding: 4px 18px; }
  .stat, .tile { border-radius: 18px; border-color: rgba(20,24,26,.05); }
  .btn { border-radius: 16px; height: 50px; }
  .btn.sm { border-radius: 14px; height: 44px; }
  .btn.primary { box-shadow: 0 6px 18px rgba(31,90,51,.22); }
  .btn.lime { box-shadow: 0 6px 18px rgba(143,209,122,.25); }
  .btn.quiet { background: #fff; border-color: rgba(20,24,26,.08); }
  .pill { border-radius: 22px; border-color: rgba(20,24,26,.08); background: #fff; height: 40px; padding: 0 15px; }
  .pill.on { background: var(--green); border-color: var(--green); }
  .tag { border-radius: 8px; font-weight: 600; letter-spacing: .03em; }
  .dayb { border-radius: 16px; border-color: rgba(20,24,26,.06); background: #fff; }
  .dayb.on { background: var(--green); border-color: var(--green); }
  .lrow .ic { border-radius: 12px; }
  .field input, .field textarea { border-radius: 16px; border-color: rgba(20,24,26,.08); padding: 13px 16px; }
  .sheet { border-radius: 30px 30px 0 0; padding: 12px 22px 40px; box-shadow: 0 -20px 60px rgba(20,24,26,.15); }
  .scrim { background: rgba(17,20,18,.45); backdrop-filter: blur(3px); }
  .toast, .timer { border-radius: 18px; }
  .h2 .t { font-weight: 500; font-size: 17px; letter-spacing: .05em; color: #2a302c; }
  .syscard { border-radius: 16px; }
  .bub { border-radius: 20px 20px 20px 6px; border-color: rgba(20,24,26,.06); }
  .bub.me { border-radius: 20px 20px 6px 20px; }
  .setrow input { border-radius: 12px; }
  @keyframes up { from { transform: translateY(36px); opacity: 1; } to { transform: none; opacity: 1; } }

  /* floating dock instead of a hard tab bar */
  .dockwrap { position: absolute; left: 14px; right: 14px; bottom: 18px; z-index: 10; pointer-events: none; }
  .dock { pointer-events: auto; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(20,24,26,.06); border-radius: 30px; height: 68px; display: flex; align-items: center; padding: 6px; gap: 2px; box-shadow: 0 10px 30px rgba(20,24,26,.14); }
  .dock .tab { flex: 1; height: 56px; border-radius: 24px; gap: 3px; color: #7a827d; transition: background .18s ease, color .18s ease; }
  .dock .tab.on { background: var(--green-bg); color: var(--green); }
  .dock .tab span { font-size: 10.5px; }
  .content { padding-bottom: 108px; }
  .content.nodock { padding-bottom: 28px; }

  /* login */
  .login { padding: 0; background: #0f1512; }
  .login .art { position: absolute; inset: 0; background-size: cover; background-position: center 30%; opacity: .55; filter: saturate(.8); }
  .login .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,21,18,.15) 0%, rgba(15,21,18,.75) 45%, #0f1512 78%); }
  .login .inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; padding: 0 24px 34px; margin-top: auto; }
  .login h1 { font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 1.05; margin: 0; letter-spacing: .005em; color: #fff; }
  .login p { margin: 0; color: #b6bfb8; font-size: 14.5px; line-height: 1.5; }
  .login .field input { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; height: 54px; border-radius: 18px; font-size: 16px; }
  .login .field input::placeholder { color: #8a948d; }
  .login .btn.primary { background: var(--lime); color: var(--dark); height: 54px; border-radius: 18px; box-shadow: 0 10px 30px rgba(143,209,122,.25); font-size: 16px; }
  .login .btn.soft { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.12); height: 50px; border-radius: 16px; }
  .login .link { color: #c9d1cb; font-size: 13.5px; text-align: center; height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
  .login .link b { color: var(--lime); font-weight: 600; }
  .login .codes { display: flex; gap: 8px; }
  .login .codes input { flex: 1; text-align: center; font-family: var(--display); font-size: 24px; padding: 0; }
  .soft-hero { border-radius: 24px; background: linear-gradient(160deg, #1f5a33, #174427 70%); color: #fff; padding: 20px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; box-shadow: 0 14px 34px rgba(31,90,51,.25); }
  .soft-hero::after { content: ''; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(143,209,122,.16); }
  .soft-hero b.t { font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.05; }
  .soft-hero p { margin: 0; font-size: 13.5px; color: #d7ead2; line-height: 1.5; }
  .exp { border-radius: 20px; }
  .fab { position: absolute; right: 18px; bottom: 100px; z-index: 9; height: 46px; padding: 0 16px 0 12px; border-radius: 23px; background: var(--dark); color: #fff; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; box-shadow: 0 10px 26px rgba(17,20,18,.3); }
  .card > .btn, .content > .btn, .inner > .btn, .sheet > .btn, .soft-hero > .btn, .field > .btn, .login .inner > .btn { flex: 0 0 auto; }
  .carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; gap: 12px; }
  .carousel::-webkit-scrollbar { display: none; }
  .carousel .slide { flex: 0 0 100%; scroll-snap-align: center; }
  .browser { flex: 1; display: flex; flex-direction: column; background: #f2f2f7; min-height: 0; }
  .browser .bar { background: #f9f9f9; border-bottom: 1px solid #d8d8dc; padding: 54px 12px 10px; display: flex; align-items: center; gap: 8px; }
  .browser .url { flex: 1; height: 36px; border-radius: 10px; background: #e9e9ee; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: #111; font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif; }
  .browser .done { color: #0a7cff; font-weight: 600; font-size: 15px; font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif; height: 36px; display: flex; align-items: center; padding: 0 4px; }
  .wix { flex: 1; overflow-y: auto; background: #fff; font-family: 'Helvetica Neue', Arial, sans-serif; color: #000; padding: 18px 18px 30px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: none; }
  .wix h3 { margin: 0; font-size: 17px; font-weight: 700; }
  .wix .sec { display: flex; flex-direction: column; gap: 10px; }
  .wix label { font-size: 12px; color: #444; display: flex; flex-direction: column; gap: 4px; }
  .wix input { height: 42px; border: 1px solid #c9c9c9; border-radius: 4px; padding: 0 12px; font-size: 15px; font-family: inherit; background: #fff; width: 100%; }
  .wix input:focus { outline: 2px solid #116dff; outline-offset: -1px; }
  .wix .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .wix .sum { background: #f6f6f6; border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
  .wix .sum .row { display: flex; justify-content: space-between; }
  .wix .paybtn { height: 48px; border-radius: 4px; background: #000; color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; width: 100%; }
  .wix .fine { font-size: 11.5px; color: #666; line-height: 1.5; }
  .wix .brand { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5e5e5; padding-bottom: 12px; }
  .wix .cards { display: flex; gap: 6px; }
  .wix .cards i { width: 32px; height: 20px; border-radius: 3px; border: 1px solid #ddd; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; font-style: normal; color: #333; background: #fafafa; }
  .gcell.past { opacity: .35; }
  .thumb-ex { width: 64px; height: 64px; border-radius: 14px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; position: relative; overflow: hidden; }
  .thumb-ex::after { content: ''; position: absolute; inset: 0; background: rgba(17,20,18,.25); }
  .thumb-ex span { position: relative; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; }
  input[type=range].qr { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; margin: 0; }
  input[type=range].qr::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--green) 0 var(--p, 50%), #e6e9e4 var(--p, 50%) 100%); }
  input[type=range].qr::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--green); box-shadow: 0 2px 8px rgba(20,24,26,.18); margin-top: -11px; }
  input[type=range].qr::-moz-range-track { height: 6px; border-radius: 6px; background: #e6e9e4; }
  input[type=range].qr::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--green); }
  input[type=range].qr::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--green); box-shadow: 0 2px 8px rgba(20,24,26,.18); }
  .who { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(20,24,26,.06); border-radius: 18px; padding: 8px 10px 8px 8px; }
  .who .opt { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 6px; border-radius: 20px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
  .who .opt.on { background: var(--green-bg); color: var(--green); }

  .content .card.list .lrow .tm b { font-family: var(--display); }
  .gcell.gym { background: #eef2ee; color: #2f4a36; } .gcell.gym small { color: #4d6a55; }
  .coachbar { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background: var(--dark); color:#fff; font-size:13px; flex: 0 0 auto; }
  .coachbar button { height:30px; padding:0 12px; border-radius:15px; background: var(--lime); color:#111412; font-weight:700; font-size:12.5px; }
  .login .codes { justify-content: space-between; gap: 10px; }
  .login .codes input { flex: 1 1 0; min-width: 0; width: 100%; height: 58px; border-radius: 14px; font-size: 26px; }
  /* ---------- the real app: full viewport, no demo stage ---------- */
  html, body { background: var(--bg); height: 100%; overscroll-behavior: none; }
  body { min-height: 100%; margin: 0; }
  .stage, .stage-head, .stage-btn, .demo { display: none !important; }

  .phone {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
  }

  /* the notch, the status bar and the home bar */
  .hdr { padding-top: max(54px, calc(env(safe-area-inset-top) + 16px)); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .login { padding-top: env(safe-area-inset-top); }
  .login .inner { padding-bottom: max(34px, calc(env(safe-area-inset-bottom) + 18px)); }
  .content { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  .content.nodock { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .dockwrap { bottom: max(18px, calc(env(safe-area-inset-bottom) + 6px)); left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); }
  .sheet { padding-bottom: max(34px, calc(env(safe-area-inset-bottom) + 20px)); }
  .toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
  .timer { bottom: calc(100px + env(safe-area-inset-bottom)); }
  .compose { padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 6px)); }
  .browser { padding-top: env(safe-area-inset-top); }

  /* The 54px above the logo is room for a phone's clock and notch. In a browser
     tab, on a laptop or on a phone, nothing sits over the page, so that room is
     empty space we are charging the member for. Open in a tab the bar is only
     as tall as it needs to be; added to the home screen it keeps the full inset
     and the phone is untouched. A browser that does not know display-mode keeps
     what it has today, which is the safe way round. */
  @media all and (display-mode: browser) {
    .hdr { padding-top: max(16px, calc(env(safe-area-inset-top) + 16px)); }
  }

  /* on a wide screen it still reads as an app, centred, not a floating handset */
  @media (min-width: 560px) {
    body { background: var(--page); }
    .phone { max-width: 460px; margin: 0 auto; box-shadow: 0 0 0 1px rgba(20,24,26,.06); }
  }

  /* nothing here should feel like a web page */
  .content { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

  /* the sign in screen */
  .login .btn.usc { background: var(--lime); color: var(--dark); height: 56px; border-radius: 18px; font-size: 16px; font-weight: 700; box-shadow: 0 10px 30px rgba(143,209,122,.25); }
  .login .foot { color: #7a827d; font-size: 12px; text-align: center; line-height: 1.5; }

  /* a plain "we have nothing for you here yet" block, in our own voice */
  .nothing { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
  .nothing b { font-size: 15px; }
  .nothing span { font-size: 13px; color: var(--muted); line-height: 1.5; }

  /* the very first paint, before the API answers */
  .boot { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--dark); color: #fff; padding: 24px; }
  .boot img { height: 34px; width: auto; opacity: .9; }
  .boot span { font-size: 13px; color: #a9b3ab; }
  .boot .spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--lime); animation: spin .8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* the exercise clips, out of R2 */
  .thumb-ex img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .thumb-ex.blank { background: var(--green-bg); border: 1px solid #d8e4d4; }
  .thumb-ex.blank::after { display: none; }
  .thumb-ex span.q { background: transparent; }
  .thumb-ex.noclip span { display: none; }
  .thumb-ex.noclip.blank span.q { display: flex; opacity: .5; }
  .thumb-ex.noclip:not(.blank) span.q { display: none; }
  .dayb .dots i { background: var(--green); }
  .demobar { margin-bottom: 2px; }

/* ---------- how an exercise is recorded (19 Sep 2026) ---------- */
.bdot { display: inline-block; flex: 0 0 auto; border-radius: 50%; border: 1px solid rgba(20,24,26,.14); vertical-align: middle; }
.bdot + .bdot { margin-left: -4px; }
.setrow .bandpick { flex: 1.4; min-width: 0; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; font-weight: 600; font-size: 13px; color: var(--ink); }
.setrow .bandpick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setrow .bandpick .muted { font-weight: 600; font-size: 15px; color: #a3aaa5; }
.setrow.done .bandpick { background: var(--bg); color: var(--muted); }
.setrow .p .bdot { width: 11px; height: 11px; }
.setrow.rec3 { gap: 7px; }
.setrow.rec3 .p { width: 56px; }
.setrow.rec3 input { font-size: 15px; }

/* ---------- our own sign-in screen (19 Sep) ---------- */
.login { overflow-y: auto; }
.login .siform { display: flex; flex-direction: column; gap: 14px; }
.login .siform > .btn { flex: 0 0 auto; }
.login .sipw { position: relative; }
.login .sipw input { padding-right: 74px; }
.login .sishow { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 40px; padding: 0 12px; border-radius: 12px; color: #c9d1cb; font-size: 13.5px; font-weight: 600; background: transparent; }
.login .sior { display: flex; align-items: center; gap: 10px; color: #7a827d; font-size: 12px; margin: -6px 0; }
.login .sior span { flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.login .btn.sigoogle { flex: 0 0 auto; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); height: 50px; border-radius: 16px; text-decoration: none; font-size: 15px; }
.login .foot a { color: #c9d1cb; text-decoration: underline; }
.login .codes.six { gap: 6px; }
.login .codes.six input { height: 54px; font-size: 24px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; }
.login .codes.six input:focus { border-color: var(--lime); outline: none; }
.login .btn:disabled { cursor: default; }

/* ---------- round fourteen, 21 Sep 2026: the one to one ---------- */
/* The session on a booking sheet is behind a control now, so the booking is
   what a thumb reaches first. `[hidden]` is spelled out because a display rule
   further up would otherwise win over it. */
.r14sess { display: flex; flex-direction: column; gap: 10px; }
.r14sess .btn { justify-content: center; }
/* `.r14sess .r14sessbody { display: block }` used to sit under this and it is
   why the session showed through the closed control the first time: two
   classes and one class plus an attribute are the same specificity, so the
   later rule won and `hidden` did nothing. There is no display rule on the
   body at all now, because a div is a block already and the only thing that
   needed saying is what happens when it is shut. */
.r14sess .r14sessbody[hidden] { display: none; }

/* ==========================================================================
   Round thirty one, 23 Sep 2026. The home screen app.
   ==========================================================================
   Zac moved off Chrome and onto the icon on his home screen, and the first
   thing he said was that the bottom of the screen is wrong. In a browser tab
   the chrome at the bottom covers the home indicator, so nothing we draw ever
   met it. Added to the home screen there is no chrome: the page owns the whole
   glass, including the 34px strip the indicator lives in.

   THE INSETS BECOME VARIABLES, and that is the only reason this block repeats
   rules that already exist above. `env(safe-area-inset-*)` cannot be given a
   value from anywhere, so on a laptop it is always zero and a standalone phone
   can never be checked before it is in somebody's hand. Through a variable it
   can: `--safe-bottom` falls back to the real inset and a test can set it.
   Nothing about a real phone changes, because the fallback IS the inset.       */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
.hdr { padding-top: max(54px, calc(var(--safe-top) + 16px));
  padding-left: max(20px, var(--safe-left)); padding-right: max(20px, var(--safe-right)); }
.login { padding-top: var(--safe-top); }
.login .inner { padding-bottom: max(34px, calc(var(--safe-bottom) + 18px)); }
.content { padding-left: max(20px, var(--safe-left)); padding-right: max(20px, var(--safe-right));
  padding-bottom: calc(120px + var(--safe-bottom)); }
.content.nodock { padding-bottom: calc(28px + var(--safe-bottom)); }
.sheet { padding-bottom: max(34px, calc(var(--safe-bottom) + 20px)); }
.toast { bottom: calc(100px + var(--safe-bottom)); }
.timer { bottom: calc(100px + var(--safe-bottom)); }
.compose { padding-bottom: max(14px, calc(var(--safe-bottom) + 6px)); }
.browser { padding-top: var(--safe-top); }
@media all and (display-mode: browser) {
  .hdr { padding-top: max(16px, calc(var(--safe-top) + 16px)); }
}

/* The floating button sat at a flat 100px off the bottom, which is measured
   from the glass rather than from the app. On a phone with a home indicator it
   is 34px lower than it looks and it lands on the dock. */
.fab { bottom: calc(100px + var(--safe-bottom)); }

/* THE DOCK, AND THE STRIP OF PAGE UNDER IT. The dock floats 18px off the
   bottom, so between it and the edge of the glass there is a band of the page
   showing through. In a tab that band is behind the browser's own bar and
   nobody ever saw it. On the home screen it is the home indicator, and what
   shows through it is the session scrolling past, cut off mid row.

   So the wrap now reaches the bottom edge and holds the gap as padding, and a
   short fade under it takes the page to the page's own colour before the
   indicator. The dock has not moved by a pixel: the same gap, measured the
   same way, held a different way round.                                       */
.dockwrap { bottom: 0; left: max(14px, var(--safe-left)); right: max(14px, var(--safe-right));
  padding-bottom: max(18px, calc(var(--safe-bottom) + 6px)); }
.dockwrap::before { content: ''; position: absolute; left: -22px; right: -22px; bottom: 0; top: -18px;
  background: linear-gradient(180deg, rgba(246,247,244,0) 0%, var(--bg) 46%, var(--bg) 100%);
  pointer-events: none; }
.dock { position: relative; }

/* THE FRAME IS THE GLASS (round 31, the top item). On the home screen of an
   iPhone the page is drawn under the status bar, but iOS measures 100vh,
   100dvh and 100% one status bar short, so everything stopped about 43pt
   above the bottom edge and the strip under it was the html background. The
   script at the top of index.html measures the glass on an iPhone added to
   the home screen and hands it over as --app-h; `html.r31sa` is set there
   too. Anywhere --app-h is not set, 100lvh answers, which is the tallest
   the viewport ever gets and never shorter than what was there. Round twenty
   seven's keyboard fit writes an inline height while the keyboard is up and
   takes it off after, so it still wins while it is needed and hands back here. */
html.r31sa, html.r31sa body { height: var(--app-h, 100lvh); min-height: 100%; }
html.r31sa .phone { height: var(--app-h, 100lvh); }

/* Until the week has come in the screen is the dark boot screen, so the page
   behind it is dark too: a residual gap never reads as a light bar under it. */
html.r31boot, html.r31boot body { background: #0f1512; }

/* THE DOCK IS A TAB BAR on the home screen. Zac: the banner at the bottom
   should sit in line with the bottom of the page. Full width, flat to the
   bottom edge, its own padding carrying the home indicator, and no page
   showing beneath it. In a browser tab it stays the floating one. */
html.r31sa .dockwrap { left: 0; right: 0; bottom: 0; padding-bottom: 0; }
html.r31sa .dockwrap::before { display: none; }
html.r31sa .dock { height: auto; border-radius: 22px 22px 0 0; border: 0;
  border-top: 1px solid rgba(20,24,26,.07); background: rgba(255,255,255,.96);
  padding: 6px max(10px, var(--safe-left)) calc(6px + var(--safe-bottom)) max(10px, var(--safe-right));
  box-shadow: 0 -8px 24px rgba(20,24,26,.07); }
html.r31sa .content { padding-bottom: calc(100px + var(--safe-bottom)); }
html.r31sa .content.nodock { padding-bottom: calc(28px + var(--safe-bottom)); }
html.r31sa .toast, html.r31sa .timer { bottom: calc(86px + var(--safe-bottom)); }
html.r31sa .fab { bottom: calc(86px + var(--safe-bottom)); }