.install-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); border-radius:100px; padding:11px 16px; min-height:44px; font-size:12px; color:var(--accent); background:var(--panel) }
.install-button svg { width:15px; height:15px }@media(hover:hover) { .install-button:hover { background:var(--accent-soft); border-color:var(--accent) } }
#focus-enter { background:#2e5140; border-color:#2e5140; color:#fcfcee }@media(hover:hover) { #focus-enter:hover { background:#234332 } }
.session-style-group { border-top:1px solid var(--line) }
#pomodoro-settings { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:19px 0 20px; margin-bottom:25px }
.pomodoro-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }.pomodoro-fields label { display:block; font-size:11px; font-weight:500; margin-bottom:9px; color:var(--muted) }.pomodoro-fields input { font-size:18px; font-variant-numeric:tabular-nums; padding:11px 13px; background:var(--input-bg); border:1px solid var(--line); color:var(--text) }.pomodoro-fields input:disabled { opacity:.65 }
.player .pomodoro-panel { background:#10241b22; border:1px solid #ffffff20; padding:20px; margin-top:24px; border-radius:20px; box-shadow:none }.pomodoro-panel h2 { font-family:var(--serif); font-size:25px; font-weight:400; letter-spacing:-.5px; margin:10px 0 }.pomodoro-panel p { color:#c3d0bf; font-size:13px; line-height:1.6; margin:0 }.pomodoro-panel .pomodoro-hint { color:#b3c3ae; font-size:12px; margin-top:8px }
.pomodoro-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 18px }.pomodoro-actions:has(:not([hidden])) { margin-top:16px }.pomodoro-actions .primary-button { width:auto; background:#e3e9bd; color:#263d2b; border-radius:100px; padding:10px 18px; font-size:13px; min-height:44px }@media(hover:hover) { .pomodoro-actions .primary-button:hover { background:#f0f3d6 } }.pomodoro-actions .text-button { color:#d2dfc5; font-size:13px; min-height:44px }
#pomodoro-countdown { font-size:32px; font-weight:300; font-variant-numeric:tabular-nums; color:#e6edc8; letter-spacing:-1px }
#install-dialog h3 { font-weight:600; font-size:13px; margin:22px 0 8px }#install-dialog .install-status { color:var(--accent); font-size:12px; border-top:1px solid var(--line); padding-top:18px; margin:20px 0 12px }#install-dialog .dialog-note { font-size:11px }#update-available { border-top:1px solid var(--line); padding-top:18px }
.pomodoro-panel .focus-hours { display:flex; flex-wrap:wrap; gap:6px 20px; border-top:1px solid #ffffff1c; padding-top:12px; margin-top:14px; font-size:12px; color:#c0cbb2 }.focus-hours strong { font-size:15px; font-weight:450; font-variant-numeric:tabular-nums; color:#e6edc8; margin-left:6px }
@media(max-width:600px) { .install-button { font-size:11px; padding:11px 14px }.pomodoro-fields input { font-size:18px } }
@media(display-mode:standalone) { body { padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom) } }
/* Both apps draw under the system bars. Android passes their size in these variables; the iPhone app uses the web view's own safe areas. */
.native-app body { padding:var(--safe-area-inset-top,env(safe-area-inset-top,0px)) var(--safe-area-inset-right,env(safe-area-inset-right,0px)) var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)) var(--safe-area-inset-left,env(safe-area-inset-left,0px)) }

/* The account sheet borrows the player card: it takes the tint and painting of the sound that is playing. */
#account-dialog { --panel:#18352d; --text:#eef1e4; --muted:#b4c2b0; --line:#ffffff1f; --accent:#e3e9bd; --accent-hover:#f0f3d6; --accent-text:#1b3226; --accent-soft:#ffffff12; --input-bg:#ffffff0d; --dialog-border:#ffffff14; --art-url:url('./art/drift.svg');
  width:min(440px,calc(100vw - 32px)); padding:0 32px 30px; color-scheme:dark; text-align:center }
#account-dialog[data-art="tide"] { --panel:#19333b; --art-url:url('./art/tide.svg') }#account-dialog[data-art="ember"] { --panel:#493e32; --art-url:url('./art/ember.svg') }#account-dialog[data-art="rain"] { --panel:#233a42; --art-url:url('./art/rain.svg') }#account-dialog[data-art="jazz"] { --panel:#3b2e33; --art-url:url('./art/jazz.svg') }#account-dialog[data-art="piano"] { --panel:#1e2c33; --art-url:url('./art/piano.svg') }#account-dialog[data-art="marimba"] { --panel:#34301f; --art-url:url('./art/marimba.svg') }#account-dialog[data-art="night"] { --panel:#1f2340; --art-url:url('./art/night.svg') }#account-dialog[data-art="fountain"] { --panel:#1c3536; --art-url:url('./art/fountain.svg') }#account-dialog[data-art="birds"] { --panel:#31402e; --art-url:url('./art/birds.svg') }#account-dialog[data-art="pink"] { --panel:#3f2f35; --art-url:url('./art/pink.svg') }#account-dialog[data-art="brown"] { --panel:#3a2c22; --art-url:url('./art/brown.svg') }
.account-hero { height:150px; margin:0 -32px; background:var(--art-url) center 70%/cover; -webkit-mask-image:linear-gradient(#000 55%,transparent); mask-image:linear-gradient(#000 55%,transparent) }
.account-close { position:absolute; top:14px; right:14px; color:var(--text); background:#0000002e }
#account-title { font-family:var(--serif); font-size:32px; font-weight:400; line-height:1.1; letter-spacing:-1px; margin:-14px 0 24px }
.account-signed-in-open #account-title { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.account-providers { display:grid; gap:10px }.account-providers > [hidden] { display:none }
:is(.google-button,.apple-button,.outline-button) { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:50px; padding:12px 18px; border:1px solid var(--line); border-radius:100px; font-size:15px; font-weight:550; line-height:1.4; transition:border-color .2s ease, background-color .2s ease }
:is(.google-button,.apple-button,.outline-button):active { transform:translateY(1px) }:is(.google-button,.apple-button,.outline-button):disabled { opacity:.6 }:is(.google-button,.apple-button,.outline-button) svg { width:18px; height:18px; flex:none }
.apple-button { background:#fff; border-color:#fff; color:#000 }.apple-button svg { width:17px; height:17px; margin-top:-2px }
.google-button { background:#131314; border-color:#8e918f; color:#e3e3e3 }
.outline-button { background:transparent; color:var(--text) }
@media(hover:hover) { .google-button:hover { border-color:#c4c7c5 }.outline-button:hover,.account-row:hover { border-color:var(--accent); background:var(--accent-soft) }#account-delete:hover { color:#ec8f82 } }
.account-email-fields { margin-top:22px; text-align:left }.account-email-fields input { margin-bottom:16px }.account-email-fields .primary-button { margin-top:4px }.account-email-fields .text-button { display:flex; width:100%; margin-top:6px }
.account-form.folded .account-email-fields,.account-form:not(.folded) #account-email-toggle { display:none }
.account-avatar { position:relative; display:grid; place-items:center; width:72px; height:72px; margin:-46px auto 14px; border-radius:50%; border:3px solid var(--panel); background:var(--accent); color:var(--accent-text); font-family:var(--serif); font-size:32px; text-transform:uppercase }
.account-email { font-size:15px; color:var(--muted); margin:0 0 26px; overflow-wrap:anywhere }
.account-today { display:flex; flex-direction:column; align-items:center; gap:4px; margin:0 0 26px; color:var(--muted); font-size:13px }.account-today span:first-child { font-size:64px; font-weight:250; letter-spacing:-2px; line-height:1; color:var(--text); font-variant-numeric:tabular-nums }
.account-row { display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:0 16px 0 20px; margin-bottom:10px; border:1px solid var(--line); border-radius:16px; font-size:15px; text-align:left }.account-row span:first-child { flex:1 }.account-row span:nth-child(2) { color:var(--muted); font-variant-numeric:tabular-nums }.account-row svg { width:16px; height:16px; color:var(--muted) }
.account-delete-note { font-size:14px; line-height:1.6; color:var(--text); border-top:1px solid var(--line); margin:22px 0 0; padding-top:18px }.account-delete-note:not([hidden]) + .account-danger { border-top:0; margin-top:4px; padding-top:0 }
.account-danger { display:flex; justify-content:center; gap:24px; border-top:1px solid var(--line); margin-top:22px; padding-top:8px }.account-danger .text-button { font-size:13px; color:var(--muted) }
#account-delete.armed { color:#ec8f82; font-weight:600 }
.account-status { font-size:14px; line-height:1.5; color:var(--text); background:var(--accent-soft); border-radius:14px; padding:12px 14px; margin:-8px 0 18px }.account-status:empty { display:none }
/* On a phone the account opens as a sheet from the bottom edge. */
@media(max-width:600px) { #account-dialog { width:100%; max-width:100%; margin:auto 0 0; padding:0 24px calc(24px + env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; border-bottom:0; max-height:92svh }.account-hero { margin:0 -24px } }