@font-face{font-family:"MD Thermochrome 0.3 Trial";src:url(/fonts/MDThermochrome0.3-Regular-Trial.otf) format("opentype");font-weight:400;font-style:normal}@font-face{font-family:"MD Thermochrome 0.3 Trial";src:url(/fonts/MDThermochrome0.3-Bold-Trial.otf) format("opentype");font-weight:700;font-style:normal}:root{font-family:"MD Thermochrome 0.3 Trial",system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;letter-spacing:.04em;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.birthday-page{position:relative;width:100vw;min-height:100dvh;box-sizing:border-box;padding:18px;overflow-x:hidden;color:#26369d;background:linear-gradient(135deg,#a6e6ff,#e5f7ff 48%,#b8dcff);font-family:Comic Sans MS,Comic Sans,Chalkboard SE,Marker Felt,sans-serif}.birthday-page button{font-family:inherit}.birthday-portal{width:min(1050px,100%);margin:0 auto;padding:12px;border:4px solid #1683dc;box-shadow:inset 0 0 0 3px #d7f8ff,4px 5px #16549c59;background:#7ed3ffb8}.portal-header{text-align:center}.portal-header__welcome{margin:0;color:#f13783;font-size:.85rem;font-weight:700;letter-spacing:.12em}.portal-header h1{margin:2px 0;color:#d9276e;font-size:clamp(2.4rem,7vw,5.2rem);line-height:.85;text-shadow:2px 2px 0 #fffaa2,4px 4px 0 rgba(38,54,157,.25);letter-spacing:0}.portal-header__tagline{margin:5px 0 12px;color:#5260b4;font-size:1rem;font-weight:700;letter-spacing:0}.portal-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.portal-tab{min-height:70px;padding:8px 5px;border:3px solid #5e83c9;border-radius:48% 52%;color:#35429c;background:#fff49c;box-shadow:inset 3px 3px #ffffffe6,2px 3px #4d70b9;font-size:clamp(.72rem,1.7vw,1rem);font-weight:700;line-height:1;letter-spacing:0;cursor:pointer}.portal-tab:nth-child(2n){background:#b8f4c5}.portal-tab:nth-child(3n){background:#ffc0de}.portal-tab:hover,.portal-tab:focus-visible,.portal-tab--active{transform:translateY(-3px);outline:3px dotted #f13783;outline-offset:3px}.portal-layout{display:grid;grid-template-columns:150px minmax(0,1fr) 150px;gap:12px;margin-top:12px}.portal-rail{display:flex;flex-direction:column;gap:10px;padding:12px 8px;border:4px solid #1683dc;background:#9be1ff}.portal-rail button{min-height:78px;padding:6px;border:2px solid #3774bc;border-radius:24px 8px;color:#433996;background:#fff5ad;box-shadow:inset 2px 2px #fff,2px 2px #3171bc;font-size:.9rem;font-weight:700;line-height:1;letter-spacing:0;cursor:pointer}.portal-rail button:nth-child(2n){background:#ffc6e1}.portal-rail button:hover,.portal-rail button:focus-visible{color:#fff;background:#ef5190;outline:3px dotted #fff;outline-offset:-6px}.portal-main{min-height:540px;padding:18px;border:4px solid #1683dc;color:#3c3b90;text-align:center;background:linear-gradient(140deg,#fffeb7e6,#c4eeffe6 54%,#ffc6e1db)}.portal-main__eyebrow{margin:0;color:#ef5190;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.portal-main h2{margin:4px 0 8px;font-size:clamp(1.7rem,4vw,3rem);line-height:1;letter-spacing:0}.portal-main__scene{position:relative;min-height:365px;max-width:520px;margin:0 auto}.portal-main__photo{position:absolute;top:0;left:50%;width:100%;height:185px;box-sizing:border-box;object-fit:cover;transform:translate(-50%);border:5px solid #fff;border-radius:22px;box-shadow:4px 5px #4f67b2}.portal-main__friend{position:absolute;bottom:0;z-index:1;width:29%;aspect-ratio:1;object-fit:cover;border:5px solid #fff;border-radius:50%;box-shadow:3px 4px #4f67b2}.portal-main__friend--left{left:1%;transform:rotate(-8deg)}.portal-main__friend--center{left:50%;transform:translate(-50%);z-index:1}.portal-main__friend--right{right:1%;transform:rotate(8deg)}.portal-main__friend--center,.portal-main__friend--right{background:#fff}.portal-main__copy{max-width:510px;margin:10px auto;font-size:1.08rem;font-weight:700;line-height:1.2;letter-spacing:0}.portal-main__wish{padding:10px 20px;border:3px solid #b62459;border-radius:20px;color:#fff;background:#ec2863;box-shadow:inset 2px 2px #ffacc8,3px 3px #8a4c9a;font-size:1rem;font-weight:700;cursor:pointer}.portal-main__wish:hover,.portal-main__wish:focus-visible{transform:translate(2px,2px);box-shadow:inset 2px 2px #ffacc8,1px 1px #8a4c9a}.portal-main__status{margin:8px 0 0;color:#d9276e;font-size:.9rem;font-weight:700;letter-spacing:0}.portal-footer{margin-top:12px;color:#35429c;text-align:center;font-size:.9rem;font-weight:700;letter-spacing:0}.birthday-messages{display:grid;gap:12px;max-width:580px;margin:18px auto 0;text-align:left}.birthday-message{display:flex;align-items:flex-end;gap:10px}.birthday-message--right{flex-direction:row-reverse}.birthday-message__avatar{flex:0 0 62px;width:62px;height:62px;object-fit:cover;border:4px solid #fff;border-radius:50%;box-shadow:2px 3px #4f67b2}.birthday-message__avatar--contact{display:grid;place-items:center;color:#fff;background:#ef5190;font-family:Arial,sans-serif;font-size:2rem;font-weight:700}.birthday-message__bubble{position:relative;max-width:390px;padding:10px 14px;border:3px solid #5e83c9;border-radius:18px 18px 18px 4px;background:#fffdf4;box-shadow:3px 3px #4f67b285;font-size:.98rem;font-weight:700;line-height:1.2}.birthday-message--right .birthday-message__bubble{border-radius:18px 18px 4px;background:#ffc9df}.birthday-message__bubble:after{position:absolute;bottom:-3px;left:-13px;width:18px;height:18px;border-bottom:3px solid #5e83c9;background:#fffdf4;content:"";transform:skew(-35deg)}.birthday-message--right .birthday-message__bubble:after{right:-13px;left:auto;border-right:3px solid #5e83c9;border-bottom:3px solid #5e83c9;background:#ffc9df;transform:skew(35deg)}.birthday-message__bubble p{margin:0}.birthday-message__name{margin-bottom:3px!important;color:#ef5190;font-size:.82rem;text-transform:uppercase}.present-picker{display:grid;justify-items:center;gap:12px;max-width:430px;margin:18px auto 0}.present-picker__photo{width:min(100%,360px);height:210px;object-fit:cover;border:5px solid #fff;border-radius:20px;box-shadow:4px 5px #4f67b2}.present-picker__label{margin:0;font-size:1.1rem;font-weight:700}.present-picker__list{width:min(100%,370px);box-sizing:border-box;margin:0;padding:8px 14px 8px 34px;border:3px solid #5e83c9;border-radius:10px;color:#35429c;background:#fffdf4;box-shadow:3px 3px #4f67b2;font-weight:700;line-height:1.6}.present-picker__list li::marker{color:#ef5190}.present-picker__asterisk{margin-right:4px;color:#d9272e;font-size:1.15em}.present-picker__footnote{width:min(100%,370px);margin:0;color:#d9276e;font-size:.88rem;font-weight:700;text-align:left}.birthday-letter{max-width:520px;margin:30px auto 0;padding:22px;border:3px solid #5e83c9;border-radius:10px;color:#35429c;background:#fffdf4;box-shadow:4px 4px #4f67b2;font-size:1.08rem;font-weight:700;line-height:1.6;text-align:left}.photo-drop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:640px;margin:24px auto 0}.photo-drop__image{width:100%;aspect-ratio:1;object-fit:cover;border:5px solid #fff;border-radius:12px;box-shadow:4px 5px #4f67b2}.birthday-page__confirmation{position:fixed;right:18px;bottom:15px;z-index:3;margin:0;padding:6px 10px;border:2px solid #fff;color:#fff;background:#ef5190;font-size:.8rem;letter-spacing:0}.avatar-window{position:fixed;top:50%;left:50%;z-index:2;width:min(810px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;overflow-y:auto;transform:translate(-50%,-50%);border:3px solid #e9e3df;box-shadow:2px 2px #111,-2px -2px #746e6a,9px 12px #00000040;background:#c5bab4}.avatar-window__titlebar{min-height:42px;display:flex;align-items:center;justify-content:space-between;padding-left:12px;color:#fff;background:linear-gradient(90deg,#4d277c,#9c7dbc)}.avatar-window__titlebar h2{margin:0;font-size:1.25rem;line-height:1;letter-spacing:0}.avatar-window__buttons{display:flex;align-self:stretch}.avatar-window__buttons span{width:39px;display:grid;place-items:center;border-left:2px solid #29232e;color:#111;font-family:monospace;font-size:1.6rem;background:#c8bebe}.avatar-window__body{padding:22px 28px 18px}.avatar-picker{min-width:0;margin:0;padding:18px 24px 28px;border:2px solid #8f8580;box-shadow:inset 2px 2px #817771,inset -2px -2px #ede7e4}.avatar-picker__heading{margin:0;font-size:1.15rem;letter-spacing:0}.avatar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:630px;margin:24px auto 0}.avatar-slot{aspect-ratio:1;width:100%;display:block;padding:0;overflow:hidden;border:3px outset #ede7e4;border-radius:0;background:#aaa09c;cursor:pointer}.avatar-slot:hover,.avatar-slot:focus-visible{outline:2px dotted #111;outline-offset:3px}.avatar-slot--selected{border-style:inset;box-shadow:inset 0 0 0 3px #5d287b}.avatar-slot__image{width:100%;height:100%;object-fit:cover}.avatar-window__ok{display:block;min-width:144px;margin:24px 0 0 auto;padding:9px 24px;border:3px outset #ede7e4;border-radius:0;color:#111;background:#c8bebe;font-size:1rem}.avatar-window__ok:disabled{color:#7f7671;cursor:not-allowed}.avatar-window__message{margin:14px 0 0;text-align:right;color:#4d277c;font-size:1rem;letter-spacing:0}@media (max-width: 480px){.birthday-page{padding:12px}.avatar-window{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}.avatar-window__titlebar{min-height:36px;padding-left:8px}.avatar-window__titlebar h2{font-size:1rem}.avatar-window__body{padding:12px 10px 10px}.avatar-picker{padding:10px 6px 14px}.avatar-picker__heading{font-size:.9rem}.avatar-grid{gap:6px;margin-top:12px}.avatar-window__buttons span{width:28px;font-size:1.3rem}.avatar-window__ok{min-width:112px;margin-top:14px;padding:7px 18px}.birthday-page__confirmation{bottom:18px}}@media (max-width: 700px){.birthday-page{padding:8px}.birthday-portal{box-sizing:border-box;padding:7px}.portal-layout{grid-template-columns:1fr;gap:8px}.portal-layout>.portal-rail:first-child{display:none}.portal-rail{display:grid;grid-template-columns:1fr;gap:6px;padding:6px}.portal-rail button{min-height:60px;font-size:.72rem}.portal-main{min-height:0;padding:14px 10px}.portal-tabs{gap:5px}.portal-tab{min-height:55px;border-width:2px;font-size:.65rem}.portal-main__scene{min-height:210px}.portal-main__copy{font-size:.95rem}.photo-drop{gap:10px;margin-top:16px}.birthday-messages{gap:10px;margin-top:12px}.birthday-message__avatar{flex-basis:48px;width:48px;height:48px;border-width:3px}.birthday-message__bubble{max-width:calc(100% - 58px);padding:8px 10px;font-size:.88rem}}
