: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;--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}*{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 .1s,color .2s;&:active { transform:translate(2px,2px); }}img{max-width:100%;height:auto;display:block}.site-wrapper{width:100%;max-width:1100px;padding:2rem 1rem}.main-card{background:var(--card-bg);border:var(--border-width)solid var(--border-color);box-shadow:var(--shadow-hard);border-radius:var(--radius);overflow:hidden}.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: 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:1.5rem;margin-bottom:2rem}.action-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.8rem;padding:1rem 1.5rem;border:var(--border-width)solid var(--border-color);border-radius:var(--radius);box-shadow:var(--shadow-soft);font-size:1.25rem;font-weight:700;transition:all .2s;&:hover { box-shadow:none; transform:translate(3px,3px); } &.btn-pink { background:var(--accent-pink); } &.btn-purple { background:var(--accent-blue); } &.btn-peach { background:var(--accent-peach); } &.btn-disabled { background:repeating-linear-gradient(45deg,#dfdfdf,#dfdfdf 10px,#eeeeee 10px,#eeeeee 20px); color:#999; cursor:not-allowed; box-shadow:none; opacity:0.8; &:hover { transform:none; box-shadow:none; } } .btn-icon { font-size:1.5rem; margin-top:0; }}.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:.5rem;.social-icon { width: 18px; height: 18px; object-fit: contain; } &:hover { background: var(--border-color); color: var(--text-invert); box-shadow: none; transform: translate(2px, 2px); .social-icon { filter: invert(1); } }}.back-button-container{text-align:center;margin-top:3rem;margin-bottom:1rem}.back-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 2rem;font-weight:800;text-transform:uppercase;background:#fff;border:var(--border-width)solid var(--border-color);border-radius:var(--radius);box-shadow:var(--shadow-soft);transition:all .2s;font-size:1rem}.back-btn:hover{box-shadow:none;transform:translate(3px,3px);background:var(--accent-pink);color:#fff}.updates-section h3{border-bottom:var(--border-width)solid var(--border-color);padding-bottom:.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:1rem;background:var(--card-bg);box-shadow:var(--shadow-soft);transition:all .2s;display:flex;flex-direction:column;height:100%;&:hover { transform:translate(-3px,-3px); box-shadow:var(--shadow-hard); } 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:repeating-linear-gradient(45deg,var(--accent-pink),var(--accent-pink) 10px,var(--accent-blue) 10px,var(--accent-blue) 20px);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; }}@media(max-width:599px){.gallery-grid{grid-template-columns:1fr;.row-divider { display: block; &:last-child { display: none; } }}}@media(min-width:600px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));.row-divider { &:nth-child(4n) { display: block; background: repeating-linear-gradient(45deg, var(--accent-purple), var(--accent-purple) 10px, var(--accent-pink) 10px, var(--accent-pink) 20px); } &:nth-child(8n) { background: repeating-linear-gradient(45deg, var(--accent-blue), var(--accent-blue) 10px, var(--accent-purple) 10px, var(--accent-purple) 20px); } }}}@media(min-width:1000px){.gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.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:.8rem;aspect-ratio:3/4;overflow:hidden;background:#f5f5f5;img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.4s ease; }}.page-header{margin-bottom:2rem;text-align:center;h1 { font-size: 2.2rem; margin-bottom: 1rem; }}.single-article h1{font-size:2.2rem;margin-bottom:1rem}.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}.post-gallery{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem;@media(max-width:600px){grid-template-columns: 1fr; } } .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}}}@media(max-width:600px){.site-wrapper{padding:1rem .5rem}.card-content{padding:1.5rem}.action-grid{grid-template-columns:1fr}.card-header{justify-content:center;text-align:center}.profile-text h1{font-size:2rem}}.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: 1.5rem; color: var(--accent-pink); } h1 { font-size: 2rem; margin-bottom: 1rem; 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 .2s;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); }}.article-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}.tag-chip{font-family:var(--font-mono);font-size:.85rem;padding:.4rem .8rem;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);text-decoration:none;transition:all .2s;font-weight:600}.tag-chip: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)}@media(max-width:600px){.tags-list-container{grid-template-columns:1fr}}.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}.redirect-link:hover{text-decoration:underline}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}