.notepad-app { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--surface-solid); }
.notepad-toolbar { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-muted) 50%, transparent); }
.notepad-toolbar label { min-width: 120px; flex: 1 1 250px; }
.notepad-toolbar input { width: 100%; min-height: 36px; padding: 0 11px; border: 1px solid transparent; border-radius: 9px; outline: 0; color: var(--ink); background: var(--surface-raised); font: inherit; font-weight: 600; }
.notepad-toolbar input:focus { border-color: color-mix(in srgb, var(--luma-accent) 60%, transparent); box-shadow: 0 0 0 3px rgba(var(--luma-accent-rgb), .12); }
.notepad-modes { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--surface-muted); }
.notepad-modes button, .notepad-save { min-height: 32px; padding: 0 11px; border: 0; border-radius: 7px; color: var(--ink-muted); background: transparent; }
.notepad-modes button.is-current { color: var(--ink); background: var(--surface-raised); box-shadow: 0 2px 7px rgba(10, 15, 38, .1); }
.notepad-save { color: #fff; background: var(--luma-accent); font-weight: 600; }
.notepad-save:disabled { opacity: .55; }
.notepad-status { flex: 0 1 auto; color: var(--ink-muted); font-size: 10px; white-space: nowrap; }
.notepad-workspace { min-height: 0; position: relative; overflow: hidden; }
.notepad-workspace textarea { width: 100%; height: 100%; display: block; resize: none; padding: clamp(24px, 4vw, 48px); border: 0; outline: 0; color: var(--ink); background: transparent; font: 14px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; caret-color: var(--luma-accent); }
.notepad-preview { height: 100%; overflow: auto; padding: clamp(28px, 5vw, 58px); color: var(--ink); line-height: 1.75; }
.notepad-preview > * { max-width: 72ch; margin-inline: auto; }
.notepad-preview h1, .notepad-preview h2, .notepad-preview h3 { line-height: 1.25; letter-spacing: -.025em; }
.notepad-preview p { margin-block: .6em; }
.notepad-preview blockquote { padding: 8px 16px; border-left: 3px solid var(--luma-accent); color: var(--ink-muted); background: var(--surface-muted); }
.notepad-preview pre { padding: 15px; overflow: auto; border-radius: 10px; background: var(--surface-muted); }
.notepad-preview code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.notepad-workspace[data-mode="edit"] .notepad-preview, .notepad-workspace[data-mode="preview"] textarea { display: none; }
@media (max-width: 640px) { .notepad-status { display: none; } .notepad-toolbar { flex-wrap: wrap; } .notepad-toolbar label { order: -1; flex-basis: 100%; } }