:root{
	--bg:#ffffff;
	--panel:#ffffff;
	--text:#282c34;
	--muted:#445c4d;
	--border:rgba(40,44,52,.10);
	--shadow:0 18px 60px rgba(40,44,52,.12);
	--accent:#678674;
	--radius:26px;
	--tag1:#e8ebef;
	--tag2:#e3e8e6;
	--tag3:#f3f4f6;
	--tag4:#e5dade;
	--tag5:#e8e5e0;
	--tag6:#ebedea;
	--tagAll:#f3f4f6;
}

@media (prefers-color-scheme: dark){
	:root{
		--bg:#000000;
		--panel:#1c1c1e;
		--text:#f2f2f7;
		--muted:#a2a2a6;
		--border:rgba(242,242,247,.12);
		--shadow:0 18px 60px rgba(0,0,0,.55);
		--accent:#85a593;
		--tag1:#2e303d;
		--tag2:#2e3833;
		--tag3:#303342;
		--tag4:#403038;
		--tag5:#40382b;
		--tag6:#2e3d36;
		--tagAll:#303342;
	}
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:"DM Sans", ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji";
	line-height:1.35;
	letter-spacing:-.01em;
}

body.modalOpen{
	overflow:hidden;
}

a{color:inherit;text-decoration:none}

.wrap{
	max-width:1180px;
	margin:0 auto;
	padding:28px 18px 56px;
	min-height:100vh;
	display:flex;
	flex-direction:column;
}

@media (max-width: 560px){
	.wrap{
		padding:18px 14px 40px;
	}
}

.wrap > #grid{
	flex:1 0 auto;
}

.wrap > #empty{
	flex:1 0 auto;
}

.topbar{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:18px;
	margin-bottom:20px;
}

.brand{
	display:flex;
	flex-direction:column;
	gap:6px;
	min-width:0;
}

.brand .kicker{
	font-size:12px;
	color:var(--muted);
	letter-spacing:.10em;
	text-transform:uppercase;
	font-family:"Space Grotesk", "DM Sans", ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;
}

.brand h1{
	margin:0;
	font-size:28px;
	line-height:1.05;
	letter-spacing:-.03em;
	font-family:"Space Grotesk", "DM Sans", ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.actions{
	display:flex;
	gap:10px;
	align-items:center;
}

.pill{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:10px 12px;
	border:1px solid var(--border);
	border-radius:999px;
	background:rgba(255,255,255,.70);
	backdrop-filter:blur(12px);
	box-shadow:0 10px 36px rgba(40,44,52,.08);
	color:var(--muted);
	font-size:13px;
}

@media (prefers-color-scheme: dark){
	.pill{
		background:rgba(28,28,30,.72);
		box-shadow:0 10px 36px rgba(0,0,0,.45);
	}
}

.grid{
	--cols:4;
	--row:116px;
	display:grid;
	grid-template-columns:repeat(var(--cols), minmax(0, 1fr));
	grid-auto-rows:var(--row);
	gap:14px;
}

@media (max-width: 560px){
	.grid{
		--row:88px;
		gap:10px;
	}
}

.tile{
	position:relative;
	border-radius:var(--radius);
	background:var(--panel);
	overflow:hidden;
	cursor:pointer;
	min-height:0;
	height:100%;
	transform:translateZ(0);
	transition:transform .18s ease, filter .18s ease;
}

.tile:hover{
	transform:translateY(-2px);
	filter:brightness(0.985);
}

.tileBg{
	position:absolute;
	inset:0;
	background-size:cover;
	background-position:center;
	filter:saturate(1.05) contrast(1.02);
}

.tileBg::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.35) 100%);
	opacity:1;
}

@media (prefers-color-scheme: dark){
	.tileBg::after{
		background:linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.40) 100%);
	}
}

.tileContent{
	position:relative;
	display:flex;
	flex-direction:column;
	gap:10px;
	padding:16px;
	height:100%;
}

@media (max-width: 560px){
	.tileContent{
		padding:12px;
		gap:8px;
	}
}

@media (max-width: 420px){
	.tileContent{
		padding:10px;
		gap:7px;
	}
	.emoji{
		font-size:22px;
	}
	.tileTitle h2{
		font-size:15px;
		line-height:1.18;
	}
}

.tileHeader{
	display:flex;
	gap:10px;
	align-items:flex-start;
	min-width:0;
}

.tile.tile1x1 .tileHeader{
	flex-direction:column;
	gap:6px;
}

.emoji{
	font-size:clamp(20px, calc(var(--row, 110px) * 0.27), 30px);
	line-height:1;
	flex:0 0 auto;
}

.tileTitle{
	display:flex;
	flex-direction:column;
	gap:4px;
	min-width:0;
	flex:1 1 auto;
}

.tileTitle h2{
	margin:0;
	font-size:clamp(13px, calc(var(--row, 110px) * 0.18), 18px);
	font-weight:600;
	line-height:1.12;
	letter-spacing:-.02em;
	padding-bottom:1px;
	overflow-wrap:anywhere;
	hyphens:auto;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

.tile.tile1x1 .tileTitle h2{
	display:block;
	-webkit-line-clamp:unset;
	-webkit-box-orient:unset;
	overflow:visible;
}

.tileCount{
	margin-top:auto;
	font-size:14px;
	color:rgba(255,255,255,.85);
	letter-spacing:-.01em;
}

@media (max-width: 560px){
	.tileCount{
		font-size:13px;
	}
}

.tile.noImage .tileTitle h2{
	color:var(--text);
}

.tile.noImage .tileCount{
	color:var(--muted);
}

.tile:not(.noImage) .tileTitle h2{color:#fff}

.footer{
	margin-top:auto;
	padding-top:22px;
	color:var(--muted);
	font-size:13px;
	display:flex;
	gap:6px;
	align-items:center;
	justify-content:center;
}

.footerLink{
	color:var(--accent);
	font-weight:600;
}

.modalOverlay{
	position:fixed;
	inset:0;
	background:rgba(2,6,23,.62);
	backdrop-filter:blur(10px);
	display:none;
	align-items:center;
	justify-content:center;
	padding:12px;
	z-index:50;
	overscroll-behavior:contain;
}

.modalOverlay.open{display:flex}

.sheet{
	width:min(1280px, 96vw);
	max-height:94vh;
	border-radius:26px;
	background:var(--panel);
	border:1px solid var(--border);
	box-shadow:var(--shadow);
	overflow:hidden;
	display:flex;
	flex-direction:column;
}

.sheetHeader{
	padding:16px 18px;
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
	border-bottom:1px solid var(--border);
}

.sheetHeaderActions{
	display:flex;
	gap:10px;
	align-items:center;
}

.sheetHeader h3{
	margin:0;
	font-size:18px;
	letter-spacing:-.02em;
}

.sheetHeader .meta{
	margin-top:4px;
	font-size:13px;
	color:var(--muted);
}

.navBar{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:4px;
}

.backLink{
	align-self:flex-start;
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:13px;
	color:var(--muted);
	text-decoration:none;
	padding:6px 12px;
	margin-bottom:2px;
	border:1px solid var(--border);
	border-radius:999px;
	transition:background .18s ease, color .18s ease, border-color .18s ease;
}

.backLink:hover{
	background:rgba(103,134,116,.10);
	border-color:rgba(103,134,116,.25);
	color:var(--text);
}

.detail{
	margin-top:6px;
}

.detailHead{
	margin:2px 0 14px;
}

.detailHead h2{
	margin:0;
	font-size:24px;
	line-height:1.1;
	letter-spacing:-.02em;
	font-family:"Space Grotesk", "DM Sans", ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;
}

.detailHead .meta{
	margin-top:6px;
	font-size:13px;
	color:var(--muted);
}

.btn{
	border:1px solid var(--border);
	background:transparent;
	color:var(--muted);
	border-radius:999px;
	padding:8px 10px;
	cursor:pointer;
	transition:background .18s ease, color .18s ease, border-color .18s ease;
}

.btn:hover{
	background:rgba(103,134,116,.10);
	border-color:rgba(103,134,116,.25);
	color:var(--text);
}

.sheetBody{
	padding:14px 18px 18px;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}

.noteCards{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:12px;
}

@media (max-width:720px){
	.noteCards{grid-template-columns:1fr}
}

.noteCard{
	border-radius:18px;
	border:1px solid var(--border);
	background:linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.62));
	padding:14px 14px 12px;
	cursor:pointer;
	transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

@media (prefers-color-scheme: dark){
	.noteCard{
		background:linear-gradient(180deg, rgba(2,6,23,.42), rgba(2,6,23,.30));
	}
}

.noteCard:hover{
	transform:translateY(-2px);
	border-color:rgba(103,134,116,.25);
	box-shadow:0 14px 46px rgba(40,44,52,.12);
}

.noteCardTitle{
	font-size:14px;
	font-weight:650;
	letter-spacing:-.02em;
	margin:0 0 8px;
}

.noteCardPreview{
	color:var(--muted);
	font-size:13px;
	margin:0;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

.reader{
	max-width:760px;
	margin:0 auto;
	padding:2px 0 8px;
}

.block{
	margin:10px 0;
	white-space:pre-wrap;
	word-break:break-word;
}

.block.title{font-size:26px;font-weight:750;letter-spacing:-.03em;margin-top:8px}
.block.description{font-size:16px;color:var(--muted);margin-top:6px}
.block.h3{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-top:16px}
.block.h4{font-size:16px;font-weight:700;margin-top:14px}
.block.h5{font-size:15px;font-weight:700;margin-top:12px}
.block.h6{font-size:14px;font-weight:700;margin-top:12px;text-transform:uppercase;letter-spacing:.06em}
.block.code{
	font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
	font-size:13px;
	padding:12px 12px;
	border-radius:14px;
	border:1px solid var(--border);
	background:rgba(2,6,23,.04);
	overflow:auto;
}

@media (prefers-color-scheme: dark){
	.block.code{background:rgba(226,232,240,.06)}
}

.divider{
	border:0;
	border-top:1px solid var(--border);
	height:0;
	margin:16px 0;
}

.mdLink{
	color:var(--accent);
	text-decoration:underline;
	text-underline-offset:2px;
	word-break:break-word;
}

.mdLink:hover{
	text-decoration-thickness:2px;
}

.mdList{
	margin:8px 0;
	padding-left:22px;
}

.mdList li{
	margin:4px 0;
}

.mdCode{
	font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
	font-size:.9em;
	padding:1px 5px;
	border-radius:6px;
	background:rgba(2,6,23,.06);
}

@media (prefers-color-scheme: dark){
	.mdCode{background:rgba(226,232,240,.10)}
}

.media{
	border-radius:18px;
	border:1px solid var(--border);
	overflow:hidden;
	background:rgba(15,23,42,.04);
	margin:12px 0;
}

.media img{
	width:100%;
	height:auto;
	display:block;
}

.stopCard{
	margin:12px 0;
	border-radius:18px;
	border:1px solid var(--border);
	background:rgba(103,134,116,.06);
	padding:14px 14px 12px;
}

@media (prefers-color-scheme: dark){
	.stopCard{
		background:rgba(133,165,147,.10);
	}
}

.stopHead{
	display:flex;
	gap:10px;
	align-items:flex-start;
}

.stopPin{
	font-size:20px;
	line-height:1.1;
	flex:0 0 auto;
}

.stopTitleWrap{
	min-width:0;
	flex:1 1 auto;
}

.stopTitle{
	font-size:15px;
	font-weight:650;
	letter-spacing:-.02em;
	overflow-wrap:anywhere;
}

.stopAddress{
	margin-top:2px;
	font-size:13px;
	color:var(--muted);
	overflow-wrap:anywhere;
}

.stopWhen{
	margin-top:8px;
	font-size:12px;
	color:var(--muted);
}

.stopMapLink{
	display:inline-block;
	margin-top:10px;
	font-size:13px;
	font-weight:600;
	color:var(--accent);
}

.stopMapLink:hover{
	text-decoration:underline;
}

.empty{
	padding:60px 18px;
	text-align:center;
	color:var(--muted);
}

.empty strong{color:var(--text)}