/* Skye Desk website styles. Colours, spacing, radii and motion come from tokens.css,
   which build.py generates from the app's tokens.py / motion.py; this file only
   references them (no literal colours). The scale below is website-only: a marketing
   page needs a larger type ramp than the desktop app (design-spec §3 stays the app's). */
:root{--wrap:1120px;--prose:720px;--gutter:var(--space-xl);--section:88px;--header-h:64px;--button-lg:44px;--nav-fade:28px;
--display:clamp(40px,5.4vw,56px);--h1:clamp(32px,4.2vw,44px);--h2:clamp(24px,2.8vw,30px);--h3:18px;
--lead:clamp(16px,1.6vw,19px);--text:15px;--small:13px}
@media (max-width:760px){:root{--gutter:var(--space-l);--section:56px}}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--space-l))}
body{margin:0;background:var(--bg);font:var(--text)/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","PingFang SC","Hiragino Sans GB","Noto Sans SC",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--brand-fg);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600;color:var(--ink);text-wrap:balance}
:lang(en) h1,:lang(en) h2{letter-spacing:-.022em}
p{text-wrap:pretty}
.icon{width:16px;height:16px;flex:none}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
/* Each theme's screenshot is a <picture>; the matching one is laid out as if it were its <img>. */
picture{display:contents}
.only-light{display:none}
:root[data-theme="light"] .only-light{display:contents}
:root[data-theme="light"] .only-dark{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme]) .only-light{display:contents}:root:not([data-theme]) .only-dark{display:none}}
:focus-visible{outline:var(--focus-ring) solid var(--brand-halo);outline-offset:2px}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:20;padding:6px var(--space-l);background:var(--card);border:var(--line-width) solid var(--line);border-radius:999px;color:var(--ink)}
.skip:focus{top:var(--space-s)}

/* Buttons and pills: capsule + full 1px line, no shadow, no gradient */
.button,button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-s);min-height:var(--control-h);padding:0 var(--control-pad);border:var(--line-width) solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-size:var(--small);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background-color var(--hover-out) var(--ease-enter),border-color var(--hover-out) var(--ease-enter),color var(--hover-out) var(--ease-enter),transform var(--release) var(--ease-enter)}
.button:hover,button:hover{background:var(--card-hover);border-color:var(--ink-3);text-decoration:none;transition-duration:var(--hover-in)}
.button:active,button:active{background:var(--card-active);transform:scale(var(--press-scale));transition-duration:var(--press)}
.button.lg,button.lg{min-height:var(--button-lg);padding:0 22px;font-size:var(--text)}
.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.primary:active{background:var(--brand-press);border-color:var(--brand-press)}
button:disabled,button:disabled:hover{background:var(--card-active);border-color:var(--line);color:var(--ink-3);cursor:not-allowed;transform:none}
.icon-button{width:var(--control-h);padding:0;color:var(--ink-2)}
.icon-button:hover{color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:var(--space-s);min-height:var(--chip-h);padding:0 var(--space-m);border:var(--line-width) solid var(--line);border-radius:999px;background:var(--card);color:var(--ink-2);font-size:var(--minor);font-weight:500;line-height:1;white-space:nowrap}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3);flex:none}
.status-ok .dot{background:var(--ok)}
.status-demo .dot{background:var(--warn)}
.text-link{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.text-link .icon{width:14px;height:14px}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:var(--line-width) solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:var(--space-xl);min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:16px;font-weight:600;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand img{width:28px;height:28px;border-radius:var(--radius-thumb)}
.brand-group{display:flex;align-items:center;gap:var(--space-s)}
.beta{display:inline-flex;align-items:center;min-height:22px;padding:0 var(--space-s);border:var(--line-width) solid var(--brand-fg);border-radius:999px;color:var(--brand-fg);font-size:var(--minor);font-weight:600;line-height:1;letter-spacing:.02em}
.site-nav{display:flex;gap:var(--space-xs);flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{display:inline-flex;align-items:center;min-height:var(--control-h);padding:0 var(--control-pad);border:var(--line-width) solid transparent;border-radius:999px;color:var(--ink-2);font-size:var(--small);font-weight:500;white-space:nowrap;transition:background-color var(--hover-out) var(--ease-enter),color var(--hover-out) var(--ease-enter)}
.site-nav a:hover{background:var(--card-hover);color:var(--ink);text-decoration:none;transition-duration:var(--hover-in)}
.site-nav a[aria-current=page]{background:var(--card-active);border-color:var(--line);color:var(--ink)}
.controls{display:flex;align-items:center;gap:var(--space-s);margin-left:auto}
.theme-toggle .to-dark{display:none}
:root[data-theme="light"] .theme-toggle .to-dark{display:block}
:root[data-theme="light"] .theme-toggle .to-light{display:none}

/* Sections */
main{display:block}
.section{padding:var(--section) 0 0}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-l);margin-bottom:var(--space-xl)}
.section-head h2{font-size:var(--h2);line-height:1.2}
.section-head p{color:var(--ink-2);margin-top:var(--space-s);max-width:36em}
.page-head{padding:calc(var(--section) * .75) 0 var(--space-xl);max-width:var(--prose)}
.page-head h1{font-size:var(--h1);line-height:1.12;margin:var(--space-l) 0 var(--space-m)}
.page-head .lead{margin:0}
.page-head .pill{white-space:normal;line-height:1.4;padding-top:5px;padding-bottom:5px}
.lead{font-size:var(--lead);line-height:1.55;color:var(--ink-2);max-width:38em}

/* Hero */
.hero{padding:calc(var(--section) * .9) 0 var(--section)}
.hero h1{font-size:var(--display);line-height:1.06;max-width:13em;margin:var(--space-xl) 0 var(--space-l)}
:lang(zh-CN) .hero h1{line-height:1.15}
.hero .lead{margin-bottom:var(--space-xl)}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-m)}
.hero-note{margin-top:var(--space-l);color:var(--ink-2);font-size:var(--small)}
.shot{margin:0;border:var(--line-width) solid var(--line);border-radius:var(--radius-panel);background:var(--card);overflow:hidden}
.shot img{width:100%}
.shot figcaption{padding:var(--space-m) var(--space-l);border-top:var(--line-width) solid var(--line);color:var(--ink-2);font-size:var(--minor)}

/* Workflow steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-m)}
.steps li{display:flex;align-items:center;gap:var(--space-m);min-height:64px;padding:var(--space-m) var(--space-l);border:var(--line-width) solid var(--line);border-radius:var(--radius-card);background:var(--card);font-weight:500}
.step-num{font:500 var(--mono)/1 ui-monospace,"SF Mono",Menlo,monospace;color:var(--ink-2)}
.steps .icon{width:18px;height:18px;color:var(--brand-fg);margin-left:auto}

/* Feature cards */
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-l)}
.feature{display:flex;flex-direction:column;gap:var(--space-m);padding:var(--space-xl);border:var(--line-width) solid var(--line);border-radius:var(--radius-panel);background:var(--card);min-width:0}
.feature-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-m);margin-bottom:var(--space-s)}
.icon-chip{display:grid;place-items:center;width:40px;height:40px;border:var(--line-width) solid var(--line);border-radius:999px;background:var(--surface);color:var(--brand-fg);flex:none}
.icon-chip .icon{width:20px;height:20px}
.feature h3{font-size:var(--h3);line-height:1.35}
.feature p{color:var(--ink-2)}
.thumb{margin-top:auto;border:var(--line-width) solid var(--line);border-radius:var(--radius-card);background:var(--surface);overflow:hidden;aspect-ratio:16/10}
.feature .thumb{margin-top:var(--space-m)}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:left top}
.thumb.fit{background:var(--bg)}
.thumb.zoom img{width:125%;height:auto;max-width:none}
.thumb.fit img{object-fit:contain;object-position:center}
.features.compact .feature{flex-direction:row;align-items:flex-start;gap:var(--space-l)}
.features.compact .feature-top{display:none}
.features.compact .feature-body{display:grid;gap:var(--space-s)}
.features.compact .feature-body .pill{justify-self:start}
.features + .features{margin-top:var(--space-l)}

/* Panels, forms, details */
.panel{padding:var(--space-xl);border:var(--line-width) solid var(--line);border-radius:var(--radius-panel);background:var(--card)}
.panel h2{font-size:20px;line-height:1.3;margin-bottom:var(--space-s)}
.panel p{color:var(--ink-2)}
.stack{display:grid;gap:var(--space-l)}
.prose{max-width:var(--prose)}
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl);align-items:center;padding:calc(var(--space-xl) * 1.5);border:var(--line-width) solid var(--line);border-radius:var(--radius-panel);background:var(--surface)}
.cta h2{font-size:var(--h2);line-height:1.2;margin-bottom:var(--space-s)}
.cta > div > p{color:var(--ink-2)}
.subscribe{display:grid;gap:var(--space-s)}
.subscribe label{font-size:var(--small);font-weight:500}
.field-row{display:flex;gap:var(--space-s)}
.field-row input{flex:1;min-width:0;min-height:var(--button-lg);padding:0 18px;border:var(--line-width) solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;transition:border-color var(--hover-out) var(--ease-enter)}
.field-row input:hover{border-color:var(--ink-3)}
.field-row input:focus-visible{border-color:var(--brand-fg);outline-offset:0}
.field-row input::placeholder{color:var(--ink-3)}
.form-note{color:var(--ink-2);font-size:var(--small)}
.form-status{display:flex;align-items:center;gap:6px;min-height:22px;color:var(--ink);font-size:var(--small);font-weight:500}
.form-status:empty{visibility:hidden}
.form-status .icon{color:var(--ok)}
.download-panel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-xl);align-items:start}
.download-panel > img{width:72px;height:72px;border-radius:16px}
.download-panel h2{font-size:var(--h3)}
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-m);margin:var(--space-xl) 0 0}
.fields div{padding:var(--space-m) var(--space-l);border:var(--line-width) solid var(--line);border-radius:var(--radius-card);background:var(--surface)}
.fields dt{color:var(--ink-2);font-size:var(--minor);margin-bottom:var(--space-xs)}
.fields dd{margin:0;font-variant-numeric:tabular-nums;font-size:var(--small)}
.faq{display:grid;gap:var(--space-s);max-width:var(--prose)}
details{border:var(--line-width) solid var(--line);border-radius:var(--radius-card);background:var(--card);transition:border-color var(--hover-out) var(--ease-enter)}
details:hover{border-color:var(--ink-3)}
summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-l);padding:var(--space-l) var(--space-xl);font-weight:500;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary .icon{color:var(--ink-2);transition:transform 260ms var(--ease-move)}
details[open] summary .icon{transform:rotate(180deg)}
details p{padding:0 var(--space-xl) var(--space-l);color:var(--ink-2)}
.cards-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-l)}
.cards-3 .panel{display:grid;align-content:start;gap:var(--space-m)}
.cards-3 h2{margin:0}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-s);color:var(--ink-2)}
.checklist li{display:flex;gap:var(--space-s);align-items:flex-start}
.checklist .icon{margin-top:4px;color:var(--ink-3)}
.legal-sections{display:grid;gap:var(--space-m);max-width:var(--prose)}
.legal-sections h2{font-size:var(--h3)}
.legal-sections .panel{display:grid;gap:var(--space-m)}
.legal-sections .panel h2{margin:0}
.legal-sections .bullets{margin:0}
/* Links inside running text are underlined so they don't rely on colour alone. */
p a:not(.button),li a:not(.button),dd a{text-decoration:underline;text-underline-offset:3px}
.site-footer li a{text-decoration:none}
.site-footer li a:hover{text-decoration:underline}
.legal-meta{color:var(--ink-2);font-size:var(--small)}
.panel strong{color:var(--ink);font-weight:600}
mark.placeholder{background:var(--card-active);color:var(--ink);border:var(--line-width) dashed var(--brand-fg);border-radius:var(--radius-thumb);padding:0 var(--space-xs)}
code{font:var(--mono)/1.4 ui-monospace,"SF Mono",Menlo,monospace;word-break:break-all}
.release{display:grid;gap:var(--space-xs)}
.release + .release{margin-top:var(--space-l)}
.release h3{font-size:var(--text)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.feedback{display:grid;gap:var(--space-m)}
.feedback h2{margin:0}
.feedback-form fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:var(--space-l)}
.feedback-form fieldset:disabled{opacity:.6}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-m)}
.field{display:grid;gap:var(--space-xs);min-width:0}
.field.wide{grid-column:1/-1}
.field label{font-size:var(--small);font-weight:500}
.field input,.field select,.field textarea{width:100%;min-width:0;border:var(--line-width) solid var(--line);background:var(--card);color:var(--ink);font:inherit;transition:border-color var(--hover-out) var(--ease-enter)}
.field input,.field select{min-height:var(--control-h);padding:0 var(--control-pad);border-radius:999px}
.field select{appearance:none;background-image:none;padding-right:36px}
.select{position:relative}
.select .icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink-2)}
.field textarea{border-radius:var(--radius-card);padding:var(--space-m) var(--control-pad);resize:vertical;min-height:140px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-3)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--brand-fg);outline-offset:0}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.after-cards.actions{flex-wrap:wrap}
.panel > p + .checklist{margin-top:var(--space-m)}
.panel > .checklist + .form-note,.panel > .checklist + p{margin-top:var(--space-l)}
.bullets{margin:var(--space-s) 0 0;padding-left:1.2em;display:grid;gap:var(--space-xs);color:var(--ink-2)}
.bullets li::marker{color:var(--ink-3)}
.version-tag{font:500 var(--mono)/1.4 ui-monospace,"SF Mono",Menlo,monospace;color:var(--ink)}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-l)}
.after-cards{margin-top:var(--space-xl)}
.download-actions{margin-top:var(--space-l)}

/* Footer */
.site-footer{margin-top:var(--section);border-top:var(--line-width) solid var(--line);color:var(--ink-2);font-size:var(--small)}
.site-footer .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--space-xl);padding-top:48px;padding-bottom:48px}
.site-footer .brand{margin-bottom:var(--space-m)}
.site-footer h2{font-size:var(--minor);font-weight:500;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-m)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-s)}
.site-footer a{color:var(--ink-2)}
.site-footer a:hover{color:var(--ink)}
.footer-base{grid-column:1/-1;display:flex;justify-content:space-between;gap:var(--space-l);flex-wrap:wrap;padding-top:var(--space-xl);border-top:var(--line-width) solid var(--line);color:var(--ink-2);font-size:var(--minor)}

@media (max-width:960px){
 .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cards-3{grid-template-columns:1fr}
 .cta{grid-template-columns:1fr}
}
@media (max-width:760px){
 .site-header .wrap{flex-wrap:wrap;gap:0 var(--space-m);padding-top:var(--space-m)}
 .site-nav{order:3;flex-basis:calc(100% + 2 * var(--gutter));margin:var(--space-s) calc(-1 * var(--gutter)) 0;padding:0 var(--gutter) var(--space-m);scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;--fade-start:0px;--fade-end:var(--nav-fade)}
 .site-nav a{padding:0 var(--space-s)}
 .site-nav.at-start{--fade-start:0px}
 .site-nav.more-start{--fade-start:var(--nav-fade)}
 .site-nav.at-end{--fade-end:0px}
 .site-nav{-webkit-mask-image:linear-gradient(to right,transparent 0,var(--ink) var(--fade-start),var(--ink) calc(100% - var(--fade-end)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,var(--ink) var(--fade-start),var(--ink) calc(100% - var(--fade-end)),transparent 100%)}
 .features{grid-template-columns:1fr}
 .feature{padding:var(--space-l)}
 .fields{grid-template-columns:1fr}
 .download-panel{grid-template-columns:1fr}
 .two-col{grid-template-columns:1fr}
 .form-grid{grid-template-columns:1fr}
 .panel{padding:var(--space-l)}
 .cta{padding:var(--space-l)}
 .field-row{flex-direction:column}
 .field-row .button{width:100%}
 .section-head{flex-direction:column;align-items:flex-start}
 .site-footer .wrap{grid-template-columns:1fr 1fr;padding-top:var(--space-xl);padding-bottom:var(--space-xl)}
 .site-footer .footer-about{grid-column:1/-1}
 summary{padding:var(--space-m) var(--space-l)}
 details p{padding:0 var(--space-l) var(--space-m)}
}
@media (max-width:420px){.steps{grid-template-columns:1fr}.steps li{min-height:52px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}