.before-rad{display:grid;gap:1.25rem}.before-rad-surface{position:relative;aspect-ratio:4/3;overflow:hidden;border:.45rem solid var(--pp-rim);border-radius:4px;background:var(--pp-sand);box-shadow:0 18px 32px -26px rgb(60 44 30/.75);cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;user-select:none}.before-rad-surface:focus-visible{outline:2px solid var(--pp-thread);outline-offset:4px}.before-rad-surface figure{position:absolute;inset:0;margin:0;pointer-events:none}.before-rad-field,.before-rad-surface img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.before-rad-field{background:radial-gradient(circle at 70% 30%,var(--before-accent),transparent 42%),var(--before-color)}.before-rad-hint{position:absolute;inset-inline-end:.9rem;bottom:.8rem;z-index:2;padding:.2rem .7rem;border-radius:999px;background:rgb(248 244 236/.86);color:var(--pp-ink);font-size:.78rem;font-weight:600}.before-rad-rail{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:.4rem 0 0;padding:0;list-style:none}.before-rad-rail:after,.before-rad-rail:before{position:absolute;top:.55rem;inset-inline-start:12.5%;height:1px;content:""}.before-rad-rail:before{width:75%;background:repeating-linear-gradient(to right,var(--pp-hair-strong) 0 5px,transparent 5px 9px)}.before-rad-rail:after{width:75%;height:1.5px;background:var(--pp-thread);scale:var(--before-progress,1) 1;transform-origin:right;transition:scale .2s var(--pp-ease)}html[dir=ltr] .before-rad-rail:after{transform-origin:left}.before-rad-rail button{display:grid;justify-items:center;gap:.5rem;width:100%;padding:0 .2rem .3rem;border:0;background:none;color:var(--pp-muted);font:inherit;font-size:.86rem;cursor:pointer}.before-rad-rail button:focus-visible{outline:2px solid var(--pp-thread);outline-offset:2px;border-radius:4px}.before-rad-dot{position:relative;z-index:1;width:1.1rem;height:1.1rem;border:1.5px solid var(--pp-thread);border-radius:50%;background:var(--pp-cream);transition:background-color .2s var(--pp-ease),scale .2s var(--pp-ease)}.before-rad-rail .is-active button{color:var(--pp-ink);font-weight:700}.before-rad-rail .is-active .before-rad-dot{background:var(--pp-thread);scale:1.15}.before-rad-caption{justify-self:center;max-width:30ch;color:var(--pp-ink);font-family:var(--font-hand);font-size:clamp(1.45rem,5.6vw,1.9rem);line-height:1.5;text-align:center}html[dir=ltr] .before-rad-caption{font-family:var(--font-pen),var(--font-hand)}@media (prefers-reduced-motion:reduce){.before-rad-dot,.before-rad-rail:after{transition:none}}.work-marks{display:grid;gap:1.1rem;width:min(100% - 2 * var(--pp-pad,1.25rem),42rem);margin:clamp(3.5rem,12vw,7rem) auto 0}.work-marks h2{font-size:clamp(1.4rem,6vw,2rem);font-weight:700;line-height:1.55}.work-marks>p{max-width:52ch;color:var(--pp-muted,var(--muted));font-size:.93rem;line-height:1.9}.work-marks-stage{position:relative;overflow:hidden;border-radius:4px;background:var(--pp-sand,var(--sand));box-shadow:0 18px 32px -26px rgb(60 44 30/.75)}.work-marks-stage img{display:block;width:100%;aspect-ratio:4/3;-o-object-fit:cover;object-fit:cover}.work-marks-stage button{position:absolute;display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:50%;background:none;transform:translate(-50%,-50%);cursor:pointer}.work-marks-stage button:before{width:1.1rem;height:1.1rem;border:1.5px solid var(--pp-rim,#fff);border-radius:50%;background:rgb(173 95 61/.35);box-shadow:0 2px 6px rgb(30 20 10/.35);content:"";transition:background-color .2s ease,scale .2s ease}.work-marks-stage button:hover:before{scale:1.15}.work-marks-stage .is-open:before{background:var(--pp-thread,var(--clay));scale:1.2}.work-marks-stage button:focus-visible{outline:2px solid var(--pp-rim,#fff);outline-offset:-4px}.work-marks-stage button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.work-marks aside{display:grid;gap:.3rem;padding:1rem 1.2rem;border-radius:4px;background:var(--pp-sheet,var(--paper));box-shadow:0 14px 24px -20px rgb(60 44 30/.6)}.work-marks aside b{font-size:1rem}.work-marks aside p{color:var(--pp-body,var(--ink));font-size:.92rem;line-height:1.85}@media (prefers-reduced-motion:reduce){.work-marks-stage button:before{transition:none}}