/* GENERATED by gen-dark.js from the light stylesheets: dark twins of every rule that carries colours. Hand-written dark additions live in dark-extra.css. */ /* ---- style.css ---- */ html[data-theme="dark"] { --ink: rgb(233, 233, 235); --nav-idle: rgb(136, 138, 150); --nav-hover: rgb(244, 244, 245); --btn-light-text: rgb(136, 138, 150); --btn-dark-text: rgb(49, 49, 55); --card: rgb(22, 23, 29); --shadow-soft: 0 .602187px 3.01094px -.833333px rgba(0, 0, 0, 0.057), 0 2.28853px 11.4427px -1.66667px rgba(0, 0, 0, 0.057), 0 10px 50px -2.5px rgba(0, 0, 0, 0.057); --shadow-dark: 0 .602187px 3.01094px -.833333px rgba(0, 0, 0, 0.149), 0 2.28853px 11.4427px -1.66667px rgba(0, 0, 0, 0.149), 0 10px 50px -2.5px rgba(0, 0, 0, 0.149); --shadow-frame: 0 .602187px 3.01094px -1.25px rgba(0, 0, 0, 0.207), 0 2.28853px 11.4427px -2.5px rgba(0, 0, 0, 0.184), 0 10px 50px -3.75px rgba(0, 0, 0, 0.069); --shadow-inner: 0 .602187px 3.01094px -1.25px rgba(0, 0, 0, 0.081), 0 2.28853px 11.4427px -2.5px rgba(0, 0, 0, 0.069), 0 10px 50px -3.75px rgba(0, 0, 0, 0.034); } :where(html[data-theme="dark"]) body { background: rgb(17, 17, 21); color: rgb(244, 244, 245); } :where(html[data-theme="dark"]) ::selection { background: transparent; } :where(html[data-theme="dark"]) input::selection, :where(html[data-theme="dark"]) textarea::selection, :where(html[data-theme="dark"]) [contenteditable=""]::selection, :where(html[data-theme="dark"]) [contenteditable="true"]::selection { background: Highlight; color: HighlightText; } :where(html[data-theme="dark"]) a { color: inherit; } :where(html[data-theme="dark"]) button { color: inherit; border: 0; background: none; } :where(html[data-theme="dark"]) .nav__avatar, :where(html[data-theme="dark"]) .nav__pill { background: rgb(17, 17, 21); box-shadow: var(--shadow-soft); } :where(html[data-theme="dark"]) .nav__avatar.is-pressed { box-shadow: 0 .6px 3px -.83px rgba(0, 0, 0, 0.04), 0 2.3px 11px -1.67px rgba(0, 0, 0, 0.034), 0 5px 24px -2.5px rgba(0, 0, 0, 0.029); } :where(html[data-theme="dark"]) .nav__avatar-ph { background: var(--ink); color: rgb(29, 29, 32); } :where(html[data-theme="dark"]) .nav__pill .roll__in > span:first-child { color: var(--nav-idle); } :where(html[data-theme="dark"]) .nav__pill .roll__in > span:last-child { color: var(--nav-hover); } :where(html[data-theme="dark"]) .intro__name { color: var(--ink); } :where(html[data-theme="dark"]) .intro__tag { color: var(--ink); } :where(html[data-theme="dark"]) .btn--round { background: rgb(17, 17, 21); color: var(--btn-light-text); border: 0 solid rgba(255, 255, 255, 0.14); box-shadow: var(--shadow-soft); } :where(html[data-theme="dark"]) .btn--round:hover, :where(html[data-theme="dark"]) .btn--round:focus-visible { background: rgb(27, 28, 35); } :where(html[data-theme="dark"]) .btn--dark { background: rgb(206, 207, 216); color: var(--btn-dark-text); border: 1px solid rgb(255, 255, 255); box-shadow: var(--shadow-dark); } :where(html[data-theme="dark"]) .btn--dark:hover, :where(html[data-theme="dark"]) .btn--dark:focus-visible { border-color: rgb(255, 255, 255); } :where(html[data-theme="dark"]) .btn--dark .roll__in > span { color: var(--btn-dark-text); } :where(html[data-theme="dark"]) .frame { background: var(--card); box-shadow: var(--shadow-frame); } :where(html[data-theme="dark"]) .ctl { color: rgb(31, 31, 35); } :where(html[data-theme="dark"]) .tag__avatar { background: var(--ink); color: rgb(29, 29, 32); } :where(html[data-theme="dark"]) .tag__icon { color: rgb(244, 244, 245); } :where(html[data-theme="dark"]) .tag__label { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .cursor__tag--sound { background: rgb(219, 220, 227); color: rgb(31, 31, 35); } :where(html[data-theme="dark"]) .work { background: rgb(17, 17, 21); } :where(html[data-theme="dark"]) .work__title h2 { color: rgb(244, 244, 245); } :where(html[data-theme="dark"]) .item { background: rgb(17, 17, 21); } :where(html[data-theme="dark"]) .item + .item::before { background: rgba(71, 74, 90, 0.5); } :where(html[data-theme="dark"]) .item__title { color: rgb(244, 244, 245); } :where(html[data-theme="dark"]) .item__desc { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .item__hint { color: rgba(244, 244, 245, 0.35); } :where(html[data-theme="dark"]) .work__all { border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: rgb(244, 244, 245); } :where(html[data-theme="dark"]) .project__frame { background: var(--card); box-shadow: var(--shadow-frame); } :where(html[data-theme="dark"]) .project__media { background: rgb(210, 212, 220); box-shadow: var(--shadow-inner); } :where(html[data-theme="dark"]) .project__media::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.042); } :where(html[data-theme="dark"]) .cursor__tag--project { background: rgb(17, 17, 21); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: var(--shadow-soft); } :where(html[data-theme="dark"]) .tag__thumb { background: linear-gradient(145deg, rgb(32, 33, 41), rgb(63, 66, 81)); } :where(html[data-theme="dark"]) .tag__title { color: rgb(244, 244, 245); } :where(html[data-theme="dark"]) .tag__sub { color: rgb(136, 138, 150); } @media (max-width: 809.98px) { :where(html[data-theme="dark"]) .work__title-phone { color: rgb(240, 240, 241); } :where(html[data-theme="dark"]) .project { background: rgb(17, 17, 21); } :where(html[data-theme="dark"]) .project__info h3 { color: rgb(244, 244, 245); } :where(html[data-theme="dark"]) .project__info p { color: rgb(136, 138, 150); } } :where(html[data-theme="dark"]) .mf__track, :where(html[data-theme="dark"]) .mf__draw, :where(html[data-theme="dark"]) .mf__handle { fill: none; } :where(html[data-theme="dark"]) .mf__track { stroke: rgb(49, 49, 55); } :where(html[data-theme="dark"]) .mf__draw { stroke: rgb(229, 229, 232); } :where(html[data-theme="dark"]) .mf__handle { stroke: rgb(60, 61, 67); } :where(html[data-theme="dark"]) .mf__dot { background: rgb(204, 206, 215); box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.081); } :where(html[data-theme="dark"]) .mf__text .w { color: rgb(67, 68, 75); } :where(html[data-theme="dark"]) .mf__ticks i { background: rgb(51, 52, 64); } :where(html[data-theme="dark"]) .mf__ticks i.big { background: rgb(88, 91, 112); } :where(html[data-theme="dark"]) .mf__head { background: rgb(219, 220, 227); } :where(html[data-theme="dark"]) .mf__tc { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .project__media .cover { filter: blur(0); } :where(html[data-theme="dark"]) .project__media.is-live .cover { filter: blur(14px); } :where(html[data-theme="dark"]) .nav__avatar, :where(html[data-theme="dark"]) .nav__pill { background: linear-gradient(135deg, rgba(17, 17, 21, 0.55), rgba(17, 17, 21, 0.18) 55%, rgba(17, 17, 21, 0.4)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.077), inset 1.5px 2px 1px -.5px rgba(255, 255, 255, 0.133), inset -1.5px -2px 1px -.5px rgba(255, 255, 255, 0.098), inset 0 -10px 18px -10px rgba(0, 0, 0, 0.081), 0 0 0 .6px rgba(0, 0, 0, 0.057), 0 8px 28px -6px rgba(0, 0, 0, 0.161), 0 2px 6px rgba(0, 0, 0, 0.057); } :where(html[data-theme="dark"]) .nav__pill::after, :where(html[data-theme="dark"]) .nav__avatar::after { background: linear-gradient(115deg, transparent 30%, rgba(17, 17, 21, 0.75) 46%, rgba(17, 17, 21, 0.15) 54%, transparent 68%); background-size: 260% 100%; background-position: 130% 0; } :where(html[data-theme="dark"]) .nav__pill .roll__in > span:first-child { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .nav__lens { background: linear-gradient(160deg, rgba(17, 17, 21, 0.9), rgba(17, 17, 21, 0.35)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.126), inset 0 -6px 10px -6px rgba(0, 0, 0, 0.092), 0 6px 16px -6px rgba(0, 0, 0, 0.207); } :where(html[data-theme="dark"]) .nav__avatar, :where(html[data-theme="dark"]) .nav__pill { background: radial-gradient(120% 140% at 20% 0%, rgba(255, 255, 255, 0.098), rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, rgba(32, 33, 40, 0.62), rgba(22, 23, 28, 0.42) 50%, rgba(39, 41, 50, 0.58)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.112), inset 2px 2.5px 1.5px -1px rgba(255, 255, 255, 0.14), inset -2px -2.5px 2px -1px rgba(120, 130, 150, 0.315), inset 0 -14px 22px -12px rgba(60, 70, 95, 0.144), 0 0 0 1px rgba(20, 28, 45, 0.081), 0 12px 32px -8px rgba(20, 28, 45, 0.216), 0 3px 8px rgba(20, 28, 45, 0.081); } :where(html[data-theme="dark"]) .nav__pill .roll__in > span:first-child { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .nav__lens { background: linear-gradient(160deg, rgba(17, 17, 21, 0.98), rgba(17, 17, 21, 0.55)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 -7px 12px -7px rgba(60, 70, 95, 0.162), 0 0 0 1px rgba(20, 28, 45, 0.054), 0 8px 18px -6px rgba(20, 28, 45, 0.252); } :where(html[data-theme="dark"]) .nav__avatar, :where(html[data-theme="dark"]) .nav__pill { background: linear-gradient(160deg, rgba(17, 17, 21, 0.62), rgba(22, 23, 29, 0.46)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.098), inset 1px 1.5px 1px -.5px rgba(255, 255, 255, 0.133), 0 0 0 .5px rgba(20, 28, 45, 0.063), 0 6px 20px -6px rgba(20, 28, 45, 0.126), 0 1px 3px rgba(20, 28, 45, 0.045); } :where(html[data-theme="dark"]) .nav__pill .roll__in > span:first-child { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .nav__lens { background: rgba(17, 17, 21, 0.85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.133), 0 4px 12px -5px rgba(20, 28, 45, 0.18); } :where(html[data-theme="dark"]) .nav__avatar, :where(html[data-theme="dark"]) .nav__pill { background: linear-gradient(160deg, rgba(17, 17, 21, 0.84), rgba(20, 21, 26, 0.74)); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :where(html[data-theme="dark"]) .nav__avatar, :where(html[data-theme="dark"]) .nav__pill { background: rgb(17, 17, 21); } } :where(html[data-theme="dark"]) .nav__pill .roll__in > span:first-child { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .nav__pill .roll__in > span:last-child { color: rgb(244, 244, 245); } :where(html[data-theme="dark"]) .nav__lens { background: rgba(17, 17, 21, 0.95); } :where(html[data-theme="dark"]) .px-play { border: 0; color: rgb(233, 233, 235); background: linear-gradient(160deg, rgba(17, 17, 21, 0.88), rgba(17, 17, 21, 0.55)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.126), 0 8px 18px -8px rgba(0, 0, 0, 0.517); } :where(html[data-theme="dark"]) .tag__thumb.has-logo { background-color: transparent; } :where(html[data-theme="dark"]) .tag__find--logo { background: transparent; } :where(html[data-theme="dark"]) .tag__find--logo { background: rgb(219, 220, 227); } :where(html[data-theme="dark"]) .tag__thumb.has-logo { background-color: rgb(219, 220, 227); } :where(html[data-theme="dark"]) .tag__find--logo { background: rgb(30, 215, 96); } :where(html[data-theme="dark"]) .tag__thumb.has-logo { background-color: rgb(30, 215, 96); } :where(html[data-theme="dark"]) .tag__find--logo { background: rgb(219, 220, 227); } :where(html[data-theme="dark"]) .tag__thumb.has-logo { background-color: rgb(219, 220, 227); } :where(html[data-theme="dark"]) .tag__find--logo { background: rgb(219, 220, 227); } :where(html[data-theme="dark"]) .tag__thumb.has-logo { background-color: rgb(219, 220, 227); } :where(html[data-theme="dark"]) body { background: rgb(24, 25, 30); } :where(html[data-theme="dark"]) body::before { background: radial-gradient(55vw 42vh at 6% -6%, rgba(var(--acc), .16), transparent 70%), radial-gradient(48vw 40vh at 100% 38%, rgba(var(--acc), .10), transparent 70%), radial-gradient(60vw 50vh at 28% 112%, rgba(var(--acc), .12), transparent 70%), linear-gradient(180deg, rgb(21, 22, 27), rgb(26, 27, 33)); } :where(html[data-theme="dark"]) .frame, :where(html[data-theme="dark"]) .project__frame { background: linear-gradient(180deg, rgba(17, 17, 21, 0.66), rgba(17, 17, 21, 0.3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.133), inset 0 0 0 1px rgba(255, 255, 255, 0.063), inset 0 -14px 24px -20px rgba(var(--acc-deep), .16), 0 0 0 .5px rgba(var(--acc-deep), .10), 0 24px 46px -28px rgba(var(--acc-deep), .36); } :where(html[data-theme="dark"]) .btn--round { background: linear-gradient(180deg, rgba(17, 17, 21, 0.8), rgba(17, 17, 21, 0.4)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.084), 0 8px 18px -12px rgba(var(--acc-deep), .4); } :where(html[data-theme="dark"]) .btn--round:hover, :where(html[data-theme="dark"]) .btn--round:focus-visible { background: linear-gradient(180deg, rgb(17, 17, 21), rgba(17, 17, 21, 0.65)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 12px 22px -12px rgba(var(--acc-deep), .5); } :where(html[data-theme="dark"]) .btn--dark { background: linear-gradient(180deg, rgb(186, 188, 201), rgb(206, 207, 216)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.031), inset 0 0 0 1px rgba(255, 255, 255, 0.008), 0 12px 22px -12px rgba(var(--acc-deep), .65); } :where(html[data-theme="dark"]) .work__all { border-top-color: rgba(var(--acc-deep), .22); border-bottom-color: rgba(var(--acc-deep), .22); } :where(html[data-theme="dark"]) .mf__track { stroke: rgba(var(--acc-deep), .14); } :where(html[data-theme="dark"]) .mf__draw { stroke: rgb(var(--acc-deep)); } :where(html[data-theme="dark"]) .mf__dot { box-shadow: 0 0 0 6px rgba(var(--acc), .22), 0 6px 16px -4px rgba(var(--acc-deep), .5); } :where(html[data-theme="dark"]) body { background: rgb(22, 23, 28); } :where(html[data-theme="dark"]) body::before { background: radial-gradient(52vw 44vh at 4% -8%, rgba(var(--acc), .26), transparent 70%), radial-gradient(44vw 38vh at 102% 30%, rgba(var(--acc-warm), .30), transparent 70%), radial-gradient(58vw 48vh at 24% 112%, rgba(var(--acc), .20), transparent 70%), linear-gradient(180deg, rgb(19, 20, 24), rgb(24, 24, 30)); background-size: 130% 130%, 120% 120%, 130% 130%, 100% 100%; } :where(html[data-theme="dark"]) .frame, :where(html[data-theme="dark"]) .project__frame { background: linear-gradient(165deg, rgba(17, 17, 21, 0.72), rgba(24, 24, 30, 0.34) 55%, rgba(22, 23, 28, 0.4)); box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.133), inset -1.5px -1.5px 0 rgba(var(--acc-warm), .55), inset 0 0 0 1px rgba(var(--acc), .22), 0 0 0 .5px rgba(var(--acc-deep), .10), 0 28px 52px -30px rgba(var(--acc-deep), .42); } :where(html[data-theme="dark"]) .btn--round { box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.14), inset -1.5px -1.5px 0 rgba(var(--acc-warm), .6), inset 0 0 0 1px rgba(var(--acc), .25), 0 10px 20px -12px rgba(var(--acc-deep), .5); } :where(html[data-theme="dark"]) .btn--dark { background: linear-gradient(180deg, rgb(174, 176, 191), rgb(201, 202, 213)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), inset 0 0 0 1px rgba(var(--acc), .25), 0 14px 24px -12px rgba(var(--acc-deep), .7); } :where(html[data-theme="dark"]) .work__all { border-top-color: rgba(var(--acc-deep), .20); border-bottom-color: rgba(var(--acc-deep), .20); } :where(html[data-theme="dark"]) .mf__draw { stroke: rgb(var(--acc-deep)); } :where(html[data-theme="dark"]) .mf__dot { background: rgb(var(--acc-deep)); box-shadow: 0 0 0 6px rgba(var(--acc), .28), 0 6px 16px -4px rgba(var(--acc-deep), .55); } :where(html[data-theme="dark"]) body::after { background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.123), rgba(255, 255, 255, 0) 42%), radial-gradient(circle at 70% 80%, rgba(var(--acc-warm), .55), rgba(var(--acc-warm), 0) 60%), radial-gradient(circle at 50% 50%, rgba(var(--acc), .34), rgba(var(--acc), .12) 70%); box-shadow: inset 2px 3px 2px rgba(255, 255, 255, 0.126), inset -4px -6px 14px rgba(var(--acc-deep), .12), 0 30px 60px -30px rgba(var(--acc-deep), .35); } :where(html[data-theme="dark"]) .item::before { background: linear-gradient(180deg, rgba(17, 17, 21, 0.62), rgba(17, 17, 21, 0.22)); box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.14), inset -1.5px -1.5px 0 rgba(var(--acc-warm), .5), 0 0 0 .5px rgba(var(--acc-deep), .10), 0 18px 32px -22px rgba(var(--acc-deep), .4); } :where(html[data-theme="dark"]) .project__media::before { background: linear-gradient(180deg, rgba(17, 17, 21, 0.16), rgba(17, 17, 21, 0) 28%); } :where(html[data-theme="dark"]) .mf__text::before { background: linear-gradient(170deg, rgba(17, 17, 21, 0.55), rgba(17, 17, 21, 0.18)); box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.14), inset -1.5px -1.5px 0 rgba(var(--acc-warm), .5), inset 0 0 0 1px rgba(var(--acc), .18), 0 0 0 .5px rgba(var(--acc-deep), .10), 0 30px 60px -34px rgba(var(--acc-deep), .45); } :where(html[data-theme="dark"]) .mf__text .w { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.098); } :where(html[data-theme="dark"]) .mf__tc { color: rgb(var(--acc-deep)); background: linear-gradient(180deg, rgba(17, 17, 21, 0.75), rgba(17, 17, 21, 0.35)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 .5px rgba(var(--acc-deep), .12), 0 8px 16px -10px rgba(var(--acc-deep), .4); } :where(html[data-theme="dark"]) .mf__head { background: rgb(var(--acc-deep)); } :where(html[data-theme="dark"]) .work__title-wrap, :where(html[data-theme="dark"]) .work__corners { color: rgb(var(--acc-deep)); } html[data-theme="dark"] { --ink-apple: rgb(217, 218, 222); } :where(html[data-theme="dark"]) body { background: rgb(23, 24, 29); color: var(--ink-apple); } :where(html[data-theme="dark"]) body::before { background: radial-gradient(50vw 40vh at 6% -8%, rgba(var(--acc), .18), transparent 70%), radial-gradient(44vw 36vh at 102% 34%, rgba(var(--acc-warm), .55), transparent 70%), radial-gradient(56vw 46vh at 26% 112%, rgba(var(--acc), .14), transparent 70%), linear-gradient(180deg, rgb(20, 21, 26), rgb(24, 25, 31)); } :where(html[data-theme="dark"]) body::after { background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.127), rgba(255, 255, 255, 0) 44%), radial-gradient(circle at 70% 82%, rgba(var(--acc-warm), .7), rgba(var(--acc-warm), 0) 62%), radial-gradient(circle at 50% 50%, rgba(var(--acc), .22), rgba(var(--acc), .06) 72%); box-shadow: inset 2px 3px 2px rgba(255, 255, 255, 0.133), inset -4px -6px 16px rgba(var(--acc-deep), .08), 0 40px 70px -40px rgba(var(--acc-deep), .28); } :where(html[data-theme="dark"]) .frame, :where(html[data-theme="dark"]) .project__frame { background: linear-gradient(180deg, rgba(17, 17, 21, 0.82), rgba(17, 17, 21, 0.5)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.077), 0 0 0 .5px rgba(0, 0, 0, 0.069), 0 1px 2px rgba(0, 0, 0, 0.046), 0 18px 40px -16px rgba(0, 0, 0, 0.161); } :where(html[data-theme="dark"]) .item::before { background: linear-gradient(180deg, rgba(17, 17, 21, 0.85), rgba(17, 17, 21, 0.55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 .5px rgba(0, 0, 0, 0.069), 0 14px 30px -18px rgba(0, 0, 0, 0.23); } :where(html[data-theme="dark"]) .mf__text::before { background: linear-gradient(180deg, rgba(17, 17, 21, 0.78), rgba(17, 17, 21, 0.46)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 .5px rgba(0, 0, 0, 0.069), 0 24px 56px -28px rgba(0, 0, 0, 0.253); } :where(html[data-theme="dark"]) .mf__tc { color: rgb(144, 146, 157); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 .5px rgba(0, 0, 0, 0.092), 0 6px 14px -8px rgba(0, 0, 0, 0.23); } :where(html[data-theme="dark"]) .mf__draw { stroke: var(--ink-apple); } :where(html[data-theme="dark"]) .mf__track { stroke: rgba(244, 244, 245, 0.09); } :where(html[data-theme="dark"]) .mf__dot { background: var(--ink-apple); box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.069), 0 6px 14px -4px rgba(0, 0, 0, 0.402); } :where(html[data-theme="dark"]) .mf__head { background: var(--ink-apple); } :where(html[data-theme="dark"]) .btn--dark { background: linear-gradient(180deg, rgb(179, 181, 195), rgb(192, 194, 206)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 0 0 .5px rgba(0, 0, 0, 0.46), 0 10px 22px -12px rgba(0, 0, 0, 0.632); } :where(html[data-theme="dark"]) .btn--round { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 .5px rgba(0, 0, 0, 0.081), 0 8px 18px -12px rgba(0, 0, 0, 0.287); } :where(html[data-theme="dark"]) .work__all { border-top-color: rgba(255, 255, 255, 0.12); border-bottom-color: rgba(255, 255, 255, 0.12); } :where(html[data-theme="dark"]) .nav__avatar, :where(html[data-theme="dark"]) .nav__pill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.133), 0 0 0 .5px rgba(0, 0, 0, 0.081), 0 10px 26px -14px rgba(0, 0, 0, 0.287); } :where(html[data-theme="dark"]) :focus-visible { outline: 2px solid rgb(0, 113, 227); outline-offset: 3px; } :where(html[data-theme="dark"]) .work__title::before { background: linear-gradient(180deg, rgba(17, 17, 21, 0.75), rgba(17, 17, 21, 0.3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 .5px rgba(0, 0, 0, 0.081), 0 12px 26px -18px rgba(0, 0, 0, 0.287); } :where(html[data-theme="dark"]) .item__title::after { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .project__frame::after { color: rgb(217, 218, 222); background: linear-gradient(180deg, rgba(17, 17, 21, 0.85), rgba(17, 17, 21, 0.55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 .5px rgba(0, 0, 0, 0.092), 0 6px 14px -8px rgba(0, 0, 0, 0.402); } :where(html[data-theme="dark"]) .intro__tag { background: linear-gradient(100deg, rgb(192, 194, 206) 0%, rgb(166, 169, 185) 40%, rgb(95, 98, 120) 100%); color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; } :where(html[data-theme="dark"]) .btn--dark { background: linear-gradient(180deg, rgb(170, 172, 188) 0%, rgb(192, 194, 206) 55%, rgb(201, 203, 213) 100%); } :where(html[data-theme="dark"]) .btn--dark::before { background: radial-gradient(120px 70px at var(--mx) var(--my), rgba(255, 255, 255, 0.044), rgba(255, 255, 255, 0) 70%); } :where(html[data-theme="dark"]) .btn--dark::after { background: linear-gradient(105deg, transparent 40%, rgba(17, 17, 21, 0.22) 50%, transparent 60%); background-size: 260% 100%; background-position: 140% 0; } :where(html[data-theme="dark"]) .btn--dark .btn__arrow { background: rgba(17, 17, 21, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.031); } :where(html[data-theme="dark"]) .btn--dark .btn__arrow svg circle { stroke: none; } :where(html[data-theme="dark"]) .btn--dark:hover .btn__arrow, :where(html[data-theme="dark"]) .btn--dark:focus-visible .btn__arrow { background: rgb(17, 17, 21); color: rgb(217, 218, 222); box-shadow: none; } :where(html[data-theme="dark"]) .btn--round::before { background: rgb(192, 194, 206); } :where(html[data-theme="dark"]) .btn--round:hover, :where(html[data-theme="dark"]) .btn--round:focus-visible { color: rgb(29, 29, 32); } :where(html[data-theme="dark"]) .btn--round::after { box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.575); } :where(html[data-theme="dark"]) .item::before, :where(html[data-theme="dark"]) .item + .item::before { background: linear-gradient(180deg, rgba(17, 17, 21, 0.85), rgba(17, 17, 21, 0.55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 .5px rgba(0, 0, 0, 0.069), 0 12px 24px -16px rgba(0, 0, 0, 0.253); } :where(html[data-theme="dark"]) .item::before, :where(html[data-theme="dark"]) .item + .item::before { box-shadow: none; border: 0; background: linear-gradient(180deg, rgba(17, 17, 21, 0.72), rgba(17, 17, 21, 0.52)); } :where(html[data-theme="dark"]) .item::before, :where(html[data-theme="dark"]) .item + .item::before { background: linear-gradient(180deg, rgba(17, 17, 21, 0.85), rgba(17, 17, 21, 0.55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 0 rgba(0, 0, 0, 0.081), 0 14px 18px -16px rgba(0, 0, 0, 0.276); } :where(html[data-theme="dark"]) .item::before, :where(html[data-theme="dark"]) .item + .item::before { background: linear-gradient(180deg, rgba(17, 17, 21, 0.55), rgba(17, 17, 21, 0.3)); box-shadow: inset 0 -12px 18px -16px rgba(0, 0, 0, 0.115), 0 16px 24px -20px rgba(0, 0, 0, 0.322); } :where(html[data-theme="dark"]) .item::after, :where(html[data-theme="dark"]) .item + .item::after { background: linear-gradient(150deg, rgb(17, 17, 21) 0%, rgba(17, 17, 21, 0) 30%, rgba(17, 17, 21, 0) 62%, rgba(20, 28, 45, 0.14) 100%); } :where(html[data-theme="dark"]) .item::after, :where(html[data-theme="dark"]) .item + .item::after { background: linear-gradient(150deg, rgb(17, 17, 21) 0%, rgba(17, 17, 21, 0) 28%, rgba(17, 17, 21, 0) 70%, rgba(20, 28, 45, 0.07) 100%); } :where(html[data-theme="dark"]) .item::before, :where(html[data-theme="dark"]) .item + .item::before { box-shadow: inset 0 -10px 16px -14px rgba(0, 0, 0, 0.081), 0 12px 18px -16px rgba(0, 0, 0, 0.253); } :where(html[data-theme="dark"]) .tag__find--emoji { background: transparent; box-shadow: none !important; } :where(html[data-theme="dark"]) .tag__find--emoji img { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.517)); } :where(html[data-theme="dark"]) .project__media[data-fit="contain"] { background: var(--media-bg, rgb(210, 212, 220)); } :where(html[data-theme="dark"]) .bgx__canvas { filter: blur(26px) saturate(1.15); } :where(html[data-theme="dark"]) .bgx__shape { background: linear-gradient(150deg, rgba(17, 17, 21, 0.62), rgba(17, 17, 21, 0.14) 55%, rgba(var(--acc, 150,164,232), .16)); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.126), inset -2px -3px 6px rgba(var(--acc, 150,164,232), .28), 0 0 0 .5px rgba(var(--acc-deep, 52,60,104), .10), 0 40px 70px -36px rgba(var(--acc-deep, 52,60,104), .38); } @media (max-width: 809px) { :where(html[data-theme="dark"]) .bgx__canvas { filter: blur(18px); } } :where(html[data-theme="dark"]) .work { background: transparent; } :where(html[data-theme="dark"]) .item { background: transparent; } :where(html[data-theme="dark"]) .cl__title h2 { color: rgb(244, 244, 245); } :where(html[data-theme="dark"]) .cl__sub { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .cl__card { background: radial-gradient(70% 70% at 50% 45%, rgb(35, 35, 38), rgb(22, 22, 24) 80%); box-shadow: 0 0 0 .5px rgba(0, 0, 0, 0.287), 0 18px 36px -22px rgba(0, 0, 0, 0.517); } :where(html[data-theme="dark"]) .cl__mark { filter: blur(7px); } :where(html[data-theme="dark"]) .cl__mark i, :where(html[data-theme="dark"]) .cl__mark b, :where(html[data-theme="dark"]) .cl__mark u { background: rgb(40, 42, 51); } :where(html[data-theme="dark"]) .cl__view { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .cl__row { color: rgb(244, 244, 245); } :where(html[data-theme="dark"]) .cl__name { color: rgb(244, 244, 245); filter: blur(var(--b)); } :where(html[data-theme="dark"]) .cl__card { background: radial-gradient(75% 75% at 50% 45%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.13) 85%); box-shadow: 0 0 0 .5px rgba(0, 0, 0, 0.161), 0 18px 36px -24px rgba(0, 0, 0, 0.402); } :where(html[data-theme="dark"]) .cl__mark { filter: blur(5px); } :where(html[data-theme="dark"]) .cl__mark i { background: rgb(192, 194, 206); } :where(html[data-theme="dark"]) .cl__mark b { background: rgb(95, 98, 120); } :where(html[data-theme="dark"]) .cl__mark u { background: rgb(78, 81, 100); } :where(html[data-theme="dark"]) .cl__card::after { background: rgb(219, 220, 227); } :where(html[data-theme="dark"]) .cl__eye { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.402)); } :where(html[data-theme="dark"]) .cl__eye { filter: none; } :where(html[data-theme="dark"]) .cl__title::before { background: radial-gradient(220px 90px at var(--mx) var(--my), rgba(255,255,255,calc(.55 * var(--lit) + .12)), rgba(255, 255, 255, 0.008) 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.133), inset 0 -10px 18px -14px rgba(20, 28, 45, 0.162), 0 0 0 .5px rgba(20, 28, 45, 0.072), 0 22px 36px -26px rgba(20, 28, 45, 0.36); } :where(html[data-theme="dark"]) .cl__title h2 { background-image: radial-gradient(150px 70px at var(--mx) var(--my), rgba(255,255,255,calc(.95 * var(--lit))), rgba(255, 255, 255, 0) 100%), linear-gradient(110deg, rgba(17, 17, 21, 0) 35%, rgba(17, 17, 21, 0.85) 50%, rgba(17, 17, 21, 0) 65%), linear-gradient(180deg, rgb(197, 199, 210) 0%, rgb(44, 53, 80) 55%, rgb(111, 123, 163) 100%); color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.133)) drop-shadow(0 8px 14px rgba(20, 28, 45, 0.198)); background-size: 100% 100%, 260% 100%, 100% 100%; background-position: 0 0, 140% 0, 0 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; } :where(html[data-theme="dark"]) .cl__sub { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .cl__title h2 { background-image: radial-gradient(170px 80px at var(--mx) var(--my), rgba(255,255,255,calc(.95 * var(--lit))), rgba(255, 255, 255, 0) 100%), linear-gradient(110deg, rgba(17, 17, 21, 0) 35%, rgba(17, 17, 21, 0.9) 50%, rgba(17, 17, 21, 0) 65%), linear-gradient(180deg, rgba(17, 17, 21, 0.78) 0%, rgba(35, 46, 74, 0.5) 48%, rgba(96, 112, 170, 0.62) 100%); filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.133)) drop-shadow(0 -1px 0 rgba(30, 40, 80, 0.162)) drop-shadow(0 14px 18px rgba(52, 64, 112, 0.288)); background-size: 100% 100%, 260% 100%, 100% 100%; } :where(html[data-theme="dark"]) .cl__title h2 { background-image: radial-gradient(150px 60px at var(--mx) var(--my), rgba(255,255,255,calc(.85 * var(--lit))), rgba(255, 255, 255, 0) 100%), linear-gradient(110deg, rgba(17, 17, 21, 0) 40%, rgba(17, 17, 21, 0.55) 50%, rgba(17, 17, 21, 0) 60%), linear-gradient(180deg, rgb(192, 194, 206) 0%, rgb(192, 194, 206) 60%, rgb(165, 168, 184) 100%); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.126)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.161)); background-size: 100% 100%, 260% 100%, 100% 100%; } :where(html[data-theme="dark"]) .cl__title h2 { background: none; -webkit-text-fill-color: initial; color: inherit; filter: none; } :where(html[data-theme="dark"]) .cl__l { background-image: linear-gradient(rgba(var(--glow), var(--hot)), rgba(var(--glow), var(--hot))), linear-gradient(180deg, rgb(192, 194, 206) 0%, rgb(47, 52, 70) 55%, rgb(125, 134, 168) 100%); color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 calc(1px + var(--hot) * 9px) calc(2px + var(--hot) * 12px) rgba(var(--glow-deep), calc(.10 + var(--hot) * .32))); -webkit-background-clip: text; background-clip: text; } :where(html[data-theme="dark"]) .cl__card-frame { background: linear-gradient(180deg, rgba(17, 17, 21, 0.78), rgba(17, 17, 21, 0.42)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 .5px rgba(0, 0, 0, 0.081), 0 22px 40px -22px rgba(0, 0, 0, 0.322); } :where(html[data-theme="dark"]) .cl__card-frame .cl__card { box-shadow: 0 0 0 .5px rgba(0, 0, 0, 0.138); } :where(html[data-theme="dark"]) .cl__pill { background: linear-gradient(180deg, rgba(17, 17, 21, 0.72), rgba(17, 17, 21, 0.32)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -8px 14px -12px rgba(0, 0, 0, 0.161), 0 0 0 .5px rgba(0, 0, 0, 0.081), 0 18px 28px -20px rgba(0, 0, 0, 0.345); } @media (min-width: 1200px) { :where(html[data-theme="dark"]) .cl__row::before { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .cl__row:hover::before, :where(html[data-theme="dark"]) .cl__row.is-hot::before { color: rgb(217, 218, 222); } :where(html[data-theme="dark"]) .cl__list::before { background: linear-gradient(180deg, rgba(219, 220, 227, 0), rgba(219, 220, 227, 0.18) 18%, rgba(219, 220, 227, 0.18) 82%, rgba(219, 220, 227, 0)); } } :where(html[data-theme="dark"]) .cl__emo { filter: drop-shadow(0 14px 18px rgba(30, 40, 80, 0.198)); } :where(html[data-theme="dark"]) .cl__emo { filter: drop-shadow(0 8px 10px rgba(30, 40, 80, 0.126)); } :where(html[data-theme="dark"]) .al__tile { background: linear-gradient(160deg, var(--t1, rgb(24, 25, 31)), var(--t2, rgb(34, 35, 43))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.126), 0 0 0 .5px rgba(0, 0, 0, 0.092), 0 16px 26px -20px rgba(0, 0, 0, 0.322); } :where(html[data-theme="dark"]) .al__tile::before { background: linear-gradient(160deg, rgba(17, 17, 21, 0.55), rgba(17, 17, 21, 0) 45%); } :where(html[data-theme="dark"]) .al__art i { background: rgba(var(--ink, 29,29,31), .12); filter: blur(.5px); } :where(html[data-theme="dark"]) .al__tile:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 .5px rgba(0, 0, 0, 0.115), 0 24px 34px -20px rgba(0, 0, 0, 0.46); } :where(html[data-theme="dark"]) .al__tile--dark { --t1: rgb(180, 182, 196); --t2: rgb(202, 204, 214); } :where(html[data-theme="dark"]) .al__tile--dark::before { background: linear-gradient(160deg, rgba(17, 17, 21, 0.14), rgba(17, 17, 21, 0) 45%); } :where(html[data-theme="dark"]) .al__cap { color: rgb(29, 29, 32); } :where(html[data-theme="dark"]) .al__tile::after { background: linear-gradient(180deg, rgba(219, 220, 227, 0) 40%, rgba(219, 220, 227, 0.55)); } :where(html[data-theme="dark"]) .al__title .cl__l { background-image: linear-gradient(rgba(var(--glow), var(--hot)), rgba(var(--glow), var(--hot))), linear-gradient(100deg, rgb(255, 59, 92), rgb(255, 154, 31), rgb(255, 225, 53), rgb(61, 220, 132), rgb(25, 199, 255), rgb(77, 107, 255), rgb(180, 77, 255), rgb(255, 59, 154), rgb(255, 59, 92)); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.119)) drop-shadow(0 calc(6px + var(--hot) * 10px) calc(8px + var(--hot) * 12px) rgba(70, 90, 200, calc(.22 + var(--hot) * .3))); background-size: 100% 100%, 420% 100%; background-position: 0 0, 0% 0; } :where(html[data-theme="dark"]) .al__title .cl__l { background-image: linear-gradient(rgba(255,255,255, calc(.68 - var(--hot) * .68)), rgba(255,255,255, calc(.68 - var(--hot) * .68))), linear-gradient(100deg, rgb(255, 59, 92), rgb(255, 154, 31), rgb(255, 225, 53), rgb(61, 220, 132), rgb(25, 199, 255), rgb(77, 107, 255), rgb(180, 77, 255), rgb(255, 59, 154), rgb(255, 59, 92)); filter: saturate(calc(.8 + var(--hot) * .6)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.119)) drop-shadow(0 calc(5px + var(--hot) * 10px) calc(7px + var(--hot) * 12px) rgba(70, 90, 200, calc(.12 + var(--hot) * .34))); background-size: 100% 100%, 420% 100%; } :where(html[data-theme="dark"]) .al__title .cl__l { background-image: linear-gradient(180deg, rgba(255,255,255,calc(.5 - var(--hot) * .3)) 0%, rgba(17, 17, 21, 0) 55%), linear-gradient(rgba(255,255,255, calc(.5 - var(--hot) * .5)), rgba(255,255,255, calc(.5 - var(--hot) * .5))), linear-gradient(125deg, rgb(95, 46, 72) 0%, rgb(101, 71, 49) 14%, rgb(92, 82, 45) 28%, rgb(42, 88, 62) 43%, rgb(47, 82, 98) 58%, rgb(43, 49, 90) 72%, rgb(65, 40, 83) 86%, rgb(95, 46, 72) 100%); filter: saturate(calc(.9 + var(--hot) * .5)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.126)) drop-shadow(0 calc(5px + var(--hot) * 10px) calc(7px + var(--hot) * 12px) rgba(120, 100, 220, calc(.12 + var(--hot) * .3))); background-size: 100% 100%, 100% 100%, 360% 140%; background-position: 0 0, 0 0, 0% 30%; } :where(html[data-theme="dark"]) .al__title .cl__l { background-image: linear-gradient(180deg, rgba(255,255,255,calc(.42 - var(--hot) * .42)) 0%, rgba(17, 17, 21, 0) 50%), linear-gradient(rgba(255,255,255, calc(.55 - var(--hot) * .55)), rgba(255,255,255, calc(.55 - var(--hot) * .55))), linear-gradient(125deg, rgb(255, 79, 168) 0%, rgb(255, 138, 61) 14%, rgb(255, 216, 74) 28%, rgb(56, 224, 143) 43%, rgb(34, 184, 255) 58%, rgb(90, 107, 255) 72%, rgb(180, 85, 255) 86%, rgb(255, 79, 168) 100%); filter: saturate(calc(.95 + var(--hot) * .9)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.126)) drop-shadow(0 calc(5px + var(--hot) * 10px) calc(7px + var(--hot) * 12px) rgba(110, 90, 230, calc(.12 + var(--hot) * .32))); } :where(html[data-theme="dark"]) .al__title .cl__l { background-image: linear-gradient(180deg, rgba(255,255,255,calc(.42 - var(--hot) * .30)) 0%, rgba(17, 17, 21, 0) 46%, rgba(34,40,90,calc(.20 - var(--hot) * .08)) 100%), linear-gradient(rgba(255,255,255, calc(.52 - var(--hot) * .46)), rgba(255,255,255, calc(.52 - var(--hot) * .46))), linear-gradient(125deg, rgb(255, 79, 168) 0%, rgb(255, 138, 61) 14%, rgb(255, 216, 74) 28%, rgb(56, 224, 143) 43%, rgb(34, 184, 255) 58%, rgb(90, 107, 255) 72%, rgb(180, 85, 255) 86%, rgb(255, 79, 168) 100%); filter: saturate(calc(.95 + var(--hot) * .85)) drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.133)) drop-shadow(0 -1px 0 rgba(40, 50, 110, 0.126)) drop-shadow(0 calc(10px + var(--hot) * 8px) calc(14px + var(--hot) * 10px) rgba(60, 70, 150, calc(.2 + var(--hot) * .22))); } :where(html[data-theme="dark"]) .al__title .cl__l { background-image: linear-gradient(105deg, rgba(17, 17, 21, 0) 38%, rgba(17, 17, 21, 0.95) 50%, rgba(17, 17, 21, 0) 62%), linear-gradient(180deg, rgba(255,255,255,calc(.38 - var(--hot) * .28)) 0%, rgba(17, 17, 21, 0) 46%, rgba(90,0,12,calc(.24 - var(--hot) * .10)) 100%), linear-gradient(rgba(255,255,255, calc(.55 - var(--hot) * .5)), rgba(255,255,255, calc(.55 - var(--hot) * .5))), linear-gradient(180deg, rgb(255, 74, 88), rgb(224, 22, 43)); filter: saturate(calc(1 + var(--hot) * .4)) drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.133)) drop-shadow(0 calc(10px + var(--hot) * 8px) calc(14px + var(--hot) * 10px) rgba(150, 10, 30, calc(.22 + var(--hot) * .22))); background-size: 320% 100%, 100% 100%, 100% 100%, 100% 100%; background-position: 160% 0, 0 0, 0 0, 0 0; } :where(html[data-theme="dark"]) .al__title .cl__l { background-image: linear-gradient(105deg, rgba(17, 17, 21, 0) 38%, rgba(17, 17, 21, 0.95) 50%, rgba(17, 17, 21, 0) 62%), linear-gradient(180deg, rgba(17, 17, 21, 0.32) 0%, rgba(17, 17, 21, 0) 46%, rgba(90, 0, 12, 0.22) 100%), linear-gradient(180deg, rgb(255, 74, 88), rgb(217, 19, 42)); filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.126)) drop-shadow(0 calc(10px + var(--hot) * 8px) calc(14px + var(--hot) * 10px) rgba(150, 10, 30, calc(.22 + var(--hot) * .22))); background-size: 320% 100%, 100% 100%, 100% 100%; background-position: 160% 0, 0 0, 0 0; } :where(html[data-theme="dark"]) .al__soon em { color: rgba(217, 218, 222, 0.62); background: linear-gradient(180deg, rgba(17, 17, 21, 0.85), rgba(17, 17, 21, 0.45)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 .5px rgba(0, 0, 0, 0.092), 0 8px 16px -10px rgba(0, 0, 0, 0.345); } :where(html[data-theme="dark"]) .al__tile--dark .al__soon em { color: rgba(29, 29, 32, 0.7); background: linear-gradient(180deg, rgba(17, 17, 21, 0.2), rgba(17, 17, 21, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.049), 0 0 0 .5px rgba(255, 255, 255, 0.02); } :where(html[data-theme="dark"]) .al__dots i { background: currentColor; color: rgb(217, 218, 222); filter: none; } :where(html[data-theme="dark"]) .al__tile--dark .al__dots i { color: rgb(29, 29, 32); } :where(html[data-theme="dark"]) .al__shine { background: linear-gradient(110deg, transparent 35%, rgba(17, 17, 21, 0.55) 50%, transparent 65%); background-size: 300% 100%; background-position: 160% 0; } :where(html[data-theme="dark"]) .al__tile::before { background: radial-gradient(180px 140px at var(--mx, 50%) var(--my, -40%), rgba(255, 255, 255, 0.091), rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, rgba(17, 17, 21, 0.45), rgba(17, 17, 21, 0) 45%); } :where(html[data-theme="dark"]) .al__tile--dark::before { background: radial-gradient(200px 160px at var(--mx, 50%) var(--my, -40%), rgba(255, 255, 255, 0.029), rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, rgba(17, 17, 21, 0.12), rgba(17, 17, 21, 0) 45%); } :where(html[data-theme="dark"]) .ft__logo { color: rgb(217, 218, 222); } :where(html[data-theme="dark"]) .ft__tag { color: rgb(217, 218, 222); } :where(html[data-theme="dark"]) .ft__mail { color: rgb(217, 218, 222); } :where(html[data-theme="dark"]) .ft__mail a, :where(html[data-theme="dark"]) .ft__col a { color: rgb(144, 146, 157); } :where(html[data-theme="dark"]) .ft__mail a:hover, :where(html[data-theme="dark"]) .ft__col a:hover { color: rgb(241, 97, 114); } :where(html[data-theme="dark"]) .ft__col h4 { color: rgb(217, 218, 222); } :where(html[data-theme="dark"]) .ft__word .ft__l { background-image: linear-gradient(105deg, rgba(17, 17, 21, 0) 38%, rgba(17, 17, 21, 0.95) 50%, rgba(17, 17, 21, 0) 62%), linear-gradient(180deg, rgba(17, 17, 21, 0.32) 0%, rgba(17, 17, 21, 0) 46%, rgba(90, 0, 12, 0.22) 100%), linear-gradient(180deg, rgb(255, 74, 88), rgb(217, 19, 42)); color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.126)) drop-shadow(0 calc(18px + var(--hot) * 10px) calc(24px + var(--hot) * 12px) rgba(150, 10, 30, calc(.24 + var(--hot) * .2))); background-size: 320% 100%, 100% 100%, 100% 100%; background-position: 160% 0, 0 0, 0 0; -webkit-background-clip: text; background-clip: text; } :where(html[data-theme="dark"]) .ft__mound span { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.111), rgba(255, 255, 255, 0.045) 60%, rgba(255, 255, 255, 0)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.126), 0 -20px 60px -30px rgba(217, 19, 42, 0.315); } :where(html[data-theme="dark"]) .ft__mound span:nth-child(2) { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.126), 0 -16px 50px -26px rgba(217, 19, 42, 0.27); } :where(html[data-theme="dark"]) .ft__credit { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .ft__credit a { color: inherit; } :where(html[data-theme="dark"]) .ft__credit a:hover { color: rgb(241, 97, 114); } :where(html[data-theme="dark"]) .al__title .cl__l { background-image: linear-gradient(105deg, rgba(17, 17, 21, 0) 38%, rgba(17, 17, 21, 0.95) 50%, rgba(17, 17, 21, 0) 62%), linear-gradient(180deg, rgba(17, 17, 21, 0.34) 0%, rgba(17, 17, 21, 0) 46%, rgba(120, 10, 70, 0.2) 100%), linear-gradient(180deg, rgb(98, 47, 74), rgb(240, 57, 155)); filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.126)) drop-shadow(0 calc(10px + var(--hot) * 8px) calc(14px + var(--hot) * 10px) rgba(220, 40, 130, calc(.24 + var(--hot) * .22))); } :where(html[data-theme="dark"]) .ft__home { color: inherit; } :where(html[data-theme="dark"]) .ft__home::after { background: linear-gradient(90deg, rgba(217, 19, 42, 0), rgb(217, 19, 42) 25%, rgb(101, 49, 55) 75%, rgba(101, 49, 55, 0)); } :where(html[data-theme="dark"]) a.ft__logo { color: rgb(217, 218, 222); } :where(html[data-theme="dark"]) a.ft__logo:hover { color: rgb(217, 218, 222); } :where(html[data-theme="dark"]) .btn--round .btn__emo img { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.207)); } :where(html[data-theme="dark"]) .flow-word .fw-l { -webkit-text-fill-color: rgb(190, 191, 197); background: none; } :where(html[data-theme="dark"]) .flow-word::after { background: linear-gradient(90deg, rgb(48, 55, 101), rgb(98, 47, 74)); } :where(html[data-theme="dark"]) .flow-word { -webkit-text-fill-color: rgb(190, 191, 197); } :where(html[data-theme="dark"]) .flow-word:hover, :where(html[data-theme="dark"]) .flow-word:focus-visible { -webkit-text-fill-color: rgb(91, 87, 255); text-shadow: 0 6px 18px rgba(91, 87, 255, 0.315); } :where(html[data-theme="dark"]) .flow-hand svg { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.287)); } :where(html[data-theme="dark"]) .flow-word:hover, :where(html[data-theme="dark"]) .flow-word:focus-visible { -webkit-text-fill-color: rgb(190, 191, 197); text-shadow: none; } :where(html[data-theme="dark"]) .flow-word .fw-l { -webkit-text-fill-color: rgb(190, 191, 197); } :where(html[data-theme="dark"]) .flow-word::before, :where(html[data-theme="dark"]) .flow-word::after { background: linear-gradient(90deg, rgba(60, 70, 120, 0), rgba(60, 70, 120, 0.45), rgba(60, 70, 120, 0)); } :where(html[data-theme="dark"]) .cl__mark { filter: blur(5px); } :where(html[data-theme="dark"]) .cl__card { background: radial-gradient(75% 75% at 50% 45%, var(--card-tone, rgba(255, 255, 255, 0.13)), color-mix(in srgb, var(--card-tone, rgba(255, 255, 255, 0.13)) 88%, rgb(122, 122, 133)) 100%); } :where(html[data-theme="dark"]) .bgx__canvas { filter: none; } @media (max-width: 809px) { :where(html[data-theme="dark"]) .bgx__canvas { filter: none; } } /* ---- project.css ---- */ :where(html[data-theme="dark"]) .pj-body { background: rgb(27, 28, 35); } :where(html[data-theme="dark"]) .pj__back { color: rgb(229, 229, 232); } :where(html[data-theme="dark"]) .pj__hero { background: rgb(20, 21, 26); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.069), 0 10px 40px rgba(0, 0, 0, 0.069); } :where(html[data-theme="dark"]) .pj__ctrl { border: 0; background: rgba(17, 17, 21, 0.85); color: rgb(229, 229, 232); } :where(html[data-theme="dark"]) .pj__dot { background: conic-gradient(rgb(17, 17, 17) 0 70%, rgba(255, 255, 255, 0.13) 0); } :where(html[data-theme="dark"]) .pj__kicker { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .pj__title { color: rgb(229, 229, 232); } :where(html[data-theme="dark"]) .pj__meta dt { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .pj__meta dd { color: rgb(229, 229, 232); } :where(html[data-theme="dark"]) .pj__desc h2 { color: rgb(229, 229, 232); } :where(html[data-theme="dark"]) .pj__desc p { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .pj__ph { background: rgb(36, 37, 46); color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .pj__word { color: rgb(59, 60, 66); filter: blur(2px); } :where(html[data-theme="dark"]) .pj__cols { color: rgb(214, 215, 219); } :where(html[data-theme="dark"]) .pj__cols a { color: rgb(169, 170, 178); } :where(html[data-theme="dark"]) .pj__cols p { color: rgb(184, 185, 192); } :where(html[data-theme="dark"]) .pj-body { background: rgb(28, 29, 36); } :where(html[data-theme="dark"]) .pj__ph { background: rgb(37, 39, 47); } :where(html[data-theme="dark"]) .pj__snd { color: rgb(138, 140, 151); } :where(html[data-theme="dark"]) .pj-body { background: rgb(17, 17, 21); } :where(html[data-theme="dark"]) .pj__hero { background: rgb(17, 17, 21); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.046), 0 6px 30px rgba(0, 0, 0, 0.092); } :where(html[data-theme="dark"]) .pj__kicker { color: rgb(162, 164, 173); } :where(html[data-theme="dark"]) .pj__meta dt { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .pj__desc p { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .pj__ph { background: rgb(28, 29, 36); } :where(html[data-theme="dark"]) .pj__mail a { color: rgb(229, 229, 232); } :where(html[data-theme="dark"]) .pj__word { color: rgb(136, 138, 150); filter: blur(3px); } :where(html[data-theme="dark"]) .pj__col a { color: rgb(138, 140, 151); } :where(html[data-theme="dark"]) .pj__mound { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 55%, rgba(255, 255, 255, 0) 100%); filter: blur(6px); } :where(html[data-theme="dark"]) .pj__ph.has-img { background: rgb(209, 211, 219); } :where(html[data-theme="dark"]) .gf__orb { filter: blur(46px); } :where(html[data-theme="dark"]) .gf__orb--a { background: radial-gradient(circle at 35% 35%, rgb(143, 154, 168), rgba(255, 255, 255, 0.13) 60%, transparent 72%); } :where(html[data-theme="dark"]) .gf__orb--b { background: radial-gradient(circle at 60% 40%, rgb(43, 47, 54), rgb(106, 113, 124) 55%, transparent 72%); } :where(html[data-theme="dark"]) .gf__orb--c { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.13) 55%, transparent 72%); } :where(html[data-theme="dark"]) .gf__panel { background: linear-gradient(160deg, rgba(17, 17, 21, 0.62), rgba(21, 22, 27, 0.36)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.105), inset 2px 3px 2px -1px rgba(255, 255, 255, 0.133), inset -2px -3px 3px -1px rgba(120, 130, 150, 0.27), 0 0 0 1px rgba(20, 28, 45, 0.063), 0 30px 70px -24px rgba(20, 28, 45, 0.315); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :where(html[data-theme="dark"]) .gf__panel { background: rgb(26, 27, 33); } } :where(html[data-theme="dark"]) .gf__spec { background: radial-gradient(420px 260px at var(--mx) var(--my), rgba(255, 255, 255, 0.111), rgba(255, 255, 255, 0) 70%); } :where(html[data-theme="dark"]) .gf__kicker { color: rgb(139, 140, 152); } :where(html[data-theme="dark"]) .gf__word { background: linear-gradient(180deg, rgb(17, 17, 21) 0%, rgb(36, 37, 46) 45%, rgb(71, 73, 90) 100%); color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.126)) drop-shadow(0 10px 18px rgba(20, 28, 45, 0.198)); -webkit-background-clip: text; background-clip: text; } :where(html[data-theme="dark"]) .gf__word span { color: inherit; } :where(html[data-theme="dark"]) .gf__tag { color: rgb(201, 202, 207); } :where(html[data-theme="dark"]) .gf__col h4 { color: rgb(201, 202, 207); } :where(html[data-theme="dark"]) .gf__chip, :where(html[data-theme="dark"]) .gf__mail, :where(html[data-theme="dark"]) .gf__up { color: rgb(213, 214, 218); background: linear-gradient(160deg, rgba(17, 17, 21, 0.75), rgba(17, 17, 21, 0.35)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.119), 0 0 0 .5px rgba(20, 28, 45, 0.072), 0 8px 18px -10px rgba(20, 28, 45, 0.27); } :where(html[data-theme="dark"]) .gf__chip:hover, :where(html[data-theme="dark"]) .gf__mail:hover, :where(html[data-theme="dark"]) .gf__up:hover { background: linear-gradient(160deg, rgb(17, 17, 21), rgba(17, 17, 21, 0.7)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 .5px rgba(20, 28, 45, 0.09), 0 14px 26px -12px rgba(20, 28, 45, 0.36); } :where(html[data-theme="dark"]) .gf__copy { color: rgb(139, 140, 152); } :where(html[data-theme="dark"]) .gf__word { background: linear-gradient(180deg, rgb(187, 189, 201) 0%, rgb(146, 149, 169) 50%, rgb(82, 85, 104) 100%); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.119)) drop-shadow(0 12px 20px rgba(20, 28, 45, 0.162)); -webkit-background-clip: text; background-clip: text; } :where(html[data-theme="dark"]) .gf__orb { filter: blur(60px); } :where(html[data-theme="dark"]) .gf__orb--a { background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.078) 55%, transparent 72%); } :where(html[data-theme="dark"]) .gf__orb--b { background: radial-gradient(circle at 55% 45%, rgb(74, 80, 90), rgba(120, 128, 140, 0.5) 55%, transparent 72%); } :where(html[data-theme="dark"]) .gf__panel { background: linear-gradient(180deg, rgba(17, 17, 21, 0.34), rgba(17, 17, 21, 0.12) 40%, rgba(17, 17, 21, 0.2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.133), inset 0 0 0 1px rgba(255, 255, 255, 0.049), inset 0 -1px 0 rgba(255, 255, 255, 0.056), inset 0 -18px 30px -22px rgba(20, 28, 45, 0.108), 0 0 0 .5px rgba(20, 28, 45, 0.054), 0 24px 50px -28px rgba(20, 28, 45, 0.27); } :where(html[data-theme="dark"]) .gf__tag { color: rgb(156, 157, 167); } :where(html[data-theme="dark"]) .gf__col h4 { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .gf__chip { background: transparent; box-shadow: none; color: rgb(201, 202, 207); } :where(html[data-theme="dark"]) .gf__chip:hover { background: linear-gradient(180deg, rgba(17, 17, 21, 0.85), rgba(17, 17, 21, 0.5)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.126), 0 6px 14px -8px rgba(20, 28, 45, 0.27); } :where(html[data-theme="dark"]) .gf__mail { background: linear-gradient(180deg, rgba(17, 17, 21, 0.7), rgba(17, 17, 21, 0.35)); } :where(html[data-theme="dark"]) .gf { --acc-ink-1: rgb(212, 212, 217); --acc-ink-2: rgb(171, 172, 181); --acc-ink-3: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .gf__orb--a { background: radial-gradient(circle at 40% 40%, rgba(var(--acc), .85), rgba(var(--acc), .35) 55%, transparent 72%); } :where(html[data-theme="dark"]) .gf__orb--b { background: radial-gradient(circle at 55% 45%, rgba(var(--acc-deep), .8), rgba(var(--acc-deep), .3) 55%, transparent 72%); } :where(html[data-theme="dark"]) .gf__panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.133), inset 0 0 0 1px rgba(255, 255, 255, 0.049), inset 0 -1px 0 rgba(255, 255, 255, 0.056), inset 0 -22px 34px -24px rgba(var(--acc-deep), .22), 0 0 0 .5px rgba(var(--acc-deep), .12), 0 26px 56px -28px rgba(var(--acc-deep), .42); } :where(html[data-theme="dark"]) .gf__word { background: linear-gradient(180deg, var(--acc-ink-1) 0%, var(--acc-ink-2) 55%, var(--acc-ink-3) 100%); -webkit-background-clip: text; background-clip: text; } :where(html[data-theme="dark"]) .gf__chip:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.126), 0 6px 14px -8px rgba(var(--acc-deep), .45); } :where(html[data-theme="dark"]) .gf__up { color: rgb(var(--acc-deep)); } :where(html[data-theme="dark"]) .gf__panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.133), inset 0 0 0 1px rgba(255, 255, 255, 0.049), inset 0 -1px 0 rgba(255, 255, 255, 0.056), inset 0 -22px 34px -24px rgba(var(--acc-deep), .2); } :where(html[data-theme="dark"]) .gf__word { background: none; -webkit-text-fill-color: initial; filter: none; color: inherit; } :where(html[data-theme="dark"]) .gf__l { background-image: linear-gradient(rgba(var(--acc), var(--hot)), rgba(var(--acc), var(--hot))), linear-gradient(180deg, var(--acc-ink-1) 0%, var(--acc-ink-2) 55%, var(--acc-ink-3) 100%); color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 calc(2px + var(--hot) * 10px) calc(3px + var(--hot) * 14px) rgba(var(--acc-deep), calc(.12 + var(--hot) * .35))); background-size: 100% 100%, 100% 100%; -webkit-background-clip: text; background-clip: text; } :where(html[data-theme="dark"]) .gf__sheen { background: linear-gradient(105deg, transparent 38%, rgba(17, 17, 21, 0.95) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; } :where(html[data-theme="dark"]) .gf__mail::after { background: linear-gradient(110deg, transparent 35%, rgba(17, 17, 21, 0.9) 50%, transparent 65%); background-size: 250% 100%; background-position: 140% 0; } :where(html[data-theme="dark"]) .gf__col:hover h4 { color: rgb(var(--acc-deep)); } :where(html[data-theme="dark"]) .pj__hint { color: rgb(213, 214, 218); background: linear-gradient(160deg, rgba(17, 17, 21, 0.8), rgba(17, 17, 21, 0.45)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.112), 0 8px 18px -10px rgba(0, 0, 0, 0.46); } :where(html[data-theme="dark"]) .pj-body { background: rgb(24, 25, 30); } :where(html[data-theme="dark"]) .pj-body::before { background: radial-gradient(60vw 45vh at 8% -8%, rgba(var(--acc), .16), transparent 70%), radial-gradient(50vw 40vh at 100% 35%, rgba(var(--acc), .10), transparent 70%), radial-gradient(60vw 50vh at 30% 110%, rgba(var(--acc), .12), transparent 70%), linear-gradient(180deg, rgb(22, 23, 28), rgb(26, 27, 33)); } :where(html[data-theme="dark"]) .pj__hero, :where(html[data-theme="dark"]) .pj__meta, :where(html[data-theme="dark"]) .pj__desc { background: linear-gradient(180deg, rgba(17, 17, 21, 0.62), rgba(17, 17, 21, 0.28)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.133), inset 0 0 0 1px rgba(255, 255, 255, 0.063), inset 0 -16px 28px -22px rgba(var(--acc-deep), .16), 0 0 0 .5px rgba(var(--acc-deep), .10), 0 26px 50px -30px rgba(var(--acc-deep), .38); } :where(html[data-theme="dark"]) .pj__ph, :where(html[data-theme="dark"]) .pj__ph.has-img { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.077), 0 0 0 6.5px rgba(var(--acc-deep), .10), 0 24px 44px -26px rgba(var(--acc-deep), .45); } :where(html[data-theme="dark"]) .pj__back::before { background: linear-gradient(180deg, rgba(17, 17, 21, 0.8), rgba(17, 17, 21, 0.4)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.084), 0 8px 18px -12px rgba(var(--acc-deep), .4); } :where(html[data-theme="dark"]) .pj__back:hover::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.112), 0 12px 24px -12px rgba(var(--acc-deep), .55); } :where(html[data-theme="dark"]) .pj-body .bgx__shape { background: linear-gradient(150deg, rgba(17, 17, 21, 0.66), rgba(17, 17, 21, 0.18) 55%, rgba(var(--acc), .10)); } /* ---- projects.css ---- */ :where(html[data-theme="dark"]) .pl__kicker { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .pl__title { color: rgb(217, 218, 222); } :where(html[data-theme="dark"]) .pl__sub { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .pl__card { color: inherit; } :where(html[data-theme="dark"]) .pl__frame { background: linear-gradient(180deg, rgba(17, 17, 21, 0.82), rgba(17, 17, 21, 0.46)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 .5px rgba(0, 0, 0, 0.081), 0 22px 40px -24px rgba(0, 0, 0, 0.322); } :where(html[data-theme="dark"]) .pl__card:hover .pl__frame { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.084), 0 0 0 .5px rgba(0, 0, 0, 0.103), 0 30px 46px -22px rgba(0, 0, 0, 0.391); } :where(html[data-theme="dark"]) .pl__card.is-live .pl__cover { filter: blur(14px); } :where(html[data-theme="dark"]) .pl__media--soon { background: linear-gradient(160deg, var(--t1, rgb(24, 25, 31)), var(--t2, rgb(35, 36, 44))); } :where(html[data-theme="dark"]) .pl__media--soon em { color: rgba(217, 218, 222, 0.55); background: linear-gradient(180deg, rgba(17, 17, 21, 0.85), rgba(17, 17, 21, 0.45)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 .5px rgba(0, 0, 0, 0.092); } :where(html[data-theme="dark"]) .pl__name { color: rgb(201, 202, 208); } :where(html[data-theme="dark"]) .pl__year { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .pl__type { color: rgb(136, 138, 150); } /* ---- contact.css ---- */ :where(html[data-theme="dark"]) .ct__title { color: rgb(217, 218, 222); } :where(html[data-theme="dark"]) .ct__form { background: linear-gradient(180deg, rgba(17, 17, 21, 0.78), rgba(17, 17, 21, 0.42)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 .5px rgba(0, 0, 0, 0.081), 0 24px 44px -26px rgba(0, 0, 0, 0.322); } :where(html[data-theme="dark"]) .ct__f > span { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .ct__f input, :where(html[data-theme="dark"]) .ct__f select { border: 0; outline: 0; color: rgb(217, 218, 222); background: rgba(17, 17, 21, 0.7); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.092), inset 0 1px 2px rgba(0, 0, 0, 0.046); } :where(html[data-theme="dark"]) .ct__f input::placeholder { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .ct__f input:focus, :where(html[data-theme="dark"]) .ct__f select:focus { background: rgb(17, 17, 21); box-shadow: inset 0 0 0 1.5px rgba(29, 29, 31, 0.85), 0 6px 18px -10px rgba(0, 0, 0, 0.402); } :where(html[data-theme="dark"]) .ct__f select { background-image: linear-gradient(45deg, transparent 50%, rgb(100, 104, 128) 50%), linear-gradient(135deg, rgb(100, 104, 128) 50%, transparent 50%); background-position: calc(100% - 20px) 19px, calc(100% - 15px) 19px; background-size: 5px 5px; background-repeat: no-repeat; } :where(html[data-theme="dark"]) .ct__check { color: rgb(144, 146, 157); } :where(html[data-theme="dark"]) .ct__check i { background: rgba(17, 17, 21, 0.8); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.161); } :where(html[data-theme="dark"]) .ct__check i::after { border: solid rgba(255, 255, 255, 0.14); } :where(html[data-theme="dark"]) .ct__check input:checked + i { background: rgb(192, 194, 206); box-shadow: none; } :where(html[data-theme="dark"]) .ct__submit { border: 0; color: rgb(29, 29, 32); background: linear-gradient(180deg, rgb(170, 172, 188), rgb(192, 194, 206) 60%, rgb(202, 204, 214)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.031), 0 12px 22px -12px rgba(0, 0, 0, 0.69); } :where(html[data-theme="dark"]) .ct__list li { color: rgb(217, 218, 222); } :where(html[data-theme="dark"]) .ct__list li::before { color: rgb(241, 97, 114); } :where(html[data-theme="dark"]) .ct__d-row { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } :where(html[data-theme="dark"]) .ct__d-row span { color: rgb(217, 218, 222); } :where(html[data-theme="dark"]) .ct__d-row a { color: rgb(217, 218, 222); } :where(html[data-theme="dark"]) .ct__d-row a:hover { color: rgb(241, 97, 114); } /* ---- about.css ---- */ :where(html[data-theme="dark"]) .ab__kicker { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .ab__title { color: rgb(217, 218, 222); } :where(html[data-theme="dark"]) .ab__lead { color: rgb(184, 185, 192); } :where(html[data-theme="dark"]) .ab__card { color: rgb(217, 218, 222); background: linear-gradient(180deg, rgba(17, 17, 21, 0.78), rgba(17, 17, 21, 0.42)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 .5px rgba(0, 0, 0, 0.081), 0 24px 44px -26px rgba(0, 0, 0, 0.322); } :where(html[data-theme="dark"]) .ab__card p { color: rgb(144, 146, 157); } :where(html[data-theme="dark"]) .ab__n { color: rgb(241, 97, 114); } :where(html[data-theme="dark"]) .ab__me img { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.112), 0 14px 26px -12px rgba(0, 0, 0, 0.402); } :where(html[data-theme="dark"]) .ab__me dl div { border-top: 1px solid rgba(255, 255, 255, 0.08); } :where(html[data-theme="dark"]) .ab__me dt { color: rgb(136, 138, 150); } :where(html[data-theme="dark"]) .ab__card::before { background: radial-gradient(220px 160px at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.091), transparent 70%); } :where(html[data-theme="dark"]) .ab__card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.077), 0 0 0 .5px rgba(0, 0, 0, 0.081), 0 30px 50px -28px rgba(0, 0, 0, 0.345); }