/* Ivory dial, navy lettering and machined silver, following the approved concept. */
:root {
  --ink: #0c1d38;
  --muted: #3e4758;
  --ivory: #f8f3eb;
  --silver: #b9b5ad;
  --brass: #a47d35;
  --enamel: linear-gradient(135deg, #fffdf7, #f4eee5 65%, #faf7ef);
}
body {
  color: var(--ink);
  font: 16px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: radial-gradient(ellipse at 40% 12%, #fffaf2, transparent 70%), #f5efe7;
  -webkit-tap-highlight-color: transparent;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2392836e' opacity='.18' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
  opacity: .10;
  pointer-events: none;
  z-index: -1;
}
main { max-width: 440px; padding: 27px 17px 116px; }
header small { display: block; margin-bottom: 8px; font: italic 14px Georgia, serif; color: var(--ink); }
h1 { font: 500 clamp(28px, 7.8vw, 36px)/1.12 Georgia, serif; letter-spacing: -1px; }
h2, h3 { font-family: Georgia, serif; font-weight: 500; }
small, .muted { color: var(--muted); }
svg { width: 24px; height: 24px; flex: 0 0 24px; }
button, input, select { color: var(--ink); font: inherit; }
button { border: 1px solid #bcb7ae; box-shadow: inset 0 1px #fff9, 0 1px 2px #15223815; background: var(--enamel); }
button:active { transform: translateY(1px); box-shadow: inset 0 2px 3px #12203a26; }
button:focus-visible, input:focus-visible, select:focus-visible, [role=slider]:focus-visible { outline: 2px solid #a9833d; outline-offset: 3px; }
button:disabled { opacity: .4; cursor: default; }
.day-pill { display: inline; font: inherit; letter-spacing: inherit; }
.day-pill span, .day-pill span:first-child, .day-pill.tomorrow span, .day-pill.tomorrow span:first-child { padding: 0; background: none; color: var(--ink); }
.day-pill span + span::before { content: ' · '; }
/* Date aperture retained with the same metal finish as the sample. */
#day-nav.watch-selector { margin: 17px 0 15px; gap: 8px; padding: 8px; border-radius: 16px; background: repeating-linear-gradient(0deg, #fff3 0 1px, #74797b0d 1px 2px), linear-gradient(155deg, #919795, #fafbf8 13%, #b6b8b4 37%, #e7e8e3 65%, #9b9f9b); box-shadow: inset 0 1px #fff, inset 0 -2px 2px #66706c, 0 2px 0 #c5c4ba, 0 4px 6px #1a253c28; }
#day-nav #date { min-height: 62px; border: 6px solid #173149; border-radius: 11px; padding: 9px 5px; background: linear-gradient(155deg, #eee4d8, #fff9ee 40%, #eae0d3); }
.date-center { font: 500 clamp(18px, 5vw, 25px)/1 Georgia, serif; letter-spacing: .005em; }
#day-nav #today-shortcut { flex-basis: 57px; min-height: 44px; padding: 0 5px; border-radius: 8px; font: 600 15px Georgia, serif; }
.watch-crown { flex-basis: 39px; height: 59px; border-radius: 9px; border-width: 3px; }
#day-nav .watch-crown button { color: #132c4055; }
/* The summary is a horizontal inset panel rather than a stack of headings. */
.hero { border: 1px solid #bdb5a8; border-radius: 10px; background: linear-gradient(140deg, #fffdf7c9, #f2ece3a8); box-shadow: inset 0 1px #fff, 0 2px 4px #1d273510; padding: 14px; margin: 14px 0 19px; }
.hero:has(.glance-copy) { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.glance-label { font: italic 18px/1.2 Georgia, serif; flex: 0 0 86px; }
.glance-copy { min-width: 0; border-left: 1px solid #c9c0b3; padding-left: 15px; }
.glance-copy p { font-size: 12px; line-height: 1.5; font-weight: 550; overflow-wrap: anywhere; }
.hero p + p { margin-top: 2px; }
.track { padding-left: 4px; background: repeating-linear-gradient(0deg, transparent 0 9px, #243247aa 9px 10px, transparent 10px 19px) 60px 0 / 8px 100% no-repeat; }
.track::before { left: 64px; width: 1px; background: #4f5965; box-shadow: 1px 0 #fff9; }
.track .row { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding: 5px 0; }
.track .time { padding-top: 0; font: 500 15px/1.3 Georgia, serif; color: var(--ink); background: transparent; white-space: nowrap; }
.card { min-height: 58px; padding: 4px 5px 4px 6px; gap: 0; border: 1px solid #718468; border-radius: 10px; background: linear-gradient(130deg, #fffdf7, #f1f0e6); box-shadow: inset 0 1px #fff9, 0 2px 3px #1a2b321c; }
.card.fixed { padding: 4px 5px 4px 6px; background: linear-gradient(130deg, #fcf9ff, #e9e4f0); border-color: #9782ad; }
.card.habit { background: linear-gradient(130deg, #f3f8ff, #dce8f6); border-color: #688bb6; }
.card .edit { display: flex; align-items: center; gap: 10px; padding: 6px 4px; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
.card .edit svg { width: 21px; height: 21px; flex-basis: 21px; color: #2a3b31; }
.card.fixed .edit svg { color: #192b43; }
.card.habit .edit svg { color: #193d6c; }
.task-copy { display: block; min-width: 0; }
.task-title { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.task-title strong { font-weight: 650; }
.task-copy > .muted { display: block; font-size: 12px; font-weight: 400; margin-top: 3px; }
.habit-badge { font-size: 9px; font-weight: 500; line-height: 1; padding: 2px 5px; margin-left: 5px; color: #1c4175; border: 1px solid #567aab; background: transparent; border-radius: 10px; vertical-align: 1px; }
.card .check { display: grid; place-items: center; flex: 0 0 36px; min-width: 36px; min-height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.completion-ring { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid #343e35; border-radius: 50%; font-size: 14px; line-height: 1; }
.check[aria-pressed=true] .completion-ring { background: #213b33; color: #fffaf1; }
.done .edit { color: #626d63; }
.card .swipe button { border-radius: 7px; background: #fff6; box-shadow: none; }
.collapsed-stack .card { box-shadow: -3px 3px #f8f3eb, -6px 6px #aaa99f; }
.day-marker { justify-self: stretch; min-height: 34px; padding: 4px 7px; font: italic 12px Georgia, serif; border: 0; background: transparent; box-shadow: none; color: #696b63; }
.gap { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 6px 9px; font: italic 14px Georgia, serif; color: #454c5a; border: 1px dashed #b6b0a4; border-radius: 9px; background: #fffaf329; }
.gap:empty { padding: 0; min-height: 0; border: 0; }
.gap-add { border: 1px solid #aaa79f; border-radius: 50%; min-height: 27px; min-width: 27px; width: 27px; height: 27px; font: 23px/1 Georgia, serif; background: linear-gradient(#fffdf8, #e7e3db); box-shadow: inset 0 1px #fff, 0 1px 2px #15253b18; color: var(--ink); }
/* Start/end duration bands are separate from the fine dial rail. */
.duration-bar { width: 5px; border-radius: 3px; background: linear-gradient(90deg, #263d31, #6c7c62, #324b37); box-shadow: -3px 0 5px #162f2b30, inset 1px 0 #fff8; }
.duration-bar.appointment { background: linear-gradient(90deg, #574469, #a28cb4, #665077); }
.duration-bar.habit-line { background: linear-gradient(90deg, #264971, #85a9cd, #365f89); }
.overlap-bar { left: 64px; }
.duration-bar.drag-target { box-shadow: 0 0 0 3px #fff9, -3px 0 6px #22354d44; }
.now-line { border-color: #21354c; border-top-width: 1px; z-index: 2; }
.now-line::before { content: ''; position: absolute; left: 55px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff1bd, #b58b43 60%, #67491f); box-shadow: 0 1px 2px #0004; }
.now-line::after { content: ''; position: absolute; top: -4px; left: 73px; border-left: 8px solid #21354c; border-block: 4px solid transparent; }
.now-line span { color: var(--ink); font-size: 10px; background: #f8f3eb; border-radius: 3px; padding: 2px 4px; }
.drag-preview { background: #173b2e; color: #fffaf0; border: 1px solid #afb59e; }
/* Every destination has the same icon/label hierarchy. */
.dock { max-width: 440px; margin: auto; align-items: center; justify-content: space-around; gap: 5px; padding: 8px 9px max(12px, env(safe-area-inset-bottom)); border: 1px solid #b8b1a4; border-bottom: 0; border-radius: 23px 23px 0 0; background: linear-gradient(#fffaf3f2, #f0ebe2f5); box-shadow: 0 -2px 10px #1523380a, inset 0 1px #fff; backdrop-filter: blur(14px); }
.dock button { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 59px; padding: 6px 1px; font-size: 11px; font-weight: 400; white-space: nowrap; color: var(--ink); border: 1px solid transparent; border-bottom: 2px solid transparent; border-radius: 12px; background: transparent; box-shadow: none; }
.dock svg { width: 23px; height: 23px; }
.dock button[aria-pressed=true] { color: var(--ink); border-bottom-color: #a0792e; background: linear-gradient(#e2dcd0, #f8f3e8); }
.dock #add { flex-grow: 1.12; color: #fffaf1; border: 1px solid #a3844c; background: linear-gradient(150deg, #2f4564, #10213c 75%); box-shadow: inset 0 1px #fff5, 0 0 0 1px #e4d8be, 0 2px 4px #0d20312b; font-weight: 550; touch-action: none; }
#notice { bottom: 90px; background: #142b45; color: #fffaf1; border: 1px solid #b9a473; }
/* New task follows the sample as a complete, quiet page. */
dialog { color: var(--ink); background: var(--ivory); border: 1px solid #b6aea0; border-radius: 19px; padding: 23px; box-shadow: inset 0 1px #fff, 0 18px 70px #0a172b50; max-height: 90dvh; }
dialog::backdrop { background: #0a172b66; backdrop-filter: blur(5px); }
dialog h2 { margin: 0 0 22px; font: 500 32px/1.1 Georgia, serif; letter-spacing: -.6px; }
#editor { position: fixed; inset: 0; width: 100%; max-width: 440px; height: 100dvh; max-height: 100dvh; margin: 0 auto; padding: max(58px, env(safe-area-inset-top)) 19px max(32px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; background: radial-gradient(ellipse at 50% 35%, #fffaf2, transparent 75%), #f6f0e8; }
#editor::backdrop { background: #f0e9dfe6; }
#editor h2 { font-size: 39px; margin-bottom: 30px; }
.close-button { position: absolute; top: 19px; right: 19px; display: grid; place-items: center; width: 35px; height: 35px; min-height: 35px; padding: 0; border-radius: 50%; background: var(--enamel); }
.close-button svg { width: 20px; height: 20px; }
#editor .field-row { display: flex; align-items: center; gap: 0; min-height: 61px; margin: 0 0 9px; padding: 0 12px; border: 1px solid #b7b1a8; border-radius: 10px; background: linear-gradient(140deg, #fffaf42e, #eee8de4d); box-shadow: inset 0 1px #fff8, 0 1px 3px #26324708; }
.field-name { display: flex; align-items: center; gap: 11px; flex: 0 0 46%; border-right: 1px solid #beb7aa; padding: 5px 9px 5px 0; font-size: 14px; white-space: nowrap; }
.field-name svg { width: 21px; height: 21px; flex-basis: 21px; }
#editor #title, #editor #task-date, #editor #start { flex: 1; width: 0; min-width: 0; max-width: 100%; height: 59px; min-height: 44px; margin: 0; padding: 8px 0 8px 15px; font: 500 16px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: transparent; border: 0; box-shadow: none; border-radius: 3px; color: var(--ink); }
#editor #title::placeholder { color: #747786; font-weight: 400; }
#editor input::-webkit-date-and-time-value { text-align: left; }
#editor input[type=date]::-webkit-calendar-picker-indicator, #editor input[type=time]::-webkit-calendar-picker-indicator { margin: 0; padding: 0; width: 16px; opacity: .6; }
.suggestions { margin-bottom: 9px; gap: 5px; }
.suggestions:empty { display: none; }
.suggestions button { padding: 5px 8px; min-height: 35px; border-radius: 8px; font-size: 12px; }
.duration-panel { padding: 13px 14px 18px; margin-top: 16px; border: 1px solid #b7b0a5; border-radius: 12px; background: linear-gradient(140deg, #fffaf455, #f0e9df40); box-shadow: inset 0 1px #fff9, 0 2px 4px #1a27320c; }
.duration-panel h3 { margin: 0; font-size: 17px; }
.duration-value { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#duration-readout { display: block; min-height: 64px; font: 500 43px/1.45 Georgia, serif; text-align: center; white-space: nowrap; }
.duration-value button { width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; color: #555d64; background: transparent; box-shadow: none; border-color: #c7bfb2; font-size: 20px; }
.duration-control { margin-top: 3px; }
.duration-ruler { position: relative; height: 70px; margin: 4px 0 0; overflow: hidden; border: 4px ridge #c5c5bf; border-radius: 16px; background: repeating-linear-gradient(0deg, #fff5 0 1px, #68737b0a 1px 2px), linear-gradient(90deg, #a5abaa, #edece6 16%, #faf9f3 50%, #dbddd7 85%, #89918f); box-shadow: inset 0 2px 6px #24304040, 0 0 0 1px #969e9c, 0 0 0 3px #fdfbf5, 0 2px 3px 3px #303a3c25; touch-action: pan-y; }
.duration-ruler::before { content: ''; position: absolute; inset: 13px 0 auto; height: 14px; border-radius: 0; transform: none; background: repeating-linear-gradient(90deg, #23314d 0 1px, transparent 1px 16px); background-position: calc(50% + var(--offset, 0px)) 0; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); box-shadow: none; }
.duration-ruler::after { content: ''; position: absolute; left: 50%; top: -1px; bottom: auto; height: 18px; width: 13px; transform: translateX(-50%); border: 0; border-radius: 0; clip-path: polygon(0 0,100% 0,50% 100%); background: linear-gradient(110deg, #fff0bd, #b38a45 65%, #896126); box-shadow: none; }
.duration-labels { position: absolute; inset: 0; transform: translateX(var(--offset, 0px)); pointer-events: none; }
.ruler-label { position: absolute; top: 33px; font: 14px/1 Georgia, serif; white-space: nowrap; transform: translateX(-50%); }
.habit-choice { display: flex; align-items: flex-start; gap: 11px; margin: 24px 2px 28px; }
#habit { display: inline-block; flex: 0 0 23px; width: 23px; height: 23px; min-height: 23px; margin: 1px 0 0; padding: 0; accent-color: #326cbd; }
.habit-choice strong { display: block; font-size: 16px; font-weight: 650; line-height: 1.4; }
.habit-choice small { display: block; font-size: 12px; margin-top: 2px; }
.actions { gap: 10px; }
.primary { border: 1px solid #6b7581; color: #fffaf0; background: linear-gradient(155deg, #344660, #11233e 65%, #07172e); box-shadow: inset 0 1px #ffffff50, 0 0 0 2px #e4dfd3, 0 0 0 3px #a6a69e, 0 3px 5px #11233e25; }
.editor-actions { display: flex; flex-direction: column; gap: 16px; margin: 0 3px; }
.editor-actions > button { min-height: 48px; border-radius: 10px; }
.editor-actions .primary { font: 500 25px Georgia, serif; min-height: 53px; }
.editor-actions #cancel { font-size: 18px; }
#edit-actions:empty { display: none; }
#edit-actions .swipe { justify-content: center; }
#edit-actions button { min-height: 44px; }
input, select { background: var(--enamel); border: 1px solid #b8b0a3; border-radius: 9px; box-shadow: inset 0 1px 2px #37322b08; }
#preferences label { font-size: 13px; color: var(--muted); margin: 13px 0; }
#preferences input, #preferences select { margin-top: 5px; }
.overlap { margin: 8px 0; color: #8b5321; font-size: 12px; }
.overlap:empty, #error:empty { display: none; }
#error { color: #983d35; font-size: 13px; margin: 9px 0; }
/* The stats dial follows the fine chapter ring and satin face in the reference. */
body[data-view=stats] header { justify-content: center; text-align: center; margin-bottom: 7px; }
body[data-view=stats] header small { display: none; }
body[data-view=stats] h1 { font-size: 42px; }
#stats-date { margin-top: 5px; font-size: 13px; letter-spacing: .15em; }
.stats-layout { gap: 11px; }
.chronograph-panel { border: 0; padding: 0 9px 3px; background: none; box-shadow: none; text-align: center; }
.chronograph { position: relative; width: min(300px, 100%); aspect-ratio: 1; margin: 0 auto; filter: drop-shadow(0 4px 3px #12203920); }
.chronograph > svg { display: block; width: 100%; height: 100%; }
.dial-face { position: absolute; inset: 28%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dial-face strong { font: 500 clamp(35px, 10vw, 44px)/1.1 Georgia, serif; letter-spacing: -1.5px; white-space: nowrap; }
.dial-face span { margin-top: 8px; font: italic 20px Georgia, serif; }
.stats-totals { display: flex; justify-content: center; margin: 2px 0 8px; padding: 0; gap: 0; }
.stats-totals > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; }
.stats-totals > div + div { border-left: 1px solid #c9c0b3; }
.stats-totals span { font: 17px Georgia, serif; }
.stats-totals strong { font: 500 31px/1.1 Georgia, serif; }
.stats-totals small { margin-top: 5px; font-size: 10px; color: #666977; }
.stat-card { padding: 13px 15px; border: 1px solid #7d8a70; border-radius: 10px; background: linear-gradient(140deg, #fffdf5, #f0eee5); box-shadow: inset 0 1px #fff, 0 2px 3px #2230440b; }
.stat-time { display: flex; align-items: center; gap: 12px; }
.stat-time > svg { width: 25px; height: 25px; flex-basis: 25px; }
.stat-time .stat-copy { border-left: 1px solid #bcb7aa; padding-left: 11px; flex: 1; }
.stat-card h2 { font: 500 14px/1.25 Georgia, serif; }
.stat-amount { text-align: center; }
.stat-value { display: block; font: 500 30px/1 Georgia, serif; white-space: nowrap; }
.stat-amount small { display: block; margin-top: 5px; font-size: 10px; }
.stat-done, .stat-deferred { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; min-height: 84px; }
.stat-done > svg, .stat-deferred > svg { grid-row: 1 / 3; }
.stat-done .stat-copy, .stat-deferred .stat-copy { grid-column: 2; grid-row: 2; text-align: center; }
.stat-done h2, .stat-deferred h2 { font-family: inherit; font-size: 12px; }
.stat-done .stat-amount, .stat-deferred .stat-amount { grid-column: 2; grid-row: 1; }
.stat-deferred .stat-amount small { font-size: 8px; }
.stat-deferred { border-color: #88917b; }
.habit-stat { display: flex; align-items: center; gap: 10px; padding: 12px; min-height: 66px; border: 1px solid #6183ad; border-radius: 9px; background: linear-gradient(130deg, #f4f9ff, #dfe8f4); box-shadow: inset 0 1px #fff; color: #15345e; }
.habit-description { min-width: 0; flex: 1; }
.habit-description strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.habit-description small { display: block; margin-top: 4px; font-size: 10px; }
.habit-week { display: flex; gap: 5px; border-left: 1px solid #9eb0c4; padding-left: 10px; }
.habit-day { display: flex; align-items: center; flex-direction: column; gap: 5px; font-size: 8px; }
.habit-dot { display: grid; place-items: center; border: 1px solid #2c4c71; border-radius: 50%; width: 12px; height: 12px; font-size: 9px; }
.habit-dot.filled { color: white; background: #396eb2; border-color: #396eb2; }
.calendar-grid [aria-pressed=true] { background: #193751; color: #fffaf2; }
.calendar-grid .outside { color: #777a7e; }
.calendar-controls { align-items: center; }
.calendar-controls input, .calendar-controls select { margin: 0; }
@media(min-width: 600px) {
  body { background-color: #eae4da; }
  main { margin: 20px auto 0; padding-top: 27px; background: radial-gradient(ellipse at 30% 10%, #fffaf4, transparent), #f8f3eb; min-height: calc(100dvh - 20px); box-shadow: 0 0 30px #1830420c; }
  #editor { height: min(850px, 100dvh); margin: auto; border-radius: 20px; border: 1px solid #b9b1a5; }
}
@media(max-width: 360px) {
  main { padding-inline: 12px; }
  #day-nav.watch-selector { padding: 6px; gap: 6px; }
  #day-nav #date { min-height: 56px; border-width: 5px; }
  #day-nav #today-shortcut { flex-basis: 47px; font-size: 13px; }
  .watch-crown { flex-basis: 32px; height: 52px; }
  .date-center { font-size: 17px; }
  .hero:has(.glance-copy) { gap: 10px; padding-inline: 10px; }
  .glance-label { flex-basis: 71px; font-size: 16px; }
  .glance-copy { padding-left: 9px; }
  .track .row { grid-template-columns: 64px minmax(0,1fr); gap: 6px; }
  .track .time { font-size: 13px; }
  .card .edit { gap: 7px; }
  .card .edit svg { width: 17px; height: 17px; flex-basis: 17px; }
  .task-title { font-size: 12px; }
  .task-copy > .muted { font-size: 10px; }
  #editor { padding: 51px 14px 28px; }
  .field-name { gap: 7px; font-size: 12px; flex-basis: 44%; }
  #editor #title, #editor #task-date, #editor #start { font-size: 14px; padding-left: 10px; }
  .habit-week { gap: 3px; padding-left: 7px; }
  .habit-stat { gap: 7px; padding: 10px; }
}
@media(prefers-reduced-motion: reduce) { * { transition: none !important; } }
.stat-card.chronograph-panel { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0 9px 3px; }
.stat-done .stat-value, .stat-deferred .stat-value { font-size: 36px; }
.stat-copy > small { display: block; font-size: 9px; color: #626a78; margin-top: 3px; text-align: center; }
/* Match the reference's readable scale within the phone viewport. */
.task-title { font-size: 17px; }
.task-copy > .muted { font-size: 13px; }
.card { min-height: 64px; }
.card .edit { gap: 11px; }
.card .edit svg { width: 23px; height: 23px; flex-basis: 23px; }
.glance-copy p { font-size: 14px; }
.track .time { font-size: 16px; }
.dock button { font-size: 12px; }
.field-name { font-size: 16px; }
#editor #title, #editor #task-date, #editor #start { font-size: 18px; }
.habit-choice strong { font-size: 18px; }
.habit-choice small { font-size: 13px; }
.stat-time h2 { font-size: 16px; }
.stat-time .stat-value { font-size: 33px; }
.stat-done h2, .stat-deferred h2 { font-size: 14px; }
.habit-description strong { font-size: 15px; }
.habit-description small { font-size: 12px; }
.habit-week { gap: 6px; }
.habit-day { font-size: 9px; }
.habit-dot { width: 14px; height: 14px; }
@media(max-width: 360px) {
  .task-title { font-size: 14px; }
  .task-copy > .muted { font-size: 11px; }
  .card .edit svg { width: 18px; height: 18px; flex-basis: 18px; }
  .glance-copy p { font-size: 12px; }
  .track .time { font-size: 13px; }
  .field-name { font-size: 13px; }
  #editor #title, #editor #task-date, #editor #start { font-size: 15px; }
  .stat-time h2 { font-size: 13px; }
  .stat-time .stat-value { font-size: 27px; }
  .habit-week { gap: 3px; }
}
.date-center { font-size: clamp(18px, 6.1vw, 28px); }
@media(max-width:360px) { .date-center { font-size: 18px; } }

/* Compact aperture and engraved weekday inset. */
body[data-view=day] #heading{display:none}
body[data-view=day] #day-nav{margin-top:7px}
#day-nav #date{display:flex;align-items:center;gap:8px;padding:5px 7px;min-width:0}
.date-day{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 37px;align-self:stretch;border-right:1px solid #b9a984;padding-right:7px;color:#8b682b;text-shadow:0 1px #fff9;box-shadow:1px 0 #fff8}
.date-weekday{font:600 13px/1.3 Georgia,serif;letter-spacing:.06em}
.date-today{font:10px/1.5 Georgia,serif;color:#6d6556}
.date-center{flex:1;white-space:nowrap;font-size:clamp(15px,4.7vw,21px);letter-spacing:0}
.sky-icon{display:inline-block;font-style:normal;font-size:1.15em;vertical-align:middle}
.overnight-band{height:22px;display:flex;align-items:center;justify-content:flex-end}
.overnight-toggle{min-height:22px;padding:2px 7px;font:italic 11px Georgia,serif;background:transparent;border:0;box-shadow:none;color:#6b6b65}
.habit-choice .habit-badge{font-size:14px;font-weight:600;line-height:1.2;padding:3px 8px;vertical-align:1px;margin-left:2px}
.manage-link{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left}
.managed-habit{margin-top:15px;padding:13px;border:1px solid #8ba2ba;border-radius:12px;background:linear-gradient(130deg,#f7fbff,#e2ebf5)}
.managed-habit strong,.managed-habit small{display:block;overflow-wrap:anywhere}
.managed-habit small{margin-top:5px;font-size:12px}
.managed-habit .actions{margin-top:10px;gap:7px}
.managed-habit button{padding:7px 11px;font-size:14px}
#habit-list{max-height:50dvh;overflow:auto;margin-top:15px}
#habit-manager>p{font-size:14px;line-height:1.5}
#habit-editor label{font-size:14px}#habit-editor input,#habit-editor select{margin-top:5px}
#habit-error{color:#983d35}
@media(max-width:360px){.date-day{flex-basis:30px;padding-right:5px}.date-weekday{font-size:11px}.date-center{font-size:14px}#day-nav #date{gap:5px;padding-inline:4px}}

/* Illuminated Today key and deliberate reset controls. */
#day-nav #today-shortcut[aria-current=date]{color:#285c39;background:linear-gradient(155deg,#f5fff1,#d9edcd 45%,#b8d6ac);text-shadow:0 0 5px #b7ff88,0 1px #fff;box-shadow:inset 0 1px 2px #fff,inset 0 -2px 2px #5e7c5980,0 2px 3px #102b4030,0 0 7px #b6e69688}
.hero:has(.glance-copy){flex-wrap:wrap}.reset-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;flex-basis:100%;border-top:1px solid #c9c0b3;padding-top:8px}
button.reset-day{color:#9d302d;border:1px solid #bd8177;background:linear-gradient(#fff9f3,#f2dfd7);font-size:13px;padding:8px 11px;min-height:38px}.undo-reset{font-size:12px;min-height:38px;padding:7px 10px}
button:disabled{opacity:.45;cursor:default}.reset-help{font-size:14px;line-height:1.5;margin:12px 0}.reset-row{margin-top:12px;padding:12px;border:1px solid #c9c0b3;border-radius:9px}.reset-row strong,.reset-row small{display:block;overflow-wrap:anywhere}.reset-row small{margin-top:5px;line-height:1.5}.reset-row label{display:flex;align-items:center;gap:12px;font-size:13px;margin:8px 0 0}.reset-row input{width:90px;margin-left:auto}#reset-results{max-height:42dvh;overflow:auto}#reset-overflow,.fixed-choice{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.4}#reset-overflow input,.fixed-choice input{width:20px;flex:0 0 20px}#reset-error{color:#9d302d;font-size:14px;margin-top:12px}#reset-confirm p,#reset-undo-confirm p{margin-top:12px;line-height:1.5;font-size:14px}
.track .card.picked-up{opacity:.22;transform:none;outline:none}.drag-card{position:fixed;z-index:30;pointer-events:none;box-shadow:0 8px 22px #202b2450;outline:2px solid #557c64;touch-action:none}.drag-card button{pointer-events:none}.drag-preview{z-index:31}.drag-early{min-height:76px}
.hero:has(.glance-copy){display:grid;grid-template-columns:86px minmax(0,1fr);gap:6px 14px;align-items:center}.hero .glance-label{grid-column:1;grid-row:1}.hero .glance-copy{grid-column:2;grid-row:1 / span 2;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.hero .reset-controls{grid-column:1;grid-row:2;border:0;padding:0;gap:4px}.hero .reset-day{font-size:12px;padding:6px 8px;min-height:32px}.hero .undo-reset{font-size:11px;padding:5px;min-height:30px}

/* Fixed aperture: the engraved separator is part of the face, never the text. */
#day-nav #date .date-day{box-sizing:border-box;flex:0 0 44px;width:44px;min-width:44px;max-width:44px;padding-right:7px;overflow:hidden}
#day-nav #date .date-weekday{white-space:nowrap;text-align:center;width:100%}
#day-nav #today-shortcut[aria-current=date]{color:#45964e;background:var(--enamel);text-shadow:0 0 3px #83d86c66,0 1px #fff;box-shadow:inset 0 1px #fff9,0 1px 2px #15223815}
.hero:has(.glance-copy){display:flex;flex-wrap:nowrap;gap:14px}.hero .glance-label{flex:0 0 auto}.hero .glance-copy{display:block}
.day-end-controls{display:flex;justify-content:flex-end;gap:9px;border:0;padding:9px 0 2px;margin:0 0 12px}
.day-end-controls button.reset-day{color:#6e4540;min-height:38px;border:1px solid #a8a49b;border-radius:9px;background:repeating-linear-gradient(0deg,#ffffff38 0 1px,#646a6808 1px 2px),linear-gradient(155deg,#fcfcf8,#c9cbc7 54%,#edece6);box-shadow:inset 0 1px #fff,inset 0 -2px 2px #777a7655,0 2px 3px #10223820;font:600 12px Georgia,serif;letter-spacing:.02em}
.day-end-controls button.reset-day::before{content:'↻';display:inline-block;margin-right:7px;color:#95645d;font-size:16px}
.statistics-controls{margin:18px 0 16px;padding:9px;border:1px solid #a6aaa5;border-radius:14px;background:repeating-linear-gradient(0deg,#fff3 0 1px,#74797b0d 1px 2px),linear-gradient(145deg,#949a97,#f7f8f3 17%,#bfc3be 54%,#e6e7e0);box-shadow:inset 0 1px #fff,inset 0 -2px 2px #7e857f,0 3px 5px #15223820}
.statistics-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.statistics-tabs button{min-width:0;min-height:42px;padding:8px 3px;border-radius:7px;font:600 14px Georgia,serif;letter-spacing:.025em;background:var(--enamel);color:var(--ink)}
.statistics-tabs button[aria-pressed=true]{color:#f5ead3;border-color:#142c3d;background:linear-gradient(145deg,#2f4e62,#10283b);box-shadow:inset 0 2px 4px #0007,0 1px #fff8;text-shadow:0 1px #000}
.statistics-navigation{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:5px;margin-top:8px;align-items:stretch}
.statistics-navigation>button{padding:5px;min-height:48px;border-radius:8px;font:24px Georgia,serif}
.statistics-navigation>.statistics-date{font:500 15px Georgia,serif;border:3px solid #203b4d;background:linear-gradient(150deg,#e8dfd0,#fff9ee 40%,#eee5d6);box-shadow:inset 0 2px 4px #655c4330;text-shadow:0 1px #fff;line-height:1.4}
.statistics-today{display:block;min-height:32px;margin:7px auto 0;padding:3px 15px;font:600 12px Georgia,serif;color:#397546;border-radius:6px}
.statistics-comparison,.period-statistics{border:1px solid #bdb5a8;border-radius:12px;padding:16px;margin:0 0 16px;background:var(--enamel);box-shadow:inset 0 1px #fff,0 2px 5px #122a3912}
.statistics-comparison h2{font-size:18px;margin:0 0 8px}.statistics-note{font-size:12px;line-height:1.55;color:#5b5c58;margin:8px 0}
.statistics-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:12px;font-variant-numeric:tabular-nums}
.statistics-table th,.statistics-table td{padding:9px 3px;border-top:1px solid #c9c0b3;text-align:right}.statistics-table th:first-child{text-align:left;font-weight:500}.statistics-table thead th{font:11px Georgia,serif;color:#5f604f}
.statistics-eyebrow{text-align:center;font:11px Georgia,serif;letter-spacing:.16em;color:#75603a;margin:3px 0 16px}
.period-dial{--progress:0%;width:202px;height:202px;padding:16px;margin:0 auto 20px;border:7px ridge #d2d2c8;border-radius:50%;background:conic-gradient(#1d3b51 var(--progress),#ddd9ce 0);box-shadow:0 3px 5px #122a3920,inset 0 0 0 1px #746e5e}
.period-dial-face{height:100%;border-radius:50%;border:1px solid #b5a991;display:flex;flex-direction:column;justify-content:center;align-items:center;background:repeating-radial-gradient(circle,#faf5e9 0 2px,#e1d8c755 2px 2.5px,#faf5e9 2.5px 4px);box-shadow:inset 0 2px 6px #6c5d3c20}
.period-dial-face strong{font:500 35px Georgia,serif;letter-spacing:-1px}.period-dial-face span{font:italic 13px Georgia,serif;margin-top:6px;color:#75603a}
.period-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:12px 0;border-top:1px solid #bdb5a8;border-bottom:1px solid #bdb5a8;gap:6px;text-align:center}
.period-totals strong,.period-totals span{display:block}.period-totals strong{font:26px Georgia,serif;margin-bottom:6px}.period-totals span{font-size:10px;line-height:1.3;color:#50574f}
.chart-title{font-size:18px;margin:22px 0 12px}.statistics-chart{display:flex;gap:5px;overflow-x:auto;padding:3px 2px 10px;overscroll-behavior-inline:contain;scrollbar-width:thin}
.statistics-column{flex:1 0 33px;min-width:33px;max-width:55px;min-height:157px;padding:3px 0;background:transparent;border:0;border-radius:5px;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;color:var(--ink)}
.statistics-column .chart-number{font-size:9px;height:20px;white-space:nowrap}.chart-track{height:106px;width:16px;position:relative;border-radius:3px;background:repeating-linear-gradient(to top,#d8cdbd 0 1px,transparent 1px 26px),#e9e3d7;box-shadow:inset 1px 1px 2px #7b6e5233;display:flex;align-items:flex-end;overflow:hidden}.chart-bar{display:block;width:100%;background:linear-gradient(90deg,#183348,#4b6a7e 45%,#183348);border-top:1px solid #c0a363;border-radius:2px 2px 0 0;min-height:0}.chart-label{font:10px Georgia,serif;margin-top:8px}.no-data .chart-track{background:repeating-linear-gradient(135deg,#ebe6dc 0 4px,#d4ccbe 4px 5px);opacity:.55}.no-data .chart-number{color:#888477}
@media(max-width:360px){#day-nav #date .date-day{flex-basis:36px;width:36px;min-width:36px;max-width:36px;padding-right:5px}.statistics-comparison,.period-statistics{padding:12px}.statistics-navigation>.statistics-date{font-size:13px}.statistics-column{flex-basis:30px;min-width:30px}}
.settings-menu{display:grid;gap:12px;margin:24px 0}.settings-menu button{font:18px Georgia,serif;min-height:58px;background:linear-gradient(145deg,#fffdf7,#dedbd2);border:1px solid #b2aea3;box-shadow:inset 0 1px #fff,0 2px 4px #15223822}
.ao-badge{display:inline-block;background:#eee3c9;border:1px solid #b4975e;border-radius:10px;color:#725a2c;padding:2px 6px;font:600 11px system-ui}.goal-statistics{margin-top:20px}.goal-statistics details{margin:14px 0;border:1px solid #a6a79e;border-radius:12px;background:var(--enamel);padding:15px}.goal-statistics summary{font:20px Georgia,serif;cursor:pointer}.goal-stat-row{padding:13px 0;border-top:1px solid #cdc5b5;margin-top:12px}.goal-stat-row strong,.goal-stat-row small{display:block}.goal-stat-row small{font-size:12px;line-height:1.5;margin-top:6px}.goal-stat-row button{font-size:12px;margin-top:8px}.objective-card{background:linear-gradient(135deg,#fffaf0,#e9dec8);border-color:#b9a274}.objective-card button{margin:10px 8px 0 0}#editor{padding-top:32px}.fixed-choice{margin:10px 0}#objective-options{padding:0 12px 12px;border:1px solid #c6b383;border-radius:10px}#objective-options label{font-size:13px}.dial-face small{font:12px Georgia,serif;margin-top:8px}.dial-face strong{font-size:32px}
.day-end-controls button.reset-day{position:relative;min-height:74px;min-width:100px;padding:16px;border:7px ridge #c4c7c6;border-radius:38px;background:radial-gradient(ellipse at 30% 12%,#96aebd88,transparent 47%),linear-gradient(150deg,#38556d,#0c2337 70%);color:#f8f0df;box-shadow:0 5px 0 #0b1720,0 8px 10px #15223866,inset 0 2px 3px #fff8,inset 0 -5px 6px #0008;text-shadow:0 1px 2px #000;transition:transform .1s,box-shadow .1s}.day-end-controls button.reset-day::before{color:#d6bf82}.day-end-controls button.reset-day:active{transform:translateY(4px);box-shadow:0 1px 0 #0b1720,0 2px 4px #15223855,inset 0 2px 7px #0009}.day-end-controls{padding:15px 0 10px}
/* Captive mechanical pusher: a silver case surrounding a domed navy cap. */
.day-end-controls button#reset-day{position:relative;isolation:isolate;min-width:100px;min-height:62px;padding:13px 19px;border:7px solid #bbc1c2;border-radius:50%;color:#fff7e5;background:radial-gradient(ellipse at 30% 12%,#8196ad 0%,#314e6d 25%,#142b46 56%,#071628 85%);box-shadow:0 0 0 1px #737c82,0 2px 0 2px #f4f4ed,0 5px 0 2px #7a858d,0 9px 9px #14223650,inset 0 2px 2px #eef7ff9c,inset 0 -5px 4px #030b1be6;font:600 12px Georgia,serif;text-shadow:0 1px 2px #000;transition:transform .12s,box-shadow .12s;margin-bottom:8px}
.day-end-controls button#reset-day::before{content:'';position:absolute;inset:4px 8px 48%;border-radius:50%;background:linear-gradient(160deg,#ffffff63,#fff0);pointer-events:none}
.day-end-controls button#reset-day:active{transform:translateY(4px);box-shadow:0 0 0 1px #737c82,0 1px 0 2px #b8bfc3,0 3px 5px #14223660,inset 0 3px 7px #020914,inset 0 1px #e9f5ff50}
#editor{padding-top:28px}#editor h2{font-size:32px;margin-bottom:16px}#editor .habit-choice{margin:13px 2px;align-items:center}#editor .habit-choice strong{font-size:15px}#editor .habit-choice small{font-size:12px}#objective-linked{display:inline-block;width:23px;height:23px;min-height:23px;flex:0 0 23px;accent-color:#173956;padding:0;margin:0}.objective-badge{display:inline-block;border:1px solid #a18a56;color:#65522f;border-radius:20px;font:600 11px system-ui;padding:2px 6px;margin-left:5px;white-space:nowrap}.settings-menu-buttons{display:grid;gap:15px;margin:22px 0}.settings-menu-buttons button{min-height:62px;text-align:left;padding:16px 20px;border:1px solid #989e9f;background:linear-gradient(155deg,#fffdf4,#d1d3cf 55%,#eeeae0);box-shadow:inset 0 1px #fff,inset 0 -2px 2px #68778140,0 3px 5px #10223820;font:20px Georgia,serif;color:#173148}.target-toggle{display:flex;gap:10px;align-items:center}.target-toggle input{width:22px;min-height:22px;flex:0 0 22px;accent-color:#173956}.target-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.target-fields label{min-width:0}.goal-statistics{display:grid;gap:16px;margin-top:18px}.goal-panel{padding:18px;border:1px solid #b9b5aa;border-radius:16px;background:linear-gradient(145deg,#fffaf0,#ece6db);box-shadow:inset 0 1px #fff,0 3px 6px #132b4020}.goal-panel h2{font:24px Georgia,serif;margin-bottom:10px}.goal-row{display:flex;gap:8px;align-items:center;border-top:1px solid #c9c5ba;padding:10px 0}.goal-detail{flex:1;display:block;width:100%;min-width:0;text-align:left;background:transparent;padding:8px 0;border:0;box-shadow:none;overflow-wrap:anywhere}.goal-detail strong,.goal-detail small{display:block}.goal-detail strong{font-size:16px}.goal-detail small{font-size:12px;margin-top:5px;line-height:1.5}.goal-add{flex:0 0 44px;min-width:44px;font-size:24px;color:#173956;background:linear-gradient(#fffdf7,#b9c0c1);border:1px solid #939c9f;box-shadow:inset 0 1px #fff,0 2px 3px #10223830}.goal-value{display:block;font:19px Georgia,serif;margin-top:10px}.goal-meter{height:7px;background:#d6d1c5;border-radius:5px;margin-top:9px;overflow:hidden}.goal-meter span{display:block;height:100%;background:#497563}.objective-summary{border-top:1px solid #c9c5ba;padding:14px 0}.progress-history{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid #d3cebf;padding:10px 0;font-size:13px}.dial-face small{display:block;font:12px Georgia,serif;margin-top:7px;color:#4f5c64}.dial-face strong{font-size:32px}#objective-task-options{padding:0 0 10px 34px}#objective-task-options label{margin-top:0}.managed-habit>small{display:block;margin:7px 0}
@media(prefers-reduced-motion:reduce){.day-end-controls button#reset-day{transition:none}}

/* Compact physical reset key and review refinements. */
.day-end-controls{padding:7px 0 3px;min-height:0;margin-bottom:8px;align-items:center}
.reset-housing{display:inline-flex;align-items:center;gap:12px;padding:6px 13px 6px 7px;border:1px solid #858e93;border-radius:13px;background:repeating-linear-gradient(0deg,#ffffff28 0 1px,#48525b08 1px 2px),linear-gradient(145deg,#f8f9f6,#b2bbc0 54%,#e5e8e6);box-shadow:inset 0 1px 1px #fff,0 2px 3px #1522382b}
.reset-label{font:600 12px Georgia,serif;color:#24394b;text-shadow:0 1px #fff9}
.day-end-controls button#reset-day{flex:0 0 40px;width:40px;height:40px;min-width:40px;min-height:40px;margin:0;padding:0;border:5px solid #727b80;border-radius:50%;background:radial-gradient(ellipse at 32% 17%,#ff9b94 0%,#f43b3c 24%,#d90f21 58%,#920718 100%);box-shadow:0 0 0 1px #394650,0 1px 0 2px #f2f4f1,0 3px 0 1px #515c64,inset 0 2px 2px #ffcebfbb,inset 0 -3px 3px #720718aa;transition:transform .1s,box-shadow .1s}
.day-end-controls button#reset-day::before{inset:3px 5px 49%;background:linear-gradient(150deg,#ffffff80,#ffffff08)}
.day-end-controls button#reset-day:active{transform:translateY(2px);box-shadow:0 0 0 1px #394650,0 1px 0 2px #e3e8e6,inset 0 2px 5px #600315aa}
.task-title .habit-badge,.task-title .ao-badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:27px;height:22px;margin:0 0 0 7px;padding:2px 5px;font:600 11px/1 system-ui;vertical-align:middle;border-radius:10px}
#editor .objective-choice{font-size:15px}#editor .objective-choice strong{font-size:15px}
#task-objective-new{font-size:12px;min-height:32px;padding:5px 10px;width:auto;margin-top:7px}
.objective-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;padding:4px}
.objective-actions button{margin:0;max-width:100%;min-height:42px;white-space:normal}
.dial-face{inset:28% 20%}
.dial-face strong.dial-completed{font:500 clamp(13px,3.7vw,18px)/1.3 Georgia,serif;letter-spacing:0;color:#386b53;white-space:nowrap}
.dial-face small.dial-planned{font:13px/1.3 Georgia,serif;color:#173956;white-space:nowrap;margin-top:9px}
.goal-edit{font-size:21px}
@media(max-width:380px){.objective-actions{flex-direction:column;align-items:stretch}.objective-actions button{width:100%}}

/* Selected round ruby artwork, scaled down with a generous hit area. */
.reset-housing{padding:0;gap:0;border:0;background:none;box-shadow:none}
.day-end-controls button#reset-day{position:relative;display:flex;align-items:center;gap:10px;flex:0 0 auto;width:auto;height:44px;min-width:0;min-height:44px;margin:0;padding:3px 4px;border:0;border-radius:6px;background:none;box-shadow:none;overflow:visible;isolation:isolate;transition:none;text-shadow:none}
.day-end-controls button#reset-day::before,.day-end-controls button#reset-day::after{content:none}
.reset-ruby-art{display:block;flex:0 0 36px;width:36px;height:37px;border-radius:50%;background-image:url('assets/reset-ruby-reference.png');background-repeat:no-repeat;background-size:175.56px 175.56px;background-position:-33.46px -90.86px;box-shadow:0 1px 2px #38291c30;transition:transform .12s,filter .12s}
.reset-ruby-label{font:400 15px Georgia,serif;letter-spacing:0;color:#173148}
.day-end-controls button#reset-day:active{transform:none;background:none;box-shadow:none}
.day-end-controls button#reset-day:active .reset-ruby-art{transform:translateY(1px);filter:brightness(.92)}
.day-end-controls button#reset-day:focus-visible{outline:2px solid #173956;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.reset-ruby-art{transition:none}}

/* Smaller ruby face, after its label; retain the full touch target. */
.day-end-controls button#reset-day{flex-direction:row-reverse;padding-right:0;gap:10px}
.reset-ruby-art{flex-basis:27px;width:27px;height:27.75px;background-size:131.67px 131.67px;background-position:-25.095px -68.145px}

.calendar-grid button{position:relative;padding-bottom:10px}
.calendar-load{position:absolute;bottom:5px;left:22%;right:22%;height:3px;border-radius:3px;background:#61798b18;overflow:hidden;pointer-events:none}
.calendar-load>span{display:block;height:100%;border-radius:inherit;background:#657f94}
.calendar-grid .outside .calendar-load{opacity:.45}
.calendar-grid [aria-pressed=true] .calendar-load{background:#ffffff25}
.calendar-grid [aria-pressed=true] .calendar-load>span{background:#b7cada}
.objective-form-tag{display:inline-block;padding:3px 8px;border:1px solid #b09a64;border-radius:20px;background:linear-gradient(145deg,#fbf4de,#e9dcb6);color:#69562e;font:600 13px/1.35 system-ui;vertical-align:middle;white-space:nowrap;box-shadow:inset 0 1px #fff9}