/* tomitaku.net
   One fundamental size S. b = round(S/10) is the vertical unit, h = 2b the small type, u = 2h its line.
   Every vertical measure is a whole number of b. 24 columns, gutter h; the body runs in columns 1–19, notes in 20–24.
   Links with a destination are blue everywhere; grey is for page controls (header, [Y/n], >). */
:root{
  --bg:#ffffff; --fg:#111214; --link:#0000ee; --visited:#551a8b; --red:#ba0000;
  --mute:color-mix(in oklch, var(--fg) 45%, var(--bg));
  --faint:color-mix(in oklch, var(--fg) 16%, var(--bg));
  --sans:"Helvetica Neue",Helvetica,Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --S:clamp(48px, 5vw, 72px);
  --b:round(nearest, calc(var(--S) / 10), 1px);
  --h:calc(var(--b) * 2); --u:calc(var(--h) * 2); --m:calc(var(--u) * 2);
  --t-small:max(11px, calc(var(--S) / 5.5));
  --t-row:calc(var(--S) / 3);
  --t-big:calc(var(--S) * .44); --l-big:calc(var(--b) * 5);
  --hair:.5px;
  --code-bg:#f2f2ef; --code-k:#1f3f9e; --code-s:#2f6b2f; --code-n:#9a4a12; --code-f:#6b2fa0;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#111214;--fg:#e8e7e3;--link:#8ab4ff;--visited:#c58af9;--red:#ff7a7a;--code-bg:#1d1e21;--code-k:#8fb0ff;--code-s:#9ccc8a;--code-n:#e0a46c;--code-f:#d0a4f4;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#111214;--fg:#e8e7e3;--link:#8ab4ff;--visited:#c58af9;--red:#ff7a7a;--code-bg:#1d1e21;--code-k:#8fb0ff;--code-s:#9ccc8a;--code-n:#e0a46c;--code-f:#d0a4f4;color-scheme:dark}
*{box-sizing:border-box;font-weight:400}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--t-small)/var(--u) var(--mono);font-variant-numeric:tabular-nums;
  padding-block:calc(var(--u) * 2);padding-left:max(var(--m),env(safe-area-inset-left,0px));padding-right:max(var(--m),env(safe-area-inset-right,0px))}
@media (max-width:700px){:root{--m:16px}}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
a:visited{color:var(--visited)}
a:focus-visible,input:focus-visible{outline:var(--hair) solid var(--fg);outline-offset:calc(var(--h) / 2)}
::selection{background:var(--fg);color:var(--bg)}
.mute{color:var(--mute)}
.grid{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--h)}
@keyframes blink{50%{opacity:0}}

/* header */
header{align-items:baseline;height:calc(var(--u) * 3)}
header .name{grid-column:span 12;justify-self:start;font-family:var(--sans);letter-spacing:.02em;color:var(--fg);text-decoration:none}
header .name:hover{text-decoration:underline}
header nav{grid-column:13 / -1;justify-self:end;display:flex;gap:var(--u);color:var(--mute)}
header nav a{color:var(--mute)}
header nav a[aria-current]{color:var(--fg);text-decoration:none}

/* top: one piece of writing, typed */
.trails{margin-top:calc(var(--u) * 2)}
.trail{grid-column:1 / span 19}
.trail + .trail{margin-top:calc(var(--u) * 5)}
.trail h2{font:400 calc(var(--S) * .64)/calc(var(--h) * 4) var(--sans);letter-spacing:-.015em;margin:0 0 var(--h)}
.trail p{font:400 var(--t-big)/calc(var(--h) * 4) var(--sans);letter-spacing:-.01em;margin:0}
.trail .stops{color:var(--mute);margin:var(--u) 0 0;min-height:var(--u)}
.trail .stops a{margin-right:1em}
.trail .caret,.again .caret{display:inline-block;width:.5em;height:1em;vertical-align:-.12em;background:var(--fg);animation:blink 1.06s steps(1) infinite}
.again .caret{vertical-align:-.15em}
.trail.done .caret{display:none}
.trails .again{grid-column:1 / span 19;margin-top:calc(var(--u) * 2);display:none}
.trails.done .again,.again.shell{display:block}
.again .gt{margin-right:.5em}
.again a{color:var(--mute)}
.again .ans{color:var(--fg)}
@media (prefers-reduced-motion:reduce){.trail .caret,.again .caret{animation:none}}
@media (max-width:700px){.trail,.trails .again{grid-column:1 / -1}}

/* index */
.register{margin-top:calc(var(--u) * 3)}
.filter{display:flex;gap:calc(var(--h) / 2);align-items:start;font:400 var(--t-big)/var(--l-big) var(--sans);letter-spacing:-.012em;margin-bottom:calc(var(--u) * 2)}
.filter .caret{display:none;width:.08em;height:1.1em;margin-top:calc((var(--l-big) - 1.1em) / 2);background:var(--fg);animation:blink 1.06s steps(1) infinite}
.filter.idle .caret{display:block}
.filter.idle #q{position:absolute;opacity:0;pointer-events:none}
.filter .gt{color:var(--mute);font-family:var(--mono);line-height:var(--l-big)}
#q{font:inherit;line-height:inherit;height:var(--l-big);color:var(--fg);background:none;border:0;padding:0;margin:0;flex:1;min-width:0;border-radius:0;caret-color:var(--fg)}
#q:focus{outline:none}
.order{color:var(--mute);margin-bottom:var(--u)}
.order a{color:var(--mute);margin-right:1em}
.order a[aria-current]{color:var(--fg);text-decoration:none}
.head{color:var(--mute);padding-bottom:var(--h);box-shadow:0 var(--hair) 0 var(--faint)}
.head>span,.row>span{min-width:0}
.c-d{grid-column:span 3}.c-t{grid-column:span 15}.c-g{grid-column:span 3}.c-k{grid-column:span 3}
.row{align-items:start}
.row.m>span:not(.c-t),.row.b>span:not(.c-t){line-height:var(--l-big);position:relative;top:calc((var(--t-big) - var(--t-small)) * .3)}
.row .c-t{font:400 var(--t-row)/var(--u) var(--sans);letter-spacing:-.005em;overflow-wrap:anywhere}
.row.m,.row.b{padding-bottom:var(--b)}
.row.m .c-t,.row.b .c-t{font-size:var(--t-big);line-height:var(--l-big);letter-spacing:-.012em}
.row .c-d,.row .c-g,.row .c-k{color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yr{padding-top:calc(var(--u) * 2)}
.yr .c-d{color:var(--fg)}
.blank{color:var(--faint)}
.blank .c-d,.blank .c-t{color:var(--faint);font:inherit}
.row.sel .c-t a{background:var(--fg);color:var(--bg);text-decoration:none}
.row.hide{display:none}
mark{background:none;color:inherit;text-decoration:underline;text-decoration-thickness:2px}
.none{color:var(--mute);margin-top:var(--u)}
@media (max-width:700px){.c-d{grid-column:span 7}.c-t{grid-column:span 17}.c-g,.c-k{display:none}}

/* article: entry, post, 凡例, まだない */
article{margin-top:calc(var(--u) * 2)}
article h1{grid-column:1 / -1;font:400 var(--S)/calc(var(--h) * 7) var(--sans);letter-spacing:-.01em;margin:0;overflow-wrap:anywhere}
article .meta{grid-column:1 / -1;color:var(--mute);margin-top:var(--h)}
article>h1,article>.meta{grid-row:auto}
article .body{grid-column:1 / span 19;grid-row:3;font:400 var(--t-big)/calc(var(--h) * 4) var(--sans);letter-spacing:-.01em;margin-top:calc(var(--u) * 3)}
article .body h2{font:400 calc(var(--S) * .64)/calc(var(--h) * 4) var(--sans);letter-spacing:-.015em;color:var(--fg);margin:calc(var(--u) * 3) 0 var(--h)}
article .body p{margin:0 0 var(--h)}
article ul{list-style:none;margin:0 0 var(--h);padding:0}
article li{position:relative;padding-left:1.25em;list-style:none}
article li::before{content:"•";position:absolute;left:0}
article .body blockquote{margin:0 0 var(--h);padding-left:calc((100% - 18 * var(--h)) / 19 + var(--h));box-shadow:inset 2px 0 0 var(--fg)}
article .body pre{margin:0 0 var(--h);padding:var(--h);background:var(--code-bg);font:400 calc(var(--S) * .3)/calc(var(--b) * 5) var(--mono);letter-spacing:0;overflow-x:auto;white-space:pre;tab-size:2}
article .body pre code{font:inherit}
article .body code{font:400 .8em/0 var(--mono);letter-spacing:0}
.tk-c{color:var(--mute)} .tk-k{color:var(--code-k)} .tk-s{color:var(--code-s)} .tk-n{color:var(--code-n)} .tk-f{color:var(--code-f)}
article .body .video{margin:0 0 var(--h)}
article .body del{text-decoration:line-through}
article .body .img{margin:var(--u) 0 calc(var(--u) + var(--h));max-width:100%}
article .body .img img{display:block;width:100%;height:auto;filter:grayscale(.1)}
article .body .img.snap img{height:100%;object-fit:cover;object-position:center top}
article .body .img .src{font:400 var(--t-small)/var(--u) var(--mono);letter-spacing:.02em;color:var(--mute);margin:var(--h) 0 0}
article .body .img .src a{color:var(--link)}
article .body .ref,article .body .todo{font:400 var(--t-small)/var(--u) var(--mono);color:var(--mute)}
article .body .ref h2,article .body .todo h2{font:400 var(--t-small)/var(--u) var(--mono);letter-spacing:.02em;color:var(--mute);margin:calc(var(--u) * 3) 0 0}
article .body .ref li{overflow-wrap:anywhere}
article a.ext::after{content:"↗";display:inline-block;margin-left:.12em;text-decoration:none}
a.red,a.red:visited{color:var(--red)}
a.red sup{font:400 .42em/0 var(--mono);margin-left:.15em;vertical-align:baseline;position:relative;top:-1.6em;letter-spacing:0}
sup.fn{color:var(--mute);font:400 .42em/0 var(--mono);position:relative;top:-1.6em;margin-left:.1em;vertical-align:baseline;letter-spacing:0}
/* notes beside the line that calls them, columns 20–24 */
article .side{grid-column:20 / -1;grid-row:3;position:relative;margin-top:calc(var(--u) * 3);font:400 var(--t-small)/var(--u) var(--mono);color:var(--mute)}
article .side ol{list-style:none;margin:0;padding:0}
article .side li{position:absolute;left:0;right:0;overflow-wrap:anywhere;padding-left:0}
article .side li::before{content:none}
/* related: no line, labels beside the links, gap u×4 */
article>dl{grid-column:1 / span 19;display:grid;grid-template-columns:calc((100% - 18 * var(--h)) / 19 * 3 + 2 * var(--h)) 1fr;column-gap:var(--h);margin:calc(var(--u) * 4) 0 0}
article>dl dt{color:var(--mute)}
article>dl dd{margin:0;font-family:var(--sans)}
article>dl ul{margin:0}
article>dl li{display:inline;margin-right:1em;padding-left:0}
article>dl li::before{content:none}
article>dl li.w{display:block;margin-right:0}
@media (max-width:700px){article .body,article>dl{grid-column:1 / -1}article>dl{grid-template-columns:5em 1fr}article .side{grid-column:1 / -1;grid-row:auto;margin-top:var(--u)}article .side li{position:static;margin-bottom:var(--b)}}

footer{margin-top:calc(var(--u) * 8);color:var(--mute)}
footer span{grid-column:span 12}