@font-face{font-family:Jost;src:url(jost.woff2) format('woff2');font-weight:100 900;font-display:block}
@font-face{font-family:Fraunces;src:url(fraunces-italic.woff2) format('woff2');font-style:italic;font-weight:100 900;font-display:block}
:root{
  --ink:#111614;--ink2:#1A211E;--ink3:#242D29;
  --sage:#97AEA7;--sage-l:#B9CBC5;--sage-ll:#DCE6E2;--sage-d:#6E8B82;--sage-dd:#3F5A52;
  --stampink:#4E6F66;
  --cream:#F4F0E8;--paper:#FBF8F2;--line:#E3DDD1;
  --text:#EEF2F0;--muted:#9AA8A3;
  --go:#1F8A4C;--stop:#B4473C;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ico{display:block;width:100%;height:100%}
.serif{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:420;letter-spacing:-.01em}

/* grain */
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* stamp */
.stamp-svg{display:block;width:100%;height:100%;overflow:visible}
.stamp{color:var(--stampink);mix-blend-mode:multiply}
.stamp-svg.ghost{color:var(--sage-d);opacity:.8}
.splat-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:3}
.splat{width:100%;height:100%;overflow:visible;fill:var(--stampink);opacity:.85}
.splat .ringburst{stroke:var(--sage);fill:none}

/* polaroid */
.pol{background:#fff;padding:7% 7% 22%;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 24px -8px rgba(20,30,26,.35);position:relative}
.pol .ph{width:100%;aspect-ratio:1;background:#ddd center/cover no-repeat;border-radius:1px}

/* demo panel */
.hotspot{position:fixed;left:0;top:0;width:64px;height:64px;z-index:90}
.panel{position:fixed;z-index:100;right:16px;top:16px;width:300px;max-height:calc(100vh - 32px);overflow:auto;
  background:rgba(17,22,20,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#E9EEEC;
  border:1px solid rgba(151,174,167,.25);border-radius:16px;padding:14px 14px 16px;font-size:13px;
  transform:translateX(calc(100% + 40px));transition:transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.panel.open{transform:none}
.panel h4{font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin:12px 2px 7px}
.panel h4:first-of-type{margin-top:4px}
.panel .row{display:flex;flex-wrap:wrap;gap:6px}
.panel button.b{padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-size:12.5px;line-height:1.2;transition:background .15s}
.panel button.b:hover{background:rgba(151,174,167,.25)}
.panel button.b.on{background:var(--sage);color:#111614;border-color:var(--sage)}
.panel .top{display:flex;justify-content:space-between;align-items:center}
.panel .top b{font-weight:600;font-size:14px}
.panel .x{width:26px;height:26px;opacity:.7}
.panel .hint{color:#8E9C97;font-size:11.5px;margin-top:12px;line-height:1.45}
.panel a{color:var(--sage)}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}