/* Self-hosted subsets under the SIL OFL 1.1 (fonts/OFL-*.txt). "Anekdoo Serif" is Gentium Book Plus,
   subset to this page's characters and renamed, as the OFL requires of a modified copy. */
@font-face{font-family:'Anekdoo Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anekdoo-serif-400-latin.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0,U+00B7,U+00E9,U+2014,U+2018-201D}
@font-face{font-family:'Anekdoo Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anekdoo-serif-400-greek.woff2) format('woff2');unicode-range:U+0370-03FF,U+1F00-1FFF}
@font-face{font-family:'Anekdoo Serif';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/anekdoo-serif-700-latin.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0,U+00B7,U+00E9,U+2014,U+2018-201D}
@font-face{font-family:'Anekdoo Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/anekdoo-serif-italic-latin.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0,U+00B7,U+00E9,U+2014,U+2018-201D}
@font-face{font-family:'Delicious Handrawn';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/delicious-handrawn.woff2) format('woff2')}
/* Layout: one sheet of sketchbook paper; a strip draws itself above the wordmark. */
:root{
  --paper:#F7F5EB; --paper-2:#EFEBDC; --ink:#26262B; --ink-soft:#7A7A82;
  --blue:#28519D; --blue-wash:#DCE4F1; --orange:#E99A1D; --wash:#F3E7CB;
  --label:ui-monospace,SFMono-Regular,Menlo,monospace;
  --print:'Anekdoo Serif',Georgia,'Times New Roman',serif; --hand:'Delicious Handrawn','Caveat','Comic Sans MS',cursive;
  color-scheme:light;
}
html,body{background:var(--paper);min-height:100%}
body{color:var(--ink);font:14px/1.5 system-ui,sans-serif;margin:0}
.page{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;align-content:center;gap:clamp(28px,5vw,48px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:clamp(32px,7vh,72px);overflow:hidden;box-sizing:border-box}
.page::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .18 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.scene{position:relative;width:min(100%,960px)}
.scene>svg{display:block;width:100%;height:auto;overflow:visible}
.wordmark{width:clamp(190px,30vw,300px);height:auto;display:block;position:relative}
.entry-wrap{position:relative;display:grid;place-items:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:8px clamp(80px,14vh,140px)}
.entry{position:relative;width:min(100%,540px);background:#FBFAF4;padding:clamp(26px,5vw,40px) clamp(22px,5vw,44px) clamp(30px,5vw,44px);box-sizing:border-box;transform:rotate(-1.2deg);box-shadow:0 1px 2px rgba(40,40,30,.12),0 18px 30px -22px rgba(40,40,30,.45)}
.entry .print{font-family:var(--print);color:var(--ink);font-size:clamp(15px,2.1vw,17px);line-height:1.6;margin:0}
.entry .head{font-family:var(--print);font-weight:700;font-size:clamp(30px,5vw,40px);line-height:1.1;margin:0 0 4px;letter-spacing:.01em}
.entry .head .dot{color:var(--ink-soft);font-weight:400}
.entry .pron{font-family:var(--print);color:var(--ink-soft);font-size:.95em;margin:0 0 14px}
.entry .pron i{color:var(--ink)}
.entry .ety{color:var(--ink)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;box-sizing:border-box;width:100%;max-width:760px;margin-inline:auto;font:12px/1.4 var(--label);color:var(--ink-soft);padding-block:0 calc(28px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.legal a{color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
.legal a:hover,.legal a:focus-visible{color:var(--blue);outline:none}
.entry .gr{font-style:normal}
#w-prob,#w-doodle{display:inline-block}
.entry p{position:relative;z-index:1}
.entry .ety{line-height:2.15}
.entry .def{margin-top:30px}
.entry .def b{font-family:var(--print);margin-right:6px}
.entry .note{position:absolute;font-family:var(--hand);color:var(--blue);font-size:clamp(20px,3vw,25px);line-height:1;white-space:nowrap;transform:rotate(-6deg)}
.entry .tape{position:absolute;width:86px;height:24px;background:rgba(233,154,29,.28);top:-11px}
.entry svg.ink{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .entry.play .note{animation:write .7s steps(12) var(--t) both}
  .entry.play .tape{animation:fadein .3s ease var(--t) both}
}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

.s{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.s.bg{stroke-width:1.7} .s.frame{stroke-width:2.8}
.s.blue{stroke:var(--blue)} .s.orange{stroke:var(--orange);stroke-width:2.8} .s.soft{stroke:var(--ink-soft);stroke-width:2}
.s.loop{stroke-width:2.6;opacity:.92} .s.loop2{stroke-width:1.9;opacity:.95}
.fill{stroke:none}
.d{stroke-dasharray:1 1;stroke-dashoffset:0}
.p{transform-box:fill-box;transform-origin:center}
.uline{transform-box:fill-box}
.fly{transform-box:view-box;transform-origin:var(--ox) var(--oy);transform:var(--to)}
.fly .s{stroke-width:var(--sw2)}
.s.fine{stroke-width:1.5} .s.faint{stroke:var(--ink-soft);stroke-width:.8} .s.thin{stroke-width:1.2}

@media (prefers-reduced-motion:no-preference){
  .play .d{animation:draw var(--dur,.5s) cubic-bezier(.45,.05,.3,1) var(--t,0s) both}
  .play .f{animation:fadein .4s ease var(--t,0s) both}
  .play .p{animation:pop .45s cubic-bezier(.3,1.5,.5,1) var(--t,0s) both}
  .play .fly{animation:fly .95s cubic-bezier(.65,0,.25,1) var(--t,0s) both}
  .play .fly .s{animation:draw var(--dur,.5s) cubic-bezier(.45,.05,.3,1) var(--t,0s) both,thick .95s cubic-bezier(.65,0,.25,1) var(--ft) both}
  .play .uline{animation:sweep .9s cubic-bezier(.6,0,.3,1) var(--u,0s) both}
}
@keyframes draw{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{opacity:0;transform:scale(.3) rotate(-8deg)}100%{opacity:1;transform:none}}
@keyframes fly{from{transform:none}to{transform:var(--to)}}
@keyframes thick{from{stroke-width:var(--sw1)}to{stroke-width:var(--sw2)}}
@keyframes sweep{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}