html { --col: 360px; --read: 500px; --small: 13px; --regular: 14px; --big: 20px; --d: 0.2s; --hl: yellow; --white: #fff; --whitesmoke: #f0f0f0; --gainsboro: #e0e0e0; --silver: #c0c0c0; --gray: #808080; --darkgray: #404040; --almostblack: #202020; --black: #000; }

@media (prefers-color-scheme: dark) { html { --white: #000; --whitesmoke: #141414; --gainsboro: #242424; --silver: #404040; --gray: #808080; --darkgray: #c0c0c0; --almostblack: #e0e0e0; --black: #fff; } }

* { margin: 0; padding: 0; }

body { background-color: var(--gainsboro); color: var(--black); cursor: default; font-family: "Route 159", sans-serif; font-size: var(--regular); line-height: 20px; }

a { color: var(--black); cursor: pointer; text-decoration: none; transition: color var(--d); }

b, i { font-style: normal; font-weight: normal; }

sup { line-height: 0; margin-left: 1px; }

h3 { font-size: var(--regular); font-weight: normal; line-height: 15px; }

h2 { font-size: var(--big); line-height: 25px; }

.main { display: grid; grid-template-columns: calc(50% - var(--col)) var(--col) var(--col) calc(50% - var(--col)); }

.left, .right { min-height: 100vh; }

.side.left { background-color: var(--whitesmoke); }

.side.right { background-color: var(--white); }

.column.left { background-color: var(--whitesmoke); }

.column.left .entry { border-bottom: var(--gainsboro) 1px solid; }

.column.right { background-color: var(--white); }

.column.right .entry { border-bottom: var(--whitesmoke) 1px solid; }

.column h3 { padding-left: 10px; padding-top: 15px; }

.column h3 a { color: var(--gray); }

.column h2 { padding-left: 10px; padding-bottom: 15px; }

.column h2 a { color: var(--black); }

.column .entry { margin-bottom: 9.5px; padding-bottom: 9.5px; }

.column .entry:last-child { border-bottom: 0 none; margin-bottom: 10px; padding-bottom: 10px; }

.column .small { color: var(--silver); font-size: var(--small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.column .small a { color: var(--gray); }

.column .small .done { color: var(--silver); }

.column .small sup { font-size: 8px; }

.column .summary { color: var(--gray); cursor: text; }

.column .title a { color: var(--black); }

.column .title a:visited { color: var(--darkgray); }

.column .title, .column .summary, .column .small { padding-left: 10px; }

.read { display: grid; grid-template-columns: calc(50% - var(--read) / 2 - 20px) 40px var(--read) calc(50% - var(--read) / 2 - 20px); }

.pane.left { background-color: var(--whitesmoke); padding: 15px 10px; }

.pane.left .small { left: 0; position: sticky; top: 15px; transform: rotate(180deg); writing-mode: vertical-lr; }

.pane.left .small a { color: var(--gray); margin-top: 10px; }

.pane.left .small .done { color: var(--silver); }

.pane.left .small sup { font-size: 9px; }

.pane.right { background-color: var(--white); padding: 0 10px; }

.pane.right h3 { padding-top: 15px; }

.pane.right h3 a { color: var(--gray); }

.pane.right h2 { padding-bottom: 10px; }

.pane.right h2 a { color: var(--black); }

.pane.right .text { color: var(--black); cursor: text; padding-bottom: 15px; }

.pane.right .text p { padding: 5px 0; }

.pane.right .text u { background-color: var(--hl); text-decoration: none; }

@media (max-width: 720px) { .main { grid-template-columns: 0 50% 50% 0; } }

@media (max-width: 540px) { .read { grid-template-columns: 0 40px calc(100% - 40px) 0; } }

@media (max-width: 480px) { .summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

@font-face { font-family: "Route 159"; font-style: normal; font-weight: normal; src: url(/static/route159/regular.woff2) format("woff2"); }

@font-face { font-family: "Route 159"; font-style: normal; font-weight: bold; src: url(/static/route159/bold.woff2) format("woff2"); }