@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
:root {
  --bg:#111b18;
  --ink:#172822;
  --paper:#f3f0e7;
  --gold:#d6bf8c;
  --line:#d8d7cc;
  --green:#263e32;
  --muted:#738077;
  --goods:#284235;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  color:var(--paper);
  background:var(--bg);
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input {
  font:inherit;
}
button,a,input {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
button {
  color:inherit;
}
button:focus-visible,a:focus-visible {
  outline:2px solid #d7bf8e;
  outline-offset:5px;
}
input:focus-visible {
  outline:2px solid #d7bf8e;
  outline-offset:2px;
}
button {
  border:0;
}
a {
  color:inherit;
}
p {
  line-height:1.75;
}
button:disabled {
  opacity:.45;
  cursor:not-allowed;
}
h1,h2,h3,p {
  margin-top:0;
}
h1,h2 {
  font-weight:500;
  letter-spacing:-.055em;
}
h1 {
  font-size:clamp(38px,4.3vw,68px);
  line-height:1.32;
}
h2 {
  font-size:34px;
  line-height:1.45;
}
h3 {
  font-size:21px;
  letter-spacing:-.025em;
}
svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.site-header {
  height:98px;
  padding:0 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#111b18;
  position:relative;
  z-index:5;
  border-bottom:1px solid #ffffff14;
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  text-align:left;
  background:none;
  color:var(--gold);
}
.brand-wordmark {
  display:block;
  flex-shrink:0;
  width:236px;
  height:48px;
  background-color:var(--gold);
  -webkit-mask:url('/__l5e/assets-v1/d8cb2dd6-a14c-4e62-9e1c-746af3475776/codate-wordmark-v2-uppercase.png') center / 100% auto no-repeat;
  mask:url('/__l5e/assets-v1/d8cb2dd6-a14c-4e62-9e1c-746af3475776/codate-wordmark-v2-uppercase.png') center / 100% auto no-repeat;
}
.brand-emblem {
  display:block;
  flex-shrink:0;
  width:116px;
  height:116px;
  background-color:var(--gold);
  -webkit-mask:url('/__l5e/assets-v1/ed144db9-1aba-401f-aa81-525964b54ea2/codate-emblem-v1.png') center / contain no-repeat;
  mask:url('/__l5e/assets-v1/ed144db9-1aba-401f-aa81-525964b54ea2/codate-emblem-v1.png') center / contain no-repeat;
}
.brand svg {
  width:34px;
  height:36px;
}
.brand span {
  font-family:Georgia,serif;
  font-size:25px;
  letter-spacing:.08em;
}
.brand small {
  display:block;
  font:8px Pretendard,sans-serif;
  letter-spacing:.21em;
  margin-top:6px;
}
.site-header nav {
  display:flex;
  gap:34px;
}
.nav-link {
  background:none;
  color:#a9b0a8;
  font-size:14px;
  padding:38px 0 34px;
  border-bottom:2px solid transparent;
}
.nav-link.active {
  color:#f8f3e7;
  border-color:var(--gold);
}
.prototype-tag {
  font-size:10px;
  letter-spacing:.17em;
  border:1px solid #6e7463;
  padding:9px 12px;
  color:#bbbba7;
}
.page {
  display:none;
}
.page.active {
  display:block;
}
.hero {
  height:min(750px,75vw);
  min-height:610px;
  position:relative;
  overflow:hidden;
}
.hero-image {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  position:absolute;
}
.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(6,16,13,.94) 0,rgba(8,18,14,.80) 26%,rgba(8,18,14,.15) 65%,rgba(8,18,14,.02)),linear-gradient(0deg,rgba(6,14,10,.65),transparent 40%);
}
.hero-copy {
  position:relative;
  padding:100px 7% 100px;
  max-width:770px;
}
.eyebrow {
  font-size:10px;
  letter-spacing:.23em;
  line-height:1.6;
  text-transform:uppercase;
  font-weight:500;
  color:var(--gold);
  margin-bottom:24px;
}
.tiny-star {
  font-size:18px;
  margin-right:12px;
  vertical-align:-2px;
}
.hero h1 {
  font-family:Pretendard,'Apple SD Gothic Neo',sans-serif;
  margin-bottom:26px;
  font-weight:400;
}
.hero-description {
  font-size:16px;
  line-height:1.9;
  color:#e0e1d7;
  margin-bottom:34px;
}
.button {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  padding:17px 23px;
  min-height:52px;
  font-size:14px;
  font-weight:600;
  transition:background .2s,transform .2s;
  border-radius:2px;
}
.button:hover {
  transform:translateY(-2px);
}
.gold {
  background:var(--gold);
  color:#16261e;
}
.gold:hover {
  background:#e5d1a7;
}
.button span {
  font-size:19px;
  font-weight:400;
}
.hero-footnote {
  font-size:11px;
  color:#b7bfae;
  margin-top:16px;
}
.hero-bottom {
  position:absolute;
  bottom:0;
  left:7%;
  right:7%;
  border-top:1px solid #ffffff30;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 0;
  color:#d6d6c4;
  font-size:11px;
  letter-spacing:.03em;
}
.hero-bottom>span:first-child {
  font-size:9px;
  letter-spacing:.17em;
}
.hero-bottom i {
  display:inline-block;
  height:1px;
  width:28px;
  background:#9b9e82;
  vertical-align:middle;
  margin:0 13px;
}
.intro-strip {
  display:flex;
  gap:4%;
  justify-content:space-between;
  align-items:center;
  padding:40px 7%;
  background:#1c2b23;
  border-bottom:1px solid #ffffff12;
}
.intro-strip>p {
  font-size:13px;
  margin:0;
  color:#aab3a5;
}
.intro-strip strong {
  color:#e3e4d9;
  font-weight:400;
}
.intro-strip>div {
  font-size:12px;
  color:#c7cfc1;
}
.intro-strip>div>span {
  display:block;
  color:#93a28e;
  font:24px Georgia,serif;
  margin-bottom:10px;
}
.section {
  padding:76px 7%;
}
.modes-section {
  background:var(--paper);
  color:var(--ink);
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:32px;
}
.section-heading h2 {
  margin-bottom:0;
}
.section-heading>.eyebrow,.modes-section .eyebrow {
  color:#657961;
  margin-bottom:12px;
}
.section-heading>p {
  font-size:13px;
  color:#6b7569;
  margin:0 0 7px;
}
.mode-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid #c5c9bc;
  border-bottom:1px solid #c5c9bc;
}
.mode-card {
  background:transparent;
  text-align:left;
  padding:30px 32px 26px;
  border-right:1px solid #c5c9bc;
  transition:background .2s;
}
.mode-card:first-child {
  padding-left:0;
}
.mode-card:last-child {
  border:0;
}
.mode-card:hover {
  background:#e8e8dc;
}
.mode-index {
  font-size:9px;
  letter-spacing:.18em;
  color:#727d6b;
}
.mode-card svg {
  display:block;
  width:58px;
  height:58px;
  margin:32px 0 22px;
  color:#506346;
}
.mode-card h3 {
  font-size:22px;
  margin-bottom:8px;
}
.mode-card p {
  font-size:13px;
  color:#6f796b;
  margin-bottom:33px;
}
.mode-link {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  font-weight:500;
}
.mode-link b {
  font-size:18px;
}
.upcoming {
  display:grid;
  grid-template-columns:1fr 1.8fr;
  gap:10%;
  padding-top:85px;
  padding-bottom:85px;
}
.upcoming .eyebrow {
  margin-bottom:20px;
}
.upcoming h2 {
  font-family:Pretendard,serif;
}
.upcoming>div>p:last-child {
  font-size:13px;
  color:#b0b9a9;
}
.next-list button {
  background:transparent;
  display:flex;
  align-items:center;
  text-align:left;
  gap:26px;
  border-top:1px solid #ffffff20;
  width:100%;
  padding:27px 0;
}
.next-list button:last-child {
  border-bottom:1px solid #ffffff20;
}
.next-list small {
  font-size:9px;
  letter-spacing:.13em;
  color:#b0b496;
}
.next-list h3 {
  font-size:19px;
  margin:11px 0 7px;
  font-weight:500;
}
.next-list p {
  font-size:12px;
  color:#a7b0a2;
  margin:0;
}
.next-list button>span:last-child {
  margin-left:auto;
  color:var(--gold);
  font-size:22px;
}
.concept-symbol {
  width:64px;
  height:86px;
  display:grid;
  place-items:center;
  font-size:34px;
  color:#d0b68b;
  border:1px solid #776e55;
  border-radius:36px 36px 0 0;
  flex-shrink:0;
}
.goods-teaser {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  background:#e8e4d8;
  color:var(--ink);
}
.goods-teaser img {
  width:100%;
  height:430px;
  object-fit:cover;
}
.goods-teaser>div {
  padding:65px 12%;
}
.goods-teaser .eyebrow {
  color:#728066;
  margin-bottom:20px;
}
.goods-teaser h2 {
  font-family:Pretendard,serif;
}
.goods-teaser p:not(.eyebrow) {
  font-size:14px;
  color:#63705e;
}
.text-button {
  border-bottom:1px solid currentColor;
  padding:10px 0;
  background:none;
  display:inline-flex;
  gap:35px;
  justify-content:space-between;
  font-size:13px;
}
.text-button>span {
  font-size:18px;
}
footer {
  padding:38px 7%;
  display:flex;
  align-items:center;
  gap:34px;
  color:#899687;
  border-top:1px solid #ffffff13;
}
.footer-brand {
  font:20px Georgia,serif;
  letter-spacing:.1em;
  color:#a8b19d;
}
footer p {
  font-size:12px;
  margin:0;
}
footer small {
  font-size:10px;
  margin-left:auto;
  color:#899183;
}
.goods-hero {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  background:#e9e5d9;
  color:#203b2b;
  min-height:540px;
}
.goods-hero>div {
  padding:65px 12% 55px 16%;
}
.goods-hero h1 {
  font-family:Pretendard,serif;
  font-size:46px;
}
.goods-hero .eyebrow {
  color:#60775d;
}
.goods-hero p {
  font-size:15px;
}
.goods-hero>img {
  width:100%;
  height:100%;
  max-height:600px;
  object-fit:cover;
}
.design-label {
  display:inline-block;
  font-size:10px;
  padding:7px 10px;
  border:1px solid #7f8c78;
  margin-top:15px;
  letter-spacing:.06em;
}
.kit-toolbar {
  background:var(--paper);
  color:var(--ink);
  padding:32px 7%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #d0d3c6;
}
.kit-toolbar>span {
  font-size:10px;
  letter-spacing:.17em;
}
.swatch-group {
  display:flex;
  align-items:center;
  gap:12px;
}
.swatch {
  height:24px;
  width:24px;
  background:#284235;
  border-radius:50%;
  border:3px solid var(--paper);
  outline:1px solid transparent;
}
.swatch.burgundy {
  background:#643538;
}
.swatch.selected {
  outline-color:#53624b;
}
.swatch-group>span {
  font-size:11px;
  width:86px;
}
.product-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  background:var(--paper);
  color:var(--ink);
  padding-top:44px;
}
.product-visual {
  height:310px;
  background:#e6e4d8;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  margin-bottom:25px;
}
.product-card>small {
  font-size:9px;
  letter-spacing:.17em;
  color:#65765f;
}
.product-card>h3 {
  margin:12px 0;
}
.product-card>p {
  font-size:13px;
  color:#647060;
  line-height:1.8;
}
.paper-pad {
  width:184px;
  height:252px;
  background:#fcfaf0;
  transform:rotate(-7deg);
  box-shadow:2px 4px 0 #dedecf,4px 6px 0 #fdfbf1,9px 15px 22px #222b1929;
  padding:18px;
  color:var(--goods);
  border-top:6px solid var(--goods);
}
.paper-brand {
  font:9px Georgia,serif;
  letter-spacing:.11em;
}
.paper-pad>h3 {
  font:21px/1.15 Georgia,serif;
  margin:18px 0 23px;
}
.paper-pad>small {
  font-size:7px;
}
.paper-line {
  height:18px;
  border-bottom:1px solid #ccd1bf;
}
.paper-check {
  display:flex;
  justify-content:space-between;
  font-size:7px;
  margin-top:18px;
}
.paper-bottom {
  font-size:5px;
  letter-spacing:.14em;
  margin-top:19px;
}
.desk-mat {
  width:86%;
  height:160px;
  transform:rotate(-8deg);
  border-radius:7px;
  background:var(--goods);
  box-shadow:8px 13px 20px #26332b3b;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  outline:1px solid #cfbe903b;
  outline-offset:-9px;
  color:#d5c094;
}
.mat-arch {
  width:53px;
  height:63px;
  border-radius:40px 40px 0 0;
  border:1px solid #ad9b69;
  margin-bottom:14px;
  position:relative;
}
.mat-arch:after {
  content:'';
  position:absolute;
  inset:6px;
  border-radius:30px 30px 0 0;
  border:1px solid #ad9b6966;
}
.desk-mat>span {
  font:12px Georgia,serif;
  letter-spacing:.2em;
}
.desk-mat>small {
  font-size:5px;
  letter-spacing:.1em;
  margin-top:6px;
}
.mock-pen {
  position:absolute;
  right:16%;
  top:16%;
  width:5px;
  height:170px;
  border-radius:3px;
  background:linear-gradient(90deg,#807354,#eee0b3,#837656);
  transform:rotate(28deg);
  box-shadow:2px 2px 3px #0003;
}
.bookmark {
  background:var(--goods);
  width:89px;
  height:226px;
  position:absolute;
  box-shadow:7px 8px 16px #0002;
  padding:20px 11px;
  color:#d8c798;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  border-radius:2px;
}
.bookmark.one {
  transform:rotate(-13deg);
  left:22%;
  top:47px;
}
.bookmark.two {
  transform:rotate(13deg);
  left:49%;
  top:36px;
  background:#eae6d7;
  color:var(--goods);
  border:1px solid #b6bda7;
}
.bookmark>span {
  font:19px/1.15 Georgia,Pretendard,serif;
  align-self:flex-start;
}
.bookmark.two>span {
  font-size:13px;
  line-height:1.6;
}
.bookmark small {
  font-size:5px;
  letter-spacing:.08em;
}
.bookmark-arch {
  width:37px;
  height:65px;
  border:1px solid currentColor;
  border-radius:22px 22px 0 0;
  opacity:.65;
}
.ritual {
  background:#d9dfcf;
  color:var(--ink);
  text-align:center;
  padding-top:50px;
  padding-bottom:50px;
}
.ritual .eyebrow {
  color:#627359;
  margin-bottom:15px;
}
.ritual h2 {
  font-family:Pretendard,serif;
}
.ritual>div {
  display:flex;
  justify-content:center;
  gap:7%;
  margin:28px 0;
}
.ritual>div p {
  font-size:13px;
}
.ritual b {
  font:22px Georgia,serif;
  margin-right:12px;
  color:#768666;
}
.muted {
  font-size:11px;
  color:#73806b;
}
.studio {
  background:#080a09;
  padding:65px 7% 75px;
}
.studio-head .eyebrow {
  color:#b7c3ab;
}
.studio-head h1 {
  font-size:52px;
}
.studio-head>p:not(.eyebrow) {
  color:#adb5aa;
  font-size:14px;
  line-height:1.9;
}
.studio-head .button {
  margin-top:12px;
  font-weight:500;
}
.studio-summary {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:58px;
  border-top:1px solid #ffffff30;
  border-bottom:1px solid #ffffff30;
  gap:40px;
  padding:30px 0;
}
.studio-summary small {
  font-size:9px;
  letter-spacing:.16em;
  color:#a2b296;
}
.studio-summary h3 {
  font-size:20px;
  margin:15px 0 10px;
}
.studio-summary h3>span {
  font-size:10px;
  border:1px solid #56624e;
  padding:3px 5px;
  font-weight:400;
  color:#b2bbaa;
  vertical-align:middle;
  margin-left:8px;
}
.studio-summary p {
  font-size:13px;
  color:#afb8a9;
  line-height:1.8;
  margin:0;
}
.asset-flow {
  padding:29px 0;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  color:#bac8ae;
  border-bottom:1px solid #ffffff25;
  align-items:center;
}
.asset-flow b {
  color:#586850;
  font-weight:300;
}
.curriculum-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:65px;
}
.curriculum-heading .eyebrow {
  margin:0 0 12px;
}
.curriculum-heading h2 {
  font-size:29px;
  margin:0;
}
.curriculum-heading>span {
  font-size:11px;
  border:1px solid #424e3b;
  padding:8px 11px;
  color:#b4c3a7;
}
.source-note {
  font-size:11px;
  color:#7f8d79;
  margin:17px 0 30px;
}
.lesson {
  border-top:1px solid #283026;
}
.lesson:last-child {
  border-bottom:1px solid #283026;
}
.lesson>summary {
  list-style:none;
  cursor:pointer;
  padding:23px 0;
  display:grid;
  grid-template-columns:55px 1fr 26px;
  align-items:center;
  gap:16px;
}
.lesson>summary::-webkit-details-marker {
  display:none;
}
.lesson>summary>.num {
  font:21px Georgia,serif;
  color:#a6b997;
}
.lesson>summary>span:nth-child(2) {
  font-size:15px;
  line-height:1.6;
}
.lesson>summary>b {
  color:#bacaac;
  font-size:20px;
  font-weight:300;
}
.lesson[open]>summary>b {
  transform:rotate(45deg);
}
.lesson-content {
  margin-left:71px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:14px 45px;
  padding-bottom:30px;
}
.lesson-content>div>small {
  font-size:10px;
  letter-spacing:.1em;
  color:#a6bd98;
}
.lesson-content p {
  font-size:13px;
  color:#bac3b3;
  margin:8px 0 15px;
}
.lesson-transfer {
  grid-column:span 2;
  border-top:1px solid #ffffff13;
  padding-top:17px;
  font-size:12px;
  color:#92a583;
}
.scope-panel {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  margin-top:70px;
  padding:34px;
  border:1px solid #3a4533;
}
.scope-panel .eyebrow {
  font-size:9px;
  margin-bottom:18px;
  color:#bacaab;
}
.scope-panel h3 {
  font-size:21px;
}
.scope-panel ul {
  padding-left:16px;
  font-size:13px;
  color:#a9b4a0;
  line-height:2.1;
}
.scope-panel>div>p:last-child:not(.eyebrow) {
  font-size:12px;
  color:#8f9d84;
}
.room[hidden] {
  display:none;
}
.room {
  position:fixed;
  inset:0;
  z-index:30;
  background:#101b15;
  overflow:auto;
  min-height:100dvh;
}
.room-bg {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.room-video {
  opacity:0;
  pointer-events:none;
}
.room-video.is-visible {
  opacity:1;
}
.room-shade {
  position:fixed;
  inset:0;
  background:linear-gradient(90deg,#07130dcc,transparent 65%),linear-gradient(270deg,#0c170dc2,transparent 55%);
}
.room-top {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px 4%;
  gap:20px;
}
.glass-button {
  background:#08180b70;
  border:1px solid #aeb39a44;
  padding:11px 18px;
  font-size:12px;
}
.room-top>div {
  text-align:center;
}
.room-top>div span {
  display:block;
  font-size:8px;
  letter-spacing:.2em;
  color:#c2c8b5;
  margin-bottom:7px;
}
.room-top strong {
  font-size:14px;
  font-weight:500;
}
.room-status {
  font-size:9px;
  letter-spacing:.12em;
  color:#d1d7c4;
}
.room-status i {
  display:inline-block;
  width:5px;
  height:5px;
  background:#adc391;
  border-radius:50%;
  margin-right:8px;
}
.room-layout {
  position:relative;
  padding:20px 6% 40px;
  display:grid;
  grid-template-columns:1fr 360px;
  gap:50px;
  align-items:center;
  min-height:calc(100dvh - 100px);
}
.room-intro {
  align-self:center;
  max-width:550px;
}
.room-intro h2 {
  font-family:Pretendard,serif;
  font-size:clamp(32px,3.3vw,50px);
  font-weight:400;
  line-height:1.6;
}
.room-intro>p:not(.eyebrow) {
  color:#d6ddcc;
  font-size:14px;
  line-height:1.85;
}
.room-note {
  font-size:10px;
  color:#b9c2ae;
  display:inline-block;
  margin-top:60px;
  border-top:1px solid #a4ad9555;
  padding-top:15px;
}
.session-panel {
  background:#14251fef;
  padding:26px;
  border:1px solid #9aa68544;
  box-shadow:0 14px 60px #0003;
  backdrop-filter:blur(12px);
  border-radius:4px;
}
.session-panel>.eyebrow {
  font-size:8px;
  margin-bottom:23px;
}
.session-panel>label {
  display:block;
  font-size:12px;
  color:#d5ddcd;
  margin-bottom:10px;
}
.session-panel>input {
  width:100%;
  padding:12px 0;
  background:none;
  border:0;
  border-bottom:1px solid #78867366;
  color:white;
  font-size:13px;
  border-radius:0;
}
.session-panel>input::placeholder {
  color:#95a08c;
  font-size:12px;
}
.duration-select {
  display:flex;
  background:#0d1d16;
  padding:4px;
  margin-top:22px;
  border-radius:3px;
  gap:4px;
}
.duration-select button {
  background:none;
  border-radius:2px;
  flex:1;
  padding:9px 0;
  color:#a7b59b;
  font-size:11px;
}
.duration-select button.selected {
  background:#344733;
  color:#f2efdf;
}
.timer {
  font:65px/1.2 Georgia,serif;
  text-align:center;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  margin:24px 0 9px;
  color:#f5e7c8;
}
.timer-status {
  font-size:11px;
  text-align:center;
  color:#bac8ad;
  margin-bottom:22px;
  min-height:20px;
}
.session-panel>.button {
  width:100%;
  font-size:13px;
}
.timer-secondary {
  display:flex;
  justify-content:space-between;
  margin-top:15px;
}
.timer-secondary button {
  background:none;
  font-size:11px;
  color:#b5c1a8;
  padding:5px 0;
}
.sound-panel {
  margin-top:22px;
  border-top:1px solid #c0cdaa26;
  padding-top:19px;
}
.sound-panel>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
  font-size:12px;
}
.sound-panel>div button {
  background:#304330;
  font-size:10px;
  color:#c9d6bc;
  padding:6px 9px;
  border-radius:2px;
}
.sound-panel>label {
  display:flex;
  font-size:10px;
  align-items:center;
  gap:12px;
  color:#aebba2;
  margin:12px 0;
}
.sound-panel input {
  width:100%;
  flex:1;
  min-width:0;
  accent-color:var(--gold);
  height:3px;
}
.sound-panel output {
  width:16px;
  font-size:9px;
  text-align:right;
}
.history-panel {
  border-top:1px solid #c0cdaa26;
  margin-top:23px;
  padding-top:18px;
}
.history-panel h3 {
  font-size:12px;
  font-weight:500;
  margin-bottom:12px;
}
.history-panel h3 span {
  color:var(--gold);
  margin-left:6px;
}
.history-panel ul {
  list-style:none;
  padding:0;
  margin:0;
  max-height:105px;
  overflow:auto;
}
.history-panel li {
  font-size:11px;
  line-height:1.6;
  color:#c7d1bd;
  padding:5px 0;
  display:flex;
  gap:8px;
}
.history-panel li:before {
  content:'✓';
  color:#bbce9d;
}
.history-panel li span {
  overflow-wrap:anywhere;
}
.history-panel li small {
  font-size:9px;
  margin-left:auto;
  white-space:nowrap;
  color:#8e9e80;
}
.history-empty {
  font-size:11px;
  color:#8b9a7f;
}
.storage-note {
  font-size:9px;
  color:#7e9073;
  margin:9px 0 0;
}
.snow {
  pointer-events:none;
  position:fixed;
  inset:0;
  background-image:radial-gradient(1px 1px at 38% 10%,#ffffff44 50%,transparent 65%),radial-gradient(1px 1px at 46% 20%,#ffffff33 50%,transparent 65%);
  background-size:240px 230px,300px 340px;
  opacity:.4;
  animation:snow 25s linear infinite;
}
@keyframes snow {
  to {
    background-position:60px 230px,-40px 340px;
  }
}
dialog {
  border:1px solid #7d8f6c;
  background:#15271c;
  color:#e6ebdc;
  padding:43px;
  max-width:510px;
  width:calc(100% - 36px);
  border-radius:3px;
  box-shadow:0 25px 70px #0005;
}
dialog::backdrop {
  background:#06120dd4;
  backdrop-filter:blur(4px);
}
.dialog-close {
  position:absolute;
  right:16px;
  top:11px;
  background:none;
  font-size:26px;
  color:#afbc9f;
}
dialog h2 {
  font-size:29px;
  line-height:1.5;
}
dialog p {
  font-size:14px;
  color:#c0cdb4;
  line-height:1.9;
}
dialog .eyebrow {
  font-size:9px;
  color:var(--gold);
}
dialog .button {
  margin-top:13px;
  width:100%;
  justify-content:center;
}
.toast {
  position:fixed;
  bottom:26px;
  left:50%;
  transform:translate(-50%,20px);
  background:#ebead9;
  color:#203720;
  padding:13px 22px;
  border:1px solid #b9c3ab;
  box-shadow:0 5px 25px #0003;
  font-size:13px;
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition:.25s;
  max-width:90vw;
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0);
}
@media(min-width:1650px) {
  .hero-copy {
    padding-top:120px;
  }
  .hero {
    height:790px;
  }
}
@media(max-width:1050px) {
  .site-header {
    padding:0 4%;
    height:86px;
  }
  .site-header nav {
    gap:23px;
  }
  .nav-link {
    padding:31px 0;
  }
  .brand span {
    font-size:21px;
  }
  .brand small {
    font-size:7px;
  }
  .prototype-tag {
    display:none;
  }
  .hero {
    min-height:620px;
  }
  .hero-copy {
    padding:85px 6%;
  }
  .hero h1 {
    font-size:52px;
  }
  .hero-bottom {
    left:6%;
    right:6%;
  }
  .intro-strip {
    gap:20px;
    padding:30px 6%;
  }
  .intro-strip>div {
    font-size:10px;
  }
  .section {
    padding:58px 6%;
  }
  .section-heading>p {
    display:none;
  }
  .upcoming {
    gap:5%;
  }
  .goods-teaser>div {
    padding:50px 10%;
  }
  .goods-hero>div {
    padding:50px 10%;
  }
  .goods-hero h1 {
    font-size:38px;
  }
  .product-grid {
    gap:18px;
  }
  .product-visual {
    height:280px;
  }
  .paper-pad {
    transform:rotate(-7deg) scale(.9);
  }
  .bookmark.one {
    left:15%;
  }
  .bookmark.two {
    left:44%;
  }
  .room-layout {
    grid-template-columns:1fr 340px;
    gap:25px;
    padding:12px 4% 30px;
  }
  .room-intro h2 {
    font-size:37px;
  }
  .studio {
    padding:55px 6%;
  }
  .asset-flow {
    font-size:10px;
    gap:8px;
  }
  .studio-summary {
    gap:25px;
  }
  .scope-panel {
    gap:28px;
    padding:27px;
  }
}
@media(max-width:700px) {
  .site-header {
    height:auto;
    min-height:104px;
    flex-wrap:wrap;
    padding:18px 6% 0;
    gap:12px;
  }
  .brand-wordmark {
    width:210px;
    height:40px;
  }
  .brand-emblem {
    width:96px;
    height:96px;
  }
  .brand span {
    font-size:21px;
  }
  .brand svg {
    width:28px;
  }
  .brand small {
    font-size:6px;
  }
  .site-header nav {
    width:100%;
    justify-content:space-between;
    gap:20px;
  }
  .nav-link {
    padding:12px 0 15px;
    font-size:12px;
  }
  .hero {
    min-height:615px;
    height:calc(100svh - 115px);
    max-height:760px;
  }
  .hero-image {
    object-position:62% center;
  }
  .hero-shade {
    background:linear-gradient(0deg,#09170ff2 0%,#09170fb3 44%,#09170f0d 100%);
  }
  .hero-copy {
    padding:200px 7% 85px;
    max-width:none;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    height:100%;
    justify-content:flex-end;
  }
  .hero h1 {
    font-size:42px;
    margin-bottom:20px;
  }
  .hero-copy>.eyebrow {
    font-size:8px;
    margin-bottom:15px;
  }
  .hero-description {
    font-size:13px;
    margin-bottom:24px;
  }
  .hero-footnote {
    font-size:9px;
    margin-bottom:4px;
  }
  .hero-copy .button {
    font-size:12px;
    min-width:205px;
  }
  .hero-bottom {
    padding:17px 0;
    font-size:9px;
  }
  .hero-bottom>span:last-child {
    display:none;
  }
  .hero-bottom>span:first-child {
    font-size:8px;
  }
  .intro-strip {
    flex-wrap:wrap;
    justify-content:space-between;
    padding:28px 7%;
    gap:24px 9px;
  }
  .intro-strip>p {
    width:100%;
    font-size:12px;
  }
  .intro-strip>div {
    font-size:9px;
    max-width:30%;
  }
  .intro-strip>div>span {
    font-size:20px;
    margin-bottom:8px;
  }
  .section {
    padding:45px 7%;
  }
  .section-heading {
    margin-bottom:25px;
  }
  .section-heading h2 {
    font-size:26px;
  }
  .eyebrow {
    font-size:8px;
  }
  .mode-grid {
    grid-template-columns:1fr;
  }
  .mode-card {
    padding:24px 0;
    border-right:0;
    border-bottom:1px solid #c5c9bc;
    position:relative;
    display:grid;
    grid-template-columns:55px 1fr;
    gap:0 20px;
  }
  .mode-index {
    grid-column:span 2;
    font-size:8px;
    margin-bottom:22px;
  }
  .mode-card svg {
    grid-row:span 3;
    margin:0;
    width:43px;
    height:43px;
    align-self:center;
  }
  .mode-card h3 {
    font-size:21px;
    margin:0 0 7px;
  }
  .mode-card p {
    font-size:11px;
    margin-bottom:17px;
  }
  .mode-link {
    font-size:10px;
  }
  .mode-card:last-child {
    border-bottom:0;
  }
  .upcoming {
    grid-template-columns:1fr;
    gap:20px;
  }
  .upcoming h2 {
    font-size:29px;
  }
  .upcoming>div>p:last-child {
    font-size:12px;
  }
  .next-list h3 {
    font-size:17px;
  }
  .next-list p {
    font-size:11px;
  }
  .next-list button {
    gap:17px;
  }
  .concept-symbol {
    width:51px;
    height:71px;
    font-size:28px;
  }
  .goods-teaser {
    grid-template-columns:1fr;
  }
  .goods-teaser img {
    height:300px;
  }
  .goods-teaser>div {
    padding:42px 7%;
  }
  .goods-teaser h2 {
    font-size:30px;
  }
  .goods-teaser p:not(.eyebrow) {
    font-size:13px;
  }
  .goods-hero {
    grid-template-columns:1fr;
  }
  .goods-hero>div {
    padding:43px 7% 38px;
  }
  .goods-hero h1 {
    font-size:37px;
  }
  .goods-hero>img {
    height:300px;
  }
  .goods-hero p {
    font-size:13px;
  }
  .kit-toolbar {
    padding:23px 7%;
    gap:20px;
    flex-wrap:wrap;
  }
  .kit-toolbar>span {
    font-size:8px;
  }
  .product-grid {
    grid-template-columns:1fr;
    gap:44px;
    padding-top:26px;
  }
  .product-visual {
    height:320px;
  }
  .paper-pad {
    transform:rotate(-7deg);
  }
  .desk-mat {
    max-width:310px;
    height:176px;
  }
  .bookmark.one {
    left:28%;
  }
  .bookmark.two {
    left:47%;
  }
  .product-card>h3 {
    font-size:22px;
  }
  .product-card>p {
    font-size:13px;
  }
  .ritual h2 {
    font-size:28px;
  }
  .ritual>div {
    flex-direction:column;
    gap:6px;
    align-items:flex-start;
    max-width:270px;
    margin:20px auto;
    text-align:left;
  }
  .ritual>div p {
    font-size:12px;
  }
  .ritual>.muted {
    font-size:10px;
  }
  .studio {
    padding:43px 7%;
  }
  .studio-head h1 {
    font-size:38px;
  }
  .studio-head>p:not(.eyebrow) {
    font-size:12px;
  }
  .studio-head .button {
    font-size:12px;
    gap:20px;
  }
  .studio-summary {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:40px;
  }
  .studio-summary h3 {
    font-size:20px;
  }
  .studio-summary p {
    font-size:12px;
  }
  .asset-flow {
    display:grid;
    grid-template-columns:1fr 15px 1fr;
    font-size:11px;
    gap:15px;
  }
  .asset-flow b:nth-of-type(2),.asset-flow b:nth-of-type(4) {
    display:none;
  }
  .curriculum-heading {
    margin-top:43px;
    align-items:start;
    gap:15px;
  }
  .curriculum-heading h2 {
    font-size:24px;
  }
  .curriculum-heading>span {
    font-size:8px;
    white-space:nowrap;
    padding:6px;
  }
  .curriculum-heading .eyebrow {
    font-size:7px;
  }
  .source-note {
    font-size:10px;
  }
  .lesson>summary {
    grid-template-columns:30px 1fr 16px;
    gap:11px;
    padding:20px 0;
  }
  .lesson>summary>.num {
    font-size:19px;
  }
  .lesson>summary>span:nth-child(2) {
    font-size:13px;
  }
  .lesson-content {
    margin-left:41px;
    grid-template-columns:1fr;
    gap:4px;
  }
  .lesson-content p {
    font-size:12px;
  }
  .lesson-transfer {
    grid-column:1;
  }
  .scope-panel {
    grid-template-columns:1fr;
    padding:24px;
    margin-top:45px;
  }
  .scope-panel h3 {
    font-size:20px;
  }
  .scope-panel ul {
    font-size:12px;
  }
  .scope-panel>div>p:last-child:not(.eyebrow) {
    font-size:11px;
  }
  footer {
    padding:31px 7%;
    flex-wrap:wrap;
    gap:15px;
  }
  .footer-brand {
    font-size:18px;
  }
  footer p {
    font-size:10px;
  }
  footer small {
    width:100%;
    margin-left:0;
    font-size:9px;
    line-height:1.7;
  }
  .room-top {
    padding:18px 5%;
    gap:10px;
  }
  .room-top>div {
    margin-left:auto;
  }
  .room-status {
    display:none;
  }
  .room-bg {
    object-position:60% center;
  }
  .room-shade {
    background:linear-gradient(0deg,#09170fea 10%,#09170f55 80%);
  }
  .room-layout {
    display:flex;
    flex-direction:column;
    gap:25px;
    padding:40px 5% 30px;
  }
  .room-intro {
    width:100%;
    max-width:none;
    padding:0 3%;
  }
  .room-intro>.eyebrow {
    font-size:8px;
  }
  .room-intro h2 {
    font-size:32px;
    line-height:1.5;
    margin-bottom:14px;
  }
  .room-intro>p:not(.eyebrow) {
    font-size:12px;
  }
  .room-note {
    margin-top:12px;
    font-size:9px;
  }
  .session-panel {
    width:100%;
    max-width:410px;
    padding:26px;
  }
  .timer {
    font-size:68px;
  }
  .room-layout {
    min-height:0;
  }
  dialog {
    padding:35px 28px;
  }
  dialog h2 {
    font-size:25px;
  }
  dialog p {
    font-size:13px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
/* Romance-fantasy edition: restrained book-cover framing and four companions. */
.cover-frame {
  position:absolute;
  inset:25px;
  border:1px solid #cfb78a66;
  pointer-events:none;
  z-index:1;
}
.cover-frame:before,.cover-frame:after {
  content:'◆';
  position:absolute;
  color:#d6bf8c;
  font-size:10px;
  background:#16221de0;
  padding:8px;
  top:-17px;
}
.cover-frame:before {
  left:24px;
}
.cover-frame:after {
  right:24px;
}
.cover-frame>span {
  position:absolute;
  bottom:-14px;
  left:calc(50% - 17px);
  padding:0 12px;
  background:#122019;
  color:#d6bf8c;
}
.hero-copy,.hero-bottom {
  z-index:2;
}
.hero-copy {
  padding-top:80px;
}
.hero h1 {
  text-shadow:0 2px 24px #07110c80;
}
.hero-description {
  margin-bottom:21px;
}
.mate-tabs {
  display:flex;
  gap:9px;
  margin-bottom:22px;
}
.mate-tabs button {
  background:#0c191c85;
  color:#babda9;
  border:1px solid #8f947c66;
  padding:9px 18px;
  font-size:11px;
  letter-spacing:.04em;
}
.mate-tabs button.selected {
  background:#d6bf8c1c;
  border-color:#d6bf8c;
  color:#eee1be;
}
.hero-bottom {
  bottom:16px;
  border:0;
}
.hero-image {
  transition:opacity .25s;
}
.companions {
  background:#eae5da;
  color:#253a30;
}
.companions .eyebrow {
  color:#6c795d;
}
.companions h2 {
  font-family:Pretendard,serif;
}
.companion-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
}
.companion-card {
  text-align:left;
  background:#152b22;
  color:#e9e6d5;
  position:relative;
  overflow:hidden;
  border:1px solid #6e775e;
  padding:0;
  box-shadow:8px 8px 0 #d9d4c8;
}
.companion-card:before {
  content:'';
  position:absolute;
  inset:12px;
  border:1px solid #d6bf8c6b;
  pointer-events:none;
  z-index:1;
}
.companion-card img {
  display:block;
  width:100%;
  height:315px;
  object-fit:cover;
  object-position:75% 40%;
  transition:transform .4s;
}
.companion-card:hover img {
  transform:scale(1.025);
}
.companion-card:nth-child(2) {
  background:#25243a;
  border-color:#7e7897;
}
.companion-info {
  position:relative;
  padding:28px 32px 30px;
}
.companion-info small {
  font-size:8px;
  letter-spacing:.18em;
  color:#d3c39b;
}
.companion-info h3 {
  font-family:Pretendard,serif;
  font-size:26px;
  font-weight:500;
  margin:15px 0 12px;
}
.companion-info p {
  font-size:12px;
  color:#c6cdbf;
}
.companion-info>span {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#9ba993;
  gap:15px;
  padding-top:12px;
  border-top:1px solid #ffffff20;
}
.companion-info b {
  font-weight:400;
  color:#dbccaa;
}
.teaching-fit {
  padding:35px 0 0;
}
.teaching-fit h2 {
  font-size:30px;
}
.teaching-fit>div {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}
.teaching-fit>div p {
  font-size:13px;
  color:#aebaa7;
}
.teaching-fit b {
  display:block;
  color:#ececdc;
  font-weight:500;
  margin-bottom:8px;
}
.fit-note {
  border-left:2px solid #d6bf8c66;
  padding-left:16px;
  color:#9eae91;
  font-size:12px;
}
.room-layout {
  grid-template-columns:340px 1fr;
}
.session-panel {
  order:-1;
}
.room-intro {
  align-self:end;
  justify-self:end;
  text-align:right;
  padding-bottom:28px;
  text-shadow:0 2px 12px #000;
}
.room-intro h2 {
  font-size:35px;
}
.room-note {
  margin-top:20px;
}
.room-shade {
  background:linear-gradient(90deg,#07130dc7,transparent 63%),linear-gradient(0deg,#08130ecc,transparent 65%);
}
body[data-mate="serin"] .session-panel {
  background:#252335ee;
  border-color:#9a90ad66;
}
body[data-mate="serin"] .duration-select {
  background:#1a1826;
}
body[data-mate="serin"] .duration-select button.selected,body[data-mate="serin"] .sound-panel>div button {
  background:#49415d;
}
.room-top {
  padding-top:22px;
}
@media(min-width:1650px) {
  .hero-copy {
    padding-top:100px;
  }
}
@media(max-width:1050px) {
  .hero-copy {
    padding-top:72px;
  }
  .companion-card img {
    height:260px;
  }
  .companion-info {
    padding:24px;
  }
  .companion-info h3 {
    font-size:22px;
  }
  .room-layout {
    grid-template-columns:320px 1fr;
  }
  .room-intro h2 {
    font-size:30px;
  }
}
@media(max-width:700px) {
  .cover-frame {
    inset:14px;
  }
  .hero-copy {
    padding:195px 8% 72px;
  }
  .hero h1 {
    font-size:39px;
  }
  .hero-description {
    margin-bottom:16px;
  }
  .mate-tabs {
    margin-bottom:17px;
  }
  .mate-tabs button {
    padding:8px 17px;
    font-size:10px;
  }
  .hero-bottom {
    bottom:8px;
  }
  .companion-grid {
    grid-template-columns:1fr;
    gap:26px;
  }
  .companion-card img {
    height:270px;
  }
  .companion-info {
    padding:26px;
  }
  .companion-info h3 {
    font-size:24px;
  }
  .teaching-fit>div {
    grid-template-columns:1fr;
    gap:3px;
  }
  .teaching-fit h2 {
    font-size:26px;
  }
  .room-layout {
    display:flex;
    flex-direction:column;
    padding-top:210px;
  }
  .room-intro {
    order:-2;
    text-align:left;
    align-self:auto;
    padding-bottom:0;
  }
  .room-intro h2 {
    font-size:29px;
  }
  .session-panel {
    order:0;
  }
  .room-bg {
    object-position:69% center;
  }
  .room-intro>p:not(.eyebrow) {
    font-size:11px;
  }
  .room-note {
    margin-top:10px;
  }
  .prototype-tag {
    display:none;
  }
}
.scene-tabs {
  display:flex;
  gap:0;
  margin:0 0 17px;
  border-bottom:1px solid #cdb98a55;
  width:max-content;
}
.scene-tabs button {
  font-size:12px;
  background:none;
  padding:8px 17px 10px;
  color:#b6bfae;
  border-bottom:2px solid transparent;
}
.scene-tabs button.selected {
  color:#efdeb1;
  border-color:#d6bf8c;
}
.room-scene-tabs {
  width:100%;
  margin:0 0 21px;
}
.room-scene-tabs button {
  width:50%;
}
.hero-copy {
  padding-top:58px;
}
.hero h1 {
  font-size:clamp(36px,3.8vw,61px);
}
.hero-description {
  margin-bottom:16px;
}
.mate-tabs {
  margin-bottom:17px;
}
.quiet-bar[hidden] {
  display:none;
}
.quiet-bar {
  position:absolute;
  bottom:35px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:25px;
  background:#101b18c9;
  backdrop-filter:blur(10px);
  border:1px solid #b6ae8c50;
  padding:16px 23px;
  z-index:3;
  white-space:nowrap;
}
.quiet-bar>span {
  font-size:12px;
  color:#c5ceb9;
}
.quiet-bar strong {
  font:27px Georgia,serif;
  color:#edd7a5;
  font-variant-numeric:tabular-nums;
}
.quiet-bar button {
  background:none;
  border-left:1px solid #ffffff30;
  padding-left:20px;
  font-size:12px;
}
.room.quiet {
  overflow:hidden;
}
.room.quiet .room-layout {
  visibility:hidden;
  pointer-events:none;
}
.room.quiet .room-shade {
  background:linear-gradient(0deg,#10201555,transparent 30%);
}
.room-top #quiet-toggle {
  margin-left:auto;
}
.room-top>div {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.room-intro h2:empty {
  display:none;
}
.dining-goods {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:65px;
  background:#dadfce;
  color:#253c2e;
}
.dining-goods h2 {
  font-family:Pretendard,serif;
}
.dining-goods p {
  font-size:14px;
}
.dining-goods .eyebrow {
  color:#677455;
}
.cup-art {
  height:240px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  background:radial-gradient(ellipse at center,#eeeee2,transparent 65%);
}
.cup {
  width:133px;
  height:140px;
  border-radius:8px 8px 42px 42px;
  background:linear-gradient(90deg,#162e23,#426047 55%,#1b3527);
  border-top:7px solid #d6bd84;
  z-index:2;
  display:grid;
  place-items:center;
  font:38px Georgia,serif;
  color:#d5bb7e;
  box-shadow:4px 17px 20px #162e2330;
}
.cup:after {
  content:'';
  position:absolute;
  width:42px;
  height:60px;
  border:12px solid #284634;
  border-radius:0 27px 30px 0;
  left:calc(50% + 61px);
  top:67px;
  z-index:-1;
}
.saucer {
  position:absolute;
  width:207px;
  height:80px;
  border-radius:50%;
  bottom:23px;
  background:radial-gradient(ellipse,#6c805b,#243c2c);
  border:1px solid #bfab71;
  box-shadow:4px 12px 18px #0002;
}
@media(min-width:1650px) {
  .hero-copy {
    padding-top:82px;
  }
}
@media(max-width:700px) {
  .hero-copy {
    padding:170px 8% 64px;
  }
  .hero h1 {
    font-size:34px;
    line-height:1.4;
    margin-bottom:15px;
  }
  .hero-description {
    font-size:12px;
    margin-bottom:14px;
  }
  .hero-copy>.eyebrow {
    margin-bottom:12px;
  }
  .scene-tabs {
    margin-bottom:13px;
  }
  .scene-tabs button {
    font-size:11px;
    padding:7px 12px;
  }
  .mate-tabs {
    margin-bottom:14px;
  }
  .hero-copy .button {
    min-height:45px;
    padding:12px 18px;
  }
  .hero {
    min-height:650px;
  }
  .quiet-bar {
    bottom:25px;
    gap:15px;
    padding:14px 16px;
    max-width:94vw;
    flex-wrap:wrap;
    justify-content:center;
    white-space:normal;
    width:max-content;
  }
  .quiet-bar>span {
    font-size:10px;
  }
  .quiet-bar strong {
    font-size:24px;
  }
  .quiet-bar button {
    font-size:11px;
  }
  .room-top>div {
    position:static;
    transform:none;
    order:2;
    margin-left:0;
  }
  .room-top #quiet-toggle {
    font-size:11px;
    order:3;
    padding:10px;
  }
  .room-top {
    justify-content:space-between;
  }
  .dining-goods {
    grid-template-columns:1fr;
    gap:25px;
    padding-top:30px;
  }
  .dining-goods h2 {
    font-size:29px;
  }
  .dining-goods p {
    font-size:12px;
  }
}
/* Character collection expansion. */
.mate-tabs {
  flex-wrap:wrap;
  max-width:500px;
}
.mate-tabs button {
  padding:9px 14px;
}
.companion-card[data-open-mate="caiden"] {
  background:#263647;
  border-color:#7a8a97;
}
.companion-card[data-open-mate="livia"] {
  background:#432b30;
  border-color:#977a7f;
}
body[data-mate="caiden"] .session-panel {
  background:#1d2d3dee;
  border-color:#9aaebb66;
}
body[data-mate="caiden"] .duration-select {
  background:#152333;
}
body[data-mate="caiden"] .duration-select button.selected,body[data-mate="caiden"] .sound-panel>div button {
  background:#3d5265;
}
body[data-mate="livia"] .session-panel {
  background:#3b262dee;
  border-color:#b7929566;
}
body[data-mate="livia"] .duration-select {
  background:#271b21;
}
body[data-mate="livia"] .duration-select button.selected,body[data-mate="livia"] .sound-panel>div button {
  background:#61454b;
}
@media(max-width:700px) {
  .mate-tabs {
    gap:6px;
  }
  .mate-tabs button {
    padding:8px 11px;
    font-size:10px;
  }
  .hero {
    min-height:680px;
  }
}
/* Four worlds, seven people. */
[hidden] {
  display:none!important;
}
.genre-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 12px;
}
.genre-tabs button {
  background:transparent;
  border:1px solid #a6acaa4d;
  border-radius:20px;
  padding:7px 11px;
  font-size:10px;
  color:#b8c1b9;
  white-space:nowrap;
}
.genre-tabs button.selected {
  color:#203229;
  background:#dfc994;
  border-color:#dfc994;
}
.hero-copy {
  padding-top:98px;
}
.hero-copy>.eyebrow {
  margin-bottom:18px;
}
.hero h1 {
  font-size:clamp(35px,3.6vw,58px);
  margin-bottom:18px;
}
.hero-description {
  font-size:14px;
}
.hero {
  min-height:660px;
}
.mate-tabs {
  margin-bottom:16px;
}
.mate-tabs button {
  padding:7px 13px;
}
.companions .genre-tabs {
  margin-top:20px;
}
.companions .genre-tabs button {
  color:#667266;
  border-color:#98a18d;
}
.companions .genre-tabs button.selected {
  background:#233a30;
  border-color:#233a30;
  color:#eee4cb;
}
.collection-caption {
  font-size:13px;
  color:#6b7569;
  margin:17px 0 30px;
}
.companion-card[data-card-genre="sf"] {
  background:#1a2d43;
  border-color:#7ea1bb;
}
.companion-card[data-card-genre="noir"] {
  background:#303736;
  border-color:#a39b86;
}
.companion-card[data-card-genre="modern"] {
  background:#3b505c;
  border-color:#adbbbf;
}
.sound-panel label>span {
  min-width:65px;
}
.hero-bottom {
  left:6%;
  right:6%;
}
body[data-genre="sf"] .session-panel {
  background:#12283eef;
}
body[data-genre="noir"] .session-panel {
  background:#292e2cef;
}
body[data-genre="modern"] .session-panel {
  background:#2a3c45ef;
}
/* Character merchandise: original illustration prints and character heraldry. */
.character-goods {
  --collection:#1e3a31;
  --collection-accent:#d9bd79;
  --collection-paper:#eee6d4;
  background:#efebe2;
  color:#23372e;
}
.collection-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:65px 7% 38px;
}
.collection-head h1 {
  font-family:Pretendard,serif;
  font-size:48px;
  line-height:1.35;
  margin-bottom:20px;
}
.collection-head .eyebrow {
  color:#718071;
  font-size:9px;
  margin-bottom:18px;
}
.collection-head p:not(.eyebrow) {
  font-size:14px;
  color:#697568;
  line-height:1.85;
  margin:0;
}
.edition-stamp {
  width:132px;
  height:154px;
  border:1px solid #b4ac97;
  border-radius:70px 70px 3px 3px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  line-height:1.9;
  font:11px/1.9 Georgia,serif;
  letter-spacing:.15em;
  color:#877d65;
}
.edition-stamp b {
  font-size:29px;
  font-weight:400;
  letter-spacing:0;
  margin-top:12px;
}
.goods-mates {
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:10px;
  margin:0 7% 32px;
}
.goods-mates button {
  display:flex;
  align-items:center;
  gap:10px;
  background:#e5e0d5;
  border:1px solid transparent;
  padding:8px;
  text-align:left;
  color:#5a6257;
  border-radius:3px;
  transition:.2s;
}
.goods-mates button.selected {
  border-color:var(--collection);
  background:var(--collection);
  color:var(--collection-paper);
}
.goods-mates img {
  width:42px;
  height:49px;
  object-fit:cover;
  object-position:73% center;
  border-radius:2px;
}
.goods-mates small {
  display:block;
  font-size:7px;
  letter-spacing:.05em;
  margin-bottom:7px;
  opacity:.65;
}
.goods-mates span {
  font-size:12px;
}
.collection-display {
  display:grid;
  grid-template-columns:31% 69%;
  padding:30px 4% 40px 7%;
  gap:0;
  background:var(--collection-paper);
  transition:background .2s;
}
.collection-story {
  align-self:center;
  padding:0 30px 0 0;
  position:relative;
  z-index:2;
}
.collection-story .eyebrow {
  font-size:9px;
  color:var(--collection);
  margin-bottom:23px;
  opacity:.7;
}
.collection-emblem {
  width:68px;
  height:68px;
  color:var(--collection);
  margin-bottom:24px;
}
.collection-emblem svg {
  width:100%;
  height:100%;
}
.collection-story h2 {
  font-family:Pretendard,serif;
  font-size:34px;
  color:var(--collection);
  margin-bottom:15px;
}
.collection-story>p:not(.eyebrow) {
  font-size:13px;
  line-height:1.9;
  color:#647064;
  max-width:310px;
}
.collection-story blockquote {
  font:17px/1.7 Pretendard,serif;
  margin:25px 0;
  color:var(--collection);
}
.collection-story .design-label {
  color:var(--collection);
  border-color:currentColor;
  font-size:9px;
  opacity:.6;
  margin-top:15px;
}
.collection-colors {
  display:flex;
  gap:8px;
}
.collection-colors span {
  display:block;
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid #0002;
}
.collector-stage {
  height:570px;
  position:relative;
  isolation:isolate;
  perspective:1200px;
  background:radial-gradient(ellipse at center,#fff6,transparent 70%);
}
.collector-mat {
  width:88%;
  height:305px;
  position:absolute;
  top:48px;
  left:5%;
  background:var(--collection);
  border-radius:12px;
  overflow:hidden;
  box-shadow:3px 4px 0 #17271f,9px 20px 35px #17241944;
  transform:rotate(-7deg);
  border:1px solid #fff4;
}
.collector-mat>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 43%;
}
.mat-fade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--collection) 3%,transparent 65%);
}
.mat-border {
  position:absolute;
  inset:11px;
  border:1px solid var(--collection-accent);
  border-radius:6px;
  opacity:.6;
}
.mat-caption {
  position:absolute;
  inset:26px auto auto 30px;
  color:var(--collection-accent);
  display:flex;
  flex-direction:column;
  max-width:50%;
}
.mini-emblem {
  width:40px;
  height:40px;
  display:block;
  margin-bottom:15px;
}
.mini-emblem svg {
  width:100%;
  height:100%;
}
.mat-caption small {
  font-size:6px;
  letter-spacing:.18em;
}
.mat-caption strong {
  font:38px/1.25 Georgia,serif;
  letter-spacing:.05em;
  margin:7px 0;
}
.mat-caption p {
  font-size:10px;
  letter-spacing:.08em;
  margin:0 0 29px;
}
.mat-caption>span:last-child {
  font-size:6px;
  letter-spacing:.12em;
}
.collector-pad {
  position:absolute;
  z-index:3;
  left:5%;
  bottom:16px;
  transform:rotate(-10deg);
  width:210px;
  height:285px;
  padding:17px 21px;
  background:var(--collection-paper);
  color:var(--collection);
  box-shadow:2px 4px 0 #d0cab9,4px 6px 0 #f6efdf,11px 21px 35px #1724193d;
  border:1px solid #b8b5a677;
}
.pad-binding {
  position:absolute;
  inset:0 0 auto;
  height:9px;
  background:var(--collection);
  border-bottom:1px solid var(--collection-accent);
}
.pad-heading {
  display:flex;
  align-items:center;
  gap:10px;
  margin:5px 0 8px;
}
.pad-heading>span {
  width:38px;
  height:38px;
  flex-shrink:0;
}
.pad-heading svg {
  width:100%;
  height:100%;
}
.pad-heading small {
  font:6px/1.7 Georgia,serif;
  letter-spacing:.14em;
  max-width:90px;
}
.collector-pad h3 {
  font-family:Pretendard,serif;
  font-size:16px;
  font-weight:500;
  margin-bottom:12px;
}
.pad-date {
  font:6px Georgia,serif;
  letter-spacing:.13em;
  margin-bottom:16px;
  opacity:.6;
}
.pad-rules p {
  font-size:7px;
  margin:12px 0 0;
}
.pad-rules i {
  display:block;
  height:17px;
  border-bottom:1px solid #9998;
}
.pad-footer {
  font-size:6px;
  margin-top:21px;
  display:flex;
  justify-content:space-between;
  letter-spacing:.03em;
}
.pad-footer span {
  font:6px Georgia,serif;
}
.collector-photo {
  position:absolute;
  z-index:4;
  right:10%;
  bottom:10px;
  transform:rotate(9deg);
  width:169px;
  height:255px;
  background:var(--collection);
  border-radius:6px;
  overflow:hidden;
  border:5px solid var(--collection);
  box-shadow:8px 17px 22px #14251c44;
}
.collector-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:74% 28%;
}
.photo-frame {
  position:absolute;
  inset:5px;
  border:1px solid var(--collection-accent);
  border-radius:70px 70px 0 0;
  opacity:.7;
}
.photo-caption {
  position:absolute;
  inset:auto 0 0;
  padding:40px 13px 16px;
  background:linear-gradient(transparent,var(--collection) 40%);
  color:var(--collection-accent);
  display:flex;
  flex-direction:column;
  text-align:center;
}
.photo-caption small {
  font-size:6px;
  letter-spacing:.13em;
}
.photo-caption strong {
  font:25px Georgia,serif;
  letter-spacing:.1em;
  margin:8px 0;
}
.photo-caption span {
  font-size:7px;
}
.collector-seal {
  position:absolute;
  z-index:5;
  bottom:58px;
  left:47%;
  height:70px;
  width:70px;
  background:var(--collection);
  color:var(--collection-accent);
  border:4px double currentColor;
  border-radius:50%;
  box-shadow:3px 6px 8px #17241b44;
  transform:rotate(-14deg);
  display:grid;
  place-items:center;
}
.collector-seal span {
  width:50px;
  height:50px;
}
.collector-seal svg {
  width:100%;
  height:100%;
}
.stage-caption {
  position:absolute;
  bottom:-22px;
  left:0;
  right:0;
  text-align:center;
  font-size:8px;
  letter-spacing:.16em;
  color:#817e6d;
}
.character-goods[data-collection="ian"] .collector-pad,.character-goods[data-collection="doyun"] .collector-pad {
  background-image:linear-gradient(#69839317 1px,transparent 1px),linear-gradient(90deg,#69839317 1px,transparent 1px);
  background-size:10px 10px;
}
.character-goods[data-collection="ian"] .photo-frame {
  border-radius:3px;
  clip-path:polygon(0 0,78% 0,100% 17%,100% 100%,0 100%);
}
.character-goods[data-collection="seojin"] .collector-pad {
  border-top:13px solid var(--collection-accent);
}
.character-goods[data-collection="seojin"] .photo-frame {
  border-radius:0;
}
.character-goods[data-collection="doyun"] .photo-frame {
  border-radius:0;
}
.character-goods[data-collection="serin"] .mat-border {
  border-radius:70px 12px 70px 12px;
}
.character-goods[data-collection="caiden"] .collector-seal {
  border-radius:8px 8px 50% 50%;
}
.character-goods[data-collection="livia"] .collector-seal {
  border-style:dashed;
}
.collection-specs {
  padding:65px 7%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px;
}
.collection-specs article {
  border-top:1px solid #b6bbae;
  padding-top:22px;
}
.collection-specs small {
  font-size:8px;
  letter-spacing:.12em;
  color:#808776;
}
.collection-specs h3 {
  font-size:19px;
  font-weight:500;
  margin:17px 0 12px;
  color:var(--collection);
}
.collection-specs p {
  font-size:13px;
  line-height:1.85;
  color:#677260;
}
.collection-specs .text-button {
  font-size:11px;
  color:var(--collection);
}
.collection-close {
  padding:45px 7%;
  text-align:center;
  background:var(--collection);
  color:var(--collection-paper);
}
.collection-close p {
  font-family:Pretendard,serif;
  font-size:24px;
  margin-bottom:24px;
}
.collection-close .gold {
  background:var(--collection-accent);
  color:var(--collection);
}
.collection-close small {
  display:block;
  font-size:10px;
  margin-top:25px;
  opacity:.6;
}
@media(min-width:1650px) {
  .hero-copy {
    padding-top:132px;
  }
  .collection-display {
    grid-template-columns:34% 66%;
    padding-right:8%;
  }
  .collector-stage {
    height:650px;
  }
  .collector-mat {
    height:370px;
  }
  .collector-pad {
    width:230px;
    height:310px;
    left:9%;
  }
  .collector-photo {
    width:190px;
    height:290px;
    right:12%;
  }
  .collector-seal {
    left:47%;
    bottom:73px;
  }
}
@media(max-width:1100px) {
  .goods-mates {
    grid-template-columns:repeat(4,1fr);
  }
  .collection-display {
    grid-template-columns:32% 68%;
    padding-left:5%;
    padding-right:3%;
  }
  .collector-stage {
    height:500px;
  }
  .collector-mat {
    height:255px;
    top:48px;
    width:91%;
    left:3%;
  }
  .collector-pad {
    width:180px;
    height:265px;
    left:5%;
    bottom:8px;
    padding:16px;
  }
  .collector-photo {
    width:144px;
    height:222px;
    right:4%;
    bottom:7px;
  }
  .collector-seal {
    left:49%;
    bottom:38px;
    width:57px;
    height:57px;
  }
  .collector-seal span {
    width:42px;
    height:42px;
  }
  .collection-story h2 {
    font-size:28px;
  }
  .collection-story>p:not(.eyebrow) {
    font-size:12px;
  }
  .mat-caption {
    top:23px;
    left:23px;
  }
  .mat-caption strong {
    font-size:30px;
  }
  .mat-caption p {
    margin-bottom:13px;
  }
  .mini-emblem {
    margin-bottom:8px;
    width:32px;
    height:32px;
  }
  .collection-specs {
    gap:25px;
  }
}
@media(max-width:700px) {
  .hero-copy {
    padding:165px 8% 84px;
  }
  .hero {
    min-height:740px;
  }
  .hero h1 {
    font-size:34px;
  }
  .hero-copy>.eyebrow {
    font-size:8px;
  }
  .hero-description {
    font-size:12px;
  }
  .genre-tabs {
    gap:5px;
  }
  .genre-tabs button {
    font-size:9px;
    padding:6px 9px;
  }
  .hero-bottom {
    bottom:8px;
  }
  .collection-head {
    padding:40px 7% 28px;
    gap:20px;
  }
  .collection-head h1 {
    font-size:33px;
  }
  .collection-head .eyebrow {
    font-size:7px;
  }
  .collection-head p:not(.eyebrow) {
    font-size:12px;
  }
  .edition-stamp {
    width:73px;
    height:103px;
    flex-shrink:0;
    font-size:7px;
  }
  .edition-stamp b {
    font-size:23px;
    margin-top:5px;
  }
  .goods-mates {
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    margin:0 6% 25px;
  }
  .goods-mates button {
    padding:6px;
    gap:5px;
    flex-direction:column;
    text-align:center;
  }
  .goods-mates img {
    width:45px;
    height:49px;
  }
  .goods-mates small {
    font-size:6px;
    margin-bottom:3px;
  }
  .goods-mates span {
    font-size:10px;
  }
  .collection-display {
    display:flex;
    flex-direction:column;
    padding:28px 6% 42px;
    overflow:hidden;
  }
  .collection-story {
    width:100%;
    padding:0;
    display:grid;
    grid-template-columns:1fr 55px;
    gap:0 15px;
    align-items:start;
  }
  .collection-story .eyebrow {
    margin-bottom:11px;
    grid-column:1;
    grid-row:1;
  }
  .collection-emblem {
    grid-column:2;
    grid-row:1 / 4;
    width:55px;
    height:55px;
    margin:0;
  }
  .collection-story h2 {
    font-size:28px;
    grid-column:1;
    margin-bottom:13px;
  }
  .collection-story>p:not(.eyebrow) {
    grid-column:1 / 3;
    max-width:100%;
    font-size:12px;
    margin-bottom:12px;
  }
  .collection-story blockquote {
    grid-column:1;
    font-size:14px;
    margin:0 0 10px;
  }
  .collection-colors {
    grid-column:1;
    margin:5px 0;
  }
  .collection-story .design-label {
    grid-column:2;
    grid-row:4 / 7;
    white-space:nowrap;
    justify-self:end;
    font-size:7px;
    padding:5px;
  }
  .collector-stage {
    width:100%;
    height:440px;
    margin-top:18px;
  }
  .collector-mat {
    width:96%;
    height:205px;
    top:38px;
    left:2%;
  }
  .mat-caption {
    left:20px;
    top:22px;
  }
  .mat-caption strong {
    font-size:23px;
  }
  .mat-caption small {
    font-size:4px;
  }
  .mini-emblem {
    width:25px;
    height:25px;
    margin-bottom:6px;
  }
  .mat-caption p {
    font-size:7px;
    margin-bottom:12px;
  }
  .mat-caption>span:last-child {
    font-size:4px;
  }
  .collector-pad {
    width:154px;
    height:244px;
    left:2%;
    bottom:13px;
    padding:14px;
  }
  .pad-heading small {
    font-size:5px;
  }
  .pad-heading>span {
    width:30px;
    height:30px;
  }
  .collector-pad h3 {
    font-size:12px;
  }
  .pad-date {
    font-size:5px;
    margin-bottom:9px;
  }
  .pad-rules p {
    font-size:6px;
    margin-top:9px;
  }
  .pad-rules i {
    height:16px;
  }
  .pad-footer {
    font-size:5px;
    margin-top:14px;
  }
  .pad-footer span {
    font-size:5px;
  }
  .collector-photo {
    width:130px;
    height:206px;
    right:0;
    bottom:10px;
  }
  .photo-caption strong {
    font-size:21px;
  }
  .photo-caption span {
    font-size:6px;
  }
  .collector-seal {
    left:49%;
    bottom:31px;
    width:49px;
    height:49px;
    border-width:3px;
  }
  .collector-seal span {
    width:35px;
    height:35px;
  }
  .stage-caption {
    font-size:6px;
    bottom:-10px;
  }
  .collection-specs {
    padding:38px 7%;
    grid-template-columns:1fr;
    gap:25px;
  }
  .collection-specs article {
    padding-top:20px;
  }
  .collection-specs h3 {
    font-size:18px;
  }
  .collection-specs p {
    font-size:12px;
    margin-bottom:5px;
  }
  .collection-close {
    padding:32px 7%;
  }
  .collection-close p {
    font-size:19px;
  }
  .collection-close small {
    font-size:9px;
  }
}
.goods-teaser>.teaser-visual {
  position:relative;
  padding:0;
  min-height:400px;
  background:#d7d5c6;
  overflow:hidden;
}
.teaser-mat {
  position:absolute;
  left:8%;
  top:16%;
  width:85%;
  height:63%;
  transform:rotate(-7deg);
  border:5px solid #244032;
  border-radius:12px;
  overflow:hidden;
  box-shadow:7px 14px 25px #10221a55;
}
.teaser-mat img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.teaser-mat>span {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  min-width:55%;
  padding:80px 25px 20px;
  background:linear-gradient(90deg,#173026eb,transparent);
  color:#d9bd79;
  font:35px Georgia,serif;
}
.teaser-mat small {
  display:block;
  font:7px Georgia,serif;
  letter-spacing:.12em;
  margin-top:12px;
}
.teaser-photo {
  position:absolute;
  right:10%;
  bottom:5%;
  width:126px;
  height:182px;
  transform:rotate(9deg);
  border:5px solid #244032;
  border-radius:5px;
  overflow:hidden;
  box-shadow:7px 12px 18px #10221a55;
}
.teaser-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:73% center;
}
.teaser-photo>span {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  text-align:center;
  padding:35px 10px 12px;
  color:#d9bd79;
  background:linear-gradient(transparent,#173026);
  font:22px Georgia,serif;
}
@media(max-width:700px) {
  .goods-teaser>.teaser-visual {
    min-height:320px;
  }
  .teaser-photo {
    width:108px;
    height:154px;
  }
  .teaser-mat>span {
    font-size:25px;
    padding-top:65px;
  }
}
@media(max-width:700px) {
  .hero-image {
    object-position:80% center;
  }
  .room-bg {
    object-position:78% center;
  }
}
/* The midnight archive collection. */
.companion-card[data-card-genre="dark"] {
  background:#292534;
  border-color:#8d798e;
}
body[data-genre="dark"] .session-panel {
  background:#231f2def;
  border-color:#ac8c6d77;
}
body[data-genre="dark"] .duration-select {
  background:#18131f;
}
body[data-genre="dark"] .duration-select button.selected,body[data-genre="dark"] .sound-panel>div button {
  background:#514052;
}
.character-goods[data-collection="nox"] .photo-frame {
  border-radius:80px 80px 2px 2px;
  border-style:double;
  border-width:3px;
}
.character-goods[data-collection="nox"] .collector-pad {
  border:1px solid #9f8393;
  background-image:linear-gradient(90deg,#9f839321 1px,transparent 1px);
  background-size:17px 17px;
}
.character-goods[data-collection="nox"] .collector-seal {
  border-radius:25% 25% 48% 48%;
  transform:rotate(-10deg);
}
@media(min-width:1101px) and (max-width:1350px) {
  .goods-mates button {
    gap:6px;
    padding:7px;
  }
  .goods-mates img {
    width:34px;
    height:43px;
  }
  .goods-mates span {
    font-size:11px;
  }
  .goods-mates small {
    font-size:6px;
  }
}

/* ---- lecture-v1 overrides: 한글 라벨에 맞춘 간격, 헤더 보조문구, 히어로 액션 ---- */
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:none}
.brand small{font:11px/1.3 Pretendard,'Apple SD Gothic Neo',sans-serif;letter-spacing:.02em;margin-top:5px;color:#c9c2a6}
.brand span b{font-weight:400}
.prototype-tag{font-size:11px;letter-spacing:.04em}
.hero h1{font-weight:600;letter-spacing:-.04em}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:6px 0 18px}
.hero-more{color:#e6dfc8;font-size:14px;padding:0}
.hero-more span{margin-left:6px}
.mode-index,.companion-info small,.collection-specs small,.stage-caption{letter-spacing:.04em}
.companion-info h3{font-weight:600}
footer small{display:block;margin-top:10px;line-height:1.7}
@media(max-width:700px){.hero-actions{gap:14px}.brand small{display:none}}

/* 도윤 v2: 가까운 인물 구도에서 모바일 얼굴 중심을 유지한다. */
@media(max-width:700px) {
  body[data-mate="doyun"] .hero-image,
  body[data-mate="doyun"] .room-bg {
    object-position:73% center;
  }
}

/* Language controls share the site's quiet gold and green palette. */
.language-switch {
  display:inline-grid;
  grid-template-columns:repeat(4, auto);
  align-items:center;
  flex:0 0 auto;
  gap:2px;
  padding:3px;
  border:1px solid #d6bf8c40;
  border-radius:5px;
  background:#101b18b3;
}
.language-switch button {
  min-width:33px;
  min-height:32px;
  padding:6px 7px;
  background:transparent;
  color:#c1c4b9;
  border-radius:3px;
  font:500 11px/1.2 Pretendard, sans-serif;
  letter-spacing:.04em;
}
.language-switch button.selected {
  color:#18251e;
  background:var(--gold);
}
.language-switch button:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px;
}
.site-header nav {align-items:center;}
.room-top>.language-switch {
  position:static;
  transform:none;
  margin-left:0;
  text-align:initial;
  order:0;
}
html[lang="en"] .hero h1 {letter-spacing:-.035em;line-height:1.18;}
html[lang="en"] .hero-description {line-height:1.65;}
html[lang="en"] .companion-info h3 {font-size:clamp(18px,1.6vw,24px);}
html[lang="en"] .companion-info p {line-height:1.65;}
html[lang="en"] .companion-info span {gap:10px;}
html[lang="en"] .companion-info span b {flex-shrink:0;}
html[lang="en"] .room-intro h2 {line-height:1.3;letter-spacing:-.025em;}
html[lang="en"] .chat-bubble {word-break:normal;}
html[lang="en"] .chat-location {align-items:flex-start;line-height:1.4;}
html[lang="en"] .chat-location>:last-child {flex-shrink:0;}
html[lang="en"] .pad-footer {font-size:9px;}
html[lang="en"] .collection-story>blockquote {line-height:1.6;}
html[lang="zh-CN"] body,
html[lang="zh-CN"] .mate-chat {
  font-family:Pretendard, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
html[lang="ja"] body,
html[lang="ja"] .mate-chat {
  font-family:Pretendard, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
html[lang="zh-CN"] .hero h1,
html[lang="ja"] .hero h1 {line-height:1.45;letter-spacing:-.025em;}
html[lang="zh-CN"] .chat-bubble,
html[lang="ja"] .chat-bubble {word-break:normal;line-break:strict;}
html[lang="zh-CN"] .companion-info h3,
html[lang="ja"] .companion-info h3 {line-height:1.5;}
html[lang="ja"] .chat-location {line-height:1.5;align-items:flex-start;}
html[lang="ja"] .chat-location>:last-child {flex-shrink:0;}
html[lang="ja"] .collection-story>blockquote {line-height:1.8;}
html[lang="ja"] .room-intro h2 {text-wrap:balance;line-break:strict;}
@media(max-width:700px) {
  .site-header {gap:12px;}
  .site-header .brand {order:1;}
  .site-header .brand-wordmark {width:clamp(168px,52vw,210px);}
  .site-header nav {gap:15px;order:3;}
  .site-header .language-switch {margin-left:auto;order:2;}
  .language-switch {grid-template-columns:repeat(2,auto);}
  .language-switch button {min-height:30px;min-width:30px;padding:6px;}
  .room-top {flex-wrap:wrap;gap:10px;}
  .room-top>.language-switch {order:4;margin-left:auto;}
  html[lang="en"] .hero h1 {font-size:clamp(30px,8.2vw,47px);}
  html[lang="en"] .hero-copy>.eyebrow {font-size:10px;}
  html[lang="en"] .hero-actions {gap:15px;}
  html[lang="en"] .hero-more {font-size:12px;}
  html[lang="en"] .room-intro h2 {font-size:clamp(25px,7vw,38px);}
  html[lang="en"] .genre-tabs button {white-space:nowrap;}
  html[lang="zh-CN"] .hero h1,
  html[lang="ja"] .hero h1 {font-size:clamp(29px,7.4vw,40px);}
  html[lang="ja"] .hero-more {font-size:12px;}
  html[lang="ja"] .room-intro h2 {font-size:clamp(25px,7vw,36px);}
}