:root {
  color: #282622;
  background: #f6f3ee;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell {
  width: min(100% - 32px, 680px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 34px 0 28px;
  display: flex;
  flex-direction: column;
}

.app-header, .app-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.eyebrow { margin: 0 0 6px; color: #a08f7b; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(28px, 6vw, 40px); font-weight: 400; letter-spacing: -.04em; }

.connect-button {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border: 1px solid #d9d2c7; border-radius: 999px; color: #5d554c; background: transparent;
  font-size: 12px; font-weight: 700;
}
.connect-button:hover { background: #eee9e1; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #b8aea1; }
.connected .status-dot { background: #62a382; box-shadow: 0 0 0 4px #dcecdf; }

.viewer { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 44px 0 34px; }
.memo-card {
  position: relative; min-height: min(55vh, 390px); padding: 56px 30px 44px;
  border: 0; border-radius: 24px; color: #fffaf2; background: #292725;
  box-shadow: 0 18px 50px rgba(52, 43, 33, .14); text-align: left; transition: transform .18s ease, box-shadow .18s ease;
}
.memo-card:hover { transform: translateY(-3px); box-shadow: 0 22px 56px rgba(52, 43, 33, .2); }
.memo-card:active { transform: scale(.985); }
.tap-hint { position: absolute; top: 26px; left: 30px; color: #b8aa9a; font-size: 10px; letter-spacing: .2em; }
.memo-text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font-family: Georgia, "Times New Roman", serif; font-size: clamp(28px, 7vw, 54px); line-height: 1.2; letter-spacing: -.035em; }
.memo-index { position: absolute; right: 30px; bottom: 25px; color: #b8aa9a; font-size: 12px; letter-spacing: .08em; }
.sync-message { min-height: 19px; margin: 14px 4px 0; color: #9b9186; font-size: 12px; text-align: center; }

.composer { padding: 22px 0 18px; border-top: 1px solid #dfd8cf; }
.composer label { display: block; margin-bottom: 10px; color: #7b7065; font-size: 12px; font-weight: 700; }
.input-row { display: flex; gap: 10px; }
textarea { flex: 1; resize: none; min-width: 0; padding: 13px 14px; border: 1px solid #d9d2c7; border-radius: 12px; outline: 0; color: #282622; background: #fffdf9; line-height: 1.5; }
textarea:focus { border-color: #8c7b69; box-shadow: 0 0 0 3px #e8e0d5; }
.add-button { align-self: stretch; padding: 0 20px; border: 0; border-radius: 12px; color: #fffaf2; background: #9a7354; font-weight: 700; }
.add-button:hover { background: #805c41; }
.memo-list-section { padding: 4px 0 22px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-heading h2 { margin: 0; color: #7b7065; font-size: 12px; font-weight: 700; }
.section-heading span { color: #b0a69b; font-size: 9px; letter-spacing: .14em; }
.memo-list { display: grid; gap: 8px; }
.memo-list-empty { margin: 0; padding: 14px; border: 1px dashed #d9d2c7; border-radius: 10px; color: #a0968b; font-size: 12px; text-align: center; }
.memo-row { display: flex; align-items: stretch; gap: 8px; }
.memo-row textarea { min-height: 44px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; }
.delete-button { flex: 0 0 42px; border: 1px solid #e2d9cf; border-radius: 10px; color: #aa8f7d; background: transparent; font-size: 18px; line-height: 1; }
.delete-button:hover { border-color: #cba993; color: #8e5d44; background: #f3e8df; }
.app-footer { color: #a0968b; font-size: 11px; letter-spacing: .1em; }
.text-button { padding: 4px 0; border: 0; color: #9a8d80; background: transparent; font-size: 11px; }
.text-button:hover { color: #604f40; }

@media (max-width: 480px) {
  .app-shell { width: min(100% - 24px, 680px); padding-top: 24px; }
  .connect-button { padding: 9px 11px; }
  .memo-card { min-height: 48vh; padding-left: 24px; padding-right: 24px; }
  .tap-hint { left: 24px; }
  .memo-index { right: 24px; }
  .input-row { align-items: stretch; }
  .add-button { padding: 0 15px; }
}