:root{--ink:#34334e;--body:#524861;--muted:#676481;--accent:#873492;--line:#d4c9e6;--panel:#e9e7f6;--card:#f7f5ff;--action:linear-gradient(120deg,#aa4deb,#da299d);--title:linear-gradient(100deg,#b729ae,#e51699 54%,#9b62bd);--shadow:0 8px 24px #7162811c}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 70% 20%,#d6e5ff 0,transparent 47%),radial-gradient(ellipse at 22% 65%,#e8d4f5 0,transparent 48%),linear-gradient(140deg,#c8c9df,#e0ddf4 57%,#cdc8e3);background-attachment:fixed;font-family:"Segoe UI","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}a{color:var(--accent);text-underline-offset:4px}button,input{font:inherit}button,a,input{touch-action:manipulation}a:hover{text-decoration:underline}a:focus-visible,button:focus-visible,input:focus-visible,canvas:focus-visible,video:focus-visible{outline:3px solid #8b44be;outline-offset:3px}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}p{overflow-wrap:anywhere}h1{font-weight:700;line-height:1.25;letter-spacing:-.6px;background:var(--title);background-clip:text;-webkit-background-clip:text;color:transparent;text-wrap:balance}h2{color:#42334f}::selection{background:#dfbeef;color:#34334e}
.skip-link{position:absolute;left:20px;top:-60px;z-index:10;background:var(--card);padding:12px;border-radius:9px}.skip-link:focus{top:12px}.masthead{max-width:1160px;margin:0 auto;padding:28px 24px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:1px;font-weight:600}.brand svg{width:22px;height:22px;color:var(--accent)}nav{display:flex;gap:8px;flex-wrap:wrap}nav a{font-size:13px;text-decoration:none;padding:8px 12px;border:1px solid transparent;border-radius:10px;color:var(--body)}nav a:hover{background:var(--card);border-color:var(--line);text-decoration:none}
.blog main{max-width:1112px;margin:auto;padding:8px 24px 0}.intro{background:var(--panel);border:1px solid white;border-radius:23px;padding:38px 44px;box-shadow:var(--shadow);margin-bottom:22px}.kicker{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:1.5px;color:var(--accent);margin-bottom:20px}.kicker b{padding:6px 10px;border-radius:9px;background:#f7f5ff;font-weight:500;letter-spacing:.5px}.intro h1{font-size:clamp(32px,3.7vw,47px);max-width:900px;margin:0 0 20px}.subtitle{font-size:19px;line-height:1.65;margin:0 0 20px;color:var(--body)}.lead{font-size:16px;line-height:1.95;margin:0;max-width:890px;color:var(--body)}.intro-meta{margin-top:23px;font-size:12px;color:var(--muted)}.intro-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.primary,.demo-link{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:12px 20px;min-height:44px;border:0;border-radius:10px;background:var(--action);color:#fff;font-size:14px;text-decoration:none;box-shadow:0 4px 14px #aa4deb24;transition:transform 180ms}.primary:hover,.demo-link:hover{transform:translateY(-1px);text-decoration:none;filter:brightness(1.03)}.secondary{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--accent);font-size:14px;text-decoration:none}.secondary:hover{border-color:#b57bd0;text-decoration:none}
.prose{border:1px solid #fff;border-radius:23px;background:var(--card);padding:24px 32px 40px;box-shadow:var(--shadow)}.prose>p,.prose>h2,.prose>ul,.prose>aside,.table-wrap{max-width:800px;margin-left:auto;margin-right:auto}.prose>p{font-size:16px;line-height:1.95;color:var(--body);margin-top:0;margin-bottom:24px}.prose h2{font-size:24px;font-weight:600;line-height:1.55;margin-top:48px;margin-bottom:20px}.prose h2:before{content:"";display:inline-block;width:6px;height:22px;border-radius:4px;margin-right:12px;background:linear-gradient(#c4dbfa,#c897d6);vertical-align:-2px}figure{margin:30px auto;max-width:1000px}figure.hero{margin:0 auto 32px}figure img{display:block;width:100%;height:auto;border-radius:12px;background:var(--panel);border:1px solid var(--line)}figcaption{font-size:12px;line-height:1.8;color:var(--muted);margin-top:12px;padding:0 3px}.table-wrap{border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-top:28px;margin-bottom:28px}table{border-collapse:collapse;width:100%;font-size:15px}caption{text-align:left;padding:16px 20px;background:linear-gradient(115deg,#c4dbfa,#e5cff8);font-weight:600}th,td{padding:13px 20px;text-align:left;border-bottom:1px solid #e0d9ed}th{font-weight:600;background:var(--panel)}tbody tr:last-child td{border-bottom:0;font-weight:600;background:#eeebfa}.limits{border:1px solid var(--line);border-radius:15px;padding:24px 28px 24px 44px;background:#eeebf8;font-size:15px;line-height:1.95;color:var(--body)}.limits li+li{margin-top:12px}.try-demo{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px;border-radius:15px;background:linear-gradient(115deg,#dce9fc,#eadcf6);border:1px solid white;margin-top:32px;margin-bottom:20px}.try-demo strong{font-size:19px;font-weight:600}.try-demo p{font-size:13px;line-height:1.8;margin:8px 0 0;color:var(--body)}.demo-link{white-space:nowrap}.prose .demo-note,.prose .source-note{font-size:12px;line-height:1.9;color:var(--muted)}.source-note{border-top:1px solid var(--line);padding-top:24px;margin-top:32px!important}.blog footer{max-width:1112px;margin:auto;padding:26px 28px 35px;display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}.media-fallback{display:none;padding:26px;border:1px dashed #b57bd0;border-radius:12px;background:var(--panel);color:var(--body)}

.film{max-width:1000px;margin:0 auto 38px;border:1px solid var(--line);border-radius:15px;background:var(--panel);overflow:hidden}.film-heading{padding:22px 24px 20px;background:linear-gradient(115deg,#c4dbfa,#e5cff8)}.film .film-heading h2{margin:0 0 8px;font-size:21px}.film h2:before{display:none}.film-heading p{margin:0;font-size:13px;line-height:1.8;color:var(--body)}.film-body{padding:18px}.film video{width:100%;aspect-ratio:16/9;display:block;background:#e0ddf4;border:1px solid #fff;border-radius:12px;object-fit:contain}.film-note{font-size:12px;color:var(--muted);line-height:1.8;margin:14px 2px}.chapters{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.chapters button{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:10px 12px;color:var(--accent);font-size:12px;min-height:42px}.chapters button:hover{border-color:#b57bd0}.chapters button[aria-pressed=true]{background:#fff;border-color:#b57bd0;box-shadow:inset 0 0 0 1px #c897d6}.chapters time{color:var(--muted);margin-right:8px;font-variant-numeric:tabular-nums}.film-links{display:flex;gap:18px;font-size:12px;margin:12px 2px 2px}
.demo header{max-width:1500px;padding:28px 32px 20px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:24px}.demo header small{color:var(--accent);font-size:11px;letter-spacing:2px}.demo h1{font-size:34px;margin:9px 0 10px}.demo header p{color:var(--body);font-size:13px;margin:0;line-height:1.8}.demo .head-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.tag{border:1px solid #fff;border-radius:10px;background:#f7f5ff9e;padding:9px 12px;font-size:12px;color:var(--muted)}.demo main{display:grid;grid-template-columns:minmax(0,1fr) 306px;gap:20px;max-width:1500px;padding:0 28px 24px;margin:auto;align-items:start}.scene{position:relative;min-width:0;height:clamp(570px,calc(100vh - 174px),900px);overflow:hidden;background:radial-gradient(ellipse at 68% 30%,#f7faff,#e0ddf4 63%,#d1c7e6);border:1px solid white;border-radius:23px;box-shadow:var(--shadow)}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.scene-label{position:absolute;top:22px;left:24px;color:var(--muted);font-size:11px;letter-spacing:1.5px;pointer-events:none}.hint{position:absolute;bottom:20px;left:20px;right:20px;color:var(--body);font-size:12px;line-height:1.8;pointer-events:none;text-align:center;background:#f7f5ffd9;border:1px solid white;border-radius:10px;padding:10px}.demo aside{border:1px solid white;border-radius:23px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}.panel-title{padding:19px 22px;background:linear-gradient(115deg,#c4dbfa,#e5cff8)}.demo h2{font-size:18px;font-weight:600;margin:0}.panel-title p{font-size:12px;color:var(--body);margin:7px 0 0}.panel-body{padding:22px}.demo label{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--body)}#amount{color:var(--accent);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:#aa4deb;margin:16px 0 19px;min-height:30px}.demo button{border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--accent);min-height:44px;padding:10px 12px;font-size:13px;transition:background 180ms,border-color 180ms}.demo button:hover{background:#fff;border-color:#b57bd0}.states{display:flex;gap:7px;margin-bottom:12px}.states button{flex:1}.states button[aria-pressed=true]{background:#fff;border-color:#b57bd0;box-shadow:inset 0 0 0 1px #c897d6;font-weight:600}.demo #play{width:100%;background:var(--action);color:#fff;border:0;box-shadow:0 4px 14px #aa4deb24}.view-controls{display:flex;gap:7px;margin-top:12px}.view-controls button{flex:1;font-size:12px;padding:9px 5px}.demo .info{margin-top:22px;padding:18px 0 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.9}.info strong{color:var(--body);font-weight:600}.info p{margin:7px 0 16px}.info p:last-child{margin-bottom:0}.demo #error{position:absolute;top:62px;left:20px;right:20px;font-size:14px;color:#8d335c;background:#fff2f8;border-radius:12px;padding:18px;line-height:1.8}.demo #error:empty{display:none}.demo footer{max-width:1500px;padding:0 32px 24px;margin:auto;font-size:12px;color:var(--muted);display:flex;gap:20px;justify-content:space-between}
@media(max-width:1100px){.intro h1{font-size:38px}.demo main{grid-template-columns:minmax(0,1fr) 290px}.demo h1{font-size:30px}.demo header{padding:24px}.demo main{padding:0 22px 22px}.scene{height:650px}}
@media(max-width:800px){.masthead{padding:20px 18px;display:block}.brand{font-size:12px;margin-bottom:12px}nav{gap:4px}nav a{padding:8px 10px;font-size:12px}.blog main{padding:0 18px}.intro{padding:26px 22px}.intro h1{font-size:32px}.subtitle{font-size:16px}.lead{font-size:15px}.kicker{font-size:11px;letter-spacing:.6px;gap:8px}.prose{padding:18px 20px 28px}.prose>p{font-size:16px}.prose h2{font-size:22px;margin-top:36px}.prose h2:before{display:none}.try-demo{display:block;padding:20px}.try-demo .demo-link{margin-top:18px}.film-heading{padding:18px}.film .film-heading h2{font-size:20px}.film-body{padding:12px}.chapters{gap:6px}.chapters button{padding:9px;font-size:11px}.film-links{flex-wrap:wrap;gap:12px}.limits{padding:20px 20px 20px 34px}.blog footer{padding:24px 20px;flex-wrap:wrap}.demo header{display:block;padding:24px 18px 18px}.demo h1{font-size:32px}.demo .head-links{justify-content:flex-start;margin-top:16px}.demo main{grid-template-columns:1fr;gap:18px;padding:0 18px 22px}.scene{height:510px;min-height:0}.demo aside{width:100%}.panel-body{padding:20px}.demo footer{padding:0 20px 24px;flex-wrap:wrap}.demo .info{font-size:13px}.tag{font-size:11px}.hint{font-size:11px;bottom:14px;left:14px;right:14px}.scene-label{left:20px;top:20px}.intro-actions a{flex:1}}
@media(max-width:370px){.blog main,.demo main{padding-left:12px;padding-right:12px}.intro{padding:24px 18px}.intro h1,.demo h1{font-size:29px}.prose{padding-left:16px;padding-right:16px}.scene{height:450px}.kicker{flex-wrap:wrap}.intro-actions a{min-width:150px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}