/* The open demo: your name, your office, your morning. */
.dm-hero { padding: 72px 0 64px; background: var(--bg-2); }
.dm-hero-in > * { min-width: 0; }
.dm-hero-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px 64px; align-items: center; }
.dm-form { display: grid; gap: 18px; padding: 28px; border-radius: 26px; background: var(--surface); }
.dm-field { display: grid; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.dm-field input { width: 100%; min-width: 0; min-height: 56px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--bg-2); color: var(--ink); font: 600 22px/1 var(--f-display); letter-spacing: -0.02em; outline: none; }
.dm-field input:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); } /* focus ring. taste-skill-ignore */
.dm-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-kinds button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--bg-2); color: var(--ink); font: 600 15px/1 var(--f-body); cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s var(--ease); }
.dm-kinds button:hover { background: var(--surface-2); }
.dm-kinds button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.dm-kinds button:active { transform: scale(0.97); }
.dm-form .btn { justify-self: start; }
.dm-result { padding: 96px 0 40px; }
.dm-result .hm-h2, .dm-morning .hm-h2 { max-width: none; }
.dm-result .hm-sub { margin: 20px 0 36px; }
.dm-office .life { box-shadow: none; } /* taste-skill-ignore */
.dm-morning { padding: 96px 0 140px; background: #0b1510; color: #f2f7f4; }
.dm-morning-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px 64px; align-items: center; }
.dm-morning .hm-h2 { color: #ffffff; }
.dm-morning .hm-sub { color: rgba(242, 247, 244, 0.82); margin-top: 20px; }
.dm-morning .hm-link { color: #7ee2a8; }
.dm-share { border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }
.dm-morning .hm-ph { background: #0d1813; border-color: #1b2922; color: #f2f7f4; }
@media (max-width: 960px) { .dm-hero-in, .dm-morning-in { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .dm-hero { padding: 48px 0 40px; } .dm-form { padding: 20px; } .dm-result { padding: 64px 0 24px; } .dm-morning { padding: 64px 0 96px; } .dm-form .btn { width: 100%; } }
.dm-more { padding: 96px 0 120px; }
.dm-more .hm-sub { margin: 20px 0 40px; }
.dm-more .st-demo-row { margin: 0 0 40px; }