/* Blurt's how to play (tutorial.js): a System 1 window from system.css, over the page screened in dark grey.
   Everything here is scoped to the window, so it sits on any page without restyling it. */

/* the page behind: System 1's dark grey, three pixels in four black and the fourth half dark, so the page reads
   as off but still there. System 1 didn't dim behind a dialog; this is its own pattern doing that job */
.howto-shade{position:fixed;inset:0;z-index:174;background:repeating-conic-gradient(#1e1e1e 0 75%,transparent 0 100%) 0 0/2px 2px,rgba(30,30,30,.55);animation:howto-fade 120ms}
@keyframes howto-fade{from{opacity:0}}
.howto-win{z-index:175;overflow:auto;animation:howto-open 160ms cubic-bezier(.23,1,.32,1)}
@keyframes howto-open{from{opacity:0;transform:translateX(-50%) scale(.96)}}

.howto{--ink:#1e1e1e;--paper:#fefefe;--blurt:#ff5a1f;position:relative;padding:22px 22px 18px;color:var(--ink);background:var(--paper);font:13px "Departure Mono",monospace;text-align:left}
.howto p{margin:0;text-wrap:balance}
.howto .ht-lead{font:500 21px/1.2 "Inter Tight",sans-serif;letter-spacing:-.025em;margin-bottom:12px}
.howto .ht-rule{font:15px "Departure Mono",monospace;margin-bottom:22px}
.howto .ht-rule b{font-weight:400;background:var(--ink);color:var(--paper);padding:1px 6px}
/* the question to try, set off by a rule like privacy's rows */
.howto .ht-try{border-top:1.5px solid var(--ink);padding-top:16px}
.howto .ht-lab{display:inline-block;background:var(--ink);color:var(--paper);padding:1px 6px;text-transform:uppercase;margin-bottom:12px}
.howto .ht-q{font:600 28px/1.05 "Inter Tight",sans-serif;letter-spacing:-.035em}
.howto .ht-tgt{display:inline-block;font:400 .62em/1 "Departure Mono",monospace;background:var(--ink);color:var(--paper);padding:.18em .32em .16em;vertical-align:.18em;margin-left:.1em;letter-spacing:0}
.howto .ht-bar{display:block;width:100%;height:auto;overflow:visible;margin-top:2px}
.howto .ht-tnum,.howto .ht-sn{font:18px "Departure Mono",monospace;letter-spacing:-.12em;fill:var(--ink)}
.howto .ht-sw{font:500 19px "Inter Tight",sans-serif;fill:var(--ink)}
/* the target breathes until the first word */
.howto .waiting .ht-tnum{animation:howto-breathe 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
@keyframes howto-breathe{50%{transform:scale(1.22)}}
/* which way to go, written in the bar from where the word landed */
.howto .ht-hint{font:16px "Departure Mono",monospace;paint-order:stroke;stroke-width:7px;stroke-linejoin:round;animation:howto-push .7s ease-in-out 200ms 3}
@keyframes howto-push{50%{transform:translateX(var(--dx))}}
.howto .ht-say{display:flex;border-bottom:2px solid var(--ink);padding:4px 0;margin-top:14px;font:500 22px "Inter Tight",sans-serif;letter-spacing:-.02em}
.howto .ht-say input{flex:1;border:0;outline:0;background:none;font:inherit;color:inherit;min-width:0;padding:0}
.howto .ht-say input::placeholder{color:var(--ink);opacity:.32}
.howto .ht-note{min-height:1em;margin-top:6px;opacity:.7}
.howto .ht-mark{position:absolute;pointer-events:none;z-index:5;transform:translate(-50%,-100%) rotate(var(--r));transition:opacity .5s}
/* the play button: System 1's default, ringed */
.howto .ht-btns{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:14px}
.howto .ht-btns span{opacity:.6}

/* the scale's two ends, under a bar (blurtEnds): shown through 3·2·1 on the daily, then dithered away */
.scale-ends{display:flex;justify-content:space-between;font:14px/1 "Departure Mono",monospace;opacity:.6}
.scale-ends.off{opacity:0}

/* the ? that opens it, for a black title bar like the home page card's */
/* drawn 20px, but a finger gets 44: the box round it takes the tap too */
.howto-help{position:relative;margin-left:auto;width:20px;height:20px;padding:0;display:grid;place-items:center;background:none;border:1px solid #fefefe;color:#fefefe;font:15px/1 "Departure Mono",monospace;cursor:pointer}
.howto-help::after{content:"";position:absolute;inset:-12px}
.howto-help:hover,.howto-help:focus-visible{background:#fefefe;color:#1e1e1e;outline:0}
.howto-help:active{transform:translateY(1px)}

/* the notes (blurtNotes): sprayed in Sedgwick Ave, the tag's can, over the card and the wall beside it */
.notes{position:absolute;inset:0;pointer-events:none;z-index:6}
.notes svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.notes path{fill:none;stroke:#1e1e1e;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.notes .scrawl{position:absolute;font:400 26px/.95 "Sedgwick Ave";white-space:pre-line;width:max-content;max-width:260px;text-wrap:balance;color:#1e1e1e;transform:translate(var(--ax),var(--ay,-50%)) rotate(var(--r))}
.notes .scrawl.under{font-size:23px;max-width:250px}   /* stacked under the card on a phone */
.notes.gone{opacity:0;transition:opacity 180ms}
.howto-help.on{background:#fefefe;color:#1e1e1e}

@media (prefers-reduced-motion:reduce){.howto-shade,.howto-win,.howto *{animation:none!important}}