body { display: flex; min-height: 100dvh; align-items: center; justify-content: center; gap: clamp(60px,8vw,130px); padding: 24px; }
.desktop-note { width: 300px; color: #3f5038; }
.desktop-note > img { width: 64px; height: 64px; border-radius: 17px; margin-bottom: 34px; }
.desktop-note .eyebrow { margin-bottom: 23px; font-size: 9px; }
.desktop-note h1 { font-size: 56px; line-height: 1.04; letter-spacing: -2.5px; font-weight: 500; }
.desktop-note h1 em { font-family: 'Iowan Old Style', Georgia, serif; font-weight: 400; }
.desktop-note > p:not(.eyebrow) { margin-top: 27px; font-size: 15px; line-height: 1.8; color: #5f6e57; }
.desktop-note > span { display: block; margin-top: 50px; max-width: 260px; font-size: 11px; line-height: 1.8; }
.desktop-note small { display: block; margin-top: 14px; max-width: 240px; color: #5f6e57; font-size: 10px; }
.device-frame { position: relative; display: grid; grid-template-areas: 'header' 'running' 'content' 'navigation'; grid-template-rows: auto auto minmax(0,1fr) auto; width: 390px; height: var(--frame-height); flex-shrink: 0; overflow: hidden; border: 7px solid #fdfef9; border-radius: 36px; background: var(--page); box-shadow: 0 15px 55px #31422316, 0 0 0 1px #87947d42; }
.app-header { grid-area: header; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 82px; padding: 16px 20px 13px; border-bottom: 1px solid #e3e7dc; background: var(--page); }
.home-heading { min-width: 0; }
.home-name-button { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0; background: none; font-size: 20px; font-weight: 650; letter-spacing: -.7px; text-align: left; }
.home-name-button > span { max-width: 210px; overflow-wrap: anywhere; }
.home-name-button svg { width: 14px; height: 14px; color: var(--muted); }
.app-subtitle { display: block; font-size: 10px; color: var(--muted); }
.header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0; flex-shrink: 0; }
.demo-badge { display: grid; min-width: 44px; min-height: 44px; padding: 4px 9px; border-radius: 20px; background: var(--sage-soft); color: var(--sage-dark); font-size: 9px; font-weight: 650; letter-spacing: .4px; }
.demo-clock { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--muted); font: 9px/1.3 var(--mono); }
.demo-clock svg { width: 11px; height: 11px; }
.page-scroll { grid-area: content; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 17px 19px 28px; scrollbar-width: none; overscroll-behavior-y: contain; }
.page-scroll::-webkit-scrollbar { display: none; }
.page-title { padding-block: 7px 24px; }
.page-title .eyebrow { margin-bottom: 13px; color: var(--muted); }
.page-title > p:not(.eyebrow) { margin-top: 13px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.bottom-nav { grid-area: navigation; display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; min-height: 72px; padding: 9px 10px 11px; border-top: 1px solid var(--line); background: #fcfdf9; }
.bottom-nav button { display: flex; min-width: 0; min-height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px 1px; border-radius: 12px; background: transparent; color: var(--muted); font-size: 9px; }
.bottom-nav button[aria-current=page] { background: var(--sage-soft); color: var(--sage-dark); font-weight: 650; }
.bottom-nav button svg { width: 20px; height: 20px; }
.run-banner { grid-area: running; padding: 0 18px 8px; background: var(--page); }
.run-banner > button { display: flex; width: 100%; min-height: 40px; align-items: center; gap: 9px; padding: 10px; border-radius: 10px; background: var(--sage-soft); color: var(--sage-dark); text-align: left; font-size: 10px; }
.run-banner svg { width: 14px; height: 14px; }
.run-banner > button > span { flex: 1; }
.page-action-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.back-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: none; color: var(--sage-dark); font-size: 12px; }
.back-button svg { width: 16px; height: 16px; }
.page-footnote { margin: 27px 0 0; color: var(--muted); font-size: 9px; text-align: center; }
.sheet { position: fixed; top: auto; bottom: calc((100dvh - var(--frame-height)) / 2 + 9px); width: 374px; max-width: calc(100vw - 16px); max-height: calc(var(--frame-height) - 24px); margin: 0 auto; padding: 8px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sheet); background: var(--page); color: var(--ink); }
.sheet[open] { display: flex; flex-direction: column; }
.sheet.is-editor { height: calc(var(--frame-height) - 26px); }
.sheet::backdrop, .confirm-dialog::backdrop { background: #23311e66; }
.sheet-grip { width: 33px; height: 4px; flex-shrink: 0; margin: 2px auto 7px; border-radius: 20px; background: #cbd1c3; }
.sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 19px 16px; flex-shrink: 0; border-bottom: 1px solid var(--line); }
.sheet-header .eyebrow { margin-bottom: 6px; color: var(--muted); font-size: 8px; }
.sheet-header h2 { font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.sheet-scroll { min-height: 0; overflow: auto; padding: 20px; scrollbar-width: thin; overscroll-behavior: contain; }
@media (max-width: 920px) { .desktop-note { display: none; } }
@media (max-width: 500px) {
  :root { --frame-height: 100dvh; }
  html, body { height: 100%; overflow: hidden; background: var(--page); }
  body { padding: 0; display: block; }
  .device-frame { width: 100%; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .app-header { padding-top: max(16px,env(safe-area-inset-top)); }
  .bottom-nav { padding-bottom: max(11px,env(safe-area-inset-bottom)); }
  .sheet { bottom: 0; width: 100%; max-width: 100%; border-bottom: 0; border-radius: 27px 27px 0 0; max-height: calc(100dvh - max(16px,env(safe-area-inset-top))); }
  .sheet-scroll { padding-bottom: max(24px,env(safe-area-inset-bottom)); }
}