:root{color:#1c2a21;background:radial-gradient(circle at top,rgba(242,199,92,.22),transparent 34%),linear-gradient(180deg,#f7f2e8,#eef4ed 48%,#e4edf0);font-family:BIZ UDPGothic,Hiragino Sans,Noto Sans JP,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:light;--surface: rgba(255, 252, 246, .84);--surface-strong: rgba(255, 255, 255, .94);--border: rgba(50, 74, 61, .12);--shadow: 0 18px 40px rgba(41, 58, 48, .1);--text-subtle: #55685d;--text-muted: #708377;--brand: #183a2f;--accent-work: #d9e9ff;--accent-work-text: #164a7c;--accent-friends: #ffe1cf;--accent-friends-text: #8a4a18;--accent-safe: #dff1db;--accent-safe-text: #2b6e37}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;min-width:320px}button,a{font:inherit}a{color:inherit}.page-shell{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:16px 0 72px}.hero{display:grid;gap:10px;padding:14px 22px 12px;border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hero__eyebrow{margin:0 0 6px;color:#708377d6;font-size:.74rem;letter-spacing:.12em}.hero__title{display:flex;align-items:baseline;gap:.12em;margin:0;line-height:1}.hero__title-main{font-size:clamp(1.56rem,4.4vw,3rem);color:var(--brand);font-weight:650}.hero__title-dotdev{font-size:clamp(1.56rem,4.4vw,3rem);color:#708377db;font-weight:480}.hero__lead{margin:8px 0 0;max-width:36rem;color:var(--brand);font-size:.98rem;font-weight:620}.hero__sublead{margin:4px 0 0;max-width:34rem;color:#708377e0;font-size:.9rem}.hero__update{margin:0;color:#70837794;font-size:.72rem}.filter-panel{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 10px}.topic-overview{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 18px;color:#708377e6;font-size:.8rem}.topic-overview p{margin:0}.filter-button{border:1px solid var(--border);border-radius:999px;padding:10px 16px;background:#ffffffbd;color:var(--brand);cursor:pointer;transition:transform .12s ease,background-color .12s ease,border-color .12s ease}.filter-button:hover{transform:translateY(-1px);border-color:#183a2f47}.filter-button.is-active{background:var(--brand);color:#f6f6ef;border-color:var(--brand)}.status-message{margin:18px 0;color:var(--text-subtle)}.status-message--error{color:#a62f2f}.topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.topic-card{display:grid;gap:14px;padding:20px;border:1px solid var(--border);border-radius:22px;background:var(--surface-strong);box-shadow:var(--shadow)}.topic-card__meta{display:flex;align-items:center;justify-content:flex-start;gap:12px}.topic-chip{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;font-size:.8rem;font-weight:700}.topic-chip--work{background:var(--accent-work);color:var(--accent-work-text)}.topic-chip--friends{background:var(--accent-friends);color:var(--accent-friends-text)}.topic-chip--safe{background:var(--accent-safe);color:var(--accent-safe-text)}.topic-card h2{margin:0;font-size:1.2rem;line-height:1.3;color:var(--brand)}.topic-card__summary{margin:0;color:var(--text-subtle)}.topic-card__section{display:grid;gap:6px}.topic-card__section-label{margin:0;color:var(--text-muted);font-size:.78rem;letter-spacing:.06em}.topic-card__starter{margin:0;padding:12px 14px;border-radius:16px;background:#f2c75c1f;color:var(--brand);font-weight:700;line-height:1.5}.topic-card__scene{margin:0;color:var(--text-subtle)}.topic-card__labels{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.topic-card__labels li{border-radius:999px;padding:5px 9px;background:#183a2f0d;color:var(--text-subtle);font-size:.78rem}.topic-card__links{display:grid;gap:8px;margin:0;padding-left:18px}.topic-card__link-item.is-primary{font-weight:600}.topic-card__links a{color:#1f5a83;text-decoration-thickness:1px}.topic-card__footer{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--text-muted);font-size:.8rem}@media (max-width: 640px){.page-shell{width:min(100% - 20px,1120px);padding:16px 0 48px}.hero{padding:16px 18px 14px;border-radius:22px}.topic-card__meta,.topic-card__footer{flex-direction:column;align-items:flex-start}}