:root {
--background: rgb(219 234 254);
--foreground-rgb: 0 0 0;
}
dialog:not([open]) {
display: none;
}
*, ::before, ::after {
box-sizing: border-box;
border: 0 solid;
}
body {
margin: 0;
min-height: 100vh;
font-family: Poppins, system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 1rem;
line-height: 1.5rem;
color: rgb(var(--foreground-rgb));
background-color: var(--background);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}
p, figure {
margin: 0;
}
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: inherit;
text-decoration: inherit;
}
img, svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
button, input {
font-family: inherit;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
width: 100%;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.site-brand {
display: flex;
min-height: 4rem;
align-items: center;
justify-content: center;
gap: 1rem;
background-color: #3e2965;
padding: 0.75rem 1rem;
}
.site-brand img {
width: 40px;
height: 40px;
}
.site-brand h1 {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: bold;
color: white;
}
.site-nav {
width: 100%;
background-color: #3e2965;
padding: 0.75rem 1rem 1rem;
}
.page-container {
margin: 0 auto;
width: 100%;
max-width: 600px;
padding: 0 1rem;
}
.page-section {
margin: 0 auto;
width: 100%;
max-width: 600px;
padding: 1rem;
}
.page-section-wide {
margin: 0 auto;
width: 100%;
max-width: 800px;
padding: 1.5rem 1rem;
}
.dictionary-nav {
padding: 1rem;
}
.dictionary-nav .nav-menu {
min-height: 8.5rem;
}
.center-row {
display: flex;
justify-content: center;
margin-top: 1rem;
}
.stack > * + * {
margin-top: 1rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.page-heading {
margin: 1.5rem 0 1rem;
font-size: 1.75rem;
line-height: 2.25rem;
font-weight: bold;
text-align: center;
color: white;
}
.nav-menu {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0;
}
.nav-menu.start {
justify-content: flex-start;
}
.nav-menu-label {
width: 100%;
padding: 0 0.25rem;
text-align: center;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
}
.chip, .chip-inverse {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.75rem;
border-width: 1px;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
transition: background-color 150ms, border-color 150ms;
}
.chip {
border-color: rgb(var(--foreground-rgb) / 0.3);
color: rgb(var(--foreground-rgb));
}
.chip:hover {
background-color: rgb(var(--foreground-rgb) / 0.05);
}
.chip.active, .chip.active:hover {
border-color: rgba(255, 255, 255, 0.4);
background-color: #3e2965;
color: white;
}
.chip-inverse {
border-color: rgba(255, 255, 255, 0.3);
color: white;
}
.chip-inverse:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.chip-inverse.active, .chip-inverse.active:hover {
border-color: rgba(255, 255, 255, 0.4);
background-color: #6764fc;
}
.btn-primary {
display: inline-flex;
min-height: 2.75rem;
min-width: 10rem;
max-width: 100%;
align-items: center;
justify-content: center;
border-radius: 40px;
border: 1px solid rgba(255, 255, 255, 0.5);
background-color: #6764fc;
padding: 0.75rem 1.5rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: bold;
color: white;
transition: opacity 150ms;
}
.btn-primary:hover {
opacity: 0.9;
}
.card {
margin: 0 auto 2rem;
width: 100%;
max-width: 600px;
border-radius: 30px;
background-color: rgba(97, 42, 180, 0.7);
padding: 1.25rem;
text-align: left;
color: white;
}
.card.flush {
margin-bottom: 0;
}
.card-heading {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
}
.definition-title {
color: #e070fc;
}
.text-dream {
font-size: 1.25rem;
line-height: 1.75rem;
color: #e070fc;
}
.underline {
text-decoration: underline;
}
.art-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.art-card-date {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 600;
}
.art-card {
position: relative;
}
.art-card-link {
display: block;
color: inherit;
}
.art-card-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: 30px;
}
.upvote-form, .upvote-sync {
position: relative;
z-index: 2;
}
.upvote-button {
display: flex;
align-items: center;
gap: 0.375rem;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 9999px;
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: inherit;
font-family: inherit;
cursor: pointer;
transition: all 200ms;
}
.upvote-button:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-0.125rem);
}
.upvote-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.upvote-button svg {
width: 1rem;
height: 1rem;
color: #a855f7;
transition: transform 200ms;
}
.upvote-button svg:hover {
transform: scale(1.1);
}
.upvote-count {
min-width: 20px;
font-weight: 500;
text-align: center;
}
.art-card-image {
position: relative;
margin: 0.75rem auto;
aspect-ratio: 1 / 1;
width: 100%;
max-width: 600px;
overflow: hidden;
border-radius: 30px;
}
.art-card-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.prose {
font-size: 1rem;
line-height: 1.75rem;
color: rgb(209 213 219);
}
.prose > :first-child {
margin-top: 0;
}
.prose > :last-child {
margin-bottom: 0;
}
.prose p {
margin: 1.25em 0;
color: white;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
color: white;
}
.prose h1 {
margin: 0 0 0.8888889em;
font-size: 2.25em;
font-weight: 800;
line-height: 1.1111111;
}
.prose h2 {
margin: 2em 0 1em;
font-size: 1.5em;
font-weight: bold;
line-height: 1.3333333;
}
.prose h3 {
margin: 1.6em 0 0.6em;
font-size: 1.25em;
font-weight: 600;
line-height: 1.6;
}
.prose strong {
color: white;
font-weight: 600;
}
.prose a {
color: #e070fc;
text-decoration: underline;
font-weight: 500;
}
.prose ul, .prose ol {
margin: 1.25em 0;
padding-left: 1.625em;
}
.prose ul {
list-style-type: disc;
}
.prose ol {
list-style-type: decimal;
}
.prose li {
margin: 0.5em 0;
padding-left: 0.375em;
}
.prose li > p {
margin: 0.75em 0;
}
.page-title {
margin: 0 0 1rem;
font-size: 1.75rem;
line-height: 2.25rem;
font-weight: bold;
text-align: center;
}
.art-search {
display: flex;
justify-content: center;
width: 100%;
max-width: 24rem;
margin: 0 auto 1rem;
}
.art-search input {
width: 100%;
border: 1px solid #6f6f6f;
border-radius: 6px 0 0 6px;
background-color: white;
padding: 0.625rem;
font: inherit;
color: rgb(var(--foreground-rgb));
}
.art-search button {
display: inline-flex;
align-items: center;
border: 1px solid rgb(var(--foreground-rgb) / 0.3);
border-left-width: 0;
border-radius: 0 0.75rem 0.75rem 0;
background-color: white;
padding: 0.5rem 1rem;
color: rgb(var(--foreground-rgb));
cursor: pointer;
}
.art-search button svg {
width: 0.75rem;
height: 0.75rem;
}
.pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin: 1rem 0;
}
.chip.pager {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
}
.empty-state {
text-align: center;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 600;
}
.art-post-title {
margin-top: 0.5rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
}
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.sign-in-card {
max-width: 28rem;
}
.field-label {
display: block;
font-weight: 600;
}
.text-input {
display: block;
width: 100%;
margin-top: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 0.75rem;
background-color: white;
padding: 0.75rem;
font: inherit;
color: #1d1818;
}
.code-input {
font-size: 1.5rem;
line-height: 2rem;
letter-spacing: 0.3em;
text-align: center;
}
.form-error {
border-radius: 0.75rem;
background-color: rgba(255, 255, 255, 0.15);
padding: 0.5rem 0.75rem;
font-weight: 600;
}
.sign-in-card .btn-primary {
width: 100%;
}
.form-links {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.75rem;
}
.link-button {
border: 0;
background: none;
padding: 0;
font: inherit;
color: white;
text-decoration: underline;
cursor: pointer;
}
.legal-frame {
position: relative;
width: 100%;
height: calc(100vh - 12rem);
min-height: 24rem;
}
.legal-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.article-header {
text-align: center;
}
.article-subtitle {
margin-top: 0.5rem;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 600;
color: #e070fc;
}
.article-card {
max-width: 800px;
}
.steps-heading {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 600;
text-decoration: underline;
}
.steps {
list-style: decimal inside;
padding-left: 0;
}
.steps li + li {
margin-top: 0.5rem;
}
.note {
font-size: 0.875rem;
line-height: 1.25rem;
font-style: italic;
color: rgba(255, 255, 255, 0.8);
}
.fine-print {
font-size: 0.875rem;
line-height: 1.25rem;
color: rgba(255, 255, 255, 0.8);
}
.language-switcher {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
max-width: 32rem;
margin: 0 auto;
padding: 0.5rem 1rem;
}
.journal > * + * {
margin-top: 2rem;
}
.dream-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.input-field, .textarea-field {
width: 100%;
border-radius: 0.375rem;
border: 1px solid #6f6f6f;
background-color: white;
padding: 0.625rem;
font: inherit;
color: rgb(var(--foreground-rgb));
}
.textarea-field {
min-height: 12.5rem;
resize: vertical;
font-size: 1.25rem;
line-height: 1.75rem;
}
.dream-form-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.share-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 500;
color: rgb(var(--foreground-rgb));
cursor: pointer;
}
.share-toggle input {
width: 1rem;
height: 1rem;
accent-color: #30155E;
}
.dream-form button[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
.interpretation:empty {
display: none;
}
.streaming-panel {
max-height: 18rem;
overflow-y: auto;
border-radius: 0.75rem;
border: 1px solid rgb(224 112 252 / 0.4);
background-color: rgba(255, 255, 255, 0.8);
padding: 1.25rem;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
backdrop-filter: blur(12px);
}
.streaming-title {
margin-bottom: 1rem;
text-align: center;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
color: #e070fc;
}
.prose-streaming, .prose-streaming p, .prose-streaming strong {
color: rgb(var(--foreground-rgb));
}
.prose-streaming h1, .prose-streaming h2, .prose-streaming h3, .prose-streaming h4 {
color: #30155E;
}
.prose-streaming > :last-child::after {
content: '|';
animation: blink 1s step-end infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
.loading-center {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
padding: 3rem 0;
color: rgb(var(--foreground-rgb));
}
.spinner {
display: inline-block;
flex-shrink: 0;
width: 3.125rem;
height: 3.125rem;
border-radius: 50%;
border: 4px solid currentColor;
border-top-color: transparent;
color: #6764fc;
animation: spin 1s linear infinite;
}
.spinner-sm {
width: 1.75rem;
height: 1.75rem;
border-width: 2px;
color: white;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.notice {
border-radius: 1.25rem;
background-color: rgba(97, 42, 180, 0.7);
padding: 0.75rem 1rem;
color: white;
font-weight: 600;
text-align: center;
}
.heading-page {
font-size: 1.75rem;
line-height: 2.25rem;
font-weight: bold;
color: rgb(var(--foreground-rgb));
text-align: center;
}
.wall {
text-align: center;
}
.dream-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.dream-card-icons {
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.5rem;
line-height: 2rem;
color: white;
}
.dream-card-icons form {
display: flex;
}
.icon {
display: inline-flex;
width: 1em;
height: 1em;
}
.icon svg {
width: 100%;
height: 100%;
}
.stroke-icon {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon-button {
display: inline-flex;
border: 0;
background: none;
padding: 0;
font-size: inherit;
color: inherit;
cursor: pointer;
}
.icon-muted {
margin-top: 0.25rem;
font-size: 1rem;
color: rgba(255, 255, 255, 0.7);
transition: color 150ms;
}
.icon-muted:hover {
color: white;
}
.dream-title-row {
margin-top: 0.5rem;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.dream-title {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
color: white;
}
.title-editor {
display: none;
margin-top: 0.5rem;
}
.title-editor:target {
display: block;
}
.title-editor .button-row {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
}
.btn-chip-inverse {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
border-radius: 0.75rem;
border: 1px solid rgb(255 255 255 / 0.3);
background: transparent;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
color: white;
font-family: inherit;
cursor: pointer;
transition: background-color 150ms;
}
.btn-chip-inverse:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.btn-chip-inverse.active {
border-color: rgb(255 255 255 / 0.4);
background-color: #6764fc;
}
.btn-secondary.generating {
opacity: 0.75;
cursor: progress;
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
border-radius: 0.75rem;
border: 1px solid rgb(255 255 255 / 0.3);
background: transparent;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
color: white;
font-family: inherit;
cursor: pointer;
transition: background-color 150ms;
}
.btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.dream-artwork {
display: block;
width: 100%;
height: auto;
margin: 0.75rem 0;
border-radius: 30px;
background-color: rgba(255, 255, 255, 0.08);
}
.artwork-pending {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.75rem;
color: rgba(255, 255, 255, 0.9);
}
.dream-text {
white-space: pre-line;
}
.card-inner {
border-radius: 20px;
background-color: rgba(93, 76, 146, 0.4);
padding: 1rem;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.reflection > * + * {
margin-top: 0.75rem;
}
.reflection-heading {
text-align: center;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
color: white;
}
.reflection-button {
width: 100%;
white-space: pre-wrap;
}
.reflection-button .plus {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 300;
}
.dream-card-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
align-items: center;
justify-content: center;
padding: 1rem;
background-color: rgb(0 0 0 / 0.45);
}
.modal-overlay:target {
display: flex;
}
.modal-panel {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
width: 100%;
max-width: 28rem;
border-radius: 20px;
padding: 1.5rem;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.reflection-popup {
background: var(--reflection-background, #c1c9f9);
color: var(--reflection-text, #000);
}
.reflection-popup-heading {
text-align: center;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
}
.reflection-subtext {
max-width: 24rem;
text-align: center;
font-size: 0.875rem;
line-height: 1.5rem;
color: var(--reflection-subtext, rgba(26, 19, 62, 0.7));
}
.reflection-form {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.reflection-textarea {
width: 100%;
min-height: 9rem;
resize: vertical;
border-radius: 20px;
border: 2px solid rgba(255, 255, 255, 0.2);
padding: 1rem;
font: inherit;
background: var(--reflection-textarea-bg, #f7f4fc);
color: var(--reflection-textarea-text, #1a133e);
}
.reflection-textarea::placeholder {
color: #d4aaff;
opacity: 0.9;
}
.reflection-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
}
.reflection-save {
background: linear-gradient(to right, #7a4dff, #b07aff);
}
.reflection-cancel-btn {
background: transparent;
padding: 0.75rem 1.5rem;
font-size: 1.125rem;
line-height: 1.75rem;
color: var(--reflection-cancel-text, #5b0bb5);
border-color: var(--reflection-cancel-border, rgba(91, 11, 181, 0.25));
border-radius: 40px;
}
.privacy-panel {
position: relative;
overflow: hidden;
border-radius: 20px;
border: 1px solid #b39ddb;
background: linear-gradient(to bottom right, #30155E, #3e2965);
}
.privacy-panel::before {
content: '';
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
}
.privacy-content {
position: relative;
z-index: 1;
padding: 1rem;
}
.privacy-row {
margin-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.privacy-row .card-form {
display: flex;
}
.privacy-summary {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.privacy-icon {
display: flex;
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
color: white;
font-size: 1.25rem;
}
.privacy-mode {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 600;
color: white;
}
.privacy-status {
font-size: 0.875rem;
line-height: 1.25rem;
color: rgba(255, 255, 255, 0.8);
}
.privacy-description {
font-size: 0.875rem;
line-height: 1.375rem;
color: rgba(255, 255, 255, 0.9);
}
.privacy-switch {
position: relative;
flex-shrink: 0;
width: 3rem;
height: 1.5rem;
border: 0;
border-radius: 1rem;
background-color: rgba(255, 255, 255, 0.3);
cursor: pointer;
}
.privacy-knob {
position: absolute;
top: 0.125rem;
left: 0.125rem;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background-color: white;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
transition: left 150ms;
}
.privacy-switch[aria-checked=true] .privacy-knob {
left: 1.625rem;
}
.card-wall {
margin-top: 1rem;
display: flex;
flex-direction: column;
align-items: center;
}
.prose-cut {
-webkit-mask-image: linear-gradient(to bottom, #000 max(40%, calc(100% - 6rem)), transparent);
mask-image: linear-gradient(to bottom, #000 max(40%, calc(100% - 6rem)), transparent);
}
.subscribe-cta {
text-align: center;
color: #e070fc;
}
.paywall {
background-color: #1d1818;
color: white;
font-size: 1.125rem;
line-height: 1.75rem;
}
.paywall form {
display: flex;
justify-content: center;
}
.paywall-heading {
border-bottom: 1px solid rgb(255 255 255 / 0.3);
padding-bottom: 0.5rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
}
.mt-3 {
margin-top: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.btn-chip {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.75rem;
border: 1px solid rgb(var(--foreground-rgb) / 0.3);
background: transparent;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
color: rgb(var(--foreground-rgb));
font-family: inherit;
cursor: pointer;
transition: background-color 150ms;
}
.btn-chip:hover {
background-color: rgb(var(--foreground-rgb) / 0.05);
}
.btn-danger, .btn-upgrade {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 40px;
border: 1px solid rgba(255, 255, 255, 0.5);
color: white;
font-family: inherit;
cursor: pointer;
transition: opacity 150ms;
}
.btn-danger:hover, .btn-upgrade:hover {
opacity: 0.9;
}
.btn-danger {
background-color: #8b0000;
padding: 0.5rem 1rem;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 500;
}
.btn-upgrade {
background-color: rgba(193, 62, 190, 0.35);
padding: 0.75rem 1.5rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: bold;
}
.text-center {
text-align: center;
}
.account-page > * + * {
margin-top: 1.5rem;
}
.account-page {
color: rgb(var(--foreground-rgb));
}
.account-heading {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
}
.account-image {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.account-image-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1rem;
}
.account-avatar {
width: 6rem;
height: 6rem;
border-radius: 9999px;
background-color: rgba(93, 76, 146, 0.4);
object-fit: cover;
}
.account-image-form {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.file-input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.file-input:focus-visible + label {
outline: 2px solid #6764fc;
}
.file-chosen {
display: none;
text-align: center;
font-size: 0.75rem;
line-height: 1rem;
color: rgb(var(--foreground-rgb));
}
.file-input:valid ~ .file-chosen {
display: block;
}
.account-subscription > * + * {
margin-top: 1rem;
}
.account-delete-panel {
background-color: var(--background);
color: rgb(var(--foreground-rgb));
text-align: center;
}
.account-delete-panel .button-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
#map {
width: 100%;
height: 50vh;
min-height: 20rem;
}
.map-marker {
width: 1.5em;
height: 1.5em;
background-size: cover;
cursor: pointer;
}
.map-panel {
position: fixed;
inset: auto 1rem 1rem 1rem;
z-index: 999;
display: flex;
flex-direction: column;
gap: 1rem;
width: auto;
max-width: none;
max-height: 60vh;
margin: 0;
overflow-y: auto;
border: none;
border-radius: 30px;
background-color: rgba(97, 42, 180, 0.7);
padding: 1.25rem;
color: white;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
backdrop-filter: blur(12px);
}
.map-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.map-panel-heading {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
}
.map-panel-dreams {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.map-panel-link {
display: block;
color: inherit;
text-decoration: none;
}
.map-panel-card {
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.1);
padding: 0.625rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.map-panel-card p {
margin: 0.5rem 0;
font-size: 1rem;
line-height: 1.5rem;
color: white;
}
.map-panel-card strong {
color: #e070fc;
}
.map-panel-meaning strong {
color: white;
}
#toasts {
position: fixed;
top: 1.25rem;
left: 0.625rem;
right: 0.625rem;
z-index: 1000;
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
gap: 0.5rem;
pointer-events: none;
}
.toast {
position: static;
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
margin: 0;
border: none;
border-left: 4px solid #b39ddb;
border-radius: 0.5rem;
padding: 1rem;
color: white;
background: linear-gradient(to bottom right, #6764fc, #3e2965);
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
pointer-events: auto;
animation: toast-in 0.3s ease forwards, toast-out 0.3s ease 4s forwards;
}
.toast-success {
background: linear-gradient(to bottom right, #6764fc, #30155e);
}
.toast-error {
background: linear-gradient(to bottom right, #ef4444, #dc2626);
border-left-color: #b91c1c;
}
.toast-warning {
background: linear-gradient(to bottom right, #f59e0b, #d97706);
border-left-color: #b45309;
}
.toast-message {
flex: 1;
font-size: 0.875rem;
line-height: 1.375;
font-weight: 500;
}
.toast form, .app-popup form {
display: contents;
}
.toast-close {
display: flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
padding: 0;
border: none;
border-radius: 9999px;
background: transparent;
color: inherit;
font-size: 1.125rem;
font-weight: bold;
font-family: inherit;
cursor: pointer;
transition: background-color 150ms;
}
.toast-close:hover {
background-color: rgba(255, 255, 255, 0.2);
}
@keyframes toast-in {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes toast-out {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
visibility: hidden;
}
}
.app-popup[open] {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
border: none;
padding: 1rem;
background-color: rgb(0 0 0 / 0.7);
color: rgb(var(--foreground-rgb));
animation: app-popup-in 0.3s ease-in-out 1.5s both;
}
.app-popup-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
width: 100%;
max-width: 28rem;
}
.app-popup-panel {
position: relative;
background: var(--popup-surface, #c1c9f9);
text-align: center;
gap: 0;
}
.app-popup-close {
position: absolute;
right: 1rem;
top: 0.75rem;
border: none;
background: transparent;
padding: 0;
font-size: 1.875rem;
line-height: 1;
color: inherit;
font-family: inherit;
cursor: pointer;
}
.app-popup-title {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
}
.app-popup-description {
margin-top: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
.app-popup-store {
display: inline-flex;
justify-content: center;
margin-top: 1rem;
}
.app-popup-phones {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
overflow: hidden;
}
.app-popup-phones img {
width: 6rem;
height: 12rem;
border-radius: 1rem;
object-fit: cover;
}
.app-popup-choice {
text-align: center;
font-size: 0.875rem;
line-height: 1.25rem;
color: #00c8ff;
}
.app-popup-choice a {
font-weight: bold;
color: inherit;
}
.app-popup-choice a:hover {
text-decoration: underline;
}
.app-popup-choice .btn-secondary {
padding: 0.25rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
@keyframes app-popup-in {
from {
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
}
to {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
.site-footer {
width: 100%;
padding: 1.5rem 0;
text-align: center;
}
.site-footer > * + * {
margin-top: 0.25rem;
}
.app-icons {
display: flex;
justify-content: center;
}
.app-icons img {
margin: 0.25rem;
}
.text-muted {
font-size: 0.875rem;
line-height: 1.25rem;
color: rgb(var(--foreground-rgb) / 0.8);
}
.link-accent {
color: #6764fc;
text-decoration: underline;
transition: opacity 150ms;
}
.link-accent:hover {
opacity: 0.8;
}
@media (min-width: 640px) {
.page-container {
padding: 0 1.5rem;
}
.page-section {
padding: 1.5rem;
}
}
@media (min-width: 768px) {
.site-brand h1 {
font-size: 1.375rem;
}
#map {
height: calc(100vh - 14rem);
}
.map-panel {
inset: 6rem 1.5rem 1.5rem auto;
width: 28rem;
max-height: calc(100vh - 8rem);
}
.dictionary-nav .nav-menu {
min-height: 0;
}
.nav-menu-label {
width: auto;
text-align: left;
}
#toasts {
left: auto;
right: 1.25rem;
}
.toast {
min-width: 300px;
max-width: 400px;
}
.app-popup-phones img {
width: 8rem;
height: 16rem;
}
}
@media (prefers-color-scheme: dark) {
:root {
--background: rgb(48 21 94);
--foreground-rgb: 255 255 255;
--reflection-background: linear-gradient(180deg, #441d6eef 0%, #5b0bb5 100%);
--reflection-text: #ffffff;
--reflection-subtext: #d8bfff;
--reflection-textarea-bg: #111827;
--reflection-textarea-text: #ffffff;
--reflection-cancel-text: #ffffff;
--reflection-cancel-border: rgba(255, 255, 255, 0.3);
--popup-surface: #1a133e;
}
.link-accent {
color: #b39ddb;
}
.art-search input, .art-search button {
background-color: #1d1818;
color: white;
}
.input-field, .textarea-field {
background-color: #1d1818;
color: white;
}
.streaming-panel {
border-color: rgb(224 112 252 / 0.3);
background: linear-gradient(to bottom right, rgba(97,42,180,0.15), rgba(224,112,252,0.15)), rgba(97,42,180,0.35);
box-shadow: none;
}
.prose-streaming, .prose-streaming p, .prose-streaming strong, .prose-streaming h1, .prose-streaming h2, .prose-streaming h3, .prose-streaming h4 {
color: white;
}
}