:root{--paper:#f7f0e6;--paper-shadow:#3f221a2e;--ink:#43322dd6;--ink-soft:#43322d94;--frame:#7b5d502e;--accent:#a9163c;--highlight:#fff7f2d1;--copy-font-family-en:Georgia, "Times New Roman", serif;--copy-font-family-zh:"Source Han Serif CN for Display", "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif}*{box-sizing:border-box}html,body{min-height:100%}body{color:var(--ink);font-family:var(--copy-font-family-en);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at top,#fff4e9f0,#0000 38%),linear-gradient(135deg,#d7b7aa 0%,#f2e5d6 32%,#f8f2eb 100%);margin:0;overflow:hidden auto}#app{min-height:100svh}.composition{min-height:100svh;padding:clamp(12px,2vw,26px)}.copy-surface{--copy-font-size:18px;--copy-line-height:1.72;--heart-center-x:50%;--heart-center-y:50%;--heart-aura-size:240px;--heart-vignette-size:720px;border:1px solid var(--frame);background:radial-gradient(circle var(--heart-aura-size) at var(--heart-center-x) var(--heart-center-y), #ffd0d56b, #ffd0d538 22%, transparent 62%), radial-gradient(circle calc(var(--heart-aura-size) * .7) at var(--heart-center-x) var(--heart-center-y), #fff7f48f, transparent 66%), radial-gradient(circle at 24% 18%, #ffffff85, transparent 24%), linear-gradient(180deg, #fff8f2e6, #f3e9dff2);border-radius:28px;min-height:calc(100svh - clamp(24px,4vw,52px));position:relative;overflow:hidden;box-shadow:0 24px 80px #6d423524,inset 0 0 0 1px #ffffff5c}.copy-surface:before{content:"";mix-blend-mode:multiply;opacity:.24;pointer-events:none;background-color:#0000;background-image:linear-gradient(90deg,#82615312 1px,#0000 1px),linear-gradient(#8261530d 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:28px 28px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:absolute;inset:0}.copy-surface:after{content:"";background:radial-gradient(circle var(--heart-vignette-size) at var(--heart-center-x) var(--heart-center-y), #f7f0e600 0 11%, #f7f0e62e 36%, #f7f0e699 74%, #f7f0e6db 100%);pointer-events:none;position:absolute;inset:0}.copy-layer{min-height:100%;color:var(--ink);isolation:isolate;pointer-events:none;position:relative}.surface-hud{left:var(--hud-left,28px);right:var(--hud-right,28px);bottom:var(--hud-bottom,24px);z-index:3;pointer-events:none;justify-content:flex-start;align-items:flex-end;gap:16px;display:flex;position:fixed}.surface-hud>*{pointer-events:auto}.pointer-guide{z-index:2;pointer-events:none;opacity:0;width:100vw;height:100vh;transition:opacity .16s;position:fixed;inset:0}.pointer-guide.is-visible{opacity:1}.pointer-guide-line{stroke:#a9163c85;stroke-width:1.5px;stroke-linecap:round;stroke-dasharray:2 10;filter:drop-shadow(0 0 8px #be4b6929)}.control-panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fff8f4b3;border:1px solid #7a594f2e;border-radius:18px;gap:0;width:clamp(220px,24vw,280px);margin:0;padding:12px 12px 10px;transition:width .22s,box-shadow .22s,background .22s;display:grid;overflow:hidden;box-shadow:0 16px 32px #794c411a}.control-panel-head{align-items:flex-start;gap:10px;display:flex}.control-panel-toggle{min-width:0;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;flex:auto;justify-content:space-between;align-items:center;gap:14px;padding:0;display:flex}.control-panel-toggle:focus-visible{outline-offset:4px;border-radius:12px;outline:2px solid #a9163c57}.control-panel-copy,.control-panel-meta{gap:2px;display:grid}.control-panel-kicker{letter-spacing:.18em;text-transform:uppercase;color:#573a338c;font-size:10px}.control-panel-title{color:#4e352fe0;letter-spacing:.08em;text-transform:uppercase;font-size:15px}.control-panel-meta{justify-items:end}.language-toggle{background:linear-gradient(#fffc,#f7eae2d6),#ffffffb8;border:1px solid #7a594f24;border-radius:999px;flex:none;align-self:center;padding:3px;display:inline-flex;box-shadow:inset 0 1px 2px #7a594f14,0 10px 18px #794c4114}.language-button{color:#573a339e;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;background:0 0;border:0;border-radius:999px;min-width:42px;padding:5px 10px;font-size:10px;font-weight:600;transition:background .16s,color .16s,box-shadow .16s}.language-button:focus-visible{outline-offset:2px;outline:2px solid #a9163c57}.language-button.is-active{color:#fff8f4f5;background:linear-gradient(#ffc7d2f5,#d64970db);box-shadow:0 6px 14px #871b352e,inset 0 0 0 1px #fff7f238}.control-panel-icon{background:linear-gradient(#ffffffc7,#f7eae2d6),#ffffffb3;border:1px solid #7a594f24;border-radius:999px;width:20px;height:20px;position:relative;box-shadow:inset 0 1px 2px #7a594f14,0 6px 14px #794c411a}.control-panel-icon:before,.control-panel-icon:after{content:"";background:#743043bd;border-radius:999px;width:8px;height:1.5px;transition:transform .2s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.control-panel-icon:after{transform:translate(-50%,-50%)rotate(90deg)}.control-panel-body{opacity:1;border-top:1px solid #7a594f1f;gap:10px;max-height:280px;margin-top:12px;padding-top:12px;transition:max-height .24s,margin-top .24s,padding-top .24s,opacity .18s,transform .24s,border-color .18s;display:grid;overflow:hidden;transform:translateY(0)}.control-panel.is-collapsed{width:fit-content;box-shadow:0 12px 24px #794c4114}.control-panel:not(.is-collapsed) .control-panel-icon:after{opacity:0;transform:translate(-50%,-50%)rotate(90deg)scaleY(0)}.control-panel.is-collapsed .control-panel-icon:after{opacity:1;transform:translate(-50%,-50%)rotate(90deg)scaleY(1)}.control-panel.is-collapsed .control-panel-body{opacity:0;border-top-color:#0000;max-height:0;margin-top:0;padding-top:0;transform:translateY(-6px)}.control-row{gap:8px;display:grid}.control-toggle{justify-content:space-between;align-items:center;gap:14px;padding-bottom:4px;display:flex}.control-copy{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.toggle-shell{flex:none;display:inline-grid;position:relative}.toggle-input{opacity:0;margin:0;position:absolute;inset:0}.toggle-track{background:linear-gradient(#ffffffd1,#f7eae2e6),#fffc;border:1px solid #7a594f24;border-radius:999px;width:44px;height:24px;transition:background .18s,border-color .18s,box-shadow .18s;display:block;position:relative;box-shadow:inset 0 1px 4px #7a594f1f,0 8px 18px #794c4114}.toggle-thumb{background:linear-gradient(#fff7f4,#f3d8cf);border-radius:50%;width:18px;height:18px;transition:transform .18s,background .18s,box-shadow .18s;position:absolute;top:2px;left:2px;box-shadow:0 2px 8px #794c412e,inset 0 0 0 1px #7a594f14}.toggle-input:checked+.toggle-track{background:linear-gradient(#ffb9c7f0,#d74870eb),#d44970e6;border-color:#bf254e38;box-shadow:inset 0 1px 5px #921a362e,0 10px 20px #871b3524}.toggle-input:checked+.toggle-track .toggle-thumb{background:linear-gradient(#fff8f6,#ffe3ea);transform:translate(20px);box-shadow:0 4px 12px #791e3738,inset 0 0 0 1px #7a594f14}.toggle-input:focus-visible+.toggle-track{outline-offset:3px;outline:2px solid #a9163c66}.control-name,.control-value{letter-spacing:.16em;text-transform:uppercase;font-size:11px}.control-name{color:#573a33cc}.control-value{color:var(--accent)}.control-row input[type=range]{appearance:none;cursor:pointer;background:linear-gradient(90deg,#d449702e,#d4497085),#ffffffad;border-radius:999px;width:100%;height:14px;margin:0;box-shadow:inset 0 0 0 1px #7a594f1f,inset 0 1px 4px #7a594f1f}.control-row input[type=range]::-webkit-slider-thumb{appearance:none;background:linear-gradient(#ffb2bf,#bf254e);border:2px solid #fff8f4f2;border-radius:50%;width:18px;height:18px;box-shadow:0 4px 12px #871b3547}.control-row input[type=range]::-moz-range-thumb{background:linear-gradient(#ffb2bf,#bf254e);border:2px solid #fff8f4f2;border-radius:50%;width:18px;height:18px;box-shadow:0 4px 12px #871b3547}.control-row input[type=range]::-moz-range-track{background:linear-gradient(90deg,#d449702e,#d4497085),#ffffffad;border-radius:999px;height:14px;box-shadow:inset 0 0 0 1px #7a594f1f,inset 0 1px 4px #7a594f1f}.credit-footer{color:#573a3385;letter-spacing:.08em;text-transform:uppercase;text-align:left;border-top:1px solid #7a594f1a;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:4px 10px;margin-top:2px;padding-top:8px;font-size:9px;display:flex}.credit-footer a{color:#743043ad;text-decoration:none;transition:color .16s,opacity .16s}.credit-footer a:hover{color:var(--accent)}.copy-fragment{white-space:pre;font-family:var(--copy-font-family-active,var(--copy-font-family-en));font-size:var(--copy-font-size);line-height:calc(var(--copy-font-size) * var(--copy-line-height));letter-spacing:.012em;color:var(--ink);opacity:.82;display:block;position:absolute;top:0;left:0}.heart-shell{--heart-footprint-size:116px;z-index:2;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;will-change:transform;outline:none;place-items:center;display:grid;position:absolute;top:0;left:0;overflow:visible}.heart-shell:before{content:"";filter:blur(14px);pointer-events:none;background:radial-gradient(circle,#ffbfc6c7,#ffbfc62e 56%,#0000 74%);border-radius:999px;position:absolute;inset:6%}.heart-shell:focus-visible{outline-offset:6px;border-radius:24px;outline:2px solid #a9163cb3}.heart-pulse-layer{width:var(--heart-footprint-size);height:var(--heart-footprint-size);pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.heart-pulse-wave{opacity:0;transform-origin:50%;width:100%;height:100%;animation:.56s cubic-bezier(.24,.74,.26,1) forwards heart-pulse-wave;position:absolute;inset:0;overflow:visible}.heart-pulse-wave path{fill:none;stroke:#ec6080c7;stroke-width:1.65px;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px #e9769138)}.copy-surface.is-dragging .heart-shell{cursor:grabbing}.heart-graphic{filter:drop-shadow(0 18px 18px #8e142b2e);transform-origin:50%;width:100%;height:100%;overflow:visible}.heart-shell.is-pulsing .heart-graphic{animation:.38s cubic-bezier(.22,.8,.26,1) heart-shell-pulse}.heart-outline{fill:none;stroke:#7b102a4d;stroke-width:4.5px}.heart-shape{fill:url(#heart-fill)}.heart-shine{fill:#ffffff3d;transform-origin:50%;transform:translate(-4px,-7px)scale(.88)}@keyframes heart-shell-pulse{0%{transform:scale(1)}26%{transform:scale(.92)}58%{transform:scale(1.11)}to{transform:scale(1)}}@keyframes heart-pulse-wave{0%{opacity:0;transform:scale(.74)}22%{opacity:.78}to{opacity:0;transform:scale(1)}}@media (width<=720px){.composition{padding:10px}.copy-surface{border-radius:22px;min-height:calc(100svh - 20px)}.surface-hud{justify-content:flex-start;align-items:stretch;bottom:12px;left:12px;right:12px}.control-panel{border-radius:20px;width:100%;max-width:none;padding:12px}.control-panel.is-collapsed{width:fit-content;min-width:156px;max-width:calc(100% - 84px)}.control-panel-title{font-size:14px}.control-panel-head{gap:8px}.language-button{letter-spacing:.1em;min-width:38px;padding:5px 8px}.credit-footer{letter-spacing:.07em;gap:4px 8px;font-size:8px}.copy-surface:after{background:radial-gradient(circle var(--heart-vignette-size) at var(--heart-center-x) var(--heart-center-y), #f7f0e600 0 9%, #f7f0e629 34%, #f7f0e68f 72%, #f7f0e6c7 100%), linear-gradient(180deg, #f7f0e605, #f7f0e61a 14%, #f7f0e66b 100%)}.copy-surface{--heart-vignette-size:560px;--heart-aura-size:180px}}