/* 未確認室 ― 五番目の返事: the fictional chat app 「よりみち」 (night theme only).
   Class names are prefixed (mk-, ti-, ls-, ch-) so they never collide with css/kit.css. */
:root {
  --bg: #0c0e11;
  --app: #15181c;
  --app2: #1c2026;
  --line: #2a2f37;
  --ink: #e6e3dc;
  --dim: #8d939c;
  --nao: #dfe2e6;
  --nao-ink: #17191c;
  --me: #2c62c4;
  --me-ink: #f4f7ff;
  --accent: #6e9ae6;
  --warn: #d0866a;
  --red: #b8443a;
  --panel: #1a1d22;
  --paper: #efe7d2;
  --gut: 16px;
  color-scheme: dark;
}
html, body { background: var(--bg); color: var(--ink); font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; font-size: calc(15px * var(--fs)); }
body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
button { color: inherit; }
.badge { display: inline-block; min-width: 1.45em; height: 1.45em; line-height: 1.45em; padding: 0 0.4em; border-radius: 1em; background: #e2483a; color: #fff; font-style: normal; font-size: 0.72em; font-weight: 700; text-align: center; }

/* ---- the phone-width column (full screen on phones, centred on PCs) ---- */
#stage { position: fixed; inset: 0; margin: 0 auto; max-width: 480px; background: var(--app); display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 560px) {
  #stage { top: 2vh; bottom: 2vh; border-radius: 22px; border: 1px solid #262a31; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }
  body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 30%, #1a1e25 0%, var(--bg) 70%); }
}
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ---- title ---- */
#title { overflow-y: auto; background: #0c0e11; }
.ti-art { position: absolute; inset: 0 0 auto 0; height: 62%; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); background: linear-gradient(180deg, #1b2025, #0c0e11); background-size: cover; background-position: center 40%; filter: saturate(0.75); }
.ti-box { position: relative; padding: 30vh var(--gut) 28px; display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
@media (min-width: 560px) { .ti-box { padding-top: 24vh; } }
.ti-kicker { margin: 0; color: #a9b0b9; font-size: 0.82em; letter-spacing: 0.2em; }
.ti-logo { margin: 0; font-family: 'Zen Old Mincho', serif; font-weight: 900; font-size: 2.9em; letter-spacing: 0.08em; line-height: 1.1; color: #f1ede4; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8); }
.ti-logo span { display: block; font-size: 0.42em; font-weight: 600; letter-spacing: 0.18em; margin-top: 10px; color: #c9c4b8; }
.ti-lead { margin: 2px 0 6px; font-family: 'Zen Old Mincho', serif; font-size: 1.12em; line-height: 1.9; color: #d8d3c8; }
.ti-actions { display: flex; flex-direction: column; gap: 10px; }
.ti-btn { font: inherit; font-weight: 700; font-size: 1.05em; padding: 14px; border-radius: 14px; border: 1px solid #3a414b; background: #1d2228; cursor: pointer; width: 100%; }
.ti-btn.primary { background: var(--me); border-color: var(--me); color: #fff; }
.ti-btn:hover { filter: brightness(1.12); }
.ti-info { margin: 4px 0 0; color: var(--dim); font-size: 0.82em; text-align: center; }
.ti-row { display: flex; gap: 10px; }
.ti-link { flex: 1; font: inherit; padding: 10px; border-radius: 12px; border: 1px solid #2c323a; background: transparent; color: #c5cad1; cursor: pointer; }
.ti-link:disabled { opacity: 0.35; cursor: default; }
.ti-points { margin: 6px 0 0; padding-left: 1.2em; color: #aab0b8; font-size: 0.86em; line-height: 1.8; }
.ti-notice { margin: 4px 0 0; padding: 10px 12px; border: 1px solid #2a3038; border-radius: 10px; color: #8f969f; font-size: 0.76em; line-height: 1.7; }
.ti-loading { color: var(--dim); font-size: 0.85em; }

/* ---- talk list ---- */
#list { background: var(--app); }
.ls-head { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gut) 8px; }
.ls-app { font-size: 1.35em; letter-spacing: 0.06em; }
.ls-menu, .ch-menu { font: inherit; font-size: 1.35em; background: none; border: none; cursor: pointer; padding: 4px 8px; color: #c8cdd4; }
.ls-search { margin: 4px var(--gut) 10px; padding: 9px 12px; border-radius: 10px; background: var(--app2); color: #6c727b; font-size: 0.88em; }
.ls-tabs { display: flex; gap: 18px; padding: 0 var(--gut) 8px; border-bottom: 1px solid var(--line); color: #6c727b; font-size: 0.9em; }
.ls-tabs .on { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.ls-threads { list-style: none; margin: 0; padding: 0; }
.ls-thread { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px var(--gut); background: none; border: none; border-bottom: 1px solid #1e2228; font: inherit; text-align: left; cursor: pointer; }
button.ls-thread:hover { background: #1a1e23; }
.ls-thread.old { opacity: 0.5; cursor: default; }
.ls-thread.fresh { background: #18202c; }
.tn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tn-main span { color: var(--dim); font-size: 0.86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--dim); font-size: 0.78em; }
.ls-hint { margin: auto 0 0; padding: 16px; text-align: center; color: #6c727b; font-size: 0.85em; }

/* avatars */
.mk-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #3a4048 center/cover; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #dfe3e8; font-size: 0.85em; }
.mk-av.big { width: 48px; height: 48px; font-size: 1em; }
.mk-av.other { background: #4a3e48; }
.mk-av.other.g { background: #34484a; }
.mk-av.unknown { background: transparent; border: 1.5px dashed #59606a; }
.mk-av.sp { visibility: hidden; height: 1px; }

/* ---- chat ---- */
#chat { background: var(--app); }
.ch-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 4px; background: #181b20; border-bottom: 1px solid var(--line); z-index: 2; }
.ch-back { position: relative; font: inherit; font-size: 1.9em; line-height: 1; background: none; border: none; cursor: pointer; padding: 0 10px 4px; color: #c8cdd4; }
.ch-back .badge { position: absolute; left: 22px; top: -2px; font-size: 0.36em; }
.ch-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ch-title small { color: var(--dim); font-size: 0.76em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-speed { font: inherit; font-size: 0.74em; padding: 6px 10px; border-radius: 20px; border: 1px solid #343a43; background: #20252b; cursor: pointer; white-space: nowrap; }
.ch-date { position: absolute; top: 62px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; z-index: 1; }
.ch-date span { margin-top: 6px; padding: 3px 12px; border-radius: 20px; background: rgba(36, 40, 47, 0.85); color: #b3b9c2; font-size: 0.74em; backdrop-filter: blur(4px); }
body.is2009 .ch-date span { color: #e4c9a0; }
.ch-log { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 34px 12px 18px; display: flex; flex-direction: column; gap: 3px; scroll-padding-bottom: 20px; -webkit-overflow-scrolling: touch; }
.newpill { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--foot-h, 70px) + 10px); z-index: 3; font: inherit; font-size: 0.82em; padding: 7px 14px; border-radius: 20px; border: none; background: var(--me); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); cursor: pointer; }

.mk-time, .mk-day { display: flex; justify-content: center; margin: 12px 0 6px; }
.mk-time span { color: #6f757e; font-size: 0.72em; letter-spacing: 0.05em; }
.mk-day span { padding: 4px 14px; border-radius: 20px; background: #23272d; color: #b8bec6; font-size: 0.76em; }
.mk-day.later span { background: #262b33; color: #d7dbe0; }
.mk-day em { font-style: normal; margin-left: 8px; color: #9aa6b8; }
.mk-day.later { margin-top: 26px; }
.mk-day.y2009 span { background: #3a3024; color: #f0d6aa; }

.mk-row { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; animation: mk-in 0.22s ease-out; }
.lowstim .mk-row { animation: none; }
@keyframes mk-in { from { opacity: 0; transform: translateY(6px); } }
.mk-row.left { padding-right: 34px; margin-top: 8px; }
.mk-row.left.cont { margin-top: 2px; }
.mk-row.right { justify-content: flex-end; padding-left: 48px; margin-top: 8px; align-items: flex-end; }
.mk-row.center { justify-content: center; margin: 10px 0; }
.mk-col { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.mk-name { font-size: 0.74em; color: #a7adb5; margin: 0 0 3px 2px; min-height: 1.2em; }
.mk-row.unknown .mk-name { border-bottom: 1px dashed #3e444d; width: 4em; }
.mk-line { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.mk-bub { padding: 8px 12px; border-radius: 16px; line-height: 1.6; word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 0.97em; }
.mk-bub.nao { background: var(--nao); color: var(--nao-ink); border-top-left-radius: 4px; }
.mk-row.cont .mk-bub.nao { border-top-left-radius: 16px; }
.mk-bub.unknown { background: #262a30; color: #c9ced5; border: 1px solid #353b44; border-top-left-radius: 4px; }
.mk-bub.me { background: var(--me); color: var(--me-ink); border-bottom-right-radius: 4px; }
.mk-bub.me.pend { background: transparent; color: #9fb5dc; border: 1.5px dashed #4f6d9f; }
.mk-bub.me.empty { background: transparent; border: 1.5px dashed #4f6d9f; min-width: 120px; min-height: 2.4em; }
.mk-row.ghost { opacity: 0.9; }
.mk-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.66em; color: #7c838c; white-space: nowrap; line-height: 1.35; }
.mk-row.left .mk-meta { align-items: flex-start; }
.mk-row.pending .mk-meta { color: #b07a6a; }
.rd.flick { animation: mk-flick 1.2s steps(2) 2; }
@keyframes mk-flick { 50% { color: #e0e4ea; } }
.mk-sys { display: flex; flex-direction: column; align-items: center; margin: 8px 0; text-align: center; }
.mk-sys span { color: #a2a8b0; font-size: 0.78em; padding: 3px 12px; border-radius: 12px; background: #1d2126; max-width: 92%; }
.mk-sys small { color: #5f656d; font-size: 0.62em; margin-top: 2px; }
.mk-faint { text-align: center; color: rgba(220, 220, 230, 0.32); font-size: 0.78em; font-style: italic; margin: 10px 0; }
.mk-comment { margin: 4px 12px 4px 42px; padding: 7px 11px; border-radius: 10px; background: #1e2227; border: 1px solid #2d3239; font-size: 0.86em; }
.mk-comment b { color: #b5a58a; font-size: 0.86em; }
.mk-comment p { margin: 2px 0 0; }
.mk-comment small { color: #5f656d; font-size: 0.72em; }
.mk-article { margin: 0 10px; padding: 2px 12px; border-left: 3px solid #6a7484; background: #1b1f24; font-size: 0.88em; color: #cfd3d9; }
.mk-article.first { margin-top: 6px; padding-top: 8px; }
.mk-article p { margin: 4px 0; }
.mk-article .a-lab { font-size: 0.78em; color: #8a94a2; }
.mk-endmark { display: flex; justify-content: center; margin: 22px 0 6px; }
.mk-endmark span { font-family: 'Zen Old Mincho', serif; color: #8d939c; font-size: 0.8em; letter-spacing: 0.3em; padding: 0 14px; border-top: 1px solid #2c3139; border-bottom: 1px solid #2c3139; }
.mk-tally { text-align: right; color: rgba(210, 214, 220, 0.5); font-size: 0.68em; letter-spacing: 0.1em; margin: 6px 4px 0; animation: mk-tally 4s ease-out forwards; }
.mk-tally.still, .lowstim .mk-tally { animation: none; opacity: 0.35; }
@keyframes mk-tally { 0% { opacity: 0; } 15% { opacity: 0.85; } 100% { opacity: 0.3; } }
.mk-stampmark { display: flex; justify-content: center; margin: 22px 0 10px; }
.mk-stampmark span { font-family: 'Zen Old Mincho', serif; font-weight: 900; color: rgba(196, 64, 52, 0.75); border: 3px double rgba(196, 64, 52, 0.75); padding: 4px 14px; border-radius: 6px; transform: rotate(-6deg); letter-spacing: 0.25em; }
.mk-counter { align-self: center; margin: 22px 0 10px; padding: 10px 20px; border-radius: 12px; border: 1px solid #3d434c; background: #1b1f24; font-size: 1.05em; letter-spacing: 0.05em; }
.mk-counter b { font-variant-numeric: tabular-nums; color: #f0e2c4; }
.mk-viewing { text-align: center; color: #6f7680; font-size: 0.7em; margin: 14px 0 4px; letter-spacing: 0.08em; }
.mk-loop { margin: 30px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: mk-in 1.6s ease-out; }
.lp-note { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; background: #23282f; border: 1px solid #39404a; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); }
.lp-note b { font-size: 0.85em; }
.lp-note small { color: var(--dim); font-size: 0.7em; }
.lp-tiny { margin: 0; font-size: 0.62em; color: #6c727b; letter-spacing: 0.1em; }
body.loop-dark #chat .ch-log > :not(.mk-loop) { opacity: 0.12; transition: opacity 2.4s; }
body.loop-dark #chat .ch-head, body.loop-dark #chat .ch-foot { opacity: 0.3; transition: opacity 2.4s; }

/* typing indicator */
.typing-bub { display: inline-flex; gap: 4px; align-items: center; background: #2a2f36 !important; color: #a8afb8; padding: 11px 13px; border-radius: 16px; border-top-left-radius: 4px; }
.typing-bub i { width: 6px; height: 6px; border-radius: 50%; background: #9aa1aa; animation: mk-dot 1.1s infinite; }
.typing-bub i:nth-child(2) { animation-delay: 0.15s; }
.typing-bub i:nth-child(3) { animation-delay: 0.3s; }
.typing-bub .t-lab { font-size: 0.8em; }
@keyframes mk-dot { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.lowstim .typing-bub i { animation: none; opacity: 0.7; }

/* ---- photos ---- */
.mk-photo { width: min(240px, 62vw); }
.mk-row.center .mk-col { width: min(260px, 72vw); }
.mk-cap { text-align: center; font-size: 0.7em; color: var(--dim); margin-top: 3px; }
.mk-ph { position: relative; margin: 0; aspect-ratio: 1024 / 700; border-radius: 12px; overflow: hidden; background: #0e1013; cursor: zoom-in; border: 1px solid #2b3037; container-type: inline-size; }
.mk-ph.doc { aspect-ratio: 4 / 5; background: #2a2723; }
.mk-ph-img { position: absolute; inset: 0; background: #20242a center/cover no-repeat; filter: contrast(1.02) saturate(0.85); }
.mk-ph.day .mk-ph-img { filter: brightness(1.75) contrast(0.85) saturate(0.55) sepia(0.18) hue-rotate(-8deg); }
.mk-ph-img.fallback { background: linear-gradient(90deg, #2a2f2a 0 18%, #393f38 18% 22%, #262b27 22% 40%, #393f38 40% 44%, #23281f 44% 100%); }
.mk-ph-img.fb-box_glass { background: radial-gradient(ellipse at 50% 45%, #6a2a25 0 30%, #3a1714 31% 45%, #1b1e22 46%); }
.mk-ph-img.fb-door_305 { background: linear-gradient(90deg, #22262a 0 40%, #4a4f55 40% 52%, #22262a 52%); }
.mk-ph-img.fb-empty_chair { background: radial-gradient(ellipse at 60% 30%, #2a3240 0 18%, #101318 50%); }
.ov { position: absolute; pointer-events: none; }
.ov-tag { transform: translate(-50%, -50%); font: 700 clamp(5px, 3.1cqw, 13px)/1 'Zen Kaku Gothic New', sans-serif; color: #1a1c1e; background: rgba(236, 232, 214, 0.86); padding: 0.25em 0.4em; border-radius: 2px; letter-spacing: 0.04em; }
.ov-sliver { width: 0.9%; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55) 30%, rgba(0, 0, 0, 0.55) 70%, transparent); filter: blur(1px); }
.ov-checked { transform: rotate(-3deg); font: 700 clamp(6px, 3.3cqw, 14px)/1.2 'Zen Kaku Gothic New', sans-serif; color: #2a2a2a; background: #f3efe2; padding: 0.4em 0.6em; border: 1px solid #c9c1a8; text-align: center; }
.ov-checked small { font-weight: 400; }
.ov-glass { overflow: hidden; }
.ov-extra { position: absolute; right: 16%; top: 12%; width: 8%; height: 64%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(210, 225, 230, 0.22), rgba(255, 255, 255, 0.04)); border-left: 1px solid rgba(220, 230, 240, 0.18); filter: blur(0.6px); }
.ov-plate.blur { position: absolute; right: 18%; top: 22%; width: 5%; height: 6%; background: rgba(230, 230, 220, 0.35); filter: blur(1.4px); }
.ov-mirror { position: absolute; right: 9%; top: 18%; font: 700 clamp(5px, 4.2cqw, 20px)/1 'Zen Kaku Gothic New', sans-serif; color: rgba(236, 236, 226, 0.55); transform: scaleX(-1); filter: blur(0.7px); letter-spacing: 0.06em; background: rgba(40, 40, 40, 0.25); padding: 0.1em 0.2em; }
.ov-mask { position: absolute; right: 2%; top: 6%; width: 46%; height: 46%; background: #050505; border: none; pointer-events: auto; cursor: not-allowed; }
.ov-edited { right: 6px; bottom: 6px; font-size: clamp(6px, 2.6cqw, 11px); color: #fff; background: rgba(0, 0, 0, 0.6); padding: 2px 6px; border-radius: 4px; }
.ov-plate305 { transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.3em; font: 700 clamp(6px, 3.6cqw, 17px)/1 'Zen Kaku Gothic New', sans-serif; color: #26292c; background: rgba(206, 208, 204, 0.92); padding: 0.3em 0.45em; border-radius: 2px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); }
.ov-plate305 small { font-size: 0.42em; font-weight: 500; color: #3a3d40; background: #f3f1ea; padding: 0.15em 0.4em; min-width: 3.4em; text-align: center; }
.ov-plate305 small.blank { color: transparent; }
.ov-keytag { transform: translate(-50%, -50%) rotate(8deg); font: 500 clamp(5px, 2.3cqw, 11px)/1 'Zen Kaku Gothic New', sans-serif; color: #2c2a24; background: #e9dcae; padding: 0.3em 0.5em; border-radius: 2px; clip-path: inset(0 0 45% 0); }
.ov-screen { border-radius: 6%; background: rgba(150, 170, 200, 0.07); border: 1px solid rgba(160, 180, 210, 0.16); box-shadow: 0 0 18px rgba(130, 160, 210, 0.12); display: flex; flex-direction: column; justify-content: flex-end; gap: 9%; padding: 8% 9%; }
.ov-screen i { display: block; height: 9%; width: 55%; border-radius: 30%; background: rgba(200, 210, 225, 0.1); }
.ov-screen i.r { align-self: flex-end; width: 42%; }

/* papers (drawn, not generated) */
.mk-doc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #3a352d, #1e1c19 75%); container-type: inline-size; }
.paper { width: 88%; max-height: 92%; overflow: hidden; background: var(--paper); color: #2b2a26; border-radius: 2px; padding: 4.5cqw 4.5cqw; font-size: 3.3cqw; line-height: 1.45; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); transform: rotate(-0.8deg); background-image: linear-gradient(180deg, rgba(120, 90, 40, 0.07), rgba(120, 90, 40, 0.02) 40%, rgba(120, 90, 40, 0.1)); position: relative; }
.p-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 0.4cqw solid #3b3a35; padding-bottom: 1.4cqw; margin-bottom: 2cqw; }
.p-head b { font-size: 1.5em; letter-spacing: 0.15em; font-family: 'Zen Old Mincho', serif; }
.p-head span { font-size: 0.9em; }
.p-meta { font-size: 0.9em; margin-bottom: 2cqw; }
.p-table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.p-table th, .p-table td { border: 0.25cqw solid #6b675c; padding: 1.2cqw 1.4cqw; text-align: left; height: 2.2em; }
.p-table th { background: rgba(80, 70, 50, 0.08); font-weight: 500; font-size: 0.86em; }
.p-foot { margin-top: 2cqw; font-size: 0.9em; text-align: right; }
.hw, .hwsvg { font-family: 'Yomogi', cursive; color: #1d2a4a; }
.circ { display: inline-block; border: 0.35cqw solid #1d2a4a; border-radius: 50%; padding: 0 0.4em; }
.circ.faint, .hw.faint { opacity: 0.48; }
.fifth td { background: rgba(255, 255, 255, 0.18); }
.fifth .circ.faint { box-shadow: 0.3cqw 0.2cqw 0 rgba(29, 42, 74, 0.35), -0.3cqw -0.1cqw 0 rgba(29, 42, 74, 0.25); }
.hw.reply { font-size: 1.05em; color: #22252c; opacity: 0.85; }
.paper.plan { padding: 3cqw; background: #eef0f2; transform: rotate(0.6deg); }
.paper.plan svg { width: 100%; height: auto; display: block; font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 13px; fill: #2a3a5a; }
.paper.plan .room-no { font-size: 17px; font-weight: 700; }
.paper.plan .tiny { font-size: 9px; }
.paper.plan .hwsvg { font-size: 14px; fill: #6a2a2a; }
.p-dl { display: grid; grid-template-columns: 4.2em 1fr; gap: 1.4cqw 2cqw; margin: 0; }
.p-dl dt { font-weight: 700; font-size: 0.88em; }
.p-dl dd { margin: 0; border-bottom: 0.2cqw dotted #8a8476; }
.p-stamp { position: absolute; right: 6%; top: 6%; font-family: 'Zen Old Mincho', serif; font-weight: 900; font-size: 1.7em; color: rgba(190, 50, 40, 0.82); border: 0.7cqw double rgba(190, 50, 40, 0.82); padding: 0.1em 0.4em; transform: rotate(-9deg); letter-spacing: 0.2em; }
.listing tr.new td { background: rgba(255, 240, 200, 0.45); font-weight: 700; }
.paper.article { background: #f4f4f2; transform: none; }
.article .a-site { font-size: 0.8em; color: #6a6e76; border-bottom: 0.25cqw solid #d0d2d6; padding-bottom: 1cqw; }
.article h4 { margin: 2cqw 0; font-size: 1.35em; }
.article p { margin: 1.5cqw 0; }
.article .a-concl { padding: 1.5cqw 2cqw; background: #fbeaea; border-left: 1cqw solid #b84a40; }

/* viewer */
#viewer { position: fixed; inset: 0; z-index: 20; background: rgba(4, 5, 7, 0.92); display: flex; align-items: center; justify-content: center; padding: 12px; }
.v-box { position: relative; width: min(960px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; }
.v-box .mk-ph { width: min(100%, calc(74vh * 1024 / 700)); margin: 0 auto; border-radius: 6px; cursor: default; }
.v-box .mk-ph.doc { width: min(100%, 74vh * 0.8); width: min(100%, calc(74vh * 0.8)); }
.v-close { position: absolute; right: 0; top: -6px; transform: translateY(-100%); font-size: 26px; background: none; border: none; color: #ddd; cursor: pointer; padding: 4px 10px; }
.v-cap { display: flex; flex-direction: column; gap: 2px; font-size: 0.86em; color: #b9bec5; text-align: center; }
.v-cap .nocap { color: #757b84; font-weight: 400; }
.v-note { min-height: 1.3em; text-align: center; color: #d6b48a; font-size: 0.82em; }

/* ---- foot: compose / choices ---- */
.ch-foot { flex: none; background: #181b20; border-top: 1px solid var(--line); padding: 8px var(--gut) calc(10px + env(safe-area-inset-bottom)); max-height: 62%; overflow-y: auto; }
.mk-compose { display: flex; align-items: center; gap: 8px; }
.cp-field { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 20px; background: var(--app2); color: #5f656e; font-size: 0.86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-compose .btn.ghost { border-color: #3a414b; color: #c0c6ce; background: transparent; white-space: nowrap; margin: 0; }
.mk-compose.end { justify-content: space-between; }
.cp-end { font-family: 'Zen Old Mincho', serif; color: #c9c4b8; letter-spacing: 0.1em; font-size: 0.92em; }
.mk-compose .btn.primary { background: var(--me); border-color: var(--me); margin: 0; }
.mk-choices { display: flex; flex-direction: column; gap: 8px; animation: mk-up 0.25s ease-out; }
@keyframes mk-up { from { opacity: 0; transform: translateY(10px); } }
.lowstim .mk-choices { animation: none; }
.ch-prompt { margin: 0 2px 2px; color: #a9b0b9; font-size: 0.8em; line-height: 1.6; }
.mk-choices.warn .ch-prompt { color: #e0b08a; }
.mk-choice { font: inherit; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid #3b4450; background: #212732; color: #e8ebf0; cursor: pointer; line-height: 1.55; min-height: 48px; font-size: 0.95em; }
.mk-choice:hover:not(:disabled) { border-color: var(--accent); background: #26304a; }
.mk-choice:disabled { opacity: 0.45; cursor: default; }
.mk-choice.picked { opacity: 1; background: var(--me); border-color: var(--me); }
.mk-choice small { display: block; margin-top: 3px; font-size: 0.76em; color: #aab3c2; }
.mk-choice.plain { background: transparent; color: #aab0b8; }
#chat.blank .ch-foot .mk-compose .cp-field { visibility: hidden; }

/* ---- windows (kit) in the night theme ---- */
.win-wrap { background: rgba(4, 5, 8, 0.66); }
.win { background: var(--panel); border-color: #2c323a; color: var(--ink); }
.win-head, .win-foot { border-color: #2c323a; }
.win-title { color: #f0ece2; }
.win-sub, .win-x { color: var(--dim); }
.win .btn { background: #232830; border-color: #3a414b; color: var(--ink); }
.win .btn:hover:not(:disabled) { background: #2a3039; }
.win .btn.primary { background: var(--me); border-color: var(--me); color: #fff; }
.mk-endwin .win { width: min(520px, 96vw); }
.end-no { display: block; font-size: 0.66em; letter-spacing: 0.3em; color: var(--dim); font-weight: 500; }
.mk-endwin .win-title { font-family: 'Zen Old Mincho', serif; font-size: 1.5em; }
.end-theme { margin: 4px 0; font-family: 'Zen Old Mincho', serif; font-size: 1.05em; }
.end-loss { margin: 0 0 10px; color: #aab0b8; font-size: 0.9em; }
.end-progress { font-size: 0.9em; color: #c9ced5; }
.end-progress .new { margin-left: 8px; font-size: 0.75em; padding: 1px 7px; border-radius: 8px; background: #b8443a; color: #fff; }
.end-dots { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0 12px; }
.end-dots span { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.68em; border: 1px solid #39404a; color: #59606a; }
.end-dots span.on { background: #e0dbcf; color: #15181c; border-color: #e0dbcf; font-weight: 700; }
.share-text { background: #12151a; border-color: #2c323a; color: #c9ced5; }
.share-buttons button { background: #232830; border-color: #3a414b; color: var(--ink); }
.share-note { color: #d6b48a; }
.mk-menu { display: flex; flex-direction: column; gap: 8px; }
.mk-mi { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid #333a43; background: #20252c; cursor: pointer; }
.mk-mi span { font-size: 0.8em; color: var(--dim); }
.mk-mi:disabled { opacity: 0.45; cursor: default; }
.mk-settings .st-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #262b32; flex-wrap: wrap; }
.mk-seg { display: inline-flex; border: 1px solid #3a414b; border-radius: 10px; overflow: hidden; }
.mk-seg button { font: inherit; font-size: 0.86em; padding: 7px 12px; border: none; background: #1f242b; cursor: pointer; }
.mk-seg button + button { border-left: 1px solid #3a414b; }
.mk-seg button.on { background: var(--me); color: #fff; }
.hb-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.hb-tab { font: inherit; padding: 6px 12px; border-radius: 20px; border: 1px solid #3a414b; background: #1f242b; color: var(--ink); cursor: pointer; }
.hb-tab.on { background: #e0dbcf; color: #15181c; border-color: #e0dbcf; }
.hb-tab .cnt { margin-left: 6px; font-size: 0.8em; opacity: 0.7; }
.rec-ends { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.rec-end { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px dashed #333a43; color: #6c737c; }
.rec-end.got { border-style: solid; border-color: #4a525d; background: #20252c; color: var(--ink); }
.rec-end .no { font-size: 0.7em; letter-spacing: 0.2em; color: var(--dim); }
.rec-end b { font-family: 'Zen Old Mincho', serif; }
.rec-end small { font-size: 0.76em; color: var(--dim); }
.rec-map { display: flex; flex-direction: column; gap: 12px; }
.mp-common { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mp-node { display: inline-flex; flex-direction: column; padding: 4px 8px; border-radius: 8px; border: 1px solid #333a43; font-size: 0.8em; color: #6c737c; }
.mp-node small { font-size: 0.78em; }
.mp-node.seen { color: var(--ink); border-color: #4a525d; background: #20252c; }
.mp-node.key { border-color: #8a7a5a; }
.mp-arrow { font-style: normal; color: #4a525d; font-size: 0.8em; }
.mp-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.mp-route { border: 1px solid #333a43; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 5px; color: #6c737c; }
.mp-route.seen { color: var(--ink); border-color: #4a525d; }
.mp-rhead { font-size: 0.72em; color: var(--dim); }
.mp-rhead b { display: block; font-size: 1.25em; color: inherit; }
.mp-route.seen .mp-rhead b { color: var(--ink); }
.mp-end { font-size: 0.74em; padding: 4px 8px; border-radius: 6px; border: 1px dashed #333a43; }
.mp-end span { display: block; font-size: 1.15em; font-family: 'Zen Old Mincho', serif; }
.mp-end.got { border-style: solid; background: #e0dbcf; color: #15181c; }
.rec-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.rec-ph { font: inherit; padding: 0; border: none; background: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; text-align: left; color: var(--dim); font-size: 0.76em; }
.rec-ph .mk-ph { pointer-events: none; }

@media (max-width: 380px) {
  .ti-logo { font-size: 2.5em; }
  .ch-speed { padding: 6px 8px; }
}
.ch-date.flip span { animation: mk-flip 1.6s steps(6); }
@keyframes mk-flip { 0%, 100% { opacity: 1; } 20% { opacity: 0.2; } 40% { opacity: 0.9; } 60% { opacity: 0.1; } }
.mk-ph-img.doc-bg { filter: blur(6px) brightness(0.35) saturate(0.6); transform: scale(1.1); }
.mk-ph-img.doc-bg + .mk-doc { background: transparent; }