@property --typing-reveal {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 100%;
}
@property --typing-reveal-1 { syntax:'<percentage>'; inherits:true; initial-value:100%; }
@property --typing-reveal-2 { syntax:'<percentage>'; inherits:true; initial-value:100%; }
@property --typing-reveal-3 { syntax:'<percentage>'; inherits:true; initial-value:100%; }
@property --typing-reveal-4 { syntax:'<percentage>'; inherits:true; initial-value:100%; }
@property --typing-reveal-5 { syntax:'<percentage>'; inherits:true; initial-value:100%; }
@property --typing-reveal-6 { syntax:'<percentage>'; inherits:true; initial-value:100%; }
@property --typing-reveal-7 { syntax:'<percentage>'; inherits:true; initial-value:100%; }

.typing-motion-layer {
    position:fixed; z-index:10000; overflow:hidden; pointer-events:none;
    contain:strict; user-select:none; visibility:hidden;
    inset:auto; margin:0; padding:0; border:0; background:transparent;
}
.typing-motion-mirror {
    position:absolute; top:0; left:0; box-sizing:border-box;
    margin:0; border:0; background:transparent; visibility:hidden;
}
.typing-motion-caret {
    position:absolute; top:0; left:0; width:2px; pointer-events:none;
    transition:transform 80ms cubic-bezier(.2,.8,.2,1);
}
.typing-motion-inserted-letter {
    position:absolute; display:block; overflow:hidden; contain:strict;
    margin:0; padding:0; border:0; background:transparent;
    pointer-events:none; user-select:none; white-space:pre;
    text-shadow:none; text-decoration:none;
}
.typing-motion-caret-bar {
    display:block; width:100%; height:100%; border-radius:1px; background:currentColor;
}
.typing-motion-deletions {
    position:fixed; inset:0; width:100%; height:100%; z-index:10001;
    margin:0; padding:0; border:0; background:transparent; overflow:hidden;
    pointer-events:none; user-select:none; contain:strict;
}
.typing-motion-deleted-letter {
    position:absolute; display:block; margin:0; padding:0; border:0;
    pointer-events:none; user-select:none; white-space:pre;
}
.text-selection-motion-layer {
    position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; z-index:10000;
    overflow:hidden; margin:0; padding:0; border:0; background:transparent;
    pointer-events:none; user-select:none; contain:strict;
}
.text-selection-motion-fragment {
    position:absolute; display:block; transform-origin:0 0; border-radius:3px;
    background:rgba(199,99,69,.24);
    background:color-mix(in srgb,var(--accent,#c76345) 24%,transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,#c76345) 18%,transparent);
    pointer-events:none; user-select:none;
}
@media screen and (prefers-reduced-motion:no-preference) and (forced-colors:none) {
    [data-text-selection-motion]::selection, [data-text-selection-motion] *::selection {
        background:transparent; color:inherit; text-shadow:none;
    }
    [data-typing-caret] { caret-color:transparent!important; }
    /* Reveal ranges only ever cover text inside the marked field. An unscoped
       ::highlight() rule matches every element, so each restyle elsewhere (a
       changed week, an animation frame) would also resolve eight highlight
       styles. Descendant rules keep nested rich text revealed in engines
       without highlight inheritance. */
    [data-typing-caret]::highlight(yakoplan-typing-reveal), [data-typing-caret] *::highlight(yakoplan-typing-reveal) {
        color:color-mix(in srgb,var(--yakoplan-typing-ink,currentColor) var(--typing-reveal),transparent);
    }
    [data-typing-caret]::highlight(yakoplan-typing-reveal-1), [data-typing-caret] *::highlight(yakoplan-typing-reveal-1) { color:color-mix(in srgb,var(--yakoplan-typing-ink-1,currentColor) var(--typing-reveal-1),transparent); }
    [data-typing-caret]::highlight(yakoplan-typing-reveal-2), [data-typing-caret] *::highlight(yakoplan-typing-reveal-2) { color:color-mix(in srgb,var(--yakoplan-typing-ink-2,currentColor) var(--typing-reveal-2),transparent); }
    [data-typing-caret]::highlight(yakoplan-typing-reveal-3), [data-typing-caret] *::highlight(yakoplan-typing-reveal-3) { color:color-mix(in srgb,var(--yakoplan-typing-ink-3,currentColor) var(--typing-reveal-3),transparent); }
    [data-typing-caret]::highlight(yakoplan-typing-reveal-4), [data-typing-caret] *::highlight(yakoplan-typing-reveal-4) { color:color-mix(in srgb,var(--yakoplan-typing-ink-4,currentColor) var(--typing-reveal-4),transparent); }
    [data-typing-caret]::highlight(yakoplan-typing-reveal-5), [data-typing-caret] *::highlight(yakoplan-typing-reveal-5) { color:color-mix(in srgb,var(--yakoplan-typing-ink-5,currentColor) var(--typing-reveal-5),transparent); }
    [data-typing-caret]::highlight(yakoplan-typing-reveal-6), [data-typing-caret] *::highlight(yakoplan-typing-reveal-6) { color:color-mix(in srgb,var(--yakoplan-typing-ink-6,currentColor) var(--typing-reveal-6),transparent); }
    [data-typing-caret]::highlight(yakoplan-typing-reveal-7), [data-typing-caret] *::highlight(yakoplan-typing-reveal-7) { color:color-mix(in srgb,var(--yakoplan-typing-ink-7,currentColor) var(--typing-reveal-7),transparent); }
}
@media (prefers-reduced-motion:reduce), (forced-colors:active), print {
    .typing-motion-layer, .typing-motion-deletions, .text-selection-motion-layer { display:none!important; }
}