*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:#233239;background:#e9eeef;letter-spacing:0}#scene{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:absolute;left:32px;right:32px;top:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}.brand{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600}.brand img{width:34px;height:34px;object-fit:contain}.draft{font-size:11px;color:#6b797f}.heading{position:absolute;top:112px;left:48px;pointer-events:none}.heading p{font-size:10px;font-weight:600;color:#6b7f88;margin:0 0 16px}.heading h1{font-size:30px;font-weight:500;line-height:1.4;margin:0 0 12px}.heading h1 span{display:block;font-size:48px;font-weight:650}.heading>div{font-size:12px;color:#6c7b81}.pin{position:absolute;left:0;top:0;display:flex;align-items:center;gap:14px;pointer-events:none;will-change:transform;filter:drop-shadow(0 4px 9px #23323914)}.pin-dot{width:10px;height:10px;background:#ec3b45;border:2px solid white;border-radius:50%;box-shadow:0 0 0 5px #e53c4822}.pin>div{position:relative;background:#fff;border-left:3px solid #df3544;border-radius:3px;padding:10px 16px;white-space:nowrap}.pin>div:before{content:"";position:absolute;left:-17px;top:50%;width:14px;height:1px;background:#de4651}.pin strong{display:block;font-size:13px;margin-bottom:4px}.pin div span{font-size:12px;color:#b82a38;font-variant-numeric:tabular-nums}.floor-key{position:absolute;left:48px;bottom:100px;display:flex;gap:18px;align-items:center;pointer-events:none}.floor-key>strong{color:#c43643;font-size:44px;font-weight:500;line-height:1}.floor-key strong span{font-size:16px;margin-left:3px}.floor-key>div{font-size:12px;border-left:1px solid #cbd4d7;padding-left:18px}.floor-key div span{display:block;font-size:10px;color:#78868c;margin-top:6px}nav{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);display:flex;align-items:center;background:#fffffff0;border:1px solid #dbe2e4;border-radius:7px;padding:6px;box-shadow:0 5px 20px #2332390a;gap:4px}button{border:0;background:none;font:inherit;cursor:pointer;color:#69797f;height:36px;min-width:36px;border-radius:4px}button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}button:hover{background:#edf2f3}button[aria-pressed=true]{background:#263c47;color:#fff}.views{display:flex;gap:3px}.views button{font-size:12px;padding:0 16px}.divider{height:20px;width:1px;background:#e1e7e9;margin:0 4px}#rotate,#reset{font-family:Arial;font-size:23px}footer{position:absolute;bottom:13px;width:100%;text-align:center;font-size:10px;color:#7e8b8f;padding:0 15px;pointer-events:none}#error{position:absolute;left:20%;right:20%;top:45%;padding:24px;background:white;border:1px solid #d2dbdf;line-height:1.7} @media(max-width:650px){header{left:18px;right:18px;top:18px}.brand{font-size:11px;gap:7px}.brand img{width:26px;height:26px}.draft{font-size:9px;max-width:84px;text-align:right}.heading{left:22px;top:80px}.heading p{font-size:8px;margin-bottom:9px}.heading h1{font-size:22px;margin-bottom:7px}.heading h1 span{font-size:32px;display:inline;margin-left:10px}.heading>div{font-size:10px}.floor-key{left:22px;bottom:110px}.floor-key>strong{font-size:30px}.floor-key>div{font-size:10px}.pin>div{padding:8px 10px}.pin strong{font-size:11px}.pin div span{font-size:11px}nav{bottom:44px}footer{font-size:9px;bottom:12px;line-height:1.5}.views button{padding:0 13px}}
body.embedded header,body.embedded .heading,body.embedded .floor-key,body.embedded footer{display:none}
body.embedded nav{bottom:18px}
body.embedded canvas{touch-action:pan-y}

.brand { min-width: 0; font-size: 22px; }
.brand img { width: 48px; height: 48px; flex: 0 0 48px; }
.brand span { line-height: 1.5; }
.heading p { font-size: 9px; margin-bottom: 10px; }
.heading h1 { font-size: 20px; margin-bottom: 8px; }
.heading h1 span { font-size: 24px; }
.heading > div { font-size: 11px; }
.pin { max-width: calc(100% - 24px); }
.pin-dot { flex: 0 0 10px; }
.pin > .pin-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; white-space: normal; }
.pin-logo { display: block; width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; }
.pin-copy { min-width: 0; max-width: 208px; }
.pin-copy strong { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 650px) {
  header { gap: 10px; }
  .brand { flex: 1; font-size: 14px; gap: 8px; }
  .brand img { width: 40px; height: 40px; flex-basis: 40px; }
  .draft { flex: 0 0 72px; }
  .heading { top: 96px; }
  .heading p { font-size: 8px; }
  .heading h1 { font-size: 16px; }
  .heading h1 span { font-size: 20px; }
  .heading > div { font-size: 10px; }
  .pin > .pin-card { padding: 10px; gap: 8px; }
  .pin-logo { width: 30px; height: 30px; flex-basis: 30px; }
  .pin-copy { max-width: 156px; }
  .pin-copy strong { font-size: 12px; }
}