:root { --ink: #141528; --ink-2: #1f2138; --cream: #f5f1e8; --muted: #a6a2bd; --gold: #e8b873; --gold-light: #f5d49a; --teal: #5fb8b0; --r-lg: 24px; --r-md: 18px; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: var(--cream); background: var(--ink); }
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: radial-gradient(900px 520px at 10% 105%, rgba(95,184,176,.1), transparent 58%), linear-gradient(180deg,#1a1b36,#10111f); } button, input, textarea, select { font: inherit; } button { color: inherit; cursor: pointer; } #stars { position: fixed; inset: 0; pointer-events: none; } .app { position: relative; z-index: 1; max-width: 460px; min-height: 100vh; margin: auto; padding: 52px 22px 104px; display: grid; gap: 18px; } .head, .view, .panel, .remind { display: grid; gap: 12px; } .view { display: none; } .view.active { display: grid; } h1, h2 { margin: 0; font-family: Georgia, serif; color: var(--gold-light); } h1 { font-size: 42px; } h2 { font-size: 24px; } .sub,.time-chip,.en,.state,.label,.hint,.streak,.now-sub,.counter { color: var(--muted); } .hero,.panel,.remind,.tile { border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg); background: rgba(31,33,56,.82); padding: 20px; } .hero { display: flex; align-items: center; gap: 20px; } .moon { width: 72px; height: 72px; border: 0; border-radius: 50%; background: radial-gradient(circle at 34% 30%,#fffbe8,#e8c98f); box-shadow: 0 0 40px rgba(232,184,115,.35); } .time { font: 42px Georgia,serif; } .grid,.stats,.week { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; } .tile { min-height: 118px; text-align: left; display: grid; align-content: space-between; } .btn-row { display: flex; flex-wrap: wrap; gap: 10px; } .btn,.ghost,.close,.item,.icon-btn { border-radius: 999px; border: 1px solid rgba(232,184,115,.35); padding: 9px 16px; background: transparent; } .btn { background: linear-gradient(135deg,#f0c07a,#d9a45f); color:#241c10; font-weight:700; } .player-top,.switch-row { display:flex; justify-content:space-between; gap:12px; align-items:center; } .progress { height:8px; background:#10111f; border-radius:99px; overflow:hidden; }.bar { height:100%; width:0; background:var(--teal); }.range-row,.field { display:grid; gap:7px; }.breath-orb { width:150px;height:150px;border-radius:50%;display:grid;place-items:center;margin:auto;background:rgba(95,184,176,.18); }.story-box { min-height:5em; white-space:pre-line; line-height:1.9; }.nav { position:fixed; z-index:4; bottom:0; left:0; right:0; display:flex; padding-bottom:env(safe-area-inset-bottom, 0px); background:#10111ff0; }.item { flex:1; border:0; border-radius:0; color:var(--muted); }.item.active { color:var(--gold-light); }.overlay { position:fixed; inset:0; z-index:10; display:none; place-items:center; background:#080912e8; }.overlay.show { display:grid; }.msg { text-align:center; }.big { font:40px Georgia,serif; color:var(--gold-light); }.toast,.install-prompt { position:fixed; z-index:20; left:50%; transform:translateX(-50%); bottom:84px; background:var(--gold-light); color:#241c10; padding:10px 16px; border-radius:999px; }.install-prompt { display:flex; align-items:center; gap:8px; bottom:calc(100px + env(safe-area-inset-bottom, 0px)); width:calc(100vw - 32px); max-width:calc(100vw - 32px); white-space:normal; overflow-wrap:anywhere; }.install-prompt[hidden] { display:none; }
.privacy summary { color: var(--gold-light); cursor: pointer; font-weight: 700; }.privacy p { margin: 0; color: var(--muted); line-height: 1.7; }
@media (max-width:370px) { .app { padding-left:16px; padding-right:16px; } }