@font-face { font-family:Marund; src:url('assets/fonts/marund.woff2') format('woff2'); font-weight:300 700; font-display:swap; }
@font-face { font-family:'Inter Tight'; src:url('assets/fonts/inter-tight.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
.file-window { --file-text:#343e49; --file-muted:#657181; --file-heading:#173a58; --file-line:#dce1e5; --file-surface:#f8f9fa; --file-active:#e9edef; position:relative; width:min(76rem,calc(100vw - 3rem)); margin-inline-start:50%; transform:translateX(-50%); margin-block-start:2rem; background:white; border:1px solid var(--file-line); border-radius:18px; box-shadow:0 6px 20px oklch(0 0 0 / .05),0 1px 4px oklch(0 0 0 / .025); display:grid; grid-template-columns:14rem minmax(0,1fr); overflow:hidden; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--file-text); }
.file-sidebar { padding:1.6rem .875rem 2rem; background:var(--file-surface); border-inline-end:1px solid var(--file-line); }
.kit-name { font-size:.875rem; font-weight:600; letter-spacing:-.02em; margin:0 .5rem 1.5rem; color:var(--file-heading); }
.file-group { margin-block-start:1.65rem; }
.file-group:first-child { margin-block-start:0; }
.group-name { color:var(--file-muted); font: .75rem/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:.085em; text-transform:uppercase; margin:0 .6rem .5rem; }
.file-tab { appearance:none; font:inherit; font-size:.875rem; display:block; width:100%; text-align:start; min-height:36px; border:1px solid transparent; padding:calc(.55rem - 4px) .6rem; border-radius:8px; color:var(--file-muted); background:transparent; cursor:pointer; overflow-wrap:anywhere; }
.file-tab + .file-tab { margin-block-start:2px; }
.file-tab:hover { color:var(--file-heading); background:#edf0f2; }
.file-tab[aria-selected=true] { color:var(--file-heading); background:var(--file-active); font-weight:600; }
.file-tab:focus-visible { outline-offset:-3px; }
.file-reader { min-width:0; position:relative; }
.file-topbar { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem 1rem; padding:1.1rem 1.75rem; min-height:70px; border-block-end:1px solid var(--file-line); font-size:.875rem; }
.file-name { color:var(--file-heading); font-weight:600; }
.file-view-controls { display:flex; gap:.35rem; margin-inline-start:auto; }
.file-view-controls[hidden],[hidden] { display:none !important; }
.file-view-controls button { position:relative; min-height:28px; height:28px; padding:0 .75rem; font:.75rem/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--file-muted); border:1px solid var(--file-line); border-radius:999px; background:white; cursor:pointer; white-space:nowrap; }
.file-view-controls button::after { content:''; position:absolute; inset-inline:0; inset-block-start:50%; height:40px; transform:translateY(-50%); }
.file-view-controls #view-notes[aria-pressed=true] { border-color:var(--black--100); }
.file-view-controls #view-example { background:var(--black--100); color:white; border-color:var(--black--100); font-weight:500; }
.file-path { color:var(--file-muted); overflow-wrap:anywhere; font-size:.8125rem; }
.file-panel { min-height:35rem; max-height:43rem; overflow:auto; overscroll-behavior:contain; padding:1.75rem 2rem 2rem 1rem; }
.file-panel:focus-visible { outline-offset:-4px; }
.markdown { position:relative; font-size:.875rem; line-height:1.85; }
.excerpt-scrim { position:absolute; inset-inline:0; inset-block-end:0; height:25%; background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.85) 45%,white 100%); pointer-events:none; }
.excerpt-scrim .private-remainder { position:absolute; inset-block-end:min(24px,calc(50% - 18px)); inset-inline-start:50%; transform:translateX(-50%); margin:0; max-width:calc(100% - 2rem); white-space:nowrap; }
.render-privacy { display:flex; justify-content:center; margin-block-start:1.8rem; }
.render-privacy .private-remainder { margin:0; max-width:100%; }
.md-line { display:grid; grid-template-columns:2.2rem minmax(0,1fr); column-gap:.75rem; min-height:1.85em; }
.line-number { color:#66707a; text-align:end; font-size:.8125rem; padding-block-start:.125rem; user-select:none; font-variant-numeric:tabular-nums; }
.line-content { white-space:pre-wrap; overflow-wrap:anywhere; }
.md-heading .line-content { color:var(--file-heading); font-weight:600; }
.md-quote .line-content { color:#755c2a; }
.md-list .line-content { color:var(--file-text); }
.private-remainder { display:flex; align-items:center; gap:.5rem; width:fit-content; max-width:calc(100% - 2.95rem); font:.8125rem/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:rgba(0,0,0,.5); background:#F3F5F6; padding:4px 14px 4px 10px; border-radius:999px; margin:1.8rem 0 0 2.95rem; }
.private-remainder svg { flex:none; }
.file-mobile { display:none; }
.render-block { margin:1.5rem 0 0 2.95rem; font-family:'Inter Tight',sans-serif; }
.render-label { font: .75rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--file-muted); margin-block-end:.8rem; }
/* UI framing for the original effect assets; each surface keeps its Slate 200 background. */
.effect-board { font-family:var(--body-sans); container-type:inline-size; }
.effect-row + .effect-row { margin-block-start:2rem; }
.effect-row h3 { font:500 .9375rem/1.4 var(--body-sans); color:var(--fuser-slate-1000); margin:0 0 .25rem; }
.effect-row .effect-description { color:var(--fuser-slate-900); font-size:.8125rem; line-height:1.5; margin:0 0 1rem; }
.effect-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; width:100%; max-width:42rem; }
.effect-cell { display:flex; align-items:center; justify-content:center; flex-direction:column; min-width:0; aspect-ratio:1; gap:.75rem; padding:.75rem; background:var(--fuser-slate-200); border:1px solid var(--fuser-slate-300); border-radius:8px; }
.shape-slot { width:min(70%,6rem); aspect-ratio:1; position:relative; flex:none; }
.shape-original { position:absolute; inset-block-start:0; inset-inline-start:0; transform-origin:top left; }
.shape-original img { max-width:none; outline:0; }
.effect-level { color:var(--fuser-slate-900); font:.75rem/1.4 var(--body-sans); }
.palette-render { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.palette-chip { height:4rem; border:1px solid #dce1e5; border-radius:4px; }
.palette-label { font-size:.75rem; color:var(--fuser-slate-900); margin-block-start:.4rem; overflow-wrap:anywhere; }
.artist-artifact { display:block; width:min(100%,25rem); height:auto; }
.render-caption { font:.8125rem/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--file-muted); margin-block-start:.75rem; max-width:65ch; }
.file-live-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@container(max-width:28rem) { .effect-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:44rem) { .effect-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .effect-cell { gap:.5rem; padding:.625rem; } .shape-slot { width:min(70%,5rem); } }
@media(max-width:44rem) { .file-window { width:calc(100vw - 2rem); grid-template-columns:minmax(0,1fr); border-radius:12px; } .file-sidebar { display:none; } .file-mobile { display:block; padding:1rem; background:var(--file-surface); border-block-end:1px solid var(--file-line); } .file-mobile label { display:block; font:.8125rem/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; margin-block-end:.5rem; color:var(--file-heading); } .file-mobile select { width:100%; min-height:44px; padding:.5rem; border:1px solid #a8b2bb; border-radius:5px; background:white; color:var(--file-heading); font:1rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; } .file-topbar { padding:1rem; gap:.4rem .75rem; } .file-path { flex-basis:100%; order:3; } .file-panel { padding:1.25rem 1rem 1.5rem .5rem; min-height:30rem; max-height:39rem; } .markdown { font-size:.875rem; line-height:1.8; } .md-line { grid-template-columns:1.2rem minmax(0,1fr); gap:.5rem; } .private-remainder,.render-block { margin-inline-start:1.7rem; } .palette-render { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:no-preference) { .file-tab { transition:background-color .12s ease,color .12s ease; } }
@media(forced-colors:active) { .file-tab[aria-selected=true] { border-color:Highlight; } .line-content { color:CanvasText; } }

@media(max-width:44rem) { .file-view-controls button::after { height:44px; } }
@media(max-width:44rem) { .excerpt-scrim .private-remainder,.render-privacy .private-remainder { align-items:center; margin:0; max-width:calc(100% - 1rem); } }
@media(forced-colors:active) { .private-remainder { border:1px solid CanvasText; } }
@media(forced-colors:active) { .excerpt-scrim { background:Canvas; } .markdown-body .md-line[aria-hidden=true] { visibility:hidden; } }
@media(min-width:44.001rem) {
  .file-window { height:44rem; grid-template-rows:minmax(0,1fr); }
  .file-sidebar { overflow:auto; min-height:0; }
  .file-reader { min-height:0; height:100%; display:flex; flex-direction:column; }
  .file-topbar { flex:none; }
  .file-panel { flex:1; min-height:0; max-height:none; }
}

@media(max-width:44rem) {
  .file-window { height:600px; grid-template-rows:minmax(0,1fr); }
  .file-reader { display:flex; flex-direction:column; min-height:0; height:100%; }
  .file-mobile,.file-topbar { flex:none; }
  .file-panel { flex:1; min-height:0; max-height:none; }
  .file-select-wrap { position:relative; }
  .file-mobile select { appearance:none; -webkit-appearance:none; padding-inline-end:2.5rem; font-family:var(--body-mono); cursor:pointer; }
  .file-select-chevron { position:absolute; inset-inline-end:12px; inset-block-start:50%; transform:translateY(-50%); color:var(--file-text); pointer-events:none; }
}
@media(max-width:44rem) and (forced-colors:active) {
  .file-mobile select { appearance:auto; -webkit-appearance:auto; }
  .file-select-chevron { display:none; }
}