:root{--paper:#f7f0e6;--paper-shadow:#3f221a2e;--ink:#43322dd6;--ink-soft:#43322d94;--frame:#7b5d502e;--accent:#a9163c;--highlight:#fff7f2d1}*{box-sizing:border-box}html,body{min-height:100%}body{color:var(--ink);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;font-family:Georgia,Times New Roman,serif;overflow:hidden}#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{color:var(--ink);isolation:isolate;position:absolute;inset:0}.control-panel{z-index:3;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fff8f4b3;border:1px solid #7a594f2e;border-radius:18px;gap:10px;width:min(220px,100% - 32px);margin:0;padding:14px 14px 12px;display:grid;position:absolute;bottom:clamp(16px,2.4vw,30px);left:clamp(16px,2.2vw,28px);box-shadow:0 16px 32px #794c411a}.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{z-index:3;color:#573a3394;letter-spacing:.11em;text-transform:uppercase;align-items:center;gap:10px;font-size:11px;display:flex;position:absolute;bottom:clamp(18px,2.5vw,28px);right:clamp(16px,2.2vw,28px)}.credit-footer a{color:#743043c7;text-decoration:none;transition:color .16s,opacity .16s}.credit-footer a:hover{color:var(--accent)}.copy-fragment{white-space:pre;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)}.control-panel{width:auto;bottom:12px;left:12px;right:12px}.credit-footer{letter-spacing:.08em;justify-content:space-between;gap:8px;bottom:122px;left:12px;right:12px}.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}}