/* 首页顶部：左边品牌锁定 + 一句二字形容词的小字说明，右边一块固定尺寸的活动图面板。
   栏宽是这么分的：1120 减掉左右各 40 的留白、再减掉 56 的栏间距，剩下的给文字，
   所以面板最多 600。窄到摆不下两栏就竖过来，文字在上、图在下。
   面板的三个尺寸是一组的，改一个就得跟着改另外两个，别单独动：
     --band-w    面板宽度
     --band-ring 照片四周留多宽的光晕
     --band-h    面板高度 = (--band-w − 2 − 2×ring) ÷ 宽高比 + 2×ring + 2
   当前 600 / 16 / 353 是照照片自己的 1080:608 算的，四周正好留出均匀的 16px 光晕。
   定义放在这一层是因为下面那栏要拿 --band-w 当轨道宽度：写死在面板自己身上，
   网格就只能在 auto 轨道里求 100%，百分比成环，面板会塌成 0 宽。 */
.home-hero{--band-w:600px;--band-ring:16px;--band-h:353px;max-width:1120px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--band-w));align-items:start;gap:24px 56px}
/* 一列 flex（而不是普通块级）：底下的个人中心才能 flex:1 去吃掉剩余高度。
   块级流里没有「吃掉剩余高度」这回事，面板就只能是它内容的高度。 */
.home-hero__intro{min-width:0;display:flex;flex-direction:column}
/* 品牌锁定：图标 + 字标。字标的 line-height 撑到和图标一样高，于是两件事同时成立 ——
   字看着是在图标里居中的，但它的盒子上边框和图标、和右边图片的上边框都齐平。
   改成 align-items:center 就只有「看着居中」，上边框立刻差 18px。 */
.home-brand{display:flex;align-items:flex-start;gap:16px}
.home-brand__mark{width:64px;height:64px;flex:none;border-radius:19px;box-shadow:0 10px 26px #0009;user-select:none}
.home-brand__name{display:block;font-size:40px;font-weight:650;line-height:64px;letter-spacing:.06em;white-space:nowrap}
/* 品牌下面那行小字：三个形容词当解释用，连成一句话（顿号分隔，末尾不加句号），
   所以是纯文本不是 flex —— 一旦用 flex 排 span，标点会被 gap 推开成孤零零的符号 */
.home-hero__motto{margin:14px 0 0;font-size:16px;letter-spacing:.05em;color:var(--muted)}

/* 工具栏：品牌下面那一块，三个入口共用一块面板。
   高度不是拍脑袋定的：桌面上 .home-hero 拉成 stretch，左栏是列 flex，
   这块 flex:1 吃掉剩下的高度，底边正好落在右边活动图面板的底边上 —— 两栏收在同一条线。
   圆角 23、行内缩 20 也是跟着下面那排功能卡片来的（卡片圆角 23，卡片文字内缩 21）。
   这块不再写「工具栏」那行小标题：三个入口自己就把话说完了，省下的 45px 全给了行高。 */
.home-hub{position:relative;display:flex;flex:1;flex-direction:column;margin:26px 0 0;
  /* 系统里最讲究的一套：Segoe UI Variable 是 Win11 的可变字体（Display 给大字、Text 给小字），
     中文配 YaHei UI 而不是 YaHei —— UI 那一版是专门给界面用的，字距和行高更紧。
     一个字体字节都不发：CSP 的 default-src 'self' 本来就放不出外部字体，全靠系统自带的。 */
  font-family:"Segoe UI Variable Display","Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;
  font-optical-sizing:auto}
/* 材质照站内既有的分组列表（menu-group / menu-row），但叠两层：一层极淡的自上而下高光，
   一层本色渐变；再补一条底边内阴影和近/远两道投影。单层渐变加一道大模糊，就是「平」的来源。 */
.home-hub__base{display:flex;flex:1;flex-direction:column;overflow:hidden;border:1px solid #ffffff1c;border-radius:23px;
  background:linear-gradient(180deg,#ffffff0b,#ffffff00 46%),linear-gradient(180deg,#20232d,#14161c);
  box-shadow:inset 0 1px 0 #ffffff1f,inset 0 -1px 0 #0000005c,0 2px 4px #0000006b,0 24px 60px -16px #000000a3}
/* border:0 是先清掉 base.css 给 button 的那套边框底色，分隔线改为另画（见下）。
   flex-basis 给 0 而不是 auto：auto 是按内容算基数、再把余量均分，
   于是「两行文字」的入口会比别的那个高 2px。基数归零三行才真的一样高。
   isolation 是给下面那团跟随鼠标的光圈用的：光圈 z-index:-1 压在内容后面，
   没有 isolation 它会一路穿到这块的底色底下，等于没画。 */
.home-hub__row{position:relative;isolation:isolate;overflow:hidden;display:flex;flex:1 1 0;align-items:center;gap:15px;width:100%;min-height:66px;padding:0 20px;border:0;border-radius:0;background:none;text-align:left;transition:background .24s var(--ease)}
/* 跟随鼠标的一小团光。坐标由 js 在 pointermove 里写进 --mx/--my —— 纯 CSS 拿不到指针位置；
   也不去改 background，免得把上面那套渐变重写一遍。触摸设备没有 hover，整条关在媒体查询里。 */
.home-hub__row::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),#ffffff17,#ffffff00 72%);transition:opacity .26s var(--ease)}
/* 分隔线从图标那一格之后起笔，而不是拉满一条：三条切满的横杠会让这块看着是张表格。
   往右渐隐是给那道箭头让路，齐刷刷一条实线太重。81 = 内缩 20 + 图标 46 + 间距 15 */
.home-hub__row+.home-hub__row::after{content:'';position:absolute;left:81px;right:0;top:0;height:1px;background:linear-gradient(90deg,#ffffff1a,#ffffff08 58%,#ffffff00)}
/* base.css 的 button:hover 是 0-1-1，比 .home-hub__row 高，不给它单独写一条就会被刷成灰块。
   底色只给 6%：真正那层「亮了」是上面那团跟着鼠标走的光，静态底色只是兜底
   （指针停下、或者键盘走到这边时，得有个看得见的状态）。 */
.home-hub__row:hover{background:#ffffff06}
.home-hub__row:active{background:#ff465518}
.home-hub__row:focus-visible{outline:2px solid var(--red);outline-offset:-4px;border-radius:16px}
/* 图标 46 一格，装的就是那张图本身。不垫 padding、不套哑光底色：图自带深底和描边，
   再套一层方块就成了「画框里的画」。悬停也不换底色 —— 青色的图压红底会脏，
   改成整体提亮、往右上抬 2px 并顶出一道投影，和右边箭头一起动。 */
.home-hub__icon{flex:none;width:46px;height:46px;border-radius:13px;object-fit:cover;transition:filter .24s var(--ease),transform .24s var(--ease),box-shadow .24s var(--ease)}
/* 主标题 19px 已经算大字，所以走 Display 那一档；副标题 14px 走 Text 那一档。
   两块都是 nowrap + 省略号：250 宽那档两栏布局里，副标题再长一点就会顶到箭头上。 */
.home-hub__text{display:flex;flex-direction:column;gap:4px;min-width:0;transition:transform .24s var(--ease)}
.home-hub__text strong{font-family:"Segoe UI Variable Display","Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;font-size:19px;font-weight:600;letter-spacing:.005em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .24s var(--ease)}
.home-hub__text small{font-family:"Segoe UI Variable Text","Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;font-size:14px;color:#a3abb9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .24s var(--ease)}
.home-hub__go{flex:none;width:19px;height:19px;margin-left:auto;color:#7f8794;transition:transform .28s var(--ease),color .24s var(--ease)}
.home-hub__row:hover .home-hub__icon,.home-hub__row:focus-within .home-hub__icon{filter:brightness(1.2) saturate(1.06);transform:translate(2px,-2px) scale(1.05);box-shadow:0 10px 20px #00000073}
.home-hub__row:hover .home-hub__text,.home-hub__row:focus-within .home-hub__text{transform:translateX(2px)}
.home-hub__row:hover .home-hub__text strong,.home-hub__row:focus-within .home-hub__text strong{color:#fff}
.home-hub__row:hover .home-hub__text small,.home-hub__row:focus-within .home-hub__text small{color:#c6ccd6}
.home-hub__row:hover .home-hub__go,.home-hub__row:focus-within .home-hub__go{transform:translateX(5px) scale(1.06);color:#fff}
@media(hover:hover) and (pointer:fine){.home-hub__row:hover::before{opacity:1}}
/* 按下去把那些位移收回来，像真的被按进去一点。这几条必须排在上面所有 hover 之后：
   选择器权重一样（.row:active .x 和 .row:hover .x 都是 0-3-0），靠源码顺序决胜。 */
.home-hub__row:active .home-hub__icon,.home-hub__row:active .home-hub__text,.home-hub__row:active .home-hub__go{transform:none}
.home-hub__note{padding:12px 4px;color:#98a0ae;font-size:13px;text-align:center}
/* 只在桌面两栏时拉平：单栏的时候底下没有东西可对齐，面板就不该硬撑 */
@media(min-width:1001px){.home-hero{align-items:stretch}}

/* 工具栏面板：三个入口共用一块从右边滑出的面板，换的只是标题和内容。
   尺寸和材质照站点的菜单抽屉（.site-drawer）来 —— 同一套 --drawer-* 变量、同样的竖向渐变底、
   一圈深阴影加一条贴边 1px 描边，只是镜像到右侧。不另造一套语言。
   z-index 压在 .drawer-burger(9000) 之上：遮罩铺满全屏，于是两块抽屉互为「点不到」，
   不可能同时开着，也就不必写互斥逻辑。 */
.hub-panel-backdrop{position:fixed;inset:0;z-index:9550;width:100%;height:100%;padding:0;border:0;border-radius:0;background:#05070ca6;opacity:0;backdrop-filter:blur(5px) saturate(.8);-webkit-backdrop-filter:blur(5px) saturate(.8);transition:opacity .22s ease}
.hub-panel-backdrop.is-open{opacity:1}
/* 遮罩是 <button>，base.css 的全局 button:hover 是 0-1-1，比上面那条 0-1-0 高，
   不给它钉死悬停态，鼠标一移上去整屏就刷成灰的（和 .drawer-backdrop 同款坑） */
.hub-panel-backdrop:hover,.hub-panel-backdrop:active,.hub-panel-backdrop:focus-visible{background:#05070ca6;translate:none;transform:none;outline:none;border-radius:0}
.hub-panel{position:fixed;inset:0 0 0 auto;z-index:9600;display:flex;flex-direction:column;width:min(380px,calc(100vw - 24px));min-height:100dvh;padding:calc(var(--drawer-safe-top) + 20px) 18px max(18px,env(safe-area-inset-bottom));border-left:1px solid var(--drawer-line);background:linear-gradient(195deg,#151922fa 0%,#0e1118fc 58%,#0b0e14fd 100%);color:#eef1f6;box-shadow:-30px 0 80px #00000085,inset 1px 0 0 #ffffff08;transform:translate3d(102%,0,0);visibility:hidden;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;contain:layout paint style;transition:transform .32s var(--drawer-ease),visibility 0s .32s}
.hub-panel.is-open{transform:translate3d(0,0,0);visibility:visible;transition:transform .32s var(--drawer-ease),visibility 0s}
/* 面板开着的时候锁住背后的页面滚动，和站点抽屉一个做法 */
html.hub-panel-open{overflow:hidden}
/* flex:none：Amari 的对话布局里 body 要吃满剩余高度，标题栏不能被压扁 */
.hub-panel__head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:0 0 16px;border-bottom:1px solid #ffffff0f}
.hub-panel__eyebrow{margin:0 0 7px;color:#8f98a7;font-size:12px;font-weight:600;letter-spacing:.16em}
.hub-panel__heading h2{margin:0;color:#f3f5f8;font-size:21px;font-weight:650;letter-spacing:.02em}
/* 44×44、圆角 14、字号 23 —— 直接抄 .drawer-head .icon-close，两块的关闭键看起来要是同一颗 */
.hub-panel__close{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ffffff12;border-radius:14px;background:#ffffff05;color:#abb3c0;font-size:23px;line-height:1}
.hub-panel__close:hover{color:#fff;background:#ffffff0b;border-color:#ffffff20}
.hub-panel__close:active{transform:scale(.95)}
.hub-panel__close:focus-visible{outline:2px solid #ff7d89;outline-offset:2px}
.hub-panel__body{padding:18px 0 0}
/* 检索和提问共用同一条输入行：两处本来就是同一个控件，没理由写两遍 */
.hub-panel__form{display:flex;gap:10px;margin:0 0 4px}
.hub-panel__form input{flex:1;min-width:0}
.hub-panel__form button{flex:none;background:var(--red);border-color:var(--red);color:#fff;font-weight:650}
.hub-panel__form button:hover{background:#e53849;border-color:#e53849}
.hub-panel__form button:active{transform:scale(.97)}
/* base.css 给所有可聚焦元素配的是蓝色光圈（--blue），在这块红品牌色的面板里跟发送键、
   跟面板本身都打架。换成站里自己那支 focus 色（和 a/button 的 #ff929c 同源），
   偏移收到 2px：输入行是药丸，5px 的圈在行里会顶到上下沿。 */
.hub-panel input:focus-visible{outline:2px solid #ff929c;outline-offset:2px}
.hub-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.hub-points:only-child{margin-top:0}
/* 面板只有 380 宽，两列点位卡片会挤成两条窄缝 */
.hub-panel .hub-points{grid-template-columns:1fr;margin-top:4px}
.hub-panel .saved-point{padding:11px 13px;gap:4px}
.hub-panel .saved-point strong{font-size:15px}
.hub-panel .saved-point>span{font-size:13px}
/* Amari 的窗口照豆包那类对话 app 摆：上面一条消息流自己滚，输入行和快捷提问压在最底下。
   面板本身就是 flex 列，所以 body 只要 flex:1 + min-height:0 —— 消息流就自己滚了，
   底下的输入行永远贴在面板下沿，不用 fixed 也不用算高度。 */
.hub-panel__body--chat{display:flex;flex:1;flex-direction:column;min-height:0;padding:0}
.amari-log{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:16px 2px 14px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.amari-row{display:flex;align-items:flex-start;gap:9px}
.amari-row--user{justify-content:flex-end}
.amari-stack{display:flex;flex-direction:column;gap:8px;min-width:0}
/* 头像就用工具栏那颗圆徽本身，28 一格，别被消息挤扁 */
.amari-avatar{flex:none;width:28px;height:28px;border-radius:9px;object-fit:cover}
.amari-msg{max-width:100%;padding:10px 13px;border:1px solid #ffffff12;border-radius:16px;background:#ffffff0a;color:#e6eaf0;font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.amari-msg--bot{border-bottom-left-radius:5px}
/* 自己发的那条靠右、红底；右下角收一点直角，指向「这话是从这边出去的」 */
.amari-msg--user{border-color:transparent;border-bottom-right-radius:5px;background:var(--red);color:#fff;font-weight:500}
/* 面板一共 380，头像加气泡之后只剩 ~300，两列点位卡片会挤成两条窄缝 */
.amari-stack .hub-points{grid-template-columns:1fr;margin-top:0}
.amari-chips{flex:none;display:flex;flex-wrap:wrap;gap:7px;padding:0 0 11px}
.amari-chips[hidden]{display:none}
.amari-chip{padding:7px 12px;border:1px solid #ffffff16;border-radius:999px;background:#ffffff08;color:#c3cad5;font-size:12.5px;line-height:1.3}
.amari-chip:hover{color:#fff;background:#ffffff14;border-color:#ffffff2b}
.amari-chip:active{transform:scale(.97)}
/* 输入行：药丸输入框 + 红色圆形发送键，和提示词一起压在面板最下方 */
.amari-composer{flex:none;display:flex;align-items:center;gap:9px;padding-top:12px;border-top:1px solid #ffffff0f}
.amari-composer input{flex:1;min-width:0;border-radius:999px;padding:11px 15px}
/* 发送键照站里那颗红按钮（.explore-button）来：浅一档的红描边、顶上一条内高光、
   一圈染红的大扩散阴影；悬停换成更亮的红、阴影张开、抬 1px。
   尺寸跟左边输入行等高（46 = 上下内边距 11+11 + 行高 22.4 + 描边 2）——
   之前是个小一圈的 38 圆盘浮在 46 的药丸旁边，看着像随手摆的。 */
.amari-send{flex:none;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #ff7d8990;border-radius:50%;background:var(--red);color:#fff;box-shadow:inset 0 1px 0 #ffffff3d,0 8px 30px #b4374820;transition:background .22s var(--ease),border-color .22s var(--ease),box-shadow .3s var(--ease),translate .3s var(--ease),scale .16s var(--ease)}
.amari-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.amari-send:hover{background:#ff7d89;border-color:#ffa5ae;box-shadow:inset 0 1px 0 #ffffff5c,0 12px 35px #ff465533;translate:0 -1px}
/* 按下去那 1px 的下沉交给 base 的 button:active，站里每颗按钮都这样，这里只管缩一圈 */
.amari-send:active{scale:.94}
.amari-send:focus-visible{outline:2px solid #ffd9df;outline-offset:3px}
@media(max-width:640px){.hub-points{grid-template-columns:1fr}}

/* 活动图面板：一块固定尺寸的圆角盒子，盒子里是照片自己虚化出来的环境光，照片居中。
   尺寸是写死的，照片缩在里面、不参与撑开面板。 */
.photo-band{width:min(var(--band-w),100%);margin-left:auto}
.photo-band__stage{position:relative;width:100%;height:var(--band-h);overflow:hidden;border:1px solid #ffffff23;border-radius:24px;background:linear-gradient(180deg,#17161c,#0e0e13)}
.photo-band__slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .6s var(--ease)}
/* 当前这张压在上面，才不会出现「淡出的旧图盖住淡入的新图」 */
.photo-band__slide.is-active{z-index:1;opacity:1}
/* 环境光：照片自己放大虚化铺满整块面板，压暗当背光，慢慢漂移。
   静止时它是一块死图，漂着才有「有光源」的感觉。
   渐隐到透明而不是渐隐到某个底色：面板底色本身是渐变的，填死色会露出一块色斑。 */
.photo-band__slide::before{content:'';position:absolute;inset:0;background-image:var(--art);background-position:center;background-size:cover;background-repeat:no-repeat;filter:blur(34px) brightness(.58) saturate(.9);transform:scale(1.06);animation:band-ambient 24s ease-in-out infinite alternate;
  mask-image:radial-gradient(closest-side,#000 42%,#0000)}
@keyframes band-ambient{to{transform:scale(1.11)}}
/* 宽高都给 auto 让 max 去夹，浏览器会按原比例缩到同时满足两个上限 —— 照片的盒子
   始终等于照片本身。用 height:100% 的话会被 max-width 拉宽、再靠 contain 缩图，
   窄屏上就变成一张小图飘在大片空白里 */
.photo-band__art{width:auto;height:auto;max-width:calc(100% - var(--band-ring)*2);max-height:calc(100% - var(--band-ring)*2);border-radius:14px;animation:band-in .9s var(--ease) both}
@keyframes band-in{from{opacity:0;transform:scale(.97);filter:blur(9px)}}
.photo-band__bars{display:flex;justify-content:center;align-items:center}
.photo-band__bars[hidden]{display:none}
/* 横线本身只有 3px，点击区靠按钮的内边距撑到 30x40，否则手机上点不中 */
.photo-band__bar{flex:0 1 30px;min-width:7px;height:40px;padding:0 4px;display:flex;align-items:center;border:0;background:none;cursor:pointer}
.photo-band__bar::after{content:'';display:block;width:100%;height:3px;border-radius:2px;background:#ffffff2e;transition:background .25s var(--ease)}
.photo-band__bar:hover::after{background:#ffffff73}
.photo-band__bar[aria-current=true]::after{background:#f4f3f5}
@media(max-width:1000px){.home-hero{padding:0 28px;grid-template-columns:minmax(0,1fr);gap:24px}.photo-band{margin-left:0}}
/* 窄屏上面板宽度被屏幕卡住，光晕和高度都得跟着收，否则照片四周全是空的 */
@media(max-width:700px){.home-hero{padding:0 20px}.home-brand__mark{width:52px;height:52px;border-radius:16px}.home-brand__name{font-size:34px;line-height:52px}.home-hero__motto{margin-top:12px;font-size:14px}.home-hub{margin-top:20px}.home-hub__base{border-radius:21px}.home-hub__row{padding:0 16px;gap:13px;min-height:62px}.home-hub__row+.home-hub__row::after{left:71px}.home-hub__icon{width:42px;height:42px;border-radius:12px}.home-hub__text strong{font-size:18px}.home-hub__text small{font-size:13.5px}.home-hub__go{width:18px;height:18px}.hub-panel{width:min(340px,calc(100vw - 20px));padding-inline:14px}.hub-panel__heading h2{font-size:19px}.amari-log{padding-top:14px}.amari-avatar{width:26px;height:26px;border-radius:8px}.photo-band{--band-ring:10px;--band-h:clamp(150px,22vh,215px)}.photo-band__bar{flex-basis:24px}}
@media(prefers-reduced-motion:reduce){.photo-band__slide{transition:none}.photo-band__slide::before,.photo-band__art{animation:none}}