.jw-scene-art svg{width:360px;height:190px;max-width:100%}
@media(max-width:800px){.jw-scene-art svg{width:290px;height:153px}}
@media(max-width:380px){.jw-scene-art svg{width:245px;height:130px}}
.hp-frame{border:6px solid #222a38;border-bottom:0;border-radius:20px 20px 0 0;background:#f5f6f8;box-shadow:0 18px 54px #1d2d4b24,0 0 0 1px #bec6d0}
.hp-titlebar{height:38px;background:#f8f9fa;border-bottom:1px solid #e4e7eb;display:flex;align-items:center;gap:13px;padding:0 16px;color:#778293;font-size:10px;font-weight:600}
.hp-title-meta{margin-left:auto;font-size:8px;letter-spacing:.13em;color:#a1aab7}
.hp-dots{display:flex;gap:5px}.hp-dots i{width:7px;height:7px;border-radius:50%;background:#cad1da}
.hp-body{display:flex;height:calc(100% - 38px)}
.hp-sidebar{width:151px;flex:none;background:#fbfbfc;border-right:1px solid #e8ebef;padding:20px 12px;position:relative}
.hp-brand{display:flex;align-items:center;gap:8px;margin:0 4px 29px}.hp-brand>b{color:#3263e9;font-size:24px;letter-spacing:-2px;line-height:1}.hp-brand span{font-size:10px;font-weight:700;color:#24324a;white-space:nowrap}.hp-brand small{display:block;font-size:6px;color:#a2aebe;letter-spacing:.08em;margin-top:3px}
.hp-side-label{font-size:9px;color:#acb4c0;margin:0 9px 9px;font-weight:600}.hp-nav{height:34px;display:flex;align-items:center;gap:9px;padding:0 9px;border-radius:8px;font-size:10px;color:#8490a1;font-weight:600}.hp-nav span{font-size:14px;color:#9daabd}.hp-nav.active{background:#eaf0fd;color:#315ed5}.hp-nav.active span{color:#4774e6}
.hp-side-footer{position:absolute;bottom:17px;left:15px;display:flex;align-items:center;gap:8px;color:#6f7d90;font-size:9px;font-weight:600}.hp-side-footer small{display:block;font-size:7px;letter-spacing:.08em;color:#b2bbc8;margin-top:3px}.hp-avatar,.hp-top-avatar{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#e5ecfc;color:#4d76db;font-size:9px;font-weight:700}
.hp-main{flex:1;min-width:0;padding:0 25px;background:#f5f6f8}.hp-top{height:44px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9ecf0;color:#a0aab7;font-size:9px}.hp-top i{font-style:normal;margin:0 7px;color:#cbd1d9}.hp-top-avatar{width:25px;height:25px}
.hp-heading{padding:19px 0 17px}.hp-heading>span{font-size:8px;letter-spacing:.13em;font-weight:700;color:#9caabd}.hp-heading h2{margin:5px 0 4px;font-size:20px;letter-spacing:-.035em;color:#1b2940;line-height:1.2}.hp-heading p{margin:0;color:#8b98aa;font-size:10px}
.hp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.hp-card{min-width:0;min-height:103px;background:#fff;border:1px solid #edf0f4;border-radius:12px;padding:13px 13px 11px;box-shadow:0 3px 12px #1d304508}.hp-icon{display:grid;place-items:center;width:29px;height:29px;background:#eef3ff;color:#4f78e6;border-radius:9px;margin-bottom:10px}.hp-icon svg{width:18px;height:18px}.hp-card:nth-child(2) .hp-icon{background:#ecf6f4;color:#55aa9d}.hp-card:nth-child(3) .hp-icon{background:#f2effd;color:#8a7bcf}.hp-card:nth-child(4) .hp-icon{background:#fff4e9;color:#d99b59}.hp-card:nth-child(5) .hp-icon{background:#eef2ff;color:#6b82db}.hp-card strong,.hp-card small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hp-card strong{color:#25334a;font-size:11px;line-height:1.3}.hp-card small{margin-top:4px;color:#a0aaba;font-size:9px}
@media(max-width:800px){.hp-sidebar{width:119px;padding:13px 9px}.hp-brand{margin:0 2px 16px}.hp-brand>b{font-size:20px}.hp-brand span{font-size:9px}.hp-nav{height:28px;font-size:9px}.hp-main{padding:0 15px}.hp-top{height:33px}.hp-heading{padding:11px 0}.hp-heading h2{font-size:16px}.hp-heading p{font-size:9px}.hp-grid{gap:6px}.hp-card{min-height:74px;padding:8px}.hp-icon{width:23px;height:23px;border-radius:7px;margin-bottom:5px}.hp-icon svg{width:15px;height:15px}.hp-card strong{font-size:9px}.hp-card small{font-size:8px;margin-top:3px}.hp-side-footer{bottom:11px}.hp-titlebar{height:32px}.hp-body{height:calc(100% - 32px)}}
@media(max-width:480px){.hp-sidebar{width:86px;padding:12px 5px}.hp-brand{gap:4px;margin-bottom:14px}.hp-brand>b{font-size:17px}.hp-brand span{font-size:8px}.hp-brand small{font-size:5px}.hp-nav{padding:0 5px;gap:5px;font-size:8px}.hp-side-label{margin-left:5px}.hp-side-footer{left:8px}.hp-side-footer>span:last-child{display:none}.hp-main{padding:0 10px}.hp-heading h2{font-size:14px}.hp-card{padding:7px 6px}.hp-card strong{font-size:8px}.hp-card small{font-size:7px}}