.test-banner{background:#203a3b;color:#fff;text-align:center;padding:10px 16px;font-size:12px;letter-spacing:.08em}header{gap:18px}header span{flex:1}.new-circle{font-size:14px;color:#203a3b}footer{padding:35px;text-align:center}td a{display:block;margin-top:8px;font-size:12px}header img{width:58px;height:58px}header{max-width:1100px;margin:auto}body{background:#fbf6ef}.hero h1{letter-spacing:-.035em}#party-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}.party-controls{position:fixed;bottom:18px;right:18px;display:flex;gap:8px;z-index:6}.party-controls button{font-size:12px;min-height:36px;padding:9px 14px;box-shadow:0 4px 20px #0002}.party-controls [hidden]{display:none}.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}body[data-occasion=welcome] main{max-width:1280px;padding-top:12px}.welcome{isolation:isolate;position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;min-height:570px;background:#122c33;border-radius:32px;color:#fff5df;padding:68px 54px;box-shadow:0 22px 65px #163b391a}.welcome-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 85% 20%,#59627766,transparent 45%),radial-gradient(ellipse at 55% 100%,#22776b66,transparent 50%),radial-gradient(circle at 8% 4%,#eed09222,transparent 30%)}.welcome .eyebrow{color:#eed399;font-size:11px;letter-spacing:2.4px}.welcome h1{font-size:clamp(40px,4.8vw,66px);line-height:1.06;letter-spacing:-.035em;margin:28px 0 24px}.welcome h1 em{color:#f1cd89;font-weight:normal}.welcome-copy{position:relative;z-index:2}.welcome p{max-width:470px;color:#dce7df;font-size:17px;line-height:1.75}.welcome-cta{background:#f1cd89;color:#173438;border:0;border-radius:50px;gap:26px;margin-top:18px;padding:17px 25px;box-shadow:0 0 35px #f1cd891b}.welcome-caption{display:block;font-size:12px;color:#b8cbc4;margin-top:18px;letter-spacing:.06em}.wish-orbit{position:relative;min-height:420px;align-self:center}.orbit-ring{position:absolute;width:365px;height:365px;border:1px solid #edd39d30;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.orbit-ring.inner{width:275px;height:275px;border-style:dashed;opacity:.7}.orbit-heart{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:168px;height:168px;border-radius:50%;background:radial-gradient(circle at 30% 20%,#355a55,#1b3f40);box-shadow:0 0 65px #f1cd8933,inset 0 0 0 1px #f1cd8966;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:76px;color:#f1cd89}.orbit-heart small{font-family:Arial;font-size:9px;line-height:1.6;text-align:center;letter-spacing:1.6px;color:#ffefd3;margin-top:-8px}.floating-wish{position:absolute;padding:18px 20px;width:220px;border-radius:18px;box-shadow:0 18px 40px #0003;transform:rotate(-7deg);color:#23423c;background:#f7e3bb;z-index:2}.floating-wish span{display:block;font-size:23px;margin-bottom:9px}.floating-wish strong{font-family:Georgia;font-weight:normal;font-size:20px;line-height:1.2;display:block}.floating-wish small{font-size:10px;display:block;margin-top:12px;opacity:.7}.wish-one{top:8px;left:14px}.wish-two{top:147px;right:-10px;background:#d7e8dd;transform:rotate(8deg);width:215px}.wish-three{bottom:-10px;left:8px;background:#e7dcef;transform:rotate(-4deg)}.orbit-star{position:absolute;color:#f1cd89;font-size:30px}.s1{right:65px;top:38px}.s2{left:2px;top:215px}.s3{right:105px;bottom:0;font-size:20px}.welcome-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:38px 24px 14px}.welcome-steps>div{position:relative;padding-left:40px}.welcome-steps span{position:absolute;left:0;top:4px;font-size:12px;color:#9b7b45}.welcome-steps h2{font-size:23px;margin:0 0 9px}.welcome-steps p{font-size:14px;margin:0;color:#58716a}#create-circle{scroll-margin-top:25px;max-width:900px;margin:34px auto 0}#create-circle h2{font-size:38px;margin-top:0}.occasion-preview{background:#f4e8cf;border:1px solid #dec696;border-radius:14px;padding:14px 18px;font-size:14px}.occasion-decoration{display:flex;justify-content:center;gap:20px;font-size:32px;margin-bottom:18px}body[data-occasion=christmas]{background:#f2f3e9}body[data-occasion=valentine],body[data-occasion=love],body[data-occasion=mothersday]{background:#faf0f4}body[data-occasion=halloween]{background:#f3edf9}body[data-occasion=kingsday]{background:#fff1e4}body[data-occasion=easter]{background:#f4f4e8}
@media(max-width:900px){.welcome{padding:44px 30px;grid-template-columns:1fr 1fr}.floating-wish{width:170px;padding:15px}.wish-two{width:175px;right:-12px}.floating-wish strong{font-size:17px}.orbit-ring{width:280px;height:280px}.orbit-ring.inner{width:230px;height:230px}.welcome-steps{gap:18px;padding-left:4px;padding-right:4px}}
@media(max-width:650px){body[data-occasion=welcome] main{padding:8px 14px 65px}.welcome{grid-template-columns:1fr;padding:35px 25px;min-height:0;border-radius:24px}.welcome h1{font-size:43px;margin-top:24px}.welcome p{font-size:15px}.welcome-caption{font-size:11px}.wish-orbit{min-height:350px;margin-top:22px;width:100%;max-width:370px;justify-self:center}.wish-one{left:0;top:12px}.wish-two{right:0;top:130px}.wish-three{left:5px;bottom:0}.orbit-heart{width:140px;height:140px}.welcome-steps{grid-template-columns:1fr;gap:23px;padding:30px 12px 4px}.welcome-steps h2{font-size:23px}#create-circle{padding:22px}#create-circle h2{font-size:30px}.party-controls{bottom:10px;right:10px}header{padding:16px 20px;gap:12px}header span{font-size:21px}header img{width:44px;height:44px}.new-circle{font-size:12px}}
/* Consistent form controls, including Safari's native select and date input. */
.panel .fields{gap:20px 24px;align-items:start}.panel label{font-size:14px;font-weight:600;line-height:1.5;color:#294a43}.panel input:not([type=checkbox]),.panel select{box-sizing:border-box;width:100%;min-width:0;height:54px;min-height:54px;margin:8px 0 0;padding:0 16px;border:1px solid #c5d2cb;border-radius:12px;background-color:#fff;color:#23473e;font-size:16px;font-weight:400;line-height:normal;box-shadow:0 2px 4px #163b3903;transition:border-color .15s,box-shadow .15s}.panel select{appearance:none;-webkit-appearance:none;padding-right:46px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%23294a43' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}.panel input[type=date]{appearance:none;-webkit-appearance:none;display:block}.panel input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}.panel input[type=date]::-webkit-datetime-edit{padding:0}.panel textarea{width:100%;margin:8px 0 0;min-height:125px;padding:15px 16px;border:1px solid #c5d2cb;border-radius:12px;background:#fff;font-size:16px;font-weight:400;line-height:1.6;color:#23473e;resize:vertical;box-shadow:0 2px 4px #163b3903}.panel input:focus-visible,.panel select:focus-visible,.panel textarea:focus-visible{outline:0;border-color:#3e7a66;box-shadow:0 0 0 4px #3e7a6618}.panel input:hover,.panel select:hover,.panel textarea:hover{border-color:#93b1a4}#create-circle{background:#fffefa;border:1px solid #e1e5dc;border-radius:28px;padding:36px 40px;box-shadow:0 16px 45px #163b3908}#create-circle .fields{margin:24px 0}#create-circle h2{font-size:36px;margin-bottom:12px}#create-circle .notice{font-size:13px;line-height:1.6;padding:12px 16px;background:#eef4f0;color:#4f6c61;border-radius:12px}#create-circle .occasion-preview{margin:12px 0;padding:13px 16px;font-size:13px;background:#faf3e3;border-color:#ecddbd;color:#735c34}#create-circle form>button{margin-top:24px;border:0;padding:15px 24px;min-height:52px;border-radius:12px;background:#214f43;box-shadow:0 5px 14px #214f4318}#create-circle>.secondary{margin-top:16px;border:1px solid #d0dcd4;font-size:13px;min-height:42px;padding:10px 16px}.panel form>label{display:block;margin-top:20px}.panel .fields label{margin:0}.panel .fields label:has(textarea){grid-column:1/-1}@media(max-width:650px){#create-circle{padding:26px 22px;border-radius:22px}#create-circle h2{font-size:30px}.panel .fields{grid-template-columns:1fr;gap:18px}#create-circle form>button{width:100%}.panel input:not([type=checkbox]),.panel select{height:54px;min-height:54px}}
/* A distinct dropdown affordance that keeps the native accessible selector. */
.panel select{cursor:pointer;padding-left:16px;padding-right:62px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Crect width='34' height='34' rx='9' fill='%23edf3ef'/%3E%3Cpath d='m11 14 6 6 6-6' fill='none' stroke='%23214f43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:34px 34px;background-position:right 9px center;letter-spacing:0;text-overflow:ellipsis}.panel select:hover{background-color:#fcfefc;border-color:#769c8b}.panel select:focus-visible{background-color:#fff}
/* Keep Safari's date value centred, with a visible calendar affordance. */
.panel input[type=date]{position:relative;padding:0 52px 0 16px;line-height:52px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Crect width='34' height='34' rx='9' fill='%23edf3ef'/%3E%3Crect x='9' y='10' width='16' height='15' rx='3' fill='none' stroke='%23214f43' stroke-width='1.6'/%3E%3Cpath d='M9 15h16M13 8v5M21 8v5' fill='none' stroke='%23214f43' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-size:34px 34px;background-repeat:no-repeat;background-position:right 9px center}.panel input[type=date]::-webkit-date-and-time-value{height:52px;min-height:52px;line-height:52px;display:flex;align-items:center;text-align:left}.panel input[type=date]::-webkit-datetime-edit{display:inline-flex;align-items:center;height:52px;line-height:52px;padding:0}.panel input[type=date]::-webkit-calendar-picker-indicator{position:absolute;right:9px;top:9px;width:34px;height:34px;margin:0;padding:0;opacity:0;cursor:pointer}
/* Sunshine, coral, lavender and mint; readable ink on every surface. */
body{background:#fff9f2;color:#35294e}.test-banner{background:#f8d768;color:#4a3454;letter-spacing:.035em}header .new-circle{color:#6842a6}header{flex-wrap:wrap}#circle-language{width:auto;min-width:165px;border:1px solid #dbcaf0;border-radius:14px;background:#fff;color:#493563;font:600 14px Arial;padding:12px 34px 12px 12px;cursor:pointer}header span{min-width:130px}.welcome{background:linear-gradient(125deg,#fff1bf 0%,#ffe0d7 46%,#e9ddff 100%);color:#35294e;box-shadow:0 20px 60px #9259a91a}.welcome-glow{background:radial-gradient(ellipse at 80% 15%,#fff9ecdd,transparent 50%),radial-gradient(ellipse at 50% 95%,#ffc4d977,transparent 50%)}.welcome .eyebrow{color:#79507a}.welcome h1 em{color:#b24164}.welcome p{color:#574761}.welcome-cta{background:#7546ae;color:#fff;box-shadow:0 8px 24px #7546ae30}.welcome-cta:hover{background:#633795}.welcome-caption{color:#6c5875}.orbit-heart{background:radial-gradient(circle at 30% 20%,#fff0f5,#ffb5cb);color:#a93661;box-shadow:0 0 65px #ff86ac55,inset 0 0 0 1px #ff91b4}.orbit-heart small{color:#79324f}.orbit-ring{border-color:#a05eac55}.orbit-star{color:#a74c77}.floating-wish{background:#ffed9d;color:#553e52;box-shadow:0 18px 38px #aa688528}.wish-two{background:#bdf1df}.wish-three{background:#dfcbff}.welcome-steps span{color:#ad526e}.welcome-steps h2{color:#493255}.welcome-steps p{color:#665373}.panel{border-color:#eadcf2;box-shadow:0 16px 45px #9358ad0a}#create-circle .notice,.notice{background:#f2eaff;color:#593f75}.panel input:not([type=checkbox]),.panel textarea,.panel select{border-color:#dac9e7;color:#493457}.panel label{color:#493457}.panel input:focus,.panel textarea:focus,.panel select:focus{border-color:#a45cbe;outline-color:#a45cbe}button,.button,#create-circle form>button{background:#7546ae;color:#fff}button:hover,.button:hover,#create-circle form>button:hover{background:#633795}.secondary,.button.secondary{background:#fff3d4;color:#654378;border-color:#ebd5b1}.party-controls button{background:#7546ae}.hero{background:linear-gradient(120deg,#ffedb8,#ffe0e9,#e5d9ff);color:#493255}.hero p{color:#65486c}.hero .eyebrow{color:#895272}footer{color:#755583}.wish.mint{background:#d5f7e9}.wish.pink{background:#ffe0e9}.wish.lavender{background:#e8ddff}.wish{color:#493255}#status{background:#7546ae;color:#fff}@media(max-width:650px){header{gap:12px}#circle-language{min-width:155px;margin-left:auto}.welcome h1{font-size:40px}}

.secondary:hover,.button.secondary:hover{background:#ffe2ab;color:#4c315f}#circle-language:focus-visible{outline:3px solid #ae6fc4;outline-offset:3px}