:root {
  color-scheme: light;
  --paper:#fbfaf8; --ink:#191724; --muted:#635f6e; --violet:#5635d1; --purple:#613ee1;
  --line:#eae6e4; --white:#fff; --wrap:1184px;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:24px }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased }
h1,h2,h3,p,figure { margin:0 }
img { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
button,input { font:inherit }
button { cursor:pointer }
[hidden] { display:none !important }
:focus-visible { outline:2px solid var(--purple); outline-offset:4px }
svg { width:18px; height:18px; flex:none }
.wrap { width:min(var(--wrap),calc(100% - 88px)); margin-inline:auto }
.skip,.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.skip:focus { top:10px; left:10px; z-index:3; width:auto; height:auto; margin:0; padding:10px 14px; overflow:visible; clip-path:none; background:#fff; border-radius:8px }
.top { border-bottom:1px solid var(--line); background:var(--paper) }
.top-inner { min-height:76px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px }
.brand { display:inline-flex; align-items:center; gap:10px; justify-self:start }
.brand img { flex:none }
.brand strong,.brand small { display:block }
.brand strong { font-size:17px; line-height:1.25; letter-spacing:.075em; font-weight:800 }
.brand small { font:700 9px/1.4 var(--mono); letter-spacing:.16em; color:#716986; margin-top:2px }
.top nav { display:flex; gap:37px; align-items:center; font-size:14px; font-weight:600; color:var(--muted); height:100% }
.top nav a { align-content:center; position:relative; height:100% }
.top nav a:hover,.top nav a.active { color:var(--violet) }
.top nav a.active::after { position:absolute; content:""; height:2px; bottom:0; inset-inline:0; background:var(--purple); border-radius:5px 5px 0 0 }
.top .btn { justify-self:end }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 17px; min-height:48px; border:1px solid transparent; border-radius:9px; font-weight:680; font-size:14px; line-height:1.2; white-space:nowrap; transition:background .18s,border-color .18s,transform .18s,box-shadow .18s }
.btn:active { transform:translateY(1px) }
.btn-primary { background:var(--violet); color:#fff; border-color:var(--violet); box-shadow:0 3px 7px #5030bf23 }
.btn-primary:hover { background:#4825bc; border-color:#4825bc; box-shadow:0 5px 14px #5030bf36 }
.btn-outline { border-color:#e3ddea; background:#fff; color:var(--ink) }
.btn-outline:hover { background:#f6f2ff; border-color:#cfc1f6; color:var(--violet) }
.btn-small { min-height:39px; font-size:13px; padding:0 13px }
.btn-small svg { width:16px; height:16px }
.eyebrow { display:flex; align-items:center; gap:9px; color:var(--violet); font:650 11px/1.4 var(--mono); letter-spacing:.1em }
.eyebrow-slash { color:#9a89bf }
.live-dot { width:7px; height:7px; background:#7858e7; border-radius:50%; box-shadow:0 0 0 3px #eae0ff; flex:none }
.hero { display:grid; grid-template-columns:1fr 1.015fr; gap:44px; align-items:center; padding-block:46px 52px }
.hero h1 { font-size:clamp(47px,5.25vw,77px); font-weight:820; letter-spacing:-.061em; line-height:1.13; margin-block:21px 23px; overflow-wrap:anywhere }
.hero h1 span,.inner-intro h1 span { color:var(--violet) }
.hero-period { display:inline-block; margin-left:-.04em }
.hero p,.inner-intro p { font-size:16px; color:var(--muted); line-height:1.85 }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:27px }
.text-link,.back-link { display:inline-flex; gap:6px; align-items:center; font-size:14px; font-weight:650 }
.text-link:hover,.back-link:hover { color:var(--violet); text-decoration:underline; text-underline-offset:4px }
.text-link svg,.back-link svg { width:15px; height:15px }
.hero-art { overflow:hidden; background:#e9defa; border:1px solid #e4d8fd; border-radius:26px }
.hero-art img { width:100%; height:auto }
.gallery { background:#f6f4fa; border-block:1px solid #ede9f1; padding-block:42px 43px }
.gallery-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:25px }
.section-label svg { width:16px; height:16px }
.section-label span { color:#736a82; margin-left:4px }
.gallery-heading h2 { font-size:41px; letter-spacing:-.05em; line-height:1.15; margin:10px 0 8px; font-weight:810 }
.gallery-heading p { color:var(--muted); font-size:14px; line-height:1.6 }
.gallery-stat { display:flex; align-items:center; gap:10px; color:var(--violet); white-space:nowrap; align-self:end; margin-bottom:1px }
.gallery-stat>span { font:550 39px/1 var(--mono); letter-spacing:-.09em }
.gallery-stat div { font-size:12px; line-height:1.3; font-weight:700 }
.gallery-stat small { display:block; font:650 9px/1.5 var(--mono); letter-spacing:.12em; color:#6e647f; margin-top:2px }
.controls { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px }
.filters { display:flex; flex-wrap:wrap; gap:8px }
.filters button { border:1px solid #e8e2ef; border-radius:7px; background:#fff; color:#4f495b; min-height:36px; padding:0 13px; font-size:13px; font-weight:640; white-space:nowrap }
.filters button:hover { border-color:#c7b6f2; color:var(--violet) }
.filters button[aria-pressed=true] { background:var(--violet); border-color:var(--violet); color:white }
.filters button span { font:650 10px/1 var(--mono); margin-left:4px; opacity:.85 }
.search { display:flex; align-items:center; gap:7px; border:1px solid #e5dfeb; background:white; border-radius:8px; color:#756b83; min-height:37px; padding-inline:10px; width:220px }
.search:focus-within { border-color:var(--purple); box-shadow:0 0 0 2px #7858e726 }
.search svg { width:16px; height:16px }
.search input { border:0; min-width:0; width:100%; outline:none; background:transparent; color:var(--ink); font-size:13px; min-height:36px }
.search input::placeholder { color:#726980 }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:19px }
.card { min-width:0; background:white; border:1px solid #e7e1eb; border-radius:14px; overflow:hidden; box-shadow:0 2px 6px #34264206; transition:border-color .2s,box-shadow .2s,transform .2s }
.card:hover { transform:translateY(-4px); box-shadow:0 12px 25px #38225815; border-color:#d8c9f3 }
.card-link { display:flex; flex-direction:column; height:100% }
.card-link:focus-visible { outline-offset:-3px }
.card-cover { aspect-ratio:840/470; background:var(--cover); position:relative; overflow:hidden }
.card-cover img { width:100%; height:100%; object-fit:cover; transition:transform .25s }
.card:hover img { transform:scale(1.035) }
.ribbon { position:absolute; left:12px; top:12px; padding:5px 8px; border:1px solid #fff; background:#fffc; color:#40364d; font-size:10px; font-weight:700; border-radius:5px; box-shadow:0 2px 5px #21173510 }
.card-body { display:flex; flex-direction:column; flex:1; padding:14px 17px 16px }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:10px }
.category { color:var(--violet); background:#f3eeff; font-size:11px; padding:4px 7px; border-radius:5px; font-weight:650 }
.card-arrow { display:grid; place-items:center; color:#6b607c; width:27px; height:27px; border:1px solid #ede7f0; border-radius:50%; transition:background .2s,color .2s }
.card-arrow svg { width:14px; height:14px }
.card:hover .card-arrow { background:var(--violet); color:white }
.card h3 { font-size:21px; line-height:1.25; font-weight:780; margin:8px 0 6px; overflow-wrap:anywhere }
.card p { color:var(--muted); font-size:13px; line-height:1.6; flex:1; margin-bottom:14px; overflow-wrap:anywhere }
.by { display:flex; align-items:center; gap:8px; color:#5b5268; font-size:13px; line-height:1.3 }
.avatar { width:25px; height:25px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--cover); font-weight:700; color:#383140; font-size:11px }
.cover-fallback { min-height:200px; aspect-ratio:840/470; display:grid; place-content:center; justify-items:center; gap:12px; width:100%; color:#3e315a; padding:20px; text-align:center; background-image:linear-gradient(0deg,#ffffff35 1px,transparent 1px),linear-gradient(90deg,#ffffff35 1px,transparent 1px); background-size:22px 22px }
.cover-fallback svg { width:36px; height:36px }
.demo-note { color:#6d637b; font-size:12px; margin-top:17px }
.demo-note span { margin-right:4px; color:var(--violet) }
.empty { text-align:center; padding:45px 20px; background:#fff; border:1px dashed #d8caed; border-radius:14px }
.empty>span { display:inline-grid; place-items:center; width:40px; height:40px; color:var(--violet); background:#f3eeff; border-radius:50%; margin-bottom:10px }
.empty p { margin:8px 0 15px; color:var(--muted); font-size:14px }
.callout { display:flex; justify-content:space-between; align-items:center; gap:20px; border:1px solid #dfd3fd; border-radius:18px; margin-block:44px; padding:28px 32px; background:linear-gradient(110deg,#f1eafe,#f8f4ff 60%,#ede4ff) }
.callout h2 { font-size:29px; letter-spacing:-.04em; margin-block:7px 6px }
.callout p,.foot p { font-size:14px; color:var(--muted); line-height:1.55 }
.foot { border-top:1px solid var(--line); padding-block:26px }
.foot-inner { display:flex; justify-content:space-between; gap:20px; align-items:center }
.foot a:last-child { font-size:13px; font-weight:650; color:var(--violet); white-space:nowrap }
.foot a:last-child span { margin-left:4px }
.inner-page { padding-block:36px 65px; min-height:70vh }
.back-link { color:var(--muted); margin-bottom:36px }
.inner-intro,.detail-intro { margin-bottom:30px }
.inner-intro h1,.detail h1,.demo-mast h1 { font-size:clamp(42px,6vw,73px); font-weight:810; line-height:1.1; letter-spacing:-.06em; margin:14px 0; overflow-wrap:anywhere }
.inner-intro .btn { margin-top:20px }
.guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-bottom:22px }
.guide-grid article { border:1px solid var(--line); background:#fff; border-radius:13px; padding:22px }
.step { display:inline-grid; place-items:center; border-radius:8px; width:36px; height:36px; background:#ede6fe; color:var(--violet); font:650 14px var(--mono); margin-bottom:12px }
.guide-grid h2 { font-size:17px; margin-bottom:8px }
.guide-grid p,.template p,.detail-intro p,.demo-page p { color:var(--muted); line-height:1.7; font-size:14px }
.template { display:grid; grid-template-columns:minmax(160px,.6fr) minmax(0,1fr); gap:22px; background:#f0ebfa; border:1px solid #e5d9f8; border-radius:15px; padding:25px }
.template h2 { margin:7px 0; font-size:23px }
.template pre { font:14px/1.9 var(--sans); white-space:pre-wrap; overflow-wrap:anywhere; background:#fff; border:1px solid #e2d8ed; border-radius:9px; padding:12px 16px; margin:0 0 12px }
.copy-status { display:block; color:var(--violet); font-size:13px; line-height:1.4; margin-top:7px }
.detail-intro { display:flex; justify-content:space-between; align-items:end; gap:20px }
.detail-intro .by { margin-top:15px }
.detail-cover { border-radius:15px; overflow:hidden; background:var(--cover); border:1px solid #2e185114 }
.detail-cover img { width:100%; height:auto }
.detail-bottom { margin-top:22px }
.demo-mast { background:var(--cover); border-radius:17px; padding:30px; margin-bottom:22px }
.demo-mast .eyebrow { flex-wrap:wrap }
.demo-content { display:grid; grid-template-columns:1.2fr 1fr; gap:25px; align-items:center }
.demo-content h2 { margin-bottom:8px }
.timer { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:15px }
.timer output { font:700 29px/1 var(--mono); margin-right:5px }
@media (max-width:1030px) {
  .wrap { width:calc(100% - 58px) }
  .hero { gap:26px }
  .hero h1 { font-size:clamp(44px,5.75vw,70px) }
  .wide-break { display:none }
}
@media (max-width:760px) {
  .wrap { width:calc(100% - 38px) }
  .top-inner { min-height:66px; grid-template-columns:1fr auto; gap:10px }
  .top nav { display:none }
  .hero { grid-template-columns:1fr; gap:24px; padding-block:31px 34px }
  .hero h1 { font-size:clamp(44px,9vw,68px); margin-block:14px 12px }
  .hero p { font-size:15px; line-height:1.65 }
  .hero-actions { margin-top:19px }
  .hero-art { border-radius:18px }
  .gallery { padding-block:30px }
  .gallery-heading { margin-bottom:17px }
  .gallery-heading h2 { font-size:34px }
  .gallery-stat>span { font-size:32px }
  .controls { align-items:stretch; flex-direction:column; gap:9px; margin-bottom:13px }
  .filters { gap:5px }
  .filters button { padding-inline:8px; min-height:34px }
  .search { width:100% }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .callout { padding:22px; margin-block:26px }
  .callout h2 { font-size:24px }
  .foot p { display:none }
  .guide-grid { grid-template-columns:1fr }
}
@media (max-width:465px) {
  .cards { grid-template-columns:1fr }
  .gallery-heading { gap:8px }
  .gallery-heading p { max-width:225px }
  .gallery-stat { gap:5px }
  .gallery-stat small { display:none }
  .hero h1 { font-size:clamp(38px,11vw,52px) }
  .hero .eyebrow { letter-spacing:.065em; gap:7px; font-size:10px }
  .callout,.detail-intro { align-items:start; flex-direction:column }
  .template,.demo-content { grid-template-columns:1fr }
  .inner-page { padding-block:24px 42px }
  .back-link { margin-bottom:24px }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important }
}