*{box-sizing:border-box}
:root{
  --bg:#f6f1fb;--surface:rgba(255,255,255,.86);--paper:#fffaf6;--ink:#352943;--muted:#82758f;
  --line:rgba(123,92,157,.18);--purple:#8062a6;--purple-deep:#60457f;--purple-soft:#eee5f6;
  --rose:#bc7d91;--rose-soft:#faedf1;--shadow:0 18px 52px rgba(61,39,83,.12)
}
html,body{min-height:100%;margin:0}
body{overflow-x:hidden;background:linear-gradient(145deg,#f7f3fc,#fdf4f8 55%,#f3ecfb);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.page-glow{position:fixed;z-index:-1;border-radius:50%;filter:blur(90px);opacity:.42;pointer-events:none}
.page-glow-a{width:420px;height:420px;top:-130px;left:-100px;background:#d7c1ef}
.page-glow-b{width:380px;height:380px;right:-90px;bottom:-120px;background:#f3c9d5}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:14px max(24px,calc((100% - 1180px)/2));border-bottom:1px solid var(--line);background:rgba(250,247,253,.82);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--purple);background:var(--purple-soft)}
.brand strong,.brand small{display:block}.brand strong{font-size:.96rem}.brand small{margin-top:2px;color:var(--muted);font-size:.68rem;font-weight:400}
.mode-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.62)}
.mode-tab{padding:8px 16px;border:0;border-radius:999px;color:var(--muted);background:transparent;font-size:.84rem;transition:.2s ease}
.mode-tab.active{color:#fff;background:linear-gradient(135deg,var(--purple),var(--purple-deep));box-shadow:0 6px 16px rgba(96,69,127,.2)}
.main-shell{width:min(1080px,calc(100% - 32px));margin:0 auto;padding:42px 0 70px}
.view{animation:view-in .28s ease}.view[hidden]{display:none}.view.active{display:block}
@keyframes view-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.section-heading h1{margin:5px 0 0;font-family:"STKaiti","KaiTi",serif;font-size:clamp(1.55rem,3vw,2.15rem);font-weight:600;letter-spacing:.02em}
.eyebrow{color:var(--purple);font-size:.67rem;letter-spacing:.18em}
.save-state,.barrage-status{color:var(--muted);font-size:.76rem}
.barrage-status{display:flex;align-items:center;gap:7px}.barrage-status i{width:8px;height:8px;border-radius:50%;background:#72c77a;box-shadow:0 0 0 5px rgba(114,199,122,.12)}
.editor-card{width:100%;max-width:100%;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);backdrop-filter:blur(16px)}
.letter-title-field{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.82)}
.letter-title-field label{color:var(--muted);font-size:.76rem;white-space:nowrap}.letter-title-field input{width:100%;padding:8px 0;border:0;outline:none;color:var(--ink);background:transparent;font-size:1rem;font-weight:600}.letter-title-field input::placeholder{color:#aaa0b1;font-weight:400}.letter-title-field span{color:#a093aa;font-size:.68rem;white-space:nowrap}
.wang-editor-shell{--w-e-toolbar-bg-color:rgba(255,255,255,.84);--w-e-toolbar-color:var(--ink);--w-e-toolbar-border-color:var(--line);--w-e-toolbar-active-bg-color:var(--purple-soft);--w-e-toolbar-active-color:var(--purple-deep);--w-e-textarea-bg-color:var(--paper);--w-e-textarea-color:#443548;position:relative;background:var(--paper)}
.letter-toolbar{position:relative;z-index:3;border-bottom:1px solid var(--line)}
.letter-toolbar .w-e-bar{flex-wrap:wrap;padding:8px 12px}.letter-toolbar .w-e-bar-item{height:34px;padding:3px}.letter-toolbar .w-e-bar-divider{margin:7px 3px}
.letter-editor-container{height:480px;overflow-y:auto;background:radial-gradient(circle at 88% 8%,rgba(188,125,145,.08),transparent 27%),var(--paper)}
.letter-editor-container .w-e-text-container{min-height:100%;background:transparent}.letter-editor-container [data-slate-editor]{min-height:100%;padding:42px clamp(24px,8vw,92px);font-family:"STKaiti","KaiTi","Microsoft YaHei",serif;font-size:1.05rem;line-height:2;overflow-wrap:anywhere;word-break:break-word}
.letter-editor-container [data-slate-editor] p{margin:0 0 1.1em}.letter-editor-container [data-slate-editor] h1,.letter-editor-container [data-slate-editor] h2,.letter-editor-container [data-slate-editor] h3{margin:1.1em 0 .65em}.letter-editor-container [data-slate-editor] blockquote{margin:1.4em 0;padding:.8em 1em;border-left:3px solid var(--rose);color:#9d6175;background:var(--rose-soft)}
.letter-editor-container [data-slate-editor] img,.letter-editor-container [data-slate-editor] video{max-width:100%;max-height:390px;border-radius:10px;object-fit:contain}.editor-load-error{padding:40px;color:#bf5e6f;text-align:center}
.editor-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:10px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.76)}
.editor-toolbar button{min-width:34px;height:34px;padding:0 10px;border:0;border-radius:8px;color:var(--ink);background:transparent;font-size:.82rem}
.editor-toolbar button:hover,.editor-toolbar button.active{color:var(--purple-deep);background:var(--purple-soft)}
.toolbar-line{width:1px;height:20px;margin:0 3px;background:var(--line)}
.font-picker{display:flex;align-items:center;gap:5px;height:34px;padding:0 8px;border-radius:8px;color:var(--muted);background:var(--purple-soft);font-size:.72rem;white-space:nowrap}.font-picker select{max-width:100px;border:0;outline:none;color:var(--purple-deep);background:transparent;font:inherit;cursor:pointer}
.letter-editor{width:100%;max-width:100%;min-height:480px;padding:50px clamp(24px,8vw,92px);outline:none;color:#443548;background:radial-gradient(circle at 88% 8%,rgba(188,125,145,.08),transparent 27%),var(--paper);font-family:"STKaiti","KaiTi","Microsoft YaHei",serif;font-size:1.05rem;line-height:2;overflow-wrap:anywhere;word-break:break-word}
.letter-editor[data-font="handwriting"]{font-family:"STKaiti","KaiTi","Microsoft YaHei",serif}.letter-editor[data-font="modern"]{font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif}.letter-editor[data-font="song"]{font-family:"Songti SC","STSong","SimSun",serif}.letter-editor[data-font="fangsong"]{font-family:"STFangsong","FangSong","FangSong_GB2312",serif}
.letter-editor:focus{box-shadow:inset 0 0 0 2px rgba(128,98,166,.12)}
.letter-editor p{margin:0 0 1.1em}.letter-editor h2{margin:1.2em 0 .7em;font-size:1.35rem;font-weight:600}.letter-editor ul{padding-left:1.5em}
.letter-editor blockquote{margin:1.5em 0;padding:.85em 1em;border-left:3px solid var(--rose);color:#9d6175;background:var(--rose-soft);font-size:1rem}
.letter-editor a{color:var(--purple-deep);text-underline-offset:3px}.letter-kicker{color:#96889d;font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:.78rem}.letter-signature{text-align:right;color:var(--rose)}
.letter-media{position:relative;margin:1.5em 0;padding:8px;border:1px solid rgba(128,98,166,.22);border-radius:14px;background:rgba(238,229,246,.48);font-family:"PingFang SC","Microsoft YaHei",sans-serif}
.letter-media img,.letter-media video{display:block;width:100%;max-height:430px;object-fit:cover;border-radius:9px}.letter-media audio{display:block;width:100%}.letter-media figcaption{padding:8px 6px 2px;color:var(--muted);font-size:.75rem;text-align:center}
.media-remove{position:absolute;top:16px;right:16px;z-index:2;padding:5px 9px;border:0;border-radius:999px;color:#fff;background:rgba(43,31,54,.72);font-size:.7rem}
.media-insert{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:14px;border-top:1px solid var(--line);background:rgba(255,255,255,.64);color:var(--muted);font-size:.78rem}
.media-insert button,.small-button{padding:7px 12px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:#fff}
.media-insert button:hover,.small-button:hover,.small-button.active{color:var(--purple-deep);border-color:rgba(128,98,166,.4);background:var(--purple-soft)}
.audio-attachments:empty{display:none}.audio-attachments{display:grid;gap:8px;padding:0 14px 14px;background:rgba(255,255,255,.64)}.audio-attachment{display:grid;grid-template-columns:minmax(180px,1fr) minmax(100px,auto) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--purple-soft)}.audio-attachment audio{width:100%;height:34px}.audio-attachment span{max-width:220px;overflow:hidden;color:var(--ink);font-size:.74rem;text-overflow:ellipsis;white-space:nowrap}.audio-attachment button{padding:5px 9px;border:1px solid var(--line);border-radius:8px;color:var(--muted);background:#fff;font-size:.7rem}
.editor-footer,.projection-controlbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;color:var(--muted);font-size:.78rem}
.primary-button,.secondary-button{padding:10px 18px;border-radius:11px;font-weight:600}
.primary-button{border:0;color:#fff;background:linear-gradient(135deg,var(--purple),var(--purple-deep));box-shadow:0 8px 20px rgba(96,69,127,.18)}
.primary-button:disabled{opacity:.55;cursor:not-allowed}.secondary-button{border:1px solid var(--line);color:var(--ink);background:rgba(255,255,255,.72)}
.compact-heading{align-items:center}.projection-options{display:flex;gap:6px}.small-button{font-size:.74rem}.small-button.active{color:#fff;border-color:var(--purple);background:var(--purple)}
.projection-frame{position:relative;display:grid;place-items:center;aspect-ratio:16/9;min-height:420px;overflow:hidden;border-radius:22px;background:radial-gradient(circle at 18% 20%,rgba(189,154,222,.27),transparent 30%),radial-gradient(circle at 82% 78%,rgba(222,148,180,.22),transparent 28%),linear-gradient(145deg,#18142d,#302445 55%,#16132a);box-shadow:var(--shadow)}
.projection-frame[data-theme="transparent"]{background-color:#d9d9d9;background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:26px 26px;background-position:0 0,0 13px,13px -13px,-13px 0}
.projection-frame[data-theme="transparent"] .stage-stars{display:none}
.stage-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,249,255,.75);box-shadow:0 0 10px rgba(255,249,255,.7)}
.stage-stars i:nth-child(1){left:8%;top:16%}.stage-stars i:nth-child(2){left:18%;bottom:14%}.stage-stars i:nth-child(3){left:42%;top:8%}.stage-stars i:nth-child(4){right:11%;top:21%}.stage-stars i:nth-child(5){right:22%;bottom:12%}.stage-stars i:nth-child(6){left:60%;top:15%}.stage-stars i:nth-child(7){right:5%;bottom:38%}
.projection-paper{position:relative;z-index:1;display:grid;grid-template-rows:auto auto 1fr auto;width:82%;height:78%;padding:clamp(20px,3.2vw,40px);overflow:hidden;border:1px solid rgba(255,255,255,.38);border-radius:20px;color:#403445;background:rgba(255,250,246,.95);box-shadow:0 22px 70px rgba(8,4,25,.36)}
.projection-paper-head,.projection-paper-foot,.projection-brand{display:flex;align-items:center}.projection-paper-head,.projection-paper-foot{justify-content:space-between;gap:14px}.projection-brand{gap:10px}.projection-brand>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#8062a6;background:#eee5f6}.projection-brand strong,.projection-brand small{display:block}.projection-brand small{margin-top:2px;color:#968a9c;font-size:.48rem;letter-spacing:.15em}.projection-paper-head>span,.projection-paper-foot{color:#93869a;font-size:.68rem}
.projection-title{margin:clamp(10px,1.8vw,20px) clamp(4px,3vw,28px) 0;color:#4b3a50;font-family:"STKaiti","KaiTi",serif;font-size:clamp(1rem,2vw,1.45rem);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.projection-content{align-self:center;max-height:100%;overflow:hidden;padding:14px clamp(4px,3vw,28px);font-family:"STKaiti","KaiTi",serif;font-size:clamp(.88rem,1.7vw,1.25rem);line-height:1.78}
#projection-frame[data-letter-font="handwriting"] .projection-title,#projection-frame[data-letter-font="handwriting"] .projection-content{font-family:"STKaiti","KaiTi","Microsoft YaHei",serif}#projection-frame[data-letter-font="modern"] .projection-title,#projection-frame[data-letter-font="modern"] .projection-content{font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif}#projection-frame[data-letter-font="song"] .projection-title,#projection-frame[data-letter-font="song"] .projection-content{font-family:"Songti SC","STSong","SimSun",serif}#projection-frame[data-letter-font="fangsong"] .projection-title,#projection-frame[data-letter-font="fangsong"] .projection-content{font-family:"STFangsong","FangSong","FangSong_GB2312",serif}
.projection-content p{margin:.55em 0}.projection-content h2{margin:.3em 0 .55em;font-size:1.25em}.projection-content blockquote{margin:1em 0;padding:.65em .85em;border-left:3px solid #bc7d91;color:#9d6175;background:#faedf1;font-size:.92em}.projection-content ul{padding-left:1.4em}.projection-content .letter-kicker{font-size:.62em}.projection-content .letter-signature{text-align:right}.projection-content .letter-media{margin:.55em 0;padding:0;border:0;background:transparent}.projection-content .letter-media img,.projection-content .letter-media video{max-height:36vh;object-fit:contain}.projection-content .letter-media figcaption{font-size:.55em}.projection-content .media-remove{display:none}
.projection-content img,.projection-content video{display:block;max-width:100%;max-height:36vh;margin:auto;border-radius:9px;object-fit:contain}.projection-content audio{width:100%}
.barrage-stage{position:relative;height:min(58vh,570px);min-height:390px;overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:24px;background:radial-gradient(circle at 18% 18%,rgba(183,145,220,.25),transparent 30%),radial-gradient(circle at 78% 74%,rgba(231,155,186,.19),transparent 30%),linear-gradient(145deg,#15122b,#2d2144 55%,#121127);box-shadow:var(--shadow);isolation:isolate}
.barrage-sky{position:absolute;inset:0;overflow:hidden}.moon{position:absolute;right:11%;top:12%;color:#fff3cf;font-size:4.5rem;filter:drop-shadow(0 0 24px rgba(255,236,190,.35));opacity:.88}.star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 9px rgba(255,255,255,.8)}.s1{left:7%;top:18%}.s2{left:31%;top:12%}.s3{left:56%;top:23%}.s4{right:20%;bottom:21%}.s5{left:17%;bottom:16%}
.cloud{position:absolute;width:36%;height:24%;border-radius:50%;filter:blur(28px);opacity:.2}.cloud-a{left:-8%;bottom:-4%;background:#b6a1d1}.cloud-b{right:-4%;bottom:2%;background:#cf9fb6}
.barrage-empty{position:absolute;inset:0;display:grid;place-items:center;color:rgba(245,235,252,.5);font-family:"KaiTi",serif;font-size:1.05rem}
.barrage-item{position:absolute;left:100%;display:flex;align-items:center;gap:8px;width:max-content;max-width:85%;padding:9px 15px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#fff8fb;background:rgba(48,35,68,.62);box-shadow:0 8px 24px rgba(5,2,18,.18);backdrop-filter:blur(9px);white-space:nowrap;will-change:transform;animation:barrage-move var(--duration) linear forwards}
.barrage-item strong{color:#e8c7d8;font-size:.72rem;font-weight:500}.barrage-item span{font-size:.91rem}.barrage-item.featured{border-color:rgba(241,202,219,.34);background:rgba(104,72,120,.68);box-shadow:0 0 22px rgba(216,166,204,.16)}
@keyframes barrage-move{from{transform:translateX(0)}to{transform:translateX(calc(-100vw - 120%))}}
.barrage-form{display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:end;gap:10px;margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.72);box-shadow:0 10px 30px rgba(61,39,83,.07)}
.barrage-form label{display:block;margin:0 0 6px 4px;color:var(--muted);font-size:.7rem}.barrage-form input{width:100%;height:42px;padding:0 13px;border:1px solid var(--line);border-radius:10px;outline:none;color:var(--ink);background:#fff}.barrage-form input:focus{border-color:rgba(128,98,166,.55);box-shadow:0 0 0 3px rgba(128,98,166,.1)}
.barrage-message-field{position:relative}.barrage-message-field input{padding-right:64px}.barrage-message-field span{position:absolute;right:11px;bottom:13px;color:#a093aa;font-size:.68rem}.barrage-form .primary-button{height:42px;white-space:nowrap}.form-note{margin:8px 4px 0;color:var(--muted);font-size:.7rem}.form-note.error{color:#bf5e6f}.form-note.success{color:#648f69}
.toast{position:fixed;left:50%;bottom:24px;z-index:99;max-width:calc(100% - 32px);padding:10px 18px;border-radius:999px;color:#fff;background:rgba(40,29,53,.92);font-size:.8rem;opacity:0;pointer-events:none;transform:translate(-50%,15px);transition:.25s ease}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.view{animation:none}.barrage-item{animation-duration:45s}}
@media (max-width:760px){
  .topbar{position:relative;align-items:flex-start;flex-direction:column;padding:14px 16px}.mode-tabs{width:100%;overflow:hidden}.mode-tab{width:33.333%;min-width:0;flex:0 0 33.333%;padding-inline:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .main-shell{width:min(100% - 22px,1080px);padding-top:28px}.section-heading{align-items:flex-start;flex-direction:column}.compact-heading{flex-direction:row;align-items:center}.save-state{display:none}
  .letter-toolbar{max-height:114px;overflow-y:auto}.letter-toolbar .w-e-bar{flex-wrap:wrap;padding:6px}.letter-editor-container{height:420px}.letter-editor-container [data-slate-editor]{padding:30px 22px}.audio-attachment{grid-template-columns:1fr auto}.audio-attachment span{grid-column:1 / -1;grid-row:1}.projection-frame{min-height:360px;aspect-ratio:auto}.projection-paper{width:92%;height:86%;padding:22px}.projection-controlbar span{display:none}
  .barrage-stage{height:52vh;min-height:370px}.barrage-form{grid-template-columns:1fr}.barrage-form .primary-button{width:100%}.moon{font-size:3.4rem}
}
@media (max-width:430px){
  .brand{margin:auto}.mode-tab{font-size:.72rem}.section-heading h1{font-size:1.45rem}.compact-heading{align-items:flex-start;flex-direction:column}.editor-toolbar{padding:8px}.editor-toolbar button{padding-inline:8px}.letter-editor{font-size:.98rem}
  .letter-title-field{grid-template-columns:1fr auto;gap:6px 10px;padding:12px 14px}.letter-title-field label{grid-column:1 / -1}.projection-frame{min-height:390px}.projection-paper{height:88%;padding:18px}.projection-title{margin-inline:0;font-size:1rem}.projection-content{font-size:.88rem;padding-inline:0}.projection-brand small{display:none}.projection-paper-foot span:first-child{display:none}
  .barrage-item{max-width:92%;padding:8px 12px}.barrage-item strong{font-size:.65rem}.barrage-item span{font-size:.82rem}
}