:root{
  --paper:#f4eee3;
  --paper-light:#fbf7ef;
  --paper-deep:#e9dfd0;
  --ink:#31261f;
  --muted:#7b6a5e;
  --red:#962f25;
  --red-deep:#6f201a;
  --yellow:#d7ad39;
  --green:#496f5d;
  --line:rgba(74,52,38,.16);
  --line-strong:rgba(74,52,38,.28);
  --shadow:0 22px 70px rgba(75,49,29,.10);
}

*{ box-sizing:border-box }
html{ min-height:100%; background:var(--paper) }
body{
  min-height:100vh;
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 4%,rgba(255,255,255,.82),transparent 25rem),
    radial-gradient(circle at 94% 18%,rgba(215,173,57,.08),transparent 23rem),
    linear-gradient(135deg,#f8f3e9,#eee4d5);
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

button,input,textarea{ font:inherit }
button{ color:inherit }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(150,47,37,.42);
  outline-offset:2px;
}
*::-webkit-scrollbar{ width:8px; height:8px }
*::-webkit-scrollbar-thumb{ background:rgba(49,38,31,.18); border-radius:99px; border:2px solid transparent; background-clip:content-box }
*::-webkit-scrollbar-track{ background:transparent }

.archive-shell{
  min-height:100vh;
  max-width:1560px;
  margin:0 auto;
  padding:28px clamp(18px,3vw,48px) 48px;
}

.archive-header{
  display:grid;
  grid-template-columns:minmax(160px,1fr) auto minmax(160px,1fr);
  align-items:center;
  gap:30px;
  min-height:76px;
}
.home-link{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  letter-spacing:.04em;
  transition:color .18s ease,transform .18s ease;
}
.home-arrow{ font:24px/1 Georgia,serif }
.home-link:hover{ color:var(--red); transform:translateX(-3px) }

.archive-brand{ display:flex; align-items:center; gap:16px }
.archive-kicker,.pane-label,.intro-index,.skill-category{
  margin:0;
  color:var(--red);
  font:600 10px/1.25 ui-monospace,"SFMono-Regular",Menlo,monospace;
  letter-spacing:.16em;
}
.archive-brand h1{
  margin:4px 0 0;
  font:500 26px/1.05 Georgia,"Noto Serif SC",serif;
  letter-spacing:-.025em;
}
.film-mark{
  width:54px;
  height:38px;
  padding:7px 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid rgba(49,38,31,.38);
  border-radius:3px;
  background:
    linear-gradient(90deg,transparent 0 7%,var(--yellow) 7% 93%,transparent 93%),
    var(--ink);
  box-shadow:0 5px 18px rgba(75,49,29,.12);
}
.film-mark span{
  width:9px;
  height:22px;
  border:1px solid rgba(49,38,31,.5);
  background:rgba(255,249,230,.75);
}

.archive-stats{
  justify-self:end;
  display:flex;
  gap:17px;
  color:var(--muted);
  font:600 10px/1.2 ui-monospace,"SFMono-Regular",Menlo,monospace;
  letter-spacing:.11em;
}
.archive-stats b{ color:var(--ink); font-size:15px; letter-spacing:0 }

.archive-intro{
  margin:34px 0 26px;
  padding:28px 0 32px;
  display:grid;
  grid-template-columns:220px minmax(0,760px);
  gap:32px;
  align-items:start;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.intro-index{ padding-top:8px; color:rgba(86,62,47,.55) }
.archive-intro h2{
  margin:0;
  max-width:720px;
  font:500 clamp(28px,3.2vw,47px)/1.12 Georgia,"Noto Serif SC",serif;
  letter-spacing:-.03em;
}
.archive-intro div > p{
  max-width:760px;
  margin:16px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.85;
}

.repository{
  min-height:610px;
  height:calc(100vh - 310px);
  display:grid;
  grid-template-columns:210px minmax(290px,360px) minmax(480px,1fr);
  overflow:hidden;
  border:1px solid var(--line-strong);
  background:rgba(255,252,246,.72);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}
.category-pane,.skill-pane,.viewer-pane{ min-width:0; min-height:0 }
.category-pane{
  display:flex;
  flex-direction:column;
  padding:24px 17px 20px;
  border-right:1px solid var(--line);
  background:rgba(233,223,208,.48);
}
.category-list{ margin-top:17px; display:flex; flex-direction:column; gap:5px }
.category-button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 11px;
  border:0;
  border-radius:4px;
  background:transparent;
  cursor:pointer;
  text-align:left;
  color:var(--muted);
  font-size:12.5px;
  transition:background .16s ease,color .16s ease;
}
.category-button::before{
  content:"";
  width:13px;
  height:10px;
  flex:none;
  border:1px solid currentColor;
  border-radius:1px;
  background:rgba(255,255,255,.26);
  box-shadow:3px -3px 0 -2px currentColor;
}
.category-button span:first-of-type{ flex:1 }
.category-button b{
  color:inherit;
  font:500 10px/1 ui-monospace,"SFMono-Regular",Menlo,monospace;
}
.category-button:hover{ background:rgba(150,47,37,.06); color:var(--ink) }
.category-button.active{ background:var(--ink); color:#fff9ed }
.category-button.active::before{ color:var(--yellow) }

.local-note{
  margin-top:auto;
  padding:15px 12px 0;
  display:flex;
  gap:9px;
  border-top:1px solid var(--line);
  color:var(--muted);
}
.local-note-dot{
  width:7px;
  height:7px;
  margin-top:4px;
  flex:none;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(73,111,93,.10);
}
.local-note p{ margin:0; font-size:10px; line-height:1.65 }
.local-note b{ color:var(--ink); font:600 9px/1 ui-monospace,"SFMono-Regular",Menlo,monospace; letter-spacing:.12em }

.skill-pane{
  display:flex;
  flex-direction:column;
  padding:24px 18px 0;
  border-right:1px solid var(--line);
}
.pane-head{ display:flex; align-items:end; justify-content:space-between; gap:16px }
.pane-head h3{
  margin:5px 0 0;
  font:500 22px/1.2 Georgia,"Noto Serif SC",serif;
}
.result-count{
  color:var(--muted);
  font:500 10px/1.2 ui-monospace,"SFMono-Regular",Menlo,monospace;
  letter-spacing:.08em;
}
.search-box{
  height:40px;
  margin:17px 0 13px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 12px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.58);
}
.search-box span{ color:var(--muted); font:22px/1 Georgia,serif; transform:rotate(-15deg) }
.search-box input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font-size:12.5px;
}
.search-box input::placeholder{ color:rgba(123,106,94,.72) }
.search-box kbd{
  padding:2px 5px;
  border:1px solid var(--line);
  border-bottom-color:var(--line-strong);
  border-radius:3px;
  color:var(--muted);
  background:var(--paper-light);
  font:9px/1.3 ui-monospace,monospace;
}
.skill-list{ flex:1; min-height:0; overflow:auto; margin:0 -18px; padding:0 8px 24px }
.skill-row{
  width:100%;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding:12px 10px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  cursor:pointer;
  text-align:left;
  transition:background .15s ease;
}
.skill-row:first-child{ border-top:1px solid var(--line) }
.skill-row:hover{ background:rgba(255,255,255,.46) }
.skill-row.active{ background:rgba(150,47,37,.08) }
.skill-file-icon{
  width:26px;
  height:31px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  color:var(--red);
  background:var(--paper-light);
  font:700 9px/1 ui-monospace,monospace;
  box-shadow:2px 2px 0 rgba(150,47,37,.08);
}
.skill-row h4{
  margin:0;
  color:var(--ink);
  font:600 12.5px/1.35 "PingFang SC","Microsoft YaHei",sans-serif;
}
.skill-row code{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:var(--muted);
  font:9.5px/1.35 ui-monospace,"SFMono-Regular",Menlo,monospace;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.skill-row p{
  display:-webkit-box;
  margin:6px 0 0;
  overflow:hidden;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.55;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.list-empty{ padding:40px 18px; color:var(--muted); text-align:center; font-size:12px; line-height:1.8 }

.viewer-pane{ position:relative; display:flex; overflow:hidden }
.viewer-empty{
  width:min(440px,80%);
  margin:auto;
  text-align:center;
  color:var(--muted);
}
.viewer-empty h3{ margin:9px 0 11px; color:var(--ink); font:500 28px/1.15 Georgia,"Noto Serif SC",serif }
.viewer-empty > p:last-child{ margin:0; font-size:12px; line-height:1.75 }
.viewer-empty code{ color:var(--red) }
.empty-reel{
  width:74px;
  height:52px;
  margin:0 auto 24px;
  border:1px solid var(--line-strong);
  background:
    radial-gradient(circle at 26% 50%,transparent 0 5px,var(--ink) 5.5px 7px,transparent 7.5px),
    radial-gradient(circle at 50% 50%,transparent 0 5px,var(--ink) 5.5px 7px,transparent 7.5px),
    radial-gradient(circle at 74% 50%,transparent 0 5px,var(--ink) 5.5px 7px,transparent 7.5px),
    var(--yellow);
  box-shadow:6px 7px 0 rgba(49,38,31,.07);
}
.viewer-content{ width:100%; min-width:0; min-height:0; display:flex; flex-direction:column }
.viewer-content[hidden]{ display:none }
.viewer-header{
  min-height:50px;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.28);
}
.viewer-breadcrumb{
  min-width:0;
  overflow:hidden;
  color:var(--muted);
  font:10px/1.4 ui-monospace,"SFMono-Regular",Menlo,monospace;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.viewer-breadcrumb b{ color:var(--ink); font-weight:600 }
.viewer-actions{ display:flex; align-items:center; gap:6px }
.tool-button,.save-button{
  min-height:30px;
  padding:6px 10px;
  border:1px solid var(--line-strong);
  border-radius:3px;
  background:rgba(255,255,255,.62);
  cursor:pointer;
  font-size:10.5px;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.tool-button:hover{ background:#fff; border-color:rgba(150,47,37,.36) }
.tool-button.danger{ color:var(--red) }
.save-button{ border-color:var(--red); color:#fff; background:var(--red) }
.save-button:hover{ background:var(--red-deep) }

.skill-summary{
  padding:20px 22px;
  display:grid;
  grid-template-columns:minmax(210px,.7fr) minmax(280px,1.3fr);
  gap:28px;
  border-bottom:1px solid var(--line);
}
.skill-summary h3{ margin:5px 0 3px; font:500 24px/1.16 Georgia,"Noto Serif SC",serif }
.skill-summary code{ color:var(--red); font:10px/1.3 ui-monospace,"SFMono-Regular",Menlo,monospace }
.skill-description-wrap{
  align-self:center;
}
.skill-description-wrap > p{
  margin:0;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.75;
}
.file-workspace{ flex:1; min-height:0; display:grid; grid-template-columns:180px minmax(0,1fr) }
.file-tree{
  min-height:0;
  padding:17px 10px;
  overflow:auto;
  border-right:1px solid var(--line);
  background:rgba(233,223,208,.32);
}
.file-tree > .pane-label{ padding:0 8px 10px }
.file-button{
  width:100%;
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px;
  overflow:hidden;
  border:0;
  border-radius:3px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  text-align:left;
  font:9.5px/1.35 ui-monospace,"SFMono-Regular",Menlo,monospace;
}
.file-button::before{ content:"▧"; flex:none; color:rgba(150,47,37,.68) }
.file-button:hover{ background:rgba(255,255,255,.5); color:var(--ink) }
.file-button.active{ background:var(--ink); color:#fff9ed }
.file-button span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.file-view{ min-width:0; min-height:0; display:flex; flex-direction:column; background:rgba(255,255,255,.25) }
.file-toolbar{
  min-height:38px;
  padding:8px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font:9.5px/1.2 ui-monospace,"SFMono-Regular",Menlo,monospace;
}
.file-toolbar > div{ min-width:0; display:flex; align-items:center; gap:7px }
.file-status-dot{ width:6px; height:6px; flex:none; border-radius:50%; background:var(--green) }
#activeFileName{ overflow:hidden; color:var(--ink); text-overflow:ellipsis; white-space:nowrap }
.draft-badge{ padding:2px 5px; border:1px solid rgba(215,173,57,.55); color:#7c5e07; background:rgba(215,173,57,.12) }
.source-view{
  flex:1;
  min-height:0;
  margin:0;
  padding:20px 22px 42px;
  overflow:auto;
  color:#3e322a;
  background:
    linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)),
    repeating-linear-gradient(0deg,transparent 0 23px,rgba(74,52,38,.035) 23px 24px);
  font:11.5px/1.85 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  tab-size:2;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.editor-wrap{ flex:1; min-height:0; display:flex; flex-direction:column }
.editor-wrap[hidden]{ display:none }
#sourceEditor{
  flex:1;
  min-height:0;
  resize:none;
  border:0;
  outline:0;
  padding:20px 22px;
  color:#3e322a;
  background:#fffdf8;
  font:11.5px/1.85 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  tab-size:2;
}
.editor-footer{
  min-height:50px;
  padding:9px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:9.5px;
}
.editor-footer > div{ display:flex; gap:6px }

.toast{
  position:fixed;
  left:50%;
  bottom:26px;
  z-index:20;
  padding:10px 15px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:3px;
  color:#fff;
  background:var(--ink);
  box-shadow:0 10px 34px rgba(49,38,31,.24);
  font-size:11px;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,12px);
  transition:opacity .18s ease,transform .18s ease;
}
.toast.show{ opacity:1; transform:translate(-50%,0) }

@media (max-width:1180px){
  .repository{ grid-template-columns:176px 310px minmax(400px,1fr) }
  .archive-intro{ grid-template-columns:176px minmax(0,760px) }
  .skill-summary{ grid-template-columns:1fr; gap:12px }
  .file-workspace{ grid-template-columns:152px minmax(0,1fr) }
}

@media (max-width:900px){
  .archive-shell{ padding:18px 14px 28px }
  .archive-header{ grid-template-columns:1fr auto; gap:16px }
  .archive-brand{ order:-1; grid-column:1 / -1; justify-content:center }
  .archive-stats{ grid-column:2; grid-row:2 }
  .archive-intro{ grid-template-columns:1fr; gap:12px; margin-top:20px }
  .repository{ height:auto; min-height:0; grid-template-columns:1fr }
  .category-pane{ padding:15px; border-right:0; border-bottom:1px solid var(--line) }
  .category-list{ margin-top:12px; flex-direction:row; overflow-x:auto; padding-bottom:2px }
  .category-button{ width:auto; flex:none; padding:8px 10px }
  .category-button::before{ display:none }
  .local-note{ display:none }
  .skill-pane{ min-height:420px; max-height:58vh; border-right:0; border-bottom:1px solid var(--line) }
  .viewer-pane{ min-height:680px }
}

@media (max-width:620px){
  .archive-stats{ gap:10px }
  .archive-stats span:last-child{ display:none }
  .archive-intro h2{ font-size:30px }
  .viewer-header{ align-items:flex-start }
  .viewer-actions{ flex-wrap:wrap; justify-content:flex-end }
  .skill-summary{ padding:18px }
  .file-workspace{ grid-template-columns:1fr }
  .file-tree{
    min-height:auto;
    padding:10px;
    display:flex;
    gap:6px;
    overflow-x:auto;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .file-tree > .pane-label{ display:none }
  #fileTree{ display:flex; gap:6px }
  .file-button{ width:auto; flex:none; border:1px solid var(--line) }
  .file-view{ min-height:500px }
  .editor-footer{ align-items:flex-start; flex-direction:column }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ scroll-behavior:auto!important; transition:none!important }
}