/* Scoped to shortcode root; derived from the standalone HTML stylesheet. */
.mbti-widget{container-type:inline-size;--ink:#203232;--muted:#647370;--teal:#1f716b;--teal2:#d9eee8;--cream:#f7f5f0;--paper:#fffefa;--line:#e6e9e2;--gold:#d4a958;--shadow:0 18px 55px rgba(34,63,58,.09)}
.mbti-widget *{box-sizing:border-box}
.mbti-widget{scroll-behavior:smooth}
.mbti-widget{margin:0;background:var(--cream);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif;line-height:1.65}
.mbti-widget button{font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-align:center;vertical-align:middle;line-height:1.2;text-indent:0}
.mbti-widget .topbar{height:76px;padding:0 clamp(20px,6vw,90px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(32,50,50,.08);background:rgba(255,254,250,.8)}
.mbti-widget .brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-weight:800;letter-spacing:.04em}
.mbti-widget .brand-mark{width:34px;height:34px;border-radius:50% 50% 46% 54%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:17px}
.mbti-widget .nav-note{font-size:13px;color:var(--muted)}
.mbti-widget main{min-height:calc(100vh - 76px)}
.mbti-widget .hero{max-width:1160px;margin:auto;min-height:570px;padding:88px 28px 74px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:55px}
.mbti-widget .eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid #c5ddd4;background:#eef6f1;border-radius:99px;padding:7px 13px;color:var(--teal);font-size:13px;font-weight:700}
.mbti-widget .eyebrow i{width:7px;height:7px;background:#d0a04c;border-radius:50%}
.mbti-widget .hero h1{font-size:clamp(42px,6.3vw,74px);line-height:1.13;letter-spacing:-.055em;margin:22px 0 20px;max-width:650px}
.mbti-widget .hero h1 span{color:var(--teal)}
.mbti-widget .hero p{font-size:17px;color:var(--muted);max-width:550px;margin:0 0 30px}
.mbti-widget .primary{border:0;border-radius:12px;background:var(--teal);color:white;padding:14px 22px;font-weight:750;box-shadow:0 9px 20px #1f716b30;transition:.2s}
.mbti-widget .primary:hover{background:#185e59;transform:translateY(-1px)}
.mbti-widget .subnote{font-size:12px;color:#7e8985;margin-top:14px}
.mbti-widget .hero-art{height:365px;position:relative;display:grid;place-items:center}
.mbti-widget .orbit{width:300px;height:300px;border:1px solid #c5d8cf;border-radius:50%;position:absolute}
.mbti-widget .orbit:before,
.mbti-widget .orbit:after{content:"";position:absolute;border:1px solid #d9e5dc;border-radius:50%}
.mbti-widget .orbit:before{inset:30px}
.mbti-widget .orbit:after{inset:65px}
.mbti-widget .sun{position:absolute;width:156px;height:156px;border-radius:50%;background:#e9c783;box-shadow:0 0 0 20px #e9c78324,0 0 0 43px #e9c78312}
.mbti-widget .leaf{position:absolute;width:112px;height:48px;border-radius:100% 0 100% 0;background:#3a8476;transform:rotate(-35deg);box-shadow:inset -10px -5px 0 #226d63}
.mbti-widget .leaf.one{top:54px;right:80px}
.mbti-widget .leaf.two{bottom:45px;left:55px;transform:rotate(145deg) scale(.85);background:#8eb59d}
.mbti-widget .leaf.three{top:129px;left:42px;transform:rotate(35deg) scale(.54);background:#d9a655}
.mbti-widget .spark{position:absolute;color:#c6994e;font-size:25px}
.mbti-widget .spark.a{right:62px;top:95px}
.mbti-widget .spark.b{left:90px;bottom:55px;font-size:18px}
.mbti-widget .caption{position:absolute;bottom:2px;right:8%;font-size:12px;letter-spacing:.16em;color:#8b9991}
.mbti-widget .section{padding:74px 24px;background:var(--paper);border-top:1px solid var(--line)}
.mbti-widget .section-inner{max-width:1040px;margin:auto}
.mbti-widget .section h2{text-align:center;font-size:32px;letter-spacing:-.03em;margin:0 0 12px}
.mbti-widget .section-intro{text-align:center;color:var(--muted);margin:0 auto 38px;max-width:600px}
.mbti-widget .dimensions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mbti-widget .dimension{border:1px solid var(--line);border-radius:16px;padding:21px 18px;background:#fff}
.mbti-widget .dimension b{display:block;color:var(--teal);font-size:17px;margin-bottom:8px}
.mbti-widget .dimension span{display:block;font-size:13px;color:var(--muted)}
.mbti-widget .footer{padding:26px;text-align:center;font-size:12px;color:#7d8984}
.mbti-widget .quiz-shell{max-width:850px;margin:0 auto;padding:42px 22px 70px}
.mbti-widget .quiz-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:12px;color:var(--muted);font-size:13px}
.mbti-widget .progress{height:7px;border-radius:99px;background:#e6ebe5;overflow:hidden;margin-bottom:31px}
.mbti-widget .progress>span{display:block;height:100%;width:0;background:var(--teal);border-radius:inherit;transition:width .3s}
.mbti-widget .instructions{font-size:14px;color:var(--muted);margin-bottom:15px}
.mbti-widget .question{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin:13px 0;box-shadow:0 5px 18px #183a3108}
.mbti-widget .question p{font-weight:700;margin:0 0 15px;font-size:16px}
.mbti-widget .scale{display:grid;grid-template-columns:1fr repeat(5,48px) 1fr;align-items:center;gap:9px}
.mbti-widget .scale-label{font-size:11px;color:var(--muted);line-height:1.25}
.mbti-widget .scale-label.right{text-align:right}
.mbti-widget .choice{display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:0;line-height:1;border:1px solid #cbd8d2;background:#fff;border-radius:50%;width:43px;height:43px;color:#5a6b66;font-weight:700;justify-self:center;color:#405b55!important;-webkit-text-fill-color:#405b55!important;font-size:15px;font-weight:700;opacity:1;transition:.15s}
.mbti-widget .choice:hover{border-color:var(--teal);color:var(--teal);transform:scale(1.06)}
.mbti-widget .choice.selected{background:#123f3b;border-color:#123f3b;color:#fff;font-weight:800;box-shadow:0 0 0 4px #c6ddd5}
.mbti-widget .choice:focus-visible{outline:3px solid #d4a958;outline-offset:3px}
.mbti-widget .choice[data-value="1"],
.mbti-widget .choice[data-value="5"]{width:39px;height:39px}
.mbti-widget .choice[data-value="2"],
.mbti-widget .choice[data-value="4"]{width:35px;height:35px}
.mbti-widget .choice.selected{width:43px;height:43px}
.mbti-widget .choice[data-value="1"],
.mbti-widget .choice[data-value="2"]{border-color:#a8cbbd;color:#387667!important;-webkit-text-fill-color:#387667!important}
.mbti-widget .choice[data-value="5"],
.mbti-widget .choice[data-value="4"]{border-color:#d4b9a4;color:#a06445!important;-webkit-text-fill-color:#a06445!important}
.mbti-widget .choice.selected{border-color:#123f3b!important;color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1}
.mbti-widget .quiz-actions{display:flex;justify-content:flex-end;align-items:center;margin-top:26px}
.mbti-widget .quiz-actions .secondary:not(.hidden){margin-right:auto}
.mbti-widget .secondary{border:1px solid #9dbeb1!important;background:#eef5ef!important;color:#123f3b!important;-webkit-text-fill-color:#123f3b!important;border-radius:11px;padding:12px 19px;font-weight:700;opacity:1!important}
.mbti-widget .secondary:hover{background:#e1efe8!important}
.mbti-widget .primary:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
.mbti-widget .hidden{display:none!important}
.mbti-widget .result-wrap{max-width:1040px;margin:0 auto;padding:48px 24px 75px}
.mbti-widget .result-top{text-align:center;padding:35px 20px 32px;background:linear-gradient(135deg,#e8f2eb,#f7f4e9);border-radius:24px}
.mbti-widget .result-top .eyebrow{margin-bottom:12px}
.mbti-widget .result-top h1{font-size:clamp(42px,7vw,68px);line-height:1.05;margin:4px 0;color:var(--teal);letter-spacing:.04em}
.mbti-widget .result-top h2{font-size:23px;margin:9px 0}
.mbti-widget .result-top p{max-width:650px;margin:10px auto;color:#53645e}
.mbti-widget .result-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px;margin-top:22px}
.mbti-widget .result-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px}
.mbti-widget .result-card h3{margin:0 0 15px;font-size:18px}
.mbti-widget .axis{margin:17px 0}
.mbti-widget .axis-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:7px}
.mbti-widget .axis-track{height:9px;background:#e8ece7;border-radius:99px;position:relative;overflow:hidden}
.mbti-widget .axis-fill{height:100%;background:linear-gradient(90deg,#77aa91,var(--teal));border-radius:99px}
.mbti-widget .axis-percent{font-size:12px;color:var(--muted);text-align:right;margin-top:4px}
.mbti-widget .trait-list{display:flex;flex-wrap:wrap;gap:8px}
.mbti-widget .trait{padding:6px 11px;background:#eef5ef;border-radius:99px;color:#386b5f;font-size:13px}
.mbti-widget .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:24px 0}
.mbti-widget .disclaimer{max-width:790px;margin:20px auto 0;text-align:center;font-size:12px;color:#7c8882}
.mbti-widget .question:focus-within{border-color:#9cc6b6}
.mbti-widget .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){
.mbti-widget .hero{grid-template-columns:1fr;gap:0;padding-top:61px;text-align:center}
.mbti-widget .hero p{margin-left:auto;margin-right:auto}
.mbti-widget .hero-art{height:285px;order:-1}
.mbti-widget .orbit{width:235px;height:235px}
.mbti-widget .sun{width:125px;height:125px}
.mbti-widget .leaf.one{top:25px;right:calc(50% - 145px)}
.mbti-widget .leaf.two{bottom:26px;left:calc(50% - 145px)}
.mbti-widget .leaf.three{left:calc(50% - 145px)}
}
@media(max-width:760px){
.mbti-widget .topbar{height:64px}
.mbti-widget .hero{grid-template-columns:1fr;gap:0;padding-top:61px;text-align:center}
.mbti-widget .hero p{margin-left:auto;margin-right:auto}
.mbti-widget .hero-art{height:285px;order:-1}
.mbti-widget .orbit{width:235px;height:235px}
.mbti-widget .sun{width:125px;height:125px}
.mbti-widget .leaf.one{top:25px;right:calc(50% - 145px)}
.mbti-widget .leaf.two{bottom:26px;left:calc(50% - 145px)}
.mbti-widget .leaf.three{left:calc(50% - 145px)}
.mbti-widget .caption{right:0;bottom:-6px}
.mbti-widget .dimensions{grid-template-columns:repeat(2,1fr)}
.mbti-widget .scale{grid-template-columns:1fr repeat(5,38px) 1fr;gap:4px}
.mbti-widget .choice,
.mbti-widget .choice[data-value="1"],
.mbti-widget .choice[data-value="5"]{width:35px;height:35px}
.mbti-widget .choice[data-value="2"],
.mbti-widget .choice[data-value="4"]{width:31px;height:31px}
.mbti-widget .choice.selected{width:35px;height:35px}
.mbti-widget .question{padding:19px 15px}
.mbti-widget .result-grid{grid-template-columns:1fr}
}
@media(max-width:400px){
.mbti-widget .scale{grid-template-columns:1fr repeat(5,33px) 1fr;gap:2px}
.mbti-widget .choice,
.mbti-widget .choice[data-value="1"],
.mbti-widget .choice[data-value="5"]{width:30px;height:30px;font-size:12px}
.mbti-widget .choice[data-value="2"],
.mbti-widget .choice[data-value="4"]{width:27px;height:27px}
.mbti-widget .choice.selected{width:30px;height:30px}
.mbti-widget .scale-label{font-size:10px}
.mbti-widget .dimensions{grid-template-columns:1fr}
.mbti-widget .nav-note{font-size:11px}
}
@media print{
.mbti-widget{background:white}
.mbti-widget .topbar,
.mbti-widget .actions,
.mbti-widget .footer{display:none!important}
.mbti-widget .result-wrap{padding:0}
.mbti-widget .result-top,
.mbti-widget .result-card{break-inside:avoid;box-shadow:none}
.mbti-widget .result-top{border:1px solid #d6ded8}
.mbti-widget .result-grid{gap:10px}
.mbti-widget .disclaimer{color:#444}
}
@container (max-width: 900px) {
.mbti-widget .hero{grid-template-columns:1fr;gap:0;padding-top:61px;text-align:center}
.mbti-widget .hero p{margin-left:auto;margin-right:auto}
.mbti-widget .hero-art{height:285px;order:-1}
.mbti-widget .orbit{width:235px;height:235px}
.mbti-widget .sun{width:125px;height:125px}
.mbti-widget .leaf.one{top:25px;right:calc(50% - 145px)}
.mbti-widget .leaf.two{bottom:26px;left:calc(50% - 145px)}
.mbti-widget .leaf.three{left:calc(50% - 145px)}
}