:root{font-family:Arial,sans-serif;color:#fff1e7;background:#080d17}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:1px solid #ffc5c3;outline-offset:6px}[hidden]{display:none!important}#world{position:fixed;inset:0;width:100%;height:100%;touch-action:none}body:after{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(#080b1425,transparent 25%,transparent 80%,#080b144f)}#home{position:fixed;left:30px;top:25px;text-decoration:none;color:#ffe9de;font-size:18px;opacity:.65;z-index:2;font-weight:bold}#opening{position:fixed;left:6vw;top:14vh;pointer-events:none;text-shadow:0 2px 30px #0008;transition:opacity 2s;z-index:2}#opening p{font-size:9px;letter-spacing:5px;color:#e1c8b5}#opening h1{font:normal clamp(42px,6vw,80px) Georgia,serif;letter-spacing:-2px;margin:17px 0 5px}#opening em{font:italic 19px Georgia,serif;color:#e1c1b4}#back{position:fixed;top:22px;left:28px;background:#15132230;border:1px solid #e9c4c82b;border-radius:50%;width:42px;height:42px;font-size:22px;backdrop-filter:blur(8px);z-index:4}#invite{position:fixed;bottom:22px;right:27px;z-index:3;border:0;background:none;font-size:13px;color:#dfc8c8;opacity:.75}#invite span{font-size:10px;letter-spacing:1px;margin-left:5px}#context{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);font-size:11px;color:#ead5ca;text-align:center;letter-spacing:.5px;text-shadow:0 1px 8px #000;pointer-events:none;z-index:2;width:min(560px,75vw);transition:opacity .5s}#caption{position:fixed;left:0;right:0;bottom:100px;text-align:center;pointer-events:none;z-index:3;text-shadow:0 2px 16px #000a}#overline{font-size:8px;letter-spacing:3px;color:#e2bea8}#title{font:normal 25px Georgia,serif;margin:10px 0 7px}#subtitle{font-size:10px;color:#d6bfb7}#choose{position:fixed;bottom:48px;left:50%;transform:translateX(-50%);z-index:4;border:1px solid #fbc6be44;background:#bc738660;border-radius:30px;padding:13px 28px;backdrop-filter:blur(10px);font-size:12px;letter-spacing:.6px}#tools{position:fixed;bottom:45px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:10px 14px;background:#2f1e273d;border:1px solid #ffe1d82d;border-radius:40px;backdrop-filter:blur(18px);z-index:4;box-shadow:0 5px 40px #170c1e22}#tools button{border:0;background:none;width:35px;height:35px;border-radius:50%;font-size:22px;color:#f9e4dd}#tools button.active{background:#ffb2c132;box-shadow:inset 0 0 0 1px #ffcbd27a}#tools i{height:22px;width:1px;background:#ffffff22;margin:0 5px}#inks{display:flex;gap:10px}#inks button{width:23px;height:23px;border:2px solid #ffffff7a;box-shadow:0 1px 7px #0002}#inks button.active{outline:2px solid #ffe9de;outline-offset:3px}#tools #weight{font-size:12px}#tools #finish{font-size:23px;background:#e5ad9240}#lettering{position:fixed;left:50%;transform:translateX(-50%);bottom:115px;display:flex;gap:10px;width:min(580px,88vw);z-index:4}#lettering input{width:50%;color:#ffe9de;border:0;border-bottom:1px solid #ffd2ca88;border-radius:0;background:#291e2833;padding:12px;backdrop-filter:blur(12px);font:italic 17px Georgia,serif;outline:none}input::placeholder{color:#dbc3bcaa}#invitation{position:fixed;bottom:53px;right:24px;width:290px;padding:16px;background:#231d2cd9;border:1px solid #e6b7c33f;border-radius:15px;z-index:6;backdrop-filter:blur(12px)}#invitation input{width:100%;padding:10px;border:1px solid #e2b9ba44;background:#100f1999;border-radius:6px;color:#edd5cc;font-size:11px}#invitation small{display:block;font-size:10px;line-height:1.7;color:#bda4b0;margin-top:8px}#toast{position:fixed;top:28px;left:50%;transform:translateX(-50%);opacity:0;transition:opacity .3s;pointer-events:none;font-size:12px;color:#ffe4d9;text-shadow:0 2px 10px #000;z-index:7}#toast.show{opacity:1}#loading{position:fixed;inset:0;background:#0d1020;display:grid;align-content:center;justify-items:center;z-index:20;transition:opacity .7s}#loading span{font-size:45px;color:#efb0bb}#loading p{font:italic 18px Georgia;color:#b9a2b2;margin-top:25px}@media(max-width:650px){#opening{left:7vw;top:13vh}#context{bottom:22px;font-size:9px;width:65vw}#invite{right:16px;bottom:18px}#invite span{display:none}#tools{bottom:52px;gap:3px;padding:8px}#tools button{width:29px;height:29px;font-size:19px}#inks{gap:7px}#inks button{width:19px;height:19px}#tools i{margin:0 3px}#tools [data-tool=text]{font-size:16px}#caption{bottom:114px}#lettering{bottom:110px}#home{left:20px;top:20px}#back{left:20px;top:18px}}

body.drawing #world{cursor:crosshair!important}

#subtitle{display:block;max-width:540px;margin:auto;font-size:12px;line-height:1.6;padding:0 20px}

/* The way back into Angie: account menu, top right (love-locks/menu.js) */
#menu{position:fixed;top:20px;right:24px;z-index:6;width:42px;height:42px;border-radius:50%;border:1px solid #e9c4c82b;background:#15132230;backdrop-filter:blur(8px);display:grid;place-items:center;color:#ffe9de;padding:0}
#menu[data-initial]:not([data-initial=""]) svg{display:none}
#menu[data-initial]:not([data-initial=""])::after{content:attr(data-initial);font:600 16px Georgia,serif}
#menu[aria-expanded=true]{background:#ffb2c12a;border-color:#ffcbd27a}
#panel{position:fixed;top:72px;right:20px;z-index:7;width:260px;padding:8px;background:#1c1826e6;border:1px solid #e6b7c33f;border-radius:16px;backdrop-filter:blur(16px);box-shadow:0 18px 50px #05030a66;display:flex;flex-direction:column;animation:ll-pop .18s ease-out}
@keyframes ll-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#panel .acct{display:flex;flex-direction:column;gap:3px;padding:12px 12px 14px;border-bottom:1px solid #ffffff14;margin-bottom:6px}
#panel .acct b{font:normal 19px Georgia,serif;color:#fff1e7}
#panel .acct small{font-size:11px;color:#bda4b0;line-height:1.5}
#acct-plan{margin-top:8px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#e9cb92}
#acct-locks{font-size:12px;color:#ead5ca}
#acct-signin{margin-top:10px;border:1px solid #fbc6be44;background:#bc738650;border-radius:30px;padding:9px 14px;font-size:12px}
#acct-signin:disabled{opacity:.6}
#panel a{display:block;padding:11px 12px;border-radius:10px;color:#f3e3dc;text-decoration:none;font-size:13px}
#panel a:hover,#panel a:focus-visible{background:#ffffff10}
#panel a[href="/"]{color:#bda4b0;font-size:12px}

/* price line under "Make this one ours" */
#choose-note{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:4;width:min(460px,86vw);text-align:center;font-size:11px;line-height:1.6;color:#d8c2ba;text-shadow:0 1px 8px #000;pointer-events:none}

/* my partner's pen on the lock I'm holding (projected from their hit point every frame) */
#pen{position:fixed;left:0;top:0;z-index:5;pointer-events:none;--hue:#5fa0ff}
#pen i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;border:2px solid var(--hue);box-shadow:0 0 0 3px #0003,0 0 18px var(--hue);background:color-mix(in srgb,var(--hue) 25%,transparent)}
#pen b{position:absolute;left:14px;top:8px;white-space:nowrap;font:600 10px Arial,sans-serif;letter-spacing:.5px;color:#fff;background:var(--hue);padding:2px 7px;border-radius:10px}
#pen b:empty{display:none}
#pen.behind{opacity:.28}

/* invitation */
#invite.together{opacity:1;color:#ffd0dc;text-shadow:0 0 14px #ff7ba388}
#invite.together span{display:inline!important}
#invitation p{margin:0 0 10px;font:normal 16px Georgia,serif;color:#fff1e7}
#invitation .row{display:flex;gap:6px}
#invitation .row input{flex:1;min-width:0}
#invitation .row button{border:1px solid #e2b9ba44;background:#bc738650;border-radius:6px;font-size:11px;padding:0 10px}
@media(max-width:650px){#menu{right:16px;top:16px;width:38px;height:38px}#panel{right:12px;top:62px;width:min(280px,calc(100vw - 24px))}#choose-note{bottom:16px;font-size:10px}#choose{bottom:44px}#invitation{right:12px;left:12px;width:auto}}

#loading small{margin-top:12px;font-size:11px;letter-spacing:1px;color:#8f7f93;min-height:14px}
#loading-retry{margin-top:18px;border:1px solid #fbc6be55;background:#bc738650;border-radius:30px;padding:11px 26px;font-size:13px}
