:root {
  --charcoal: #242526;
  --charcoal-deep: #1a1b1c;
  --paper: #f4f0e6;
  --ink: #34332f;
  --ink-secondary: #716c62;
  --rule: #ded9cd;
  --muted: #b4b0a8;
  --ember: #c85a32;
  --line-height: 31px;
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: var(--charcoal); color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, textarea { font: inherit; }
button { cursor: pointer; border: 0; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .36; cursor: default; }
button:focus-visible, textarea:focus-visible { outline: 2px solid #b78b6b; outline-offset: 3px; }
::selection { background: #c8b6a0; color: var(--ink); }
.app {
  width: 100%; min-height: 100vh; min-height: 100dvh; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; align-items: center; overflow: hidden;
  padding: max(env(safe-area-inset-top), 0px) max(env(safe-area-inset-right), 0px) max(env(safe-area-inset-bottom), 0px) max(env(safe-area-inset-left), 0px);
}
.startup { margin: auto; font-family: var(--serif); font-size: 21px; letter-spacing: .16em; }
.shell { width: min(100%, 774px); display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; }
.topbar { height: 62px; flex: 0 0 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(18px, 4vw, 31px); position: relative; z-index: 3; }
.wordmark { background: transparent; color: var(--paper); font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: .13em; padding: 8px 0; }
.wordmark:focus-visible { outline-offset: 4px; }
.icon-button { background: transparent; color: #d0cbc2; padding: 11px; display: grid; place-items: center; border-radius: 3px; }
.icon-button:hover { background: #ffffff0c; }
.icon { display: block; height: 19px; width: 19px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.icon.small { height: 16px; width: 16px; }
.menu { position: absolute; top: 55px; right: clamp(15px, 4vw, 30px); background: #1e1f20; border: 1px solid #ffffff22; box-shadow: 0 12px 34px #0007; padding: 6px; min-width: 215px; z-index: 12; }
.menu button { display: flex; align-items: center; justify-content: space-between; padding: 12px 13px; width: 100%; background: transparent; color: #e4dfd6; text-align: left; font-size: 13px; }
.menu button:hover, .menu button:focus-visible { background: #ffffff13; }
.menu .count { font-size: 11px; color: #aca69b; }
.menu hr { border: 0; border-top: 1px solid #ffffff18; margin: 5px 6px; }
.canvas { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 clamp(12px, 2.4vw, 18px) clamp(10px, 2.4vw, 18px); }
.paper { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border: 1px solid #e5dfd4; border-radius: 3px; box-shadow: 0 4px 32px -4px #0007; overflow: hidden; }
.paper-heading { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 19px clamp(19px, 5vw, 35px) 13px; border-bottom: 1px solid var(--rule); }
.kicker { font-family: var(--sans); text-transform: uppercase; font-weight: 600; letter-spacing: .16em; color: #777268; font-size: 10px; }
.paper-meta { font-family: var(--serif); font-style: italic; color: #797368; font-size: 13px; }
.paper-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0; padding: 24px clamp(19px, 5vw, 35px); position: relative;
 background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 30px, rgba(180,170,157,.36) 30px, rgba(180,170,157,.36) 31px);
 background-origin: content-box; background-clip: content-box;
}
.paper-body.for-writing { display:flex; flex-direction:column; padding-top: 24px; padding-bottom: 22px; overflow: hidden; }
.paper-textarea { display: block; flex: 1; min-height: 0; height: 100%; width: 100%; background: transparent; outline: 0; border: 0; resize: none; padding: 0; margin: 0; color: var(--ink); font: 400 18px/var(--line-height) var(--serif); letter-spacing: .005em; caret-color: var(--ink); overflow-x: hidden; overflow-y: auto; }
.paper-textarea::placeholder { color: #8e877c; opacity: 1; font-style: italic; }
.paper-textarea:focus-visible { outline: none; }
.paper-text { font: 400 18px/var(--line-height) var(--serif); white-space: pre-wrap; overflow-wrap:anywhere; color:var(--ink); min-height:100%; user-select:text; }
.paper-tools { display:flex; align-items: center; justify-content: space-between; gap:10px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--rule); }
.paper-tool { display:inline-flex; align-items:center; gap:7px; color:#575148; padding: 8px 3px; background:transparent; font-size: 12px; min-height: 42px; }
.paper-tool:hover { color: #211f1c; }
.paper-tool.with-border { border:1px solid #c6c0b6; padding: 8px 11px; border-radius: 2px; }
.paper-actionbar { padding: 12px clamp(16px, 5vw, 30px); flex: 0 0 auto; border-top: 1px solid var(--rule); background: var(--paper); display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:70px; }
.paper-status { font: 11px/1.4 var(--sans); color:#746f65; max-width: 48%; }
.paper-status.error { color: #a03420; }
.action { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding: 13px 19px; min-height: 44px; border-radius: 2px; font: 600 12px/1.2 var(--sans); letter-spacing: .02em; background: var(--ink); color: var(--paper); text-align:center; }
.action:hover:not(:disabled) { background:#1d1c19; }
.action.secondary { background:transparent; color:#dad5cb; border:1px solid #6b6863; }
.action.secondary:hover:not(:disabled) { background: #ffffff10; }
.action.danger { background: var(--ember); color:white; }
.action.danger:hover:not(:disabled) { background:#aa4726; }
.action.light { background: var(--paper); color: var(--ink); }
.action.light:hover:not(:disabled) { background: #fff; }
.action.ghost { background:transparent; color:#cfc9be; }
.action.ghost:hover:not(:disabled) { background:#ffffff10; }
.action.wide { width: 100%; }
.action.on-paper { min-width: 108px; }
.paper-question { font:400 24px/1.25 var(--serif); color:var(--ink); margin: 16px 0 14px; }
.original-caption { font:600 10px/1.4 var(--sans); text-transform: uppercase; letter-spacing:.12em; color:#716c62; margin: 0 0 6px; }
.original-excerpt { font:400 15px/1.65 var(--serif); white-space:pre-wrap; overflow-wrap:anywhere; color:#5b574e; border-left:2px solid #c4bbad; padding-left:14px; max-height: 160px; overflow:auto; }
.meaning-field { width: 100%; border: 1px solid #c9c1b3; border-radius: 2px; min-height: 146px; resize: vertical; color:var(--ink); background: #f9f5ed; font:400 18px/1.6 var(--serif); padding:13px 14px; }
.meaning-field::placeholder { color:#777369; }
.meaning-field:focus-visible { outline: 2px solid #a68f78; outline-offset:1px; }
.sheet-preview { font: 400 17px/1.6 var(--serif); white-space:pre-wrap; color: var(--ink); background:#f1ebdf; padding:14px 16px; border-left:2px solid #c9bdae; margin: 12px 0; max-height:180px; overflow-y:auto; }
.screen-dark { min-height: 0; flex:1; display:flex; flex-direction:column; color:var(--paper); overflow-y:auto; padding: 23px clamp(17px, 5vw, 35px) 14px; }
.screen-title { margin: 3px 0 10px; font:400 27px/1.3 var(--serif); }
.screen-intro { font: 12px/1.6 var(--sans); color:#b9b2a7; margin:0 0 18px; }
.list-section { border-top:1px solid #ffffff20; flex:1; }
.list-row-content { min-width:0; flex:1; }
.list-row { padding: 17px 0; border-bottom:1px solid #ffffff18; display:flex; align-items:start; justify-content:space-between; gap:14px; }
.list-date { color: #c8c3b9; font:600 11px/1.4 var(--sans); }
.list-hint { font: 11px/1.5 var(--sans); margin-top:6px; color:#a9a398; }
.list-body { color:#e9e3d9; white-space:pre-wrap; overflow-wrap:anywhere; font: 17px/1.5 var(--serif); margin:7px 0 0; }
.list-actions { display:flex; gap:4px; align-items:center; flex-shrink:0; }
.small-link { padding: 7px 9px; color: #e2dcd1; background:transparent; border: 1px solid #ffffff38; font: 11px/1.5 var(--sans); min-height:38px; }
.small-link:hover { background:#ffffff12; }
.empty-message { margin: 42px 0; font: 17px/1.5 var(--serif); color:#cfc8be; }
.screen-footer { flex-shrink:0; padding-top:20px; margin-top:auto; }
.setting-item { border-top:1px solid #ffffff25; padding:20px 0; }
.setting-label { font:600 12px/1.4 var(--sans); margin-bottom: 10px; }
.lang-options { display:flex; gap:7px; }
.lang-options button { min-height:42px; padding:10px 17px; color:#e7e0d5; border:1px solid #ffffff3b; background:transparent; font: 12px/1.4 var(--sans); }
.lang-options button[aria-pressed='true'] { background:var(--paper); color:var(--ink); }
.privacy-copy { margin:0; max-width:550px; font: 13px/1.85 var(--sans); color:#c1b9ad; }
.overlay { position:absolute; inset:0; z-index: 20; display:flex; align-items:flex-end; justify-content:center; }
.scrim { position:absolute; inset:0; background:rgba(12,13,14,.72); border:0; width:100%; }
.bottomsheet { position:relative; width:100%; background:#202122; color:var(--paper); border:1px solid #474541; border-bottom:0; padding: 25px clamp(18px, 5vw, 34px) max(24px, env(safe-area-inset-bottom)); box-shadow: 0 -12px 42px #0008; max-height: 88%; overflow-y:auto; }
.sheet-title { margin:0 0 19px; font:400 25px/1.25 var(--serif); }
.sheet-sub { margin:-8px 0 21px; color:#bcb5aa; font:13px/1.6 var(--sans); }
.choice { border-top:1px solid #ffffff27; width:100%; display:flex; gap: 14px; align-items:center; text-align:left; padding:18px 5px; font: 13px/1.5 var(--sans); background:transparent; color:#ebe6dc; min-height:62px; }
.choice:last-of-type { border-bottom:1px solid #ffffff27; }
.choice:hover { background:#ffffff0d; }
.choice.danger { color: #f3b296; }
.choice .icon { flex:0 0 auto; }
.time-options { display:grid; grid-template-columns: repeat(3,1fr); gap:9px; margin-bottom:22px; }
.time-option { color:#e8e1d7; min-height: 54px; border: 1px solid #79726c; background:transparent; border-radius:2px; font: 12px/1.3 var(--sans); }
.time-option[aria-pressed='true'] { color:var(--ink); background:var(--paper); border-color:var(--paper); }
.sheet-actions { display:flex; gap:9px; margin-top:20px; }
.sheet-actions .action { flex:1; }
.sheet-details { color:#bfb7ab; font:13px/1.65 var(--sans); margin: 0; }
.sheet-close { margin: 14px auto 0; display:block; border:0; background:transparent; color:#bcb5a9; font:12px/1.4 var(--sans); padding: 11px; }
.toast { position:absolute; bottom:88px; left: 50%; transform:translateX(-50%); z-index:40; background:#f4f0e6; color:var(--ink); font:12px/1.4 var(--sans); padding:10px 15px; border:1px solid #d7cdbf; white-space:nowrap; max-width:94%; box-shadow:0 8px 30px #0008; }
.done-screen { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; }
.done-title { font:400 29px/1.3 var(--serif); margin:0; color:var(--paper); }
.done-sub { font:12px/1.5 var(--sans); color:#bbb5aa; margin:0; }
.done-action { padding:0 20px 27px; width:100%; display:flex; justify-content:center; }
.burning-wrap { flex:1; min-height:0; position:relative; display:flex; flex-direction:column; overflow:hidden; }
.burning-paper { height:100%; flex:1; min-height:0; position:relative; background:var(--paper); color:var(--ink); padding:36px clamp(22px,5vw,42px); overflow:hidden;
  box-shadow:0 4px 32px -4px #0007;
  animation: consume-paper 2.25s cubic-bezier(.45,.05,.35,.96) forwards;
}
.burning-text { font:18px/31px var(--serif); white-space:pre-wrap; overflow-wrap:anywhere; }
.burning-paper::after { content:''; position:absolute; height:14px; left:0; right:0; bottom:0; background:linear-gradient(0deg,rgba(83,41,26,.9),rgba(204,99,54,.8),rgba(231,164,102,.26),transparent); box-shadow:0 0 17px rgba(224,108,63,.45); transform: translateY(90px); animation:burn-line 2.25s cubic-bezier(.45,.05,.35,.96) forwards; pointer-events:none; }
@keyframes consume-paper {
  0% { clip-path:inset(0 0 0 0); filter:brightness(1); }
  24% { clip-path:inset(0 0 12% 0); filter:brightness(.97) sepia(.07); }
  70% { clip-path:inset(0 0 75% 0); filter:brightness(.70) sepia(.35); }
  100% { clip-path:inset(0 0 100% 0); filter:brightness(.36) sepia(.65); }
}
@keyframes burn-line {
  0% { transform:translateY(19px); opacity:0; }
  14% {opacity:1;} 88% {opacity:.8;} 100% {transform:translateY(-100vh); opacity:0;}
}
.skip-burn { position:absolute; right:15px; bottom:16px; z-index:2; padding:10px 16px; background:#252525bd; border:1px solid #ffffff33; color:#e6e0d5; font:12px var(--sans); }
.fatal { max-width:540px; margin:auto; padding:30px; }
.fatal h1 { font:400 28px/1.3 var(--serif); }
.fatal p { font:14px/1.75 var(--sans); color:#cbc4b8; }
@media (min-width: 850px) {
  .shell { padding: 8px 0 20px; }
  .canvas { padding-bottom:20px; }
}
@media (max-width: 375px) {
  .topbar { height:54px; flex-basis:54px; }
  .paper-heading { padding-top:13px; padding-bottom:11px; }
  .paper-body { padding-top:17px; }
  .paper-body.for-writing { padding-top:17px; }
  .paper-actionbar { min-height:60px; padding-top:8px; padding-bottom:8px; }
  .action { padding: 11px 14px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}