/* the same paper as the landing page, but the letter is cut into slips of pastel and laid on the table */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } :root { color-scheme: light dark; --paper: #fbf6ee; --ink: #4a3f37; --ink-soft: #7d6d5f; --apricot: #f0a26a; --glow: rgba(245, 190, 130, 0.28); --code: rgba(74, 63, 55, 0.07); --font: 'Nunito', 'Zen Maru Gothic', -apple-system, system-ui, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --ease: cubic-bezier(.2, .8, .2, 1); /* pastels: a slip colour and a deeper ink of the same hue for its title */ --sakura: #fce4ea; --sakura-ink: #9c4159; --tamago: #fdf0cc; --tamago-ink: #7f5e0c; --sora: #dfeaf8; --sora-ink: #3d6491; --wakaba: #dcf0e2; --wakaba-ink: #2f7150; --fuji: #e9e3f6; --fuji-ink: #674d9a; --momo: #fbe4d4; --momo-ink: #924d22; --hai: #ebe7e1; --hai-ink: #6e6459; } @media (prefers-color-scheme: dark) { :root { --paper: #25211d; --ink: #efe6da; --ink-soft: #b3a494; --apricot: #f0a874; --glow: rgba(240, 168, 116, 0.14); --code: rgba(239, 230, 218, 0.08); --sakura: #3a2a30; --sakura-ink: #f0a9bc; --tamago: #383021; --tamago-ink: #ecd07a; --sora: #262f3b; --sora-ink: #a4c4ea; --wakaba: #24332a; --wakaba-ink: #9dd6b3; --fuji: #2f2a3b; --fuji-ink: #c6b4ee; --momo: #3a2c24; --momo-ink: #f0b58e; --hai: #2e2a26; --hai-ink: #b3a494; } } html { -webkit-text-size-adjust: 100%; } body { background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.75; min-height: 100svh; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: .18em; border-radius: 3px; transition: text-decoration-color 160ms var(--ease); } a:hover { text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--apricot); outline-offset: 3px; border-radius: 6px; } .table { position: relative; max-width: 66rem; margin: 0 auto; padding: 4rem 1.5rem 5rem; } .table::before { content: ""; position: absolute; inset: -6rem auto auto -10rem; width: 34rem; height: 26rem; background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; z-index: -1; } .eyebrow { font-size: .85em; color: var(--ink-soft); } .title { font-size: 2.4rem; font-weight: 600; line-height: 1.2; margin-top: .3rem; } .gloss { font-size: .9em; color: var(--ink-soft); margin-top: .3rem; font-family: 'Zen Maru Gothic', var(--font); } .wish { font-size: 1.3rem; font-weight: 500; line-height: 1.5; margin-top: 1.8rem; max-width: 38rem; text-wrap: balance; } .status { margin-top: .8rem; font-size: .92em; color: var(--ink-soft); } .status b { font-weight: 600; color: var(--ink); background: linear-gradient(transparent 55%, var(--glow) 55%); padding: 0 .15em; } /* the table: three columns, slips span as they need */ .slips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.6rem; } .slip { --tint: var(--hai); --hue: var(--hai-ink); background: var(--tint); border-radius: 14px; padding: 1.25rem 1.35rem 1.4rem; min-width: 0; } .slip.wide { grid-column: span 2; } .slip.full { grid-column: 1 / -1; } .slip.sakura { --tint: var(--sakura); --hue: var(--sakura-ink); } .slip.tamago { --tint: var(--tamago); --hue: var(--tamago-ink); } .slip.sora { --tint: var(--sora); --hue: var(--sora-ink); } .slip.wakaba { --tint: var(--wakaba); --hue: var(--wakaba-ink); } .slip.fuji { --tint: var(--fuji); --hue: var(--fuji-ink); } .slip.momo { --tint: var(--momo); --hue: var(--momo-ink); } .slip-title { font-size: .85em; font-weight: 600; color: var(--hue); letter-spacing: .01em; margin-bottom: .55rem; } .slip p + p { margin-top: .7rem; } .slip b { font-weight: 600; color: var(--hue); } /* the stray cat, as CutterKnife drew it */ .head { display: flex; align-items: center; gap: 1.1rem; margin-top: .3rem; } .head .mark { flex: 0 0 auto; width: 4.2rem; height: 4.2rem; } .title { margin-top: 0; } pre { font-family: var(--mono); font-size: .8em; line-height: 1.55; background: var(--code); border-radius: 10px; padding: .9rem 1.1rem; overflow-x: auto; margin: .6rem 0 .8rem; } code { font-family: var(--mono); font-size: .9em; background: var(--code); padding: .05em .3em; border-radius: 4px; } pre code { background: none; padding: 0; font-size: 1em; } /* shiki(build のときに塗ってある)。色だけ借りて、紙はこちらのまま。 明暗は span ごとの --shiki-light / --shiki-dark から読む */ pre.shiki { background: var(--code); } pre.shiki, pre.shiki span { color: var(--shiki-light); } @media (prefers-color-scheme: dark) { pre.shiki, pre.shiki span { color: var(--shiki-dark); } } /* the drawing keeps its lines even on a narrow screen */ pre.wire { font-size: .76em; line-height: 1.3; white-space: pre; } pre .k { color: var(--hue); } .not { list-style: none; } .not li { padding: .15rem 0; } .not li::before { content: "·"; margin-right: .6em; color: var(--hue); } .inline-links { list-style: none; display: flex; flex-wrap: wrap; row-gap: .2em; } .inline-links li:not(:last-child)::after { content: "·"; margin: 0 .55em; color: var(--hue); } .go .status { color: var(--ink); opacity: .85; } .closing { margin-top: 2.5rem; font-size: .9em; color: var(--ink-soft); max-width: 38rem; } @media (max-width: 58rem) { .slips { grid-template-columns: repeat(2, 1fr); } .slip.wide { grid-column: 1 / -1; } .filegrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 36rem) { .head .mark { width: 3.2rem; height: 3.2rem; } .slips { grid-template-columns: 1fr; } .slip.wide, .slip.full { grid-column: auto; } .title { font-size: 2rem; } .filegrid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } } /* drops: a drop is a slip with its uuid and a button */ .uuid { font-family: var(--mono); font-size: .85em; background: var(--code); padding: .15em .45em; border-radius: 6px; word-break: break-all; } .btn { display: inline-block; text-decoration: none; font: inherit; font-weight: 600; color: var(--paper); background: var(--ink); border: 0; border-radius: 999px; padding: .55em 1.2em; cursor: pointer; transition: background 160ms var(--ease); } .btn:hover { background: var(--hue, var(--ink)); } .btn.quiet { color: var(--ink); background: var(--code); } .btn:disabled { opacity: .5; cursor: default; } .actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .9rem; } .actions .status { margin-top: 0; flex: 1 1 16rem; } .fact { display: block; font-size: .92em; color: var(--ink-soft); } .fact b { color: var(--ink); font-weight: 500; } .files summary { cursor: pointer; font-size: .92em; } .files summary .k { font-family: var(--mono); font-size: .9em; color: var(--ink-soft); } .files pre { margin-top: .5rem; max-height: 40rem; } /* file は面に置く: 名前だけが札になって格子に並び、開いた一枚だけが横いっぱいになる。 一覧としては二次元、読むときは一次元 — 読む字を狭い桁に押し込めない */ .filegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .8rem; align-items: start; } .filegrid details { margin: 0; padding: .45rem .6rem; border-radius: .5rem; background: color-mix(in srgb, var(--hue) 6%, transparent); } .filegrid details:hover { background: color-mix(in srgb, var(--hue) 11%, transparent); } .filegrid details[open] { grid-column: 1 / -1; background: color-mix(in srgb, var(--hue) 9%, transparent); } .filegrid summary { list-style: none; overflow-wrap: anywhere; } .filegrid summary::-webkit-details-marker { display: none; } .filegrid summary::before { content: "▸ "; color: var(--hue); } .filegrid details[open] > summary::before { content: "▾ "; } .filegrid .dir { opacity: .55; } /* 材料が届くまでの一行。届いたら、あとから来る