/* FrostLoop design system for every page. Loaded after style.css and site.css, it re-skins them through their own tokens:
   cool snow-white paper, deep ink, the logo's blue-violet-orange as the one accent, Zen Kaku Gothic New + Shippori Mincho. */
:root {
  --serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', Georgia, serif;
  --sans: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif;
  --bg: #f4f8fc; --card: #ffffff; --ink: #0c1f3b; --mut: #3f4f68; --line: #dce5ef; --soft: #eaf1f8;
  --brand: #0b3a63; --brand2: #2f6fe4; --accent: #1d4fb8; --on-brand: #ffffff;
  --btn: linear-gradient(135deg, #2f6fe4 0%, #0b3a63 100%); --btn-shadow: 0 10px 26px rgba(11, 58, 99, .32);
  --ok: #1f9d6b; --warn: #b8690f; --bad: #d64545;
  --shadow: 0 1px 2px rgba(11, 58, 99, .06), 0 14px 34px rgba(11, 58, 99, .08);
  --radius: 16px; --ds-grad: linear-gradient(90deg, #63b8ff 0%, #2f6fe4 38%, #a98df2 68%, #f2a33a 100%);
  font-size: 16px;
}
html[data-theme='dark'] {
  --bg: #0a1220; --card: #121c31; --ink: #e9f0fd; --mut: #a8b8d4; --line: #223352; --soft: #172641;
  --brand: #9ccbff; --brand2: #63b8ff; --accent: #9ccbff; --on-brand: #06142b;
  --btn: linear-gradient(135deg, #63b8ff, #2f6fe4); --btn-shadow: 0 10px 28px rgba(99, 184, 255, .28);
  --ok: #4fd1a0; --warn: #f0b255; --bad: #f28b8b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .45);
}
body { font-weight: 500; letter-spacing: .01em; text-rendering: optimizeLegibility;
  background: radial-gradient(900px 340px at 85% -120px, #e1efff 0%, rgba(225, 239, 255, 0) 70%), var(--bg); background-attachment: fixed; }
html[data-theme='dark'] body { background: radial-gradient(900px 340px at 85% -120px, rgba(47, 111, 228, .22), transparent 70%), var(--bg); }
h1, h2, h3, h4 { letter-spacing: 0; }
::selection { background: rgba(47, 111, 228, .25); }
:focus-visible { outline: 2px solid #2f6fe4 !important; outline-offset: 3px; }

/* aurora and snow behind everything */
body::before { content: ''; position: fixed; inset: -10%; z-index: -1; pointer-events: none; background:
  radial-gradient(38vw 30vh at 12% 8%, rgba(99, 184, 255, .20), transparent 62%), radial-gradient(34vw 28vh at 88% 18%, rgba(169, 141, 242, .13), transparent 62%), radial-gradient(40vw 30vh at 62% 96%, rgba(242, 163, 58, .10), transparent 62%);
  animation: ds-aurora 26s ease-in-out infinite alternate; }
html[data-theme='dark'] body::before { opacity: .55; }
.snow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.snow.page { position: fixed; z-index: 0; }
.snow i { position: absolute; top: -14px; width: var(--s, 5px); height: var(--s, 5px); border-radius: 50%; background: #6ea6e6; opacity: 0; animation: ds-snow var(--d, 9s) linear var(--w, 0s) infinite; }
html[data-theme='dark'] .snow i { background: #cfe5ff; }
.ds-page > *:not(.snow) { position: relative; z-index: 1; }
.ds-page > .toast { position: fixed; } /* the rule above made it a block under the page, which added a strip of scroll */

/* header: frosted glass, the logo's gradient on its top edge, the real logo (snowflake + wordmark) instead of the old mark */
.nav, .top { position: sticky; top: 0; z-index: 30; max-width: none !important; margin: 0 !important; padding: 8px max(20px, calc((100vw - 1080px) / 2)) 4px !important; background: rgba(244, 248, 252, .93); border-bottom: 1px solid rgba(12, 31, 59, .06); transition: background .3s, box-shadow .3s, border-color .3s; }
.top { padding-left: max(20px, calc((100vw - 1500px) / 2 + 20px)) !important; padding-right: max(20px, calc((100vw - 1500px) / 2 + 20px)) !important; }
html[data-theme='dark'] .nav, html[data-theme='dark'] .top { background: rgba(10, 18, 32, .94); border-bottom-color: rgba(255, 255, 255, .06); }
.nav.scrolled, .top.scrolled { background: rgba(255, 255, 255, .88); border-bottom-color: var(--line); box-shadow: 0 10px 34px rgba(11, 58, 99, .08); }
html[data-theme='dark'] .nav.scrolled, html[data-theme='dark'] .top.scrolled { background: rgba(14, 24, 44, .9); }
.brand { gap: 10px !important; text-decoration: none; }
.brand .ds-flake, .brand .ds-word { display: block; line-height: 0; } .brand .ds-flake { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); } .brand:hover .ds-flake { transform: scale(1.08) rotate(-6deg); }

.brand .tag, .brand .tag2 { color: var(--mut) !important; font-family: var(--sans) !important; font-style: normal !important; font-size: .82rem !important; font-weight: 500; }
.nav nav a { font-weight: 700; color: var(--ink); } .nav nav a:hover { color: var(--brand2); }
.nav nav a.signin, .icon { border-radius: 999px !important; border: 1px solid var(--line); background: rgba(255, 255, 255, .8); }
html[data-theme='dark'] .nav nav a.signin, html[data-theme='dark'] .icon { background: rgba(255, 255, 255, .06); }

/* buttons and chips, shared look */
a.primary, button.primary, .primary { border-radius: 999px !important; background: var(--btn) !important; color: #fff !important; box-shadow: var(--btn-shadow); font-weight: 700; letter-spacing: .02em; transition: transform .2s, box-shadow .2s; }
a.primary:hover, button.primary:hover, .primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(47, 111, 228, .42); }
a.ghost, button.ghost, .ghost { border-radius: 999px !important; border: 1.5px solid var(--line) !important; background: rgba(255, 255, 255, .8) !important; color: var(--brand) !important; font-weight: 700; transition: border-color .2s, transform .2s, box-shadow .2s; }
html[data-theme='dark'] a.ghost, html[data-theme='dark'] .ghost { background: rgba(255, 255, 255, .06) !important; }
a.ghost:hover, .ghost:hover { border-color: var(--brand2) !important; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(47, 111, 228, .18); }
.chip { background: linear-gradient(135deg, rgba(99, 184, 255, .18), rgba(242, 163, 58, .16)) !important; border: 1px solid rgba(47, 111, 228, .25) !important; color: var(--brand) !important; font-weight: 700; letter-spacing: .1em; }
input, select, textarea { border-radius: 12px !important; border: 1.5px solid var(--line) !important; background: rgba(255, 255, 255, .95); font-weight: 500; }
html[data-theme='dark'] input, html[data-theme='dark'] select, html[data-theme='dark'] textarea { background: rgba(255, 255, 255, .06); }
input:focus, select:focus, textarea:focus { border-color: var(--brand2) !important; box-shadow: 0 0 0 4px rgba(47, 111, 228, .16) !important; outline: none !important; }

/* headings: section titles with the gradient underline, big serif numbers elsewhere keep the serif token */
.band h2, main > section > h2 { display: inline-block; padding-bottom: 10px; background: var(--ds-grad) left bottom / 64px 3px no-repeat; }
.hero h1 { background: linear-gradient(100deg, #0b3a63 0%, #2f6fe4 55%, #a98df2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; letter-spacing: -.01em; }
html[data-theme='dark'] .hero h1 { background: linear-gradient(100deg, #e9f0fd 0%, #9ccbff 60%, #c9b8ff 100%); -webkit-background-clip: text; background-clip: text; }

/* home hero: text on the left, the penguin on its hills on the right */
.hero.ds-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; align-items: center; max-width: 1080px !important; margin: 0 auto; }
.ds-hero-art { position: relative; height: 340px; }
.ds-orb { position: absolute; inset: -6% 0 12% 6%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(99, 184, 255, .38), rgba(169, 141, 242, .14) 50%, transparent 72%); filter: blur(6px); animation: ds-breathe 6s ease-in-out infinite; }
.ds-flake-big { position: absolute; left: 4%; top: 0; z-index: 3; animation: ds-float 7s ease-in-out infinite; }
.ds-hills { position: absolute; left: -4%; bottom: 0; width: 108%; height: 62%; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
.ds-hills .b { fill: #d9e9f8; } .ds-hills .m { fill: #e8f1fb; } .ds-hills.front { height: 40%; z-index: 4; filter: drop-shadow(0 -10px 24px rgba(47, 111, 228, .12)); } .ds-hills.front path { fill: #fff; }
html[data-theme='dark'] .ds-hills .b { fill: #14233f; } html[data-theme='dark'] .ds-hills .m { fill: #1a2d4e; } html[data-theme='dark'] .ds-hills.front path { fill: #22375c; }
.ds-hero-penguin { position: absolute; right: 12%; bottom: 17%; z-index: 3; line-height: 0; }

/* sections and cards rise as they scroll into view */
.ds-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); }
.ds-rv.in { opacity: 1; transform: none; }

/* customer login: a card like the request form */
body.ds-login main.grid { display: flex; justify-content: center; align-items: center; box-sizing: border-box; min-height: calc(100vh - var(--hh, 60px)); margin: 0; padding: 0 20px; } /* the card alone is centred in what is left under the header; the penguin hangs above it and does not count */
body.ds-login .login.card { position: relative; max-width: 440px; width: 100%; padding: 22px 30px 18px; border-radius: 26px; background: rgba(255, 255, 255, .94); border: 1.5px solid rgba(255, 255, 255, .95); box-shadow: 0 30px 80px rgba(47, 111, 228, .18); }
html[data-theme='dark'] body.ds-login .login.card { background: rgba(18, 28, 49, .94); border-color: rgba(255, 255, 255, .08); }
.login.card h2 { font: 600 1.75rem var(--serif); margin: 0 0 4px; padding: 0; background: none; } .login.card p { margin: 0 0 10px; }
.login.card .primary { width: 100%; height: 48px; }
.ds-peek { transition: transform .5s cubic-bezier(.3, 1.3, .5, 1), opacity .35s; transform-origin: 50% 100%; }
body.ds-hiding .ds-peek { transform: translateY(24px) scale(.88); opacity: 0; } body.ds-error .ds-peek { animation: ds-headshake .6s ease-in-out; } body.ds-error .login.card { animation: ds-shake .55s cubic-bezier(.36, .07, .19, .97); }
/* forms */
main.ds-card { position: relative; margin-top: 96px !important; padding: 30px 34px 28px !important; border-radius: 26px; background: rgba(255, 255, 255, .94); border: 1.5px solid rgba(255, 255, 255, .95); box-shadow: 0 30px 80px rgba(47, 111, 228, .16); }
html[data-theme='dark'] main.ds-card { background: rgba(18, 28, 49, .94); border-color: rgba(255, 255, 255, .08); }
.ds-peek { position: absolute; right: 34px; top: -100px; line-height: 0; }
@keyframes ds-drift { from { transform: translateX(-1.2%); } to { transform: translateX(1.2%); } }
@keyframes ds-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(5px); } 30%, 50%, 70% { transform: translateX(-9px); } 40%, 60% { transform: translateX(9px); } }
@keyframes ds-headshake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
@keyframes ds-aurora { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
@keyframes ds-snow { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 8% { opacity: var(--o, .7); } 35% { transform: translate3d(18px, 34vh, 0); } 70% { transform: translate3d(-14px, 68vh, 0); } 100% { opacity: 0; transform: translate3d(10px, 104vh, 0); } }
@keyframes ds-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes ds-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
@media (max-width: 860px) { .hero.ds-hero { grid-template-columns: 1fr; } .ds-hero-art { height: 290px; max-width: 460px; margin: 0 auto; width: 100%; } }
@media (prefers-reduced-motion: reduce) { body::before, .ds-orb, .ds-flake-big, .snow { animation: none !important; } .snow { display: none; } .ds-rv { opacity: 1; transform: none; transition: none; } }

@media (max-width: 640px) {
  .nav { flex-wrap: wrap; row-gap: 2px; padding: 6px 14px 4px !important; }
  .nav nav { width: 100%; justify-content: space-between; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav nav::-webkit-scrollbar { display: none; }
  .nav nav a { font-size: .86rem; padding: 6px 4px; white-space: nowrap; }
  .nav nav a.signin { padding: 6px 12px; } .icon { width: 34px; height: 34px; padding: 0 !important; display: grid; place-items: center; }
  .brand .ds-word .fl-art img { height: 32px; } .brand .ds-flake .fl-art img { height: 38px; }
  .top .brand .tag, .top .brand .tag2 { display: none; }
  main.ds-card { margin-top: 84px !important; padding: 24px 20px !important; } .ds-peek { right: 16px; top: -84px; } .ds-peek .fl-art img { height: 88px; }
}
@media (max-width: 640px) {
  .nav nav { flex-wrap: wrap; overflow: visible; justify-content: flex-start; row-gap: 0; }
  main.ds-card { margin-left: 14px !important; margin-right: 14px !important; width: auto !important; max-width: none !important; }
  body.ds-login main.grid { padding: 0 14px; }
}

/* the watch diagram, after slide 4: the harness frame and the boxes that are only planned */
.wv-frame { fill: color-mix(in srgb, var(--brand2) 5%, transparent); stroke: var(--brand2); stroke-width: 1.5; stroke-dasharray: 7 6; opacity: .8; }
.wv-harness { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; fill: var(--accent); }
.wv-node.next rect { fill: transparent; stroke: var(--mut); stroke-dasharray: 6 5; stroke-width: 1.5; }
.wv-node.next.idle { opacity: .7; }
.wv-edge.dashed { stroke-dasharray: 6 5; }
.wv-tag { align-self: center; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--warn); background: color-mix(in srgb, #f2a33a 18%, transparent); border-radius: 999px; padding: 1px 8px; margin-bottom: 2px; }

/* ---- the form card on one screen: Request a trial fits a 1280x720 window with its button, and the penguin stays under the header */
main.ds-card { margin-top: 86px !important; padding: 22px 30px 18px !important; }
.ds-peek { right: 30px; top: -80px; } .ds-peek .fl-art img { height: 84px; }
.ds-card .band { padding: 0; border-top: 0; }
.ds-card .band h1 { font-size: 1.75rem; margin: 0 0 4px; }
.ds-card .lead { font-size: 1rem; margin: 0 0 6px; }
.ds-card .form { gap: 9px; margin-top: 8px; } .ds-card .form label { gap: 3px; font-size: .88rem; }
.ds-card .form input, .ds-card .form textarea { padding: 8px 12px; } .ds-card .form textarea { height: 62px; resize: vertical; }
.ds-card .msg:empty { display: none; } .ds-card .form .small { margin: 0; font-size: .8rem; }
@media (max-height: 760px) { main.ds-card { margin-top: 78px !important; } .ds-peek { top: -72px; } .ds-peek .fl-art img { height: 76px; } }
main.ds-card { margin-bottom: 28px !important; } /* air between the card and the footer rule */

/* ---- the menu: every entry is a pill, the page that is open is filled in */
.nav nav, .topnav { gap: 4px; }
.nav nav a, .topnav a { padding: 7px 14px; border-radius: 999px; border: 1px solid transparent; font-size: .92rem; font-weight: 700; color: var(--ink); text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.nav nav a:hover, .topnav a:hover { background: rgba(47, 111, 228, .08); color: var(--brand2); }
.nav nav a.on, .topnav a.on { background: linear-gradient(135deg, rgba(99, 184, 255, .26), rgba(169, 141, 242, .2)); border-color: rgba(47, 111, 228, .28); color: #1d4fb8; }
html[data-theme='dark'] .nav nav a.on, html[data-theme='dark'] .topnav a.on { color: #cfe5ff; border-color: rgba(140, 200, 255, .35); }
.nav nav a.signin, .topnav a.signin { border-color: var(--line); background: rgba(255, 255, 255, .8); }
html[data-theme='dark'] .nav nav a.signin, html[data-theme='dark'] .topnav a.signin { background: rgba(255, 255, 255, .06); }
.nav nav a.signin.on, .topnav a.signin.on { background: linear-gradient(135deg, #2f6fe4, #0b3a63); border-color: transparent; color: #fff; }
.topnav { display: flex; align-items: center; margin-left: auto; margin-right: 10px; } .topnav a { min-height: 0 !important; display: inline-flex; align-items: center; }
.top.has-nav .brand .tag, .top.has-nav .brand .tag2, .top.has-nav .homelink { display: none; }
.top.has-nav .top-actions { flex-wrap: nowrap; }
@media (max-width: 640px) {
  .nav nav a, .topnav a { padding: 6px 10px; font-size: .86rem; white-space: nowrap; }
  .topnav { order: 3; width: 100%; margin: 0; flex-wrap: wrap; row-gap: 2px; }
}

/* ---- no flashes while a page opens: the first header and the empty frames wait until the real ones are drawn */
html:not(.ds-ready) header .brand { visibility: hidden; animation: ds-unhide 0s 1.6s forwards; }
@keyframes ds-unhide { to { visibility: visible; } }
#panel:empty, #setup:empty { visibility: hidden; }

/* ---- lighter page: decoration that moves all the time was costing about half of the idle CPU; it now moves only when pointed at */
body::before { animation: none; }
.fl-art .fl-glare, .fl-art .sp { display: none; }
.fl-art:hover .fl-glare, .fl-art:hover .sp { display: block; }
.fl-art:hover .fl-glare { animation: fl-sweep 2.4s cubic-bezier(.4, 0, .2, 1) 1; }
.ds-orb { filter: none; }

.snow { contain: strict; } /* the snow is its own layer; nothing in it can make the page repaint */
.snow i { backface-visibility: hidden; }


/* the light/dark button: a true circle, the symbol exactly in the middle (it was an oval with the symbol off to one side) */
#btn-theme.icon { box-sizing: border-box; width: 40px; height: 40px; min-width: 40px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle; }
/* the symbol is drawn, not typed: the half-filled circle character sits low in its line in every font, whatever the button's size */
#btn-theme.icon { font-size: 0 !important; color: var(--ink); }
#btn-theme.icon::before { content: ''; display: block; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.nav nav a.signin, .nav nav .icon.lang { height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; }