.day-scene{--scene-time-block:0px;background-color:var(--scene-ground);color:var(--scene-fg);position:relative}.day-scene[data-time]{--scene-time-block:calc(var(--text-hand-time) * var(--leading-hand) + var(--space-1))}.day-scene[data-tone=morning]{--scene-ground:var(--ground-morning)}.day-scene[data-tone=noon]{--scene-ground:var(--ground-noon)}.day-scene[data-tone=afternoon]{--scene-ground:var(--ground-afternoon)}.day-scene[data-tone=evening]{--scene-ground:var(--ground-evening)}.day-scene[data-tone=late]{--scene-ground:var(--ground-late)}.day-scene[data-tone=night]{--scene-ground:var(--ground-night);--paper-shadow:var(--shadow-paper-night)}.day-scene__frame{box-sizing:border-box;max-inline-size:var(--space-frame-max);padding-block:var(--space-scene-top) var(--space-scene-bottom);padding-inline:var(--space-frame-start-phone) var(--space-frame-end);margin-inline:auto;position:relative}.day-scene__time{color:var(--scene-accent);font-size:var(--text-hand-time);margin:0 0 var(--space-1);padding-inline-start:calc(var(--size-rail-dot) + var(--size-rail-tick) + var(--space-3))}.day-scene:not([data-time]) .day-scene__dot{display:none}.day-scene__dot{background-color:var(--color-marigold);block-size:var(--size-rail-dot);border:var(--size-rail-dot-border) solid var(--scene-ground);border-radius:var(--radius-round);box-sizing:border-box;inline-size:var(--size-rail-dot);z-index:1;position:absolute;inset-block-start:calc(var(--space-scene-top) + (var(--text-hand-time) * var(--leading-hand) - var(--size-rail-dot)) / 2);inset-inline-start:var(--space-frame-start-phone)}.day-scene__dot:after{background-color:var(--color-marigold);block-size:var(--size-rail-width);content:"";inline-size:var(--size-rail-tick);position:absolute;inset-block-start:calc(50% - var(--size-rail-width) / 2);inset-inline-start:calc(100% + var(--size-rail-dot-border))}@media (min-width:48rem){.day-scene__frame{padding-inline-start:var(--space-frame-start)}.day-scene__frame:before{background-color:var(--color-marigold);content:"";inline-size:var(--size-rail-width);opacity:.85;position:absolute;inset-block:0;inset-inline-start:var(--space-rail-x)}.day-scene__time{padding-inline-start:0}.day-scene:not([data-time]) .day-scene__dot{display:block}.day-scene__dot{inset-inline-start:calc(var(--space-rail-x) + (var(--size-rail-width) - var(--size-rail-dot)) / 2)}.day-scene__dot:after{display:none}}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){@keyframes rail-fill{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes rail-dot-pop{0%{transform:scale(.4)}to{transform:scale(1)}}.day-scene__frame{--rail-reach:40vh;view-timeline:--rail block}.day-scene__dot{animation:linear both rail-dot-pop;animation-range:calc(var(--rail-reach) + var(--space-scene-top) - 6vh) calc(var(--rail-reach) + var(--space-scene-top));animation-timeline:--rail}@media (min-width:48rem){.day-scene__frame:before{opacity:.25}.day-scene__frame:after{animation:linear both rail-fill;animation-range:var(--rail-reach) calc(100% - (100vh - var(--rail-reach)));background-color:var(--color-marigold);content:"";inline-size:var(--size-rail-width);opacity:.85;transform-origin:top;animation-timeline:--rail;position:absolute;inset-block:0;inset-inline-start:var(--space-rail-x)}}@keyframes hand-write{0%{clip-path:inset(-.25em 100% -.25em -.1em)}to{clip-path:inset(-.25em -.1em)}}.day-scene__time{inline-size:fit-content;animation:linear both hand-write;animation-timeline:view();animation-range:10vh 40vh}}}
.hand-numeral{block-size:var(--size-numeral);border:var(--size-numeral-border) solid var(--color-marigold);border-radius:var(--radius-loop-a);box-sizing:border-box;color:var(--scene-fg,var(--color-text));font-size:var(--text-hand-numeral);inline-size:var(--size-numeral);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.hand-numeral[data-shape=b]{border-radius:var(--radius-loop-b)}
.paper-note{inline-size:fit-content;max-inline-size:100%}.paper-note__text{color:var(--scene-fg);font-size:var(--text-hand-callout);margin:0}.paper-note[data-paper=lined] .paper-note__text{font-size:var(--text-hand-note);line-height:var(--paper-pitch)}.paper-note__label{margin:var(--space-2) 0 0}