:root{
  --sv-green:var(--sp-accent);
  --sv-green-soft:color-mix(in srgb,var(--sp-accent),var(--sp-text) 28%);
  --sv-green-bright:color-mix(in srgb,var(--sp-accent),white 34%);
  --sv-blue:var(--sp-accent-2);
  --sv-violet:var(--sp-accent-3);

  --sv-line-light-soft:color-mix(in srgb,var(--sp-text),transparent 98%);
  --sv-line-light:color-mix(in srgb,var(--sp-text),transparent 96%);
  --sv-line-light-strong:color-mix(in srgb,var(--sp-text),transparent 94%);
  --sv-shadow-deep:color-mix(in srgb,var(--sp-bg),transparent 72%);
  --sv-shadow-deeper:color-mix(in srgb,var(--sp-bg),transparent 66%);

  --sv-console-bg:color-mix(in srgb,var(--sp-bg),var(--sp-accent) 8%);
  --sv-console-fg:color-mix(in srgb,var(--sp-text),var(--sp-accent) 18%);
  --sv-console-accent:var(--sv-green-bright);
  --sv-console-border:color-mix(in srgb,var(--sp-border),var(--sv-green) 35%);
  --sv-console-aura:color-mix(in srgb,var(--sv-green),transparent 92%);
  --sv-console-hairline:color-mix(in srgb,var(--sv-green),transparent 96%);

  --sv-link-accent:var(--sv-green-soft);
  --sv-link-accent-hover:var(--sv-green-bright);
  --sv-link-accent-line:color-mix(in srgb,var(--sv-link-accent),transparent 58%);
  --sv-link-accent-glow:color-mix(in srgb,var(--sv-link-accent),transparent 84%);

  --sv-control-bg:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 3%);
  --sv-control-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 6%);
  --sv-control-bg-active:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 10%);
  --sv-control-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 14%);
  --sv-control-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 20%);
  --sv-control-border-active:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 28%);
  --sv-control-shadow-active:inset 0 0 0 var(--sp-border-w-1) color-mix(in srgb,var(--sv-blue),transparent 92%);

  --sv-section-toggle-bg:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 3%);
  --sv-section-toggle-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 7%);
  --sv-section-toggle-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 14%);
  --sv-section-toggle-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 22%);

  --sv-status-bg:color-mix(in srgb,var(--sp-surface-2),var(--sv-green) 6%);
  --sv-status-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sv-green) 10%);
  --sv-status-border:color-mix(in srgb,var(--sp-border),var(--sv-green) 18%);
  --sv-status-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-green) 26%);
  --sv-status-neutral-bg:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 5%);
  --sv-status-neutral-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 16%);

  --sv-file-action-bg:color-mix(in srgb,var(--sp-surface-2),var(--sv-green) 4%);
  --sv-file-action-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sv-green) 10%);
  --sv-file-action-border:color-mix(in srgb,var(--sp-border),var(--sv-green) 22%);
  --sv-file-action-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-green) 34%);

  --sv-preview-action-bg:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 5%);
  --sv-preview-action-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 8%);
  --sv-preview-action-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 16%);
  --sv-preview-action-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 25%);

  --sv-drawer-w:clamp(15.75rem,27vw,22.5rem);
  --sv-drawer-btn-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-elev),var(--sv-blue) 18%) 0%,color-mix(in srgb,var(--sp-surface),var(--sv-blue) 14%) 100%);
  --sv-drawer-btn-hover:linear-gradient(180deg,color-mix(in srgb,var(--sp-elev),var(--sv-blue) 26%) 0%,color-mix(in srgb,var(--sp-surface),var(--sv-blue) 20%) 100%);
  --sv-drawer-btn-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 30%);
  --sv-drawer-btn-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 44%);
  --sv-drawer-btn-shadow:var(--sp-shadow-2), inset 0 var(--sp-border-w-1) 0 var(--sv-line-light);
  --sv-drawer-btn-primary-shadow:var(--sp-shadow-2), inset 0 var(--sp-border-w-1) 0 var(--sv-line-light-strong);
  --sv-drawer-input-bg:color-mix(in srgb,var(--sp-surface),var(--sv-blue) 12%);
  --sv-drawer-input-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 30%);
  --sv-drawer-backdrop:color-mix(in srgb,var(--sp-bg),transparent 44%);

  --sv-search-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-surface-2),var(--sv-green) 42%) 0%,color-mix(in srgb,var(--sp-surface),var(--sv-green) 32%) 100%);
  --sv-search-bg-hover:linear-gradient(180deg,color-mix(in srgb,var(--sp-surface-2),var(--sv-green) 52%) 0%,color-mix(in srgb,var(--sp-surface),var(--sv-green) 42%) 100%);
  --sv-search-border:color-mix(in srgb,var(--sp-border-strong),var(--sv-green) 38%);
  --sv-search-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-green-bright) 46%);
  --sv-search-shadow:var(--sp-shadow-2), inset 0 var(--sp-border-w-1) 0 var(--sv-line-light-strong);

  --sv-scroll-thumb:linear-gradient(180deg,var(--sv-blue) 0%,color-mix(in srgb,var(--sv-blue),var(--sv-violet) 45%) 52%,var(--sv-violet) 100%);
  --sv-scroll-thumb-solid:color-mix(in srgb,var(--sv-blue),var(--sv-violet) 35%);
  --sv-scroll-thumb-hover:color-mix(in srgb,var(--sv-blue),var(--sv-violet) 58%);
  --sv-scroll-track:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 16%);
  --sv-scroll-thumb-shadow:inset 0 0 0 var(--sp-border-w-1) var(--sv-line-light-strong);

  --sv-drawer-head-start:color-mix(in srgb,var(--sp-bg),var(--sv-blue) 10%);
  --sv-drawer-head-mid:color-mix(in srgb,var(--sp-surface),var(--sv-blue) 18%);
  --sv-drawer-head-end:color-mix(in srgb,var(--sp-surface),var(--sv-violet) 24%);
  --sv-drawer-head-line:color-mix(in srgb,var(--sp-border),var(--sv-blue) 32%);
  --sv-drawer-head-glow:color-mix(in srgb,var(--sv-violet),transparent 82%);
  --sv-drawer-head-glow-blue:color-mix(in srgb,var(--sv-blue),transparent 82%);
  --sv-drawer-head-shadow:inset 0 var(--sp-border-w-1-neg) 0 var(--sv-line-light), var(--sp-shadow-2);

  --sv-header-btn-bg:color-mix(in srgb,var(--sp-surface-2),var(--sp-text) 6%);
  --sv-header-btn-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sp-text) 10%);
  --sv-header-btn-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 22%);
  --sv-header-btn-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 32%);
  --sv-header-btn-shadow:inset 0 0 0 var(--sp-border-w-1) var(--sv-line-light-soft);

  --sv-editor-bg:color-mix(in srgb,var(--sp-bg),var(--sv-blue) 4%);
  --sv-editor-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 18%);

  --sv-browser-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 5%) 0%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 7%) 58%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 9%) 100%);
  --sv-browser-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 28%);
  --sv-browser-shadow:inset 0 var(--sp-border-w-1) 0 var(--sv-line-light), var(--sp-shadow-3);
  --sv-browser-header-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-surface),var(--sv-blue) 18%) 0%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 10%) 100%);
  --sv-browser-header-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 22%);
  --sv-browser-header-shadow:inset 0 var(--sp-border-w-1-neg) 0 var(--sv-line-light-soft);
  --sv-browser-body-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 3%) 0%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 5%) 100%);
  --sv-browser-file-bg:color-mix(in srgb,var(--sp-surface-2),transparent 98%);
  --sv-browser-file-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 18%);
  --sv-browser-file-bg-hover:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 8%);
  --sv-browser-file-border-hover:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 28%);
  --sv-browser-file-bg-current:color-mix(in srgb,var(--sp-surface-2),var(--sv-blue) 7%);
  --sv-browser-file-border-current:color-mix(in srgb,var(--sp-border-strong),var(--sv-blue) 30%);
  --sv-browser-file-shadow-current:inset 0 0 0 var(--sp-border-w-1) color-mix(in srgb,var(--sv-blue),transparent 94%);

  --sv-preview-shell-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-bg),black 6%) 0%,color-mix(in srgb,var(--sp-bg),black 4%) 52%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 8%) 100%);
  --sv-preview-shell-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 24%);
  --sv-preview-shell-shadow:inset 0 var(--sp-border-w-1) 0 var(--sv-line-light-soft), var(--sp-shadow-3);
  --sv-preview-header-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-surface),var(--sv-blue) 16%) 0%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 8%) 100%);
  --sv-preview-header-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 18%);
  --sv-preview-header-shadow:inset 0 var(--sp-border-w-1-neg) 0 var(--sv-line-light-soft);
  --sv-preview-body-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-bg),black 4%) 0%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 5%) 100%);
  --sv-preview-content-bg:color-mix(in srgb,var(--sp-bg),var(--sv-blue) 8%);
  --sv-preview-content-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 20%);
  --sv-preview-content-shadow:inset 0 var(--sp-border-w-1) 0 var(--sv-line-light-soft), inset 0 0 0 var(--sp-border-w-1) var(--sv-line-light-soft);
  --sv-preview-framed-bg:color-mix(in srgb,var(--sp-bg),var(--sv-blue) 4%);
  --sv-preview-framed-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 18%);
  --sv-preview-meta-bg:color-mix(in srgb,var(--sp-surface),var(--sv-blue) 16%);
  --sv-preview-meta-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 18%);

  --sv-footer-card-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 8%) 0%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 6%) 100%);
  --sv-footer-card-border:color-mix(in srgb,var(--sp-border),var(--sv-blue) 20%);
  --sv-footer-card-shadow:inset 0 var(--sp-border-w-1) 0 var(--sv-line-light-soft), var(--sp-shadow-2);
  --sv-footer-card-body-bg:linear-gradient(180deg,color-mix(in srgb,var(--sp-surface),var(--sv-blue) 12%) 0%,color-mix(in srgb,var(--sp-bg),var(--sv-blue) 8%) 100%);
}
html,body{height:100%;}
body{margin:0;min-height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;background:var(--sp-bg);color:var(--sp-text);}
.sv-main{min-height:0;overflow:hidden;padding:0;width:100%;max-width:none;}
.sv-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--sp-3);height:100%;min-height:0;align-items:stretch;padding:var(--sp-2) var(--sp-2) var(--sp-1);box-sizing:border-box;}
.sv-panel{min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;}
.sv-browserHeader,.sv-previewHeader{display:flex;justify-content:space-between;gap:var(--sp-3);align-items:start;flex-wrap:wrap;}
.sv-browserTitle,.sv-previewHeading{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;}
.sv-browserActions{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;width:100%;}
.sv-statusPanel--header{display:flex;flex-direction:column;gap:var(--sp-1);margin-top:var(--sp-2);}
#browser .sv-panel__header{padding-bottom:var(--sp-2);}
#browser .sv-panel__body{padding-top:var(--sp-1);}
.sv-statusPanel--header{margin-top:0;}
.sv-areaNav{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;}
#browser .sv-areaBtn{
  padding:.48rem .82rem;
  min-height:0;
  border-radius:1rem;
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.002em;
  background:var(--sv-control-bg);
  border-color:var(--sv-control-border);
  color:color-mix(in srgb,var(--sp-text),white 2%);
  box-shadow:none;
}
#browser .sv-areaBtn:hover,
#browser .sv-areaBtn:focus-visible{
  background:var(--sv-control-bg-hover);
  border-color:var(--sv-control-border-hover);
  color:var(--sp-text);
  transform:none;
}
.sv-areaBtn.is-active{
  background:var(--sv-control-bg-active);
  border-color:var(--sv-control-border-active);
  color:var(--sp-text);
  box-shadow:var(--sv-control-shadow-active);
}
.sv-newMenu{position:absolute;top:calc(100% + var(--sp-2));right:0;display:none;min-width:11rem;padding:var(--sp-2);background:var(--sp-surface);border:var(--sp-border-1);border-radius:var(--sp-radius-2);box-shadow:var(--sp-shadow-3);z-index:25;}
.sv-newMenu.is-open{display:flex;flex-direction:column;gap:var(--sp-1);}
.sv-drawerNewWrap{position:relative;width:100%;}
.sv-drawerNewWrap > .sp-btn{width:100%;justify-content:center;}
.sv-newMenu--drawer{left:0;right:auto;min-width:100%;z-index:8;}
.sv-browserTitlePath{color:var(--sv-link-accent);text-decoration:none;word-break:break-all;font-size:var(--sp-fs-2);text-shadow:0 0 0.45rem var(--sv-link-accent-glow);transition:color var(--sp-duration-2) var(--sp-ease-standard), text-decoration-color var(--sp-duration-2) var(--sp-ease-standard);}
.sv-browserTitlePath:hover,.sv-browserTitlePath:focus-visible{color:var(--sv-link-accent-hover);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--sv-link-accent-hover),white 18%);text-underline-offset:var(--sp-underline-offset);}
.sv-previewMeta{font-size:var(--sp-fs-1);color:var(--sp-muted);word-break:break-word;}
.sv-previewMeta[hidden]{display:none;}
.sv-preview--framed{padding:0;display:flex;flex-direction:column;overflow:hidden;white-space:normal;}
.sv-previewInnerMeta{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-bottom:var(--sp-border-1);background:color-mix(in srgb,var(--sp-surface),var(--sp-surface-2) 55%);font-size:var(--sp-fs-1);color:var(--sp-muted);}
.sv-previewInnerMetaName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sv-previewInnerMetaSize{flex:0 0 auto;white-space:nowrap;text-align:right;}
.sv-previewBody{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--sp-0);}
.sv-previewBody--text{white-space:normal;word-break:normal;}
.sv-previewTextInner{padding:var(--sv-preview-text-pad, var(--sp-3));white-space:pre-wrap;word-break:break-word;margin:var(--sp-0);}
.sv-previewBody--image{display:flex;justify-content:center;align-items:flex-start;}
.sv-previewActionRow{position:relative;margin-left:auto;display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end;align-items:center;}
.sv-previewModes,.sv-drawerActionsStack{display:flex;flex-direction:column;gap:var(--sp-2);}
.sv-drawerSection{display:flex;flex-direction:column;gap:var(--sp-2);}
.sv-drawerSectionTitle{font-size:var(--sp-fs-1);color:var(--sp-muted);text-transform:uppercase;letter-spacing:.04em;}
.sv-drawerSectionToggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2);
  padding:.6rem .72rem;
  border:var(--sp-border-w-1) solid var(--sv-section-toggle-border);
  border-radius:.9rem;
  background:var(--sv-section-toggle-bg);
  color:inherit;
  cursor:pointer;
  text-align:left;
  transition:background var(--sp-duration-2) var(--sp-ease-standard), border-color var(--sp-duration-2) var(--sp-ease-standard);
}
.sv-drawerSectionToggle:hover,
.sv-drawerSectionToggle:focus-visible{
  background:var(--sv-section-toggle-bg-hover);
  border-color:var(--sv-section-toggle-border-hover);
  outline:none;
}
.sv-drawerSectionToggle .sv-drawerSectionTitle{
  margin:0;
  opacity:.9;
}
.sv-drawerSectionChevron{
  flex:0 0 auto;
  color:var(--sv-link-accent);
  transition:transform var(--sp-duration-2) var(--sp-ease-standard), color var(--sp-duration-2) var(--sp-ease-standard);
}
.sv-drawerSectionToggle:hover .sv-drawerSectionChevron,
.sv-drawerSectionToggle:focus-visible .sv-drawerSectionChevron{
  color:var(--sv-link-accent-hover);
}
.sv-drawerSectionToggle[aria-expanded="true"] .sv-drawerSectionChevron{
  transform:rotate(90deg);
  color:var(--sv-link-accent);
}
.sv-drawerSectionBody{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  padding:.15rem 0 0;
}
.sv-drawerSectionBody[hidden]{
  display:none;
}
.sv-searchRow,.sv-publishRow{display:flex;gap:var(--sp-3);align-items:stretch;}
.sv-searchRow .sp-field,.sv-publishRow .sp-field{flex:1 1 auto;min-width:0;}
.sv-searchRow .sp-input,.sv-publishRow .sp-input{min-width:0;}
.sv-searchRow .sp-btn,.sv-publishRow .sp-btn{flex:0 0 auto;white-space:nowrap;}
.sv-modeBtn.is-active{background:color-mix(in srgb,var(--sp-link),transparent 88%);border-color:color-mix(in srgb,var(--sp-link),transparent 48%);color:var(--sp-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sp-link),transparent 62%);}
.sv-modeBtn.is-active:hover,.sv-modeBtn.is-active:focus-visible{background:color-mix(in srgb,var(--sp-link),transparent 84%);border-color:color-mix(in srgb,var(--sp-link),transparent 36%);}
.sv-statusStack{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sp-1);}
.sv-statusNote{padding:.2rem .55rem;border:var(--sp-border-1);border-radius:999px;background:var(--sp-surface-2);font-size:.84em;line-height:1.2;color:var(--sp-muted);}
.sv-statusPanel{display:flex;flex-direction:column;gap:var(--sp-1);}
.sv-statusToggle{display:inline-flex;align-items:center;gap:.45rem;flex:0 1 auto;max-width:100%;padding:.2rem .55rem;border:var(--sp-border-1);border-radius:999px;background:var(--sv-status-bg);border-color:var(--sv-status-border);color:color-mix(in srgb,var(--sp-text-muted),var(--sv-link-accent) 18%);font-size:.84em;line-height:1.2;cursor:pointer;}
.sv-statusToggle:hover,.sv-statusToggle:focus-visible{background:var(--sv-status-bg-hover);border-color:var(--sv-status-border-hover);color:color-mix(in srgb,var(--sp-text),var(--sv-link-accent) 18%);outline:none;}
.sv-statusToggleLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sv-statusToggleCaret{flex:0 0 auto;color:var(--sv-link-accent);}
.sv-statusDetails{display:none;flex-direction:column;gap:var(--sp-1);}
.sv-statusDetails.is-open{display:flex;}
.sv-fileList{list-style:none;margin:0;padding:0;}
.sv-fileList li + li{margin-top:var(--sp-0);}
.sv-fileItem{display:flex;gap:var(--sp-0);align-items:stretch;}
.sv-fileBtn{width:100%;text-align:left;appearance:none;background:transparent;color:inherit;border:var(--sp-border-1);border-radius:var(--sp-radius-2);padding:var(--sp-1) var(--sp-3);line-height:1.1;cursor:pointer;transition:background var(--sp-duration-2) var(--sp-ease-standard), border-color var(--sp-duration-2) var(--sp-ease-standard);}
.sv-fileItem .sv-fileBtn{flex:1 1 auto;}
.sv-fileBtn:hover,.sv-fileBtn:focus-visible{background:var(--sp-elev);border-color:var(--sp-border-strong);outline:none;}
.sv-fileBtn[aria-current="true"]{background:transparent;border-color:var(--sp-border);}
.sv-fileBtn:disabled{cursor:default;opacity:.62;}
.sv-fileArrow{
  margin-left:auto;
  color:var(--sv-link-accent);
  opacity:.82;
  transform:translateX(-.25rem);
  transition:opacity var(--sp-duration-2) var(--sp-ease-standard), transform var(--sp-duration-2) var(--sp-ease-standard), color var(--sp-duration-2) var(--sp-ease-standard);
}
.sv-fileItem--dir:hover .sv-fileArrow,.sv-fileItem--dir:focus-within .sv-fileArrow{opacity:1;transform:translateX(0);color:var(--sv-link-accent-hover);}
.sv-fileAction{flex:0 0 1.75rem;display:inline-flex;align-items:center;justify-content:center;min-width:1.75rem;width:1.75rem;padding:0;border:var(--sp-border-1);border-radius:var(--sp-radius-2);color:var(--sv-link-accent);text-decoration:none;background:transparent;font-size:.92em;line-height:1;transition:background var(--sp-duration-2) var(--sp-ease-standard), border-color var(--sp-duration-2) var(--sp-ease-standard), color var(--sp-duration-2) var(--sp-ease-standard);cursor:pointer;}
.sv-fileAction--text{flex:0 0 auto;min-width:2.35rem;width:auto;padding:0 .42rem;font-size:.74em;font-weight:600;letter-spacing:.01em;text-decoration:none;}
.sv-fileAction:hover,.sv-fileAction:focus-visible{background:var(--sv-file-action-bg-hover);border-color:var(--sv-file-action-border-hover);color:var(--sv-link-accent-hover);text-decoration:underline;text-decoration-color:var(--sv-link-accent-line);outline:none;}
.sv-fileAction:disabled,.sv-fileAction.is-disabled{opacity:.45;pointer-events:none;cursor:default;text-decoration:none;}
.sv-fileRow{display:flex;justify-content:space-between;gap:var(--sp-3);align-items:center;}
.sv-fileName{display:flex;flex-wrap:nowrap;gap:.2rem;align-items:center;min-width:0;overflow:hidden;}
.sv-fileTitle{display:inline-block;white-space:nowrap;}
.sv-fileKind{font-size:.9em;color:var(--sp-muted);white-space:nowrap;flex:0 0 auto;opacity:.82;}
.sv-scroll{overflow:auto;min-height:0;flex:1 1 auto;}
.sv-scroll,.sv-drawerBody{
  scrollbar-width:thin;
  scrollbar-color:var(--sv-scroll-thumb-solid) var(--sv-scroll-track);
}
.sv-scroll::-webkit-scrollbar,
.sv-drawerBody::-webkit-scrollbar{
  width:.72rem;
  height:.72rem;
}
.sv-scroll::-webkit-scrollbar-track,
.sv-drawerBody::-webkit-scrollbar-track{
  background:var(--sv-scroll-track);
  border-radius:999px;
}
.sv-scroll::-webkit-scrollbar-thumb,
.sv-drawerBody::-webkit-scrollbar-thumb{
  background:var(--sv-scroll-thumb);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
  box-shadow:var(--sv-scroll-thumb-shadow);
}
.sv-scroll::-webkit-scrollbar-thumb:hover,
.sv-drawerBody::-webkit-scrollbar-thumb:hover{
  background:var(--sv-scroll-thumb-hover);
  background-clip:padding-box;
}

.sv-preview{white-space:pre-wrap;word-break:break-word;font-family:var(--sp-font-mono);font-size:var(--sp-fs-1);line-height:var(--sp-lh-3);padding:var(--sp-3);border:var(--sp-border-1);border-radius:var(--sp-radius-2);background:var(--sp-surface-2);min-height:12rem;}
#preview .sv-panel__header{padding-top:var(--sp-2);padding-bottom:var(--sp-2);}
#preview .sv-previewHeader{align-items:center;min-height:3.5rem;}
#preview .sv-previewHeading{align-items:center;}
#preview .sv-previewActionRow{align-items:center;gap:var(--sp-1);}
#preview .sv-previewActionRow .sp-btn{
  padding:.52rem .78rem;
  min-height:0;
  background:var(--sv-preview-action-bg);
  border-color:var(--sv-preview-action-border);
  box-shadow:none;
  font-size:.94rem;
}
#preview .sv-previewActionRow .sp-btn:hover,
#preview .sv-previewActionRow .sp-btn:focus-visible{
  background:var(--sv-preview-action-bg-hover);
  border-color:var(--sv-preview-action-border-hover);
}
#preview .sv-previewActionRow #saveBtn{opacity:.78;}
#preview .sv-panel__body{display:flex;flex-direction:column;min-height:0;padding:0;}
#preview .sv-panel__body.sp-stack{gap:0;}
#previewContent{flex:1 1 auto;min-height:0;overflow:auto;margin:0;}
#previewContent.sv-preview{height:100%;min-height:0;overflow:auto;border-radius:0 0 var(--sp-radius-2) var(--sp-radius-2);}
#previewContent.sv-preview--framed{padding:var(--sp-0);border-radius:0 0 var(--sp-radius-2) var(--sp-radius-2);}
#previewContent.sv-preview--framed .sv-previewBody{padding:var(--sp-0);margin:var(--sp-0);}
#previewContent.sv-preview--framed .sv-previewBody--text{margin:var(--sp-0);}
#previewContent.sv-preview--framed .sv-previewBody > *{margin:var(--sp-0);}

.sv-preview--console{background:radial-gradient(circle at top right,var(--sv-console-aura),transparent 32%),var(--sv-console-bg);color:var(--sv-console-fg);border-color:var(--sv-console-border);box-shadow:inset 0 0 0 var(--sp-border-w-1) var(--sv-console-hairline);}
.sv-preview--editor{padding:0;display:flex;overflow:hidden;}
.sv-console{min-height:20rem;display:flex;flex-direction:column;gap:var(--sp-3);}
.sv-console__bar{display:flex;justify-content:space-between;gap:var(--sp-3);align-items:center;font-size:var(--sp-fs-1);color:color-mix(in srgb,var(--sv-console-fg),transparent 24%);}
.sv-console__dots{display:inline-flex;gap:.45rem;align-items:center;}
.sv-console__dot{width:.7rem;height:.7rem;border-radius:999px;background:color-mix(in srgb,var(--sv-console-accent),black 35%);opacity:.9;}
.sv-console__body{margin:0;white-space:pre-wrap;word-break:break-word;font-family:var(--sp-font-mono);font-size:var(--sp-fs-1);line-height:1.65;color:var(--sv-console-fg);}
.sv-console__prompt{color:var(--sv-console-accent);}
.sv-editorWrap{display:flex;flex-direction:column;min-height:100%;width:100%;}
.sv-editorStatus{display:flex;justify-content:space-between;gap:var(--sp-3);align-items:center;padding:var(--sp-2) var(--sp-3);border-bottom:var(--sp-border-1);background:var(--sp-surface-2);font-size:var(--sp-fs-1);color:var(--sp-muted);}
.sv-editorArea{flex:1 1 auto;min-height:24rem;width:100%;resize:none;border:0;background:transparent;color:inherit;font:inherit;font-family:var(--sp-font-mono);font-size:var(--sp-fs-1);line-height:1.55;padding:var(--sv-preview-text-pad, var(--sp-3));box-sizing:border-box;outline:none;}

#previewContent.sv-preview--editor{
  padding:0;
  display:block;
  background:var(--sv-editor-bg);
  border-color:var(--sv-editor-border);
  box-shadow:none;
}
#previewContent.sv-preview--editor .sv-editorArea{
  display:block;
  width:100%;
  height:100%;
  min-height:100%;
  background:transparent;
  padding:var(--sp-3);
}

.sv-imagePreview{max-width:100%;border-radius:var(--sp-radius-2);border:var(--sp-border-1);display:block;}
.sv-metaLink{color:var(--sv-link-accent);text-decoration:underline;text-decoration-color:var(--sv-link-accent-line);text-underline-offset:var(--sp-underline-offset);word-break:break-all;}
.sv-metaLink:hover,.sv-metaLink:focus-visible{color:var(--sv-link-accent-hover);text-decoration-color:color-mix(in srgb,var(--sv-link-accent-hover),white 18%);}

.sp-header{
  position:relative;
  overflow:hidden;
  border-bottom:var(--sp-border-w-1) solid var(--sv-drawer-head-line);
  background:linear-gradient(135deg,var(--sv-drawer-head-start) 0%,var(--sv-drawer-head-mid) 54%,var(--sv-drawer-head-end) 100%);
  box-shadow:var(--sv-drawer-head-shadow);
}
.sp-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 18% 12%,var(--sv-drawer-head-glow-blue),transparent 34%),radial-gradient(circle at 82% 22%,var(--sv-drawer-head-glow),transparent 38%);
  pointer-events:none;
}
.sp-header__inner{position:relative;z-index:1;}
.sp-header .sp-btn{
  background:var(--sv-header-btn-bg);
  border-color:var(--sv-header-btn-border);
  box-shadow:var(--sv-header-btn-shadow);
}
.sp-header .sp-btn:hover,
.sp-header .sp-btn:focus-visible{
  background:var(--sv-header-btn-bg-hover);
  border-color:var(--sv-header-btn-border-hover);
}

#browser{
  position:relative;
  background:var(--sv-browser-bg);
  border-color:var(--sv-browser-border);
  box-shadow:var(--sv-browser-shadow);
}
#browser .sv-panel__header{
  background:var(--sv-browser-header-bg);
  border-bottom:var(--sp-border-w-1) solid var(--sv-browser-header-border);
  box-shadow:var(--sv-browser-header-shadow);
}
#browser .sv-panel__body{
  background:var(--sv-browser-body-bg);
}
#browser .sv-fileBtn{
  background:var(--sv-browser-file-bg);
  border-color:var(--sv-browser-file-border);
}
#browser .sv-fileBtn:hover,
#browser .sv-fileBtn:focus-visible{
  background:var(--sv-browser-file-bg-hover);
  border-color:var(--sv-browser-file-border-hover);
}
#browser .sv-fileBtn[aria-current="true"]{
  background:var(--sv-browser-file-bg-current);
  border-color:var(--sv-browser-file-border-current);
  box-shadow:var(--sv-browser-file-shadow-current);
}
#browser .sv-fileBtn[aria-current="true"] .sv-fileArrow{
  opacity:1;
  transform:translateX(0);
  color:var(--sv-link-accent-hover);
}
#browser .sv-fileAction{
  color:var(--sv-link-accent);
  border-color:var(--sv-file-action-border);
  background:var(--sv-file-action-bg);
}
#browser .sv-fileAction:hover,
#browser .sv-fileAction:focus-visible{
  color:var(--sv-link-accent-hover);
  border-color:var(--sv-file-action-border-hover);
  background:var(--sv-file-action-bg-hover);
}
#browser .sv-statusToggle,
#browser .sv-statusNote{
  background:var(--sv-status-neutral-bg);
  border-color:var(--sv-status-neutral-border);
}

#preview{
  position:relative;
  background:var(--sv-preview-shell-bg);
  border-color:var(--sv-preview-shell-border);
  box-shadow:var(--sv-preview-shell-shadow);
}
#preview .sv-panel__header{
  background:var(--sv-preview-header-bg);
  border-bottom:var(--sp-border-w-1) solid var(--sv-preview-header-border);
  box-shadow:var(--sv-preview-header-shadow);
}
#preview .sv-panel__body{
  background:var(--sv-preview-body-bg);
}
#previewContent.sv-preview{
  background:var(--sv-preview-content-bg);
  border-color:var(--sv-preview-content-border);
  box-shadow:var(--sv-preview-content-shadow);
}
#previewContent.sv-preview--framed{
  background:var(--sv-preview-framed-bg);
  border-color:var(--sv-preview-framed-border);
}
#preview .sv-previewInnerMeta,
#preview .sv-editorStatus{
  background:var(--sv-preview-meta-bg);
  border-bottom-color:var(--sv-preview-meta-border);
}
#preview .sv-editorArea{
  background:var(--sv-editor-bg);
}

.sv-drawer{position:fixed;inset:0 auto 0 0;width:var(--sv-drawer-w);max-width:calc(100vw - 2rem);transform:translateX(-104%);transition:transform var(--sp-duration-3) var(--sp-ease-standard);z-index:60;display:flex;flex-direction:column;background:var(--sp-surface);border-right:var(--sp-border-1);box-shadow:var(--sp-shadow-4);}
.sv-drawer.is-open{transform:translateX(0);}
.sv-drawerBackdrop{position:fixed;inset:0;background:var(--sv-drawer-backdrop);opacity:0;pointer-events:none;transition:opacity var(--sp-duration-3) var(--sp-ease-standard);z-index:50;}
.sv-drawerBackdrop.is-open{opacity:1;pointer-events:auto;}
.sv-drawerHeader{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;gap:var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-4);border-bottom:var(--sp-border-w-1) solid var(--sv-drawer-head-line);background:linear-gradient(135deg,var(--sv-drawer-head-start) 0%,var(--sv-drawer-head-mid) 54%,var(--sv-drawer-head-end) 100%);box-shadow:var(--sv-drawer-head-shadow);overflow:hidden;}
.sv-drawerBody{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4);overflow:auto;min-height:0;}
.sv-drawerBody{padding:var(--sp-3);padding-top:var(--sp-2);gap:var(--sp-3);}
.sv-drawerSection{gap:var(--sp-1);}
.sv-drawerSectionTitle{font-size:.82rem;opacity:.78;letter-spacing:.05em;margin-bottom:.15rem;}

.sv-drawerBody .sp-btn,
.sv-drawerBody .sp-input{font-size:1rem;border-radius:1.08rem;}
.sv-drawerBody .sp-btn{
  font-weight:680;
  letter-spacing:.005em;
  border-color:var(--sv-drawer-btn-border);
  background:var(--sv-drawer-btn-bg);
  box-shadow:var(--sv-drawer-btn-shadow);
}
.sv-drawerBody .sp-btn:hover,
.sv-drawerBody .sp-btn:focus-visible{
  background:var(--sv-drawer-btn-hover);
  border-color:var(--sv-drawer-btn-border-hover);
  transform:translateY(-1px);
}
.sv-drawerBody .sp-btn--primary{
  box-shadow:var(--sv-drawer-btn-primary-shadow);
  font-weight:700;
}
.sv-drawerBody .sp-input{
  background:var(--sv-drawer-input-bg);
  border-color:var(--sv-drawer-input-border);
  box-shadow:inset 0 var(--sp-border-w-1) 0 var(--sv-line-light);
}
.sv-previewModes .sp-btn,
.sv-drawerActionsStack .sp-btn,
.sv-searchRow .sp-btn,
.sv-publishRow .sp-btn{padding:.78rem .98rem;min-height:0;}
.sv-searchRow .sp-input,
.sv-publishRow .sp-input{padding:.78rem .98rem;min-height:0;}
#searchBtn{
  background:var(--sv-search-bg);
  border-color:var(--sv-search-border);
  color:color-mix(in srgb,var(--sp-text),var(--sv-link-accent) 18%);
  box-shadow:var(--sv-search-shadow);
}
#searchBtn:hover,
#searchBtn:focus-visible{
  background:var(--sv-search-bg-hover);
  border-color:var(--sv-search-border-hover);
  color:var(--sp-text);
}

.sv-drawerHeader::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 12%,var(--sv-drawer-head-glow-blue),transparent 34%),radial-gradient(circle at 82% 22%,var(--sv-drawer-head-glow),transparent 38%);pointer-events:none;}
.sv-drawerHeader > *{position:relative;z-index:1;}
.sv-drawerHeader .sp-stack strong{font-size:1.08rem;letter-spacing:.01em;color:color-mix(in srgb,var(--sp-text),white 8%);}
.sv-drawerHeader .sp-btn{background:var(--sv-header-btn-bg);border-color:var(--sv-header-btn-border);box-shadow:var(--sv-header-btn-shadow);}
.sv-drawerHeader .sp-btn:hover,.sv-drawerHeader .sp-btn:focus-visible{background:var(--sv-header-btn-bg-hover);border-color:var(--sv-header-btn-border-hover);}

.sv-footerWrap{margin-top:.2rem;padding:0 var(--sp-2) var(--sp-1);}
.sv-footerWrap .sp-card{
  background:var(--sv-footer-card-bg);
  border:var(--sp-border-w-1) solid var(--sv-footer-card-border);
  box-shadow:var(--sv-footer-card-shadow);
}
.sv-footerWrap .sp-card__body{
  padding:.46rem .82rem;
  background:var(--sv-footer-card-body-bg);
}
.demo-footer__row{display:flex;justify-content:space-between;gap:var(--sp-2);align-items:center;flex-wrap:wrap;color:color-mix(in srgb,var(--sp-text-muted),white 10%);font-size:.84rem;line-height:1.2;}
.demo-footer__meta{display:flex;align-items:center;gap:.38rem;flex-wrap:wrap;min-width:0;}
.demo-footer__credit{color:color-mix(in srgb,var(--sp-text-muted),white 8%);opacity:.96;}
.demo-footer__sep{opacity:.6;}
.demo-footer__links{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;}
.demo-footer__link{color:color-mix(in srgb,var(--sv-link-accent),var(--sp-text-muted) 52%);text-decoration:none;white-space:nowrap;}
.demo-footer__link:hover{color:var(--sv-link-accent-hover);text-decoration:underline;text-decoration-color:var(--sv-link-accent-line);}

/* Mobile app-shell layout belongs to framework patterns/app_shell.css and components/panels.css.
   Keep only Viewer-specific responsive details here. */
@media/* --sp-bp-md: 52rem */
 (max-width:52rem){
  .sv-shell{grid-template-columns:1fr;}
  .sv-drawer{width:min(90vw,26rem);}
  .sv-newMenu{left:0;right:auto;}
  .demo-footer__row{align-items:flex-start;}
  .demo-footer__meta{gap:.3rem;}
  .sv-fileTitle,
  .sv-fileKind,
  .sv-browserTitlePath,
  .sp-brand__text{max-inline-size:100%;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;}
  .sv-fileTitle,
  .sv-fileKind{white-space:nowrap;}
}