/* The 15 Seconds Coin. Journal style: Barlow / Barlow Condensed, red #D22027 on ink #121212 and white. */
.c15{--c15-red:#D22027;--c15-ink:#121212;--p:0;display:flex;flex-direction:column;align-items:center;gap:14px;font-family:Barlow,'B',system-ui,sans-serif}
.c15-stage{position:relative;width:min(var(--c15-size,260px),78vw);aspect-ratio:1;perspective:1100px;margin:6px 0 14px}
/* the coin's shadow is its own flat layer behind the coin (a filter inside the 3-D flip gets clipped to a square on iOS Safari) */
.c15-shadow{position:absolute;left:5%;right:5%;top:9%;bottom:-5%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(0,0,0,.42),rgba(0,0,0,.22) 62%,rgba(0,0,0,0));filter:blur(9px);-webkit-filter:blur(9px)}
.c15-flipping .c15-shadow{animation:c15shadow .75s ease-in-out}
@keyframes c15shadow{45%{transform:scaleX(.12);opacity:.55}}
.c15-coin{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .75s cubic-bezier(.3,1.25,.5,1)}
.c15.is-back .c15-coin{transform:rotateY(180deg)}
.c15-face{position:absolute;inset:0;display:block;padding:0;margin:0;border:0;background:none;border-radius:50%;cursor:pointer;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;visibility:visible;transition:visibility 0s .19s}
.c15-face img{display:block;width:100%;height:100%;user-select:none;-webkit-user-select:none}
.c15-back{transform:rotateY(180deg);visibility:hidden;cursor:default}
.c15.is-back .c15-front{visibility:hidden}.c15.is-back .c15-back{visibility:visible}
.c15-now .c15-coin,.c15-now .c15-face{transition:none!important}
.c15-front:focus-visible,.c15-hot:focus-visible{outline:3px solid var(--c15-red);outline-offset:4px}
/* front: red sweep over the coin's printed red band, 60 to 15 (a quarter turn, 0 to 90 degrees), plus a needle that stops on 15.
   --c15-arc sets how far the sweep goes in 15 s (default .25turn, which matches the art; 1turn = the whole dial).
   Set it on .c15 or any ancestor, or pass Coin15.mount(el, {arc:'1turn'}). */
.c15-sweep{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .25s;mix-blend-mode:multiply;
  background:conic-gradient(#E0141B calc(var(--p) * var(--c15-arc,.25turn)),transparent 0);
  -webkit-mask:radial-gradient(circle closest-side,transparent 66%,#000 66.8%,#000 88.4%,transparent 89.2%);
          mask:radial-gradient(circle closest-side,transparent 66%,#000 66.8%,#000 88.4%,transparent 89.2%)}
.c15-hand{position:absolute;left:50%;top:5.5%;width:4px;height:44.5%;margin-left:-2px;transform-origin:50% 100%;transform:rotate(calc(var(--p) * var(--c15-arc,.25turn)));
  pointer-events:none;opacity:0;transition:opacity .25s;border-radius:2px;background:linear-gradient(to top,transparent 0 50%,#fff 50%,#fff 72%,#ff3036 100%);box-shadow:0 0 8px rgba(255,40,40,.75)}
.c15.run-front .c15-sweep,.c15.run-front .c15-hand{opacity:1}
/* back: ring fills around the rim; the active control glows */
.c15-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none;opacity:0;transition:opacity .25s}
.c15-ring circle{fill:none;stroke:var(--c15-red);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:305.4;stroke-dashoffset:calc(305.4px * (1 - var(--p)));filter:drop-shadow(0 0 2px rgba(255,255,255,.9))}
.c15.run-back .c15-ring{opacity:1}
.c15-hot{position:absolute;transform:translate(-50%,-50%);border:0;margin:0;padding:0;background:transparent;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow .2s,background .2s}
.c15-hot:active{background:rgba(255,255,255,.18)}
.c15-hot.on{background:rgba(255,255,255,.12);box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 26px 8px rgba(210,32,39,.8);animation:c15pulse 1s ease-in-out infinite}
@keyframes c15pulse{50%{box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 12px 3px rgba(210,32,39,.55)}}
.c15-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* panel under the coin */
.c15-panel{width:100%;max-width:360px;text-align:center;min-height:96px}
.c15-cap{font:600 12.5px/1.2 'Barlow Condensed','BC',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--c15-red)}
.c15-count{font:800 46px/1 'Barlow Condensed','BC',sans-serif;color:var(--c15-ink);margin-top:6px;font-variant-numeric:tabular-nums}
.c15-prompt{font:600 19px/1.25 'Barlow Condensed','BC',sans-serif;color:var(--c15-ink);margin:8px 0 0}
.c15-note{font-size:13.5px;line-height:1.4;color:#5a5a5a;margin:8px 0 0}
.c15-recdot{color:var(--c15-red);animation:c15blink 1s steps(2) infinite}@keyframes c15blink{50%{opacity:.25}}
.c15-row{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:12px}
.c15-btn{font:700 15px/1 'Barlow Condensed','BC',sans-serif;letter-spacing:.12em;text-transform:uppercase;border:0;border-radius:999px;padding:13px 26px;background:var(--c15-ink);color:#fff;cursor:pointer;min-height:44px}
.c15-btn.red{background:var(--c15-red)}
.c15-link{font:600 13px/1 'Barlow Condensed','BC',sans-serif;letter-spacing:.14em;text-transform:uppercase;border:0;background:none;color:#5a5a5a;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px 4px;min-height:40px}
.c15-ta,.c15-in{display:block;width:100%;box-sizing:border-box;margin-top:10px;font:16px/1.4 Barlow,'B',sans-serif;border:1.5px solid #cfcfcf;border-radius:10px;padding:10px 12px;background:#fff;color:var(--c15-ink)}
.c15-ta:focus,.c15-in:focus{outline:none;border-color:var(--c15-red)}
/* dark backgrounds */
.c15-dark .c15-count,.c15-dark .c15-prompt{color:#fff}.c15-dark .c15-note,.c15-dark .c15-link{color:#bdbdbd}
/* floating mini coin */
.c15-mini{position:fixed;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:2px;
  background:#121212;color:#fff;border-radius:999px;padding:5px 6px 5px 5px;box-shadow:0 8px 22px rgba(0,0,0,.35);border:1.5px solid rgba(255,255,255,.12);--p:0;animation:c15in .25s ease-out}
.c15-mini[hidden]{display:none}
@keyframes c15in{from{transform:translateY(12px);opacity:0}}
.c15-mini-open{display:flex;align-items:center;gap:9px;border:0;background:none;color:inherit;padding:0 4px 0 0;cursor:pointer;min-height:48px}
.c15-mini-coin{position:relative;width:48px;height:48px;flex:none}
.c15-mini-coin img{position:absolute;inset:4px;width:40px;height:40px;border-radius:50%}
.c15-mini-coin svg{position:absolute;inset:0;transform:rotate(-90deg)}
.c15-mini-coin circle{fill:none;stroke:#D22027;stroke-width:7;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:calc(289px * (1 - var(--p)))}
.c15-mini-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.c15-mini-t b{font:800 22px/1 'Barlow Condensed','BC',sans-serif;font-variant-numeric:tabular-nums}
.c15-mini-t i{font:600 10.5px/1.2 'Barlow Condensed','BC',sans-serif;font-style:normal;letter-spacing:.18em;color:#bdbdbd;margin-top:3px}
.c15-mini.rec .c15-mini-t i{color:#ff5a5f}
.c15-mini-x{border:0;background:rgba(255,255,255,.1);color:#fff;width:34px;height:34px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer}
@media (prefers-reduced-motion:reduce){.c15-coin,.c15-face{transition:none}.c15-flipping .c15-shadow{animation:none}.c15-hot.on,.c15-recdot,.c15-mini{animation:none}.c15-hand{display:none}}