:root {
      --bg: #060610;
      --bg-2: #0b0b1c;
      --glass: rgba(18, 20, 45, .54);
      --glass-strong: rgba(16, 18, 42, .78);
      --line: rgba(255, 255, 255, .10);
      --line-strong: rgba(255, 255, 255, .18);
      --text: #f6f7ff;
      --muted: #9ea6c8;
      --cyan: #62e8ff;
      --blue: #6e8bff;
      --purple: #a879ff;
      --violet: #7557ff;
      --pink: #ff7bd5;
      --green: #63f5c0;
      --danger: #ff748f;
      --warning: #ffd26f;
      --shadow: 0 24px 80px rgba(0, 0, 0, .34);
      --radius-xl: 30px;
      --radius-lg: 24px;
      --radius-md: 18px;
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(110, 139, 255, .18), transparent 26%),
        radial-gradient(circle at 82% 12%, rgba(168, 121, 255, .15), transparent 24%),
        radial-gradient(circle at 55% 85%, rgba(98, 232, 255, .08), transparent 31%),
        linear-gradient(145deg, #05050c 0%, #080817 46%, #050510 100%);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
    }

    button, input, textarea { font: inherit; }
    button { color: inherit; }
    button:focus-visible, input:focus-visible, textarea:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
    }

    .space-layer, .space-layer::before, .space-layer::after {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -3;
    }
    .space-layer {
      will-change: background-position;
      transform: translateZ(0);
      background-image:
        radial-gradient(circle, rgba(255,255,255,.82) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(155,185,255,.6) 0 1px, transparent 1.4px);
      background-size: 98px 98px, 161px 161px;
      background-position: 0 0, 31px 42px;
      opacity: .34;
      animation: drift 28s linear infinite;
    }
    .space-layer::before {
      content: "";
      background-image: radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.7px);
      background-size: 223px 223px;
      background-position: 77px 17px;
      opacity: .48;
      animation: twinkle 4.5s ease-in-out infinite alternate;
    }
    .space-layer::after {
      content: "";
      will-change: transform;
      transform: translateZ(0);
      inset: -15%;
      background: conic-gradient(from 180deg at 50% 50%, transparent, rgba(98,232,255,.025), transparent, rgba(168,121,255,.04), transparent);
      filter: blur(34px);
      animation: rotateNebula 34s linear infinite;
    }
    @keyframes drift { to { background-position: 98px 98px, -130px 203px; } }
    @keyframes twinkle { from { opacity: .18; } to { opacity: .58; } }
    @keyframes rotateNebula { to { transform: rotate(360deg); } }

    .app-shell {
      width: min(1280px, 100%);
      margin: 0 auto;
      padding: 18px 24px calc(108px + var(--safe-bottom));
    }

    .topbar {
      min-height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 24px;
    }
    .brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
    .brand-mark {
      width: 48px;
      height: 48px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      position: relative;
      background: linear-gradient(145deg, rgba(98,232,255,.24), rgba(117,87,255,.28));
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 40px rgba(117,87,255,.24);
      overflow: hidden;
    }
    .brand-mark::before {
      content: "";
      width: 14px;
      height: 14px;
      border: 2px solid var(--cyan);
      border-radius: 50%;
      box-shadow: 0 0 18px var(--cyan), 16px 10px 0 -5px var(--purple), -12px -8px 0 -4px var(--pink);
    }
    .brand-copy { min-width: 0; }
    .brand-copy strong { display: block; font-size: 15px; letter-spacing: .15em; direction: ltr; text-align: right; }
    .brand-copy span { color: var(--muted); font-size: 12px; }

    .top-actions { display: flex; align-items: center; gap: 10px; }
    .sync-pill, .week-pill {
      min-height: 42px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.045);
      backdrop-filter: blur(18px) saturate(145%);
      -webkit-backdrop-filter: blur(18px) saturate(145%);
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }
    .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
    .sync-pill.saving .sync-dot { background: var(--warning); box-shadow: 0 0 14px var(--warning); animation: pulse 1s infinite; }
    .sync-pill.error .sync-dot { background: var(--danger); box-shadow: 0 0 14px var(--danger); }
    @keyframes pulse { 50% { opacity: .35; transform: scale(.78); } }

    .view { display: none; animation: viewIn .35s ease; }
    .view.active { display: block; contain: layout style; }
    @keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

    .glass {
      position: relative;
      background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        var(--glass);
      border: 1px solid var(--line);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10), var(--shadow);
      backdrop-filter: blur(26px) saturate(145%);
      -webkit-backdrop-filter: blur(26px) saturate(145%);
      overflow: hidden;
    }
    .glass::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(120deg, rgba(255,255,255,.08), transparent 24%, transparent 72%, rgba(98,232,255,.035));
      opacity: .78;
    }
    .glass > * { position: relative; z-index: 1; }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.65fr) minmax(280px, .72fr);
      gap: 18px;
    }
    .quest-card {
      min-height: 360px;
      border-radius: var(--radius-xl);
      padding: 34px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .quest-card::after {
      content: "";
      position: absolute;
      width: 330px;
      height: 330px;
      left: -80px;
      bottom: -160px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(98,232,255,.21), rgba(117,87,255,.07) 45%, transparent 70%);
      filter: blur(4px);
      pointer-events: none;
    }
    .eyebrow {
      margin: 0 0 10px;
      color: var(--cyan);
      font-size: 11px;
      letter-spacing: .18em;
      font-weight: 800;
      direction: ltr;
      text-align: right;
    }
    .quest-title {
      margin: 0;
      max-width: 760px;
      font-size: clamp(30px, 4.4vw, 64px);
      line-height: 1.08;
      letter-spacing: -.035em;
      font-weight: 780;
    }
    .gradient-text {
      background: linear-gradient(90deg, #fff, #bfefff 38%, #b99aff 74%, #ffb8e6);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .quest-sub {
      margin: 18px 0 0;
      max-width: 720px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.8;
    }
    .challenge-line {
      margin-top: 28px;
      padding: 17px 18px;
      border-radius: 19px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(5,7,20,.34);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }
    .challenge-copy { min-width: 0; }
    .challenge-copy small { display: block; color: var(--muted); margin-bottom: 5px; }
    .challenge-copy strong { font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
    .icon-btn {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      border-radius: 15px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.06);
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: .2s ease;
    }
    .icon-btn:hover { transform: translateY(-2px); border-color: var(--line-strong); background: rgba(255,255,255,.09); }

    .progress-card {
      border-radius: var(--radius-xl);
      padding: 28px;
      min-height: 360px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .ring-wrap { display: grid; place-items: center; padding: 10px 0 18px; }
    .progress-ring {
      --p: 0;
      width: 164px;
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: conic-gradient(var(--cyan) 0 calc(var(--p) * 1%), var(--purple) calc(var(--p) * 1%), rgba(255,255,255,.075) 0);
      box-shadow: 0 0 50px rgba(117,87,255,.16);
      position: relative;
    }
    .progress-ring::before {
      content: "";
      position: absolute;
      inset: 11px;
      border-radius: 50%;
      background: linear-gradient(145deg, #0a0b1c, #11132d);
      border: 1px solid rgba(255,255,255,.08);
    }
    .ring-value { position: relative; z-index: 1; text-align: center; }
    .ring-value strong { display: block; font-size: 38px; letter-spacing: -.04em; }
    .ring-value span { color: var(--muted); font-size: 11px; }
    .mini-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .mini-metric { padding: 14px; border-radius: 17px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); }
    .mini-metric span { color: var(--muted); font-size: 11px; display: block; margin-bottom: 5px; }
    .mini-metric strong { font-size: 20px; }

    .roadmap-card { margin-top: 18px; border-radius: var(--radius-xl); padding: 28px; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
    .section-head h2, .section-head h3 { margin: 0; font-size: 21px; }
    .section-head p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
    .status-badge { padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.04); font-size: 11px; white-space: nowrap; }

    .roadmap-scroll { overflow-x: auto; padding: 46px 4px 18px; scrollbar-width: none; }
    .roadmap-scroll::-webkit-scrollbar { display: none; }
    .roadmap {
      min-width: 780px;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      position: relative;
      gap: 10px;
    }
    .roadmap::before {
      content: "";
      position: absolute;
      top: 45px;
      right: 6.5%;
      left: 6.5%;
      height: 2px;
      background: linear-gradient(90deg, rgba(168,121,255,.2), rgba(98,232,255,.55), rgba(255,123,213,.22));
      box-shadow: 0 0 18px rgba(98,232,255,.2);
    }
    .road-node {
      border: 0;
      background: transparent;
      cursor: pointer;
      min-height: 150px;
      padding: 0 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .planet {
      width: 92px;
      height: 92px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      position: relative;
      background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(71,74,142,.18));
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: inset -10px -14px 24px rgba(0,0,0,.22), 0 0 26px rgba(117,87,255,.10);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .planet::after {
      content: "";
      position: absolute;
      width: 112px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid rgba(168,121,255,.26);
      transform: rotate(-11deg);
    }
    .road-node:hover .planet { transform: translateY(-5px) scale(1.03); }
    .road-node.today .planet { border-color: rgba(98,232,255,.62); box-shadow: inset -10px -14px 24px rgba(0,0,0,.2), 0 0 34px rgba(98,232,255,.2); }
    .road-node.full .planet { background: linear-gradient(145deg, rgba(99,245,192,.26), rgba(98,232,255,.13)); border-color: rgba(99,245,192,.7); }
    .road-node.partial .planet { background: linear-gradient(145deg, rgba(110,139,255,.25), rgba(168,121,255,.13)); }
    .road-node.missed .planet { background: linear-gradient(145deg, rgba(255,116,143,.13), rgba(70,60,105,.13)); }
    .planet-score { font-weight: 800; font-size: 18px; direction: ltr; }
    .node-copy { margin-top: 15px; text-align: center; }
    .node-copy strong { display: block; font-size: 13px; }
    .node-copy span { color: var(--muted); font-size: 11px; margin-top: 3px; display: block; }

    .traveler {
      position: absolute;
      top: -30px;
      left: 50%;
      width: 34px;
      height: 34px;
      transform: translate3d(-50%, 0, 0);
      border-radius: 50%;
      background: linear-gradient(145deg, #c9f7ff, #8f7dff);
      box-shadow: 0 0 22px rgba(98,232,255,.8), 0 0 44px rgba(168,121,255,.45);
      animation: floatHero 2.4s ease-in-out infinite;
      will-change: transform;
    }
    .traveler::before {
      content: "";
      position: absolute;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #11152c;
      top: 7px;
      left: 12px;
      box-shadow: inset 2px 0 0 var(--cyan);
    }
    .traveler::after {
      content: "";
      position: absolute;
      width: 14px;
      height: 9px;
      border-radius: 9px 9px 5px 5px;
      background: #161a39;
      bottom: 6px;
      left: 10px;
    }
    @keyframes floatHero { 50% { transform: translate3d(-50%, -6px, 0); } }

    .focus-grid { margin-top: 18px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; }
    .focus-card, .signal-card { border-radius: var(--radius-lg); padding: 24px; min-height: 185px; }
    .focus-main { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
    .focus-orb {
      width: 66px;
      height: 66px;
      flex: 0 0 66px;
      border-radius: 22px;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, rgba(98,232,255,.22), rgba(168,121,255,.22));
      border: 1px solid rgba(255,255,255,.14);
      font-size: 24px;
      box-shadow: 0 0 30px rgba(117,87,255,.15);
    }
    .focus-text { min-width: 0; flex: 1; }
    .focus-text small { color: var(--muted); }
    .focus-text h3 { margin: 6px 0 5px; font-size: 19px; overflow-wrap: anywhere; }
    .focus-text p { margin: 0; color: var(--muted); font-size: 12px; }
    .primary-btn {
      min-height: 48px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 16px;
      padding: 0 19px;
      cursor: pointer;
      background: linear-gradient(135deg, rgba(98,232,255,.24), rgba(117,87,255,.34));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 10px 30px rgba(117,87,255,.15);
      font-weight: 750;
      transition: transform .2s ease, filter .2s ease;
    }
    .primary-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
    .signal-card { display: flex; flex-direction: column; justify-content: space-between; }
    .signal-card blockquote { margin: 12px 0; font-size: 19px; line-height: 1.65; font-weight: 700; }
    .signal-card span { color: var(--muted); font-size: 12px; }

    /* DAY VIEW */
    .day-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; margin-bottom: 18px; }
    .day-title h1 { margin: 0; font-size: clamp(31px, 5vw, 58px); letter-spacing: -.04em; }
    .day-title p { margin: 10px 0 0; color: var(--muted); }
    .day-score-box { min-width: 170px; padding: 18px 20px; border-radius: 22px; text-align: center; }
    .day-score-box strong { display: block; font-size: 34px; direction: ltr; }
    .day-score-box span { color: var(--muted); font-size: 11px; }

    .day-tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
    .day-tabs::-webkit-scrollbar { display: none; }
    .day-tab {
      min-width: 92px;
      min-height: 66px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.035);
      cursor: pointer;
      transition: .2s ease;
    }
    .day-tab strong { display: block; font-size: 13px; }
    .day-tab span { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
    .day-tab.active { background: linear-gradient(145deg, rgba(98,232,255,.16), rgba(117,87,255,.21)); border-color: rgba(98,232,255,.4); box-shadow: 0 0 26px rgba(98,232,255,.08); }

    .mission-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr); gap: 18px; }
    .stack { display: grid; gap: 18px; align-content: start; }
    .task-card { border-radius: var(--radius-lg); padding: 24px; }
    .task-card.primary-mission { background: linear-gradient(145deg, rgba(98,232,255,.085), rgba(168,121,255,.055)), var(--glass); }
    .card-kicker { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .16em; direction: ltr; text-align: right; }
    .task-card h3 { margin: 8px 0 4px; font-size: 20px; }
    .task-card .desc { margin: 0 0 18px; color: var(--muted); font-size: 12px; line-height: 1.65; }

    .task-row {
      min-height: 62px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 17px;
      border: 1px solid rgba(255,255,255,.07);
      background: rgba(4,6,18,.30);
      margin-top: 10px;
      transition: .2s ease;
    }
    .task-row.done { background: rgba(99,245,192,.055); border-color: rgba(99,245,192,.15); }
    .task-row.done .task-input { text-decoration: line-through; color: #9199b5; }
    .check-btn {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      border-radius: 13px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.04);
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: .2s ease;
    }
    .check-btn::after { content: ""; width: 9px; height: 5px; border-left: 2px solid transparent; border-bottom: 2px solid transparent; transform: rotate(-45deg) translate(1px,-1px); }
    .check-btn.checked { background: linear-gradient(145deg, var(--green), var(--cyan)); border-color: transparent; box-shadow: 0 0 22px rgba(99,245,192,.25); }
    .check-btn.checked::after { border-color: #07131b; }
    .check-btn:disabled { opacity: .28; cursor: not-allowed; }
    .task-input, .note-input {
      width: 100%;
      color: var(--text);
      border: 0;
      background: transparent;
      outline: none;
      resize: none;
    }
    .task-input { height: 40px; font-size: 14px; font-weight: 650; }
    .task-input::placeholder, .note-input::placeholder { color: #69708f; }
    .move-btn {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      border-radius: 13px;
      border: 0;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 18px;
      transition: .2s ease;
    }
    .move-btn:hover { background: rgba(255,255,255,.06); color: var(--cyan); }
    .move-btn:disabled { opacity: .22; cursor: not-allowed; }

    .habit-list { display: grid; gap: 10px; margin-top: 18px; }
    .habit-row {
      min-height: 58px;
      border-radius: 17px;
      border: 1px solid rgba(255,255,255,.075);
      background: rgba(4,6,18,.28);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 9px 12px 9px 16px;
    }
    .habit-row.done { border-color: rgba(98,232,255,.20); background: linear-gradient(90deg, rgba(98,232,255,.06), rgba(168,121,255,.035)); }
    .habit-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
    .habit-index { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 11px; display: grid; place-items: center; color: var(--muted); background: rgba(255,255,255,.05); font-size: 10px; direction: ltr; }
    .habit-name strong { font-size: 13px; overflow-wrap: anywhere; }
    .habit-toggle { min-width: 58px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.05); cursor: pointer; padding: 4px; transition: .25s ease; }
    .habit-toggle span { width: 26px; height: 26px; border-radius: 50%; display: block; background: #888fa9; transition: .25s ease; }
    .habit-toggle.on { background: linear-gradient(90deg, rgba(98,232,255,.4), rgba(168,121,255,.5)); border-color: rgba(98,232,255,.28); }
    .habit-toggle.on span { transform: translateX(-21px); background: #f7ffff; box-shadow: 0 0 15px rgba(98,232,255,.55); }

    .note-input { min-height: 94px; padding-top: 12px; line-height: 1.8; }
    .subtle-btn {
      min-height: 42px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.045);
      padding: 0 14px;
      cursor: pointer;
      color: var(--muted);
      transition: .2s ease;
    }
    .subtle-btn:hover { color: var(--text); background: rgba(255,255,255,.07); }

    .orbit-card { border-radius: var(--radius-lg); padding: 24px; }
    .orbit-section + .orbit-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
    .orbit-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .orbit-title strong { font-size: 14px; }
    .orbit-title span { color: var(--muted); font-size: 10px; }
    .orbit-list { display: grid; gap: 8px; margin-top: 12px; }
    .orbit-item { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); }
    .orbit-copy { flex: 1; min-width: 0; }
    .orbit-copy strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
    .orbit-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
    .tiny-btn { min-height: 34px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.05); padding: 0 10px; cursor: pointer; font-size: 10px; }
    .tiny-btn.accent { border-color: rgba(98,232,255,.2); color: var(--cyan); }
    .empty-state { padding: 20px 12px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.7; }

    /* FOCUS / POMODORO + PROJECTS */
    .focus-workspace { display: grid; grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr); gap: 18px; align-items: start; }
    .pomo-card, .project-card, .achievement-card { border-radius: var(--radius-xl); padding: 26px; }
    .pomo-card { min-height: 650px; display: flex; flex-direction: column; }
    .focus-stack { display: grid; gap: 18px; align-content: start; }
    .pomo-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
    .pomo-head h1 { margin: 0; font-size: clamp(28px, 4vw, 48px); letter-spacing: -.04em; }
    .pomo-head p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
    .phase-pill { padding: 9px 12px; border: 1px solid rgba(98,232,255,.22); border-radius: 999px; color: var(--cyan); background: rgba(98,232,255,.06); font-size: 10px; font-weight: 800; letter-spacing: .12em; direction: ltr; white-space: nowrap; }
    .phase-pill.break { color: var(--purple); border-color: rgba(168,121,255,.25); background: rgba(168,121,255,.07); }
    .pomo-dial-wrap { display: grid; place-items: center; padding: 28px 0 24px; }
    .pomodoro-dial {
      --p: 0;
      width: min(300px, 72vw);
      aspect-ratio: 1;
      border-radius: 50%;
      position: relative;
      display: grid;
      place-items: center;
      background: conic-gradient(var(--cyan) 0 calc(var(--p) * 1%), var(--purple) calc(var(--p) * 1%), rgba(255,255,255,.065) 0);
      box-shadow: 0 0 70px rgba(98,232,255,.10), 0 0 100px rgba(117,87,255,.08);
      transform: translateZ(0);
    }
    .pomodoro-dial.break { background: conic-gradient(var(--purple) 0 calc(var(--p) * 1%), var(--pink) calc(var(--p) * 1%), rgba(255,255,255,.065) 0); }
    .pomodoro-dial::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle at 38% 28%, rgba(98,232,255,.08), transparent 30%), linear-gradient(145deg, #090a1a, #11132d); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
    .pomo-time-copy { position: relative; z-index: 1; text-align: center; min-width: 0; padding: 20px; }
    .pomo-time-copy small { display: block; color: var(--cyan); font-size: 10px; letter-spacing: .16em; font-weight: 800; direction: ltr; }
    .pomo-time-copy strong { display: block; margin: 7px 0; font-size: clamp(52px, 8vw, 78px); line-height: 1; letter-spacing: -.06em; direction: ltr; font-variant-numeric: tabular-nums; }
    .pomo-time-copy span { display: block; color: var(--muted); font-size: 11px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pomo-controls { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; }
    .pomo-main-btn { min-height: 54px; border: 1px solid rgba(255,255,255,.15); border-radius: 17px; cursor: pointer; background: linear-gradient(135deg, rgba(98,232,255,.25), rgba(117,87,255,.38)); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 14px 36px rgba(117,87,255,.13); font-weight: 800; }
    .pomo-control-btn { width: 54px; min-height: 54px; border-radius: 17px; border: 1px solid var(--line); background: rgba(255,255,255,.045); cursor: pointer; color: var(--muted); }
    .pomo-settings { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
    .pomo-presets { display: flex; gap: 8px; margin-bottom: 12px; }
    .preset-btn { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.04); cursor: pointer; color: var(--muted); }
    .preset-btn.active { color: var(--text); border-color: rgba(98,232,255,.32); background: linear-gradient(145deg, rgba(98,232,255,.12), rgba(168,121,255,.11)); }
    .pomo-setting-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .time-field { display: block; padding: 11px 13px; border: 1px solid rgba(255,255,255,.07); border-radius: 15px; background: rgba(4,6,18,.28); }
    .time-field span { display: block; color: var(--muted); font-size: 9px; margin-bottom: 6px; }
    .time-field input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 18px; font-weight: 800; direction: ltr; }
    .project-select-label { display: block; margin-top: 12px; color: var(--muted); font-size: 9px; }
    .focus-select { width: 100%; min-height: 48px; margin-top: 7px; padding: 0 14px; color: var(--text); border: 1px solid var(--line); border-radius: 15px; background: rgba(8,10,28,.84); outline: none; }
    .focus-select option { background: #0b0c20; color: var(--text); }
    .project-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
    .project-head h2, .project-head h3 { margin: 0; }
    .project-head p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
    .project-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 3px 1px 9px; margin-top: 18px; scrollbar-width: none; }
    .project-tabs::-webkit-scrollbar { display: none; }
    .project-pill { flex: 0 0 auto; min-height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--muted); cursor: pointer; white-space: nowrap; }
    .project-pill.active { color: var(--text); border-color: rgba(98,232,255,.30); background: linear-gradient(145deg, rgba(98,232,255,.12), rgba(168,121,255,.15)); box-shadow: 0 0 24px rgba(98,232,255,.07); }
    .project-current { margin-top: 11px; padding: 15px; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: rgba(4,6,18,.26); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
    .project-current strong { display: block; font-size: 16px; overflow-wrap: anywhere; }
    .project-current span { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
    .project-task-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; margin-top: 15px; }
    .project-task-add input, .project-task-input { width: 100%; color: var(--text); border: 1px solid var(--line); background: rgba(255,255,255,.035); border-radius: 15px; outline: none; }
    .project-task-add input { min-height: 50px; padding: 0 15px; }
    .project-task-add button { min-width: 52px; min-height: 50px; border: 1px solid rgba(98,232,255,.22); border-radius: 15px; background: linear-gradient(145deg, rgba(98,232,255,.15), rgba(117,87,255,.22)); cursor: pointer; font-size: 20px; }
    .project-task-list, .project-archive-list, .achievement-list { display: grid; gap: 9px; margin-top: 14px; }
    .project-task-row { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: rgba(4,6,18,.27); }
    .project-task-input { min-height: 40px; padding: 0 12px; border-color: transparent; background: transparent; font-weight: 650; }
    .project-task-input:focus { border-color: rgba(98,232,255,.24); background: rgba(255,255,255,.025); }
    .project-task-delete { width: 38px; height: 38px; flex: 0 0 38px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; }
    .project-task-delete:hover { color: var(--danger); background: rgba(255,116,143,.06); }
    .archive-item, .achievement-item { padding: 13px 14px; border: 1px solid rgba(255,255,255,.065); border-radius: 15px; background: rgba(255,255,255,.03); }
    .archive-item strong, .achievement-item strong { display: block; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
    .archive-meta, .achievement-meta { margin-top: 6px; color: var(--muted); font-size: 9px; display: flex; flex-wrap: wrap; gap: 6px 10px; }
    .archive-meta b, .achievement-meta b { color: var(--cyan); font-weight: 650; }
    .project-empty { padding: 30px 14px; border: 1px dashed rgba(255,255,255,.10); border-radius: 18px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 15px; }
    .archive-loading { color: var(--muted); padding: 18px; text-align: center; font-size: 11px; }

    /* INSIGHTS */
    .insights-hero { border-radius: var(--radius-xl); padding: 30px; margin-bottom: 18px; }
    .insights-hero h1 { margin: 0; font-size: clamp(30px, 5vw, 58px); letter-spacing: -.04em; }
    .insights-hero p { color: var(--muted); max-width: 620px; line-height: 1.8; }
    .metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
    .metric-card { min-height: 126px; border-radius: 20px; padding: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
    .metric-card span { color: var(--muted); font-size: 11px; }
    .metric-card strong { display: block; margin-top: 13px; font-size: 29px; letter-spacing: -.04em; overflow-wrap: anywhere; }
    .metric-card small { color: var(--muted); font-size: 9px; }

    .habit-analytics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .habit-chart-card { border-radius: var(--radius-lg); padding: 22px; }
    .chart-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
    .chart-head h3 { margin: 0; font-size: 15px; }
    .chart-head span { color: var(--cyan); direction: ltr; font-weight: 800; }
    .sparkline { width: 100%; height: 110px; display: block; margin-top: 13px; overflow: visible; }
    .chart-days { display: grid; grid-template-columns: repeat(7, 1fr); color: var(--muted); font-size: 9px; text-align: center; direction: rtl; }
    .chart-foot { margin-top: 13px; color: var(--muted); font-size: 11px; line-height: 1.65; }

    /* CALENDAR */
    .calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; }
    .calendar-card { border-radius: var(--radius-xl); padding: 28px; }
    .calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
    .calendar-head h1 { margin: 0; font-size: 29px; }
    .cal-nav { display: flex; gap: 8px; }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
    .cal-weekday { color: var(--muted); font-size: 10px; text-align: center; padding: 8px 2px; }
    .cal-day {
      aspect-ratio: 1;
      min-height: 72px;
      border-radius: 17px;
      border: 1px solid rgba(255,255,255,.065);
      background: rgba(255,255,255,.025);
      padding: 9px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: default;
      transition: .2s ease;
      text-align: right;
    }
    button.cal-day { color: var(--text); cursor: pointer; }
    button.cal-day:hover { transform: translateY(-2px); border-color: rgba(98,232,255,.25); }
    .cal-day.blank { opacity: 0; pointer-events: none; }
    .cal-day.today { outline: 1px solid rgba(98,232,255,.58); outline-offset: 1px; }
    .cal-day.full { background: linear-gradient(145deg, rgba(99,245,192,.16), rgba(98,232,255,.08)); border-color: rgba(99,245,192,.28); }
    .cal-day.partial { background: linear-gradient(145deg, rgba(110,139,255,.17), rgba(168,121,255,.08)); border-color: rgba(110,139,255,.25); }
    .cal-day.missed { background: linear-gradient(145deg, rgba(255,116,143,.08), rgba(255,255,255,.02)); border-color: rgba(255,116,143,.15); }
    .cal-number { font-size: 12px; font-weight: 750; }
    .cal-score { font-size: 10px; color: var(--muted); direction: ltr; text-align: left; }
    .cal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
    .cal-day.full .cal-dot { background: var(--green); box-shadow: 0 0 10px rgba(99,245,192,.65); }
    .cal-day.partial .cal-dot { background: var(--blue); box-shadow: 0 0 10px rgba(110,139,255,.55); }
    .cal-day.missed .cal-dot { background: var(--danger); opacity: .65; }
    .calendar-side { display: grid; gap: 18px; align-content: start; }
    .legend-card, .month-stat-card { border-radius: var(--radius-lg); padding: 22px; }
    .legend-card h3, .month-stat-card h3 { margin: 0 0 15px; }
    .legend-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 12px; }
    .legend-swatch { width: 13px; height: 13px; border-radius: 5px; }
    .legend-swatch.full { background: var(--green); }
    .legend-swatch.partial { background: var(--blue); }
    .legend-swatch.missed { background: var(--danger); }
    .month-big { font-size: 42px; display: block; letter-spacing: -.05em; }
    .month-caption { color: var(--muted); font-size: 11px; }

    .bottom-nav {
      position: fixed;
      z-index: 50;
      bottom: calc(18px + var(--safe-bottom));
      left: 50%;
      transform: translateX(-50%);
      width: min(570px, calc(100% - 28px));
      min-height: 72px;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.13);
      background: rgba(8, 9, 24, .72);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 24px 70px rgba(0,0,0,.42);
      backdrop-filter: blur(28px) saturate(160%);
      -webkit-backdrop-filter: blur(28px) saturate(160%);
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      padding: 7px;
    }
    .nav-btn {
      border: 0;
      border-radius: 18px;
      background: transparent;
      cursor: pointer;
      color: var(--muted);
      min-width: 0;
      min-height: 56px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transition: .2s ease;
    }
    .nav-btn .nav-icon { font-size: 17px; line-height: 1; }
    .nav-btn span:last-child { font-size: 9px; }
    .nav-btn.active { color: var(--text); background: linear-gradient(145deg, rgba(98,232,255,.13), rgba(168,121,255,.17)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }

    .toast-stack { position: fixed; z-index: 100; top: 22px; left: 22px; width: min(380px, calc(100% - 44px)); display: grid; gap: 10px; pointer-events: none; }
    .toast {
      padding: 15px 17px;
      border-radius: 17px;
      border: 1px solid rgba(255,255,255,.13);
      background: rgba(12,14,34,.88);
      box-shadow: 0 18px 55px rgba(0,0,0,.38);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      animation: toastIn .35s ease, toastOut .35s ease 3.6s forwards;
    }
    .toast strong { display: block; font-size: 12px; margin-bottom: 4px; }
    .toast span { color: var(--muted); font-size: 11px; line-height: 1.6; }
    @keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
    @keyframes toastOut { to { opacity: 0; transform: translateY(-8px) scale(.98); } }

    .modal-shell {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(2,3,10,.68);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .modal-shell.open { display: flex; animation: fade .2s ease; }
    @keyframes fade { from { opacity: 0; } }
    .modal {
      width: min(540px, 100%);
      max-height: min(760px, 88vh);
      overflow-y: auto;
      border-radius: 28px;
      padding: 26px;
      background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)), rgba(12,14,34,.92);
      border: 1px solid rgba(255,255,255,.13);
      box-shadow: 0 40px 100px rgba(0,0,0,.5);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
    }
    .modal h2 { margin: 0; font-size: 24px; }
    .modal p { color: var(--muted); font-size: 12px; line-height: 1.7; }
    .modal-input {
      width: 100%;
      min-height: 52px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,.045);
      color: var(--text);
      padding: 13px 15px;
      margin-top: 10px;
      outline: none;
    }
    textarea.modal-input { min-height: 125px; resize: vertical; line-height: 1.7; }
    .modal-actions { display: flex; justify-content: flex-start; gap: 10px; margin-top: 20px; }
    .move-day-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 18px; }
    .move-day-option { min-height: 60px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.04); cursor: pointer; text-align: right; padding: 10px 14px; }
    .move-day-option strong { display: block; font-size: 12px; }
    .move-day-option span { color: var(--muted); font-size: 9px; }

    .loading-screen {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: #060610;
      display: grid;
      place-items: center;
      transition: opacity .5s ease, visibility .5s ease;
    }
    .loading-screen.hidden { opacity: 0; visibility: hidden; }
    .loader { text-align: center; }
    .loader-core { width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: radial-gradient(circle at 35% 30%, white 0 2px, var(--cyan) 3px, var(--violet) 35%, #0c0d23 70%); box-shadow: 0 0 55px rgba(117,87,255,.38); animation: loaderFloat 1.8s ease-in-out infinite; }
    .loader strong { font-size: 12px; letter-spacing: .16em; direction: ltr; display: block; }
    .loader span { display: block; color: var(--muted); margin-top: 8px; font-size: 10px; }
    @keyframes loaderFloat { 50% { transform: translateY(-8px) rotate(8deg); } }

    .particle { position: fixed; z-index: 80; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; animation: burst 1.15s ease-out forwards; }
    @keyframes burst { from { transform: translate(0,0) scale(1); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(.1); opacity: 0; } }

    @media (max-width: 960px) {
      .hero-grid, .focus-grid, .mission-layout, .calendar-layout, .focus-workspace { grid-template-columns: 1fr; }
      .progress-card { min-height: auto; }
      .metric-grid { grid-template-columns: repeat(2, 1fr); }
      .calendar-side { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 700px) {
      .app-shell { padding: 12px 14px calc(104px + var(--safe-bottom)); }
      .topbar { margin-bottom: 15px; min-height: 58px; }
      .brand-mark { width: 43px; height: 43px; border-radius: 15px; }
      .brand-copy strong { font-size: 12px; }
      .brand-copy span { font-size: 10px; }
      .week-pill { display: none; }
      .sync-pill { padding: 0 11px; min-height: 39px; }
      .sync-pill .sync-text { display: none; }
      .quest-card, .roadmap-card, .insights-hero, .calendar-card { border-radius: 25px; padding: 21px; }
      .quest-card { min-height: 390px; }
      .quest-title { font-size: 38px; }
      .quest-sub { font-size: 13px; line-height: 1.72; }
      .challenge-line { align-items: flex-start; }
      .roadmap-card { padding-left: 14px; padding-right: 14px; }
      .focus-card, .signal-card, .task-card, .orbit-card, .habit-chart-card, .legend-card, .month-stat-card { border-radius: 21px; padding: 19px; }
      .focus-main { align-items: flex-start; flex-wrap: wrap; }
      .focus-text { min-width: calc(100% - 84px); }
      .focus-main .primary-btn { width: 100%; }
      .day-top { grid-template-columns: 1fr; }
      .day-score-box { min-width: 0; text-align: right; display: flex; align-items: baseline; gap: 9px; }
      .day-tabs { margin-left: -14px; margin-right: -14px; padding: 0 14px; }
      .habit-analytics { grid-template-columns: 1fr; }
      .metric-grid { grid-template-columns: repeat(2, 1fr); }
      .metric-card { min-height: 108px; }
      .metric-card strong { font-size: 23px; }
      .calendar-card { padding: 16px; }
      .cal-grid { gap: 5px; }
      .cal-day { min-height: 0; padding: 7px; border-radius: 13px; }
      .cal-score { display: none; }
      .calendar-side { grid-template-columns: 1fr; }
      .calendar-head h1 { font-size: 22px; }
      .move-day-list { grid-template-columns: 1fr; }
      .pomo-card, .project-card, .achievement-card { border-radius: 21px; padding: 19px; }
      .pomo-card { min-height: 0; }
      .pomo-dial-wrap { padding: 22px 0 20px; }
      .pomodoro-dial { width: min(250px, 76vw); }
      .pomo-time-copy strong { font-size: 58px; }
      .pomo-controls { grid-template-columns: 1fr 50px 50px; }
      .pomo-control-btn { width: 50px; min-height: 50px; }
      .pomo-setting-grid { grid-template-columns: 1fr 1fr; }
      .project-head { align-items: center; }
      .project-task-add { grid-template-columns: minmax(0, 1fr) 50px; }
      .focus-select, .project-task-add input, .project-task-input, .time-field input, .modal-input, .note-input, .task-input { font-size: 16px; }
      .bottom-nav { width: calc(100% - 20px); bottom: calc(10px + var(--safe-bottom)); border-radius: 21px; padding: 5px; }
      .nav-btn { min-height: 54px; border-radius: 16px; gap: 4px; }
      .nav-btn .nav-icon { font-size: 16px; }
      .nav-btn span:last-child { font-size: 8px; }
      .toast-stack { top: 14px; left: 14px; width: calc(100% - 28px); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    }
  

/* V4 — Cloudflare/PWA performance layer. Visual identity stays the same. */
.access-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(4, 4, 13, .72);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.access-gate.open { opacity: 1; visibility: visible; pointer-events: auto; }
.access-card { width: min(460px, 100%); padding: 30px; text-align: center; }
.access-card h2 { margin: 8px 0 10px; font-size: clamp(26px, 5vw, 38px); }
.access-card p:not(.eyebrow) { color: var(--muted); line-height: 1.8; margin: 0 0 18px; }
.access-orb {
  width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 30px; color: var(--cyan); background: radial-gradient(circle at 35% 30%, rgba(98,232,255,.22), rgba(117,87,255,.16) 55%, rgba(8,8,24,.85));
  border: 1px solid rgba(98,232,255,.32); box-shadow: 0 0 48px rgba(117,87,255,.28), inset 0 1px 0 rgba(255,255,255,.2);
}
.access-enter { width: 100%; margin-top: 12px; min-height: 48px; }
.access-error { min-height: 22px; color: var(--danger); font-size: 13px; margin-top: 8px; }

html.app-hidden .space-layer,
html.app-hidden .space-layer::before,
html.app-hidden .space-layer::after { animation-play-state: paused !important; }

.view:not(.active) { display: none !important; }
.glass, .roadmap-card, .day-card, .focus-card, .signal-card, .progress-card, .quest-card { contain: layout paint style; }

@supports (content-visibility: auto) {
  .project-panel, .archive-panel, .insight-card, .calendar-card { content-visibility: auto; contain-intrinsic-size: 1px 520px; }
}

@media (max-width: 720px) {
  .space-layer { animation-duration: 56s; opacity: .30; }
  .space-layer::before { animation-duration: 7s; }
  .space-layer::after { filter: blur(20px); animation-duration: 72s; opacity: .72; }
  .glass {
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
  }
  .access-gate { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .access-card { padding: 24px 20px; border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .space-layer, .space-layer::before, .space-layer::after { animation: none !important; }
}