:root { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #171717; background: #f5f2ed; }
* { box-sizing: border-box; }
body { margin: 0; }
.app { width: min(980px, 100%); margin: 0 auto; padding: 28px 16px 60px; }
.hero { padding: 28px 4px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: #8a5b3e; font-weight: 700; }
h1 { margin: 0; font-size: clamp(30px, 6vw, 54px); line-height: 1; }
h2 { margin: 0 0 14px; font-size: 20px; }
.sub { color: #5c5c5c; font-size: 17px; max-width: 760px; }
.card { background: #fff; border: 1px solid #e7dfd4; border-radius: 22px; padding: 18px; margin: 16px 0; box-shadow: 0 10px 30px rgba(56,39,23,.06); }
label { display: block; font-weight: 650; margin: 10px 0 8px; }
input, textarea { width: 100%; border: 1px solid #d7cbbd; border-radius: 14px; padding: 13px 14px; font: inherit; background: #fffdfb; }
textarea { resize: vertical; }
button { border: 0; background: #1f1f1f; color: #fff; border-radius: 14px; padding: 13px 16px; font-weight: 750; cursor: pointer; margin-top: 10px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.preview, .item, .result { border: 1px solid #eee2d4; background: #fffaf4; border-radius: 16px; padding: 13px; margin-top: 12px; }
.stack { display: grid; gap: 10px; margin-top: 12px; }
.muted { color: #666; }
.badge { display: inline-flex; padding: 5px 9px; border-radius: 99px; background: #eee4d7; font-size: 12px; font-weight: 750; margin-right: 6px; }
.score { font-size: 34px; font-weight: 900; }
.small { font-size: 13px; color: #666; }
@media (max-width: 680px) { .row, .grid { grid-template-columns: 1fr; } }