:root { --tiomo-paper: #f3f0e7; --tiomo-ink: #141414; --tiomo-accent: #b8ff37; }
html:not(.tiomo-ready) body { opacity: 0; }
body { transition: opacity .35s ease; font-family: Inter, "PingFang SC", "Noto Sans CJK SC", sans-serif; }
.preloader { transition: opacity .4s ease; }
.tiomo-partner-label { font-size: clamp(.82rem, 1.25vw, 1.15rem); letter-spacing: -.03em; text-align: center; padding: 1rem; max-width: 10rem; }
.partner-logo { object-fit: contain; }
.animation-section .absolute-photo { background-image: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.28)), url('../assets/images/lancang-hybrid.png') !important; background-size: cover !important; background-position: center !important; }
.hero-photo-wrapper img, .paralax-image, .testimonials-photo, .image-wrap img { object-fit: cover; width: 100%; height: 100%; }
.video-grid video { width: 100%; height: 100%; object-fit: cover; }
.tiomo-kicker { text-transform: uppercase; letter-spacing: .12em; }
.tiomo-placeholder { background: var(--tiomo-paper); color: var(--tiomo-ink); display: grid; place-items: center; }
.tiomo-media-atlas { position: relative; z-index: 2; background: var(--tiomo-paper); color: var(--tiomo-ink); padding: clamp(5rem, 10vw, 10rem) 0; overflow: hidden; }
.tiomo-atlas-inner { width: min(100% - clamp(1.25rem, 4vw, 5rem), 1600px); margin: 0 auto; }
.tiomo-atlas-header { display: grid; grid-template-columns: minmax(10rem, .55fr) minmax(0, 1.45fr); align-items: start; gap: 2rem; margin-bottom: clamp(2rem, 5vw, 5rem); }
.tiomo-atlas-header p { margin: .5rem 0 0; font-size: .78rem; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; }
.tiomo-atlas-header h2 { max-width: 19ch; margin: 0; font-size: clamp(2.35rem, 5.8vw, 7rem); line-height: .94; letter-spacing: -.065em; font-weight: 500; }
.tiomo-atlas-feature { margin: 0 0 clamp(3rem, 8vw, 8rem); border-radius: clamp(1.2rem, 3vw, 3.2rem); overflow: hidden; background: #e9e3d4; box-shadow: 0 1px 0 rgba(20,20,20,.14); }
.tiomo-atlas-feature img { display: block; width: 100%; aspect-ratio: auto; max-height: 84vh; object-fit: contain; background: #e9e3d4; }
.tiomo-atlas-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.5rem); margin-top: clamp(2rem, 5vw, 5rem); align-items: start; }
.tiomo-atlas-card { grid-column: span 4; margin: 0; min-width: 0; }
.tiomo-atlas-card:nth-child(6n + 1) { grid-column: span 7; }
.tiomo-atlas-card:nth-child(6n + 2) { grid-column: 9 / span 4; margin-top: clamp(2rem, 9vw, 9rem); }
.tiomo-atlas-card:nth-child(6n + 3) { grid-column: 2 / span 4; margin-top: clamp(1rem, 5vw, 5rem); }
.tiomo-atlas-card:nth-child(6n + 4) { grid-column: 7 / span 6; }
.tiomo-atlas-card:nth-child(6n + 5) { grid-column: span 5; }
.tiomo-atlas-card:nth-child(6n + 6) { grid-column: 7 / span 5; margin-top: clamp(1rem, 4vw, 4rem); }
.tiomo-atlas-card img, .tiomo-atlas-card video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: clamp(.8rem, 1.7vw, 1.6rem); background: #dfd8c9; }
.tiomo-atlas-card.is-video video { aspect-ratio: 16 / 10; background: #111; }
.tiomo-atlas-card.is-art img { aspect-ratio: auto; max-height: 76rem; object-fit: contain; background: transparent; }
.tiomo-atlas-card figcaption { margin-top: .65rem; font-size: clamp(.72rem, .85vw, .9rem); line-height: 1.25; letter-spacing: .02em; opacity: .72; }
.tiomo-atlas-grid.is-art { margin-top: clamp(5rem, 12vw, 12rem); padding-top: clamp(1rem, 3vw, 3rem); border-top: 1px solid rgba(20,20,20,.18); }
.tiomo-atlas-grid.is-art .tiomo-atlas-card { grid-column: span 4; margin: 0; }
.tiomo-atlas-grid.is-art .tiomo-atlas-card:first-child { grid-column: span 5; transform: rotate(-.6deg); }
.tiomo-atlas-grid.is-art .tiomo-atlas-card:nth-child(2) { grid-column: 7 / span 6; transform: rotate(.7deg); }
.tiomo-atlas-grid.is-art .tiomo-atlas-card:nth-child(3) { grid-column: 2 / span 5; margin-top: clamp(1rem, 4vw, 4rem); transform: rotate(-.5deg); }
.tiomo-atlas-grid.is-videos { background: #171717; margin-left: calc(clamp(1.25rem, 4vw, 5rem) * -.5); margin-right: calc(clamp(1.25rem, 4vw, 5rem) * -.5); padding: clamp(1rem, 3vw, 3rem); border-radius: clamp(1.2rem, 3vw, 3rem); color: #f4f0e7; }
.tiomo-atlas-grid.is-videos .tiomo-atlas-card { grid-column: span 6; margin-top: 0; }
.tiomo-atlas-grid.is-videos .tiomo-atlas-card:nth-child(3n) { grid-column: 3 / span 8; }
.tiomo-atlas-grid.is-videos figcaption { opacity: .75; }
@media (max-width: 767px) {
  .tiomo-partner-label { font-size: .8rem; }
  .tiomo-atlas-header { grid-template-columns: 1fr; gap: 1rem; }
  .tiomo-atlas-header h2 { font-size: clamp(2.3rem, 12vw, 4.4rem); }
  .tiomo-atlas-feature { border-radius: 1rem; }
  .tiomo-atlas-grid { grid-template-columns: 1fr; }
  .tiomo-atlas-card, .tiomo-atlas-card:nth-child(n), .tiomo-atlas-grid.is-videos .tiomo-atlas-card, .tiomo-atlas-grid.is-videos .tiomo-atlas-card:nth-child(n) { grid-column: 1; margin-top: 0; }
  .tiomo-atlas-card:nth-child(even) { margin-left: 12%; }
  .tiomo-atlas-card:nth-child(odd) { margin-right: 8%; }
  .tiomo-atlas-grid.is-videos .tiomo-atlas-card { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Live with Music adaptation: preserve the purchased bento grammar and let
   typography, crop, and motion carry the art direction. */
.tiomo-live-panel { overflow: hidden; }
.tiomo-live-visual,
.tiomo-live-info,
.tiomo-live-chat { position: relative; isolation: isolate; }
.tiomo-live-visual { background: #e9e3d4; }
.tiomo-live-visual::after,
.tiomo-live-info::after,
.tiomo-live-chat::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.tiomo-live-visual::after { background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 46%, rgba(20,20,20,.12)); }
.tiomo-live-visual .h2 { position: relative; z-index: 1; max-width: 6ch; }
.tiomo-live-visual .map { display: block; width: 100%; max-height: 31rem; object-fit: cover; object-position: 52% center; mix-blend-mode: normal; opacity: .9; filter: saturate(.72) contrast(.96) brightness(1.06); }
.tiomo-live-visual .team-circle,
.tiomo-live-visual .team-small-card { display: none !important; }

.tiomo-live-info { background: #e7e3dc; }
.tiomo-live-info .div-block-2 { position: relative; z-index: 2; }
.tiomo-live-info .logo-first.normal { mix-blend-mode: multiply; }
.tiomo-live-info .h2._01.sm._600 { max-width: 12ch; }
.tiomo-live-info .team-circle.btm { margin-top: clamp(3rem, 8vw, 7rem); }
.tiomo-live-info .team-circle.btm .top-text { opacity: .64; }
.tiomo-live-info .flex-txt { display: grid; gap: .2rem; }
.tiomo-live-info .flex-txt .h2 { max-width: 15ch; }
.tiomo-live-info .contact-info.for-button { position: relative; z-index: 2; }

.tiomo-live-chat { background: #1e1e20; color: #f3f0e7; }
.tiomo-live-chat > .top-text.w { position: relative; z-index: 4; color: rgba(243,240,231,.72); }
.tiomo-live-chat .goal-card { position: relative; min-height: clamp(28rem, 42vw, 43rem); border: 0; border-radius: clamp(1rem, 2vw, 2rem); overflow: hidden; background: #1d1d1d; }
.tiomo-live-chat .goal-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.48)); z-index: 1; }
.tiomo-live-chat .bg-collab { position: absolute; inset: 0; opacity: .88; transition: background-image .55s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.tiomo-live-chat .goal-card:hover .bg-collab { transform: scale(1.02); }
.tiomo-live-chat .glass,
.tiomo-live-chat .bg-glass,
.tiomo-live-chat .time-top,
.tiomo-live-chat .flex-chat { z-index: 3; }
.tiomo-live-chat .video-logo.for-cht._01 img { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; border: 1px solid rgba(243,240,231,.72); }
.tiomo-live-chat .video-logo.for-cht._02 { width: clamp(4rem, 7vw, 7rem); height: clamp(4rem, 7vw, 7rem); border-radius: 1rem; overflow: hidden; opacity: .88; }
.tiomo-live-chat .video-logo.for-cht._02 video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tiomo-live-chat .bubble-first .p-chat { max-width: 22ch; }
.tiomo-live-chat .bubble-first._02,
.tiomo-live-chat .bubble-first._03,
.tiomo-live-chat .bubble-first._04,
.tiomo-live-chat .bubble-first._06 { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tiomo-live-chat .bubble-first._02,
.tiomo-live-chat .bubble-first._03,
.tiomo-live-chat .bubble-first._04 { background: rgba(20,20,20,.4); border: 1px solid rgba(243,240,231,.14); }
.tiomo-live-chat .bubble-first._06 { background: rgba(184,255,55,.84); color: #141414; }
.tiomo-live-chat .goal-card:focus-visible { outline: 2px solid var(--tiomo-accent); outline-offset: 4px; }

.testimonials-section .photo-half { background-color: #ded8cc; background-blend-mode: multiply; }
.testimonials-section .logo-testi-1,
.section.drk .logo-testi-1 { display: none !important; }
.testi-grid .image-wrap.rnd .logo-absolute { display: none !important; }

@media (max-width: 767px) {
  .tiomo-live-visual .map { max-height: 20rem; }
  .tiomo-live-chat .goal-card { min-height: 30rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tiomo-live-chat .bg-collab { transition: none; }
}


/* Stats / success section: no fake numbers, no orb, no dark-block image. */
.section.drk .video-logo.for-sct,
.section.drk .rl-div .video-logo { display: none !important; }
.card-stats-side.back { display: none !important; }
.card-stats-side.front { position: relative; transform: none !important; }
.stats-card { height: auto; min-height: 260px; }
.stats-sticky-grid .sticky-first { position: static; margin-top: 0 !important; }
.stats-name { font-size: clamp(1.6rem, 2.6vw, 2.5rem); }
.stats-container, .cart-wrapper { perspective: none !important; }
.section.drk .testi-grid { background: var(--tiomo-paper); color: var(--tiomo-ink); border-radius: clamp(1rem, 2vw, 1.5rem); padding: clamp(1rem, 2.4vw, 2rem); }
.section.drk .testi-grid .card-color { background: transparent; color: var(--tiomo-ink); padding: clamp(1.2rem, 2vw, 2rem); }
.section.drk .testi-grid .card-color .top-text { color: var(--tiomo-ink); }
.section.drk .testi-grid .logo-absolute { display: none !important; }



  .tiomo-schedule-row { grid-template-columns: 1fr; gap: 1rem; }
  .tiomo-schedule-cell.is-cta { text-align: left; }
}


/* Real calendar (课程与活动) */
.tiomo-calendar { border-top: 1px solid rgba(20,20,20,.18); }
.tiomo-cal-head { display: grid; grid-template-columns: minmax(12rem, .55fr) minmax(0, 1.45fr); gap: 2rem; align-items: end; padding: clamp(2rem, 4vw, 4rem) 0 clamp(1.4rem, 3vw, 2.2rem); }
.tiomo-cal-head .top-text { margin: 0 0 .6rem; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; opacity: .62; }
.tiomo-cal-head .h2 { margin: 0; font-size: clamp(1.7rem, 3.4vw, 3.4rem); line-height: 1.03; letter-spacing: -.045em; font-weight: 500; max-width: 24ch; }
.tiomo-cal-note { grid-column: 2; margin: -1.2rem 0 0; font-size: .92rem; line-height: 1.6; opacity: .72; max-width: 52ch; }
.tiomo-cal-scroll { overflow-x: auto; }
.tiomo-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(6.4rem, 1fr)); gap: clamp(.45rem, .9vw, .8rem); min-width: 46rem; }
.tiomo-cal-week { padding: .5rem .3rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .5; }
.tiomo-cal-day { position: relative; min-height: 6.2rem; border: 1px solid rgba(20,20,20,.12); border-radius: clamp(.65rem, 1.2vw, 1rem); padding: .55rem .6rem; display: flex; flex-direction: column; gap: .35rem; background: rgba(255,255,255,.22); }
.tiomo-cal-day.is-event { background: rgba(184,255,55,.12); border-color: rgba(20,20,20,.2); }
.tiomo-cal-day.is-empty { border-style: dashed; opacity: .35; }
.tiomo-day-num { font-size: .82rem; font-weight: 600; opacity: .55; }
.tiomo-day-tag { font-size: .72rem; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.tiomo-day-cta { margin-top: auto; align-self: flex-start; font-size: .68rem; letter-spacing: .06em; padding: .3rem .55rem; border-radius: 999px; background: #141414; color: #f4f0e7; text-decoration: none; }
.tiomo-day-cta:hover { background: var(--tiomo-accent); color: #141414; }
.tiomo-cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: clamp(1.2rem, 2.5vw, 2rem); font-size: .76rem; }
.tiomo-legend-item { display: inline-flex; align-items: center; gap: .4rem; opacity: .8; }
.tiomo-legend-item .dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.dot-guitar { background: #e05b3a; }
.dot-piano { background: #3a6fe0; }
.dot-ensemble { background: #9a5be0; }
.dot-open { background: #e0a43a; }
.dot-share { background: #3aa97c; }
.tiomo-legend-note { margin-left: auto; opacity: .55; font-size: .76rem; }
@media (max-width: 767px) {
  .tiomo-cal-head { grid-template-columns: 1fr; gap: 1rem; }
  .tiomo-cal-note { grid-column: 1; margin-top: 0; }
  .tiomo-cal-scroll { -webkit-overflow-scrolling: touch; }
  .tiomo-legend-note { margin-left: 0; width: 100%; }
}


/* Blue 集社 logo */
.tiomo-logo-img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 8px; aspect-ratio: 1 / 1; }
.video-logo .tiomo-logo-img { width: 100%; height: 100%; }


/* Work cards: text-only template */
.tiomo-work-copy { max-width: 34ch; font-size: clamp(.92rem, 1.1vw, 1.02rem); line-height: 1.65; opacity: .8; margin: 0 0 1rem; }
.work-main-wrapper { display: flex; flex-direction: column; gap: .8rem; }

/* Scenery + activity groups */
.tiomo-atlas-group-label { margin: clamp(3rem, 7vw, 6rem) 0 0; padding-top: clamp(1rem, 2vw, 1.6rem); border-top: 1px solid rgba(20,20,20,.16); display: flex; align-items: baseline; gap: 1.2rem; }
.tiomo-atlas-group-label .top-text { margin: 0; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; opacity: .62; }
.tiomo-atlas-group-label h3 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 500; }
.tiomo-atlas-grid.is-scenery .tiomo-atlas-card { grid-column: span 4; }
.tiomo-atlas-grid.is-scenery .tiomo-atlas-card:first-child { grid-column: span 7; }
.tiomo-atlas-grid.is-scenery .tiomo-atlas-card:nth-child(2) { grid-column: 9 / span 4; margin-top: clamp(2rem, 8vw, 7rem); }
.tiomo-atlas-grid.is-activity .tiomo-atlas-card { grid-column: span 4; }
.tiomo-atlas-grid.is-activity .tiomo-atlas-card:first-child { grid-column: span 5; }
.tiomo-atlas-grid.is-activity .tiomo-atlas-card:nth-child(2) { grid-column: 7 / span 6; }
.tiomo-atlas-grid.is-activity .tiomo-atlas-card:nth-child(3) { grid-column: 2 / span 5; margin-top: clamp(1rem, 4vw, 3rem); }
.tiomo-atlas-grid.is-activity .tiomo-atlas-card:nth-child(4) { grid-column: 8 / span 5; margin-top: clamp(1rem, 4vw, 3rem); }
.tiomo-atlas-grid.is-activity .tiomo-atlas-card:nth-child(5) { grid-column: span 5; }
.tiomo-atlas-grid.is-activity .tiomo-atlas-card:nth-child(6) { grid-column: 7 / span 5; }
@media (max-width: 767px) {
  .tiomo-atlas-grid.is-scenery .tiomo-atlas-card,
  .tiomo-atlas-grid.is-activity .tiomo-atlas-card,
  .tiomo-atlas-grid.is-scenery .tiomo-atlas-card:nth-child(n),
  .tiomo-atlas-grid.is-activity .tiomo-atlas-card:nth-child(n) { grid-column: 1; margin-top: 0; }
}


/* Locked page (pages that are not allowed) */
.tiomo-locked-page { min-height: 78vh; display: grid; place-items: center; padding: clamp(4rem, 10vw, 8rem) clamp(1.25rem, 5vw, 4rem); background: var(--tiomo-paper); color: var(--tiomo-ink); }
.tiomo-locked-inner { max-width: 46rem; }
.tiomo-locked-inner .top-text { letter-spacing: .12em; text-transform: uppercase; opacity: .6; font-size: .8rem; margin: 0 0 .6rem; }
.tiomo-locked-inner h1 { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -.05em; font-weight: 500; margin: 0 0 1rem; }
.tiomo-locked-inner p { font-size: 1rem; line-height: 1.75; opacity: .82; }
.tiomo-locked-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }
.tiomo-locked-links a { padding: .6rem 1.1rem; border-radius: 999px; background: #141414; color: #f4f0e7; text-decoration: none; font-size: .85rem; }
.tiomo-locked-links a:hover { background: var(--tiomo-accent); color: #141414; }


/* WeChat QR + id on contact pages */
.work-content-wrapper._04 { position: relative; }
.work-content-wrapper._04 .tiomo-wechat-block { position: absolute; left: clamp(1.25rem, 4vw, 4rem); bottom: clamp(1.25rem, 4vw, 4rem); z-index: 5; background: rgba(20,20,20,.72); color: #fff; padding: .9rem 1.3rem; border-radius: 12px; }
.work-content-wrapper._04 .tiomo-wechat-block .tiomo-wechat-kicker { margin: 0 0 .25rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.work-content-wrapper._04 .tiomo-wechat-block .tiomo-wechat-id { margin: 0; font-size: clamp(1.1rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: .03em; }
.work-content-wrapper._04 .work-image-cover { object-fit: contain; width: 100%; }


/* Contact details card (template-style dark card: QR + wechat + email) */
.tiomo-contact-details { background: #0f0f0f; color: #fff; border-radius: 20px; padding: clamp(1.5rem, 3vw, 2.6rem); display: flex; flex-direction: column; gap: 1.1rem; }
.tiomo-contact-details .tiomo-cd-kicker { margin: 0; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.tiomo-contact-details .tiomo-cd-title { margin: 0; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 500; }
.tiomo-contact-details .tiomo-cd-qr { width: 100%; max-width: 15rem; border-radius: 14px; background: #fff; padding: .5rem; object-fit: contain; }
.tiomo-contact-details .tiomo-cd-row { display: flex; flex-direction: column; gap: .25rem; }
.tiomo-contact-details .tiomo-cd-label { font-size: .72rem; opacity: .6; letter-spacing: .1em; text-transform: uppercase; }
.tiomo-contact-details .tiomo-cd-value { font-size: 1.08rem; font-weight: 600; color: #fff; text-decoration: none; }
.tiomo-contact-details .tiomo-cd-value:hover { color: var(--tiomo-accent); }
@media (max-width: 767px) { .tiomo-contact-details .tiomo-cd-qr { max-width: 12rem; } }


/* Comment 1: calendar motion — smooth, premium */
.tiomo-calendar { overflow: hidden; }
.tiomo-cal-grid { animation: tiomoCalIn .7s cubic-bezier(.2,.7,.2,1) both; }
.tiomo-cal-day { transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s cubic-bezier(.2,.7,.2,1), background .32s, opacity .32s; }
.tiomo-cal-day.is-event:hover, .tiomo-cal-day.is-booked:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20,20,20,.12); }
.tiomo-cal-day.is-event { will-change: transform; }
.tiomo-day-cta { transition: background .28s, color .28s, transform .28s cubic-bezier(.2,.7,.2,1); }
.tiomo-day-cta:hover { transform: translateY(-1px); }
@keyframes tiomoCalIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Comment 6: booked (grey) states */
.tiomo-cal-day.is-booked { background: rgba(20,20,20,.08); border-color: rgba(20,20,20,.14); color: rgba(20,20,20,.55); }
.tiomo-cal-day.is-booked .tiomo-day-num,
.tiomo-cal-day.is-booked .tiomo-day-tag { opacity: .45; }
.tiomo-cal-day .tiomo-day-booked { align-self: flex-start; margin-top: auto; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; padding: .22rem .5rem; border-radius: 999px; background: rgba(20,20,20,.14); color: rgba(20,20,20,.55); }
.dot-booked { background: #9a9a9a; }