/* Same paper, ink and type as the wall (design/template.html), so the source pages read as the same site. */
:root { color-scheme:dark; --paper:#0c0b0a; --ink:#e9e5db; --dim:#938d80; --hair:#302d28; --faint:#413d36; --violet:#cfb4e5; --amber:#e3bd81; --green:#abd09e; --blue:#9fc7e5; --rose:#e5aaaa; --error:#ff9393;
  --f-serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,"Hoefler Text",Cambria,Georgia,"Times New Roman","Apple SD Gothic Neo","Noto Serif KR","Nanum Myeongjo","Malgun Gothic",serif;
  --f-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",monospace }
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]) { color-scheme:light; --paper:#faf7f1; --ink:#171410; --dim:#6c665c; --hair:#dcd6ca; --faint:#c3bcac; --violet:#6f358f; --amber:#805118; --green:#35652d; --blue:#235f8a; --rose:#943c3c; --error:#b00020 }
}
:root[data-theme=light] { color-scheme:light; --paper:#faf7f1; --ink:#171410; --dim:#6c665c; --hair:#dcd6ca; --faint:#c3bcac; --violet:#6f358f; --amber:#805118; --green:#35652d; --blue:#235f8a; --rose:#943c3c; --error:#b00020 }
/* Phones enlarge text in wide blocks on their own, which made some code lines much larger than others. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100% }
* { box-sizing:border-box }
html[lang=ko] body { word-break:keep-all }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-serif); font-size:16.5px; line-height:1.62 }
a { color:inherit; text-underline-offset:3px }
button { font:inherit; color:inherit; background:none; border:0; border-bottom:1px solid; cursor:pointer }
a:focus-visible,button:focus-visible,summary:focus-visible,.source-code:focus-visible { outline:2px solid var(--blue); outline-offset:3px }
.source-wrap { max-width:1400px; margin:auto; padding:clamp(12px,3vw,34px) }
header { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:16px; border-bottom:2px solid; padding-bottom:16px }
header>a { font-size:30px; text-decoration:none }
main { border:1px solid var(--hair); padding:clamp(12px,2.6vw,32px); margin-top:20px; min-width:0 }
h1 { font-weight:400; font-size:clamp(34px,6vw,60px); line-height:1.1; margin:12px 0 }
h2 { font-size:14px; font-weight:400; margin:0 }
.eyebrow,.source-receipt,footer { color:var(--dim); font-size:13px }
.source-layout { display:grid; grid-template-columns:minmax(200px,26%) minmax(0,1fr); align-items:start; border-top:1px solid var(--hair); margin-top:28px }
.source-tree { min-width:0; position:sticky; top:0; max-height:100vh; overflow:auto; padding:16px 14px 20px 0; font:12px/1.7 var(--f-mono); overflow-wrap:anywhere }
.source-browser>summary { cursor:pointer; color:var(--dim); font-size:13px; padding:2px 0 6px }
.source-tree ul { list-style:none; padding-left:12px; margin:2px 0 }
.source-browser>ul { padding:0 }
.source-tree details details>summary { cursor:pointer; color:var(--dim); padding:2px 0 }
.source-file { display:block; padding:3px 5px; text-decoration:none }
.source-file:hover,.source-file[aria-current] { background:var(--hair) }
.source-file small { color:var(--dim) }
.source-content { min-width:0; border-left:1px solid var(--hair); padding:16px 0 0 18px }
.source-file-head { overflow-wrap:anywhere; font-family:var(--f-mono) }
.source-file-head h2 { font-size:14px }
.source-file-head p { color:var(--dim); font-size:12px; margin:8px 0 16px }
.source-code { overflow-x:auto; max-width:100%; border:1px solid var(--hair); font:12px/1.8 var(--f-mono); tab-size:4; padding:10px 0 }
.source-line { display:grid; grid-template-columns:6ch minmax(0,1fr); column-gap:2ch; width:max-content; min-width:100% }
.source-line:target, .source-line.source-target { background:var(--hair) }
.source-more { padding:10px 0 10px 8ch; font-size:12px; color:var(--dim) }
.line-number { text-align:right; color:var(--dim); text-decoration:none; user-select:none }
.source-line code { font:inherit; white-space:pre; padding-right:18px }
.source-hash { overflow-wrap:anywhere; color:var(--dim); font:11px/1.7 var(--f-mono) }
footer { padding:18px 0 }
footer:empty { display:none }
.syntax-muted { color:var(--dim); font-style:italic }
.syntax-violet { color:var(--violet) }
.syntax-amber { color:var(--amber) }
.syntax-green { color:var(--green) }
.syntax-blue { color:var(--blue) }
.syntax-rose { color:var(--rose) }
.syntax-error { color:var(--error); text-decoration:underline wavy }
.syntax-ink { color:var(--ink) }
/* One file shown in place inside another page. Lines always wrap, the frame is narrow. */
.source-peek { font-size:12.5px }
.source-peek .source-code { border:0; padding:12px 0 }
.source-peek .source-line { width:auto }
.source-peek .source-line code { white-space:pre-wrap; overflow-wrap:anywhere; padding-right:12px }
@media (max-width:600px) {
  .source-layout { grid-template-columns:minmax(0,1fr) }
  /* One scroll on a phone, the page. The file list folds above the code instead of scrolling in a box. */
  .source-tree { position:static; max-height:none; overflow:visible; padding:12px 0; border-bottom:1px solid var(--hair); font-size:13px }
  .source-browser>summary { font-size:14px; color:var(--ink) }
  .source-content { border-left:0; padding-left:0 }
  .source-code { font-size:12.5px; padding:8px 0 }
  .source-line { grid-template-columns:4ch minmax(0,1fr); column-gap:1.5ch; width:auto }
  .source-line code { white-space:pre-wrap; overflow-wrap:anywhere; padding-right:10px }
}