/* ---------- 屏幕里的三个应用：还原各产品原版界面 ---------- */
.app { position: absolute; inset: 0; overflow: hidden; font-size: clamp(9px, 1.75cqw, 14px); line-height: 1.5; }
.demo-pill { font-size: .68em; padding: .25em .8em; border-radius: 999px; white-space: nowrap; }
:root { --fang: "FangSong", "STFangsong", "仿宋", "Songti SC", serif; --song: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif; }

/* 墨成AI排版：白底 + 蓝色 */
.app-mc { background: #f3f5f8; color: #1f2329; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.mc-top { height: 3.1em; display: flex; align-items: center; justify-content: space-between; padding: 0 1.2em; background: #fff; border-bottom: 1px solid #e8ebf0; }
.mc-brand { display: flex; align-items: center; gap: .55em; }
.mc-brand i { font-family: var(--song); font-style: italic; font-weight: 900; font-size: 1.6em; line-height: 1; letter-spacing: -.08em; }
.mc-brand b { font-size: 1.02em; }
.mc-brand small { font-size: .7em; color: #8a94a6; }
.app-mc .demo-pill { background: #eef1f6; color: #667085; }
.mc { height: calc(100% - 3.1em); display: grid; grid-template-columns: 34% 1fr; gap: .9em; padding: .9em; position: relative; }
.mc-card { min-height: 0; display: flex; flex-direction: column; gap: .65em; padding: .9em 1em; background: #fff; border: 1px solid #e8ebf0; border-radius: .9em; }
.mc-h { font-weight: 700; font-size: 1.02em; display: flex; flex-direction: column; }
.mc-h small { font-weight: 400; font-size: .7em; color: #8a94a6; }
.mc-preview .mc-h { flex-direction: row; justify-content: space-between; align-items: center; }
.mc-seg { display: flex; gap: .2em; padding: .2em; border-radius: .6em; background: #f2f4f7; font-size: .68em; font-weight: 400; color: #475467; }
.mc-seg b, .mc-seg span { padding: .25em .7em; border-radius: .45em; }
.mc-seg b { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.mc-row { display: flex; align-items: center; gap: .5em; padding: .55em .7em; border-radius: .7em; border: 1px solid #eef0f3; font-size: .82em; }
.mc-row b { flex: 1; }
.mc-switch { width: 2.3em; height: 1.3em; border-radius: 999px; background: #2f6bff; position: relative; }
.mc-switch i { position: absolute; right: .15em; top: .15em; width: 1em; height: 1em; border-radius: 50%; background: #fff; }
.mc-on { font-weight: 700; font-size: .9em; }
.mc-field { display: grid; gap: .35em; }
.mc-field span { font-size: .76em; font-weight: 700; color: #475467; }
.mc-field kbd { font-size: .85em; color: #98a2b3; border-color: #d0d5dd; }
.mc-field select { appearance: none; width: 100%; padding: .55em 2em .55em .8em; border: 1px solid #e4e7ec; border-radius: .7em; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23667085' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right .8em center / .7em; font-size: .9em; font-weight: 700; color: #101828; cursor: pointer; }
.mc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.mc-primary { padding: .65em .4em; border-radius: .7em; background: #2f6bff; color: #fff; font-weight: 600; font-size: .82em; box-shadow: 0 .3em .8em -0.3em rgba(47, 107, 255, .6); transition: transform .1s; }
.mc-primary:active { transform: translateY(1px); }
.mc-soft { padding: .65em .4em; border-radius: .7em; background: #eef4ff; color: #2f6bff; font-weight: 600; font-size: .82em; }
.mc-soft:disabled { opacity: 1; color: #a4bcfd; }
.mc-status { margin-top: auto; padding: .55em .75em; border-radius: .7em; background: #f7f8fa; border: 1px solid #eef0f3; font-size: .72em; color: #667085; }
.mc[data-state="done"] .mc-status { color: #027a48; background: #ecfdf3; border-color: #abefc6; }
.mc-phones { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.phone { min-height: 0; display: flex; flex-direction: column; }
.phone-cap { font-size: .74em; font-weight: 700; margin-bottom: .3em; }
.phone-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: .42em solid #dde1e8; border-radius: 1.7em; background: #fff; }
.pill { display: block; width: 34%; height: .95em; margin: .45em auto .25em; border-radius: 999px; background: #111; flex: none; }
.phone-bar { display: flex; justify-content: space-between; padding: 0 1.1em .35em; font-size: .56em; color: #8a94a6; border-bottom: 1px solid #f0f2f5; }
.art { flex: 1; min-height: 0; overflow: auto; padding: .7em .95em 1em; color: #1f2329; font-size: .62em; line-height: 1.8; scrollbar-width: none; }
.art::-webkit-scrollbar { display: none; }
.art h1 { font-size: 1.45em; line-height: 1.35; margin: .3em 0 .8em; padding-bottom: .6em; text-align: center; border-bottom: 2px solid #1f2329; }
.art h2 { font-size: 1.18em; line-height: 1.4; margin: 1em 0 .5em; padding-left: .55em; border-left: 3px solid #1f2329; }
.art h2 .no { display: none; }
.art p { margin: 0 0 .7em; }
.art blockquote { margin: .7em 0; padding: .7em .8em; background: #f5f6f8; border-left: 3px solid #1f2329; border-radius: .4em; }
.art .kicker-tag { display: none; }
.art mark { background: none; color: inherit; }
.art-empty { height: 100%; display: grid; place-items: center; padding: 1em; color: #98a2b3; text-align: center; font-size: 1.05em; }
.art.p-highlight h1 { text-align: left; border-bottom-color: #10b981; }
.art.p-highlight h2 { border-left-color: #10b981; }
.art.p-highlight h2 .no { display: block; color: #10b981; font-size: 1.5em; font-weight: 800; line-height: 1.1; }
.art.p-highlight .kicker-tag { display: block; color: #10b981; font-size: .62em; font-weight: 800; letter-spacing: .08em; }
.art.p-highlight mark { color: #059669; font-weight: 700; }
.art.p-highlight blockquote { background: #ecfdf5; border: 1px solid #a7f3d0; }
.art.p-minimal h1 { text-align: left; font-weight: 600; border-bottom: 1px solid #d0d5dd; }
.art.p-minimal h2 { border-left: 0; padding-left: 0; font-weight: 600; }
.art.p-minimal h2 .no { display: inline; margin-right: .5em; color: #98a2b3; font-family: var(--mono); }
.art.p-minimal mark { font-weight: 600; }
.art.p-minimal blockquote { background: none; border-left: 1px solid #98a2b3; }
.art.p-warm { background: #fffaf2; color: #3b2f2a; }
.art.p-warm h1 { border-bottom: 0; font-family: var(--song); }
.art.p-warm h1::after { content: "❀"; display: block; color: #e08e5a; font-size: .7em; }
.art.p-warm h2 { border-left: 0; padding-left: 0; text-align: center; color: #b4612f; }
.art.p-warm mark { background: #fde7d0; }
.art.p-warm blockquote { background: #fff1e2; border-left-color: #e08e5a; border-radius: .8em; }
.art.p-tech { background: #f7f9fc; }
.art.p-tech h1 { text-align: left; border-bottom: 0; padding: .5em .7em; border-radius: .4em; background: #1e293b; color: #e2f3ff; font-family: var(--mono); }
.art.p-tech h2 { border-left-color: #2563eb; color: #1e3a8a; }
.art.p-tech h2 .no { display: inline; margin-right: .5em; color: #2563eb; font-family: var(--mono); }
.art.p-tech mark { background: #dbeafe; color: #1e3a8a; }
.art.p-tech blockquote { background: #eef4ff; border-left-color: #2563eb; font-family: var(--mono); font-size: .92em; }
.mc-scan { position: absolute; left: 0; right: 0; top: 0; height: 35%; background: linear-gradient(transparent, rgba(47, 107, 255, .28), transparent); opacity: 0; pointer-events: none; }
.mc[data-state="generating"] .mc-scan { opacity: 1; animation: mcscan 1.2s linear infinite; }
@keyframes mcscan { from { transform: translateY(-40%); } to { transform: translateY(300%); } }
.mc-toggle { display: none; }

/* 坐哪侧：奶油底 + 橙色 */
.app-zc { background: radial-gradient(circle at 50% 0%, #fff4d6, #efe6d6 70%); color: #2b2b2b; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.zc-pill { position: absolute; left: 1em; top: .8em; z-index: 2; background: rgba(255, 255, 255, .75); color: #8a6d3b; }
.zc { height: 100%; display: flex; justify-content: center; align-items: center; gap: 2.4em; padding: 1em; }
.zc-phone { height: 100%; aspect-ratio: 9 / 17; min-height: 0; display: flex; flex-direction: column; gap: .55em; padding: .8em; overflow: hidden; border-radius: 1.4em; background: #fffdf7; border: 1px solid #f0e4cf; box-shadow: 0 1em 2em -1em rgba(120, 80, 20, .35); font-size: .8em; }
.zc-hero { margin: -.8em -.8em 0; padding: 1.1em .8em .7em; text-align: center; background: linear-gradient(180deg, #ffefc4, #fffdf7); }
.zc-hero b { display: block; font-size: 1.55em; font-weight: 800; letter-spacing: .02em; }
.zc-hero small { font-size: .72em; color: #a3a3a3; }
.zc-seg { display: grid; grid-template-columns: 1fr 1fr; padding: .2em; border-radius: 999px; background: #fff; border: 1px solid #f1e6d4; }
.zc-seg button { padding: .45em; border-radius: 999px; font-weight: 700; color: #555; }
.zc-seg [aria-pressed="true"] { background: #f5a524; color: #fff; }
.zc-box { padding: .45em .7em; border-radius: .8em; background: #fff; border: 1px solid #f1e8da; }
.zc-route { display: grid; }
.zc-route label { display: flex; align-items: center; justify-content: space-between; }
.zc-route select, .zc-period select { appearance: none; border: 0; background: transparent; color: #222; font-weight: 800; cursor: pointer; }
.zc-route select { width: 100%; font-size: 1.15em; padding: .15em 0; }
.zc-route i { color: #bbb; font-style: normal; }
#zc-swap { height: 1.5em; border-top: 1px solid #f3e6d8; color: #777; font-size: .9em; }
.zc-period { display: flex; justify-content: space-between; align-items: center; }
.zc-period span { color: #666; font-size: .9em; }
.zc-period select { text-align: right; font-size: 1em; }
.zc-want { font-weight: 800; font-size: .9em; }
.zc-goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.zc-goals button { display: flex; flex-direction: column; align-items: center; gap: .2em; padding: .5em .1em; border-radius: .8em; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); font-size: .78em; color: #333; }
.zc-goals svg { width: 1.6em; height: 1.6em; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.zc-goals [data-goal="shade"] svg { stroke: #2f80ed; }
.zc-goals [data-goal="sunriseSunset"] svg { stroke: #f5a524; }
.zc-goals [data-goal="moon"] svg { stroke: #6d4fd8; }
.zc-goals [aria-pressed="true"] { background: #f5a524; color: #fff; }
.zc-goals [aria-pressed="true"] svg { stroke: #fff; }
.zc-go { margin-top: auto; padding: .7em; border-radius: .8em; background: #f5a524; color: #fff; font-weight: 800; box-shadow: 0 .4em 1em -.4em rgba(245, 165, 36, .8); }
.zc-go:active { transform: translateY(1px); }
.zc-nav { text-align: center; font-weight: 700; font-size: .9em; }
.zc-card { padding: .6em .7em; border-radius: .9em; background: #fff; border: 1px solid #f1e8da; }
.zc-ends { display: flex; align-items: center; justify-content: space-between; gap: .3em; }
.zc-ends > span:not(.zc-dir) { display: grid; }
.zc-ends b { font-size: 1.15em; font-weight: 800; }
.zc-ends small { font-size: .62em; color: #aaa; }
.zc-ends .r { text-align: right; }
.zc-dir { flex: 1; display: grid; justify-items: center; gap: .25em; }
.zc-dir i { width: 60%; height: 1px; background: #ccc; position: relative; }
.zc-dir i::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left: 6px solid #ccc; }
.zc-dir em { font-style: normal; font-size: .58em; color: #d18a00; background: #fff4dc; border-radius: .4em; padding: .1em .45em; white-space: nowrap; }
.zc-dist { margin-top: .4em; padding-top: .3em; border-top: 1px solid #f3e6d8; text-align: center; font-size: .7em; color: #666; }
.zc-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .35em; }
.zc-title { display: flex; align-items: center; gap: .3em; font-size: 1.25em; font-weight: 800; }
.zc-title svg { width: 1.2em; height: 1.2em; fill: none; stroke: #f5a524; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.zc-reason { font-size: .72em; color: #666; }
.zc-seat { position: relative; margin-top: auto; border-radius: .6em; overflow: hidden; }
.zc-seat img { width: 100%; height: auto; }
.zc-hl { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; border: 2px solid #f8c66a; border-radius: .6em; background: rgba(248, 198, 106, .2); opacity: 0; transition: left .5s var(--spring), opacity .3s; }
.zc-hl b { position: absolute; top: .3em; right: .3em; padding: .1em .5em; border-radius: 999px; background: #f5a524; color: #fff; font-size: .6em; }
.zc-result[data-side="left"] .zc-hl { opacity: 1; left: 0; }
.zc-result[data-side="right"] .zc-hl { opacity: 1; left: 50%; }
.zc-suggest { padding: .35em; border-radius: 999px; border: 1px solid #f5a524; color: #d18a00; font-size: .75em; font-weight: 700; }
.zc-note { display: flex; align-items: flex-start; gap: .4em; padding: .45em .5em; border-radius: .6em; background: #fff6e0; color: #c77a00; font-size: .62em; }
.zc-note b { flex: none; width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; background: #f5a524; color: #fff; }
.zc-result.is-fresh .zc-main { animation: pop .45s var(--spring); }
@keyframes pop { from { transform: scale(.96); opacity: .5; } to { transform: none; opacity: 1; } }

/* 每日划线回顾：墨绿桌面 + 牛皮纸卷宗 */
.app-rd { background: radial-gradient(circle at 30% 20%, #1d2822, #121915 70%); color: #e9dfc6; }
.rd-pill { position: absolute; right: 1em; top: .7em; z-index: 2; background: rgba(201, 164, 108, .18); color: #c9a46c; }
.rd { height: 100%; display: grid; grid-template-columns: 40% 1fr; gap: 1.6em; padding: 1.2em 1.6em; }
.rd-left { min-height: 0; display: flex; flex-direction: column; gap: .55em; }
.rd-est { font-family: var(--mono); font-size: .52em; letter-spacing: .3em; color: #b8955e; }
.rd-name { font-family: var(--song); font-weight: 900; font-size: 1.55em; line-height: 1.25; color: #efe6d2; }
.rd-stats { display: flex; gap: 1.3em; padding-top: .5em; border-top: 1px solid #2c3832; }
.rd-stats span { display: grid; font-family: var(--fang); font-size: .55em; letter-spacing: .15em; color: #9a8f7a; }
.rd-stats b { font-family: var(--mono); font-size: 2em; letter-spacing: 0; color: #efe6d2; }
.rd-stats b.red { color: #d4413a; }
.rd-unit { display: grid; gap: .5em; padding: .7em; border-radius: .8em; background: #232c27; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 .6em 1.2em rgba(0, 0, 0, .35); }
.rd-unit-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .48em; letter-spacing: .25em; color: #8a8f86; }
.reels { display: grid; gap: .45em; }
.reel-win { position: relative; display: flex; align-items: center; gap: .9em; height: 2.3em; padding: 0 .9em; overflow: hidden; border-radius: .35em; background: linear-gradient(#cdbf9f, #f3ead6 38%, #f3ead6 62%, #cdbf9f); color: #2a2521; box-shadow: inset 0 .25em .5em rgba(0, 0, 0, .35), inset 0 -.25em .5em rgba(0, 0, 0, .3); }
.reel-win small { font-family: var(--mono); font-size: .48em; letter-spacing: .2em; opacity: .65; width: 3.4em; }
.reel-val { font-family: var(--song); font-weight: 800; font-size: 1em; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-win.is-spinning .reel-val { animation: roll .09s linear infinite; }
.reel-win.is-stopped .reel-val { animation: settle .35s var(--spring); }
@keyframes roll { from { transform: translateY(-60%); } to { transform: translateY(60%); } }
@keyframes settle { from { transform: translateY(-40%); } to { transform: none; } }
.rd-pull { padding: .55em; border-radius: .45em; background: #b3261e; color: #f6e8d6; font-family: var(--fang); font-weight: 900; font-size: 1em; letter-spacing: .3em; box-shadow: 0 .22em 0 #7d1a14; transition: transform .08s, box-shadow .08s; }
.rd-pull:active { transform: translateY(.2em); box-shadow: 0 0 0 #7d1a14; }
.rd-quota { text-align: center; font-family: var(--fang); font-size: .55em; letter-spacing: .2em; color: #8a8f86; }
.rd-history { display: flex; flex-wrap: wrap; gap: .35em; }
.rd-history button { padding: .25em .6em; border-radius: .2em; background: #c9a46c; color: #2a2521; font-size: .58em; }
.rd-history [aria-pressed="true"] { outline: 2px solid #efe6d2; }
.rd-folder { position: relative; min-height: 0; display: flex; padding: 1.7em .9em .9em; border-radius: .6em; background: #c9a46c; box-shadow: 0 .8em 1.6em rgba(0, 0, 0, .4); }
.rd-tab { position: absolute; left: 1em; top: .35em; padding: .15em .8em; border-radius: .3em .3em 0 0; background: #d8b67f; font-family: var(--fang); font-size: .55em; letter-spacing: .3em; color: #3a2f22; }
.rd-card { position: relative; flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: .3em; padding: 1em 1.2em .8em; background: #efe6d2; color: #2a2521; box-shadow: 0 .2em .6em rgba(0, 0, 0, .2); scrollbar-width: none; animation: slideout .5s var(--out); }
.rd-card::-webkit-scrollbar { display: none; }
@keyframes slideout { from { transform: translateY(18%); opacity: 0; } to { transform: none; opacity: 1; } }
.clip { position: absolute; top: -.3em; left: 46%; width: .75em; height: 2.1em; border: .16em solid #8d8d8d; border-radius: .5em; }
.rd-no { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .3em; border-bottom: 2px solid #2a2521; font-family: var(--mono); font-size: .58em; letter-spacing: .2em; }
.rd-no b { font-size: 1.15em; letter-spacing: .1em; }
.rd-meta p { font-family: var(--fang); font-size: .55em; color: #5b4c3a; }
.rd-meta span { letter-spacing: .25em; margin-right: .6em; }
.rd-kind { position: absolute; right: 1.1em; top: 2.7em; padding: .15em .5em; border: .14em solid #b3261e; border-radius: .2em; color: #b3261e; font-family: var(--fang); font-weight: 900; font-size: .7em; letter-spacing: .2em; transform: rotate(8deg); }
.rd-label { font-family: var(--fang); font-size: .56em; letter-spacing: .15em; color: #5b4c3a; margin-top: .2em; }
.rd-label small { margin-left: .6em; letter-spacing: .1em; }
.rd-q { font-family: var(--song); font-weight: 800; font-size: .95em; line-height: 1.7; }
.rd-note { padding-left: .6em; border-left: .2em solid #c9a46c; font-family: var(--fang); font-size: .66em; color: #4b3d2c; }
.rd-add { display: flex; gap: .5em; align-items: center; }
.rd-add input { flex: 1; min-width: 0; padding: .2em 0; border: 0; border-bottom: 1px dashed #8c7a5e; background: transparent; font-family: var(--fang); font-size: .68em; color: #2a2521; }
.rd-add input:focus { outline: none; border-bottom-color: #b3261e; }
.rd-add button { padding: .15em .7em; border: 1px solid #2a2521; border-radius: .2em; font-family: var(--fang); font-size: .6em; letter-spacing: .2em; }
.rd-mine { font-family: var(--fang); font-size: .66em; color: #b3261e; }
.rd-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; padding-top: .4em; border-top: 1px dashed #8c7a5e; }
.rd-foot span { font-family: var(--fang); font-size: .55em; }
.rd-foot b { font-family: var(--mono); font-size: 2em; }
.barcode { width: 5em; height: 1.6em; background: repeating-linear-gradient(90deg, #2a2521 0 2px, transparent 2px 4px, #2a2521 4px 5px, transparent 5px 8px); }
.rd-stamp { position: absolute; right: 14%; top: 42%; padding: .1em .5em; border: .2em solid #b3261e; border-radius: .2em; color: #b3261e; font-family: var(--fang); font-weight: 900; font-size: 1.3em; letter-spacing: .2em; opacity: .85; transform: rotate(-12deg); animation: stamp .35s var(--spring); }
.rd-stamp[hidden], .rd-card[hidden], .rd-empty[hidden] { display: none; }
@keyframes stamp { from { transform: rotate(-12deg) scale(2.2); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: .85; } }
.rd-empty { margin: auto; text-align: center; font-family: var(--fang); font-size: .85em; letter-spacing: .1em; color: #3a2f22; }

/* 窄屏幕（全屏试玩层）：改成上下排，可滚动 */
@container scr (max-width: 560px) {
  .app { overflow: auto; font-size: 13px; }
  .mc { height: auto; grid-template-columns: 1fr; }
  .mc-phones { grid-template-columns: 1fr; height: 60vh; }
  .mc-phones .phone[data-phone="current"] { display: none; }
  .mc.show-current .phone[data-phone="current"] { display: flex; }
  .mc.show-current .phone[data-phone="candidate"] { display: none; }
  .mc-toggle { display: block; padding: .5em; border-radius: .7em; border: 1px solid #d0d5dd; background: #fff; font-weight: 600; }
  .zc { height: auto; flex-direction: column; padding: 2.6em 1em 1em; gap: 1em; }
  .zc-phone { width: 100%; height: auto; aspect-ratio: auto; font-size: 1em; }
  .zc-home .zc-go { margin-top: .4em; }
  .rd { height: auto; grid-template-columns: 1fr; padding: 2.4em 1em 1em; }
  .rd-folder { min-height: 26em; }
  .home-grid { grid-template-columns: 1fr; }
}

/* 保留电视曲面边缘的安全距离，产品内部按内容排版 */
.app { padding: 2.5% 3.5% 3%; }
.app .demo-pill, .app kbd { display: none; }
.mc { grid-template-columns: minmax(0, 33%) minmax(0, 1fr); }
#screen .app .mc-card { overflow: hidden; }
.mc-editor-content { flex: 1; min-height: 5em; overflow: auto; padding: .8em; border: 1px solid #e8ebf0; border-radius: .65em; background: #fff; color: #344054; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.mc-editor-content p { margin: 0 0 .8em; }
.mc-editor-content section { margin-bottom: .8em; }
.mc-editor-content h1 { font-size: 1.2em; line-height: 1.4; margin: 0 0 .8em; }
.mc-editor-content h2, .mc-editor-content h3 { font-size: 1em; line-height: 1.45; margin: 1em 0 .5em; }
.mc-editor-content blockquote { margin: .7em 0; padding-left: .6em; border-left: 2px solid #d0d5dd; }
.mc-status { margin-top: 0; flex: none; }
.phone-body { container-type: inline-size; }
.art { padding: 0; }
.art .article-content { width: 375px; padding: 10px; font-size: 16px; line-height: 1.75; zoom: clamp(.35, calc(100cqw / 375px), 1); }
#screen .app .art:not(.source-preset) .article-content p, #screen .app .art:not(.source-preset) .article-content blockquote { font-size: 16px; line-height: 1.75; }
.art.source-preset .article-content { padding: 0; }
.art.source-preset { padding: 0; }
.art.source-preset img, .art.source-preset svg { max-width: 100%; height: auto; }

.zc { height: 100%; align-items: center; gap: 2%; padding: 1% 3%; }
#screen .app .zc-phone { width: min(40%, 280px); max-width: 280px; height: auto; max-height: 100%; aspect-ratio: auto; flex: 0 1 280px; overflow: auto; }
.zc-home .zc-go { margin-top: .65em; }
#zc-swap { width: 44px; height: 44px; margin: .1em auto; border: 1px solid #f1e6d4; border-radius: 50%; background: #fff8e9; font-size: 18px; line-height: 1; }
.zc-main { flex: none; }
.zc-seat { margin-top: .7em; }

#screen .app-rd { font-size: clamp(14px, 2.15cqw, 25px); }
.rd { height: 100%; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); align-items: center; gap: 2%; padding: 1% 3%; }
#screen .app .rd { overflow: auto; }
.rd-left { max-height: 100%; overflow: auto; }
.rd-folder { width: 100%; height: 100%; min-height: 0; }
#screen .app-rd button, #screen .app-rd input { font-size: .82em; }
#screen .app-rd .rd-pull { font-size: 1em; }
#screen .app-rd .rd-history button { font-size: .75em; }
#screen .app-rd .rd-q { font-size: 1em; line-height: 1.55; }
#screen .app-rd .rd-note, #screen .app-rd .rd-mine { font-size: .85em; line-height: 1.55; }
#screen .app-rd .rd-meta p, #screen .app-rd .rd-label, #screen .app-rd .rd-foot span { font-size: .75em; line-height: 1.4; }
.rd-empty { width: 78%; height: 70%; min-height: 100px; padding: 1em; border: 1px solid #c1a981; background: repeating-linear-gradient(#efe6d2 0 29px,#d8c9a9 30px); box-shadow: 0 .25em .6em #3b291f33; color: transparent; font-size: 0; transform: rotate(-1deg); }

@container scr (max-width: 800px) {
  .mc { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .mc-phones { grid-template-columns: 1fr; }
  .mc-phones .phone[data-phone="current"] { display: none; }
  .mc.show-current .phone[data-phone="current"] { display: flex; }
  .mc.show-current .phone[data-phone="candidate"] { display: none; }
  .mc-toggle { display: block; padding: .5em; border: 1px solid #d0d5dd; border-radius: .7em; background: #fff; font-weight: 600; }
}
@container scr (max-width: 560px) {
  .app { padding: 3% 4%; }
  .mc { height: auto; grid-template-columns: 1fr; }
  .mc-editor-content { max-height: 16em; }
  .mc-phones { height: 65vh; flex: none; }
  .zc { height: auto; flex-direction: column; padding: 0; gap: 1em; }
  #screen .app .zc-phone { width: 100%; max-width: 420px; max-height: none; flex: none; }
  .rd { height: auto; grid-template-columns: 1fr; padding: 0; gap: 1em; }
  .rd-folder { height: 24em; min-height: 0; }
}