/* The site's design system, every screen size: brand fonts, glass surfaces, one button language,
   text-colour selection, one motion, rounded corners. Phone-only layout lives in phone.css. */
@font-face{font-family:"Pixelify Sans";src:local("Helvetica Neue Medium"),local("HelveticaNeue-Medium"),local("Segoe UI Semibold"),local("Roboto Medium"),local("Arial");font-weight:400 700;font-display:swap}
@font-face{font-family:"Press Start 2P";src:local("Helvetica Neue Medium"),local("HelveticaNeue-Medium"),local("Segoe UI Semibold"),local("Roboto Medium"),local("Arial");font-weight:400;size-adjust:128%;font-display:swap}
.name,.name .ch{word-spacing:.12em!important;white-space:pre}
h1 .name .ch{letter-spacing:-.02em}
main h2,section h2{line-height:1.2!important;letter-spacing:-.01em}
.arc-title,.p1,.px{line-height:1.4}
.arc-screen{border-radius:24px!important;border-width:1px!important}
.px,.p1,.arc-title,.toast,#finder,#panel,#secret,.welcome,.m-ttl{-webkit-font-smoothing:auto;font-smooth:auto}
.pub-chips,.as-tabs,.pj-filter,.st-filter{background:linear-gradient(180deg,color-mix(in srgb,var(--text) 9%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--bg-2) 42%,transparent)!important;-webkit-backdrop-filter:blur(30px) saturate(1.9);backdrop-filter:blur(30px) saturate(1.9);border:0!important;box-shadow:0 14px 36px -12px rgba(0,0,0,.55),inset 0 1px 0 color-mix(in srgb,var(--text) 16%,transparent)!important;display:flex;flex-wrap:nowrap;gap:2px;overflow-x:auto;scrollbar-width:none;margin:14px 0 6px!important;padding:5px!important;border-radius:999px}
.pub-chips::-webkit-scrollbar,.as-tabs::-webkit-scrollbar,.pj-filter::-webkit-scrollbar,.st-filter::-webkit-scrollbar{display:none}
#finder .fd-bar{border:0!important;border-radius:999px!important;padding:0 16px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--text) 9%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--bg-2) 42%,transparent)!important;-webkit-backdrop-filter:blur(30px) saturate(1.9);backdrop-filter:blur(30px) saturate(1.9);box-shadow:0 14px 36px -12px rgba(0,0,0,.55),inset 0 1px 0 color-mix(in srgb,var(--text) 16%,transparent)!important}
#finder .fd-list{border:0!important;border-radius:22px!important;overflow:auto;background:linear-gradient(180deg,color-mix(in srgb,var(--text) 9%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--bg-2) 42%,transparent)!important;-webkit-backdrop-filter:blur(30px) saturate(1.9);backdrop-filter:blur(30px) saturate(1.9);box-shadow:0 14px 36px -12px rgba(0,0,0,.55),inset 0 1px 0 color-mix(in srgb,var(--text) 16%,transparent)!important}
#finder .fd-list li{border-bottom-color:color-mix(in srgb,var(--text) 10%,transparent)!important}
#panel,#secret,dialog,.welcome{border:0!important;border-radius:26px!important;-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:0 24px 60px -20px rgba(0,0,0,.7),inset 0 1px 0 color-mix(in srgb,var(--text) 14%,transparent)!important}
dialog{background:color-mix(in srgb,var(--card) 74%,transparent)!important}
dialog::backdrop{background:rgba(5,6,10,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.card,#work .card{border-color:color-mix(in srgb,var(--text) 10%,transparent);border-radius:20px;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 9%,transparent)}
.row{border-radius:16px}
html body header,html body .pub-chips,html body .as-tabs,html body .pj-filter,html body .st-filter,html body .m-tabs,html body .m-top,html body .bot,html body .toast,html body #finder .fd-bar,html body #finder .fd-list{box-shadow:0 8px 20px -16px rgba(0,0,0,.5),inset 0 1px 0 color-mix(in srgb,var(--text) 14%,transparent)!important}
html body .bot{padding:0!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;border-radius:0!important}
html{--sva-ease:cubic-bezier(.32,.72,0,1)}
@font-face{font-family:"SVA Display";src:url("/assets/fonts/ChakraPetch-600-latin-ext.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"SVA Display";src:url("/assets/fonts/ChakraPetch-600-latin.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"SVA Display";src:url("/assets/fonts/ChakraPetch-700-latin-ext.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"SVA Display";src:url("/assets/fonts/ChakraPetch-700-latin.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
html body header .logo,html body header .logo-t,html body header .brand,html body .brand,html body .brand span{font-family:"SVA Display",system-ui,sans-serif!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important;-webkit-font-smoothing:antialiased}
html body h1 .name,html body h1 .name .ch{font-family:"SVA Display",system-ui,sans-serif!important;font-weight:700;letter-spacing:-.01em!important}
html body main h2,html body section h2{font-family:"SVA Display",system-ui,sans-serif!important;font-weight:600;letter-spacing:-.02em}
html body header .xpbar{display:none!important}
html body .m-bar a,html body .m-bar button,html body .m-tabs button,html body .pub-chips button,html body .as-tabs button,html body .pj-filter button,html body .st-filter button,html body .seg-row button{background:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--muted)!important;font-weight:600!important}
html body .m-sec a{background:transparent!important;border-color:transparent!important;box-shadow:none!important;color:var(--text)!important}
html body .m-bar a.cur,html body .m-bar button.cur,html body .m-bar button[aria-expanded=true],html body .m-tabs button[aria-selected=true],html body .pub-chips button[aria-pressed=true],html body .as-tabs button[aria-pressed=true],html body .pj-filter button[aria-pressed=true],html body .st-filter button[aria-pressed=true],html body .seg-row button[aria-pressed=true],html body .m-sec a.cur{color:var(--accent-2)!important;font-weight:700!important}
html body .seg-row{background:color-mix(in srgb,var(--text) 7%,transparent);border-radius:14px;padding:4px;gap:2px}
html body .btn.primary,html body .wl-btn.primary,html body .arc-btn:not(.ghost),html body .m-mailcta,html body .hc-cta,html body .as-get-lg,html body .st-get-lg{background:var(--accent)!important;color:var(--on-accent,#fff)!important;border:0!important;border-radius:999px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)!important;font-family:inherit!important;font-weight:650!important;text-transform:none!important;letter-spacing:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .btn:not(.primary),html body .wl-btn:not(.primary),html body .arc-btn.ghost,html body .case-btn,html body .trail-back,html body .home-chip a,html body .as-link,html body .st-link,html body .st-copy,html body .as-get:not(.as-get-lg),html body .st-get:not(.st-get-lg),html body #finder .fd-q,html body .earlier-btn,html body .card-more,html body .lead-more,html body .more-links,html body .about-btn,html body .as-more,html body .pj-links .btn{background:color-mix(in srgb,var(--text) 9%,transparent)!important;color:var(--text)!important;border:0!important;border-radius:999px!important;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent)!important;font-family:inherit!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important}
html body header .m-gear,html body .m-top,html body .m-cell .icon-btn,html body .m-cell .lang-btn,html body .dlg .x,html body #panel .x,html body #secret .x,html body .wl-x{background:color-mix(in srgb,var(--text) 9%,transparent)!important;color:var(--text)!important;border:0!important;border-radius:999px!important;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent)!important;font-family:inherit!important}
html body .dlg .x,html body #panel .x,html body #secret .x,html body .wl-x{width:32px!important;height:32px!important;display:grid!important;place-items:center;padding:0!important;font-size:20px!important;line-height:1!important}
html body header .m-gear[aria-expanded=true]{color:var(--accent-2)!important}
html body .earlier-btn,html body .card-more,html body .lead-more,html body .more-links,html body .about-btn,html body .as-more,html body .as-get:not(.as-get-lg),html body .st-get:not(.st-get-lg),html body .st-copy,html body .pj-links .btn{font-size:.82rem!important;padding:7px 14px!important}
html body .arc-btn{font-size:.92rem!important;padding:13px 16px!important}
html body .bot{opacity:.42;transition:opacity .25s var(--sva-ease),transform .24s var(--sva-ease)!important}
html body .bot:hover,html body .bot:focus-visible,html body .bot:active,html body .bot[aria-expanded=true]{opacity:1!important}
html body .m-bar a,html body .m-bar button,html body .m-tabs button,html body .pub-chips button,html body .as-tabs button,html body .pj-filter button,html body .st-filter button,html body .seg-row button,html body .m-sec a,html body .btn.primary,html body .wl-btn.primary,html body .arc-btn:not(.ghost),html body .m-mailcta,html body .hc-cta,html body .as-get-lg,html body .st-get-lg,html body .btn:not(.primary),html body .wl-btn:not(.primary),html body .arc-btn.ghost,html body .case-btn,html body .trail-back,html body .home-chip a,html body .as-link,html body .st-link,html body .st-copy,html body .as-get:not(.as-get-lg),html body .st-get:not(.st-get-lg),html body #finder .fd-q,html body .earlier-btn,html body .card-more,html body .lead-more,html body .more-links,html body .about-btn,html body .as-more,html body .pj-links .btn,html body header .m-gear,html body .m-top,html body .m-cell .icon-btn,html body .m-cell .lang-btn,html body .dlg .x,html body #panel .x,html body #secret .x,html body .wl-x{transition:color .2s var(--sva-ease),background-color .2s var(--sva-ease),transform .24s var(--sva-ease),opacity .2s var(--sva-ease)!important}
html body .m-bar a,html body .m-bar button,html body .m-tabs button,html body .pub-chips button,html body .as-tabs button,html body .pj-filter button,html body .st-filter button,html body .seg-row button,html body .m-sec a,html body .btn.primary,html body .wl-btn.primary,html body .arc-btn:not(.ghost),html body .m-mailcta,html body .hc-cta,html body .as-get-lg,html body .st-get-lg,html body .btn:not(.primary),html body .wl-btn:not(.primary),html body .arc-btn.ghost,html body .case-btn,html body .trail-back,html body .home-chip a,html body .as-link,html body .st-link,html body .st-copy,html body .as-get:not(.as-get-lg),html body .st-get:not(.st-get-lg),html body #finder .fd-q,html body .earlier-btn,html body .card-more,html body .lead-more,html body .more-links,html body .about-btn,html body .as-more,html body .pj-links .btn,html body header .m-gear,html body .m-top,html body .m-cell .icon-btn,html body .m-cell .lang-btn,html body .dlg .x,html body #panel .x,html body #secret .x,html body .wl-x:hover{transform:none!important}
html body .m-bar a:active,html body .m-bar button:active,html body .m-tabs button:active,html body .pub-chips button:active,html body .as-tabs button:active,html body .pj-filter button:active,html body .st-filter button:active,html body .seg-row button:active,html body .m-sec a:active,html body .btn.primary:active,html body .wl-btn.primary:active,html body .arc-btn:not(.ghost):active,html body .m-mailcta:active,html body .hc-cta:active,html body .as-get-lg:active,html body .st-get-lg:active,html body .btn:not(.primary):active,html body .wl-btn:not(.primary):active,html body .arc-btn.ghost:active,html body .case-btn:active,html body .trail-back:active,html body .home-chip a:active,html body .as-link:active,html body .st-link:active,html body .st-copy:active,html body .as-get:not(.as-get-lg):active,html body .st-get:not(.st-get-lg):active,html body #finder .fd-q:active,html body .earlier-btn:active,html body .card-more:active,html body .lead-more:active,html body .more-links:active,html body .about-btn:active,html body .as-more:active,html body .pj-links .btn:active,html body header .m-gear:active,html body .m-top:active,html body .m-cell .icon-btn:active,html body .m-cell .lang-btn:active,html body .dlg .x:active,html body #panel .x:active,html body #secret .x:active,html body .wl-x:active{transform:scale(.96)!important}
html body .card:hover,html body .row:hover,html body .icon-link:hover,html body .as-row:hover,html body .cat-item:hover{transform:none!important}
@keyframes sva-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
html body .m-panel.on,html body #finder.open,html body dialog[open],html body .welcome:not([hidden]){animation:sva-in .26s var(--sva-ease) both!important}
html body .toast{transition:opacity .26s var(--sva-ease),transform .3s var(--sva-ease)!important}
html body .earlier-body{transition:grid-template-rows .3s var(--sva-ease)!important}
html body .earlier-btn .chev{transition:transform .3s var(--sva-ease)!important}
html.noanim body .m-panel.on,html.noanim body #finder.open,html.noanim body dialog[open],html.noanim body .welcome{animation:none!important}
@media (prefers-reduced-motion:reduce){html body *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
html body .cat-item.as-main,html body .cat-item.as-main:hover{background:transparent!important;box-shadow:none!important}
@media (hover:hover){html body .m-bar a:not(.cur):hover,html body .m-bar button:not(.cur):not([aria-expanded=true]):hover,html body .m-tabs button:not([aria-selected=true]):hover,html body .pub-chips button:not([aria-pressed=true]):hover,html body .as-tabs button:not([aria-pressed=true]):hover,html body .pj-filter button:not([aria-pressed=true]):hover,html body .st-filter button:not([aria-pressed=true]):hover,html body .seg-row button:not([aria-pressed=true]):hover{color:var(--text)!important}html body .m-sec a:not(.cur):hover{color:var(--accent-2)!important}html body .btn:not(.primary):hover,html body .wl-btn:not(.primary):hover,html body .arc-btn.ghost:hover,html body .case-btn:hover,html body .trail-back:hover,html body .home-chip a:hover,html body .as-link:hover,html body .st-link:hover,html body .st-copy:hover,html body .as-get:not(.as-get-lg):hover,html body .st-get:not(.st-get-lg):hover,html body #finder .fd-q:hover,html body .earlier-btn:hover,html body .card-more:hover,html body .lead-more:hover,html body .more-links:hover,html body .about-btn:hover,html body .as-more:hover,html body .pj-links .btn:hover,html body header .m-gear:hover,html body .m-top:hover,html body .m-cell .icon-btn:hover,html body .m-cell .lang-btn:hover,html body .dlg .x:hover,html body #panel .x:hover,html body #secret .x:hover,html body .wl-x:hover{background:color-mix(in srgb,var(--text) 16%,transparent)!important}html body .btn.primary:hover,html body .wl-btn.primary:hover,html body .arc-btn:not(.ghost):hover,html body .m-mailcta:hover,html body .hc-cta:hover,html body .as-get-lg:hover,html body .st-get-lg:hover{filter:brightness(1.1)}}
html body .arc-stats{display:none!important}
html body .arc-title{margin-bottom:14px!important}
html body .p1,html body .badge-pill,html body .meter,html body .meter i{border-radius:999px!important}
html body .kicker{border-radius:14px!important}
html body #panel .ck,html body #secret .ck{border-radius:7px!important}
html body .note,html body .cover img,html body .cover{border-radius:18px!important}
html body .pj-img,html body .pj-img img{border-radius:14px!important;overflow:hidden}
html body code{border-radius:8px!important}
html body .bot-say{font:600 .84rem/1.2 -apple-system,system-ui,"Segoe UI",sans-serif!important;letter-spacing:0!important;color:var(--text)!important;border:0!important;border-radius:999px!important;padding:8px 14px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--text) 10%,transparent),color-mix(in srgb,var(--text) 3%,transparent)),color-mix(in srgb,var(--bg-2) 62%,transparent)!important;-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);box-shadow:0 8px 20px -14px rgba(0,0,0,.6),inset 0 1px 0 color-mix(in srgb,var(--text) 14%,transparent)!important;transition:opacity .26s var(--sva-ease),transform .3s var(--sva-ease)!important}
html body .bot-say::before{display:none!important}
html body .bot:has(.bot-say.show){opacity:1!important}
html body .welcome,html body #panel,html body #secret{background:linear-gradient(180deg,color-mix(in srgb,var(--text) 8%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--card) 82%,transparent)!important;-webkit-backdrop-filter:blur(30px) saturate(1.8)!important;backdrop-filter:blur(30px) saturate(1.8)!important;color:var(--text)!important}
html body .welcome::before,html body .welcome::after,html body .crt-band{display:none!important}
html body .welcome h2,html body #panel h2,html body #secret h2{font-family:"SVA Display",system-ui,sans-serif!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;text-shadow:none!important;color:var(--text)!important;font-size:1.2rem!important;line-height:1.25!important}
html body .welcome h2::after,html body #panel h2::after,html body #secret h2::after{content:none!important;display:none!important}
html body .welcome,html body .wl-list,html body .wl-sub{font-family:-apple-system,system-ui,"Segoe UI",sans-serif!important;letter-spacing:0!important}
html body .wl-sub{color:var(--muted)!important}
html body .wl-list{border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent)!important;font-size:.92rem!important;line-height:1.5!important}
html body .wl-list b{color:var(--accent-2)!important;font-weight:650!important}
html body .welcome{padding:18px 18px 16px!important}
html body #panel *,html body #secret *{text-shadow:none!important}
html body #panel [style*=dashed],html body #panel hr,html body #secret hr{border-color:color-mix(in srgb,var(--text) 10%,transparent)!important;border-style:solid!important}
html body #panel .meter{border:0!important;background:color-mix(in srgb,var(--text) 10%,transparent)!important;height:8px!important;overflow:hidden}
html body #panel .meter i{background:var(--accent-2)!important;background-image:none!important;box-shadow:none!important;border-radius:999px!important}
html body #panel .dlg{padding-top:18px!important}
html body #finder .fd-bar,html body #finder .fd-list,html body #finder .fd-q{background:color-mix(in srgb,var(--card) 97%,transparent)!important;-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;color:var(--text)!important;box-shadow:0 12px 30px -14px rgba(0,0,0,.7),inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent)!important}
html body #finder,html body #finder *{font-family:-apple-system,system-ui,"Segoe UI",sans-serif!important;letter-spacing:0!important}
html body #finder .fd-bar input{font-size:16px!important;font-weight:500!important;color:var(--text)!important}
html body #finder .fd-bar input::placeholder{color:var(--muted)!important}
html body #finder .fd-bar .ic,html body #finder .fd-q .ic{color:var(--accent-2)!important}
html body #finder .fd-list li{color:var(--text)!important;font-size:.95rem!important}
html body #finder .fd-list li small{color:var(--muted)!important;font-size:.72rem!important}
html body #finder .fd-list li[aria-selected=true]{background:transparent!important;color:var(--accent-2)!important}
@media (hover:hover){html body #finder .fd-list li:hover{background:transparent!important;color:var(--accent-2)!important}}
html body #finder .fd-none{color:var(--muted)!important}
html body .toast{font:600 .92rem/1.35 -apple-system,system-ui,"Segoe UI",sans-serif!important;letter-spacing:0!important;text-shadow:none!important;color:var(--text)!important;padding:11px 18px!important;border:0!important;border-radius:999px!important;background:color-mix(in srgb,var(--card) 94%,transparent)!important;-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;box-shadow:0 12px 30px -14px rgba(0,0,0,.7),inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent)!important;width:max-content;max-width:calc(100vw - 32px)!important;text-align:center}
html body .toast::before{display:none!important}
html body .toast b{color:var(--accent-2)!important;font-weight:700!important}
html body .toast .ic{color:var(--gold,#f5c542)}
html body .hire-copy h1,html body .hub h1,html body .case-head h1,html body main > .wrap > h1,html body .doc h1{font-family:"SVA Display",system-ui,sans-serif!important;font-weight:700!important;letter-spacing:-.01em!important;line-height:1.12!important}
html body h2::before{border-radius:999px!important;width:8px!important;height:8px!important;box-shadow:0 0 0 4px var(--teal-bg)!important}
html body .hc-name{word-spacing:normal!important;text-shadow:none!important;font-family:"SVA Display",system-ui,sans-serif!important;font-size:1.15rem!important;font-weight:700!important;letter-spacing:0!important}
html body .hc-top,html body .hc-stats li{font-size:.68rem!important;letter-spacing:.08em!important}
html body .hc-stats i{height:6px!important;border-radius:999px!important;box-shadow:none!important;background:color-mix(in srgb,var(--text) 10%,transparent)!important}
html body .hc-stats i::after{background:linear-gradient(90deg,var(--accent),var(--accent-2))!important;border-radius:999px!important}
html body .hire-card [class*=dot],html body .hc-top i,html body .hc-top b::before,html body .hc-top span::before{border-radius:999px!important}
html body .avail{border:0!important;background:color-mix(in srgb,var(--text) 6%,transparent)!important;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 10%,transparent)!important}
html body .avail h2{text-transform:none!important;letter-spacing:0!important;font-size:1.1rem!important}
html body section[aria-labelledby=contact-title] .btns .btn:first-child{background:var(--accent)!important;color:var(--on-accent,#fff)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)!important}
html body .arc-cta{flex-direction:column!important;gap:8px!important;width:100%}
html body .arc-cta .arc-btn{width:100%!important;justify-content:center}
html body .arc-cta .arc-btn.ghost{display:none!important}
html body .m-tabs button,html body .pub-chips button,html body .as-tabs button,html body .pj-filter button,html body .st-filter button,html body header .tools .hud{border:0!important}
html body .name,html body .name .ch{text-shadow:none!important}
html body .p1{font-size:.68rem!important;padding:5px 10px!important;letter-spacing:.06em!important}
html body .pc-sub{font-size:.74rem!important;line-height:1.35!important}
html body .hire-card .hc-top>span,html body .hire-card .hc-stats li{font-size:.7rem!important}
html body .pj-meta{font-size:.74rem!important;letter-spacing:.02em!important}
html body .fa dt,html body dl dt{font-size:.7rem!important;letter-spacing:.08em!important}
html body main figure img,html body .case-body img,html body .doc img,html body figure img{border-radius:16px!important}
html body figcaption{border-radius:0 0 16px 16px!important}
html body figure:has(figcaption) img{border-radius:16px 16px 0 0!important}
html body .i-make,html body .typed{font-size:.84rem!important}
html body .tile-plat{font-size:.72rem!important}
html body .kicker{font-size:.74rem!important}
html body a.sr-i{border-color:color-mix(in srgb,var(--text) 10%,transparent)!important;border-radius:18px!important}
html body main h1:not(:has(.name)),html body .wrap > h1,html body article h1{font-family:"SVA Display",system-ui,sans-serif!important;font-weight:700!important;letter-spacing:-.01em!important;line-height:1.12!important}

/* ---------- wide screens: the same language, laid out for a desktop ---------- */
.d-nav{display:none}
@media (min-width:861px){
 html body header{position:sticky!important;top:14px!important;z-index:65!important;margin:14px auto 0!important;width:min(1200px,calc(100% - 48px))!important;border:0!important;border-radius:999px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--text) 9%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--bg-2) 42%,transparent)!important;-webkit-backdrop-filter:blur(30px) saturate(1.9);backdrop-filter:blur(30px) saturate(1.9);box-shadow:0 14px 36px -16px rgba(0,0,0,.55),inset 0 1px 0 color-mix(in srgb,var(--text) 14%,transparent)!important}
 html body header::before,html body header::after{display:none!important}
 html body header>.wrap{max-width:none!important;width:100%!important;margin:0!important;padding:0 10px 0 22px!important}
 html body header .wrap>nav,html body header .wrap.bar{display:flex!important;align-items:center!important;gap:14px!important;flex-wrap:nowrap!important;min-height:60px!important;height:60px;margin:0!important;padding:0!important;max-width:none!important}
 html body header .crumb,html body header .home-chip,html body header nav ul,html body header .chips{display:none!important}
 html body #dock{display:none!important}
 html body header .tools{margin-left:0!important;gap:8px!important;flex:none}
 html body header .logo,html body header .brand{font-size:1.05rem!important;flex:none}
 .d-nav{display:flex;align-items:center;gap:2px;margin:0 auto;min-width:0}
 .d-nav a{padding:8px 13px;border-radius:999px;color:var(--muted);font:600 .9rem/1 -apple-system,system-ui,"Segoe UI",sans-serif;letter-spacing:0;text-decoration:none;white-space:nowrap;transition:color .2s var(--sva-ease),transform .24s var(--sva-ease)}
 .d-nav a:hover{color:var(--text)}
 .d-nav a:active{transform:scale(.96)}
 .d-nav a.cur{color:var(--accent-2);font-weight:700}
 html body header .tools .icon-btn,html body header .tools .lang-btn{width:38px!important;height:38px!important;min-width:38px;padding:0!important;display:inline-grid!important;place-items:center;border:0!important;border-radius:999px!important;background:color-mix(in srgb,var(--text) 8%,transparent)!important;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent)!important;color:var(--text)!important}
 html body header .tools .icon-btn:hover,html body header .tools .lang-btn:hover{background:color-mix(in srgb,var(--text) 16%,transparent)!important;transform:none!important}
 html body header .tools .hud{height:38px!important;border:0!important;border-radius:999px!important;background:color-mix(in srgb,var(--text) 8%,transparent)!important;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent)!important;padding:0 14px!important}
 html body h1 .name{font-size:clamp(2.4rem,4.2vw,3.5rem)!important;line-height:1.08!important}
 html body .lang-menu{border:0!important;border-radius:18px!important;background:color-mix(in srgb,var(--bg-2) 80%,transparent)!important;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 14px 36px -12px rgba(0,0,0,.55),inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent)!important;padding:6px!important}
 html body .lang-menu button{border-radius:12px!important;background:transparent!important;color:var(--muted)!important}
 html body .lang-menu button[aria-current=true],html body .lang-menu button[aria-checked=true],html body .lang-menu button.on{color:var(--accent-2)!important}
}

/* the player card and hire card share the phone's calm look on every screen */
html body .pc-name,html body .hc-name{word-spacing:normal!important;text-shadow:none!important;font-family:"SVA Display",system-ui,sans-serif!important;font-weight:700!important;letter-spacing:0!important}
html body .pc-top,html body .pc-stats li,html body .pc-guild{font-size:.7rem!important;letter-spacing:.06em!important;line-height:1.3!important}
html body .pc-top>span{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-weight:700}
html body .pc-lv{background:color-mix(in srgb,var(--gold,#f5c542) 16%,transparent)}
html body .pc-cls{background:color-mix(in srgb,var(--accent-2) 16%,transparent);color:var(--accent-2)}
html body .pc-stats i,html body .hc-stats i{height:6px!important;border-radius:999px!important;box-shadow:none!important;background:color-mix(in srgb,var(--text) 10%,transparent)!important}
html body .pc-stats i::after,html body .hc-stats i::after{background:linear-gradient(90deg,var(--accent),var(--accent-2))!important;border-radius:999px!important}
html body .player-card{border:0!important;background:linear-gradient(180deg,color-mix(in srgb,var(--text) 7%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--card) 70%,transparent)!important;box-shadow:0 18px 40px -22px rgba(0,0,0,.7),inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent)!important;border-radius:24px!important}
html body .pc-sub{font-size:.8rem!important}
@media (min-width:861px){
 html body .pub-chips,html body .lead-more,html body .more-links,html body .m-grid-more{display:none!important}
 html body .contact .lead-rest{display:inline!important}
 html body .m-mailcta,html body .m-cta-mail{display:inline-flex!important;align-items:center;justify-content:center;gap:10px;margin:18px 0 0;padding:13px 26px;border-radius:999px;background:var(--accent)!important;color:var(--on-accent,#fff)!important;font-weight:650;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
 html body .m-mailcta svg,html body .m-cta-mail svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 html body .contact .icon-row a.icon-link.big[href^="mailto:"],html body .icon-row.m-grid a.icon-link.big[href^="mailto:"]{display:none!important}
 html body .contact .icon-row,html body .icon-row.m-grid{display:flex!important;flex-wrap:wrap;gap:6px!important;margin-top:16px!important}
 html body .contact .icon-row .icon-link.big,html body .icon-row.m-grid .icon-link.big{display:flex!important;flex-direction:column;align-items:center;gap:6px;width:84px!important;height:auto!important;padding:10px 4px!important;border-radius:16px!important;background:transparent!important;box-shadow:none!important}
 html body .contact .icon-row .icon-link.big:hover,html body .icon-row.m-grid .icon-link.big:hover{background:color-mix(in srgb,var(--text) 8%,transparent)!important;transform:none!important}
 html body .contact .icon-row .icon-link.big.sec-l,html body .icon-row.m-grid .icon-link.big.sec-l{display:flex!important}
 html body .contact .icon-row .icon-link.big::before,html body .contact .icon-row .icon-link.big::after{display:none!important}
 html body .icon-row .lb{display:block!important;max-width:100%;text-align:center;font-size:.7rem;font-weight:600;line-height:1.2;color:var(--muted)}
}
@media (min-width:861px){
 html body .contact .wrap{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(300px,380px)!important;column-gap:56px!important;row-gap:0!important;align-items:start!important}
 html body .contact .wrap>h2{grid-column:1;grid-row:1}
 html body .contact .wrap>.lead{grid-column:1;grid-row:2;margin-top:8px!important}
 html body .contact .wrap>.m-mailcta{grid-column:1;grid-row:3;justify-self:start}
 html body .contact .wrap>.icon-row{grid-column:1!important;grid-row:4!important;justify-content:flex-start!important;max-width:none!important}
 html body .contact .wrap>.arc-screen{grid-column:2;grid-row:1 / span 4;align-self:center}
 html body .contact .icon-row .icon-link.big{width:74px!important}
}
@media (min-width:861px){
 html body header .wrap.bar>nav:not(.d-nav){display:none!important}
 html body .d-nav a{text-transform:none!important;letter-spacing:0!important}
}
@media (min-width:861px){ html body header .d-nav{margin:0 auto!important} }
@media (min-width:861px){ html body header .wrap > nav.d-nav{margin:0 auto!important;padding:0!important;height:auto!important;min-height:0!important} }
html body .pc-top>span{font-size:.7rem!important}
html body .pc-name{font-size:1.1rem!important}
html body .dig{border-radius:14px!important}
html body .dig .cap{font-size:.7rem!important;line-height:1.3!important}
html body .sf-bubble{font:600 .8rem/1.2 -apple-system,system-ui,"Segoe UI",sans-serif!important;letter-spacing:0!important;color:var(--text)!important;border:0!important;border-radius:999px!important;padding:6px 12px!important;background:color-mix(in srgb,var(--card) 92%,transparent)!important;box-shadow:0 8px 20px -14px rgba(0,0,0,.6),inset 0 1px 0 color-mix(in srgb,var(--text) 14%,transparent)!important;text-shadow:none!important}
html body .sf-bubble::before,html body .sf-bubble::after{display:none!important}
@media (min-width:861px){ html body header .tools .theme-btn[aria-pressed=true]{color:var(--accent-2)!important} }
@media (min-width:861px){ html body header nav.d-nav{min-height:0!important;height:auto!important;justify-content:center} }

/* ===== desktop pass 2 ===== */
/* Work cards: same length everywhere, the rest behind Read more */
html body #work .card{display:flex;flex-direction:column}
html body #work .card h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
html body #work .card p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
html body #work .card.open p{-webkit-line-clamp:unset;line-clamp:unset;display:block;overflow:visible}
html body #work .card .tags li:nth-child(n+4){display:none}
html body #work .card.open .tags li:nth-child(n+4){display:inline-flex}
html body #work .card .links{margin-top:auto}
html body #work .card.has-more .card-more{display:inline-flex!important;align-self:flex-start;margin:-2px 0 12px}

/* robot menu: search and the guide only (settings live in the header) */
html body #finder #fd-a11y,html body #finder #fd-theme{display:none!important}

/* journey panel: no scanlines, site colours, nothing under the close button */
html body #panel,html body #secret{--g1:var(--text);--g2:var(--accent-2);--g3:color-mix(in srgb,var(--text) 22%,transparent)}
html body #panel .dlg::after,html body #secret .dlg::after,html body #panel .dlg::before,html body #secret .dlg::before{display:none!important}
html body #panel .x,html body #secret .x{top:16px!important;right:16px!important;z-index:3}
@media (min-width:861px){ html body #panel .dlg,html body #secret .dlg{padding-top:60px!important} }

/* language menu: a real glass panel under its button */
html body .lang-wrap{position:relative}
html body .lang-menu{left:auto!important;right:0!important;top:calc(100% + 10px)!important;min-width:160px;border:0!important;border-radius:18px!important;padding:6px!important;background:color-mix(in srgb,var(--card) 94%,transparent)!important;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 18px 40px -14px rgba(0,0,0,.6),inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent)!important}
html body .lang-menu button{display:block;width:100%;text-align:left;padding:9px 14px!important;border:0!important;border-radius:12px!important;background:transparent!important;color:var(--muted)!important;font:600 .9rem/1.2 -apple-system,system-ui,"Segoe UI",sans-serif!important;letter-spacing:0!important}
html body .lang-menu button:hover{color:var(--text)!important;background:color-mix(in srgb,var(--text) 7%,transparent)!important}
html body .lang-menu button[aria-checked=true]{color:var(--accent-2)!important}

/* games: no gap between the filter and the list, whatever the filter */
@media (min-width:861px){
 html body #games .wrap{grid-template-rows:auto auto 1fr!important;align-items:start!important;row-gap:12px!important}
 html body #games .as-list{align-self:start}
}

/* long lists: two columns end together */
@media (min-width:861px){
 html body #recognition .two,html body #experience .two{align-items:start!important}
}

/* more glass on content surfaces (wide screens) */
@media (min-width:861px){
 html body .card,html body .pj-card,html body .st-card,html body .role-grid .role,html body .avail,html body .hire-card,html body a.sr-i,html body .facts li,html body .as-hero{background:linear-gradient(180deg,color-mix(in srgb,var(--text) 7%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--card) 34%,transparent)!important;-webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4);border-color:transparent!important;box-shadow:0 18px 40px -26px rgba(0,0,0,.7),inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent)!important}
}

/* hire, wide screens: short sections sit side by side as boxes */
@media (min-width:861px){
 html body .hub:has(.hire-card){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;align-items:stretch}
 html body .hub:has(.hire-card)>*{grid-column:1 / -1}
 html body .hub:has(.hire-card)>section:is([aria-labelledby=skills-title],[aria-labelledby=rec-title],[aria-labelledby=deg-title],[aria-labelledby=lang-title]){grid-column:auto;margin-top:20px!important;padding:22px 24px!important;border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--text) 7%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--card) 34%,transparent);box-shadow:0 18px 40px -26px rgba(0,0,0,.7),inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent)}
 html body .hub:has(.hire-card)>section:is([aria-labelledby=skills-title],[aria-labelledby=rec-title],[aria-labelledby=deg-title],[aria-labelledby=lang-title]) h2{margin-top:0!important}
}
/* hire, every screen: one contact block like the home page */
html body:has(.hire-card) section[aria-labelledby=contact-title],html body:has(.hire-card) .contact-band div:has(> .icon-row) > .lead{display:none!important}

/* sub page contact band, wide screens: text and links left, end screen right */
@media (min-width:861px){
 html body .contact-band .wrap{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(300px,380px);column-gap:56px;align-items:center}
 html body .contact-band .wrap>.arc-screen{grid-column:2}
 html body .contact-band .m-cta-mail{margin-top:14px}
}
/* header: as wide as the text column; overflow places go into More */
.d-more{display:none}
@media (min-width:861px){
 html body header{width:min(var(--sva-hdr-w,1200px),calc(100% - 48px))!important}
 html body header .wrap > nav.d-nav{flex:1 1 auto!important;min-width:0!important;overflow:visible}
 .d-nav{justify-content:center}
 .d-more{display:flex;position:relative}
 .d-more[hidden]{display:none}
 .d-more-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:600 .9rem/1 -apple-system,system-ui,"Segoe UI",sans-serif;cursor:pointer;transition:color .2s var(--sva-ease)}
 .d-more-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--sva-ease)}
 .d-more-btn:hover{color:var(--text)}
 .d-more-btn.cur,.d-more.on .d-more-btn{color:var(--accent-2)}
 .d-more.on .d-more-btn svg{transform:rotate(180deg)}
 .d-more-panel{display:none;position:absolute;top:calc(100% + 14px);right:0;min-width:200px;flex-direction:column;padding:6px;border-radius:18px;background:color-mix(in srgb,var(--card) 94%,transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 18px 40px -14px rgba(0,0,0,.6),inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent);z-index:80}
 .d-more.on .d-more-panel{display:flex;animation:sva-in .26s var(--sva-ease) both}
 .d-more-panel a{display:block;padding:9px 14px;border-radius:12px}
 .d-more-panel a:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}
}
@media (min-width:861px){ html body .icon-row.m-grid .icon-link.big{width:70px!important} html body .icon-row.m-grid{gap:4px!important} }
@media (min-width:861px){
 html body :is(#publications,#recognition,#experience) .row{grid-template-columns:96px minmax(0,1fr) 76px!important}
 html body :is(#publications,#recognition,#experience) .row .links{justify-self:end;justify-content:flex-end;width:76px}
}
/* sub pages: the header looks exactly like the home page's */
@media (min-width:861px){
 html body header .wrap > nav.d-nav{gap:2px!important}
 html body header .logo,html body header .brand{line-height:1!important;gap:10px!important;align-items:center!important}
 html body .trail{border:0!important;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 html body .trail .trail-back{display:none!important}
}
/* the typing caret after "I make …" is gone */
html body .role .caret{display:none!important}
/* wide screens: one row of three Work cards, the rest behind Show more */
@media (min-width:861px){
 html body #work .grid,html body #work .earlier-inner>.grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
/* games: the featured panel spans exactly the filter and the list */
@media (min-width:861px){
 html body #games .as-hero{align-self:stretch!important;height:auto!important;margin:0!important}
 html body #games .wrap{align-items:stretch!important}
 html body #games .as-tabs,html body #games .as-list{align-self:start!important}
}
/* Your journey: the phone's single-column glass panel on every screen */
html body #panel{background:linear-gradient(180deg,color-mix(in srgb,var(--text) 10%,transparent),color-mix(in srgb,var(--text) 3%,transparent)),color-mix(in srgb,var(--bg-2) 62%,transparent)!important;-webkit-backdrop-filter:blur(34px) saturate(1.9)!important;backdrop-filter:blur(34px) saturate(1.9)!important}
html body #panel::backdrop{background:rgba(5,6,10,.42)!important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* overlays share the journey panel's glass */
html body .welcome,html body dialog:not(#panel){background:linear-gradient(180deg,color-mix(in srgb,var(--text) 10%,transparent),color-mix(in srgb,var(--text) 3%,transparent)),color-mix(in srgb,var(--bg-2) 66%,transparent)!important;-webkit-backdrop-filter:blur(34px) saturate(1.9)!important;backdrop-filter:blur(34px) saturate(1.9)!important}
/* robot speech: a clear pill, readable on any background */
html body .bot-say{background:linear-gradient(180deg,color-mix(in srgb,var(--text) 10%,transparent),color-mix(in srgb,var(--text) 4%,transparent)),color-mix(in srgb,var(--card) 94%,transparent)!important;color:var(--text)!important;padding:9px 16px!important;font-size:.86rem!important;box-shadow:0 12px 28px -14px rgba(0,0,0,.7),inset 0 1px 0 color-mix(in srgb,var(--text) 16%,transparent)!important}
@media (min-width:861px){ html body #games .as-tabs{margin-top:0!important;margin-bottom:0!important} }

/* ===== desktop pass 4 ===== */
/* every box: the same glass (Work cards too) */
@media (min-width:861px){
 html body #work .card,html body .hub .pj-card{background:linear-gradient(180deg,color-mix(in srgb,var(--text) 7%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--card) 34%,transparent)!important;-webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4);border-color:transparent!important;box-shadow:0 18px 40px -26px rgba(0,0,0,.7),inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent)!important}
}
/* every box: one gentle hover under the mouse */
@media (hover:hover) and (min-width:861px){
 html body :is(#work .card,.card,.pj-card,.st-card,.role-grid .role,.hire-card,a.sr-i,.facts li,.player-card,.avail,.as-hero){transition:transform .35s var(--sva-ease),box-shadow .35s var(--sva-ease),background-color .35s var(--sva-ease)!important}
 html body :is(#work .card,.card,.pj-card,.st-card,.role-grid .role,.hire-card,a.sr-i,.facts li,.player-card,.as-hero):hover{transform:translateY(-3px)!important;box-shadow:0 26px 48px -26px rgba(0,0,0,.8),inset 0 1px 0 color-mix(in srgb,var(--text) 20%,transparent)!important}
 html body :is(#publications,#recognition,#experience) .row:hover,html body #games .as-row:hover{background:color-mix(in srgb,var(--text) 5%,transparent)!important;transform:none!important}
}
/* featured game: its bottom bar is the same size as a row on the right */
@media (min-width:861px){
 html body #games .as-hero-bar b{font-size:.95rem!important;font-weight:600!important}
 html body #games .as-hero-bar small{font-size:.8rem!important}
 html body #games .as-hero-bar .as-get{padding:7px 14px!important;font-size:.82rem!important;min-width:78px;justify-content:center}
}
/* header: identical on every page */
@media (min-width:861px){
 html body header .tools .hud .xpb{display:none!important}
 html body header .logo-t,html body header .brand>span{color:var(--accent)!important}
 html body header .logo-t span,html body header .brand i{color:var(--accent-2)!important}
 html body .d-nav a,html body .d-more-btn{padding:8px 10px!important}
}
/* journey panel: rewards are small pills; the glass is a little more solid so text stays readable */
html body #panel .reward{display:inline-flex!important;align-items:center;gap:3px;margin-left:8px!important;padding:2px 9px!important;border-radius:999px!important;font-size:12px!important;line-height:1.4!important;border:0!important;background:color-mix(in srgb,var(--gold,#f5c542) 16%,transparent)!important;color:var(--gold,#f5c542)!important;box-shadow:none!important}
html body #panel .reward svg{width:12px;height:12px}
@media (min-width:861px){ html body #panel{background:linear-gradient(180deg,color-mix(in srgb,var(--text) 10%,transparent),color-mix(in srgb,var(--text) 3%,transparent)),color-mix(in srgb,var(--bg-2) 80%,transparent)!important} }
/* hero player card, wide screens: no outer ring, compact, as tall as the text beside it */
@media (min-width:861px){
 html body .player-card::before{display:none!important}
 html body .hero-grid{align-items:stretch!important}
 html body .player-card{align-self:stretch!important;display:grid!important;grid-template-columns:92px minmax(0,1fr);grid-template-areas:"top top" "av name" "av sub" "stats stats" "stick stick";grid-template-rows:auto auto 1fr auto auto;column-gap:14px;row-gap:2px;align-content:space-between;padding:16px 16px 14px!important;max-width:340px!important;width:100%;margin:0!important;transform:none!important}
 html body .player-card .pc-top{grid-area:top;margin-bottom:8px}
 html body .player-card .pc-avatar{grid-area:av;width:92px!important;height:92px!important;margin:0!important;align-self:center;display:grid;place-items:center;overflow:visible}
 html body .player-card .sf-wrap{width:92px!important;height:92px!important}
 html body .player-card .sf-wrap img{max-width:92px!important;max-height:92px!important}
 html body .player-card .pc-name{grid-area:name;text-align:left!important;align-self:end;margin:0!important}
 html body .player-card .pc-sub{grid-area:sub;text-align:left!important;align-self:start;margin:2px 0 0!important;font-size:.76rem!important;line-height:1.35!important}
 html body .player-card .pc-guild{display:none!important}
 html body .player-card .pc-stats{grid-area:stats;display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:14px!important;row-gap:7px!important;margin:12px 0 12px!important}
 html body .player-card .pc-stats li{grid-template-columns:auto 1fr!important;gap:8px!important}
 html body .player-card .open-sticker{grid-area:stick;position:static!important;transform:none!important;rotate:none!important;margin:0!important;width:auto!important;display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px!important;border-radius:14px!important;box-shadow:none!important;animation:none!important}
 html body .player-card .open-sticker .os-top,html body .player-card .open-sticker .os-sub{font-size:.82rem!important;margin:0!important}
}
@media (min-width:861px){
 html body .hero-grid{grid-template-columns:minmax(0,1fr) 320px!important}
 html body .player-card .open-sticker .os-top,html body .player-card .open-sticker .os-sub{white-space:nowrap}
}
/* one page column everywhere: the old side menu's 96px left gutter is gone, sub pages use the home page's widths */
@media (min-width:861px){
 html body .wrap,html.js body .wrap{padding-left:24px!important;padding-right:24px!important}
 html body header>.wrap{padding:0 10px 0 22px!important}
}
@media (min-width:1500px){ html body .wrap{max-width:1400px} }
@media (min-width:1900px){ html body .wrap{max-width:1560px} }
@media (min-width:861px){
 html body header>.wrap,html body header>.wrap.bar{padding:0 12px 0 22px!important}
 html body header>.wrap>nav:not(.d-nav){width:100%!important;margin:0!important;padding:0!important}
}
@media (min-width:861px){
 html body header>.wrap,html.js body header>.wrap,html body header>.wrap.bar,html.js body header>.wrap.bar{padding:0 12px 0 22px!important}
 /* one header width on every page: the page column, not the text of the page */
 html body header{width:min(1132px,calc(100% - 48px))!important}
}
@media (min-width:1500px){ html body header{width:min(1352px,calc(100% - 48px))!important} }
@media (min-width:1900px){ html body header{width:min(1512px,calc(100% - 48px))!important} }
@media (min-width:861px){ html body header .logo,html body header .brand{width:170px!important;justify-content:flex-start} }
@media (min-width:861px){ html body header .tools{width:296px!important;justify-content:flex-end!important;flex:none!important} }
/* hover you can actually see: lift, a teal edge and a little more light */
@media (hover:hover) and (min-width:861px){
 html body :is(#work .card,.card,.pj-card,.st-card,.role-grid .role,.hire-card,a.sr-i,.facts li,.player-card,.as-hero):hover{transform:translateY(-6px)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--text) 11%,transparent),color-mix(in srgb,var(--text) 4%,transparent)),color-mix(in srgb,var(--card) 44%,transparent)!important;box-shadow:0 30px 56px -28px rgba(0,0,0,.85),inset 0 0 0 1px color-mix(in srgb,var(--accent-2) 45%,transparent),inset 0 1px 0 color-mix(in srgb,var(--text) 22%,transparent)!important}
 html body :is(#publications,#recognition,#experience) .row:hover,html body #games .as-row:hover{background:color-mix(in srgb,var(--accent-2) 8%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-2) 30%,transparent)!important}
}
/* level and class badges use the brand font */
html body .pc-top>span,html body .hc-top>span,html body .pc-lv,html body .pc-cls,html body .hc-lv,html body .hc-on{font-family:"SVA Display",system-ui,sans-serif!important;font-weight:700!important;letter-spacing:.04em!important}
/* small purple tags get the same hover language: a little lift, a teal edge, more light */
@media (hover:hover) and (min-width:861px){
 html body .tags li,html body .skills .tags li,html body .pj-tags li,html body .chips li{transition:transform .3s var(--sva-ease),box-shadow .3s var(--sva-ease),background-color .3s var(--sva-ease),color .3s var(--sva-ease)!important}
 html body .tags li:hover,html body .skills .tags li:hover,html body .pj-tags li:hover,html body .chips li:hover{transform:translateY(-2px)!important;background:color-mix(in srgb,var(--accent) 24%,transparent)!important;color:var(--text)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-2) 50%,transparent),0 8px 18px -12px rgba(0,0,0,.8)!important}
}
/* hero robot talks to the left, outside the card, so it never covers the card's text */
@media (min-width:861px){
 html body .player-card .sf-bubble{left:auto!important;right:calc(100% + 30px)!important;top:50%!important;transform:translateY(-50%) scale(.85)!important;transform-origin:100% 50%!important;max-width:260px!important;width:max-content;white-space:normal!important;text-align:center!important;z-index:5}
 html body .player-card .sf-bubble.show{transform:translateY(-50%) scale(1)!important}
}
/* filter rails hug their words and are clear glass (wide screens) */
@media (min-width:861px){
 html body :is(.as-tabs,.pj-filter,.st-filter){width:max-content!important;max-width:100%;justify-self:start!important;align-self:start!important;display:flex!important;background:linear-gradient(180deg,color-mix(in srgb,var(--text) 10%,transparent),color-mix(in srgb,var(--text) 3%,transparent)),color-mix(in srgb,var(--bg-2) 30%,transparent)!important;-webkit-backdrop-filter:blur(14px) saturate(1.6)!important;backdrop-filter:blur(14px) saturate(1.6)!important}
}
/* primary buttons are glass too: an accent-tinted pane instead of a solid fill (every screen) */
html body :is(.btn.primary,.wl-btn.primary,.arc-btn:not(.ghost),.m-mailcta,.m-cta-mail,.hc-cta,.as-get-lg,.st-get-lg,.avail-actions .btn.primary,section[aria-labelledby=contact-title] .btns .btn:first-child){background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 58%,transparent),color-mix(in srgb,var(--accent) 34%,transparent))!important;color:var(--text)!important;-webkit-backdrop-filter:blur(14px) saturate(1.6)!important;backdrop-filter:blur(14px) saturate(1.6)!important;border:0!important;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 30%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),0 10px 24px -14px color-mix(in srgb,var(--accent) 70%,transparent)!important}
@media (hover:hover){ html body :is(.btn.primary,.wl-btn.primary,.arc-btn:not(.ghost),.m-mailcta,.m-cta-mail,.hc-cta,.as-get-lg,.st-get-lg):hover{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 70%,transparent),color-mix(in srgb,var(--accent) 44%,transparent))!important;filter:none!important} }
/* rows that light up under the mouse have round corners */
html body #games .as-row,html body .as-row,html body :is(#publications,#recognition,#experience) .row,html body .cat-item{border-radius:16px!important}
html body #games .as-row{padding-left:8px!important;padding-right:8px!important}
/* purple tags are glass too (every screen) */
html body .tags li{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 26%,transparent),color-mix(in srgb,var(--accent) 12%,transparent))!important;-webkit-backdrop-filter:blur(8px) saturate(1.5);backdrop-filter:blur(8px) saturate(1.5);border:0!important;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)!important}
/* under the mouse, the words change colour so you know you are on it */
@media (hover:hover){
 html body .tags li:hover{color:var(--accent-2)!important}
 html body :is(.btn,.case-btn,.wl-btn,.arc-btn,.earlier-btn,.card-more,.lead-more,.more-links,.about-btn,.as-more,.as-get,.st-get,.st-link,.st-copy,.as-link,.trail-back,.m-mailcta,.m-cta-mail,.hc-cta,#finder .fd-q,.pj-links .btn):hover{color:var(--accent-2)!important}
 html body :is(.btn.primary,.wl-btn.primary,.arc-btn:not(.ghost),.m-mailcta,.m-cta-mail,.hc-cta,.as-get-lg,.st-get-lg):hover{color:#fff!important}
}
/* purple (primary) buttons: clearer glass, and their words turn teal under the mouse like every other button */
html body :is(.btn.primary,.wl-btn.primary,.arc-btn:not(.ghost),.m-mailcta,.m-cta-mail,.hc-cta,.as-get-lg,.st-get-lg,.avail-actions .btn.primary,section[aria-labelledby=contact-title] .btns .btn:first-child){background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 42%,transparent),color-mix(in srgb,var(--accent) 20%,transparent))!important}
@media (hover:hover){
 html body :is(.btn.primary,.wl-btn.primary,.arc-btn:not(.ghost),.m-mailcta,.m-cta-mail,.hc-cta,.as-get-lg,.st-get-lg,.avail-actions .btn.primary,section[aria-labelledby=contact-title] .btns .btn:first-child):hover{color:var(--accent-2)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 52%,transparent),color-mix(in srgb,var(--accent) 28%,transparent))!important;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 34%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--accent-2) 55%,transparent),0 10px 24px -14px color-mix(in srgb,var(--accent) 70%,transparent)!important}
}
/* games, wide screens with a two-column list: a more compact featured panel of the same height */
@media (min-width:1100px){
 html body #games .wrap>.as-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:28px!important}
 html body #games .as-hero{position:relative}
 html body #games .as-hero-links{position:absolute!important;top:14px;right:14px;z-index:4;margin:0!important}
 html body #games .as-hero-inner{gap:10px!important;padding-top:14px!important}
 html body #games .as-poster{height:96px!important;aspect-ratio:auto!important;overflow:hidden;border-radius:14px!important}
 html body #games .as-poster img{width:100%!important;height:100%!important;object-fit:cover!important}
 html body #games .as-hero-copy .as-blurb{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin:0!important}
 html body #games .as-hero-copy .as-title{margin:2px 0 4px!important}
 html body #games .as-hero-bar{padding:6px 10px!important;margin-top:8px!important}
}
/* journey panel: rewards line up on the right, secrets readable, no dashed lines */
@media (min-width:861px){ html body #panel .quests li small{display:flex!important;align-items:center;gap:10px;width:100%} html body #panel .quests li small .reward{margin-left:auto!important;flex:none} }
html body #panel .quests li{border-bottom-style:solid!important;border-bottom-color:color-mix(in srgb,var(--text) 10%,transparent)!important}
html body #panel .secrets,html body #panel .dlg-row{border-top-style:solid!important;border-top-color:color-mix(in srgb,var(--text) 10%,transparent)!important}
html body #panel .ladder{border-bottom-style:solid!important;border-bottom-color:color-mix(in srgb,var(--text) 10%,transparent)!important}
html body #panel .secrets li{color:color-mix(in srgb,var(--text) 72%,transparent)!important}
html body #panel .secrets li .k{color:var(--muted)!important}
html body #panel .secrets li.got{color:var(--text)!important}
@media (min-width:1100px){
 html body #games .as-hero{display:flex!important;flex-direction:column!important}
 html body #games .as-hero-inner{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0}
 html body #games .as-poster{flex:1 1 auto!important;height:auto!important;min-height:96px!important;max-height:260px}
 html body #games .as-hero-bar{flex:none}
}
@media (min-width:1100px){ html body #games .as-poster img{object-position:left center!important} }
/* overlays you can see through: light blur, lighter tint (welcome card, dialogs, journey panel) */
html body .welcome,html body dialog:not(#panel){background:linear-gradient(180deg,color-mix(in srgb,var(--text) 9%,transparent),color-mix(in srgb,var(--text) 3%,transparent)),color-mix(in srgb,var(--bg-2) 52%,transparent)!important;-webkit-backdrop-filter:blur(9px) saturate(1.5)!important;backdrop-filter:blur(9px) saturate(1.5)!important}
html body #panel{background:linear-gradient(180deg,color-mix(in srgb,var(--text) 9%,transparent),color-mix(in srgb,var(--text) 3%,transparent)),color-mix(in srgb,var(--bg-2) 60%,transparent)!important;-webkit-backdrop-filter:blur(10px) saturate(1.5)!important;backdrop-filter:blur(10px) saturate(1.5)!important}
html body #panel::backdrop,html body dialog::backdrop{background:rgba(5,6,10,.28)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* hover, final word: whole sections never react; boxes lift and get lighter with no edge line,
   and their title turns teal. Rows and tags work the same way: no outline, the words change colour. */
@media (hover:hover) and (min-width:861px){
 html body :is(#work .card,.card,.pj-card,.st-card,.role-grid .role,.hire-card,a.sr-i,.facts li,.player-card,.as-hero):hover{box-shadow:0 30px 56px -28px rgba(0,0,0,.85),inset 0 1px 0 color-mix(in srgb,var(--text) 22%,transparent)!important;outline:0!important}
 html body :is(#work .card,.card,.pj-card,.st-card,.role-grid .role,.hire-card,a.sr-i,.facts li,.player-card,.as-hero) :is(h3,h3 a,.pj-meta+h3 a,.st-name,.hc-name){transition:color .25s var(--sva-ease)!important}
 html body :is(#work .card,.card,.pj-card,.st-card,.role-grid .role,.hire-card,a.sr-i,.facts li,.player-card,.as-hero):hover :is(h3,h3 a,.st-name,.hc-name){color:var(--accent-2)!important}
 html body :is(#publications,#recognition,#experience) .row:hover,html body #games .as-row:hover{box-shadow:none!important;outline:0!important}
 html body :is(#publications,#recognition,#experience) .row h4,html body #games .as-row .as-name{transition:color .25s var(--sva-ease)!important}
 html body :is(#publications,#recognition,#experience) .row:hover h4,html body #games .as-row:hover .as-name{color:var(--accent-2)!important}
 html body .tags li:hover,html body .skills .tags li:hover,html body .pj-tags li:hover,html body .chips li:hover{box-shadow:0 8px 18px -12px rgba(0,0,0,.8)!important;color:var(--accent-2)!important}
 html body main section:hover,html body .hub>section:hover{outline:0!important}
}

/* journey: the close button never sits on the ending's text; the secrets tip; the case page toast */
html body #secret .dlg>h2,html body #secret .dlg>h2+p{padding-right:46px}
html body #panel .sec-tip{margin:10px 0 0;color:var(--muted);font-size:.82rem;line-height:1.4}
html body .case-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));z-index:60;transform:translate(-50%,12px);opacity:0;max-width:calc(100% - 32px);padding:11px 18px;border-radius:999px;color:var(--text);font-size:.9rem;line-height:1.3;text-align:center;
 background:linear-gradient(180deg,color-mix(in srgb,var(--text) 10%,transparent),color-mix(in srgb,var(--text) 3%,transparent)),color-mix(in srgb,var(--bg-2) 70%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
 box-shadow:0 18px 40px -18px rgba(0,0,0,.7),inset 0 1px 0 color-mix(in srgb,var(--text) 14%,transparent);transition:opacity .3s var(--sva-ease),transform .35s var(--sva-ease);pointer-events:none}
html body .case-toast.on{opacity:1;transform:translate(-50%,0)}
html body .case-toast .ic{width:14px;height:14px;vertical-align:-2px;color:#f5c76b}
@media (min-width:861px){ html body .case-toast{bottom:28px} }

/* journey: the secrets fold (closed on phones, open on wide screens) */
html body #panel .secrets>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0}
html body #panel .secrets>summary::-webkit-details-marker{display:none}
html body #panel .secrets>summary::after{content:"";flex:none;width:8px;height:8px;margin:0 8px 4px 0;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .3s var(--sva-ease),border-color .2s var(--sva-ease)}
html body #panel .secrets[open]>summary::after{transform:rotate(-135deg);margin-bottom:-4px}
html body #panel .secrets>summary h3{margin:0!important;transition:color .2s var(--sva-ease)}
@media (hover:hover){ html body #panel .secrets>summary:hover h3{color:var(--accent-2)!important} html body #panel .secrets>summary:hover::after{border-color:var(--accent-2)} }
html body #panel .secrets[open]>ul{margin-top:6px}
html body #panel .secrets>summary::before{content:none!important;display:none!important}

/* special days: the site takes the day's colours (set by assets/night.js); high contrast mode keeps its own */
html[data-season=nowruz]:not(.hc):not([data-theme=light]){--accent:#6fd39a;--accent-2:#ffd27a;--accent-hover:#6fd39a;--focus:#6fd39a;--tag-bg:rgba(111,211,154,0.13);--teal-bg:rgba(255,210,122,0.13);--glow-1:rgba(111,211,154,0.2);--glow-2:rgba(255,210,122,0.12);--spot:rgba(111,211,154,0.07);--pick-glow:rgba(255,210,122,0.5);--orb:rgba(111,211,154,0.16)}
html[data-season=nowruz][data-theme=light]:not(.hc){--accent:#1d7a45;--accent-2:#8a5a00;--accent-hover:#1d7a45;--focus:#1d7a45;--tag-bg:rgba(29,122,69,0.1);--teal-bg:rgba(138,90,0,0.11);--glow-1:rgba(29,122,69,0.12);--glow-2:rgba(138,90,0,0.08);--spot:rgba(29,122,69,0.06);--pick-glow:rgba(138,90,0,0.35);--orb:rgba(29,122,69,0.1)}
html[data-season=yalda]:not(.hc):not([data-theme=light]){--accent:#ff7a8f;--accent-2:#ffb38a;--accent-hover:#ff7a8f;--focus:#ff7a8f;--tag-bg:rgba(255,122,143,0.13);--teal-bg:rgba(255,179,138,0.13);--glow-1:rgba(255,122,143,0.2);--glow-2:rgba(255,179,138,0.12);--spot:rgba(255,122,143,0.07);--pick-glow:rgba(255,179,138,0.5);--orb:rgba(255,122,143,0.16)}
html[data-season=yalda][data-theme=light]:not(.hc){--accent:#b3203f;--accent-2:#9a3d12;--accent-hover:#b3203f;--focus:#b3203f;--tag-bg:rgba(179,32,63,0.1);--teal-bg:rgba(154,61,18,0.11);--glow-1:rgba(179,32,63,0.12);--glow-2:rgba(154,61,18,0.08);--spot:rgba(179,32,63,0.06);--pick-glow:rgba(154,61,18,0.35);--orb:rgba(179,32,63,0.1)}
html[data-season=newyear]:not(.hc):not([data-theme=light]){--accent:#f5c76b;--accent-2:#a9bdff;--accent-hover:#f5c76b;--focus:#f5c76b;--tag-bg:rgba(245,199,107,0.13);--teal-bg:rgba(169,189,255,0.13);--glow-1:rgba(245,199,107,0.2);--glow-2:rgba(169,189,255,0.12);--spot:rgba(245,199,107,0.07);--pick-glow:rgba(169,189,255,0.5);--orb:rgba(245,199,107,0.16)}
html[data-season=newyear][data-theme=light]:not(.hc){--accent:#8a5a00;--accent-2:#3451d1;--accent-hover:#8a5a00;--focus:#8a5a00;--tag-bg:rgba(138,90,0,0.1);--teal-bg:rgba(52,81,209,0.11);--glow-1:rgba(138,90,0,0.12);--glow-2:rgba(52,81,209,0.08);--spot:rgba(138,90,0,0.06);--pick-glow:rgba(52,81,209,0.35);--orb:rgba(138,90,0,0.1)}
html[data-season=valentine]:not(.hc):not([data-theme=light]){--accent:#ff8fc4;--accent-2:#ffc2dc;--accent-hover:#ff8fc4;--focus:#ff8fc4;--tag-bg:rgba(255,143,196,0.13);--teal-bg:rgba(255,194,220,0.13);--glow-1:rgba(255,143,196,0.2);--glow-2:rgba(255,194,220,0.12);--spot:rgba(255,143,196,0.07);--pick-glow:rgba(255,194,220,0.5);--orb:rgba(255,143,196,0.16)}
html[data-season=valentine][data-theme=light]:not(.hc){--accent:#b3205f;--accent-2:#9c2a5a;--accent-hover:#b3205f;--focus:#b3205f;--tag-bg:rgba(179,32,95,0.1);--teal-bg:rgba(156,42,90,0.11);--glow-1:rgba(179,32,95,0.12);--glow-2:rgba(156,42,90,0.08);--spot:rgba(179,32,95,0.06);--pick-glow:rgba(156,42,90,0.35);--orb:rgba(179,32,95,0.1)}
html[data-season=halloween]:not(.hc):not([data-theme=light]){--accent:#ffa04d;--accent-2:#c3a3ff;--accent-hover:#ffa04d;--focus:#ffa04d;--tag-bg:rgba(255,160,77,0.13);--teal-bg:rgba(195,163,255,0.13);--glow-1:rgba(255,160,77,0.2);--glow-2:rgba(195,163,255,0.12);--spot:rgba(255,160,77,0.07);--pick-glow:rgba(195,163,255,0.5);--orb:rgba(255,160,77,0.16)}
html[data-season=halloween][data-theme=light]:not(.hc){--accent:#a84a00;--accent-2:#6a3fc4;--accent-hover:#a84a00;--focus:#a84a00;--tag-bg:rgba(168,74,0,0.1);--teal-bg:rgba(106,63,196,0.11);--glow-1:rgba(168,74,0,0.12);--glow-2:rgba(106,63,196,0.08);--spot:rgba(168,74,0,0.06);--pick-glow:rgba(106,63,196,0.35);--orb:rgba(168,74,0,0.1)}
html[data-season=christmas]:not(.hc):not([data-theme=light]){--accent:#ff7a8f;--accent-2:#6fd39a;--accent-hover:#ff7a8f;--focus:#ff7a8f;--tag-bg:rgba(255,122,143,0.13);--teal-bg:rgba(111,211,154,0.13);--glow-1:rgba(255,122,143,0.2);--glow-2:rgba(111,211,154,0.12);--spot:rgba(255,122,143,0.07);--pick-glow:rgba(111,211,154,0.5);--orb:rgba(255,122,143,0.16)}
html[data-season=christmas][data-theme=light]:not(.hc){--accent:#b3203f;--accent-2:#1d7a45;--accent-hover:#b3203f;--focus:#b3203f;--tag-bg:rgba(179,32,63,0.1);--teal-bg:rgba(29,122,69,0.11);--glow-1:rgba(179,32,63,0.12);--glow-2:rgba(29,122,69,0.08);--spot:rgba(179,32,63,0.06);--pick-glow:rgba(29,122,69,0.35);--orb:rgba(179,32,63,0.1)}
html[data-season=thanksgiving]:not(.hc):not([data-theme=light]){--accent:#f0a35e;--accent-2:#f5c76b;--accent-hover:#f0a35e;--focus:#f0a35e;--tag-bg:rgba(240,163,94,0.13);--teal-bg:rgba(245,199,107,0.13);--glow-1:rgba(240,163,94,0.2);--glow-2:rgba(245,199,107,0.12);--spot:rgba(240,163,94,0.07);--pick-glow:rgba(245,199,107,0.5);--orb:rgba(240,163,94,0.16)}
html[data-season=thanksgiving][data-theme=light]:not(.hc){--accent:#9a4a0c;--accent-2:#8a5a00;--accent-hover:#9a4a0c;--focus:#9a4a0c;--tag-bg:rgba(154,74,12,0.1);--teal-bg:rgba(138,90,0,0.11);--glow-1:rgba(154,74,12,0.12);--glow-2:rgba(138,90,0,0.08);--spot:rgba(154,74,12,0.06);--pick-glow:rgba(138,90,0,0.35);--orb:rgba(154,74,12,0.1)}
html[data-season=july4]:not(.hc):not([data-theme=light]){--accent:#8fb0ff;--accent-2:#ff8a95;--accent-hover:#8fb0ff;--focus:#8fb0ff;--tag-bg:rgba(143,176,255,0.13);--teal-bg:rgba(255,138,149,0.13);--glow-1:rgba(143,176,255,0.2);--glow-2:rgba(255,138,149,0.12);--spot:rgba(143,176,255,0.07);--pick-glow:rgba(255,138,149,0.5);--orb:rgba(143,176,255,0.16)}
html[data-season=july4][data-theme=light]:not(.hc){--accent:#2c47c2;--accent-2:#b3203f;--accent-hover:#2c47c2;--focus:#2c47c2;--tag-bg:rgba(44,71,194,0.1);--teal-bg:rgba(179,32,63,0.11);--glow-1:rgba(44,71,194,0.12);--glow-2:rgba(179,32,63,0.08);--spot:rgba(44,71,194,0.06);--pick-glow:rgba(179,32,63,0.35);--orb:rgba(44,71,194,0.1)}
/* the day's mark: a small sticker on the logo's game pad */
html body header .logo,html body header .brand{position:relative}
html body .season-mark{position:absolute;left:13px;top:50%;width:17px;height:17px;margin-top:-17px;display:grid;place-items:center;border-radius:999px;pointer-events:auto;
 background:color-mix(in srgb,var(--bg-2) 70%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 10px -4px rgba(0,0,0,.6);animation:sva-mark 3.2s var(--sva-ease) infinite}
html body .season-mark svg{width:13px;height:13px;display:block}
@keyframes sva-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-8deg)}}
html.noanim body .season-mark{animation:none}
@media (prefers-reduced-motion:reduce){ html body .season-mark{animation:none} }

/* more special days: colours (contrast checked against both themes when written) */
html[data-season=birthday]:not(.hc):not([data-theme=light]){--accent:#ffd27a;--accent-2:#ff8fc4;--accent-hover:#ffd27a;--focus:#ffd27a;--tag-bg:rgba(255,210,122,0.13);--teal-bg:rgba(255,143,196,0.13);--glow-1:rgba(255,210,122,0.2);--glow-2:rgba(255,143,196,0.12);--spot:rgba(255,210,122,0.07);--pick-glow:rgba(255,143,196,0.5);--orb:rgba(255,210,122,0.16)}
html[data-season=birthday][data-theme=light]:not(.hc){--accent:#8a5a00;--accent-2:#b3205f;--accent-hover:#8a5a00;--focus:#8a5a00;--tag-bg:rgba(138,90,0,0.1);--teal-bg:rgba(179,32,95,0.11);--glow-1:rgba(138,90,0,0.12);--glow-2:rgba(179,32,95,0.08);--spot:rgba(138,90,0,0.06);--pick-glow:rgba(179,32,95,0.35);--orb:rgba(138,90,0,0.1)}
html[data-season=chaharshanbe]:not(.hc):not([data-theme=light]){--accent:#ff9a4d;--accent-2:#ffd27a;--accent-hover:#ff9a4d;--focus:#ff9a4d;--tag-bg:rgba(255,154,77,0.13);--teal-bg:rgba(255,210,122,0.13);--glow-1:rgba(255,154,77,0.2);--glow-2:rgba(255,210,122,0.12);--spot:rgba(255,154,77,0.07);--pick-glow:rgba(255,210,122,0.5);--orb:rgba(255,154,77,0.16)}
html[data-season=chaharshanbe][data-theme=light]:not(.hc){--accent:#a84a00;--accent-2:#8a5a00;--accent-hover:#a84a00;--focus:#a84a00;--tag-bg:rgba(168,74,0,0.1);--teal-bg:rgba(138,90,0,0.11);--glow-1:rgba(168,74,0,0.12);--glow-2:rgba(138,90,0,0.08);--spot:rgba(168,74,0,0.06);--pick-glow:rgba(138,90,0,0.35);--orb:rgba(168,74,0,0.1)}
html[data-season=eid]:not(.hc):not([data-theme=light]){--accent:#6fd39a;--accent-2:#ffd27a;--accent-hover:#6fd39a;--focus:#6fd39a;--tag-bg:rgba(111,211,154,0.13);--teal-bg:rgba(255,210,122,0.13);--glow-1:rgba(111,211,154,0.2);--glow-2:rgba(255,210,122,0.12);--spot:rgba(111,211,154,0.07);--pick-glow:rgba(255,210,122,0.5);--orb:rgba(111,211,154,0.16)}
html[data-season=eid][data-theme=light]:not(.hc){--accent:#1d7a45;--accent-2:#8a5a00;--accent-hover:#1d7a45;--focus:#1d7a45;--tag-bg:rgba(29,122,69,0.1);--teal-bg:rgba(138,90,0,0.11);--glow-1:rgba(29,122,69,0.12);--glow-2:rgba(138,90,0,0.08);--spot:rgba(29,122,69,0.06);--pick-glow:rgba(138,90,0,0.35);--orb:rgba(29,122,69,0.1)}
html[data-season=lunarny]:not(.hc):not([data-theme=light]){--accent:#ff7a7a;--accent-2:#ffd27a;--accent-hover:#ff7a7a;--focus:#ff7a7a;--tag-bg:rgba(255,122,122,0.13);--teal-bg:rgba(255,210,122,0.13);--glow-1:rgba(255,122,122,0.2);--glow-2:rgba(255,210,122,0.12);--spot:rgba(255,122,122,0.07);--pick-glow:rgba(255,210,122,0.5);--orb:rgba(255,122,122,0.16)}
html[data-season=lunarny][data-theme=light]:not(.hc){--accent:#b3202a;--accent-2:#8a5a00;--accent-hover:#b3202a;--focus:#b3202a;--tag-bg:rgba(179,32,42,0.1);--teal-bg:rgba(138,90,0,0.11);--glow-1:rgba(179,32,42,0.12);--glow-2:rgba(138,90,0,0.08);--spot:rgba(179,32,42,0.06);--pick-glow:rgba(138,90,0,0.35);--orb:rgba(179,32,42,0.1)}
html[data-season=hanukkah]:not(.hc):not([data-theme=light]){--accent:#8fb0ff;--accent-2:#dfe6f5;--accent-hover:#8fb0ff;--focus:#8fb0ff;--tag-bg:rgba(143,176,255,0.13);--teal-bg:rgba(223,230,245,0.13);--glow-1:rgba(143,176,255,0.2);--glow-2:rgba(223,230,245,0.12);--spot:rgba(143,176,255,0.07);--pick-glow:rgba(223,230,245,0.5);--orb:rgba(143,176,255,0.16)}
html[data-season=hanukkah][data-theme=light]:not(.hc){--accent:#2c47c2;--accent-2:#4a5468;--accent-hover:#2c47c2;--focus:#2c47c2;--tag-bg:rgba(44,71,194,0.1);--teal-bg:rgba(74,84,104,0.11);--glow-1:rgba(44,71,194,0.12);--glow-2:rgba(74,84,104,0.08);--spot:rgba(44,71,194,0.06);--pick-glow:rgba(74,84,104,0.35);--orb:rgba(44,71,194,0.1)}
html[data-season=republic]:not(.hc):not([data-theme=light]){--accent:#ff7a7a;--accent-2:#ffb0b0;--accent-hover:#ff7a7a;--focus:#ff7a7a;--tag-bg:rgba(255,122,122,0.13);--teal-bg:rgba(255,176,176,0.13);--glow-1:rgba(255,122,122,0.2);--glow-2:rgba(255,176,176,0.12);--spot:rgba(255,122,122,0.07);--pick-glow:rgba(255,176,176,0.5);--orb:rgba(255,122,122,0.16)}
html[data-season=republic][data-theme=light]:not(.hc){--accent:#b3202a;--accent-2:#9a2a2a;--accent-hover:#b3202a;--focus:#b3202a;--tag-bg:rgba(179,32,42,0.1);--teal-bg:rgba(154,42,42,0.11);--glow-1:rgba(179,32,42,0.12);--glow-2:rgba(154,42,42,0.08);--spot:rgba(179,32,42,0.06);--pick-glow:rgba(154,42,42,0.35);--orb:rgba(179,32,42,0.1)}
html[data-season=diwali]:not(.hc):not([data-theme=light]){--accent:#ffa94d;--accent-2:#ffd27a;--accent-hover:#ffa94d;--focus:#ffa94d;--tag-bg:rgba(255,169,77,0.13);--teal-bg:rgba(255,210,122,0.13);--glow-1:rgba(255,169,77,0.2);--glow-2:rgba(255,210,122,0.12);--spot:rgba(255,169,77,0.07);--pick-glow:rgba(255,210,122,0.5);--orb:rgba(255,169,77,0.16)}
html[data-season=diwali][data-theme=light]:not(.hc){--accent:#a84a00;--accent-2:#8a5a00;--accent-hover:#a84a00;--focus:#a84a00;--tag-bg:rgba(168,74,0,0.1);--teal-bg:rgba(138,90,0,0.11);--glow-1:rgba(168,74,0,0.12);--glow-2:rgba(138,90,0,0.08);--spot:rgba(168,74,0,0.06);--pick-glow:rgba(138,90,0,0.35);--orb:rgba(168,74,0,0.1)}
html[data-season=earth]:not(.hc):not([data-theme=light]){--accent:#6fd39a;--accent-2:#7cc8ff;--accent-hover:#6fd39a;--focus:#6fd39a;--tag-bg:rgba(111,211,154,0.13);--teal-bg:rgba(124,200,255,0.13);--glow-1:rgba(111,211,154,0.2);--glow-2:rgba(124,200,255,0.12);--spot:rgba(111,211,154,0.07);--pick-glow:rgba(124,200,255,0.5);--orb:rgba(111,211,154,0.16)}
html[data-season=earth][data-theme=light]:not(.hc){--accent:#1d7a45;--accent-2:#1d6fae;--accent-hover:#1d7a45;--focus:#1d7a45;--tag-bg:rgba(29,122,69,0.1);--teal-bg:rgba(29,111,174,0.11);--glow-1:rgba(29,122,69,0.12);--glow-2:rgba(29,111,174,0.08);--spot:rgba(29,122,69,0.06);--pick-glow:rgba(29,111,174,0.35);--orb:rgba(29,122,69,0.1)}
html[data-season=children]:not(.hc):not([data-theme=light]){--accent:#7cc8ff;--accent-2:#ffd84d;--accent-hover:#7cc8ff;--focus:#7cc8ff;--tag-bg:rgba(124,200,255,0.13);--teal-bg:rgba(255,216,77,0.13);--glow-1:rgba(124,200,255,0.2);--glow-2:rgba(255,216,77,0.12);--spot:rgba(124,200,255,0.07);--pick-glow:rgba(255,216,77,0.5);--orb:rgba(124,200,255,0.16)}
html[data-season=children][data-theme=light]:not(.hc){--accent:#1d6fae;--accent-2:#8a5a00;--accent-hover:#1d6fae;--focus:#1d6fae;--tag-bg:rgba(29,111,174,0.1);--teal-bg:rgba(138,90,0,0.11);--glow-1:rgba(29,111,174,0.12);--glow-2:rgba(138,90,0,0.08);--spot:rgba(29,111,174,0.06);--pick-glow:rgba(138,90,0,0.35);--orb:rgba(29,111,174,0.1)}
html[data-season=starwars]:not(.hc):not([data-theme=light]){--accent:#7cc8ff;--accent-2:#ff7a8f;--accent-hover:#7cc8ff;--focus:#7cc8ff;--tag-bg:rgba(124,200,255,0.13);--teal-bg:rgba(255,122,143,0.13);--glow-1:rgba(124,200,255,0.2);--glow-2:rgba(255,122,143,0.12);--spot:rgba(124,200,255,0.07);--pick-glow:rgba(255,122,143,0.5);--orb:rgba(124,200,255,0.16)}
html[data-season=starwars][data-theme=light]:not(.hc){--accent:#1d6fae;--accent-2:#b3203f;--accent-hover:#1d6fae;--focus:#1d6fae;--tag-bg:rgba(29,111,174,0.1);--teal-bg:rgba(179,32,63,0.11);--glow-1:rgba(29,111,174,0.12);--glow-2:rgba(179,32,63,0.08);--spot:rgba(29,111,174,0.06);--pick-glow:rgba(179,32,63,0.35);--orb:rgba(29,111,174,0.1)}
html[data-season=museum]:not(.hc):not([data-theme=light]){--accent:#f0c070;--accent-2:#f0a07a;--accent-hover:#f0c070;--focus:#f0c070;--tag-bg:rgba(240,192,112,0.13);--teal-bg:rgba(240,160,122,0.13);--glow-1:rgba(240,192,112,0.2);--glow-2:rgba(240,160,122,0.12);--spot:rgba(240,192,112,0.07);--pick-glow:rgba(240,160,122,0.5);--orb:rgba(240,192,112,0.16)}
html[data-season=museum][data-theme=light]:not(.hc){--accent:#8a5a00;--accent-2:#a3461d;--accent-hover:#8a5a00;--focus:#8a5a00;--tag-bg:rgba(138,90,0,0.1);--teal-bg:rgba(163,70,29,0.11);--glow-1:rgba(138,90,0,0.12);--glow-2:rgba(163,70,29,0.08);--spot:rgba(138,90,0,0.06);--pick-glow:rgba(163,70,29,0.35);--orb:rgba(138,90,0,0.1)}
html[data-season=access]:not(.hc):not([data-theme=light]){--accent:#7fb6ff;--accent-2:#ffd27a;--accent-hover:#7fb6ff;--focus:#7fb6ff;--tag-bg:rgba(127,182,255,0.13);--teal-bg:rgba(255,210,122,0.13);--glow-1:rgba(127,182,255,0.2);--glow-2:rgba(255,210,122,0.12);--spot:rgba(127,182,255,0.07);--pick-glow:rgba(255,210,122,0.5);--orb:rgba(127,182,255,0.16)}
html[data-season=access][data-theme=light]:not(.hc){--accent:#1d5fbf;--accent-2:#8a5a00;--accent-hover:#1d5fbf;--focus:#1d5fbf;--tag-bg:rgba(29,95,191,0.1);--teal-bg:rgba(138,90,0,0.11);--glow-1:rgba(29,95,191,0.12);--glow-2:rgba(138,90,0,0.08);--spot:rgba(29,95,191,0.06);--pick-glow:rgba(138,90,0,0.35);--orb:rgba(29,95,191,0.1)}
html[data-season=programmers]:not(.hc):not([data-theme=light]){--accent:#6ff0a0;--accent-2:#8fb0ff;--accent-hover:#6ff0a0;--focus:#6ff0a0;--tag-bg:rgba(111,240,160,0.13);--teal-bg:rgba(143,176,255,0.13);--glow-1:rgba(111,240,160,0.2);--glow-2:rgba(143,176,255,0.12);--spot:rgba(111,240,160,0.07);--pick-glow:rgba(143,176,255,0.5);--orb:rgba(111,240,160,0.16)}
html[data-season=programmers][data-theme=light]:not(.hc){--accent:#1d7a45;--accent-2:#2c47c2;--accent-hover:#1d7a45;--focus:#1d7a45;--tag-bg:rgba(29,122,69,0.1);--teal-bg:rgba(44,71,194,0.11);--glow-1:rgba(29,122,69,0.12);--glow-2:rgba(44,71,194,0.08);--spot:rgba(29,122,69,0.06);--pick-glow:rgba(44,71,194,0.35);--orb:rgba(29,122,69,0.1)}
html[data-season=videogames]:not(.hc):not([data-theme=light]){--accent:#c08bff;--accent-2:#6ff0a0;--accent-hover:#c08bff;--focus:#c08bff;--tag-bg:rgba(192,139,255,0.13);--teal-bg:rgba(111,240,160,0.13);--glow-1:rgba(192,139,255,0.2);--glow-2:rgba(111,240,160,0.12);--spot:rgba(192,139,255,0.07);--pick-glow:rgba(111,240,160,0.5);--orb:rgba(192,139,255,0.16)}
html[data-season=videogames][data-theme=light]:not(.hc){--accent:#6a3fc4;--accent-2:#1d7a45;--accent-hover:#6a3fc4;--focus:#6a3fc4;--tag-bg:rgba(106,63,196,0.1);--teal-bg:rgba(29,122,69,0.11);--glow-1:rgba(106,63,196,0.12);--glow-2:rgba(29,122,69,0.08);--spot:rgba(106,63,196,0.06);--pick-glow:rgba(29,122,69,0.35);--orb:rgba(106,63,196,0.1)}
html[data-season=architecture]:not(.hc):not([data-theme=light]){--accent:#8fc1ff;--accent-2:#9fe0ff;--accent-hover:#8fc1ff;--focus:#8fc1ff;--tag-bg:rgba(143,193,255,0.13);--teal-bg:rgba(159,224,255,0.13);--glow-1:rgba(143,193,255,0.2);--glow-2:rgba(159,224,255,0.12);--spot:rgba(143,193,255,0.07);--pick-glow:rgba(159,224,255,0.5);--orb:rgba(143,193,255,0.16)}
html[data-season=architecture][data-theme=light]:not(.hc){--accent:#1f5fb0;--accent-2:#0b6e8a;--accent-hover:#1f5fb0;--focus:#1f5fb0;--tag-bg:rgba(31,95,176,0.1);--teal-bg:rgba(11,110,138,0.11);--glow-1:rgba(31,95,176,0.12);--glow-2:rgba(11,110,138,0.08);--spot:rgba(31,95,176,0.06);--pick-glow:rgba(11,110,138,0.35);--orb:rgba(31,95,176,0.1)}

/* special days on the loading screen and the welcome card: the day's colours and its mark */
html[data-season] body .boot-orb::before{background:conic-gradient(from 0deg,transparent 0 45%,color-mix(in srgb,var(--accent-2) 30%,transparent) 60%,var(--accent-2) 92%,transparent 100%)}
html[data-season] body .boot-orb::after{border-color:color-mix(in srgb,var(--accent-2) 26%,transparent);box-shadow:0 0 28px color-mix(in srgb,var(--accent-2) 22%,transparent),inset 0 0 24px color-mix(in srgb,var(--accent-2) 15%,transparent)}
html[data-season] body .boot-face{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent-2) 50%,transparent))}
html body .season-mark.boot-mark{left:auto;right:4px;top:6px;margin:0;width:34px;height:34px;z-index:2}
html body .season-mark.boot-mark svg{width:24px;height:24px}
html[data-season] body .welcome{--g1:var(--text);--g2:var(--accent-2);--g3:color-mix(in srgb,var(--accent-2) 55%,transparent);border-color:var(--accent-2)}
html[data-season] body .welcome .wl-list b{color:var(--accent-2)!important}
html[data-season] body .welcome .wl-sub{color:var(--muted)!important}
html body .wl-season{display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 40px);margin:0 0 10px;padding:5px 12px 5px 6px;border-radius:999px;
 font-size:.82rem;font-weight:700;line-height:1.2;color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 13%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 10%,transparent)}
html body .wl-season svg{flex:none;width:20px;height:20px;padding:2px;border-radius:999px;background:color-mix(in srgb,var(--bg-2) 70%,transparent)}

/* the remaining days get their colours too (contrast checked against both themes when written) */
html[data-season=mlk]:not(.hc):not([data-theme=light]){--accent:#a9b8ff;--accent-2:#e6c27a;--accent-hover:#a9b8ff;--focus:#a9b8ff;--tag-bg:rgba(169,184,255,0.13);--teal-bg:rgba(230,194,122,0.13);--glow-1:rgba(169,184,255,0.2);--glow-2:rgba(230,194,122,0.12);--spot:rgba(169,184,255,0.07);--pick-glow:rgba(230,194,122,0.5);--orb:rgba(169,184,255,0.16)}
html[data-season=mlk][data-theme=light]:not(.hc){--accent:#3448c4;--accent-2:#7a5a10;--accent-hover:#3448c4;--focus:#3448c4;--tag-bg:rgba(52,72,196,0.1);--teal-bg:rgba(122,90,16,0.11);--glow-1:rgba(52,72,196,0.12);--glow-2:rgba(122,90,16,0.08);--spot:rgba(52,72,196,0.06);--pick-glow:rgba(122,90,16,0.35);--orb:rgba(52,72,196,0.1)}
html[data-season=memorial]:not(.hc):not([data-theme=light]){--accent:#ff7a7a;--accent-2:#c9d3e6;--accent-hover:#ff7a7a;--focus:#ff7a7a;--tag-bg:rgba(255,122,122,0.13);--teal-bg:rgba(201,211,230,0.13);--glow-1:rgba(255,122,122,0.2);--glow-2:rgba(201,211,230,0.12);--spot:rgba(255,122,122,0.07);--pick-glow:rgba(201,211,230,0.5);--orb:rgba(255,122,122,0.16)}
html[data-season=memorial][data-theme=light]:not(.hc){--accent:#a3202a;--accent-2:#4a5468;--accent-hover:#a3202a;--focus:#a3202a;--tag-bg:rgba(163,32,42,0.1);--teal-bg:rgba(74,84,104,0.11);--glow-1:rgba(163,32,42,0.12);--glow-2:rgba(74,84,104,0.08);--spot:rgba(163,32,42,0.06);--pick-glow:rgba(74,84,104,0.35);--orb:rgba(163,32,42,0.1)}
html[data-season=juneteenth]:not(.hc):not([data-theme=light]){--accent:#ff7a7a;--accent-2:#6fd39a;--accent-hover:#ff7a7a;--focus:#ff7a7a;--tag-bg:rgba(255,122,122,0.13);--teal-bg:rgba(111,211,154,0.13);--glow-1:rgba(255,122,122,0.2);--glow-2:rgba(111,211,154,0.12);--spot:rgba(255,122,122,0.07);--pick-glow:rgba(111,211,154,0.5);--orb:rgba(255,122,122,0.16)}
html[data-season=juneteenth][data-theme=light]:not(.hc){--accent:#b3202a;--accent-2:#1d7a45;--accent-hover:#b3202a;--focus:#b3202a;--tag-bg:rgba(179,32,42,0.1);--teal-bg:rgba(29,122,69,0.11);--glow-1:rgba(179,32,42,0.12);--glow-2:rgba(29,122,69,0.08);--spot:rgba(179,32,42,0.06);--pick-glow:rgba(29,122,69,0.35);--orb:rgba(179,32,42,0.1)}
html[data-season=labor]:not(.hc):not([data-theme=light]){--accent:#ffb34d;--accent-2:#8fb0ff;--accent-hover:#ffb34d;--focus:#ffb34d;--tag-bg:rgba(255,179,77,0.13);--teal-bg:rgba(143,176,255,0.13);--glow-1:rgba(255,179,77,0.2);--glow-2:rgba(143,176,255,0.12);--spot:rgba(255,179,77,0.07);--pick-glow:rgba(143,176,255,0.5);--orb:rgba(255,179,77,0.16)}
html[data-season=labor][data-theme=light]:not(.hc){--accent:#a84a00;--accent-2:#2c47c2;--accent-hover:#a84a00;--focus:#a84a00;--tag-bg:rgba(168,74,0,0.1);--teal-bg:rgba(44,71,194,0.11);--glow-1:rgba(168,74,0,0.12);--glow-2:rgba(44,71,194,0.08);--spot:rgba(168,74,0,0.06);--pick-glow:rgba(44,71,194,0.35);--orb:rgba(168,74,0,0.1)}
html[data-season=veterans]:not(.hc):not([data-theme=light]){--accent:#8fb0ff;--accent-2:#ff8a95;--accent-hover:#8fb0ff;--focus:#8fb0ff;--tag-bg:rgba(143,176,255,0.13);--teal-bg:rgba(255,138,149,0.13);--glow-1:rgba(143,176,255,0.2);--glow-2:rgba(255,138,149,0.12);--spot:rgba(143,176,255,0.07);--pick-glow:rgba(255,138,149,0.5);--orb:rgba(143,176,255,0.16)}
html[data-season=veterans][data-theme=light]:not(.hc){--accent:#2c47c2;--accent-2:#b3203f;--accent-hover:#2c47c2;--focus:#2c47c2;--tag-bg:rgba(44,71,194,0.1);--teal-bg:rgba(179,32,63,0.11);--glow-1:rgba(44,71,194,0.12);--glow-2:rgba(179,32,63,0.08);--spot:rgba(44,71,194,0.06);--pick-glow:rgba(179,32,63,0.35);--orb:rgba(44,71,194,0.1)}
html[data-season=pi]:not(.hc):not([data-theme=light]){--accent:#f0c070;--accent-2:#ffa94d;--accent-hover:#f0c070;--focus:#f0c070;--tag-bg:rgba(240,192,112,0.13);--teal-bg:rgba(255,169,77,0.13);--glow-1:rgba(240,192,112,0.2);--glow-2:rgba(255,169,77,0.12);--spot:rgba(240,192,112,0.07);--pick-glow:rgba(255,169,77,0.5);--orb:rgba(240,192,112,0.16)}
html[data-season=pi][data-theme=light]:not(.hc){--accent:#8a5a00;--accent-2:#a84a00;--accent-hover:#8a5a00;--focus:#8a5a00;--tag-bg:rgba(138,90,0,0.1);--teal-bg:rgba(168,74,0,0.11);--glow-1:rgba(138,90,0,0.12);--glow-2:rgba(168,74,0,0.08);--spot:rgba(138,90,0,0.06);--pick-glow:rgba(168,74,0,0.35);--orb:rgba(138,90,0,0.1)}

/* loading screen: a living background (drifting light, a dot field, game shapes floating up), a glass card,
   coins circling the robot, a smooth glowing bar. Every colour comes from the theme, so special days follow. */
html body #boot{background:var(--bg,#0b0d12)!important;overflow:hidden;transition:opacity .55s var(--sva-ease),visibility .55s!important}
html body #boot .boot-bg{position:absolute;inset:-25%;z-index:0;pointer-events:none}
html body #boot .boot-bg i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;will-change:transform}
html body #boot .bb-a{left:8%;top:2%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent,#7c9cff) 42%,transparent),transparent);animation:bb-a 13s var(--sva-ease) infinite alternate}
html body #boot .bb-b{right:2%;top:28%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent-2,#5eead4) 34%,transparent),transparent);animation:bb-b 16s var(--sva-ease) infinite alternate}
html body #boot .bb-c{left:30%;bottom:0;background:radial-gradient(closest-side,color-mix(in srgb,var(--gold,#f5c76b) 22%,transparent),transparent);animation:bb-c 19s var(--sva-ease) infinite alternate}
@keyframes bb-a{to{transform:translate(16vmax,9vmax) scale(1.15)}}
@keyframes bb-b{to{transform:translate(-15vmax,-8vmax) scale(.88)}}
@keyframes bb-c{to{transform:translate(9vmax,-13vmax) scale(1.2)}}
html body #boot .boot-dots{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
 background-image:radial-gradient(circle,color-mix(in srgb,var(--text,#e8eaf0) 22%,transparent) 1.2px,transparent 1.7px);background-size:26px 26px;
 -webkit-mask:radial-gradient(70% 60% at 50% 46%,#000,transparent 78%);mask:radial-gradient(70% 60% at 50% 46%,#000,transparent 78%)}
html body #boot .boot-fl{position:absolute;left:var(--x);bottom:-50px;width:var(--s);height:var(--s);color:var(--c);opacity:0;z-index:0;pointer-events:none;
 animation:bb-rise var(--d) linear var(--l) infinite;will-change:transform,opacity}
html body #boot .boot-fl svg{display:block;width:100%;height:100%}
@keyframes bb-rise{0%{transform:translate3d(0,0,0) rotate(0);opacity:0}12%,82%{opacity:var(--o)}100%{transform:translate3d(var(--dx),-118vh,0) rotate(var(--rot));opacity:0}}
html body #boot .boot-crt{z-index:1;width:min(calc(100% - 8px),380px)!important;padding:30px 26px 22px;border-radius:30px;
 background:linear-gradient(180deg,color-mix(in srgb,var(--text,#e8eaf0) 9%,transparent),color-mix(in srgb,var(--text,#e8eaf0) 3%,transparent)),color-mix(in srgb,var(--bg-2,#11141b) 52%,transparent);
 -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
 box-shadow:0 30px 80px -30px rgba(0,0,0,.75),inset 0 1px 0 color-mix(in srgb,var(--text,#e8eaf0) 14%,transparent);
 animation:bb-in .7s var(--sva-ease) both;transition:transform .5s var(--sva-ease),opacity .45s var(--sva-ease)}
@keyframes bb-in{from{opacity:0;transform:translateY(16px) scale(.96)}}
html body #boot.done .boot-crt{transform:scale(1.05);opacity:0}
html body #boot .boot-sat{position:absolute;inset:var(--in);border-radius:50%;pointer-events:none;animation:boot-orbit var(--t) linear infinite}
html body #boot .boot-sat::after{content:"";position:absolute;left:50%;top:0;width:var(--sz);height:var(--sz);margin:calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
html body #boot .boot-title{background:linear-gradient(100deg,var(--text,#e8eaf0) 30%,var(--accent-2,#5eead4) 50%,var(--text,#e8eaf0) 70%);background-size:250% 100%;
 -webkit-background-clip:text;background-clip:text;color:transparent!important;animation:bb-title 3.6s linear infinite}
@keyframes bb-title{from{background-position:100% 0}to{background-position:-150% 0}}
html body #boot .boot-bar{height:8px!important;position:relative}
html body #boot .boot-bar i{position:relative;overflow:hidden;box-shadow:0 0 16px color-mix(in srgb,var(--accent-2,#5eead4) 55%,transparent);transition:width .12s linear!important}
html body #boot .boot-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-100%);animation:bb-shine 1.3s var(--sva-ease) infinite}
@keyframes bb-shine{to{transform:translateX(100%)}}
html[data-theme=light] body #boot .boot-bg{opacity:.7}
html[data-theme=light] body #boot .boot-crt{box-shadow:0 30px 70px -34px rgba(30,40,70,.35),inset 0 1px 0 rgba(255,255,255,.8)}
html[data-theme=light] body #boot .boot-bar i::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
html.noanim body #boot .boot-bg i,html.noanim body #boot .boot-sat,html.noanim body #boot .boot-title,html.noanim body #boot .boot-bar i::after,html.noanim body #boot .boot-crt{animation:none!important}
html.noanim body #boot .boot-fl{display:none}
@media (prefers-reduced-motion:reduce){
 html body #boot .boot-bg i,html body #boot .boot-sat,html body #boot .boot-title,html body #boot .boot-bar i::after,html body #boot .boot-crt{animation:none!important}
 html body #boot .boot-fl{display:none}
}

/* Astro talks right next to itself: the hero card's bubble hugs the robot (a small round tail points at it);
   the corner robot's bubble rises above it and, while it talks, above every menu and panel */
@media (min-width:861px){
 html body .player-card .sf-bubble{right:calc(100% - 4px)!important}
 html body .player-card .sf-bubble::after{content:""!important;display:block!important;position:absolute;right:-10px;top:50%;width:8px;height:8px;margin-top:-4px;border:0!important;border-radius:50%;background:inherit;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 14%,transparent)}
}
html body .bot-say{left:2px!important;top:auto!important;bottom:calc(100% + 8px)!important;transform:translateY(6px) scale(.88)!important;transform-origin:26px 100%!important;width:max-content;max-width:min(280px,calc(100vw - 32px));white-space:normal!important}
html body .bot-say.show{transform:none!important}
html body .bot:has(.bot-say.show){z-index:75!important}

/* dig site: a small, quiet mound of dust at the end of the page; brushed away it shows a brush pot that opens in 3D */
html body footer.arcade .wrap{position:relative}
html body .dig{position:absolute!important;right:clamp(12px,6vw,72px);top:-30px;z-index:3;width:58px;height:58px;border-radius:50%!important;overflow:visible;
 background:none!important;opacity:.38;filter:saturate(.75);transition:opacity .5s var(--sva-ease),filter .5s var(--sva-ease),transform .4s var(--sva-ease)}
html body .dig:hover{opacity:.75}
html body .dig .pot{position:absolute;inset:6px;width:auto;height:auto;opacity:0;transform:translateY(6px) scale(.9);transition:opacity .6s var(--sva-ease),transform .6s var(--sva-ease);filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
html body .dig canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;cursor:grab;touch-action:none;transition:opacity .6s var(--sva-ease)}
html body .dig.done{opacity:1;filter:none;cursor:pointer}
html body .dig.done .pot{opacity:1;transform:none}
html body .dig.done canvas{opacity:0;pointer-events:none}
html body .dig.done::after{content:"";position:absolute;inset:-6px;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--gold,#f5c76b) 34%,transparent),transparent);animation:dig-glow 2.6s var(--sva-ease) infinite}
@keyframes dig-glow{50%{transform:scale(1.15);opacity:.6}}
@media (hover:hover){ html body .dig.done:hover{transform:translateY(-3px)} }
html body .dig.done:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px}
html.noanim body .dig.done::after{animation:none}
@media (prefers-reduced-motion:reduce){ html body .dig.done::after{animation:none} }

/* the find, in 3D: a glass dialog with the model on the left (top on phones) and its story beside it */
html body #relic{width:min(860px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;overflow:auto}
html body #relic .relic-dlg{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;padding:0!important}
html body #relic .x{position:absolute;top:14px!important;right:14px!important;z-index:3}
html body #relic .relic-stage{position:relative;min-height:420px;border-radius:26px 0 0 26px;
 background:radial-gradient(70% 60% at 50% 45%,color-mix(in srgb,var(--gold,#f5c76b) 16%,transparent),transparent 70%),radial-gradient(60% 50% at 50% 100%,color-mix(in srgb,var(--accent-2) 12%,transparent),transparent)}
html body #relic canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none;outline:0;opacity:0;transition:opacity .6s var(--sva-ease)}
html body #relic.on canvas{opacity:1}
html body #relic canvas:active{cursor:grabbing}
html body #relic canvas:focus-visible{box-shadow:inset 0 0 46px color-mix(in srgb,var(--accent-2) 32%,transparent);border-radius:26px 0 0 26px}
html body #relic .relic-load{position:absolute;inset:auto 0 50% 0;margin:0;text-align:center;color:var(--muted);font-size:.9rem}
html body #relic .relic-hint{position:absolute;left:0;right:0;bottom:14px;margin:0;text-align:center;color:var(--muted);font-size:.78rem;pointer-events:none}
html body #relic .relic-info{padding:34px 30px 28px;display:flex;flex-direction:column;gap:10px}
html body #relic .relic-kick{margin:0;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold,#f5c76b)}
html body #relic h2{margin:0;font-family:"SVA Display",system-ui,sans-serif;font-size:1.7rem;line-height:1.15}
html body #relic .relic-meta{margin:-4px 0 4px;color:var(--accent-2);font-weight:600;font-size:.92rem}
html body #relic .relic-info>p{margin:0;line-height:1.55}
html body #relic .relic-facts{list-style:none;margin:6px 0 2px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html body #relic .relic-facts li{display:grid;gap:2px;padding:10px 12px;border-radius:16px;background:color-mix(in srgb,var(--text) 6%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 10%,transparent)}
html body #relic .relic-facts b{font-family:"SVA Display",system-ui,sans-serif;font-size:1.02rem}
html body #relic .relic-facts span{color:var(--muted);font-size:.78rem}
html body #relic .relic-src{color:var(--muted);font-size:.78rem!important;line-height:1.45!important}
html body #relic .relic-go{align-self:flex-start;margin-top:6px}
@media (max-width:700px){
 html body #relic .relic-dlg{grid-template-columns:1fr}
 html body #relic .relic-stage{min-height:min(62vw,320px);border-radius:26px 26px 0 0}
 html body #relic canvas:focus-visible{border-radius:26px 26px 0 0}
 html body #relic .relic-info{padding:18px 20px 22px}
 html body #relic h2{font-size:1.4rem}
}
@media (min-width:861px){ html body footer.arcade .arc-credits{padding-right:90px} }
@media (max-width:860px){ html body .dig{top:auto;bottom:-20px;right:34%;width:46px;height:46px} }

/* the Publications / Recognition / Experience switch is a phone thing: on wider screens all three sections show */
@media (min-width:761px){ html body .m-tabs{display:none!important} }

/* Credits and Privacy popups: a glass sheet with the document's own typography */
html body #doc-pop{width:min(720px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 32px);padding:0;overflow:auto;overscroll-behavior:contain}
html body #doc-pop .doc-pop{padding:30px 32px 30px!important}
html body #doc-pop .x{position:sticky!important;float:right;top:0!important;right:0!important;margin:-12px -14px 0 12px;z-index:3}
html body #doc-pop .kicker{display:block;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold,#f5c76b)}
html body #doc-pop h1{margin:8px 0 10px;font-family:"SVA Display",system-ui,sans-serif;font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:1.15}
html body #doc-pop h2{margin:24px 0 8px;font-family:"SVA Display",system-ui,sans-serif;font-size:1.06rem;color:var(--accent-2)}
html body #doc-pop p,html body #doc-pop li{line-height:1.6}
html body #doc-pop ul{padding-left:20px;margin:6px 0}
html body #doc-pop li{margin:6px 0}
html body #doc-pop a{color:var(--accent-2)}
html body #doc-pop .updated,html body #doc-pop .doc-wait{color:var(--muted);font-size:.9rem}
html body #doc-pop code{background:color-mix(in srgb,var(--text) 8%,transparent);padding:1px 6px;border-radius:6px;font-size:.9em}
html body #doc-pop .pill{display:inline-block;margin:2px 4px 2px 0;padding:3px 10px;border-radius:999px;font-size:.84rem;font-weight:600}
html body #doc-pop .pill.yes{background:var(--teal-bg,rgba(94,234,212,.13));color:var(--accent-2)}
html body #doc-pop .pill.no{background:rgba(255,143,177,.14);color:#ff8fb1}
html[data-theme=light] body #doc-pop .pill.no{color:#b02a5b}
@media (max-width:600px){ html body #doc-pop .doc-pop{padding:22px 20px 24px!important} }
/* reading popups need a calmer glass: mostly solid, with the page dimmed behind */
html body #doc-pop{background:linear-gradient(180deg,color-mix(in srgb,var(--text) 6%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--bg-2) 92%,transparent)!important;-webkit-backdrop-filter:blur(26px) saturate(1.4)!important;backdrop-filter:blur(26px) saturate(1.4)!important}
html body #doc-pop::backdrop{background:rgba(5,6,10,.58)!important;-webkit-backdrop-filter:blur(3px)!important;backdrop-filter:blur(3px)!important}