@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');
:root { font-family: 'DM Sans','Noto Sans TC',sans-serif; }
html { scroll-behavior: smooth; }
.nav-link { color:#57534e; font-size:.9rem; }
.nav-link:hover { color:#4338ca; }
.hero-card { border:1px solid #e7e5e4; border-radius:1.5rem; background:linear-gradient(145deg,#fff 0%,#f5f3ff 100%); padding:1.5rem; box-shadow:0 24px 60px -40px #4338ca; }
.field { border:1px solid #d6d3d1; border-radius:.7rem; background:#fff; padding:.55rem .8rem; font-size:.9rem; }
.editor { width:100%; min-height:18rem; resize:vertical; border:1px solid #e7e5e4; border-radius:1rem; background:#fafaf9; padding:1rem; font-family:inherit; font-size:1rem; line-height:1.8; outline:none; }
.editor:focus,.field:focus { border-color:#818cf8; box-shadow:0 0 0 3px #e0e7ff; }
.mode-tab { border-radius:999px; padding:.55rem 1rem; font-size:.9rem; color:#57534e; background:#f5f5f4; }
.mode-tab.active { color:#fff; background:#4f46e5; }
.button-primary,.button-secondary { border-radius:.75rem; padding:.65rem 1rem; font-size:.875rem; font-weight:600; }
.button-primary { color:#fff; background:#4f46e5; }.button-primary:hover { background:#4338ca; }
.button-secondary { color:#44403c; background:#f5f5f4; }.button-secondary:hover { background:#e7e5e4; }
.feature-card { border:1px solid #e7e5e4; border-radius:1rem; background:#fff; padding:1.25rem; }
.feature-card>span { display:grid; width:2rem; height:2rem; place-items:center; border-radius:.6rem; background:#eef2ff; color:#4338ca; font-size:.75rem; font-weight:700; }
.feature-card h3 { margin-top:.9rem; font-weight:700; }.feature-card p { margin-top:.4rem; color:#78716c; font-size:.875rem; line-height:1.6; }
@media(max-width:500px) { .nav-link { display:none; } .editor { min-height:15rem; } }