/* Abzug der App vom 2026-10-12 – nicht von Hand ändern, sondern
   tools/site/home-snapshot.js + tools/site/home-build.js laufen lassen. */
/* ---- styles/base.css ---- */
@font-face { font-family: "Spline Sans"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/SplineSans[wght].woff2") format("woff2"); }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 100 800; font-stretch: 100%; font-display: swap; src: url("../fonts/MartianMono[wght].woff2") format("woff2"); }
@font-face { font-family: Newsreader; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/Newsreader[opsz,wght].woff2") format("woff2"); }
:root { --g-01: #ffffff; --g-02: #f4f4f6; --g-03: #f2f2f4; --g-04: #ececee; --g-05: #e8e9ec; --g-06: #e8e8ea; --g-07: #e7e7ea; --g-08: #e6e6e8; --g-09: #e4e4e6; --g-10: #e2e2e6; --g-11: #dcdce2; --g-12: #dcdce0; --g-13: #dcdcde; --g-14: #d6d9e7; --g-15: #d8d8dc; --g-16: #d7d7db; --g-17: #d6d6da; --g-18: #d4d4d8; --g-19: #d3d4d8; --g-20: #d2d3d8; --g-21: #cfcfd3; --g-22: #cbcbcf; --g-23: #c9c9cf; --g-24: #b6bbd1; --g-25: #b9bcc2; --g-26: #bcbcc1; --g-27: #b9b9c0; --g-27b: #a6adbb; --g-28: #9aa0a8; --g-29: #9e9e9e; --g-29b: #949cad; --g-30: #7d8087; --g-31: #6f7278; --g-32: #6c7280; --g-33: #434a59; --g-34: #363c48; --g-35: #2b303c; --g-36: #262b35; --g-37: #232733; --g-38: #1e222b; --g-39: #1c1f26; --g-40: #1b1f28; --g-41: #1b1f27; --g-42: #15181f; --g-43: #15171d; --g-44: #12141a; --g-45: #10131a; --g-46: #0f1114; --g-47: #0e1013; --g-48: #0b0b0b; --g-49: #090b0d; --g-50: #05060a; --g-51: #000000; --chart-protein: #98e2f5; --chart-fat: #f6d68a; --chart-carbs: #f9b4c9; --chart-fiber: #c7b3ff; --traffic-low: #4ade80; --traffic-medium: #f6d68a; --traffic-high: #f26c6c; --state-good: var(--traffic-low); --state-warn: var(--traffic-medium); --state-bad: var(--traffic-high); --state-over: var(--traffic-high); --nutri-a: #2e7d32; --nutri-b: #7cb342; --nutri-c: #f6d68a; --nutri-d: #f39c3d; --nutri-e: #f26c6c; --rank-wood: #9a7b56; --rank-bronze: #cd7f32; --rank-silver: #b9c2cc; --rank-gold: #f0c04a; --rank-platinum: #6fe3c8; --rank-diamond: #7cc6ff; --rank-champion: #c7b3ff; --rank-olympian: #ff9d5c; --rank-immortal: #ff5c7a; --rank-glint: #ffffff; --rank-shade: #000000; --stat-workouts: #4ade80; --stat-lifted: #e879b9; --stat-reps: #60a5fa; --stat-sets: #fb923c; --stat-heaviest: #f26c6c; --stat-time: #facc15; --cover-text: #1b1207; --cover-from: #b08968; --cover-to: #86664b; --o: 255, 255, 255; --o-deep: 0, 0, 0; --o-bg: 9, 11, 13; --o-bg2: 4, 5, 8; --o-ink: 11, 14, 20; --t-nutrition: 130, 245, 203; --t-calendar: 152, 226, 245; --t-meditation: 199, 179, 255; --t-meditation-stroke: 148, 123, 239; --t-cue-diary: 249, 180, 201; --t-journal: 246, 214, 138; --t-journal-stroke: 232, 196, 84; --t-fitness: 255, 167, 167; --t-fitness-stroke: 242, 108, 108; --t-reader: 176, 137, 104; --t-archive: 201, 204, 211; --t-cover: 27, 18, 7; --on-accent: #0f1114; --danger: #ff9a9a; --grid-line: rgba(255, 255, 255, .07); --grid-fill: rgba(255, 255, 255, .10); --rank-none: rgba(255, 255, 255, .22); --rank-dim: rgba(255, 255, 255, .18); --bg: var(--g-46); --bg-deep: var(--g-49); --surface: var(--g-39); --surface-2: var(--g-37); --surface-3: var(--g-35); --line: rgba(var(--o), .08); --line-strong: rgba(var(--o), .16); --accent-app: #c7b3ff; --text-strong: var(--g-01); --text: var(--g-05); --text-muted: var(--g-27b); --text-subtle: var(--g-29b); --text-disabled: var(--g-31); --ink: var(--g-51); --text-dim: var(--text-muted); --text-faint: var(--text-subtle); --field-bg: var(--g-47); --btn-quiet: rgba(var(--o), .18); --btn-quiet-hover: rgba(var(--o), .26); --btn-quiet-lift: rgba(var(--o), .30); --btn-tint-a: .10; --btn-tint-hover-a: .32; --btn-tint-ring: .50; --btn-tint-on-a: .42; --btn-tinted: 16%; --btn-tinted-hover: 30%; --btn-tinted-edge: 95%; --btn-tinted-lift: 60%; --c-nutrition: #82f5cb; --c-nutrition-stroke: #3ddbb0; --c-calendar: #98e2f5; --c-calendar-stroke: #50b8d4; --c-meditation: #c7b3ff; --c-meditation-stroke: #947bef; --med-dusk: color-mix(in srgb, var(--c-meditation-stroke) 16%, var(--surface)); --med-ring: var(--c-meditation); --med-ring-track: rgba(var(--t-meditation), .16); --c-cue-diary: #f9b4c9; --c-cue-diary-stroke: #f2729f; --c-journal: #f6d68a; --c-journal-stroke: #e8c454; --c-reader: #b08968; --c-reader-stroke: #86664b; --c-finance: #66bb6a; --c-finance-stroke: #388e3c; --c-fitness: #ffa7a7; --c-fitness-stroke: #f26c6c; --fk-gym: var(--c-fitness-stroke); --fk-cardio: var(--c-fitness); --fk-stretch: color-mix(in srgb, var(--c-fitness) 60%, var(--surface-3)); --fk-sport: color-mix(in srgb, var(--c-fitness-stroke) 70%, var(--surface-3)); --hz-1: #8ea2c0; --hz-2: #5fc6b4; --hz-3: #e6cf63; --hz-4: #f2a05a; --hz-5: #f26c6c; --c-archive: #c9ccd3; --c-archive-stroke: #787d88; --c-home: #ffffff; --c-home-stroke: #d9dbe0; --tr-iris: #93a9ff; --tr-lime: #cde77f; --tr-amber: #ffc27a; --tr-teal: #6fd6c9; --tr-coral: #ff9478; --tr-sky: #7cc8ff; --tr-sand: #e3cfa6; --tr-orchid: #e29bf5; --py-cell: var(--g-37); --py-spoke: var(--g-35); --py-future-line: var(--g-36); --py-plinth: var(--g-50); --hex-w: clamp(84px, 25vw, 108px); --hex-h: calc(var(--hex-w) * .866); --hex-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); --hex-clip-pointy: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); --hex-rim-ratio: .05; --ring-rx: clamp(100px, 31vw, 150px); --ring-ry: clamp(122px, 39vw, 182px); --bp-tablet: 640px; --bp-desktop: 900px; --rail-w: 128px; --shell: min(560px, 100%); --board: min(560px, 100%); --flow: min(560px, 100%); --measure: 65ch; --figure: 520px; --gutter: 20px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --dur-fast: 140ms; --dur: 260ms; --dur-slow: 480ms; --cut: 18px; --sw-w: 42px; --sw-h: 24px; --sw-knob-w: 15px; --sw-knob-h: 16px; --sw-inset: 4px; --sw-travel: 19px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --shadow-1: 0 2px 10px rgba(var(--o-deep), .45); --shadow-2: 0 12px 34px rgba(var(--o-deep), .55); --font: "Spline Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                "Helvetica Neue", Arial, sans-serif; --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; }
* { --cut-clip: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                      calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
@media (min-width: 640px) {
:root { --shell: min(720px, 100%); --board: min(720px, 100%); --gutter: 24px; }
}
@media (min-width: 900px) {
:root { --shell: min(960px, 100%); --board: min(780px, 100%); --gutter: 32px; }
}
@media (min-width: 1280px) {
:root { --shell: min(1240px, 100%); --board: min(980px, 100%); --gutter: 36px; }
}
@media (min-width: 1600px) {
:root { --shell: min(1560px, 100%); --board: min(1180px, 100%); --gutter: 40px; }
}
*, ::before, ::after { box-sizing: border-box; }
html { text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0px; min-height: 100dvh; min-width: 320px; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; overflow-x: hidden; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; padding-inline-start: var(--safe-left); padding-inline-end: var(--safe-right); }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0px; }
ul, ol { padding: 0px; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; border: 0px; background: none; padding: 0px; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid rgba(var(--o), .75); outline-offset: 3px; border-radius: 4px; }
.app { width: var(--shell); min-width: 320px; margin-inline: auto; padding: 0 var(--gutter) calc(56px + var(--safe-bottom)); outline: none; }
.view { animation: view-in var(--dur-slow) var(--ease-out) backwards; }
@keyframes view-in { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, ::before, ::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---- styles/components.css ---- */
.hex { --rim: calc(var(--hex-w) * var(--hex-rim-ratio)); --clip: var(--hex-clip); position: relative; display: grid; place-items: center; width: var(--hex-w); height: calc(var(--hex-w) * .866); isolation: isolate; transition: transform var(--dur) var(--ease-spring),
    filter    var(--dur) var(--ease-out); will-change: transform; }
.hex__shape { position: absolute; inset: 0px; clip-path: var(--clip); background: var(--hex-stroke); transition: filter var(--dur) var(--ease-out); }
.hex__face { position: absolute; inset: var(--rim); clip-path: var(--clip); background: var(--hex-color); }
.hex__icon { position: relative; z-index: 1; width: 52%; height: 52%; object-fit: contain; pointer-events: none; transition: transform var(--dur) var(--ease-spring); }
@keyframes hex-pop { 
  0% { transform: scale(0.9); }
  55% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes fade-in { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes sheet-up { 
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: none; }
}
@keyframes la-alert-in { 
  0% { opacity: 0; transform: translate(-50%, -14px); }
  100% { opacity: 1; transform: translate(-50%, 0px); }
}
@keyframes pop-in { 
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}
@keyframes ah-drop { 
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}
.btn3d { --depth: 3px; --btn-face: transparent; --btn-face-hover: rgba(var(--o), .10); --btn-lift: rgba(var(--o), .22); --btn-edge: rgba(var(--o), .26); --btn-under: transparent; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; color: var(--text); font-size: 14px; font-weight: 500; touch-action: manipulation; transition: transform var(--dur-fast) var(--ease-out); }
.btn3d::before, .btn3d::after { content: ""; position: absolute; inset: 0px; z-index: -1; }
.btn3d::before { display: none; }
.btn3d::after { box-shadow: inset 0 0 0 1.5px var(--btn-edge, transparent),
              var(--depth) var(--depth) 0 0 var(--btn-lift); background-image: linear-gradient(var(--btn-face), var(--btn-face)); background-color: var(--btn-under, var(--surface)); transition: background-color var(--dur) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out); }
.btn3d:hover::after, .btn3d:focus-visible::after { background: var(--btn-face-hover); }
.btn3d:active { transform: translate(var(--depth), var(--depth)); }
.btn3d:active::after { box-shadow: inset 0 0 0 1.5px var(--btn-edge, transparent); }
.btn3d--sm { --cut: 7px; --depth: 2.5px; padding: 7px 13px; font-size: 12.5px; }
.btn--accent, .btn3d--accent, .btn--primary, .btn3d--primary { --btn-face: var(--accent, var(--accent-app)); --btn-face-hover: var(--accent, var(--accent-app)); --btn-lift: var(--g-42); --btn-edge: transparent; color: var(--on-accent); font-weight: 600; }
.btn--accent:hover::after, .btn3d--accent:hover::after, .btn--primary:hover::after, .btn3d--primary:hover::after { filter: brightness(1.08); }
.btn--quiet, .btn3d--quiet { --btn-face: transparent; --btn-face-hover: rgba(var(--o), .10); --btn-lift: rgba(var(--o), .22); --btn-edge: rgba(var(--o), .26); color: var(--text); font-weight: 500; }
.btn, .btn3d, .nt-icon, .nt-add, .nt-toast__open, .la-alert__act, .nt-card, .nt-filters, .nt-empty { isolation: isolate; }
.iconbtn::before, .iconbtn::after, .nt-icon::before, .nt-icon::after, .sheet-tab::before, .sheet-tab::after, .hex-btn::before, .hex-btn::after, .back-btn::before, .back-btn::after, .btn::before, .btn::after, .btn3d::before, .btn3d::after, .la-alert__act::before, .la-alert__act::after { clip-path: none; border-radius: 0px; }
.la-shine.la-shine { background-image: linear-gradient(160deg,
    color-mix(in srgb, var(--shine, var(--accent-app)) 12%, transparent) 0%,
    transparent 70%); }
@keyframes hold-lift { 
  0% { transform: scale(0.98); }
  100% { transform: scale(1.02); }
}
@keyframes hold-menu { 
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: none; }
}

/* ---- styles/shell.css ---- */
:root { --sh-rule-w: 2px; --sh-bar: var(--g-37); --sh-fab-fill: var(--g-40); --sh-fab-stroke: var(--g-34); --sh-half: .433; --sh-mark: clamp(56px, 15.4vw, 64px); --sh-mark-h: calc(var(--sh-mark) * .866); --sh-mark-x: 14px; --sh-tool-h: 30px; --sh-tool-depth: 3px; --sh-top-rule-y: calc(10px + var(--sh-tool-h) + var(--sh-tool-depth) + 10px); --sh-top-fade: 14px; --sh-top-h: calc(var(--sh-top-rule-y) + var(--sh-mark-h) / 2 + var(--sh-top-fade)); --sh-title-x: calc(var(--sh-mark-x) + var(--sh-mark) + 14px); --sh-top-pad-r: 14px; --sh-fab: 62px; --sh-fab-gap: 9px; --sh-menu-w: 96px; --sh-fab-cx: calc(var(--sh-menu-w) / 2); --sh-hex-fw: calc(var(--sh-fab) + var(--sh-fab-gap) * 2.3094); --sh-rise: calc(var(--sh-hex-fw) * var(--sh-half)); --sh-tabs-body: 74px; --sh-tab-max: 128px; --sh-tabs-h: calc(var(--sh-rise) + var(--sh-tabs-body)); --sh-tabs-clear: calc(var(--sh-tabs-body) + var(--safe-bottom)); }
.sh-top { position: fixed; inset: 0px 0px auto; z-index: 70; height: calc(var(--safe-top) + var(--sh-top-h)); padding-top: var(--safe-top); pointer-events: auto; }
.sh-top::before { content: ""; position: absolute; inset: 0px; z-index: -1; background: var(--bg); mask: linear-gradient(to bottom, #000 calc(100% - var(--sh-top-fade)), #0000); }
.sh-top__inner { position: relative; width: var(--shell); height: var(--sh-top-h); margin-inline: auto; }
.sh-top__rule { position: absolute; top: calc(var(--safe-top) + var(--sh-top-rule-y) - var(--sh-rule-w) / 2); inset-inline-start: calc(max(0px, (100% - var(--shell)) / 2) + var(--sh-mark-x) + var(--sh-mark) / 2); inset-inline-end: 0px; height: var(--sh-rule-w); background: var(--accent-app); pointer-events: none; overflow: hidden; }
.sh-top__rule::after { content: ""; position: absolute; top: 0px; bottom: 0px; inset-inline-start: 0px; width: 32%; background: linear-gradient(90deg, transparent, var(--bg) 55%, transparent); opacity: 0; transform: translateX(-100%); }
@keyframes la-wait-run { 
  100% { transform: translateX(320%); }
}
.sh-top__mark { position: absolute; inset-inline-start: var(--sh-mark-x); top: calc(var(--sh-top-rule-y) - var(--sh-mark-h) / 2); z-index: 2; display: block; touch-action: manipulation; user-select: none; }
.sh-top__hex { --hex-w: var(--sh-mark); --hex-color: var(--accent-app); --hex-stroke: var(--accent-deep, var(--accent-app)); }
.sh-top__hex .hex__icon { width: 56%; height: 56%; }
@media (hover: hover) {
.sh-top__mark:hover .sh-top__hex { transform: scale(1.08); filter: brightness(1.08); }
.sh-top__mark:hover .sh-top__glyph:not(.sh-top__glyph--home) { transform: scale(1.06); }
}
.sh-top__mark:active .sh-top__hex { transform: scale(0.94); }
.sh-top__mark:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 3px; }
.sh-top__glyph { grid-area: 1 / 1; transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out); }
.sh-top__glyph--home { opacity: 0; }
@keyframes sh-mark-glyph-out { 
  0%, 75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.78); }
}
@keyframes sh-mark-glyph-in { 
  0%, 75% { opacity: 0; transform: scale(1.22); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes sh-mark-spin { 
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.55, 0, 0.95, 0.35); }
  85% { transform: rotate(46deg); animation-timing-function: cubic-bezier(0.25, 0, 0.35, 1); }
  95% { transform: rotate(78deg); animation-timing-function: cubic-bezier(0.34, 1.6, 0.64, 1); }
  100% { transform: rotate(90deg); }
}
@keyframes sh-mark-pop { 
  0% { transform: scale(1); filter: brightness(1); animation-timing-function: cubic-bezier(0.55, 0, 0.95, 0.35); }
  85% { transform: scale(0.94); filter: brightness(1.18); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  95% { transform: scale(1.09); filter: brightness(1.32); animation-timing-function: cubic-bezier(0.34, 1.6, 0.64, 1); }
  100% { transform: scale(1); filter: brightness(1.14); }
}
.sh-top__bar { position: absolute; top: 0px; inset-inline-start: var(--sh-title-x); inset-inline-end: var(--sh-top-pad-r); height: var(--sh-top-rule-y); display: flex; align-items: center; gap: 12px; }
.sh-top__title { flex: 1 1 0%; min-width: 0px; margin: 0px; display: flex; align-items: baseline; gap: 7px; font-size: 17px; line-height: 1.2; letter-spacing: -0.005em; white-space: nowrap; }
.sh-top__brand, .sh-top__area { text-decoration: none; transition: opacity var(--dur) var(--ease-out); padding-block: 6px; margin-block: -6px; }
.sh-top__brand { flex: 0 1 auto; min-width: 0px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--text-strong); }
.sh-top__slash { flex: 0 0 auto; font-weight: 400; color: var(--text-subtle); }
.sh-top__area { flex: 0 0 auto; font-weight: 500; color: var(--text-muted); }
a.sh-top__brand:hover, a.sh-top__area:hover { opacity: 0.72; }
a.sh-top__brand:active, a.sh-top__area:active { opacity: 0.55; }
@media (max-width: 360px) {
.sh-top__title { font-size: 15px; gap: 5px; }
.sh-top__bar { gap: 10px; }
.sh-tools { gap: 8px; }
}
.sh-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.sh-top__bar > .sh-tools, .sh-top__bar > .sh-tool { margin-bottom: var(--sh-tool-depth); }
.sh-tool { --depth: var(--sh-tool-depth); --btn-face: var(--tint-face); --btn-face-hover: var(--tint-hover); --btn-lift: var(--tint-lift); --btn-edge: var(--tint-edge); position: relative; isolation: isolate; flex: 0 0 auto; min-width: 34px; height: var(--sh-tool-h); padding: 0px 9px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0px; border-radius: 0px; background: none; color: var(--tint-ink); font: 600 13px/1 var(--font); touch-action: manipulation; filter: var(--tint-glow); transition: transform var(--dur-fast) var(--ease-out); }
.sh-tool::before, .sh-tool::after { content: ""; position: absolute; inset: 0px; z-index: -1; }
.sh-tool::before { background: var(--btn-lift); transform: translate(var(--depth), var(--depth)); transition: opacity var(--dur-fast) var(--ease-out); }
.sh-tool::after { background: var(--btn-face); box-shadow: inset 0 0 0 1.5px var(--btn-edge, transparent); transition: background-color var(--dur) var(--ease-out); }
.sh-tool:hover::after, .sh-tool:focus-visible::after { background: var(--btn-face-hover); }
.sh-tool:active { transform: translate(var(--depth), var(--depth)); }
.sh-tool:active::before { opacity: 0; }
.sh-tool--text { padding: 0px 13px; }
.sh-tool__icon { flex: 0 0 auto; width: 16px; height: 16px; background: currentcolor; mask: var(--m) center / contain no-repeat; }
.sh-tab__badge { position: absolute; top: 8px; inset-inline: calc(50% + 7px) -12px; display: flex; justify-content: flex-end; pointer-events: none; }
.sh-tab__badge[hidden] { display: none; }
.sh-tab__badge-text { flex: 0 0 auto; margin-inline-end: auto; min-width: 17px; height: 17px; padding: 0px 4px; background: var(--state-over); color: var(--on-accent); font: 700 max(var(--fs-floor), 10px)/17px var(--font-mono); text-align: center; white-space: nowrap; }
.sh-tabs { position: fixed; inset: auto 0px 0px; z-index: 80; padding-bottom: var(--safe-bottom); pointer-events: auto; backdrop-filter: blur(9px); background: linear-gradient(to top,
              rgba(var(--o-bg), .72), rgba(var(--o-bg), .38)); }
.sh-tabs__inner { position: relative; width: var(--shell); margin-inline: auto; display: flex; align-items: stretch; }
.sh-tabs__row { position: relative; flex: 1 1 0%; min-width: 0px; display: flex; }
.sh-tab { position: relative; flex: 1 1 0px; min-width: 0px; max-width: var(--sh-tab-max); height: var(--sh-tabs-body); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--text); transition: color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-spring); }
.sh-tab.is-on { color: var(--accent-app); }
.sh-tab.is-on .sh-tab__ring polygon { fill: color-mix(in srgb, currentcolor 20%, transparent); }
.sh-tab.is-on .sh-tab__label { font-weight: 600; }
.sh-tab__hex { position: relative; display: grid; place-items: center; width: 32px; height: calc(36.9504px); }
.sh-tab__ring { position: absolute; inset: 0px; width: 100%; height: 100%; overflow: visible; }
.sh-tab__ring polygon { fill: none; stroke: currentcolor; stroke-width: 6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sh-tab__icon { position: relative; width: 15px; height: 15px; background: currentcolor; mask: var(--m) center / contain no-repeat; }
.sh-tab__label { max-width: max(100%, 92px); font-size: max(var(--fs-floor), 11.5px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sh-tab:hover { transform: translateY(-2px); }
a.sh-tab:active { transform: scale(0.94); transition-duration: var(--dur-fast); }
.sh-tabs__menu { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: var(--sh-menu-w); height: var(--sh-tabs-body); }
.sh-fab { position: relative; width: var(--sh-fab); height: calc(var(--sh-fab) * 1.1547); display: grid; place-items: center; clip-path: var(--hex-clip-pointy); background: var(--sh-fab-stroke); transition: transform var(--dur) var(--ease-spring); }
.sh-fab__face { position: absolute; inset: calc(var(--sh-fab) * var(--hex-rim-ratio)); clip-path: var(--hex-clip-pointy); background: var(--sh-fab-fill); transition: background-color var(--dur) var(--ease-out); }
.sh-fab:hover .sh-fab__face { background: var(--g-36); }
.sh-fab:active { transform: scale(0.92); transition-duration: var(--dur-fast); }
.sh-fab__dots { position: relative; z-index: 1; display: grid; gap: 5px; transition: transform var(--dur) var(--ease-spring); }
.sh-fab__dots i { display: block; width: 6px; height: 6px; background: var(--accent-app); }
body[data-shell] .app { padding-top: calc(var(--safe-top) + var(--sh-top-h) + 14px); padding-bottom: calc(var(--safe-bottom) + var(--sh-tabs-h) + 26px + var(--toast-space, 0px)); }
@media (prefers-reduced-motion: reduce) {
.sh-fab__dots, .sh-fab__home, .sh-tab__body, .sh-tab__icon, .sh-top__glyph, .sh-cog__icon { transition: none; }
}
@media (min-width: 900px) {
:root { --sh-mark: 64px; --sh-mark-x: calc((var(--rail-w) - var(--sh-mark)) / 2); --sh-title-x: calc(var(--rail-w) + 8px); --sh-top-pad-r: 24px; --sh-rail-head: 18px; --sh-tabs-h: 0px; --sh-tabs-clear: 0px; }
body[data-shell] { padding-inline-start: var(--rail-w); }
.sh-tabs { inset: 0px auto 0px 0px; z-index: 65; width: var(--rail-w); padding-bottom: 0px; background: var(--sh-bar); pointer-events: auto; }
.sh-tabs::after { inset: 0px 0px 0px auto; width: var(--sh-rule-w); height: auto; background: var(--accent-app); }
.sh-tabs__inner { width: 100%; height: 100%; padding-top: var(--sh-rail-head); flex-direction: column; align-items: stretch; }
.sh-tabs__row { z-index: 1; flex-direction: column; align-items: stretch; overflow-y: auto; scrollbar-width: none; }
.sh-tabs__row::-webkit-scrollbar { display: none; }
.sh-tabs__row::before { content: none; }
.sh-tab { flex: 0 0 auto; max-width: none; height: var(--sh-tabs-body); }
.sh-tab__badge { inset-inline-end: 6px; }
.sh-tabs__menu { width: 100%; height: auto; margin-top: auto; padding: 20px 0 calc(20px + var(--safe-bottom)); display: grid; place-items: center; z-index: 1; }
.sh-fab { position: relative; inset-inline-start: auto; top: auto; }
.sh-top__inner { width: 100%; }
.sh-top__rule { inset-inline-start: calc(var(--sh-mark-x) + var(--sh-mark) / 2); }
.sh-tabs { top: calc(var(--safe-top) + var(--sh-top-h)); }
}
.sh-tab__hex { width: 28px; height: calc(32.3316px); }
.sh-tab__ring polygon { stroke-width: 7; vector-effect: none; }
.sh-tab__icon { width: 17px; height: 17px; }
.sh-tab { gap: 4px; }
.sh-tabs__menu { align-items: start; padding-top: 4px; }
.sh-fab { top: -10px; }
.sh-tabs { backdrop-filter: none; background: none; }
.sh-tabs::before { content: ""; position: absolute; inset: -26px 0px 0px; z-index: -1; pointer-events: none; backdrop-filter: blur(6px); background: linear-gradient(to top,
              rgba(var(--o-bg), .46), rgba(var(--o-bg), 0)); mask: linear-gradient(to top, rgb(0, 0, 0) 45%, rgba(0, 0, 0, 0) 100%); }
.sh-back { flex: 0 0 auto; display: flex; align-items: center; }
.sh-back:empty { display: none; }
.sh-top__bar > .sh-back { margin-bottom: var(--sh-tool-depth); }

/* ---- styles/home.css ---- */
.hb, .gd { display: grid; gap: 28px; padding-top: 4px; }
.hb > *, .gd > * { min-width: 0px; }
.hb-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0px 2px 12px; }
.hb-sec__title { margin: 0px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.hb-sec__link { padding: 4px 0px; font-size: 13.5px; font-weight: 600; color: var(--accent-app); text-decoration: none; white-space: nowrap; }
.hb-sec__link::after { content: " →"; }
.hb-sec__link:hover { text-decoration: underline; }
.hb-icon { flex: 0 0 auto; width: 15px; height: 15px; background: currentcolor; mask: var(--m) center / contain no-repeat; }
.hb-day { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0px 2px; }
.hb-day__weekday { margin: 0px 0px 2px; font: 500 max(var(--fs-floor), 11px)/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-subtle); }
.hb-day__date { margin: 0px; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; color: var(--text-strong); }
.hb-day__num { margin-inline-end: 0.14em; letter-spacing: 0px; font-variant-numeric: lining-nums proportional-nums; }
.hb-day__meter { --cut: 8px; flex: 0 0 auto; position: relative; isolation: isolate; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: -12px -10px -8px; padding: 8px 10px; border: 0px; background: none; color: inherit; font: inherit; cursor: pointer; }
.hb-day__meter::before { content: ""; position: absolute; inset: 0px; z-index: -1; background: var(--surface); clip-path: var(--cut-clip); opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.hb-day__meter:hover::before, .hb-day__meter[aria-expanded="true"]::before { opacity: 1; }
.hb-day__meter:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 0px; }
.hb-day__meter:active { transform: translateY(1px); }
.hb-day__chev { flex: 0 0 auto; width: 10px; height: 10px; margin-inline-start: -4px; background: var(--text-subtle); mask: url("icons/down_icon.svg") center center / contain no-repeat; transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.hb-day__meter:hover .hb-day__chev { background: var(--text-strong); transform: translateY(1px); }
.hb-day__segs { display: flex; gap: 3px; }
.hb-day__seg { position: relative; display: block; }
.hb-day__segs i { display: block; width: 14px; height: 6px; background: var(--surface-3); transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
.hb-day__seg:hover i { transform: translateY(-2px); }
.hb-day__seg::after { content: attr(data-tip); position: absolute; top: calc(100% + 10px); inset-inline-start: 50%; z-index: 5; padding: 6px 9px; background: var(--surface-3); color: var(--text-strong); font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0px; text-transform: none; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -3px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.hb-day__seg:nth-child(-n+2)::after { inset-inline-start: 0px; transform: translate(0px, -3px); }
.hb-day__seg:nth-last-child(-n+2)::after { inset-inline: auto 0px; transform: translate(0px, -3px); }
.hb-day__seg:hover::after { opacity: 1; transform: translate(-50%, 0px); }
.hb-day__seg:nth-child(-n+2):hover::after, .hb-day__seg:nth-last-child(-n+2):hover::after { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.hb-day__chev, .hb-day__segs i, .hb-day__seg::after { transition: none; }
}
.hb-day__segs i.is-done { background: var(--tone); }
.hb-day__count { font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hb-now { --cut: 18px; position: relative; padding: 18px 18px 20px; background: var(--surface); clip-path: var(--cut-clip); }
.hb-now__eyebrow { margin: 0px; display: flex; align-items: center; gap: 10px; font: 500 max(var(--fs-floor), 11px)/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tone, var(--text-muted)); }
.hb-now__sign .hex { --hex-w: 26px; }
.hb-now__sign .hex__icon { width: 58%; height: 58%; }
.hb-now__title { margin: 12px 0px 4px; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--text-strong); text-wrap: balance; }
.hb-now__text { margin: 0px; font-size: 14.5px; line-height: 1.45; color: var(--text-muted); }
.hb-now__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 18px; }
.hb-now__go { --accent: var(--tone); padding: 12px 20px; font-size: 15px; }
.hb-now__later { padding: 12px 16px; font-size: 14px; }
.hb-now__more { margin-inline-start: auto; width: 44px; min-height: 44px; padding: 0px; justify-content: center; color: var(--text-muted); }
.hb-now__more:hover { color: var(--text-strong); }
.hb-now__more .hb-icon { width: 16px; height: 16px; }
.hb-now__open { color: inherit; text-decoration: none; }
.hb-now__open::after { content: ""; position: absolute; inset: 0px; z-index: 0; }
.hb-now__open:focus-visible { outline: none; }
.hb-now.is-linked:has(.hb-now__open:focus-visible) { outline: 2px solid var(--tone); outline-offset: -2px; }
.hb-now__acts { position: relative; z-index: 1; }
.hb-now__chev { display: inline-block; margin-inline-start: 8px; font-weight: 400; color: var(--tone); transition: transform var(--dur) var(--ease-out); }
.hb-now.is-linked { transition: background-color var(--dur) var(--ease-out); }
.hb-now.is-linked:hover { background: linear-gradient(135deg,
      color-mix(in srgb, var(--tone) 20%, var(--surface)) 0%,
      var(--surface) 64%); }
.hb-now.is-linked:hover .hb-now__chev { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.hb-now__chev { transition: none; }
}
.hb-chips { display: flex; gap: 8px; margin: 0px; padding: 0px 0px 2px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.hb-chips::-webkit-scrollbar { display: none; }
.hb-chips > li { flex: 0 0 auto; }
.hb-chip { --cut: 8px; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0px 14px 0px 12px; border: 0px; background: var(--surface); clip-path: var(--cut-clip); color: var(--text); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background-color var(--dur) var(--ease-out); }
.hb-chip:hover, .hb-chip:focus-visible { background: var(--surface-2); }
.hb-chip:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -2px; }
.hb-chip__dot { flex: 0 0 auto; width: 8px; height: 8px; background: var(--tone); }
.hb-chip__meta { font: 500 max(var(--fs-floor), 11px)/1 var(--font-mono); color: var(--text-subtle); }
.hb-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px; margin: 0px; padding: 0px; list-style: none; }
.hb-tile { --cut: 14px; position: relative; min-width: 0px; background: var(--surface); clip-path: var(--cut-clip); transition: background-color var(--dur) var(--ease-out); }
.hb-tile:hover { background: var(--surface-2); }
.hb-tile__link { min-height: 120px; height: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: 14px 14px 20px; color: inherit; text-decoration: none; }
a.hb-tile__link:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -4px; }
.hb-tile__sign .hex { --hex-w: 40px; }
.hb-tile__sign .hex__icon { width: 56%; height: 56%; }
.hb-tile__name { margin-top: auto; padding-top: 14px; font-size: 15.5px; font-weight: 600; line-height: 1.25; color: var(--text-strong); }
.hb-tile__status { margin-top: 4px; min-width: 0px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hb-tile.is-done .hb-tile__status { color: var(--tone); }
.hb-tile__act { --depth: 3px; position: absolute; top: 12px; inset-inline-end: 12px; isolation: isolate; width: 40px; height: 36px; display: grid; place-items: center; border: 0px; border-radius: 0px; background: none; color: var(--tone); transition: transform var(--dur-fast) var(--ease-out); }
.hb-tile__act::before, .hb-tile__act::after { content: ""; position: absolute; inset: 0px; z-index: -1; }
.hb-tile__act::before { background: color-mix(in srgb, var(--tone) var(--btn-tinted-lift), transparent); transform: translate(var(--depth), var(--depth)); transition: opacity var(--dur-fast) var(--ease-out); }
.hb-tile__act::after { background: color-mix(in srgb, var(--tone) var(--btn-tinted), var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tone) var(--btn-tinted-edge), transparent); transition: background-color var(--dur) var(--ease-out); }
.hb-tile__act:hover::after, .hb-tile__act:focus-visible::after { background: color-mix(in srgb, var(--tone) var(--btn-tinted-hover), var(--surface)); }
.hb-tile__act:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 3px; }
.hb-tile__act:active { transform: translate(var(--depth), var(--depth)); }
.hb-tile__act:active::before { opacity: 0; }
.hb-tile__act .hb-icon { width: 16px; height: 16px; }
.hb-tile__bar, .hb-tile__segs { position: absolute; inset-inline: 0px; bottom: 0px; height: 4px; pointer-events: none; }
.hb-tile__bar { background: var(--surface-3); }
.hb-tile__bar i { display: block; width: var(--p, 0%); height: 100%; background: var(--tone); }
.hb-tile__segs { display: flex; gap: 2px; }
.hb-tile__segs i { flex: 1 1 0%; background: var(--surface-3); }
.hb-tile__segs i.is-done { background: var(--tone); }
.hb-list { display: grid; gap: 6px; margin: 0px; padding: 0px; list-style: none; }
.hb-row { --cut: 10px; min-height: 54px; display: grid; grid-template-columns: 50px 8px minmax(0px, 1fr); align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface); clip-path: var(--cut-clip); color: inherit; text-decoration: none; transition: background-color var(--dur) var(--ease-out); }
.hb-row:hover { background: var(--surface-2); }
.hb-row:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -3px; }
.hb-row__when { font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hb-row__dot { width: 8px; height: 8px; background: var(--tone); }
.hb-row__body { display: grid; gap: 2px; min-width: 0px; }
.hb-row__title, .hb-row__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-row__title { font-size: 14.5px; font-weight: 500; color: var(--text-strong); }
.hb-row__meta { font-size: 12.5px; color: var(--text-subtle); }
.hb-note__card { --cut: 14px; display: grid; grid-template-columns: auto minmax(0px, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; background: color-mix(in srgb, var(--accent-app) 9%, var(--surface)); clip-path: var(--cut-clip); }
.hb-note:not(.hb-note--news) .hb-note__card { background: var(--surface); }
.hb-note__title { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.hb-note__text { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
@media (prefers-reduced-motion: no-preference) {
.hb-grid .hb-tile:not(.hb-tile--edit) { animation: hb-rise var(--dur-slow) var(--ease-out) backwards; }
.hb-grid .hb-tile:nth-child(2) { animation-delay: 40ms; }
.hb-grid .hb-tile:nth-child(3) { animation-delay: 80ms; }
.hb-grid .hb-tile:nth-child(4) { animation-delay: 120ms; }
.hb-grid .hb-tile:nth-child(5) { animation-delay: 160ms; }
.hb-grid .hb-tile:nth-child(6) { animation-delay: 200ms; }
.hb-grid .hb-tile:nth-child(n+7) { animation-delay: 240ms; }
.hb-tile__bar i { animation: hb-grow 700ms var(--ease-out) 200ms backwards; }
.hb-now { animation: hb-rise var(--dur-slow) var(--ease-out) backwards; }
}
@keyframes hb-rise { 
  0% { transform: translateY(8px); opacity: 0.001; }
}
@keyframes hb-grow { 
  0% { width: 0px; }
}
@keyframes gd-start-open { 
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}
@keyframes gd-unread-in { 
  0% { box-shadow: inset 0 0 0 var(--state-over); background: transparent; }
}
@media (min-width: 600px) {
.hb-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
}
@media (min-width: 900px) {
.hb:not(.is-editing) { grid-template-columns: minmax(0px, 360px) minmax(0px, 1fr); column-gap: 32px; align-items: start; }
.hb:not(.is-editing) > .hb-day { grid-column: 1 / -1; }
.hb:not(.is-editing) > * { grid-column: 1; }
.hb:not(.is-editing) > .hb-areas { grid-area: 2 / 2 / span 8; }
.hb:not(.is-editing) .hb-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
@media (min-width: 1200px) {
.hb:not(.is-editing) .hb-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
}
@media (min-width: 1280px) {
.hb:not(.is-editing) { grid-template-columns: minmax(0px, 420px) minmax(0px, 1fr); column-gap: 40px; }
.hb-day__date { font-size: 30px; }
.hb-day__weekday { font-size: 12.5px; }
.hb-now { padding: 24px 24px 26px; }
.hb-now__title { font-size: 27px; }
.hb-now__text { font-size: 15.5px; }
.hb-grid { gap: 14px; }
.hb-tile { --cut: 18px; }
.hb-tile__link { min-height: 156px; padding: 18px 18px 22px; }
.hb-tile__sign .hex { --hex-w: 44px; }
.hb-tile__name { font-size: 18px; }
.hb-tile__status { font-size: 12.5px; }
.hb-tile__act { top: 16px; inset-inline-end: 16px; width: 46px; height: 42px; }
.hb-row__title { font-size: 15.5px; }
}
@media (min-width: 1600px) {
.hb:not(.is-editing) { grid-template-columns: minmax(0px, 480px) minmax(0px, 1fr); column-gap: 48px; }
.hb:not(.is-editing) .hb-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.hb-day__date { font-size: 34px; }
.hb-now__title { font-size: 30px; }
.hb-tile__link { min-height: 176px; }
.hb-tile__name { font-size: 19px; }
}

/* ---- styles/meditation.css ---- */
@keyframes mnt-swap { 
  0% { opacity: 0.4; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}
@keyframes mnt-breathe { 
  0%, 100% { transform: scale(0.56); }
  40%, 60% { transform: scale(0.84); }
}
@keyframes mnt-fill { 
  0% { fill: var(--field-bg); transform: scale(0.5); }
  100% { fill: var(--accent-app); transform: none; }
}
@keyframes mnt-close-in { 
  0% { opacity: 0; transform: scale(0.86); }
  100% { opacity: 1; transform: none; }
}

/* ---- styles/doc.css ---- */
@keyframes doc-jump { 
  0% { background: color-mix(in srgb, var(--accent-app) 26%, transparent); }
  100% { background: transparent; }
}
@keyframes doc-bar-in { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes doc-desk-in { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ---- styles/notes.css ---- */
@keyframes ar-sel-in { 
  0% { opacity: 0; transform: translate(-50%, -8px); }
}
@keyframes nt-toast-in { 
  0% { opacity: 0; transform: translate(-50%, 14px); }
  100% { opacity: 1; transform: translate(-50%, 0px); }
}
@keyframes nt-toast-clock { 
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes nt-chip-in { 
  0% { opacity: 0; transform: translate(-50%, 14px); }
  100% { opacity: 1; transform: translate(-50%, 0px); }
}
@keyframes nt-dflt-in { 
  0% { opacity: 0.4; transform: translateY(3px); }
  100% { opacity: 1; transform: none; }
}

/* ---- styles/fitness.css ---- */
@keyframes bm-parts-in { 
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}
@keyframes fit-rest-pulse { 
  0%, 100% { background: var(--surface); }
  50% { background: color-mix(in srgb, var(--accent-deep) 26%, var(--surface)); }
}
@keyframes fit-done-in { 
  0% { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: none; }
}
@keyframes fit-rank-pop { 
  0% { opacity: 0; transform: scale(0.4); box-shadow: transparent 0px 0px 0px 0px; }
  55% { opacity: 1; transform: scale(1.14); box-shadow: 0 0 30px 6px color-mix(in srgb, var(--accent-app) 55%, transparent); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 16px 0 color-mix(in srgb, var(--accent-app) 26%, transparent); }
}
@keyframes fit-rank-row { 
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}
@keyframes fit-chip-in { 
  0% { opacity: 0; transform: translate(-50%, 14px); }
  100% { opacity: 1; transform: translate(-50%, 0px); }
}
@keyframes fit-ladder-in { 
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}
@keyframes fit-ladder-bar { 
  0% { transform: scaleX(0); }
}
@keyframes fit-rank-sheen { 
  0% { background-position: 100% 0px, 0px 0px; }
  100% { background-position: 22% 0px, 0px 0px; }
}
@keyframes fkp-up { 
  0% { transform: translateY(100%); }
  100% { transform: none; }
}
@keyframes fkp-bump { 
  0% { color: var(--accent-app); transform: translateY(-2px); }
  100% { color: var(--text); transform: none; }
}

/* ---- styles/fitness-move.css ---- */
@keyframes fx-blink { 
  50% { opacity: 0.25; }
}
@keyframes fx-count-pop { 
  0% { transform: scale(1.18); opacity: 0.4; }
  25% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.96); opacity: 1; }
}
@keyframes fxr-arm { 
  0% { width: 100%; }
  100% { width: 0px; }
}

/* ---- styles/nutrition.css ---- */
@keyframes nu-shop-in { 
  0% { background: color-mix(in srgb, var(--accent-deep) 55%, transparent); }
  100% { background: transparent; }
}
@keyframes nu-shop-known { 
  0% { background: rgba(var(--o), .16); }
  100% { background: transparent; }
}
@keyframes nu-unsaved-in { 
  0% { opacity: 0; transform: translateY(-3px); }
  100% { opacity: 1; transform: none; }
}
@keyframes nu-save-nudge { 
  0%, 100% { transform: none; }
  12% { transform: translate(var(--depth), var(--depth)); }
  24% { transform: none; }
}
@keyframes nu-pane-in { 
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}
:root { --dr-water: var(--tr-sky); --dr-tea: var(--tr-lime); --dr-coffee: var(--tr-amber); --dr-juice: var(--tr-coral); --dr-soft: var(--tr-orchid); --dr-syrup: var(--chart-carbs); --dr-milk: var(--tr-sand); --dr-sport: var(--tr-teal); --dr-alcohol: var(--tr-iris); --dr-other: var(--text-muted); }
@keyframes nu-dk-drop { 
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}

/* ---- styles/journal.css ---- */
@keyframes jr-star-pop { 
  0% { transform: scale(1); }
  35% { transform: scale(1.35) rotate(-8deg); }
  70% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
@keyframes jr-bar-in { 
  0% { opacity: 0; transform: translate(-50%, -8px); }
  100% { opacity: 1; transform: translate(-50%, 0px); }
}
@keyframes jr-deny { 
  0%, 100% { transform: translateX(0px); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@keyframes jr-tcard-in { 
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}

/* ---- styles/cue-diary.css ---- */
@keyframes cd-msg-in { 
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}
@keyframes cd-fill { 
  0% { width: 0px; }
}
@keyframes cd-draw { 
  100% { stroke-dashoffset: 0; }
}
@keyframes cd-pop { 
  0% { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cd-fade { 
  100% { opacity: 0.8; }
}
@keyframes cd-tap { 
  0% { transform: scale(1); }
  40% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@keyframes cd-wave-draw { 
  100% { stroke-dashoffset: 0; }
}
@keyframes cd-fade { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ---- styles/reader.css ---- */
@keyframes lib-sheet-up { 
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: none; }
}
@keyframes rd-spin { 
  100% { transform: rotate(360deg); }
}
@keyframes rd-pdf-in-right { 
  0% { opacity: 0; transform: translateX(7%); }
  100% { opacity: 1; transform: none; }
}
@keyframes rd-pdf-in-left { 
  0% { opacity: 0; transform: translateX(-7%); }
  100% { opacity: 1; transform: none; }
}
@keyframes rn-flash { 
  0% { box-shadow: 0 0 0 0 rgba(var(--t-reader), .55); }
  40% { box-shadow: 0 0 0 6px rgba(var(--t-reader), .30); }
  100% { box-shadow: 0 0 0 0 rgba(var(--t-reader), 0); }
}
@keyframes rd-remind-in { 
  0% { opacity: 0; transform: translate(-50%, 14px); }
  100% { opacity: 1; transform: translate(-50%, 0px); }
}
@keyframes rd-nope { 
  0%, 100% { transform: translateX(0px); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
:root { --rd-page: 720px; }
@keyframes rd-gridedit-in { 
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}

/* ---- styles/patterns.css ---- */
@keyframes pat-jr-grow { 
  0% { transform: scaleX(0); }
  100% { transform: none; }
}
@keyframes pat-jr-in { 
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  100% { opacity: 1; transform: translate(-50%, -50%); }
}

/* ---- styles/sheet.css ---- */
@keyframes sheet-switch-in { 
  0% { opacity: 0; transform: translateY(-6px); }
}

/* ---- styles/look.css ---- */
.la-koi { --k-ink: #000; --k-fin: #fff; --k-a: var(--c-journal); --k-b: var(--c-nutrition); --k-c: var(--c-cue-diary); --k-d: var(--c-calendar); display: block; overflow: visible; }
.sh-top__hex .sh-top__koi { width: 80%; height: 80%; }
.la-pond { position: fixed; inset: 0px; z-index: -1; display: none; overflow: hidden; pointer-events: none; }
body[data-shell="home"] .la-pond { display: block; }
html[data-look-light="off"] .la-pond { display: none; }
.la-pond__light { position: absolute; inset: 0px; transition: opacity 1.2s var(--ease-out); }
html[data-pond="morning"] .la-pond__light { background-image: radial-gradient(70% 42% at 12% 10%, color-mix(in srgb, var(--c-calendar) 18%, transparent), transparent 72%),
    radial-gradient(60% 36% at 96% 24%, color-mix(in srgb, var(--c-journal) 15%, transparent), transparent 72%),
    radial-gradient(70% 40% at 40% 96%, color-mix(in srgb, var(--c-nutrition) 11%, transparent), transparent 72%); }
html[data-pond="day"] .la-pond__light { background-image: radial-gradient(60% 40% at 8% 16%, color-mix(in srgb, var(--c-nutrition) 15%, transparent), transparent 72%),
    radial-gradient(55% 36% at 96% 40%, color-mix(in srgb, var(--c-calendar) 15%, transparent), transparent 72%),
    radial-gradient(60% 38% at 24% 92%, color-mix(in srgb, var(--c-fitness) 12%, transparent), transparent 72%),
    radial-gradient(50% 30% at 84% 88%, color-mix(in srgb, var(--c-journal) 10%, transparent), transparent 72%); }
html[data-pond="evening"] .la-pond__light { background-image: radial-gradient(70% 42% at 10% 18%, color-mix(in srgb, var(--c-meditation) 18%, transparent), transparent 72%),
    radial-gradient(60% 40% at 100% 52%, color-mix(in srgb, var(--c-cue-diary) 15%, transparent), transparent 72%),
    radial-gradient(70% 36% at 30% 100%, color-mix(in srgb, var(--c-reader) 18%, transparent), transparent 72%); }
html[data-pond="night"] .la-pond__light { background-image: radial-gradient(90% 34% at 50% 108%, color-mix(in srgb, var(--c-meditation) 15%, transparent), transparent 76%),
    radial-gradient(55% 28% at 10% 100%, color-mix(in srgb, var(--c-calendar) 10%, transparent), transparent 76%); }
html[data-pond="still"] .la-pond__light, html[data-pond="drift"] .la-pond__light, html[data-pond="ripple"] .la-pond__light { background-image: radial-gradient(60% 40% at 8% 18%, color-mix(in srgb, var(--c-calendar) 18%, transparent), transparent 70%),
    radial-gradient(55% 35% at 95% 42%, color-mix(in srgb, var(--c-cue-diary) 15%, transparent), transparent 70%),
    radial-gradient(60% 40% at 30% 92%, color-mix(in srgb, var(--c-nutrition) 14%, transparent), transparent 70%),
    radial-gradient(50% 30% at 80% 85%, color-mix(in srgb, var(--c-journal) 10%, transparent), transparent 70%); }
html[data-pond="deep"] .la-pond__light { background-image: radial-gradient(90% 38% at 50% 108%, color-mix(in srgb, var(--c-nutrition) 19%, transparent), transparent 75%),
    radial-gradient(60% 30% at 15% 100%, color-mix(in srgb, var(--c-calendar) 16%, transparent), transparent 75%),
    radial-gradient(60% 30% at 90% 100%, color-mix(in srgb, var(--c-meditation) 13%, transparent), transparent 75%); }
html[data-pond="drift"] .la-pond__light { inset: -12%; animation: 26s ease-in-out 0s infinite alternate none running la-pond-drift; }
@keyframes la-pond-drift { 
  0% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(5%, -4%) scale(1.05); }
  100% { transform: translate(-4%, 4%) scale(0.98); }
}
html[data-pond="ripple"] .la-pond__light::after { content: ""; position: absolute; inset: 0px; background: rgba(var(--o), .06); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 80'%3E%3Cpath d='M11.5 0 L34.5 0 L46 20 L34.5 40 L11.5 40 L0 20 Z M11.5 40 L0 60 L11.5 80 M34.5 40 L46 60 L34.5 80' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 0px 0px / 46px 80px; }
@media (prefers-reduced-motion: reduce) {
.la-pond__light { animation: auto ease 0s 1 normal none running none; }
}
body[data-shell="home"] .app { --accent-app: var(--c-home); --accent-deep: var(--c-home-stroke); }
body[data-shell="home"] .sh-top::before { background: color-mix(in srgb, var(--bg) 94%, transparent); }
html[data-look-line="fade"] body[data-shell="home"] .sh-top__rule { background: linear-gradient(90deg,
    var(--accent-app) 0%,
    color-mix(in srgb, var(--accent-app) 80%, transparent) 32%,
    transparent 100%); }
html[data-look-line="glow"] body[data-shell="home"] .sh-top__rule { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent-app) 55%, transparent),
    0 0 26px 2px color-mix(in srgb, var(--accent-app) 18%, transparent); }
html[data-look-line="hair"] body[data-shell="home"] .sh-top__rule { height: 1px; opacity: 0.85; }
html[data-look-line="hair"] body[data-shell="home"] .sh-top__mark::before { content: ""; position: absolute; inset: -45% -40%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-app) 24%, transparent), transparent); pointer-events: none; }
html[data-look-cards] .hb :is(.hb-now, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row, .hb-note__card, .shr-card) { --lk-card: color-mix(in srgb, var(--surface) 62%, transparent); --lk-blur: blur(14px); --lk-card-img: none; background-color: var(--lk-card); background-image: var(--lk-tile-img, none), var(--lk-card-img); backdrop-filter: var(--lk-blur); transition: box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
html[data-look-cards] .hb .hb-now { --lk-shine: linear-gradient(160deg, color-mix(in srgb, var(--shine, var(--tone)) 14%, transparent) 0%, transparent 70%); background-image: var(--lk-now-img, none), var(--lk-card-img), var(--lk-shine); }
html[data-look-cards] .hb :is(.hb-now.is-linked, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row):hover { box-shadow: inset 0 0 0 999px rgba(var(--o), .045); }
html[data-look-cards="clear"] .hb :is(.hb-now, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row, .hb-note__card, .shr-card) { --lk-card: color-mix(in srgb, var(--surface) 40%, transparent); --lk-blur: blur(22px) saturate(1.5); --lk-card-img: linear-gradient(160deg, rgba(var(--o), .09), transparent 42%); }
html[data-look-cards="tint"] .hb :is(.hb-now, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row, .hb-note__card, .shr-card) { --lk-card: color-mix(in srgb, var(--tone, var(--surface)) 11%, color-mix(in srgb, var(--surface) 62%, transparent)); }
html[data-look-cards="edge"] .hb :is(.hb-now, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row, .hb-note__card, .shr-card) { --lk-card-img: linear-gradient(135deg,
    transparent calc(var(--cut) * .7071 - .5px),
    var(--tone, rgba(var(--o), .7)) calc(var(--cut) * .7071 - .5px) calc(var(--cut) * .7071 + 1.5px),
    color-mix(in srgb, var(--tone, #fff) 20%, transparent) calc(var(--cut) * .7071 + 1.5px),
    transparent calc(var(--cut) * .7071 + 36px)); }
html[data-look-cards="smoke"] .hb :is(.hb-now, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row, .hb-note__card, .shr-card) { --lk-card: color-mix(in srgb, var(--bg) 84%, transparent); --lk-blur: blur(8px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html[data-look-cards] .hb :is(.hb-now, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row, .hb-note__card, .shr-card) { --lk-card: var(--surface); }
}
html[data-look-buttons="grey"] .hb-tile__act::before { background: var(--btn-quiet-lift); }
html[data-look-buttons="grey"] .hb-tile__act::after { background: var(--btn-quiet); box-shadow: none; }
html[data-look-buttons="glow"] .hb-tile__act { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tone) 55%, transparent)); }
html[data-look-buttons="glass"] .hb-tile__act::before { background: rgba(var(--o), .34); }
html[data-look-buttons="glass"] .hb-tile__act::after { background: rgba(var(--o), .07); box-shadow: inset 0 0 0 1px rgba(var(--o), .26); }
html[data-look-buttons="solid"] .hb-tile__act { color: var(--on-accent); }
html[data-look-buttons="solid"] .hb-tile__act::before { background: var(--tone-deep); }
html[data-look-buttons="solid"] .hb-tile__act::after { background: var(--tone); box-shadow: none; }
html[data-look-buttons] .hb-tile__act:hover { filter: brightness(1.12); }
html[data-look-buttons="glow"] .hb-tile__act:hover { filter: brightness(1.12) drop-shadow(0 0 9px color-mix(in srgb, var(--tone) 65%, transparent)); }
.hb-tile__mark, .hb-tile__num { display: none; }
html[data-look-tiles="glow"] .hb .hb-tile:not(.hb-tile--edit) { --lk-tile-img: radial-gradient(72% 62% at 24% 22%, color-mix(in srgb, var(--tone) 24%, transparent), transparent 70%); }
html[data-look-tiles="fill"] .hb .hb-tile:not(.hb-tile--edit) { --lk-tile-img: linear-gradient(to top,
      transparent calc(var(--fill, 0%) - 2px),
      var(--tone) calc(var(--fill, 0%) - 2px) var(--fill, 0%),
      transparent var(--fill, 0%)),
    linear-gradient(to top,
      color-mix(in srgb, var(--tone) 26%, transparent) var(--fill, 0%),
      transparent var(--fill, 0%)); }
html[data-look-tiles="fill"] .hb .hb-tile:not(.hb-tile--edit) :is(.hb-tile__bar, .hb-tile__segs) { display: none; }
html[data-look-tiles="fill"] .hb .hb-tile.is-done:not(.hb-tile--edit) { --lk-tile-img: none; --lk-card-img: none; background-color: var(--tone); }
html[data-look-tiles="fill"] .hb .hb-tile.is-done :is(.hb-tile__name, .hb-tile__status) { color: var(--on-accent); }
html[data-look-tiles="fill"] .hb .hb-tile.is-done .hex { --hex-color: var(--on-accent); --hex-stroke: var(--on-accent); }
html[data-look-tiles="fill"] .hb .hb-tile.is-done .hex__icon { filter: invert(1); }
html[data-look-tiles="fill"] .hb .hb-tile.is-done .hb-tile__act { color: var(--on-accent); filter: none; }
html[data-look-tiles="fill"] .hb .hb-tile.is-done .hb-tile__act::after { background: color-mix(in srgb, var(--on-accent) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-accent) 60%, transparent); }
html[data-look-tiles="fill"] .hb .hb-tile.is-done .hb-tile__act::before { background: color-mix(in srgb, var(--on-accent) 40%, transparent); }
html[data-look-tiles="symbol"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__mark { display: block; position: absolute; inset-inline-end: -16px; bottom: -22px; z-index: -1; width: 104px; height: 104px; background: var(--text-strong); opacity: 0.075; mask: var(--m) center / contain no-repeat; pointer-events: none; }
html[data-look-tiles="symbol"] .hb .hb-tile__bar i { box-shadow: 0 0 8px var(--tone); }
html[data-look-tiles="number"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__num { display: block; margin-top: auto; padding-top: 12px; font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; letter-spacing: -0.04em; color: var(--tone); font-variant-numeric: tabular-nums; }
html[data-look-tiles="number"] .hb .hb-tile__num small { margin-inline-start: 2px; font-size: 12px; letter-spacing: 0px; color: var(--text-muted); }
html[data-look-tiles="number"] .hb .hb-tile:not(.hb-tile--edit):not(.is-neutral) .hb-tile__name { margin-top: 6px; padding-top: 0px; }
html[data-look-tiles="list"] .hb:not(.is-editing) .hb-grid { grid-template-columns: minmax(0px, 1fr); gap: 6px; }
html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) { --cut: 10px; }
html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__link { min-height: 62px; display: grid; grid-template-columns: auto minmax(0px, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 68px 12px 12px; }
html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__sign { grid-row: 1 / 3; }
html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__sign .hex { --hex-w: 34px; }
html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__name { margin: 0px; padding: 0px; align-self: end; font-size: 15px; }
html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__status { margin: 2px 0px 0px; align-self: start; -webkit-line-clamp: 1; }
html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) .hb-tile__act { top: calc(50% - 18px); inset-inline-end: 12px; width: 40px; height: 36px; }
html[data-look-tiles="list"] .hb .hb-tile:not(.hb-tile--edit) :is(.hb-tile__bar, .hb-tile__segs) { height: 2px; }
@media (min-width: 900px) {
html[data-look-tiles="list"] .hb:not(.is-editing) .hb-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
.hb-nowwrap { position: relative; isolation: isolate; min-width: 0px; }
.hb-nowwrap + .hb-chips { margin-top: -18px; }
html[data-look-now="glow"] .hb .hb-nowwrap::before { content: ""; position: absolute; inset: -34px -18px; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--tone) 26%, transparent), transparent); pointer-events: none; }
html[data-look-now="solid"] .hb .hb-now:not(.is-quiet) { --lk-shine: none; --lk-card-img: none; background-color: var(--tone); backdrop-filter: none; }
html[data-look-now="solid"] .hb .hb-now:not(.is-quiet) :is(.hb-now__eyebrow, .hb-now__title, .hb-now__text, .hb-now__chev) { color: var(--on-accent); }
html[data-look-now="solid"] .hb .hb-now:not(.is-quiet) .hex { --hex-color: var(--on-accent); --hex-stroke: var(--on-accent); }
html[data-look-now="solid"] .hb .hb-now:not(.is-quiet) .hex__icon { filter: invert(1); }
html[data-look-now="solid"] .hb .hb-now__go { --accent: var(--on-accent); --btn-lift: color-mix(in srgb, var(--on-accent) 45%, transparent); color: var(--tone); }
html[data-look-now="solid"] .hb .hb-now__later { --btn-edge: color-mix(in srgb, var(--on-accent) 60%, transparent); --btn-lift: color-mix(in srgb, var(--on-accent) 35%, transparent); --btn-face-hover: color-mix(in srgb, var(--on-accent) 10%, transparent); color: var(--on-accent); }
html[data-look-now="edge"] .hb .hb-now:not(.is-quiet) { --lk-shine: none; --lk-now-img: linear-gradient(135deg,
    transparent calc(var(--cut) * .7071 - .5px),
    var(--tone) calc(var(--cut) * .7071 - .5px) calc(var(--cut) * .7071 + 2px),
    color-mix(in srgb, var(--tone) 18%, transparent) calc(var(--cut) * .7071 + 2px),
    transparent 45%); }
html[data-look-now="edge"] .hb .hb-now:not(.is-quiet)::after { content: ""; position: absolute; inset-inline-start: var(--cut); inset-inline-end: 0px; top: 0px; height: 2px; background: linear-gradient(90deg, var(--tone), transparent 72%); pointer-events: none; }
.hb-day__words, .hb-row__sign { display: none; }
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-day { justify-content: flex-start; column-gap: 24px; flex-wrap: wrap; }
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-day__count { display: none; }
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-day__words { display: inline; font: 500 12px/1 var(--font-mono); color: var(--text-muted); }
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-day__words b { color: var(--text-strong); font-weight: 600; }
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-day__segs i { width: 15px; height: 13px; clip-path: var(--hex-clip); background: color-mix(in srgb, var(--tone) 30%, transparent); }
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-day__segs i.is-done { background: var(--tone); }
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-chips { flex-wrap: wrap; overflow: visible; }
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-chips > li { flex: 0 1 auto; min-width: 0px; max-width: 100%; }
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-chip { max-width: 100%; }
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-chip__label { min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 720px) {
html[data-look-layout="classic"] .hb-chips { flex-wrap: wrap; overflow: visible; }
html[data-look-layout="classic"] .hb-chips > li { flex: 0 1 auto; min-width: 0px; max-width: 100%; }
html[data-look-layout="classic"] .hb-chip { max-width: 100%; }
html[data-look-layout="classic"] .hb-chip__label { min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-row { grid-template-columns: 50px auto minmax(0px, 1fr); }
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-row__sign { display: block; }
html:is([data-look-layout="tidy"], [data-look-layout="time"]) .hb-row:has(.hb-row__sign) .hb-row__dot { display: none; }
.hb-row__sign .hex { --hex-w: 22px; }
.hb-col { display: contents; }
.hb-col > * { min-width: 0px; }
.hb > .hb-day { order: 0; }
.hb-col > .hb-nowwrap, .hb-col > .hb-now { order: 1; }
.hb-col > .hb-chips { order: 2; }
.hb-col > .hb-areas { order: 4; }
.hb-col > .hb-next { order: 5; }
.hb-col > .hb-note { order: 6; }
html[data-look-layout="time"] .hb-col > .hb-next { order: 3; }
@media (min-width: 900px) {
html[data-look-layout] .hb:not(.is-editing) > .hb-col { display: grid; grid-template-columns: minmax(0px, 1fr); gap: 28px; align-content: start; min-width: 0px; }
html[data-look-layout] .hb:not(.is-editing) > .hb-col > * { min-width: 0px; }
html[data-look-layout] .hb:not(.is-editing) > .hb-col--now { grid-area: 2 / 1; }
html[data-look-layout] .hb:not(.is-editing) > .hb-col--areas { grid-area: 2 / 2; }
}
html[data-eink] .hb :is(.hb-now, .hb-chip, .hb-tile:not(.hb-tile--edit), .hb-row, .hb-note__card, .shr-card), html[data-eink] .sheet :is(.sheet-card, .sheet-fold, .sheet-do), html[data-eink] .sheet__panel { box-shadow: none; background-color: var(--surface) !important; background-image: none !important; backdrop-filter: none !important; }

/* ---- styles/pond.css ---- */
body[data-shell="home"], body[data-shell="not-found"] { --accent-app: var(--c-home); --accent-deep: var(--c-home-stroke); }
body[data-shell] .la-pond { display: block; }
html[data-look-light="off"] .la-pond { display: none; }
body[data-shell] .sh-top::before { background: color-mix(in srgb, var(--bg) 94%, transparent); }
html[data-look-line="fade"] body[data-shell] .sh-top__rule { background: linear-gradient(90deg,
    var(--accent-app) 0%,
    color-mix(in srgb, var(--accent-app) 80%, transparent) 32%,
    transparent 100%); }
html[data-look-line="glow"] body[data-shell] .sh-top__rule { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent-app) 55%, transparent),
    0 0 26px 2px color-mix(in srgb, var(--accent-app) 18%, transparent); }
html[data-look-line="hair"] body[data-shell] .sh-top__rule { height: 1px; opacity: 0.85; }
* { --tint-face: color-mix(in srgb, var(--accent-app) var(--btn-tinted), var(--surface)); --tint-hover: color-mix(in srgb, var(--accent-app) var(--btn-tinted-hover), var(--surface)); --tint-edge: color-mix(in srgb, var(--accent-app) var(--btn-tinted-edge), transparent); --tint-lift: color-mix(in srgb, var(--accent-app) var(--btn-tinted-lift), transparent); --tint-ink: var(--accent-app); --tint-glow: none; }
html[data-look-buttons="grey"] * { --tint-face: color-mix(in srgb, rgb(var(--o)) 18%, var(--surface)); --tint-hover: color-mix(in srgb, rgb(var(--o)) 26%, var(--surface)); --tint-edge: transparent; --tint-lift: var(--btn-quiet-lift); --tint-ink: var(--text); }
html[data-look-buttons="glow"] * { --tint-glow: drop-shadow(0 0 7px color-mix(in srgb, var(--accent-app) 50%, transparent)); }
html[data-look-buttons="glass"] * { --tint-face: color-mix(in srgb, rgb(var(--o)) 7%, var(--surface)); --tint-hover: color-mix(in srgb, rgb(var(--o)) 14%, var(--surface)); --tint-edge: rgba(var(--o), .26); --tint-lift: rgba(var(--o), .34); --tint-ink: var(--text-strong); }
html[data-look-buttons="solid"] * { --tint-face: var(--accent-app); --tint-hover: color-mix(in srgb, var(--accent-app) 88%, #fff); --tint-edge: transparent; --tint-lift: var(--accent-deep); --tint-ink: var(--on-accent); }

/* ---- styles/ios.css ---- */
@supports (-webkit-touch-callout: none) {
html, body { touch-action: manipulation; }
}

/* ---- styles/lang.css ---- */
:root { --fs-floor: 0px; }
body { overflow-wrap: break-word; }
/* ---- Website (tools/site/home-build.js) ---- */
html { scrollbar-width: none; scroll-behavior: auto; }
html::-webkit-scrollbar { display: none; }
body * { pointer-events: none !important; cursor: default !important; }
body { -webkit-tap-highlight-color: transparent; user-select: none; }
.skip-link { display: none !important; }
/* die Auftritte der App nur beim ersten Bild – home-look.js setzt la-still */
html.la-still :is(.view, .hb-grid .hb-tile, .hb-now, .hb-tile__bar i) { animation: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }