*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-100:#dbeafe;--blue-200:#bfdbfe;--green-500:#52be20;--green-700:#2e7d14;--green-100:#e8f9df;--green-200:#c3edaa;--orange-500:#f5821f;--orange-100:#fef0e0;--orange-700:#c45f00;--gray-900:#0f172a;--gray-800:#1e293b;--gray-700:#334155;--gray-600:#475569;--gray-500:#64748b;--gray-400:#94a3b8;--gray-100:#f1f5f9;--gray-50:#f8fafc;--gold:#c0a000;--white:#fff;--cream:#f8fafc;--font-display:"Open Sans Condensed", sans-serif;--font-body:"Noto Sans JP", sans-serif;--font-serif:"Noto Serif JP", serif;--font-mono:"Fira Code", "Cascadia Code", "Consolas", monospace}html{scroll-behavior:smooth}body{font-family:var(--font-body);color:var(--gray-800);background:var(--cream);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:17px;line-height:1.8}.code-block{background:#1e1e2e;border-radius:8px;margin:20px 0;position:relative;overflow:hidden;box-shadow:0 4px 16px #00000026}.code-block-header{font-family:var(--font-mono);color:#a0a0b0;background:#2a2a3e;justify-content:space-between;align-items:center;padding:8px 16px;font-size:.75rem;display:flex}.code-block-lang{color:#7dd3fc;text-transform:uppercase;letter-spacing:.05em;font-weight:600}.code-copy-btn{color:#a0a0b0;cursor:pointer;font-family:var(--font-mono);background:0 0;border:1px solid #4a4a6a;border-radius:4px;padding:3px 10px;font-size:.7rem;transition:all .2s}.code-copy-btn:hover{color:#fff;background:#3a3a5a;border-color:#6a6a8a}.code-copy-btn.copied{color:#fff;background:#1e7e34;border-color:#1e7e34}.code-block pre{margin:0;padding:16px;overflow-x:auto}.code-block code{font-family:var(--font-mono);color:#e8e8f0;white-space:pre;font-size:.88rem;line-height:1.7}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-up{animation:.5s both fadeUp}.cat-badge{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;border-radius:4px;align-items:center;gap:4px;padding:3px 10px;font-size:.7rem;font-weight:700;display:inline-flex}.cat-AI{color:#1d4ed8;background:#dbeafe}.cat-AMP{color:#9d174d;background:#fce7f3}.cat-CSS{color:#6d28d9;background:#ede9fe}.cat-Smarty{color:#92400e;background:#fef3c7}.cat-NUXT{color:#065f46;background:#d1fae5}.cat-JavaScript{color:#78350f;background:#fffbeb;border:1px solid #fde68a}.cat-Symfony{color:#111827;background:#f3f4f6}.cat-Twig{color:#064e3b;background:#ecfdf5}.cat-VUE{color:#065f46;background:#d1fae5}.cat-WordPress{color:#1e40af;background:#eff6ff}.cat-default{background:var(--gray-100);color:var(--gray-600)}.amazon-block{color:inherit;background:linear-gradient(135deg,#fff8f0,#fff3e0);border:1px solid #ffd580;border-left:4px solid #f5821f;border-radius:8px;align-items:center;gap:16px;margin:24px 0;padding:16px 20px;text-decoration:none;display:flex}.amazon-block:hover{transition:all .2s;transform:translateY(-2px);box-shadow:0 4px 16px #f5821f33}.ad-placeholder{background:var(--gray-100);color:var(--gray-500);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;border:1px dashed #ccc;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:6px;font-size:.7rem;font-weight:700;display:flex}