/* skymail public Webmail showcase · r151. Styles belong to this page only. */
:root{color-scheme:dark;--page:#0b101c;--surface:#111827;--line:#252d40;--muted:#a5b0c5;--text:#f4f7fc;--blue:#7bb6ff;scroll-behavior:smooth;scroll-padding-top:100px}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--text);font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}button,a,summary{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:default}button{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #97c6ff;outline-offset:5px}button,input,textarea{min-width:0}h1,h2,h3,p{margin:0}button svg{pointer-events:none}svg.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.container{width:min(1240px,calc(100% - 80px));margin-inline:auto}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:#fff;color:#10213c;padding:12px 20px;border-radius:8px}.skip-link:focus{top:12px}
.site-header{position:relative;z-index:10;border-bottom:1px solid var(--line);background:rgba(11,16,28,.97)}.header-inner{height:86px;display:flex;align-items:center;gap:52px}.brand{display:inline-flex;align-items:center;font-size:29px;font-weight:750;letter-spacing:-1.5px;line-height:1}.brand svg{width:37px;height:31px;margin-right:9px;fill:#50b5fc}.brand-dot{color:#59b9ff}.header-nav,.header-actions{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:550}.header-actions{margin-left:auto;gap:24px}.header-nav a:not(.submenu a),.login-link{color:#c7cfdf}.header-nav a:hover,.login-link:hover{color:#fff}.webmail-menu{position:relative}.webmail-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px}.webmail-menu summary::-webkit-details-marker{display:none}.webmail-menu summary span{font-size:17px;color:#8490a6}.submenu{position:absolute;top:48px;left:-20px;min-width:220px;background:#172134;border:1px solid #364259;box-shadow:0 18px 50px #0007;border-radius:12px;padding:8px;display:grid;gap:2px}.submenu a{padding:9px 12px;border-radius:6px}.submenu a:hover{background:#25354d;color:white}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:14px 22px;min-height:52px;border:1px solid transparent;border-radius:8px;background:#8ac2ff;color:#091b31;font-size:14px;font-weight:700;line-height:1.4;transition:background .18s,transform .18s;white-space:normal}.button:hover{background:#afd6ff;transform:translateY(-2px)}.button-small{min-height:43px;padding:10px 16px;font-size:13px}.button-small svg.icon{width:17px;height:17px}.text-link{display:inline-flex;align-items:center;gap:14px;font-size:14px;font-weight:600}.text-link:hover{text-decoration:underline;text-underline-offset:5px}.live-dot{display:inline-block;width:6px;height:6px;background:#7bb6ff;border-radius:50%;flex-shrink:0}.eyebrow{font-size:11px;line-height:1.6;font-weight:650;letter-spacing:1.9px;color:#99b9df}.hero{display:grid;grid-template-columns:1fr 1fr;gap:100px;padding-block:70px 52px;background:radial-gradient(ellipse at 15% 70%,#17375a30,transparent 65%)}.hero .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:21px}.hero h1{font-size:clamp(55px,5.4vw,78px);line-height:1.06;font-weight:650;letter-spacing:-4px}.hero h1 span{color:#8cc0ff}.hero-intro{align-self:end;padding-bottom:4px}.hero-intro>p{max-width:520px;color:#b4bfd3;font-size:17px;line-height:1.8}.hero-actions{margin-top:25px;display:flex;gap:25px;align-items:center;flex-wrap:wrap}.hero-notes{display:flex;align-items:center;gap:23px;margin-top:22px;color:#93a0b7;font-size:12px}.hero-notes span{display:flex;align-items:center;gap:6px}.hero-notes svg.icon{width:14px;height:14px;color:#80b9f9}
.playground{position:relative}.playground::before{content:"";position:absolute;inset:60px 0 -70px;pointer-events:none;background:radial-gradient(ellipse at 45% 35%,#2660b42c,transparent 70%);z-index:-1}.playground-toolbar{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:20px}.playground-toolbar h2{font-size:17px;font-weight:600;letter-spacing:-.3px}.playground-toolbar p{color:#8c9bb3;font-size:12px;margin-top:3px}.design-controls{display:flex;align-items:center;gap:25px}.design-controls fieldset{margin:0;border:0;padding:0;display:flex;align-items:center;gap:6px}.theme-control{background:#151e2e;border:1px solid #2b3549!important;border-radius:8px;padding:4px!important}.theme-control button{display:flex;align-items:center;gap:7px;border:0;background:none;padding:7px 12px;border-radius:5px;color:#a9b5c9;font-size:12px;min-height:32px}.theme-control button[aria-pressed=true]{color:#f6f8ff;background:#34415b}.theme-control .icon{width:15px;height:15px}.accent-control .swatch{width:30px;height:30px;border-radius:50%;padding:0;border:5px solid var(--page);outline:1px solid transparent;position:relative}.accent-control .swatch[aria-pressed=true]{outline-color:#c5daef}.swatch-blue{background:#7bb6ff}.swatch-purple{background:#b49aff}.swatch-green{background:#6ddbb2}.swatch-rose{background:#f5a0c6}.swatch-orange{background:#ffbf82}.swatch[aria-pressed=true]::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #132638;border-width:0 2px 2px 0;transform:rotate(45deg)}
.section-space{margin-top:112px}.section-heading h2,.shortcut-grid h2{font-size:42px;line-height:1.2;letter-spacing:-1.6px;font-weight:600;margin-top:16px}.section-heading>p:last-child{font-size:15px;max-width:450px;color:#9daac0;margin-top:22px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}.feature-card{position:relative;background:linear-gradient(145deg,#17213480,#101726);border:1px solid #293347;border-radius:10px;padding:26px 23px 24px}.feature-icon{width:26px!important;height:26px!important;color:#8ebdff;margin-bottom:29px}.feature-card h3{font-size:17px;font-weight:550;letter-spacing:-.35px;line-height:1.5}.feature-card p{font-size:13px;line-height:1.85;color:#9ba9bf;margin-top:12px}.feature-label{display:block;color:#9ab7df;font-size:10px;margin-top:25px;letter-spacing:.3px}.shortcut-section{padding:64px 0;background:#111927;border-block:1px solid #222d41}.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:120px;align-items:center}.shortcut-grid>div>p:not(.eyebrow){color:#9facc2;font-size:14px;max-width:400px;margin-top:20px}.shortcut-grid .text-link{margin-top:24px;color:#9cc9ff;font-size:12px}.shortcut-panel{border:1px solid #36435a;background:#182235;border-radius:12px;padding:12px 25px 20px;box-shadow:0 12px 40px #0002}.shortcut-panel>a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid #303c52;font-size:13px}.shortcut-panel kbd{font-family:inherit;font-size:14px;font-weight:500;border:1px solid #53617a;border-bottom-width:3px;box-shadow:0 2px 3px #0002;border-radius:6px;background:#28354b;min-width:34px;min-height:33px;display:grid;place-items:center;color:#d9e7ff}.shortcut-panel>p{color:#95a5bf;font-size:10px;line-height:1.8;margin-top:16px}.details-section{display:grid;grid-template-columns:1fr 1.4fr;gap:100px}.faq-list details{border-bottom:1px solid #2b3448}.faq-list details:first-child{border-top:1px solid #2b3448}.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 0;list-style:none;font-size:14px;cursor:pointer}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{font-size:21px;color:#8caacb;font-weight:300}.faq-list details[open] summary>span{transform:rotate(45deg)}.faq-list details p{color:#9fadc2;font-size:13px;line-height:1.9;padding-bottom:24px}.faq-list a{color:#a9d0ff;text-decoration:underline;text-underline-offset:4px}.closing-cta{text-align:center;border:1px solid #2d405e;background:radial-gradient(ellipse at 50% 0,#25477970,transparent 80%),#111c30;border-radius:14px;padding:60px 30px;margin-top:100px;margin-bottom:80px;position:relative;overflow:hidden}.closing-cta h2{font-size:47px;line-height:1.2;letter-spacing:-1.9px;font-weight:600;margin-top:18px}.closing-cta>p:not(.eyebrow){color:#a9b9d0;font-size:15px;margin-top:20px}.closing-cta .button{margin-top:25px}.pricing-note{display:block;color:#92a2ba;font-size:10px;margin-top:20px}.pricing-note a{text-decoration:underline;text-underline-offset:3px}.site-footer{border-top:1px solid #263044;padding-block:30px 40px;display:flex;align-items:center;gap:30px}.footer-brand{font-size:23px}.site-footer>span{color:#798aa5;font-size:11px}.site-footer nav{display:flex;gap:25px;margin-left:auto;font-size:11px;color:#99a9bf}.site-footer nav a:hover{color:white}
@media(min-width:1600px){.hero{padding-top:90px}.hero h1{font-size:84px}}
@media(max-width:1150px){.container{width:calc(100% - 56px)}.header-inner{gap:32px}.header-nav{gap:20px}.hero{gap:55px}.hero-intro>p{font-size:15px}.hero-actions{gap:18px}.hero .button{padding-inline:16px;font-size:12px}.hero .text-link{font-size:12px}.feature-grid{grid-template-columns:1fr 1fr}.shortcut-grid{gap:70px}.details-section{gap:60px}}
@media(max-width:850px){.header-inner{height:74px;gap:26px}.header-nav .desktop-link{display:none}.header-actions{gap:18px}.header-actions .button .icon{display:none}.brand{font-size:25px}.brand svg{width:32px}.hero{gap:30px;padding-block:52px 40px}.hero h1{font-size:60px;letter-spacing:-3px}.hero .eyebrow{font-size:8px;letter-spacing:1.5px}.hero-intro>p{font-size:14px}.hero-actions{gap:15px;margin-top:18px}.hero-notes{font-size:10px;gap:12px;margin-top:16px}.playground-toolbar{gap:15px}.design-controls{gap:14px}.shortcut-grid{gap:40px}.shortcut-grid h2,.section-heading h2{font-size:34px}.details-section{grid-template-columns:1fr 1.5fr;gap:35px}.section-space{margin-top:85px}.shortcut-panel{padding-inline:18px}.shortcut-panel>a{font-size:11px}.site-footer{gap:18px}.site-footer nav{gap:15px}}
@media(max-width:620px){:root{scroll-padding-top:30px}.container{width:calc(100% - 36px)}.header-inner{height:68px;gap:18px}.brand{font-size:24px}.brand svg{width:30px;height:25px;margin-right:6px}.header-nav{font-size:12px}.header-actions .login-link{display:none}.header-actions .button{font-size:10px;padding:9px 11px;min-height:36px}.webmail-menu summary{gap:4px}.submenu{left:auto;right:-25px;top:46px;min-width:200px}.hero{grid-template-columns:1fr;gap:22px;padding-block:40px 35px}.hero .eyebrow{font-size:9px;margin-bottom:17px}.hero h1{font-size:clamp(44px,14vw,58px);letter-spacing:-2.5px}.hero-intro>p{font-size:14px;line-height:1.85}.hero .button{font-size:12px;min-height:47px}.hero-actions{gap:18px;margin-top:22px}.hero-notes{font-size:10px;gap:20px;margin-top:18px}.playground-toolbar{align-items:flex-start;flex-direction:column;margin-bottom:14px;gap:13px}.playground-toolbar h2{font-size:16px}.playground-toolbar p{font-size:11px}.design-controls{width:100%;justify-content:space-between;gap:10px}.design-controls fieldset{gap:3px}.theme-control button{font-size:10px;padding:6px 9px;min-height:30px;gap:5px}.accent-control .swatch{width:27px;height:27px;border-width:4px}.swatch[aria-pressed=true]::after{left:6px;top:3px;width:4px;height:8px}.window-dots{gap:4px}.window-dots span{width:5px;height:5px}.sidebar-toggle{display:none}.section-space{margin-top:68px}.section-heading h2,.shortcut-grid h2{font-size:32px;letter-spacing:-1px}.section-heading .eyebrow,.shortcut-grid .eyebrow{font-size:9px;letter-spacing:1.4px}.section-heading>p:last-child{font-size:13px;margin-top:16px}.feature-grid{gap:12px;margin-top:28px}.feature-card{padding:20px 15px}.feature-icon{margin-bottom:22px;width:23px!important;height:23px!important}.feature-card h3{font-size:15px}.feature-card p{font-size:11px;line-height:1.9}.feature-label{font-size:8px;margin-top:20px}.shortcut-section{padding-block:40px}.shortcut-grid{grid-template-columns:1fr;gap:30px}.shortcut-grid>div>p:not(.eyebrow){font-size:13px;max-width:100%}.shortcut-panel>a{font-size:12px}.shortcut-panel{padding-inline:20px}.details-section{grid-template-columns:1fr;gap:25px}.faq-list summary{font-size:13px;padding:20px 0}.faq-list details p{font-size:12px}.closing-cta{margin-top:65px;margin-bottom:45px;padding:40px 20px}.closing-cta .eyebrow{font-size:8px;letter-spacing:1.2px}.closing-cta h2{font-size:34px;letter-spacing:-1px}.closing-cta>p:not(.eyebrow){font-size:13px}.pricing-note{font-size:9px;max-width:270px;margin-inline:auto}.site-footer{flex-wrap:wrap;padding-block:25px 35px;gap:15px}.footer-brand{font-size:22px}.site-footer>span{margin-left:auto;font-size:10px}.site-footer nav{margin-left:0;width:100%;justify-content:space-between;gap:10px;margin-top:8px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
/* Browser captures of the real UI. */
.swatch-blue{background:#2092ec}.swatch-purple{background:#7367f0}.swatch-green{background:#28a879}
.screenshot-frame{margin:0;border:1px solid #3c4c65;border-radius:14px;overflow:hidden;background:#121a2a;box-shadow:0 20px 80px #0004,0 0 70px #2355ab10}
.screenshot-titlebar{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #2a3449;color:#9dabc2;font-size:10px;background:#111a29}
.window-dots{display:flex;gap:6px}.window-dots>span{width:7px;height:7px;border-radius:50%;background:#59667a}.window-dots>span:first-child{background:#b17c88}.window-dots>span:nth-child(2){background:#b9a879}.window-dots>span:nth-child(3){background:#6aab96}.screenshot-badge{font-size:8px;letter-spacing:1.2px}
.screenshot-link{position:relative;display:block;background:#111a29;line-height:0}.screenshot-link img{width:100%;height:auto;display:block}.screenshot-link:focus-visible{outline-offset:-5px;outline:3px solid #97c6ff}.screenshot-zoom{position:absolute;right:20px;bottom:20px;display:flex;align-items:center;gap:10px;line-height:1.5;border:1px solid #597495;border-radius:7px;background:#111d30f5;padding:10px 14px;font-size:11px;color:#e3efff;box-shadow:0 5px 20px #0004}.screenshot-link:hover .screenshot-zoom{background:#294665}.screenshot-zoom .icon{width:14px;height:14px}.screenshot-link.loading img{opacity:.75}
.screenshot-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 18px;border-top:1px solid #2a3449;font-size:10px;color:#a8b9d2}.screenshot-footer>span:last-child{color:#8192ad}.demo-caption{display:flex;justify-content:space-between;gap:20px;margin-top:15px;font-size:10px;color:#8e9bb1}.demo-caption>span:first-child{display:flex;align-items:center;gap:7px}.demo-caption .live-dot{width:4px;height:4px}.noscript-note{font-size:13px;color:#b7c8e2;margin-top:20px}.noscript-note a{text-decoration:underline;text-underline-offset:3px}.gallery-status.has-error{position:static!important;clip:auto!important;white-space:normal!important;width:auto!important;height:auto!important;font-size:12px;color:#ffcdab;padding-top:12px;overflow:visible!important}
@media(max-width:620px){.screenshot-frame{border-radius:9px}.screenshot-titlebar{height:30px;padding-inline:10px;font-size:8px}.screenshot-badge{font-size:6px;letter-spacing:.8px}.window-dots{gap:4px}.window-dots>span{width:5px;height:5px}.screenshot-zoom{position:static;justify-content:center;background:#18263d;border:0;border-radius:0;font-size:10px;padding:10px;box-shadow:none}.screenshot-footer{padding:10px;font-size:8px}.screenshot-footer>span:last-child,.demo-caption>span:last-child{display:none}.demo-caption{font-size:9px;line-height:1.7}.design-controls{justify-content:flex-start;gap:25px}}
.shortcut-panel>a:hover{color:#b8d9ff}.shortcut-panel>a:focus-visible{outline-offset:4px}.feature-label[href]:hover{text-decoration:underline;text-underline-offset:4px}.screenshot-footer>a{text-decoration:underline;text-underline-offset:3px}
.brand img{display:block;width:183px;height:auto}.footer-brand img{width:125px}.feature-help{display:block;font-size:11px;color:#9cc9ff;margin-top:9px}.feature-help:hover{text-decoration:underline;text-underline-offset:4px}.webmail-story{display:grid;grid-template-columns:1fr 1.4fr;gap:90px;align-items:start}.story-copy>p{font-size:15px;color:#aebcd2;line-height:1.9}.story-copy>p+p{margin-top:18px}.story-copy>.text-link{color:#9cc9ff;font-size:12px;margin-top:22px}.shortcut-summary{padding:28px}.shortcut-summary>.icon{width:27px;height:27px;color:#9bc7ff;margin-bottom:19px}.shortcut-summary h3{font-size:25px;font-weight:550;letter-spacing:-.6px;line-height:1.3}.shortcut-summary>p{font-size:13px;color:#a5b6d0;line-height:1.9;margin-top:18px}
@media(max-width:850px){.webmail-story{gap:40px}.brand img{width:160px}}
@media(max-width:620px){.header-inner{gap:12px}.brand img{width:125px}.footer-brand img{width:110px}.header-nav{font-size:11px}.header-actions .button{font-size:9px;padding:9px 10px}.webmail-story{grid-template-columns:1fr;gap:24px}.story-copy>p{font-size:13px}.shortcut-summary{padding:23px}.shortcut-summary h3{font-size:23px}.shortcut-summary>p{font-size:12px}}
@media(max-width:380px){.brand img{width:95px}.footer-brand img{width:110px}}
.hero-notes{flex-wrap:wrap}.shortcut-jump{color:#b3d7ff;text-decoration:underline;text-underline-offset:4px}.shortcut-jump:hover{color:white}.shortcut-teasers{padding:10px 25px 20px}.shortcut-teaser{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid #34435b;color:#e6efff;font-size:14px}.shortcut-teasers kbd{min-width:44px;min-height:42px;font-size:19px;color:#d9eaff}.shortcut-teasers>p{font-size:11px;line-height:1.8;color:#9fb1cc;margin-top:18px}
@media(max-width:620px){.shortcut-teasers{padding:8px 20px 18px}.shortcut-teaser{font-size:13px;padding:15px 0}.shortcut-teasers kbd{min-width:38px;min-height:37px;font-size:17px}}
/* r156: enlarge only the E-Mail App submenu. */
.submenu{min-width:230px;max-width:calc(100vw - 36px)}
.submenu a{display:block;min-height:48px;padding:12px 16px;font-size:16px;line-height:24px}
@media(max-width:620px){.header-inner{position:relative}.webmail-menu{position:static}.submenu{top:100%;left:0;right:auto;max-width:100%}}
/* r159: static reminder that mailbox accent colors can be chosen freely. */
.design-controls{flex-wrap:wrap;justify-content:flex-end}.design-controls .accent-control{flex-wrap:wrap;max-width:100%}
.color-freedom{display:inline-flex;align-items:center;gap:8px;margin-left:7px;color:#c0cde1;font-size:12px;line-height:1.5;white-space:nowrap}
.color-freedom-swatch{display:inline-block;flex-shrink:0;width:28px;height:28px;border:2px solid #becce0;border-radius:50%;background:conic-gradient(#ff5c77,#ffbd59,#b7e65b,#4bd5ae,#54c6ff,#8878ff,#ed84dc,#ff5c77)}
@media(max-width:620px){.design-controls{justify-content:flex-start;gap:12px}.color-freedom{margin-left:5px;font-size:12px}.color-freedom-swatch{width:26px;height:26px}}