:root{--bg:#201e25;--ink:#f3efe6;--muted:#c0bcb6;--line:#514c55;--panel:#2b2830;--mint:#d5e9df;--green:#236c63;--font:'Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;color-scheme:dark}
:root[data-theme=light]{--bg:#f3efe6;--ink:#201e25;--muted:#5c565f;--line:#c8c1b8;--panel:#e8e3da;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.7}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-underline-offset:5px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:5px}button{color:inherit}img{max-width:100%;object-fit:contain}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.2;font-weight:650;letter-spacing:-.035em}.wrap{width:min(1248px,calc(100% - 112px));margin-inline:auto}.skip{position:absolute;left:16px;top:-80px;padding:12px;background:var(--ink);color:var(--bg);z-index:10}.skip:focus{top:8px}.site-header{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:20px;font-weight:650;min-height:44px}.brand-mark{width:36px;height:36px;background:currentColor;mask:url('assets/laoyi-mark.svg') center/contain no-repeat}.brand-mode{font-weight:400;font-size:16px}.site-header nav{display:flex;gap:10px;align-items:center}.site-header nav a{min-width:48px;min-height:44px;display:grid;place-items:center;text-decoration:none;border:1px solid transparent}.site-header nav a[aria-current]{border-color:var(--ink)}.play-page nav a[aria-current]{border-radius:50%}.theme{font-size:14px;min-width:56px;min-height:44px;background:none;border:0;margin-left:16px;text-decoration:underline;text-underline-offset:5px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-top:68px;padding-bottom:72px}.beta{display:flex;gap:8px;align-items:center;font-size:14px;margin-bottom:24px}.beta span{width:7px;height:7px;border-radius:50%;background:var(--mint)}[data-theme=light] .beta span{background:var(--green)}h1{font-size:clamp(44px,4.9vw,72px);line-height:1.15}.intro{font-size:18px;line-height:1.9;max-width:29em;color:var(--muted);margin-top:28px}.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:48px;padding:13px 24px;min-height:56px;border-radius:99px;background:var(--ink);color:var(--bg);font-weight:600;text-decoration:none;margin-top:32px;transition:transform 180ms ease}.primary:hover{transform:translateY(-2px)}.primary:active{transform:translateY(1px)}.primary span{font-size:22px;font-weight:400}.scenes-copy{font-size:14px;margin-top:24px;color:var(--muted)}.hero-product{min-width:0}.scene{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:#292630;color:#f3efe6;border-radius:24px}.scene-top{position:absolute;inset:18px 20px auto;display:flex;justify-content:space-between;gap:8px;font-size:13px;align-items:center}.sample{font-size:12px;color:#d2cec7;border:1px solid #6f6872;border-radius:4px;padding:1px 6px;white-space:nowrap}.wheel{position:absolute;width:77%;aspect-ratio:1;top:10.5%;left:11.5%}.sectors{width:100%;height:100%;display:block}.category-buttons{position:absolute;inset:0}.category-button{position:absolute;width:20%;height:23%;padding:0;border:none;border-radius:40%;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;gap:2px;transform:translate(-50%,-50%);color:var(--category-ink);font-size:13px}.category-button svg{width:72%;height:65%;overflow:visible}.category-button[aria-pressed=true]{outline:2px solid var(--category-ink);outline-offset:1px}.category-button:hover{background:#ffffff30}.category-button:focus-visible{outline:3px solid #201e25;outline-offset:2px}.wheel-hub{position:absolute;left:37%;top:37%;width:26%;height:26%;border:6px solid #c9d6cd;background:#f2eadf;border-radius:50%;display:grid;place-items:center;color:#236c63}.yi-script{display:block;width:75%;height:65%;background:currentColor;mask:url('assets/home-yi-calligraphy.svg') center/contain no-repeat}.arrangement{position:absolute;left:9%;right:9%;bottom:4%;padding:15px 18px;background:#d5e9df;color:#214d47;border-radius:16px;transition:transform 400ms ease,background 300ms ease}.activity-line{display:flex;justify-content:space-between;gap:10px;align-items:center}.selected-name{font-size:22px;font-weight:650}.example-status{font-size:12px}.arrange-detail{font-variant-numeric:tabular-nums;font-size:15px;opacity:.0;max-height:0;overflow:hidden;transition:opacity 350ms ease}.arrange-detail span{margin-inline:8px}.phase-note{font-size:12px;margin-top:3px}.discover[data-phase='1'] .arrange-detail,.discover[data-phase='2'] .arrange-detail{opacity:1;max-height:32px}.discover[data-phase='2'] .arrangement{transform:translateY(-4px)}.demo-controls{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:12px;font-size:12px}.demo-controls>div{display:flex;gap:2px}.demo-controls button{border:0;background:none;text-decoration:underline;text-underline-offset:4px;font-size:12px;min-height:44px;padding:8px}.progress-label{color:var(--muted)}.demo-description{font-size:12px;color:var(--muted);margin-top:0}.values{display:grid;grid-template-columns:1fr 1fr;gap:64px;border-top:1px solid var(--line);padding-block:56px 80px}.small-index{font-size:12px;color:var(--muted);display:block;margin-bottom:24px}.value h2{font-size:28px;letter-spacing:-.02em}.value p{font-size:16px;color:var(--muted);margin-top:20px;max-width:31em}.share-section{background:var(--panel);padding-block:80px}.share-layout{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:center}.share-copy h2{font-size:48px;line-height:1.25}.share-copy p{margin-top:28px;max-width:26em;color:var(--muted);font-size:18px}.share{background:#d5e9df;color:#214d47}.share .sample{color:#214d47;border-color:#7eaba1}.share-activity{position:absolute;top:14%;left:8%;right:8%;display:flex;gap:15px;align-items:center;padding-bottom:16px;border-bottom:1px solid #82ada4}.share-activity strong{font-size:20px}.share-activity p{font-size:12px;margin-top:6px}.share-route{position:absolute;top:35%;left:50%;height:15%;width:2px;background:#82ada4}.route-dot{position:absolute;left:-4px;top:0;width:10px;height:10px;border-radius:50%;background:#236c63;transition:transform 700ms ease}.share[data-phase='1'] .route-dot,.share[data-phase='2'] .route-dot{transform:translateY(60px)}.link-sheet{position:absolute;inset:46% 8% auto;padding:16px 18px;background:#f2eadf;color:#214d47;border-radius:14px;transition:transform 400ms ease,opacity 400ms ease}.link-caption{font-size:12px}.example-link{display:flex;justify-content:space-between;gap:16px;font-size:22px;margin-top:5px;font-weight:600}.link-sheet p{font-size:12px;margin-top:4px}.friend-sheet{position:absolute;inset:43% 8% auto;padding:20px 22px;background:#f2eadf;border-radius:14px;opacity:0;transform:translateY(15px);pointer-events:none;transition:transform 400ms ease,opacity 400ms ease}.friend-sheet>span{font-size:12px}.friend-sheet strong{font-size:22px;display:block;margin-top:10px}.friend-sheet p{font-size:14px;margin-top:7px}.same-information{margin-top:16px;border-top:1px solid #b5d0c7;padding-top:10px;font-size:13px}.share[data-phase='0'] .link-sheet{opacity:.5}.share[data-phase='2'] .link-sheet{opacity:0;transform:translateY(-15px)}.share[data-phase='2'] .friend-sheet{opacity:1;transform:none}.share-note{position:absolute;bottom:6%;left:8%;right:8%;font-size:13px}.start{padding-block:88px}.section-heading{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:40px}.section-heading h2{font-size:32px}.section-heading>span{font-size:13px;color:var(--muted)}.steps{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.steps li{display:flex;gap:18px}.steps li>span{font-size:18px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:44px;height:44px;flex:none}.steps h3{font-size:20px;margin-top:8px}.steps p{font-size:14px;color:var(--muted);margin-top:12px}.confirmation-note{font-size:14px;color:var(--muted);margin-top:32px;padding:16px 0;border-bottom:1px solid var(--line)}.tools{display:grid;grid-template-columns:180px 1fr;gap:48px;align-items:center;padding-bottom:88px}.tools-art{display:flex;align-items:center;gap:12px}.tools h2{font-size:24px}.tools p{font-size:15px;color:var(--muted);margin-top:16px;max-width:47em}.text-link{font-size:14px;min-height:44px;display:inline-flex;align-items:center;gap:24px;margin-top:8px}.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:72px;border-top:1px solid var(--line);padding-block:64px 88px}.faq h2{font-size:24px}.faq details{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:16px}.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;list-style:none;cursor:pointer;font-size:18px;min-height:44px}.faq summary::-webkit-details-marker{display:none}.faq summary span{font-size:24px;flex:none}.faq details[open] summary span{transform:rotate(45deg)}.faq details p{font-size:15px;color:var(--muted);margin-top:18px;padding-right:28px}.closing{border-top:1px solid var(--line);padding-block:64px;display:flex;align-items:center;gap:40px}.closing>.yi-script{width:110px;height:90px;flex:none}.closing h2{font-size:40px}.closing p{color:var(--muted);font-size:14px;margin-top:16px}.closing .primary{margin:0 0 0 auto;white-space:nowrap}.site-footer{border-top:1px solid var(--line);padding-block:28px;display:flex;gap:24px;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px}.site-footer>div{display:flex;gap:24px}.site-footer a{min-height:44px;display:flex;align-items:center}.work-page .primary{border-radius:0}.work-hero{min-height:calc(100svh - 197px);padding-block:80px;display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:center}.work-status{font-size:22px;margin-top:32px}.work-copy>p:not(.work-status){color:var(--muted);margin-top:12px}.work-art{position:relative;aspect-ratio:1}.square{position:absolute;width:80%;height:80%;border:1px solid var(--line)}.square-back{top:2%;left:20%}.square-front{top:14%;left:6%;display:grid;place-items:center;background:var(--bg);border-color:var(--ink)}.lao-script{display:block;background:currentColor;mask:url('assets/home-lao-calligraphy.svg') center/contain no-repeat;width:48%;height:65%}.work-art-caption{position:absolute;right:0;bottom:0;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.review{border:2px solid var(--line);padding:24px;margin-block:40px}.review[hidden]{display:none}.review h2{font-size:22px}.review p{font-size:14px}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.export-grid figure{margin:20px 0 0}.export-grid img{display:block;width:100%;height:auto}.export-grid figcaption{font-size:14px}.export-grid button{min-height:44px;background:var(--ink);color:var(--bg);border:0;padding:8px 14px;margin:8px}.export-grid a{display:inline-flex;align-items:center;min-height:44px}
@media(min-width:1600px){.hero{padding-block:88px}.hero-product{padding-left:24px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero{gap:32px;padding-top:56px}.hero h1{font-size:52px}.intro{font-size:16px}.scenes-copy{font-size:12px}.demo-controls{flex-wrap:wrap}.share-layout{gap:40px}.share-copy h2{font-size:40px}.share-copy p{font-size:16px}.share-activity strong{font-size:17px}.share-activity img{width:50px;height:50px}.share-activity p{font-size:11px}.work-hero{gap:40px}}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.site-header{height:80px}.brand{font-size:18px;gap:7px}.brand-mode{font-size:14px}.brand-mark{width:30px;height:30px}.site-header nav{gap:2px}.site-header nav a{min-width:44px}.theme{min-width:44px;margin-left:4px;font-size:12px}.hero{grid-template-columns:1fr;padding-top:44px;padding-bottom:40px;gap:32px}.hero h1{font-size:50px}.beta{margin-bottom:20px}.intro{font-size:16px;margin-top:22px;line-height:1.85}.primary{margin-top:26px}.scenes-copy{font-size:12px;line-height:1.8;margin-top:20px}.scene{border-radius:18px}.scene-top{font-size:11px;inset:12px 14px auto}.sample{font-size:10px}.category-button{font-size:10px;gap:1px}.wheel-hub{border-width:4px}.arrangement{padding:10px 13px}.selected-name{font-size:18px}.example-status{font-size:10px}.arrange-detail{font-size:12px}.phase-note{font-size:11px}.demo-controls{font-size:11px;margin-top:8px}.demo-controls button{font-size:11px;padding:6px}.demo-description{font-size:11px}.values{grid-template-columns:1fr;gap:36px;padding-block:36px 48px}.value h2{font-size:25px}.small-index{margin-bottom:16px}.value p{margin-top:14px;font-size:15px}.share-section{padding-block:48px}.share-layout{grid-template-columns:1fr;gap:28px}.share-copy h2{font-size:34px}.share-copy h2 br{display:none}.share-copy p{font-size:16px;margin-top:20px}.share-activity{gap:10px;padding-bottom:10px}.share-activity strong{font-size:16px}.share-activity p{font-size:10px}.share-activity img{width:46px;height:46px}.link-sheet{padding:12px 14px}.example-link{font-size:18px}.link-caption,.link-sheet p{font-size:11px}.friend-sheet{padding:12px 14px}.friend-sheet>span{font-size:11px}.friend-sheet strong{font-size:18px;margin-top:6px}.friend-sheet p{font-size:12px;margin-top:3px}.same-information{font-size:11px;margin-top:9px;padding-top:6px}.share-note{font-size:11px;bottom:5%}.start{padding-block:48px}.section-heading{display:block;margin-bottom:28px}.section-heading h2{font-size:28px}.section-heading>span{display:block;margin-top:12px}.steps{grid-template-columns:1fr;gap:24px}.steps p{margin-top:8px}.confirmation-note{font-size:13px;line-height:1.8;margin-top:24px}.tools{grid-template-columns:1fr;gap:16px;padding-bottom:48px}.tools-art img{width:52px;height:52px}.tools h2{font-size:23px}.tools p{font-size:14px;line-height:1.8;margin-top:14px}.faq{grid-template-columns:1fr;gap:28px;padding-block:40px 48px}.faq h2{font-size:24px}.faq summary{font-size:16px;line-height:1.6;gap:16px}.faq details p{font-size:14px;padding-right:0}.closing{padding-block:40px;display:grid;grid-template-columns:48px 1fr;gap:16px}.closing>.yi-script{width:48px;height:50px}.closing h2{font-size:28px}.closing p{font-size:12px;margin-top:12px}.closing .primary{grid-column:1/-1;margin:8px 0 0;justify-self:start}.site-footer{padding-block:20px;font-size:12px;gap:12px}.site-footer>div{gap:16px}.work-hero{grid-template-columns:1fr;padding-block:48px;min-height:0;gap:48px}.work-hero h1{font-size:48px}.work-status{font-size:20px;margin-top:26px}.work-copy>p:not(.work-status){font-size:15px}.work-art{width:78%;justify-self:center}.export-grid{grid-template-columns:1fr}.review{padding:16px}.review h2{font-size:18px}}
@media(max-width:350px){.wrap{width:calc(100% - 32px)}.brand-mode{display:none}.hero h1{font-size:43px}.scene-top{font-size:10px}.arrangement{left:7%;right:7%}.selected-name{font-size:16px}.example-status{font-size:9px}.category-button{font-size:9px}.phase-note{font-size:10px}.share-activity strong{font-size:14px}.share-activity p{font-size:9px}.share-activity img{width:38px;height:38px}.example-link{font-size:17px}.friend-sheet strong{font-size:16px}.share-note{font-size:10px}.demo-controls{gap:0}.progress-label{font-size:10px}.work-hero h1{font-size:42px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.primary:hover{transform:none}}
@media(max-width:700px){.scene-top,.sample,.category-button,.example-status,.phase-note,.share-activity p,.share-note,.progress-label{font-size:11px}}
.wheel{width:68%;left:16%;top:8%}.category-button{min-width:44px;min-height:44px}
@media(max-width:700px){.discover{aspect-ratio:1/1.15}.discover .wheel{width:72%;left:14%;top:4%}}
.share[data-phase='0'] .link-sheet{opacity:1}.demo-controls button{min-width:44px}.site-footer a{min-width:44px;justify-content:center}.category-button[data-category=billiards]{color:#201e25}
@media(max-width:700px){.share{aspect-ratio:1/1.12}}