/* canneji — one design system for every page on the box.
Load it first, then a page's own stylesheet for layout:
Pages style themselves through these tokens; the primitives at the bottom
(.u-btn, .u-chip, .u-input, .u-card, .u-tag) exist so a button on the kanji
browser is the same object as a button on the news reader. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&family=Noto+Sans+JP:wght@400;500&display=swap');
:root{
color-scheme: light dark;
/* paper and ink */
--paper:#FBF6F8; /* page ground */
--surface:#FFFFFF; /* cards, inputs, bars */
--surface-2:#FCF0F5; /* quiet fills, notes */
--ink:#241A1F;
--ink-soft:#75636B;
--rule:#E8D6DE;
/* one accent, used for what you can act on */
--accent:#B01458;
--accent-ink:#8E0F46; /* accent as text on paper */
--accent-soft:#F7E3EC; /* accent as a fill behind ink */
/* meaning, not decoration */
--good:#1E7A4B;
--warn:#9A6212;
--bad:#B3261E;
--mark:#FFE9B8; /* search highlight */
--ruby:#9C7083; /* furigana */
/* type */
--ja:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
--ja-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
--ui:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
--read:1.05rem; /* reading size, pages may scale it */
/* spacing scale — use these, not arbitrary values */
--sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
--sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem;
/* shape */
--r-sm:6px; --r:8px; --r-lg:10px; --r-pill:999px;
--shadow:0 1px 2px rgba(36,26,31,.04), 0 4px 14px rgba(36,26,31,.04);
/* rhythm */
--col:56rem; /* page width */
--col-read:36rem; /* reading column */
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--paper:#151013; --surface:#1E1619; --surface-2:#241A20;
--ink:#F0E5EA; --ink-soft:#A8959D; --rule:#352830;
--accent:#F17BA7; --accent-ink:#F7A3C2; --accent-soft:#33202A;
--good:#5FBE8B; --warn:#D9A441; --bad:#E8776E;
--mark:#5A4512; --ruby:#BC93A4;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.25);
}
}
:root[data-theme="dark"]{
--paper:#151013; --surface:#1E1619; --surface-2:#241A20;
--ink:#F0E5EA; --ink-soft:#A8959D; --rule:#352830;
--accent:#F17BA7; --accent-ink:#F7A3C2; --accent-soft:#33202A;
--good:#5FBE8B; --warn:#D9A441; --bad:#E8776E;
--mark:#5A4512; --ruby:#BC93A4;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.25);
}
/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0; background:var(--paper); color:var(--ink);
font-family:var(--ui); font-size:15px; line-height:1.55;
padding-bottom:env(safe-area-inset-bottom,0px);
}
a{color:inherit}
button, select, input, textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}
mark{background:var(--mark); color:inherit; border-radius:2px; padding:0 .1em}
ruby{ruby-position:over}
rt{font-family:var(--ja); font-size:.48em; font-weight:400; color:var(--ruby); user-select:none}
/* ---------- primitives ---------- */
.u-btn{
display:inline-flex; align-items:center; gap:var(--sp-2); cursor:pointer;
padding:.4rem .8rem; border:1px solid var(--rule); border-radius:var(--r-sm);
background:var(--surface); color:var(--ink-soft); font-size:.82rem; text-decoration:none;
}
.u-btn:hover{border-color:var(--accent); color:var(--accent-ink)}
.u-btn[aria-pressed="true"], .u-btn--on{background:var(--accent); border-color:var(--accent); color:#fff}
.u-btn--accent{background:var(--accent); border-color:var(--accent); color:#fff}
.u-btn--accent:hover{filter:brightness(1.08); color:#fff}
.u-chip{
display:inline-flex; align-items:center; gap:var(--sp-2); flex:0 0 auto;
padding:.28rem .7rem; border:1px solid var(--rule); border-radius:var(--r-pill);
background:var(--surface); color:var(--ink); font-size:.8rem; text-decoration:none; white-space:nowrap;
}
.u-chip:hover{border-color:var(--accent)}
.u-chip[aria-current="true"], .u-chip--on{background:var(--accent-soft); border-color:var(--accent)}
.u-input{
width:100%; padding:.45rem .8rem; border:1px solid var(--rule); border-radius:var(--r-pill);
background:var(--surface); color:var(--ink); font-size:.9rem;
}
.u-input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.u-card{
background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
padding:var(--sp-3) var(--sp-4);
}
a.u-card{display:block; text-decoration:none; color:inherit}
a.u-card:hover{border-color:var(--accent)}
.u-tag{
display:inline-block; padding:.08rem .42rem; border-radius:var(--r-sm);
background:var(--accent-soft); color:var(--accent-ink);
font-family:var(--ui); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
}
.u-tag--quiet{background:transparent; border:1px solid var(--rule); color:var(--ink-soft)}
/* section label used across pages */
.u-label{
font-family:var(--ui); font-size:.68rem; font-weight:600; letter-spacing:.14em;
text-transform:uppercase; color:var(--accent); margin:0 0 var(--sp-2);
}
/* ---------- click-to-define (dict/lookup.js) ---------- */
/* The matched word, marked by rectangles laid over it — the article's own markup
is never rewritten, so a word crossing a boundary still marks cleanly.
One box per line; the run's two ends are the ones that get rounded. */
.jl-marks{position:absolute; inset:0 auto auto 0; z-index:55; pointer-events:none}
.jl-mark{
position:absolute; border-radius:2px;
background:color-mix(in srgb, var(--accent) 18%, transparent);
box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
0 1px 6px color-mix(in srgb, var(--accent) 14%, transparent);
animation:jl-mark-in .14s ease-out both;
mix-blend-mode:multiply; /* keeps the ink crisp under the tint on paper */
}
/* On a dark page multiply would darken a dark word into the background, so the
same trick has to lighten instead. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .jl-mark{mix-blend-mode:screen}
}
:root[data-theme="dark"] .jl-mark{mix-blend-mode:screen}
/* Only the true ends of the run are rounded: a piece that stops at a line break
keeps that edge square, so the mark reads as one word wrapping rather than two.
縦書き runs down a column, so its ends are the top and bottom ones. */
.jl-mark--start{border-top-left-radius:5px; border-bottom-left-radius:5px}
.jl-mark--end{border-top-right-radius:5px; border-bottom-right-radius:5px}
.jl-mark--start.jl-mark--end{border-radius:5px}
.jl-mark--v.jl-mark--start{border-radius:5px 5px 2px 2px}
.jl-mark--v.jl-mark--end{border-radius:2px 2px 5px 5px}
.jl-mark--v.jl-mark--start.jl-mark--end{border-radius:5px}
@keyframes jl-mark-in{
from{opacity:0; transform:scale(.96)}
to{opacity:1; transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){ .jl-mark{animation:none} }
.jl-pop{
position:absolute; z-index:60; max-width:22rem; min-width:13rem;
background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
box-shadow:var(--shadow); padding:var(--sp-3) var(--sp-4); font-family:var(--ui);
}
.jl-pop[hidden]{display:none}
.jl-pop b{font-family:var(--ja); font-size:1.15rem; font-weight:600; display:block}
.jl-pop .jl-r{font-family:var(--ja); color:var(--accent-ink); font-size:.92rem; display:block; margin-top:.1rem}
.jl-pop .jl-p{font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-top:.3rem}
.jl-pop .jl-g{margin:.5rem 0 0; padding-left:1.1rem; font-size:.88rem; line-height:1.5}
.jl-pop .jl-g li{margin:.15rem 0}
.jl-pop .jl-none{color:var(--ink-soft); font-size:.85rem; margin:.4rem 0 0}
/* the tapped run, when it differs from the dictionary form, and why */
.jl-pop .jl-s{font-family:var(--ja); color:var(--ink-soft); font-size:.9rem; margin-left:.4rem}
.jl-pop .jl-i{font-size:.72rem; color:var(--ink-soft); display:block; margin-top:.2rem; font-style:italic}
/* the other headwords that started where the reader tapped */
.jl-alts{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.6rem}
.jl-alt{font-family:var(--ja); font-size:.82rem; padding:.15rem .45rem; cursor:pointer;
border:1px solid var(--rule); border-radius:4px; background:transparent; color:var(--ink)}
.jl-alt:hover{border-color:var(--accent); color:var(--accent-ink)}
.jl-mine{margin-top:.7rem; width:100%; padding:.35rem; border:1px solid var(--rule);
border-radius:var(--r-sm); background:var(--surface); color:var(--accent-ink);
font-size:.78rem; cursor:pointer}
.jl-mine:hover{background:var(--accent); border-color:var(--accent); color:#fff}