@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap";:root{--pink: #f4b8c5;--blue: #a8d4e6;--orange: #f9d5a7;--green: #b8e0c8;--purple: #d4c4e8;--bg: #fafafa;--surface: #ffffff;--text: #2d2d2d;--text-muted: #6b6b6b;--border: #e0e0e0;--border-dashed: #c0c0c0;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--font-main: "Nunito", system-ui, sans-serif;--font-mono: "SF Mono", "Fira Code", monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-main);background-color:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;background-image:radial-gradient(circle,rgba(236,176,220,.781) 1px,transparent 1px);background-size:24px 24px}#root{min-height:100vh}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--border-dashed)}.app{max-width:1100px;margin:0 auto;padding:var(--space-md) var(--space-sm);padding-bottom:var(--space-2xl)}.header{position:relative;padding:var(--space-lg);margin-bottom:var(--space-xl);background:var(--surface);border:2px dashed var(--border-dashed);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center}.header:before{content:"< header />";position:absolute;top:-10px;left:var(--space-md);background:var(--bg);padding:0 var(--space-xs);font-family:var(--font-mono);font-size:.65rem;color:var(--text-muted);letter-spacing:.5px}.header__title{font-size:1.5rem;font-weight:700;margin-bottom:var(--space-xs);color:var(--text)}.header__subtitle{font-size:.9rem;color:var(--text-muted);font-weight:500}.header__nav{display:flex;gap:var(--space-sm);margin-top:var(--space-md);flex-wrap:wrap}.nav-tag{padding:var(--space-xs) var(--space-sm);font-size:.75rem;font-weight:600;border-radius:var(--radius-sm);border:1.5px solid transparent;background:transparent;transition:all .2s ease}.nav-tag--pink{color:#c4849a;border-color:var(--pink);background:#f4b8c526}.nav-tag--blue{color:#6a9eb5;border-color:var(--blue);background:#a8d4e626}.nav-tag--green{color:#7ab092;border-color:var(--green);background:#b8e0c826}.nav-tag--purple{color:#9b87b8;border-color:var(--purple);background:#d4c4e826}.nav-tag--orange{color:#c9a66e;border-color:var(--orange);background:#f9d5a726}.nav-tag:hover,.nav-tag.active{transform:translateY(-1px)}.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:var(--space-lg);justify-content:start}.posts-label{font-family:var(--font-mono);font-size:.65rem;color:var(--text-muted);letter-spacing:.5px;margin-bottom:var(--space-xs)}.post-card{position:relative;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:var(--space-lg);transition:all .2s ease}.post-card:before{content:"";position:absolute;inset:0;border-radius:var(--radius-md);pointer-events:none}.post-card:hover{border-color:var(--border-dashed);box-shadow:0 4px 12px #0000000a}.post-card:after{content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;border-top:1.5px dashed var(--border-dashed);border-right:1.5px dashed var(--border-dashed);opacity:.6}.post-card__meta{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);flex-wrap:wrap}.post-card__date{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted)}.post-card__tag{display:inline-block;padding:2px 8px;font-size:.65rem;font-weight:600;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.5px}.post-card__tag--pink{background:var(--pink);color:#6b4a52}.post-card__tag--blue{background:var(--blue);color:#4a6b7a}.post-card__tag--green{background:var(--green);color:#4a6b52}.post-card__tag--purple{background:var(--purple);color:#5a4a6b}.post-card__tag--orange{background:var(--orange);color:#6b5a4a}.post-card__title{font-size:1.1rem;font-weight:700;margin-bottom:var(--space-sm);color:var(--text);line-height:1.4}.post-card__excerpt{font-size:.9rem;color:var(--text-muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:var(--space-md)}.post-card__footer{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-sm);border-top:1px dashed var(--border)}.post-card__read-time{font-family:var(--font-mono);font-size:.65rem;color:var(--text-muted)}.post-card__read-more{font-size:.8rem;font-weight:600;color:var(--text);background:none;border:1.5px dashed var(--border-dashed);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);transition:all .2s ease}.post-card__read-more:hover{background:var(--bg);border-style:solid}.post-expanded{position:relative;background:var(--surface);border:2px dashed var(--border-dashed);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg);max-width:832px;width:130%;left:50%;transform:translate(-50%)}.post-expanded:before{content:"< article />";position:absolute;top:-10px;left:var(--space-md);background:var(--bg);padding:0 var(--space-xs);font-family:var(--font-mono);font-size:.65rem;color:var(--text-muted);letter-spacing:.5px}.post-expanded__back{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:.8rem;font-weight:600;color:var(--text-muted);background:none;border:none;padding:var(--space-xs) 0;margin-bottom:var(--space-md);transition:color .2s ease}.post-expanded__back:hover{color:var(--text)}.post-expanded__header{margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px dashed var(--border)}.post-expanded__title{font-size:1.4rem;font-weight:700;margin-bottom:var(--space-sm);line-height:1.3}.post-expanded__meta{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.post-expanded__content{font-size:.95rem;line-height:1.8;color:var(--text)}.post-expanded__content p{margin-bottom:var(--space-md)}.post-expanded__content h2{font-size:1.15rem;font-weight:700;margin-top:var(--space-xl);margin-bottom:var(--space-sm);color:var(--text)}.post-expanded__content ul,.post-expanded__content ol{margin-bottom:var(--space-md);padding-left:var(--space-lg)}.post-expanded__content li{margin-bottom:var(--space-xs)}.post-expanded__content code{font-family:var(--font-mono);font-size:.85em;background:#0000000a;padding:2px 6px;border-radius:4px}.post-expanded__content pre{background:#2d2d2d;color:#f0f0f0;padding:var(--space-md);border-radius:var(--radius-sm);overflow-x:auto;margin-bottom:var(--space-md);font-family:var(--font-mono);font-size:.8rem;line-height:1.5}.post-expanded__content pre code{background:none;padding:0}.footer{position:relative;padding:var(--space-md);margin-top:var(--space-xl);text-align:center;font-size:.75rem;color:var(--text-muted);border:1.5px dashed var(--border-dashed);border-radius:var(--radius-md);background:var(--surface)}.footer:before{content:"< footer />";position:absolute;top:-10px;left:50%;transform:translate(-50%);background:var(--bg);padding:0 var(--space-xs);font-family:var(--font-mono);font-size:.65rem;letter-spacing:.5px}@media(max-width:860px){.posts{grid-template-columns:1fr}}@media(min-width:480px){.app{padding:var(--space-lg) var(--space-md)}.header__title{font-size:1.75rem}.post-card__title{font-size:1.2rem}.post-expanded__title{font-size:1.6rem}}@media(min-width:640px){.app{padding:var(--space-xl) var(--space-lg)}.header,.post-card,.post-expanded{padding:var(--space-xl)}}.add-post-btn{position:absolute;top:var(--space-md);right:var(--space-md);padding:var(--space-xs) var(--space-sm);font-size:.75rem;font-weight:600;color:var(--green);background:#b8e0c833;border:1.5px dashed var(--green);border-radius:var(--radius-sm);transition:all .2s ease}.add-post-btn:hover{background:#b8e0c866;border-style:solid}.header__title{cursor:default;-webkit-user-select:none;user-select:none}.post-delete-btn{margin-top:var(--space-lg);padding:var(--space-xs) var(--space-sm);font-size:.75rem;font-weight:600;color:#c47a7a;background:#f4b8b833;border:1.5px dashed #e8a8a8;border-radius:var(--radius-sm);transition:all .2s ease}.post-delete-btn:hover{background:#f4b8b866;border-style:solid}.posts-empty{text-align:center;padding:var(--space-xl);color:var(--text-muted);font-size:.9rem;background:var(--surface);border:1.5px dashed var(--border-dashed);border-radius:var(--radius-md)}.posts-empty p{margin-bottom:var(--space-xs)}.posts-loading{text-align:center;padding:var(--space-xl);color:var(--text-muted);font-size:.9rem;background:var(--surface);border:1.5px dashed var(--border-dashed);border-radius:var(--radius-md)}.posts-loading p{margin:0}.error-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md);background:#f4b8b833;border:1.5px solid #e8a8a8;border-radius:var(--radius-md);color:#c47a7a;font-size:.85rem}.error-banner p{margin:0}.error-banner button{background:none;border:none;color:#c47a7a;font-size:1.2rem;padding:0;line-height:1;cursor:pointer;transition:opacity .2s ease}.error-banner button:hover{opacity:.7}.modal-overlay{position:fixed;inset:0;background:#2d2d2d80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:var(--space-md);z-index:1000}.modal{position:relative;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;background:var(--surface);border:2px dashed var(--border-dashed);border-radius:var(--radius-lg);padding:var(--space-lg)}.modal:before{content:"< form />";position:absolute;top:-10px;left:var(--space-md);background:var(--surface);padding:0 var(--space-xs);font-family:var(--font-mono);font-size:.65rem;color:var(--text-muted);letter-spacing:.5px}.modal__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg);padding-bottom:var(--space-sm);border-bottom:1px dashed var(--border)}.modal__title{font-size:1.2rem;font-weight:700;color:var(--text)}.modal__close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--text-muted);background:none;border:1.5px solid var(--border);border-radius:var(--radius-sm);transition:all .2s ease}.modal__close:hover{color:var(--text);border-color:var(--border-dashed)}.modal__form{display:flex;flex-direction:column;gap:var(--space-md)}.form-group{display:flex;flex-direction:column;gap:var(--space-xs)}.form-group label{font-size:.8rem;font-weight:600;color:var(--text)}.label-hint{font-weight:400;color:var(--text-muted);font-size:.7rem;margin-left:var(--space-xs)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}.form-group input,.form-group select,.form-group textarea{font-family:var(--font-main);font-size:.9rem;padding:var(--space-sm);background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);transition:border-color .2s ease}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--purple)}.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted);opacity:.6}.form-group textarea{resize:vertical;min-height:150px;line-height:1.6}.form-group select{cursor:pointer}.form-preview{display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-sm);background:#d4c4e81a;border:1px dashed var(--purple);border-radius:var(--radius-sm)}.form-preview__label{font-family:var(--font-mono);font-size:.65rem;color:var(--purple);text-transform:uppercase;letter-spacing:.5px}.form-preview__excerpt{font-size:.85rem;color:var(--text-muted);line-height:1.5;font-style:italic}.form-preview__time{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted)}.form-actions{display:flex;gap:var(--space-sm);justify-content:flex-end;padding-top:var(--space-md);border-top:1px dashed var(--border)}.btn-cancel{padding:var(--space-sm) var(--space-md);font-size:.85rem;font-weight:600;color:var(--text-muted);background:none;border:1.5px solid var(--border);border-radius:var(--radius-sm);transition:all .2s ease}.btn-cancel:hover{color:var(--text);border-color:var(--border-dashed)}.btn-submit{padding:var(--space-sm) var(--space-md);font-size:.85rem;font-weight:600;color:#4a6b52;background:var(--green);border:1.5px solid var(--green);border-radius:var(--radius-sm);transition:all .2s ease}.btn-submit:hover{background:#a8d4b8}@media(min-width:480px){.modal{padding:var(--space-xl)}.modal__title{font-size:1.3rem}}