*{box-sizing:border-box} :root{color:#233552;background:#faf9f6;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;font-synthesis:none}body{margin:0;min-height:100vh}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #405baf;outline-offset:5px}header{height:84px;display:flex;align-items:center;justify-content:space-between;margin:0 5%;border-bottom:1px solid #23355220;font-size:11px;letter-spacing:1.7px}.brand{text-decoration:none;color:inherit;font-weight:700;display:flex;gap:12px;align-items:center}.mark{font-size:30px;font-weight:400}.edition{color:#9198a1;font-size:10px}.text-button{border:0;background:none;letter-spacing:1px;font-size:12px;padding:10px 0}main{max-width:1600px;margin:auto;position:relative}.intro{position:absolute;top:36px;left:5%;z-index:1;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:4px;color:#828c9c}h1{font-size:clamp(24px,3vw,38px);letter-spacing:2px;font-weight:500;margin:12px 0}.intro p{font-size:12px;color:#8a92a0;letter-spacing:1px;margin:0}#viewport{height:clamp(430px,66vh,820px);width:100%;touch-action:none;position:relative}canvas{display:block;width:100%;height:100%}#loading{position:absolute;inset:0;display:grid;place-items:center;color:#939ba7;font-size:13px;letter-spacing:3px}.canvas-note{margin:0 5% 23px;display:flex;align-items:center;gap:8px;font-size:10px;color:#848d9b;letter-spacing:1px}.ink-dot{width:6px;height:6px;background:#263e92;border-radius:50%}.gesture{margin-left:auto;color:#9b9fa6}.controls{margin:0 5%;border-top:1px solid #23355222;border-bottom:1px solid #23355222;display:flex;align-items:center;gap:30px;padding:22px 0}.style-switch{display:flex;background:#eeeee9;padding:4px;border-radius:7px}.style-switch button{border:0;background:none;border-radius:4px;font-size:12px;padding:9px 16px;color:#838b96}.style-switch .selected{background:#fff;color:#253e81;box-shadow:0 1px 4px #2335520e}.slider{font-size:11px;display:flex;gap:12px;align-items:center;color:#768092;white-space:nowrap}.slider output{min-width:31px;color:#3f5274;font-variant-numeric:tabular-nums}.slider input{width:100px;accent-color:#324b8e;height:2px;cursor:pointer}.actions{margin-left:auto;display:flex;gap:15px}.actions button{border:0;background:none;font-size:11px;padding:9px 0;color:#7d8797}.actions button[aria-pressed=true]{color:#253e81}footer{margin:24px 5%;display:flex;justify-content:space-between;color:#a0a4aa;font-size:10px;letter-spacing:1px}.live-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#829c86;vertical-align:middle;margin-left:6px}@media(max-width:800px){header{height:64px}.edition{display:none}.intro{top:28px}.controls{flex-wrap:wrap;gap:20px}.slider{flex:1}.slider input{width:70px}.actions{margin-left:0;justify-content:flex-end;flex:1}.style-switch button{padding:8px 12px}#viewport{height:62vh;min-height:430px}.gesture{font-size:9px;letter-spacing:0}.canvas-note{gap:5px;letter-spacing:0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}