:root{color-scheme:light;--bg:#f3f4f7;--surface:rgba(255,255,255,.72);--solid:#fff;--ink:#17202e;--muted:#657286;--line:rgba(35,49,75,.13);--accent:#5668dc;--accent-soft:#e5e9ff;--lime:#c8e47a;--shadow:0 18px 44px rgba(32,46,74,.10);--sans:'DM Sans',system-ui,sans-serif;--serif:'Droid Serif',Georgia,serif;--mono:'DM Mono',monospace}
    [data-theme="dark"]{color-scheme:dark;--bg:#11141d;--surface:rgba(31,37,51,.76);--solid:#202635;--ink:#f1f3f7;--muted:#a6afc0;--line:rgba(228,235,255,.13);--accent:#a5b5ff;--accent-soft:#282f49;--lime:#d9ef86;--shadow:0 20px 50px rgba(0,0,0,.34)}
    *{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;min-height:100vh;overflow-x:hidden;background:radial-gradient(ellipse at 14% 5%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 36%),radial-gradient(ellipse at 92% 36%,color-mix(in srgb,var(--lime) 11%,transparent),transparent 31%),var(--bg);color:var(--ink);font-family:var(--sans);transition:background .3s,color .3s}body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 14% 5%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 36%),radial-gradient(ellipse at 92% 36%,color-mix(in srgb,var(--lime) 15%,transparent),transparent 31%)}a{color:inherit}.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.ambient:before,.ambient:after{content:"";position:absolute;width:32vw;height:32vw;min-width:240px;min-height:240px;border-radius:50%;filter:blur(70px);opacity:.16;animation:floatGlow 18s ease-in-out infinite alternate}.ambient:before{background:var(--accent);top:12%;left:-14%}.ambient:after{background:var(--lime);right:-16%;top:50%;animation-delay:-8s}@keyframes floatGlow{to{transform:translate3d(35px,-28px,0) scale(1.12)}}.wrap{width:min(1160px,calc(100% - 72px));margin:0 auto;position:relative;z-index:1}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--bg);font-size:12px;font-weight:800;letter-spacing:-.08em;box-shadow:0 5px 18px color-mix(in srgb,var(--accent) 25%,transparent)}.brand-copy{display:flex;flex-direction:column;gap:2px}.brand-copy strong{font-size:12px;letter-spacing:-.02em}.brand-copy small{font:8px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.head-right{display:flex;align-items:center;gap:28px}.nav{display:flex;align-items:center;gap:23px}.nav a{font-size:11px;color:var(--muted);text-decoration:none;transition:color .2s}.nav a:hover{color:var(--accent)}.nav a:last-child{color:var(--ink);font-weight:700}
    .theme-switch{display:flex;align-items:center;gap:9px;border:0;padding:5px;background:transparent;color:var(--muted);font:9px var(--mono);cursor:pointer}.switch-track{width:49px;height:28px;border:1px solid var(--line);border-radius:20px;background:var(--surface);display:flex;align-items:center;padding:3px;box-shadow:inset 0 2px 5px rgba(15,22,36,.07);transition:background .25s,border .25s}.switch-thumb{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:white;box-shadow:0 3px 8px color-mix(in srgb,var(--accent) 33%,transparent);transform:translateX(0);transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s}.switch-thumb svg{width:12px;height:12px}.switch-moon{display:none}[data-theme="dark"] .switch-thumb{transform:translateX(20px);background:var(--lime);color:#253014}[data-theme="dark"] .switch-sun{display:none}[data-theme="dark"] .switch-moon{display:block}
    .hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 275px;align-items:center;gap:54px;padding:60px 5% 53px;min-height:350px}.hero-copy{max-width:685px}.eyebrow{margin:0 0 12px;color:var(--accent);font:9px var(--mono);text-transform:uppercase;letter-spacing:.16em}.hero h1{margin:0;font:400 clamp(58px,7.4vw,88px)/.98 var(--serif);letter-spacing:-.065em}.hero-tagline{margin:12px 0 0;color:var(--accent);font:italic 400 clamp(23px,3vw,34px)/1.12 var(--serif);letter-spacing:-.025em}.hero-desc{max-width:520px;margin:16px 0 0;color:var(--muted);font-size:14px;line-height:1.65}.hero-actions{display:flex;align-items:center;gap:16px;margin-top:22px}.primary-link{display:inline-flex;align-items:center;gap:12px;padding:12px 16px;border-radius:9px;background:var(--ink);color:var(--bg);text-decoration:none;font-size:10px;font-weight:700;letter-spacing:.04em;box-shadow:0 8px 20px color-mix(in srgb,var(--ink) 13%,transparent);transition:transform .2s,box-shadow .2s}.primary-link:hover{transform:translateY(-2px);box-shadow:0 12px 25px color-mix(in srgb,var(--accent) 23%,transparent)}.primary-link span{font-size:15px}.hero-note{color:var(--muted);font:9px var(--mono)}.clock-card{position:relative;overflow:hidden;width:255px;padding:19px 20px 17px;border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);border-radius:19px;background:linear-gradient(140deg,color-mix(in srgb,var(--solid) 78%,transparent),color-mix(in srgb,var(--accent-soft) 54%,transparent));box-shadow:0 22px 48px color-mix(in srgb,var(--ink) 11%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 65%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.clock-card:after{content:"";position:absolute;right:-67px;top:-88px;width:160px;height:160px;border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);border-radius:50%;box-shadow:0 0 0 15px color-mix(in srgb,var(--accent) 5%,transparent),0 0 0 30px color-mix(in srgb,var(--accent) 4%,transparent)}.clock-label{display:flex;align-items:center;gap:8px;color:var(--muted);font:8px var(--mono);letter-spacing:.13em}.live-dot{width:7px;height:7px;border-radius:50%;background:#46b984;box-shadow:0 0 0 4px rgba(70,185,132,.13);animation:pulse 2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(70,185,132,0)}}.clock-time{position:relative;z-index:1;margin:12px 0 5px;font:500 35px/.98 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.08em;white-space:nowrap}.clock-meridiem{font-size:12px;letter-spacing:0;color:var(--accent)}.clock-seconds{font-size:12px;letter-spacing:0;color:var(--muted)}.clock-date{position:relative;z-index:1;color:var(--ink);font-size:10px;font-weight:600}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:24px 0 17px}.section-overline{margin:0 0 7px;color:var(--accent);font:8px var(--mono);letter-spacing:.16em;text-transform:uppercase}.section-head h2{margin:0;font-size:clamp(25px,3.2vw,34px);letter-spacing:-.06em;line-height:1}.section-side{max-width:300px;margin:0 0 2px;color:var(--muted);font-size:10px;line-height:1.5}.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.project{--tone:var(--accent);min-width:0;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:18px;background:var(--surface);box-shadow:0 10px 0 -6px color-mix(in srgb,var(--solid) 62%,transparent),0 20px 38px color-mix(in srgb,var(--ink) 10%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:box-shadow .25s,border-color .25s}.project:hover{box-shadow:0 12px 0 -6px color-mix(in srgb,var(--solid) 70%,transparent),0 28px 48px color-mix(in srgb,var(--ink) 17%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 48%,transparent);border-color:color-mix(in srgb,var(--tone) 38%,var(--line))}.offers{--tone:#596bdb}.cardswallah{--tone:#497bc8}.vaultwallah{--tone:#288b78}.clock-project{--tone:#238a80}.biodata{--tone:#c26251}.coming{--tone:#985baf}.project-visual{position:relative;height:156px;overflow:hidden;display:grid;place-items:center;background:var(--visual-bg)}.project-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--tone) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--tone) 8%,transparent) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,transparent,#000)}[data-theme="light"] .offers .project-visual{--visual-bg:#e8ebff}[data-theme="dark"] .offers .project-visual{--visual-bg:#282e48}[data-theme="light"] .cardswallah .project-visual{--visual-bg:#e5edf8}[data-theme="dark"] .cardswallah .project-visual{--visual-bg:#253248}[data-theme="light"] .vaultwallah .project-visual{--visual-bg:#e2f2ec}[data-theme="dark"] .vaultwallah .project-visual{--visual-bg:#213b37}[data-theme="light"] .clock-project .project-visual{--visual-bg:#e4f2ee}[data-theme="dark"] .clock-project .project-visual{--visual-bg:#203a37}[data-theme="light"] .biodata .project-visual{--visual-bg:#f8e8e2}[data-theme="dark"] .biodata .project-visual{--visual-bg:#3a2d32}[data-theme="light"] .coming .project-visual{--visual-bg:#efe6f6}[data-theme="dark"] .coming .project-visual{--visual-bg:#342b3b}.visual-label{position:absolute;top:13px;left:15px;color:var(--tone);font:8px var(--mono);letter-spacing:.11em;text-transform:uppercase}.visual-offer{position:relative;width:166px;height:79px;padding:11px 13px;border:1px solid #5a69c55c;border-radius:12px;background:linear-gradient(140deg,#fff,#f2f3ff);box-shadow:0 13px 23px #24326726;transform:rotate(-5deg);color:#28365e}.visual-offer-top{display:flex;justify-content:space-between;font:7px var(--mono);letter-spacing:.12em;color:#5366bd}.visual-percent{margin-top:7px;font:30px/.85 var(--serif)}.visual-caption{position:absolute;bottom:12px;right:11px;font:7px var(--mono);color:#626d91}.bank-graphic{position:relative;width:171px;height:97px;padding:11px 13px;border:1px solid #5271ad55;border-radius:13px;background:linear-gradient(145deg,#fbfdff,#dfe9f8);box-shadow:0 13px 22px #283c6428;transform:rotate(-4deg);color:#20385e}.bank-top{display:flex;justify-content:space-between;font:7px var(--mono);letter-spacing:.1em}.chip{width:18px;height:13px;margin-top:10px;border:1px solid #d2ab52;border-radius:4px}.bank-num{margin-top:8px;font:9px var(--mono);letter-spacing:.12em}.bank-meter{position:absolute;right:calc(50% - 104px);bottom:18px;padding:7px 9px;border:1px solid color-mix(in srgb,var(--tone) 25%,var(--line));border-radius:8px;background:var(--solid);box-shadow:0 8px 18px #283c641a;color:var(--tone);font:7px var(--mono);transform:rotate(4deg)}.vault-graphic{width:104px;height:112px;border-radius:18px;border:1px solid #278b7866;background:linear-gradient(145deg,#f8fffc,#d3eee5);color:#176254;box-shadow:0 14px 24px #1e564c26;display:grid;place-items:center;transform:rotate(3deg)}.vault-graphic svg{width:48px;height:48px}.clock-graphic{width:93px;height:93px;position:relative;border:2px solid #238a80;border-radius:50%;background:var(--surface);display:grid;place-items:center;box-shadow:0 11px 26px #168f8622;animation:clockBob 7s ease-in-out infinite}.clock-graphic:before{content:"";position:absolute;inset:8px;border:1px dashed color-mix(in srgb,var(--tone) 48%,transparent);border-radius:50%}.clock-numerals{font:12px var(--mono);color:var(--ink)}.clock-hand{position:absolute;left:50%;top:21px;width:2px;height:24px;background:var(--accent);transform-origin:bottom;animation:tick 22s linear infinite}.clock-center{position:absolute;width:5px;height:5px;left:calc(50% - 2.5px);top:calc(50% - 2.5px);border-radius:50%;background:var(--accent)}@keyframes tick{to{transform:rotate(360deg)}}@keyframes clockBob{50%{transform:translateY(-4px)}}.bio-sheet{position:relative;width:116px;height:112px;padding:12px;border:1px solid #bf766866;border-radius:11px;background:linear-gradient(145deg,#fffaf7,#f3ddd5);box-shadow:0 14px 22px #793f3126;transform:rotate(-3deg)}.bio-banner{height:25px;padding:7px 8px;border-radius:5px;background:#be6452;color:white;font:7px var(--mono);letter-spacing:.11em}.bio-person{display:flex;align-items:center;gap:7px;margin-top:10px}.bio-avatar{width:20px;height:20px;border-radius:50%;background:#e7b19b}.bio-lines{flex:1;height:4px;border-radius:4px;background:#d7aaa0;box-shadow:0 6px #ead0c8,0 12px #ead0c8}.bio-copy{margin-top:9px;height:3px;border-radius:3px;background:#e5d1c9;box-shadow:0 7px #e5d1c9,0 14px #e5d1c9,0 21px #e5d1c9}.soon-orbit{width:121px;height:112px;position:relative;display:grid;place-items:center}.soon-orbit:before,.soon-orbit:after{content:"";position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--tone) 50%,transparent);border-radius:50%;transform:rotate(-28deg) scaleY(.48);animation:orbit 18s linear infinite}.soon-orbit:after{transform:rotate(33deg) scaleY(.48);animation-direction:reverse}.soon-core{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--surface);border:1px solid color-mix(in srgb,var(--tone) 42%,transparent);box-shadow:0 10px 23px color-mix(in srgb,var(--tone) 18%,transparent);color:var(--tone);font:7px/1.5 var(--mono);letter-spacing:.07em}.project-content{padding:15px 17px 16px;display:flex;flex-direction:column;flex:1}.project-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--tone);font:8px var(--mono)}.project-meta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-meta span:last-child{flex:none;opacity:.8}.project h3{margin:10px 0 6px;font-size:18px;line-height:1.1;letter-spacing:-.04em}.project p{margin:0 0 15px;color:var(--muted);font-size:11px;line-height:1.55;min-height:51px}.project-link{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:var(--ink);font-size:10px;font-weight:700}.project-link b{color:var(--tone);font-size:15px;font-weight:500}.project-status{display:inline-flex;align-items:center;gap:7px}.project-status:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 16%,transparent)}
    .social-section{padding:45px 0 40px}.social-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px}.social-heading h2{margin:0;font-size:clamp(24px,3vw,32px);letter-spacing:-.06em}.social-heading p{margin:0 0 2px;color:var(--muted);font-size:10px}.social-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.social-link{min-height:77px;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:var(--surface);text-decoration:none;display:flex;align-items:center;gap:10px;box-shadow:0 8px 22px color-mix(in srgb,var(--ink) 6%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .2s,box-shadow .2s}.social-link:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:0 13px 26px color-mix(in srgb,var(--ink) 12%,transparent)}.social-icon{flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}.social-icon svg{display:block;width:19px;height:19px}.social-icon.brand-x{background:#111;color:white}.social-icon.brand-instagram{background:#f2e6e2;color:#ba4d75}.social-icon.brand-linkedin{background:#e2ebf5;color:#0a66c2}.social-icon.brand-facebook{background:#e4eafa;color:#1877f2}.social-icon.brand-snapchat{background:#f2e98c;color:#171717}.social-icon.brand-whatsapp{background:#dff1e3;color:#168b58}.social-details{min-width:0}.social-name{display:block;font-size:11px;font-weight:700;white-space:nowrap}.social-handle{display:block;margin-top:3px;color:var(--muted);font:8px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.social-arrow{margin-left:auto;color:var(--muted);font-size:12px}.know-me{background:var(--surface)}.know-me .social-icon{font-weight:800;letter-spacing:-.08em}
    footer{padding:16px 0 22px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font:9px var(--mono);letter-spacing:.04em}footer .heart{display:inline-block;color:var(--accent);font-size:13px;vertical-align:-1px;animation:heartbeat 2.4s ease-in-out infinite}footer a{color:var(--ink);text-decoration:none}footer a:hover{color:var(--accent)}@keyframes heartbeat{0%,100%{transform:scale(1)}10%{transform:scale(1.15)}20%{transform:scale(1)}}
    @media(max-width:850px){.wrap{width:calc(100% - 48px)}.hero{grid-template-columns:minmax(0,1fr) 240px;gap:28px;padding-inline:2%}.clock-card{width:240px}.projects{grid-template-columns:repeat(2,minmax(0,1fr))}.social-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
    @media(max-width:620px){.wrap{width:calc(100% - 32px)}.topbar{height:65px}.brand{gap:8px}.brand-mark{width:33px;height:33px;font-size:10px}.brand-copy strong{font-size:11px}.brand-copy small{font-size:7px}.head-right{gap:0}.nav{display:none}.theme-switch{gap:0;padding:3px}.theme-switch .switch-caption{display:none}.switch-track{width:47px;height:27px}.switch-thumb{width:19px;height:19px}[data-theme="dark"] .switch-thumb{transform:translateX(18px)}.hero{display:flex;flex-direction:column;gap:18px;min-height:0;padding:32px 0 27px;text-align:center}.hero:after{width:190px;height:190px;right:50%;transform:translateX(50%);top:13px}.hero-copy{position:relative;z-index:1}.eyebrow{font-size:8px;margin-bottom:10px}.hero h1{font-size:clamp(43px,12.4vw,64px);line-height:1;letter-spacing:-.06em}.hero-tagline{margin-top:8px;font-size:24px}.hero-desc{max-width:345px;margin:11px auto 0;font-size:12px;line-height:1.55}.hero-actions{margin-top:15px;justify-content:center;flex-direction:column;gap:8px}.primary-link{padding:11px 14px;font-size:9px}.hero-note{font-size:8px}.clock-card{width:auto;max-width:100%;padding:9px 12px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:10px}.clock-card:after{width:100px;height:100px;right:-50px;top:-45px}.clock-label{font-size:7px;gap:6px}.clock-time{font-size:19px;margin:0;letter-spacing:-.07em}.clock-meridiem,.clock-seconds{font-size:9px}.clock-date{font-size:8px;border-left:1px solid var(--line);padding-left:10px}.section-head{display:block;text-align:center;margin:27px 0 14px}.section-overline{margin-bottom:6px;font-size:7px}.section-head h2{font-size:27px}.section-side{max-width:300px;margin:7px auto 0;font-size:9px}.projects{grid-template-columns:1fr;gap:11px}.project{border-radius:16px}.project-visual{height:140px}.project-content{padding:14px 15px 15px;text-align:left;align-items:stretch}.project-meta{font-size:7px}.project h3{font-size:18px;margin:8px 0 5px}.project p{font-size:11px;min-height:0;margin-bottom:12px}.project-link{font-size:10px}.social-section{padding:34px 0 28px}.social-heading{display:block;text-align:center;margin-bottom:13px}.social-heading h2{font-size:25px}.social-heading p{margin-top:5px;font-size:9px}.social-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.social-link{min-height:75px;padding:9px 8px;gap:8px}.social-icon{flex-basis:32px;width:32px;height:32px;border-radius:9px}.social-icon svg{width:17px;height:17px}.social-name{font-size:10px}.social-handle{font-size:7px}.social-arrow{font-size:10px}.ambient:before,.ambient:after{width:70vw;height:70vw;min-width:200px;min-height:200px;filter:blur(58px);opacity:.12}}
    @media(max-width:360px){.wrap{width:calc(100% - 24px)}.hero h1{font-size:42px}.clock-card{gap:7px;padding-inline:9px}.clock-label{font-size:6px}.clock-time{font-size:17px}.clock-date{padding-left:7px}.social-link{padding-inline:6px}.social-name{font-size:9px}.social-handle{font-size:6px}}
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
    /* Refined identity, day/night control, and a clock that has room to breathe. */
    .brand-mark{position:relative;isolation:isolate;overflow:visible;background:linear-gradient(145deg,#242d4e,#5869d6);color:#fff;border:1px solid color-mix(in srgb,#fff 36%,transparent);box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 28%,transparent),inset 0 1px 0 #ffffff73}
    .brand-mark:before{content:"";position:absolute;inset:3px;border:1px solid #ffffff54;border-radius:50%;pointer-events:none}
    .brand-mark:after{content:"✦";position:absolute;right:-4px;top:-5px;width:14px;height:14px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--solid) 75%,transparent);border-radius:50%;background:var(--lime);color:#26304c;font-size:8px;box-shadow:0 2px 8px #11142835;animation:brandSpark 4s ease-in-out infinite}
    @keyframes brandSpark{50%{transform:rotate(45deg) scale(1.12)}}
    .brand-copy small{display:none}
    .theme-switch{gap:9px}
    .switch-track{position:relative;isolation:isolate;width:58px;height:32px;padding:4px;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:20px;background:linear-gradient(115deg,#f7d887 0%,#f8e8b4 48%,#b9d3ee 100%);box-shadow:inset 0 1px 3px #43516b20,0 3px 10px #26304c14;transition:background .55s,border-color .35s,box-shadow .35s}
    .switch-track:before,.switch-track:after{content:"";position:absolute;z-index:-1;pointer-events:none;transition:opacity .4s,transform .55s}
    .switch-track:before{width:18px;height:7px;right:5px;bottom:6px;border-radius:9px;background:#fff9;filter:blur(.2px);box-shadow:5px 2px 0 -1px #fff8}
    .switch-track:after{width:2px;height:2px;right:11px;top:6px;border-radius:50%;background:#fff;opacity:0;box-shadow:-8px 5px 0 #fff,6px 11px 0 #fff,-2px 15px 0 #fff;transform:scale(.4)}
    .switch-thumb{position:relative;z-index:1;width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff8b0,#ffb83f 72%);color:#a75d10;box-shadow:0 2px 8px #9e6a2d60,0 0 0 3px #fff5;transform:translateX(0);transition:transform .55s cubic-bezier(.2,.85,.25,1.3),background .4s,color .4s,box-shadow .4s}
    .switch-thumb svg{width:14px;height:14px;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .25s}
    .switch-sun{animation:sunRays 12s linear infinite}.switch-moon{display:none}
    @keyframes sunRays{to{transform:rotate(360deg)}}
    [data-theme="dark"] .switch-track{background:linear-gradient(115deg,#222a49,#171d35 70%,#343b60);border-color:#aab6ff4f;box-shadow:inset 0 1px 4px #05081980,0 3px 12px #0004}
    [data-theme="dark"] .switch-track:before{opacity:0;transform:translateY(8px)}[data-theme="dark"] .switch-track:after{opacity:.85;transform:scale(1)}
    [data-theme="dark"] .switch-thumb{transform:translateX(26px);background:radial-gradient(circle at 32% 28%,#fff,#d6dcff 76%);color:#626fa8;box-shadow:0 2px 9px #bfcaff55,0 0 0 3px #aab6ff1c}
    [data-theme="dark"] .switch-sun{display:none}[data-theme="dark"] .switch-moon{display:block;transform:rotate(-22deg)}
    .theme-switch:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px}
    .clock-card{width:270px;min-height:145px;padding:20px 23px 17px;display:grid;grid-template-columns:1fr;align-content:center;gap:0}
    .clock-label{position:relative;z-index:1;font-size:8px}
    .clock-time{display:flex;align-items:baseline;gap:6px;margin:11px 0 9px;font-size:34px;letter-spacing:-.075em;line-height:1}
    .clock-seconds{font-size:15px;letter-spacing:-.04em;color:var(--muted)}
    .clock-meridiem{font:500 11px var(--mono);letter-spacing:.02em;color:var(--accent)}
    .clock-date{padding-top:10px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.01em}
    @media(max-width:850px){.clock-card{width:250px}}
    @media(max-width:620px){.brand-copy small{display:none}.switch-track{width:58px;height:32px}.switch-thumb{width:22px;height:22px;flex-basis:22px}[data-theme="dark"] .switch-thumb{transform:translateX(26px)}.clock-card{width:min(290px,100%);max-width:100%;min-height:0;padding:15px 19px 14px;display:grid;justify-items:center;gap:0;border-radius:16px}.clock-card:after{width:110px;height:110px;right:-48px;top:-58px}.clock-label{font-size:7px}.clock-time{justify-content:center;margin:9px 0 8px;font-size:clamp(25px,8vw,31px);gap:6px}.clock-seconds{font-size:13px}.clock-meridiem{font-size:10px}.clock-date{padding:8px 0 0;border:0;border-top:1px solid var(--line);text-align:center;font-size:10px;width:100%}}
    @media(max-width:360px){.clock-card{gap:0;padding:13px 15px}.clock-time{font-size:25px}.clock-seconds{font-size:12px}.clock-date{padding:7px 0 0}}

    /* Small playful details and a compact, consistently aligned clock. */
    .brand-mark{font-size:20px;letter-spacing:normal;animation:wandFloat 3.2s ease-in-out infinite}
    .brand-mark:after{content:none}
    @keyframes wandFloat{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-3px) rotate(7deg)}}
    .switch-track:before{z-index:1;width:13px;height:6px;right:5px;bottom:7px;border-radius:8px;background:#fff;filter:none;box-shadow:4px -3px 0 -1px #ffffffed,7px 0 0 -1px #ffffffd9;animation:cloudDrift 3.2s ease-in-out infinite alternate}
    .switch-track:after{z-index:1;right:39px;top:8px;width:2px;height:2px;border-radius:50%;background:#fff;opacity:0;box-shadow:-7px 5px 0 #fff,7px 9px 0 #fff,-2px 14px 0 #fff;transform:scale(.55);animation:starTwinkle 1.8s ease-in-out infinite alternate}
    .switch-thumb{z-index:2}
    [data-theme="dark"] .switch-track:before{opacity:0;animation:none}
    [data-theme="dark"] .switch-track:after{opacity:.9;animation:starTwinkle 1.8s ease-in-out infinite alternate}
    [data-theme="dark"] .switch-moon{animation:moonSway 3.4s ease-in-out infinite}
    @keyframes cloudDrift{to{transform:translateX(-5px)}}
    @keyframes starTwinkle{0%{opacity:.45;transform:scale(.65)}100%{opacity:1;transform:scale(1.1)}}
    @keyframes moonSway{0%,100%{transform:rotate(-18deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-1px)}}
    .hero{grid-template-columns:minmax(0,1fr) max-content;gap:34px}
    .clock-card{width:max-content;min-width:0;min-height:0;padding:15px 18px 13px;justify-self:end;border-radius:16px}
    .clock-card:after{display:none}
    .clock-label{gap:8px;font-size:8px;justify-self:start}
    .clock-time{justify-content:flex-start;margin:9px 0 8px;font-size:32px;gap:6px}
    .clock-date{width:100%;padding-top:8px;border-top:1px solid var(--line);font-size:11px;white-space:nowrap}
    @media(max-width:850px){.hero{grid-template-columns:minmax(0,1fr) max-content;gap:24px}.clock-card{width:max-content}}
    @media(max-width:620px){.hero{gap:16px}.clock-card{width:max-content;max-width:100%;align-self:center;justify-self:center;padding:11px 14px 10px;justify-items:stretch}.clock-label{justify-self:start;font-size:7px;gap:7px}.clock-time{justify-content:flex-start;margin:7px 0 6px;font-size:clamp(25px,7.5vw,30px);gap:5px}.clock-seconds{font-size:12px}.clock-meridiem{font-size:10px}.clock-date{padding-top:6px;text-align:left;font-size:10px}}
    @media(max-width:360px){.clock-card{padding:10px 12px 9px}.clock-time{font-size:24px}.clock-date{font-size:9px}}

    /* Fresh, soft-focus sea glass details and quieter motion. */
    .brand-mark{font-size:21px;animation:humanBob 3.8s ease-in-out infinite}
    @keyframes humanBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
    .hero-tagline{display:none}
    .theme-switch .switch-caption{display:none}
    .switch-track{background:linear-gradient(135deg,#73b8ec,#9bd3f3 58%,#c2e6fa)!important}
    [data-theme="dark"] .switch-track{background:linear-gradient(135deg,#202a4b,#171e38 75%,#293354)!important}
    .switch-track:before,.switch-track:after{content:none!important;animation:none!important}
    .switch-cloud,.switch-star{position:absolute;display:block;pointer-events:none}
    .switch-cloud{z-index:1;height:5px;border-radius:8px;background:#f8fcff;box-shadow:0 1px 2px #426b8a38;animation:cloudSail 5s ease-in-out infinite alternate}
    .cloud-large{width:12px;right:4px;top:8px}.cloud-large:before,.cloud-large:after{content:"";position:absolute;bottom:0;border-radius:50%;background:inherit}.cloud-large:before{width:6px;height:6px;left:2px}.cloud-large:after{width:8px;height:8px;left:5px}
    .cloud-small{width:8px;height:3px;right:12px;bottom:7px;animation-duration:4s;animation-direction:alternate-reverse}.cloud-small:before{content:"";position:absolute;width:5px;height:5px;left:1px;bottom:0;border-radius:50%;background:inherit}
    .cloud-tiny{width:5px;height:2px;right:1px;bottom:5px;animation-duration:6s}
    [data-theme="dark"] .switch-cloud{opacity:0}
    .switch-star{z-index:1;width:2px;height:2px;border-radius:50%;background:#f9fbff;opacity:0;box-shadow:0 0 4px #dfe7ff;animation:starTravel 3.6s linear infinite}
    .star-one{left:7px;top:7px}.star-two{left:17px;top:18px;animation-duration:4.7s;animation-delay:-1.8s}.star-three{left:23px;top:6px;animation-duration:5.4s;animation-delay:-3s}
    [data-theme="dark"] .switch-star{opacity:.95}
    @keyframes cloudSail{to{transform:translateX(-4px)}}
    @keyframes starTravel{0%{transform:translate(0,0) scale(.7);opacity:.2}30%{opacity:1}70%{opacity:.85}100%{transform:translate(5px,-7px) scale(.5);opacity:.1}}
    [data-theme="dark"] .switch-moon{animation:moonSway 4.2s ease-in-out infinite}
    .clock-card{isolation:isolate;overflow:hidden;padding:17px 19px 15px;border:1px solid color-mix(in srgb,#fff 58%,var(--accent));border-radius:19px;background:linear-gradient(145deg,color-mix(in srgb,#fff 76%,var(--accent-soft)),color-mix(in srgb,#b8e3ec 31%,var(--solid)) 46%,color-mix(in srgb,#fff 52%,var(--accent-soft)));box-shadow:0 16px 34px color-mix(in srgb,#28405e 17%,transparent),inset 0 1px 0 #ffffffdb,inset 0 -1px 0 #688da62b;backdrop-filter:blur(24px) saturate(1.35);-webkit-backdrop-filter:blur(24px) saturate(1.35);animation:seaGlassFloat 7s ease-in-out infinite;transform-style:preserve-3d;transition:box-shadow .3s,border-color .3s}
    [data-theme="dark"] .clock-card{border-color:#c6ddff32;background:linear-gradient(145deg,#d9f2f41a,#273b58b8 48%,#83c9cf20);box-shadow:0 18px 42px #02081270,inset 0 1px 0 #ffffff35,inset 0 -1px 0 #a5d9e733}
    .clock-card:before{content:"";position:absolute;z-index:-1;inset:1px;border-radius:inherit;background:linear-gradient(118deg,#ffffff85 0%,transparent 31%,#a8e9e844 53%,transparent 77%);background-size:220% 100%;animation:glassSheen 8s ease-in-out infinite;pointer-events:none}
    .clock-card:after{display:none}
    @keyframes seaGlassFloat{0%,100%{transform:perspective(700px) rotateX(0deg) rotateY(0deg) translateY(0)}50%{transform:perspective(700px) rotateX(1deg) rotateY(-1.4deg) translateY(-3px)}}
    @keyframes glassSheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
    .clock-label,.clock-time,.clock-date{position:relative;z-index:1}
    .clock-time{font-size:34px;text-shadow:0 2px 14px color-mix(in srgb,var(--accent) 16%,transparent)}
    .clock-date{font-weight:600}
    .ambient{background:radial-gradient(ellipse at 18% 14%,color-mix(in srgb,#66bce9 15%,transparent),transparent 32%),radial-gradient(ellipse at 83% 43%,color-mix(in srgb,#6fd5bf 11%,transparent),transparent 31%),radial-gradient(ellipse at 45% 88%,color-mix(in srgb,#9b91eb 10%,transparent),transparent 33%)}
    [data-theme="dark"] .ambient{background:radial-gradient(ellipse at 18% 14%,#4166a327,transparent 34%),radial-gradient(ellipse at 83% 43%,#44b4a41a,transparent 32%),radial-gradient(ellipse at 45% 88%,#7661bd1b,transparent 35%)}
    .ambient-art{position:absolute;width:74px;height:58px;color:var(--accent);opacity:.13;filter:drop-shadow(0 8px 14px color-mix(in srgb,var(--accent) 18%,transparent));animation:ambientDrift 12s ease-in-out infinite alternate}
    .art-card{top:17%;left:6%;transform:rotate(-13deg)}.art-clock{width:62px;height:62px;top:35%;right:7%;animation-delay:-4s}.art-mountain{width:88px;height:62px;bottom:13%;left:13%;animation-delay:-7s}.art-ticket{width:68px;height:55px;right:14%;bottom:12%;animation-delay:-2s}
    @keyframes ambientDrift{to{translate:0 -12px;rotate:3deg}}
    footer .heart{color:#e53f58;animation:heartFade 1.7s ease-in-out infinite}
    @keyframes heartFade{0%,100%{opacity:.38;transform:scale(.94)}50%{opacity:1;transform:scale(1.08)}}
    @media(max-width:620px){.ambient-art{opacity:.09}.art-card{left:1%;top:13%}.art-clock{right:0;top:41%}.art-mountain{left:3%;bottom:8%}.art-ticket{right:4%;bottom:7%}.clock-card{padding:14px 16px 12px}}
    @media(prefers-reduced-motion:reduce){.brand-mark,.switch-cloud,.switch-star,.switch-moon,.clock-card,.clock-card:before,.ambient-art,footer .heart{animation:none!important}}

    /* Let the clock's sky tell the time of day. */
    .clock-card{position:relative}
    .clock-card:before{animation:none;background:linear-gradient(120deg,#ffffff55,transparent 43%,#a8e9e822 70%,transparent 90%)}
    .clock-sky{position:absolute;z-index:0;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
    .clock-sky:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--solid) 35%,transparent),transparent 92%)}
    .sky-day,.sky-night{position:absolute;inset:0;transition:opacity .55s ease}
    .sky-day{opacity:1;background:linear-gradient(135deg,#a9d9ef33,#f8e6ac25 75%)}
    .sky-night{opacity:0;background:linear-gradient(135deg,#253e7022,#7561a32b 75%)}
    [data-theme="dark"] .sky-day{opacity:0}[data-theme="dark"] .sky-night{opacity:1}
    .sky-sun{position:absolute;right:22px;top:18px;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#fff8cf,#ffd66f 55%,#ffb94e);box-shadow:0 0 14px 5px #ffd77a70,0 0 34px 14px #ffd77a3d;filter:blur(1px);animation:sunDrift 8s ease-in-out infinite}
    .sky-sun:after{content:"";position:absolute;inset:-8px;border:1px solid #ffe8a36b;border-radius:50%;box-shadow:0 0 0 5px #ffe8a329;animation:sunHalo 7s ease-in-out infinite}
    .sky-cloud{position:absolute;height:12px;border-radius:18px;background:linear-gradient(180deg,#fffef4e8,#d8f0f5b8);filter:blur(2.4px);box-shadow:0 4px 10px #719eb42e;animation:cloudPass 15s ease-in-out infinite alternate}
    .sky-cloud:before,.sky-cloud:after{content:"";position:absolute;bottom:2px;border-radius:50%;background:inherit}
    .sky-cloud:before{width:22px;height:20px;left:12px}.sky-cloud:after{width:16px;height:15px;left:30px}
    .sky-cloud-large{width:66px;right:-5px;top:40px}.sky-cloud-small{width:43px;left:12px;top:19px;transform:scale(.75);animation-duration:19s;animation-direction:alternate-reverse}.sky-cloud-tiny{width:26px;right:62px;bottom:13px;transform:scale(.55);animation-duration:12s}
    .sky-night{background:linear-gradient(135deg,#18264b70,#5a4f8338)}
    .sky-moon{position:absolute;right:29px;top:20px;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffefa,#e2eaff 66%,#bdc9f1);box-shadow:0 0 18px 5px #c7d7ff4a,0 0 35px 14px #c6d6ff2a;filter:blur(.8px);animation:moonFloat 7s ease-in-out infinite}
    .sky-moon:after{content:"";position:absolute;width:33px;height:33px;left:12px;top:-6px;border-radius:50%;background:#34446e;opacity:.78;filter:blur(1px)}
    .sky-star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fffbdc;box-shadow:0 0 7px 2px #dae4ff8c;filter:blur(.5px);animation:skyStarTravel 8s linear infinite}
    .star-a{left:25px;top:22px}.star-b{left:72px;top:48px;animation-delay:-2s;animation-duration:11s}.star-c{right:22px;bottom:20px;animation-delay:-5s;animation-duration:9s}.star-d{left:48%;top:17px;animation-delay:-3s;animation-duration:13s}
    .clock-label,.clock-time,.clock-date{z-index:2}
    .clock-time{gap:2px}.clock-seconds:before{content:":";padding-right:1px}.clock-seconds{font-size:inherit;letter-spacing:inherit}
    @keyframes sunDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-5px,3px)}}
    @keyframes sunHalo{50%{transform:scale(1.11);opacity:.55}}
    @keyframes cloudPass{0%{translate:-5px 0}100%{translate:7px -3px}}
    @keyframes moonFloat{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(-4px,3px) rotate(4deg)}}
    @keyframes skyStarTravel{0%{translate:0 0;opacity:.25}25%{opacity:1}60%{translate:6px -5px;opacity:.8}100%{translate:11px -10px;opacity:.2}}
    @media(max-width:620px){.sky-sun{right:15px;top:13px;width:34px;height:34px}.sky-cloud-large{top:33px}.sky-cloud-small{left:4px;top:12px}.sky-moon{right:20px;top:14px;width:31px;height:31px}.sky-moon:after{width:29px;height:29px;left:10px;top:-5px}.clock-time{font-size:clamp(24px,7.5vw,30px);gap:1px}.clock-seconds{font-size:inherit}}
    @media(max-width:360px){.clock-time{font-size:23px}}
    @media(prefers-reduced-motion:reduce){.sky-sun,.sky-sun:after,.sky-cloud,.sky-moon,.sky-star{animation:none!important}}
    .clock-time .clock-seconds{position:relative;z-index:3;align-self:baseline;font-size:.62em!important;line-height:1;letter-spacing:-.04em;color:#24375a;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:0 1px 2px #ffffffd9}
    [data-theme="dark"] .clock-time .clock-seconds{color:#e4edff;text-shadow:0 1px 4px #10182fe6}

    @media(max-width:620px){
      .hero-copy{display:contents}
      .hero .eyebrow{order:1}
      .hero h1{order:2}
      .hero-desc{order:3}
      .clock-card{order:4}
      .hero-actions{order:5}
      .primary-link>span{font-size:0}
      .primary-link>span:after{content:"👇";font-size:16px}
    }