/* Night / day switch. Night is the default; day uses light.css (sky palette) plus the overrides below. */
:root{--spring:cubic-bezier(.32,.72,0,1)}

/* Sky: clouds replace the stars in day mode. Base cloud and sky-track rules live in styles.css / studio.css. */
.sky{display:none}
:root[data-theme=light] .sky{display:block}
:root[data-theme=light] .starfield{display:none}
.stars-paused .sky-track{animation-play-state:paused}

/* Circular reveal from the theme button when the View Transitions API is available. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* Day overrides for colours hard-coded in finish.css. */
:root[data-theme=light] .service-sheet{background:linear-gradient(130deg,#fffefb,#f2f8fc);border-color:#ffffff;box-shadow:none}
:root[data-theme=light] .service-tile{background:#ffe5a6;color:var(--orange);box-shadow:inset 0 1px 1px #fff,inset 0 -2px 4px #cfa45633}
:root[data-theme=light] .service-intro>.eyebrow{color:var(--muted)}
:root[data-theme=light] .service-preview{border-color:var(--line);background:#fff;box-shadow:none}
:root[data-theme=light] .preview-bar{background:#f1f5f8}
:root[data-theme=light] .preview-bar>i{background:#b7c6cf}
:root[data-theme=light] .preview-bar>span,:root[data-theme=light] .preview-bar>.ui-icon{color:var(--muted)}
:root[data-theme=light] .preview-cursor>b{color:#fff}
:root[data-theme=light] .preview-cursor>.ui-icon{filter:drop-shadow(0 1px 2px #183a5840)}
:root[data-theme=light] .service-details{border-color:var(--line)}
:root[data-theme=light] .service-details summary{border-color:var(--orange)}
:root[data-theme=light] .service-details summary:hover{background:#ed481512}
:root[data-theme=light] .service-details summary>.ui-icon{color:#fff}
:root[data-theme=light] .service-body h4,:root[data-theme=light] .service-body .service-process,:root[data-theme=light] .services-navigation>.eyebrow,:root[data-theme=light] .services-dots button{color:var(--muted)}
:root[data-theme=light] .service-body p{color:#23485e}
:root[data-theme=light] .service-body li{border-color:var(--line);background:#f3f4f5;color:var(--ink)}
:root[data-theme=light] .services-dots i{background:#b4c9d6}
:root[data-theme=light] .services-dots [aria-current] i{background:var(--orange)}
:root[data-theme=light] .ruler-track::before{background:linear-gradient(90deg,#ed481520,#ed481566)}
:root[data-theme=light] .progress-marker{background:var(--orange);color:#fff}
:root[data-theme=light] .play-disc.selected,:root[data-theme=light] .play-disc:focus-visible{box-shadow:0 0 0 5px #fff,0 0 0 7px var(--orange)}
:root[data-theme=light] .designer-avatar{border-color:var(--orange);background:#ffe5a6;box-shadow:0 0 0 5px #fff,0 10px 25px #183a5833}

/* Day colours for elements that only night.css styled. */
:root[data-theme=light] .digital-mockup{border:1px solid var(--line);background:#fffefb;color:var(--ink);box-shadow:10px 12px 0 #ffe5a6}
:root[data-theme=light] .digital-mockup>span{border-bottom:1px solid var(--line)}
:root[data-theme=light] .digital-mockup>i{color:var(--orange)}
:root[data-theme=light] .signed-by .signature-mark{background:#ffe5a6;color:var(--orange)}
:root[data-theme=light] .signature{color:var(--orange)}
:root[data-theme=light] .behance-mark{color:var(--ink)}
:root[data-theme=light] .hw-ink{stroke:var(--orange)}
:root[data-theme=light] .spatial-art>.art-caption{color:var(--muted)}
:root[data-theme=light] .mini-project:hover>div{border-color:var(--orange);box-shadow:0 16px 44px -26px #e9572366}
:root[data-theme=light] .service-card:before{background:linear-gradient(90deg,transparent,#ed481580,transparent)}
/* light.css's selection-handle shorthand would reset background-repeat and tile the dots; keep finish.css's corner squares. */
:root[data-theme=light] .play-object.selected::after,:root[data-theme=light] .play-object:focus-visible::after{background:linear-gradient(var(--orange),var(--orange)) 0 0/6px 6px,linear-gradient(var(--orange),var(--orange)) 100% 0/6px 6px,linear-gradient(var(--orange),var(--orange)) 0 100%/6px 6px,linear-gradient(var(--orange),var(--orange)) 100% 100%/6px 6px;background-repeat:no-repeat}

/* Cursor label: describes the hovered element (studio.js), with an icon and a small pop on change. */
.canvas-cursor>span{display:inline-flex;align-items:center;gap:5px;transform-origin:0 0}
.canvas-cursor>span .ui-icon{width:10px;height:10px;flex:none}
.canvas-cursor>svg{transition:scale .3s var(--spring),rotate .3s var(--spring)}
.canvas-cursor.is-action>svg{scale:.8;rotate:-8deg}
.canvas-cursor.is-action>span{padding:4px 8px 4px 7px}
.canvas-cursor>span.label-pop{animation:cursor-label-pop .38s var(--spring)}
@keyframes cursor-label-pop{from{opacity:.4;scale:.82 .82}to{opacity:1;scale:1 1}}
@media(prefers-reduced-motion:reduce){.canvas-cursor>span.label-pop{animation:none}.canvas-cursor>svg{transition:none}}

/* Smart nav (finish.js): floats below the ruler after the header, hides on scroll down, returns on scroll up. */
.nav-holder{display:none}
.nav-floating .nav-holder{display:block}
.nav-floating .header nav{position:fixed;top:40px;left:50%;z-index:55;margin:0;translate:-50% 0;opacity:1;background:color-mix(in srgb,var(--paper) 84%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 12px 32px -14px #000a,inset 0 1px 0 #ffffff12;transition:translate .55s var(--spring),opacity .35s}
:root[data-theme=light].nav-floating .header nav{box-shadow:0 12px 32px -14px #183a5866,inset 0 1px 0 #fff}
.nav-floating.nav-hidden .header nav{translate:-50% calc(-100% - 56px);opacity:0;pointer-events:none}
.nav-instant .header nav{transition:none!important}
@media(max-width:760px){.nav-floating .header nav{top:36px;max-width:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){.nav-floating .header nav{transition:opacity .2s}}

/* Interaction layer (interactions.js). */
/* Scroll reveal: individual translate + opacity, so existing hover transforms keep working. */
.reveal{opacity:0;translate:0 28px;filter:blur(6px);transition:opacity .7s var(--spring) var(--reveal-delay,0ms),translate .9s var(--spring) var(--reveal-delay,0ms),filter .7s var(--spring) var(--reveal-delay,0ms)}
.reveal.is-in{opacity:1;translate:0 0;filter:none}
/* Spotlight: soft accent glow plus a brighter edge where the pointer is. */
.has-spotlight{position:relative}
.spotlight{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--orange) 9%,transparent),transparent 70%)}
.spotlight::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(180px circle at var(--sx,50%) var(--sy,50%),color-mix(in srgb,var(--orange) 75%,transparent),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.has-spotlight:hover>.spotlight{opacity:1}
.review-proof strong{font-variant-numeric:tabular-nums}
/* Nav hover pill. */
.header nav{position:relative}
.nav-pill{position:absolute;top:6px;bottom:6px;left:0;width:var(--pw,0);translate:var(--px,0) 0;border-radius:25px;background:color-mix(in srgb,var(--ink) 7%,transparent);opacity:0;pointer-events:none;transition:translate .45s var(--spring),width .45s var(--spring),opacity .25s}
.nav-pill.no-slide{transition:opacity .25s}
nav.pill-on .nav-pill{opacity:1}
.header nav a{position:relative}
/* Press feedback everywhere it was missing. */
.round-button,.pills>a,.plan-switch button,.play-toolbar button,.footer-up,.chat-file,.reaction,.services-dots button,.service-details summary,.faq-item>summary,.header nav a,#theme-toggle{transition-property:background,color,border-color,box-shadow,transform,scale,translate,opacity}
.round-button:active,.plan-switch button:active,.play-toolbar button:active,.footer-up:active,.chat-file:active,.reaction:active,.services-dots button:active,.service-details summary:active,.header nav a:active{scale:.95}
.faq-item>summary:active{scale:.99}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;translate:none;filter:none;transition:none}.nav-pill{transition:none}}
@media print{.reveal{opacity:1!important;translate:none!important;filter:none!important}}

/* Left dock: theme button + music. */
.sound-dock{gap:4px;padding:4px 10px 4px 4px}
.dock-icon{position:relative;display:grid!important;place-items:center;width:35px;height:35px;padding:0!important;border-radius:50%!important;color:var(--ink)!important}
.dock-icon .ui-icon{position:absolute;width:16px;height:16px;transition:opacity .3s,rotate .5s var(--spring),scale .5s var(--spring)}
.dock-icon .theme-moon{opacity:0;rotate:-60deg;scale:.5}
:root[data-theme=light] .dock-icon .theme-sun{opacity:0;rotate:60deg;scale:.5}
:root[data-theme=light] .dock-icon .theme-moon{opacity:1;rotate:0deg;scale:1}
.dock-icon:hover .ui-icon{rotate:25deg}
.dock-icon:active{scale:.9}
.dock-divider{width:1px;height:18px;background:var(--line);margin:0 2px}
:root[data-theme=light] .dock-divider{background:#c9d8e1}

/* Right dock: Ask AI + WhatsApp. */
.action-dock{position:fixed;right:18px;bottom:18px;z-index:60;display:none;align-items:center;gap:10px}
.js-ready .action-dock{display:flex}
.ask-ai-button{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;border:0;border-radius:999px;background:var(--orange);color:#060606;font:700 13px var(--body);box-shadow:0 8px 26px -10px color-mix(in srgb,var(--orange) 70%,transparent),inset 0 1px 0 #ffffff59;transition:translate .35s var(--spring),box-shadow .35s,scale .2s var(--spring)}
.ask-ai-button .ui-icon{width:16px;height:16px;transition:rotate .6s var(--spring)}
.ask-ai-button:hover{translate:0 -2px;box-shadow:0 14px 30px -10px color-mix(in srgb,var(--orange) 80%,transparent),inset 0 1px 0 #ffffff59}
.ask-ai-button:hover .ui-icon{rotate:90deg}
.ask-ai-button:active{scale:.96}
:root[data-theme=light] .ask-ai-button{color:#fff}
.whatsapp-button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 8px 24px -10px #25D366cc,inset 0 1px 0 #ffffff55;transition:translate .35s var(--spring),scale .2s var(--spring)}
.whatsapp-button .ui-icon{width:22px;height:22px}
.whatsapp-button:hover{translate:0 -2px}
.whatsapp-button:active{scale:.94}
.ask-ai-button:focus-visible,.whatsapp-button:focus-visible,.dock-icon:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Ask AI drawer: slides in from the right. */
html.ai-open{overflow:hidden}
.ai-overlay{position:fixed;inset:0;z-index:85;background:#0000004d;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .4s}
.ai-open .ai-overlay{opacity:1}
.ai-drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(420px,100vw);display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border-left:1px solid var(--line);box-shadow:-30px 0 80px -40px #000c;translate:100% 0;transition:translate .5s var(--spring)}
.ai-drawer.is-open{translate:0 0}
:root[data-theme=light] .ai-drawer{background:#fffefb;border-left-color:#dce4e8;box-shadow:-30px 0 80px -40px #183a5880}
.ai-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 22px 18px;border-bottom:1px solid var(--line)}
.ai-badge{display:inline-flex;align-items:center;gap:6px;font:700 9px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--orange)}
.ai-badge .ui-icon{width:11px;height:11px}
.ai-head h2{font:800 24px/1.1 var(--display);letter-spacing:-.02em;margin-top:8px}
.ai-close{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);transition:background .2s,rotate .4s var(--spring)}
.ai-close .ui-icon{width:16px;height:16px}
.ai-close:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);rotate:90deg}
.ai-log{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:20px 20px 12px}
.ai-msg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.55;animation:ai-in .4s var(--spring)}
.ai-msg p+p{margin-top:8px}
.ai-msg.is-bot{align-self:flex-start;background:color-mix(in srgb,var(--ink) 7%,transparent);border-bottom-left-radius:5px}
.ai-msg.is-user{align-self:flex-end;background:var(--orange);color:#060606;border-bottom-right-radius:5px}
:root[data-theme=light] .ai-msg.is-user{color:#fff}
.ai-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ai-links a{font:700 11px var(--body);padding:6px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);transition:background .2s,border-color .2s}
.ai-links a:hover{background:var(--orange);border-color:var(--orange);color:#060606}
:root[data-theme=light] .ai-links a:hover{color:#fff}
.ai-msg.is-typing{display:flex;gap:4px;padding:14px 16px}
.ai-msg.is-typing span{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;animation:ai-dot 1s infinite alternate}
.ai-msg.is-typing span:nth-child(2){animation-delay:.2s}.ai-msg.is-typing span:nth-child(3){animation-delay:.4s}
@keyframes ai-dot{to{opacity:1;translate:0 -3px}}
@keyframes ai-in{from{opacity:0;translate:0 8px}}
.ai-suggestions{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 14px}
.ai-suggestions button{font:500 12px var(--body);padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--ink);transition:border-color .2s,background .2s,scale .2s var(--spring)}
:root[data-theme=light] .ai-suggestions button{border-color:#d3dee5}
.ai-suggestions button:hover{border-color:var(--orange);background:color-mix(in srgb,var(--orange) 10%,transparent)}
.ai-suggestions button:active{scale:.96}
.ai-form{display:flex;align-items:flex-end;gap:8px;margin:0 16px;padding:6px 6px 6px 14px;border-radius:20px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 5%,transparent);transition:border-color .2s}
:root[data-theme=light] .ai-form{border-color:#d3dee5}
.ai-form:focus-within{border-color:var(--orange)}
.ai-form textarea{flex:1;min-height:36px;max-height:140px;padding:8px 0;border:0;background:none;color:var(--ink);font:400 14px/1.45 var(--body);resize:none;outline:none}
.ai-form textarea::placeholder{color:var(--muted)}
.ai-form button{display:grid;place-items:center;width:36px;height:36px;flex:none;border:0;border-radius:50%;background:var(--orange);color:#060606;transition:scale .2s var(--spring),opacity .2s}
:root[data-theme=light] .ai-form button{color:#fff}
.ai-form button .ui-icon{width:16px;height:16px}
.ai-form button:disabled{opacity:.5}
.ai-form button:active{scale:.9}
.ai-note{padding:10px 20px 18px;font-size:11px;color:var(--muted)}
.ai-note a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:600px){.action-dock{right:12px;bottom:12px;gap:8px}.ask-ai-button{height:42px;padding:0 14px 0 12px}.whatsapp-button{width:42px;height:42px}}
@media(max-width:420px){.ask-ai-button{width:42px;padding:0;justify-content:center}.ask-ai-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.ai-drawer,.ai-overlay,.ai-msg{transition:none;animation:none}}
.ai-drawer[hidden],.ai-overlay[hidden],.ai-suggestions[hidden]{display:none}

/* Cursor label flips to the pointer's left near the right edge, and above it near the bottom. */
.canvas-cursor.flip-x>span{left:-6px;translate:-100% 0;transform-origin:100% 0}
.canvas-cursor.flip-y>span{top:-4px;translate:0 -100%;transform-origin:0 100%}
.canvas-cursor.flip-x.flip-y>span{translate:-100% -100%;transform-origin:100% 100%}

/* The top ruler shows scroll progress, so the native page scrollbar is hidden. Scrolling itself is unchanged. */
html{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

/* ===== Hero celestial: a sun by day, the moon at night. Pure CSS/SVG layers; parallax vars from interactions.js. ===== */
:root .hero-sticker.celestial{--cel:clamp(130px,13vw,200px);--px:0;--py:0;display:block;width:var(--cel);height:var(--cel);padding:0;background:none;border:0;outline:0;box-shadow:none;transform:none;border-radius:50%;color:#e9e6d8}
:root .hero-sticker.celestial:hover{transform:none}
:root[data-theme=light] .hero-sticker.celestial{background:none;border:0;outline:0;box-shadow:none;color:#8a3510}
.celestial-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:cel-spin 40s linear infinite;pointer-events:none}
.celestial-ring text{font:700 12px var(--mono);letter-spacing:.2px;fill:currentColor;opacity:.88}
.orb{position:absolute;inset:23%;translate:calc(var(--px) * 3px) calc(var(--py) * 3px);transition:translate .8s var(--spring),scale .6s var(--spring);animation:cel-float 7s ease-in-out infinite alternate}
.celestial:hover .orb{scale:1.07}
.orb i,.orb .sun,.orb .moon,.orb .sun-body,.orb .moon-body{position:absolute;display:block}
.sun,.moon{inset:0;transition:opacity .7s,translate 1s var(--spring),scale 1s var(--spring)}
/* Night shows the moon; day swaps in the sun (it rises as the moon sets). */
.sun{opacity:0;translate:0 38%;scale:.6}
:root[data-theme=light] .sun{opacity:1;translate:0 0;scale:1}
:root[data-theme=light] .moon{opacity:0;translate:0 -38%;scale:.6}

/* --- Sun --- */
.sun-corona{inset:-46%;border-radius:50%;background:radial-gradient(circle,#fffbe8 0 29%,#ffe08acc 36%,#ffc65a66 46%,#ffb3472b 58%,transparent 71%);animation:cel-pulse 5.5s ease-in-out infinite alternate}
.sun-rays{inset:-64%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#fff4cf 0deg 1.6deg,transparent 2.4deg 14deg);-webkit-mask:radial-gradient(circle,transparent 27%,#000 31%,#0008 45%,transparent 70%);mask:radial-gradient(circle,transparent 27%,#000 31%,#0008 45%,transparent 70%);filter:blur(1.2px);opacity:.7;animation:cel-spin 110s linear infinite}
.sun-rays-b{inset:-52%;background:repeating-conic-gradient(from 6deg,#ffe3a1 0deg 1deg,transparent 1.6deg 9deg);opacity:.5;animation-duration:160s;animation-direction:reverse}
.sun-body{inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at calc(46% + var(--px) * 4%) calc(42% + var(--py) * 4%),#fffef6 0%,#fff3b8 16%,#ffd65c 38%,#ffaa2b 63%,#f2711b 84%,#d4500f 100%);box-shadow:0 0 16px 3px #ffd770b3,0 0 42px 12px #ffb54770,0 0 90px 28px #ffcf7a3d}
.sun-surface{inset:-10%;background:url(assets/sun-granules.svg?v=2) 0 0/19px 19px repeat;mix-blend-mode:multiply;opacity:.36;translate:calc(var(--px) * -5px) calc(var(--py) * -5px);transition:translate .8s var(--spring);animation:cel-boil 28s linear infinite}
.sun-surface-b{background-size:13px 13px;mix-blend-mode:screen;opacity:.28;animation:cel-boil-b 36s linear infinite}
.sun-spots{top:0;bottom:0;left:0;width:200%;translate:calc(var(--px) * -5px) calc(var(--py) * -5px);background:
  radial-gradient(circle 3px at 18% 40%,#2e0e02 0 1.1px,#8f3409d9 1.7px,transparent 3px),
  radial-gradient(circle 2px at 20.5% 44%,#2e0e02 0 .7px,#8f3409cc 1.1px,transparent 2px),
  radial-gradient(circle 2.5px at 34% 63%,#2e0e02 0 .9px,#8f3409cc 1.4px,transparent 2.5px),
  radial-gradient(circle 3px at 68% 40%,#2e0e02 0 1.1px,#8f3409d9 1.7px,transparent 3px),
  radial-gradient(circle 2px at 70.5% 44%,#2e0e02 0 .7px,#8f3409cc 1.1px,transparent 2px),
  radial-gradient(circle 2.5px at 84% 63%,#2e0e02 0 .9px,#8f3409cc 1.4px,transparent 2.5px);
  animation:cel-rotate 90s linear infinite}
/* Limb darkening, a soft hot spot and the rim: what makes the disc read as a ball of gas. */
.sun-limb{inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,transparent 50%,#d4500f40 74%,#9a2d06a6 100%),radial-gradient(circle at calc(40% - var(--px) * 6%) calc(34% - var(--py) * 6%),#ffffffc0 0,#fff8dc55 18%,transparent 36%);box-shadow:inset -7px -9px 16px #b0380a55,inset 4px 5px 10px #fffbe399;transition:background .3s}

/* --- Moon --- */
.moon-halo{inset:-34%;border-radius:50%;background:radial-gradient(circle,#eef0ff2e 0 38%,#cdd5ff14 52%,transparent 70%)}
.moon-body{inset:0;border-radius:50%;overflow:hidden;background:#cfcdc4;box-shadow:0 0 24px 3px #e9edff3d,0 0 80px 20px #b9c3ff1f;animation:cel-librate 16s ease-in-out infinite alternate}
.moon-surface{inset:-5%;background:url(assets/moon-surface.svg?v=3) center/cover no-repeat;filter:brightness(1.12) contrast(1.05);translate:calc(var(--px) * -4px) calc(var(--py) * -4px);transition:translate .8s var(--spring)}
/* Sphere shading, a waxing-gibbous terminator, earthshine on the dark side, and a bright rim on the lit edge. */
.moon-shade{inset:0;border-radius:50%;background:radial-gradient(circle at calc(68% + var(--px) * 5%) calc(30% + var(--py) * 5%),#fffef51a 0,transparent 34%,#0000002e 66%,#00000080 100%);box-shadow:inset 22px 5px 22px -5px #070a1ce6,inset 9px 2px 10px -2px #1a2350a6,inset -2px -1px 2px #fffef56b}

@keyframes cel-spin{to{rotate:360deg}}
@keyframes cel-float{from{translate:calc(var(--px) * 3px) calc(var(--py) * 3px - 3px)}to{translate:calc(var(--px) * 3px) calc(var(--py) * 3px + 3px)}}
@keyframes cel-pulse{from{scale:.96;opacity:.85}to{scale:1.05;opacity:1}}
@keyframes cel-boil{to{background-position:38px 19px}}
@keyframes cel-boil-b{to{background-position:-26px 13px}}
@keyframes cel-rotate{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cel-librate{from{rotate:-4deg;scale:.995}to{rotate:4deg;scale:1.005}}
@media(max-width:1100px){:root .hero-sticker.celestial{--cel:120px;right:2%}.celestial-ring text{font-size:11px}}
@media(prefers-reduced-motion:reduce){.celestial-ring,.orb,.sun-corona,.sun-rays,.sun-surface,.sun-spots,.moon-body{animation:none}.sun,.moon{transition:opacity .3s}}
.stars-paused .celestial *{animation-play-state:paused}
@media(max-width:820px){:root .hero-sticker.celestial{display:none}}

/* Cursor arrow matches the theme accent (the same colour as its label). */
.canvas-cursor>svg path{fill:#F1EB1C;stroke:#060606;transition:fill .3s,stroke .3s}
:root[data-theme=light] .canvas-cursor>svg path{fill:#009bff;stroke:#fff}
.sky .cloud{height:auto}
/* The sun's rays and the moon's halo may reach the screen edge; clip them there instead of widening the page. */
.hero{overflow-x:clip}
/* Tablet widths: the avatar tag sits under the headline (as on phones) instead of beside it, where it would touch the intro copy. */
@media(min-width:761px) and (max-width:900px){
  .designer-tag{display:block;position:relative;left:auto;top:auto;width:max-content;margin:22px auto 0;transform:none}
  .designer-avatar{position:static;width:56px;height:56px;margin:0 auto 6px;transform:none;border-width:2px}
  .designer-tag>span{position:absolute;left:-14px;bottom:9px;font-size:20px}
  .designer-tag b{margin-left:0}
}

/* Portrait in the About signature (replaces the "s." mark). */
.signed-by .signature-mark.has-photo{display:block;width:48px;height:48px;flex:none;padding:0;border-radius:50%;overflow:hidden;background:#1d1d1d;box-shadow:0 0 0 2px var(--orange),0 0 0 5px color-mix(in srgb,var(--orange) 18%,transparent);transition:transform .35s var(--spring)}
.signature-mark.has-photo img{display:block;width:100%;height:100%}
.signature-mark.has-photo img{object-fit:cover;border-radius:50%}
:root[data-theme=light] .signed-by .signature-mark.has-photo{box-shadow:0 0 0 2px var(--orange),0 6px 16px -6px #2a5c7a59}
@media(max-width:380px){.signed-by .signature-mark.has-photo{width:40px;height:40px}}
/* Hero avatar: the real photo, cropped by the existing circle. */
.designer-avatar{object-fit:cover;object-position:50% 40%}

/* Chat preview message bar: a real input that hands the question to the Ask AI panel. */
.chat-compose{gap:12px;transition:border-color .25s,box-shadow .25s}
.chat-compose input{flex:1;min-width:0;padding:8px 0;border:0;background:none;color:var(--ink);font:500 13px var(--body);outline:none}
.chat-compose input::placeholder{color:var(--muted);opacity:1;transition:opacity .3s}
.chat-compose:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 18%,transparent)}
.chat-compose button{display:grid;place-items:center;width:34px;height:34px;flex:none;border:0;border-radius:9px;background:#535353;color:#fff;transition:background .2s,scale .2s var(--spring)}
.chat-compose button .ui-icon{width:16px;height:16px;transition:translate .3s var(--spring)}
.chat-compose button:hover,.chat-compose:focus-within button{background:var(--orange);color:#060606}
.chat-compose button:hover .ui-icon{translate:2px -2px}
.chat-compose button:active{scale:.92}
:root[data-theme=light] .chat-compose button{background:var(--ink)}
:root[data-theme=light] .chat-compose button:hover,:root[data-theme=light] .chat-compose:focus-within button{background:var(--orange);color:#fff}
@media(max-width:600px){.chat-compose input{font-size:16px}}

/* Ask AI voice toggle and the "speaking" state on the reply being read aloud. */
.ai-head-tools{display:flex;align-items:center;gap:8px;flex:none}
.ai-voice{display:flex;align-items:center;gap:7px;height:38px;padding:0 13px 0 11px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--ink);font:700 10px var(--mono);letter-spacing:.8px;text-transform:uppercase;transition:background .2s,border-color .2s,color .2s,scale .2s var(--spring)}
:root[data-theme=light] .ai-voice{border-color:#d3dee5}
.ai-voice .ui-icon{width:16px;height:16px}
.ai-voice[aria-pressed=true]{border-color:var(--orange);color:var(--orange)}
.ai-voice[aria-pressed=true] .voice-off,.ai-voice[aria-pressed=false] .voice-on{display:none}
.ai-voice[aria-pressed=false]{color:var(--muted)}
.ai-voice:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.ai-voice:active{scale:.94}
.ai-msg.is-bot.is-speaking{box-shadow:0 0 0 2px color-mix(in srgb,var(--orange) 55%,transparent);animation:ai-speak 1.6s ease-in-out infinite alternate}
@keyframes ai-speak{to{box-shadow:0 0 0 5px color-mix(in srgb,var(--orange) 18%,transparent)}}
@media(max-width:420px){.ai-voice span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ai-voice{padding:0 11px}}
@media(prefers-reduced-motion:reduce){.ai-msg.is-bot.is-speaking{animation:none}}