/* Reference dimensions scale together, retaining the original visual rhythm. */
:root {
  --u: clamp(.8px, .0390625vw, 1px);
  --side: calc(288 * var(--u));
  --content: calc(708 * var(--u));
  --bg: #faf9f9;
  --hover: #f1efef;
  --blue: #a1d3ff;
  font-family: Arial, "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { -webkit-tap-highlight-color: transparent; }
button, .skill-body, .composer, .field input, .field textarea {
  transition: background-color .14s, box-shadow .14s, border-color .14s, color .14s;
}
button:active:not(.toggle) { filter: brightness(.97); }
.sidebar { padding: calc(10 * var(--u)) calc(8 * var(--u)); }
.brand-row { flex-shrink: 0; height: calc(38 * var(--u)); padding: 0 calc(5 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.brand { font-size: calc(18 * var(--u)); padding: 0; gap: calc(8 * var(--u)); font-weight: 400; }
.spark { width: calc(26 * var(--u)); height: calc(26 * var(--u)); background: url('favicon.svg') center/contain no-repeat; clip-path: none; }
.brand-row .icon-btn { width: calc(29 * var(--u)); height: calc(29 * var(--u)); padding: calc(6 * var(--u)); }
.brand-row svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.nav { flex-shrink: 0; }
.nav-item { min-height: calc(32 * var(--u)); height: calc(32 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); gap: calc(14 * var(--u)); font-size: calc(14 * var(--u)); }
.nav-item svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 1.65; }
.nav-item.active { font-weight: 600; }
.side-label { flex-shrink: 0; padding: calc(21 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); font-size: calc(13 * var(--u)); }
.notebook-button { min-height: calc(36 * var(--u)); }
.history-label { padding-top: calc(18 * var(--u)); padding-bottom: calc(4 * var(--u)); }
.history-row { height: calc(32 * var(--u)); padding-left: calc(9 * var(--u)); }
.history-row>button:first-child { font-size: calc(13.5 * var(--u)); padding: calc(6 * var(--u)) calc(3 * var(--u)); padding-right: calc(20 * var(--u)); }
.history-row .more-row { position: absolute; right: 0; width: calc(28 * var(--u)); height: calc(26 * var(--u)); margin-right: calc(3 * var(--u)); }
.history-row .more-row:not(:focus-visible) { pointer-events: none; }
.history-row:hover .more-row, .history-row:focus-within .more-row { pointer-events: auto; }
.history-row:hover>button:first-child { padding-right: calc(34 * var(--u)); }
.unread { position: absolute; right: calc(12 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin: 0; }
.history-row:hover .unread { display: none; }
.history { mask-image: linear-gradient(#000 0%, #000 calc(100% - 10px), transparent); }
.side-footer { min-height: calc(46 * var(--u)); flex-shrink: 0; padding-top: calc(8 * var(--u)); }
.profile { gap: calc(9 * var(--u)); padding: 2px calc(5 * var(--u)); font-size: calc(14 * var(--u)); }
.avatar { width: calc(29 * var(--u)); height: calc(29 * var(--u)); }
.side-footer .icon-btn { width: calc(30 * var(--u)); height: calc(30 * var(--u)); padding: calc(7 * var(--u)); }
.side-footer svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.topbar { top: calc(12 * var(--u)); right: calc(18 * var(--u)); gap: calc(12 * var(--u)); }
.pill { padding: calc(9 * var(--u)) calc(14 * var(--u)); font-size: calc(13 * var(--u)); gap: calc(7 * var(--u)); }
.pill.blue { padding: calc(9 * var(--u)) calc(15 * var(--u)); }
.pill svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.topbar>.icon-btn { width: calc(32 * var(--u)); height: calc(32 * var(--u)); padding: calc(8 * var(--u)); }
.topbar>.icon-btn svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.topbar .pdf-pill { border: 1px solid #a6a6a6; background: transparent; }
.pdf-pill svg { color: #d93025; }
.home-zone { top: 41.15%; isolation: isolate; }
.home-zone h1 { font-size: calc(36 * var(--u)); line-height: 1.25; letter-spacing: 0; margin-bottom: calc(44 * var(--u)); color: #505357; }
.home-zone:before { width: calc(1120 * var(--u)); height: calc(770 * var(--u)); max-width: 96%; left: 50%; top: calc(110 * var(--u)); background: radial-gradient(ellipse, #b8dcfbba 0%, #c9e4fb8c 30%, #e0effb4d 52%, transparent 72%); filter: blur(calc(28 * var(--u))); }
.composer-wrap { width: min(calc(660 * var(--u)), calc(100% - 48px)); }
.composer { min-height: calc(64 * var(--u)); border-radius: calc(34 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)) calc(16 * var(--u)); gap: calc(8 * var(--u)); box-shadow: 0 2px 5px #283c551a, 0 0 1px #283c550a; }
.composer:focus-within { box-shadow: 0 3px 9px #283c551c, 0 0 0 1px #dbe8f44d; }
.composer textarea { height: calc(26 * var(--u)); line-height: calc(26 * var(--u)); font-size: calc(16 * var(--u)); caret-color: #4386cf; }
.composer .icon-btn { width: calc(32 * var(--u)); height: calc(32 * var(--u)); padding: calc(6 * var(--u)); }
.composer .icon-btn svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.composer .plus svg { width: calc(23 * var(--u)); height: calc(23 * var(--u)); }
.model-button { padding: calc(10 * var(--u)) calc(13 * var(--u)); gap: calc(10 * var(--u)); font-size: calc(14 * var(--u)); }
.model-button svg { height: calc(14 * var(--u)); width: calc(14 * var(--u)); transition: transform .16s; }
.model-button.open svg { transform: rotate(180deg); }
.composer.expanded { align-items: flex-end; border-radius: calc(26 * var(--u)); }
.composer.expanded textarea { margin: calc(4 * var(--u)) 0; }
.footer-composer { bottom: calc(15 * var(--u)); padding-bottom: calc(26 * var(--u)); padding-top: calc(20 * var(--u)); }
.disclaimer { font-size: calc(12 * var(--u)); }
.chat-scroll { inset: calc(64 * var(--u)) 0 calc(130 * var(--u)); }
.chat-content { max-width: var(--content); padding: calc(8 * var(--u)) 0 calc(40 * var(--u)); }
.message { font-size: calc(16 * var(--u)); margin-bottom: calc(54 * var(--u)); line-height: 1.7; }
.user-message { margin-bottom: calc(52 * var(--u)); }
.user-bubble { padding: calc(18 * var(--u)) calc(28 * var(--u)); border-radius: calc(35 * var(--u)); }
.answer p { margin-bottom: calc(16 * var(--u)); }
.answer li { margin: calc(10 * var(--u)) 0; }
.actions { gap: 0; margin-top: calc(6 * var(--u)); }
.actions .icon-btn { width: calc(31 * var(--u)); height: calc(31 * var(--u)); padding: calc(7 * var(--u)); }
.actions svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.artifact-card { border-radius: calc(27 * var(--u)); padding: calc(21 * var(--u)) calc(22 * var(--u)); gap: calc(17 * var(--u)); margin: calc(18 * var(--u)) 0 calc(37 * var(--u)); }
.artifact-card .pill { margin-top: calc(42 * var(--u)); }
.artifact-date { font-size: calc(12 * var(--u)); }
.jump-bottom { width: calc(42 * var(--u)); height: calc(42 * var(--u)); padding: calc(12 * var(--u)); bottom: calc(135 * var(--u)); left: 50%; transform: translateX(-50%); z-index: 14; transition: opacity .14s; }
.jump-bottom[hidden] { display: none; }
.menu { border-radius: calc(20 * var(--u)); padding: calc(8 * var(--u)); min-width: calc(170 * var(--u)); max-height: calc(100dvh - 20px); overflow-y: auto; scrollbar-width: thin; box-shadow: 0 4px 24px #3c40430c; }
.menu-item { font-size: calc(13.5 * var(--u)); min-height: calc(39 * var(--u)); border-radius: calc(12 * var(--u)); gap: calc(12 * var(--u)); padding: calc(12 * var(--u)); }
.menu-item svg { height: calc(17 * var(--u)); width: calc(17 * var(--u)); }
.menu-item .subtext { font-size: calc(12 * var(--u)); margin-top: calc(5 * var(--u)); }
.menu-label { font-size: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u)); }
.model-menu { width: calc(170 * var(--u)); }
.model-menu .menu-item { padding: calc(13 * var(--u)) calc(10 * var(--u)); }
.model-menu .menu-item>svg, .model-menu .empty-check { width: calc(15 * var(--u)); }
.submenu { min-width: calc(140 * var(--u)); width: calc(140 * var(--u)); }
.settings-menu { width: calc(240 * var(--u)); }
.settings-menu .menu-item { min-height: calc(36 * var(--u)); padding: calc(10 * var(--u)); }
.settings-menu .menu-label { padding: calc(10 * var(--u)); }
.modal-backdrop { background: #0003; backdrop-filter: blur(.5px); }
.modal { width: min(calc(660 * var(--u)), calc(100vw - 32px)); border-radius: calc(36 * var(--u)); }
.search-modal { height: min(calc(760 * var(--u)), 80dvh); }
.search-head { padding: calc(18 * var(--u)) calc(20 * var(--u)); gap: calc(14 * var(--u)); }
.search-head input { font-size: calc(16 * var(--u)); }
.recent-label { font-size: calc(14 * var(--u)); padding: calc(8 * var(--u)) calc(24 * var(--u)) calc(14 * var(--u)); }
.search-results { padding: 0 calc(16 * var(--u)) calc(12 * var(--u)); }
.search-result { font-size: calc(16 * var(--u)); padding: calc(13 * var(--u)) calc(14 * var(--u)); gap: calc(15 * var(--u)); }
.search-result svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.search-result .date { font-size: calc(14 * var(--u)); }
.custom-page, .editor { max-width: var(--content); }
.custom-page { padding: calc(16 * var(--u)) 0 calc(80 * var(--u)); }
.custom-tabs { gap: calc(10 * var(--u)); margin-bottom: calc(72 * var(--u)); }
.tab { font-size: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(17 * var(--u)); }
.custom-header { margin: 0 calc(16 * var(--u)) calc(28 * var(--u)); }
.custom-header h1 { font-size: calc(25 * var(--u)); margin-bottom: calc(9 * var(--u)); }
.custom-header p { font-size: calc(14 * var(--u)); }
.custom-search { flex-shrink: 0; width: calc(230 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(14 * var(--u)); }
.custom-search input { font-size: calc(13 * var(--u)); }
.category { margin: 0 calc(16 * var(--u)) calc(36 * var(--u)); }
.category-title { font-size: calc(16 * var(--u)); margin-bottom: calc(15 * var(--u)); }
.skill-grid { column-gap: calc(35 * var(--u)); row-gap: calc(12 * var(--u)); }
.skill-card { gap: calc(12 * var(--u)); padding: calc(13 * var(--u)) 0; }
.skill-icon { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.skill-name { font-size: calc(17 * var(--u)); margin-bottom: calc(7 * var(--u)); }
.skill-desc { font-size: calc(12 * var(--u)); }
.skill-icon svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.skill-icon.workspace { border-radius: 0; }
.skill-icon.workspace svg { width: 100%; height: 100%; stroke: none; }
.skill-body:hover .skill-name { color: #4b6f94; }
.skill-card .icon-btn { width: calc(28 * var(--u)); height: calc(28 * var(--u)); padding: calc(5 * var(--u)); }
.editor { padding: calc(7 * var(--u)) 0 calc(140 * var(--u)); }
.editor-top { margin-bottom: calc(14 * var(--u)); }
.back-link { font-size: calc(16 * var(--u)); gap: calc(12 * var(--u)); }
.editor-form { padding: calc(25 * var(--u)); border-radius: calc(28 * var(--u)); }
.field { margin-bottom: calc(20 * var(--u)); }
.field>span { font-size: calc(13 * var(--u)); margin: 0 calc(16 * var(--u)) calc(8 * var(--u)); }
.field input, .field textarea { padding: calc(18 * var(--u)) calc(16 * var(--u)); border-radius: calc(15 * var(--u)); font-size: calc(14 * var(--u)); }
.editor-form .field textarea[name=desc] { resize: none; }
.basic-modal { padding: 30px; max-width: 540px; }
.portfolio-modal { width: min(1080px, 94vw); }
[data-tip]:hover:after, [data-tip]:focus-visible:after { font-size: 12px; line-height: 1.25; font-weight: 400; }
.sidebar [data-tip]:hover:after { left: auto; right: 0; transform: none; }
.side-footer [data-tip]:hover:after { top: auto; bottom: calc(100% + 9px); }
.dark { --bg: #191a1b; --hover: #2c2d2f; }
.dark .home-zone:before { opacity: .14; }
.dark .composer { box-shadow: 0 2px 6px #0003; }
.dark .composer:focus-within { box-shadow: 0 0 0 1px #527498, 0 3px 9px #0002; }
.dark .skill-body:hover .skill-name { color: #a5d1ff; }
.dark .actions .icon-btn { color: #b5b9bf; }
.dark .topbar .pdf-pill { border-color: #63676d; }
.dark .pdf-pill svg { color: #fc7771; }
.collapsed { --side: calc(52 * var(--u)); }
.collapsed .sidebar { padding-left: calc(7 * var(--u)); padding-right: calc(7 * var(--u)); }
.collapsed .nav-item { width: calc(36 * var(--u)); height: calc(32 * var(--u)); padding: calc(7 * var(--u)) calc(8 * var(--u)); }
.collapsed .brand-row { margin-bottom: calc(12 * var(--u)); }
.collapsed .side-footer { gap: calc(12 * var(--u)); }
@media(max-width:1000px) {
  .custom-page, .editor { max-width: calc(100% - 48px); }
  .custom-header { flex-direction: row; }
  .custom-search { width: 160px; }
  .custom-tabs { margin-bottom: 44px; }
  .chat-content { max-width: min(var(--content), calc(100% - 48px)); }
  .topbar .download { display: inline-flex; }
}
@media(max-width:700px) {
  :root, .collapsed { --side: 52px; }
  .sidebar, .collapsed .sidebar { padding: 12px 7px 10px; width: 52px; }
  .brand, .collapsed .brand { width: 36px; height: 32px; }
  .brand-row, .collapsed .brand-row { height: 32px; margin-bottom: 10px; }
  .spark { width: 24px; height: 24px; }
  .sidebar .nav-item, .collapsed .nav-item { width: 36px; height: 36px; padding: 9px; }
  .sidebar .nav-item svg { width: 18px; height: 18px; }
  .avatar { width: 28px; height: 28px; }
  .side-footer .icon-btn { width: 32px; height: 32px; padding: 7px; }
  .side-footer svg { width: 18px; height: 18px; }
  .home-zone { top: 35%; }
  .home-zone h1 { font-size: clamp(21px, 4.6vw, 29px); margin-bottom: 30px; }
  .home-zone:before { width: 110%; max-width: 110%; height: 520px; top: 95px; }
  .composer-wrap { width: calc(100% - 24px); }
  .composer { display: grid; grid-template-columns: 32px 1fr 32px; gap: 8px; min-height: 104px; border-radius: 26px; padding: 13px 12px 10px; }
  .composer textarea { grid-column: 1/-1; grid-row: 1; font-size: 14px; height: 26px; line-height: 26px; padding: 0 5px; }
  .composer .plus { grid-row: 2; grid-column: 1; }
  .composer .model-button { grid-row: 2; grid-column: 2; justify-self: end; font-size: 12px; padding: 8px 10px; }
  .composer #send-button { grid-row: 2; grid-column: 3; }
  .composer .icon-btn { width: 32px; height: 32px; padding: 6px; }
  .composer .icon-btn svg { width: 20px; height: 20px; }
  .composer.expanded { border-radius: 26px; }
  .footer-composer { bottom: 12px; padding-bottom: 22px; }
  .disclaimer { font-size: 10px; }
  .chat-scroll { top: 64px; bottom: 160px; }
  .chat-content { max-width: calc(100% - 30px); padding: 10px 0 35px; }
  .message { font-size: 14px; margin-bottom: 35px; }
  .user-bubble { padding: 13px 18px; }
  .actions .icon-btn { width: 30px; height: 30px; padding: 7px; }
  .actions svg { width: 16px; height: 16px; }
  .topbar { top: 10px; right: 10px; gap: 5px; }
  .topbar .download { display: none; }
  .topbar .pdf-pill { display: none; }
  .pill, .pill.blue { font-size: 12px; padding: 8px 12px; }
  .topbar>.icon-btn { width: 32px; height: 32px; }
  .jump-bottom { bottom: 160px; width: 36px; height: 36px; padding: 10px; }
  .menu-item { font-size: 13px; min-height: 38px; padding: 11px; }
  .menu-item .subtext { font-size: 12px; }
  .model-menu { width: 170px; }
  .submenu { width: 140px; }
  .settings-menu { width: 230px; }
  .settings-menu .menu-item { padding: 10px; min-height: 36px; }
  .search-modal { width: calc(100vw - 24px); height: min(660px, 85dvh); border-radius: 25px; }
  .search-head { padding: 18px 16px; }
  .search-head input { font-size: 15px; }
  .search-result { font-size: 14px; padding: 13px 8px; gap: 12px; }
  .search-result .date { font-size: 12px; }
  .search-result svg { width: 18px; height: 18px; }
  .recent-label { font-size: 13px; padding: 8px 22px 14px; }
  .custom-page, .editor { max-width: none; }
  .custom-page { padding: 14px 18px 50px; }
  .custom-tabs { margin-bottom: 34px; }
  .tab { padding: 10px 12px; font-size: 13px; }
  .custom-header { flex-direction: column; margin: 0 0 24px; }
  .custom-header h1 { font-size: 23px; }
  .custom-header p { font-size: 12px; line-height: 1.7; }
  .custom-search { width: 100%; height: 36px; }
  .custom-search input { font-size: 13px; }
  .category { margin: 0 0 28px; }
  .skill-grid { grid-template-columns: 1fr; }
  .skill-card { gap: 12px; padding: 12px 0; }
  .skill-name { font-size: 15px; }
  .skill-desc { font-size: 12px; }
  .skill-icon { width: 36px; height: 36px; }
  .editor { padding: 10px 12px 24px; }
  .editor-form { padding: 16px; }
  .field input, .field textarea { font-size: 14px; padding: 14px; }
  .field>span { font-size: 12px; }
  .back-link { font-size: 14px; }
  .basic-modal { width: calc(100vw - 24px); padding: 26px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}