/* 组件各段的出处（许可 ｜ 库 ｜ 文件 ｜ 作者）：
     MIT      ｜ CSS3 Patterns（github.com/LeaVerou/css3patterns）｜ css3patterns.css ｜ Lea Verou
     MIT      ｜ DoodleCSS（github.com/chr15m/DoodleCSS）｜ doodle.css ｜ Chris McCormick
              ｜ Retro Scrapbook（drjulsgilliam.github.io）｜ retro-scrapbook.html ｜ drjulsgilliam
              ｜ cute-alism ｜ cute-alism.html ｜ drjulsgilliam
              ｜ css-textures ｜ css-textures.html ｜ drjulsgilliam
              ｜ css3patterns ｜ css3patterns.html ｜ drjulsgilliam
              ｜ eyebrow-lab ｜ eyebrow-lab.html ｜ drjulsgilliam
   以上全部来自 drjulsgilliam.github.io/HTML-CSS-Visual-Playground/ 的同一个站点。
   完整出处见 static/lib/CREDITS.txt */

/* Retro Scrapbook的牛皮纸配色 */
.tape { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 80px; height: 26px; background: rgba(224,164,88,.55); border: 1px dashed rgba(120,90,40,.4); }
.polaroid { background: #fff; padding: 12px 12px 34px; box-shadow: 0 8px 20px rgba(0,0,0,.25); position: relative; }
.polaroid .cap { font-family: 'Caveat', cursive; font-size: 1.3rem; color: #3a2e1e; text-align: center; margin-top: 8px; }

/* Retro Scrapbook的便签
        https://drjulsgilliam.github.io/HTML-CSS-Visual-Playground/retro-scrapbook.html  */
.note-torn { background: #fff6d8; padding: 22px 26px; position: relative; box-shadow: 0 8px 18px rgba(186,67,99,.14); clip-path: polygon(0 3%, 5% 0, 17% 4%, 31% 0, 47% 4%, 63% 0, 79% 4%, 93% 0, 100% 3%, 100% 97%, 93% 100%, 78% 96%, 61% 100%, 45% 96%, 29% 100%, 15% 96%, 5% 100%, 0 97%); }
.note-torn p { font-family: "幼圆","YouYuan","KaiTi","STKaiti",cursive; font-size: 15.5px; line-height: 1.9; }

/* Retro Scrapbook的贴纸 */
.sticker { width: 84px; height: 84px; border-radius: 50%; background: #e07a5f; color: #fff; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; text-align: center; font-size: .9rem; transform: rotate(-8deg); }
.sticker.star { background: #f2cc8f; color: #6b4f2a; border-radius: 14px; transform: rotate(6deg); }
.sticker.p { background: #ffd9e3; color: #c2537f; transform: rotate(7deg); }
.sticker.v { background: #fff6d8; color: #a08244; transform: rotate(11deg); }

.rs { background-color: #fffdfc; background-image: linear-gradient(#f6dfe8 1px, transparent 1px), linear-gradient(90deg, #f6dfe8 1px, transparent 1px); background-size: 24px 24px; border-radius: 0; padding-bottom: 30px; }
.tx-dots { background-color: #fffdfc; background-image: radial-gradient(#f3c9d8 2px, transparent 2px); background-size: 20px 20px; }
.tx-check { background: conic-gradient(#f6d0de 90deg, #fff3f7 0 180deg, #f6d0de 0 270deg, #fff3f7 0); background-size: 36px 36px; }
.tx-stripes { background: repeating-linear-gradient(45deg, #f7cddb 0 12px, #fff3f7 12px 24px); }
.cbtn { font: inherit; font-weight: 800; border: 3px solid #fff; border-radius: 999px; padding: 13px 26px; cursor: pointer; color: #fff; box-shadow: 0 5px 0 rgba(0,0,0,.12); }
.cbtn.pink { background: #ff9ec7; }
.cbtn.mint { background: #6fd6b5; }
.cbtn.lilac { background: #b39cf0; }
.cbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.ccard { max-width: 320px; background: #fff; border-radius: 26px; padding: 24px; position: relative; box-shadow: 0 14px 30px rgba(200,140,180,.25); border: 2px solid #ffe0ee; }
.ccard .badge { position: absolute; top: -14px; right: 16px; background: #ffd166; color: #7a5a00; font-weight: 800; font-size: .72rem; padding: 6px 12px; border-radius: 999px; transform: rotate(8deg); border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.ccard h4 { color: #5a3a52; font-size: 1.2rem; margin-bottom: 6px; }
.ccard p { color: #8a6a82; font-size: .88rem; }
.tx-grain::after { content:'';position:absolute;inset:0;border-radius:12px;opacity:.35; mix-blend-mode:multiply;background-image:url("data:image/svg+xml,...feTurbulence...") }
.rs { position: relative; }
.rs::after { content: ''; position: absolute; inset: 0; opacity: .26; mix-blend-mode: multiply; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.rs .post-title { color: #5c4350; font-size: 1.5rem; }
.rs .post-subtitle { color: #8a6f7e; font-weight: 400; font-size: 1.02rem; }
.rs .post-meta { color: #ba4363; font-size: .88rem; margin-top: 10px; }
.rs a { color: #df5e5e; }
.rs a:hover { color: #ba4363; }
.rs hr.my-4 { border: 0; border-top: 1.5px dashed rgba(186,67,99,.28); margin: 18px 0; }
.rs .card { border: 1px solid rgba(186,67,99,.14); border-radius: 18px; background: #fffdfc; box-shadow: 0 6px 16px rgba(186,67,99,.10); overflow: hidden; }
.rs .card-title { color: #5c4350; }
.rs .card-text { color: #8a6f7e; }
.rs .polaroid { margin-bottom: 0; }
.rs .sidebar { background: linear-gradient(180deg,#ffd9e3,#ffe9f0) !important; }
.rs .sidebar .nav-link { color: #8a5064; }
.rs .sidebar .nav-link.active, .rs .sidebar .nav-link:hover { color: #ba4363; background: rgba(255,255,255,.55); }
.rs .table > thead { color: #ba4363; }
.rs .table { border-color: rgba(186,67,99,.16); }
.rs .form-control:focus { border-color: #f0a8bd; box-shadow: 0 0 0 .2rem rgba(223,94,94,.18); }
.rs div.epigraph { margin: 1.2em 0 1.4em; }
.rs div.epigraph > blockquote { margin: 0; padding: 2px 0 2px 14px; border-left: 3px solid rgba(186,67,99,.35); }
.rs div.epigraph > blockquote, .rs div.epigraph > blockquote > p { font-style: normal; color: #8a6f7e; font-size: 1rem; }
.rs div.epigraph > blockquote > footer > cite { font-style: normal; color: #ba4363; font-size: .85rem; }
.rs div.epigraph > blockquote p { width: 100%; margin: 0; font-size: 1rem; }
.rs div.epigraph > blockquote footer { width: 100%; margin: 4px 0 0; text-align: left; font-size: .85rem; }
.rs div.epigraph > blockquote { font-size: 1rem; }
.rs .eb-pill.rose { background: rgba(223,94,94,.12); color: #ba4363; border-color: rgba(223,94,94,.22); }
.rs .eb-pill.purple { background: rgba(176,127,168,.14); color: #8a5f84; border-color: rgba(176,127,168,.24); }
.rs .eb-pill.green { background: rgba(92,191,159,.14); color: #3f8f74; border-color: rgba(92,191,159,.26); }
.rs .eb-pill.blue { background: rgba(106,169,216,.14); color: #4a7fa8; border-color: rgba(106,169,216,.26); }
.rs .eb-tags.rose .eb-tag-item { color: #ba4363; }
.rs .eb-tags.teal .eb-tag-item { color: #3f8f74; }
.rs .eb-tag-dot { background: rgba(186,67,99,.45); }
.dk-hr { border-style: solid; border-width: 0 3px 6px 3px; border-image: url(../lib/doodle/hr.svg) 0 3 6 3 stretch stretch; }
.dk-img { border-style: solid; border-width: 3px; border-image: url(../lib/doodle/button.svg) 3 3 3 3 stretch stretch; }
.dk-frame { border-style: solid; border-width: 10px; border-image: url(../lib/doodle/button.svg) 10 10 10 10 stretch stretch; }
.dk-box { border-style: solid; border-width: 10px; border-image: url(../lib/doodle/border.svg) 10 10 10 10 stretch stretch; }
.dk-bq { border-left-style: solid; border-width: 0 6px 3px 6px; border-image: url(../lib/doodle/bq.svg) 0 6 3 6 stretch stretch; padding-left: .5em; border-right-width: 0; }
.dk-star { width: 26px; height: 26px; display: inline-block; vertical-align: -6px; }
.p-lined { background-color: #fffdfc; background-image: linear-gradient(90deg, transparent 79px, #f0cddc 79px, #f0cddc 81px, transparent 81px), linear-gradient(#f6dfe8 .1em, transparent .1em); background-size: 100% 1.6em; }
.p-hearts { background-color: #f0a8bd; background-image: radial-gradient(circle closest-side at 60% 43%, #e08fa8 26%, rgba(240,168,189,0) 27%), radial-gradient(circle closest-side at 40% 43%, #e08fa8 26%, rgba(240,168,189,0) 27%), radial-gradient(circle closest-side at 42% 22%, #ffe0ea 43%, rgba(255,224,234,0) 45%), radial-gradient(circle closest-side at 58% 22%, #ffe0ea 43%, rgba(255,224,234,0) 45%), radial-gradient(circle closest-side at 50% 35%, #ffe0ea 32%, rgba(255,224,234,0) 27%), radial-gradient(circle closest-side at 60% 43%, #e08fa8 26%, rgba(240,168,189,0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 43%, #e08fa8 26%, rgba(240,168,189,0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 22%, #ffe0ea 40%, rgba(255,224,234,0) 45%) 52px 50px, radial-gradient(circle closest-side at 60% 22%, #ffe0ea 40%, rgba(255,224,234,0) 45%) 48px 50px, radial-gradient(circle closest-side at 50% 35%, #ffe0ea 30%, rgba(255,224,234,0) 37%) 50px 50px; background-size: 100px 100px; }
.rs::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 30px; background-image: radial-gradient(circle at 15px 22px, rgba(255,255,255,.85) 0 5px, #f2dbe5 5px 6px, transparent 6.5px), radial-gradient(circle at 15px 22px, transparent 0 9px, rgba(150,140,150,.30) 9px 10.5px, transparent 11px); background-size: 30px 44px; pointer-events: none; z-index: 1; }
.rs { padding-left: 34px; }
.tape.gingham, .washi.gingham { background: conic-gradient(#f6d0de 90deg, #fff3f7 0 180deg, #f6d0de 0 270deg, #fff3f7 0); background-size: 22px 22px; border-color: rgba(186,67,99,.25); }
.tape.dots { background-color: #f6cddd; background-image: radial-gradient(#fff3f7 2.5px, transparent 2.6px); background-size: 16px 16px; border-color: rgba(186,67,99,.22); }
.tape.stars { background-color: #f7c6d6; background-image: linear-gradient(324deg, #fff3f7 4%, transparent 4%) -12px 56px, linear-gradient( 36deg, #fff3f7 4%, transparent 4%) 48px 56px, linear-gradient( 72deg, #f2aec6 8.5%, transparent 8.5%) 48px 56px, linear-gradient(288deg, #f2aec6 8.5%, transparent 8.5%) -12px 56px, linear-gradient(216deg, #f2aec6 7.5%, transparent 7.5%) -12px 44px, linear-gradient(144deg, #f2aec6 7.5%, transparent 7.5%) 48px 44px; background-size: 60px 60px; border-color: rgba(186,67,99,.22); }
.tape.hearts { background-size: 46px 46px; }
.rs .container { padding-top: 2px; }
.rs .post-preview p:last-child { margin-bottom: 0; }

/* 荧光笔高亮来自 text-lab.html */
.highlight-mark { background: rgba(236,72,153,.2); padding: 0 4px; border-radius: 3px; }

.eb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.eb-pill.rose { background: rgba(223,94,94,.12); color: #ba4363; border: 1px solid rgba(223,94,94,.22); }

.paper-torn {
    position: relative;
    transform: rotate(-.5deg);
}
.paper-torn:nth-child(even) { transform: rotate(.5deg); }

.paper-torn-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    filter:
        url(#torn)
        drop-shadow(0 0 1.5px rgba(186,67,99,.45))
        drop-shadow(0 7px 14px rgba(186,67,99,.24))
        drop-shadow(3px 4px 0 rgba(186,67,99,.10));
}

.paper-torn-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .30;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.paper-torn-body {
    position: relative;
    z-index: 1;
}