:root{--primary:#dba6c4;--accent:#e8cba9;--glass-bg:rgba(26,22,42,.74);--glass-border:rgba(232,203,169,.18);--text-muted:#c6bdd0}
body{background:radial-gradient(ellipse at 75% 45%,#372446 0,transparent 52%),radial-gradient(ellipse at 20% 85%,#27203e,transparent 50%),#100d20}
button,input{font-family:inherit}button:focus-visible{outline:2px solid #efd4b4;outline-offset:5px}button{touch-action:manipulation}
[hidden]{display:none!important}
#password-screen{isolation:isolate;background:radial-gradient(ellipse at 72% 42%,#45304c 0,transparent 52%),radial-gradient(ellipse at 12% 80%,#28223b,transparent 55%),#100d20;gap:clamp(48px,9vw,160px);padding:80px 7vw;overflow:auto}
#password-screen::before{content:'';position:absolute;inset:20px;border:1px solid #e7c5a017;pointer-events:none}
.gate-story{position:relative;z-index:1;max-width:640px}.edition-label{font-size:10px;letter-spacing:2.7px;font-weight:500;color:#dcc4a9;line-height:1.8}.edition-label>span{display:inline-block;width:25px;height:1px;background:#dcc4a9;vertical-align:middle;margin-right:12px}
.gate-story h1{font-family:'Playfair Display',serif;font-size:clamp(48px,5.7vw,88px);font-weight:400;line-height:1.15;letter-spacing:-3px;margin:32px 0 25px;color:#fcf4ed}.gate-story h1 em,.scene-intro h2 em{font-weight:400;color:#e3b5cc}.gate-story p{font-size:14px;line-height:2;color:#b9afc6}.gate-signature{font-family:'Dancing Script',cursive;font-size:32px;margin-top:38px;color:#ede0d5}.gate-signature span{font-family:serif;font-size:22px;margin:0 14px;color:#e0b1c5}.gate-date{margin-top:64px;font-size:17px;letter-spacing:4px;color:#e5c8a5}.gate-date span{display:inline-block;margin-left:20px;font-size:9px;letter-spacing:2px;color:#a69bb2}
.gate-card{flex:0 0 370px;max-width:400px;padding:42px 30px 36px;border-radius:180px 180px 24px 24px;background:linear-gradient(155deg,#ffffff0f,#ffffff03);border:1px solid #e5c9aa36;box-shadow:inset 0 1px 0 #ffffff20,0 35px 90px #0005;animation:none;backdrop-filter:blur(24px)}
.gate-icon-wrap{width:70px;height:70px;margin:12px auto 32px}.gate-icon{font-size:25px;color:#edcda8;background:linear-gradient(145deg,#695065,#21182e);border:1px solid #dab99f55;box-shadow:inset 3px 3px 12px #ffffff18,0 12px 26px #0005}.gate-icon-pulse{background:radial-gradient(circle,#e3b2ce22,transparent 70%)}.gate-card .edition-label{font-size:8px;letter-spacing:1.8px}.gate-title{font-size:32px;margin:14px 0 20px;color:#fff0e4;background:none;-webkit-text-fill-color:initial;font-weight:400}.gate-hint{background:none;border:0;border-radius:0;color:#bfb3cb;font-size:11px;padding:0;line-height:1.8;margin-bottom:26px}.gate-hint i{color:#e2c5a3;margin-right:4px}
.gate-input{background:#110d1e66;border:1px solid #c8adc53d;border-radius:12px;padding:17px;color:#f3dcc2}.gate-input:focus{background:#171022;border-color:#e2c5a3;box-shadow:0 0 0 4px #e2c5a30c}.gate-btn{border-radius:12px;background:linear-gradient(110deg,#edcfaa,#dab1c5);color:#302133;font-size:12px;padding:18px;box-shadow:0 8px 28px #d8aecc18;justify-content:space-between}.gate-btn:hover{box-shadow:0 10px 35px #d8aecc30}.gate-error{font-size:12px;line-height:1.7;color:#ffa4b1}.gate-footnote{position:absolute;bottom:34px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:3px;color:#9789a5}.gate-footnote span{color:#e3c5a2;padding:0 15px}
.gate-universe{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.orbit{position:absolute;border:1px solid #d8bfdd15;border-radius:50%;width:880px;height:880px;left:38%;top:50%;transform:translateY(-50%) rotateX(52deg) rotate(-32deg)}.orbit-two{width:1100px;height:1100px;left:30%;transform:translateY(-50%) rotateX(30deg) rotate(25deg)}.pearl{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 25%,#f1d5df,#9c698d 30%,#342039 68%,#171020);box-shadow:inset -12px -12px 22px #0007,0 30px 60px #0004;animation:pearl-drift 8s ease-in-out infinite}.pearl-one{width:100px;height:100px;left:49%;top:13%}.pearl-two{width:46px;height:46px;right:5%;bottom:18%;animation-delay:-3s}.floating-star{position:absolute;color:#dfc5a1;text-shadow:0 0 30px #efc39188}.star-one{left:8%;top:13%;font-size:28px}.star-two{left:48%;bottom:20%;font-size:45px}@keyframes pearl-drift{50%{transform:translateY(-18px) rotate(15deg)}}
.top-bar{top:28px;left:4vw;right:4vw}.brand-badge{background:none;border:0;box-shadow:none;padding:8px 0}.brand-text h1{font-size:12px;letter-spacing:1px;background:none;-webkit-text-fill-color:#f3e4db}.brand-heart{font-size:15px;color:#ddb6c9;animation:none}.top-btn{font-size:11px;box-shadow:none;border-color:#e8cba923;padding:10px 15px}.music-disc{width:19px;height:19px;background:conic-gradient(#dcbaca,#8b739d,#e6c9a8,#dcbaca)}.music-disc-center{width:5px;height:5px}
.scene-intro{position:absolute;top:23%;left:5vw;max-width:350px;pointer-events:none!important;transition:opacity .4s,transform .4s}.scene-intro h2{font-family:'Playfair Display',serif;font-size:clamp(40px,4.5vw,68px);line-height:1.15;letter-spacing:-2px;font-weight:400;margin:20px 0}.scene-intro p{font-size:12px;line-height:1.9;color:#bfb2cd}.scene-intro button{pointer-events:auto}.birthday-cta{margin-top:30px;background:linear-gradient(110deg,#edcfaa,#dab1c5);border:0;border-radius:6px;padding:15px 20px;color:#302133;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 8px 30px #0002}.birthday-cta span{margin-left:25px}.text-action{display:block;background:none;border:0;color:#d4c3db;font-size:11px;margin-top:20px;cursor:pointer}.text-action span{margin-left:12px}.exploring .scene-intro{opacity:0;transform:translateX(-20px);visibility:hidden}.scene-caption{position:absolute;bottom:105px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.5px;color:#bcacc9;pointer-events:none!important}.scene-caption span{color:#e8cba9;margin-right:10px}
.bottom-dock{bottom:24px;padding:8px;gap:4px;border-radius:16px;background:#20182de0;border-color:#e8cba926;box-shadow:0 15px 60px #0005}.dock-item{border:0;background:transparent;color:#c4b5ce;font-size:11px;padding:13px 18px;border-radius:10px;gap:10px}.dock-item i{font-size:14px}.dock-item.active{background:#e3c8ab;color:#35273a;box-shadow:none}.dock-item:hover{background:#c4a0c524;box-shadow:none}.dock-special{background:#a986b226!important;color:#efd2b0!important;border:0!important;box-shadow:none!important}.dock-special:hover{background:#a986b244!important;box-shadow:none!important}
#milestone-modal{background:#20182df2;border-color:#e8cba930;border-radius:18px;box-shadow:0 20px 60px #0005;bottom:100px}.modal-badge{color:#e7c5a6;background:#e7c5a610;border-color:#e7c5a628}.modal-title{color:#f5e9dd}.modal-date{color:#e7c5a6}.modal-nav-btn{font-size:10px;border-radius:8px;padding:10px}.modal-thumb{object-fit:contain}.letter-card{border-radius:12px;background:#fff8ef}.letter-title,.letter-sign{color:#8f526f}.letter-body{border-color:#d8b6c8}.timer-card{border-color:#e8cba933;border-radius:20px}.timer-num{color:#eed1af!important}.timer-box{background:#e8cba909!important;border-color:#e8cba922!important}.timer-card .letter-close-btn{color:#e8cba9;background:#ffffff10}
@media(min-width:701px){#webgl-container{left:16%;width:84%;-webkit-mask-image:linear-gradient(to right,transparent,#000 20%);mask-image:linear-gradient(to right,transparent,#000 20%)}}
@media(max-width:1000px){#password-screen{gap:36px;padding:65px 5vw}.gate-story h1{font-size:52px}.gate-card{flex-basis:330px;padding:35px 24px}.gate-date span{display:block;margin:12px 0 0}.scene-intro{top:15%;max-width:260px}.scene-intro h2{font-size:44px}.dock-item{padding:12px}.pearl-one{left:40%}}
@media(max-width:700px){#password-screen{flex-direction:column;justify-content:flex-start;gap:28px;padding:48px 24px 70px}.gate-story{text-align:center}.gate-story h1{font-size:40px;letter-spacing:-1.5px;margin:16px 0 12px}.gate-story p{font-size:11px}.gate-story .edition-label{font-size:8px;letter-spacing:1.5px}.gate-signature{font-size:24px;margin-top:14px}.gate-date{display:none}.gate-card{flex:none;width:min(100%,350px);padding:24px 26px;border-radius:26px}.gate-icon-wrap{width:46px;height:46px;margin:0 auto 16px}.gate-icon{font-size:18px}.gate-title{font-size:27px;margin:10px 0 14px}.gate-hint{margin-bottom:18px}.gate-footnote{position:relative;bottom:auto;font-size:7px;letter-spacing:2px}.pearl-one{width:60px;height:60px;left:auto;right:-15px;top:20%}.pearl-two{left:-10px;bottom:30%}.star-one{left:6%;top:34%}.star-two{display:none}.top-bar{top:16px;left:18px;right:18px;align-items:flex-start}.brand-text h1{font-size:10px;max-width:130px;line-height:1.6}.brand-badge{gap:8px}.top-actions{gap:6px}.top-btn{padding:9px;font-size:9px;gap:5px}.scene-intro{left:24px;top:100px;max-width:100%;right:24px;text-align:center}.scene-intro h2{font-size:38px;margin:12px 0}.scene-intro h2 br{display:none}.scene-intro p{display:none}.scene-intro .edition-label{font-size:8px}.birthday-cta{margin-top:4px;padding:12px 18px;font-size:11px}.text-action{margin:12px auto}.bottom-dock{width:calc(100% - 24px);bottom:max(12px,env(safe-area-inset-bottom));justify-content:space-around;gap:0;padding:7px 3px;overflow:visible;border-radius:14px}.dock-item{flex-direction:column;padding:9px 5px;gap:8px;font-size:8px;white-space:normal;text-align:center}.dock-item i{font-size:15px}.dock-special{max-width:65px}.scene-caption{bottom:100px;font-size:8px}#milestone-modal{bottom:100px;max-height:47dvh;overflow-y:auto;width:calc(100% - 28px);padding:14px}.modal-nav-btn{font-size:9px;padding:8px 6px;gap:4px}.modal-desc{font-size:12px}.modal-title{font-size:17px}.letter-card{padding:32px 22px}.timer-card{padding:32px 18px}.timer-headline{font-size:22px}}
/* Pull the heart cord to illuminate the password alcove. */
#love-lamp-card {
    --cord-pull: 0px; --lamp-top: -44px; min-height: 438px; padding-top: 158px;
    transition: background .7s, border-color .7s, box-shadow .7s;
}
#love-lamp-card .gate-icon-wrap { display: none; }
#love-lamp-card.lamp-off {
    background: linear-gradient(160deg, #17131f, #0d0b14);
    border-color: #a18aab30; box-shadow: inset 0 1px 0 #ffffff08, 0 30px 80px #0006;
}
#love-lamp-card.lamp-on {
    background: radial-gradient(ellipse at 50% 0, #f1c88e25, transparent 65%), linear-gradient(155deg,#332535,#191421);
    border-color: #f1cca16b; box-shadow: 0 0 75px #efc58e18, inset 0 1px 0 #ffe7bc55, 0 30px 80px #0005;
}
.love-lamp { position: absolute; top: var(--lamp-top); left: 50%; transform: translateX(-50%); width: 144px; height: 105px; pointer-events: none; }
.love-lamp-stem { position: absolute; left: 71px; top: 0; width: 2px; height: 47px; background: linear-gradient(#786a7d,#c6ab90); }
.love-lamp-shade { position: absolute; z-index: 3; top: 37px; left: 0; width: 144px; height: 60px; border-radius: 80px 80px 14px 14px;
    background: linear-gradient(100deg,#312935,#7c6370 35%,#473749 75%,#211c29);
    border: 1px solid #c5a98966; box-shadow: inset 0 2px 2px #fff3, 0 8px 20px #0005; transition: box-shadow .7s, background .7s; }
.love-lamp-shade::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -2px; height: 5px; border-radius: 50%; background: #584c55; transition: background .7s, box-shadow .7s; }
.love-lamp-bulb { position: absolute; z-index: 2; top: 82px; left: 56px; width: 32px; height: 32px; border-radius: 50%; background: #58454a; transition: background .7s, box-shadow .7s; }
.love-lamp-beam { position: absolute; z-index: 1; top: 97px; left: -140px; width: 424px; height: 345px; opacity: 0;
    background: linear-gradient(#ffe1a827,#ffd6a611 50%,transparent); clip-path: polygon(35% 0,65% 0,100% 100%,0 100%); transition: opacity .8s; }
.lamp-on .love-lamp-shade { background: linear-gradient(100deg,#4d3541,#ac7c71 38%,#775361 76%,#3b283b); }
.lamp-on .love-lamp-shade::after { background: #ffe4ac; box-shadow: 0 3px 16px #ffdba3aa; }
.lamp-on .love-lamp-bulb { background: #fff1c8; box-shadow: 0 0 22px #ffdc9e, 0 0 65px #efc69188; }
.lamp-on .love-lamp-beam { opacity: 1; }
.lamp-pull { position: absolute; z-index: 5; top: calc(var(--lamp-top) + 95px); left: calc(50% + 32px); width: 48px; height: calc(88px + var(--cord-pull, 0px));
    display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: transparent;
    cursor: grab; touch-action: none; color: #f0cba8; transition: height .45s cubic-bezier(.34,1.56,.64,1); }
.lamp-pull.is-pulling { cursor: grabbing; transition: none; }
.lamp-pull::before { content: ''; position: absolute; top: -4px; left: 20px; width: 8px; height: 9px;
    border: 1px solid #c6a27e; border-radius: 2px 2px 5px 5px;
    background: linear-gradient(90deg,#5c4338,#e2c3a0 45%,#735043); box-shadow: 0 2px 4px #0005; }
.lamp-cord { flex: 1; width: 3px; min-height: 0;
    background: radial-gradient(circle at 50% 2px,#edcfaa 0 1px,#8d6b57 1.2px 1.6px,transparent 1.8px);
    background-size: 3px 5px; filter: drop-shadow(1px 1px 1px #0007); }
.lamp-handle { position: relative; display: grid; place-items: center; flex: 0 0 28px; width: 24px; border-radius: 7px 7px 12px 12px;
    border: 1px solid #d0ac85; background: linear-gradient(110deg,#775146,#c89677 42%,#9d6e60 65%,#65424c); font-family: Georgia,serif; font-size: 17px; color: #ffe6ce;
    box-shadow: inset 1px 1px 2px #ffe9c84d, inset -1px -2px 3px #42243788, 0 4px 8px #0004; transition: box-shadow .3s, color .3s; }
.lamp-handle::before { content: ''; position: absolute; top: -3px; left: 8px; width: 6px; height: 4px;
    border: 1px solid #b89273; border-radius: 2px 2px 0 0; background: #7d594d; }
.lamp-pull:hover .lamp-handle, .lamp-pull:focus-visible .lamp-handle { color: #ffe6c7; box-shadow: 0 0 22px #efc29a55, inset 0 1px 0 #ffecd633; }
.lamp-invitation { position: absolute; z-index: 2; top: 163px; left: 24px; right: 24px; text-align: center; transition: opacity .45s, transform .45s, visibility .45s; }
.lamp-invitation-star { font-size: 27px; color: #c1a78d; }
.lamp-invitation h2 { font-family: 'Literata',Georgia,serif; font-weight: 400; font-size: 24px; color: #e9d7d0; line-height: 1.5; margin: 17px 0 13px; }
.lamp-invitation p { font-size: 12px; line-height: 1.9; color: #b3a4bc; }
.lamp-invitation-arrow { display: inline-block; color: #ddbc9b; font-size: 22px; margin-top: 16px; animation: lamp-pull-hint 2s ease-in-out infinite; }
.gate-form { position: relative; z-index: 2; transition: opacity .65s, transform .65s, visibility .65s; }
.lamp-off .gate-form { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; }
.lamp-on .gate-form { opacity: 1; visibility: visible; transform: none; transition: opacity .65s, transform .65s; }
.lamp-on .lamp-invitation { opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; }
.lamp-status { position: relative; z-index: 2; text-align: center; margin-top: 22px; font-size: 9px; line-height: 1.8; letter-spacing: .3px; color: #aa98ae; }
.lamp-on .lamp-status { color: #d6bba0; }
@keyframes lamp-pull-hint { 50% { transform: translateY(5px); opacity: .55; } }
@media(max-width:700px) {
    #password-screen { gap: 64px; }
    #love-lamp-card { --lamp-top: -47px; padding-top: 144px; min-height: 415px; }
    .lamp-invitation { top: 153px; }
    .lamp-invitation h2 { font-size: 22px; }
    .love-lamp-beam { width: 364px; left: -110px; height: 325px; }
}
/* Vietnamese typography: generous line boxes keep accents clear. */
.code-cells { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.code-cell { display: grid; place-items: center; height: 60px; border: 1px solid #b598b94a; border-radius: 12px;
    background: linear-gradient(150deg,#ffffff07,#100c1d99); box-shadow: inset 0 1px 0 #ffffff08, 0 4px 10px #0002;
    color: #85728d; font-size: 25px; transition: border-color .2s, background .2s, box-shadow .2s; }
.code-cell.is-filled { color: #f1d3ad; border-color: #e2c39e55; }
.code-cell.is-current { border-color: #e9cda8; background: #e9cda80c; box-shadow: 0 0 0 3px #e9cda80d, 0 0 18px #e7c4a617; }
.code-entry .gate-input, .code-entry .gate-input:focus { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%;
    padding: 0; border: 0; border-radius: 12px; background: transparent; box-shadow: none;
    color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; letter-spacing: 0; }
.code-entry .gate-input::selection { background: transparent; }
.code-entry:has([aria-invalid="true"]) .code-cell { border-color: #e78193; box-shadow: 0 0 0 2px #e7819312; }
@media(max-width:480px) { .code-cells { gap: 7px; } .code-cell { height: 55px; border-radius: 10px; } }
.exploring .scene-intro { opacity: 1; transform: none; visibility: visible; }
body, input, button { font-family: 'Be Vietnam Pro', sans-serif; }
.gate-story h1, .scene-intro h2, .gate-title, .letter-title, .timer-headline,
.gate-signature, .letter-sign, .letter-polaroid-caption {
    font-family: 'Literata', Georgia, serif;
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: 1.4;
}
.gate-story h1 { font-size: clamp(44px, 5vw, 76px); }
.scene-intro h2 { font-size: clamp(38px, 4.2vw, 64px); }
.gate-signature, .letter-sign { font-style: italic; font-size: 26px; }
.gate-title { font-size: 30px; }
.edition-label { letter-spacing: 1.8px; }
.gate-hint { font-size: 12px; }
.letter-body { font-style: normal; line-height: 2; }
.modal-title { line-height: 1.55; }
.modal-desc { line-height: 1.8; }
#webgl-container canvas { display: block; touch-action: none; cursor: grab; }
#photo-tooltip {
    position: fixed; z-index: 65; left: 50%; bottom: 120px; transform: translateX(-50%);
    max-width: calc(100vw - 40px); width: max-content; padding: 12px 20px;
    border: 1px solid #e7c5a650; border-radius: 12px; background: #21192eee;
    color: #f8e6d7; box-shadow: 0 10px 40px #0005; font-size: 12px; line-height: 1.7;
    pointer-events: none; text-align: center;
}
#memory-strip {
    position: fixed; z-index: 55; right: 20px; top: 50%; transform: translateY(-50%);
    display: grid; gap: 7px; padding: 9px; border-radius: 18px;
    background: #181324a8; border: 1px solid #d9b9d326; backdrop-filter: blur(18px);
    max-height: calc(100dvh - 190px); overflow-y: auto; scrollbar-width: thin;
}
.memory-choice {
    position: relative; width: 58px; min-height: 52px; padding: 0; border-radius: 9px;
    border: 2px solid transparent; overflow: hidden; cursor: pointer;
    background: #33253e; transition: transform .2s, border-color .2s, box-shadow .2s;
}
.memory-choice img { display: block; width: 54px; height: 48px; object-fit: cover; }
.memory-choice span {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 0 3px;
    background: linear-gradient(transparent,#100d20d9); color: #fff; font-size: 9px;
}
.memory-choice:hover, .memory-choice:focus-visible, .memory-choice[aria-pressed="true"] {
    border-color: #ebc8a5; box-shadow: 0 0 16px #dcacd04d; transform: scale(1.05);
}
#celebrate-btn[aria-pressed="true"] { background: #b17ca848!important; box-shadow: inset 0 0 0 1px #e5bcce55!important; }
@media(max-width:700px) {
    .gate-story h1 { font-size: 36px; }
    .scene-intro h2 { font-size: 34px; }
    .gate-signature { font-size: 21px; }
    .gate-title { font-size: 27px; }
    #memory-strip { top: auto; bottom: 96px; right: 14px; left: 14px; transform: none;
        display: flex; gap: 7px; padding: 7px; overflow-x: auto; overflow-y: hidden; }
    .memory-choice { flex: 0 0 52px; width: 52px; min-height: 48px; }
    .memory-choice img { width: 48px; height: 44px; }
    #milestone-modal { bottom: 164px; max-height: 42dvh; }
    #photo-tooltip { bottom: 166px; font-size: 10px; }
    .scene-caption { bottom: 168px; }
    .dock-item { min-height: 50px; font-size: 9px; }
}
/* A keepsake clock, scoped to the love timer. */
#timer-modal .timer-card {
    width: min(100%, 620px); max-width: 620px; max-height: calc(100dvh - 40px);
    overflow-y: auto; overflow-x: hidden; padding: 36px 54px 30px; border-radius: 30px;
    border: 1px solid #e7c6ad42; isolation: isolate;
    background: radial-gradient(ellipse at 50% 22%, #69436555, transparent 52%),
        radial-gradient(ellipse at 0 100%, #41315b66, transparent 55%), #171222;
    box-shadow: 0 35px 110px #0009, 0 0 85px #cd94b516, inset 0 1px 0 #ffe4d72b;
    scrollbar-width: thin;
}
#timer-modal .timer-card::before {
    content: ''; position: absolute; inset: 10px; border: 1px solid #e4bfcc12;
    border-radius: 22px; pointer-events: none; z-index: -1;
    background-image: radial-gradient(circle at 12% 23%, #e7c9a7aa 0 1px, transparent 2px),
        radial-gradient(circle at 87% 35%, #e7c9a799 0 1px, transparent 2px),
        radial-gradient(circle at 21% 64%, #e7c9a755 0 1px, transparent 2px),
        radial-gradient(circle at 75% 12%, #e7c9a755 0 1px, transparent 2px);
}
#timer-modal .letter-close-btn { width: 34px; height: 34px; top: 18px; right: 18px; font-size: 15px; z-index: 2; }
#timer-modal .timer-kicker { font-size: 9px; font-weight: 500; letter-spacing: 3px; color: #d4b49c; margin: 3px 20px 10px; }
.love-clock-emblem { position: relative; width: 220px; height: 132px; margin: 0 auto; display: grid; place-items: center; }
.love-clock-emblem::before { content: ''; position: absolute; inset: 5px 35px; border-radius: 50%; background: #e29fc520; filter: blur(25px); }
.love-clock-heart { position: relative; width: 96px; height: 96px; filter: drop-shadow(0 10px 15px #0006); animation: clock-heart-float 5s ease-in-out infinite; }
.love-clock-orbit { position: absolute; width: 204px; height: 72px; border: 1px solid #eac9aa60; border-radius: 50%; transform: rotate(-24deg); box-shadow: 0 0 16px #edb7d00c; }
.love-clock-orbit::after { content: ''; position: absolute; width: 6px; height: 6px; top: 9px; left: 24px; border-radius: 50%; background: #f1d3af; box-shadow: 0 0 13px #f1d3af; }
.love-clock-orbit-cross { transform: rotate(27deg); border-color: #c8b2df30; width: 186px; height: 86px; }
.love-clock-orbit-cross::after { left: auto; top: auto; right: 23px; bottom: 8px; background: #deb7d9; }
.love-clock-star { position: absolute; top: 12px; right: 24px; font-size: 19px; color: #e5c4a5; }
.love-clock-star.second { top: auto; bottom: 13px; left: 21px; right: auto; font-size: 14px; }
.love-clock-names { font-family: 'Literata', Georgia, serif; color: #e9d5e1; font-style: italic; font-size: 16px; margin: 2px 0 16px; }
.love-clock-names span { margin: 0 15px; color: #e7bc9e; font-style: normal; }
#timer-modal .timer-headline { font-size: clamp(23px, 4vw, 30px); color: #f4e8df; background: none; -webkit-text-fill-color: initial; margin-bottom: 2px; }
#timer-modal .timer-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; max-width: 390px; margin: 0 auto 26px; }
#timer-modal .timer-box { padding: 15px 8px 13px; border-radius: 13px; background: linear-gradient(145deg,#ffffff09,#ffffff02)!important; border-color: #e8cba923!important; box-shadow: inset 0 1px 0 #ffffff09, 0 8px 18px #0002; }
#timer-modal .timer-box:first-child { grid-column: 1 / -1; background: none!important; border: none; padding: 6px 0 23px; box-shadow: none; }
#timer-modal .timer-num { font-weight: 500; font-size: 30px; line-height: 1.2; margin-bottom: 7px; color: #edd5c4!important; }
#timer-modal #timer-days { font-family: 'Literata', Georgia, serif; font-size: clamp(70px,12vw,94px); letter-spacing: -.045em; line-height: 1.25; margin: 0; color: #f4d7b5!important; text-shadow: 0 4px 35px #edc0a622; }
#timer-modal .timer-label { font-size: 9px; font-weight: 400; letter-spacing: 2px; color: #b6a4be; }
#timer-modal .timer-box:first-child .timer-label { font-size: 10px; letter-spacing: 5px; color: #e2becf; }
#timer-modal .timer-date-start { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 10px; font-weight: 400; line-height: 1.8; color: #c7b19f; }
.love-clock-date-line { width: 28px; height: 1px; background: #e8cba938; flex-shrink: 0; }
.love-clock-note { font-family: 'Literata', Georgia, serif; font-size: 12px; font-style: italic; line-height: 1.8; color: #a996b1; margin-top: 12px; }
@keyframes clock-heart-float { 50% { transform: translateY(-5px) rotate(-4deg); } }
@media(max-width:480px), (max-height:760px) {
    #timer-modal .timer-card { padding: 26px 24px 24px; }
    .love-clock-emblem { height: 104px; }
    .love-clock-heart { width: 78px; height: 78px; }
    .love-clock-names { font-size: 14px; margin-bottom: 10px; }
    #timer-modal #timer-days { font-size: 68px; }
    #timer-modal .timer-box:first-child { padding-bottom: 15px; }
    #timer-modal .timer-grid { margin-bottom: 18px; gap: 8px; }
    #timer-modal .timer-num { font-size: 26px; }
    .love-clock-date-line { width: 14px; }
    #timer-modal .timer-kicker { letter-spacing: 2px; font-size: 8px; }
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}