/* Iteration 03 — keep the original grid and display type, improve definition only. */
body { font-synthesis: none; }

/* A subtle upward lift for the flower without changing the first-screen layout. */
.hero-visual img { transform: scale(1.03); transform-origin: 50% 42%; }

/* A strict, editorial family across the complete interface. */
body,
.logo,
.hero h1,
h2,
summary strong,
.case-caption h3,
.steps h3,
.story-art p,
button,
input,
textarea {
  font-family: "IBM Plex Sans", Arial, sans-serif;
}

.kicker,
.logo small,
.hero-bottom,
.intro-aside,
.service-num,
.case-caption p,
.steps b,
.contact-mini,
.footer > div > span {
  font-family: "IBM Plex Mono", monospace;
}

/* A compact Earth: blue water, green land and a gentle atmospheric glow. */
.logo-mark {
  color: #fff;
  border-color: #b8eee7;
  background:
    radial-gradient(ellipse 33% 21% at 31% 31%, #7fc88e 0 63%, transparent 66%),
    radial-gradient(ellipse 38% 22% at 70% 61%, #69b67e 0 60%, transparent 64%),
    radial-gradient(ellipse 24% 15% at 38% 77%, #9bd489 0 60%, transparent 64%),
    radial-gradient(circle at 31% 23%, #91eff5 0 5%, transparent 30%),
    linear-gradient(145deg, #56d2de 0%, #187ab9 43%, #093979 100%);
  box-shadow: 0 0 0 2px rgba(134, 232, 222, .11), 0 0 18px rgba(102, 221, 218, .45);
  text-shadow: 0 1px 4px rgba(3, 24, 58, .9);
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -.09em;
}

/* Same display family and spacing as the initial version; only one weight stronger. */
.hero h1,
.intro h2,
.services h2,
.work h2,
.process h2,
.story h2,
.contact h2,
summary strong,
.case-caption h3,
.steps h3,
.story-art p {
  font-weight: 600;
  letter-spacing: -.062em;
}

/* The headline grid keeps the same sizes and line heights; only the letterform changes. */
.hero h1,
.intro h2,
.services h2,
.work h2,
.process h2,
.story h2,
.contact h2 {
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -.055em;
}

/* A two-pixel lift for the complete interface typography. */
.logo { font-size: 18px; }
.nav-links, .button, .text-link { font-size: 14px; }
.kicker { font-size: 12px; }
.hero h1 { font-size: clamp(48px, 6.65vw, 95px); }
.intro h2, .services h2, .work h2, .process h2, .story h2, .contact h2 { font-size: clamp(33px, 4.4vw, 61px); }
.hero-intro { font-size: 18px; }
.visual-note { font-size: 15px; }
.hero-bottom { font-size: 11px; }
.intro-text p, .services-head > p, .work-head > p, .process-top > p, .story-copy > p, .contact-copy > p { font-size: 16px; }
summary strong { font-size: clamp(19px, 2.25vw, 29px); }
.service-detail p { font-size: 15px; }
.service-detail ul { font-size: 14px; }
.case-caption p { font-size: 11px; }
.case-caption h3 { font-size: 19px; }
.case-caption span { font-size: 13px; }
.work-foot { font-size: 16px; }
.steps h3 { font-size: 20px; }
.steps p { font-size: 14px; }
.story-art p {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 62px;
  left: 72px;
  max-width: 100%;
  font-size: clamp(26px, 2.8vw, 38px);
  letter-spacing: -.075em;
}

@media (max-width: 800px) {
  .story-art p {
    right: 10px;
    bottom: 48px;
    left: 50px;
  }
}

/* Floating AI guide on the opening screen. */
.avatar-guide {
  --avatar-drop: 0px;
  position: absolute;
  z-index: 20;
  top: 128px;
  right: clamp(300px, 37vw, 530px);
  width: 205px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 5px;
  background: rgba(14, 18, 44, .92);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
  color: #fff;
  transform: translate3d(0, var(--avatar-drop), 0);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform .2s linear, opacity .25s, visibility .25s;
}
.avatar-guide.avatar-dragging { cursor: grabbing; transition: opacity .25s, visibility .25s; }
.avatar-guide.avatar-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.avatar-photo { position: relative; aspect-ratio: 3 / 3.45; overflow: hidden; background: #182141; }
.avatar-photo:after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(9, 13, 31, .58)); pointer-events: none; }
.avatar-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.avatar-speaking-frame { opacity: 0; }
.avatar-guide.talking.speaking-now .avatar-speaking-frame { animation: avatar-speaking-mouth .52s ease-in-out infinite alternate; }
@keyframes avatar-speaking-mouth { 0%, 100% { opacity: .03; } 45% { opacity: .94; } 70% { opacity: .25; } }
.form-trap { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.avatar-status { position: absolute; z-index: 1; bottom: 10px; left: 11px; display: flex; align-items: center; gap: 5px; font: 500 9px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.avatar-status i { width: 6px; height: 6px; border-radius: 50%; background: #83e1aa; box-shadow: 0 0 8px #83e1aa; }
.avatar-copy { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px; }
.avatar-copy p { margin: 0; line-height: 1.1; }
.avatar-copy strong { display: block; font-size: 12px; }
.avatar-copy p span { display: block; margin-top: 3px; color: #bfc4e3; font: 500 8px "IBM Plex Mono", monospace; letter-spacing: .05em; }
.avatar-speak { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: #ffc1af; font: 600 9px "IBM Plex Sans", Arial, sans-serif; cursor: pointer; }
.avatar-speak span { font-size: 14px; transform: rotate(90deg); }
.avatar-close { position: absolute; z-index: 3; top: 7px; right: 7px; display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: rgba(7, 10, 27, .45); color: #fff; font-size: 17px; cursor: pointer; }
@media (max-width: 800px) {
  .avatar-guide { top: auto; right: 15px; bottom: 16px; width: 148px; }
  .avatar-photo { aspect-ratio: 3 / 2.75; }
  .avatar-copy { padding: 8px; }
  .avatar-speak { font-size: 8px; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .avatar-guide { top: 400px; right: 22px; }
}
.brief-form label { font-size: 13px; }
.brief-form input, .brief-form textarea { font-size: 16px; }
.form-note { font-size: 12px; }
.footer p { font-size: 13px; }
.footer .footer-rights { max-width: 330px; text-align: right; line-height: 1.45; }
@media (max-width: 800px) { .footer .footer-rights { max-width: 100%; text-align: left; } }
.logo, .logo:focus, .logo:focus-visible { outline: none !important; box-shadow: none; -webkit-tap-highlight-color: transparent; }
.case-card:nth-child(5) { margin-top: 80px; }
.case-card:nth-child(6) { margin-top: 28px; }
.case-card:nth-child(2) .case-image, .case-card:nth-child(3) .case-image, .case-card:nth-child(5) .case-image, .case-card:nth-child(6) .case-image { aspect-ratio: 4 / 5.07; }
@media (max-width: 800px) { .case-card:nth-child(5), .case-card:nth-child(6) { margin-top: 18px; } }
@media (max-width: 800px) { .case-card:nth-child(2) .case-image, .case-card:nth-child(3) .case-image, .case-card:nth-child(5) .case-image, .case-card:nth-child(6) .case-image { aspect-ratio: 1.2 / 1; } }

/* The fashion photo remains intact: its full portrait frame fits inside the portfolio card. */
.case-photoshoot .case-image { background: #8c6b57; }
.case-photoshoot .case-image:before { content: ''; position: absolute; inset: -14px; background: url('assets/case-neuro-photoshoot.png') center / cover no-repeat; filter: blur(13px); opacity: .52; transform: scale(1.08); }
.case-photoshoot .case-image img { position: relative; z-index: 1; object-fit: contain; }
.case-photoshoot .case-image:after { z-index: 2; }
.case-photoshoot .case-arrow { z-index: 3; }

/* Interactive portfolio case: Digital Garden. */
.garden-launch { width: 100%; padding: 0; border: 0; cursor: pointer; text-align: left; }
.garden-preview { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 50% 54%, rgba(255, 204, 175, .95) 0 2%, transparent 15%), radial-gradient(circle at 25% 18%, rgba(199, 185, 255, .9) 0 1%, transparent 12%), linear-gradient(145deg, #20274f 0%, #151b3c 53%, #442d58 100%); }
.garden-preview:before, .garden-preview:after { content: ''; position: absolute; border: 1px solid rgba(225, 214, 255, .32); border-radius: 50%; }
.garden-preview:before { width: 125%; height: 34%; left: -12%; bottom: 25%; transform: rotate(-17deg); }
.garden-preview:after { width: 105%; height: 26%; left: 14%; bottom: 37%; transform: rotate(25deg); }
.garden-preview i { position: absolute; z-index: 1; left: 50%; bottom: 18%; width: 4px; height: 42%; border-radius: 99px; background: linear-gradient(#e8cff5, #82d6ba); transform: translateX(-50%); box-shadow: 0 0 18px rgba(139, 231, 190, .65); }
.garden-preview b, .garden-preview em { position: absolute; z-index: 2; left: 50%; bottom: 48%; width: 42%; aspect-ratio: 1; border-radius: 50% 5px 50% 5px; background: linear-gradient(140deg, #ffbf9e, #c9b7ff); box-shadow: 0 0 28px rgba(247, 187, 173, .75); transform-origin: 10% 90%; }
.garden-preview b { transform: rotate(-36deg); }
.garden-preview em { transform: scaleX(-1) rotate(-36deg); }
.garden-preview small { position: absolute; z-index: 3; color: #fff1cf; font: 20px Georgia, serif; text-shadow: 0 0 14px #fff1cf; animation: garden-twinkle 2.1s ease-in-out infinite alternate; }
.garden-preview small:nth-of-type(1) { left: 19%; top: 23%; }.garden-preview small:nth-of-type(2) { right: 17%; top: 35%; animation-delay: .6s; }.garden-preview small:nth-of-type(3) { right: 31%; top: 15%; animation-delay: 1.2s; }
.garden-play-label { position: absolute; z-index: 4; right: 14px; top: 14px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.58); border-radius: 999px; background: rgba(10, 12, 32, .35); color: #fff; font: 600 11px "IBM Plex Sans", Arial, sans-serif; }.garden-play-label b { margin-left: 4px; font-size: 15px; }
@keyframes garden-twinkle { from { opacity: .28; transform: scale(.75); } to { opacity: 1; transform: scale(1.12); } }
body.garden-open { overflow: hidden; }
.garden-modal { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(6, 8, 23, .72); backdrop-filter: blur(10px); }
.garden-modal[hidden] { display: none; }
.garden-dialog { position: relative; width: min(760px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: auto; padding: 31px; border: 1px solid rgba(255,255,255,.24); border-radius: 7px; background: #111735; color: #fff; box-shadow: 0 35px 90px rgba(0,0,0,.42); }
.garden-close { position: absolute; z-index: 2; top: 15px; right: 15px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: transparent; color: #fff; font-size: 23px; cursor: pointer; }
.garden-head { display: flex; justify-content: space-between; gap: 30px; padding-right: 42px; }.garden-head .kicker { color: #cfc8ed; }.garden-head h2 { font-size: clamp(35px, 5vw, 58px); line-height: 1; }.garden-head h2 em { color: #ffb49f; font-style: normal; }.garden-head > p { max-width: 220px; margin: 5px 0 0; color: #c3c6de; font-size: 14px; line-height: 1.55; }
.garden-stage { position: relative; height: min(430px, 52vh); margin-top: 27px; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; background: #1e254e; }.garden-stage canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
.garden-score, .garden-time { position: absolute; top: 14px; display: grid; gap: 3px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 3px; background: rgba(10,14,38,.48); }.garden-score { left: 14px; }.garden-time { right: 14px; text-align: right; }.garden-score span, .garden-time span { color: #bdc1db; font: 500 8px "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }.garden-score strong, .garden-time strong { font: 600 16px "IBM Plex Sans", Arial, sans-serif; }
.garden-foot { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 18px; }.garden-foot p { margin: 0; color: #d0d0e2; font-size: 14px; line-height: 1.45; }.garden-foot .button { flex: 0 0 auto; }
@media (max-width: 650px) { .garden-modal { padding: 12px; }.garden-dialog { max-height: calc(100vh - 24px); padding: 23px 18px; }.garden-head { display: block; }.garden-head > p { margin-top: 16px; }.garden-stage { height: 48vh; min-height: 280px; }.garden-foot { display: block; }.garden-foot .button { width: 100%; margin-top: 15px; }.garden-score, .garden-time { top: 10px; }.garden-score { left: 10px; }.garden-time { right: 10px; } }

/* Interactive portfolio case: Character creator. */
.character-launch { width: 100%; padding: 0; border: 0; cursor: pointer; text-align: left; }
.character-preview { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 22% 16%, rgba(232, 221, 255, .62) 0 1%, transparent 13%), radial-gradient(circle at 73% 23%, rgba(251, 200, 179, .72) 0 1%, transparent 17%), linear-gradient(140deg, #262655 0%, #131a3b 55%, #533855 100%); }
.character-preview:before, .character-preview:after { content: ''; position: absolute; border: 1px solid rgba(224, 219, 255, .28); border-radius: 50%; }.character-preview:before { width: 130%; height: 46%; left: -30%; bottom: 22%; transform: rotate(-22deg); }.character-preview:after { width: 90%; height: 30%; right: -9%; top: 14%; transform: rotate(26deg); }
.character-preview-orbit { position: absolute; z-index: 1; width: 66%; aspect-ratio: 1; left: 16%; top: 13%; border: 1px solid rgba(215, 202, 255, .38); border-radius: 50%; box-shadow: 0 0 28px rgba(185, 158, 255, .32); }.character-preview-spark { position: absolute; z-index: 4; top: 19%; left: 27%; color: #ffe6a9; font: 28px Georgia, serif; text-shadow: 0 0 16px #ffe6a9; animation: character-twinkle 2.1s ease-in-out infinite alternate; }.character-preview-head { position: absolute; z-index: 3; top: 24%; left: 37%; width: 27%; aspect-ratio: .8; border-radius: 46% 46% 44% 44%; background: linear-gradient(135deg, #ffd4bd, #d88ca7); box-shadow: 0 0 26px rgba(255, 187, 174, .38); }.character-preview-hair { position: absolute; z-index: 4; top: 20%; left: 32%; width: 37%; height: 31%; border-radius: 58% 45% 30% 42%; background: linear-gradient(135deg, #e6d4ff, #7e65a7 77%); transform: rotate(-8deg); }.character-preview-body { position: absolute; z-index: 2; bottom: -11%; left: 20%; width: 61%; height: 48%; border-radius: 52% 52% 0 0; background: linear-gradient(140deg, #7660b1, #292c69 65%); box-shadow: inset 0 1px rgba(255,255,255,.32), 0 0 44px rgba(137, 117, 250, .26); }.character-preview-companion { position: absolute; z-index: 5; top: 46%; right: 17%; width: 18%; aspect-ratio: 1; border-radius: 50% 50% 50% 5px; background: linear-gradient(145deg, #ffd6a1, #fd8fae); box-shadow: 0 0 18px rgba(255, 194, 144, .72); transform: rotate(22deg); }
.character-play-label { position: absolute; z-index: 7; top: 14px; right: 14px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.58); border-radius: 999px; background: rgba(10, 12, 32, .35); color: #fff; font: 600 11px "IBM Plex Sans", Arial, sans-serif; }.character-play-label b { margin-left: 4px; font-size: 15px; }
@keyframes character-twinkle { from { opacity: .35; transform: scale(.75) rotate(-10deg); } to { opacity: 1; transform: scale(1.13) rotate(8deg); } }
body.character-open { overflow: hidden; }.character-modal { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(6, 8, 23, .72); backdrop-filter: blur(10px); }.character-modal[hidden] { display: none; }.character-dialog { position: relative; width: min(820px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: auto; padding: 31px; border: 1px solid rgba(255,255,255,.24); border-radius: 7px; background: #111735; color: #fff; box-shadow: 0 35px 90px rgba(0,0,0,.42); }.character-close { position: absolute; z-index: 9; top: 15px; right: 15px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: transparent; color: #fff; font-size: 23px; cursor: pointer; }.character-head { display: flex; justify-content: space-between; gap: 30px; padding-right: 42px; }.character-head .kicker { color: #cfc8ed; }.character-head h2 { font-size: clamp(35px, 5vw, 58px); line-height: 1; }.character-head h2 em { color: #ffb49f; font-style: normal; }.character-head > p { max-width: 238px; margin: 5px 0 0; color: #c3c6de; font-size: 14px; line-height: 1.55; }
.character-stage { display: grid; grid-template-columns: minmax(270px, .9fr) minmax(280px, 1.1fr); gap: 24px; margin-top: 27px; }.character-art { --light-one: #d6c4ff; --light-two: #ffb9c1; --skin-one: #ffd4bd; --skin-two: #d88ca7; --hair-one: #e6d4ff; --hair-two: #7e65a7; --suit-one: #7660b1; --suit-two: #292c69; --companion-one: #ffd6a1; --companion-two: #fd8fae; position: relative; min-height: 346px; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--light-one) 44%, transparent) 0%, transparent 35%), linear-gradient(145deg, #1d244c, #2c2455 60%, #573a58); isolation: isolate; }.character-art:before, .character-art:after { content: ''; position: absolute; z-index: 0; border: 1px solid color-mix(in srgb, var(--light-one) 58%, transparent); border-radius: 50%; }.character-art:before { width: 120%; height: 42%; left: -20%; bottom: 15%; transform: rotate(-19deg); }.character-art:after { width: 90%; height: 30%; right: -4%; top: 17%; transform: rotate(24deg); }.character-orbit { position: absolute; z-index: 1; width: 66%; aspect-ratio: 1; top: 12%; left: 17%; border: 1px solid color-mix(in srgb, var(--light-one) 65%, transparent); border-radius: 50%; box-shadow: 0 0 30px color-mix(in srgb, var(--light-one) 30%, transparent); }.character-star { position: absolute; z-index: 6; top: 18%; left: 27%; color: #fff0bc; font: 32px Georgia, serif; text-shadow: 0 0 16px #ffe8a7; animation: character-twinkle 2.1s ease-in-out infinite alternate; }.character-head-shape { position: absolute; z-index: 3; top: 22%; left: 37%; width: 27%; aspect-ratio: .8; border-radius: 46% 46% 44% 44%; background: linear-gradient(135deg, var(--skin-one), var(--skin-two)); box-shadow: 0 0 29px color-mix(in srgb, var(--skin-one) 35%, transparent); }.character-hair { position: absolute; z-index: 4; top: 18%; left: 32%; width: 38%; height: 32%; border-radius: 58% 45% 30% 42%; background: linear-gradient(135deg, var(--hair-one), var(--hair-two) 77%); transform: rotate(-8deg); }.character-neck { position: absolute; z-index: 2; top: 44%; left: 45%; width: 10%; height: 12%; background: var(--skin-two); }.character-body { position: absolute; z-index: 2; bottom: -10%; left: 20%; width: 61%; height: 48%; border-radius: 52% 52% 0 0; background: linear-gradient(140deg, var(--suit-one), var(--suit-two) 65%); box-shadow: inset 0 1px rgba(255,255,255,.32), 0 0 44px color-mix(in srgb, var(--suit-one) 35%, transparent); }.character-companion { position: absolute; z-index: 5; top: 46%; right: 17%; width: 18%; aspect-ratio: 1; border-radius: 50% 50% 50% 5px; background: linear-gradient(145deg, var(--companion-one), var(--companion-two)); box-shadow: 0 0 18px color-mix(in srgb, var(--companion-one) 75%, transparent); transform: rotate(22deg); }
.character-art[data-mood="maker"] .character-hair { border-radius: 26% 62% 34% 48%; transform: rotate(16deg); }.character-art[data-mood="maker"] .character-body { border-radius: 34% 57% 0 0; }.character-art[data-mood="explorer"] .character-head-shape { transform: translateX(9px); }.character-art[data-mood="explorer"] .character-orbit { transform: rotate(-18deg) scale(1.08); }.character-art[data-light="sun"] { --light-one: #ffdfa0; --light-two: #ff9f84; --skin-one: #ffd2ad; --skin-two: #d77b65; --hair-one: #f6d778; --hair-two: #a55a50; --suit-one: #d77c68; --suit-two: #65415f; --companion-one: #fff5b0; --companion-two: #ffb355; }.character-art[data-light="ocean"] { --light-one: #9ef2f1; --light-two: #7fb8ff; --skin-one: #f4d5c3; --skin-two: #c9899d; --hair-one: #c1e9f4; --hair-two: #486b9f; --suit-one: #3e96ba; --suit-two: #173f73; --companion-one: #a7f7ef; --companion-two: #66aedf; }.character-art[data-companion="moon"] .character-companion { border-radius: 50%; background: transparent; border: 9px solid var(--companion-one); border-left-color: transparent; box-shadow: 0 0 18px var(--companion-one); transform: rotate(-22deg); }.character-art[data-companion="leaf"] .character-companion { border-radius: 100% 0 100% 0; transform: rotate(-28deg); }
.character-controls { display: grid; align-content: center; gap: 15px; }.character-controls fieldset { margin: 0; padding: 0; border: 0; }.character-controls legend { margin-bottom: 8px; color: #c8c6dc; font: 500 10px "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }.character-controls fieldset > div { display: flex; flex-wrap: wrap; gap: 8px; }.character-controls button { padding: 9px 11px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; background: rgba(255,255,255,.04); color: #e9e8f0; font-size: 13px; cursor: pointer; transition: border-color .18s, background .18s, color .18s; }.character-controls button:hover, .character-controls button.is-active { border-color: #ffb9a2; background: rgba(255,180,160,.16); color: #fff; }.character-foot { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 19px; }.character-foot p { max-width: 470px; margin: 0; color: #d0d0e2; font-size: 14px; line-height: 1.45; }.character-foot .button { flex: 0 0 auto; }
@media (max-width: 650px) { .character-modal { padding: 12px; }.character-dialog { max-height: calc(100vh - 24px); padding: 23px 18px; }.character-head { display: block; }.character-head > p { margin-top: 16px; }.character-stage { grid-template-columns: 1fr; gap: 20px; }.character-art { min-height: 265px; }.character-controls { gap: 13px; }.character-foot { display: block; }.character-foot .button { width: 100%; margin-top: 15px; } }