/* AI DFY shared layer: themes, page transitions, cursor, small delights. Loaded after each page's own styles. */
:root{--dot:rgba(255,255,255,.06);--cyan-t:#8FE3E8;--vio-t:#B64CDC;--grad-t:linear-gradient(90deg,#8FE3E8 0%,#A27BDD 55%,#B64CDC 100%);--err:#FF9B8A;--field:#6F6A85;--sf:rgba(16,14,24,.78);--shadow:0 24px 48px -28px rgba(0,0,0,.7);--cur:#8FE3E8;--bg-a:rgba(7,6,12,.82);--t0:#07060C;--t1:#0B0A14;--t2:#0A0F14;--t3:#100A16}
html[data-theme=light]{color-scheme:light;--bg:#F6F5F9;--surface:#FFFFFF;--surface-2:#EEECF4;--line:rgba(18,16,25,.1);--text:#121019;--muted:#4E4A5E;--cyan:#16707A;--teal:#3F7F86;--lavender:#6E4DC2;--violet:#8A2FB0;--cyan-t:#16707A;--vio-t:#8A2FB0;--grad-t:linear-gradient(90deg,#16707A 0%,#6E4DC2 55%,#8A2FB0 100%);--dot:rgba(18,16,25,.08);--err:#B3261E;--field:#6B6680;--sf:rgba(255,255,255,.72);--shadow:0 18px 36px -26px rgba(18,16,25,.35);--cur:#16707A;--bg-a:rgba(246,245,249,.88);--t0:#F6F5F9;--t1:#F1F0F8;--t2:#EEF5F6;--t3:#F6F0F8}
html[data-theme=dark]{color-scheme:dark}
html{background:var(--bg)}
a{color:var(--cyan)}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* page transitions */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.2s ease both vt-out}
::view-transition-new(root){animation:.42s cubic-bezier(.2,.7,.2,1) both vt-in}
::view-transition-group(logo){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
.logo-img,.logo img{view-transition-name:logo}

/* theme switch */
.theme-sw{display:none;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;padding:0;transition:border-color .2s,transform .15s}
.js .theme-sw{display:inline-flex}
.theme-sw:hover{border-color:var(--cyan)}
.theme-sw:active{transform:scale(.94)}
.theme-sw:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.theme-sw svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.theme-sw .moon{display:none}
html[data-theme=light] .theme-sw .sun{display:none}
html[data-theme=light] .theme-sw .moon{display:block}

/* buttons: magnetic + press (variables set by site.js) */
.btn,.btn:hover,.btn:active{transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--sc,1))}
.btn:active{--sc:.97}
.btn.spring{transition:transform .55s cubic-bezier(.34,1.56,.64,1),background-position .4s ease}
.opt:active,.chip:active,.ltr:active,.todo button:active,.ghost:active{transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* line-art drawing */
.draw{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
 .js .draw{stroke-dashoffset:1.06}
 .js .go .draw,.js .draw.go{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
 .js .go .draw:nth-child(2){transition-delay:.12s}
 .js .go .draw:nth-child(3){transition-delay:.24s}
 .js .go .draw:nth-child(4){transition-delay:.36s}
 .js .go .draw:nth-child(5){transition-delay:.48s}
}
.tk{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* custom cursor (fine pointers, set up by site.js) */
.cur{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;opacity:0;transition:opacity .2s;will-change:transform}
.cur.on{opacity:1}
.cur.off{opacity:0}
.cur-dot i{display:block;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--cur)}
.cur-ring i{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:1px solid var(--cur);opacity:.65;transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s,background-color .2s}
.cur-ring.big i{transform:scale(1.45);opacity:1}
.cur-ring.lab i{transform:scale(1.95);opacity:1;background:var(--bg-a)}
.cur-ring b{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cur);opacity:0;transition:opacity .15s;white-space:nowrap}
.cur-ring.lab b{opacity:1}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 html.has-cur,html.has-cur *{cursor:none!important}
 html.has-cur input[type=text],html.has-cur input[type=email]{cursor:text!important}
}
@media (hover:none),(pointer:coarse){.cur{display:none!important}}
@media (prefers-reduced-motion:reduce){
 .btn,.opt,.chip,.ltr,.theme-sw{transition:none!important}
 .btn,.btn:hover,.btn:active{transform:none}
 .cur{display:none!important}
}
.tk path{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){.tk.fresh path{stroke-dashoffset:1.06;animation:tkdraw .45s cubic-bezier(.2,.7,.2,1) forwards}}
@keyframes tkdraw{to{stroke-dashoffset:0}}