.trail-wear{--crease-opacity:.3;--fold-width:2px;--paper-warp:1deg;width:100%;min-width:0;color:#16110d;font-family:"DM Mono",monospace}
.wear-readout{margin:0 0 7px;color:#9a8f7a;font-size:8px;letter-spacing:.13em;line-height:1.4}
.wear-paper{position:relative;overflow:hidden;min-height:98px;border:1px solid #7f6f5b;background:#ded3bf;background-image:repeating-linear-gradient(2deg,#fff0 0 5px,#49351a0a 6px 7px),linear-gradient(96deg,#c7baa4,#eee5d2 32%,#d5c8b2 72%,#b5a68d);box-shadow:0 7px 0 #27130f,0 12px 25px #0008;clip-path:polygon(0 0,98.8% 1.5%,100% 88%,97.8% 100%,1.2% 97%)}
.wear-track{position:relative;z-index:2;display:flex;align-items:stretch;min-width:max-content;min-height:96px}
.wear-step{position:relative;display:flex;flex:1 0 116px;min-width:116px;max-width:190px;min-height:96px;flex-direction:column;justify-content:space-between;gap:6px;padding:11px 12px;border:0;border-right:1px solid #75675066;background:#e8deca;color:#17120f;text-align:left;font:inherit;overflow:hidden}
button.wear-step{cursor:pointer}.wear-step:nth-child(3n+2){background:#dfd2bc;transform:rotate(.18deg)}.wear-step:nth-child(4n){background:#eee2cb;transform:rotate(-.23deg)}
.wear-step.inherited{box-shadow:inset 0 5px 0 #f2eadb}.wear-step.inherited:before{content:"PARENT";position:absolute;right:5px;top:5px;color:#8b7962;font-size:6px;letter-spacing:.15em}
.wear-step.divergent{margin-top:9px;background:#f1dec1;box-shadow:inset 0 5px 0 #cc1111;transform:rotate(var(--paper-warp));transform-origin:left top}
.wear-step.concealed{background:#2a090a;background-image:repeating-linear-gradient(118deg,#1a0506 0 7px,#4c0d10 8px 10px,#1a0506 11px 17px),radial-gradient(circle at 24% 31%,#8e1519 0 2px,transparent 3px);color:#f1e7d5;border-right-color:#a9272d;box-shadow:inset 0 0 24px #000}
.wear-step.concealed.inherited{box-shadow:inset 0 5px 0 #f2eadb,inset 0 0 24px #000}.wear-step.concealed.divergent{box-shadow:inset 0 5px 0 #cc1111,inset 0 0 24px #000}
.wear-step-index{font-size:7px;letter-spacing:.14em;opacity:.72}.wear-step-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:700;letter-spacing:.04em}
.wear-step-action{font-size:6px;letter-spacing:.15em;opacity:.65}.wear-redaction{display:flex;flex-direction:column;gap:5px;filter:url(#r4b1tInkBleed)}
.wear-redaction i{display:block;height:7px;background:#030303;box-shadow:0 0 0 1px #790e12,2px 1px 4px #000;transform:skewX(-8deg)}
.wear-redaction i:nth-child(1){width:78%}.wear-redaction i:nth-child(2){width:94%;transform:skewX(5deg)}.wear-redaction i:nth-child(3){width:61%;transform:skewX(-3deg)}
.wear-crease{position:absolute;z-index:4;top:-9%;bottom:-11%;width:var(--fold-width);background:linear-gradient(90deg,#fff8,#513f2cdd 38%,#1c120aaa 51%,#fff5 72%,transparent);box-shadow:calc(var(--fold-width) * -1) 0 2px #fff5,var(--fold-width) 0 3px #24170c77;pointer-events:none}
.wear-crease:after{content:"";position:absolute;inset:0 -3px;background:repeating-linear-gradient(0deg,transparent 0 9px,#27180b88 10px 12px,transparent 13px 21px);opacity:var(--crease-opacity)}
.wear-fork-mark{position:absolute;z-index:5;top:-15px;width:4px;height:135%;background:#cc1111;transform:translateX(-2px) rotate(-7deg);box-shadow:6px 0 0 #e8deca,-3px 0 6px #0008}
.wear-fork-mark:after{content:"FORK";position:absolute;top:8px;left:8px;color:#cc1111;font-size:7px;letter-spacing:.15em}
.wear-depth-marker{position:absolute;z-index:6;bottom:0;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:9px solid #cc1111;transform:translateX(-7px)}
.wear-empty{padding:34px 20px;color:#756750;font-size:9px;letter-spacing:.15em}
.wear-step.beyond-current{opacity:.24;filter:saturate(.55);transform:scaleX(.94);transform-origin:left center}
.trail-wear.motion-descend .wear-step:last-child{animation:wearExtend 360ms cubic-bezier(.16,1,.3,1) both;transform-origin:left center}
.trail-wear.motion-descend .wear-depth-marker{animation:markerAdvance 360ms cubic-bezier(.16,1,.3,1) both}
.trail-wear.motion-return .wear-step.return-leave{animation:wearRetract 340ms cubic-bezier(.7,0,.84,0) both;transform-origin:left center}
.trail-wear.motion-return .wear-depth-marker{animation:markerRetract 340ms cubic-bezier(.7,0,.84,0) both}
@keyframes wearExtend{0%{transform:translateX(-34px) scaleX(.18) scaleY(.9);opacity:0}72%{transform:translateX(5px) scaleX(1.025) scaleY(1);opacity:1}100%{transform:translateX(0) scaleX(1) scaleY(1);opacity:1}}
@keyframes markerAdvance{0%{transform:translateX(-34px) scale(.6);opacity:0}100%{transform:translateX(-7px) scale(1);opacity:1}}
@keyframes wearRetract{0%{transform:translateX(0) scaleX(1);opacity:1}100%{transform:translateX(38px) scaleX(.22);opacity:.08}}
@keyframes markerRetract{0%{transform:translateX(-7px) scale(1);opacity:1}100%{transform:translateX(28px) scale(.55);opacity:.16}}

/* Reveal owns the radial-mask + blur language; navigation never uses either. */
.wear-step.ink-reveal{isolation:isolate;opacity:1;filter:none}
.wear-step.ink-reveal>span:not(.ink-radial-origin){position:relative;z-index:3;animation:stepRadialResolve 680ms cubic-bezier(.22,.61,.36,1) both}
.ink-radial-origin{position:absolute!important;z-index:2!important;inset:-2px;background:#2a090a;background-image:repeating-linear-gradient(118deg,#1a0506 0 7px,#4c0d10 8px 10px,#1a0506 11px 17px);pointer-events:none;animation:concealmentRelease 680ms cubic-bezier(.22,.61,.36,1) both}
.blind-card.ink-reveal-card:after{content:"";position:absolute;z-index:1;inset:0;background:#210809;background-image:repeating-linear-gradient(118deg,#140405 0 12px,#4c0d10 13px 16px,#140405 17px 27px);pointer-events:none;animation:concealmentRelease 680ms cubic-bezier(.22,.61,.36,1) both}
.blind-card.ink-reveal-card .blind-message,.blind-card.ink-reveal-card .blind-proof{position:relative;z-index:2;animation:cardRadialResolve 680ms cubic-bezier(.22,.61,.36,1) both}
@keyframes stepRadialResolve{0%{clip-path:circle(0% at 50% 50%);filter:blur(8px);opacity:.12}58%{filter:blur(3px);opacity:.78}100%{clip-path:circle(150% at 50% 50%);filter:blur(0);opacity:1}}
@keyframes cardRadialResolve{0%{clip-path:circle(0% at 50% 50%);filter:blur(8px);opacity:.08}62%{filter:blur(2.5px);opacity:.82}100%{clip-path:circle(150% at 50% 50%);filter:blur(0);opacity:1}}
@keyframes concealmentRelease{0%{clip-path:circle(150% at 50% 50%);opacity:1}100%{clip-path:circle(0% at 50% 50%);opacity:0}}

.blind-card.motion-descend-card{animation:blindExtend 360ms cubic-bezier(.16,1,.3,1) both;transform-origin:center bottom}
.blind-card.motion-return-card{animation:blindRetract 340ms cubic-bezier(.7,0,.84,0) both;transform-origin:center top}
@keyframes blindExtend{0%{transform:translateY(28px) scale(.92);opacity:0}72%{transform:translateY(-4px) scale(1.012);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes blindRetract{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-20px) scale(.94);opacity:.58}}
@media(max-width:600px){.wear-paper{overflow-x:auto}.wear-step{flex-basis:102px;min-width:102px}.wear-readout{font-size:7px}}
@media(prefers-reduced-motion:reduce){.trail-wear *,.blind-card{animation-duration:.001ms!important;animation-iteration-count:1!important}}