/*! 世界历史沙盘 · © 2026 保留所有权利 All rights reserved.
 * 本文件为专有软件，未经书面许可不得复制、分发、修改或用于衍生作品。
 * 内容（疆域/朝代/事件/导览/词条）同受著作权保护。
 * build 20261101-55d755
 */
body.m2{
--m2-top: 60px;
--m2-time: 44px;
--m2-nav: 56px;
--m2-safe-t: env(safe-area-inset-top, 0px);
--m2-safe-b: env(safe-area-inset-bottom, 0px);
--m2-map-h: 48dvh;
--s0:#080d1a;
--s1:#0f1729;
--s2:#182138;
--s3:#22304e;
--hair:rgba(255,255,255,.07);
--gold:#ffcc5c;
--gold-dim:#c9a04a;
--txt:#eef2fb;
--txt2:#a7b3cd;
--txt3:#7d8aa6;
}
body.m2{
overflow:hidden !important; height:100% !important;
background:var(--s0);
overscroll-behavior:none;
-webkit-tap-highlight-color:transparent;
}
body.m2 #app{
display:block !important; height:100% !important; min-height:0 !important;
padding:0 !important; gap:0 !important;
}
body.m2 #side, body.m2 #controls, body.m2 #mobilebrief, body.m2 #tabbar,
body.m2 #sidetoggle, body.m2 #tlwrap, body.m2 #focusbar, body.m2 #yearbadge,
body.m2 #legal-line, body.m2 #searchwrap{ display:none !important; }
#m2-top{
position:fixed; top:0; left:0; right:0; z-index:40;
height:calc(var(--m2-top) + var(--m2-safe-t));
padding:var(--m2-safe-t) 12px 0 16px;
display:flex; align-items:center; gap:10px;
background:linear-gradient(180deg,rgba(8,13,26,.94) 62%,rgba(8,13,26,0));
backdrop-filter:blur(10px);
}
#m2-year{ display:flex; flex-direction:column; min-width:0; flex:1; }
#m2-year .y{ font-size:26px; font-weight:800; line-height:1.05; letter-spacing:.01em; color:#fff;
font-variant-numeric:tabular-nums; }
#m2-year .y small{ font-size:13px; font-weight:700; color:var(--gold); margin-left:5px; letter-spacing:.06em }
#m2-year .e{ font-size:12.5px; color:var(--txt2); margin-top:2px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.m2-ib{
width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center;
background:none; border:none; border-radius:12px; color:var(--txt);
cursor:pointer; font-family:inherit;
}
.m2-ib:active{ background:var(--s2) }
.m2-ib:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px }
.m2-acct{ position:relative }
.m2-acct::before{
content:''; position:absolute; inset:5px; border-radius:50%;
border:1.5px solid var(--line); background:var(--s2); pointer-events:none;
}
.m2-acct svg, .m2-acct > *{ position:relative }
.m2-acct.is-guest{ color:var(--txt2) }
.m2-acct.is-guest::before{ border-style:dashed }
.m2-acct.is-pro{ color:var(--gold) }
.m2-acct.is-pro::before{ border-color:var(--gold); background:rgba(237,169,63,.12) }
body.m2 #map-wrap{
position:fixed !important; left:0; right:0; z-index:1;
top:calc(var(--m2-top) + var(--m2-safe-t));
height:var(--m2-map-h);
border:none !important; border-radius:0 !important;
background:radial-gradient(120% 110% at 50% -8%,#16244e 0%,#070b18 100%) !important;
touch-action:none;
}
body.m2 #map-wrap svg#map{ width:100%; height:100%; display:block }
body.m2 .node .reg,
body.m2 .node .king{ display:none !important }
body.m2{ --ml-main:5.0px; --ml-sub:4.4px; --ml-cnt:4.0px; }
body.m2 .node .pow,
body.m2 .frag .sn{ paint-order:stroke; stroke:#050912; stroke-width:calc(.55px * var(--k, 1)) }
body.m2 .node .lead{ opacity:.45 }
body.m2 .m2-hide{ display:none !important }
#m2-focus{
position:fixed; z-index:31; left:0; right:0;
top:calc(var(--m2-top) + var(--m2-safe-t) + var(--m2-map-h) + 2px);
height:44px; align-items:center;
display:flex; gap:7px; padding:0 12px;
overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
transition:opacity .18s ease;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
}
#m2-focus::-webkit-scrollbar{ display:none }
#m2-focus button{
position:relative; isolation:isolate;
flex:0 0 auto; min-height:44px; padding:0 14px;
display:flex; align-items:center; justify-content:center;
background:transparent; border:none; color:var(--txt2);
font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer;
}
#m2-focus button::after{
content:''; position:absolute; z-index:-1;
left:0; right:0; top:50%; height:30px; transform:translateY(-50%);
border-radius:15px;
background:rgba(15,23,41,.82); backdrop-filter:blur(8px);
border:1px solid var(--hair);
}
#m2-focus button.on{ color:var(--on-accent,#241a02); font-weight:800 }
#m2-focus button.on::after{ background:var(--gold); border-color:var(--gold) }
#m2-focus button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
body.m2-sheet-full #m2-focus{ opacity:0; pointer-events:none }
#m2-sheet{
position:fixed; left:0; right:0; z-index:30;
bottom:calc(var(--m2-nav) + var(--m2-time) + var(--m2-safe-b));
height:var(--m2-sheet-h, 124px);
display:flex; flex-direction:column;
background:var(--s1);
border-radius:18px 18px 0 0;
box-shadow:0 -12px 34px rgba(0,0,0,.55);
transition:height .28s cubic-bezier(.32,.72,0,1);
}
body.m2.m2-dragging #m2-sheet{ transition:none }
#m2-grip{ height:22px; display:grid; place-items:center; flex:0 0 auto; cursor:grab; touch-action:none }
#m2-grip i{ display:block; width:38px; height:4px; border-radius:3px; background:#3a4767 }
#m2-sheet .sh-body{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
padding:0 16px 16px; -webkit-overflow-scrolling:touch }
#m2-sheet .sh-body::-webkit-scrollbar{ width:6px }
#m2-sheet .sh-body::-webkit-scrollbar-thumb{ background:#2b3550; border-radius:3px }
.sh-peek{ display:flex; align-items:center; gap:10px; padding:2px 0 10px }
.sh-peek .n{ flex:0 0 auto; background:var(--s3); color:var(--gold); font-weight:800;
font-size:12.5px; padding:4px 10px; border-radius:14px; white-space:nowrap }
.sh-peek .t{ flex:1; min-width:0; font-size:14.5px; line-height:1.35; color:var(--txt);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.sh-sec{ font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--txt3);
text-transform:none; margin:14px 0 8px }
.sh-card{ display:block; width:100%; text-align:left; background:var(--s2); border:none;
border-radius:14px; padding:13px 14px; margin-bottom:8px; cursor:pointer; font-family:inherit;
min-height:44px }
.sh-card:active{ background:var(--s3) }
.sh-card:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
.sh-card .cy{ font-size:12.5px; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums }
.sh-card .ct{ font-size:16px; font-weight:700; color:var(--txt); margin:3px 0 4px; line-height:1.35 }
.sh-card .cd{ font-size:14px; line-height:1.6; color:var(--txt2) }
.sh-row{ display:flex; align-items:center; gap:10px; padding:11px 2px; border-bottom:1px solid var(--hair);
width:100%; background:none; border-left:none; border-right:none; border-top:none;
text-align:left; cursor:pointer; font-family:inherit; min-height:44px }
.sh-row:last-child{ border-bottom:none }
.sh-row .r{ flex:0 0 92px; font-size:13.5px; color:var(--txt2) }
.sh-row .p{ flex:1; font-size:15px; color:var(--txt); font-weight:600 }
.sh-row .k{ flex:0 0 auto; font-size:13px; color:var(--gold) }
.sh-cta{ display:flex; align-items:center; justify-content:space-between; gap:8px;
width:100%; margin:10px 0 4px; padding:14px; border-radius:14px; border:none;
background:var(--s3); color:var(--txt); font-size:15px; font-weight:700;
font-family:inherit; cursor:pointer; min-height:48px }
.sh-cta .ic{ color:var(--gold) }
.sh-note{ font-size:12.5px; color:var(--txt3); line-height:1.6; margin-top:12px }
#m2-time{
position:fixed; left:0; right:0; z-index:35;
bottom:calc(var(--m2-nav) + var(--m2-safe-b));
height:var(--m2-time);
display:flex; align-items:center; gap:4px; padding:0 8px;
background:var(--s0); border-top:1px solid var(--hair);
}
#m2-time .tb{ width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border:none;
background:none; color:var(--txt2); border-radius:12px; cursor:pointer; font-family:inherit }
#m2-time .tb:active{ background:var(--s2) }
#m2-time .tb:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px }
#m2-play{
width:44px; height:44px; flex:0 0 auto; border-radius:50%; border:none;
background:var(--gold); color:#1c1403; display:grid; place-items:center;
box-shadow:0 3px 12px rgba(255,204,92,.3); cursor:pointer; font-family:inherit;
}
#m2-play:active{ transform:scale(.95) }
#m2-play:focus-visible{ outline:3px solid #fff; outline-offset:2px }
#m2-scrub{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; padding:0 4px }
#m2-scrub .lbl{ display:flex; justify-content:space-between; font-size:11px; line-height:1.15; color:var(--txt3) }
#m2-scrub .bar{ position:relative; height:3px; border-radius:3px; background:#26314c }
#m2-scrub .bar i{ position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--gold-dim) }
#m2-scrub .bar b{ position:absolute; top:-4.5px; width:12px; height:12px; border-radius:50%;
background:var(--gold); transform:translateX(-50%); box-shadow:0 0 0 3px rgba(255,204,92,.18) }
#m2-full{ width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border:none; background:none;
color:var(--txt2); border-radius:12px; cursor:pointer; font-family:inherit }
#m2-nav{
position:fixed; left:0; right:0; bottom:0; z-index:45;
height:calc(var(--m2-nav) + var(--m2-safe-b));
padding-bottom:var(--m2-safe-b);
display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
background:rgba(8,13,26,.96); backdrop-filter:blur(12px);
border-top:1px solid var(--hair);
}
#m2-nav button{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
border:none; background:none; color:var(--txt3); font-family:inherit;
font-size:10.5px; font-weight:600; cursor:pointer; min-height:44px;
}
#m2-nav button .ic{ opacity:.9 }
#m2-nav button.on{ color:var(--gold) }
#m2-nav button.on::before{ content:""; position:absolute; margin-top:-14px; width:22px; height:3px;
border-radius:2px; background:var(--gold) }
#m2-nav button:focus-visible{ outline:2px solid var(--gold); outline-offset:-3px }
.m2-screen{
position:fixed; left:0; right:0; top:0; z-index:38;
bottom:calc(var(--m2-nav) + var(--m2-safe-b));
background:var(--s0); display:none; flex-direction:column;
}
.m2-screen.on{ display:flex }
.m2-screen > header{
flex:0 0 auto; padding:calc(var(--m2-safe-t) + 12px) 16px 10px;
display:flex; align-items:center; gap:10px;
}
.m2-screen > header h1{ margin:0; font-size:22px; font-weight:800; color:#fff; flex:1 }
.m2-screen .scr-body{ flex:1; min-height:0; overflow-y:auto; padding:0 16px 24px }
.st-search{ display:flex; align-items:center; gap:8px; background:var(--s1); border-radius:14px;
padding:11px 13px; margin-bottom:12px; color:var(--txt3) }
.st-search input{ flex:1; background:none; border:none; color:var(--txt); font-size:16px;
font-family:inherit; outline:none; min-width:0 }
.st-chips{ display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; margin-bottom:16px;
padding-bottom:2px }
.st-chips::-webkit-scrollbar{ display:none }
.st-chips button{ flex:0 0 auto; min-height:34px; padding:7px 14px; border-radius:18px;
background:var(--s1); border:1px solid var(--hair); color:var(--txt2); font-size:13.5px;
font-weight:600; font-family:inherit; cursor:pointer }
.st-chips button.on{ background:var(--gold); color:var(--on-accent,#241a02); border-color:var(--gold); font-weight:800 }
.st-h{ font-size:13px; font-weight:700; color:var(--txt3); margin:20px 0 10px; letter-spacing:.04em }
.st-hero{ position:relative; display:block; width:100%; text-align:left; border:none; padding:0;
border-radius:18px; overflow:hidden; background:var(--s1); cursor:pointer; font-family:inherit;
margin-bottom:6px }
.st-hero .thumb{ height:150px; background:var(--s2); position:relative; overflow:hidden }
.st-hero .thumb svg{ position:absolute; inset:0; width:100%; height:100% }
.st-hero .meta{ padding:13px 15px 15px }
.st-hero .kick{ font-size:11.5px; font-weight:800; letter-spacing:.1em; color:var(--gold) }
.st-hero .ttl{ font-size:19px; font-weight:800; color:#fff; margin:5px 0 5px; line-height:1.3 }
.st-hero .hook{ font-size:14px; color:var(--txt2); line-height:1.55 }
.st-card{ display:grid; grid-template-columns:96px 1fr; gap:12px; width:100%; text-align:left;
background:var(--s1); border:none; border-radius:14px; padding:10px; margin-bottom:9px;
cursor:pointer; font-family:inherit; align-items:stretch; min-height:44px }
.st-card:active{ background:var(--s2) }
.st-card:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
.st-card .thumb{ position:relative; border-radius:10px; overflow:hidden; background:var(--s2); min-height:72px }
.st-card .thumb svg{ position:absolute; inset:0; width:100%; height:100% }
.st-card .ttl{ font-size:15.5px; font-weight:700; color:var(--txt); line-height:1.35 }
.st-card .hook{ font-size:13px; color:var(--txt2); margin-top:3px; line-height:1.5;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.st-card .foot{ display:flex; align-items:center; gap:8px; margin-top:7px; font-size:12px; color:var(--txt3) }
.st-badge{ display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:11px;
font-size:11px; font-weight:800; letter-spacing:.03em }
.st-badge.free{ background:rgba(120,200,150,.16); color:#7fd6a3 }
.st-badge.pro{ background:rgba(255,204,92,.16); color:var(--gold) }
.st-prog{ flex:1; height:3px; border-radius:2px; background:#26314c; overflow:hidden; max-width:88px }
.st-prog i{ display:block; height:100%; background:var(--gold) }
.sr-box{ display:flex; align-items:center; gap:9px; background:var(--s1); border-radius:14px;
padding:12px 14px; color:var(--txt3) }
.sr-box input{ flex:1; background:none; border:none; color:var(--txt); font-size:16px;
font-family:inherit; outline:none; min-width:0 }
.sr-sec{ font-size:12.5px; font-weight:700; color:var(--txt3); margin:18px 0 8px; letter-spacing:.04em }
.sr-item{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none;
border:none; border-bottom:1px solid var(--hair); padding:12px 2px; cursor:pointer;
font-family:inherit; min-height:48px }
.sr-item .ico{ flex:0 0 36px; height:36px; border-radius:10px; background:var(--s2);
display:grid; place-items:center; color:var(--gold) }
.sr-item .mid{ flex:1; min-width:0 }
.sr-item .t{ font-size:15.5px; font-weight:600; color:var(--txt);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sr-item .s{ font-size:12.5px; color:var(--txt3); margin-top:2px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sr-item .y{ flex:0 0 auto; font-size:13px; font-weight:700; color:var(--gold);
font-variant-numeric:tabular-nums }
.sr-chip{ display:inline-block; margin:0 6px 6px 0; padding:8px 13px; border-radius:16px;
background:var(--s1); border:1px solid var(--hair); color:var(--txt2); font-size:13.5px;
font-family:inherit; cursor:pointer; min-height:36px }
.m2-sheet2{
position:fixed; left:0; right:0; bottom:0; z-index:60;
max-height:88dvh; display:flex; flex-direction:column;
background:var(--s1); border-radius:20px 20px 0 0;
padding-bottom:var(--m2-safe-b);
transform:translateY(100%); transition:transform .3s cubic-bezier(.32,.72,0,1);
box-shadow:0 -16px 44px rgba(0,0,0,.6);
}
.m2-sheet2.on{ transform:none }
.m2-scrim{ position:fixed; inset:0; z-index:59; background:rgba(4,7,16,.62);
opacity:0; pointer-events:none; transition:opacity .25s }
.m2-scrim.on{ opacity:1; pointer-events:auto }
.m2-sheet2 > header{ display:flex; align-items:center; gap:10px; padding:16px 16px 10px; flex:0 0 auto }
.m2-sheet2 > header h2{ margin:0; font-size:18px; font-weight:800; color:#fff; flex:1 }
.m2-sheet2 .s2-body{ flex:1; min-height:0; overflow-y:auto; padding:0 16px 20px }
.m2-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.m2-grid button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
padding:15px 6px; border:none; border-radius:14px; background:var(--s2); color:var(--txt);
font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer; min-height:80px }
.m2-grid button .ic{ color:var(--gold) }
.m2-grid button:active{ background:var(--s3) }
.m2-grid button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
body.m2 #m2-tl .s2-body #controls{
display:flex !important; background:none; border:none; padding:0; gap:14px;
}
body.m2 #m2-tl .ctrow{ flex-wrap:wrap; gap:10px }
body.m2 #m2-tl .hint{ display:none }
body.m2 #m2-tl #track{ margin-top:6px }
body.m2 #m2-tl #track input{ height:48px }
body.m2 #m2-tl #track input::-webkit-slider-thumb{ width:28px; height:28px }
.m2-jump{ display:flex; gap:8px; align-items:center; margin-top:4px }
.m2-jump input{ flex:1; background:var(--s2); border:1px solid var(--hair); border-radius:12px;
color:var(--txt); padding:12px 14px; font-size:16px; font-family:inherit; min-width:0 }
.m2-jump button{ flex:0 0 auto; padding:12px 18px; border-radius:12px; border:none;
background:var(--gold); color:var(--on-accent,#241a02); font-weight:800; font-size:15px; font-family:inherit;
cursor:pointer; min-height:46px }
.m2-speeds{ display:flex; gap:8px }
.m2-speeds button{ flex:1; padding:11px 0; border-radius:12px; border:1px solid var(--hair);
background:var(--s2); color:var(--txt2); font-size:14px; font-weight:600; font-family:inherit;
cursor:pointer; min-height:44px }
.m2-speeds button.on{ background:var(--gold); color:var(--on-accent,#241a02); border-color:var(--gold); font-weight:800 }
.pro-head{ text-align:center; padding:6px 0 14px }
.pro-head .ic{ color:var(--gold) }
.pro-head h2{ margin:8px 0 4px; font-size:22px; font-weight:800; color:#fff }
.pro-head p{ margin:0; font-size:14px; color:var(--txt2); line-height:1.55 }
.pro-list{ list-style:none; margin:0 0 16px; padding:0 }
.pro-list li{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; font-size:15px;
color:var(--txt); line-height:1.5 }
.pro-list li .ic{ flex:0 0 auto; color:#7fd6a3; margin-top:2px }
.pro-price{ display:flex; gap:9px; margin-bottom:14px }
.pro-price button{ flex:1; position:relative; padding:13px 9px; border-radius:14px; border:2px solid var(--hair);
background:var(--s2); color:var(--txt); font-family:inherit; cursor:pointer; text-align:center }
.pro-price button.on{ border-color:var(--gold); background:rgba(255,204,92,.12);
box-shadow:0 0 0 3px rgba(255,204,92,.13) }
.pro-price button.on .p{ color:var(--gold) }
.pro-price button.on::after{ content:'✓'; position:absolute; top:6px; left:8px;
width:18px; height:18px; line-height:18px; text-align:center; border-radius:50%;
background:var(--gold); color:var(--on-accent,#241a02); font-size:12px; font-weight:900 }
.pro-price .p{ font-size:20px; font-weight:800 }
.pro-price .u{ font-size:12px; color:var(--txt3); margin-top:2px }
.pro-ch1{ margin:0 0 12px; text-align:center; font-size:13.5px; color:var(--txt3) }
.pro-ch1 b{ color:var(--txt); font-weight:700 }
.pro-ch{ display:flex; gap:9px; margin-bottom:12px }
.pro-ch button{ flex:1; min-height:44px; padding:10px; border-radius:12px;
border:1px solid var(--hair); background:var(--s2); color:var(--txt);
font-family:inherit; font-size:14px; font-weight:600; cursor:pointer }
.pro-ch button.on{ border-color:var(--gold); background:rgba(255,204,92,.1); color:var(--gold) }
.pro-buy{ width:100%; padding:16px; border-radius:14px; border:none; background:var(--gold);
color:var(--on-accent,#241a02); font-size:16.5px; font-weight:800; font-family:inherit; cursor:pointer; min-height:52px }
.pro-fine{ font-size:12.5px; color:var(--txt3); line-height:1.65; margin-top:12px; text-align:center }
.pro-restore{ display:block; width:100%; margin-top:10px; padding:12px; background:none; border:none;
color:var(--txt2); font-size:14px; font-family:inherit; cursor:pointer; min-height:44px }
#m2-onb{ position:fixed; inset:0; z-index:70; display:none; align-items:flex-end;
background:linear-gradient(180deg,rgba(8,13,26,0) 30%,rgba(8,13,26,.92) 62%) }
#m2-onb.on{ display:flex }
#m2-onb .box{ width:100%; padding:26px 22px calc(30px + var(--m2-safe-b)); text-align:center }
#m2-onb h2{ margin:0 0 8px; font-size:23px; font-weight:800; color:#fff; line-height:1.35 }
#m2-onb p{ margin:0 0 20px; font-size:15px; color:var(--txt2); line-height:1.6 }
#m2-onb .go{ width:76px; height:76px; margin:0 auto 14px; border-radius:50%; border:none;
background:var(--gold); color:#1c1403; display:grid; place-items:center; cursor:pointer;
box-shadow:0 6px 26px rgba(255,204,92,.35) }
#m2-onb .skip{ background:none; border:none; color:var(--txt3); font-size:14px; font-family:inherit;
padding:12px 20px; cursor:pointer; min-height:44px }
.m2-tip{ position:fixed; z-index:50; max-width:260px; padding:11px 14px; border-radius:13px;
background:var(--s3); color:var(--txt); font-size:13.5px; line-height:1.5;
box-shadow:0 8px 26px rgba(0,0,0,.5) }
.m2-tip button{ display:block; margin-top:8px; background:none; border:none; color:var(--gold);
font-size:13.5px; font-weight:700; font-family:inherit; cursor:pointer; padding:6px 0; min-height:36px }
.m2-state{ display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:12px; padding:52px 24px; text-align:center; color:var(--txt2) }
.m2-state .ic{ color:var(--txt3) }
.m2-state h3{ margin:0; font-size:17px; font-weight:700; color:var(--txt) }
.m2-state p{ margin:0; font-size:14px; line-height:1.6; max-width:280px }
.m2-state button{ margin-top:6px; padding:12px 22px; border-radius:12px; border:1px solid var(--hair);
background:var(--s2); color:var(--txt); font-size:14.5px; font-weight:600; font-family:inherit;
cursor:pointer; min-height:44px }
.m2-skel{ background:linear-gradient(90deg,var(--s1) 25%,var(--s2) 37%,var(--s1) 63%);
background-size:400% 100%; animation:m2sk 1.4s ease infinite; border-radius:12px }
@keyframes m2sk{ 0%{background-position:100% 0} 100%{background-position:0 0} }
@media (orientation:landscape) and (max-height:560px){
body.m2{ --m2-top:52px; --m2-time:44px; --m2-nav:52px; }
body.m2 #map-wrap{
top:calc(var(--m2-top) + var(--m2-safe-t)); height:auto;
bottom:calc(var(--m2-nav) + var(--m2-time) + var(--m2-safe-b));
right:calc(50% - 8px);
}
#m2-focus{ top:auto; bottom:calc(var(--m2-nav) + var(--m2-time) + var(--m2-safe-b) + 6px);
right:calc(50% - 8px); padding-bottom:0 }
#m2-sheet{ left:calc(50% + 8px); right:0; top:calc(var(--m2-top) + var(--m2-safe-t));
height:auto !important; border-radius:16px 0 0 0 }
.m2-screen{ padding:0 }
body.m2 #m2-split-tog{ display:flex }
body.m2 #m2-sheet{
transition:transform .28s cubic-bezier(.32,.72,0,1), visibility 0s linear 0s }
body.m2 #map-wrap,
body.m2 #m2-focus{ transition:right .28s cubic-bezier(.32,.72,0,1), bottom .28s cubic-bezier(.32,.72,0,1), opacity .18s ease }
body.m2.m2-split-off #m2-sheet{
transform:translateX(100%); visibility:hidden; box-shadow:none;
transition:transform .28s cubic-bezier(.32,.72,0,1), visibility 0s linear .28s }
body.m2.m2-split-off #m2-split-tog{ visibility:visible }
body.m2.m2-split-off #m2-split-tog svg{ transform:rotate(180deg) }
body.m2.m2-split-off #map-wrap{
right:0; bottom:calc(var(--m2-nav) + var(--m2-time) + var(--m2-safe-b) + 50px) }
body.m2.m2-split-off #map-wrap svg#map{ max-height:none }
body.m2.m2-split-off #m2-focus{ right:0 }
}
#m2-split-tog{
display:none; position:absolute; z-index:2;
left:-44px; top:50%; width:44px; height:64px; margin-top:-32px;
padding:0; border:none; background:transparent; cursor:pointer;
align-items:center; justify-content:flex-end;
color:var(--txt2); -webkit-tap-highlight-color:transparent;
}
#m2-split-tog::after{
content:''; position:absolute; right:0; top:4px; width:24px; height:56px; z-index:-1;
background:var(--s1); border:1px solid var(--hair); border-right:none;
border-radius:12px 0 0 12px; box-shadow:-6px 0 16px rgba(0,0,0,.35);
}
#m2-split-tog svg{ position:relative; width:18px; height:18px; margin-right:3px;
transition:transform .28s cubic-bezier(.32,.72,0,1) }
#m2-split-tog:hover, #m2-split-tog:active{ color:var(--gold) }
#m2-split-tog:focus-visible{ outline:none }
#m2-split-tog:focus-visible::after{ outline:2px solid var(--gold); outline-offset:1px }
@media (prefers-reduced-motion:reduce){
body.m2 *, body.m2 *::before, body.m2 *::after{
animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important; scroll-behavior:auto !important;
}
}
body.m2 svg.ic{ flex:0 0 auto; display:block }
.sh-cta{ align-items:center }
.sh-cta span{ flex:1; min-width:0 }
.pro-list li svg.ic{ align-self:flex-start }
.st-hero > span, .st-hero .meta > span,
.st-card > span, .st-card .mid > span{ display:block }
.st-card .mid{ display:flex; flex-direction:column; justify-content:center; min-width:0 }
.st-card .foot{ display:flex; align-items:center }
.st-badge{ display:inline-flex }
.sh-card > span{ display:block }
.sr-item > span{ display:block }
.sr-item .mid > span{ display:block }
.sh-peek > span{ display:block }
.pro-price button > span{ display:block }
#m2-nav button > span{ display:block }
.m2-grid button > span{ display:block }
.st-chips{ flex-wrap:nowrap }
#m2-focus{ flex-wrap:nowrap }
body.m2.m2-screening #m2-top{ display:none }
.pro-head svg.ic, .m2-state svg.ic, #m2-onb svg.ic{ margin:0 auto }
.m2-sheet2 > header h2:empty{ display:none }
.m2-sheet2 > header{ justify-content:flex-end }
.m2-sheet2 > header h2{ text-align:left }
.m2-sheet2 > header h2:not(:empty) ~ .m2-ib{ margin-left:auto }
body.m2 #panel-root.open .panel{
top:var(--m2-safe-t) !important;
bottom:calc(var(--m2-nav) + var(--m2-safe-b)) !important;
left:0 !important; right:0 !important; width:auto !important;
height:auto !important; max-height:none !important;
border-radius:0 !important;
}
body.m2 #dock-root{
top:calc(var(--m2-top) + var(--m2-safe-t) + var(--m2-map-h) + 6px) !important;
bottom:calc(var(--m2-nav) + var(--m2-time) + var(--m2-safe-b)) !important;
border-radius:16px 16px 0 0 !important;
z-index:31;
}
body.m2 #figcard .fc-box{ height:calc(84dvh - var(--m2-nav)); max-height:none }
body.m2 .m2-screen .scr-body{ overscroll-behavior:contain }
body.m2.m2-screening #m2-focus,
body.m2.m2-screening #m2-sheet,
body.m2.m2-screening #m2-time{ visibility:hidden }
body.m2 #panel-root .panel-close{
width:44px; height:44px; min-height:44px; display:grid; place-items:center;
border-radius:12px; font-size:18px;
}
#m2-grip{ height:44px }
body.m2 #m2-tl .speed button,
body.m2 #m2-tl .ctrow > button,
body.m2 #m2-tl #controls button{
min-width:44px; min-height:44px; padding:0 14px;
}
body.m2 #m2-tl .m2-speeds button{ min-width:44px }
body.m2 .tl-zoom button, body.m2 #tlwrap button,
body.m2 #m2-tl .tl-zoom button{ min-width:56px; min-height:44px }
:is(#m2-more,#m2-sh) .m2-grid button{ position:relative }
:is(#m2-more,#m2-sh) .m2-grid button .m2-prodot{
position:absolute; top:6px; right:8px;
font-size:11px; font-style:normal; color:var(--gold);
}
body.lv-pro :is(#m2-more,#m2-sh) .m2-grid button .m2-prodot{ display:none }
body.lv-normal :is(#m2-more,#m2-sh) .m2-grid button[data-gated]{
opacity:.5; filter:grayscale(.55);
}
body.lv-normal :is(#m2-more,#m2-sh) .m2-grid button[data-gated]:active{ opacity:.8; filter:grayscale(.2) }
body.lv-normal :is(#m2-more,#m2-sh) .m2-grid button[data-gated] .m2-prodot{ opacity:1; filter:none }
body.tl-ruler-m #m2-scrub .bar{ display:none }
body.tl-ruler-m #m2-scrub{ gap:3px }
body.tl-ruler-m #m2-scrub .lbl{ align-items:baseline; gap:6px }
#m2-dyn{ flex:1; min-width:0; text-align:center; color:var(--gold); font-weight:800; letter-spacing:.06em;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rulm{
position:relative; height:20px; border-radius:4px;
background:
repeating-linear-gradient(178deg, rgba(120,78,28,.10) 0 1px, transparent 1px 4px),
linear-gradient(180deg, #f3e2bd 0%, #e6cb95 45%, #d6b47a 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(90,58,20,.35), 0 1px 0 #7d5a2a, 0 3px 8px rgba(0,0,0,.45);
}
.rulm .rul-edge{ position:absolute; left:0; right:0; top:0; height:2px; border-radius:4px 4px 0 0;
background:linear-gradient(180deg,#fff4c8,#b48a2c) }
.rulm .rul-g{ position:absolute; left:0; top:2px; width:100%; height:7px; pointer-events:none }
.rulm .rul-dyn{ position:absolute; left:0; right:0; top:9px; bottom:1px; background:rgba(70,44,14,.18) }
.rulm .rd{ position:absolute; top:0; bottom:0; background:var(--c); opacity:.8;
box-shadow:1px 0 0 rgba(246,230,190,.9) }
.rulm .rd.on{ opacity:1; filter:saturate(1.25) brightness(1.2); box-shadow:inset 0 0 0 1px #ffd978; z-index:1 }
.rulm .rul-lab{ position:absolute; left:0; right:0; top:9px; height:10px; pointer-events:none; z-index:2 }
.rulm .rl{ position:absolute; top:0; line-height:10px; font-size:9px; font-weight:800; color:#fbeecd; white-space:nowrap;
text-shadow:0 1px 1px rgba(0,0,0,.6) }
.rulm .rl.ovf{ background:var(--c); padding:0 2px; margin-left:-2px; border-radius:2px }
.rulm .rl.off{ visibility:hidden }
.rulm-cur{ position:absolute; top:-3px; bottom:-3px; width:9px; transform:translateX(-50%); z-index:3; border-radius:3px;
background:linear-gradient(90deg, rgba(255,255,255,.3) 0, rgba(255,255,255,.5) 36%, #c8261c 36%, #c8261c 64%, rgba(255,255,255,.5) 64%, rgba(255,255,255,.3) 100%);
border:1px solid rgba(255,255,255,.9); box-shadow:0 0 0 1px rgba(60,36,10,.5), 0 2px 6px rgba(0,0,0,.5) }
body.m2.tl-ruler-m #m2-tl .s2-body #controls{
position:static !important; left:auto; right:auto; bottom:auto; z-index:auto;
background:none !important; backdrop-filter:none; -webkit-backdrop-filter:none;
border:0 !important; padding:0 !important; flex-direction:column; gap:12px;
}
body.m2.tl-ruler-m #m2-tl .ctrow .speed{ display:none }
body.m2.tl-ruler-m #m2-tl #tlzoom{ display:flex; gap:8px; flex-wrap:wrap }
body.m2.tl-ruler-m #m2-tl #tlzoom button{ flex:1; min-height:44px; border-radius:12px; border:1px solid var(--hair);
background:var(--s2); color:var(--txt2); font-weight:700; font-size:14px; font-family:inherit; cursor:pointer }
body.m2.tl-ruler-m #m2-tl #tlzoom button.on{ background:var(--gold); color:var(--on-accent,#241a02); border-color:var(--gold) }
body.m2.tl-ruler-m #m2-tl #tlwrap{ display:block !important; position:relative; margin:4px -16px 0; padding:6px 0 4px }
body.m2.tl-ruler-m #m2-tl #tlwin{ display:flex; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
-webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x }
body.m2.tl-ruler-m #m2-tl #tlwin::-webkit-scrollbar{ display:none }
body.m2.tl-ruler-m #m2-tl .tl-pad{ flex:0 0 50% }
body.m2.tl-ruler-m #m2-tl #tlrail{ flex:0 0 auto; position:relative }
body.m2.tl-ruler-m #m2-tl .tl-center{
position:absolute; left:50%; top:2px; height:74px; width:18px; transform:translateX(-50%); z-index:5; pointer-events:none;
border-radius:5px; border:1px solid rgba(255,255,255,.9);
background:linear-gradient(90deg, rgba(255,255,255,.18) 0, rgba(255,255,255,.4) 42%, #c8261c 42%, #c8261c 58%, rgba(255,255,255,.4) 58%, rgba(255,255,255,.18) 100%);
box-shadow:0 0 0 1px rgba(60,36,10,.55), 0 4px 12px rgba(0,0,0,.55);
}
body.m2.tl-ruler-m #m2-tl #wars,
body.m2.tl-ruler-m #m2-tl #heat,
body.m2.tl-ruler-m #m2-tl #track .ticks,
body.m2.tl-ruler-m #m2-tl #track .axis,
body.m2.tl-ruler-m #m2-tl #track .fill{ display:none !important }
body.m2.tl-ruler-m #m2-tl #track{ height:68px; margin:0 !important }
body.m2.tl-ruler-m #m2-tl #track input{ pointer-events:none; opacity:0 }
body.m2.tl-ruler-m #m2-tl #track .zero{ top:3px; height:16px; width:2px; background:#b3261e; opacity:.85; z-index:1 }
body.m2.tl-ruler-m #rul{
position:absolute; left:0; right:0; top:0; height:66px; border-radius:6px; overflow:hidden;
background:
repeating-linear-gradient(178.6deg, rgba(120,78,28,.10) 0 1px, transparent 1px 4px, rgba(120,78,28,.05) 4px 5px, transparent 5px 11px),
radial-gradient(120% 60% at 22% 70%, rgba(150,100,40,.16), transparent 60%),
linear-gradient(180deg, #f3e2bd 0%, #e6cb95 42%, #d6b47a 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(90,58,20,.35), 0 2px 0 #7d5a2a, 0 7px 16px rgba(0,0,0,.55);
}
body.m2.tl-ruler-m #rul .rul-edge{ position:absolute; left:0; right:0; top:0; height:3px;
background:linear-gradient(180deg, #fff4c8 0%, #d8b04a 45%, #8f6a1c 100%) }
body.m2.tl-ruler-m #rul-g{ position:absolute; left:0; top:3px; width:100%; height:30px; pointer-events:none }
body.m2.tl-ruler-m #rul-g text{ font-size:11px; font-weight:800; fill:#3a2610; paint-order:stroke; stroke:rgba(255,248,225,.35); stroke-width:.6px }
body.m2.tl-ruler-m #rul-dyn{ position:absolute; left:0; right:0; top:36px; height:26px;
background:rgba(70,44,14,.18); box-shadow:inset 0 1px 2px rgba(60,36,10,.45) }
body.m2.tl-ruler-m #rul-dyn .rd{ position:absolute; top:2px; bottom:2px; background:var(--c); opacity:.82; cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.35), 1px 0 0 rgba(246,230,190,.9) }
body.m2.tl-ruler-m #rul-dyn .rd.on{ opacity:1; filter:saturate(1.25) brightness(1.18);
box-shadow:inset 0 0 0 1px #ffd978, 0 0 8px rgba(255,210,110,.75); z-index:1 }
body.m2.tl-ruler-m #rul-lab{ position:absolute; left:0; right:0; top:36px; height:26px; pointer-events:none; z-index:2 }
body.m2.tl-ruler-m #rul-lab .rl{ position:absolute; top:4px; line-height:18px; font-size:13px; font-weight:800; color:#fbeecd;
white-space:nowrap; letter-spacing:.5px; text-shadow:0 1px 1px rgba(0,0,0,.55) }
body.m2.tl-ruler-m #rul-lab .rl.ovf{ background:var(--c); padding:0 3px; margin-left:-3px; border-radius:3px;
box-shadow:0 0 0 1px rgba(246,230,190,.9) }
body.m2.tl-ruler-m #rul-lab .rl.off{ visibility:hidden }
body.m2.tl-ruler-m #rul-lab .rl.on{ color:#fff3c4 }
#m2-tl-tip{ margin-top:12px }
body.m2.tl-ruler-m #m2-tl #tlwrap{ order:1 }
body.m2.tl-ruler-m #m2-tl #tlzoom{ order:2 }
body.m2.tl-ruler-m #m2-tl .ctrow{ order:3 }
body.m2.tl-ruler-m #m2-tl #m2-tlhost{ margin-top:2px }
body.m2 :is(#m2-more,#m2-sh) .m2-grid{ gap:8px; padding:9px; border-radius:14px;
background: repeating-linear-gradient(92deg, rgba(0,0,0,.10) 0 1px, transparent 1px 5px), radial-gradient(140% 90% at 30% 0%, #5a3322 0%, #3a2016 45%, #25140c 100%);
box-shadow: inset 0 1px 0 rgba(255,220,170,.22), 0 0 0 1px #6e4b1c, 0 8px 20px rgba(0,0,0,.5); }
body.m2 :is(#m2-more,#m2-sh) .m2-grid button{ border-radius:10px; border:1px solid #1a0d07; color:#f3e2b6; font-weight:800; letter-spacing:.1em;
background: repeating-linear-gradient(88deg, rgba(0,0,0,.12) 0 1px, transparent 1px 6px), radial-gradient(120% 80% at 50% 0%, #3b2217 0%, #26150d 60%, #1b0e08 100%);
box-shadow: inset 0 3px 8px rgba(0,0,0,.75), 0 1px 0 rgba(255,215,160,.16); }
body.m2 :is(#m2-more,#m2-sh) .m2-grid button:active{ background: radial-gradient(120% 80% at 50% 0%, #2e1a11 0%, #1e1009 100%); box-shadow: inset 0 5px 12px rgba(0,0,0,.85) }
body.m2 :is(#m2-more,#m2-sh) .m2-grid button .ic{ color:var(--tan-gilt,#f0cf7a); filter:drop-shadow(0 1px 0 #000) drop-shadow(0 0 6px rgba(240,200,110,.25)) }
body.m2 :is(#m2-more,#m2-sh) .m2-grid button::after{ content:""; position:absolute; inset:3px; border-radius:8px; pointer-events:none; background:var(--tan-corners); opacity:.85 }
body.m2 :is(#m2-more,#m2-sh) .m2-grid button .m2-prodot{ font-size:0; width:9px; height:9px; border-radius:50%; top:11px; left:11px; right:auto;
background:radial-gradient(circle at 35% 30%, #fff1c2, #e6c572 45%, #7c5716 100%); box-shadow:0 1px 1px rgba(0,0,0,.7) }
body.m2 #m2-focus button{ color:#3a2610; font-weight:800; letter-spacing:.08em; text-shadow:0 1px 0 rgba(255,244,210,.7) }
body.m2 #m2-focus button::after{ border-radius:7px; backdrop-filter:none; -webkit-backdrop-filter:none; border:1px solid #6e5018;
background: linear-gradient(180deg, rgba(255,255,255,.5) 0, rgba(255,255,255,0) 45%), linear-gradient(180deg, #f1d58c 0%, #d6ae55 48%, #a97d2a 100%);
box-shadow:0 1px 0 rgba(0,0,0,.6), inset 0 -1px 0 rgba(90,60,10,.45) }
body.m2 #m2-focus button.on{ color:#ffe9b0; text-shadow:0 1px 0 rgba(0,0,0,.7) }
body.m2 #m2-focus button.on::after{ border-color:#4a0f0b; background:linear-gradient(180deg, #a8352c 0%, #8e2a22 55%, #6e1c16 100%);
box-shadow: inset 0 2px 5px rgba(0,0,0,.6), 0 0 0 1px #b88a34 }
body.m2{ --m2-time:60px }
@media (orientation:landscape) and (max-height:560px){ body.m2{ --m2-time:60px } }
body.m2 #m2-time{ gap:10px; padding:0 10px 0 12px }
body.m2 #m2-play{ width:48px; height:48px }
body.tl-ruler-m #m2-scrub{ align-self:stretch; justify-content:center; gap:4px; padding:0 2px;
touch-action:none; cursor:grab; -webkit-user-select:none; user-select:none; border-radius:10px }
body.tl-ruler-m #m2-scrub.dragging{ cursor:grabbing }
body.tl-ruler-m #m2-scrub:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
body.tl-ruler-m #m2-scrub .lbl{ font-size:12px; line-height:1.2 }
body.tl-ruler-m #m2-dyn{ font-size:13px }
body.tl-ruler-m .rulm{ height:32px; border-radius:5px }
body.tl-ruler-m .rulm .rul-edge{ height:3px }
body.tl-ruler-m .rulm .rul-g{ top:3px; height:10px }
body.tl-ruler-m .rulm .rul-dyn{ top:13px; bottom:2px }
body.tl-ruler-m .rulm .rul-lab{ top:13px; height:17px }
body.tl-ruler-m .rulm .rl{ line-height:17px; font-size:11px; letter-spacing:.04em }
body.tl-ruler-m .rulm-cur{ top:-5px; bottom:-5px; width:12px; transition:width .12s }
body.tl-ruler-m #m2-scrub.dragging .rulm-cur{ width:16px; box-shadow:0 0 0 1px rgba(60,36,10,.5), 0 0 12px rgba(255,210,110,.8) }
body.m2 #m2-focus{
top:calc(var(--m2-top) + var(--m2-safe-t) + 6px); left:6px; right:auto; bottom:auto;
width:max-content; height:auto; max-height:calc(var(--m2-map-h) - 12px);
flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:3px; padding:0;
overflow:visible; -webkit-mask-image:none; mask-image:none;
}
body.m2 #m2-focus button{
flex:0 0 auto; min-height:0; min-width:40px;
height:min(26px, calc((var(--m2-map-h) - 30px) / 7));
padding:0 6px; font-size:10.5px; letter-spacing:.04em; line-height:1;
}
body.m2 #m2-focus button::after{ top:0; height:100%; transform:none; border-radius:5px;
box-shadow:0 1px 0 rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.35), inset 0 -1px 0 rgba(90,60,10,.45) }
body.m2 #m2-focus button.on::after{ box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 1px #b88a34, 0 2px 6px rgba(0,0,0,.35) }
@media (orientation:landscape) and (max-height:560px){
body.m2 #m2-focus{ top:calc(var(--m2-top) + var(--m2-safe-t) + 6px); bottom:auto; right:auto }
body.m2.m2-split-off #m2-focus{ right:auto }
body.m2.m2-split-off #map-wrap{ bottom:calc(var(--m2-nav) + var(--m2-time) + var(--m2-safe-b)) }
}
body.m2-candy #m2-sh .m2-grid{ margin-top:2px }
body.m2-candy #m2-sh .m2-grid button{ min-height:70px; padding:10px 6px; gap:6px; position:relative }
#m2-sh .m2-t-row{ display:flex; flex-direction:column; gap:0; margin-top:10px }
#m2-sh .m2-t-row .sh-cta{ margin:0 0 8px; min-height:48px; padding:11px 14px }
#m2-sh .m2-t-row .sh-cta > span{ display:flex; align-items:center; gap:9px }
#m2-sh .m2-t-row .sh-cta > span .ic{ color:var(--gold) }
#m2-sh .m2-t-row .sh-cta b{ font-weight:800 }
#m2-sh .m2-t-row .sh-cta em{ font-style:normal; font-weight:600; font-size:13px; color:var(--txt2); margin-left:auto;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
#m2-sh .m2-t-up{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:44px;
margin:2px 0 0; border:none; background:none; color:var(--txt3); font:600 13px/1 inherit; cursor:pointer }
#m2-sh .m2-t-up .ic{ color:var(--gold-dim) }
body.m2 #dock-root{ transition:top .3s cubic-bezier(.32,.72,0,1), border-radius .2s ease }
body.m2 #dock-root.dock-nodrag{ transition:none }
body.m2 #dock-root.dock-full{ top:var(--m2-safe-t) !important; border-radius:0 !important; z-index:40 }
body.m2 #dock-root .dock-head{ touch-action:none; cursor:grab; padding-top:20px }
body.m2 #dock-root .dock-grab{ display:none }
#dock-root .dock-pull{ display:none }
body.m2 #dock-root .dock-pull{
display:grid; place-items:center; position:absolute; top:0; left:50%; transform:translateX(-50%);
width:96px; height:20px; padding:0; border:none; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent }
body.m2 #dock-root .dock-pull i{ display:block; width:44px; height:5px; border-radius:3px;
background:linear-gradient(180deg,#fff0c0,#e2b95a 45%,#8a6420); box-shadow:0 1px 1px rgba(0,0,0,.7) }
body.m2 #dock-root .dock-pull:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; border-radius:8px }
@media (orientation:landscape) and (max-height:560px){
body.m2 #dock-root .dock-pull{ display:none }
body.m2 #dock-root .dock-head{ touch-action:auto; cursor:auto; padding-top:8px }
}
body.m2{ --m2-time:68px }
@media (orientation:landscape) and (max-height:560px){ body.m2{ --m2-time:64px } }
body.m2 #m2-time{ gap:12px; padding:0 12px 0 12px }
body.tl-ruler-m #m2-scrub{ gap:3px }
body.tl-ruler-m #m2-scrub .lbl{ font-size:12.5px; line-height:16px; justify-content:space-between }
body.tl-ruler-m #m2-dyn{ font-size:14px; text-align:left }
body.tl-ruler-m .rulm{ height:40px; border-radius:6px }
body.tl-ruler-m .rulm .rul-g{ top:3px; height:12px }
body.tl-ruler-m .rulm .rul-dyn{ top:15px; bottom:2px }
body.tl-ruler-m .rulm .rul-lab{ top:15px; height:23px }
body.tl-ruler-m .rulm .rl{ line-height:23px; font-size:13px; letter-spacing:.05em }
body.tl-ruler-m .rulm-cur{ top:-6px; bottom:-6px }
@media (orientation:landscape) and (max-height:560px){
body.tl-ruler-m .rulm{ height:38px }
body.tl-ruler-m .rulm .rul-lab{ height:21px } body.tl-ruler-m .rulm .rl{ line-height:21px }
}
@media (orientation:landscape) and (max-height:560px){
body.m2 #dock-root{
top:calc(var(--m2-top) + var(--m2-safe-t)) !important;
bottom:calc(var(--m2-nav) + var(--m2-time) + var(--m2-safe-b)) !important;
left:calc(50% + 8px) !important; right:0 !important; width:auto !important;
border-radius:16px 0 0 0 !important;
}
}
@media (orientation:landscape) and (max-height:560px){ body.m2.dock-open #m2-split-tog{ visibility:hidden } }
body.tl-ruler-m .rulm{ background:rgba(8,12,22,.42); border:1px solid rgba(255,255,255,.18); border-radius:6px;
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 8px rgba(0,0,0,.35) }
body.tl-ruler-m .rulm .rul-edge{ height:1px; background:rgba(255,255,255,.35) }
body.tl-ruler-m .rulm .rul-g{ top:2px }
body.tl-ruler-m .rulm .rul-g path:first-child{ display:none }
body.tl-ruler-m .rulm .rul-g path{ stroke:rgba(255,255,255,.55) }
body.tl-ruler-m .rulm .rul-dyn{ background:rgba(0,0,0,.25) }
body.tl-ruler-m .rulm .rd{ opacity:.85; box-shadow:1px 0 0 rgba(255,255,255,.18) }
body.tl-ruler-m .rulm .rd.on{ opacity:1 }
body.tl-ruler-m .rulm .rl{ font-size:8.5px; line-height:23px; letter-spacing:0; font-weight:700; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.7) }
body.tl-ruler-m .rulm .rl.ovf{ background:none; padding:0; margin-left:0; text-shadow:0 1px 1px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.9) }
body.tl-ruler-m .rulm .rl.up{ top:-12px; line-height:11px; font-size:8.5px; color:var(--gold); text-shadow:0 1px 1px rgba(0,0,0,.8) }
body.tl-ruler-m .rulm .rl.up::after{ content:""; position:absolute; left:var(--cx,50%); top:100%; width:1px; height:4px; background:var(--gold) }
body.tl-ruler-m .rulm-cur{ background:linear-gradient(90deg, rgba(255,255,255,.35) 0, rgba(255,255,255,.6) 36%, #c8261c 36%, #c8261c 64%, rgba(255,255,255,.6) 64%, rgba(255,255,255,.35) 100%);
border:1px solid rgba(255,255,255,.9); box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.5) }
body.m2 #tourplayer #tp-chaps{ display:block; padding:8px 10px 0 }
body.m2 #tourplayer .tpc-head{ display:flex; align-items:baseline; gap:8px; padding:0 2px 6px }
body.m2 #tourplayer .tpc-head b{ font-size:13px; color:var(--gold) } body.m2 #tourplayer .tpc-head span{ font-size:11px; color:var(--txt3) }
body.m2 #tourplayer .tpc-list{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:6px; -webkit-overflow-scrolling:touch }
body.m2 #tourplayer .tpc-list::-webkit-scrollbar{ display:none }
body.m2 #tourplayer .tpc{ flex:0 0 96px; display:flex; flex-direction:column; text-align:left; padding:0; border-radius:8px; overflow:hidden; font-family:inherit; cursor:pointer; min-height:44px;
background:var(--s2); border:1px solid var(--hair); color:var(--txt) }
body.m2 #tourplayer .tpc.on{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) }
body.m2 #tourplayer .tpc .tpc-th{ height:50px; display:grid; place-items:center; background:var(--s3) center/cover no-repeat }
body.m2 #tourplayer .tpc .tpc-th i{ font-style:normal; font-size:15px; font-weight:900; color:var(--gold); opacity:.6 }
body.m2 #tourplayer .tpc .tpc-th i::before{ content:'第 '; font-size:9px } body.m2 #tourplayer .tpc .tpc-th i::after{ content:' 幕'; font-size:9px }
body.m2 #tourplayer .tpc .tpc-y{ padding:4px 6px 0; font-size:12px; font-weight:800; color:var(--gold); line-height:1.1 }
body.m2 #tourplayer .tpc .tpc-t{ padding:1px 6px 6px; font-size:10.5px; color:var(--txt2); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
body.m2 #tourplayer #tp-exit{ display:inline-flex }
body.m2 #tourplayer .tp-ctrl{ flex-wrap:wrap }
body.m2 #tourplayer .tp-ctrl #tp-exit{ order:9; flex:1 1 100%; justify-content:center; min-height:40px }
body.m2 .sh-sec-w{ display:flex; align-items:center; margin-top:6px } body.m2 .sh-sec-w em{ margin-left:auto; font-style:normal; font-weight:600; color:var(--txt3); letter-spacing:0 }
body.m2 .sh-row.w{ gap:8px } body.m2 .sh-row.w .dot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; background:var(--s3); box-shadow:0 0 0 2px rgba(0,0,0,.25) }
body.m2 .sh-row.w .r{ flex:0 0 64px }
body.m2 .sh-more{ display:block; width:100%; margin:2px 0 4px; padding:9px; border:none; background:none; color:var(--gold); font:700 13px/1 inherit; text-align:right; cursor:pointer; min-height:40px }
body.m2 .sh-story{ background:var(--s2); border:1px solid var(--hair); border-radius:14px; padding:10px 12px 12px; margin-bottom:4px }
body.m2 .sh-story .ss-from{ font-size:11.5px; color:var(--txt3) } body.m2 .sh-story .ss-from b{ font-size:10px; padding:1px 6px; border-radius:6px; margin-left:4px }
body.m2 .sh-story .ss-from b.free{ background:var(--s3); color:var(--txt2) } body.m2 .sh-story .ss-from b.pro{ background:#a8352c; color:#fbe7c0 }
body.m2 .sh-story p{ margin:6px 0 8px; font-size:13px; line-height:1.6; color:var(--txt) }
body.m2 .sh-story .sh-cta{ margin:0; min-height:44px }
body.m2 #modal, body.m2 #kmodal{ position:fixed !important; inset:0 !important; z-index:62 !important; padding:calc(var(--m2-safe-t) + 14px) 14px calc(var(--m2-safe-b) + 14px) }
body.m2 #modal .mbox{ max-height:calc(100dvh - var(--m2-safe-t) - var(--m2-safe-b) - 28px); width:100%; max-width:560px }
body.m2 #kmodal .kbox{ max-height:calc(100dvh - var(--m2-safe-t) - var(--m2-safe-b) - 28px); overflow:auto }
@media (orientation:landscape) and (max-height:560px){
body.m2 #tourplayer{
top:calc(var(--m2-top) + var(--m2-safe-t)) !important;
bottom:calc(var(--m2-nav) + var(--m2-time) + var(--m2-safe-b)) !important;
left:calc(50% + 8px) !important; right:0 !important; width:auto !important;
transform:none !important; border-radius:16px 0 0 0 !important;
display:flex; flex-direction:column; overflow:hidden;
}
body.m2 #tourplayer .tp-card{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden }
body.m2 #tourplayer .tp-body{ flex:1 1 auto; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch }
body.m2 #tourplayer .tp-ctrl{ flex:0 0 auto; padding:6px 10px }
body.m2 #tourplayer .tp-ctrl #tp-exit{ min-height:34px }
body.m2 #tourplayer #tp-chaps{ flex:0 0 auto; padding:6px 8px 0 }
body.m2 #tourplayer .tpc-head{ padding:0 2px 4px }
body.m2 #tourplayer .tpc-list{ padding-bottom:4px }
body.m2 #tourplayer .tpc{ flex:0 0 auto; flex-direction:row; align-items:center; gap:4px; min-height:28px; height:28px; padding:0 8px; border-radius:14px }
body.m2 #tourplayer .tpc .tpc-th{ display:none }
body.m2 #tourplayer .tpc .tpc-y{ padding:0; font-size:11.5px }
body.m2 #tourplayer .tpc .tpc-t{ padding:0; font-size:11px; max-width:9em }
body.m2 #tourplayer .tp-top{ padding:4px 10px; font-size:14px }
body.m2 #tourplayer .tp-top #tp-close{ min-height:32px; min-width:32px; padding:2px 8px }
body.m2 #tourplayer .tp-body{ padding:6px 12px }
body.m2 #tourplayer .tp-ctrl{ flex-wrap:nowrap; gap:6px }
body.m2 #tourplayer .tp-ctrl .btn{ min-height:32px; padding:4px 10px; font-size:13px; white-space:nowrap; flex:0 0 auto }
body.m2 #tourplayer .tp-ctrl #tp-exit{ order:0; flex:0 0 auto; min-height:32px }
body.m2 #tourplayer .tp-ctrl #tp-dots{ flex:1 1 0; min-width:0; overflow:hidden; flex-wrap:wrap; max-height:14px }
}
body.m2 .m2-tr.m2-tr-fixed{position:fixed!important;display:flex;gap:8px;align-items:center;margin:0}
body.m2 .m2-tr.m2-tr-fixed button{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:36px;min-width:36px;padding:0 10px;border-radius:999px;
background:rgba(10,14,26,.62);border:1px solid rgba(232,192,106,.45);color:#f7dc9c;font-weight:800;font-size:13px;white-space:nowrap;cursor:pointer;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(0,0,0,.18)}
body.m2 .m2-tr.m2-tr-fixed button[hidden]{display:none}
body.m2 .m2-tr.m2-tr-fixed .av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#f7dc9c,#c49b57);color:#2a1a06;font-weight:900;font-size:13px}
body.m2 .m2-tr.m2-tr-fixed #m2-acct-btn.in{padding:0 6px}
body.m2 .m2-tr.m2-tr-fixed .m2-pro-pill{position:static!important}
html[data-skin="paper"] body.m2 .m2-tr.m2-tr-fixed button{background:rgba(255,250,240,.88);color:#7a4e26;border-color:#c9a878}
body.m2 #m2-acct-btn{position:relative}
body.m2 #m2-acct-btn .m2-crown{position:absolute;top:-7px;right:-5px;width:17px;height:17px;display:grid;place-items:center;color:#f5c542;
filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55));transform:rotate(18deg);pointer-events:none}
body.m2 #m2-acct-btn.is-pro{border-color:#e8c06a}
html body.m2.m2-candy #m2-nav button svg.ic{ padding:3px 13px }
html body.m2.m2-candy #m2-nav button span{ white-space:nowrap; font-size:10.5px; letter-spacing:-.01em }
body.m2 #m2-search > header{ display:flex; align-items:center; gap:6px; padding-left:6px; padding-right:6px }
body.m2 #m2-search > header .m2-ib{ flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:0; background:var(--s2); color:var(--txt); cursor:pointer }
body.m2 #m2-search > header .m2-ib:active{ filter:brightness(.92) }
html body.m2 .m2-tr button#m2-qz-btn{ position:relative; padding:0 4px; min-width:36px; overflow:visible }
body.m2 .m2-tr #m2-qz-btn .qz-medal{ display:block; width:28px; height:28px }
body.m2 .m2-tr #m2-qz-btn .qz-medal svg, body.m2 .m2-tr #m2-qz-btn .qz-medal img{ width:100%!important; height:100%!important; display:block }
body.m2 .m2-tr #m2-qz-btn .qz-n{ position:absolute; right:-3px; bottom:-3px; min-width:16px; height:16px; padding:0 3px; border-radius:8px; font:800 10px/16px inherit; font-style:normal; text-align:center;
color:#2a1a06; background:linear-gradient(#ffe7a0,#e3b247); box-shadow:0 1px 3px rgba(0,0,0,.35) }
body.m2.m2-dock-full .m2-tr.m2-tr-fixed{ display:none !important }
body.m2 #m2-acct-btn:not(.in) .ic{ display:none }
body.m2 .m2-tr.tr-compact #m2-acct-btn:not(.in) .ic{ display:block }
body.m2 .m2-tr.tr-compact #m2-acct-btn:not(.in) .lbl{ display:none }
body.m2 .m2-tr.tr-compact #m2-acct-btn:not(.in){ padding:0 8px }
body.m2 .m2-tr.tr-compact .m2-pro-pill span{ display:none }
body.m2 .m2-tr.tr-compact .m2-pro-pill{ padding:0 9px }
html body.m2 :is(#m2-top .m2-tr, .m2-tr.m2-tr-fixed){ gap:6px }
html body.m2 #m2-top .m2-tr button, html body.m2 .m2-tr.m2-tr-fixed button{ height:30px; min-width:30px; padding:0 9px; gap:4px; font-size:12px; font-weight:800 }
html body.m2 :is(#m2-top .m2-tr, .m2-tr.m2-tr-fixed) button svg.ic{ width:15px !important; height:15px !important }
html body.m2 :is(#m2-top .m2-tr, .m2-tr.m2-tr-fixed) .m2-pro-pill{ margin-left:0; padding:0 9px }
html body.m2 :is(#m2-top .m2-tr, .m2-tr.m2-tr-fixed) #m2-acct-btn.in{ padding:0 4px }
html body.m2 :is(#m2-top .m2-tr, .m2-tr.m2-tr-fixed) .av{ width:21px; height:21px; font-size:11px }
html body.m2 :is(#m2-top .m2-tr, .m2-tr.m2-tr-fixed) #m2-acct-btn .m2-crown{ top:-6px; right:-5px; width:14px; height:14px }
html body.m2 :is(#m2-top .m2-tr, .m2-tr.m2-tr-fixed) #m2-acct-btn .m2-crown svg{ width:11px !important; height:11px !important }
html body.m2 .m2-tr button#m2-qz-btn{ padding:0 3px; min-width:30px }
html body.m2 .m2-tr #m2-qz-btn .qz-medal{ width:23px !important; height:23px !important }
html body.m2 .m2-tr #m2-qz-btn .qz-n{ right:-3px; bottom:-3px; min-width:14px; height:14px; padding:0 2px; border-radius:7px; font-size:9px; line-height:14px }
html body.m2 .m2-tr.tr-compact #m2-acct-btn:not(.in){ padding:0 7px }
html body.m2 .m2-tr.tr-compact .m2-pro-pill{ padding:0 8px }
html body.m2 #m2-focus button.m2-reg-btn{ height:32px; padding:0 10px 0 9px; gap:5px; border-radius:16px; font-size:12.5px }
html body.m2 #m2-focus button.m2-reg-btn svg.ic{ width:15px !important; height:15px !important }
body.m2 .m2-pro-pill.m2-pro-solo{ position:fixed !important; margin:0; display:inline-flex; align-items:center; justify-content:center; gap:4px;
height:30px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer;
background:rgba(10,14,26,.62); border:1px solid rgba(232,192,106,.45); color:#f7dc9c; box-shadow:0 2px 8px rgba(0,0,0,.18);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
body.m2 .m2-pro-pill.m2-pro-solo[hidden]{ display:none !important }
body.m2 .m2-pro-pill.m2-pro-solo svg.ic{ width:15px !important; height:15px !important }
html[data-skin="paper"] body.m2 .m2-pro-pill.m2-pro-solo{ background:rgba(255,250,240,.88); color:#7a4e26; border-color:#c9a878 }
html[data-skin="paper"][data-pal="celadon"] body.m2 .m2-pro-pill.m2-pro-solo{ background:rgba(244,250,247,.9); color:#2f6560; border-color:#9dbab3 }
body.m2.m2-sheet-full .m2-pro-solo, body.m2.m2-story .m2-pro-solo, body.m2.m2-dock-full .m2-pro-solo, body.m2.m2-screening .m2-pro-solo{ display:none !important }
body.m2 .m2-tr button, body.m2 .m2-tr a, body.m2 .m2-tr [role=button]{ pointer-events:auto }