/* vocpal.com, from the UI设计 canvas v5 (https://claude.ai/artifact/2HpXy4CuiZMXyosW5eeVqo). */
:root {
  color-scheme: light dark;
  --bg: #FBF8F3;
  --bg2: #F3EEE6;
  --card: #FFFFFF;
  --ink: #211B16;
  --ink2: #6A6157;
  --line: #E8E0D4;
  --inv: #211B16;
  --inv-ink: #F3ECE3;
  --inv-ink2: #C9BFB2;
  --inv-card: #2E2823;
  --btn: #211B16;
  --btn-ink: #FBF8F3;
  --gold-ink: #8C6000;
  --gold-bg: #FBF1DC;
  --rec: #FF9500;
  --rec-ink: #B35500;
  --blue-ink: #2167B0;
  --blue-bg: #E6F0FB;
  --chip: #F3EEE6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15120F;
    --bg2: #1D1915;
    --card: #241F1A;
    --ink: #F3ECE3;
    --ink2: #ABA195;
    --line: #362F28;
    --inv: #2A241E;
    --inv-ink: #F3ECE3;
    --inv-ink2: #C2B8AB;
    --inv-card: #373029;
    --btn: #F3ECE3;
    --btn-ink: #15120F;
    --gold-ink: #F0C04A;
    --gold-bg: #3A2E12;
    --rec: #FF9F0A;
    --rec-ink: #FFB340;
    --blue-ink: #8DB8EC;
    --blue-bg: #1C2836;
    --chip: #2E2823;
  }
}
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
:target { scroll-margin-top: 24px; }
body{margin:0}
a{color:inherit}a:hover{opacity:.75}
.pw{transform-box:fill-box;animation:pw 1.8s ease-in-out infinite}
.pw-l{transform-origin:100% 50%}.pw-r{transform-origin:0% 50%;animation-delay:.25s}
@keyframes pw{0%,100%{opacity:.35;transform:scaleY(.65)}50%{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){.pw{animation:none}}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,48px);box-sizing:border-box}
.only-wide{display:none}
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:center}
.day-row{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center}
.cols3{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.cols2{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 56px}
.flow{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.ar-r{display:none}
.spec{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 40px;padding:22px 0}
.doc{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:760px){.only-wide{display:inline-flex}.spec{grid-template-columns:200px minmax(0,1fr)}}
@media (min-width:900px){.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}.flow{flex-direction:row;align-items:center}.ar-r{display:block}.ar-d{display:none}}
@media (min-width:960px){.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.day-row{grid-template-columns:200px minmax(0,1fr) 400px;gap:48px}}
@media (min-width:1024px){.doc{grid-template-columns:220px minmax(0,700px);justify-content:center;gap:72px}}
summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}