:root{color-scheme:light;--ink:#1d312c;--green:#1b5146;--muted:#64736b;--line:#dbe1d9;--paper:#f7f8f4;--forest:#153d35;--sans:"Inter","Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;--mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace}
*{box-sizing:border-box}
body{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,.stage:focus-visible{outline:2px solid #ba811f;outline-offset:-2px}
button:disabled{cursor:default;opacity:.3}
button svg,label svg,.gesture svg,.section-icon,.row-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
[hidden]{display:none!important}
.masthead{height:68px;flex:none;display:flex;align-items:center;gap:24px;padding:0 28px;color:#f7faf5;background:var(--forest);border-bottom:1px solid #31564c}
.brand{display:flex;align-items:center;gap:12px;white-space:nowrap;letter-spacing:.06em;font-size:16px;font-weight:500}
.brand strong{font-size:22px;letter-spacing:.1em;font-weight:700}
.brand-mark{display:grid;place-items:center;width:37px;height:37px;border:1px solid #658478;border-radius:9px;background:#254c42}
.brand-mark svg{width:27px;height:27px;fill:none;stroke:#e9e7be;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.brand-divider{width:1px;height:18px;background:#668278;margin:0 1px}
.project-name{color:#bfd0c6;font-size:12px;margin-left:auto;letter-spacing:.035em}
.edition{display:flex;align-items:center;gap:8px;padding:6px 11px;color:#e0e9d9;border:1px solid #527166;border-radius:16px;font-size:12px;letter-spacing:.04em;white-space:nowrap}
.edition i{width:6px;height:6px;background:#d5dba6;border-radius:50%}
.layout{min-height:0;flex:1;display:flex;position:relative}
.sidebar{width:310px;flex:none;display:flex;flex-direction:column;border-right:1px solid var(--line);background:#f8f9f5;min-height:0}
.directory-top{padding:25px 19px 20px;border-bottom:1px solid var(--line)}
.section-head{display:flex;align-items:center;gap:9px;margin:0 2px 18px}
.directory-mark{width:30px;height:30px;padding:5px;flex:none;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;background:var(--green);border-radius:7px}
.section-head h2{font-size:21px}
h2{font-size:18px;letter-spacing:.035em;line-height:1.3;margin:0}
.count{font:12px var(--mono);color:#607263;padding:2px 6px;background:#e7ece3;border:1px solid #d9e1d4;border-radius:5px}
.search{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #d3dcd2;padding:0 10px;height:38px;border-radius:6px;color:#778379}
.search:focus-within{border-color:#638e79;box-shadow:0 0 0 2px #dfeae2}
.search svg{width:16px;height:16px}.search input{min-width:0;flex:1;border:0;background:none;outline:none;font-size:13px;color:var(--ink);height:100%}.search input::placeholder{color:#788278}
.search kbd{font:11px var(--mono);padding:1px 4px;border:1px solid #dce2d9;border-radius:3px}
.resume {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 8px;
  align-items:center; width:100%; min-height:52px; margin-top:10px; padding:9px 12px;
  text-align:left; border:1px solid #b7cdbc; border-radius:7px; background:#e6f0e6; color:#1d4a37;
}
.resume strong { font-size:16px }
.resume span { grid-column:1; font-size:14px; line-height:1.4; overflow-wrap:anywhere }
.resume svg { grid-column:2; grid-row:1 / 3 }
.resume:hover { background:#dcebdc }
#directory{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c2cfc3 transparent;flex:1;padding:8px 11px 18px}
.group-title {
  display:flex; align-items:center; gap:8px; width:100%; min-height:40px;
  padding:7px 9px; border-radius:6px; text-align:left; font-weight:650; font-size:14px;
}
.group-title .chevron,.file-meta .open-arrow { width:19px; height:19px; margin-left:auto; flex:none }
.group-title .branch-action{margin-left:auto;flex:none;font-size:14px;font-weight:500}
.group-title .branch-action + .chevron{margin-left:0}
.group-title[aria-expanded=false] .chevron { transform:rotate(-90deg) }
.branch-label { min-width:0; overflow-wrap:anywhere; white-space:pre-wrap; line-height:1.5 }
.folder-node > .group-title:hover { background:#e8eee7 }
.folder-node[data-level="0"] > .group-title { font-size:12px; color:#52675a; font-weight:500 }
.folder-node[data-level="1"] { margin:8px 0 12px }
.folder-node[data-level="1"] > .group-title {
  min-height:44px; background:#315d4e; color:#fff; font-size:16px; font-weight:700; padding-inline:12px;
}
.folder-node[data-level="1"] > .group-title[aria-expanded=true],
.folder-node[data-level="1"] > .group-title:hover { background:#204638; color:#fff }
.folder-node[data-level="1"] > .branch-children {
  margin:5px 0 0 9px; padding-left:9px; border-left:2px solid #b7c9b9;
}
.folder-node[data-level="2"] { margin-block:4px 9px }
.folder-node[data-level="2"] > .group-title { color:#284537; background:#e8efe6; padding-inline:9px }
.folder-node[data-level="2"] > .branch-children { margin-left:9px }
.source-file-node,.source-head {
  margin:6px 0 10px; border:1px solid #c5cebc; border-radius:7px; background:#fff;
}
.source-file-node > .group-title,.source-open {
  display:grid; align-content:center; gap:5px; width:100%; min-height:44px;
  padding:9px 11px; border-radius:6px; background:#f4f1e6;
  color:#3f4434; text-align:left; font-size:13px; font-weight:570;
}
.source-file-node > .group-title[aria-expanded=true] {
  border-radius:6px 6px 0 0; box-shadow:0 1px #c9ccba;
}
.source-file-node > .group-title:hover,.source-open:hover { background:#eeeada }
.file-meta { display:flex; align-items:center; gap:7px; color:#655e47; line-height:1 }
.file-format {
  display:inline-block; padding:3px 5px; border:1px solid #d5c9a3; border-radius:3px;
  color:#695a32; background:#f6ecd0; font:600 10px var(--mono); letter-spacing:.04em;
}
.file-count { font-size:11px; font-weight:500 }
.source-open[aria-current=page] { box-shadow:inset 3px 0 #39755a }
.row-text { display:grid; gap:4px; min-width:0 }
.row-code { color:#506659; font:11px var(--mono),var(--sans) }
.source-file-node > .branch-children { padding:4px 5px 5px }
.sheet-link {
  position:relative; display:grid; grid-template-columns:minmax(0,7.4ch) minmax(0,1fr);
  align-items:baseline; gap:6px; width:100%; min-height:38px;
  padding:10px 5px 10px 20px; border-radius:4px; text-align:left;
  scroll-margin-block:5px;
}
.sheet-link::before {
  content:""; position:absolute; top:0; bottom:0; left:8px; border-left:1px solid #bdcbbc;
}
.sheet-link::after {
  content:""; position:absolute; top:50%; left:8px; width:8px; border-top:1px solid #bdcbbc;
}
.sheet-link:last-child::before { bottom:50% }
.sheet-link:hover { background:#f0f4ed }
.sheet-link[aria-current=page] { background:#deeee2; color:#163f2e; box-shadow:inset 3px 0 #39755a }
.sheet-link[aria-current=page]::after {
  width:6px; height:6px; margin:-3px 0 0 -2.5px; background:#347055; border:0; border-radius:50%;
}
.sheet-link .row-code { overflow-wrap:anywhere; line-height:1.5 }
.row-title { font-size:13px; line-height:1.5; overflow-wrap:anywhere }
.sheet-link[aria-current=page] .row-title { font-weight:700 }
.no-results{color:#617165;padding:16px 10px;line-height:1.7;font-size:13px}
.nav-footer,.viewer-footer{height:39px;min-height:39px;display:flex;align-items:center;color:#69766b;font-size:11px;background:#f5f7f2;border-top:1px solid #d9e0d6}
.nav-footer{padding:0 20px;gap:7px}.small-square{width:7px;height:7px;background:#78927a;border-radius:2px}#groupCount{margin-left:auto;font-family:var(--mono),var(--sans)}
.workspace{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;background:var(--paper)}
.sheet-heading{display:flex;align-items:center;gap:15px;flex:none;min-height:88px;padding:14px 25px;background:#fcfcf9;border-bottom:1px solid #cbd5ca}
.sheet-heading-text{min-width:0}.breadcrumb{display:flex;align-items:center;gap:9px;margin-bottom:6px;font:11px var(--mono),var(--sans);color:#637769;letter-spacing:.025em}.crumb-sep{color:#a0ada2}
h1{font-size:clamp(15px,1.35vw,21px);line-height:1.3;letter-spacing:.015em;margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
.sheet-caption{display:flex;align-items:baseline;gap:8px;color:#425c4a;font-size:12px;line-height:1.4;margin-top:5px}.sheet-caption #number{font-family:var(--mono),var(--sans);white-space:nowrap}.sheet-caption #sheetTitle{font-weight:550}
.heading-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.icon-btn,.tool-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:35px;border:1px solid #d2dcd1;background:#fbfcf9;border-radius:6px;color:#3a5345}
.icon-btn{width:35px}.tool-btn{padding:0 11px;font-size:12px}
.icon-btn:hover,.tool-btn:hover{background:#eaf0e7}.tool-btn svg,.icon-btn svg{width:16px;height:16px}
.stage{flex:1;min-height:0;position:relative;isolation:isolate;overflow:hidden;touch-action:none;user-select:none;cursor:grab;outline:none;background-color:#343e3d;background-image:radial-gradient(#55615c 0.75px,transparent 0.9px);background-size:17px 17px}
.stage.dragging{cursor:grabbing}
.viewport{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.load-state{position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);background:#253731;color:#fff;padding:11px 16px;border-radius:6px;text-align:center;max-width:90%;font-size:13px}
.load-state button{color:#e4eebd;text-decoration:underline;text-underline-offset:3px}
.zoom-bar{position:absolute;bottom:19px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:1px;white-space:nowrap;cursor:default;background:#1e2b27;color:#f4f6ef;border:1px solid #67776b;border-radius:9px;padding:4px;box-shadow:0 4px 14px #14201a44;touch-action:manipulation}
.zoom-bar button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:35px;height:33px;color:inherit;border-radius:5px;padding:0 8px}
.zoom-bar button:hover{background:#3a4f43}.zoom-bar button svg{width:16px;height:16px}
#zoom{min-width:46px;text-align:center;font:12px var(--mono);font-variant-numeric:tabular-nums}
.tool-divider{height:18px;width:1px;margin:0 3px;background:#536258}
.zoom-bar .fit-btn{font-size:12px;padding:0 9px}
.viewer-footer{justify-content:space-between;padding:0 21px}.gesture{display:flex;align-items:center;gap:7px}.gesture svg{width:14px;height:14px}
.pager{display:flex;align-items:center;gap:8px}.pager button{width:29px;height:27px;display:grid;place-items:center;border-radius:4px}.pager button:hover:not(:disabled){background:#dfe7df}.pager svg{width:14px;height:14px}#position{font:11px var(--mono);font-variant-numeric:tabular-nums}
.touch-hint,.mobile-directory,.drawer-close,.scrim{display:none}
.toast{position:fixed;bottom:101px;left:50%;transform:translateX(-50%);z-index:20;pointer-events:none;background:#153c31;color:white;border-radius:6px;box-shadow:0 3px 14px #10251b44;padding:9px 14px;font-size:13px}
.toast:empty{display:none}
.stage-focus{position:fixed!important;inset:0;z-index:12}
.stage-focus .masthead,html:fullscreen .masthead{display:none}
.footer-tools,.dialog-head{display:flex;align-items:center;gap:12px}.info-button{font-size:11px;color:#526c59;border-right:1px solid #d6dfd5;padding:3px 13px 3px 6px}.info-button:hover{text-decoration:underline}
dialog{width:min(425px,92vw);padding:23px;border:1px solid #c3d0c5;border-radius:12px;background:#fafbf7;color:var(--ink);box-shadow:0 18px 70px #13291d38}dialog::backdrop{background:#17271f72}
.dialog-head{justify-content:space-between;margin-bottom:19px}.dialog-head h2{font-size:17px}dialog p{line-height:1.75;font-size:13px;overflow-wrap:anywhere}.source-file{font-family:var(--mono),var(--sans);color:#506656}dialog input{width:100%;padding:9px;border:1px solid #c9d6c9;border-radius:5px}
@media(min-width:1500px){.sidebar{width:340px}.directory-top{padding:29px 23px 22px}#directory{padding-left:15px;padding-right:15px}}
@media(max-width:1000px){.sidebar{width:270px}.sheet-heading{padding:13px 17px;min-height:78px}.project-name{font-size:11px}.masthead{padding:0 20px;gap:12px}}

.workspace{position:relative;--footer-height:39px}
.viewer-footer .zoom-bar{bottom:calc(var(--footer-height) + 15px)}
#compareSheet{font-size:12px;color:#236b4b;white-space:nowrap;text-underline-offset:3px}
.pager #position{width:auto;min-width:51px;padding-inline:4px;white-space:nowrap}
.pager #position:disabled{opacity:.85}
dialog{max-height:85vh;max-height:85dvh;overflow:auto;overscroll-behavior:contain}
@media(pointer:coarse){.mouse-hint{display:none}.touch-hint{display:inline}.search kbd{display:none}}

@media(max-width:740px),(pointer:coarse) and (max-height:600px){
  body{overscroll-behavior:none}
  .masthead{
    height:calc(46px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(13px,env(safe-area-inset-right)) 0 max(13px,env(safe-area-inset-left));
    gap:8px
  }
  .brand{font-size:14px;gap:8px}.brand strong{font-size:18px}.brand-divider{height:14px}
  .brand-mark{width:28px;height:28px;border-radius:7px}.brand-mark svg{width:21px;height:21px}
  .project-name{display:none}.edition{margin-left:auto;padding:3px 8px;font-size:11px}
  .workspace{--footer-height:calc(54px + env(safe-area-inset-bottom))}
  .sidebar{display:none}
  .sidebar.open{
    --sheet-gap:min(8vh,64px);
    display:flex;position:fixed;z-index:22;left:0;right:0;width:100%;
    top:calc(var(--visible-top,0px) + var(--sheet-gap));
    height:calc(var(--visible-height,100dvh) - var(--sheet-gap));max-height:100vh;
    border-radius:17px 17px 0 0;border:0;
    padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-shadow:0 -8px 30px #15271e40
  }
  .scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:21;background:#15281f73}
  .directory-top{padding:9px 15px 12px}.section-head{margin:0 0 5px}
  .drawer-close{display:inline-flex;margin-left:auto;border:0;background:transparent}
  .search{height:44px}.search input,dialog input{font-size:16px}
  #directory{padding:7px 12px 18px;min-height:0;-webkit-overflow-scrolling:touch}
  .group-title,.source-file-node > .group-title,.source-open,.sheet-link{min-height:52px;font-size:18px}
  .folder-node[data-level="0"] > .group-title{font-size:16px}
  .folder-node[data-level="1"] > .group-title{min-height:52px;font-size:19px}
  .file-format,.file-count{font-size:13px}
  .sheet-link{grid-template-columns:minmax(0,5.4rem) minmax(0,1fr);align-items:center;gap:8px}
  .row-title,.resume strong{font-size:18px}
  .sheet-link .row-code,.source-open .row-code{font-size:16px;color:#344f40}
  .resume span{font-size:16px}
  .search:focus-within + .resume{display:none}
  .nav-footer{height:32px;min-height:32px}
  .sheet-heading{min-height:59px;padding:7px max(8px,env(safe-area-inset-right)) 7px max(12px,env(safe-area-inset-left));gap:4px}
  .sheet-heading-text{min-width:0;flex:1;display:flex;flex-direction:column}
  .sheet-heading .breadcrumb{display:none}
  .sheet-caption{order:-1;align-items:baseline;gap:6px;margin:0 0 3px;flex-wrap:wrap}
  .sheet-caption #number{font-size:11px;color:#63796a}
  .sheet-caption #sheetTitle{font-size:15px;font-weight:660;color:#213d2e;line-height:1.4;overflow-wrap:anywhere}
  .sheet-heading h1{font-size:11px;font-weight:450;color:#627066;overflow:hidden;text-overflow:ellipsis;white-space:pre}
  .heading-actions{gap:0}
  .icon-btn,.tool-btn{height:44px;min-width:44px;width:44px;padding:0;border:0;background:transparent}
  .tool-btn span{display:none}.tool-btn svg,.icon-btn svg{width:19px;height:19px}
  .viewer-footer{height:var(--footer-height);min-height:var(--footer-height);padding:0 max(6px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left));gap:4px}
  .viewer-footer .gesture{display:none}
  .mobile-directory{display:inline-flex;align-items:center;gap:7px;justify-content:center;flex:none;min-height:48px;padding:0 12px;white-space:nowrap;border-radius:8px;background:#19553f;color:#fff;font-weight:700;font-size:18px}
  .mobile-directory:active{background:#123e30}
  .mobile-directory svg{width:22px;height:22px;stroke-width:1.9}
  .viewer-footer .zoom-bar{bottom:calc(var(--footer-height) + 10px);max-width:100%;padding:2px 4px}
  .zoom-bar button,.zoom-bar .fit-btn{height:48px;min-width:48px;padding:0 8px;gap:4px;font-size:16px;font-weight:650}
  .zoom-bar button svg{width:16px;height:16px}
  #zoom{font-size:13px;min-width:45px}
  .footer-tools{gap:3px}.info-button{min-height:44px;padding:0 8px;font-size:12px;border-right:0}
  .pager{gap:0}.pager button{min-width:44px;height:44px}.pager #position{font-size:12px}
  .toast{bottom:calc(var(--footer-height,54px) + 75px);max-width:90vw;text-align:center}
  dialog{width:min(440px,calc(100vw - 24px));padding:14px 16px 18px;max-height:82vh;max-height:82dvh}
  .dialog-head{margin-bottom:8px}.dialog-head .icon-btn{background:#edf3eb}
  html:fullscreen .sheet-heading,.stage-focus .sheet-heading{position:absolute;top:env(safe-area-inset-top);right:env(safe-area-inset-right);z-index:4;background:transparent;border:0;min-height:0;padding:5px}
  html:fullscreen .sheet-heading-text,.stage-focus .sheet-heading-text,html:fullscreen #share,.stage-focus #share{display:none}
  html:fullscreen #fullscreen,.stage-focus #fullscreen{background:#23382e;color:#fff;border:1px solid #738779}
}
@media(orientation:landscape) and (min-width:560px) and (max-width:740px),(orientation:landscape) and (min-width:560px) and (pointer:coarse) and (max-height:600px){
  .masthead{display:none}.workspace{--footer-height:calc(48px + env(safe-area-inset-bottom))}
  .sheet-heading{padding-block:3px;min-height:48px}.sheet-caption{margin-bottom:0}
  .sidebar.open{--sheet-gap:0px;width:min(440px,87vw);right:auto;border-radius:0;padding-top:env(safe-area-inset-top)}
  .mobile-directory{min-height:44px}
  .viewer-footer .zoom-bar{position:static;transform:none;box-shadow:none;background:none;color:#294b36;border:0;padding:0;gap:0}
  .viewer-footer .zoom-bar button:hover{background:#dde9dd}.tool-divider{background:#c9d7cc}
  .stage{margin-inline:env(safe-area-inset-left) env(safe-area-inset-right)}
}
@media(orientation:landscape) and (min-width:560px) and (max-width:690px){
  .viewer-footer .zoom-bar svg,.viewer-footer .tool-divider{display:none}
  .viewer-footer .zoom-bar button{padding-inline:5px}
}
@media(max-width:374px), (orientation:landscape) and (min-width:560px) and (max-width:620px){
  .mobile-directory{gap:5px;padding-inline:9px}
  .info-button .info-prefix{display:none}
  .info-button{min-width:44px;padding-inline:3px}
}
