/* GUDAO Interactive Care Lab v6 */
:root{--care-rock:#262C31;--care-sand:#EBEBE9;--care-orange:#FF8510;--care-green:#345339;--care-red:#823B35;--light-level:.5;--wind-level:.5;--water-level:.5}
[hidden]{display:none!important}*{box-sizing:border-box}.modal-open{overflow:hidden}.care-page{min-height:100vh;background:var(--g-sand,var(--care-sand));color:var(--g-rock,var(--care-rock))}.site-header nav a.active{color:var(--g-orange,var(--care-orange));border-bottom:2px solid var(--g-orange,var(--care-orange))}.care-hero{background:var(--g-rock,var(--care-rock))!important;border-bottom:9px solid var(--g-orange,var(--care-orange))}.care-hero>p:not(.label){max-width:760px;color:rgba(255,255,255,.78);font-size:18px}.label{font-family:"Khand","GenSekiGothicTC",sans-serif;font-weight:700;letter-spacing:.13em}.care-intro{display:flex;align-items:end;justify-content:space-between;gap:32px;padding:clamp(52px,7vw,96px) 0 28px;border-bottom:1px solid rgba(38,44,49,.18)}.care-intro h2,.lab-heading h2,.section-heading h2{margin:0;font-size:clamp(2.7rem,5vw,4.8rem);line-height:1}.care-intro-copy{max-width:58ch;color:#535B60}.care-intro-copy p{margin:5px 0}
.care-lab{padding:38px 0 clamp(70px,9vw,120px)}.lab-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.balance-badge{min-width:220px;padding:13px 17px;background:var(--care-rock);border-left:5px solid var(--care-orange);color:#fff}.balance-badge span{display:block;color:rgba(255,255,255,.58);font-size:12px}.balance-badge strong{font-size:19px}.balance-badge[data-state=warning]{border-color:var(--care-red)}.balance-badge[data-state=active]{border-color:var(--care-green)}.lab-layout{display:grid;grid-template-columns:minmax(420px,1.1fr) minmax(340px,.9fr);gap:24px}.triangle-column{display:grid;gap:12px;align-content:start}.triangle-panel{position:relative;width:100%;aspect-ratio:1.1547/1;overflow:hidden;background:var(--care-rock);border-top:7px solid var(--care-orange);box-shadow:0 24px 65px rgba(38,44,49,.18)}.triangle-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.triangle-svg line{stroke:var(--care-orange);stroke-width:2;stroke-linecap:round;opacity:.78;vector-effect:non-scaling-stroke}.factor-node{position:absolute;z-index:3;display:grid;width:86px;height:86px;min-width:86px;min-height:86px;padding:7px;place-items:center;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(38,44,49,.96);color:#fff;cursor:pointer}.factor-node:hover,.factor-node:focus-visible{border-color:var(--care-orange);box-shadow:0 0 0 5px rgba(255,133,16,.18)}.factor-node b{font-size:18px;line-height:1}.factor-node small{color:var(--care-orange);font-weight:900}.factor-icon{font-size:26px;line-height:1}.factor-light{top:7px;left:50%;transform:translateX(-50%);box-shadow:0 0 calc(12px + 32px * var(--light-level)) rgba(255,133,16,calc(.1 + .32 * var(--light-level)))}.factor-wind{bottom:7px;left:calc(17.833% - 43px)}.factor-water{right:calc(17.833% - 43px);bottom:7px}.water-icon{color:#8cc8df}.wind-icon{transform:scale(calc(.85 + .3 * var(--wind-level)))}.triangle-status-card{display:grid;gap:7px;padding:20px 22px;background:var(--care-rock);border-top:4px solid var(--care-orange);color:#fff}.triangle-status-card>span{color:rgba(255,255,255,.52);font:700 11px "Khand",sans-serif;letter-spacing:.14em}.triangle-status-card strong{color:var(--care-orange);font-size:21px}.triangle-status-card p{margin:0;color:rgba(255,255,255,.72);line-height:1.75}
.control-board{display:grid;gap:13px}.control-card,.drying-card{padding:19px;background:#fff;border-top:4px solid var(--care-orange);box-shadow:0 12px 30px rgba(38,44,49,.08)}.control-title{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center}.control-title>span{font-size:25px}.control-title div{display:grid}.control-title small,.drying-head small{color:#72797d}.control-title output{font:700 30px "Khand",sans-serif;color:var(--care-red)}.control-card input[type=range]{position:relative;z-index:2;display:block;width:100%;margin:18px 0 6px;accent-color:var(--care-orange);touch-action:pan-x}.range-labels,.drying-steps{display:flex;justify-content:space-between;color:#858b8e;font-size:11px}.control-card>p{margin:13px 0 0;color:#535B60;font-size:13px}.wind-card{border-color:var(--care-green)}.water-card{border-color:#659fb8}.drying-head{display:flex;justify-content:space-between;gap:12px}.drying-head div{display:grid}.drying-head strong{color:var(--care-red)}.drying-track{height:18px;margin:17px 0 7px;background:#ddd}.drying-track span{display:block;width:50%;height:100%;background:linear-gradient(90deg,#659fb8,var(--care-orange));transition:width .4s ease}
.growth-section,.knowledge-section{padding-bottom:clamp(72px,9vw,120px)}.section-heading{max-width:820px;margin-bottom:25px}.section-heading>p{color:#596166}.stage-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.stage-button{display:grid;gap:5px;min-height:92px;padding:14px;border:1px solid rgba(38,44,49,.25);background:transparent;color:var(--care-rock);text-align:left;cursor:pointer}.stage-button span{color:var(--care-red);font:700 15px "Khand",sans-serif}.stage-button b{font-size:19px}.stage-button.active,.stage-button:hover{border-color:var(--care-orange);background:var(--care-orange)}.stage-advice{display:grid;grid-template-columns:1.4fr .8fr;gap:28px;margin-top:13px;padding:clamp(23px,4vw,38px);background:var(--care-rock);color:#fff;border-left:7px solid var(--care-orange)}.stage-advice>div:first-child span{color:var(--care-orange);font-weight:900}.stage-advice h3{margin:7px 0;font-size:clamp(24px,4vw,38px)}#stage-copy{color:rgba(255,255,255,.68);white-space:pre-line;line-height:1.8}.suggested-ranges{display:grid;gap:8px}.suggested-ranges div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.18)}.suggested-ranges span{color:rgba(255,255,255,.58)}
.knowledge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.knowledge-card{display:grid;min-height:260px;padding:23px;align-content:start;border:1px solid rgba(38,44,49,.2);background:#fff;color:var(--care-rock);text-align:left;cursor:pointer}.knowledge-card>span{font-size:39px;color:var(--care-orange)}.knowledge-card small{margin-top:24px;color:var(--care-red);font:700 12px "Khand",sans-serif;letter-spacing:.12em}.knowledge-card b{font-size:31px}.knowledge-card p{color:#656d71}.knowledge-card:hover,.knowledge-card:focus-visible{transform:translateY(-4px);border-color:var(--care-orange);box-shadow:0 16px 35px rgba(38,44,49,.11)}.diagnose-card{background:var(--care-rock);color:#fff}.diagnose-card p{color:rgba(255,255,255,.65)}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-bottom:55px}.principles>div{padding:24px;background:#fff;border-top:4px solid var(--care-orange)}.principles span{color:var(--care-red);font:700 15px "Khand",sans-serif}.principles h3{margin:5px 0}.principles p{color:#626a6f}.care-disclaimer{margin-bottom:90px;padding:24px;border-left:6px solid var(--care-red);background:#f3eceb}.care-disclaimer p{margin:5px 0;color:#5e666a}
.care-modal{position:fixed;inset:0;z-index:10000}.care-modal[hidden]{display:none!important}.care-modal-backdrop{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:rgba(20,24,27,.72);cursor:pointer}.care-modal-panel{position:absolute;top:50%;right:24px;width:min(520px,calc(100vw - 48px));max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);padding:58px 30px 30px;overflow:auto;background:var(--care-sand);border-top:8px solid var(--care-orange);box-shadow:0 22px 70px rgba(0,0,0,.35);transform:translateY(-50%);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.care-modal-close{position:absolute;top:12px;right:12px;display:flex!important;align-items:center!important;justify-content:center!important;width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;margin:0!important;padding:0 0 2px!important;border:1px solid var(--care-rock)!important;background:transparent!important;color:var(--care-rock)!important;font:700 25px/1 Arial,sans-serif!important;cursor:pointer}.care-modal-close:hover,.care-modal-close:focus-visible{border-color:var(--care-orange)!important;background:var(--care-orange)!important;outline:none}.care-modal-panel>.label,.care-modal-panel>h2{padding-right:54px}.care-modal-panel h2{margin:5px 0 12px;font-size:clamp(40px,5vw,58px);line-height:1.08}.drawer-intro,.care-modal-panel>p{font-size:15px;line-height:1.75}.drawer-points{display:grid;gap:10px;margin-top:24px}.drawer-points article{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:15px;background:#fff;border-left:4px solid var(--care-orange)}.drawer-points span{color:var(--care-red);font:700 18px "Khand",sans-serif}.drawer-points h3{margin:0}.drawer-points p{margin:5px 0 0;color:#646c70;line-height:1.7}.drawer-note{margin-top:20px;padding:18px;background:var(--care-rock);color:#fff;border-left:5px solid var(--care-orange)}.symptom-list{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.symptom-list button{min-height:42px;padding:8px 13px;border:1px solid var(--care-rock);background:transparent;font-weight:800;cursor:pointer}.symptom-list button.active,.symptom-list button:hover{border-color:var(--care-orange);background:var(--care-orange)}.diagnosis-result{padding:20px;background:#fff}.diagnosis-label{margin:0;color:var(--care-red);font-weight:900}.diagnosis-result h3{margin:5px 0 18px;font-size:clamp(26px,4vw,38px)}.diagnosis-columns{display:grid;grid-template-columns:1fr;gap:15px}.diagnosis-columns h4{border-bottom:3px solid var(--care-orange);padding-bottom:7px}.diagnosis-columns li{margin:9px 0}.diagnosis-warning{margin:20px 0 0;padding:14px;background:#f4eaea;border-left:4px solid var(--care-red);color:#65443f}
@media(max-width:980px){.lab-layout{grid-template-columns:1fr}.knowledge-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.care-intro,.lab-heading{display:block}.care-intro-copy,.balance-badge{margin-top:18px}.triangle-panel{aspect-ratio:1.1547/1}.factor-node{width:72px;height:72px;min-width:72px;min-height:72px;padding:5px}.factor-node b{font-size:15px}.factor-icon{font-size:22px}.factor-light{top:4px}.factor-wind{bottom:4px;left:calc(17.833% - 36px)}.factor-water{right:calc(17.833% - 36px);bottom:4px}.triangle-status-card{padding:17px 18px}.triangle-status-card strong{font-size:19px}.triangle-status-card p{font-size:13px}.stage-selector{grid-template-columns:repeat(2,1fr)}.stage-advice{grid-template-columns:1fr}.principles{grid-template-columns:1fr}.care-modal-panel{top:20px;right:12px;bottom:20px;left:12px;width:auto;max-height:none;padding:58px 18px 22px;transform:none}.care-modal-panel h2{font-size:clamp(34px,9.5vw,46px)}.drawer-points article{grid-template-columns:38px minmax(0,1fr);gap:10px;padding:14px}.symptom-list{overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;padding-bottom:8px;-webkit-overflow-scrolling:touch}.symptom-list button{flex:0 0 auto;white-space:nowrap}.diagnosis-result{padding:17px}}
@media(max-width:520px){.care-intro{padding-top:45px}.lab-heading h2,.section-heading h2{font-size:2.8rem}.knowledge-grid{grid-template-columns:1fr 1fr}.knowledge-card{min-height:220px;padding:16px}.knowledge-card b{font-size:26px}.knowledge-card p{font-size:13px}.care-modal-panel{top:12px;right:8px;bottom:12px;left:8px;padding:56px 16px 20px}.care-modal-panel h2{font-size:clamp(31px,9vw,40px)}}
@media(prefers-reduced-motion:reduce){.knowledge-card,.drying-track span{transition:none}}
/* ==================================================
   光、風、水節點光暈
   光暈強度會跟滑桿數值同步變化
   ================================================== */

/* 風：綠色光暈 */
.factor-wind {
  box-shadow:
    0 0 calc(12px + 32px * var(--wind-level))
    rgba(
      52,
      83,
      57,
      calc(0.12 + 0.46 * var(--wind-level))
    );
}

/* 水：藍色光暈 */
.factor-water {
  box-shadow:
    0 0 calc(12px + 32px * var(--water-level))
    rgba(
      101,
      159,
      184,
      calc(0.12 + 0.46 * var(--water-level))
    );
}
/* 光：橙色 */
.factor-light {
  box-shadow:
    0 0 calc(14px + 36px * var(--light-level))
    rgba(
      255,
      133,
      16,
      calc(0.14 + 0.50 * var(--light-level))
    );
}

/* 風：綠色 */
.factor-wind {
  box-shadow:
    0 0 calc(14px + 36px * var(--wind-level))
    rgba(
      92,
      160,
      105,
      calc(0.14 + 0.50 * var(--wind-level))
    );
}

/* 水：藍色 */
.factor-water {
  box-shadow:
    0 0 calc(14px + 36px * var(--water-level))
    rgba(
      92,
      190,
      225,
      calc(0.14 + 0.50 * var(--water-level))
    );
}