/* Original procedural SVG textures; no square-grid treatment. */
[data-texture="paper"]{--page-texture:url("paper.svg");--texture-size:260px 260px}
:root,[data-texture="trails"]{--page-texture:url("trails.svg");--texture-size:1000px 760px}
[data-texture="contours"]{--page-texture:url("contours.svg");--texture-size:1000px 820px}
[data-texture="signals"]{--page-texture:url("signals.svg");--texture-size:660px 520px}
[data-theme="dark"][data-texture="trails"]{--page-texture:url("trails-dark.svg")}
.swatch{background-image:var(--page-texture)}
body{background-image:var(--page-texture);background-size:var(--texture-size);background-repeat:repeat}
/* Keep navigation trails inside each section; never repeat mismatched tile edges. */
[data-texture="trails"] body{background-image:none}
[data-texture="trails"] :is(.hero,#things,.about){position:relative;isolation:isolate}
[data-texture="trails"] :is(.hero,#things,.about)::after{content:"";position:absolute;inset:24px 0 32px;z-index:-1;pointer-events:none;background-image:var(--page-texture);background-size:var(--texture-size);background-position:center;background-repeat:no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.card-scene{position:relative;isolation:isolate;display:block;height:268px;margin-top:16px}
.card-scene:before{content:"";position:absolute;inset:0 -10px;border-radius:18px;background:center/100% 100% no-repeat;z-index:-1;pointer-events:none;opacity:.9}
.scene-workflow:before{background-image:url("workflow.svg")}
.scene-workshop:before{background-image:url("workshop.svg")}
.scene-notebook:before{background-image:url("notebook.svg")}
.card-scene .card-visual{position:relative;width:100%;height:100%;margin:0}
[data-theme="dark"] .card-scene:before{opacity:.9}
[data-theme="dark"] .scene-workflow:before{background-image:url("workflow-dark.svg")}
[data-theme="dark"] .scene-workshop:before{background-image:url("workshop-dark.svg")}
[data-theme="dark"] .scene-notebook:before{background-image:url("notebook-dark.svg")}
.card:hover .card-scene:before{opacity:1}
[data-theme="dark"] .card:hover .card-scene:before{opacity:1}
@media(max-width:900px){.card-scene{height:230px}}
@media(max-width:620px){.card-scene{height:250px}.card-scene:before{inset:0 -9px}}