.demo-body{background:radial-gradient(ellipse at 60% 4%,rgba(105,76,179,.31),transparent 46%),linear-gradient(180deg,#121128 0%,#0c0d19 60%,#0a0b13 100%);min-height:100vh}.demo-body:before{display:none}.demo-header{border-bottom:1px solid #d2c6ff1a;background:#0d0d1a9a;backdrop-filter:blur(14px)}.demo-nav{min-height:81px;display:flex;align-items:center;justify-content:space-between}.demo-back{font-size:12px;color:#b9a8ec;font-weight:750}.demo-main{max-width:1020px;padding-top:72px;padding-bottom:56px}.demo-badge{margin:0 auto 30px;border:1px solid #9885dc66;border-radius:20px;background:#8e75dd13;color:#d5c6ff;letter-spacing:.15em;font-weight:800;font-size:10px;padding:7px 12px;width:max-content}.pulse-dot{width:6px;height:6px;border-radius:50%;background:#c2adff;display:inline-block;margin-right:6px}.demo-heading{text-align:center}.demo-heading .eyebrow{justify-content:center;font-size:10px;margin:0 0 17px}.demo-heading h1{font-size:clamp(47px,8vw,91px);line-height:1.06;letter-spacing:-.075em;margin:0}.demo-heading h1 span{color:#b6a0ff}.demo-heading>p:last-child{font-size:15px;color:#aea5c8;margin:18px 0 45px}.countdown-wrap{border:1px solid #8473b74a;border-radius:23px;background:linear-gradient(140deg,rgba(31,26,54,.93),rgba(19,18,36,.95));padding:28px;box-shadow:0 22px 70px #0005;position:relative;overflow:hidden}.countdown-wrap:after{content:"";position:absolute;right:-80px;top:-80px;width:230px;height:230px;border:1px solid #a58deb11;border-radius:50%;pointer-events:none}.status-row{display:flex;justify-content:space-between;color:#817b98;letter-spacing:.15em;font-size:10px;font-weight:800;gap:10px}.status-label{color:#c9b8fc}.status-spark{width:7px;height:7px;display:inline-block;background:#bca6ff;border-radius:50%;margin-right:7px}.counter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-top:27px}.counter-cell{padding:27px 10px 22px;text-align:center;background:#ffffff09;border-radius:17px;border:1px solid #a292ca40;box-shadow:inset 0 1px #ffffff08}.counter-cell strong{font-size:clamp(37px,7vw,72px);letter-spacing:-.07em;line-height:1.1;display:block;font-variant-numeric:tabular-nums}.counter-cell span{font-size:10px;color:#ada1c8;font-weight:800;letter-spacing:.2em}.countdown-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:25px}.countdown-bottom span:first-child{font-size:10px;letter-spacing:.17em;font-weight:800;color:#c5b4f8}.countdown-bottom p{font-size:12px;color:#8881a4;margin:6px 0 0}.countdown-symbol{font-size:24px;color:#9e87e0}.progress-container{padding-top:20px;margin-top:21px;border-top:1px solid #ffffff14}.progress-meta{display:flex;justify-content:space-between;color:#bca8fa;letter-spacing:.14em;font-size:10px;font-weight:800;margin-bottom:10px}.progress-track{height:7px;border-radius:20px;background:#ffffff14;overflow:hidden}.progress-track>div{height:100%;width:0;background:linear-gradient(90deg,#7158cb,#bca5ff);border-radius:20px;transition:width .2s}
.demo-toolbar{border:1px solid #77669346;background:#131322cc;border-radius:21px;margin-top:26px;padding:29px}.toolbar-header{display:flex;align-items:end;justify-content:space-between;gap:15px}.toolbar-header .eyebrow{margin:0 0 9px}.toolbar-header h2{font-size:27px;letter-spacing:-.04em;margin:0}.toolbar-header p:last-child{color:#a7a0bc;margin:9px 0 0;font-size:13px}.demo-toolbar-note{font-size:10px;color:#8f82af;letter-spacing:.12em;font-weight:800;white-space:nowrap}.demo-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:26px}.demo-mode{text-align:left;background:#1a182b;border:1px solid #74658f5b;border-radius:13px;padding:17px 18px;display:flex;flex-direction:column;align-items:flex-start;color:#ddd7ec;transition:background .15s,border-color .15s}.demo-mode:hover{border-color:#ac92ff}.demo-mode.active{background:linear-gradient(140deg,#4d3b83,#332657);border-color:#ae94f0;color:#fff}.mode-num{font-size:11px;color:#a18acb;font-weight:800;margin-bottom:18px}.demo-mode.active .mode-num{color:#dccaff}.demo-mode strong{font-size:14px}.demo-mode small{color:#938aa9;font-size:11px;margin-top:3px}.demo-mode.active small{color:#c4b3ee}.resume-btn{margin:20px auto 0;display:block;border:1px solid #8e75ca78;background:#251d3b;border-radius:10px;color:#d8caff;font-size:12px;font-weight:800;padding:12px 16px}.date-settings{margin:20px 0 0;border:1px solid #5e52783e;border-radius:17px;background:#ffffff03;padding:23px 29px;display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap}.settings-heading h2{font-size:19px;letter-spacing:-.035em;margin:0}.settings-heading p{font-size:12px;margin:5px 0 0;color:#878099}.date-inputs{display:flex;flex-wrap:wrap;gap:12px}.date-inputs label{font-size:9px;letter-spacing:.14em;color:#a69cbe;font-weight:800;display:grid;gap:7px}.date-inputs input{color-scheme:dark;border:1px solid #5f527c;background:#19172b;color:#f3efff;border-radius:8px;padding:11px 10px;max-width:190px;font-size:12px}.date-inputs input:focus{outline:2px solid #8464d4}.input-error{width:100%;color:#eaa9b1;font-size:12px;margin:0}.demo-endnote{text-align:center;color:#68617d;font-size:9px;letter-spacing:.23em;font-weight:800;margin-top:52px}.demo-endnote span{color:#967dde;padding:0 12px}.demo-body.holiday-active{background:radial-gradient(ellipse at 60% 4%,rgba(113,80,208,.4),transparent 48%),linear-gradient(180deg,#16132e,#0b0c18 75%)}.demo-body.holiday-active .countdown-wrap{border-color:#a58bfa7a}.demo-body.holiday-after .demo-heading h1 span{color:#ddd3ff}
@media(max-width:760px){.demo-main{padding-top:51px}.demo-heading>p:last-child{margin-bottom:32px}.counter-grid{gap:8px}.countdown-wrap{padding:20px}.counter-cell{padding:22px 5px 17px}.counter-cell strong{font-size:clamp(29px,6vw,50px)}.counter-cell span{font-size:8px}.toolbar-header{align-items:start;flex-direction:column}.demo-buttons{grid-template-columns:1fr}.demo-mode{min-height:68px;padding:13px 18px}.mode-num{margin-bottom:6px}.date-settings{align-items:start;flex-direction:column;gap:18px}.date-inputs{width:100%}.date-inputs label{flex:1}.date-inputs input{max-width:100%;width:100%}}
@media(max-width:420px){.demo-nav .brand-name strong{font-size:15px}.demo-nav .brand-mark{width:39px;height:39px}.demo-back{font-size:10px}.demo-heading h1{font-size:clamp(38px,10.3vw,50px)}.counter-cell strong{font-size:28px}.counter-cell{border-radius:11px}.counter-cell span{font-size:7px;letter-spacing:.13em}.countdown-bottom{gap:5px}.countdown-bottom p{font-size:10px}.status-row{font-size:9px}.countdown-wrap{padding:15px}.demo-toolbar{padding:20px}}