/*
* LittleLink
* https://littlelink.io
* Free to use under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/

/* Base Typography Settings
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
	font-size:16px;
}

/* Grid
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .container {
	position:relative;
	width:100%;
	max-width:37.5rem;     				/* 600px */
    text-align:center;
	margin:0 auto;
	padding:3rem 1.25rem 0 1.25rem;
	box-sizing:border-box;
}
.container-left {
	position:relative;
	width:100%;
	max-width:37.5rem;
	text-align:left;
	margin:0 auto;
	padding:0 1.25rem;
	box-sizing:border-box;
}
.container-left p {
	margin-bottom: 1rem;  				/* 16px space between paragraphs */
  }
.column {
	position:center;
	width:100%;
	float:center;
	box-sizing:border-box;
}
/* For devices larger than 400px */
  @media (min-width:25rem) {            /* 400px */
    .container {
	width:85%;
	padding-left:0;
	padding-right:0;
}
}/* For devices larger than 550px */
  @media (min-width:34.375rem) {        /* 550px */
    .container {
	width:80%;
}
.column,.columns {
	margin-left:0;
}
.column:first-child,.columns:first-child {
	margin-left:0;
}
}

/* Base Styles
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  body {
	margin:0;
	padding:0;
	background-color:#ffffff;
	color:#1a1a1a;
	font-family:"Open Sans",system-ui;
	font-size:1.125rem;     				/* 18px */
    font-weight:400;
	line-height:1.6;
}

/* Typography
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  h1 {
	margin:0 0 0.5rem 0;
	font-size:3rem;         		/* 48px */
    font-weight:800;
	line-height:1;
	letter-spacing:0;
	word-wrap:break-word;
	overflow-wrap:break-word;
	hyphens:auto;           		/* Delete this to remove automatic hyphen on line break */
}
.container p {
	margin:0 0 2rem 0;
}

/* Base Typography Settings
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Base size - 16px browser default */
:root {
  font-size:16px;           /* Using a 1.25 modular scale for typography */
  --scale-0:1rem;           /* 16px */
  --scale-1:1.25rem;        /* 20px */
  --scale-2:1.563rem;       /* 25px */
  --scale-3:1.953rem;       /* 31px */
  --scale-4:2.441rem;       /* 39px */
  --scale-5:3.052rem;       /* 49px */

  /* Spacing units */
  --spacing-xs:0.5rem;      /* 8px */
  --spacing-s:1rem;         /* 16px */
  --spacing-m:1.5rem;       /* 24px */
  --spacing-l:2rem;         /* 32px */
  --spacing-xl:3rem;        /* 48px */
  --spacing-xxl:4rem;       /* 64px */
}

/* Avatar */
.avatar {
	width: 8rem;             /* 128px */
	height: 8rem;
	border-radius: 50%;
	object-fit: cover;
	background-position: center;
	margin-bottom: var(--spacing-l);
	margin-left: auto;
	margin-right: auto;
	display: block;
  }

/* Typography Scale */
h1 {
	margin:0 0 var(--spacing-m) 0;
	font-size:var(--scale-5);           /* ~49px */
  	font-weight:800;
	line-height:1.1;
	letter-spacing:-0.02em;
	word-wrap:break-word;
	overflow-wrap:break-word;
}
body {
	font-size:var(--scale-1);           /* 20px */
  	line-height:1.6;
}
.container p {
	margin:0 0 var(--spacing-xl) 0;
	font-size:var(--scale-1);
	line-height:1.6;
}

/* Container spacing */
.container {
	padding:var(--spacing-xl) var(--spacing-m) 0 var(--spacing-m);
	text-align:center;
}

/* Page-load reveal */
.page-loading .column > * {
	opacity:0;
	transform:translateY(12px);
}
.page-ready .column > * {
	animation:introReveal 0.55s ease-out both;
}
.page-ready .column > *:nth-child(1) { animation-delay:0ms; }
.page-ready .column > *:nth-child(2) { animation-delay:70ms; }
.page-ready .column > *:nth-child(3) { animation-delay:140ms; }
.page-ready .column > *:nth-child(4) { animation-delay:210ms; }
.page-ready .column > *:nth-child(5) { animation-delay:280ms; }

@keyframes introReveal {
	from {
		opacity:0;
		transform:translateY(12px);
	}
	to {
		opacity:1;
		transform:translateY(0);
	}
}

/* Footer */
footer {
	margin:var(--spacing-xxl) 0;            /* 4rem (64px) top and bottom */
    font-size:var(--scale-0);
}

/* Responsive adjustments */
@media (max-width:34.375rem) {              /* 550px */
  h1 {
	font-size:var(--scale-4);
}
body {
	font-size:var(--scale-0);
}
.container p {
	font-size:var(--scale-0);
}
.avatar {
	margin-bottom:var(--spacing-m);
}
footer {
	margin:var(--spacing-xl) 0;         	/* 3rem (48px) top and bottom */
}
}

/* Links
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  a {
	color:#2457F5;
	text-decoration:underline;
}
a:hover {
	color:#083BDA;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,button {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:min(100%, 18.75rem);   	/* 300px maximum */
	max-width:100%;
 	min-height:3rem;                /* 48px */
  	padding:0.75rem 1rem;         	/* 12px ; 16px */
  	font-size:1.125rem;           	/* 18px */
  	font-weight:700;
	text-decoration:none;
	white-space:normal;
  	background-color:var(--button-background,transparent);
	color:var(--button-text,#000000);
	border:var(--button-border,none);
	border-radius:0.5rem;
	cursor:pointer;
	box-sizing:border-box;
	hyphens:auto;               	/* Delete this to remove automatic hyphen on line break */
  	margin-bottom:1rem;
	text-align:center;
	line-height:1.3;
}

/* Icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.icon {
	width:1.25rem;
	height:1.25rem;
	margin-right:0.5rem;
	flex-shrink:0;
}

/* Avatar
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.avatar {
	width: 8rem;             /* 128px */
	height: 8rem;
	object-fit: cover;
	background-position: center;
	margin-bottom: var(--spacing-l);
  }

   /* Modifier for no avatar rounding */
   .avatar--none {
	border-radius: 0%;
  }

  /* Modifier for rounded avatar */
  .avatar--rounded {
	border-radius: 50%;
  }

  /* Modifier for slightly rounded corners */
  .avatar--soft {
	border-radius: 0.5rem;   /* 8px rounded corners */
  }

/* Theme System
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Light theme is default above */

/* Dark theme */
:root.theme-dark {
	color-scheme:dark;
}
:root.theme-dark :focus-visible {
	outline: 2px solid #4899F7;
	outline-offset: 2px;
  }
:root.theme-dark body {
	background-color:#121212;
	color:#ffffff;
}
:root.theme-dark a:not(.button) {
	color:#4899F7;
}
:root.theme-dark a:not(.button):hover {
	color:#7AB8FF;
}

/* Auto theme */
:root.theme-auto {
	color-scheme:light dark;
}
@media (prefers-color-scheme:dark) {
	:root.theme-auto body {
	background-color:#121212;
	color:#ffffff;
}
:root.theme-auto :focus-visible {
    outline: 2px solid #4899F7;
    outline-offset: 2px;
  }
:root.theme-auto a:not(.button) {
	color:#4899F7;
}
:root.theme-auto a:not(.button):hover {
	color:#7AB8FF;
}
}

/* Button Text Color Override
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    .button:hover,button:hover {
	color:var(--button-text);
}

	/* Short click reactions for the active social links */
	.button-reaction {
		animation:buttonReaction 0.55s ease-out;
	}
	.button-reaction.button-bluesky {
		--reaction-rotate:-2deg;
	}
	.button-reaction.button-discord {
		--reaction-rotate:2deg;
	}
	.button-reaction.button-github {
		--reaction-rotate:-1deg;
	}
	.button-reaction.button-telegram {
		--reaction-rotate:3deg;
	}
	.button-reaction.button-email {
		--reaction-rotate:0deg;
	}
	.button-reaction.button-bluesky {
		position:relative;
		animation:butterflyFly 0.65s ease-out;
	}
	.button-reaction.button-bluesky::after {
		content:"🦋";
		position:absolute;
		font-size:1.1rem;
		pointer-events:none;
		animation:butterflyAccent 0.65s ease-out forwards;
	}
	.button-reaction.button-discord {
		animation:discordBounce 0.55s ease-out;
	}
	.button-reaction.button-github .icon {
		animation:githubSpin 0.55s ease-out;
	}
	.button-reaction.button-telegram .icon {
		animation:telegramLift 0.55s ease-out;
	}
	.button-reaction.button-email .icon {
		animation:emailWiggle 0.55s ease-out;
	}

	@keyframes buttonReaction {
		0%, 100% {
			transform:translateY(0) rotate(0deg);
		}
		35% {
			transform:translateY(-4px) rotate(var(--reaction-rotate, 0deg));
		}
		65% {
			transform:translateY(1px) rotate(calc(var(--reaction-rotate, 0deg) * -0.5));
		}
	}

	@keyframes butterflyFly {
		0% { transform:translateY(0) rotate(0deg); }
		45% { transform:translateY(-5px) rotate(-2deg); }
		100% { transform:translateY(0) rotate(0deg); }
	}
	@keyframes butterflyAccent {
		0% { opacity:0; transform:translate(0, 6px) scale(0.7) rotate(-10deg); }
		35% { opacity:1; transform:translate(38px, -14px) scale(1) rotate(8deg); }
		100% { opacity:0; transform:translate(70px, -30px) scale(0.8) rotate(-5deg); }
	}
	@keyframes discordBounce {
		0%, 100% { transform:translateY(0); }
		35% { transform:translateY(-8px); }
		65% { transform:translateY(2px); }
	}
	@keyframes githubSpin {
		0% { transform:rotate(0); }
		70% { transform:rotate(360deg); }
		100% { transform:rotate(360deg); }
	}
	@keyframes telegramLift {
		0%, 100% { transform:translate(0, 0) rotate(0); }
		45% { transform:translate(3px, -5px) rotate(-8deg); }
	}
	@keyframes emailWiggle {
		0%, 100% { transform:rotate(0); }
		25% { transform:rotate(-12deg); }
		75% { transform:rotate(12deg); }
	}

/* Responsive Typography
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  @media (max-width:34.375rem) {            /* 550px */
    h1 {
	font-size:2rem;                         /* 32px */
	}
	body {
	font-size:1rem;                    		/* 16px */
	}
}

/* Privacy Page Styles
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {
	margin:var(--spacing-l) 0;
	text-align:left;
}
section {
	margin:var(--spacing-xl) 0;
	text-align:left;
}
h2 {
	font-size:var(--scale-3);
	font-weight:700;
	margin-bottom:var(--spacing-m);
}
h3 {
	font-size:var(--scale-2);
	font-weight:600;
	margin:var(--spacing-l) 0 var(--spacing-s) 0;
}
ul {
	list-style:none;
	padding:0;
	margin:0 0 var(--spacing-m) 0;
}
ul li {
	margin-bottom:var(--spacing-xs);
}

/* Privacy page specific responsive adjustments */
  @media (max-width:34.375rem) {
	h2 {
	font-size:var(--scale-2);
	}
	h3 {
	font-size:var(--scale-1);
	}
	section {
	margin:var(--spacing-l) 0;
	}
}

/* Font Face Definitions
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
	font-display:swap;
	font-family:'Open Sans';
	font-style:normal;
	font-weight:400;
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot');
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.svg#OpenSans') format('svg');
}
@font-face {
	font-display:swap;
	font-family:'Open Sans';
	font-style:normal;
	font-weight:600;
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot');
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.svg#OpenSans') format('svg');
}
@font-face {
	font-display:swap;
	font-family:'Open Sans';
	font-style:normal;
	font-weight:700;
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot');
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.svg#OpenSans') format('svg');
}
@font-face {
	font-display:swap;
	font-family:'Open Sans';
	font-style:normal;
	font-weight:800;
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot');
	src:url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.eot?#iefix') format('embedded-opentype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff2') format('woff2'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff') format('woff'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.ttf') format('truetype'),url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.svg#OpenSans') format('svg');
}

/* Husky Animation
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.husky-yard {
    position: relative;
    width: 100vw;
    height: 220px;

    left: 50%;
    margin-left: -50vw;
    margin-top: 2rem;

    overflow: hidden;
    pointer-events: none;
}

.husky-character {
    position: absolute;
    left: -160px;
    bottom: 8px;

	width: clamp(88px, 25vw, 120px);

    z-index: 5;
	pointer-events:auto;
	cursor:pointer;

    /* JS changes this automatically */
    --jump-height: 65px;
}

.husky-character.jumping #husky {
    animation: huskyJump 0.85s ease-in-out;
}

.husky-character.husky-liked #husky {
	animation:huskyLike 0.45s ease-out;
}

.husky-character.screen-licking {
	visibility:hidden;
}

.screen-like {
	position:absolute;
	left:45%;
	bottom:55%;
	color:#f24b78;
	font-size:1.15rem;
	line-height:1;
	pointer-events:none;
	animation:screenLike 1s ease-out var(--like-delay) forwards;
}

.screen-lick {
	position:fixed;
	inset:0;
	z-index:20;
	overflow:hidden;
	pointer-events:none;
	animation:screenLickOverlay 1s ease-out forwards;
}

.screen-lick-frame {
	position:absolute;
	left:50%;
	bottom:-8vh;
	width:min(100vw, 64rem);
	height:100vh;
	object-fit:contain;
	object-position:center bottom;
	transform:translate(-50%, 105%);
	animation:screenLickRise 1s cubic-bezier(0.22, 0.8, 0.3, 1) forwards;
}

@keyframes screenLickOverlay {
	0%, 8% { opacity:0; }
	18%, 76% { opacity:1; }
	100% { opacity:0; }
}

@keyframes screenLickRise {
	0% { transform:translate(-50%, 105%); }
	22% { transform:translate(-50%, 12%); }
	55% { transform:translate(-50%, 0); }
	78% { transform:translate(-50%, 0); }
	100% { transform:translate(-50%, 105%); }
}

@keyframes huskyLike {
	0%, 100% { transform:scale(1); }
	40% { transform:scale(1.12) rotate(-4deg); }
	70% { transform:scale(0.98) rotate(3deg); }
}

@keyframes screenLike {
	from {
		opacity:0;
		transform:translate(0, 0) scale(0.6);
	}
	25% { opacity:1; }
	to {
		opacity:0;
		transform:translate(var(--like-x), -48px) scale(1.1) rotate(12deg);
	}
}

.husky-trail-pair {
	position:absolute;
	left:0;
	bottom:7px;
	width:30px;
	height:20px;
	pointer-events:none;
}

.husky-trail {
	position:absolute;
	width:12px;
	height:8px;
	border-radius:50%;
	background:
		radial-gradient(circle at 20% 75%, currentColor 0 2px, transparent 2.5px),
		radial-gradient(circle at 80% 75%, currentColor 0 2px, transparent 2.5px),
		radial-gradient(circle at 50% 20%, currentColor 0 2px, transparent 2.5px);
	color:#2457F5;
	opacity:0;
	pointer-events:none;
	animation:huskyTrail 1.1s ease-out forwards;
}

.trail-phase-a .husky-trail:nth-child(1) { left:0; top:0; }
.trail-phase-a .husky-trail:nth-child(2) { left:15px; top:10px; animation-delay:40ms; }
.trail-phase-b .husky-trail:nth-child(1) { left:15px; top:0; }
.trail-phase-b .husky-trail:nth-child(2) { left:0; top:10px; animation-delay:40ms; }

@keyframes huskyTrail {
	0% {
		opacity:0.65;
		transform:scale(0.7) translateY(0);
	}
	100% {
		opacity:0;
		transform:scale(1) translateY(5px);
	}
}

@keyframes huskyJump {

    0% {
        transform:
            translateY(0)
            scaleX(1.08)
            scaleY(0.92);
    }

    20% {
        transform:
            translateY(calc(var(--jump-height) * -0.4))
            rotate(-4deg)
            scaleX(0.96)
            scaleY(1.04);
    }

    50% {
        transform:
            translateY(calc(var(--jump-height) * -1))
            rotate(4deg);
    }

    75% {
        transform:
            translateY(calc(var(--jump-height) * -0.4))
            rotate(-2deg);
    }

    100% {
        transform:
            translateY(0)
            scaleX(1.08)
            scaleY(0.92);
    }
}

/* Small-screen layout, including wider phone viewports */
@media (max-width:34.375rem) {
	.container {
		padding:0.5rem 1rem 0;
	}

	.avatar {
		width:5rem;
		height:5rem;
		margin-bottom:0.25rem;
	}

	h1 {
		font-size:1.75rem;
		margin-bottom:0.25rem;
	}

	.container p {
		margin-bottom:0.25rem;
		line-height:1.35;
	}

	.button,button {
		width:100%;
		padding:0.75rem 0.875rem;
		font-size:1rem;
	}

	.button-stack .button:last-child {
		margin-bottom:0;
	}

	.husky-yard {
		height:120px;
		margin-top:0;
	}

	footer {
		margin:0.5rem 0;
		line-height:1.5;
	}
}

@media (prefers-color-scheme:dark) {
	.husky-trail {
		color:#7AB8FF;
	}
}

@media (prefers-reduced-motion:reduce) {
	.button-reaction,
	.husky-trail,
	.screen-lick {
		animation:none;
	}
}
/* Guestbook */
.guestbook {
	margin:var(--spacing-xl) auto 0;
	text-align:left;
}

.guestbook h2,
.admin-panel h2 {
	margin:0 0 var(--spacing-s);
	font-size:var(--scale-2);
	line-height:1.2;
	letter-spacing:0;
}

.guestbook-form,
.admin-panel {
	display:grid;
	gap:var(--spacing-s);
	margin-bottom:var(--spacing-m);
}

.guestbook-field {
	display:grid;
	gap:0.35rem;
}

.guestbook-field label,
.admin-inline-form label {
	font-size:var(--scale-0);
	font-weight:700;
}

.guestbook-field input,
.guestbook-field textarea,
.admin-inline-form input {
	width:100%;
	border:1px solid #d0d7de;
	border-radius:8px;
	padding:0.75rem 0.875rem;
	background:#ffffff;
	color:#1a1a1a;
	font:inherit;
	box-sizing:border-box;
}

.guestbook-field textarea {
	resize:vertical;
	min-height:7rem;
}

.guestbook-submit,
.admin-inline-form button,
.admin-actions button,
.admin-item > button,
.admin-word {
	width:auto;
	min-height:2.75rem;
	border:0;
	border-radius:8px;
	padding:0.65rem 0.9rem;
	background:#1a1a1a;
	color:#ffffff;
	font-weight:700;
	cursor:pointer;
}

.guestbook-submit:hover,
.admin-inline-form button:hover,
.admin-actions button:hover,
.admin-item > button:hover,
.admin-word:hover {
	background:#333333;
}

.guestbook-status,
.admin-status {
	min-height:1.4rem;
	margin:0;
	font-size:var(--scale-0);
}

.guestbook-status[data-type="error"] {
	color:#b42318;
}

.guestbook-status[data-type="success"] {
	color:#027a48;
}

.guestbook-entries,
.admin-list,
.admin-word-list {
	display:grid;
	gap:var(--spacing-s);
}

.guestbook-entry,
.admin-item {
	border:1px solid #d0d7de;
	border-radius:8px;
	padding:var(--spacing-s);
	background:rgba(255,255,255,0.65);
}

.guestbook-entry-header,
.admin-actions,
.admin-inline-form {
	display:flex;
	align-items:center;
	gap:0.75rem;
	flex-wrap:wrap;
}

.guestbook-entry-header {
	justify-content:space-between;
	margin-bottom:0.35rem;
}

.guestbook-entry-header time,
.admin-badge {
	font-size:0.875rem;
	opacity:0.72;
}

.guestbook-entry-message,
.admin-item p {
	margin:0;
	font-size:var(--scale-0);
	line-height:1.55;
	white-space:pre-wrap;
	overflow-wrap:anywhere;
}

.guestbook-honeypot {
	position:absolute;
	left:-10000px;
	width:1px;
	height:1px;
	overflow:hidden;
}

.admin-page .container {
	max-width:52rem;
	text-align:left;
}

.admin-panel {
	margin-top:var(--spacing-l);
}

.admin-badge {
	display:inline-flex;
	align-items:center;
	min-height:2rem;
	border-radius:999px;
	padding:0 0.7rem;
	background:#e6f4ea;
	color:#137333;
	font-weight:700;
	opacity:1;
}

.admin-badge-muted {
	background:#f2f4f7;
	color:#667085;
}

.admin-word-list {
	grid-template-columns:repeat(auto-fit, minmax(8rem, 1fr));
}

.admin-word {
	min-height:2.5rem;
	background:#f2f4f7;
	color:#1a1a1a;
}

:root.theme-dark .guestbook-field input,
:root.theme-dark .guestbook-field textarea,
:root.theme-dark .admin-inline-form input,
:root.theme-dark .guestbook-entry,
:root.theme-dark .admin-item {
	border-color:#3a3a3a;
	background:#1f1f1f;
	color:#f5f5f5;
}

:root.theme-dark .admin-word {
	background:#333333;
	color:#f5f5f5;
}

@media (prefers-color-scheme:dark) {
	:root.theme-auto .guestbook-field input,
	:root.theme-auto .guestbook-field textarea,
	:root.theme-auto .admin-inline-form input,
	:root.theme-auto .guestbook-entry,
	:root.theme-auto .admin-item {
		border-color:#3a3a3a;
		background:#1f1f1f;
		color:#f5f5f5;
	}

	:root.theme-auto .admin-word {
		background:#333333;
		color:#f5f5f5;
	}
}

@media (max-width:34.375rem) {
	.guestbook {
		margin-top:var(--spacing-m);
	}

	.guestbook-submit,
	.admin-inline-form button,
	.admin-actions button,
	.admin-item > button,
	.admin-word {
		width:100%;
	}

	.admin-inline-form input {
		width:100%;
	}
}