* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: #0b0e13;
  color: #fff;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
}


/* ==================================================
   EORZEA PROFILE STUDIO HEADER
================================================== */

.studio-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 100%;

  min-height: 68px;

  padding:
    0 22px;

  background:
    #f1eee6;

  border-bottom:
    1px solid #c9c4b8;
}


.studio-logo {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color:
    #111111;

  text-decoration:
    none;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    17px;

  font-weight:
    900;

  letter-spacing:
    -0.035em;
}


.studio-logo-main {
  display:
    inline-block;
}


.studio-logo-box {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    42px;

  padding:
    0 10px;

  background:
    #171717;

  color:
    #ffffff;

  font-weight:
    900;

  letter-spacing:
    -0.02em;
}


.studio-logo:hover
.studio-logo-main {
  opacity:
    .65;
}


.studio-logo:hover
.studio-logo-box {
  background:
    #b79a66;
}


.studio-series-label {
  margin:
    0;

  color:
    #554c42;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .22em;

  white-space:
    nowrap;
}


/* ==================================================
   MAIN HEADER
================================================== */

.site-header {
  max-width: 1100px;

  margin: 0 auto;

  padding:
    60px 20px 38px;

  text-align: center;
}

.site-header h1 {
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 42px;

  font-weight: 400;

  letter-spacing:
    .12em;
}


/* ==================================================
   LANGUAGE
================================================== */

.language-switch {
  display: inline-flex;

  gap: 4px;

  margin:
    26px auto 2px;

  padding: 4px;

  background:
    #0d1119;

  border:
    1px solid #343d4d;

  border-radius:
    7px;
}

.language-button {
  min-width:
    95px;

  padding:
    9px 17px;

  border:
    0;

  border-radius:
    4px;

  background:
    transparent;

  color:
    #929aa7;

  font-size:
    13px;

  font-weight:
    600;

  cursor:
    pointer;
}

.language-button:hover {
  background:
    rgba(183,154,102,.12);

  color:
    #fff;
}

.language-button.active {
  background:
    linear-gradient(
      180deg,
      #c7aa70,
      #ad8d52
    );

  color:
    #fff;
}


/* ==================================================
   DESCRIPTION
================================================== */

.site-subtitle {
  margin:
    16px 0 0;

  color:
    #b79a66;

  font-size:
    15px;

  letter-spacing:
    .18em;
}

.site-description {
  max-width:
    760px;

  margin:
    32px auto 0;

  padding:
    24px 30px;

  background:
    rgba(255,255,255,.025);

  border:
    1px solid #292f3b;

  border-radius:
    8px;
}

.site-description p {
  margin:
    0;

  color:
    #aeb5c1;

  font-size:
    14px;

  line-height:
    1.8;
}

.site-description strong {
  color:
    #fff;

  font-weight:
    700;
}

.site-description .mobile-note {
  margin-top:
    8px;

  color:
    #7f8793;

  font-size:
    12px;
}

.site-description .hashtag-guide {
  margin-top:
    10px;
}


.hashtag-link {
  color:
    #d6c19a;

  font-weight:
    600;

  text-decoration:
    none;

  border-bottom:
    1px solid rgba(214,193,154,.45);
}


/* ==================================================
   SOCIAL
================================================== */

.social-actions {
  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    18px;
}

.x-post-link,
.community-post-link {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    170px;

  padding:
    9px 18px;

  border-radius:
    5px;

  font-size:
    13px;

  font-weight:
    600;

  text-decoration:
    none;
}

.x-post-link {
  border:
    1px solid #b79a66;

  background:
    #171d27;

  color:
    #fff;
}

.community-post-link {
  border:
    1px solid #343d4d;

  color:
    #b7beca;
}

.x-post-link:hover,
.community-post-link:hover {
  border-color:
    #d6c19a;

  color:
    #d6c19a;
}


/* ==================================================
   PANELS
================================================== */

.question-preview-section,
.input-area,
.settings,
.preview-panel,
.export-area-main {
  background:
    #121722;

  border:
    1px solid #2b3240;

  border-radius:
    12px;
}


/* ==================================================
   QUESTION PANEL
================================================== */

.question-preview-section {
  width:
    min(
      calc(100% - 48px),
      820px
    );

  margin:
    0 auto 34px;

  padding:
    28px;
}

.section-heading {
  margin-bottom:
    22px;

  text-align:
    center;
}

.section-heading h2 {
  margin:
    0 0 6px;

  font-family:
    Georgia,
    serif;

  font-weight:
    400;
}

.section-heading p {
  margin:
    0;

  color:
    #818996;

  font-size:
    12px;
}

.question-card-wrap {
  width:
    min(
      100%,
      680px
    );

  margin:
    0 auto;
}


/* ==================================================
   INPUT
================================================== */

.input-area {
  width:
    min(
      calc(100% - 48px),
      1100px
    );

  margin:
    0 auto 34px;

  padding:
    30px;
}

.input-area h2 {
  margin-top:
    0;

  font-family:
    Georgia,
    serif;

  font-weight:
    400;
}

.input-guide {
  margin:
    -5px 0 35px;

  color:
    #858d9a;

  font-size:
    13px;
}

.input-question {
  margin-bottom:
    30px;
}

.input-question label {
  display:
    block;

  margin-bottom:
    9px;

  color:
    #d6c19a;

  font-size:
    15px;

  font-weight:
    600;
}

.input-question textarea,
.input-question input[type="text"] {
  display:
    block;

  width:
    100%;

  padding:
    12px 15px;

  border:
    1px solid #343d4d;

  border-radius:
    6px;

  outline:
    none;

  background:
    #0d1119;

  color:
    #fff;

  font-family:
    inherit;

  font-size:
    16px;

  line-height:
    1.45;
}

.input-question textarea {
  height:
    72px;

  min-height:
    72px;

  max-height:
    72px;

  resize:
    none;

  overflow:
    hidden;
}

.input-question input[type="text"] {
  height:
    48px;
}

.input-question textarea:focus,
.input-question input[type="text"]:focus {
  border-color:
    #b79a66;
}


/* ==================================================
   COUNTERS
================================================== */

.character-count {
  margin-top:
    7px;

  color:
    #858d9a;

  font-size:
    12px;

  text-align:
    right;
}

.character-count.is-warning {
  color:
    #d7b06d;
}

.character-count.is-limit {
  color:
    #e07878;

  font-weight:
    700;
}


/* ==================================================
   Q20
================================================== */

.custom-question-block {
  margin-top:
    42px;

  padding-top:
    28px;

  border-top:
    1px solid #343d4d;
}

.custom-question-title {
  margin-bottom:
    22px;

  color:
    #d6c19a;

  font-size:
    18px;

  font-weight:
    600;
}

.custom-answer-label {
  margin-top:
    22px;
}


/* ==================================================
   EDITOR
================================================== */

.editor-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(500px,1fr);

  gap:
    34px;

  align-items:
    start;

  width:
    min(
      100%,
      1600px
    );

  margin:
    0 auto;

  padding:
    0 24px 34px;
}

.settings,
.preview-panel {
  min-width:
    0;

  padding:
    30px;
}

.settings h2,
.preview-heading h2 {
  margin-top:
    0;

  font-family:
    Georgia,
    serif;

  font-weight:
    400;
}


/* ==================================================
   SETTINGS
================================================== */

.setting-group {
  margin-top:
    30px;

  padding-top:
    28px;

  border-top:
    1px solid #343d4d;
}

.setting-group h3 {
  margin:
    0 0 22px;

  color:
    #d6c19a;

  font-size:
    18px;

  font-weight:
    500;
}

.setting-item {
  margin-bottom:
    25px;
}

.setting-item > label,
.setting-label {
  display:
    block;

  margin-bottom:
    10px;

  color:
    #d6c19a;

  font-size:
    14px;

  font-weight:
    600;
}

.radio-group {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    25px;
}

.radio-group label {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}

.range-row {
  display:
    flex;

  align-items:
    center;

  gap:
    15px;
}

.range-row input[type="range"] {
  width:
    100%;
}

.range-row span {
  min-width:
    56px;

  color:
    #d6c19a;

  font-size:
    13px;

  text-align:
    right;
}


/* ==================================================
   BUTTON
================================================== */

button {
  padding:
    13px 24px;

  border:
    1px solid #b79a66;

  border-radius:
    5px;

  background:
    #171d27;

  color:
    #fff;

  font-size:
    15px;

  cursor:
    pointer;
}


/* ==================================================
   PREVIEW
================================================== */

.preview-heading {
  margin-bottom:
    26px;
}

.preview-heading p {
  color:
    #818996;

  font-size:
    12px;
}

.preview-card-block {
  margin-bottom:
    42px;
}

.preview-card-label {
  color:
    #d6c19a;

  font-size:
    13px;

  font-weight:
    600;
}


/* ==================================================
   CARD FRAME
================================================== */

.card-frame {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    1 / 1;

  overflow:
    hidden;

  background:
    #0a0d13;
}


/* ==================================================
   CARD
================================================== */

.profile-card {
  --preview-scale: .5;
  --answer-scale: 1;

  position:
    absolute;

  left:
    4px;

  top:
    4px;

  width:
    1200px;

  height:
    1200px;

  overflow:
    hidden;

  transform:
    scale(var(--preview-scale));

  transform-origin:
    top left;

  background:
    #101722;

  color:
    #fff;

  border:
    2px solid #a58b5b;
}

.profile-card::after {
  content:
    "";

  position:
    absolute;

  inset:
    25px;

  z-index:
    5;

  border:
    1px solid rgba(165,139,91,.7);

  pointer-events:
    none;
}


.profile-card.light-theme {
  border-color:
    #7f6537;
}

.profile-card.light-theme::after {
  border-color:
    rgba(127,101,55,.85);
}

.profile-card.light-theme .small-title,
.profile-card.light-theme .card-header h2 {
  color:
    #7f6537;
}

.profile-card.light-theme .answer-block {
  border-bottom-color:
    rgba(127,101,55,.58);
}


/* ==================================================
   QUESTION CARD
================================================== */

.question-card-fixed {
  background:
    #f4f1e9;

  color:
    #171717;
}

.question-fixed-background {
  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  background:
    radial-gradient(
      circle at 50% 18%,
      #ffffff 0%,
      #f8f5ee 42%,
      #e7e1d4 100%
    );
}

.question-card-fixed .question-list,
.question-card-fixed .question-list li::marker,
.question-card-fixed .copyright,
.question-card-fixed .card-version,
.question-card-fixed .page-number {
  color:
    #171717;
}


/* ==================================================
   BACKGROUND
================================================== */

.card-background {
  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  overflow:
    hidden;

  background:
    linear-gradient(
      135deg,
      #131e31,
      #0c111b
    );
}

.card-background-image {
  position:
    absolute;

  left:
    0;

  top:
    0;

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    50% 50%;

  transform:
    scale(1);

  transform-origin:
    50% 50%;

  max-width:
    none;

  pointer-events:
    none;
}


/* ==================================================
   OVERLAY
================================================== */

.card-overlay {
  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  background:
    rgba(0,0,0,.45);

  pointer-events:
    none;
}


/* ==================================================
   CONTENT
================================================== */

.card-content {
  position:
    relative;

  z-index:
    2;

  width:
    100%;

  height:
    100%;

  padding:
    85px 90px;
}


/* ==================================================
   CARD HEADER
================================================== */

.card-header {
  margin-bottom:
    50px;

  text-align:
    center;
}

.answer-card .card-header {
  margin-bottom:
    32px;
}

.small-title {
  margin:
    0 0 10px;

  color:
    #a58b5b;

  font-family:
    Georgia,
    serif;

  font-size:
    18px;

  font-weight:
    600;

  letter-spacing:
    .28em;
}

.card-header h2 {
  margin:
    0;

  color:
    #a58b5b;

  font-family:
    Georgia,
    "Hiragino Mincho ProN",
    "Yu Mincho",
    serif;

  font-size:
    48px;

  font-weight:
    400;

  letter-spacing:
    .08em;
}

#card-1 .card-header {
  margin-bottom:
    52px;
}

#card-1 .small-title {
  font-size:
    22px;
}

#card-1 .card-header h2 {
  font-size:
    56px;
}


/* ==================================================
   QUESTIONS
================================================== */

.question-columns {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  column-gap:
    44px;
}

.question-list {
  margin:
    0;

  padding-left:
    48px;

  font-size:
    26px;

  line-height:
    1.46;
}

.question-list li {
  margin-bottom:
    18px;

  padding-left:
    8px;
}

.question-list li::marker {
  font-family:
    Georgia,
    serif;

  font-size:
    24px;

  font-weight:
    600;
}

html[lang="en"] #card-1 .card-header h2 {
  font-size:
    52px;
}

html[lang="en"] .question-list {
  font-size:
    22px;

  line-height:
    1.4;
}

html[lang="en"] .question-list li {
  margin-bottom:
    15px;
}


/* ==================================================
   ANSWERS
================================================== */

.answer-block {
  margin-bottom:
    14px;

  padding-bottom:
    12px;

  border-bottom:
    1px solid rgba(165,139,91,.45);
}

.question {
  margin:
    0 0 6px;

  font-size:
    16px;

  font-weight:
    600;

  line-height:
    1.35;
}

.answer-text {
  margin:
    0;

  min-height:
    30px;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    serif;

  font-size:
    calc(
      var(--answer-font-size,24px)
      *
      var(--answer-scale,1)
    );

  line-height:
    1.38;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;

  word-break:
    break-word;
}

.answer-text:empty::before {
  content:
    "—";

  opacity:
    .55;
}


/* ==================================================
   COMPACT
================================================== */

.answer-card.compact-1 {
  --answer-scale:
    .94;
}

.answer-card.compact-1 .card-header {
  margin-bottom:
    26px;
}

.answer-card.compact-1 .answer-block {
  margin-bottom:
    10px;

  padding-bottom:
    9px;
}

.answer-card.compact-1 .question {
  font-size:
    15px;
}

.answer-card.compact-2 {
  --answer-scale:
    .88;
}

.answer-card.compact-2 .card-header {
  margin-bottom:
    20px;
}

.answer-card.compact-2 .answer-block {
  margin-bottom:
    7px;

  padding-bottom:
    7px;
}

.answer-card.compact-2 .question {
  font-size:
    14px;
}


/* ==================================================
   TEXT
================================================== */

.text-white,
.text-white .question,
.text-white .answer-text,
.text-white .copyright,
.text-white .card-version,
.text-white .page-number {
  color:
    #fff;
}

.text-black,
.text-black .question,
.text-black .answer-text,
.text-black .copyright,
.text-black .card-version,
.text-black .page-number {
  color:
    #111;
}


/* ==================================================
   CARD FOOTER
================================================== */

.copyright,
.card-version,
.page-number {
  line-height:
    1;
}

.copyright {
  position:
    absolute;

  left:
    90px;

  bottom:
    58px;

  margin:
    0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    14px;
}

.card-version {
  position:
    absolute;

  left:
    50%;

  bottom:
    58px;

  transform:
    translateX(-50%);

  width:
    520px;

  margin:
    0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    11px;

  text-align:
    center;

  opacity:
    .72;
}

.page-number {
  position:
    absolute;

  right:
    90px;

  bottom:
    58px;

  margin:
    0;

  font-family:
    Georgia,
    serif;

  font-size:
    18px;
}


/* ==================================================
   EXPORT
================================================== */

.export-area-main {
  width:
    min(
      calc(100% - 48px),
      1100px
    );

  margin:
    0 auto 50px;

  padding:
    26px 30px 20px;

  text-align:
    center;
}

#generate-button {
  width:
    100%;

  padding:
    19px 25px;

  border:
    1px solid #c5a86a;

  background:
    linear-gradient(
      180deg,
      #c7aa70,
      #ad8d52
    );

  color:
    #fff;

  font-size:
    18px;

  font-weight:
    700;
}

#generate-button:disabled {
  opacity:
    .65;

  cursor:
    wait;
}

.export-note {
  margin:
    12px 0 0;

  color:
    #d6c19a;

  font-size:
    13px;

  font-weight:
    600;
}

.export-size {
  margin:
    8px 0 0;

  color:
    #868e9c;

  font-size:
    12px;
}


/* ==================================================
   AFTER EXPORT
================================================== */

.after-export-actions {
  margin-top:
    26px;

  padding:
    22px;

  border:
    1px solid rgba(183,154,102,.35);

  border-radius:
    8px;

  background:
    rgba(183,154,102,.05);
}

.after-export-title {
  margin:
    0 0 16px;

  color:
    #d6c19a;

  font-size:
    15px;

  font-weight:
    700;
}

.after-export-x-button,
.after-export-community-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    200px;

  margin:
    4px;

  padding:
    13px 22px;

  border-radius:
    5px;

  font-size:
    14px;

  font-weight:
    700;

  text-decoration:
    none;
}

.after-export-x-button {
  background:
    #b79a66;

  color:
    #fff;
}

.after-export-community-button {
  border:
    1px solid #454d5b;

  color:
    #d1d6de;
}


/* ==================================================
   IOS
================================================== */

.ios-export-guide {
  margin-top:
    12px;

  color:
    #969daa;

  font-size:
    12px;
}

.mobile-export-results {
  margin-top:
    20px;
}

.mobile-export-item {
  margin-bottom:
    24px;

  padding:
    14px;

  background:
    #0d1119;

  border:
    1px solid #2b3240;

  border-radius:
    8px;
}

.mobile-export-item img {
  display:
    block;

  width:
    100%;
}

.mobile-export-actions {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    8px;

  margin-top:
    12px;
}


/* ==================================================
   EXPORT WORKSPACE
================================================== */

#export-workspace {
  position:
    fixed;

  left:
    -20000px;

  top:
    0;

  width:
    1200px;

  height:
    1200px;

  overflow:
    hidden;

  pointer-events:
    none;

  z-index:
    -999999;
}

.export-clone {
  --preview-scale:
    1 !important;

  position:
    relative !important;

  left:
    0 !important;

  top:
    0 !important;

  width:
    1200px !important;

  height:
    1200px !important;

  margin:
    0 !important;

  transform:
    none !important;
}


/* ==================================================
   FOOTER
================================================== */

.site-footer {
  padding:
    38px 20px 35px;

  border-top:
    1px solid #202631;

  color:
    #8e939c;

  font-size:
    12px;

  text-align:
    center;
}

.site-footer p {
  margin:
    0 0 12px;
}

.footer-links {
  display:
    flex;

  justify-content:
    center;

  gap:
    10px;

  margin:
    14px 0;
}

.footer-links a {
  color:
    #b79a66;

  text-decoration:
    none;
}


/* ==================================================
   MOBILE
================================================== */

@media screen and (max-width: 900px) {

  .site-header h1 {
    font-size:
      26px;
  }

  .editor-layout {
    display:
      block;

    padding:
      0 12px 24px;
  }

  .settings {
    margin-bottom:
      24px;
  }

}


@media screen and (max-width: 600px) {

  .studio-header {
    min-height:
      58px;

    padding:
      0 12px;
  }

  .studio-logo {
    gap:
      6px;

    font-size:
      13px;
  }

  .studio-logo-box {
    min-height:
      34px;

    padding:
      0 8px;
  }

  .studio-series-label {
    font-size:
      7px;

    letter-spacing:
      .12em;
  }

  .social-actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }

  .x-post-link,
  .community-post-link {
    width:
      100%;
  }

  .after-export-x-button,
  .after-export-community-button {
    width:
      100%;

    margin:
      5px 0;
  }

}