@font-face{font-family:ReferenceSerif;src:url('reference-serif.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--ink:#534741;--muted:#555;--reference-heading:#534741;--reference-body:#555}
body,button,input,select,textarea{font-family:ReferenceSerif,'Noto Serif TC',PMingLiU,serif;font-synthesis:none}
body{color:#555;font-weight:400}
h1,h2,h3,.calendar-heading h2,.section-title h2,.calendar-meta strong,.day-number,.slot-time{color:#534741;font-weight:700}
.intro-copy h1{font-weight:700!important;letter-spacing:.04em!important;background-image:linear-gradient(90deg,#534741,#555,#9b827b,#534741)}
.intro-copy p,.calendar-heading p,.calendar-meta>span,.page-footer,.calendar-footer,.dialog-description,.info-dialog p,.info-dialog ol{color:#555}
.calendar-meta strong,.day-context,.demo-summary-place strong,.dialog-eyebrow,.text-link,.info-link{color:#534741}
.month-event,.day-slot,.occupied-summary,.occupied-details,.occupied-notice{color:#555}
.event-title,.event-time,.day-availability,.day-free,.day-range,.day-status{color:#555}
.month-head>div{background:#615b65;color:#fff}
.view-switch button.is-active{background:#615b65;color:white}
.button,.icon-button,.intro-actions .button{color:#534741}
.button-primary,.button-primary:hover{background:#a14123;border-color:#a14123;color:#fff}
.location-tab,.location-tab:hover{color:#fff;border-color:transparent;border-radius:0;background:linear-gradient(135deg,#76707aee 0%,#625b69ee 40%,#5e5865ee 51%,#79707bee 100%),#514957;box-shadow:0 9px 24px -23px #53474166;isolation:isolate}
.location-tab.is-active,.location-tab.is-active:hover{background:linear-gradient(135deg,#766780,#625171 51%,#796c83);border-color:#615174;box-shadow:0 10px 24px -21px #53474177}
.location-tab>svg,.location-tab.is-active>svg,.location-caption,.location-tab.is-active .location-caption,.location-check{color:#fff}
.location-name{font-weight:700;font-size:21px}
.location-tab::before,.location-tab::after,.location-tab.is-active::before{content:'';display:block;position:absolute;inset:7px;padding:0;border:0;border-radius:0;background:none!important;mask:none;box-shadow:inset 0 0 0 1.2px #fff;opacity:1!important;pointer-events:none;z-index:2;animation:reference-frame-clip 8s linear infinite;transition:none}
.location-tab::before{animation-delay:-4s}
@keyframes reference-frame-clip{0%,100%{clip-path:inset(0 0 calc(100% - 1.2px) 0)}25%{clip-path:inset(0 calc(100% - 1.2px) 0 0)}50%{clip-path:inset(calc(100% - 1.2px) 0 0 0)}75%{clip-path:inset(0 0 0 calc(100% - 1.2px))}}
.reference-paused .location-tab::before,.reference-paused .location-tab::after{animation-play-state:paused}
@media(max-width:1200px){.location-name{font-size:18px}}
@media(max-width:960px){.location-name{font-size:21px}}
@media(max-width:680px){.location-name{font-size:18px}.location-tab::before,.location-tab::after{inset:6px}.calendar-heading h2{font-size:27px}.intro-copy h1{font-size:clamp(26px,8.4vw,34px)!important}}
@media(max-width:370px){.location-name{font-size:17px}.calendar-heading h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){.location-tab::before{animation:none;clip-path:none}.location-tab::after{display:none}}
/* Editorial Chinese/English lockup: one horizontal composition, clear reading order. */
.intro-copy h1{background:none!important;-webkit-text-fill-color:currentColor;color:#302d32;animation:none!important;font-size:44px;font-weight:700!important;letter-spacing:.025em!important}
.intro-copy h1 .title-lockup{position:relative;display:inline-flex;align-items:flex-start;gap:25px;color:inherit;margin:0}
.intro-copy h1 .title-lockup::before{content:'';position:absolute;left:calc(43% - 30px);top:0;width:65px;height:65px;border:1px solid #a59a9e;border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(25deg);z-index:-1}
.intro-copy h1 .title-group{display:inline-flex;flex-direction:column;gap:5px;margin:0;color:inherit;white-space:nowrap}
.intro-copy h1 .title-chinese{display:block;margin:0;color:inherit;font-size:inherit;line-height:1.35;letter-spacing:inherit}
.intro-copy h1 .title-english{display:block;margin:0;color:#534741;-webkit-text-fill-color:#534741;font-size:13px;font-weight:400;line-height:1.4;letter-spacing:.045em;text-align:center}
.intro-copy h1 .title-lower{display:inline-block;margin:0;color:inherit;transform:translateY(5px)}
.intro-copy h1 .title-upper{display:inline-block;margin:0;color:#615174;transform:translateY(-3px)}
@supports(background-clip:text){.intro-copy h1 .title-upper{background-image:linear-gradient(90deg,#615174,#95839e,#615174);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:title-gradient-flow 6s linear infinite;animation-play-state:paused}.intro-copy h1.gradient-running .title-upper{animation-play-state:running}}
.title-composition .header-butterfly{left:39%;right:auto;top:-60px;width:88px}
@media(max-width:960px){.intro-copy h1{font-size:41px}.title-composition .header-butterfly{width:80px;top:-54px}}
@media(max-width:680px){.intro-copy h1{font-size:clamp(25px,7.6vw,33px)!important}.intro-copy h1 .title-lockup{gap:18px}.intro-copy h1 .title-english{font-size:10px;letter-spacing:.02em}.intro-copy h1 .title-lockup::before{width:43px;height:43px;left:calc(43% - 20px)}.intro-copy h1 .title-group{gap:5px}.title-composition .header-butterfly{left:39%;width:58px;top:-42px}.intro-copy h1 .title-lower{transform:translateY(3px)}.intro-copy h1 .title-upper{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.intro-copy h1 .title-upper{animation:none!important}}
/* The selected check is persistent; the brand fill follows hover/focus/press only. */
#location-tabs .location-tab{background:linear-gradient(135deg,#ffffff0d,#00000019 51%,#ffffff06),#766780;border-color:transparent;transition:background-color .35s,box-shadow .35s,transform .25s}
#location-tabs .location-tab.is-active{border-color:#615174}
@media(hover:hover){#location-tabs .location-tab:hover{background:linear-gradient(135deg,#ffffff0d,#00000019 51%,#ffffff06),var(--wine);border-color:#a54575}}
#location-tabs .location-tab:focus-visible,#location-tabs .location-tab:active{background:linear-gradient(135deg,#ffffff0d,#00000019 51%,#ffffff06),var(--wine);border-color:#a54575;outline-color:var(--wine)}
/* Final user correction: level Chinese baseline, consistent spacing, safe logo clearance. */
.intro-panel{padding-top:60px}
.intro-copy h1 .title-lockup{gap:0}
.intro-copy h1 .title-lower,.intro-copy h1 .title-upper{transform:none}
@media(max-width:680px){.intro-panel{padding-top:52px}.intro-copy h1 .title-lockup{gap:0}.intro-copy h1 .title-lower,.intro-copy h1 .title-upper{transform:none}}
/* Latest requested swap: corporate pink-purple idle, gray-purple on interaction. */
#location-tabs .location-tab{background:linear-gradient(135deg,#ffffff0d,#00000019 51%,#ffffff06),var(--wine)}
@media(hover:hover){#location-tabs .location-tab:hover{background:linear-gradient(135deg,#ffffff0d,#00000019 51%,#ffffff06),#766780;border-color:#615174}}
#location-tabs .location-tab:focus-visible,#location-tabs .location-tab:active{background:linear-gradient(135deg,#ffffff0d,#00000019 51%,#ffffff06),#766780;border-color:#615174;outline-color:var(--wine)}
#location-tabs .location-tab.is-active{background:linear-gradient(135deg,#ffffff0d,#00000019 51%,#ffffff06),#766780;border-color:#615174}
/* Red-line placement reference: only an upper arch above the Chinese cap line. */
.intro-copy h1 .title-lockup::before{left:28%;top:-.78em;width:34%;height:.86em;box-sizing:border-box;border:1px solid #a59a9e;border-bottom:0;border-radius:100% 100% 0 0;transform:none;z-index:0;pointer-events:none}
.intro-copy h1 .title-group{position:relative;z-index:1}
/* One circular segment, radius 55 / chord 104; no box edges or straight legs. */
.intro-copy h1 .title-lockup::before{content:none;display:none}
.title-circle-arc{position:absolute;left:28%;top:-.78em;width:34%;height:auto;aspect-ratio:120/50;overflow:visible;pointer-events:none;z-index:0}
.title-circle-arc path{stroke:#a59a9e;stroke-width:1;stroke-linecap:round}
/* Proportionate hero enlargement: layout sizes, never a scaled hitbox. */
.title-composition{--title-size:64px;font-size:var(--title-size)}
.intro-copy h1{font-size:var(--title-size)!important}
.intro-copy h1 .title-english{font-size:.295em}
.title-composition .header-butterfly{width:2em;top:-1.36em}
.intro-panel{min-height:280px;padding-top:100px;padding-bottom:45px}
@media(max-width:1100px){.title-composition{--title-size:56px}}
@media(max-width:680px){.title-composition{--title-size:clamp(36px,11vw,48px)}.intro-copy h1 .title-english{font-size:.295em}.title-composition .header-butterfly{width:1.76em;top:-1.27em}.intro-panel{min-height:300px;padding-top:88px;padding-bottom:28px}.particle-network{opacity:.25}}
@media(min-width:480px) and (max-width:680px){.intro-panel{min-height:270px;padding-top:90px;padding-bottom:35px}.intro-actions{position:absolute!important;inset:50% 1px auto auto!important;margin:0!important;transform:translateY(-50%)}.intro-copy p{max-width:350px}}
/* Latest states: gray idle; corporate hover/focus and persistent selected. */
#location-tabs .location-tab{background:linear-gradient(135deg,#ffffff0d,#00000019 51%,#ffffff06),#766780}
@media(hover:hover){#location-tabs .location-tab:hover{background:linear-gradient(135deg,#ffffff0d,#00000019 51%,#ffffff06),var(--wine);border-color:var(--wine)}}
#location-tabs .location-tab:focus-visible,#location-tabs .location-tab:active,#location-tabs .location-tab.is-active{background:linear-gradient(135deg,#ffffff0d,#00000019 51%,#ffffff06),var(--wine);border-color:var(--wine)}
/* Clear, repeating wing closure; thorax remains a separate stationary layer. */
.butterfly-left,.butterfly-right{animation-duration:2.6s;animation-timing-function:ease-in-out}
@keyframes butterfly-left-flap{0%,100%{transform:rotate3d(.57,-.82,0,-4deg)}50%{transform:rotate3d(.57,-.82,0,78deg)}}
@keyframes butterfly-right-flap{0%,100%{transform:rotate3d(.57,-.82,0,4deg)}50%{transform:rotate3d(.57,-.82,0,-74deg)}}
/* Reservation/System share one continuous text fill, without changing layout. */
.intro-copy h1 .title-group-right .title-chinese{color:#615174}
.intro-copy h1 .title-lower,.intro-copy h1 .title-upper{color:inherit;background:none;-webkit-text-fill-color:inherit;animation:none!important}
@supports(background-clip:text){.intro-copy h1 .title-group-right .title-chinese{background-image:linear-gradient(90deg,#615174,#95839e,#615174);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:title-gradient-flow 6s linear infinite;animation-play-state:paused}.intro-copy h1.gradient-running .title-group-right .title-chinese{animation-play-state:running}}
@media(prefers-reduced-motion:reduce){.intro-copy h1 .title-group-right .title-chinese{animation:none!important}}
/* Fold about the painted thorax, not the center of the rectangular PNG. */
.title-composition .header-butterfly,.title-composition .header-butterfly .butterfly-art{animation:none!important;transform:none!important;translate:none;rotate:none;scale:none}
.title-composition .header-butterfly .butterfly-art{perspective:none}
.butterfly-art img{transform-origin:47.8% 60.2%;translate:none;rotate:none;scale:none}
.butterfly-body{animation:none!important;transform:none!important}
@keyframes butterfly-left-flap{0%,100%{transform:rotate3d(.575,-.818,0,0deg)}50%{transform:rotate3d(.575,-.818,0,82deg)}}
@keyframes butterfly-right-flap{0%,100%{transform:rotate3d(.575,-.818,0,0deg)}50%{transform:rotate3d(.575,-.818,0,-82deg)}}
/* Refined spacing: one visual word gap, modest tracking within each group. */
.intro-copy h1{letter-spacing:.035em!important}
.intro-copy h1 .title-lockup{gap:.24em}
/* Full-width brand footer in normal document flow. */
.page-footer{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;margin:46px 0 0;padding:32px 24px;background:var(--wine);color:#fff;border:0;text-align:center;font-size:23px;font-weight:500;line-height:1.7;letter-spacing:.04em;box-sizing:border-box}
.page-footer .footer-preview{font-size:15px;color:#fff;letter-spacing:.035em}
@media(max-width:680px){.page-footer{margin-top:32px;padding:28px 20px;font-size:20px}.page-footer .footer-preview{font-size:14px}}
.page-footer .footer-english{font-size:18px;line-height:1.65;color:#fff;letter-spacing:.04em;max-width:100%;overflow-wrap:normal}
@media(max-width:680px){.page-footer .footer-english{font-size:16px;letter-spacing:.025em}}