/*
styles.css 是整个小网站的样式文件。
它同时服务 index.html 和 draw.html：
- index.html 使用：.home-page、.hero、.eyebrow、.hero-text、.nav-grid、.nav-card、.creator 等样式。
- draw.html 使用：.app、.toolbar、.tool-group、.home-link、button、.canvas-wrap、canvas、.hint、.creator 等样式。
CSS 的基本写法：
选择器 {
属性: 值;
}
例如：
body {
margin: 0;
}
意思是选中 元素，把它默认外边距设为 0。
*/
/*
* 是通配选择器，表示选中页面上的所有元素。
box-sizing: border-box 的作用：
让元素的 width/height 包含 padding 和 border。
初学者可以这样理解：
如果一个盒子 width: 100px，padding: 10px，border: 1px；
默认情况下实际宽度会超过 100px。
设置 border-box 后，实际占用宽度仍然是 100px，布局更好算。
*/
* {
box-sizing: border-box;
}
/*
body 是整个网页的可见主体。
这里设置全站默认字体、文字颜色和背景。
*/
body {
/* 去掉浏览器默认的 8px 外边距，让页面可以从最边缘开始布局。 */
margin: 0;
/* min-height: 100vh 表示 body 至少和浏览器窗口一样高。
vh 是 viewport height，100vh 就是视口高度的 100%。 */
min-height: 100vh;
/* 字体优先使用微软雅黑；如果没有，就用 Arial；再没有就用系统默认 sans-serif。 */
font-family: "Microsoft YaHei", Arial, sans-serif;
/* 全站默认文字颜色，深灰色比纯黑更柔和。 */
color: #1f2937;
/*
linear-gradient 是线性渐变背景。
135deg 表示渐变方向。
#eef2ff 到 #f8fafc 从淡蓝紫渐变到浅灰白。
*/
background: linear-gradient(135deg, #eef2ff, #f8fafc);
}
/*
.app 和 .home-page 是两个页面的主容器。
.app：draw.html 的主容器。
.home-page：index.html 的主容器。
这里把它们共同的宽度、居中和上下内边距放在一起写，避免重复。
*/
.app,
.home-page {
/*
width: min(1180px, calc(100% - 32px));
表示宽度取两个值中更小的：
1. 1180px
2. 浏览器宽度减 32px
这样大屏幕上不会太宽，小屏幕上左右也会留 16px 空白。
*/
width: min(1180px, calc(100% - 32px));
/* margin: 0 auto; 经典水平居中写法。
上下外边距为 0，左右自动分配。 */
margin: 0 auto;
/* 上下留 28px 空间，左右不留。 */
padding: 28px 0;
}
/* 首页容器的额外布局。 */
.home-page {
/* 使用弹性布局 flex。 */
display: flex;
/* 首页至少占满一屏高度。 */
min-height: 100vh;
/* flex-direction: column 表示子元素从上到下排列。 */
flex-direction: column;
/* justify-content: center 表示在主轴方向居中。
因为主轴是纵向，所以内容会垂直居中。 */
justify-content: center;
}
/* 首页顶部标题区。 */
.hero {
margin-bottom: 28px;
text-align: center;
}
/* Welcome 小字。 */
.eyebrow {
margin: 0 0 8px;
color: #2563eb;
font-size: 14px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}
/* 首页 h1 标题。 */
.hero h1 {
margin: 0;
/*
clamp(36px, 7vw, 72px) 表示响应式字号：
最小 36px，理想值 7vw，最大 72px。
vw 是视口宽度单位，屏幕越宽字号越大，但不会超过 72px。
*/
font-size: clamp(36px, 7vw, 72px);
line-height: 1.1;
}
/* 首页标题下的说明文字。 */
.hero-text {
margin: 16px 0 0;
color: #64748b;
font-size: 18px;
}
/*
导航卡片的网格容器。
index.html 中