:root{color-scheme:dark;--bg:#222;--panel:#303030;--text:#eee;--muted:#c8c8d5;--link:#a7baff;--accent:#050577}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.65 Arial,sans-serif}
a{color:var(--link);text-underline-offset:.2em}
a:hover{color:#fff}
a:focus-visible,summary:focus-visible{outline:3px solid #54dbee;outline-offset:5px}
main{max-width:1120px;margin:auto;padding:24px}
nav{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:15px}
main{padding-top:44px}
section{margin-bottom:64px}
h1,h2,h3{line-height:1.2;text-wrap:balance}
h1{font-size:clamp(36px,5vw,58px);margin:12px 0 24px;letter-spacing:-.03em}
h2{font-size:30px;margin:0 0 20px}
h3{font-size:21px;margin:0 0 12px}
p{margin:0 0 20px}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}
.eyebrow{font-size:14px;color:#a9e2ef;letter-spacing:.08em;text-transform:uppercase}
.intro{font-size:21px;line-height:1.5}
.button{display:inline-block;padding:13px 20px;background:var(--accent);border:1px solid #8790f7;border-radius:6px;color:#fff;font-weight:bold;text-decoration:none;line-height:1.4}
.button:hover{background:#17179c}
.button[hidden]{display:none}
.small,figcaption{font-size:14px;color:var(--muted)}
.small{margin-top:14px}
.privacy-note{font-size:15px;border-left:3px solid #54dbee;padding-left:14px;margin-top:24px}
figure{margin:0}
img{display:block;max-width:100%;height:auto;border-radius:8px}
figcaption{margin-top:12px}
.hero-image img{width:100%}
.gif-demo{padding:28px;background:var(--panel);border-radius:8px;text-align:center}
.gif-stage{display:grid;place-items:center;min-height:260px;margin-bottom:22px;background:#202026;border-radius:6px}
.gif-stage img{border-radius:0}
.gif-demo figcaption{text-align:left;margin-top:20px}
.steps{padding-left:30px;max-width:850px}
.steps li{padding-left:8px;margin-bottom:28px}
.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:28px 0}
.example-grid figure{padding:20px;background:var(--panel);border-radius:8px}
.example-grid img{width:100%;max-width:400px;margin:auto}
.gallery-jumps{margin:0 0 36px;padding:16px 0;border-top:1px solid #555;border-bottom:1px solid #555}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px;margin-top:28px}
.gallery-card{background:var(--panel);border-radius:8px;overflow:hidden}
.gallery-card img{width:100%;border-radius:0}
.gallery-image-link{display:block}
.gallery-image-link:focus-visible{outline-offset:-4px}
.gallery-copy{padding:22px}
.gallery-copy p{font-size:16px}
.gallery-animation{display:flex;align-items:center;gap:28px;background:var(--panel);padding:24px;border-radius:8px;margin-top:24px}
.gallery-animation img{flex-shrink:0}
@media(max-width:480px){.gallery-animation{flex-direction:column;align-items:flex-start}}
.tips-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tips-grid div{border: 1px solid #777;border-radius: 8px;padding: 20px;}
.table-scroll{overflow-x:auto;margin:24px 0;border:1px solid #555;border-radius:8px}
.table-scroll:focus-visible{outline:3px solid #54dbee;outline-offset:4px}
.size-table{width:100%;border-collapse:collapse;font-size:16px;text-align:left}
.size-table th,.size-table td{padding:14px 16px;border-bottom:1px solid #555}
.size-table thead{background:var(--panel)}
.size-table td:nth-child(2),.size-table td:nth-child(3){white-space:nowrap}
.size-table tbody tr:last-child>*{border-bottom:0}
details{padding:18px 0;border-bottom:1px solid #555}
summary{cursor:pointer;font-weight:bold}
details p{margin:14px 0 0;max-width:850px}
.closing{padding:32px;background:var(--panel);border-radius:8px}
.skip-link{position:absolute;top:8px;left:8px;transform:translateY(-150%);padding:10px;background:#050577;color:#fff;z-index:10}
.skip-link:focus{transform:none}
@media(max-width:760px){.hero,.tips-grid{grid-template-columns:1fr}.hero{gap:28px}main{padding-top:30px}section{margin-bottom:44px}}
@media(max-width:480px){main{padding-left:18px;padding-right:18px}.example-grid{grid-template-columns:1fr}.closing{padding:22px}.button{width:100%;text-align:center}h2{font-size:26px}}

/* Shared page chrome: matches the existing features.html header and footer. */
body{margin-top:45px}
body.geomchange{margin-top:0}
header,footer{box-sizing:border-box;max-width:1120px;margin:0 auto;background-color:#373737;font:12px Arial,sans-serif;line-height:normal}
header{position:fixed;z-index:9999;left:env(titlebar-area-x,0);top:env(titlebar-area-y,0);width:env(titlebar-area-width,100%);height:env(titlebar-area-height,40px);app-region:drag;background:#050577;vertical-align:top;max-width:inherit}
.geomchange header{position:relative;max-width:1120px;margin:0 auto;background:transparent;height:auto}
footer{text-align:center;padding:16px;bottom:0;border-top:1px solid #999}
#Kaleidosh3{color:#fff;background:red;background:linear-gradient(to right,orange,red,yellow,green,cyan,#5656ff,violet);-webkit-background-clip:text;background-clip:text;display:inline-block;-webkit-text-fill-color:transparent;margin:0 15px 0 5px;font-size:24px;line-height:normal}
.geomchange #Kaleidosh3{margin:5px;font-size:64px;font-size:4cqw}
#Kaleidosh3 b{font-size:50%}
#Kaleidosh3:before{display:inline-block;content:'';left:34px;width:26px;height:26px;background-image:url(../favicon-32x32.png);background-size:28px 28px;background-repeat:no-repeat}
.geomchange #Kaleidosh3:before{width:64px;height:64px;background-image:url(../logo64.png);background-position:left top;background-size:64px 64px}
#menuleft{text-align:right;display:inline-block;vertical-align:top;float:none}
.geomchange #menuleft{float:right}
#menuleft a,#menufoter a{background:#0dccea;background-image:linear-gradient(#0dccea,#0d70ea);border:1px solid #555;border-radius:4px;box-sizing:border-box;color:#fff;cursor:pointer;padding:3px 6px;text-align:center;-webkit-user-select:none;user-select:none;box-shadow:0px 2px 10px #777,0 0 0 1px #aaa inset;touch-action:manipulation;-webkit-app-region:no-drag;app-region:no-drag;display:inline-block;margin:3px;text-decoration:none}
#menuleft a:hover,#menufoter a:hover{box-shadow:0 0 8px #000 inset}
#install_but{display:none}
@media screen and (max-width:780px){#Kaleidosh3{position:fixed;left:0;z-index:-1;font-size:12px}header{text-align:right}}
@media screen and (max-width:400px){.geomchange #Kaleidosh3{max-width:28px}}
@media screen and (min-width:1120px){.geomchange #Kaleidosh3{font-size:47px}}
@media screen and (max-width:810px){.geomchange header{z-index:0;height:40px;text-align:right}.geomchange #Kaleidosh3{font-size:3cqw;position:fixed;left:0;z-index:-1}.geomchange #Kaleidosh3:before{width:32px;height:32px;background-image:url(../favicon-32x32.png);background-size:32px 32px}}