:root {
  color-scheme: light;
  --bg: #f7f4ef;
  --panel: #fffdf9;
  --line: #e3dcd3;
  --text: #4b433c;
  --muted: #857970;
  --accent: #ad654e;
  --mint: var(--accent);
  --anger: #ad654e;
}
body { background: var(--bg); color: var(--text); }
button:focus-visible, select:focus-visible { outline-color: #a878bf; }
.app-header { height: 68px; gap: 24px; background: #fffdfa; border-bottom-color: var(--line); }
.identity { flex-shrink: 0; gap: 9px; }
h1 { font-size: 23px; letter-spacing: -.04em; font-weight: 800; }
h1 span { color: #b56d56; }
.app-symbol { background: #f7e9df; color: #b56d56; border-color: #e5cbbd; border-radius: 10px; }
.header-request { display: flex; align-items: center; justify-content: center; gap: 16px; min-width: 0; margin-left: auto; margin-right: auto; }
.request-number { flex-shrink: 0; padding: 6px 10px; border: 1px solid #e1d5e7; border-radius: 6px; background: #f3edf6; color: #81708b; font-size: 12px; font-weight: 600; white-space: nowrap; }
.request-number > span { color: #9a8da1; font-weight: 400; }
.header-request h2 { margin: 0; font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-button { color: #776b60; }
.text-button:hover { color: #7e4938; background: #f0e8df; }
.help-button { border-color: #dfd5c9; background: #fffdfa; }
.app-layout { height: calc(100dvh - 108px); }
.workspace { padding-top: 13px; }
.workspace-toolbar { height: 40px; }
.workspace-tab { height: 40px; border-color: #dcd2c6; background: #eee7de; color: #65584c; }
.tab-dot { background: #c48e75; }
.edit-hint { color: #8b7d70; }
.focus-toggle { color: #9d614d; border-color: #e0cbbc; background: #faf0e8; }
.browser-window { border-color: #d9cec1; background: #fffaf3; box-shadow: 0 9px 26px #b09b7b0f; }
.browser-chrome { background: #eee7de; border-bottom: 1px solid #ded3c5; }
.browser-address { background: #fffaf5; border: 1px solid #e1d7cb; color: #766654; }
.browser-address svg { color: #9b8a77; }
.address-path, .local-label { color: #9d8e7d; }
.inspector { background: #fffdfa; border-color: #e0d5c8; box-shadow: 0 3px 8px #bba78708; }
.inspector-selection label, .inspector legend { color: #877464; }
.inspector-selection select { color: #5e4d40; background: #f6f0e8; border-color: #d8c8b7; }
.color-swatch { color: #8e7a68; }
.color-swatch.active { border-color: #b8866e; background: #f8eade; color: #7e4f39; }
.color-swatch:hover:not(:disabled) { background: #f6eee5; }
.swatch-dot { box-shadow: 0 0 0 1px #b7a38e; }
.segmented { border-color: #d6c6b5; background: #fbf6ef; }
.segmented button { color: #9c8670; }
.segmented button.active { background: #b77b60; color: white; }
.workspace-footer { color: #978470; }
.workspace-footer > span:first-child { color: #84705c; }
.status-dot { background: #c5b29f; }
.status-dot.edited { background: #ba7e61; }
.chat-panel { background: #fffdf9; border-color: #e5d9cb; }
.chat-panel:focus { outline: none; }
.client-header { border-bottom: 1px solid #efe6db; }
.chat-grip { color: #ad9781; }
.client-avatar, .mini-avatar { background: #f0dcc8; color: #9a6a47; }
.client-avatar > span { border-color: #fffdf9; background: #d8ad88; }
.client-name > span { color: #9d8874; }
.chat-action { border-color: #e2d3c1; background: #fcf6ee; color: #9a7a5c; }
.chat-action:hover { background: #efe2d1; color: #795538; }
.chat-move-hint { color: #a58e78; }
.anger-box { background: #fbf1eb; border-color: #ead4c9; }
.anger-heading { color: #9b7059; }
.anger-max { color: #ac8b73; }
.anger-track { background: #ecddce; }
.anger-caption { color: #a38b77; }
.chat-scroll { scrollbar-color: #dbccb9 transparent; }
.chat-date { color: #b19d88; }
.chat-date:before, .chat-date:after { background: #eadfce; }
.message-meta { color: #8c725a; }
.message-meta time { color: #b5a18d; }
.message-body { color: #6e5845; }
.message-body strong { color: #805338; background: #f8e7d8; }
.player .message-meta svg { color: #ba8766; }
.player .message-meta > span { border-color: #d9c6b0; color: #ab8d6d; background: #fcf7f0; }
.player .message-body { background: #f7f0e7; border-color: #e6d6c1; color: #8f7157; }
.system-message { color: #ad957b; }
.composer-area { background: #fffdf9; border-color: #e9ddce; }
.composer-label { color: #a0866b; }
.composer-label > span:last-child { color: #b29a7f; }
.composer { background: #fcf7ef; border-color: #dcc5aa; }
.composer p { color: #967658; }
.composer button { color: white; background: #b77b60; }
.composer button:hover:not(:disabled) { background: #a86c52; }
.composer-note { color: #b29b82; }
.live-dot { background: #bd8d6e; }
.app-footer { background: #fffdfa; border-color: #e5d9ca; }
.muted { color: #af987e; }
.level-dots i { background: #e7d9c8; }
.level-dots i.current, .level-dots i.complete { background: #bb8264; }
.footer-tagline { color: #aa9073; }
.chat-floating .chat-panel { border-color: #cdb79d; box-shadow: 0 15px 50px #94745625; }
.chat-floating .client-header { background: #fbf2e7; border-color: #e5cfb4; }
.chat-floating .chat-panel.dragging { box-shadow: 0 20px 65px #94745635; border-color: #b5805d; }
body.focus-mode .focus-toggle { color: #8a5c3c; background: #efddc4; }
.toast { color: #8b6041; background: #fff7eb; border-color: #d3b48c; box-shadow: 0 5px 20px #af8a6222; }
.typing i { background: #c0a181; }
.angry-message .message-body { color: #b45b66; }
.show-result-button { color: #986247; background: #f8e9d9; border-color: #d1ab89; }
.help-dialog, .result-dialog { color: #6e533d; background: #fffcf7; border-color: #ddc6aa; box-shadow: 0 25px 90px #91735a22; }
.help-dialog::backdrop, .result-dialog::backdrop { background: #f1e9debb; backdrop-filter: blur(4px); }
.dialog-close { color: #ad8c6d; }
.help-dialog p, .help-dialog li { color: #937153; }
.help-dialog .help-small { color: #ac9075; }
.primary-button { color: white; background: #b77b60; border-color: #b77b60; }
.secondary-button { color: #a17655; border-color: #ceb08f; background: #fffbf5; }
.result-mark { background: #fae9d6; color: #b07a4c; border-color: #d7b082; }
.result-details > p, .result-dialog blockquote { color: #a17c5a; }
.result-stats { border-color: #e8d7c1; }
.result-stats > div:first-child { border-color: #e8d7c1; }
.result-stats span { color: #b39371; }
.result-details .result-footnote { color: #bca081; }
.result-dialog.failure .result-mark { background: #fff0ee; color: #bd7581; border-color: #dfb0b7; }
.result-dialog.failure .eyebrow { color: #c67c88; }
.result-dialog.success { width: min(1100px, calc(100vw - 20px)); padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.result-dialog.success .result-details { padding: 40px 12px; }
.result-dialog.success #result-title { display: block; margin: 0 0 44px; font: 900 clamp(46px, 10.2vw, 142px)/1.25 var(--font); color: #f659e1; -webkit-text-stroke: 8px white; paint-order: stroke fill; text-shadow: 3px 4px #8d257e, 5px 7px #9b497e77; letter-spacing: -.07em; white-space: nowrap; animation: telop-hit .35s cubic-bezier(.15,1.5,.3,1) both; }
.result-dialog.success .result-mark, .result-dialog.success #result-eyebrow, .result-dialog.success .result-details > p, .result-dialog.success .result-stats, .result-dialog.success blockquote { display: none; }
.result-dialog.success .result-actions { flex-direction: row; gap: 20px; margin: 0; animation: result-buttons .25s ease-out .22s both; }
.result-actions button { border-radius: 0; min-height: 64px; min-width: 160px; font-size: 19px; }
.result-dialog.success .result-actions button { background: #fffdf8; border: 2px solid #cbb29e; color: #9a6c50; box-shadow: 4px 4px 0 #e5d7c5; }
.result-dialog.success .result-actions button:hover { background: #f8ecdf; transform: translate(-1px, -1px); }
.result-dialog.success.ending { width: 520px; max-width: calc(100vw - 24px); border: 1px solid #dcc6af; border-radius: 9px; background: #fffdf8; box-shadow: 0 20px 80px #94745422; }
.result-dialog.success.ending #result-title { margin: 0 0 16px; color: #976d4d; font-size: 29px; -webkit-text-stroke: 0; text-shadow: none; letter-spacing: 0; white-space: normal; animation: none; }
.result-dialog.success.ending .result-details > p, .result-dialog.success.ending .result-stats { display: block; }
.result-dialog.success.ending .result-stats { display: grid; margin: 20px auto; }
.result-dialog.success.ending .result-stats span { display: block; margin: 0 0 8px; }
.result-dialog.success.ending .result-actions button { min-width: 180px; min-height: 55px; font-size: 16px; }
.intro-pending .chat-panel { visibility: hidden; }
.intro-pending .workspace { opacity: .28; pointer-events: none; }
.intro-layer { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; overflow: hidden; background: #f8f3ebc9; backdrop-filter: blur(3px); }
.intro-skip { position: absolute; top: 23px; right: 28px; z-index: 10; border: 1px solid #d8c5b0; border-radius: 5px; padding: 8px 13px; background: #fffaf2; color: #ac8a68; font-size: 12px; }
.intro-skip span { margin-left: 10px; }
.letter-actor { position: relative; width: 440px; max-width: calc(100vw - 28px); height: 460px; margin-top: 15px; perspective: 1000px; }
.envelope-back { position: absolute; bottom: 22px; left: 25px; right: 25px; height: 238px; background: #e3c8a6; border: 1px solid #cbb090; border-radius: 9px; box-shadow: 0 25px 60px #9b784325; }
.envelope-front { position: absolute; bottom: 22px; left: 25px; right: 25px; height: 238px; z-index: 3; background: #f0dcc2; clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 100%, 0 100%); border-radius: 8px; }
.envelope-fold { position: absolute; inset: 0; background: #e9cfac; clip-path: polygon(0 100%, 50% 35%, 100% 100%); }
.envelope-seal { position: absolute; top: 105px; left: calc(50% - 23px); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #ba8064; color: #fff1dd; box-shadow: 0 2px 3px #9c714b44; font-size: 24px; font-weight: 800; }
.envelope-flap { position: absolute; bottom: 130px; left: 25px; right: 25px; height: 130px; z-index: 5; background: #f5e5ce; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: center top; backface-visibility: hidden; }
.letter-paper { position: absolute; left: 10px; right: 10px; top: 42px; z-index: 2; padding: 23px 29px 22px; border: 1px solid #e7d4bd; border-radius: 5px; background: #fffdf8; box-shadow: 0 12px 30px #a47c4720; opacity: 0; transform: translateY(155px) scale(.85); }
.letter-topline { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: #947353; letter-spacing: .03em; border-bottom: 1px solid #efdfca; padding-bottom: 12px; }
.letter-from { display: flex; align-items: center; gap: 8px; margin: 20px 0 18px; color: #a98159; font-size: 12px; }
.letter-from > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #f0dcc3; color: #a3784a; font-family: 'Noto Serif JP', serif; }
.letter-from small { font-size: 10px; margin-left: auto; color: #967859; }
.letter-paper h2 { margin: 0 0 20px; color: #9b6d43; font: 700 31px/1.55 'Noto Serif JP', serif; letter-spacing: .02em; }
.letter-request { font-size: 13px; line-height: 2; color: #806349; margin: 0 0 20px; }
.letter-request strong { font-weight: 500; color: #a7734c; }
.letter-accept { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 14px; background: #ba8265; color: #fffaf0; border: 1px solid #b27b5d; border-radius: 4px; font-size: 14px; }
.letter-accept > span { font-size: 10px; color: #f8e4cd; }
.letter-arrival { position: absolute; inset: auto 0 -25px; margin: 0; text-align: center; color: #bba181; font-size: 12px; letter-spacing: .15em; }
.letter-actor.is-reading .letter-paper { z-index: 6; }
.letter-actor.is-reading .letter-arrival { opacity: 0; }
@keyframes telop-hit { 0% { opacity: 0; transform: translateX(-12px) scale(1.7); } 65% { opacity: 1; transform: translateX(0) scale(.97); } 100% { opacity: 1; transform: scale(1); } }
@keyframes result-buttons { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1100px) { .app-header { gap: 16px; }h1 { font-size: 21px; }.header-request { gap: 10px; }.header-request h2 { font-size: 16px; }.request-number { font-size: 11px; padding-inline: 7px; } }
@media (max-width: 900px) {
  .app-header { height: 88px; position: relative; align-items: flex-start; padding-top: 12px; gap: 12px; }.identity { margin-top: 2px; }.identity h1 { font-size: 19px; }.app-symbol { width: 28px; height: 28px; }.help-button { margin-left: auto; padding-block: 6px; }.header-request { position: absolute; left: 15px; right: 15px; bottom: 10px; justify-content: flex-start; margin: 0; }.header-request h2 { font-size: 13px; }.request-number { font-size: 10px; padding: 3px 7px; }
  .app-layout { height: auto; }.workspace { min-height: 600px; }.chat-floating .workspace { min-height: calc(100dvh - 128px); }.chat-panel { border-bottom-color: #e7d7c2; }.result-dialog.success #result-title { font-size: clamp(40px, 12vw, 100px); -webkit-text-stroke-width: 5px; margin-bottom: 34px; }.result-actions button { min-width: 130px; min-height: 60px; font-size: 17px; }.result-dialog.success .result-actions { gap: 14px; }.result-dialog.success.ending #result-title { font-size: 25px; }.result-dialog.success.ending .result-details { padding: 25px 18px; }
  .letter-actor { height: 450px; }.letter-paper { padding: 21px 23px; top: 48px; }.letter-paper h2 { font-size: 29px; }.letter-request { font-size: 12px; }.letter-from small { font-size: 9px; }.envelope-back,.envelope-front { left: 17px; right: 17px; height: 218px; }.envelope-flap { left: 17px; right: 17px; bottom: 130px; height: 110px; }.envelope-seal { top: 99px; }.intro-skip { top: 15px; right: 16px; font-size: 11px; }
}
@media (max-height: 620px) { .letter-actor { transform: scale(.8); }.letter-paper { top: 30px; }.intro-skip { top: 10px; } }
@media (prefers-reduced-motion: reduce) { .intro-layer { backdrop-filter: none; } }

/* Lightweight editing surfaces: no animated full-screen filters. */
.intro-layer, .help-dialog::backdrop, .result-dialog::backdrop { backdrop-filter: none; }
.website { background-image: none; }
.cafe-title, #booking-text, #menu-text { white-space: pre-line; overflow-wrap: anywhere; }
.advanced-editor { flex-shrink: 0; margin-top: 7px; border: 1px solid var(--line); border-radius: 7px; background: #fffdf9; font-size: 13px; }
.advanced-editor summary { cursor: pointer; padding: 10px 14px; color: #796555; }
.advanced-editor summary > span { float: right; font-size: 11px; color: #897a6e; }
.advanced-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 14px 14px; }
.advanced-fields label { display: block; color: #796555; }
.advanced-fields textarea { display: block; width: 100%; resize: vertical; max-height: 100px; margin-top: 7px; padding: 8px; color: #4b433c; font: inherit; background: #faf7f2; border: 1px solid #d8c8b7; border-radius: 5px; }
.custom-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.custom-tools label { display: flex; align-items: center; gap: 7px; }
.custom-tools input { width: 36px; height: 32px; padding: 1px; border: 1px solid #d8c8b7; background: transparent; cursor: pointer; }
.custom-tools button { padding: 8px 10px; background: #f6eee5; border: 1px solid #d8c8b7; border-radius: 5px; color: #76583f; font: inherit; }
.custom-tools button[aria-pressed='true'] { background: #e7d5bd; outline: 2px solid #ad654e; }
.custom-tools small { flex-basis: 100%; line-height: 1.6; color: #8b7560; }
.website.sampling, .website.sampling * { cursor: crosshair !important; }
#history-content { white-space: pre-wrap; overflow-wrap: anywhere; margin: 20px 0; }
#history-content p { padding: 12px; background: #f8f1e8; border-left: 3px solid #c4a88b; }
.result-dialog.success.cold-rating:not(.ending) #result-title { color: #3274de; font-family: 'Yu Gothic', 'Arial Black', sans-serif; font-weight: 1000; letter-spacing: -.09em; text-shadow: 3px 4px #163e8d, 6px 7px #a6cef1; transform: skewX(-6deg); }
.result-dialog.success.cold-rating:not(.ending) #result-title:before, .result-dialog.success.cold-rating:not(.ending) #result-title:after { content: ''; display: inline-block; width: .18em; height: .8em; margin: 0 .08em; background: #3274de; clip-path: polygon(0 0,100% 35%,45% 44%,100% 100%,0 64%,55% 52%); }
.result-dialog.success #result-title { font-size: clamp(30px, 8.4vw, 120px); }
.chat-floating .chat-panel.dragging { box-shadow: 0 8px 20px #94745625; }
@media(max-width: 900px) { .advanced-fields { grid-template-columns: 1fr; }.result-dialog.success #result-title { font-size: clamp(28px,9.3vw,84px); -webkit-text-stroke-width: 4px; }.advanced-editor summary { font-size:12px; } }