/* manrope-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/static/manrope-cyrillic-ext-wght-normal_b554147c082021e7450d.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* manrope-cyrillic-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/static/manrope-cyrillic-wght-normal_26b5a940f00e7e312270.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* manrope-greek-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/static/manrope-greek-wght-normal_539fb8477d7d315017b0.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* manrope-vietnamese-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/static/manrope-vietnamese-wght-normal_4b711f5bb527c664e5be.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* manrope-latin-ext-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/static/manrope-latin-ext-wght-normal_e46c8aa413216025354a.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* manrope-latin-wght-normal */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/static/manrope-latin-wght-normal_c5d858e9b56ba827c16c.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*
 * Global visual style: colors, typography, borders and the reusable classes that components
 * apply. How things are positioned and sized relative to each other lives in the components.
 */

:root {
	--ink: #1d1b2e;
	--ink-soft: #3b3852;
	--muted: #5b5873;
	--ground: #f4f2fb;
	--surface: #ffffff;
	--stage: #ebe7f8;
	--line: #e4e0f3;
	--line-strong: #d9d4ee;
	--accent: #5b3df5;
	--accent-hover: #4a2fd6;
	--on-accent: #ffffff;
	--accent-ink: #4a2fd6;
	--accent-ink-hover: #2e1a9e;
	--accent-soft: #ece8fd;

	--radius-lg: 20px;
	--radius-md: 14px;
	--radius-sm: 10px;
	--shadow: 0 1px 2px rgb(29 27 46 / 6%), 0 8px 24px rgb(29 27 46 / 6%);
	--shadow-small: 0 1px 3px rgb(29 27 46 / 12%);
	--focus-ring: 0 0 0 3px rgb(91 61 245 / 35%);

	--font: 'Manrope Variable', 'Segoe UI', system-ui, sans-serif;
	--font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;

	/* Native form controls and scrollbars follow the theme. */
	color-scheme: light dark;
}

/* A dark theme of our own. Besides being nice to have, this keeps dark mode extensions such as
 * Dark Reader from having to guess: they leave pages that are already dark alone. */
@media (prefers-color-scheme: dark) {
	:root {
		--ink: #ecebf5;
		--ink-soft: #cfcce2;
		--muted: #a9a5c4;
		--ground: #13121b;
		--surface: #1e1c2a;
		--stage: #252237;
		--line: #2f2c42;
		--line-strong: #45405e;
		--accent: #5b3df5;
		--accent-hover: #6e54ff;
		--accent-ink: #ada0ff;
		--accent-ink-hover: #cfc7ff;
		--accent-soft: #2e2754;

		--shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
		--shadow-small: 0 1px 3px rgb(0 0 0 / 40%);
		--focus-ring: 0 0 0 3px rgb(173 160 255 / 45%);
	}
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--accent-ink);

	&:hover {
		color: var(--accent-ink-hover);
	}
}

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 800;
	line-height: 1.25;
}

h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3, h4 { font-size: 17px; }

p {
	margin: 0;
	text-wrap: pretty;
}

:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.muted {
	color: var(--muted);
}

.emoji {
	font-family: var(--font-emoji);
}


/* Surfaces. */

.panel {
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.card {
	background: var(--surface);
	border-radius: var(--radius-lg);
}

.stage {
	background: var(--stage);
	border-radius: var(--radius-lg);
}

.note {
	padding: 10px 14px;
	font-size: 14px;
	color: var(--muted);
	background: var(--ground);
	border-radius: var(--radius-sm);
}


/* Controls. */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
}

.btn-primary {
	color: var(--on-accent);
	background: var(--accent);

	&:hover {
		color: var(--on-accent);
		background: var(--accent-hover);
	}
}

.btn-secondary {
	color: var(--ink);
	background: var(--surface);
	border-color: var(--line-strong);

	&:hover {
		color: var(--ink);
		border-color: var(--muted);
	}
}

.field-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
}

.field {
	min-height: 44px;
	padding: 0 12px;
	font: inherit;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
}

input[type="range"] {
	accent-color: var(--accent);
}

/* A row of mutually exclusive options; the selected one has aria-pressed="true". */
.segmented {
	padding: 4px;
	background: var(--ground);
	border-radius: 12px;
}

.segmented-option {
	min-height: 40px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
	background: transparent;
	border: 0;
	border-radius: 9px;
	cursor: pointer;

	&[aria-pressed="true"] {
		font-weight: 700;
		color: var(--accent-ink);
		background: var(--surface);
		box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-small);
	}
}

/* A larger option in a list, such as a render style. */
.choice {
	min-height: 48px;
	padding: 0 12px;
	font: inherit;
	font-weight: 600;
	text-align: left;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-radius: 12px;
	cursor: pointer;

	&:hover {
		background: var(--ground);
	}

	&[aria-pressed="true"] {
		font-weight: 700;
		color: var(--accent-ink);
		background: var(--accent-soft);
		box-shadow: inset 0 0 0 1px var(--accent);
	}

	.choice-hint {
		font-size: 12px;
		font-weight: 600;
		color: var(--muted);
	}
}

.chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;

	&:hover {
		color: var(--ink);
		border-color: var(--line-strong);
		box-shadow: var(--shadow);
	}
}

.tile {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	cursor: pointer;

	&:hover {
		border-color: var(--line-strong);
		box-shadow: var(--shadow);
	}
}

.dropzone {
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);

	&:hover, &:focus-within {
		border-color: var(--accent);
	}
}


/* A mock of a post on Bluesky, in its dark theme. */

.bsky-post {
	color: #f1f3f5;
	text-decoration: none;
	background: #16202b;
	border: 1px solid #2c3a49;
	border-radius: 18px;

	&:hover {
		color: #f1f3f5;
		border-color: #4a5e73;
	}

	.bsky-post-name {
		font-weight: 700;
	}

	.bsky-post-handle {
		font-size: 14px;
		color: #9fb0c0;
	}
}


/* Advertisements. */

.ad-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.ad-frame {
	background: var(--stage);
	border-radius: 12px;
}


/* Page layout of the static parts of index.html, which is not a component. */

.site-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 24px;
	background: var(--surface);
	border-bottom: 1px solid var(--line);

	.site-logo {
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 19px;
		font-weight: 800;
		color: var(--ink);
		text-decoration: none;
	}

	.site-logo-mark {
		display: grid;
		place-items: center;
		width: 32px;
		height: 32px;
		border-radius: var(--radius-sm);
		background: var(--accent);
		color: var(--on-accent);
		font-size: 16px;
	}

	.site-nav-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
	}
}

.page {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 24px 24px 32px;

	@media (max-width: 879px) {
		gap: 20px;
		padding: 16px 16px 24px;
	}
}

.article {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start;

	/* The studio's desktop breakpoint. The ad is left out when it has not been configured. */
	@media (min-width: 880px) {
		&:has(> .article-aside) {
			grid-template-columns: minmax(0, 1fr) 320px;
		}

		& > * {
			grid-column: 1;
		}

		& > .article-aside {
			grid-column: 2;
			grid-row: 1 / span 10;
		}
	}

	section {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 24px;
		color: var(--ink-soft);
		line-height: 1.65;
	}

	section h1, section h2, section h3, section h4 {
		color: var(--ink);
	}

	section h4 {
		margin-top: 8px;
	}
}

.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: var(--muted);
}


/* The cookie consent banner sets a light palette of its own. */

@media (prefers-color-scheme: dark) {
	.cc-window.cc-window {
		color: var(--ink-soft) !important;
		background: var(--surface) !important;
	}

	.cc-window .cc-link {
		color: var(--accent-ink) !important;
	}
}


  /* The studio's desktop breakpoint is 880px. Every slot has a fixed size, so the page does not
   * shift when an ad loads. */
.ad-slot[data-v-1ade73f3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.ad-slot-frame[data-v-1ade73f3] {
    max-width: 100%;
}
.ad-slot-unit[data-v-1ade73f3] {
    display: block;
    width: 100%;
    height: 100%;
}
.ad-slot-mobile-top .ad-slot-frame[data-v-1ade73f3] {
    width: 320px;
    height: 100px;
}
.ad-slot-mobile-top[data-v-1ade73f3] {
@media (min-width: 880px) {
      display: none;
}
}
.ad-slot-banner .ad-slot-frame[data-v-1ade73f3] {
    width: 300px;
    height: 250px;
@media (min-width: 880px) {
      width: 728px;
      height: 90px;
}
}
.ad-slot-aside .ad-slot-frame[data-v-1ade73f3] {
    width: 320px;
    height: 100px;
@media (min-width: 880px) {
      width: 300px;
      height: 250px;
}
}


.emoji-input[data-v-44e15224] {
    position: relative;
}
input[data-v-44e15224] {
    width: 100%;
    font-size: 24px;
}
.emoji-input-suggestions[data-v-44e15224] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-height: 40vh;
    padding: 8px;
    overflow: auto;
}
.emoji-input-suggestion {
&[data-v-44e15224] {
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 26px;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    }
&[data-v-44e15224]:hover {
      background: var(--ground);
}
}


  /* Not scoped: the halftone and map outputs reuse this component as a mixin, which does not carry
   * over the scope id. */
.image-output {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 100%;
}
.image-output-frame {
    max-width: 100%;
    padding: 12px;
}
.image-output-frame canvas {
    display: block;
    max-width: 100%;
    height: auto;
}


.text-output[data-v-735842d0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 100%;
}
.text-output-frame[data-v-735842d0] {
    max-width: 100%;
    padding: 16px;
    overflow-x: auto;
}
pre[data-v-735842d0] {
    margin: 0;
    line-height: 12px;
    font-size: 10px;
    user-select: all;
    /* No letter-spacing, that screws up skintone modifiers >:c */

    /* The studio's desktop breakpoint. */
@media (min-width: 880px) {
      line-height: 24px;
      font-size: 20px;
}
}


.bsky-output[data-v-a25bbdf0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.bsky-post[data-v-a25bbdf0] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(100%, 560px);
    padding: 20px;
@media (max-width: 879px) {
      padding: 16px;
}
}
.bsky-post-author[data-v-a25bbdf0] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bsky-post-avatar[data-v-a25bbdf0] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
.bsky-post-names[data-v-a25bbdf0] {
    display: flex;
    flex-direction: column;
}
pre[data-v-a25bbdf0] {
    margin: 0;
    overflow-x: auto;
    font-size: 20px;
    line-height: 1.12;
@media (max-width: 879px) {
      font-size: 13px;
}
}
.bsky-actions-long[data-v-a25bbdf0] {
@media (max-width: 879px) {
      display: none;
}
}
.bsky-actions[data-v-a25bbdf0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
@media (max-width: 879px) {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 100%;
}
}


.examples-picker[data-v-37c36998] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;

    /* A strip that scrolls sideways on phones. */
@media (max-width: 879px) {
      display: flex;
      overflow-x: auto;
      margin: 0 -16px;
      padding: 0 16px 4px;
}
}
.examples-picker-item {
&[data-v-37c36998] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px;
    }
@media (max-width: 879px) {
        &[data-v-37c36998] {
      flex: none;
      width: 112px;
      padding: 10px;
        }
}
img[data-v-37c36998] {
      width: 100%;
      height: 96px;
      object-fit: contain;
@media (max-width: 879px) {
        height: 72px;
}
}
}


.image-input[data-v-674f24d6] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    cursor: pointer;
}
.image-input-thumb[data-v-674f24d6] {
    flex: none;
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--ground);
}
.image-input-icon[data-v-674f24d6] {
    display: grid;
    place-items: center;
    color: var(--accent);
}
.image-input-text {
&[data-v-674f24d6] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    }
strong[data-v-674f24d6] {
      overflow: hidden;
      font-size: 16px;
      text-overflow: ellipsis;
      white-space: nowrap;
}
}
.image-input-chevron[data-v-674f24d6] {
    flex: none;
}

  /* Invisible, but covers the whole row so files can be dropped anywhere on it. */
input[type="file"][data-v-674f24d6] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}


  /* Desktop layout from 880px. Below that, everything is a single column in the order a phone user
   * needs it: image, result, then the settings to tweak it. */
.emoji-studio[data-v-8772dc70] {
    display: flex;
    flex-direction: column;
    gap: 32px;
@media (max-width: 879px) {
      gap: 20px;
}
}
.studio[data-v-8772dc70] {
    /* Phones follow the order of the markup, so an ad slot that is left out leaves no gap. */
    display: flex;
    flex-direction: column;
    gap: 20px;
@media (min-width: 880px) {
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr);
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "picker stage"
        "settings stage";
}
}
.studio-picker[data-v-8772dc70] { grid-area: picker;
}
.studio-stage[data-v-8772dc70] { grid-area: stage;
}
.studio-settings[data-v-8772dc70] { grid-area: settings;
}
.studio-stage[data-v-8772dc70] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 16px;
@media (min-width: 880px) {
      min-height: 480px;
      padding: 40px 24px;
}
}
.studio-empty {
&[data-v-8772dc70] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: center;
    }
.examples-picker[data-v-8772dc70] {
      width: 100%;
      margin-top: 12px;
      text-align: initial;
}
}
.studio-settings[data-v-8772dc70] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
@media (min-width: 880px) {
      align-self: start;
}
@media (max-width: 879px) {
      padding: 16px;
}
}
.studio-group[data-v-8772dc70] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.studio-segmented[data-v-8772dc70] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}
.studio-styles[data-v-8772dc70] {
    display: flex;
    flex-direction: column;
    gap: 4px;

    /* A row of tiles that scrolls sideways on phones. */
@media (max-width: 879px) {
      flex-direction: row;
      gap: 8px;
      overflow-x: auto;
      margin: 0 -16px;
      padding: 0 16px 4px;
}
}
.studio-style[data-v-8772dc70] {
    display: flex;
    align-items: center;
    gap: 12px;
@media (max-width: 879px) {
      flex: none;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      width: 84px;
      min-height: 72px;
      font-size: 13px;
      text-align: center;
}
}
.studio-style-emoji[data-v-8772dc70] {
    width: 26px;
    font-size: 20px;
    text-align: center;
@media (max-width: 879px) {
      font-size: 22px;
}
}
.studio-style-hint[data-v-8772dc70] {
    margin-left: auto;
@media (max-width: 879px) {
      margin-left: 0;
      font-size: 11px;
}
}
.studio-range-label[data-v-8772dc70] {
    display: flex;
    justify-content: space-between;
}
.studio-section[data-v-8772dc70] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.studio-presets[data-v-8772dc70] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}