@font-face{font-family:Sigmar;src:url(sigmar-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url(montserrat-500.woff2) format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:Montserrat;src:url(montserrat-700.woff2) format('woff2');font-weight:600 800;font-display:swap}
:root{--blue:#5fcde8;--yellow:#fbcb00;--orange:#ff4400;--cream:#f8edcc;--ink:#000;--ease:cubic-bezier(.22,.7,.25,1);font-family:Montserrat,sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #12617a;outline-offset:5px}button{touch-action:manipulation}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}img{display:block;max-width:100%}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}
.stage{min-height:100svh;padding:64px 40px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--cream);background-image:radial-gradient(#00000010 .7px,transparent .7px);background-size:7px 7px;position:relative;isolation:isolate;overflow:hidden}
.stage:before,.stage:after{content:"";position:absolute;z-index:-1;pointer-events:none;width:850px;height:200px;background:var(--blue);transform:rotate(-35deg);border-radius:50%;opacity:.32;filter:blur(1px)}.stage:before{top:-210px;left:-220px;border:70px solid var(--yellow);height:500px;background:transparent}.stage:after{bottom:-330px;right:-320px;height:500px;border:65px solid var(--orange);background:transparent;opacity:.16}
.preview-notice{width:min(1040px,100%);font-size:10px;font-weight:700;letter-spacing:.03em;padding:0 4px 12px;display:flex;gap:8px;align-items:center}.preview-notice:before{content:"";display:block;width:6px;height:6px;background:var(--orange);border-radius:50%}.preview-notice span{font-weight:500;opacity:.58;margin-left:auto}
.namecard{width:min(1040px,100%);display:grid;grid-template-columns:44% 56%;border:2px solid var(--ink);border-radius:28px;overflow:hidden;background:var(--cream);box-shadow:9px 11px 0 var(--ink);position:relative;animation:card-arrive 1s var(--ease) both}
.brand-side{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--blue);min-height:750px;padding:58px 35px 70px;border-right:2px solid #000}
.ribbons{position:absolute;inset:-14%;width:128%;height:128%;z-index:-1;stroke:none}.ribbon-group{transform-origin:350px 475px;will-change:transform}.ribbon-group-a{animation:rainbow-flow 10s linear infinite}
.brand-motto{font-family:Sigmar,sans-serif;font-size:25px;line-height:1.2;position:absolute;top:38px;left:30px;transform:rotate(-9deg);margin:0;color:var(--ink);background:var(--yellow);padding:10px 15px 13px;border:2px solid black;border-radius:50%;box-shadow:3px 3px 0 #000;z-index:2}
.brand-lockup{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;transform:rotate(-5deg);width:100%;padding-top:20px}.mascot{width:220px;height:auto;filter:drop-shadow(4px 7px 0 #f8edcc);animation:mascot-float 7s ease-in-out infinite alternate}.wordmark{width:300px;height:auto;filter:drop-shadow(3px 6px 0 #f8edcc);transform:rotate(2deg)}
.brand-bottom{position:absolute;bottom:30px;left:28px;right:28px;display:flex;justify-content:space-between;gap:12px;font-size:9px;font-weight:700;line-height:1.5}.brand-bottom span:last-child{max-width:78px;text-align:right}.motion-control{position:absolute;left:28px;bottom:64px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--cream);border:1.5px solid #000}.motion-control svg{width:15px;height:15px}.motion-control:hover{background:var(--yellow)}
.contact-side{padding:30px 38px 24px;display:flex;flex-direction:column}.contact-top{display:flex;align-items:center;justify-content:space-between;gap:15px}.nickname{font-size:12px;font-weight:700;display:flex;align-items:center;gap:9px}.nickname:before{content:"";width:8px;height:8px;background:var(--orange);border-radius:50%}.icon-button{width:40px;height:40px;display:grid;place-items:center;border:1.5px solid #000;background:transparent;border-radius:50%;transition:transform .3s var(--ease),background .3s}.icon-button svg{width:19px;height:19px}.icon-button:hover{background:var(--yellow);transform:rotate(-8deg)}
.identity{margin:20px 0 24px}h1{font-family:Sigmar,sans-serif;font-weight:400;font-size:43px;line-height:1.06;letter-spacing:-1.3px;margin:0}h1 span{display:block}.job-title{font-size:13px;margin:14px 0 0;line-height:1.5;font-weight:500}.save-contact{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;font-weight:700;font-size:14px;min-height:57px;padding:14px 19px;border:2px solid #000;border-radius:12px;background:var(--yellow);box-shadow:3px 4px 0 #000;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}.save-contact:hover{transform:translate(-1px,-2px);box-shadow:4px 6px 0 #000;background:#ffda33}.save-contact:active{transform:translate(3px,4px);box-shadow:0 0 0 #000}.save-contact svg{width:21px;height:21px}
.contact-links{margin-top:22px}.contact-link{display:grid;grid-template-columns:35px minmax(0,1fr) 18px;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #0003;min-height:69px;position:relative}.contact-link:before{content:"";position:absolute;inset:4px -10px;border-radius:12px;background:#fff8;opacity:0;transition:opacity .25s;z-index:0}.contact-link:hover:before{opacity:1}.contact-link>*{position:relative}.link-icon{width:35px;height:35px;border-radius:50%;display:grid;place-items:center}.link-icon svg{width:21px;height:21px}.contact-link strong{display:block;font-size:12px;font-weight:700;line-height:1.5}.contact-link small{display:block;font-size:10px;font-weight:500;margin-top:2px;line-height:1.5;overflow-wrap:anywhere;color:#393222}.contact-link .arrow{width:17px;height:17px;transition:transform .3s var(--ease)}.contact-link:hover .arrow{transform:translate(2px,-2px)}.card-footer{display:flex;gap:16px;align-items:center;justify-content:space-between;padding-top:22px;margin-top:auto;font-size:10px}.card-footer>span{opacity:.6}.text-button{background:none;border:0;padding:3px 0;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700}.text-button svg{width:16px;height:16px}.text-button:hover{text-decoration:underline;text-underline-offset:4px}
.share-sheet{border:2px solid black;border-radius:24px;padding:0;width:min(380px,calc(100% - 32px));max-height:calc(100svh - 40px);overflow:auto;background:var(--cream);box-shadow:7px 8px 0 #000;opacity:0;transform:translateY(22px) scale(.98);transition:opacity .3s var(--ease),transform .4s var(--ease)}.share-sheet[open]{opacity:1;transform:translateY(0) scale(1)}.share-sheet::backdrop{background:#0008;backdrop-filter:blur(8px)}.sheet-inner{padding:28px 30px 30px;text-align:center;position:relative}.close-sheet{position:absolute;top:14px;right:14px;width:30px;height:30px}.close-sheet svg{width:16px;height:16px}.sheet-mascot{margin:0 auto 12px}.sheet-inner h2{font:400 31px/1.2 Sigmar,sans-serif;margin:0 0 9px}.sheet-inner>p{font-size:11px;line-height:1.6;margin:0}.qr-frame{background:white;padding:16px;border:1.5px solid #000;border-radius:15px;margin:20px auto 12px;width:210px;height:210px}.qr-frame svg{width:100%;height:100%;stroke:none;fill:#000;display:block}.sheet-inner .sheet-status{font-size:10px;margin-top:12px;line-height:1.6}.sheet-inner .qr-caption{font-size:10px;line-height:1.6;max-width:250px;margin-inline:auto;overflow-wrap:anywhere}.share-actions{display:flex;gap:10px;margin-top:20px}.share-actions button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:1.5px solid black;border-radius:10px;background:var(--yellow);padding:10px 15px;font-size:11px;font-weight:700;flex:1}.share-actions button:last-child{background:var(--blue)}.share-actions svg{width:17px;height:17px}.toast{position:fixed;z-index:10;left:50%;bottom:28px;transform:translate(-50%,20px);background:#000;color:var(--cream);padding:12px 20px;border-radius:40px;font-size:12px;line-height:1.5;max-width:calc(100% - 32px);width:max-content;text-align:center;pointer-events:none;opacity:0;transition:opacity .25s,transform .25s}.toast.is-visible{opacity:1;transform:translate(-50%,0)}
@starting-style{.share-sheet[open]{opacity:0;transform:translateY(22px) scale(.98)}}
.motion-paused .ribbon-group,.motion-paused .mascot,.page-hidden .ribbon-group,.page-hidden .mascot{animation-play-state:paused}
@keyframes card-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes rainbow-flow{from{transform:translate(0,0)}to{transform:translate(125.16512526px,120.87055646px)}}
@keyframes mascot-float{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-9px) rotate(3deg)}}
@media(min-width:1100px){.brand-side{min-height:750px}.namecard{grid-template-columns:46% 54%}}
@media(max-width:800px){.stage{padding:28px 24px 38px}.namecard{max-width:480px;display:block;border-radius:22px;box-shadow:6px 7px 0 #000}.preview-notice{max-width:480px}.brand-side{min-height:0;height:290px;border-right:0;border-bottom:2px solid #000;padding:30px}.ribbons{inset:-14%;width:128%;height:128%}.brand-motto{top:19px;left:19px;font-size:16px;padding:8px 12px 10px;border-width:1.5px}.brand-lockup{flex-direction:row;justify-content:center;gap:11px;padding-top:10px;transform:rotate(-7deg);max-width:360px}.mascot{width:130px;filter:drop-shadow(3px 4px 0 #f8edcc)}.wordmark{width:180px;filter:drop-shadow(3px 4px 0 #f8edcc)}.brand-bottom{bottom:17px;left:21px;right:21px;font-size:8px}.brand-bottom span:last-child{max-width:none}.motion-control{left:auto;right:16px;top:16px;bottom:auto;width:30px;height:30px}.motion-control svg{width:13px;height:13px}.contact-side{padding:23px 26px 24px}.identity{margin-top:18px;margin-bottom:23px}h1{font-size:38px;letter-spacing:-.9px}h1 span:first-child{margin-bottom:1px}.job-title{font-size:12px;margin-top:12px}.contact-links{margin-top:20px}.contact-link{min-height:68px;padding:13px 0;grid-template-columns:31px minmax(0,1fr) 17px;gap:10px}.link-icon{width:31px;height:31px}.contact-link strong{font-size:12px}.contact-link small{font-size:10px}.nickname{font-size:10px}.contact-top .icon-button{width:34px;height:34px}.contact-top .icon-button svg{width:17px;height:17px}.card-footer{font-size:9px;padding-top:21px}.text-button{font-size:9px}}
@media(max-width:380px){.stage{padding:20px 17px 30px}.contact-side{padding:21px}.brand-side{height:252px}.mascot{width:107px}.wordmark{width:157px}h1{font-size:34px}.preview-notice{font-size:9px}.preview-notice span{font-size:8px}.save-contact{font-size:13px}.card-footer{gap:8px}.contact-link small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.motion-control{display:none}.namecard,.ribbon-group,.mascot{animation:none}.share-sheet,.icon-button,.save-contact,.arrow,.toast{transition:none}.ribbon-group{will-change:auto}}