@font-face {
			font-family: "Inter";
			src: url("../fonts/InterVariable.woff2") format("woff2");
			font-style: normal;
			font-weight: 100 900;
			font-display: swap;
		}

		@font-face {
			font-family: "Inter";
			src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
			font-style: italic;
			font-weight: 100 900;
			font-display: swap;
		}

		:root {
			color-scheme: light dark;
			--bg: #ffffff;
			--fg: #101010;
			--line: #101010;
			--muted: #4a4a4a;
			--header-peek-height: 56px;
			--archive-single-max-width: 560px;
			--archive-single-focus-max-width: 980px;
			--archive-single-item-width: min(96vw, 520px);
			--archive-single-item-focus-width: min(96vw, 820px);
			--archive-single-item-min-height: clamp(220px, 52vh, 760px);
			--archive-single-text-min-height: clamp(160px, 32vh, 380px);
			--archive-single-text-focus-min-height: clamp(220px, 44vh, 560px);
			--archive-single-media-max-height: calc(100vh - 240px);
		}

		body.dark {
			--bg: #111111;
			--fg: #f3f3f3;
			--line: #f3f3f3;
			--muted: #bdbdbd;
		}

		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			font-family: Inter, sans-serif;
			background: var(--bg);
			color: var(--fg);
		}

		::selection {
			background: black;
			color: #4a4a4a;
		}

		::-moz-selection {
			background: black;
			color: #4a4a4a;
		}

		.hero {
			display: grid;
			gap: 12px;
			padding: 14px 14px 10px;
			border-bottom: 2px solid var(--line);
		}

		.hero-head {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			gap: 16px;
			flex-wrap: wrap;
		}

		body.header-peek .hero {
			border-bottom: 0;
			padding-bottom: 0;
		}

		body.header-peek .hero> :not(.hero-head) {
			display: none;
		}

		body.header-peek .hero-head {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 60;
			height: var(--header-peek-height);
			padding: 0 12px;
			align-items: center;
			background: var(--bg);
			border-bottom: 2px solid var(--line);
			transition: opacity 0.2s ease;
		}

		body.header-peek .topbar:not(.topbar-pagination):not(.topbar-compose) {
			top: var(--header-peek-height);
			transition: top 0.22s ease;
		}

		body.header-peek .hero-right {
			margin-left: auto;
		}

		body.header-peek .hero-actions {
			display: none;
		}

		.hero-right {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-left: auto;
			gap: 8px;
		}

		.hero-actions {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
			justify-content: flex-start;
		}

		.logo {
			font-weight: 700;
			font-size: clamp(16px, 2.6vw, 18px);
			letter-spacing: 0.01em;
		}

		.logo-link {
			text-decoration: none;
			color: inherit;
		}

		.fbo {
			font-weight: 700;
			font-size: clamp(14px, 2.2vw, 16px);
			letter-spacing: 0.08em;
			align-self: flex-end;
			text-align: right;
		}

		.fbo-link {
			text-decoration: none;
			color: inherit;
			cursor: default;
		}

		.fbo-link:visited,
		.fbo-link:hover,
		.fbo-link:active,
		.fbo-link:focus {
			text-decoration: none;
			color: inherit;
			outline: none;
		}

		.subtitle-line {
			font-size: clamp(12px, 2.1vw, 14px);
			color: var(--muted);
			line-height: 1.3;
		}

		.topbar {
			position: sticky;
			top: 0;
			z-index: 10;
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			align-items: center;
			padding: 10px 12px;
			background: var(--bg);
			border-bottom: 2px solid var(--line);
		}

		.topbar-pagination {
			position: static;
			margin-top: 6px;
		}

		.topbar-compose {
			position: static;
		}

		.ui-btn {
			color: #fff;
			text-decoration: none;
			border: 2px solid var(--line);
			background: var(--bg);
			color: var(--fg);
			padding: 6px 10px;
			font-size: 13px;
			line-height: 1.2;
			white-space: nowrap;
			border-radius: 0;
			box-shadow: none;
			cursor: pointer;
			transition: background-color 0.15s ease, color 0.15s ease;
		}

		.ui-btn-strong {
			font-weight: 700;
			border-width: 2px;
		}

		.ui-btn:hover,
		.ui-btn.active {
			background: var(--fg);
			color: var(--bg);
		}

		.meta {
			font-size: 12px;
			color: var(--muted);
			white-space: nowrap;
			cursor: pointer;
		}

		.page-jump {
			display: none;
		}

		.page-jump.open {
			display: block;
		}

		.media-fbo-indicator {
			position: absolute;
			left: 8px;
			bottom: 8px;
			z-index: 4;
			display: none;
			padding: 3px 6px;
			border: 2px solid var(--line);
			background: var(--bg);
			color: var(--fg);
			font-size: 10px;
			letter-spacing: 0.08em;
			line-height: 1.1;
			pointer-events: none;
		}

		.media-fbo-indicator.visible {
			display: inline-block;
		}

		.topbar-left {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			align-items: center;
			flex: 1 1 auto;
			min-width: 0;
		}

		.topbar-right {
			margin-left: auto;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 6px;
			flex: 0 0 auto;
		}

		body.intro-loading {
			overflow: hidden;
		}

		.intro-overlay {
			position: fixed;
			inset: 0;
			z-index: 3000;
			display: none;
			align-items: center;
			justify-content: center;
			background: var(--bg);
			color: var(--fg);
		}

		body.intro-loading .intro-overlay {
			display: flex;
		}

		.intro-overlay.done {
			opacity: 0;
			transition: opacity 0.2s ease;
		}

		.intro-fbo {
			font-weight: 700;
			font-size: clamp(48px, 14vw, 140px);
			letter-spacing: 0.08em;
			line-height: 1;
			white-space: nowrap;
		}

		.archive.single {
			display: grid;
			justify-content: center;
			gap: 10px;
			padding: 10px;
			max-width: var(--archive-single-max-width);
			margin: 0 auto;
			scroll-snap-type: y mandatory;
			--single-item-width: var(--archive-single-item-width);
			--single-text-min-height: var(--archive-single-text-min-height);
		}

		.archive.single.single-post-mode {
			max-width: var(--archive-single-focus-max-width);
			--single-item-width: var(--archive-single-item-focus-width);
			--single-text-min-height: var(--archive-single-text-focus-min-height);
		}

		.archive.grid {
			display: grid;
			grid-template-columns: repeat(6, minmax(0, 1fr));
			gap: 6px;
			padding: 6px;
		}

		.item {
			background: var(--bg);
			border: 2px solid var(--line);
			overflow: hidden;
			position: relative;
		}

		.pin-form {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 4;
			margin: 0;
		}

		.archive.single .item {
			width: 100%;
			max-width: var(--single-item-width);
			min-height: var(--archive-single-item-min-height);
			height: auto;
			max-height: none;
			display: flex;
			flex-direction: column;
			scroll-snap-align: start;
			margin: 0 auto;
		}

		.archive.single .text-post-body {
			min-height: var(--single-text-min-height);
			width: var(--single-item-width);
			min-width: var(--single-item-width);
			margin: 0 auto;
			box-sizing: border-box;
		}

		.media-wrap {
			background: var(--bg);
			width: 100%;
			position: relative;
			box-sizing: border-box;
			overflow: hidden;
		}

		.pinned-badge {
			position: absolute;
			top: 6px;
			right: 6px;
			z-index: 3;
			padding: 3px 6px;
			font-size: 11px;
			line-height: 1.1;
			border: 2px solid var(--line);
			background: var(--fg);
			color: var(--bg);
		}

		.text-post-body {
			padding: 14px 12px;
			min-height: 120px;
			font-size: 14px;
			line-height: 1.4;
			white-space: pre-wrap;
			color: var(--fg);
		}

		.archive.single .media-wrap {
			flex: 0 0 auto;
			min-height: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			width: var(--single-item-width);
			max-width: var(--single-item-width);
		}


		.archive.single img,
		.archive.single video {
			width: 100%;
			height: auto;
			max-height: var(--archive-single-media-max-height);
			object-fit: contain;
			margin: 0 auto;
		}

		.archive.grid .media-wrap {
			aspect-ratio: 3 / 4;
			background: #000;
		}

		.post-open-link {
			display: block;
			color: inherit;
			text-decoration: none;
		}

		.grid-video-placeholder {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #000;
			color: #fff;
		}

		.grid-video-thumb {
			width: 100%;
			height: 100%;
			object-fit: cover;
			background: #000;
		}

		.grid-video-overlay {
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			pointer-events: none;
		}

		.list-video-overlay {
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			pointer-events: none;
		}

		.archive.single .media-wrap.is-playing .list-video-overlay {
			display: none;
		}

		.list-play-icon {
			width: 36px;
			height: 36px;
			display: inline-block;
		}

		.media-wrap.audio {
			aspect-ratio: 3 / 4;
			background: #000;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			overflow: hidden;
		}

		.archive.single .media-wrap.audio {
			aspect-ratio: auto;
			min-height: clamp(360px, 64vh, 820px);
			align-items: stretch;
			justify-content: stretch;
		}

		.audio-player {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			position: relative;
		}

		.archive.single .media-wrap.audio .audio-player {
			height: 100%;
		}

		.audio-cover {
			width: 100%;
			height: auto;
			max-height: calc(100% - 72px);
			object-fit: cover;
			display: block;
			transform-origin: 50% 50%;
			transition: transform 0.3s linear;
		}

		.audio-player.playing .audio-cover {
			animation: audio-rotate 6s linear infinite;
		}

		@keyframes audio-rotate {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}

		.media-wrap.audio .audio-cover {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.audio-cover.no-cover {
			background: #000;
			width: 100%;
			height: 100%;
			display: block;
			object-fit: cover;
			opacity: 0;
		}

		.audio-cover-label {
			position: absolute;
			inset: 0;
			z-index: 2;
			display: none;
			align-items: center;
			justify-content: center;
			padding: 0;
			border: 0;
			background: transparent;
			color: #ffffff;
			font-size: 12px;
			line-height: 1.2;
			letter-spacing: 0.04em;
			text-transform: lowercase;
			pointer-events: none;
		}

		.audio-player.no-cover .audio-cover-label {
			display: flex;
		}

		.audio-playing-bars {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 10px;
			z-index: 7;
			display: none;
			align-items: flex-end;
			justify-content: stretch;
			gap: 2px;
			padding: 0 8px;
			pointer-events: none;
		}

		.audio-player.is-list .audio-playing-bars {
			bottom: 66px;
		}

		.audio-playing-bars span {
			flex: 1 1 0;
			min-width: 2px;
			height: 9px;
			background: #ffffff;
			border-radius: 0;
			opacity: 0.95;
			transform-origin: center bottom;
			animation: audio-bars 0.9s ease-in-out infinite;
		}

		.audio-player.reactive-enabled .audio-playing-bars span {
			animation: none;
			transition: transform 90ms linear, opacity 90ms linear;
		}

		.audio-playing-bars span:nth-child(2n) {
			animation-duration: 1.1s;
		}

		.audio-playing-bars span:nth-child(3n) {
			animation-duration: 0.75s;
		}

		.audio-playing-bars span:nth-child(1) {
			animation-delay: -0.42s;
		}

		.audio-playing-bars span:nth-child(2) {
			animation-delay: -0.21s;
		}

		.audio-playing-bars span:nth-child(3) {
			animation-delay: -0.67s;
		}

		.audio-playing-bars span:nth-child(4) {
			animation-delay: -0.11s;
		}

		.audio-playing-bars span:nth-child(5) {
			animation-delay: -0.53s;
		}

		.audio-playing-bars span:nth-child(6) {
			animation-delay: -0.35s;
		}

		.audio-playing-bars span:nth-child(7) {
			animation-delay: -0.74s;
		}

		.audio-playing-bars span:nth-child(8) {
			animation-delay: -0.18s;
		}

		.audio-playing-bars span:nth-child(9) {
			animation-delay: -0.6s;
		}

		.audio-playing-bars span:nth-child(10) {
			animation-delay: -0.29s;
		}

		.audio-player.playing .audio-playing-bars {
			display: flex;
		}

		@keyframes audio-bars {

			0%,
			100% {
				transform: scaleY(0.35);
				opacity: 0.7;
			}

			50% {
				transform: scaleY(2.4);
				opacity: 1;
			}
		}

		.audio-title {
			display: none;
		}

		.audio-controls {
			display: grid;
			grid-template-columns: auto 1fr auto auto;
			align-items: center;
			gap: 8px;
			padding: 8px 10px 12px 10px;
			background: rgba(0, 0, 0, 0.8);
			min-height: 52px;
		}

		.archive.single .audio-controls {
			margin-top: auto;
		}

		.audio-control-btn {
			min-width: 62px;
			border: 1px solid #ffffff;
			background: #000000;
			color: #ffffff;
			font-size: 12px;
			line-height: 1;
			padding: 7px 10px;
			cursor: pointer;
		}

		.audio-control-btn:hover {
			background: #ffffff;
			color: #000000;
		}

		.audio-progress-range {
			width: 100%;
			margin: 0;
			background: transparent;
			appearance: none;
			-webkit-appearance: none;
			cursor: pointer;
		}

		.audio-progress-range::-webkit-slider-runnable-track {
			height: 3px;
			background: rgba(255, 255, 255, 0.45);
		}

		.audio-progress-range::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 10px;
			height: 10px;
			margin-top: -3.5px;
			border: 1px solid #ffffff;
			border-radius: 0;
			background: #ffffff;
		}

		.audio-progress-range::-moz-range-track {
			height: 3px;
			border: 0;
			background: rgba(255, 255, 255, 0.45);
		}

		.audio-progress-range::-moz-range-thumb {
			width: 10px;
			height: 10px;
			border: 1px solid #ffffff;
			border-radius: 0;
			background: #ffffff;
		}

		.audio-time-current,
		.audio-time-total {
			color: #ffffff;
			font-size: 11px;
			line-height: 1;
			min-width: 34px;
			text-align: right;
			font-variant-numeric: tabular-nums;
		}

		.audio-indicator {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 6;
			width: 36px;
			height: 36px;
			display: grid;
			place-items: center;
			pointer-events: none;
		}

		.audio-indicator svg {
			width: 36px;
			height: 36px;
		}

		video::-webkit-media-controls-start-playback-button {
			display: none !important;
		}

		video::-webkit-media-controls {
			display: none !important;
		}

		.grid-play-icon {
			width: 36px;
			height: 36px;
			display: inline-block;
		}

		.archive.grid.animating .item {
			pointer-events: none;
			transition: transform 0.09s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.09s ease-out;
		}

		.archive.grid.animating .item.tile-leaving {
			opacity: 0.35;
			transform: scale(0.96) translateY(4px);
		}

		.archive.grid.animating .item.tile-focus {
			opacity: 1;
			transform: scale(1.01);
		}

		.archive.grid img,
		.archive.grid video {
			object-fit: contain;
			background: #000;
		}

		img,
		video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			background: var(--bg);
		}

		.stamp {
			padding: 7px 9px;
			font-size: clamp(9px, 0.72rem, 11px);
			color: var(--muted);
			border-top: 2px solid var(--line);
		}

		.post-meta-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			border-top: 2px solid var(--line);
		}

		.post-meta-row .stamp {
			border-top: 0;
			padding-right: 0;
			flex: 1 1 auto;
		}

		.post-location {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			color: var(--muted);
			font-size: 11px;
			line-height: 1.2;
			padding: 7px 9px 7px 0;
			max-width: 50%;
			justify-content: flex-end;
			margin-left: auto;
			overflow: hidden;
		}

		.location-icon {
			width: 18px;
			height: 18px;
			flex: 0 0 auto;
			color: var(--fg);
			display: none;
		}

		.post-location-text {
			display: none;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.archive.grid .post-location {
			max-width: 50%;
		}

		.archive.grid .post-location-text {
			display: inline;
		}

		.archive.list .post-location,
		.archive.single .post-location {
			max-width: 50%;
		}

		.archive.list .post-location-text,
		.archive.single .post-location-text {
			display: inline;
		}

		.text-link {
			color: inherit;
			text-decoration: underline;
			text-underline-offset: 2px;
		}

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

		@media (max-width: 700px) {
			:root {
				--header-peek-height: 52px;
				--archive-single-max-width: 100%;
				--archive-single-focus-max-width: 100%;
				--archive-single-item-width: 100%;
				--archive-single-item-focus-width: 100%;
				--archive-single-item-min-height: clamp(240px, 64vh, 760px);
				--archive-single-text-min-height: clamp(180px, 40vh, 560px);
				--archive-single-text-focus-min-height: clamp(230px, 56vh, 760px);
				--archive-single-media-max-height: calc(100vh - 180px);
			}

			.archive.grid {
				grid-template-columns: repeat(4, minmax(0, 1fr));
			}

			.archive.grid .media-wrap {
				aspect-ratio: 3 / 4;
			}

			.archive.grid .text-post-body {
				padding: 8px 6px;
				font-size: 0.6rem;
				line-height: 1.25;
				min-height: 100px;
				overflow: hidden;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 100%;
			}


			.archive.single .item {
				width: 100%;
				height: auto;
				padding: clamp(8px, 2.4vw, 12px);
				gap: clamp(8px, 2.2vw, 12px);
			}

			.archive.single .text-post-body {
				width: 100%;
			}

			.hero {
				padding: 12px 10px 8px;
			}

			.topbar {
				padding: 8px 10px;
				gap: 8px;
				align-items: flex-start;
			}

			.ui-btn {
				font-size: 12px;
				padding: 6px 8px;
			}

			.meta {
				white-space: normal;
				text-align: right;
				font-size: 11px;
				line-height: 1.3;
			}

			.page-jump {
				width: 100%;
			}

			.media-fbo-indicator {
				left: 6px;
				bottom: 6px;
			}

			.topbar-left {
				flex: 1 1 0;
				min-width: 0;
			}

			.topbar-right {
				margin-left: auto;
				align-items: flex-end;
				max-width: 45%;
			}

			.hero-right {
				align-items: flex-start;
			}

			.post-location {
				max-width: none;
				padding-right: 9px;
			}

			.stamp {
				font-size: 9px;
			}

			.archive.list .post-meta-row,
			.archive.single .post-meta-row {
				align-items: flex-start;
				justify-content: flex-start;
				gap: 0;
				flex-wrap: wrap;
			}

			.archive.list .post-meta-row .stamp,
			.archive.single .post-meta-row .stamp {
				font-size: 11px;
				line-height: 1.15;
				padding-left: 9px;
				padding-right: 9px;
				width: auto;
				min-width: 0;
				white-space: normal;
				text-align: left;
			}

			.archive.list .post-location,
			.archive.single .post-location {
				width: 100%;
				max-width: none;
				margin-left: 0;
				padding: 2px 9px 8px;
				justify-content: flex-end;
				gap: 6px;
			}

			.archive.list .post-location .location-icon,
			.archive.single .post-location .location-icon {
				display: none;
			}

			.archive.list .post-location-text,
			.archive.single .post-location-text {
				display: block;
				width: 100%;
				text-align: right;
				white-space: normal;
				overflow: visible;
				text-overflow: clip;
			}

			.archive.grid .post-location {
				margin-left: auto;
				padding-right: 9px;
			}

			.archive.grid .post-location-text {
				display: none;
			}

			.archive.grid .post-meta-row {
				gap: 4px;
			}

			.archive.grid .post-meta-row .stamp {
				font-size: 9px;
				padding-left: 5px;
				padding-right: 0;
				line-height: 1.1;
				width: 10ch;
				min-width: 10ch;
				white-space: normal;
				word-break: keep-all;
				text-align: left;
			}

			.archive.grid .location-icon {
				display: inline-block;
				width: 9px;
				height: 9px;
			}

			.location-icon {
				width: 20px;
				height: 20px;
			}

			.archive.single .media-wrap.audio {
				min-height: clamp(260px, 52vh, 620px);
			}

			.audio-player.is-list .audio-playing-bars {
				bottom: 62px;
			}

			.audio-controls {
				grid-template-columns: auto 1fr auto auto;
				gap: 6px;
				padding: 8px 8px 10px 8px;
			}

			.audio-control-btn {
				min-width: 56px;
				padding: 6px 8px;
				font-size: 11px;
			}
		}