.foil{display:contents}.foil__surface{position:relative;isolation:isolate}.foil__card{position:relative;background-color:var(--paper)}.foil__canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;transition:opacity var(--dur) var(--ease)}.foil__surface:not(.is-painted,.is-revealed) .foil__canvas{background:repeating-linear-gradient(135deg,#c9c9c4 0 2px,#d3d3ce 2px 6px)}.foil__canvas[hidden]{display:none}.foil[data-touch=pan-y] .foil__canvas{touch-action:pan-y}.foil__surface.is-revealed .foil__canvas{opacity:0;pointer-events:none}.foil .foil__hint{position:absolute;top:50%;left:50%;z-index:2;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 32px);padding:0;border-radius:0;background:none;color:var(--mid);font-family:var(--font-sans);font-size:var(--fs-note);line-height:1.45;letter-spacing:0;text-transform:none;translate:-50% -50%;pointer-events:none;transition:opacity var(--dur) var(--ease)}.foil__gesture{flex:none;width:40px;height:auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60}@media(prefers-reduced-motion:no-preference){.foil__surface:not(.is-scratching) .foil__gesture{animation:foil-gesture 2.4s var(--ease) 2 both}}@keyframes foil-gesture{0%{stroke-dashoffset:60}60%,to{stroke-dashoffset:0}}.foil__surface:is(.is-scratching,.is-revealed) .foil__hint{opacity:0}.foil__reveal[hidden],[data-foil-reveal][hidden]{display:none}@media(prefers-reduced-motion:reduce){.foil__canvas,.foil__hint{transition:none}}