:root{color-scheme:light}
.nav-settings{display:flex;align-items:center;gap:8px;flex-shrink:0}
#theme-toggle{display:grid;place-items:center;position:relative;width:44px;height:44px;padding:0;flex-shrink:0;border:1px solid #c6dce3;border-radius:50%;background:transparent;color:#167e98;cursor:pointer;transition:background .22s ease,border-color .22s ease}
#theme-toggle:hover{background:#edf7fa}#theme-toggle svg{position:absolute;inset:11px;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s ease,transform .35s cubic-bezier(.22,1,.36,1)}
#theme-toggle .theme-sun{opacity:0;transform:rotate(-70deg) scale(.6)}#theme-toggle .theme-moon{opacity:1;transform:rotate(0) scale(1)}
html[data-theme=dark] #theme-toggle .theme-sun{opacity:1;transform:rotate(0) scale(1)}html[data-theme=dark] #theme-toggle .theme-moon{opacity:0;transform:rotate(70deg) scale(.6)}
html.theme-changing :is(body,header,footer,.logo-intro,.hero,.about,.products-intro,.tools-main,.cliplet-main,.capabilities-main,.cap-business,.product-card,.tool-card,.cliplet-workspace,.clip-input-wrap,#clip-format,#clip-ready,#clip-result,#clip-status-area,#clip-error){transition-property:background-color,color,border-color,box-shadow;transition-duration:.32s;transition-timing-function:ease}
/* Neutral charcoal surfaces with gentle separation, like a desktop chat workspace. */
html[data-theme=dark]{color-scheme:dark;--ink:#ececec;--blue:#78c9df;--dark-secondary:#b4b4b4;--dark-line:#424242;--dark-base:#1c1c1c;--dark-surface:#242424;--dark-panel:#2b2b2b}
html[data-theme=dark] body{background:var(--dark-base);color:var(--ink)}
html[data-theme=dark] header{background:#1c1c1ce8;border-color:#ffffff12}
html[data-theme=dark] nav{color:#d2d2d7}
html[data-theme=dark] :is(#language,#theme-toggle){border-color:#424245;color:#d2d2d7;background:transparent}
html[data-theme=dark] :is(#language,#theme-toggle):hover{background:#ffffff0f;color:#fff}
html[data-theme=dark] #nav-logo{filter:brightness(0) invert(1) drop-shadow(0 0 3px #ffffff45) drop-shadow(0 0 8px #ffffff18)}
html[data-theme=dark] #logo{filter:drop-shadow(0 0 7px #ffffff38) drop-shadow(0 0 20px #ffffff12)}
html[data-theme=dark] :is(.logo-intro,.hero,.products-intro,.tools-main,.cliplet-main){background:var(--dark-base)}
html[data-theme=dark] .about{background:var(--dark-surface)}
html[data-theme=dark] :is(.intro,.about>p:not(.eyebrow),.products-note,.tools-heading>p:last-child,.visual-tools,.hero-foot,.values,.eyebrow){color:var(--dark-secondary)}
html[data-theme=dark] :is(.hero-foot,.values span+span){border-color:var(--dark-line)}
html[data-theme=dark] .about h2 span{color:var(--blue)}
html[data-theme=dark] :is(footer,.utility-page footer){background:#212121;color:var(--dark-secondary)}
html[data-theme=dark] footer .brand{color:var(--ink)}
html[data-theme=dark] .button{background:#147e9c;color:#fff}
html[data-theme=dark] .button:hover{background:#198ca9}
html[data-theme=dark] :is(a,button,canvas,select):focus-visible{outline-color:#82d5ee}
html[data-theme=dark] .tools-dropdown{background:#2b2b2bf5;border-color:var(--dark-line);box-shadow:0 16px 48px #0008}
html[data-theme=dark] header nav .tools-dropdown a:hover{background:#ffffff0a}
html[data-theme=dark] .tools-dropdown b{color:var(--ink)}
html[data-theme=dark] :is(.tools-dropdown small,.tool-card p,.version,.back-link,.clip-platforms,.clip-status-row p,.clip-choice small,#clip-format-row label,#clip-ready p,.clip-history small,.clip-history>p){color:var(--dark-secondary)}
html[data-theme=dark] :is(.tool-nav-icon,.tool-link-arrow,.tool-emblem,.tool-card-bottom,.clip-history a){color:var(--blue)}
html[data-theme=dark] .tool-card{background:var(--dark-panel);border-color:var(--dark-line);box-shadow:none}
html[data-theme=dark] .tool-card:hover{border-color:#555558;box-shadow:0 18px 42px #0005}
html[data-theme=dark] :is(.quiet-button,.text-button){color:#d2d2d7}
html[data-theme=dark] .text-button:hover:not(:disabled){background:#ffffff0d;color:#fff}
html[data-theme=dark] .cliplet-workspace{background:var(--dark-panel);border-color:var(--dark-line)}
html[data-theme=dark] #clip-input{color:var(--ink);caret-color:#fff}
html[data-theme=dark] #clip-input::placeholder{color:var(--dark-secondary)}
html[data-theme=dark] .clip-input-wrap:focus-within{background:#303030}
html[data-theme=dark] :is(#clip-status-area,#clip-result,#clip-ready){background:var(--dark-surface);border-color:var(--dark-line)}
html[data-theme=dark] .clip-choice{border-color:var(--dark-line)}
html[data-theme=dark] .clip-choice:has(input:checked){background:#304148}
html[data-theme=dark] .clip-choice input{accent-color:#70c9e2}
html[data-theme=dark] .clip-choice-kind{border-color:#4a4a4d;color:#d2d2d7}
html[data-theme=dark] #clip-format{background:#313131;color:var(--ink);border-color:#48484a}
html[data-theme=dark] .clip-spinner{border-color:#424245;border-top-color:#70c9e2}
html[data-theme=dark] #clip-progress{accent-color:#70c9e2}
html[data-theme=dark] #clip-progress::-webkit-progress-bar{background:#38383a}
html[data-theme=dark] #clip-progress::-webkit-progress-value{background:#70c9e2}
html[data-theme=dark] .clip-ready-icon{background:#26383c;color:#9adee9}
html[data-theme=dark] .clip-history li{border-color:var(--dark-line)}
html[data-theme=dark] #clip-error{background:#291d1c;color:#ffb4a9;border-color:#573a36}
html[data-theme=dark] :is(#clip-preview-content video,#clip-preview-content img){background:#212121}
@media(max-width:360px){header nav{gap:8px}.nav-settings{gap:6px}#theme-toggle{width:44px}}
@media(prefers-reduced-motion:reduce){#theme-toggle,#theme-toggle svg,html.theme-changing :is(body,header,footer,.logo-intro,.hero,.about,.products-intro,.tools-main,.cliplet-main,.capabilities-main,.cap-business,.product-card,.tool-card,.cliplet-workspace,.clip-input-wrap,#clip-format,#clip-ready,#clip-result,#clip-status-area,#clip-error){transition:none}}