@charset "UTF-8";
:root{--ink:#172e39;--muted:#60716f;--green:#163c35;--mint:#e4f3eb;--line:#dce5e1;--paper:#f9faf7;--accent:#b4f3ce;--radius:24px;font-family:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;line-height:1.65}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,summary{touch-action:manipulation}button,a{transition:background .18s,color .18s,box-shadow .18s}a{color:var(--green);text-underline-offset:4px}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #2b7c69;outline-offset:4px}input:focus-visible,textarea:focus-visible{outline-offset:1px}button{border:0}fieldset{margin:0;padding:0;border:0;min-width:0}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.35;letter-spacing:-.025em}h2{font-size:25px}h3{font-size:19px}p{color:var(--muted)}[hidden]{display:none!important}.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}.skip-link{position:absolute;left:12px;top:-100px;padding:10px;background:white;z-index:99}.skip-link:focus{top:10px}
.site-header{max-width:1240px;margin:auto;padding:22px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:25px;font-weight:800;letter-spacing:-1px;line-height:1.1;flex-shrink:0}.brand small{display:block;font-size:10px;letter-spacing:2px;font-weight:500;margin-top:6px}.brand-mark{width:36px;height:36px;background:var(--green);border-radius:11px;display:grid;grid-template-columns:repeat(2,7px);grid-template-rows:repeat(2,7px);gap:4px;align-content:center;justify-content:center;transform:rotate(-5deg)}.brand-mark i{background:var(--accent);border-radius:2px}.brand-mark i:last-child{border-radius:50%;background:#ffd6b5}.site-header nav{display:flex;gap:30px;font-size:14px}.site-header nav a{text-decoration:none;color:var(--muted);padding:8px 0}.site-header nav a[aria-current]{color:var(--green);font-weight:700;box-shadow:0 2px var(--green)}.header-note{font-size:12px;color:var(--muted)}main{max-width:1120px;padding:0 40px;margin:auto}.hero{text-align:center;padding:46px 0 0}.hero-kicker{display:inline-flex;gap:8px;align-items:center;font-size:12px;letter-spacing:1px;color:#44665c}.hero-kicker>span{width:6px;height:6px;background:#44886c;border-radius:50%}.hero h1{font-size:44px;font-weight:800;margin:12px auto;position:relative;display:block;width:fit-content}.hero-spark{font-size:30px;position:absolute;right:-43px;top:-6px;color:#ed936e}.hero p{font-size:16px;line-height:1.8}.hero p>span{font-size:13px}.tool-tabs{display:flex;justify-content:center;gap:8px;margin:24px 0}.tool-tabs a{font-size:13px;padding:8px 20px;border-radius:30px;text-decoration:none;color:var(--muted);border:1px solid transparent}.tool-tabs a[aria-current]{color:var(--green);background:#e4eee7;border-color:#d3e3d9;font-weight:700}.tool-tabs a:hover{background:#eaf0e9}
.calculator{display:grid;grid-template-columns:1fr 1.04fr;background:#fff;border:1px solid #d6e2da;border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 60px -35px #54736350}#age-form{padding:30px 34px}.panel-head,.basis-head{display:flex;gap:10px;align-items:center}.panel-head h2,.basis-head h2{font-size:17px;letter-spacing:0}.step{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#eaf0ed;font-size:10px;font-weight:700;color:#426658}.text-button{color:var(--muted);font-size:12px;background:transparent;padding:6px 2px;margin-left:auto;text-decoration:underline;text-underline-offset:4px}.calendar-switch{display:flex;border-bottom:1px solid var(--line);margin:23px 0 20px;gap:22px}.calendar-switch label{position:relative;cursor:pointer}.calendar-switch input{position:absolute;opacity:0}.calendar-switch span{display:block;padding:0 4px 10px;color:var(--muted);font-size:13px}.calendar-switch input:checked+span{color:var(--green);font-weight:700;box-shadow:0 2px var(--green)}.calendar-switch input:focus-visible+span{outline:3px solid #2b7c69}.date-fields{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:12px}label{font-size:12px;color:#425951;font-weight:600}.date-fields label,#custom-date label{display:block;margin-bottom:6px}input[type=text],input[type=date],textarea{width:100%;max-width:100%;min-width:0;border:1px solid #cfdcd6;background:white;border-radius:10px;padding:11px 12px;color:var(--ink);font-size:16px;line-height:1.4}input::placeholder{color:#91a09b;font-size:14px}input[aria-invalid=true]{border-color:#b2604b}.hint{font-size:11px;margin-top:10px;line-height:1.6;min-height:18px}.basis-head{margin:26px 0 14px}.basis-options{display:grid;grid-template-columns:1fr 1.25fr;gap:10px}.basis-options label{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:11px 10px;cursor:pointer}.basis-options label:has(input:checked){border-color:#6caa90;background:#f0f8f3}.basis-options input{accent-color:var(--green);margin:5px 0 0;flex-shrink:0}.basis-options strong{font-size:12px;display:block}.basis-options small{display:block;color:var(--muted);font-size:10px;font-weight:400;margin-top:3px}#custom-date{margin-top:13px}input[type=date]{min-height:46px;appearance:none}.error{color:#a74332;font-size:12px;margin:12px 0;line-height:1.6}.error:empty{margin:10px 0}.primary{display:flex;align-items:center;justify-content:center;gap:16px;background:var(--green);border:1px solid var(--green);color:#fff;font-weight:600;border-radius:12px;padding:13px 20px;width:100%;font-size:14px;text-decoration:none}.primary:hover{background:#245d4e;box-shadow:0 3px 12px #163c3520}.primary>span{margin-left:auto;font-size:18px}.primary.inline{display:inline-flex;width:auto;margin-top:28px;gap:25px}.example{display:block;background:transparent;font-size:11px;color:var(--muted);margin:14px auto 0;padding:6px}.example:hover{color:var(--green)}
.result-panel{background:var(--mint);padding:28px 34px;display:flex;flex-direction:column;min-width:0;position:relative}.result-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.eyebrow{font-size:10px;letter-spacing:1.8px;color:#5b7c6b;font-weight:700}.live-dot{font-size:10px;color:#486c59;display:flex;align-items:center;gap:5px;white-space:nowrap}.live-dot:before{content:'';width:5px;height:5px;border-radius:50%;background:#4c9072}#empty-result{text-align:center;padding:20px 0 16px;flex:1}.calendar-art{width:143px;height:143px;border-radius:17px;background:#fffef9;box-shadow:7px 8px 0 #a4cbb348;transform:rotate(-6deg);position:relative;margin:16px auto 27px;border:1px solid #b7cec0}.calendar-pins{position:absolute;top:-8px;left:28px;right:28px;display:flex;justify-content:space-between}.calendar-pins i{height:18px;width:6px;background:#355e4a;border-radius:4px}.calendar-line{height:28px;border-bottom:1px solid #e5ebe0;background:#f8efdf;border-radius:17px 17px 0 0}.calendar-art>span{display:block;font-size:15px;color:#3d6654;line-height:1.9;padding:15px 8px}.calendar-art b{font-size:18px}.art-star{position:absolute;right:-25px;bottom:0;font-size:54px;color:#e99e79;line-height:1;transform:rotate(15deg)}.art-dot{position:absolute;left:-28px;top:45px;background:#a2cbb5;border-radius:50%;width:14px;height:14px}#empty-result h2{font-size:19px;margin-bottom:8px}#empty-result p{font-size:12px;max-width:300px;margin:auto}.empty-tags{display:flex;justify-content:center;gap:6px;margin:16px 0 0}.empty-tags span{border:1px solid #c7dfcf;padding:3px 8px;border-radius:20px;font-size:10px;color:#5c7869}.copy-area{margin-top:auto;padding-top:18px;text-align:center}.copy-button{width:100%;border:1px solid #a9c8b7;border-radius:10px;background:#ffffffb8;color:var(--green);font-size:13px;padding:11px 16px;font-weight:600}.copy-button:hover:enabled{background:white}.copy-button:disabled{color:#6b8376;background:#e9f3ec;border-color:#c5dccc}.copy-hint{display:block;font-size:10px;color:#587460;margin-top:8px}.copy-status{font-size:12px;color:var(--green);margin-top:6px}.copy-status:empty{margin:0}#copy-fallback{text-align:left;margin-top:12px}textarea{font-size:13px;margin-top:5px;resize:vertical}.result-date{font-size:12px;display:inline-block;border:1px solid #b9d9c4;border-radius:20px;padding:3px 10px;margin-top:18px;color:#38644e}.result-caption{font-size:12px;color:#446c56;margin-top:16px}.big-age{display:flex;align-items:baseline;gap:12px;line-height:1.15;margin:2px 0 6px}.big-age strong{font-size:76px;letter-spacing:-4px;font-weight:700;color:#194b39;font-variant-numeric:tabular-nums}.big-age>span{font-size:20px;color:#446c56}.age-detail{font-size:17px;color:#234e3c;font-weight:600}.birth-summary{font-size:10px;margin-top:10px;color:#567262}.result-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #c1dac9;border-bottom:1px solid #c1dac9;padding:14px 0;margin-top:18px;gap:12px}.result-stats>div>span{display:block;font-size:11px;color:#5b7666}.result-stats strong{font-size:21px;color:#234e3c;font-variant-numeric:tabular-nums}.result-stats strong small{font-size:11px;font-weight:400}.birthday{display:flex;gap:12px;align-items:center;margin-top:16px}.birthday-icon{font-size:32px;color:#7ca98b;line-height:1}.birthday>div>span{font-size:10px;display:block;color:#4e6d5b}.birthday strong{display:block;color:#214e3b;font-size:15px}.birthday small{font-size:10px;display:block;color:#5b7666}.result-note{font-size:11px;color:#4a6e59;margin-top:8px}.trust-line{display:flex;justify-content:center;gap:28px;font-size:11px;color:#6a7c70;padding:22px 0 28px}
.rules{border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px}.rules summary{display:flex;justify-content:space-between;padding:17px 0;color:var(--ink);font-weight:600;cursor:pointer;list-style:none}.rules summary::-webkit-details-marker{display:none}.rules summary>span{font-size:18px;color:var(--muted)}.rules[open] summary>span{transform:rotate(45deg)}.rules>div{padding:0 0 20px;max-width:860px}.rules p{margin-bottom:10px}.use-cases{padding:62px 0 50px}.section-heading{text-align:center}.section-heading h2{margin:10px 0}.section-heading>p:last-child{font-size:13px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}.cards article{padding:24px;border:1px solid var(--line);border-radius:17px;background:#fff}.card-icon{display:grid;place-items:center;width:38px;height:38px;font-size:13px;font-weight:700;border-radius:12px;margin-bottom:18px}.blue{background:#e8edf9;color:#58749a}.peach{background:#f9ecdf;color:#95684d}.mint{background:#e5f0e7;color:#49765c}.cards h3{font-size:16px;margin-bottom:10px}.cards p{font-size:12px;line-height:1.9}.faq-section{display:grid;grid-template-columns:1fr 1.65fr;gap:60px;padding:18px 0 58px}.faq-section h2{margin:10px 0 13px}.faq-section>div>p:last-child{font-size:13px}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{font-size:14px;font-weight:600;cursor:pointer;padding:17px 26px 17px 0;list-style:none;position:relative}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'＋';position:absolute;right:0;font-size:17px;color:#637c6e;top:15px}.faq-list details[open] summary:after{content:'−'}.faq-list p{font-size:13px;padding-bottom:18px;line-height:1.9}.bottom-callout{background:#edf0e9;border-radius:18px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:64px}.bottom-callout h2{font-size:21px}.bottom-callout p{font-size:12px;margin-top:7px}.outline-link{border:1px solid #acbeb2;padding:10px 18px;border-radius:9px;text-decoration:none;white-space:nowrap;font-size:13px}.outline-link:hover{background:white}footer{border-top:1px solid var(--line);max-width:1240px;margin:0 auto;padding:32px 40px;display:flex;flex-wrap:wrap;align-items:center;gap:28px}footer .brand{font-size:21px}footer .brand-mark{width:31px;height:31px}footer>p{font-size:12px}footer nav{margin-left:auto;display:flex;gap:25px;font-size:12px}footer nav a{text-decoration:none;color:var(--muted)}footer>small{width:100%;font-size:10px;color:#6f8076}
.article{max-width:780px;margin:0 auto;padding:32px 0 70px}.breadcrumb{display:flex;gap:12px;font-size:12px;color:var(--muted);margin-bottom:38px}.breadcrumb a{text-decoration:none}.article h1{font-size:36px;margin:12px 0 14px}.lead{font-size:18px!important;margin-bottom:30px!important}.article h2{margin:35px 0 14px;font-size:23px}.article h3{margin:28px 0 10px}.article p{font-size:15px;margin:12px 0;line-height:1.9}.formula-hero{background:var(--mint);border-radius:18px;padding:25px 30px;display:flex;gap:35px;align-items:center;margin:28px 0}.formula-hero>span{font-size:15px}.formula-hero strong{font-size:25px;color:var(--green)}.formula-hero em{font-style:normal;color:#6c8b65;font-size:20px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}table{width:100%;border-collapse:collapse;font-size:13px;text-align:left}td,th{padding:14px 16px;border-bottom:1px solid var(--line);white-space:nowrap}th{background:#edf2ec;font-weight:600}tr:last-child td{border:0}.code-block{border:1px solid #d6dfd8;border-radius:12px;background:#f0f3ed;margin:20px 0;padding:16px;min-width:0}.code-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}.small-button{font-size:12px;background:white;color:var(--green);border:1px solid #c5d3c9;border-radius:7px;padding:6px 10px;flex-shrink:0}pre{margin:16px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.8;color:#214f3d}code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}.code-status:empty{display:none}.source-note{font-size:12px;color:var(--muted);padding:18px 0}.notice{background:#fff2df;border:1px solid #ead6b7;border-radius:12px;padding:20px;margin:28px 0}.notice p{font-size:13px;margin-bottom:0}.article .rules{margin-top:30px}.article .rules p{font-size:13px}
@media(min-width:1400px){.hero{padding-top:54px}.hero h1{font-size:48px}}
@media(max-width:850px){.header-note{display:none}.site-header{padding:20px 28px}.site-header nav{gap:22px}main{padding:0 28px}#age-form,.result-panel{padding:26px 24px}.cards{gap:14px}.cards article{padding:20px}.faq-section{gap:32px}.birth-summary{line-height:1.8}.hero h1{font-size:40px}.trust-line{gap:14px;font-size:10px}}
@media(max-width:680px){.site-header{padding:17px 20px;gap:16px;flex-wrap:wrap}.brand{font-size:23px}.brand small{font-size:9px}.site-header nav{font-size:12px;gap:16px}.site-header nav a{padding:6px 0}.brand-mark{width:32px;height:32px}.hero{padding-top:30px}.hero h1{font-size:34px}.hero-spark{font-size:24px;right:-28px}.hero p{font-size:14px}.hero-kicker{font-size:10px}main{padding:0 20px}.tool-tabs{gap:4px;margin:22px 0}.tool-tabs a{padding:8px 13px;font-size:12px}.calculator{grid-template-columns:1fr;border-radius:20px}#age-form,.result-panel{padding:25px}.result-panel{border-top:1px solid #caddcf}.result-panel #empty-result{padding:12px 0 6px}.calendar-art{width:116px;height:116px;margin:18px auto 23px}.calendar-art>span{font-size:12px;padding:10px 5px}.calendar-art b{font-size:15px}.calendar-line{height:24px}.art-star{font-size:42px}.trust-line{flex-wrap:wrap;gap:7px 16px;padding:20px 0}.use-cases{padding:42px 0 35px}.cards{grid-template-columns:1fr;gap:12px;margin-top:22px}.cards article{padding:20px;display:grid;grid-template-columns:38px 1fr;column-gap:15px}.card-icon{grid-row:1/3;margin:0}.cards h3{margin-bottom:5px}.cards p{grid-column:2}.section-heading h2{font-size:24px}.faq-section{grid-template-columns:1fr;gap:14px;padding-bottom:35px}.faq-section>div>p:last-child br{display:none}.faq-section h2{font-size:24px}.bottom-callout{padding:24px;display:block;margin-bottom:40px}.bottom-callout .outline-link{display:inline-block;margin-top:18px}footer{padding:28px 20px;gap:20px}footer>p{margin-left:auto}footer nav{margin-left:0;width:100%;gap:25px}footer>small{font-size:9px}.article{padding-top:22px}.article h1{font-size:30px}.article h2{font-size:21px}.article p{font-size:14px}.lead{font-size:16px!important}.formula-hero{display:block;padding:22px}.formula-hero strong{display:block;font-size:22px;margin-top:8px}.formula-hero em{font-size:18px}.breadcrumb{margin-bottom:28px}}
@media(max-width:390px){.site-header{padding:15px 16px}.site-header nav{width:100%;justify-content:space-between;gap:12px}.hero h1{font-size:30px}.hero-spark{right:-24px;font-size:21px}.hero p{font-size:12px}.hero p>span{font-size:11px}main{padding:0 16px}#age-form,.result-panel{padding:22px 18px}.date-fields{gap:8px}.date-fields input{padding:11px 9px}.basis-options{gap:8px}.basis-options label{padding:10px 8px;gap:6px}.basis-options small{font-size:9px}.tool-tabs a{padding:7px 10px;font-size:11px}.hero-kicker{letter-spacing:.4px}.big-age strong{font-size:65px}.result-stats strong{font-size:18px}.age-detail{font-size:15px}.empty-tags{gap:4px}.empty-tags span{padding:3px 6px;font-size:9px}.section-heading h2{font-size:22px}.code-bar{align-items:flex-start}.code-bar>span{max-width:150px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
