:root{color-scheme:dark;font-family:Arial,sans-serif;background:#021024;color:#c1e8ff;-webkit-text-size-adjust:100%}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 0,#5483b350,transparent 65%),#021024}button{font:inherit;cursor:pointer;touch-action:manipulation;min-height:44px}button:focus-visible{outline:3px solid #5483b3;outline-offset:4px}.selection{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(28px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}h1{font:normal clamp(36px,7vw,64px)/1.15 Georgia,serif;margin:0 0 36px;text-align:center}.options{display:grid;gap:13px;width:min(100%,360px)}.options button{padding:17px 26px;border:1px solid #7da0ca88;border-radius:100px;background:#05265988;color:#c1e8ff;transition:background .2s,transform .2s}@media(hover:hover){.options button:hover{background:#5483b355;transform:translateY(-2px)}}.painting-view{position:fixed;inset:0;background:#e8dfca;isolation:isolate;overflow:hidden}.painting-view canvas{width:calc(100% - 280px);height:100%;margin-left:280px;display:block;object-fit:contain}.painting-controls{position:absolute;z-index:5;top:calc(12px + env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));display:flex;justify-content:space-between;pointer-events:none}.painting-controls button{pointer-events:auto;width:44px;height:44px;border:1px solid #ffffff55;border-radius:50%;background:#02102488;backdrop-filter:blur(12px);color:white;font-size:24px}.save-error{position:absolute;z-index:6;bottom:calc(12px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:12px 16px;background:#021024e8;color:#fff;border-radius:14px;font-size:13px;display:flex;align-items:center;gap:12px}.save-error button{border:1px solid #7da0ca;background:none;color:#c1e8ff;border-radius:30px;padding:8px 14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dedication{position:absolute;z-index:3;left:65%;bottom:12%;transform:translateX(-50%);margin:0;padding:12px 24px;max-width:calc(100% - 32px);width:max-content;text-align:center;font:italic clamp(26px,6vw,48px)/1.2 Georgia,serif;color:#fffaf0;text-shadow:0 2px 14px #021024bb,0 1px 3px #021024;pointer-events:none;background:#02102422;border-radius:18px}.flower-note{position:absolute;left:14px;top:85px;bottom:24px;width:264px;color:#453b28;z-index:2;overflow-y:auto;padding:18px 10px;scrollbar-width:thin}.postit{position:relative;background:linear-gradient(135deg,#fff0a8,#f4da79);padding:26px 22px 20px;box-shadow:3px 12px 20px #02102425;transform:rotate(-3deg);transform-origin:50% 0;color-scheme:light}.postit:before{content:'';position:absolute;width:85px;height:28px;left:calc(50% - 42px);top:-13px;background:#fff9d9aa;transform:rotate(3deg);box-shadow:0 1px 1px #665b3033}.postit h2{font:italic 23px Georgia,serif;margin:0 0 16px}.postit p:not(.sr-only){font:17px/1.45 Georgia,serif;margin:0;min-height:120px;overflow-wrap:break-word}.postit p.personal-note{min-height:0;margin:16px 0 0;padding-top:14px;border-top:1px solid #8e783a55;font-style:italic;font-size:18px}.typing:after{content:'|';animation:note-cursor .7s steps(1) infinite;color:#8f743b}.flower-note>button{display:block;margin:22px auto 0;padding:12px 20px;background:#052659;color:#c1e8ff;border:1px solid #5483b3;border-radius:100px;font-size:14px}.stuck .postit{animation:stick-note .65s cubic-bezier(.2,.8,.3,1) both}@keyframes stick-note{0%{opacity:0;transform:translate(-20px,-50px) rotate(-14deg) scale(1.08)}100%{opacity:1;transform:rotate(-3deg)}}@keyframes note-cursor{50%{opacity:0}}
@media(max-width:700px){.painting-view{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-top:calc(66px + env(safe-area-inset-top));padding-bottom:env(safe-area-inset-bottom)}.flower-note{position:relative;left:auto;top:auto;bottom:auto;width:calc(100% - 36px);max-width:420px;max-height:none;margin:0 auto;overflow:visible;padding:17px 6px 12px;flex:0 0 auto}.postit{padding:19px 20px 17px;transform:rotate(-1deg)}.postit h2{font-size:21px;margin-bottom:12px}.postit p:not(.sr-only){font-size:16px;line-height:1.45;min-height:90px}.postit p.personal-note{min-height:0;font-size:16px;line-height:1.45;margin-top:12px;padding-top:12px}.flower-note>button{margin:17px auto 0;min-height:46px}.painting-view canvas{position:relative;flex:0 0 auto;margin:4px 0 0;width:100%;height:clamp(320px,53svh,520px)}.painting-controls{position:fixed}.dedication{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));font-size:25px;padding:10px 18px}.save-error{position:fixed}.selection h1{font-size:clamp(34px,9vw,48px)}@keyframes stick-note{0%{opacity:0;transform:translateY(-35px) rotate(-9deg)}100%{opacity:1;transform:rotate(-1deg)}}}
@media(orientation:landscape) and (max-height:500px){.selection{padding-block:18px}.selection h1{font-size:32px;margin-bottom:18px}.options{grid-template-columns:repeat(3,1fr);width:min(650px,100%);gap:10px}.options button{padding:12px}.flower-note{top:65px;bottom:10px}.painting-view canvas{height:100%}.painting-controls{top:8px}}
@media(prefers-reduced-motion:reduce){.options button{transition:none}.stuck .postit,.typing:after{animation:none}}