:root{--bg: #0f1115;--surface: #171a21;--surface-2: #20242d;--border: #2a2f3a;--text: #e7e9ee;--text-dim: #9aa3b2;--accent: #ffd166;--accent-2: #06d6a0;--link: #8ab4ff;--max: 960px;--radius: 10px;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);line-height:1.55}a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}.page{max-width:var(--max);margin:0 auto;padding:3rem 1.5rem 6rem}.site-header{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:2.5rem}.site-header .brand{font-weight:700;font-size:1.25rem;letter-spacing:.02em}.site-header .brand a{color:var(--text)}.site-header .nav-back a{color:var(--text-dim);font-size:.9rem}h1{font-size:2rem;margin:0 0 .5rem;letter-spacing:-.01em}h2{font-size:1.25rem;margin:2.5rem 0 .75rem;letter-spacing:-.005em}p{margin:0 0 1rem}.lead{color:var(--text-dim);font-size:1.1rem;margin-bottom:2rem}.tag{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .5rem;border-radius:999px;background:var(--accent);color:#1a1a1a}.design-grid{display:grid;gap:1rem;grid-template-columns:1fr}@media (min-width: 640px){.design-grid{grid-template-columns:1fr 1fr}}.design-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;color:var(--text)}.design-card:hover{border-color:var(--accent);text-decoration:none}.design-card .id{font-size:.75rem;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase}.design-card .title{font-weight:700;font-size:1.1rem;margin:.25rem 0 .5rem}.design-card .tagline{color:var(--text-dim);font-size:.95rem}.design-card .recommend{display:inline-block;margin-top:.75rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}.placeholder-banner{background:var(--surface-2);border-left:3px solid var(--accent);padding:.75rem 1rem;border-radius:4px;color:var(--text-dim);font-size:.9rem;margin-bottom:2rem}.mockup{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin:1rem 0}.mockup .row{display:flex;gap:.75rem;align-items:center;padding:.6rem 0;border-bottom:1px dashed var(--border)}.mockup .row:last-child{border-bottom:none}.mockup .thumb{width:96px;height:54px;background:linear-gradient(135deg,#2a2f3a,#3a4150);border-radius:4px;flex-shrink:0}.mockup .meta{display:flex;flex-direction:column;min-width:0}.mockup .meta .title-line{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mockup .meta .sub{color:var(--text-dim);font-size:.85rem}.search-bar{display:flex;gap:.5rem;margin:1rem 0 1.5rem}.search-bar input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:.65rem .9rem;font-size:1rem}.search-bar button{background:var(--accent);color:#1a1a1a;border:0;border-radius:var(--radius);padding:0 1.1rem;font-weight:600;cursor:pointer}.footer-note{margin-top:4rem;color:var(--text-dim);font-size:.85rem}.essay{max-width:640px}.essay h1{font-size:2.25rem;letter-spacing:-.015em}.essay .byline{color:var(--text-dim);font-size:.9rem;margin-bottom:2rem}.essay p{font-size:1.05rem;line-height:1.7}.checkpoint{background:var(--surface-2);border-radius:var(--radius);padding:.75rem 1rem;font-size:.9rem;color:var(--text-dim);margin:.5rem 0 1rem}.checkpoint strong{color:var(--accent-2);letter-spacing:.05em;font-size:.75rem;text-transform:uppercase}.pill-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 1.5rem}.pill{background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);border-radius:999px;padding:.3rem .7rem;font-size:.85rem}