/* ============================================================ Ecomeal — stylesheet Tokens, type, motion and every component. Theme is driven by [data-theme] on ; a section with .inv automatically flips to the opposite palette. ============================================================ */ /* ═══ palette: one set of names, swapped by theme and by .inv ═══ */ :root{ --bg:#060B08; --bg2:#0B1510; --bg3:#121E17; --fg:#E9F1E8; --fg2:rgba(233,241,232,.6); --fg3:rgba(233,241,232,.36); --line:rgba(233,241,232,.14); --line2:rgba(233,241,232,.07); --lime:#C7F04A; --on-lime:#0A1410; --clay:#E8724B; --sans:"Instrument Sans",system-ui,sans-serif; --serif:"Instrument Serif",Georgia,serif; --mono:"IBM Plex Mono",monospace; --gut:clamp(18px,4.6vw,60px); --max:1300px; --e:cubic-bezier(.22,.61,.24,1); --eio:cubic-bezier(.76,0,.24,1); --spring:cubic-bezier(.34,1.4,.5,1); --d1:clamp(2.6rem,9.4vw,8.4rem); --d2:clamp(2rem,5.6vw,4.2rem); --d3:clamp(1.35rem,2.9vw,2.1rem); --tb:clamp(.96rem,.93rem + .18vw,1.08rem); --ts:clamp(.83rem,.8rem + .16vw,.92rem); --tm:10.5px; --pad:clamp(56px,8.5vh,110px); --logo:url("../assets/logo.png"); } .inv{--bg:#F5F3EC;--bg2:#FFFFFF;--bg3:#EAE7DC;--fg:#0A1410;--fg2:rgba(10,20,16,.62);--fg3:rgba(10,20,16,.42); --line:rgba(10,20,16,.15);--line2:rgba(10,20,16,.08)} [data-theme=day]{--bg:#F5F3EC;--bg2:#FFFFFF;--bg3:#EAE7DC;--fg:#0A1410;--fg2:rgba(10,20,16,.62);--fg3:rgba(10,20,16,.42); --line:rgba(10,20,16,.15);--line2:rgba(10,20,16,.08)} [data-theme=day] .inv{--bg:#060B08;--bg2:#0B1510;--bg3:#121E17;--fg:#E9F1E8;--fg2:rgba(233,241,232,.6); --fg3:rgba(233,241,232,.36);--line:rgba(233,241,232,.14);--line2:rgba(233,241,232,.07)} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg2) 60%,var(--bg)) 45%,var(--bg));color:var(--fg);font-family:var(--sans);font-size:var(--tb);line-height:1.5; -webkit-font-smoothing:antialiased;overflow-x:clip;font-variant-numeric:tabular-nums; transition:background .6s var(--e),color .6s var(--e)} h1,h2,h3,p{margin:0}ul{margin:0;padding:0;list-style:none} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} canvas,svg,img{display:block;max-width:100%} :focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:3px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .u{width:min(100% - (var(--gut) * 2),var(--max));margin-inline:auto} section{position:relative;overflow:clip;color:var(--fg);transition:color .6s var(--e)} body::before{content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none; background: radial-gradient(38% 34% at 16% 10%,color-mix(in srgb,var(--lime) 20%,transparent),transparent 68%), radial-gradient(42% 38% at 84% 20%,color-mix(in srgb,#2E8B57 34%,transparent),transparent 70%), radial-gradient(46% 40% at 66% 74%,color-mix(in srgb,#7C4DBE 26%,transparent),transparent 72%), radial-gradient(40% 36% at 24% 88%,color-mix(in srgb,#E8724B 18%,transparent),transparent 70%); filter:blur(40px);opacity:.75;animation:drift 34s ease-in-out infinite alternate} @keyframes drift{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-3%,2%,0) scale(1.08)} 100%{transform:translate3d(3%,-2.5%,0) scale(1.04)}} .inv{background: radial-gradient(60% 50% at 20% 0%,color-mix(in srgb,var(--lime) 12%,transparent),transparent 70%), radial-gradient(60% 60% at 90% 100%,color-mix(in srgb,#7C4DBE 22%,transparent),transparent 70%), var(--bg)} body::after{content:"";position:fixed;inset:0;z-index:400;pointer-events:none;opacity:.35; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");mix-blend-mode:overlay} .d1{font-size:var(--d1);line-height:.87;letter-spacing:-.05em;font-weight:500} .d2{font-size:var(--d2);line-height:.96;letter-spacing:-.042em;font-weight:500} .d3{font-size:var(--d3);line-height:1.1;letter-spacing:-.03em;font-weight:500} .it{font-family:var(--serif);font-style:italic;font-weight:400} .mo{font-family:var(--mono);font-size:var(--tm);letter-spacing:.11em;text-transform:uppercase;color:var(--fg3)} .sub{color:var(--fg2);font-size:var(--ts);max-width:40ch;line-height:1.55} /* ═══ buttons + micro-states ═══ */ .b{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:3px; font-size:var(--ts);font-weight:500;letter-spacing:-.01em;overflow:hidden; transition:background .35s var(--e),color .35s var(--e),border-color .35s var(--e),transform .2s var(--e)} .b span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px} .b i{width:5px;height:5px;border-radius:50%;background:currentColor;transition:transform .4s var(--spring)} .b:hover i{transform:scale(2.4)} .b::before{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transform:translateY(101%); transition:transform .45s var(--eio),opacity .45s} .b:hover::before{transform:translateY(0);opacity:.12} .b:active{transform:scale(.975)} .b1{background:var(--lime);color:var(--on-lime)} .b2{border:1px solid var(--line);color:var(--fg)} .b2:hover{border-color:var(--fg)} .b.busy{pointer-events:none} .b .spin{width:13px;height:13px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%; animation:sp .7s linear infinite;display:none} .b.busy .spin{display:block}.b.busy i,.b.done i{display:none} .b .tick{width:14px;height:14px;display:none} .b.done .tick{display:block} .b.busy .lbl::after{content:"…"} @keyframes sp{to{transform:rotate(360deg)}} .tick path{stroke:currentColor;stroke-width:2;fill:none;stroke-dasharray:22;stroke-dashoffset:22; animation:tk .45s .05s var(--e) forwards} @keyframes tk{to{stroke-dashoffset:0}} /* ═══ header ═══ */ .hd{position:fixed;top:0;left:0;right:0;z-index:80;padding:9px 0;transition:padding .4s var(--e)} .hd.stuck{padding:6px 0} .hd::before{content:"";position:absolute;inset:0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); background:linear-gradient(var(--bg),transparent);opacity:0;transition:opacity .5s var(--e)} .hd.stuck::before{opacity:.95} .hd .u{position:relative;display:flex;align-items:center;gap:14px;min-height:44px} .mark{display:flex;align-items:center;gap:9px} .logo{display:block;width:112px;height:20.4px;background:currentColor; -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat; transition:transform .5s var(--spring),opacity .4s} .mark:hover .logo{transform:scale(1.04)} .logo.lg{width:min(58vw,300px);height:auto;aspect-ratio:5.49/1} .logo.ft{width:96px;height:17.5px;opacity:.8} .nv{display:flex;gap:24px;margin-left:auto} .nv a{font-size:var(--ts);color:var(--fg2);position:relative;display:block;overflow:hidden; height:1.3em;line-height:1.3em} .nv a em{font-style:normal;display:block;height:1.3em;line-height:1.3em;transition:transform .42s var(--e)} .nv a em+em{position:absolute;inset:0;transform:translateY(100%);color:var(--fg)} .nv a:hover em{transform:translateY(-100%)} .nv a:hover em+em{transform:translateY(0)} .nv a[aria-current] em+em{transform:translateY(0)}.nv a[aria-current] em{transform:translateY(-100%)} .tgl{width:52px;height:28px;border-radius:100px;border:1px solid var(--line);position:relative;flex:none; transition:background .5s var(--e),border-color .5s var(--e)} .tgl span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--fg); transition:transform .55s var(--spring),background .5s} [data-theme=day] .tgl span{transform:translateX(24px);background:var(--lime)} .tgl svg{position:absolute;top:7px;width:12px;height:12px;stroke:var(--fg3);fill:none;stroke-width:1.4;transition:opacity .4s} .tgl .sun{right:6px;opacity:.9}.tgl .moon{left:6px;opacity:.35} [data-theme=day] .tgl .sun{opacity:.35}[data-theme=day] .tgl .moon{opacity:.9} .burg{display:none;width:38px;height:38px;margin-left:auto;position:relative;flex:none} .burg i{position:absolute;left:9px;width:20px;height:1.5px;background:var(--fg);transition:transform .45s var(--spring),opacity .3s} .burg i:nth-child(1){top:15px}.burg i:nth-child(2){top:21px} .burg[aria-expanded=true] i:nth-child(1){transform:translateY(3px) rotate(45deg)} .burg[aria-expanded=true] i:nth-child(2){transform:translateY(-3px) rotate(-45deg)} @media(max-width:880px){.nv,.hd .b{display:none}.burg{display:block}} .mm{position:fixed;inset:0;z-index:95;background:linear-gradient(160deg,var(--bg2),var(--bg));display:flex;flex-direction:column; padding:20px var(--gut) 30px;clip-path:circle(0% at calc(100% - 40px) 34px); transition:clip-path .75s var(--eio);visibility:hidden} .mm.on{clip-path:circle(150% at calc(100% - 40px) 34px);visibility:visible} .mm-t{display:flex;justify-content:space-between;align-items:center;height:38px} .mm nav{margin:auto 0;display:grid} .mm nav a{font-size:clamp(1.9rem,10vw,2.8rem);line-height:1.14;letter-spacing:-.045em;font-weight:500;padding:7px 0; opacity:0;transform:translateY(18px);border-bottom:1px solid var(--line2)} .mm.on nav a{animation:mi .55s var(--e) forwards} @keyframes mi{to{opacity:1;transform:none}} .mm-f{display:flex;gap:20px;flex-wrap:wrap;padding-top:18px;font-size:var(--ts);color:var(--fg2)} /* ═══ overlays ═══ */ .bar{position:fixed;top:0;left:0;height:2px;background:var(--lime);z-index:210;width:0;opacity:0} .bar.go{animation:ld .6s var(--e) forwards} @keyframes ld{0%{width:0;opacity:1}70%{width:82%;opacity:1}100%{width:100%;opacity:0}} .cu{position:fixed;width:8px;height:8px;border-radius:50%;background:var(--lime);z-index:300;pointer-events:none; transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s;mix-blend-mode:difference} .cu.on{width:44px;height:44px;opacity:.6} @media(hover:none){.cu{display:none}} .tst{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:320;display:grid;gap:8px;justify-items:center} .tst div{background:var(--lime);color:var(--on-lime);padding:11px 18px;border-radius:3px;font-size:var(--ts); display:flex;gap:9px;align-items:center;animation:ti .45s var(--spring)} @keyframes ti{from{opacity:0;transform:translateY(14px) scale(.94)}} .veil{position:fixed;inset:0;background:var(--lime);z-index:200;transform:scaleY(0);transform-origin:50% 100%;pointer-events:none} .in{position:fixed;inset:0;z-index:350;background:var(--bg);display:grid;place-items:center} .in.off{clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--eio);pointer-events:none} .in>svg{width:min(40vw,190px)} .in .ring{fill:none;stroke:var(--lime);stroke-width:1.4;stroke-dasharray:396;stroke-dashoffset:396; animation:dr 1.3s .1s var(--e) forwards} @keyframes dr{to{stroke-dashoffset:0}} .in .nd{fill:var(--lime);r:0;animation:nd .5s var(--spring) forwards} @keyframes nd{to{r:5}} .in-w{position:static;text-align:center;overflow:hidden;line-height:1.15;margin-top:6px;padding-bottom:6px} .in-w span{display:inline-block;transform:translateY(110%);animation:iw .7s .95s var(--e) forwards} @keyframes iw{to{transform:none}} .sk{position:absolute;bottom:24px;right:var(--gut);font-family:var(--mono);font-size:var(--tm); letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)} /* ═══ modal ═══ */ .md-b{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(8px); z-index:120;opacity:0;pointer-events:none;transition:opacity .4s var(--e)} .md-b.on{opacity:1;pointer-events:auto} .md{position:fixed;z-index:130;background:color-mix(in srgb,var(--bg2) 88%,transparent);backdrop-filter:blur(24px);border:1px solid var(--line);border-radius:6px; overflow:hidden;pointer-events:none;opacity:0} .md.on{pointer-events:auto;opacity:1} .md-in{padding:clamp(22px,3.4vw,38px);display:grid;gap:14px;max-height:82vh;overflow:auto} .md-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:1px solid var(--line);border-radius:50%; display:grid;place-items:center;transition:.3s} .md-x:hover{background:var(--fg);color:var(--bg)} /* ═══ hero ═══ */ .hero{min-height:100svh;display:grid;grid-template-rows:1fr auto;padding:clamp(84px,12vh,128px) 0 22px} .hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} .hero-c,.hero-f{position:relative;z-index:1} .hero-c{display:grid;align-content:center;gap:22px} .hero h1{max-width:12ch} .hero h1 .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.12em} .hero h1 .ln em{display:block;font-style:normal;transform:translateY(104%);animation:lu .95s var(--e) forwards} @keyframes lu{to{transform:none}} .hero-a{display:flex;gap:10px;flex-wrap:wrap} .hero-f{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line2);padding-top:14px} .hero-f span{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--tm); letter-spacing:.09em;text-transform:uppercase;color:var(--fg3)} .hero-f b{width:5px;height:5px;border-radius:50%;background:var(--fg3);font-size:0} .hero-f b.on{background:var(--lime);animation:pl 2.4s infinite} @keyframes pl{0%,100%{box-shadow:0 0 0 0 rgba(199,240,74,.5)}70%{box-shadow:0 0 0 7px rgba(199,240,74,0)}} /* ═══ statement ═══ */ .st{height:230vh} .st>.u{position:sticky;top:0;height:100svh;display:grid;align-content:center;padding-block:var(--pad)} .st-w{position:relative;min-height:clamp(150px,22vh,240px);display:grid;align-content:center} .st-w span{grid-area:1/1;font-size:var(--d2);line-height:.98;letter-spacing:-.042em;font-weight:500; opacity:0;visibility:hidden;transform:translateY(22px);will-change:opacity,transform; transition:opacity .2s var(--e),transform .2s var(--e),visibility 0s linear .2s} .st-w span.on{opacity:1;visibility:visible;transform:none; transition:opacity .5s .12s var(--e),transform .55s .12s var(--e),visibility 0s} .st-l{margin-top:26px;display:flex;gap:8px} .st-l b{flex:1;height:2px;background:var(--line);font-size:0;transition:background .5s} .st-l b.on{background:var(--lime)} /* ═══ cards ═══ */ .cards{padding:var(--pad) 0} .c-h{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:30px} .hrail{position:relative;overflow:hidden} .hrow{display:flex;gap:14px;width:max-content;will-change:transform} .card{flex:0 0 clamp(250px,25vw,330px);border:1px solid var(--line2);border-radius:8px; background:color-mix(in srgb,var(--bg2) 52%,transparent);backdrop-filter:blur(14px); padding:clamp(20px,2.4vw,28px);display:grid;gap:13px;align-content:start; text-align:left;position:relative;overflow:hidden;transition:background .45s var(--e),border-color .45s var(--e),transform .45s var(--e)} .card:hover{border-color:var(--line);transform:translateY(-4px)} .hint{display:flex;align-items:center;gap:9px;margin-top:16px;font-family:var(--mono);font-size:var(--tm); letter-spacing:.09em;text-transform:uppercase;color:var(--fg3)} .hint i{width:30px;height:1px;background:var(--line);position:relative;overflow:hidden} .hint i::after{content:"";position:absolute;inset:0;background:var(--lime);transform:translateX(-100%); animation:sweep 2.4s var(--e) infinite} @keyframes sweep{50%{transform:translateX(0)}100%{transform:translateX(100%)}} .card:hover{background:var(--bg3)} .card .tag{font-family:var(--mono);font-size:var(--tm);letter-spacing:.1em;text-transform:uppercase; display:flex;align-items:center;gap:7px;color:var(--fg3)} .card .tag b{width:5px;height:5px;border-radius:50%;background:var(--fg3);font-size:0} .card .tag b.on{background:var(--lime)} .card h3{font-size:clamp(1.2rem,2.1vw,1.6rem);letter-spacing:-.032em;font-weight:500;line-height:1.1; transition:transform .5s var(--e)} .card:hover h3{transform:translateX(6px)} .card p{font-size:var(--ts);color:var(--fg2);min-height:2.8em} .card .art{aspect-ratio:16/9;border-radius:3px;overflow:hidden;background:var(--bg2);position:relative} .card .art canvas{width:100%;height:100%} .card .op{position:absolute;right:clamp(20px,2.6vw,30px);top:clamp(20px,2.6vw,30px);width:30px;height:30px; border-radius:50%;border:1px solid var(--line);display:grid;place-items:center; transform:scale(.6);opacity:0;transition:.45s var(--spring)} .card:hover .op{transform:scale(1);opacity:1} .card .op::after{content:"";width:8px;height:8px;border-top:1.4px solid currentColor;border-right:1.4px solid currentColor; transform:rotate(45deg) translate(-1px,1px)} @media(max-width:880px){ .hrail{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)} .hrail::-webkit-scrollbar{display:none} .hrow{transform:none!important;gap:12px} .card{flex:0 0 78vw;scroll-snap-align:start} .card p{min-height:0}} /* ═══ screen ═══ */ .dv{padding:var(--pad) 0} .dv-h{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:26px} .scr{background:color-mix(in srgb,var(--bg2) 60%,transparent);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:6px;overflow:hidden; box-shadow:0 30px 90px -50px rgba(0,0,0,.75)} .scr-t{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line2);flex-wrap:wrap} .tb{display:flex;gap:3px;overflow:auto;scrollbar-width:none}.tb::-webkit-scrollbar{display:none} .tb button{padding:7px 13px;border-radius:3px;font-family:var(--mono);font-size:var(--tm);letter-spacing:.07em; text-transform:uppercase;color:var(--fg3);white-space:nowrap;transition:.3s var(--e)} .tb button:hover{color:var(--fg)} .tb button[aria-selected=true]{background:var(--lime);color:var(--on-lime)} .dd{margin-left:auto;position:relative} .dd>button{display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:3px; font-family:var(--mono);font-size:var(--tm);letter-spacing:.07em;text-transform:uppercase;color:var(--fg2)} .dd>button svg{width:9px;transition:transform .35s var(--e)} .dd[data-open=true]>button svg{transform:rotate(180deg)} .dd ul{position:absolute;top:calc(100% + 6px);right:0;background:var(--bg2);border:1px solid var(--line); border-radius:3px;min-width:150px;padding:4px;z-index:9;transform-origin:100% 0;transform:scale(.9);opacity:0; pointer-events:none;transition:.32s var(--spring);box-shadow:0 18px 40px -22px rgba(0,0,0,.7)} .dd[data-open=true] ul{transform:scale(1);opacity:1;pointer-events:auto} .dd li button{width:100%;text-align:left;padding:8px 10px;border-radius:2px;font-size:var(--ts);transition:.25s} .dd li button:hover{background:var(--bg3)} .dd li button[aria-selected=true]{color:var(--lime)} .mts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line2);border-bottom:1px solid var(--line2)} .mt{background:color-mix(in srgb,var(--bg2) 40%,transparent);padding:clamp(16px,2.1vw,24px)} .mt .k{font-family:var(--mono);font-size:var(--tm);letter-spacing:.09em;text-transform:uppercase;color:var(--fg3)} .mt .v{font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1;letter-spacing:-.04em;margin-top:10px;font-weight:500} .mt .d{font-family:var(--mono);font-size:var(--tm);color:var(--lime);margin-top:7px} .scr-b{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1px;background:var(--line2)} .cel{background:color-mix(in srgb,var(--bg2) 40%,transparent);padding:clamp(15px,2.2vw,24px)} .chart{width:100%;height:clamp(120px,15vh,165px);margin-top:14px;overflow:visible} .chart rect{fill:var(--line);transition:fill .3s} .chart rect:hover{fill:var(--fg2)} .chart rect.hi{fill:var(--lime)} .chart line{stroke:var(--line2)} .lst{display:grid;margin-top:10px} .lst button{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 0; border-top:1px solid var(--line2);text-align:left;transition:padding .35s var(--e)} .lst button:hover{padding-left:8px} .lst button>span:first-child{display:grid;gap:3px;min-width:0} .lst .n{display:block;font-size:var(--ts);line-height:1.25} .lst .m{display:block;font-family:var(--mono);font-size:var(--tm);color:var(--fg3);line-height:1.3} .tg{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;padding:4px 8px; border-radius:2px;border:1px solid var(--line);color:var(--fg3);white-space:nowrap} .tg.a{border-color:rgba(199,240,74,.45);color:var(--lime)} .tg.w{border-color:rgba(232,114,75,.5);color:var(--clay)} .note{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg3);margin-top:16px} /* skeleton */ .sk-l{background:linear-gradient(90deg,var(--line2) 25%,var(--line) 37%,var(--line2) 63%); background-size:400% 100%;animation:shm 1.3s linear infinite;border-radius:3px;height:12px} @keyframes shm{0%{background-position:100% 0}100%{background-position:0 0}} @media(max-width:880px){.scr-b{grid-template-columns:1fr}.mts{grid-template-columns:1fr}.dd{margin-left:0;width:100%} .dd>button{width:100%;justify-content:space-between}.dd ul{left:0;right:auto;width:100%}} /* ═══ drag scene ═══ */ .dg{padding:var(--pad) 0} .dg-s{margin-top:26px;display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,3vw,40px);align-items:center; min-height:230px} .bin{border:1px dashed var(--line);border-radius:5px;min-height:150px;display:grid;place-content:center;gap:8px; text-align:center;padding:20px;transition:.4s var(--e)} .bin.hot{border-color:var(--lime);background:color-mix(in srgb,var(--lime) 9%,transparent);transform:scale(1.02)} .bin.hot.w{border-color:var(--clay);background:color-mix(in srgb,var(--clay) 9%,transparent)} .bin .t{font-family:var(--mono);font-size:var(--tm);letter-spacing:.1em;text-transform:uppercase} .bin .s{font-size:var(--ts);color:var(--fg2);max-width:22ch} .chip{width:clamp(88px,13vw,120px);height:clamp(88px,13vw,120px);border-radius:50%;background:var(--lime); color:var(--on-lime);display:grid;place-content:center;text-align:center;gap:2px;cursor:grab;touch-action:none; font-family:var(--mono);font-size:var(--tm);letter-spacing:.08em;text-transform:uppercase;justify-self:center; transition:transform .5s var(--spring),box-shadow .4s;box-shadow:0 12px 34px -14px rgba(199,240,74,.8);user-select:none} .chip:active{cursor:grabbing} .chip.drag{transition:none;box-shadow:0 22px 50px -16px rgba(199,240,74,.9);z-index:5} .chip.gone{transform:scale(0);opacity:0;transition:.45s var(--e)} .dg-o{margin-top:22px;min-height:3em;font-size:var(--ts);color:var(--fg2);max-width:52ch} .cft{position:fixed;width:8px;height:12px;z-index:340;pointer-events:none;border-radius:1px} @media(max-width:760px){.dg-s{grid-template-columns:1fr;gap:16px}.chip{order:-1}} /* ═══ loop + cta + footer ═══ */ .lp{padding:var(--pad) 0;text-align:center} .lp h2{margin-inline:auto;max-width:16ch} .lp canvas{margin:26px auto 0;width:100%;aspect-ratio:16/7} @media(max-width:880px){.lp canvas{aspect-ratio:1/1}} .lp .sub{margin:18px auto 0} .ct{padding:var(--pad) 0;border-top:1px solid var(--line2)} .ct h2{max-width:13ch} .ct-r{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line2); border-block:1px solid var(--line2)} .ct-r a{background:color-mix(in srgb,var(--bg2) 45%,transparent);padding:clamp(20px,3vw,34px);display:grid;gap:8px;transition:background .45s var(--e)} .ct-r a:hover{background:var(--bg3)} .ct-r .v{font-size:clamp(1rem,2.4vw,1.6rem);letter-spacing:-.03em} @media(max-width:620px){.ct-r{grid-template-columns:1fr}} .ft{padding:26px 0 30px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; font-family:var(--mono);font-size:var(--tm);letter-spacing:.08em;text-transform:uppercase;color:var(--fg3)} .ft nav{display:flex;gap:16px;flex-wrap:wrap} .ft a:hover{color:var(--lime)} .hrt{display:inline-block;color:var(--clay);animation:hb 2.6s var(--e) infinite} @keyframes hb{0%,88%,100%{transform:scale(1)}92%{transform:scale(1.32)}96%{transform:scale(1.1)}} /* ═══ sub pages ═══ */ .pg{padding:clamp(104px,15vh,170px) 0 var(--pad)} .pg h1{max-width:14ch} .rows{display:grid;gap:1px;background:var(--line2);margin-top:30px;border:1px solid var(--line2)} .rows>div{background:color-mix(in srgb,var(--bg2) 45%,transparent);padding:clamp(18px,2.6vw,28px);display:grid;gap:7px} .rows h3{font-size:var(--d3);letter-spacing:-.03em;font-weight:500} .prose{max-width:66ch;margin-top:26px} .prose p{color:var(--fg2);font-size:var(--ts);margin-bottom:13px} .prose h2{font-size:var(--d3);letter-spacing:-.03em;font-weight:500;margin:26px 0 10px} .prose h3{font-size:1.02rem;font-weight:500;margin:18px 0 6px} .prose ul{display:grid;gap:7px;margin-bottom:14px} .prose li{color:var(--fg2);font-size:var(--ts);display:grid;grid-template-columns:14px 1fr;gap:9px} .prose li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lime);margin-top:.55em} .prose table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:var(--ts)} .prose td,.prose th{border:1px solid var(--line2);padding:9px 11px;text-align:left;color:var(--fg2);vertical-align:top} .prose th{color:var(--fg);font-weight:500;font-family:var(--mono);font-size:var(--tm);letter-spacing:.07em;text-transform:uppercase} .nf{min-height:74svh;display:grid;place-content:center;text-align:center;gap:20px} /* ═══ Bengaluru ═══ */ .bng{padding:var(--pad) 0} .bng-h{display:grid;gap:.02em} .bng-h span{display:block} .bng-h .wl{white-space:nowrap;display:flex;align-items:center;gap:.16em} .bng .heart{width:.72em;height:.72em;fill:#C1121F;filter:drop-shadow(0 0 16px rgba(193,18,31,.45));animation:hb 2.8s var(--e) infinite;transform-origin:50% 60%} .bng-c{margin-top:clamp(24px,4vh,44px);clip-path:inset(0 100% 0 0)} .bng-c.shown{clip-path:inset(0 0 0 0)} .bng svg.city{width:100%;height:auto;display:block} .city .s1{fill:none;stroke:var(--line);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round} .city .s2{fill:none;stroke:var(--fg2);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round} .city .lm{fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round} .city .lf{fill:var(--lime);stroke:none} .city .gf{fill:var(--fg3);stroke:none} #train{animation:trn 11s linear infinite} @keyframes trn{from{transform:translateX(-200px)}to{transform:translateX(1300px)}} .bng-f{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:var(--tm); letter-spacing:.09em;text-transform:uppercase;color:var(--fg3)} .bng-f span{display:flex;align-items:center;gap:7px} .bng-f i{width:16px;height:2px;border-radius:2px;display:block} @media(max-width:620px){.bng-c{margin-top:20px}} @media(max-width:880px){ .hero{min-height:92svh;padding-top:clamp(88px,12vh,120px)} .st{height:auto} .st>.u{position:static;height:auto;padding-block:var(--pad)} .st-w{min-height:0;display:grid;gap:12px} .st-w span{grid-area:auto;opacity:1;transform:none;font-size:clamp(1.45rem,6.6vw,2.1rem)} .st-l{display:none} .lp canvas{aspect-ratio:4/3;margin-top:18px} .dg-s{min-height:0;margin-top:20px} .dv-h,.c-h{margin-bottom:20px} .ct-r{margin-top:22px} :root{--pad:clamp(48px,6.5vh,72px)} } @media(max-width:520px){ :root{--pad:44px;--d1:clamp(2.5rem,10.5vw,3.4rem);--d2:clamp(1.7rem,7.4vw,2.3rem)} .lp canvas{aspect-ratio:1/1;max-width:340px} .hero-f{gap:8px} } @media(max-width:880px){ :root{--pad:38px!important;--gut:18px} section{padding-top:38px!important;padding-bottom:38px!important} .hero{min-height:auto!important;padding:104px 0 26px!important;grid-template-rows:auto auto;gap:26px} .hero-c{gap:16px} .hero-f{padding-top:12px;gap:7px} .st>.u{padding-block:38px!important} .st-w{gap:10px} .c-h,.dv-h{margin-bottom:16px!important;gap:10px} .hrail{margin-top:4px} .hint{margin-top:12px} .scr{margin-top:0} .note{margin-top:10px} .dg-s{margin-top:16px!important;gap:12px} .dg-o{margin-top:14px} .lp canvas{margin-top:14px!important} .lp .sub{margin-top:12px} .bng-c{margin-top:14px!important} .ct-r{margin-top:18px!important} .ft{padding:18px 0 24px!important;gap:10px} .pg{padding-top:96px!important;padding-bottom:38px!important} .rows{margin-top:20px} .prose{margin-top:18px} .logo{width:98px;height:17.8px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.1s!important} .cu{display:none} .st{height:auto}.st>.u{position:static;height:auto} .st-w{min-height:0;display:grid;gap:12px}.st-w span{grid-area:auto;opacity:1;transform:none} .hero h1 .ln em{transform:none} } .art svg{width:100%;height:100%} .ico{width:26px;height:26px;flex:none;stroke:var(--lime);fill:none;stroke-width:1.35; stroke-linecap:round;stroke-linejoin:round} .ico *{stroke-dasharray:88;stroke-dashoffset:0} .card:hover .ico *{animation:idraw .95s var(--e)} .card:hover .ico *:nth-child(2){animation-delay:.08s} .card:hover .ico *:nth-child(3){animation-delay:.16s} .card:hover .ico *:nth-child(4){animation-delay:.24s} @keyframes idraw{from{stroke-dashoffset:88}to{stroke-dashoffset:0}} .md-in .ico{width:34px;height:34px} .md-in .ico *{animation:idraw 2.6s var(--e) infinite} .md-in .ico *:nth-child(2){animation-delay:.12s} .md-in .ico *:nth-child(3){animation-delay:.24s} .md-in .ico *:nth-child(4){animation-delay:.36s} .ct-r a{position:relative} .ct-r .ico{width:30px;height:30px;margin-bottom:4px} .ct-r a:hover .ico *{animation:idraw 1s var(--e)} .art .tk{fill:color-mix(in srgb,var(--fg) 16%,transparent);transform-box:fill-box; transition:transform .55s var(--e),fill .4s;animation:tkq 4.6s var(--e) infinite alternate} .art .tk.d{fill:color-mix(in srgb,var(--fg) 9%,transparent)} .art .tk.k{fill:var(--lime)} .art .tk:nth-child(4n){animation-delay:.5s}.art .tk:nth-child(3n){animation-delay:1s} @keyframes tkq{0%{transform:translateX(0)}55%{transform:translateX(7px)}100%{transform:translateX(0)}} .card:hover .art .tk{fill:color-mix(in srgb,var(--fg) 34%,transparent);transform:translateX(9px)} .card:hover .art .tk.k{fill:var(--lime);transform:translateX(16px)} .art .pth{fill:none;stroke:color-mix(in srgb,var(--fg) 26%,transparent);stroke-width:1.8;stroke-dasharray:260;stroke-dashoffset:0;transition:stroke .4s} .card:hover .art .pth{stroke:var(--lime);animation:dash 1.1s var(--e)} @keyframes dash{from{stroke-dashoffset:260}to{stroke-dashoffset:0}} .art .cel2{fill:color-mix(in srgb,var(--fg) 20%,transparent);transform-box:fill-box;transform-origin:50% 50%;transition:fill .5s var(--e),transform .5s var(--e)} .card:hover .art .cel2.k{fill:var(--lime);transform:scale(1.35)} .card:hover .art .cel2{fill:var(--fg3)} .art .dot{fill:color-mix(in srgb,var(--fg) 24%,transparent);transition:transform .6s var(--spring),fill .4s} .card:hover .art .dot{fill:var(--fg2)} .card:hover .art .dot.k{fill:var(--lime)} .art .rng{fill:none;stroke:color-mix(in srgb,var(--fg) 26%,transparent);stroke-width:2;stroke-dasharray:150;stroke-dashoffset:150; transition:stroke-dashoffset .9s var(--e),stroke .4s} .card:hover .art .rng{stroke-dashoffset:0;stroke:var(--lime)} .md-art{aspect-ratio:16/6;border-radius:4px;overflow:hidden; background:linear-gradient(140deg,color-mix(in srgb,var(--lime) 10%,transparent),transparent 60%),var(--bg3)} .md-art .tk{fill:var(--fg3);transform-box:fill-box;animation:mtk 2.6s var(--e) infinite alternate} .md-art .tk:nth-child(3n){animation-delay:.3s}.md-art .tk:nth-child(4n){animation-delay:.6s} .md-art .tk.d{fill:color-mix(in srgb,var(--fg) 14%,transparent)} .md-art .tk.k{fill:var(--lime);animation-duration:1.7s} @keyframes mtk{from{transform:translateX(0)}to{transform:translateX(12px)}} .md-art .pth{stroke:var(--lime);stroke-dasharray:260;animation:dash 2.6s var(--e) infinite} .md-art .pth:nth-child(2){stroke:var(--fg3);animation-delay:.4s} .md-art .cel2{fill:var(--fg3);animation:mfade 3s var(--e) infinite alternate} .md-art .cel2:nth-child(2n){animation-delay:.4s}.md-art .cel2:nth-child(3n){animation-delay:.8s} .md-art .cel2.k{fill:var(--lime);transform-box:fill-box;transform-origin:50% 50%;animation:mpop 1.8s var(--e) infinite alternate} @keyframes mfade{from{opacity:.35}to{opacity:1}} @keyframes mpop{from{transform:scale(1)}to{transform:scale(1.4)}} .md-art .dot{fill:var(--fg3);animation:mfade 2.6s var(--e) infinite alternate} .md-art .dot:nth-child(2n){animation-delay:.3s} .md-art .dot.k{fill:var(--lime)} .md-art .rng{stroke:var(--lime);stroke-dashoffset:0;animation:mring 3s var(--e) infinite} @keyframes mring{0%{stroke-dashoffset:150}70%,100%{stroke-dashoffset:0}} .md-art rect,.md-art circle,.md-art path{transform-box:fill-box}