*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-page:#1a1a1a;--bg-card:#2a2a2a;--bg-surface:#222;--bg-sunken:#141414;--border:#444;--border-subtle:#333;--text-primary:#e0e0e0;--text-muted:#b0b0b0;--text-subtle:#909090;--accent-blue:#667eea;--accent-purple:#764ba2;--gradient:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-hover:linear-gradient(135deg, #758beb 0%, #8857b3 100%);--radius:12px;--radius-sm:8px;--radius-pill:999px;--shadow-card:0 4px 20px #00000073;--shadow-card-hover:0 8px 32px #0009;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--max-width:1100px;--article-width:760px}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font);background-color:var(--bg-page);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.6}a{color:var(--accent-blue);text-decoration:none;transition:color .15s}a:hover{color:#8fa7f0}a:focus-visible{outline:2px solid var(--accent-blue);outline-offset:3px;border-radius:3px}img{max-width:100%;display:block}.btn-primary{background:var(--gradient);color:#fff;border-radius:var(--radius-sm);font-family:var(--font);cursor:pointer;-webkit-user-select:none;user-select:none;border:none;justify-content:center;align-items:center;gap:6px;padding:10px 24px;font-size:.95rem;font-weight:600;transition:background .2s,transform .15s,opacity .15s;display:inline-flex}.btn-primary:hover:not(:disabled){background:var(--gradient-hover);transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.tag-pill{color:var(--accent-blue);border-radius:var(--radius-pill);letter-spacing:.03em;white-space:nowrap;background:#667eea2e;border:1px solid #667eea59;padding:3px 12px;font-size:.75rem;font-weight:500;transition:background .15s;display:inline-block}.tag-pill[role=button]{cursor:pointer}.tag-pill[role=button]:hover{background:#667eea4d}.comment-list{flex-direction:column;gap:16px;list-style:none;display:flex}.comment-item{background:var(--bg-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:16px 20px}.comment-header{flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:8px;display:flex}.comment-author{color:var(--text-primary);font-size:.9rem;font-weight:600}.comment-date{color:var(--text-subtle);font-size:.78rem}.comment-body{color:var(--text-muted);white-space:pre-wrap;word-break:break-word;font-size:.92rem;line-height:1.65}.comment-empty{color:var(--text-subtle);padding:12px 0;font-size:.9rem;font-style:italic}.comment-success{border-radius:var(--radius-sm);color:var(--accent-blue);background:#667eea1f;border:1px solid #667eea59;align-items:center;gap:12px;padding:16px 20px;font-size:.93rem;display:flex}.comment-success-icon{flex-shrink:0;font-size:1.2rem}.comment-form{flex-direction:column;gap:16px;display:flex}.comment-form-row{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (max-width:560px){.comment-form-row{grid-template-columns:1fr}}.comment-form-field{flex-direction:column;gap:6px;display:flex;position:relative}.comment-form-field label{color:var(--text-muted);letter-spacing:.02em;font-size:.82rem;font-weight:500}.comment-form-private{color:var(--text-subtle);font-size:.78rem;font-weight:400}.comment-form-field input,.comment-form-field textarea{background:var(--bg-sunken);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.92rem;font-family:var(--font);resize:vertical;outline:none;padding:10px 14px;transition:border-color .15s,box-shadow .15s}.comment-form-field input:focus,.comment-form-field textarea:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px #667eea2e}.comment-form-field textarea{min-height:120px}.comment-form-count{color:var(--text-subtle);text-align:right;margin-top:2px;font-size:.72rem}.comment-form-error{color:#f08080;border-radius:var(--radius-sm);background:#f080801a;border:1px solid #f080804d;padding:8px 12px;font-size:.85rem}
