:root{font-family:Arial,PingFang SC,Microsoft YaHei,sans-serif;color:#18202b;background:#f8f7f3;font-synthesis:none;font-weight:400;--orange:#b74412;--line:#d7d6d0;--muted:#8b8d8e}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{color:inherit;cursor:pointer;border:0;background:none}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b74412;outline-offset:4px}button{transition:background .18s,color .18s}button:hover:not(:disabled){color:var(--orange)}.app{height:100dvh;min-height:650px;overflow:hidden}header{height:95px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand h1{font-size:28px;margin:0 0 5px;font-weight:650;letter-spacing:.025em}.brand p{font-size:16px;color:#65696c;margin:0}.header-actions{display:flex;gap:24px;align-items:center;white-space:nowrap}.model-status{font-size:12px;color:#757975;display:flex;gap:7px;align-items:center}.model-status i{width:5px;height:5px;border-radius:50%;background:#6b836a}.language{font-size:12px;display:flex;align-items:center;gap:5px;padding-right:23px;border-right:1px solid #b4b4af}.language button{padding:6px 3px;color:#959591}.language button[aria-pressed=true]{color:var(--orange);font-weight:700}.segmented{display:flex;border:1px solid #aaaeb1;border-radius:5px;overflow:hidden}.segmented button{padding:12px 23px;font-weight:600;font-size:14px}.segmented button[aria-pressed=true]{background:var(--orange);color:#fff}main{height:calc(100% - 95px);display:flex}aside{width:26.2%;min-width:335px;max-width:410px;flex-shrink:0;display:grid;grid-template-columns:110px 1fr;grid-template-rows:1fr auto;padding:33px 21px 26px;gap:0 19px;background:#faf9f6;z-index:2}nav{border-right:1px solid var(--line);margin-bottom:90px}.nav-heading strong{display:block;font-size:16px;line-height:1.3}.nav-heading small{display:block;font-size:9px;color:#898b88;margin-top:4px}.nav-heading{height:62px}ol{list-style:none;padding:0;margin:0}li{height:66px;position:relative}li:before{content:"";position:absolute;width:1px;height:100%;left:29px;top:0;background:#ddded8}li button{height:100%;padding:0;display:flex;align-items:center;gap:9px;width:100%;text-align:left;font-size:14px;position:relative}.step-index{font-size:13px;color:#666c70;width:20px}.dot{width:10px;height:10px;flex-shrink:0;border-radius:50%;border:1px solid #bbbeb9;background:#faf9f6}li.selected button,li.selected .step-index{color:var(--orange)}li.selected .dot{background:var(--orange);border:2px solid #faf9f6;outline:1px solid var(--orange)}.story{padding:20px 0 0;min-width:0}.big-number{font-size:112px;line-height:.95;font-weight:500;color:var(--orange);letter-spacing:-.06em;font-variant-numeric:tabular-nums}.dash{display:block;height:2px;width:24px;background:var(--orange);margin:20px 0 14px}h2{font-size:23px;line-height:1.4;margin:0 0 7px;font-weight:650}.story-caption{font-size:14px;color:#939695;line-height:1.4;min-height:40px}.story p{font-size:14px;color:#626667;line-height:1.85;margin:29px 0 0}.story p+p{margin-top:24px}.drawing{display:block;padding:0;text-align:left;margin-top:50px;width:100%}.drawing img{width:100%;height:130px;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1);opacity:.65}.drawing span{font-size:12px;color:#777c7e;display:flex;justify-content:space-between;align-items:center;margin-top:10px}footer{grid-column:1/3;border-top:1px solid #cccfc8;padding-top:26px;align-self:end}footer p{font-size:12px;letter-spacing:1px;color:#565b60;margin:5px 0 8px}footer small{font-size:10px;color:#929593}.scene{position:relative;flex:1;min-width:0;overflow:hidden}.canvas-host{position:absolute;top:0;right:0;bottom:0;left:0}.canvas-host canvas{display:block;touch-action:none;outline:none}.view-switch{position:absolute;top:23px;left:24px;display:flex;border:1px solid #ffffff90;border-radius:5px;background:#faf9f6db;box-shadow:0 2px 18px #2736210c;padding:4px;gap:4px}.view-switch button{font-size:12px;display:flex;gap:7px;align-items:center;padding:9px 12px}.view-switch .chosen{background:#fff;border-radius:3px;color:var(--orange)}.annotation{position:absolute;left:0;top:0;z-index:1;font-size:12px;display:flex;align-items:center;gap:10px;background:#fffef8ed;border:1px solid #ffffffaa;border-radius:3px;padding:9px 12px;box-shadow:0 3px 18px #00000012;white-space:nowrap}.annotation:before{content:"";position:absolute;width:1px;height:33px;background:#fff;left:12px;top:100%}.annotation:after{content:"";position:absolute;width:5px;height:5px;background:#fff;border-radius:50%;top:calc(100% + 32px);left:10px}.a1{border-color:#c86d42}.scene-note{position:absolute;right:25px;bottom:155px;display:flex;flex-direction:column;align-items:flex-end;font-size:11px;gap:8px;color:#384a3e;text-shadow:0 1px #fff9}.compass-symbol{border:1px solid #7e8c7c;width:33px;height:33px;display:grid;place-items:center;border-radius:50%;font-size:14px;background:#fff9}.playback{position:absolute;bottom:38px;left:14px;right:16px;min-height:107px;display:flex;align-items:center;justify-content:space-around;gap:12px;border:1px solid #eeeee7;background:#fffefaee;border-radius:12px;padding:18px 22px 20px;box-shadow:0 8px 30px #38402b13;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.transport{display:flex;align-items:center;justify-content:space-between;gap:23px;flex:1}.step-nav{display:flex;align-items:center;gap:15px;padding:0;font-size:14px;white-space:nowrap;text-align:left}.step-nav small{display:block;font-size:11px;color:#7f8486;margin-top:7px}.square{display:grid;place-items:center;border:1px solid #d1d3d2;width:43px;height:48px;border-radius:5px}.play{background:var(--orange);color:#fff!important;display:flex;align-items:center;justify-content:center;gap:10px;min-width:165px;height:68px;font-size:18px;border-radius:5px;padding:0 20px}.play:hover{background:#97370c}.tools{display:flex;gap:20px;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:0 24px;margin-left:10px}.tool{display:flex;flex-direction:column;gap:8px;align-items:center;font-size:12px;white-space:nowrap;padding:0}.tool.active{color:var(--orange)}.gesture{display:flex;gap:12px;align-items:center;font-size:12px;line-height:1.6;color:#555b5e;white-space:nowrap}.gesture small{display:block;color:#858a8b;font-size:11px}.progress{position:absolute;left:20px;bottom:0;width:calc(100% - 40px);height:4px;margin:0;accent-color:var(--orange);cursor:pointer;opacity:.6}.loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;background:#e5e8e0f2;display:grid;place-items:center}.loading-card{width:310px}.load-number{font-size:60px;font-weight:300;color:var(--orange)}.loading h3{font-size:19px;font-weight:500}.loading p{font-size:12px;color:#787f79}.load-track{background:#c8cebf;height:2px;margin-top:25px}.load-track i{display:block;height:100%;background:var(--orange)}.loading button{padding:12px 20px;border:1px solid var(--orange);border-radius:4px}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#18201cc9;z-index:20;display:grid;place-items:center;padding:20px}.modal>div{background:#faf9f6;padding:40px;position:relative;max-width:800px;width:100%;border-radius:10px}.modal img{width:100%;max-height:70vh;object-fit:contain}.modal button{position:absolute;right:10px;top:10px}.modal p{color:#777;font-size:13px}.en h2{font-size:23px}.en li button{font-size:12px}.en .nav-heading strong{font-size:14px}.en .brand h1{font-size:26px}.en .story p{line-height:1.65}.en .play{font-size:17px}.en .step-nav{font-size:12px}.en .gesture{font-size:10px}.en .tools{padding:0 18px}.en footer p{letter-spacing:0}@media(max-height:850px)and (min-width:900px){aside{padding-top:25px}nav{margin-bottom:40px}.story{padding-top:10px}.big-number{font-size:88px}li{height:55px}.story p{margin-top:21px;font-size:13px}.story p+p{margin-top:16px}.drawing{margin-top:25px}.drawing img{height:85px}footer{padding-top:15px}h2{font-size:21px}.story-caption{font-size:12px}.playback{bottom:24px}.scene-note{bottom:145px}}@media(max-width:1300px){.model-status{display:none}.header-actions{gap:16px}.gesture{display:none}.tools{border-right:0;padding-right:0;margin-left:0;gap:20px}.playback{padding:15px 20px}.transport{gap:18px}.play{min-width:135px;font-size:16px}.square{width:35px}.step-nav{gap:9px}aside{grid-template-columns:91px 1fr;gap:0 16px;min-width:315px;padding-left:17px;padding-right:17px}.story p{font-size:13px}.big-number{font-size:100px}.en .brand h1{font-size:23px}}@media(max-width:900px){header{height:83px;padding:14px 18px}.brand h1{font-size:20px}.brand p{font-size:12px}.language{border:0;padding-right:0}.header-actions{gap:12px}.segmented button{padding:10px 13px}.app{min-height:600px}main{height:calc(100% - 83px)}aside{min-width:265px;width:30%;grid-template-columns:1fr;padding:20px 16px;overflow:auto;display:flex;flex-direction:column}nav{border:0;margin-bottom:10px}.nav-heading{height:36px}.nav-heading small{display:none}ol{display:flex;justify-content:space-between}li{height:38px}li:before{display:none}li button{font-size:0;gap:0;justify-content:center;width:29px}.step-index{font-size:13px}.dot{display:none}li.selected{background:#f0e0d6;border-radius:4px}.story{padding-top:15px}.big-number{font-size:80px}.story h2,.en .story h2{font-size:20px}.drawing{margin-top:25px}.drawing img{height:80px}footer{margin-top:auto;padding-top:15px}.playback{flex-wrap:wrap;bottom:15px;left:12px;right:12px;gap:15px;padding:12px 12px 15px}.transport{flex-basis:100%;gap:5px}.tools{border:0;width:100%;justify-content:center;gap:35px}.tool{flex-direction:row;gap:8px}.play{height:47px;font-size:15px;min-width:130px}.step-nav>span:not(.square){display:none}.square{height:40px}.scene-note{bottom:160px;font-size:9px}.view-switch{top:14px;left:13px}.annotation{font-size:10px;padding:7px}.en .brand h1{font-size:20px}}@media(max-width:600px){.app{height:auto;min-height:100dvh;overflow:visible}header{height:85px;gap:8px;padding:12px 14px}.brand h1,.en .brand h1{font-size:17px;max-width:235px;line-height:1.3}.brand p{font-size:10px;max-width:215px;line-height:1.4}.header-actions{gap:5px}.segmented{display:none}.language{font-size:11px;gap:1px}main{height:auto;display:flex;flex-direction:column}aside{display:block;width:100%;min-width:0;max-width:none;padding:16px 17px 18px}.nav-heading{display:none}ol{justify-content:space-between;border-bottom:1px solid #d9dad4;padding-bottom:12px}li button{width:auto;gap:4px;font-size:11px;padding:0 7px}.step-index{font-size:10px;width:auto}.story{position:relative;padding:16px 0 0 62px;min-height:110px}.big-number{position:absolute;left:0;top:16px;font-size:48px}.dash,.story-caption,.story p+p,.drawing,footer{display:none}.story h2,.en .story h2{font-size:18px;margin-bottom:6px}.story p{font-size:12px;line-height:1.65;margin:0}.scene{height:calc(100dvh - 275px);min-height:470px;flex:none}.playback{bottom:15px}.scene-note{bottom:150px}.en li button{font-size:9px;padding:0 3px}.en .story p,.view-switch button{font-size:11px}.annotation{display:none}}.scene,.app,.canvas-host{overflow:clip}li button>span:last-child{min-width:0}.en li button{font-size:11px}.en .story h2{font-size:21px}@media(min-width:901px)and (max-width:1300px){.en aside{grid-template-columns:108px 1fr;gap:0 13px}.en .story p{font-size:12px;line-height:1.6}.en .story-caption{font-size:11px}.en .drawing{margin-top:18px}.en .drawing img{height:65px}.en .story h2{font-size:19px}.en .nav-heading strong{font-size:13px}}@media(max-width:600px){.app{height:100dvh;min-height:700px;overflow:clip}main{height:calc(100% - 85px);min-height:0}aside{flex-shrink:0;overflow:visible}nav ol{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}nav li{height:48px;min-width:0}nav li button,.en nav li button{display:flex;flex-direction:column;justify-content:center;gap:5px;width:100%;height:48px;padding:2px;font-size:9px;line-height:1.15;text-align:center;overflow-wrap:anywhere}nav .step-index{font-size:10px}nav li button>span:last-child{max-width:100%}.scene{flex:1;height:auto;min-height:300px}.story{min-height:100px}.en .story h2{font-size:18px}.scene-note{display:none}.playback{bottom:12px}.view-switch{top:10px}}.nav-compact{display:none}@media(max-width:600px){.nav-full{display:none}.nav-compact{display:block}.en nav li button{font-size:10px;overflow-wrap:normal}}
