:root{--color-light-muted:#ffe3eb;--color-main:#e90044;--color-secondary:#2060b8;--color-tier:#003866;--bg:#f8fafc;--border:#cbd5f5;--text:#0f172a;}

body{background-position:center top;background-repeat:no-repeat;background-size:100% auto;line-height:1.4;background-image:url(../imgs/bg-default-d.webp);overflow-x:hidden;background-attachment:fixed;}
h2{margin-top:1em;}
#cnyLogo{width:300px;height:130px;margin:1em auto;background-image:url(../../../assets/imgs/lianhe-zaobao-cny-logo-shadow.svg);display:block;background-position:center;background-repeat:no-repeat;background-size:100% auto;}
.em{color:var(--theme-ui-colors-main);}
small{font-size:12px;}
textarea,input{font-size:0.9em;border-radius:0.4em;resize:none;font-family:Roboto, Noto Sans SC, Hiragino Sans GB, WenQuanYi Micro Hei, Heiti SC, Microsoft YaHei, sans-serif!important;}
textarea::-webkit-scrollbar{width:6px;background-color:none;}
textarea::-webkit-scrollbar-track{-webkit-background-color:none;border-radius:10px;}
textarea::-webkit-scrollbar-thumb{border-radius:10px;background:var(--theme-ui-colors-light-grey);}
::placeholder{color:var(--color-secondary);line-height:1.3;}
textarea::placeholder{font-size:0.7em;text-align:left!important;}
input::placeholder{font-size:0.7em;font-weight:700;text-align:left!important;}
input:focus::placeholder,textarea:focus::placeholder{color:transparent!important;text-shadow:none!important;}

#FixItems{height:100vh;position:fixed;}
.fix-item,.icon-item{display:block;background-position:0 0;background-repeat:no-repeat;background-size:100% auto;}
.fix-item{position:fixed;}
#FireCrackers{top:0;right:1em;width:160px;height:600px;background-image:url(../imgs/firecrackers.webp);animation:sway 4.6s infinite;animation-timing-function:ease-in-out;-webkit-transform-origin:top;-moz-transform-origin:top;transform-origin:top;}
#Angbaos,#Tangerines{aspect-ratio:1/1;}
#Angbaos{width:160px;height:160px;bottom:-2em;left:12%;background-image:url(../imgs/angbaos.webp);}
#Tangerines{width:80px;height:80px;bottom:-1em;left:20%;background-image:url(../imgs/tangerines.webp);z-index:10;}
#Tangerine{width:80px;height:80px;background-image:url(../imgs/tangerine.webp);}
#GreetingsWishes{width:140px;height:440px;top:-2em;right:10%;background-image:url(../imgs/chinese-greetings-wishes.webp);opacity:0.14;}

#Wrapper{margin:4em auto 10em auto;position:relative;z-index:10;}
#Header{margin:1em auto;display:block;text-align:center;}
.headline{font-size:4em;margin:0 auto;font-weight:900;}
#Intro{margin:auto;}
#Intro p{font-size:1.1em;margin:0 auto;}

@media (min-width:1101px){
#Wrapper,#Intro{width:70%;}
}

@media (min-width:320px) and (max-width:1100px){
#Wrapper{width:80%;margin-top:2em;}
}

@media (min-width:320px) and (max-width:900px){
body{background-size:110% auto;background-image:url(../imgs/bg-default-m.webp?1);}
#Tangerines{width:100px;height:100px;}

@supports (-webkit-touch-callout:none) {
body{background-attachment:initial;background-color:#fecbd1;height:100vh;}
#Angbaos,#Tangerines{bottom:0;}
}

#FireCrackers{right:0;width:60px;height:200px;}
#GreetingsWishes{width:60px;height:180px;top:-0.6em;right:14%;}
#Angbaos{left:auto;right:-2em;}
#Tangerines{left:-1em;}

#Wrapper{margin:-1em auto 10em auto!important;}
#cnyLogo{width:230px;height:100px;margin-bottom:0;margin-top:5em;}
.headline{font-size:2.8em;}
#Intro p{font-size:1.06em;}
}

@keyframes sway{
0%{transform:rotate(8deg);}
50%{transform:rotate(-8deg);}
100%{transform:rotate(8deg);}
}

ul{list-style:none;}
.hidden{display:none;}
.container{width:100%;display:table;margin:2em auto;}
.tab-container{display:flex;}
.tab-container ul{font-size:1.1em;margin:0.4em auto 0 auto;display:flex;padding:0;white-space:nowrap;}
.tab-container li{padding:0.8em 2.4em;position:relative;display:flex;text-align:center;cursor:pointer;transition:all 0.25s ease-in;border-top-left-radius:0.5em;border-top-right-radius:0.5em;background:rgba(255,255,255,0.6);font-weight:500;}
.tab-container li:hover{background:var(--color-secondary);color:#fff;}
.tab-container li.active{background:var(--theme-ui-colors-main);color:#fff;font-weight:700;}
.tab-container li::before,.tab-container li::after{width:26px;height:26px;bottom:0.8em;content:'';position:absolute;transition:all 0.25s ease-in;display:none;background-position:0 0;background-repeat:no-repeat;background-size:100% auto;background-image:url(../imgs/tangerine.webp);}
.tab-container li.active::before{left:0.6em;}
.tab-container li.active::after{right:0.6em;}
.tab-container li.active::before,.tab-container li.active::after{display:block;}

.panel-container{width:600px;padding:1em 2em;border:2px solid #fff;border-radius:0.8em;display:block;margin:auto;background:rgba(255,158,202,0.2);box-shadow:0 0 60px 0 rgba(255,79,124,0.5);z-index:100;position:relative;backdrop-filter:blur(0.1em);}
.content-panel{display:none;}
.content-panel .operation{margin:auto;position:relative;}
.content-panel .operation .group{display:flex;margin:0.6em auto;}
.content-panel .operation .group:last-child{margin-top:1.2em;}
#relationship-panel.content-panel .operation .group{display:grid;grid-template-columns:repeat(5,1fr);}
#relationship-panel .btn-small{font-size:1.2em;}
.content-panel .group{margin:0 auto 0.6em auto;gap:0.4em;text-align:center;}
.content-panel textarea{padding:0;font-size:1.4em;line-height:1.2;color:var(--color-secondary);width:100%;border:none;text-align:center;display:flex;align-items:center;outline:none;background:transparent;overflow:hidden;font-weight:700;}


label{display:inline-block;}
#appellation-sub-input textarea{width:80%;font-size:1em;margin:0.6em auto 0 auto;width:80%;}
#appellation-sub-input input::placeholder{color:#fff!important;text-align:center!important;}
#appellation-sub-input input:focus::placeholder{color:transparent!important;}
#appellation-sub-input .field{padding:0.8em;}
#Results{padding:1.2em;background:rgba(255,255,255,0.6);border-radius:0.6em;}

.result-display,.selection-header,#appellation-sub-input input{color:#fff;border-radius:0.4em;background-position:0 0;background-repeat:no-repeat;background-size:100% auto;background-image:url(../imgs/results-bg.webp);align-items:start;}
.result-display{display:grid;grid-template-columns:repeat(2, 1fr);gap:1em;}
.result-pronounce{padding:1em 0;gap:0.2em;line-height:1.1;display:grid;grid-template-columns:repeat(1, 1fr);height:100%;align-items:start;}
.result-display .result-pronounce:first-child{padding-left:1.6em;}
.result-display .result-pronounce:last-child{padding-right:1.6em;}
.result-pronounce label{font-size:1em;margin:auto;}
.result-pronounce span{font-size:1.2em;}
.selection-header{margin-top:0.4em;display:grid;grid-template-columns:repeat(1, 1fr);justify-content:center;align-items:center;}
#current-selection-text{margin:0 0.6em;font-size:0.85em;line-height:2.6;}
#appellation-pronounce-btn{margin-top:-0.8em;}

.result-pronounce span,#current-selection-text,#appellation-sub-input input{text-shadow:1px 1px 2px rgba(180,0,0,0.4);font-weight:900;}

.input-text{padding:0.4em 0.4em 0.6em 0.4em;font-size:1em;line-height:1;width:100%;border:none;text-align:center;display:flex;align-items:center;outline:none;background:#fff;font-weight:700;border-radius:0.4em;}

.btn-group{margin-top:1em;display:flex;gap:6px;}
.btn{font-size:1em;padding:0.6em 1.2em;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.8);line-height:1.2;color:#333333;cursor:pointer;outline:none;white-space:nowrap;border:none;border-radius:50px;transition:ease-in-out 0.25s;}
.btn:hover{background:var(--color-secondary);color:#fff;border-color:transparent;}
.btn-small{border-radius:0.4em;padding:0;min-width:50px;min-height:50px;font-weight:700;}
.btn-small:hover,.btn-small:focus{transform:scale(1.2)!important;z-index:1000;position:relative;}
.btn-calculate{background:var(--color-main);color:#fff;position:absolute;right:0;font-weight:700;}
.btn-calculate:hover{background:var(--color-main);}
.btn-reset {background:#fff;}
.btn-reset:hover{background:var(--color-secondary);color:#fff;}
.btn-back{background:rgba(255,244,209,0);position:absolute;right:5em;border:1px dotted #fff;}
.btn-back:hover{background:rgba(255,244,209,1);color:#000;}
.btn[disabled]{background:rgba(255,255,255,0.5)!important;color:#999!important;border:none;}
.btn[disabled]:hover,.btn[disabled]:focus{transform:none!important;}
.btn-nav{border-radius:0.4em;}
.btn-nav.active{background:#95dfff;font-weight:700;border-color:transparent;color:#000;}

.field{font-size:1.4em;padding:1.2em 0.8em 1.8em 0.8em;background:rgba(255,255,255,0.6);border-radius:0.4em;color:var(--color-secondary);line-height:1.2;font-weight:700;}
.result-box{width:100%;}
.result-box span{font-size:0.7em;color:var(--color-main);font-weight:500;}
.category-scroll-container{padding-bottom:0.6em;margin-bottom:0.6em;scrollbar-width:none;}
.category-scroll-container::-webkit-scrollbar { display: none; }
.category-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0.4em;}
.category-tab-btn{padding:0.6em;font-size:1.1em;font-weight:700;border:none;border-radius:0.4em;background:#fff;cursor:pointer;transition:all 0.2s;color:#000;}
.category-tab-btn.active{background:var(--color-secondary);color:white;border-color:var(--color-secondary);}
.button-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:0.4em;margin:0.6em auto;}
.btn-name{padding:0.2em 0.6em;width:100%;white-space:normal;}
#appellation-select-btns .btn-name{font-weight:400;}
#appellation-sub-select,#appellation-sub-input{width:100%;}
.panel-nav{display:flex;align-items:center;justify-content:center;}
.panel-nav .btn-group{margin-top:0;padding:2px;background:#fff;border-radius:0.5em;}

.btn-audio{padding:0;outline:none;width:auto;background:none;border:0;margin:0.2em auto -2.4em auto;}
.audio-icon{width:44px;height:44px;display:block;background-position:center;background-repeat:no-repeat;background-size:70% auto; border-radius:50px;transition:transform 0.25s ease;}
.audio-play{background-image:url(../../assets/imgs/audio-play.svg);background-color:#2060b8;position:relative;}
.audio-play:after{content:"";position:absolute;inset:0;border-radius:50px;border:0.6em solid #2060b8;animation:pulse-ring 1.5s infinite; }
.audio-pause{background-image:url(../../assets/imgs/audio-pause.svg);background-color:var(--color-main);}

.no-result{font-size:1em!important;font-weight:700!important;color:#fff !important;font-style:normal;font-weight:normal;}
#appellation-sub-input .no-result{margin-top:0.8em;font-size:0.7em!important;color:var(--color-secondary)!important;}

.pulse-ring{position:relative;}
.pulse-ring::after{content:"";position:absolute;inset:0;border-radius:50px;border:0.6em solid #2060b8;animation:pulse-ring 1.5s infinite;}

@keyframes pulse-ring{
0%{transform:scale(0.8);opacity:0;}
50%{transform:scale(1);opacity:1;}
100%{transform:scale(1.4);opacity:0;}
}

@media screen and (min-width:320px) and (max-width:640px) {
#Header{margin:0 auto 1em auto;}
.container{margin:0 auto 2em auto;}
.tab-container ul{font-size:1em;}
.panel-container{padding:0.6em 1em 1em 1em;width:100%;background:rgba(255,79,124,0.2);backdrop-filter:blur(0.2em);}
.result-display{border-radius:0.6em;}
.result-display .result-pronounce:first-child{padding-left:1.2em;}
.result-display .result-pronounce:last-child{padding-right:1.2em;}
.button-grid{grid-template-columns:repeat(4, 1fr);}
.result-pronounce label,.no-result{font-size:0.9em!important;}
#appellation-sub-input textarea{width:90%;}
}


/* Input Styles */
.options{display:flex;gap:1rem;flex-wrap:wrap;}
label{cursor:pointer;}
.pill-group input{display:none;}
.pill-group label{padding:0.5rem 1rem;border:2px solid var(--border);border-radius:999px;transition:all 0.2s ease;user-select:none;}
.pill-group input:checked + label{background:var(--accent);color:white;border-color:var(--accent);}

.card-group input{display:none;}
.card-group label{border:2px solid var(--border);border-radius:0.75rem;padding:1rem 1.25rem;min-width:120px;text-align:center;transition:all 0.2s ease;}
.card-group input:checked + label{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79, 70, 229, 0.15);}

.toggle{position:relative;width:52px;height:28px;}
.toggle input{opacity:0;width:0;height:0;}
.slider{position:absolute;inset:0;background:#e5e7eb;border-radius:999px;transition:background 0.2s ease;}
.slider::before{content:"";position:absolute;height:22px;width:22px;left:3px;top:3px;background:white;border-radius:50%;transition:transform 0.2s ease;}
.toggle input:checked + .slider{background:var(--accent);}
.toggle input:checked + .slider::before{transform:translateX(24px);}

.dot-group input{display:none;}
.dot-group label{display:flex;align-items:center;gap:0.5rem;}
.dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);position:relative;}
.dot::after{content:"";position:absolute;inset:3px;background:var(--accent);border-radius:50%;transform:scale(0);transition:transform 0.15s ease;}
.dot-group input:checked + label .dot::after{transform:scale(1);}

.gender-toggle{margin:0 0.2em;position:relative;display:inline-grid;grid-template-columns:1fr 1fr;border-radius:999px;overflow:hidden;background:white;}
.gender-toggle input{display:none;}
.gender-toggle label{font-size:1em;padding:0.6em 1.6em;font-weight:500;text-align:center;font-weight:500;cursor:pointer;z-index:2;user-select:none;}
.gender-toggle .indicator{position:absolute;top:2px;left:2px;width:calc(50% - 2px);height:calc(100% - 4px);background:#95dfff;border-radius:999px;transition:transform 0.25s ease;z-index:1;}
#female:checked ~ .indicator{transform:translateX(100%);}
#male000:checked + input000 + label000{color:white;}



@media (min-height:400px) and (max-height:700px) and (orientation:landscape){

}

/* The monkeys learn by watching you */