/* =========================================================================
Study Desk · styles
-------------------------------------------------------------------------
This file has four layers. Work top to bottom:
1. TOKENS Every color, font, size and radius. To restyle the app,
start here. Nothing below should use a raw color.
2. BASE Defaults for plain HTML elements.
3. PRIMITIVES Reusable building blocks. Build new UI out of these:
.stack .cluster layout
.panel .sheet surfaces (panel = paper, sheet = grid paper)
.tape .label .hl .badge decoration
.fold collapsible block
.btn .seg .chip .choice controls
.field .iconbtn .linkish .star .pill
.small .center text helpers
Anything with an accent color reads it from --c, e.g.
M3
4. COMPONENTS Styles that only one part of the app needs. Keep these
short; they should mostly position and size primitives.
========================================================================= */
/* 1. TOKENS ============================================================== */
:root {
color-scheme: light;
/* surfaces, darkest to lightest: desk (page) → panel (cards, controls) → sheet (grid paper) */
--desk: #d6d0c4;
--desk-dot: #bfb7a8;
--panel: #ece8e0;
--sheet: #fbf9f4;
--sheet-grid: rgba(110, 145, 190, .16);
/* text and lines */
--ink: #33313a;
--muted: #625e69;
--on-color: #33313a; /* text placed on any pastel fill */
--line: #c8c1b3;
--line-strong: #b0a898;
/* accents */
--tomato: #e9887a; --tomato-deep: #c76959;
--matcha: #9cc493; --matcha-ink: #3f7a3a;
--sky: #a6c4e6; --sky-ink: #3f6f9f;
--butter: #f4da91;
--star: #eeb94a; --star-deep: #b5841c;
--sakura: #f3c6c8;
--lilac: #d3c6f0;
--bad-ink: #b0503e;
/* one color per section (M1–M7); new sections reuse these in order */
--m1: #f6cdd0; --m2: #f7dbbe; --m3: #f3e4a6; --m4: #cfe3bd;
--m5: #bfe1dc; --m6: #c7d7f1; --m7: #dbcff0;
/* type */
--f-display: "M PLUS Rounded 1c", "Zen Maru Gothic", ui-rounded, "Hiragino Maru Gothic ProN", system-ui, sans-serif;
--f-body: "Zen Maru Gothic", "M PLUS Rounded 1c", ui-rounded, system-ui, sans-serif;
--f-mono: ui-monospace, Menlo, Consolas, monospace;
/* spacing, corners, depth */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 30px;
--r-sm: 6px; --r: 14px; --r-lg: 20px; --r-pill: 999px;
--lift: 0 2px 0 var(--line-strong);
--hl: 80%; /* highlighter strength under terms */
}
/* 2. BASE ================================================================ */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
margin: 0;
background-color: var(--desk);
background-image: radial-gradient(var(--desk-dot) 1.1px, transparent 1.3px);
background-size: 22px 22px;
color: var(--ink);
font: 15px/1.55 var(--f-body);
}
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; text-wrap: balance; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--sky-ink); outline-offset: 2px; }
code { font-family: var(--f-mono); font-size: .86em; background: color-mix(in srgb, var(--sky) 32%, transparent); padding: 0 .3em; border-radius: 4px; overflow-wrap: anywhere; }
kbd { font: 700 11px var(--f-display); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); padding: 0 6px; margin-left: 6px; color: var(--muted); background: var(--sheet); }
/* 3. PRIMITIVES ========================================================== */
/* layout: .stack = vertical, .cluster = wrapping row. Set --gap to adjust. */
.stack { display: grid; gap: var(--gap, var(--s3)); align-content: start; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--s2)); }
/* surfaces */
.panel {
position: relative; background: var(--panel); border: 1.5px solid var(--line);
border-radius: var(--r-lg); padding: var(--s5) var(--s4) var(--s4);
}
.panel > h2 { font-size: 16px; margin: 0; display: flex; align-items: center; gap: var(--s2); }
.panel > h2 svg { width: 20px; height: 20px; }
.sheet {
position: relative; background-color: var(--sheet); border: 1.5px solid var(--line); border-radius: var(--r-lg);
background-image: linear-gradient(var(--sheet-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sheet-grid) 1px, transparent 1px);
background-size: 20px 20px; padding: 24px 28px 26px;
}
.dashed { border-style: dashed; border-color: var(--line-strong); }
/* washi tape: add --top (centered on the top edge) or --corner (top-left) */
.tape {
display: inline-block; width: 74px; height: 18px; flex: none;
background-color: var(--c, var(--m6));
background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.4) 0 5px, transparent 5px 11px);
clip-path: polygon(0 0, 100% 0, 96% 25%, 100% 50%, 96% 75%, 100% 100%, 0 100%, 4% 75%, 0 50%, 4% 25%);
opacity: .94; transform: rotate(-2deg);
}
.tape--top { position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 92px; }
.tape--corner { position: absolute; top: -8px; left: 16px; }
/* small uppercase heading with a tape-colored marker */
.label { font: 800 12px var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: var(--s2); }
.label::before { content: ""; width: 16px; height: 7px; border-radius: 2px; background: var(--c, var(--butter)); }
/* highlighter-pen underline, colored by --c */
.hl { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--c) var(--hl), transparent) 58%); padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* collapsible block: …
…