:root{--bg-gradient:linear-gradient(135deg, #f274bc 0%, #e0c3fc 100%);--card-bg:#ffffff;--text-main:#000000;--text-muted:#666666;--text-invert:#ffffff;--border-color:#000000;--accent-pink:#ff99cc;--accent-pink-dark:#e33eb4;--accent-purple:#e2c0ff;--accent-blue:#a0c4ff;--accent-peach:#ffe5b4;--accent-gray:#f0f0f0;--accent-gray-light:#f9f9f9;--accent-gray-modal:rgba(0, 0, 0, 0.9);--font-main:'Manrope', sans-serif;--font-mono:'Courier New', Courier, monospace;--spacing-xs:0.5rem;--spacing-sm:0.8rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--transition-fast:0.1s;--transition-base:0.2s;--transition-slow:0.4s;--border-width:3px;--border-thin:2px;--shadow-hard:6px 6px 0px var(--border-color);--shadow-soft:3px 3px 0px var(--border-color);--radius:12px;--radius-round:50%;--radius-pill:30px;--stripes:repeating-linear-gradient(45deg,
            var(--accent-pink),
            var(--accent-pink) 10px,
            var(--accent-blue) 10px,
            var(--accent-blue) 20px);--stripes-purple:repeating-linear-gradient(45deg,
            var(--accent-purple),
            var(--accent-purple) 10px,
            var(--accent-pink) 10px,
            var(--accent-pink) 20px);--stripes-blue:repeating-linear-gradient(45deg,
            var(--accent-blue),
            var(--accent-blue) 10px,
            var(--accent-purple) 10px,
            var(--accent-purple) 20px);--stripes-gray:repeating-linear-gradient(45deg,
            #dfdfdf,
            #dfdfdf 10px,
            #eeeeee 10px,
            #eeeeee 20px)}*{box-sizing:border-box}body{background:var(--bg-gradient);background-attachment:fixed;color:var(--text-main);font-family:var(--font-main);margin:0;padding:0;line-height:1.6;min-height:100vh;display:flex;flex-direction:column;align-items:center}a{color:inherit;text-decoration:none;transition:transform var(--transition-fast),color var(--transition-base);will-change:transform;&:active { transform:translate(2px,2px); } &:focus-visible { outline:3px solid var(--accent-pink); outline-offset:2px; border-radius:4px; }}img{max-width:100%;height:auto;display:block}.bordered-card,.main-card{background:var(--card-bg);border:var(--border-width)solid var(--border-color);border-radius:var(--radius)}.bordered-card{box-shadow:var(--shadow-soft)}.main-card{box-shadow:var(--shadow-hard);overflow:hidden}.site-wrapper{width:100%;max-width:1100px;padding:var(--spacing-xl)var(--spacing-md)}.container{width:100%}.card-header{background:var(--accent-purple);border-bottom:var(--border-width)solid var(--border-color);padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;.logo { font-weight: 800; font-size: 1.5rem; text-transform: uppercase; letter-spacing: -1px; } nav { ul { list-style: none; display: flex; gap: 1.5rem; padding: 0; margin: 0; } a { font-weight: 700; font-size: 0.9rem; text-transform: uppercase; &:hover { text-decoration: underline; text-decoration-thickness: 3px; } } }}.lang-switch{display:inline-flex;gap:.5rem;padding-left:1rem;border-left:2px solid var(--border-color);a { color: var(--text-muted); &.active { color: var(--text-main); text-decoration: underline; text-decoration-thickness: 3px; } }}.card-content{padding:2rem}.card-footer{border-top:var(--border-width)solid var(--border-color);background:var(--accent-gray-light);padding:1.5rem;text-align:center;font-size:.9rem;font-weight:700}.profile-section{text-align:center;margin-bottom:2rem;background:#fbe3ff;padding:2rem;border:var(--border-width)solid var(--border-color);.avatar-container { width: 150px; height: 150px; border: var(--border-width) solid var(--border-color); border-radius: var(--radius-round); overflow: hidden; margin: 0 auto 1.5rem; background: var(--card-bg); } .profile-text { h1 { font-size: clamp(2rem, 5vw, 2.5rem); margin: 0; font-weight: 800; } .tagline { display: inline-block; background: var(--accent-gray); padding: 0.3rem 0.8rem; font-family: var(--font-mono); font-size: 0.9rem; margin-top: 0.5rem; border: var(--border-thin) solid var(--border-color); } }}.actions-section{max-width:600px;margin:0 auto}.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem}.action-btn,.social-btn,.back-btn{transition:all var(--transition-base);will-change:transform;cursor:pointer;&:hover { box-shadow:none; transform:translate(3px,3px); }}.action-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.6rem 1rem;border:var(--border-width)solid var(--border-color);border-radius:var(--radius);box-shadow:var(--shadow-soft);font-size:1rem;font-weight:700;&:focus-visible { outline:3px solid var(--accent-pink-dark); outline-offset:2px; } &.btn-pink { background:var(--accent-pink); } &.btn-purple { background:var(--accent-blue); } &.btn-peach { background:var(--accent-peach); } &.btn-disabled { background:var(--stripes-gray); color:#999; cursor:not-allowed; box-shadow:none; opacity:0.8; &:hover { transform:none; box-shadow:none; } } .btn-icon { font-size:1.2rem; }}.social-links-row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-bottom:2rem}.social-btn{padding:.6rem 1.2rem;border:var(--border-thin)solid var(--border-color);border-radius:var(--radius-pill);font-weight:600;font-size:.9rem;background:var(--card-bg);box-shadow:2px 2px 0 var(--border-color);display:inline-flex;align-items:center;gap:var(--spacing-xs);.social-icon { width: 18px; height: 18px; object-fit: contain; } &:hover { background: var(--border-color); color: var(--text-invert); transform: translate(2px, 2px); .social-icon { filter: invert(1); } }}.back-button-container{text-align:center;margin:3rem 0 1rem}.back-btn{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm)var(--spacing-xl);font-weight:800;text-transform:uppercase;background:var(--card-bg);border:var(--border-width)solid var(--border-color);border-radius:var(--radius);box-shadow:var(--shadow-soft);font-size:1rem;&:hover { background:var(--accent-pink); color:var(--text-invert); } &:focus-visible { outline:3px solid var(--accent-pink-dark); outline-offset:2px; }}.updates-section{h3 { border-bottom: var(--border-width) solid var(--border-color); padding-bottom: 0.5rem; margin-bottom: 1.5rem; } .updates-list { list-style: none; padding: 0; margin: 0; li { margin-bottom: 1rem; } a { display: flex; justify-content: space-between; padding: 0.8rem 1rem; background: var(--accent-gray-light); border: var(--border-thin) solid var(--border-color); transition: all 0.2s; &:hover { background: var(--card-bg); box-shadow: var(--shadow-soft); transform: translate(-2px, -2px); } } .date { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.85rem; } }}.list-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:stretch}.gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.gallery-item{border:var(--border-thin)solid var(--border-color);padding:var(--spacing-md);background:var(--card-bg);box-shadow:var(--shadow-soft);transition:all var(--transition-base);will-change:transform;display:flex;flex-direction:column;height:100%;&:hover { transform:translate(-3px,-3px); box-shadow:var(--shadow-hard); } &:focus-visible { outline:3px solid var(--accent-pink); outline-offset:2px; } h2 { font-size:1.2rem; margin:0 0 0.8rem 0; line-height:1.2; }}.list-item{margin-bottom:0;padding-bottom:0;&::after { display:none; }}.row-divider{display:block;width:100%;height:14px;margin:2rem 0;grid-column:1/-1;background:var(--stripes);border:var(--border-thin)solid var(--border-color);box-shadow:3px 3px 0 var(--border-color);border-radius:4px;box-sizing:border-box;.gallery-grid & { display: none; } .list-grid &:last-child { display: none; }}.item-details{margin-bottom:.8rem}.summary-text{font-size:.85rem;line-height:1.4;color:#333;margin:0;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.img-container{border:var(--border-thin)solid var(--border-color);margin-bottom:var(--spacing-sm);aspect-ratio:3/4;overflow:hidden;background:#f5f5f5;img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--transition-slow) ease; will-change: transform; }}.page-header,.single-article{h1 { font-size: clamp(1.8rem, 4vw, 2.2rem); margin-bottom: var(--spacing-md); }}.page-header{margin-bottom:var(--spacing-xl);text-align:center}.meta{text-align:left;font-family:var(--font-mono);color:var(--text-muted);margin-bottom:2rem}.content{line-height:1.8;img { margin: 2rem auto; border: var(--border-thin) solid var(--border-color); box-shadow: var(--shadow-soft); }}.featured-image-container{width:100%;margin-bottom:2rem;border:var(--border-width)solid var(--border-color);box-shadow:var(--shadow-soft);overflow:hidden;cursor:pointer}.post-gallery{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem}.gallery-image-wrapper{border:var(--border-width)solid var(--border-color);box-shadow:var(--shadow-soft);overflow:hidden;background:var(--card-bg);display:flex;flex-direction:column;height:100%;.gallery-image { width: 100%; height: 600px; object-fit: cover; display: block; flex-grow: 1; cursor: pointer; }}.single-image-gallery{grid-template-columns:1fr;.gallery-image-wrapper { height: auto; width: fit-content; margin: 0 auto; .gallery-image { height: auto; max-height: 85vh; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; } }}.image-modal{display:none;position:fixed;z-index:1000;inset:0;background-color:var(--accent-gray-modal);cursor:pointer;align-items:center;justify-content:center;padding:2rem;&.active { display: flex; } .image-modal-content { max-width: 90%; max-height: 90vh; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); border: 4px solid var(--text-invert); border-radius: 8px; object-fit: contain; }}.featured-image{cursor:pointer}.external-source{padding:.8rem;text-align:right;font-size:.9rem;border-top:var(--border-width)solid var(--border-color);background:var(--card-bg);font-family:var(--font-main);a { font-weight: 700; color: var(--accent-pink-dark); text-decoration: underline; text-decoration-thickness: 2px; &:hover { background: var(--accent-pink); color: var(--text-invert); text-decoration: none; padding: 0 4px; border-radius: 4px; } }}.missing-translation-page{display:flex;justify-content:center;align-items:center;min-height:400px}.missing-content-card{background:var(--card-bg);border:var(--border-width)solid var(--border-color);box-shadow:var(--shadow-hard);border-radius:var(--radius);padding:3rem 2rem;text-align:center;max-width:500px;width:100%;.missing-icon { margin-bottom: var(--spacing-lg); color: var(--accent-pink); } h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: var(--spacing-md); font-weight: 800; } .missing-message { font-size: 1.1rem; color: #444; margin-bottom: 2rem; } .back-link .back-btn { padding: 0.6rem 1.5rem; font-size: 0.9rem; }}.tags-list-container{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem}.tag-item{background:var(--card-bg);border:var(--border-width)solid var(--border-color);box-shadow:var(--shadow-soft);border-radius:var(--radius);transition:all var(--transition-base);will-change:transform;a { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.5rem; width: 100%; } .tag-name { font-weight: 800; font-size: 1.2rem; text-transform: uppercase; } .tag-count { background: var(--accent-pink); color: var(--text-invert); padding: 0.2rem 0.8rem; border: var(--border-thin) solid var(--border-color); border-radius: var(--radius-pill); font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; } &:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-hard); background: var(--accent-gray-light); }}.tag-chip{font-family:var(--font-mono);font-size:.85rem;padding:.4rem var(--spacing-sm);background:var(--card-bg);border:var(--border-thin)solid var(--border-color);border-radius:var(--radius-pill);box-shadow:2px 2px 0 var(--border-color);color:var(--text-main);font-weight:600;transition:all var(--transition-base);will-change:transform;&:hover { transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--border-color); background:var(--accent-pink); color:var(--text-invert); border-color:var(--text-main); }}.article-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent-pink);outline-offset:2px;border-radius:4px}.redirect-body{font-family:system-ui,-apple-system,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;margin:0;background-color:#1a1a1a;color:#fff;text-align:center;.redirect-loader { border: 4px solid #333; border-top: 4px solid #fff; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin-bottom: 20px; } .redirect-link { color: #4a9eff; text-decoration: none; &:hover { text-decoration: underline; } }}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.year-divider{grid-column:1/-1;margin:3rem 0 1.5rem;padding:0;width:100%;position:relative;display:flex;justify-content:center;align-items:center;background:0 0;box-shadow:none;border:none;&::before { content:''; position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); height:14px; background:var(--stripes); border:var(--border-thin) solid var(--border-color); box-shadow:3px 3px 0 var(--border-color); border-radius:4px; z-index:0; } span { position:relative; z-index:1; background:var(--card-bg); border:var(--border-thin) solid var(--border-color); padding:0.5rem 2rem; border-radius:var(--radius); font-size:2rem; font-weight:800; color:var(--text-main); text-transform:uppercase; letter-spacing:-1px; box-shadow:var(--shadow-soft); } .gallery-grid & { display:flex; }}.age-gate-overlay{position:fixed;inset:0;background:var(--bg-gradient);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;display:none;align-items:center;justify-content:center;padding:var(--spacing-md);&.active { display: flex; } .age-gate-card { background: var(--card-bg); border: var(--border-width) solid var(--border-color); box-shadow: var(--shadow-hard); border-radius: var(--radius); max-width: 500px; width: 100%; padding: 2.5rem 2rem; text-align: center; animation: slideUpAgeGate 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .age-gate-header { font-size: 3rem; font-weight: 800; color: var(--accent-pink-dark); margin-bottom: 1.5rem; font-family: var(--font-mono); } .age-gate-content p { font-size: 1.1rem; font-weight: 700; margin-bottom: 2rem; line-height: 1.5; white-space: pre-line; } .age-gate-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }}@keyframes slideUpAgeGate{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.is-nsfw{position:relative;overflow:hidden;.img-container, .gallery-image-wrapper, .featured-image-container { position: relative; overflow: hidden; } img.gallery-img, img.gallery-image, img.featured-image { filter: blur(60px); transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform: scale(1.1); will-change: filter, transform; } &.revealed { img.gallery-img, img.gallery-image, img.featured-image { filter: blur(0); transform: scale(1); } .nsfw-overlay { opacity: 0; visibility: hidden; pointer-events: none; } } .nsfw-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); z-index: 10; cursor: pointer; transition: opacity 0.5s ease, visibility 0.5s; border-radius: inherit; &::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.05; mix-blend-mode: overlay; pointer-events: none; } &:hover .nsfw-content { transform: scale(1.05); background: #fff; } } .nsfw-content { background: rgba(255, 255, 255, 0.95); padding: 0.6rem; border: 3px solid #000; border-radius: 30px; display: flex; align-items: center; gap: 0.8rem; box-shadow: 4px 4px 0px #000; transform: scale(1); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease; user-select: none; z-index: 11; } .nsfw-icon { font-size: 1.4rem; } .nsfw-text { font-weight: 800; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; color: #000; }}.is-prerelease{cursor:default!important;&:hover { transform:none!important; box-shadow:var(--shadow-soft)!important; } .prerelease-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:20; } .prerelease-content { background:rgba(255,255,255,0.95); padding:0.6rem 1rem; border:3px solid #000; border-radius:30px; display:flex; align-items:center; gap:0.8rem; color:#000; font-weight:800; text-transform:uppercase; font-size:0.75rem; box-shadow:4px 4px 0px #000; user-select:none; } .prerelease-icon { font-size:1.2rem; }}@media(max-width:600px){.site-wrapper{padding:var(--spacing-md)var(--spacing-xs)}.card-content{padding:var(--spacing-lg)}.card-header{justify-content:center;text-align:center}.action-grid{grid-template-columns:1fr}.post-gallery{grid-template-columns:1fr}.tags-list-container{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr;.row-divider { display: block; &:last-child { display: none; } }}}@media(max-width:480px){.age-gate-overlay .age-gate-actions{grid-template-columns:1fr;gap:1rem}}@media(min-width:600px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));.row-divider { &:nth-child(4n) { display: block; background: var(--stripes-purple); } &:nth-child(8n) { background: var(--stripes-blue); } }}}@media(min-width:1000px){.gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}