:root {
  /**
   * COLORS
   */
  --backdrop-background: #000000;
  --reaction-active: #ff4261;

  /* Light theme */
  --primary-light: #39608f;
  --on-primary-light: #ffffff;
  --tertiary-light: #6c5677;
  --on-tertiary-light: #ffffff;
  --background-light: #f8f9ff;
  --on-background-light: #191c20;
  --surface-light: #f8f9ff;
  --surface-container-light: #ecedf4;
  --surface-container-highest-light: #e1e2e8;
  --on-surface-light: #191c20;
  --on-surface-disabled-light: #191c201f;
  --on-surface-disabled-text-light: #191c2061;
  --surface-variant-light: #dfe2eb;
  --on-surface-variant-light: #43474e;
  --outline-light: #73777f;
  --outline-variant-light: #c3c6cf;
  --secondary-container-light: #d7e3f8;
  --on-secondary-container-light: #111c2b;
  --error-light: #ba1a1a;
  --on-error-light: #ffffff;
  --on-error-container-light: #410002;
  --inverse-primary-light: #a3c9fe;
  --inverse-surface-light: #2e3035;
  --inverse-on-surface-light: #eff0f7;

  /* Dark theme */
  --primary-dark: #a3c9fe;
  --on-primary-dark: #00315b;
  --tertiary-dark: #d8bde3;
  --on-tertiary-dark: #3c2947;
  --background-dark: #111418;
  --on-background-dark: #e1e2e8;
  --surface-dark: #111418;
  --surface-container-dark: #1d2024;
  --surface-container-highest-dark: #32353a;
  --on-surface-dark: #e1e2e8;
  --on-surface-disabled-dark: #e1e2e81f;
  --on-surface-disabled-text-dark: #e1e2e861;
  --surface-variant-dark: #43474e;
  --on-surface-variant-dark: #c3c6cf;
  --outline-dark: #8d9199;
  --outline-variant-dark: #43474e;
  --secondary-container-dark: #3c4758;
  --on-secondary-container-dark: #d7e3f8;
  --error-dark: #ffb4ab;
  --on-error-dark: #690005;
  --on-error-container-dark: #ffdad6;
  --inverse-primary-dark: #39608f;
  --inverse-surface-dark: #e1e2e8;
  --inverse-on-surface-dark: #2e3035;

  /**
   * TYPOGRAPHY
   */

  /* Font family */
  --font-primary: "Inter", sans-serif;
  --font-monospace: "Roboto Mono", monospace;

  /* Font size */
  --fs-base: 62.5%;
  --fs-display-large: 5.7rem;
  --fs-display-medium: 4.5rem;
  --fs-display-small: 3.6rem;
  --fs-headline-large: 3.2rem;
  --fs-headline-medium: 2.8rem;
  --fs-headline-small: 2.4rem;
  --fs-title-large: 2.2rem;
  --fs-title-medium: 1.6rem;
  --fs-title-small: 1.4rem;
  --fs-body-large: 1.6rem;
  --fs-body-medium: 1.4rem;
  --fs-body-small: 1.2rem;
  --fs-label-large: 1.4rem;
  --fs-label-medium: 1.2rem;
  --fs-label-small: 1.1rem;

  /* Line height */
  --lh-display-large: 64px;
  --lh-display-medium: 52px;
  --lh-display-small: 44px;
  --lh-headline-large: 40px;
  --lh-headline-medium: 36px;
  --lh-headline-small: 32px;
  --lh-title-large: 28px;
  --lh-title-medium: 24px;
  --lh-title-small: 20px;
  --lh-body-large: 24px;
  --lh-body-medium: 20px;
  --lh-body-small: 16px;
  --lh-label-large: 20px;
  --lh-label-medium: 16px;
  --lh-label-small: 16px;

  /* Font weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Letter spacing */
  --ls-n-025: -0.25px;
  --ls-p-010: 0.1px;
  --ls-p-015: 0.15px;
  --ls-p-025: 0.25px;
  --ls-p-040: 0.4px;
  --ls-p-050: 0.5px;

  /**
   * SPACING
   */
  --space-base: 4px;
  --space-05: calc(var(--space-base) * 0.5);
  --space-1: calc(var(--space-base) * 1);
  --space-2: calc(var(--space-base) * 2);
  --space-3: calc(var(--space-base) * 3);
  --space-4: calc(var(--space-base) * 4);
  --space-5: calc(var(--space-base) * 5);
  --space-6: calc(var(--space-base) * 6);
  --space-7: calc(var(--space-base) * 7);
  --space-8: calc(var(--space-base) * 8);
  --space-9: calc(var(--space-base) * 9);
  --space-10: calc(var(--space-base) * 10);
  --space-11: calc(var(--space-base) * 11);
  --space-12: calc(var(--space-base) * 12);
  --space-13: calc(var(--space-base) * 13);
  --space-14: calc(var(--space-base) * 14);
  --space-15: calc(var(--space-base) * 15);
  --space-16: calc(var(--space-base) * 16);
  --space-17: calc(var(--space-base) * 17);
  --space-18: calc(var(--space-base) * 18);
  --space-19: calc(var(--space-base) * 19);
  --space-20: calc(var(--space-base) * 20);

  /**
   * BOX SHADOW
   */
  --shadow-1: 0px 1px 3px 1px #00000026, 0px 1px 2px 0px #0000004d;
  --shadow-2: 0px 2px 6px 2px #00000026, 0px 1px 2px 0px #0000004d;
  --shadow-3: 0px 1px 3px 0px #0000004d, 0px 4px 8px 3px #00000026;
  --shadow-4: 0px 2px 3px 0px #0000004d, 0px 6px 10px 4px #00000026;
  --shadow-5: 0px 4px 4px 0px #0000004d, 0px 8px 12px 6px #00000026;

  /**
   * BORDER RADIUS
   */
  --radius-extra-small: 4px;
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-extra-large: 28px;
  --radius-full: 1000px;

  /**
   * TRANSITION
   */

  /* Transition duration */
  --tr-duration-short-1: 50ms;
  --tr-duration-short-2: 100ms;
  --tr-duration-short-3: 150ms;
  --tr-duration-short-4: 200ms;
  --tr-duration-medium-1: 250ms;
  --tr-duration-medium-2: 300ms;
  --tr-duration-medium-3: 350ms;
  --tr-duration-medium-4: 400ms;
  --tr-duration-long-1: 450ms;
  --tr-duration-long-2: 500ms;
  --tr-duration-long-3: 550ms;
  --tr-duration-long-4: 600ms;
  --tr-duration-extra-long-1: 700ms;
  --tr-duration-extra-long-2: 800ms;
  --tr-duration-extra-long-3: 900ms;
  --tr-duration-extra-long-4: 1000ms;

  /* Transition easing */
  --tr-easing-linear: cubic-bezier(0, 0, 1, 1);
  --tr-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --tr-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --tr-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --tr-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --tr-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --tr-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

  /**
   * OTHERS
   */
  --top-app-bar-height: calc(var(--space-base) * 16);
  --footer-height: 64px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --primary: var(--primary-light);
    --on-primary: var(--on-primary-light);
    --tertiary: var(--tertiary-light);
    --on-tertiary: var(--on-tertiary-light);
    --background: var(--background-light);
    --on-background: var(--on-background-light);
    --surface: var(--surface-light);
    --surface-container: var(--surface-container-light);
    --surface-container-highest: var(--surface-container-highest-light);
    --on-surface: var(--on-surface-light);
    --on-surface-disabled: var(--on-surface-disabled-light);
    --on-surface-disabled-text: var(--on-surface-disabled-text-light);
    --surface-variant: var(--surface-variant-light);
    --outline: var(--outline-light);
    --outline-variant: var(--outline-variant-light);
    --secondary-container: var(--secondary-container-light);
    --on-secondary-container: var(--on-secondary-container-light);
    --error: var(--error-light);
    --on-error: var(--on-error-light);
    --on-error-container: var(--on-error-container-light);
    --inverse-primary: var(--inverse-primary-light);
    --inverse-surface: var(--inverse-surface-light);
    --inverse-on-surface: var(--inverse-on-surface-light);
  }

  .logo .light {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --primary: var(--primary-dark);
    --on-primary: var(--on-primary-dark);
    --tertiary: var(--tertiary-dark);
    --on-tertiary: var(--on-tertiary-dark);
    --background: var(--background-dark);
    --on-background: var(--on-background-dark);
    --surface: var(--surface-dark);
    --surface-container: var(--surface-container-dark);
    --surface-container-highest: var(--surface-container-highest-dark);
    --on-surface: var(--on-surface-dark);
    --on-surface-disabled: var(--on-surface-disabled-dark);
    --on-surface-disabled-text: var(--on-surface-disabled-text-dark);
    --surface-variant: var(--surface-variant-dark);
    --on-surface-variant: var(--on-surface-variant-dark);
    --outline: var(--outline-dark);
    --outline-variant: var(--outline-variant-dark);
    --secondary-container: var(--secondary-container-dark);
    --on-secondary-container: var(--on-secondary-container-dark);
    --error: var(--error-dark);
    --on-error: var(--on-error-dark);
    --on-error-container: var(--on-error-container-dark);
    --inverse-primary: var(--inverse-primary-dark);
    --inverse-surface: var(--inverse-surface-dark);
    --inverse-on-surface: var(--inverse-on-surface-dark);
  }

  .logo .dark {
    display: none;
  }
}

/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

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

a,
img,
span,
label,
input,
button,
textarea {
  display: block;
}

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

img {
  height: auto;
}

input,
button,
textarea {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
}

input,
textarea,
button {
  outline: none;
  width: 100%;
}

/*-----------------------------------*\
  #BASE
\*-----------------------------------*/
html {
  scroll-behavior: smooth;
  font-size: var(--fs-base);
}
body {
  background: var(--background);
  color: var(--on-background);
  font-family: var(--font-primary);
  font-size: var(--fs-body-medium);
  line-height: var(--lh-body-medium);
  min-height: 100vh;
  min-height: 100dvh;
}
input {
  caret-color: var(--primary);
}
input[type="file"] {
  display: none;
}
button {
  cursor: pointer;
}
::-webkit-scrollbar {
  width: 12px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background-color: var(--secondary-container);
}
::-webkit-scrollbar-thumb {
  background-color: var(--outline);
  border-radius: var(--radius-full);
}
/*-----------------------------------*\
  * TYPOGRAPHY
\*-----------------------------------*/

.display-large {
  font-size: var(--fs-display-large);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display-large);
  letter-spacing: var(--ls-n-025);
}

.display-medium {
  font-size: var(--fs-display-medium);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display-medium);
}

.display-small {
  font-size: var(--fs-display-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display-small);
}

.content-markdown h1,
.headline-large {
  font-size: var(--fs-headline-large);
  font-weight: var(--fw-regular);
  line-height: var(--lh-headline-large);
}

.content-markdown h2,
.headline-medium {
  font-size: var(--fs-headline-medium);
  font-weight: var(--weight-regular);
  line-height: var(--lh-headline-medium);
}

.content-markdown h3,
.headline-small {
  font-size: var(--fs-headline-small);
  font-weight: var(--weight-regular);
  line-height: var(--lh-headline-small);
}

.content-markdown h4,
.title-large {
  font-size: var(--fs-title-large);
  font-weight: var(--fw-regular);
  line-height: var(--lh-title-large);
}

.content-markdown h5,
.title-medium {
  font-size: var(--fs-title-medium);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title-medium);
  letter-spacing: var(--ls-p-015);
}

.content-markdown h6,
.title-small {
  font-size: var(--fs-title-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title-small);
  letter-spacing: var(--ls-p-010);
}

.content-markdown,
.body-large {
  font-size: var(--fs-body-large);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body-large);
  letter-spacing: var(--ls-p-050);
}

.body-medium {
  font-size: var(--fs-body-medium);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body-medium);
  letter-spacing: var(--ls-p-025);
}

.body-small {
  font-size: var(--fs-body-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body-small);
  letter-spacing: var(--ls-p-040);
}

.label-large {
  font-size: var(--fs-label-large);
  font-weight: var(--fw-medium);
  line-height: var(--lh-label-medium);
  letter-spacing: var(--ls-p-010);
}

.label-medium {
  font-size: var(--fs-label-medium);
  font-weight: var(--fw-medium);
  line-height: var(--lh-label-medium);
  letter-spacing: var(--ls-p-050);
}

.label-small {
  font-size: var(--fs-label-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-label-small);
  letter-spacing: var(--ls-p-050);
}

/*-----------------------------------*\
  * UTILITIES
\*-----------------------------------*/
.text-on-surface-variant {
  color: var(--on-surface-variant);
}
.text-on-surface {
  color: var(--on-surface);
}
.text-primary,
.text-link {
  color: var(--primary);
}
.icon-small {
  font-size: 18px;
}
.text-link:hover {
  text-decoration: underline;
}
.text-error {
  color: var(--error);
}

/*-----------------------------------*\
  * REUSED STYLE
\*-----------------------------------*/
.container {
  padding-inline: var(--space-4);
}
:has(> .state-layer) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.state-layer {
  position: absolute;
  inset: 0;
  background-color: var(--state-layer-bg);
  opacity: 0;
  transition: opacity var(--tr-duration-short-2) var(--tr-easing-standard);
  z-index: -1;
}
:has(> .state-layer):hover .state-layer {
  opacity: 0.08;
}
:has(> .state-layer):where(:focus, :focus-visible) > .state-layer {
  opacity: 0.1;
}

span.material-symbols-rounded {
  display: block;
  height: 1em;
  width: 1em;
  overflow: hidden;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
:has(> .truncate-oneline) {
  min-width: 0;
}
.truncate-oneline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page {
  padding-block: var(--space-5);
}
.page-title {
  padding-block-end: var(--space-4);
}
.image-field-wrapper {
  position: relative;
  border: 1px dashed var(--outline-variant);
}
.image-preview {
  width: 100%;
  overflow: hidden;
  display: none;
}
.image-field-wrapper .image-preview.show {
  display: block;
}
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-field-wrapper .icon-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: none;
}
.image-field-wrapper:has(.image-preview.show) .icon-btn {
  display: grid;
}
.img-holder {
  aspect-ratio: 21/9;
  overflow: hidden;
  border-color: var(--outline);
}
.blog-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

/*-----------------------------------*\
  * COMPONENTS
\*-----------------------------------*/

/* 
* Text field
*/
.text-field-wrapper {
  position: relative;
  height: 56px;
  border-radius: var(--radius-extra-small);
  box-shadow: inset 0 0 0 1px var(--outline);
  background-color: var(--background);
  transition: box-shadow var(--tr-duration-short-4) var(--tr-easing-standard);
}
.text-field-wrapper:hover {
  box-shadow: inset 0 0 0 1px var(--on-surface);
}
.text-field-wrapper:focus-within {
  box-shadow: inset 0 0 0 2px var(--on-primary);
}
.text-field-wrapper.error {
  box-shadow: inset 0 0 0 1px var(--error);
}
.text-field-wrapper.error:hover {
  box-shadow: inset 0 0 0 1px var(--on-error-container);
}
.text-field-wrapper.error:focus-within {
  box-shadow: inset 0 0 0 2px var(--error);
}
.label {
  position: absolute;
  top: 50%;
  left: var(--space-2);
  translate: 0 -50%;
  color: var(--on-surface) --outline-variant;
  background-color: inherit;
  padding-inline: var(--space-2);
  transform-origin: center left;
  transition: var(--tr-duration-short-4) var(--tr-easing-standard);
  transition-property: color, translate, scale;
  pointer-events: none;
  user-select: none;
}
.text-field-wrapper:hover .label {
  color: var(--on-surface);
}
.text-field-wrapper.error:hover .label {
  color: var(--on-error-container);
}
.text-field-wrapper:focus-within .label,
.text-field-wrapper:has(.text-field:not(:placeholder-shown)) .label {
  translate: 2px -40px;
  scale: 0.75;
  color: var(--primary);
}
.text-field-wrapper.error .label {
  color: var(--error);
}
.text-field {
  height: inherit;
  color: var(--on-surface);
  padding-inline: var(--space-4);
}

.text-field-wrapper.error .text-field {
  caret-color: var(--error);
}
.text-field-wrapper.error:hover .text-field {
  caret-color: var(--on-error-container);
}
.main {
  padding-block-start: var(--top-app-bar-height);
  min-height: calc(100vh - var(--footer-height));
  min-height: calc(100dvh - var(--footer-height));
}

/* 
 * Common button
*/
.btn {
  height: 40px;
  max-width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-full);
  padding-inline: var(--space-6);
  cursor: pointer;
  transition: box-shadow var(--tr-duration-short-2) var(--tr-easing-standard);
}
.btn-fill {
  background-color: var(--primary);
  color: var(--on-primary);
  --state-layer-bg: var(--on-primary);
}
.btn-fill:hover:not(:focus, [disabled]) {
  box-shadow: var(--shadow-1);
}
:is(.btn-fill, .btn.filled-tonal)[disabled] {
  background-color: var(--on-surface-disabled);
  color: var(--on-surface-disabled-text);
  pointer-events: none;
  user-select: none;
}
.btn-text {
  padding-inline: var(--space-3);
  color: var(--primary);
  --state-layer-bg: var(--primary);
}
.btn :where(.leading-icon, .trailing-icon) {
  font-size: 18px;
}
.btn:has(> .leading-icon) {
  padding-inline-start: var(--space-4);
}
.btn:has(> .trailing-icon) {
  padding-inline-end: var(--space-4);
}
.btn.filled-tonal {
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
  --state-layer-bg: var(--on-secondary-container);
}
.btn-text.error {
  color: var(--error);
  --state-layer-bg: var(--error);
}
.btn-fill.error {
  background-color: var(--error);
  color: var(--on-error);
  --state-layer-bg: var(--on-error);
}

/* 
 * Snackbar
*/
.snackbar-wrapper {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 4;
}
.snackbar {
  background-color: var(--inverse-surface);
  color: var(--inverse-on-surface);
  min-height: 48px;
  max-height: max-content;
  max-width: 60ch;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: var(--radius-extra-small);
  box-shadow: var(--shadow-3);
  padding: var(--space-3) var(--space-4);
  animation: snackbar-show var(--tr-duration-medium-4)
    var(--tr-easing-standard-decelerate) forwards;
}

@keyframes snackbar-show {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.snackbar.error {
  background-color: var(--error);
  color: var(--on-error);
}

/** 
 * Avatar
*/
.avatar {
  height: 32px;
  width: 32px;
  min-width: 32px;
  display: grid;
  place-items: center;
  background-color: var(--tertiary);
  color: var(--on-tertiary);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  overflow: hidden;
}

/** 
 * Top App Bar
*/
.top-app-bar {
  background-color: var(--surface);
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  height: var(--top-app-bar-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: var(--space-4);
  translate: 0 0;
  border-block-end: 1px solid var(--outline-variant);
  transition: var(--tr-duration-short-2) var(--tr-easing-linear);
  transition-property: background-color, translate, border-color;
  z-index: 4;
}
.top-app-bar.hide {
  translate: 0 -100%;
}
.top-app-bar.active {
  background-color: var(--surface-container);
  box-shadow: var(--shadow-2);
  border-color: var(--surface-container);
}
.top-app-bar .trailing-action-wrapper {
  display: flex;
  gap: var(--space-4);
  margin-inline-start: var(--space-6);
}
.top-app-bar:has(> .icon-btn) .logo {
  margin-inline-end: auto;
  margin-inline-start: var(--space-4);
}

/** 
 *  Menu
*/
.menu-wrapper {
  position: relative;
}
.menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 230px;
  max-width: 280px;
  background-color: var(--surface-container);
  padding-block: var(--space-2);
  border-radius: var(--radius-extra-small);
  box-shadow: var(--shadow-2);
  transform-origin: top right;
  scale: 0.8;
  opacity: 0;
  visibility: hidden;
  transition: var(--tr-duration-short-3) var(--tr-easing-emphasized-accelerate);
  transition-property: scale, opacity;
  will-change: scale, opacity;
}
.menu.active {
  scale: 1;
  opacity: 1;
  visibility: visible;
  transition: var(--tr-duration-medium-3) var(--tr-easing-emphasized-decelerate);
}
.menu-item {
  height: 48px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-3);
  color: var(--on-surface);
  --state-layer-bg: var(--on-surface);
}
.menu-item .icon {
  color: var(--on-surface-variant);
}

/** 
 *  List Item
*/
.list-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  --state-layer-bg: var(--on-surface);
}
.list-item.small {
  align-items: center;
  padding-block: var(--space-2);
}
.list-item .list-item-link {
  position: absolute;
  inset: 0;
}
.list-item.large {
  position: relative;
  flex-direction: column;
  align-items: stretch;
}
.list-item.large .list-item-text {
  opacity: 0.8;
}
.list-item.large .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-item.large :where(.meta-list, .meta-item, .list-item-actions) {
  display: flex;
  align-items: center;
}
.list-item.large .meta-list {
  gap: var(--space-3);
}
.list-item.large .meta-item {
  gap: var(--space-1);
  opacity: 0.8;
}
.list-item.large .list-item-actions {
  gap: var(--space-2);
  position: relative;
  z-index: 1;
}

/** 
 *  Divider
*/
.divider {
  height: 1px;
  background-color: var(--surface-variant);
  margin-block: var(--space-2);
}

/** 
 *  Icon Button
*/
.icon-btn {
  height: 40px;
  width: 40px;
  min-width: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  --state-layer-bg: var(--on-surface);
}
.icon-btn.active .icon {
  font-variation-settings: "FILL" 1;
}
.icon-btn.filled-tonal {
  background-color: var(--surface-container-highest);
  color: var(--on-surface-variant);
  --state-layer-bg: var(--on-surface-variant);
}
.icon-btn.filled-tonal.active {
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
  --state-layer-bg: var(--on-secondary-container);
}
.icon-btn.reaction-anim-add .icon {
  animation: reaction-anim-add var(--tr-duration-extra-long-1)
    var(--tr-easing-emphasized) forwards;
}
@keyframes reaction-anim-add {
  0%,
  29.9% {
    color: var(--on-surface-variant);
    font-variation-settings: "FILL" 0;
  }
  20%,
  30% {
    scale: 0.9;
  }
  50% {
    scale: 1.2;
  }
  30%,
  100% {
    color: var(--reaction-active);
    font-variation-settings: "FILL" 1;
  }
}
.icon-btn.reaction-anim-remove .icon {
  animation: reaction-anim-remove var(--tr-duration-long-2)
    var(--tr-easing-emphasized) forwards;
}
@keyframes reaction-anim-remove {
  0%,
  29.9% {
    color: var(--reaction-active);
    font-variation-settings: "FILL" 1;
  }
  30%,
  50% {
    scale: 0.9;
  }
  70% {
    scale: 1;
  }
  30%,
  100% {
    color: var(--on-surface-variant);
    font-variation-settings: "FILL" 0;
  }
}
.icon-btn.icon-btn[disabled] {
  background-color: var(--on-surface-disabled);
  color: var(--on-surface-disabled-text);
  pointer-events: none;
  user-select: none;
}

/** 
 *  Progress bar
*/
.progress-bar {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 4px;
  transform: scaleY(0);
  transform-origin: top;
  transition: var(--tr-duration-short-2) var(--tr-easing-emphasized-decelerate);
  z-index: 1;
}
.progress-bar.loading {
  transform: scaleY(1);
}
.progress-bar.loading-end {
  transition-delay: var(--tr-duration-short-3);
  transform: scaleY(0);
}
.progress-active-indicator {
  height: inherit;
  transform: scaleX(0);
  transform-origin: left;
  background-color: var(--primary);
}
.progress-bar.loading .progress-active-indicator {
  transform: scaleX(0.9);
  transition: transform 2s var(--tr-easing-emphasized-decelerate)
    var(--tr-duration-short-2);
}
.progress-bar.loading-end .progress-active-indicator {
  transform: scaleX(1);
  transition: transform var(--tr-duration-short-2)
    var(--tr-easing-emphasized-accelerate);
}

/* 
 *  Card
*/
.card {
  background-color: var(--surface-container-highest);
  border-radius: var(--radius-medium);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  --state-layer-bg: var(--on-surface);
}
.card-content {
  flex-grow: 1;
  padding: var(--space-4);
}
.card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}
.card-meta .trailing-text {
  margin-inline-start: auto;
}
.card .card-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-block-start: 1px solid var(--surface-variant);
}
.card-footer .wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 
 *  Pagination
*/
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}

/* 
 * Dialog
*/
.dialog-root,
.dialog-backdrop {
  position: fixed;
  inset: 0;
}
.dialog-root {
  display: grid;
  place-items: center;
  padding-inline: var(--space-4);
  visibility: hidden;
  isolation: isolate;
  z-index: 6;
}
.dialog-root.active {
  visibility: visible;
}
body:has(.dialog-root.active) {
  overflow: hidden;
}
.dialog-backdrop {
  background-color: var(--backdrop-background);
  z-index: -1;
}
.dialog-root.active .dialog-backdrop {
  opacity: 0;
  animation: dialog-backdrop var(--tr-duration-medium-4)
    cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
@keyframes dialog-backdrop {
  to {
    opacity: 0.5;
  }
}
.dialog-container {
  min-width: 280px;
  max-width: 560px;
  padding: var(--space-6);
  background-color: var(--surface-container-highest);
  border-radius: var(--radius-extra-large);
  box-shadow: var(--space-3);
}
.dialog-root.active .dialog-container {
  scale: 0.8;
  opacity: 0;
  animation: dialog-container var(--tr-duration-short-3)
    cubic-bezier(0, 0, 0.2, 1) forwards;
}
@keyframes dialog-container {
  to {
    scale: 1;
    opacity: 1;
  }
}
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: var(--space-4);
}
.dialog-actions {
  margin-block-start: var(--space-6);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/*-----------------------------------*\
  * REGISTER & LOGIN PAGE
\*-----------------------------------*/

.form-section {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-items: center;
}
.form-card {
  max-width: 440px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.form-card .card-header {
  text-align: center;
}
.form-card .logo {
  max-width: 200px;
  height: 40px;
  margin-inline: auto;
  margin-block-end: var(--space-3);
}
.form-card .form {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-8);
}
.form-card .card-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
}
.form-card .btn {
  max-width: 100%;
}

/*-----------------------------------*\
  *  HOME PAGE
\*-----------------------------------*/
.home-page .blog-list {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: stretch;
}
/* .home-page .card:not(:first-child) .card-banner {
  display: none;
} */

/*-----------------------------------*\
  *  CREATE BLOG
\*-----------------------------------*/
.blog-write-form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--surface-container);
  border-radius: var(--radius-large);
}
.create-blog-page .image-field-wrapper {
  display: flex;
  min-height: 200px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  border-radius: var(--radius-large);
}
.image-field-wrapper .text {
  text-align: center;
  padding-inline: var(--space-4);
  opacity: 0.8s;
}
.create-blog-page .image-preview {
  aspect-ratio: 21/9;
}
.create-blog-page:has(.image-preview.show)
  :where(.image-field, .text, .image-field-wrapper .btn) {
  display: none;
}
.create-blog-page :where(.title-field, .textarea) {
  font-family: var(--font-monospace);
}
.create-blog-page .textarea {
  resize: none;
}
.create-blog-page .footer-action {
  display: flex;
  justify-content: flex-end;
}

/*-----------------------------------*\
  *  BLOG DETAIL PAGE
\*-----------------------------------*/
.blog-detail-page {
  padding-block-start: 0;
}
.blog-detail-page .container {
  padding-inline: 0;
}
.blog-detail {
 
  position: relative;
}
.blog-author {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  padding-block: var(--space-7) var(--space-6);
}
.blog-author .leading-text {
  margin-inline-end: auto;
}
.blog-content,
.more-blog {
  padding-inline: var(--space-6);
}
.blog-content,
.blog-content .title {
  margin-block-end: var(--space-6);
}
.blog-actions {
  position: sticky;
  bottom: var(--space-4);
  max-width: max-content;
  margin-inline: auto;
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-2);
  background-color: var(--surface-container);
  padding-inline: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--outline-variant);
  z-index: 4;
}
.blog-actions .action-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.blog-actions .action-item span {
  display: inline;
}
.more-blog {
  margin-block-start: var(--space-6);
}
.more-blog .title {
  margin-block-end: var(--space-3);
}
.more-blog .blog-list {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  margin-inline: -16px;
  padding-inline: var(--space-4);
  gap: var(--space-3);
  scroll-snap-type: inline mandatory;
  overflow-x: auto;
}
.more-blog .blog-list::-webkit-scrollbar {
  display: none;
}
.more-blog .card {
  min-width: 280px;
  width: 100%;
}

/* for markdown */
.content-markdown :is(a, span) {
  display: inline;
}
.content-markdown :is(h1, h2, h3, h4, h5, h6) {
  color: var(--on-surface);
  margin-block: var(--space-5) var(--space-4);
}
.content-markdown :is(ul, ol, blockquote, hr, img) {
  margin-block: var(--space-4);
}
.content-markdown li {
  list-style: initial;
  margin-inline-start: var(--space-6);
  margin-block: var(--space-2);
}
.content-markdown p {
  margin-block: var(--space-3);
}
.content-markdown blockquote {
  background-color: var(--surface-container);
  padding: var(--space-1) var(--space-5);
  font-style: italic;
  letter-spacing: 0.75px;
}
.content-markdown hr {
  max-width: 120px;
  margin-inline: auto;
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-full);
}
.content-markdown a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-position: from-font;
}
.content-markdown img {
  max-width: 100%;
  max-height: calc(50vh +180px);
  margin-inline: auto;
  background-color: var(--surface-container);
  border-radius: var(--radius-small);
}
.content-markdown pre {
  border-radius: var(--radius-medium);
  overflow: hidden;
  border: 1 dashed var(--outline-variant);
  margin-block: var(--space-6);
}
.content-markdown code:not(.hljs) {
  display: inline-block;
  background-color: var(--surface-container-highest);
  padding-inline: var(--space-1);
  border-radius: var(--radius-extra-small);
}
.content-markdown tabel {
  display: block;
  border-spacing: 0;
  border-collapse: collapse;
  width: max-content;
  max-width: 100%;
  border-radius: var(--radius-small);
  box-shadow: inset 0 0 0 1px var(--outline-variant);
  overflow: auto;
}
.content-markdown thead,
.content-markdown tbody tr:nth-child(even) {
  background-color: var(--surface-container);
}
.content-markdown :where(th, td) {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--outline-variant);
}

/*-----------------------------------*\
  *  PROFILE PAGE
\*-----------------------------------*/
.profile-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.profile-image {
  height: 160px;
  width: 160px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
}
.bio {
  margin-block: var(--space-3);
}
.profile-meta-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  opacity: 0.8;
  margin-block-end: var(--space-3);
}
.profile-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.profile-page .divider {
  margin-block: var(--space-5);
}

/*-----------------------------------*\
  *  404 Page
\*-----------------------------------*/
.not-found-page .container {
  min-height: calc(
    100vh - var(--top-app-bar-height) - var(--footer-height) - var(--space-12)
  );
  display: grid;
  justify-content: center;
  align-content: center;
  text-align: center;
  gap: var(--space-3);
}
.text-404 {
  max-width: 34ch;
}
.not-found-page .btn-fill {
  margin: auto;
}

/*-----------------------------------*\
  *  DASHBOARD PAGE
\*-----------------------------------*/
.analytics-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2);
  margin-block-end: var(--space-5);
}
.analytics-card {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6);
  background-color: var(--surface-container-highest);
  border-radius: var(--radius-medium);
}
.analytics-icon-box {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background-color: var(--tertiary);
  color: var(--on-tertiary);
  border-radius: var(--radius-medium);
}
.analytics-icon-box .material-symbols-rounded {
  font-variation-settings: "FILL" 1;
}
.analytics-card .card-title {
  font-weight: var(--fw-bold);
}
.post-list {
  background-color: var(--surface-container-highest);
  border-radius: var(--radius-medium);
  padding-block: var(--space-3);
  margin-block-start: var(--space-4);
}
.post-list .list-item:not(:last-child) {
  border-block-end: 1px solid var(--outline-variant);
}

/*-----------------------------------*\
  *  SETTINGS PAGE
\*-----------------------------------*/
.settings-wrapper {
  margin-block-start: var(--space-4);
}
.settings-card {
  padding: var(--space-4);
  background-color: var(--surface-container-highest);
  border-radius: var(--radius-large);
}
.settings-card:not(:last-child) {
  margin-block-end: var(--space-2);
}
.settings-wrapper .title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-block-end: var(--space-4);
}
.avatar-image-field {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-full);
  margin-block-start: var(--space-3);
  border-color: var(--outline);
  overflow: visible;
}
.avatar-image-field .label {
  inset: 0;
  translate: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-2);
  pointer-events: initial;
  cursor: pointer;
}
.avatar-image-field:has(.image-preview.show) .label {
  display: none;
}
.avatar-image-field .image-preview {
  border-radius: var(--radius-full);
  aspect-ratio: 1 / 1;
}
.avatar-image-field .icon-btn {
  top: 0;
  right: 0;
}
.settings-form .text-field-wrapper {
  margin-block-start: var(--space-5);
  background-color: var(--surface-container-highest);
}
.settings-card .card-text {
  margin-block: var(--space-3) var(--space-4);
}

/*-----------------------------------*\
  *  FOOTER
\*-----------------------------------*/
.footer {
  height: var(--footer-height);
  padding-block: var(--space-5);
  text-align: center;
  color: var(--on-surface-variant);
  border-block-start: 1px solid var(--outline-variant);
}
.footer .container {
  opacity: 0.8;
}

/*-----------------------------------*\
  *  RESPONSIVE for learger device
\*-----------------------------------*/
/* 600px */
@media (min-width: 600px) {
  /* 
  HOME PAGE
  */
  .home-page .card:not(:first-child) .card-banner {
    display: block;
  }
}

/* 770px */
@media (min-width: 770px) {
  /* 
   *  REUSED STYLE
  */
  .page {
    padding-block: var(--space-6);
  }
  .page-title {
    font-size: var(--fs-headline-medium);
    line-height: var(--lh-headline-medium);
    margin-block-end: var(--space-6);
  }
  .container {
    max-width: 992px;
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-4);
  }
  .blog-list {
    gap: var(--space-3);
  }

  /*------------
  * COMPONENTS
   -------------*/
  /* Top App Bar */
  .top-app-bar {
    padding-inline: var(--space-6);
  }

  /* Text field */
  .text-field-wrapper {
    background-color: var(--surface-container);
  }
  /* pagination */
  .pagination {
    gap: var(--space-6);
    margin-block-start: var(--space-6);
  }
  /* Card */
  .card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /*
    REGISTER & LOGIN PAGE
  */
  .form-card {
    padding: var(--space-10);
    border-radius: var(--radius-medium);
    background-color: var(--surface-container);
  }
  .form-card .logo {
    margin-block-end: var(--space-2);
  }
  .form-card .form {
    margin-block: var(--space-6);
  }

  /*
     CREATE BLOG PAGE
   */
  .blog-write-form {
    gap: var(--space-6);
    padding: var(--space-6);
  }
  .create-blog-page .title-field {
    font-size: var(--fs-display-medium);
    line-height: var(--lh-display-medium);
  }

  /*
    BLOG DETAIL PAGE
   */
  .blog-detail-page .container {
    padding-inline: var(--space-4);
  }
  .blog-banner {
    border-radius: var(--radius-large);
  }
  .blog-content,
  .more-blog {
    padding-inline: unset;
  }
  .blog-content .title {
    font-size: var(--fs-display-medium);
    line-height: var(--lh-display-medium);
  }
  /*
    PROFILE PAGE
   */
  .profile-card {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }
  .profile-content {
    width: 100%;
    position: relative;
    padding-inline-end: 180px;
  }
  .profile-content .title {
    font-size: var(--fs-headline-large);
    line-height: var(--lh-headline-large);
  }
  .profile-content .btn{
    position: absolute;
    top: 0;
    right: 0;
  }
}

/* 1200px */
@media (min-width: 1200px){
  /* 
   * BLOG DETAIL
  */
  .blog-actions{bottom: var(--space-6);}

  /* 
   * PROFILE PAGE
  */
  .profile-page .divider{
    margin-block: var(--space-6);
  }
  .post-list .list-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* 
   * SETTINGS PAGE
  */
  .settings-card:not(:last-child){
    margin-block-end: var(--space-4);
  }
   .settings-card{
    padding: var(--space-6);
   }
   .settings-form .wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
   }
}

/* Image Actions for Edit Blog */
.image-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.image-actions .btn {
  flex: 1;
  min-width: 120px;
  justify-content: center;
}

.image-actions .btn .leading-icon {
  margin-right: 8px;
}

@media (max-width: 480px) {
  .image-actions {
    flex-direction: column;
  }
  
  .image-actions .btn {
    width: 100%;
  }
}

/* Blog Owner Actions */
.blog-owner-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.blog-owner-actions .btn {
  min-width: 100px;
}

@media (max-width: 480px) {
  .blog-owner-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .blog-owner-actions .btn {
    width: 100%;
  }
}
.image-field-wrapper.drag-active {
  border: 2px dashed var(--primary-light, #39608f);
  background: rgba(163, 201, 254, 0.08);
}
.image-field-wrapper.drag-active .btn {
  background: var(--primary-light, #39608f);
  color: #fff;
}