@font-face {
  font-family: 'Manrope';
  src: url('./manrope-semibold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

.av-header, .av-hero, .av-nav-panel, .av-editor {
  --av-ink: #050505;
  --av-paper: #f5f5f5;
  font-family: 'Manrope', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--av-ink);
  font-weight: 600;
}

.av-header {
  position: fixed;
  inset: 0 0 auto;
  height: 48px;
  z-index: 30;
  background: var(--av-paper);
  isolation: isolate;
}
.av-header::after, .av-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .03;
  background: url('./paper-grain.png') repeat;
  background-size: 256px 256px;
}
.av-nav-inner {
  height: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.av-brand { font-size: 20px; line-height: 1.4; letter-spacing: -.06em; }
.av-status { display: flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: -.06em; }
.av-status-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #47c554; }
.av-status-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: av-pulse 2.2s ease-out infinite; }
.av-time { display: flex; gap: 6px; align-items: center; font-size: 14px; line-height: 1.4; letter-spacing: -.06em; }
.av-time time { opacity: .6; }
.av-header .av-menu-toggle {
  position: relative;
  display: block;
  flex: none;
  width: 46px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--av-ink);
  font-size: 0;
  background: linear-gradient(currentColor, currentColor) 50% 50% / 36px 2px no-repeat;
}
.av-menu-toggle::before, .av-menu-toggle::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), width .4s, top .4s, left .4s;
}
.av-menu-toggle::before { top: 8px; left: 5px; }
.av-menu-toggle::after { top: 18px; left: 23px; }
.av-menu-toggle:hover::before { transform: translateX(18px); }
.av-menu-toggle:hover::after { transform: translateX(-18px); }
.av-header .av-menu-toggle[aria-expanded='true'] { background-size: 0 0; }
.av-menu-toggle[aria-expanded='true']::before { width: 26px; top: 13px; left: 10px; transform: rotate(45deg); }
.av-menu-toggle[aria-expanded='true']::after { width: 26px; top: 13px; left: 10px; transform: rotate(-45deg); }
.av-hero { position: relative; background: var(--av-paper); isolation: isolate; }
.av-stage { position: relative; width: 100%; max-width: 1200px; height: 100vh; height: 100svh; min-height: 640px; padding: 40px 20px; margin: auto; }
.av-portrait {
  position: absolute;
  z-index: 3;
  width: 280px;
  height: 350px;
  top: calc(50% - 175px);
  left: calc(50% - 140px);
  margin: 0;
  perspective: 900px;
}
.av-portrait-surface { position: relative; width: 100%; height: 100%; overflow: hidden; transform-style: preserve-3d; transition: transform .15s ease; background: #e9e8e7; }
.av-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--portrait-y, 30%); }
.av-glare { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255,255,255,.25), transparent 55%); transition: opacity .2s ease; }
.av-portrait.is-hovered .av-glare { opacity: 1; }
.av-ticker-window { position: absolute; z-index: 2; top: 50%; left: 20px; right: 20px; overflow: hidden; transform: translateY(-50%); border-radius: 10px; container-type: inline-size; }
.av-ticker-track { display: flex; width: max-content; will-change: transform; gap: 10px; }
.av-name-line {
  display: block;
  flex: none;
  margin: 0;
  padding: 0 0 .06em;
  white-space: nowrap;
  font-size: min(18.19vw, 211px);
  font-size: 18.19cqw;
  line-height: .9;
  font-weight: 600;
  letter-spacing: -.06em;
}
.av-hero-footer { position: absolute; z-index: 3; bottom: 40px; left: 20px; right: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.av-services { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.av-services li { display: flex; align-items: center; gap: 6px; line-height: 1.4; font-size: 16px; letter-spacing: -.06em; }
.av-service-bars { display: inline-flex; flex: none; gap: 3px; height: 16px; }
.av-service-bars i { display: block; width: 3px; height: 100%; background: currentColor; opacity: .4; }
.av-services li:nth-child(1) .av-service-bars i:nth-child(1),
.av-services li:nth-child(2) .av-service-bars i:nth-child(-n+2),
.av-services li:nth-child(n+3) .av-service-bars i { opacity: 1; }
.av-introduction { width: 50%; max-width: 500px; margin: 0; text-align: right; text-wrap: balance; font-size: 18px; line-height: 1.4; letter-spacing: -.06em; color: #05050580; }
.av-ready .av-header { animation: av-header-in 1s .7s cubic-bezier(.22,1.16,.36,1) both; }
.av-ready .av-name-enter { animation: av-name-in 2s .4s cubic-bezier(.16,1.06,.3,1) both; }
.av-ready .av-fade-in { animation: av-fade-in .8s cubic-bezier(.44,0,.56,1) both; }
.av-ready .av-ticker-track.is-running { animation: av-ticker var(--ticker-duration, 24s) linear infinite; }
@supports (animation-timing-function: linear(0, 1)) {
  .av-ready .av-header {
    animation-timing-function: linear(0, .034, .1167, .2253, .3435, .4604, .5691, .6657, .7484, .817, .8724, .9158, .9487, .973, .9902, 1.0018, 1.0091, 1.0131, 1.0149, 1.0151, 1.0142, 1.0128, 1.0111, 1.0093, 1.0076, 1.006, 1.0046, 1.0034, 1.0024, 1.0017, 1.0011, 1.0006, 1);
  }
  .av-ready .av-name-enter {
    animation-timing-function: linear(0, .0076, .0283, .059, .0972, .1409, .1881, .2376, .288, .3386, .3884, .4369, .4837, .5285, .5709, .6109, .6484, .6833, .7156, .7455, .773, .7981, .821, .8418, .8606, .8776, .8929, .9066, .9189, .9298, .9395, .9481, .9557, .9623, .9682, .9733, .9777, .9816, .9849, .9878, .9902, .9923, .9941, .9956, .9968, .9979, .9987, .9994, 1, 1.0004, 1.0008, 1.001, 1.0012, 1.0014, 1.0015, 1.0015, 1.0015, 1.0015, 1.0015, 1.0014, 1.0014, 1.0013, 1.0012, 1.0012, 1.0011, 1.001, 1);
  }
}
.av-nav-panel { position: fixed; z-index: 32; inset: 62px max(20px, calc((100vw - 1160px) / 2)) auto auto; width: min(440px, calc(100vw - 40px)); padding: 30px 34px; background: #f5f5f5; border: 1px solid #dfdfdf; box-shadow: 0 12px 60px #00000012; }
.av-nav-panel.open { display: flex; flex-direction: column; gap: 4px; animation: av-panel-in .4s cubic-bezier(.22,.8,.36,1) both; }
.av-nav-panel a { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 10px 0; font-size: 40px; line-height: 1.2; letter-spacing: -.06em; }
.av-nav-panel a span { font-size: 12px; color: #777; }
.av-nav-panel a:hover { color: #777; }
.av-editor-trigger { border: 0; border-top: 1px solid #ddd; background: transparent; padding: 22px 0 0; text-align: left; font-size: 12px; margin-top: 18px; letter-spacing: 0; }
.av-nav-backdrop { display: none; position: fixed; z-index: 29; inset: 48px 0 0; border: 0; padding: 0; background: #05050530; backdrop-filter: blur(5px); }
.av-nav-backdrop.is-visible { display: block; }
.av-cursor { position: fixed; top: 0; left: 0; z-index: 45; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #050505; pointer-events: none; opacity: 0; transition: opacity .15s; }
.av-cursor.is-visible { opacity: 1; }
.av-edit-portrait { display: none; }
.av-editor { width: min(640px, calc(100% - 28px)); max-height: calc(100svh - 40px); padding: 0; border: 0; background: #f5f5f5; }
.av-editor::backdrop { background: #05050565; backdrop-filter: blur(5px); }
.av-editor-inner { padding: 36px; }
.av-editor h2 { margin: 0 0 9px; font-size: 28px; font-weight: 600; letter-spacing: -.06em; }
.av-editor-note { font-size: 12px; line-height: 1.8; color: #777; margin: 0 0 25px; font-weight: 400; }
.av-editor .modal-close { top: 12px; right: 12px; width: 34px; height: 34px; background: #e6e6e6; font-size: 22px; }
.av-editor label { display: block; font-size: 12px; line-height: 1.5; margin-top: 18px; }
.av-editor input:not([type='file']):not([type='range']), .av-editor textarea {
  display: block; width: 100%; margin-top: 7px; padding: 11px 12px;
  border: 1px solid #d6d6d6; border-radius: 0; background: #fff;
  color: #050505; font: 400 14px/1.6 'Manrope','PingFang SC',sans-serif;
}
.av-editor textarea { resize: vertical; }
.av-editor input[type='range'] { display: block; width: 100%; margin: 12px 0; accent-color: #050505; }
.av-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.av-photo-tools { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.av-photo-tools img { width: 76px; height: 95px; object-fit: cover; object-position: 50% var(--portrait-y, 30%); }
.av-photo-tools button, .av-editor-actions button { background: #050505; color: white; border: 1px solid #050505; padding: 11px 16px; font-size: 12px; }
.av-photo-tools p { font-size: 10px; color: #777; font-weight: 400; line-height: 1.7; }
.av-editor-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.av-editor-actions .av-reset { background: transparent; color: #050505; border-color: #ccc; }
.av-editor-feedback { margin: 17px 0 0; font-size: 11px; font-weight: 400; line-height: 1.7; color: #666; min-height: 19px; }
@keyframes av-header-in { from { opacity: .001; transform: translateY(-62px); } to { opacity: 1; transform: none; } }
@keyframes av-name-in { from { transform: translateY(200px); } to { transform: none; } }
@keyframes av-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes av-ticker { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--ticker-distance))); } }
@keyframes av-pulse { 0% { transform: scale(1); opacity: .49; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes av-panel-in { from { opacity: 0; transform: translateY(-15px); } to { opacity: 1; transform: none; } }
@media (min-width: 810px) and (max-width: 1199px) {
  .av-nav-inner { padding-right: 48px; padding-left: 48px; }
  .av-nav-panel { right: 48px; }
}
@media (max-width: 809px) {
  .av-header { height: 45px; }
  .av-nav-inner { padding: 10px 16px; }
  .av-brand { font-size: 18px; }
  .av-status, .av-time { display: none; }
  .av-hero { padding: 96px 0 60px; }
  .av-stage { display: flex; flex-direction: column; gap: 40px; height: auto; min-height: 0; padding: 0 16px; }
  .av-ticker-window { position: relative; inset: auto; transform: none; width: 100%; order: 0; }
  .av-portrait { position: relative; inset: auto; width: 100%; height: 400px; order: 1; }
  .av-portrait img { object-position: 50% var(--portrait-y, 30%); }
  .av-hero-footer { position: relative; inset: auto; order: 2; align-items: flex-start; flex-direction: column; gap: 20px; }
  .av-introduction { width: 100%; max-width: 500px; text-align: left; font-size: 16px; }
  .av-nav-panel { top: 58px; right: 16px; width: calc(100vw - 32px); padding: 24px; }
  .av-nav-backdrop { top: 45px; }
  .av-cursor { display: none; }
  .av-name-line { font-size: 18.19cqw; }
}
@media (max-width: 480px) {
  .av-editor-inner { padding: 32px 22px 24px; }
  .av-editor-grid { grid-template-columns: 1fr; gap: 0; }
  .av-editor-note { padding-right: 15px; }
}
@media (hover: hover) and (pointer: fine) {
  .av-pointer-ready .av-hero, .av-pointer-ready .av-hero *, .av-pointer-ready .av-header, .av-pointer-ready .av-header *, .av-pointer-ready .av-nav-panel, .av-pointer-ready .av-nav-panel * { cursor: none; }
}
@media (prefers-reduced-motion: reduce) {
  .av-ready .av-ticker-track.is-running, .av-status-dot::after { animation: none; }
  .av-portrait-surface { transform: none !important; }
}
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }