/* html-ppt :: base.css — reset + shared tokens + layout primitives */
/* Default tokens. Themes in assets/themes/*.css override the :root block. */
:root {
--bg: #ffffff;
--bg-soft: #f7f7f8;
--surface: #ffffff;
--surface-2: #f2f2f4;
--border: rgba(0,0,0,.08);
--border-strong: rgba(0,0,0,.16);
--text-1: #111216;
--text-2: #55596a;
--text-3: #8a8f9e;
--accent: #3b6cff;
--accent-2: #7a5cff;
--accent-3: #ff5c8a;
--good: #1aaf6c;
--warn: #f5a524;
--bad: #e0445a;
--grad: linear-gradient(135deg,#3b6cff,#7a5cff 55%,#ff5c8a);
--grad-soft: linear-gradient(135deg,#eef2ff,#f5ecff 55%,#ffeef5);
--radius: 18px;
--radius-sm: 12px;
--radius-lg: 26px;
--shadow: 0 10px 30px rgba(18,24,40,.08), 0 2px 6px rgba(18,24,40,.04);
--shadow-lg: 0 24px 60px rgba(18,24,40,.14), 0 6px 16px rgba(18,24,40,.06);
--font-sans: 'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
--font-serif: 'Playfair Display','Noto Serif SC',Georgia,serif;
--font-mono: 'JetBrains Mono','IBM Plex Mono',SFMono-Regular,Menlo,monospace;
--font-display: var(--font-sans);
--letter-tight: -.03em;
--letter-normal: -.01em;
--ease: cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text-1);
font-family:var(--font-sans);font-weight:400;line-height:1.6;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
letter-spacing:var(--letter-normal)}
img,svg,video{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,pre,samp{font-family:var(--font-mono)}
/* ================= SLIDE SYSTEM ================= */
.deck{position:relative;width:100vw;height:100vh;overflow:hidden;background:var(--bg)}
.slide{
position:absolute;inset:0;
display:flex;flex-direction:column;justify-content:center;
padding:96px 120px;
box-sizing:border-box;
font-size:30px;
opacity:0;pointer-events:none;
transition:opacity .5s var(--ease), transform .5s var(--ease);
transform:translateX(30px);
overflow:hidden;
}
.slide.is-active{opacity:1;pointer-events:auto;transform:translateX(0);z-index:2}
.slide.is-prev{transform:translateX(-30px)}
/* single-page standalone (used when a layout file is opened directly) */
body.single .slide{position:relative;width:100vw;height:100vh;opacity:1;transform:none;pointer-events:auto}
/* ================= TYPOGRAPHY (放大版 - 教室大屏4K) ================= */
.eyebrow{font-size:30px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.kicker{font-size:30px;font-weight:600;color:var(--accent);letter-spacing:.06em;text-transform:uppercase}
h1.title,.h1{font-family:var(--font-display);font-size:108px;line-height:1.05;font-weight:800;letter-spacing:var(--letter-tight);margin:0 0 24px;color:var(--text-1)}
h2.title,.h2{font-family:var(--font-display);font-size:80px;line-height:1.1;font-weight:700;letter-spacing:var(--letter-tight);margin:0 0 18px}
h3,.h3{font-size:46px;line-height:1.2;font-weight:600;letter-spacing:var(--letter-normal);margin:0 0 12px}
h4,.h4{font-size:32px;line-height:1.3;font-weight:600;margin:0 0 10px}
.lede{font-size:32px;line-height:1.55;color:var(--text-2);font-weight:300;max-width:62ch}
.dim{color:var(--text-2)}
.dim2{color:var(--text-3)}
.mono{font-family:var(--font-mono)}
.serif{font-family:var(--font-serif)}
.gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* ================= LAYOUT PRIMITIVES (放大版) ================= */
.stack>*+*{margin-top:20px}
.row{display:flex;gap:32px;align-items:center}
.row.wrap{flex-wrap:wrap}
.grid{display:grid;gap:32px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.center{display:flex;align-items:center;justify-content:center;text-align:center}
.fill{flex:1}
.sp-t{padding-top:32px}.sp-b{padding-bottom:32px}
.mt-s{margin-top:12px}.mt-m{margin-top:24px}.mt-l{margin-top:48px}
.mb-s{margin-bottom:12px}.mb-m{margin-bottom:24px}.mb-l{margin-bottom:48px}
/* ================= CARDS (放大版) ================= */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
padding:36px 40px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.card-soft{background:var(--surface-2);border:1px solid var(--border)}
.card-outline{background:transparent;border:1.5px solid var(--border-strong);box-shadow:none}
.card-accent{background:var(--surface);border-top:4px solid var(--accent)}
.card-hover{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card-hover:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.pill{display:inline-block;padding:12px 28px;border-radius:999px;font-size:30px;font-weight:500;
background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.pill-accent{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
/* ================= BARS / DIVIDERS ================= */
.divider{height:1px;background:var(--border);width:100%}
.divider-accent{height:3px;width:72px;background:var(--accent);border-radius:2px}
/* ================= CHROME (header/footer/progress) ================= */
.deck-header{position:absolute;top:40px;left:60px;right:60px;display:flex;align-items:center;justify-content:space-between;
font-size:30px;color:var(--text-3);letter-spacing:.1em;text-transform:uppercase;z-index:10;pointer-events:none}
.deck-footer{position:absolute;bottom:40px;left:60px;right:60px;display:flex;align-items:center;justify-content:space-between;
font-size:30px;color:var(--text-3);z-index:10;pointer-events:none}
.slide-number::before{content:attr(data-current)}
.slide-number::after{content:" / " attr(data-total)}
.progress-bar{position:fixed;left:0;right:0;bottom:0;height:4px;background:transparent;z-index:20}
.progress-bar > span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s var(--ease)}
/* ================= PRESENTER / OVERVIEW ================= */
.notes-overlay{position:fixed;inset:auto 0 0 0;max-height:42vh;background:rgba(20,22,30,.95);color:#e8ebf4;
padding:36px 56px;font-size:30px;line-height:1.6;border-top:1px solid rgba(255,255,255,.1);transform:translateY(100%);
transition:transform .3s var(--ease);z-index:40;overflow:auto;font-family:var(--font-sans)}
.notes-overlay.open{transform:translateY(0)}
.overview{position:fixed;inset:0;background:rgba(10,12,18,.92);backdrop-filter:blur(12px);z-index:50;
display:none;padding:48px;overflow:auto}
.overview.open{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-content:start}
.overview .thumb{background:var(--surface);border:1px solid var(--border);border-radius:14px;
aspect-ratio:16/9;overflow:hidden;cursor:pointer;position:relative;color:var(--text-1);padding:20px;
font-size:30px;transition:transform .2s var(--ease)}
.overview .thumb:hover{transform:scale(1.04)}
.overview .thumb .n{position:absolute;top:14px;left:18px;font-weight:700;font-size:30px;color:var(--text-3)}
.overview .thumb .t{position:absolute;bottom:16px;left:20px;right:20px;font-weight:600;color:var(--text-1);font-size:30px;line-height:1.3}
/* ================= NAV CONTROLS (鼠标控制栏 - 教室大屏) ================= */
.nav-controls{
position:fixed;bottom:40px;left:50%;transform:translateX(-50%);
display:flex;align-items:center;gap:16px;
background:rgba(20,22,30,.88);backdrop-filter:blur(14px) saturate(140%);
padding:18px 26px;border-radius:999px;
box-shadow:0 12px 40px rgba(0,0,0,.25),0 4px 12px rgba(0,0,0,.12);
border:1px solid rgba(255,255,255,.08);
z-index:35;
opacity:0;pointer-events:none;
transition:opacity .35s var(--ease), transform .35s var(--ease);
transform:translateX(-50%) translateY(20px);
}
.nav-controls.is-visible{
opacity:1;pointer-events:auto;
transform:translateX(-50%) translateY(0);
}
.nav-btn{
display:inline-flex;align-items:center;justify-content:center;
width:64px;height:64px;border-radius:50%;
background:rgba(255,255,255,.08);color:#e8ebf4;
border:1px solid rgba(255,255,255,.1);
cursor:pointer;font-size:30px;font-family:var(--font-sans);font-weight:600;
transition:background .2s var(--ease), transform .15s var(--ease), color .2s var(--ease);
user-select:none;line-height:1;
}
.nav-btn:hover{
background:var(--accent);color:#fff;
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(6,214,160,.4);
}
.nav-btn:active{transform:translateY(0) scale(.96);}
.nav-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none;}
.nav-btn svg{width:28px;height:28px;fill:currentColor;}
.nav-btn.nav-back{background:rgba(6,214,160,.15);color:var(--accent);border-color:var(--accent);}
.nav-btn.nav-back:hover{background:var(--accent);color:#fff;}
.nav-btn.nav-back svg{width:30px;height:30px;}
.nav-page{
display:inline-flex;align-items:center;justify-content:center;
min-width:120px;padding:0 20px;height:60px;border-radius:30px;
background:rgba(255,255,255,.05);color:#e8ebf4;
font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;
border:1px solid rgba(255,255,255,.08);
}
.nav-page .cur{color:var(--accent);}
.nav-page .sep{margin:0 8px;opacity:.5;}
.nav-divider{width:1px;height:36px;background:rgba(255,255,255,.12);margin:0 6px;}
/* ================= UTILITY ================= */
.hidden{display:none!important}
.nowrap{white-space:nowrap}
.tr{text-align:right}.tc{text-align:center}.tl{text-align:left}
.uppercase{text-transform:uppercase;letter-spacing:.12em}
/* ================= PRINT ================= */
@media print{
.slide{position:relative;opacity:1!important;transform:none!important;page-break-after:always;height:100vh}
.deck-header,.deck-footer,.progress-bar,.notes-overlay,.overview{display:none!important}
}
/* ================= EDGE TAP ZONES (边缘翻页区，仅触屏设备) ================= */
.tap-zone{
position:fixed;top:0;bottom:0;width:130px;z-index:30;
display:none;align-items:center;justify-content:center;
cursor:pointer;
}
.tap-zone-left{left:0;}
.tap-zone-right{right:0;}
.tap-zone svg{width:48px;height:48px;fill:rgba(255,255,255,.25);transition:fill .2s var(--ease);}
.tap-zone:active svg{fill:var(--accent);transform:scale(1.3);transition:transform .1s;}
/* ================= TOUCH DEVICE OPTIMIZATION (希沃触摸屏) ================= */
@media (hover: none) and (pointer: coarse){
/* 控制栏始终可见 */
.nav-controls{
opacity:1!important;pointer-events:auto!important;
transform:translateX(-50%) translateY(0)!important;
/* 增大内边距让按钮间距更宽 */
padding:20px 30px;gap:20px;
/* 更强的背景对比度，确保在浅色幻灯片上也清晰 */
background:rgba(15,17,25,.92);
box-shadow:0 16px 48px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.15);
}
/* 按钮放大至 76px，适合 4K 大屏手指触摸 */
.nav-btn{
width:76px;height:76px;
touch-action:manipulation; /* 防止双击缩放 */
-webkit-tap-highlight-color:transparent; /* 去除点击高亮 */
}
.nav-btn svg{width:34px;height:34px;}
.nav-btn.nav-back svg{width:36px;height:36px;}
/* 禁用 hover，改用 active 提供触摸反馈 */
.nav-btn:hover{
background:rgba(255,255,255,.08);color:#e8ebf4;
transform:none;box-shadow:none;
}
.nav-btn:active{
background:var(--accent);color:#fff;
transform:scale(.90);
box-shadow:0 0 24px rgba(6,214,160,.5);
}
.nav-btn.nav-back:hover{
background:rgba(6,214,160,.15);color:var(--accent);
}
.nav-btn.nav-back:active{
background:var(--accent);color:#fff;
}
/* 页码区域放大 */
.nav-page{
min-width:140px;height:72px;border-radius:36px;
font-size:32px;
touch-action:manipulation;
}
.nav-divider{height:44px;}
/* 边缘翻页区显示 */
.tap-zone{display:flex;}
.tap-zone svg{fill:rgba(128,128,128,.2);}
/* 幻灯片禁止默认触摸行为（防止页面滚动/缩放） */
.slide{touch-action:none;}
/* 概览缩略图更适合触摸 */
.overview .thumb{
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
.overview .thumb:hover{transform:none;}
.overview .thumb:active{transform:scale(.97);}
/* 禁用 card-hover 效果（触屏无 hover） */
.card-hover:hover{transform:none;box-shadow:var(--shadow);}
.card-hover:active{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
/* 链接和按钮统一 touch-action */
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
}