/* Free tools (flashcard maker, email reply writer), 2026-10-14. The card table at night: green felt with an engraved
   gold rim, lacquer inputs, chips for choices, a riffle-shuffle while it thinks, playing cards that are dealt and flip. */
.tool-hero{padding:46px 0 26px;max-width:860px}
.tool-hero h1{font-size:clamp(3rem,6.4vw,5.6rem)}
.tool-hero h1 em{font-style:italic;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.tool{padding:0 0 70px}
.felt{position:relative;display:grid;gap:12px;padding:clamp(20px,3.4vw,38px);border-radius:26px;background:radial-gradient(120% 90% at 50% -10%,#2d5a3a 0,#173524 46%,#0d2016 100%);box-shadow:0 0 0 1px #d8b76c99,inset 0 1px 0 #f8e2a766,inset 0 0 0 7px #0d2016,inset 0 0 0 8px #d8b76c44,0 30px 80px -30px #000,0 10px 30px #0007;overflow:hidden}
.felt:before{content:'';position:absolute;inset:-20%;pointer-events:none;background:repeating-radial-gradient(circle at 50% 120%,#ffffff07 0 1px,transparent 1px 7px);animation:tool-rosette 90s linear infinite}
.felt>*{position:relative}
.tool-label{font:600 11px/1.4 system-ui;letter-spacing:.2em;text-transform:uppercase;color:#e8cf8d;margin-top:4px}
.tool-label .optional{letter-spacing:.06em;text-transform:none;color:#bcb29d;font-weight:400}
.felt textarea,.felt input:not([type=radio]){width:100%;border:1px solid #d8b76c55;border-radius:16px;padding:16px 18px;color:#f6eedc;background:linear-gradient(180deg,#07120c,#0b1a12);box-shadow:inset 0 2px 10px #000a,inset 0 0 0 1px #0006;font:16px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;resize:vertical}
.felt textarea::placeholder,.felt input::placeholder{color:#8f9b8d}
.felt textarea:focus,.felt input:focus{outline:2px solid #ffe1a0;outline-offset:2px;border-color:#ffe1a0}
.tones{display:flex;flex-wrap:wrap;gap:10px;border:0;margin:0;padding:0}
.tones legend{width:100%;margin-bottom:8px}
.tone{position:relative;cursor:pointer}
.tone input{position:absolute;opacity:0;inset:0}
.tone span{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:99px;border:1px dashed #d8b76c88;background:#0b1a12;color:#e7dbc1;font:600 14px/1 system-ui;box-shadow:inset 0 0 0 3px #0b1a12,inset 0 0 0 4px #d8b76c33;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.tone span:before{content:'';width:10px;height:10px;border-radius:50%;background:#3a4a3f;box-shadow:inset 0 0 0 2px #0b1a12}
.tone input:checked+span{background:var(--foil);color:#1b190f;border-style:solid;transform:translateY(-2px)}
.tone input:checked+span:before{background:#1b190f}
.tone input:focus-visible+span{outline:2px solid #ffe1a0;outline-offset:3px}
.tool-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:6px}
.count{font:12px/1 system-ui;letter-spacing:.08em;color:#bcb29d}
.deal{gap:14px;font-size:15px;padding:15px 28px}
.deal[disabled]{opacity:.7;cursor:progress}
.tossed{animation:tool-toss .7s cubic-bezier(.34,1.56,.64,1)}
.tool-fine{margin:14px 4px 0}
.table-out{min-height:10px;margin-top:28px}
/* thinking: a dealer's riffle shuffle */
.riffle{display:grid;justify-items:center;gap:16px;padding:40px 0}
.riffle-deck{position:relative;width:150px;height:96px}
.riffle-card{position:absolute;left:50%;top:10px;width:52px;height:74px;margin-left:-26px;border-radius:7px;background:repeating-linear-gradient(45deg,#1a2a20 0 4px,#14211a 4px 8px);box-shadow:0 0 0 1px #d8b76c,inset 0 0 0 3px #0d1912,inset 0 0 0 4px #d8b76c66,0 4px 10px #0008;animation:tool-riffle 1.9s cubic-bezier(.45,0,.2,1) infinite;animation-delay:calc(var(--i)*55ms)}
.riffle-card.left{--dx:-44px;--rot:-9deg}.riffle-card.right{--dx:44px;--rot:9deg}
.riffle-caption{font:15px Georgia,serif;font-style:italic;color:#e8cf8d;margin:0}
/* the deck */
.deck-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.deck-count{margin:0;font:600 12px/1.4 system-ui;letter-spacing:.16em;text-transform:uppercase;color:#e8cf8d}
.deck-tools{display:flex;flex-wrap:wrap;gap:10px}
.deck-tools .chip{gap:10px;padding:11px 18px;cursor:pointer;color:inherit;background:transparent;font-family:inherit}
.deck-tools .chip.primary{color:#1b190f;background:var(--foil)}
.deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;perspective:1400px}
.fc{position:relative;display:block;min-height:250px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;opacity:0;transform-style:preserve-3d}
.fc.dealt{animation:tool-deal .85s cubic-bezier(.2,1.25,.35,1) both;animation-delay:calc(var(--i,0)*70ms)}
.fc:focus-visible{outline:3px solid #ffe1a0;outline-offset:6px;border-radius:16px}
.fc-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.34,1.4,.5,1)}
.fc.flipped .fc-inner{transform:rotateY(180deg)}
.fc:hover .fc-inner{translate:0 -4px}
.fc-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:44px 26px;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.fc-front{background:radial-gradient(130% 100% at 50% 0,#fffaf0,#f2e7cf);color:#191510;box-shadow:0 0 0 1px #c9a55a,inset 0 0 0 5px #fbf4e4,inset 0 0 0 6px #c9a55a88,0 14px 34px -12px #000c}
.fc-back{transform:rotateY(180deg);background:radial-gradient(130% 100% at 50% 0,#1d1a12,#0b0a07);color:#f6e7bd;box-shadow:0 0 0 1px #d8b76c,inset 0 1px 0 #f8e2a755,inset 0 0 0 5px #0b0a07,inset 0 0 0 6px #d8b76c66,0 14px 34px -12px #000c}
.fc-back:before{content:'';position:absolute;inset:-40%;background:repeating-radial-gradient(circle at 50% 50%,#d8b76c0d 0 1px,transparent 1px 6px);pointer-events:none}
.fc-face:after{content:'';position:absolute;top:-60%;left:-80%;width:60%;height:220%;background:linear-gradient(105deg,transparent,#ffffff55,transparent);transform:rotate(18deg) translateX(-120%);transition:transform .9s ease}
.fc:hover .fc-face:after{transform:rotate(18deg) translateX(520%)}
.fc-text{position:relative;font:19px/1.4 Georgia,'Times New Roman',serif;letter-spacing:-.01em;text-align:center}
.fc-back .fc-text{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:20px}
.corner{position:absolute;white-space:pre;font:700 15px/1 Georgia,serif;text-align:center}
.corner.tl{top:12px;left:14px}.corner.br{bottom:12px;right:14px;transform:rotate(180deg)}
.fc-front .corner{color:#1b190f}.fc-back .corner,.letter .corner{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
/* the reply */
.letter{position:relative;padding:54px clamp(26px,5vw,64px) 50px;border-radius:20px;background:radial-gradient(130% 100% at 50% 0,#fffaf0,#f2e7cf);color:#191510;box-shadow:0 0 0 1px #c9a55a,inset 0 0 0 6px #fbf4e4,inset 0 0 0 7px #c9a55a88,0 24px 60px -20px #000d;max-width:860px}
.letter.dealt{animation:tool-deal .9s cubic-bezier(.2,1.25,.35,1) both}
.letter .corner{background:none;color:#1b190f}
.letter-eyebrow{font:600 11px/1 system-ui;letter-spacing:.22em;text-transform:uppercase;color:#8c6830;margin:0 0 18px}
.letter-body{white-space:pre-wrap;font:17px/1.7 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#191510}
.dealt-wrap>.deck-tools{margin-top:22px}
/* the Joker */
.joker{position:relative;max-width:560px;padding:46px 40px 38px;border-radius:18px;background:radial-gradient(130% 100% at 50% 0,#fffaf0,#efe2c6);color:#191510;box-shadow:0 0 0 1px #8b2a2a,inset 0 0 0 5px #fbf4e4,inset 0 0 0 6px #8b2a2a77,0 18px 44px -16px #000c;animation:tool-shake .55s cubic-bezier(.36,.07,.19,.97)}
.joker .corner{color:#8b2a2a}
.joker-title{font:italic 26px Georgia,serif;color:#8b2a2a;margin:0 0 10px}
.joker-text{color:#2b241a;margin:0 0 18px;font-size:16px}
.joker .chip.primary{color:#1b190f}
.left{display:flex;align-items:center;gap:12px;margin:24px 0 6px;font-size:14px;color:#bcb29d}
.chips{display:inline-flex}
.chipmark{width:18px;height:18px;margin-left:-6px;border-radius:50%;background:var(--foil);box-shadow:0 0 0 2px #0b100d,inset 0 0 0 3px #c8a559,inset 0 0 0 4px #0b100d55;animation:tool-chip .5s cubic-bezier(.34,1.56,.64,1) both}
.chipmark:first-child{margin-left:0}
.chipmark:nth-child(2){animation-delay:.08s}.chipmark:nth-child(3){animation-delay:.16s}.chipmark:nth-child(4){animation-delay:.24s}.chipmark:nth-child(5){animation-delay:.32s}
.ace-line{margin:0;font-size:15px}.ace-line a{color:#f5d88c;border-bottom:1px solid #d8b76c66}
.ace-pitch{padding:60px 0 70px;border-top:1px solid var(--line);max-width:840px}
@keyframes tool-deal{0%{opacity:0;transform:translate3d(0,-120px,0) rotate(-14deg) rotateY(25deg) scale(.86)}55%{opacity:1;transform:translate3d(0,8px,0) rotate(2deg) scale(1.02)}78%{transform:translate3d(0,-3px,0) rotate(-.8deg)}100%{opacity:1;transform:none}}
@keyframes tool-riffle{0%,100%{transform:translateX(0) rotate(0)}30%{transform:translateX(var(--dx)) rotate(var(--rot))}55%{transform:translateX(calc(var(--dx)*.4)) translateY(-6px) rotate(calc(var(--rot)*.5))}75%{transform:translateX(0) translateY(-2px)}}
@keyframes tool-toss{0%{transform:none}40%{transform:translateY(-6px) rotateX(180deg)}100%{transform:none}}
@keyframes tool-shake{0%,100%{transform:none}20%{transform:translateX(-10px) rotate(-1.5deg)}40%{transform:translateX(9px) rotate(1deg)}60%{transform:translateX(-6px)}80%{transform:translateX(3px)}}
@keyframes tool-chip{0%{opacity:0;transform:translateY(-14px) scale(.6)}100%{opacity:1;transform:none}}
@keyframes tool-rosette{to{transform:rotate(360deg)}}
@media(max-width:640px){.deck{grid-template-columns:1fr}.fc{min-height:210px}.deck-tools .chip{flex:1 1 auto}.felt{border-radius:20px}}
@media(prefers-reduced-motion:reduce){.felt:before,.riffle-card,.fc.dealt,.letter.dealt,.joker,.chipmark,.tossed{animation:none}.fc{opacity:1}.fc-inner{transition:none}.fc-face:after{display:none}}