/* Liquid glass over Material You, as the apps build it: the window paints the
   ground (wallpaper tones and halos), content scrolls under floating panes of
   glass, rims are light fading in over a few pixels, never a white line.
   The "wallpaper" here is a hue the visitor picks (the drop, top right). */
:root{
  --h:250;--c:0.11;               /* the accent hue and chroma, the wallpaper of this site */
  --a0:#fff;
  --a50:oklch(97% calc(var(--c)*.25) var(--h));
  --a100:oklch(93% calc(var(--c)*.45) var(--h));
  --a200:oklch(85% calc(var(--c)*.7) var(--h));
  --a300:oklch(76% calc(var(--c)*.9) var(--h));
  --a400:oklch(66% var(--c) var(--h));
  --a500:oklch(56% var(--c) var(--h));
  --a600:oklch(48% var(--c) var(--h));
  --a700:oklch(40% calc(var(--c)*.9) var(--h));
  --a800:oklch(31% calc(var(--c)*.7) var(--h));
  --n800:oklch(31% 0.012 var(--h));
  --t500:oklch(60% calc(var(--c)*.8) calc(var(--h) + 60));   /* tertiary: the hue turned a third */
  --bg:oklch(97.5% 0.006 var(--h));--fg:oklch(20% 0.02 var(--h));--mute:oklch(50% 0.02 var(--h));
  --primary:var(--a500);--container:var(--a100);--on-container:var(--a800);
  --zone:rgba(255,255,255,.55);--float:rgba(255,255,255,.42);--card:rgba(255,255,255,.5);
  --rim:rgba(255,255,255,.55);--shadow:0 12px 40px oklch(30% 0.03 var(--h) / .12);
  --icon-bg:var(--a50);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:24px;--pad:clamp(16px,4vw,40px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:oklch(16% 0.012 var(--h));--fg:oklch(94% 0.01 var(--h));--mute:oklch(68% 0.02 var(--h));
  --primary:var(--a300);--container:var(--a700);--on-container:var(--a100);
  --zone:oklch(22% 0.015 var(--h) / .5);--float:oklch(22% 0.015 var(--h) / .34);--card:oklch(24% 0.015 var(--h) / .55);
  --rim:rgba(255,255,255,.14);--shadow:0 12px 40px rgba(0,0,0,.4);
  --icon-bg:var(--n800);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:oklch(16% 0.012 var(--h));--fg:oklch(94% 0.01 var(--h));--mute:oklch(68% 0.02 var(--h));
  --primary:var(--a300);--container:var(--a700);--on-container:var(--a100);
  --zone:oklch(22% 0.015 var(--h) / .5);--float:oklch(22% 0.015 var(--h) / .34);--card:oklch(24% 0.015 var(--h) / .55);
  --rim:rgba(255,255,255,.14);--shadow:0 12px 40px rgba(0,0,0,.4);
  --icon-bg:var(--n800);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:16px/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100svh;-webkit-tap-highlight-color:transparent}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.float:focus-visible,.corner:focus-visible,.bold:focus-visible,.tile:focus-visible{outline-offset:2px}

/* the ground: four halos in the accent's tones, exactly where GlassLook puts them */
.ground{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(55vw circle at 15% 18%, oklch(from var(--primary) l c h / .35), transparent 70%),
  radial-gradient(60vw circle at 95% 45%, oklch(from var(--t500) l c h / .30), transparent 70%),
  radial-gradient(55vw circle at 25% 85%, oklch(from var(--container) l c h / .80), transparent 70%),
  radial-gradient(40vw circle at 80% 95%, oklch(from var(--primary) l c h / .22), transparent 70%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ground{background:
  radial-gradient(55vw circle at 15% 18%, oklch(from var(--primary) l c h / .30), transparent 70%),
  radial-gradient(60vw circle at 95% 45%, oklch(from var(--t500) l c h / .24), transparent 70%),
  radial-gradient(55vw circle at 25% 85%, oklch(from var(--container) l c h / .55), transparent 70%),
  radial-gradient(40vw circle at 80% 95%, oklch(from var(--primary) l c h / .22), transparent 70%)}}
:root[data-theme="dark"] .ground{background:
  radial-gradient(55vw circle at 15% 18%, oklch(from var(--primary) l c h / .30), transparent 70%),
  radial-gradient(60vw circle at 95% 45%, oklch(from var(--t500) l c h / .24), transparent 70%),
  radial-gradient(55vw circle at 25% 85%, oklch(from var(--container) l c h / .55), transparent 70%),
  radial-gradient(40vw circle at 80% 95%, oklch(from var(--primary) l c h / .22), transparent 70%)}

/* glass */
.zone,.float{background:var(--zone);backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);
  box-shadow:inset 0 0 10px var(--rim),var(--shadow)}
.float{background:var(--float);border-radius:999px}
.zone{border-radius:var(--r)}
.wrap{max-width:1120px;margin:0 auto;padding:calc(72px + env(safe-area-inset-top,0px)) var(--pad) calc(96px + env(safe-area-inset-bottom,0px))}

/* floating round actions, no bar */
.corner{position:fixed;z-index:20;top:calc(14px + env(safe-area-inset-top,0px));width:48px;height:48px;display:grid;place-items:center;transition:transform .25s cubic-bezier(.3,1.6,.4,1)}
.corner:active{transform:scale(.9)}
.corner.l{left:max(14px,env(safe-area-inset-left,0px))}.corner.r{right:max(14px,env(safe-area-inset-right,0px))}
.corner svg{width:22px;height:22px;display:block}
.corner .yz{fill:var(--primary)}
.corner .line{fill:none;stroke:var(--fg);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drop{width:20px;height:20px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(135deg,var(--a300),var(--a600));box-shadow:inset 0 0 4px rgba(255,255,255,.5)}
.palette{position:fixed;z-index:21;top:calc(70px + env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));display:flex;gap:8px;padding:8px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:.25s}
.palette.open{opacity:1;pointer-events:auto;transform:none}
.palette button{width:34px;height:34px;border-radius:50%;background:oklch(60% .13 var(--ph));box-shadow:inset 0 0 6px rgba(255,255,255,.5);transition:transform .2s}
.palette button:hover{transform:scale(1.15)}

/* views */
.view{animation:enter .5s cubic-bezier(.2,.9,.3,1.1)}
.view[hidden]{display:none}
@keyframes enter{from{opacity:0;transform:translateY(12px) scale(.985)}}

/* home */
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(14px,2.2vw,24px)}
.group{padding:clamp(18px,2.6vw,28px);display:grid;gap:16px;min-width:0}
.group header{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.group h2{font-size:clamp(21px,2.5vw,30px);line-height:1.15}
.group h2 small{display:block;color:var(--mute);font-size:.72em}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px}
.tile{background:var(--card);border-radius:20px;padding:12px;display:grid;gap:8px;min-width:0;text-align:left;box-shadow:inset 0 0 8px var(--rim);transition:transform .25s cubic-bezier(.3,1.6,.4,1),box-shadow .2s;overflow:hidden}
.tile:hover{transform:translateY(-3px);box-shadow:inset 0 0 8px var(--rim),var(--shadow)}
.tile:active{transform:scale(.96)}
.tile b{font-weight:500;font-size:16px}
.tile span{font-size:13px;color:var(--mute);line-height:1.3}
.tile .v{font:11.5px var(--mono);letter-spacing:.04em;color:var(--mute)}

/* the launcher icons, built live from their layers: a grey body multiplied
   by a tone of the accent, untinted light and parts over it, as on Android */
.icon{position:relative;width:60px;height:60px;isolation:isolate;flex:none}
.icon>*{position:absolute;inset:-32%;width:164%;height:164%}
.icon img{display:block;object-fit:contain}
.icon .tint{mix-blend-mode:multiply;background:var(--t);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.icon.yid>*{inset:-24% -22% -28% -22%;width:144%;height:152%}
.icon.frontr::before{content:"";position:absolute;inset:4%;border-radius:50%;background:var(--a700);box-shadow:inset 0 0 8px rgba(255,255,255,.25)}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .icon.frontr:not(.baked)::before{background:var(--a600)}}
:root[data-theme="dark"] .icon.frontr:not(.baked)::before{background:var(--a600)}
.icon .tint{mix-blend-mode:multiply}
.icon.big{width:clamp(96px,22vw,140px);height:clamp(96px,22vw,140px)}

/* scenes in the group heads */
.scene{width:112px;height:64px;position:relative;flex:none}
.ph{position:absolute;width:34px;height:60px;border-radius:9px;background:var(--fg);top:2px;left:39px;overflow:hidden}
.ph::after{content:"";position:absolute;inset:4px;border-radius:6px;background:var(--bg);opacity:.9}
.wall{position:absolute;left:4px;right:4px;height:24px;border-radius:5px;background:var(--primary);top:-36px;animation:wall 5s ease-in-out infinite;z-index:1}
.wall::before,.wall::after{content:"";position:absolute;left:5px;right:5px;height:3px;border-radius:2px;background:rgba(255,255,255,.85);top:7px}.wall::after{top:14px;right:12px}
@keyframes wall{0%,15%{transform:translateY(0)}35%,55%{transform:translateY(56px)}70%,100%{transform:translateY(120px)}}
.trio{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.trio i{width:20px;height:34px;border-radius:6px;background:var(--fg);position:relative}.trio i::before{content:"";position:absolute;inset:3px;border-radius:4px;background:var(--bg)}
.pulse{position:absolute;top:50%;left:8px;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--primary);animation:pass 4.5s ease-in-out infinite;box-shadow:0 0 12px var(--primary)}
@keyframes pass{0%,10%{left:9px}40%,50%{left:52px}85%,100%{left:95px}}

.row{margin-top:clamp(14px,2.2vw,24px)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.stat{padding:18px 20px;display:grid;gap:2px;user-select:none}
.stat b{font-size:clamp(30px,4vw,44px);font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.stat span{font-size:13px;color:var(--mute)}
.stat.zero.try b{animation:try .9s ease-in-out}
@keyframes try{30%{transform:translateY(-8px) rotate(-6deg)}60%{transform:translateY(2px)}}
.closing{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:clamp(18px,2.6vw,28px)}
.closing h2{font-size:clamp(21px,2.5vw,30px)}
.closing p{margin-top:6px;color:var(--mute);max-width:52ch}
.links{display:flex;flex-wrap:wrap;gap:8px}
.links a{text-decoration:none;font-size:14px;padding:10px 14px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 8px var(--rim);transition:transform .15s}
.links a:hover{transform:translateY(-2px)}
@media (max-width:720px){.closing{grid-template-columns:1fr}}

/* an app's page */
.app{display:grid;gap:clamp(14px,2.2vw,24px)}
.app .head{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,3vw,28px);align-items:center;padding:clamp(18px,2.6vw,28px)}
.app .head h1{font-size:clamp(30px,5vw,54px);line-height:1}
.app .head p{color:var(--mute);margin-top:8px;max-width:40ch}
.app .head .mark{width:clamp(96px,22vw,150px);height:clamp(96px,22vw,150px);display:block}
.app .motive{padding:clamp(18px,2.6vw,28px);display:grid;gap:8px}
.app .motive q{font-size:clamp(20px,2.4vw,28px);quotes:"“" "”"}
.app .motive small{color:var(--mute);font-size:13px}
.app .motive p{color:var(--mute)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(14px,2.2vw,24px)}
.list{padding:clamp(18px,2.6vw,28px);display:grid;gap:10px;align-content:start}
.list h2{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:500}
.list li{display:flex;gap:10px;align-items:baseline;font-size:15px}
.list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);flex:none;transform:translateY(-2px)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.steps div{background:var(--card);border-radius:18px;padding:12px;font-size:14px;box-shadow:inset 0 0 8px var(--rim)}
.steps b{display:block;font-weight:500;color:var(--primary);font-size:12px;letter-spacing:.08em;margin-bottom:4px}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
details{padding:14px clamp(18px,2.6vw,28px)}
summary{cursor:pointer;color:var(--mute);font-size:14px}
details code{font:12.5px var(--mono);word-break:break-all;display:block;margin-top:8px;color:var(--fg)}
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--mute);font-size:14px;padding:8px 14px 8px 10px;align-self:start;margin-bottom:14px}

/* the bold action, at the thumb */
.dock{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:20;display:none;align-items:center;gap:10px;padding:8px 10px 8px 18px}
.dock.on{display:flex}
.dock span{font-size:14px;color:var(--mute);white-space:nowrap}
.bold{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:var(--primary);color:var(--bg);font-weight:500;text-decoration:none;white-space:nowrap;transition:transform .25s cubic-bezier(.3,1.6,.4,1);box-shadow:0 6px 20px oklch(from var(--primary) l c h / .35)}
.bold:hover{transform:scale(1.05)}.bold:active{transform:scale(.94)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bold{color:var(--a800)}}
:root[data-theme="dark"] .bold{color:var(--a800)}

/* footer */
footer{margin-top:clamp(22px,4vw,40px);padding-top:22px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;color:var(--mute);font-size:14px}
footer a{text-decoration:none}
.sig{display:inline-flex;align-items:center;gap:6px}
.sig svg{width:16px;height:16px;fill:var(--fg);transition:transform .6s cubic-bezier(.3,1.6,.4,1)}
.sig.spin svg{transform:rotate(360deg)}
.heart{position:fixed;pointer-events:none;font-size:18px;animation:fly 1.4s ease-out forwards;z-index:30}
@keyframes fly{to{transform:translate(var(--dx),-140px) rotate(var(--rot));opacity:0}}

/* the yaz: intro, transitions, and the preview from the small icon */
.veil{position:fixed;inset:0;z-index:40;background:var(--bg);display:grid;place-items:center;opacity:1;transition:opacity .55s ease;pointer-events:auto}
.veil.off{opacity:0;pointer-events:none}
.veil canvas{position:absolute;inset:0;width:100%;height:100%}
.veil .why{position:absolute;left:50%;bottom:clamp(40px,12vh,120px);transform:translate(-50%,10px);opacity:0;transition:.5s .3s;text-align:center;font-size:clamp(14px,1.8vw,17px);color:var(--mute);max-width:36ch;padding:12px 18px;margin:0 16px}
.veil .why b{color:var(--fg);font-weight:500}
.veil.tell .why{opacity:1;transform:translate(-50%,0)}
.veil .close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));width:48px;height:48px;display:grid;place-items:center;font-size:22px;opacity:0;transition:.3s .6s}
.veil.tell .close{opacity:1}
.flag{position:fixed;inset:0;z-index:35;pointer-events:none;opacity:0;transition:opacity .6s;background:linear-gradient(180deg,#0f6cb6 33%,#2e9e49 33% 66%,#f7d117 66%)}
.flag.on{opacity:.35}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

:root[data-theme="light"]{color-scheme:light}
.foot-l{position:fixed;z-index:20;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));height:48px;padding:0 18px;display:grid;place-items:center;color:var(--primary);font-weight:500;font-size:14px;white-space:nowrap;transition:transform .25s cubic-bezier(.3,1.6,.4,1)}
.foot-l:active{transform:scale(.94)}
.foot-r{position:fixed;z-index:20;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:48px;height:48px;display:grid;place-items:center;transition:transform .25s cubic-bezier(.3,1.6,.4,1)}
.foot-r:active{transform:scale(.9)}
.ms{width:24px;height:24px;fill:var(--primary)}
.foot-r svg{width:24px;height:24px}
.foot-r .moon{display:none}
:root[data-theme="dark"] .foot-r .sun{display:none}:root[data-theme="dark"] .foot-r .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .foot-r .sun{display:none}:root:not([data-theme="light"]) .foot-r .moon{display:block}}
.fine{color:var(--mute);font-size:13px;text-align:center;padding:4px 8px}
.fine a{color:var(--mute)}
.langs{font:inherit;font-size:14px;color:var(--fg);background:var(--card);border:0;border-radius:999px;padding:8px 32px 8px 14px;box-shadow:inset 0 0 8px var(--rim);appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.motive .qt{color:var(--fg);font-size:15px;margin-top:-2px}
[dir="rtl"] .back{flex-direction:row-reverse}
[lang="ar"] body,[lang="hi"] body{line-height:1.7}
.app .head .nm{color:var(--fg);margin-top:6px;font-size:15px}
.app .head .nm + p{margin-top:4px}
/* an app's page keeps only its own controls: the corners and the pill belong to the overview */
body.page .corner,body.page .foot-l,body.page .foot-r,body.page .palette{display:none}