/* The felt quiet book: saturated felt with a soft fuzz, white running stitches and sewn buttons */
@font-face{font-family:"Lexend Exa";font-display:swap;src:url(lexend-exa.woff2)format("woff2")}
:root{
  --tomato:#d9443a;--sun:#f4b731;--moss:#2f7a4b;--denim:#3b62a8;--plum:#6e3b74;--ochre:#d9862b;
  --ink:#3a1d3f;--thread:#fff8ec;--felt:var(--denim);
  /* Felt fuzz: light and dark fibres over whatever colour sits underneath */
  --fuzz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .55 0 0 0 -.2'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0 0 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  --stitch:3px dashed var(--thread);
}
/* Each story is sewn in its own felt */
[data-story=mummy]{--felt:var(--ochre)}
[data-story=vampire]{--felt:var(--plum)}
[data-story=ginger]{--felt:var(--moss)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
/* Toddler-proofing: no text selection, long-press menus or double-tap zoom */
body{font-family:"Lexend Exa",sans-serif;color:var(--ink);background:var(--fuzz),var(--felt);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;overflow:hidden}
::selection{background:var(--sun);color:var(--ink)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:4px dashed var(--sun);outline-offset:4px}
/* A sewn button: a felt disc with a stitched ring, thick enough to press */
.sewn{display:grid;place-items:center;border-radius:50%;background:var(--fuzz),var(--btn,var(--tomato));color:var(--thread);
  box-shadow:inset 0 0 0 .32em var(--btn,var(--tomato)),inset 0 0 0 calc(.32em + 3px) #0000,0 .16em 0 color-mix(in oklab,var(--btn,var(--tomato)),#000 30%),0 .3em .5em #0004;
  position:relative;transition:translate .12s,box-shadow .12s}
.sewn:before{content:"";position:absolute;inset:.22em;border-radius:50%;border:var(--stitch);opacity:.9}
.sewn:active{translate:0 .12em;box-shadow:0 .04em 0 color-mix(in oklab,var(--btn,var(--tomato)),#000 30%),0 .1em .2em #0004}
.sewn svg{width:46%;height:46%;filter:drop-shadow(0 1px 0 #0003)}
/* Thread sits on the felt, not printed into it */
.sewn:before,.text:before,.patch:after,.cover:before,.turn:before,.shelf:before,.overlay:before,.word span.on:before{filter:drop-shadow(0 1px 0 #0006)}