/*
 * ranma.masshiro.pro. Every measurement here is the design handoff's
 * (doc/handoffs/website/Main.dc.html), transcribed as the literal it was:
 * the handoff's spacing is hand-set (a 28px pane top, 18px gutters, 13.5px
 * code), not a scale, and rounding it onto one would redraw the page. The
 * frame test (e2e/frame.spec.mjs) pins them; doc/WEBSITE.md says why.
 *
 * The palette is sumi, the theme behind the README's screenshot
 * (doc/examples/screenshot/themes/sumi.toml): ink, washi and hinoki, with a
 * light variant whose wood is darkened for text so it passes 4.5:1.
 */

@font-face {
	font-family: 'IBM Plex Sans';
	src: url('fonts/ibm-plex-sans.7653dd926f.woff2') format('woff2');
	font-weight: 400 600;
	font-display: swap;
}
@font-face {
	font-family: 'JetBrains Mono';
	src: url('fonts/jetbrains-mono.df6053af45.woff2') format('woff2');
	font-weight: 400 700;
	font-display: swap;
}
@font-face {
	font-family: 'JetBrains Mono';
	src: url('fonts/jetbrains-mono-italic.8b989bbf1d.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Shippori Mincho';
	src: url('fonts/shippori-mincho-ranma.6677ce8cb6.woff2') format('woff2');
	font-weight: 600;
	font-display: block;
	unicode-range: U+6B04, U+9593;
}

:root {
	color-scheme: dark;
	--bg: #141317;
	--bg2: #1a191c;
	--panel: #1f1d1f;
	--pill: #2a2724;
	--code-bg: #18171a;
	--rule: #3a3631;
	--rule-strong: #57514a;
	--text: #e8e1d3;
	--dim: #a89f90;
	--faint: #6e665c;
	--wood: #d9a55b;
	--wood-text: #d9a55b;
	--wood-btn: #d9a55b;
	--on-wood: #141317;
	--ai: #7b93c9;
	--shu: #e0533d;
	--shu-text: #ee7a66;
	--kw: #8fa5d6;
	--str: #a9bf86;
	--num: #e8a87c;
	--comment: #8a8173;
	--screen: #141317;
	--sans: 'IBM Plex Sans', system-ui, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, monospace;
	--mincho: 'Shippori Mincho', serif;
}

/* The light palette, by the system's choice unless the toggle chose dark. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme='dark']) {
		color-scheme: light;
		--bg: #f3eee3;
		--bg2: #ebe4d6;
		--panel: #e9e2d3;
		--pill: #e3dbca;
		--code-bg: #f8f5ee;
		--rule: #d4c9b5;
		--rule-strong: #b3a690;
		--text: #1d1b1f;
		--dim: #5c544a;
		--faint: #9a8f7d;
		--wood: #b8843a;
		--wood-text: #83561a;
		--wood-btn: #83561a;
		--on-wood: #fffaf0;
		--ai: #3d5794;
		--shu: #b3381f;
		--shu-text: #a33219;
		--kw: #3d5794;
		--str: #4f6a2a;
		--num: #9a4a16;
		--comment: #7a705f;
	}
}
:root[data-theme='light'] {
	color-scheme: light;
	--bg: #f3eee3;
	--bg2: #ebe4d6;
	--panel: #e9e2d3;
	--pill: #e3dbca;
	--code-bg: #f8f5ee;
	--rule: #d4c9b5;
	--rule-strong: #b3a690;
	--text: #1d1b1f;
	--dim: #5c544a;
	--faint: #9a8f7d;
	--wood: #b8843a;
	--wood-text: #83561a;
	--wood-btn: #83561a;
	--on-wood: #fffaf0;
	--ai: #3d5794;
	--shu: #b3381f;
	--shu-text: #a33219;
	--kw: #3d5794;
	--str: #4f6a2a;
	--num: #9a4a16;
	--comment: #7a705f;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	scroll-padding-top: 72px;
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
a {
	color: inherit;
	text-underline-offset: 3px;
}
a:hover {
	text-decoration-thickness: 2px;
}
:focus-visible {
	outline: 2px solid var(--wood);
	outline-offset: 2px;
}
code,
kbd,
pre {
	font-family: var(--mono);
}
img,
video {
	max-width: 100%;
	height: auto;
}
[hidden] {
	display: none !important;
}
.dim {
	color: var(--dim);
}
.wood {
	color: var(--wood-text);
}
.mono-14 {
	font-family: var(--mono);
	font-size: 14px;
}
code.hi {
	color: var(--text);
}
.skip {
	position: absolute;
	left: 16px;
	top: -48px;
	z-index: 10;
	padding: 8px 12px;
	border-radius: 6px;
	background: var(--wood-btn);
	color: var(--on-wood);
}
.skip:focus {
	top: 8px;
}

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 16px;
	padding-right: 16px;
}

/* The bar: nav shaped like ranma's own bar, sections as workspaces. */
.bar {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--bg);
	border-bottom: 1px solid var(--rule);
}
.bar-nav {
	padding-top: 10px;
	padding-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	font-family: var(--mono);
	font-size: 14px;
}
.pill {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--pill);
	color: var(--text);
	text-decoration: none;
}
.pill-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 14px;
	color: var(--wood-text);
	font-weight: 700;
}
.workspaces {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 3px;
	border-radius: 999px;
	background: var(--pill);
}
.workspaces a {
	padding: 2px 12px;
	border-radius: 999px;
	color: var(--text);
	text-decoration: none;
}
.workspaces a[aria-current] {
	background: var(--wood);
	color: var(--on-wood);
	font-weight: 700;
}
.spacer {
	flex: 1 1 0;
	min-width: 0;
}
.theme-toggle {
	min-height: 32px;
	border: 0;
	font: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Hero */
.hero {
	padding-top: 72px;
	padding-bottom: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px 64px;
	align-items: flex-end;
}
.hero-lead {
	flex: 999 1 560px;
	min-width: 0;
}
.eyebrow {
	margin: 0 0 18px;
	font-family: var(--mono);
	font-size: 14px;
	color: var(--dim);
	letter-spacing: 0.02em;
}
h1 {
	margin: 0;
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1.04;
	font-weight: 600;
	letter-spacing: -0.025em;
	max-width: 14ch;
}
.lede {
	margin: 24px 0 0;
	font-size: 20px;
	line-height: 1.55;
	color: var(--dim);
	max-width: 40em;
}
.hero-name {
	flex: 1 1 280px;
	min-width: 0;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.kanji {
	font-family: var(--mincho);
	font-weight: 600;
	font-size: 64px;
	line-height: 1;
	writing-mode: vertical-rl;
	color: var(--wood-text);
}
.hero-name p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--dim);
}
.hero-name strong {
	color: var(--text);
	font-weight: 600;
}

/* The one-liner, here and again at Install */
.oneliner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 8px 8px 20px;
	border: 1px solid var(--rule);
	border-radius: 10px;
	background: var(--code-bg);
	font-family: var(--mono);
	font-size: 15px;
}
.oneliner code,
.channel-cmd code {
	flex: 1 1 0;
	min-width: 0;
	overflow-x: auto;
	white-space: pre;
	padding: 8px 0;
}
.prompt {
	color: var(--wood-text);
}
.oneliner-big {
	margin-top: 24px;
	border: 2px solid var(--wood);
	font-size: 16px;
}
.oneliner-big .btn-wood {
	font-size: 15px;
}
.oneliner-note {
	margin: 12px 0 0;
	font-size: 15px;
	color: var(--dim);
}
.btn-wood {
	flex: none;
	min-height: 44px;
	min-width: 88px;
	padding: 0 16px;
	border-radius: 7px;
	border: 0;
	background: var(--wood-btn);
	color: var(--on-wood);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.btn-line {
	flex: none;
	min-height: 40px;
	min-width: 72px;
	padding: 0 12px;
	border-radius: 6px;
	border: 1px solid var(--rule-strong);
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}
.btn-mono {
	min-width: 96px;
	font-family: var(--mono);
}

/* The doorway: lattice above, demo below */
.demo {
	padding-top: 56px;
}
.doorway {
	border: 2px solid var(--wood);
	border-radius: 14px;
	overflow: hidden;
	background: var(--bg2);
}
.transom {
	color: var(--wood);
	border-bottom: 2px solid var(--wood);
	height: 88px;
}
.transom svg,
.foot-lattice svg {
	display: block;
}
.demo-video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--screen);
}
.chapters {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--mono);
	font-size: 13px;
}
.chapters a {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	min-height: 36px;
	padding: 4px 12px;
	border: 1px solid var(--rule);
	border-radius: 999px;
	text-decoration: none;
	color: var(--text);
}
.chapters a[aria-current] {
	border-color: var(--wood);
}

/* Sections */
h2 {
	margin: 0;
	font-size: 34px;
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.015em;
}
.section {
	padding-top: 112px;
}
.intro {
	margin: 12px 0 0;
	color: var(--dim);
	max-width: 40em;
}
.intro.wide {
	max-width: 44em;
}
.intro a {
	color: var(--text);
}

/* A pane, drawn as ranma draws one: a rounded border, its title on the top
 * edge, the focused one in hinoki. */
.pane {
	position: relative;
	border: 1px solid var(--rule);
	border-radius: 10px;
	padding: 32px 24px 24px;
}
.pane-title {
	position: absolute;
	top: -0.8em;
	left: 14px;
	padding: 0 6px;
	background: var(--bg);
	font-family: var(--mono);
	font-size: 14px;
	line-height: 1.6;
	color: var(--dim);
}
.pane-focus {
	border-color: var(--wood);
}
.pane-focus > .pane-title {
	color: var(--wood-text);
	font-weight: 500;
}
.pane-shu {
	border-color: var(--shu);
}
.pane-shu > .pane-title {
	color: var(--shu-text);
	font-weight: 500;
}

/* First steps: the keys */
.section-keys {
	padding-top: 96px;
}
.keys {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 64px;
}
.keys-intro {
	flex: 1 1 320px;
	min-width: 0;
	max-width: 420px;
}
.keys-intro p {
	margin: 16px 0 0;
	color: var(--dim);
}
.keys-intro p:first-of-type {
	margin-top: 20px;
}
.keys-intro strong {
	color: var(--text);
}
.keys-intro code {
	font-size: 0.9em;
}
kbd {
	font-size: 0.85em;
	padding: 0 10px;
	border: 1px solid var(--rule);
	border-bottom-width: 3px;
	border-radius: 8px;
	background: var(--panel);
	color: var(--wood-text);
}
.keys-pane {
	flex: 999 1 520px;
	min-width: 0;
	padding: 28px 24px 20px;
}
.keys-pane dl {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 12px 32px;
}
.keys-pane dl > div {
	display: flex;
	gap: 14px;
	align-items: baseline;
}
.keys-pane dt {
	flex: none;
	width: 128px;
	font-family: var(--mono);
	font-size: 14px;
	color: var(--wood-text);
}
.keys-pane dd {
	margin: 0;
	font-size: 15px;
	color: var(--text);
}

/* Features */
.grid-480 {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
	gap: 40px 32px;
}
.features > article {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
.features h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
}
.features p {
	margin: 0;
	color: var(--dim);
}
.features code {
	font-size: 0.9em;
}
.layouts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: 12px;
	margin-top: 4px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--dim);
}
.layouts figure {
	margin: 0;
}
.layouts figcaption {
	margin-top: 6px;
}
.mini {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 4px;
	background: var(--bg2);
}
.mini i {
	position: absolute;
	top: 5%;
	height: 90%;
	border: 1.5px solid var(--rule-strong);
	border-radius: 3px;
}
.mini-dwindle i:nth-child(1) {
	left: 3%;
	width: 46%;
	border-color: var(--wood);
}
.mini-dwindle i:nth-child(2) {
	left: 51%;
	width: 46%;
	height: 43%;
}
.mini-dwindle i:nth-child(3) {
	left: 51%;
	top: 52%;
	width: 22%;
	height: 43%;
}
.mini-dwindle i:nth-child(4) {
	left: 75%;
	top: 52%;
	width: 22%;
	height: 43%;
}
.mini-tabbed i:nth-child(-n + 3) {
	height: 14%;
	width: 30%;
	border: 0;
	border-radius: 2px;
	background: var(--rule-strong);
}
.mini-tabbed i:nth-child(1) {
	left: 3%;
	background: var(--ai);
}
.mini-tabbed i:nth-child(2) {
	left: 35%;
}
.mini-tabbed i:nth-child(3) {
	left: 67%;
}
.mini-tabbed i:nth-child(4) {
	left: 3%;
	top: 23%;
	width: 94%;
	height: 72%;
	border-color: var(--wood);
}
.mini-floating i:nth-child(1) {
	left: 3%;
	width: 46%;
}
.mini-floating i:nth-child(2) {
	left: 51%;
	width: 46%;
}
.mini-floating i:nth-child(3) {
	left: 24%;
	top: 24%;
	width: 52%;
	height: 54%;
	border: 3px double var(--ai);
	background: var(--bg2);
}
.mini-scratchpad i:nth-child(1) {
	left: 3%;
	width: 94%;
	border-color: var(--rule);
	opacity: 0.6;
}
.mini-scratchpad i:nth-child(2) {
	left: 14%;
	top: 0;
	width: 72%;
	height: 52%;
	border-color: var(--wood);
	border-top: 0;
	border-radius: 0 0 3px 3px;
	background: var(--bg2);
}
.mini-scrolling {
	overflow: hidden;
}
.mini-scrolling i:nth-child(1) {
	left: -18%;
	width: 32%;
}
.mini-scrolling i:nth-child(2) {
	left: 17%;
	width: 48%;
	border-color: var(--wood);
}
.mini-scrolling i:nth-child(3) {
	left: 68%;
	width: 48%;
}
.shot {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--rule);
	background: var(--screen);
}
.bar-shot {
	border-radius: 6px;
	overflow: hidden;
	background: var(--screen);
	border: 1px solid var(--rule);
}
.bar-shot img {
	display: block;
	width: 100%;
	object-fit: cover;
}
.bar-strip {
	aspect-ratio: 2560 / 110;
	object-position: top left;
}
.bar-detail {
	aspect-ratio: 2560 / 420;
	object-position: 100% 6%;
	opacity: 0.9;
}
.features .caption {
	font-family: var(--mono);
	font-size: 12px;
}
.mobile-row {
	display: flex;
	gap: 16px;
	align-items: stretch;
}
.phone-shot {
	width: auto;
	height: 240px;
	border-radius: 14px;
	border: 1px solid var(--rule);
}
.plugins {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	align-items: baseline;
	padding: 20px 24px;
	border-radius: 10px;
	background: var(--panel);
}
.plugins h3 {
	margin: 0;
	font-family: var(--mono);
	font-size: 15px;
	font-weight: 700;
	color: var(--wood-text);
}
.plugins p {
	margin: 0;
	flex: 1 1 420px;
	color: var(--dim);
	font-size: 16px;
}
.plugins a,
.plugins code {
	color: var(--text);
}
.plugins code {
	font-size: 0.9em;
}

/* Config */
.code-files {
	font-family: var(--mono);
	font-size: 13.5px;
	line-height: 1.7;
}
.code-file {
	margin: 0;
	padding: 0;
	background: var(--code-bg);
	min-width: 0;
}
.code-scroll {
	overflow-x: auto;
	padding: 24px 20px 20px;
	display: flex;
	gap: 18px;
}
.code-scroll pre {
	margin: 0;
	font: inherit;
	color: var(--text);
}
.gutter {
	text-align: right;
	color: var(--faint) !important;
	user-select: none;
}
.t-api {
	color: var(--wood-text);
}
.t-str {
	color: var(--str);
}
.t-kw {
	color: var(--kw);
}
.t-num {
	color: var(--num);
}
.t-comment {
	color: var(--comment);
	font-style: italic;
}
.t-table {
	color: var(--wood-text);
	font-weight: 700;
}
.t-faint {
	color: var(--faint);
}
.swatch {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	border-radius: 2px;
	vertical-align: -0.05em;
}
.swatch-edge {
	outline: 1px solid var(--rule);
}
.config-notes {
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	font-size: 15px;
	color: var(--dim);
}
.config-notes p {
	margin: 0;
}

/* Why not */
.others {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}
.other {
	padding: 24px;
	border-radius: 10px;
	background: var(--panel);
}
.other h3 {
	margin: 0 0 10px;
	font-family: var(--mono);
	font-size: 16px;
	font-weight: 700;
}
.other p {
	margin: 0;
	font-size: 16px;
	color: var(--dim);
}
.other ul {
	margin: 12px 0 0;
	padding-left: 18px;
	font-size: 15px;
	color: var(--dim);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.refuses {
	margin-top: 40px;
}
.refuses ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 14px 40px;
	font-size: 16px;
}
.refuses strong {
	font-weight: 600;
}
.refuses li span,
.refuses-note {
	color: var(--dim);
}
.refuses-note {
	margin: 20px 0 0;
	font-size: 15px;
}
.refuses-note a {
	color: var(--text);
}

/* Install */
.install-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 20px;
}
.intro code {
	font-size: 0.9em;
}
.channels-h {
	margin: 48px 0 0;
	font-size: 20px;
	font-weight: 600;
}
.channels-note {
	margin: 6px 0 0;
	font-size: 15px;
	color: var(--dim);
}
.channels {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	border-top: 1px solid var(--rule);
}
.channels li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	padding: 12px 0;
	border-bottom: 1px solid var(--rule);
}
.channel-name {
	flex: 0 1 240px;
	min-width: 180px;
}
.channel-name > div:first-child {
	font-weight: 600;
	font-size: 16px;
}
.channel-name .dim {
	font-size: 13px;
}
.channel-cmd {
	flex: 999 1 420px;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 4px 4px 16px;
	border-radius: 8px;
	background: var(--code-bg);
	font-family: var(--mono);
	font-size: 14px;
}
.repos {
	margin-top: 40px;
}
.repo {
	margin: 0;
	padding: 0;
	background: var(--code-bg);
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.repo > .pane-title {
	color: var(--text);
	font-weight: 500;
}
.repo pre {
	margin: 0;
	padding: 26px 20px 12px;
	overflow-x: auto;
	font-size: 13px;
	line-height: 1.75;
	color: var(--text);
}
.repo-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 0 12px 12px 20px;
	margin-top: auto;
}
.repo-foot span {
	font-size: 13px;
}
.then {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 24px 40px;
	font-size: 15px;
	color: var(--dim);
}
.then h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
}
.then p {
	margin: 0;
}
.then a {
	color: var(--text);
}

/* Footer: a thin transom to close */
.foot {
	margin-top: 112px;
	border-top: 2px solid var(--wood);
	background: var(--bg2);
}
.foot-lattice {
	color: var(--wood);
	height: 24px;
	border-bottom: 1px solid var(--rule);
}
.foot-body {
	padding-top: 40px;
	padding-bottom: 48px;
	display: flex;
	flex-wrap: wrap;
	gap: 32px 64px;
	font-size: 15px;
}
.foot-about {
	flex: 1 1 260px;
	min-width: 0;
}
.foot-about p {
	margin: 8px 0 0;
	color: var(--dim);
}
.foot-about a {
	color: var(--text);
}
.foot-about .foot-name {
	margin: 0;
	font-family: var(--mono);
	font-weight: 700;
	color: var(--wood-text);
}
.foot-name span {
	font-family: var(--mincho);
}
.foot-links {
	flex: 2 1 480px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 4px 24px;
	font-family: var(--mono);
	font-size: 14px;
}
.foot-links a {
	padding: 8px 0;
	color: var(--text);
}

/* The theme excerpt's swatches (build.mjs) */
.sw-3a3631{background:#3a3631}
.sw-6e665c{background:#6e665c}
.sw-7b93c9{background:#7b93c9}
.sw-d9a55b{background:#d9a55b}
.sw-e0533d{background:#e0533d}
.sw-e8e1d3{background:#e8e1d3}