@import url("/assets/brand/fonts/noto-tc/noto-tc.css");
/* AiSMART Lab — fx v14 "living silicon" layer (2026-10-24, de-slop pass).
   Additive on top of brand.css + motion.css. fx-v14.js adds html.fx14 when it starts;
   without JS, or with prefers-reduced-motion, nothing in here hides or moves content.
   The motion comes from the subject (chip traces, vias, signals on wires); surfaces stay flat:
   no gradients, no glass, no glows at rest, no index numbers. Kill switch: remove the fx-v14 tags. */

::selection{background:color-mix(in srgb,var(--color-primary) 26%,transparent);color:inherit}
.fx14-progress,.fx14-grid,.fx14-sparks,.fx14-boot,.fx14-hero-gl,.fx14-band,.fx14-navglow{pointer-events:none}
@media print{.fx14-progress,.fx14-grid,.fx14-sparks,.fx14-boot,.fx14-hero-gl,.fx14-band,.fx14-navglow{display:none!important}}

/* ---------- type: the page title is the biggest thing on every inner page ---------- */
html.fx14 .page-title h1{font-size:clamp(2.75rem,1.4rem + 4.4vw,5.25rem);line-height:1.02;letter-spacing:-.035em}
html.fx14 .page-title{padding-block:clamp(56px,7vw,104px) clamp(28px,3vw,40px)}
html.fx14 .page-title::after{height:6px;margin-top:clamp(20px,2vw,28px);background:var(--color-primary)}

/* ---------- surfaces and controls (flat; feedback on hover/press/focus) ---------- */
html.fx14 .theme-toggle,html.fx14 .lang-toggle,html.fx14 .lang-toggle button,html.fx14 .member-filter{border-radius:999px!important}
html.fx14 .theme-toggle,html.fx14 .lang-toggle,html.fx14 .member-filter{transition:border-color .25s,background-color .25s,color .25s,transform .2s}
html.fx14 .lang-toggle button[aria-pressed=true]{background:var(--color-primary)!important;color:var(--color-on-primary)!important}
@media (hover:hover){html.fx14 .theme-toggle:hover,html.fx14 .lang-toggle:hover,html.fx14 .member-filter:hover{border-color:var(--color-primary)!important}
  html.fx14 .member-filter:not([aria-pressed=true]):hover{background:var(--color-surface-muted)}}
html.fx14 :is(.theme-toggle,.member-filter,.lang-toggle button,.public-page-toc summary):active{transform:scale(.95)}
html.fx14 .member-filter[aria-pressed=true]{background:var(--color-primary)!important;border-color:var(--color-primary)!important;color:var(--color-on-primary)!important}
html.fx14 .member-search input,html.fx14 main input[type=search],html.fx14 main input[type=text]{border-radius:999px!important;padding-inline:18px!important;transition:border-color .25s}
html.fx14 .member-search input:focus,html.fx14 main input[type=search]:focus,html.fx14 main input[type=text]:focus{outline:2px solid var(--color-primary);outline-offset:2px;border-color:var(--color-primary)!important}
html.fx14 main tbody tr,html.fx14 article tbody tr{transition:background-color .2s}
html.fx14 main tbody tr:hover,html.fx14 article tbody tr:hover{background:var(--color-surface-muted)!important;box-shadow:inset 3px 0 0 var(--color-primary)}
html.fx14{scrollbar-width:thin;scrollbar-color:var(--color-primary) transparent}
html.fx14::-webkit-scrollbar{width:10px}
html.fx14::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:10px;background:var(--color-primary) padding-box}

/* team cards without a photo: a monogram tile instead of an empty gap */
html.fx14 .member-photo[data-fx14-initial]{position:relative}
html.fx14 .member-photo[data-fx14-initial] img{position:relative;z-index:1}
html.fx14 .member-photo[data-fx14-initial]::before{content:attr(data-fx14-initial);position:absolute;inset:0;display:grid;place-items:center;visibility:visible;
  border-radius:inherit;background:var(--color-primary);color:var(--color-on-primary);font:700 clamp(18px,40%,26px)/1 var(--font-body);filter:none}
html.fx14 .cv-alumni-heading .member-photo:not(:has(img)){filter:none}

/* rows (talks, news, records): text stays on the page's left edge; the hover surface gets room */
html.fx14 .fx14-row{--rp:clamp(12px,2vw,24px);padding-inline:var(--rp);margin-inline:calc(-1 * var(--rp));border-radius:12px;transition:background-color .3s,box-shadow .3s}
html.fx14 .fx14-row::before{display:none!important}
html.fx14 .fx14-rowv{--rv:16px;padding-block:var(--rv);margin-block:calc(-1 * var(--rv))}
html.fx14 .fx14-row > *{transform:none!important}
html.fx14 .fx14-row:hover{background:linear-gradient(var(--color-primary),var(--color-primary)) 0 50%/3px calc(100% - 28px) no-repeat,var(--color-surface-muted);box-shadow:none}
html.fx14 .record > div > :is(h3,h4):first-child,html.fx14 .record > p:first-of-type{margin-top:0}

/* cards: lift on hover; only a lifted card casts a shadow */
html.fx14 .fx14-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .25s}
@media (hover:hover){html.fx14 .fx14-card:hover{transform:translateY(-4px);border-color:var(--color-primary);box-shadow:0 18px 36px -22px rgb(0 20 80/.55)}}

/* photos never zoom or warp (v11 motion.css zooms figure images on hover) */
html.fx14 main figure:has(> img):hover > img,html.fx14 main figure img{transform:none!important}

/* ---------- chapter menu (本頁章節) + nav dropdowns: solid floating panels ---------- */
html.fx14 .public-page-toc summary{position:relative;overflow:hidden;gap:10px;padding:10px 18px 12px;border-radius:999px;border:0;cursor:pointer;
  color:var(--color-on-primary)!important;background:var(--color-primary);transition:transform .2s,background-color .25s}
@media (hover:hover){html.fx14 .public-page-toc summary:hover{background:var(--color-primary-hover)}}
html.fx14 .public-page-toc summary::after{content:"";width:8px;height:8px;margin-left:2px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .4s cubic-bezier(.2,.9,.2,1.3)}
html.fx14 .public-page-toc details[open] summary::after{transform:translateY(2px) rotate(225deg)}
html.fx14 .public-page-toc summary .fx14-meter{position:absolute;left:18px;right:18px;bottom:5px;height:2px;border-radius:2px;overflow:hidden;background:rgb(255 255 255/.25)}
html.fx14 .public-page-toc summary .fx14-meter::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--fx14-p,0));background:currentColor}
html.fx14 .public-page-toc ol,html.fx14 .public-nav-menu{border:0!important;border-radius:14px!important;padding:8px!important;background:var(--color-surface)!important;
  box-shadow:0 24px 60px -18px rgb(0 20 80/.5),0 2px 8px rgb(0 20 80/.12)!important;scrollbar-width:thin;scrollbar-color:var(--color-primary) transparent}
html.fx14 .public-page-toc ol{list-style:none}
html.fx14 .public-page-toc ol li,html.fx14 .public-page-toc ol li + li{margin:2px 0;border:0!important}
html.fx14 .public-page-toc ol a,html.fx14 .public-nav-menu a{position:relative;display:flex!important;align-items:center;border:0!important;border-radius:10px!important;
  color:var(--color-text);text-decoration:none;transition:color .2s,padding .3s cubic-bezier(.2,.9,.2,1.2),background-color .2s}
html.fx14 .public-page-toc ol a::after,html.fx14 .public-nav-menu a::after{content:"";position:absolute;left:0;top:25%;bottom:25%;width:3px;border-radius:3px;
  background:var(--color-primary);transform:scaleY(0);transition:transform .3s cubic-bezier(.2,.9,.2,1.3)}
html.fx14 .public-page-toc ol a:hover,html.fx14 .public-nav-menu a:hover,html.fx14 .public-page-toc ol a:focus-visible{padding-left:18px!important;background:var(--color-surface-muted)!important;color:var(--color-heading)}
html.fx14 .public-page-toc ol a:hover::after,html.fx14 .public-nav-menu a:hover::after,html.fx14 .public-page-toc ol a[aria-current]::after,html.fx14 .public-nav-menu a[aria-current]::after{transform:scaleY(1)}
html.fx14 .public-page-toc ol a[aria-current],html.fx14 .public-nav-menu a[aria-current]{color:var(--color-heading);font-weight:700;background:var(--color-surface-muted)!important}
@media (max-width:900px){
  html.fx14 body[data-public-layout] .public-page-toc,html.fx14 .public-page-toc{position:sticky!important;top:12px!important;z-index:40!important;margin-left:auto}
  html.fx14 .public-page-toc summary{box-shadow:0 10px 24px -10px rgb(0 20 80/.55)}
  html.fx14 .public-page-toc ol{max-height:min(60vh,460px)!important}
}

/* ---------- contact: a flat panel with live traces running behind the details ---------- */
html.fx14 .contact-block{position:relative;isolation:isolate;overflow:hidden;border-radius:16px;padding:clamp(24px,4vw,56px)!important;background:var(--color-surface-muted)}
html.fx14 .contact-block > :not(.fx14-hero-gl){position:relative;z-index:1}
html.fx14 .contact-block > .fx14-hero-gl{position:absolute;inset:0;z-index:0}

/* ---------- the subject's own imagery: traces, vias, signals ---------- */
html.fx14 .fx14-headband{position:relative;isolation:isolate;overflow:hidden}
html.fx14 .fx14-head-gl{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
html.fx14 main{position:relative}
.fx14-band{position:absolute;left:0;right:0;z-index:-1;opacity:0;transition:opacity 1.2s ease;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent)}
.fx14-band.on{opacity:1}
.fx14-hero-gl{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:0;transition:opacity 1.4s ease}
.fx14-hero-gl.on{opacity:1}
html.fx14 .hero--circuit.fx14-has-gl::before{opacity:.55;mix-blend-mode:screen}
html.fx14 .hero--circuit h1,html.fx14 .hero--circuit p{text-shadow:0 1px 12px rgb(0 10 50/.85)}

@media (prefers-reduced-motion:no-preference){
  /* scroll progress: one flat signal line */
  .fx14-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:9996;transform-origin:left center;transform:scaleX(var(--fx14-p,0));background:var(--color-primary)}

  /* the pointer lights the pad grid under the page */
  .fx14-grid{position:fixed;inset:0;z-index:-1;overflow:hidden}
  .fx14-grid::before{content:"";position:absolute;inset:0;
    background-image:radial-gradient(circle,color-mix(in srgb,var(--color-primary) 55%,transparent) 1px,transparent 1.6px);background-size:26px 26px;
    -webkit-mask-image:radial-gradient(300px circle at var(--fx14-mx,50%) var(--fx14-my,-40%),#000 0,rgb(0 0 0/.25) 50%,transparent 100%);
            mask-image:radial-gradient(300px circle at var(--fx14-mx,50%) var(--fx14-my,-40%),#000 0,rgb(0 0 0/.25) 50%,transparent 100%)}

  .fx14-sparks{position:fixed;inset:0;width:100vw;height:100vh;z-index:9995}

  /* first page of a session: the chip boots */
  .fx14-boot{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#000f3d;color:#ACCEE9;font-family:var(--font-mono);animation:fx14-boot-failsafe .01s linear 3.2s forwards}
  .fx14-boot svg{width:min(340px,70vw);height:auto;overflow:visible}
  .fx14-boot .tr{fill:none;stroke:#ACCEE9;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:fx14-draw .9s cubic-bezier(.65,0,.35,1) forwards}
  .fx14-boot .via{fill:#fff;opacity:0;animation:fx14-pop .3s ease-out forwards}
  .fx14-boot .die{fill:none;stroke:#fff;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;animation:fx14-draw .7s cubic-bezier(.65,0,.35,1) .15s forwards}
  .fx14-boot .lbl{fill:#fff;font-size:11.5px;letter-spacing:.18em;text-anchor:middle;opacity:0;animation:fx14-pop .4s ease-out .7s forwards}
  .fx14-boot .bar{fill:#ACCEE9;transform-origin:0 0;transform:scaleX(0);animation:fx14-bar 1s cubic-bezier(.65,0,.35,1) .2s forwards}
  .fx14-boot.out{animation:fx14-boot-out .75s cubic-bezier(.76,0,.24,1) forwards}
  @keyframes fx14-draw{to{stroke-dashoffset:0}}
  @keyframes fx14-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
  @keyframes fx14-bar{to{transform:scaleX(1)}}
  @keyframes fx14-boot-out{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0)}}
  @keyframes fx14-boot-failsafe{to{opacity:0;visibility:hidden}}

  /* signals: a packet runs along the header edge, the dividers and the footer edge */
  html.fx14 header.site-header.common-site-header::after,html.fx14 .site-footer::before{content:"";position:absolute;left:0;height:2px;width:120px;pointer-events:none;background:var(--color-primary);animation:fx14-packet 7s cubic-bezier(.65,0,.35,1) infinite}
  html.fx14 header.site-header.common-site-header::after{bottom:-1px}
  html.fx14 .site-footer{position:relative;overflow:hidden}
  html.fx14 .site-footer::before{top:0;animation-delay:2.5s}
  html.fx14 .divider{position:relative;overflow-x:clip}
  html.fx14 header.site-header.common-site-header{overflow-x:clip}
  html.fx14 .divider::after{content:"";position:absolute;top:50%;left:0;width:80px;height:3px;margin-top:-1.5px;border-radius:3px;pointer-events:none;background:var(--color-primary);animation:fx14-packet 5s cubic-bezier(.65,0,.35,1) infinite}
  @keyframes fx14-packet{0%{transform:translateX(-120px);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(min(100vw,1200px));opacity:0}}

  /* nav: a filled bar slides to the item under the pointer */
  html.fx14 .site-nav{position:relative;overflow-x:clip}
  .fx14-navglow{position:absolute;left:0;bottom:0;height:3px;width:var(--w,0);transform:translateX(var(--x,0));border-radius:3px;opacity:var(--o,0);z-index:2;background:var(--color-primary);
    transition:transform .45s cubic-bezier(.2,.9,.2,1.15),width .45s cubic-bezier(.2,.9,.2,1.15),opacity .3s}
  html.fx14 .site-brand__logo{transition:transform .5s cubic-bezier(.2,.9,.2,1.3)}
  @media (hover:hover){html.fx14 .site-brand:hover .site-brand__logo{transform:scale(1.05)}}

  /* headings: words rise out of a mask */
  .fx14-w{display:inline-block;overflow:clip;overflow-clip-margin:.18em;vertical-align:top;padding-block:.08em;margin-block:-.08em}
  .fx14-wi{display:inline-block}
  html.fx14 .page-title::after{transform-origin:left;animation:fx14-grow 1.1s cubic-bezier(.65,0,.35,1) .25s both}
  @keyframes fx14-grow{from{transform:scaleX(0)}}

  /* menus spring open; items arrive one after another */
  html.fx14 .public-page-toc details[open] ol,html.fx14 .public-nav-group[open] .public-nav-menu{transform-origin:top right;animation:fx14-pop-panel .45s cubic-bezier(.2,.9,.2,1.15) both}
  html.fx14 .public-nav-group[open] .public-nav-menu{transform-origin:top left}
  html.fx14 .public-page-toc details[open] ol li,html.fx14 .public-nav-group[open] .public-nav-menu a{animation:fx14-item-in .45s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--fx14-i,0) * 26ms + 50ms)}
  @keyframes fx14-pop-panel{from{opacity:0;transform:translateY(-10px) scale(.94)}to{opacity:1;transform:none}}
  @keyframes fx14-item-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

  /* page-to-page iris (cross-document View Transitions) + theme iris from the toggle */
  html.fx14:active-view-transition-type(fx-page) main{view-transition-name:none}
  html.fx14:active-view-transition-type(fx-page)::view-transition-old(root){animation:fx14-dim .5s ease both}
  html.fx14:active-view-transition-type(fx-page)::view-transition-new(root){animation:fx14-iris .55s cubic-bezier(.65,0,.35,1) both}
  html.fx14.vt-theme::view-transition-old(root){animation:none}
  html.fx14.vt-theme::view-transition-new(root){animation:fx14-iris .7s cubic-bezier(.65,0,.35,1) both}
  @keyframes fx14-iris{from{clip-path:circle(0 at var(--fx14-vx,50%) var(--fx14-vy,40%))}to{clip-path:circle(150vmax at var(--fx14-vx,50%) var(--fx14-vy,40%))}}
  @keyframes fx14-dim{to{filter:brightness(.75);transform:scale(.985)}}
}

/* ======================= all-out round: subject-driven effects ======================= */
.fx14-scope-cv,.fx14-loop,.fx14-mark{pointer-events:none}
@media print{.fx14-scope-cv,.fx14-loop,.fx14-mark{display:none!important}}
@media (prefers-reduced-motion:no-preference){
  /* oscilloscope dividers: the scope trace replaces the static rule */
  html.fx14 .divider.fx14-scope{min-height:84px;background:none!important;-webkit-mask:none!important;mask:none!important}
  html.fx14 .divider.fx14-scope > :not(canvas){opacity:0}
  html.fx14 .divider.fx14-scope::after{display:none}
  .fx14-scope-cv{position:absolute;left:0;top:0;width:100%;height:84px}

  /* current loop around a hovered card */
  .fx14-loop{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2}
  .fx14-loop rect{fill:none;stroke:var(--color-primary);vector-effect:non-scaling-stroke}
  .fx14-loop .trace{stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.65,0,.35,1)}
  .fx14-loop .pkt{stroke-width:4;stroke-linecap:round;stroke-dasharray:.05 .95;opacity:0;transition:opacity .3s;animation:fx14-loop 1.8s linear infinite}
  html.fx14 .fx14-card:hover > .fx14-loop .trace{stroke-dashoffset:0}
  html.fx14 .fx14-card:hover > .fx14-loop .pkt{opacity:1}
  @keyframes fx14-loop{to{stroke-dashoffset:-1}}

  /* the name returns at full width: outlines route in, then fill */
  .fx14-mark{display:block;padding-top:clamp(28px,4vw,56px)}
  .fx14-mark svg{display:block;width:100%;height:auto;overflow:visible}
  .fx14-mark text{font-family:var(--font-display);font-weight:700;font-size:150px;letter-spacing:-.02em;fill:var(--color-heading);fill-opacity:0;
    stroke:var(--color-primary);stroke-width:1.4;stroke-dasharray:900;stroke-dashoffset:900}
  .fx14-mark.go text{transition:stroke-dashoffset 2.6s cubic-bezier(.65,0,.35,1),fill-opacity 1s ease 2s;stroke-dashoffset:0;fill-opacity:1}
}

/* glitch: RGB-split jitter on headings (hover + idle), the header name on hover */
@media (prefers-reduced-motion:no-preference){
  html.fx14 .fx14-glitching,html.fx14 .fx14-glitching .fx14-wi{animation:fx14-glitch .5s steps(2) 1}
  @media (hover:hover){html.fx14 .site-brand:hover .site-brand__name{animation:fx14-glitch .5s steps(2) 1}}
  @keyframes fx14-glitch{
    0%{text-shadow:2px 0 #ff2d6f,-2px 0 #00e1ff;transform:translateX(1px)}
    20%{text-shadow:-3px 0 #ff2d6f,3px 0 #00e1ff;transform:translateX(-2px) skewX(-4deg)}
    40%{text-shadow:2px 1px #ff2d6f,-2px -1px #00e1ff;transform:translateX(2px);clip-path:inset(10% 0 45% 0)}
    60%{text-shadow:-1px 0 #ff2d6f,1px 0 #00e1ff;transform:translateX(-1px);clip-path:inset(55% 0 5% 0)}
    80%{text-shadow:1px 0 #ff2d6f,-1px 0 #00e1ff;transform:none;clip-path:none}
    100%{text-shadow:none;transform:none;clip-path:none}}
}

/* perf: the WebGL field supersedes the v11 2D hero canvas */
html.fx14 .hero--circuit.fx14-has-gl > .hero-pulse{display:none}

/* ---------- familiar patterns ---------- */
.fx14-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:60;width:52px;height:52px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--color-primary);color:var(--color-on-primary);box-shadow:0 12px 28px -12px rgb(0 20 80/.6);opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .3s,transform .4s cubic-bezier(.2,.9,.2,1.3),visibility 0s .3s,background-color .2s}
.fx14-top.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .4s cubic-bezier(.2,.9,.2,1.3),visibility 0s,background-color .2s}
.fx14-top svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.fx14-top circle{fill:none;stroke-width:3}
.fx14-top .trk{stroke:rgb(255 255 255/.22)}
.fx14-top .val{stroke:currentColor;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.fx14-top path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transform-origin:24px 24px}
@media (hover:hover){.fx14-top:hover{background:var(--color-primary-hover)}.fx14-top:hover path{animation:fx14-nudge .6s ease}}
.fx14-top:active{transform:scale(.92)}
.fx14-top:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:3px}
@keyframes fx14-nudge{40%{translate:-3px 0}}
@media print{.fx14-top{display:none}}
/* navigation feedback: the progress line runs while the next page loads */
@media (prefers-reduced-motion:no-preference){
  .fx14-progress.loading{transform:none!important;animation:fx14-loading 1.4s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes fx14-loading{from{transform:scaleX(.05)}to{transform:scaleX(.85)}}
  /* image skeletons: a breathing tone until the picture arrives, then it fades in */
  html.fx14 img.fx14-img-wait{background:var(--color-surface-muted);animation:fx14-breathe 1.4s ease-in-out infinite;color:transparent}
  html.fx14 img.fx14-img-in{animation:fx14-img-in .5s ease both}
  @keyframes fx14-breathe{50%{background:var(--color-border)}}
  @keyframes fx14-img-in{from{opacity:0}}
}

/* ======================= hover language: every clickable answers, obviously ======================= */
html.fx14 .fx14-tl{color:var(--color-link,var(--color-primary));text-decoration:none!important;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.08em;
  background:linear-gradient(color-mix(in srgb,currentColor 38%,transparent),color-mix(in srgb,currentColor 38%,transparent)) 0 100%/100% 1px no-repeat,linear-gradient(var(--color-primary),var(--color-primary)) 100% 100%/0 2px no-repeat;
  transition:background-size .4s cubic-bezier(.2,.8,.2,1),color .2s}
html.fx14 .fx14-tl:hover,html.fx14 .fx14-tl:focus-visible{color:var(--color-heading,var(--color-primary));background-position:0 100%,0 100%;background-size:100% 1px,100% 2px}
html.fx14 .fx14-imglink{display:inline-block;border-radius:10px;outline:3px solid transparent;outline-offset:6px;transition:outline-color .25s,outline-offset .3s cubic-bezier(.2,.9,.2,1.3)}
html.fx14 .fx14-imglink:hover,html.fx14 .fx14-imglink:focus-visible{outline-color:var(--color-primary);outline-offset:4px}
html.fx14 .fx14-blk{border-radius:10px;transition:background-color .2s,color .2s,box-shadow .25s}
html.fx14 .fx14-blk:hover,html.fx14 .fx14-blk:focus-visible{color:var(--color-primary);background-color:var(--color-surface-muted);box-shadow:0 0 0 6px var(--color-surface-muted)}
html.fx14 .fx14-chip{transition:background-color .2s,border-color .2s,color .2s,transform .2s}
html.fx14 .fx14-chip:hover,html.fx14 .fx14-chip:focus-visible{color:var(--color-primary);background-color:var(--color-primary-subtle);border-color:var(--color-primary);transform:translateY(-1px)}
/* toggles */
html.fx14 main summary,html.fx14 article summary,html.fx14 .public-nav-group > summary{border-radius:10px;transition:color .2s,background-color .2s,box-shadow .25s}
html.fx14 main summary:hover,html.fx14 article summary:hover{color:var(--color-primary);background-color:var(--color-surface-muted);box-shadow:0 0 0 8px var(--color-surface-muted)}
html.fx14 header.site-header.common-site-header .public-nav-group > summary:hover,html.fx14 header.site-header.common-site-header .site-nav > ul > li > a:hover{color:var(--color-primary)!important;background:var(--color-surface-muted)!important;border-radius:10px}
@media (prefers-reduced-motion:no-preference){html.fx14 main summary:hover::-webkit-details-marker,html.fx14 main summary:hover::marker{color:var(--color-primary)}}
/* controls: buttons, selects, labels with their fields */
html.fx14 :is(main,article,body > div nav) :is(button,select,input[type=submit],input[type=button]):not(.fx14-top){transition:border-color .2s,background-color .2s,transform .2s,box-shadow .25s}
@media (hover:hover){
  html.fx14 :is(main,article,body > div nav) :is(button,select,input[type=submit],input[type=button]):not(.fx14-top):not([aria-pressed=true]):not(:disabled):not(figure button):hover{border-color:var(--color-primary)!important;background-color:var(--color-surface-muted);transform:translateY(-2px);box-shadow:0 8px 18px -12px rgb(0 20 80/.6)}
  html.fx14 :is(main,article,nav) label:hover,html.fx14 :is(main,article,nav) label:has(+ :is(input,select,textarea):hover),html.fx14 :is(main,article,nav) :is(div,p,label):has(:is(input,select):hover) > label,html.fx14 :is(main,article,nav) label:has(:is(input,select,textarea):hover){color:var(--color-primary)}
  html.fx14 :is(main,article,nav) :is(input,select,textarea):hover{border-color:var(--color-primary)!important}
  /* image buttons (zoomable figures in the notes): a ring with room, no zoom */
  html.fx14 figure button img{border-radius:8px;outline:3px solid transparent;outline-offset:6px;transition:outline-color .25s,outline-offset .3s cubic-bezier(.2,.9,.2,1.3)}
  html.fx14 figure button:hover img{outline-color:var(--color-primary);outline-offset:4px}
}
html.fx14 :is(main,article,nav) label{transition:color .2s}