.hero { text-align: center; }
.hero .glyph { font-size: 4rem; line-height: 1.1; font-family: "Noto Serif TC", "Songti SC", serif; }
.hero .name { font-size: 1.2rem; font-weight: 600; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pillar { border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px; text-align: center; }
.pillar.dm { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pillar .label { font-size: .75rem; color: var(--muted); }
.pillar .ch { font-size: 2.2rem; line-height: 1.2; font-family: "Noto Serif TC", "Songti SC", serif; }
.pillar .sub { font-size: .72rem; color: var(--muted); }
.pillar .hid { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: .8rem; }
.el-wood { color: var(--wood); } .el-fire { color: var(--fire); } .el-earth { color: var(--earth); }
.el-metal { color: var(--metal); } .el-water { color: var(--water); }
.bar { display: grid; grid-template-columns: 64px 1fr 96px; align-items: center; gap: 10px; margin: 8px 0; font-size: .9rem; }
.bar .track { height: 12px; background: var(--line); border-radius: 6px; overflow: hidden; }
.bar .fill { height: 100%; border-radius: 6px; }
.bar .val { text-align: right; color: var(--muted); font-size: .8rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.chip { padding: 4px 12px; border-radius: 999px; border: 1px solid currentColor; font-weight: 600; }
.muted { color: var(--muted); } .small { font-size: .8rem; }
@media (max-width: 480px) { .pillar .ch { font-size: 1.7rem; } .bar { grid-template-columns: 54px 1fr 80px; } }

/* ---- planner ---- */

.inline { display: flex; align-items: center; gap: 6px; } .inline select { flex: 1; }
.wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.wd div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 2px; font-size: .8rem; }
.wd .ok { border-color: var(--wood); } .wd .no { opacity: .55; }
.wd b { display: block; font-size: 1rem; } .wd small { color: var(--muted); font-size: .7rem; word-break: break-all; }
.cand summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; margin: 0; color: var(--fg); }
.cand summary::-webkit-details-marker { display: none; }
.rank { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; }
.cand .when { font-weight: 600; } .cand .mini { font-family: "Songti SC", serif; font-size: 1.1rem; letter-spacing: 1px; }
.score { text-align: right; font-size: 1.6rem; font-weight: 700; line-height: 1; } .score small { display: block; font-size: .7rem; color: var(--muted); font-weight: 400; }
.cand-body { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; font-size: .78rem; color: var(--muted); }
.reasons { margin: 8px 0 14px; padding-left: 18px; font-size: .88rem; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; } th, td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 500; } td.n { text-align: right; font-variant-numeric: tabular-nums; }
.tag { font-size: .7rem; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
@media (max-width: 480px) { .parts { grid-template-columns: repeat(2, 1fr); } .cand summary { grid-template-columns: 36px 1fr auto; } .rank { width: 36px; height: 36px; } }

/* ---- daily ---- */
.dial { font-size: 4rem; font-weight: 700; line-height: 1; }
.streak { display: inline-block; margin-top: 8px; padding: 2px 12px; border-radius: 999px; background: var(--line); font-size: .85rem; }
.hr { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.hr.best { font-weight: 600; } .hr.bad { color: var(--muted); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.week div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 2px; font-size: .75rem; }
.week b { display: block; font-size: 1.1rem; }
.lucky { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; text-align: left; font-size: .9rem; }
.lucky div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; } .lucky small { display: block; color: var(--muted); }
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tabs button { flex: 1; width: auto; padding: 8px; background: var(--card); color: var(--fg); border: 1px solid var(--line); }
.tabs button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Mahatep — a little magic, every day */
:root{color-scheme:light;--bg:#f8f7f3;--fg:#302940;--muted:#787381;--card:#fff;--line:#e9e5ed;--accent:#7754ab;--wood:#42785d;--fire:#bb584d;--earth:#947020;--metal:#757589;--water:#4679ac;--lilac:#eee6f7}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.7 "Outfit","Noto Sans Thai",sans-serif;-webkit-font-smoothing:antialiased}a{color:var(--accent);text-decoration:none}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}a,button{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.65;cursor:wait}[hidden]{display:none!important}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #b391df;outline-offset:5px}input:focus,select:focus{outline:3px solid #e9dcf8;border-color:#a27ec8}main{max-width:1200px;margin:0 auto;padding:0 40px}h1,h2,h3,p{margin-top:0}.icon{width:22px;height:22px;flex-shrink:0;vertical-align:middle}.skip-link{position:fixed;top:-100px;left:20px;padding:12px;background:white;z-index:20}.skip-link:focus{top:12px}.site-header{height:108px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:10px;color:var(--fg);font-size:28px;font-weight:700;letter-spacing:-1px;line-height:1.05}.brand-mark{width:42px;height:42px;display:grid;place-items:center;background:#ebe1f5;border-radius:14px;color:var(--accent);transform:rotate(-8deg)}.brand-mark .icon{width:27px;height:27px}.brand-dot{color:var(--accent)}.brand small{display:block;font-size:10px;font-weight:400;letter-spacing:.45px;margin-top:8px;color:var(--muted)}nav{display:flex;gap:7px}nav a{display:flex;align-items:center;gap:7px;color:#716b7b;font-size:13px;padding:11px 14px;border-radius:12px;white-space:nowrap}nav .icon{width:17px;height:17px}nav a.active{background:#ebe2f4;color:#714b9e;font-weight:600}nav a:hover{background:#efebf3}.header-note{display:flex;align-items:center;gap:7px;color:#918797;font-size:11px}.header-note .icon{width:16px;height:16px;color:#ac91c0}
.welcome{display:grid;grid-template-columns:1.1fr 1fr;min-height:464px;align-items:center;gap:30px;padding:34px 12px 29px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;color:#877691;display:flex;align-items:center;gap:8px}.eyebrow>span{width:6px;height:6px;background:#a18bbb;border-radius:50%}h1{font-size:43px;line-height:1.5;font-weight:600;letter-spacing:-1.5px;margin:20px 0 14px}h1 span{color:var(--accent)}.welcome-copy>p{font-size:15px;color:var(--muted);line-height:1.9;margin-bottom:23px}.button,button[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:14px;background:var(--accent);color:#fff;border:0;border-radius:13px;padding:14px 22px;font-weight:500;font-size:14px;transition:background .2s,transform .2s,box-shadow .2s}.button:hover,button[type=submit]:hover{background:#654192;transform:translateY(-2px);box-shadow:0 6px 18px #7754ab22}.hero-cta .icon{width:18px}.hero-note{display:flex;align-items:center;gap:6px;margin-top:17px;font-size:10px;color:#8b8492}.hero-note .icon{width:13px;height:13px}.hero-note>span{margin:0 3px}.mascot-scene{position:relative;min-height:382px;display:flex;align-items:center;justify-content:center;isolation:isolate}.mascot-scene:before{content:"";position:absolute;width:320px;height:310px;background:#e9dff3;border-radius:46% 54% 57% 43% / 50% 42% 58% 50%;z-index:-2;transform:rotate(-9deg)}.mascot{width:330px;height:330px;margin-top:-13px;filter:drop-shadow(0 9px 7px #6850820b);animation:float 5s ease-in-out infinite}.orbit{position:absolute;border:1px solid #dcd1e7;border-radius:50%;z-index:-1}.orbit-one{width:384px;height:265px;transform:rotate(-24deg)}.orbit-two{width:323px;height:357px;transform:rotate(34deg);border-style:dashed;opacity:.55}.floating-note{position:absolute;background:#fffdf9;border:1px solid #ece3eb;border-radius:10px;padding:9px 13px;font-size:11px;color:#8a769b;box-shadow:0 5px 16px #77608a08}.note-top{top:16px;right:12px;transform:rotate(7deg)}.note-top .icon{width:14px;height:14px;margin-right:5px}.scene-spark{position:absolute}.spark-one{top:65px;left:18px;color:#b9936b;font-size:32px}.spark-two{bottom:81px;right:10px;color:#a183c0;font-size:40px}.tiny-star{position:absolute;bottom:14px;left:77px;color:#b6a3c4;font-size:30px}.mascot-caption{position:absolute;bottom:13px;left:50%;transform:translateX(-50%) rotate(-4deg);white-space:nowrap;text-align:center;background:#fffcf5;padding:10px 25px;border:1px solid #e9dfcf;border-radius:13px;box-shadow:3px 4px 0 #e5dacb65}.mascot-caption span{font-size:14px;font-weight:600;color:#685279}.mascot-caption small{display:block;font-size:10px;color:#948797}
.explore{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:15px 0 50px}.explore-item{display:flex;align-items:center;gap:13px;padding:21px 18px;background:#fffdfb;border:1px solid var(--line);border-radius:16px;color:var(--fg);transition:transform .2s,border-color .2s}.explore-item:hover{transform:translateY(-3px);border-color:#b79dce}.explore-item.selected{border-color:#cdb7e2;background:#f4eef9}.tile-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;flex-shrink:0}.peach{background:#f9e9de;color:#c68e62}.lilac{background:#e9ddf6;color:#9572b6}.green{background:#e6eee2;color:#829377}.explore-item strong{display:block;font-size:14px;font-weight:500}.explore-item small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.explore-item>.icon{margin-left:auto;width:16px;height:16px;color:#b4a8bf}.workspace{scroll-margin-top:28px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.section-heading .eyebrow{font-size:9px;letter-spacing:1.6px}.section-heading h2{font-size:24px;font-weight:600;margin:5px 0}.section-heading p{font-size:12px;color:var(--muted);margin:0}.section-sticker{color:#a89aae;font-size:11px;transform:rotate(-4deg)}.tool-layout{display:grid;grid-template-columns:minmax(0,1fr) 282px;gap:24px;align-items:start}.tool-main{min-width:0}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;margin:0 0 18px}h2{font-size:16px;font-weight:600;margin:0 0 15px}.input-card{padding:28px}.form-label{font-size:11px;font-weight:500;letter-spacing:1.3px;color:#9b83b4;display:flex;gap:9px;align-items:center;margin-bottom:16px}.form-label span{font-size:13px;letter-spacing:0;color:#584967}.row+.form-label{margin-top:24px}.row{display:flex;flex-wrap:wrap;gap:17px}label{display:flex;flex-direction:column;gap:7px;color:#686171;font-size:12px;flex:1 1 150px;min-width:0}label.check{flex-direction:row;align-items:center;gap:8px;line-height:1.8}input,select{width:100%;min-width:0;height:46px;background:#faf9fb;color:var(--fg);border:1px solid #e8e4ed;border-radius:9px;padding:9px 11px;font-size:13px}input::placeholder{color:#a69fac}input[type=checkbox]{width:17px;height:17px;flex:0 0 17px;accent-color:var(--accent)}.inline{height:46px}.inline select{width:0}.input-card details{border-top:1px dashed var(--line);margin:24px 0 20px;padding-top:17px}.input-card summary{font-size:12px;color:#82758e;cursor:pointer;margin-bottom:10px}.input-card button[type=submit]{width:100%;margin-top:9px;padding:13px}.input-card button .icon{width:18px;height:18px}.form-error{color:#aa4545;font-size:12px}.guide-card{background:#f0eaf6;border:1px solid #e9e0f1;border-radius:18px;padding:25px 21px}.guide-title{display:flex;align-items:center;gap:9px;color:#736082;font-size:14px;font-weight:500}.guide-title>.icon{width:18px;height:18px}.guide-card ol{list-style:none;margin:23px 0 26px;padding:0}.guide-card li{display:flex;gap:13px;margin-top:20px;align-items:flex-start}.guide-card li>span{display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;border:1px solid #d8c9e8;border-radius:50%;font-size:10px;color:#9a7db4}.guide-card strong{font-size:12px;font-weight:500;color:#665374}.guide-card li p{font-size:10px;color:#94849f;line-height:1.9;margin:4px 0 0}.moo-tip{border-top:1px solid #ded1e9;padding-top:16px;display:flex;align-items:center;gap:4px}.moo-tip img{margin-left:-13px;transform:rotate(-12deg)}.moo-tip p{margin:0;font-size:11px;color:#786286}.moo-tip small{display:block;font-size:10px;color:#97869f;line-height:1.9;margin-top:3px}.closing-note{display:flex;justify-content:center;align-items:center;gap:25px;text-align:center;margin:52px 0 42px;color:#9a879f}.closing-note>.icon{width:18px;height:18px;color:#baa3c6}.closing-note p{font-size:13px;margin:0}.closing-note small{display:block;font-size:10px;color:#a09aa6;margin-top:5px}footer{display:flex;align-items:center;gap:22px;padding:23px 0 28px;border-top:1px solid var(--line);color:#9c96a3;font-size:10px}.footer-brand{color:#897393;font-size:20px;font-weight:600;letter-spacing:-.7px}footer>span:last-child{margin-left:auto}.footer-heart{font-size:17px;color:#b094c1;margin-left:4px}
/* Results use the same quiet, readable surfaces as the input. */
.hero{background:linear-gradient(125deg,#f4edf9,#fffcf7);padding:30px 22px}.hero .glyph{margin:14px 0}.dial{margin:22px 0 12px;font-family:"Outfit",sans-serif}.streak{background:#eee4f6;color:#8c6b9c;font-size:11px;padding:4px 12px;margin-top:18px}.lucky div{background:#fff9;border-color:#e6deeb;padding:13px}.tabs{background:#eeebf2;border-radius:13px;padding:5px;gap:4px}.tabs button{border:0;border-radius:9px;padding:10px;font:inherit;font-size:13px;cursor:pointer;background:transparent}.tabs button.on{background:#fff;color:var(--accent);box-shadow:0 2px 5px #55426812}.wd{gap:5px}.wd .ok{background:#f1f6ef;border-color:#bfd2b9}.wd .no{background:#f7f5f7;opacity:.7}.wd b{font-size:12px}.wd div{font-size:10px}.cand{padding:21px}.cand summary{cursor:pointer}.rank{background:#efe6f7;color:#8862ac;font-size:16px}.score{color:#8964ab;font-size:25px}.cand .when{font-size:14px}.parts{padding:13px;background:#f8f5fa;border-radius:12px}.parts b{color:#796286}.chip{font-size:11px;border-color:color-mix(in srgb,currentColor 25%,transparent);background:#fff8;padding:2px 9px}table{font-size:12px}.cand-body{overflow-x:auto}.cand-body table{min-width:430px}.reasons{font-size:12px}.week div{background:#faf8fc}.week b{margin:5px 0}.hr{font-size:13px;padding:11px 0}.hr.best{color:#588166}.small{font-size:11px}.muted{color:var(--muted)}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(1deg)}}
@media(min-width:1400px){main{max-width:1260px}.welcome{min-height:490px}h1{font-size:47px}.mascot{width:355px;height:355px}}
@media(max-width:1050px){.header-note{display:none}.welcome{gap:10px;padding-left:0;padding-right:0}h1{font-size:36px}.tool-layout{grid-template-columns:minmax(0,1fr) 240px;gap:18px}.explore-item{padding:16px 12px;gap:9px}.explore-item strong{font-size:12px}.tile-icon{width:38px;height:38px}.explore-item>.icon{display:none}.guide-card{padding:22px 16px}.section-sticker{display:none}}
@media(max-width:760px){main{padding:0 22px}.site-header{height:auto;padding:22px 0 14px;flex-wrap:wrap;gap:20px}.brand{font-size:26px}.site-header nav{width:100%;justify-content:space-between;gap:3px}nav a{padding:10px 9px;font-size:11px;gap:6px}.welcome{grid-template-columns:1fr 0.8fr;min-height:365px;gap:0;padding:25px 0}.welcome .eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:30px;letter-spacing:-1px;margin-top:16px}.welcome-copy>p{font-size:12px}.hero-note{font-size:8px;flex-wrap:wrap}.mascot-scene{min-height:290px}.mascot{width:250px;height:250px}.mascot-scene:before{width:230px;height:225px}.orbit-one{width:260px;height:190px}.orbit-two{width:220px;height:270px}.floating-note{font-size:8px;padding:6px 8px}.note-top{right:0;top:9px}.mascot-caption{padding:8px 13px;bottom:0}.mascot-caption span{font-size:11px}.mascot-caption small{font-size:8px}.spark-one{left:-3px;font-size:22px}.spark-two{right:-5px;font-size:25px}.explore{gap:9px;margin:18px 0 34px}.explore-item{flex-direction:column;align-items:flex-start;padding:14px 12px}.explore-item small{font-size:9px}.tool-layout{grid-template-columns:1fr}.guide-card{display:none}.section-heading h2{font-size:22px}.closing-note{margin:32px 0}footer{gap:12px}.input-card{padding:24px}}
@media(max-width:520px){main{padding:0 19px}.site-header{padding-top:21px;gap:19px}.brand small{font-size:9px}.site-header nav a{font-size:10px;padding:10px 7px}.site-header nav .icon{width:15px;height:15px}.welcome{display:flex;flex-direction:column;text-align:center;padding:30px 0 16px}.welcome-copy{width:100%}.welcome .eyebrow{justify-content:center;font-size:8px;letter-spacing:1.2px}h1{font-size:33px;line-height:1.45;margin:16px 0 10px}.welcome-copy>p{font-size:12px;margin-bottom:18px}.hero-cta{font-size:12px;padding:12px 18px}.hero-note{justify-content:center;font-size:9px;margin-top:12px}.mascot-scene{width:100%;max-width:330px;margin-top:17px;min-height:272px}.mascot{width:244px;height:244px}.mascot-scene:before{width:228px;height:220px}.orbit-one{width:280px;height:210px}.orbit-two{width:240px;height:252px}.mascot-caption{bottom:1px}.note-top{right:2px;top:8px}.spark-one{left:22px;top:68px}.spark-two{right:17px;bottom:70px}.tiny-star{left:35px;bottom:4px;font-size:22px}.explore{gap:7px;margin-top:18px;margin-bottom:32px}.explore-item{gap:9px;padding:12px 9px;border-radius:12px}.tile-icon{width:32px;height:32px;border-radius:9px}.tile-icon .icon{width:17px;height:17px}.explore-item strong{font-size:10px;line-height:1.7}.explore-item small{font-size:8px;line-height:1.7;margin-top:4px}.section-heading{margin-bottom:17px}.section-heading h2{font-size:20px}.section-heading p{font-size:11px}.section-heading .eyebrow{font-size:8px}.card{padding:19px;border-radius:15px}.row{gap:15px}.row label{flex-basis:125px}.input-card>.row:first-of-type label:first-child{flex-basis:160px}.input-card .row .inline{width:100%}.form-label{font-size:10px}.form-label span{font-size:12px}.input-card button[type=submit]{font-size:13px}.closing-note{gap:12px}.closing-note p{font-size:10px}.closing-note small{font-size:8px}.closing-note>.icon{width:13px;flex-shrink:0}footer{flex-wrap:wrap;gap:7px 14px;padding:19px 0}.footer-brand{font-size:19px}footer>span:last-child{margin-left:0;width:100%;font-size:9px}.cand summary{gap:8px;grid-template-columns:30px minmax(0,1fr) auto}.rank{width:30px;height:30px;font-size:13px}.cand .when{font-size:12px}.score{font-size:23px}.wd{grid-template-columns:repeat(4,1fr)}.parts{grid-template-columns:repeat(2,1fr)}.pillar .ch{font-size:1.7rem}.pillars{gap:5px}.pillar{padding:8px 3px}.pillar .sub{font-size:9px}.hero .lucky{font-size:12px}.week{gap:3px}.week div{font-size:9px}.week b{font-size:15px}.hr{font-size:11px}.bar{grid-template-columns:48px 1fr 80px;font-size:12px}.bar .val{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:360px){.orbit-one{width:235px;height:180px}.orbit-two{width:210px;height:225px}h1{font-size:29px}.site-header nav a{font-size:9px;gap:4px}.explore-item{padding:11px 7px}}
.welcome{overflow:clip}
.skip-link{visibility:hidden}.skip-link:focus{visibility:visible}