:root{
  --fp-ink:#26233a;
  --fp-paper:#fffdf7;
  --fp-pop:#ff5c8a;  --fp-pop2:#3bc4c9;  --fp-sun:#ffc94d;  --fp-line:#ece6da;
  --fp-soft:#fff3f6;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--fp-ink);background:var(--fp-paper);
  font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
  font-size:18px;line-height:1.65;
}
a{color:#d63a6a;text-decoration:none}
a:hover{text-decoration:underline}
.fp-wrap{max-width:1040px;margin:0 auto;padding:0 18px}

.fp-ribbon{background:linear-gradient(90deg,var(--fp-pop),var(--fp-sun),var(--fp-pop2));color:#fff}
.fp-ribbon .fp-wrap{padding:7px 18px;font-size:14px;font-weight:bold;letter-spacing:.3px}
.fp-ribbon a{color:#fff;text-decoration:underline}

.fp-head{padding:22px 0 10px;text-align:center}
.fp-logo{display:inline-block;font-size:40px;font-weight:800;color:var(--fp-ink);letter-spacing:-1px}
.fp-logo .fp-wink{color:var(--fp-pop)}
.fp-tag{margin:2px 0 0;color:#7a7388;font-size:15px}

.fp-nav{border-top:2px dashed var(--fp-line);border-bottom:2px dashed var(--fp-line);margin-top:12px}
.fp-nav .fp-wrap{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:9px 18px}
.fp-nav a{padding:5px 14px;border-radius:20px;color:var(--fp-ink);font-weight:bold;font-size:15px}
.fp-nav a:hover{background:var(--fp-soft);text-decoration:none}
.fp-nav a.fp-on{background:var(--fp-pop);color:#fff}

.fp-hero{background:var(--fp-soft);border-radius:18px;margin:20px 0;padding:26px 24px;text-align:center}
.fp-hero h1{margin:0 0 6px;font-size:30px}
.fp-hero p{margin:0 auto;max-width:640px;color:#5f5872}

.fp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:18px 0}
.fp-tile{display:block;background:#fff;border:2px solid var(--fp-line);border-radius:14px;padding:16px 12px;text-align:center;color:var(--fp-ink);font-weight:bold;transition:transform .08s,border-color .12s}
.fp-tile:hover{transform:translateY(-3px);border-color:var(--fp-pop);text-decoration:none}
.fp-tile .fp-emoji{display:block;font-size:30px;margin-bottom:6px}

.fp-cols{display:flex;gap:26px;align-items:flex-start;margin:24px 0}
.fp-main{flex:1 1 auto;min-width:0}
.fp-side{flex:0 0 260px}
.fp-h2{font-size:22px;border-left:6px solid var(--fp-sun);padding-left:10px;margin:0 0 14px}

ul.trove{list-style:none;margin:0;padding:0}
ul.trove li{padding:13px 0;border-bottom:1px solid var(--fp-line)}
ul.trove li a{font-size:19px;font-weight:bold;color:var(--fp-ink)}
ul.trove li a:hover{color:var(--fp-pop)}
.headnote{display:block;color:#7a7388;font-size:14px;margin-top:3px}

.fp-collection{margin:8px 0}
.fp-intro{background:var(--fp-soft);border-radius:14px;padding:16px 18px;color:#5f5872}
ol.fp-puns{counter-reset:pun;list-style:none;margin:18px 0;padding:0}
ol.fp-puns li{position:relative;background:#fff;border:2px solid var(--fp-line);border-radius:12px;padding:14px 16px 14px 50px;margin:10px 0}
ol.fp-puns li:before{counter-increment:pun;content:counter(pun);position:absolute;left:12px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--fp-pop2);color:#fff;font-weight:bold;font-size:14px;text-align:center;line-height:26px}

.fp-card{background:#fff;border:2px solid var(--fp-line);border-radius:14px;padding:15px 16px;margin-bottom:16px}
.fp-card h4{margin:0 0 8px;font-size:16px}
.fp-card ul{margin:0;padding-left:18px}
.fp-card li{margin:4px 0}

.fp-foot{margin-top:30px;border-top:2px dashed var(--fp-line);background:var(--fp-soft)}
.fp-foot .fp-wrap{padding:20px 18px;text-align:center;color:#7a7388;font-size:14px}
.fp-foot a{color:#7a7388;text-decoration:underline;margin:0 7px}

.fp-form{background:#fff;border:2px solid var(--fp-line);border-radius:14px;padding:18px;max-width:520px}
.fp-form label{display:block;font-weight:bold;margin:10px 0 4px}
.fp-form input,.fp-form textarea{width:100%;padding:10px;border:2px solid var(--fp-line);border-radius:9px;font:inherit}
.fp-form button{margin-top:14px;background:var(--fp-pop);color:#fff;border:0;border-radius:22px;padding:11px 26px;font-weight:bold;font-size:16px;cursor:pointer}
.fp-form button:hover{background:#e84b7c}

article h1{font-size:28px;margin:0 0 10px}
article p{margin:0 0 14px}

@media(max-width:760px){
  .fp-cols{flex-direction:column}
  .fp-side{flex-basis:auto;width:100%}
  body{font-size:17px}
}