:root {
    color-scheme: light;
    --ink: #302941;
    --paper: #fffaf7;
    --accent: #ff5b93;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--paper); }
body { min-width: 320px; min-height: 100dvh; margin: 0; color: var(--ink); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid #744ee7; outline-offset: 3px; }
.wonder-page { display: flex; min-height: 100dvh; flex-direction: column; padding: 0 !important; }
.topline, .bottomline { display: flex; width: min(1440px, 100%); align-items: center; justify-content: space-between; margin-inline: auto; padding-inline: clamp(22px, 5vw, 74px); }
.topline { height: 78px; flex: 0 0 auto; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; color: #66594c; font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif; font-size: 1rem; font-weight: 600; letter-spacing: .12em; }
.wordmark-star { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 10px; color: #fffaf2; background: #a28a72; font-size: 1rem; transform: rotate(-9deg); }
.topline-note { display: flex; align-items: center; gap: 8px; color: #898194; font-size: .72rem; letter-spacing: .04em; }
.sparkle-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff779b; box-shadow: 0 0 0 5px #ff779b20; }
.topline-actions { display: flex; align-items: center; gap: 16px; }
.topline-button { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #f1d9e0; border-radius: 99px; color: #b74d75; background: #fff; cursor: pointer; font-size: .72rem; font-weight: 750; }
.topline-button:hover { background: #fff0f4; }
.favorite-count { display: grid; min-width: 19px; height: 19px; place-items: center; border-radius: 50%; color: #fff; background: #f37e9d; font-size: .61rem; }
.keyboard-hint { color: #9c94a0; font-size: .63rem; }
kbd { padding: 3px 6px; border: 1px solid #e2dce0; border-radius: 4px; color: #6d6272; background: #fff; font: inherit; }
.wonder { display: grid; width: 100%; flex: 1 0 auto; place-items: center; padding: 4px clamp(18px, 3vw, 44px) 24px; }
.scene-shell { position: relative; display: flex; width: min(1440px, 100%); min-height: calc(100dvh - 160px); flex-direction: column; overflow: hidden; border-radius: 22px; isolation: isolate; background: linear-gradient(135deg, #ff9bbc, #f9ce98); box-shadow: 0 30px 90px #5643631a, 0 4px 15px #5643630b; touch-action: pan-y; }
.scene-shell::before { position: absolute; z-index: 1; inset: 13px; border: 1px solid #ffffff83; border-radius: 15px; content: ""; pointer-events: none; }
.scene-art, .scene-grain { position: absolute; inset: 0; }
.scene-art { z-index: 0; }
.scene-grain { z-index: 1; }
.scene-art { transform: scale(1.025); }
.scene-art svg { display: block; width: 100%; height: 100%; }
.scene-grain { z-index: 0; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; pointer-events: none; }
.scene-shell[data-style="cutout"] { border-radius: 22px 22px 22px 5px; }
.scene-shell[data-style="cutout"]::before { border-style: dashed; border-width: 2px; }
.scene-shell[data-style="sticker"] { border-radius: 40px; }
.scene-shell[data-style="sticker"]::before { inset: 18px; border-width: 2px; border-radius: 30px; }
.scene-shell[data-style="storybook"] .scene-grain { opacity: .24; mix-blend-mode: multiply; }
.scene-shell[data-style="pop"] .scene-copy h1 { text-shadow: 1px 2px 0 #fff4bd45; }
.scene-topline { position: absolute; z-index: 2; top: 43px; right: 54px; left: 54px; display: flex; justify-content: space-between; color: #fffdf1dc; font-family: Georgia, serif; font-size: .62rem; font-weight: 700; letter-spacing: .17em; text-shadow: 0 1px 8px #603e5820; }
.scene-copy { position: relative; z-index: 2; width: min(590px, 58%); margin: auto 0 auto clamp(42px, 9vw, 128px); padding-block: 95px 135px; color: #342b46; isolation: isolate; container-type: inline-size; }
.scene-copy::before { position: absolute; z-index: -1; inset: 3% -16% 0 -15%; border-radius: 50%; background: radial-gradient(ellipse, #fff6dd66 0, #fff6dd36 48%, transparent 72%); content: ""; pointer-events: none; }
.scene-kicker { margin: 0 0 22px; color: #fffdf1; font-size: .64rem; font-weight: 850; letter-spacing: .24em; text-shadow: 0 1px 12px #603e5833; }
.scene-copy h1 { --title-size: clamp(3.35rem, 7vw, 7rem); margin: 0; font-size: min(var(--title-size), calc(100cqw / var(--title-units, 8))); font-weight: 950; letter-spacing: -.075em; line-height: 1.1; text-wrap: balance; text-shadow: 0 5px 28px #fff7e13b; }
.scene-caption { display: inline-block; margin: 25px 0 0; padding: 10px 15px; border: 1px solid #fffaf0db; border-radius: 99px; color: #41354b; background: #fffaf0dc; box-shadow: 0 5px 20px #503c4214; font-size: clamp(.78rem, 1.15vw, .94rem); font-weight: 750; letter-spacing: .045em; backdrop-filter: blur(6px); }
.scene-side-label { position: absolute; z-index: 2; top: 50%; right: 34px; color: #fffdf0d9; font-family: Georgia, serif; font-size: .52rem; font-weight: 700; letter-spacing: .2em; text-shadow: 0 1px 8px #603e5820; writing-mode: vertical-rl; transform: translateY(-50%); }
.scene-controls { position: absolute; z-index: 2; right: 56px; bottom: 47px; left: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.scene-hint { display: flex; align-items: center; gap: 8px; color: #fffef2eb; font-size: .72rem; font-weight: 650; text-shadow: 0 1px 8px #58384430; }
.hint-star { color: #fff7a8; font-size: 1rem; }
.scene-hint.is-suggestion { font-weight: 400; line-height: 1.6; }
.scene-hint.is-suggestion::after { content: none; }
.scene-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.scene-action { display: inline-flex; min-height: 45px; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid #fff9; border-radius: 99px; color: #40374e; background: #fffdf2e8; box-shadow: 0 6px 18px #523d5414; cursor: pointer; font-size: .7rem; font-weight: 750; transition: transform .18s ease, background .18s ease; }
.scene-action:hover { transform: translateY(-2px); background: #fff; }
.scene-action:disabled { cursor: wait; opacity: .65; }
.action-icon { font-size: 1rem; }
.favorite-button.is-favorite { color: #b93869; background: #fff0f4; }
.favorite-button.is-favorite .action-icon { color: #ed5485; }
.surprise-button { display: inline-flex; min-height: 54px; align-items: center; gap: 15px; padding: 0 20px; border: 1px solid #ffffffab; border-radius: 99px; color: #393148; background: #fffdf5; box-shadow: 0 8px 24px #523d5422; cursor: pointer; font-size: .8rem; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.surprise-button:hover { transform: translateY(-3px) rotate(-1deg); background: #fff5d6; box-shadow: 0 13px 30px #523d5430; }
.surprise-button:active { transform: translateY(0) scale(.98); }
.surprise-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: #ff6391; font-size: 1.1rem; transition: transform .4s ease; }
.surprise-button:hover .surprise-icon { transform: rotate(140deg); }
.surprise-arrow { color: #f2796d; font-size: 1rem; }
.scene-counter { position: absolute; z-index: 2; right: 57px; bottom: 119px; color: #fffdf0d9; font-family: Georgia, serif; font-size: .56rem; font-weight: 700; letter-spacing: .17em; text-shadow: 0 1px 8px #603e5820; }
.scene-topline, .scene-side-label, .scene-counter { opacity: .7; text-shadow: none; font-weight: 400; }
.scene-kicker { opacity: .85; font-weight: 500; letter-spacing: .18em; text-shadow: none; }
.scene-copy h1 { text-shadow: 0 2px 14px #fff7e124; }
.toast { position: fixed; z-index: 10; right: 20px; bottom: 20px; max-width: min(420px, calc(100vw - 40px)); margin: 0; padding: 12px 16px; border: 1px solid #ffffffab; border-radius: 12px; color: #393148; background: #fffdf5; box-shadow: 0 10px 34px #34294124; font-size: .82rem; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.favorites-dialog, .share-dialog { width: min(560px, calc(100% - 28px)); max-width: none; max-height: min(78vh, 720px); overflow-y: auto; padding: 22px; border: 1px solid #f1e7e2; border-radius: 18px; color: var(--ink); background: #fffaf7; box-shadow: 0 24px 80px #34294138; }
.favorites-dialog::backdrop, .share-dialog::backdrop { background: #29223970; backdrop-filter: blur(4px); }
#favorites-dialog > .dialog-header, #sent-dialog > .dialog-header { position: sticky; top: -22px; z-index: 2; margin: -22px -22px 18px; padding: 18px 22px 12px; border-bottom: 1px solid #e9dfd1; background: #fffaf7; }
#sent-dialog > .dialog-header { background: #fffcf6; }
#favorites-dialog > .dialog-header .dialog-close { width: 44px; height: 44px; flex: 0 0 44px; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 18px; }
.dialog-kicker { margin: 0 0 6px; color: #bd7d67; font-size: .56rem; font-weight: 800; letter-spacing: .15em; }
.dialog-header h2 { margin: 0; font-size: 1.25rem; }
.dialog-close { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #eee2e1; border-radius: 50%; color: #6a6071; background: #fff; cursor: pointer; font-size: 1.25rem; }
.favorites-empty { padding: 24px 8px; color: #82798a; font-size: .82rem; text-align: center; }
.favorites-tools { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #eee5e5; }
.favorites-tools[hidden] { display: none; }
.dialog-tool { min-height: 38px; padding: 0 13px; border: 1px solid #eadfe2; border-radius: 9px; color: #765b70; background: #fff; cursor: pointer; font-size: .7rem; font-weight: 750; }
.dialog-tool:hover { background: #fff3f6; }
.dialog-tool:disabled { cursor: wait; opacity: .6; }
.dialog-tool-danger { color: #ad5f68; }
.storage-disclaimer { margin: 14px 0 0; color: #948b96; font-size: .64rem; line-height: 1.6; }
.favorites-list { display: grid; gap: 9px; }
.sent-dialog { width: min(720px, calc(100% - 24px)); color: #655749; background: #fffcf6; }
.sent-dialog h2 { font-family: "Songti SC", "STSong", serif; font-weight: 500; }
.sent-list { display: grid; gap: 10px; }
.sent-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px; border: 1px solid #e9dfd1; border-radius: 10px; background: #fffaf3; }
.sent-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-width: 0; }
.sent-content > .sent-note, .sent-content > .sent-meta:nth-child(2), .sent-content > .sent-meta:nth-child(3) { grid-column: 1 / -1; }
.sent-content > .sent-meta { margin: 1px 0; line-height: 1.5; }
.sent-content > .sent-meta:nth-child(4) { margin-top: 4px; }
.sent-dialog .sent-delete { min-width: 44px; min-height: 44px; margin: -3px -6px -7px 0; padding: 0 6px; border-color: transparent; color: #9b887b; background: transparent; font-size: .65rem; font-weight: 400; }
.sent-dialog .sent-delete:hover { color: #a45e5e; background: #f1e5db; }
.sent-dialog .sent-delete:disabled { opacity: .5; }
.sent-preview { display: block; min-height: 100px; padding: 0; border: 0; color: #857565; background: transparent; cursor: zoom-in; font-size: .7rem; }
.sent-preview img { display: block; width: 100%; height: auto; border-radius: 5px; }
.sent-preview:disabled { cursor: wait; }
.sent-note { margin: 0 0 7px; font-size: .82rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.sent-meta { margin: 5px 0; color: #958675; font-size: .65rem; line-height: 1.7; overflow-wrap: anywhere; }
.sent-status { color: #857565; font-size: .78rem; line-height: 1.7; }
.sent-status:empty { display: none; }
.sent-thanks-notice { margin: 8px 0 12px; color: #97816a; font-family: "Songti SC", "STSong", serif; font-size: .76rem; line-height: 1.7; }
.sent-note.has-new-thanks::before { display: inline-block; width: 6px; height: 6px; margin: 0 7px 2px 0; border-radius: 50%; background: #d4b180; box-shadow: 0 0 7px #d4b17b80; content: ""; }
.sent-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.sent-dialog .dialog-close { width: 44px; height: 44px; flex: 0 0 44px; }
.sent-dialog .dialog-tool { min-height: 44px; }
@media (max-width: 390px) {
    .topline-actions { gap: 5px; }
    .topline-actions .topline-button { padding-inline: 8px; font-size: .65rem; }
    .sent-item { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 10px; }
    .sent-dialog .favorites-tools { flex-wrap: wrap; }
}
.favorite-item { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 8px; }
.favorite-open { display: flex; min-height: 68px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; padding: 10px 14px; border: 1px solid #fff; border-radius: 10px; color: #383148; box-shadow: inset 0 0 0 1px #ffffff77; cursor: pointer; text-align: left; }
.favorite-open span { font-size: .9rem; font-weight: 800; }
.favorite-open small { font-family: Georgia, serif; font-size: .53rem; font-weight: 700; letter-spacing: .1em; }
.favorite-remove { border: 1px solid #eee2e1; border-radius: 10px; color: #a96570; background: #fff; cursor: pointer; font-size: 1.2rem; }
.favorite-remove:hover { background: #fff0f4; }
.share-preview { margin: 0 0 16px; text-align: center; }
.share-preview img { display: block; width: min(100%, 240px); height: auto; margin: 0 auto; border-radius: 10px; box-shadow: 0 4px 14px #75634e14; }
.share-preview img[hidden] { display: none; }
.preview-enlarge { display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: zoom-in; }
.preview-enlarge:disabled { cursor: wait; }
.postcard-viewer { width: min(960px, calc(100% - 16px)); max-width: none; max-height: calc(100dvh - 16px); padding: 0 12px 12px; overflow: auto; border: 1px solid #e7ded1; border-radius: 12px; color: #75614e; background: #fffcf6; }
.postcard-viewer::backdrop { background: #3d352db3; }
.postcard-viewer-toolbar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; background: #fffcf6; font-size: .75rem; }
.postcard-viewer .dialog-close { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border-color: transparent; color: #75614e; background: #f3ede4; }
.postcard-viewer > img { display: block; width: 100%; height: auto; }
.mail-public-notice { grid-area: notice; margin: 0; color: #786956; font-size: .65rem; line-height: 1.6; }
.mail-dialog { max-height: calc(100dvh - 24px); color: #655749; background: #fffcf6; }
.mail-dialog h2 { margin: 0; font-family: "Songti SC", "STSong", serif; font-size: 1.1rem; font-weight: 500; }
.scene-letter { position: absolute; z-index: 3; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; touch-action: pan-y; }
.scene-letter[hidden] { display: none; }
#scene-letter-hint { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: .04em; }
.scene-letter:focus-visible { outline: 2px solid #fff4c9; outline-offset: 3px; }
.letter-object { transition: filter .3s ease; }
.letter-object-active { filter: drop-shadow(0 0 3px #fff5cd) drop-shadow(0 0 7px #fff0ad); }
@media (any-pointer: coarse) {
    .letter-object { animation: letter-glimmer 8s ease-in-out infinite; }
    .letter-object-active { animation: none; }
}
@keyframes letter-glimmer {
    0%, 18%, 100% { filter: none; }
    7%, 11% { filter: drop-shadow(0 0 3px #fff5cd) drop-shadow(0 0 7px #fff0ad); }
}
@media (prefers-reduced-motion: reduce) and (any-pointer: coarse) {
    .letter-object { animation: none; filter: drop-shadow(0 0 3px #fff5cd); }
}
.mail-envelope { position: relative; width: 180px; height: 110px; margin: 36px auto; border: 1px solid #d7c7b1; border-radius: 4px; background: linear-gradient(32deg, #e9ddcb 49%, transparent 50%), linear-gradient(-32deg, #eee3d4 49%, #f7efe3 50%); perspective: 600px; }
.mail-envelope::before { position: absolute; inset: 0; height: 65%; background: #e0cfb6; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; content: ""; }
.mail-envelope span { display: none; }
.mail-opening .mail-envelope::before { animation: unseal-flap .4s ease forwards; }
@keyframes unseal-flap { from { transform: rotateX(0); } to { transform: rotateX(165deg); } }
.mail-sending .share-preview { filter: drop-shadow(0 0 12px #bda88a33); }
.mail-rules { margin-top: 12px; color: #8b7b69; font-size: .65rem; line-height: 1.6; }
.mail-rules summary { cursor: pointer; }
.mail-actions .dialog-tool { color: #75614e; background: #f3ede4; border-color: #e5dcd0; }
.mail-actions .dialog-tool:hover { background: #eae0d3; }
.mail-actions .dialog-tool:disabled { cursor: default; opacity: .65; }
#received-thanks-count { margin: 7px 0 6px; font-size: .65rem; line-height: 1.4; text-align: center; }
.mail-dialog .dialog-header { margin-bottom: 10px; }
.mail-dialog .dialog-close { width: 44px; height: 44px; flex: 0 0 44px; }
.mail-dialog [hidden] { display: none; }
#mail-status { font-size: .8rem; line-height: 1.7; }
#received-letter { margin: 0; }
#received-letter-image { display: block; width: auto; max-width: 100%; max-height: min(540px, max(90px, calc(100dvh - 240px))); height: auto; margin: auto; }
#received-letter figcaption { color: #75614e; font-size: .8rem; line-height: 1.8; white-space: pre-wrap; }
.mail-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mail-actions .dialog-tool { min-height: 44px; padding-inline: 12px; font-weight: 500; }
.share-preview figcaption { margin-top: 9px; color: #857768; font-size: .72rem; }
.share-options { display: grid; gap: 8px; }
.share-field-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share-field-heading label, .share-field-label { color: #766557; font-size: .78rem; font-weight: 500; }
.share-sender-row { display: flex; align-items: center; gap: 16px; }
.share-field-label { flex: 0 0 auto; }
.share-sender { width: 100%; min-width: 0; min-height: 40px; padding: 8px 2px; border: 0; border-bottom: 1px solid #e5dcd3; border-radius: 0; color: var(--ink); background: transparent; font: inherit; font-size: .78rem; }
#custom-share-note { width: 100%; min-height: 82px; resize: vertical; padding: 12px; border: 1px solid #e5dcd3; border-radius: 6px; color: var(--ink); background: #fffcf8; font: inherit; font-size: .78rem; line-height: 1.7; }
.share-sender:focus-visible, #custom-share-note:focus-visible { outline: 2px solid #ab8c71; outline-offset: 3px; }
.share-note-count { margin: -3px 2px 0; color: #938575; font-size: .62rem; text-align: right; }
.share-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 17px; padding-top: 14px; border-top: 1px solid #eee5e5; }
.share-dialog .dialog-tool { border-color: #e5dcd0; color: #75614e; background: #f3ede4; font-weight: 500; transition: background .18s ease, color .18s ease; }
.share-dialog .dialog-tool:hover { background: #eae0d3; }
.share-dialog .dialog-tool:focus-visible { outline: 2px solid #ab8c71; outline-offset: 3px; }
.share-dialog #regenerate-note { border-color: transparent; color: #806d59; background: transparent; }
.share-dialog #regenerate-note:hover { color: #594735; background: #f3ede4; }
.share-dialog .share-submit { border-color: #d3c3af; color: #594735; background: #e2d5c3; }
.share-dialog .share-submit:hover { background: #d6c6b1; }
.share-submit:disabled { cursor: wait; opacity: .6; }
.share-dialog { width: min(860px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 20px; border-color: #e7ded1; border-radius: 16px; color: #655749; background: #fffcf6; box-shadow: 0 16px 60px #58463024; }
.share-dialog::backdrop { background: #3d352d66; }
#share-form { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "header header" "preview fields" "preview actions" "notice notice" "footer footer"; gap: 16px 24px; }
.share-dialog .dialog-header h2 { font-family: "Songti SC", "STSong", serif; font-weight: 500; letter-spacing: .04em; }
.share-dialog .share-sender, .share-dialog #custom-share-note { color: #655749; }
.share-dialog input::placeholder, .share-dialog textarea::placeholder { color: #998b7b; }
.share-dialog .dialog-header { grid-area: header; margin: 0; }
.share-dialog .dialog-close { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 1px solid transparent; color: #948577; background: #efe8de66; transition: color .18s ease, background .18s ease, border-color .18s ease; }
.share-dialog .dialog-close:hover { border-color: #e5dcd0; color: #65574a; background: #efe8de; }
.share-dialog .dialog-close:active { background: #e6dccf; }
.share-dialog .dialog-close:focus-visible { outline: 2px solid #ab8c71; outline-offset: 3px; }
.share-preview { grid-area: preview; align-self: center; min-width: 0; margin: 0; }
.share-preview img { width: auto; max-width: 100%; max-height: min(460px, calc(100dvh - 180px)); object-fit: contain; border-radius: 6px; }
.share-options { grid-area: fields; align-self: center; min-width: 0; }
.share-dialog-actions { grid-area: actions; align-self: end; gap: 6px; margin: 0; padding-top: 12px; border-color: #e9e1d6; }
.share-dialog > form > .storage-disclaimer { grid-area: footer; margin: 0; color: #857768; text-align: center; }
@media (max-width: 599px) {
    .share-dialog { padding: 14px; }
    #share-form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "preview" "fields" "actions" "notice" "footer"; gap: 10px; }
    .share-dialog .dialog-kicker { display: none; }
    .share-dialog .dialog-header h2 { font-size: 1.05rem; }
    .share-preview img { max-height: clamp(50px, calc(100dvh - 535px), 280px); }
    .share-preview figcaption { margin-top: 5px; font-size: .65rem; }
    .share-options { gap: 5px; }
    #custom-share-note { min-height: 70px; height: 70px; padding: 8px 10px; font-size: 16px; line-height: 1.5; }
    .share-sender { font-size: 16px; }
    .share-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; padding-top: 8px; }
    .share-submit { grid-column: 1 / -1; }
    .share-dialog > form > .storage-disclaimer { font-size: .6rem; line-height: 1.4; }
}
@media (min-width: 600px) and (max-height: 540px) {
    .share-dialog { padding: 12px 16px; }
    #share-form { gap: 8px 20px; }
    .share-dialog .dialog-kicker { display: none; }
    .share-dialog .dialog-header h2 { font-size: 1.05rem; }
    .share-preview img { max-height: calc(100dvh - 205px); }
    .share-options { gap: 5px; }
    #custom-share-note { min-height: 64px; height: 64px; padding-block: 8px; }
    .share-dialog-actions { padding-top: 8px; }
}
.scene-arriving .scene-copy { animation: copy-arrive .65s cubic-bezier(.2,.75,.3,1) both; }
.scene-arriving .scene-art { animation: art-arrive .8s ease-out both; }
.scene-arriving .scene-art svg { animation: art-shape-arrive .8s ease-out both; }
@keyframes copy-arrive { from { opacity: 0; transform: translateY(15px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes art-arrive { from { opacity: .65; } to { opacity: 1; } }
@keyframes art-shape-arrive { from { transform: scale(1.035); } to { transform: scale(1); } }
.bottomline { min-height: 54px; flex: 0 0 auto; color: #827b87; font-size: .67rem; }
.storage-note { display: inline-block; margin-left: 10px; color: #aaa0a8; font-size: .58rem; }
.bottomline-aside { color: #aaa0a1; font-family: Georgia, serif; font-size: .51rem; font-weight: 700; letter-spacing: .17em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
@media (max-width: 700px) {
    .topline { height: 66px; }
    .topline-note, .keyboard-hint { display: none; }
    .topline-actions { margin-left: auto; }
    .topline-actions { gap: 6px; }
    .wordmark { gap: 5px; letter-spacing: .04em; }
    .wonder { min-height: 0; padding: 4px 13px 14px; }
    .scene-shell { min-height: calc(100dvh - 126px); border-radius: 17px; }
    .scene-shell[data-style="sticker"] { border-radius: 28px; }
    .scene-shell[data-style="sticker"]::before { inset: 10px; border-radius: 21px; }
    .scene-shell[data-style="cutout"] { border-radius: 17px 17px 17px 4px; }
    .scene-shell::before { inset: 9px; border-radius: 12px; }
    .scene-topline { top: 27px; right: 28px; left: 28px; font-size: .52rem; }
    .scene-copy { width: 90%; margin: auto 0; padding: 110px 0 130px 28px; }
    .scene-kicker { margin-bottom: 17px; font-size: .52rem; }
    .scene-copy h1 { --title-size: clamp(3.15rem, 12vw, 5.1rem); }
    .scene-caption { margin-top: 19px; padding: 9px 12px; font-size: .74rem; }
    .scene-side-label { right: 18px; font-size: .43rem; }
    .scene-controls { right: 27px; bottom: 29px; left: 27px; align-items: flex-start; flex-direction: column; gap: 11px; }
    .scene-hint { order: 0; }
    .scene-hint::after { content: " · 左右滑动"; }
    .scene-actions { order: 1; width: 100%; flex-wrap: wrap; }
    .scene-actions .surprise-button { margin-left: auto; }
    .scene-action { min-height: 42px; padding-inline: 11px; font-size: .67rem; }
    .scene-hint { font-size: .65rem; }
    .surprise-button { min-height: 48px; gap: 11px; padding-inline: 15px; font-size: .73rem; }
    .surprise-icon { width: 25px; height: 25px; }
    .scene-counter { top: 64px; right: 27px; bottom: auto; font-size: .5rem; }
    .bottomline { min-height: 42px; font-size: .61rem; }
    .bottomline-aside { font-size: .44rem; }
    .storage-note { display: none; }
}
@media (max-width: 390px) {
    .topline, .bottomline { padding-inline: 17px; }
    .scene-copy { padding-left: 23px; }
    .scene-copy h1 { --title-size: clamp(2.8rem, 12vw, 3.4rem); }
    .scene-topline { right: 23px; left: 23px; }
    .scene-controls { right: 23px; left: 23px; }
    .scene-counter { right: 23px; }
    .bottomline-aside { letter-spacing: .1em; }
    .keyboard-hint { display: none; }
    .topline-actions { margin-left: auto; }
    .scene-actions { gap: 5px; }
    .scene-action { gap: 5px; padding-inline: 9px; }
    .scene-actions .surprise-button { gap: 8px; padding-inline: 11px; font-size: .66rem; }
    .scene-actions .scene-action { font-size: .63rem; }
}
@media (max-width: 700px) {
    .scene-counter { right: auto; left: 28px; }
}
@media (max-height: 740px) {
    .topline { height: 56px; }
    .bottomline { min-height: 32px; }
    .wonder { padding: 4px 14px 10px; }
    .scene-shell { min-height: calc(100dvh - 102px); }
    .scene-copy { padding-top: 76px; padding-bottom: 120px; }
    .scene-copy h1 { --title-size: clamp(2rem, min(10vw, 9dvh), 4rem); }
    .scene-kicker { margin-bottom: 12px; }
    .scene-caption { margin-top: 14px; }
    .scene-topline { top: 24px; }
    .scene-controls { bottom: 24px; }
}
@media (max-width: 700px) and (max-height: 740px) {
    .scene-copy { padding-top: 104px; padding-bottom: 92px; }
}
@media (max-width: 390px) and (max-height: 620px) {
    .scene-copy { padding-bottom: 148px; }
    .scene-controls { bottom: 16px; }
}
@media (min-width: 600px) and (max-height: 500px) {
    .topline { height: 48px; }
    .bottomline { min-height: 26px; }
    .scene-shell { min-height: calc(100dvh - 88px); }
    .scene-copy { width: 72%; margin-left: 30px; padding: 48px 0 76px; }
    .scene-copy h1 { --title-size: clamp(1.6rem, 7dvh, 2.2rem); }
    .scene-kicker { margin-bottom: 6px; }
    .scene-caption { margin-top: 8px; padding: 6px 10px; }
    .scene-topline { top: 18px; right: 30px; left: 30px; }
    .scene-hint { display: none; }
    .scene-controls { right: 24px; bottom: 16px; left: 24px; align-items: flex-end; }
    .scene-actions { width: 100%; justify-content: flex-end; }
    .scene-counter { top: 50px; right: 30px; bottom: auto; }
    .surprise-button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .scene-art { transform: none !important; }
}