:root{--paper:#f7f7f0;--ink:#252923;--muted:#64685d;--line:#d7d9ce;--lime:#d7ee77;--green:#3b563e}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"PingFang TC","Microsoft JhengHei",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,summary:focus-visible{outline:3px solid #567529;outline-offset:6px}.shell{max-width:1320px;margin:auto;padding:0 64px}header{height:114px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:31px;font-weight:800;letter-spacing:-1.8px;display:inline-flex;align-items:center}.brand-dot{color:#658348}.brand-symbol{font-size:28px;margin-left:17px;font-weight:400}nav{display:flex;align-items:center;gap:36px;font-size:14px}nav a:hover{color:#53732c}.nav-contact{border:1px solid var(--ink);padding:11px 17px;border-radius:4px}.nav-contact span{padding-left:20px}.hero{display:grid;grid-template-columns:1.16fr 1fr;align-items:center;gap:35px;padding:74px 0 65px}.eyebrow{font-size:11px;letter-spacing:1.7px;font-weight:600;margin:0 0 26px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5d7c43;margin-right:8px}h1{font-size:clamp(35px,4.25vw,57px);letter-spacing:-2px;line-height:1.4;margin:0 0 23px;font-weight:800}.marked{position:relative;z-index:0;white-space:nowrap}.marked:after{content:"";position:absolute;left:0;right:0;bottom:4px;height:20px;background:var(--lime);z-index:-1;transform:rotate(-3deg)}.period{color:#668148}.intro{font-size:15px;line-height:1.95;color:var(--muted)}.button{margin-top:19px;display:inline-flex;gap:34px;align-items:center;background:var(--ink);color:white;padding:17px 23px;border-radius:4px;font-size:14px;transition:background .2s,transform .2s}.button:hover{background:var(--green);transform:translateY(-2px)}.button span{font-size:22px}.hero-caption{font-size:11px;letter-spacing:1px;color:var(--muted);margin-top:18px}.lab-art{height:403px;position:relative;overflow:hidden;background:#eceee4;border:1px solid #d9ddce;border-radius:6px}.art-grid{position:absolute;inset:0;background-image:linear-gradient(#d9ddce80 1px,transparent 1px),linear-gradient(90deg,#d9ddce80 1px,transparent 1px);background-size:29px 29px;mask-image:linear-gradient(130deg,#000,transparent)}.art-label,.art-bottom{position:absolute;font-family:monospace;font-size:10px;letter-spacing:1px;left:23px;top:23px;color:#5c6653}.art-cross{position:absolute;right:23px;top:17px;font-size:25px;color:#738065}.art-bottom{top:auto;bottom:23px}.orbit{position:absolute;border:1px solid #b6c0a3;border-radius:50%;width:330px;height:230px;left:58px;top:85px;transform:rotate(-35deg)}.orbit-two{transform:rotate(36deg);width:290px;left:83px}.art-block{position:absolute;border:1px solid var(--ink);border-radius:13px;width:191px;height:200px;top:99px;left:calc(50% - 96px);transform:rotate(-10deg)}.block-back{background:var(--green);transform:translate(22px,-17px) rotate(9deg)}.block-front{background:var(--lime);padding:27px;box-shadow:7px 8px 0 #2735221a}.block-front>span{font-size:39px;letter-spacing:-2px;font-weight:700;line-height:1.04}.tiny-dot{color:#5c7740}.block-front b{position:absolute;bottom:13px;right:22px;font-size:37px;font-weight:400}.idea-chip{position:absolute;bottom:64px;left:20px;background:var(--paper);border:1px solid #bfc5b5;border-radius:5px;padding:11px 15px;transform:rotate(-7deg);font-family:monospace;font-size:12px}.code-chip{position:absolute;top:75px;right:21px;background:#f7f7f0;border:1px solid #bfc5b5;border-radius:50%;width:63px;height:63px;display:grid;place-items:center;font-size:21px;transform:rotate(13deg)}.topics{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;font-size:12px;color:var(--muted)}.topics>div{display:flex;align-items:center;gap:22px;font-size:10px;letter-spacing:1px}.topics i{font-style:normal;color:#a0a58f}.section{padding:77px 0}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:34px}h2{font-size:31px;line-height:1.5;letter-spacing:-1px;margin:0} .section .eyebrow{margin-bottom:12px}.section-heading>p{font-size:13px;line-height:1.8;color:var(--muted);margin:0}.demo-note{font-size:11px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.project-art{height:275px;position:relative;overflow:hidden;display:grid;place-items:center;border-radius:5px}.learning{background:#e6eada}.workflow{background:#e7e5df}.mock-window{background:#f9faf4;border:1px solid #acb59e;border-radius:7px;width:72%;box-shadow:12px 15px 0 #bec8ae70;transform:rotate(-5deg)}.window-top{border-bottom:1px solid #d7dfcc;padding:12px;display:flex;justify-content:space-between;font:7px monospace;letter-spacing:1px;color:#69795a}.learning-body{display:flex;padding:22px;gap:18px;align-items:center}.play{background:#cad9ae;border-radius:5px;display:grid;place-items:center;width:88px;height:76px;color:#4d6540}.mock-lines{flex:1;display:grid;gap:9px}.mock-lines b,.mock-lines i{height:5px;background:#d9dfcf;display:block}.mock-lines b{width:70%;background:#7b8d64}.mock-lines em{font:8px monospace;color:#52723d;margin-top:6px}.timeline{margin:0 22px 20px;height:5px;background:#e4e8dd}.timeline span{display:block;width:65%;height:100%;background:#91a872}.art-number{position:absolute;left:17px;bottom:15px;font:10px monospace;color:#6a725f}.flow-node{position:absolute;background:#f9f8f2;border:1px solid #b7b8aa;border-radius:6px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 19px;font:10px monospace;z-index:1;box-shadow:5px 6px 0 #383d2d0c}.flow-node b{font:12px Arial,sans-serif}.node-a{top:36px;left:18%;transform:rotate(-6deg)}.node-b{top:111px;left:32%;background:#d7ee77;transform:rotate(3deg)}.node-b>span{font-size:22px}.node-c{top:191px;right:14%;transform:rotate(-3deg)}.flow-line{height:150px;width:145px;border:1px dashed #8f9982;transform:rotate(-25deg);position:absolute;top:64px;left:32%}.project-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;margin-top:24px;color:var(--muted)}.project-meta span:last-child{letter-spacing:0;border:1px solid #c9cebd;padding:3px 7px;border-radius:3px;font-size:10px}h3{font-size:21px;letter-spacing:-.5px;margin:13px 0 10px}.project>p{font-size:14px;line-height:1.9;color:var(--muted);margin:0 0 20px}.project details{border-top:1px solid var(--line);font-size:12px}.project summary{display:flex;justify-content:space-between;padding:15px 0;cursor:pointer;list-style:none}.project summary::-webkit-details-marker{display:none}.project details[open] summary span{transform:rotate(45deg)}details p{line-height:1.85;color:var(--muted);font-size:13px}.about{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:65px}.about-copy>p{font-size:15px;color:var(--muted);line-height:2;margin:0 0 17px}.ai-note{display:flex;gap:17px;margin-top:25px;padding-top:24px;border-top:1px solid var(--line)}.ai-note>span{font-size:32px;color:#668148}.ai-note p{font-size:12px;line-height:1.9;margin:0;color:var(--muted)}.ai-note strong{font-weight:500;color:var(--ink)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.service-grid article{padding:25px 0 0;border-top:1px solid #bfc5b4}.service-icon{height:37px;display:block;font:27px monospace;color:#556d39}.service-grid h3{font-size:18px}.service-grid p{font-size:14px;line-height:1.9;color:var(--muted);max-width:290px}.service-tag{font:9px monospace;letter-spacing:1px;display:block;margin-top:25px;color:var(--muted)}.contact{background:#e9eddd;border:1px solid #dce1ce;padding:48px;display:flex;justify-content:space-between;align-items:center;gap:25px;border-radius:5px;margin-bottom:56px}.contact .eyebrow{margin-bottom:15px}.contact h2{font-size:38px}.contact h2 span{color:#6e884d}.contact p{font-size:13px;color:var(--muted);line-height:1.8}.contact-label{display:flex;align-items:center;gap:35px;border-bottom:1px solid #929d7b;padding-bottom:14px;font-size:18px}.contact-label>span{font-size:28px}.contact-action p{font-size:11px}footer{display:flex;align-items:center;gap:27px;border-top:1px solid var(--line);padding:28px 0;font-size:10px;color:var(--muted)}footer .brand{font-size:25px;color:var(--ink)}footer p{flex:1}footer>a:not(.brand){text-decoration:underline;text-underline-offset:4px}.privacy{font-size:11px;color:var(--muted);padding-bottom:30px}.privacy summary{cursor:pointer}.privacy p{max-width:850px;font-size:12px}.skip{position:fixed;top:-100px;left:12px;padding:12px;background:var(--ink);color:white;z-index:5}.skip:focus{top:12px}@media(min-width:1400px){.hero{gap:70px}}@media(max-width:1000px){.shell{padding:0 32px}.hero{gap:22px}.lab-art{height:360px}h1{font-size:39px}.topics>div{gap:12px;font-size:9px}.about{gap:35px}.contact{padding:32px}}@media(max-width:700px){.shell{padding:0 22px}header{height:86px}.brand{font-size:27px}.brand-symbol{display:none}nav{gap:17px;font-size:12px}.nav-contact{padding:8px 10px}.nav-contact span{display:none}.hero{grid-template-columns:1fr;padding:45px 0 35px;gap:30px}h1{font-size:42px}.eyebrow{font-size:9px}.intro{font-size:14px}.lab-art{height:345px}.hero-caption{margin-bottom:0}.topics{flex-direction:column;gap:14px}.topics>div{justify-content:space-between;gap:7px;font-size:8px;letter-spacing:.5px}.section{padding:49px 0}.section-heading{display:block;margin-bottom:26px}h2{font-size:27px}.section-heading>p{margin-top:17px}.project-grid{grid-template-columns:1fr;gap:35px}.project-art{height:260px}.project-meta{margin-top:18px}.about{grid-template-columns:1fr;gap:24px}.about-copy>p{font-size:14px}.service-grid{grid-template-columns:1fr;gap:27px}.service-grid article{position:relative;padding-left:53px}.service-icon{position:absolute;left:0;top:36px}.service-grid p{max-width:none}.service-tag{margin-top:18px}.contact{padding:28px 23px;display:block;margin-bottom:35px}.contact h2{font-size:33px}.contact-action{margin-top:35px}.contact-label{font-size:16px;justify-content:space-between}footer{flex-wrap:wrap;gap:16px;justify-content:space-between}footer p{flex:auto;text-align:right}footer span{margin-left:auto}.privacy{padding-top:5px}}@media(max-width:360px){h1{font-size:36px}nav{gap:10px}.shell{padding:0 17px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition: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}
.project-link{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:17px 0;font-size:13px;font-weight:600}.project-link:hover{color:var(--green)}.project-link>span[aria-hidden]{font-size:22px}.lunch-art{background:#e4eadd}.lunch-sheet{width:76%;padding:23px;background:#f9faf4;border:1px solid #b8c3a8;border-radius:7px;transform:rotate(-4deg);box-shadow:10px 12px 0 #c2cfb5}.lunch-sheet>span{font-size:20px;font-weight:700}.lunch-tabs{font-size:9px;color:#68795b;border-bottom:1px solid #d7dfcc;padding:12px 0}.lunch-tiles{display:flex;gap:9px;margin:15px 0}.lunch-tiles i{flex:1;text-align:center;font-style:normal;font-size:12px;background:#e4ebd7;padding:15px 4px;border-radius:4px}.milk-art{background:#ece7d9}.milk-card{width:185px;padding:23px;background:#faf9f2;border:1px solid #bfb8a2;border-radius:12px;transform:rotate(7deg);box-shadow:10px 10px 0 #d5cfba;display:grid;gap:13px;text-align:center}.milk-card>span{font-size:9px;color:#786f54}.milk-card strong{font-size:25px}.barcode-art{height:49px;background:repeating-linear-gradient(90deg,#4c513b 0 3px,transparent 3px 7px,#4c513b 7px 9px,transparent 9px 14px);margin:0 4px}.milk-card small{font-size:9px;color:#786f54}.milk-orbit{position:absolute;left:16%;top:40px;font-size:42px;color:#8b956b}.study-feature{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:48px 0 0;border:1px solid #d5ddc7;border-radius:6px;background:#edf1e3;overflow:hidden}.study-copy{padding:36px}.study-copy h3{font-size:32px;margin:10px 0 20px}.study-copy h3>span{display:block;font-size:13px;font-weight:400;margin-top:7px;color:var(--muted)}.study-copy .study-lead{font-size:25px;line-height:1.5;color:var(--ink);font-weight:600}.study-copy>p:not(.eyebrow):not(.study-lead){font-size:14px;line-height:1.9;color:var(--muted)}.study-feature .learning{height:100%;min-height:330px;border-radius:0}.project-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.project-tags>span{font-size:11px;padding:6px 10px;background:#f9faf4;border:1px solid #d6dfc8;border-radius:3px}.display-only{display:block;font-size:11px;color:#5c6653;line-height:1.8}.collection-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:48px 0 24px}.collection-heading h3{margin:0;font-size:20px}.collection-heading p{font-size:12px;color:var(--muted);margin:0}.showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.showcase-card{padding:25px 0 15px;border-top:1px solid #c9cebd}.showcase-symbol{display:block;font:24px monospace;color:#607544;height:45px}.showcase-card .eyebrow{font-size:9px;letter-spacing:1px;margin:10px 0 15px}.showcase-card h3{font-size:19px;line-height:1.5}.showcase-card>p:not(.eyebrow){font-size:13px;line-height:1.9;color:var(--muted);margin-bottom:20px}.showcase-card .display-only{font-size:10px}@media(max-width:1000px){.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.study-copy{padding:28px}.study-feature{gap:10px}}@media(max-width:700px){.study-feature{grid-template-columns:1fr;gap:0;margin-top:30px}.study-copy{padding:26px}.study-feature .learning{min-height:240px}.collection-heading{display:block;margin-top:36px}.collection-heading p{margin-top:12px;line-height:1.8}.showcase-grid{grid-template-columns:1fr;gap:12px}.showcase-card{padding:22px 0}.lunch-sheet{padding:20px}.milk-orbit{left:11%}.project-link{font-size:12px}.project-grid.featured-projects{gap:28px}}

/* 每個作品使用本機 CSS 示意圖，不載入實際使用資料。 */
.showcase-card{border-top:0;padding-top:0;min-width:0}.showcase-card .project-art{height:225px;margin-bottom:24px}.showcase-grid{row-gap:36px}.showcase-card .mock-window{width:78%}.showcase-card .learning-body{padding:16px;gap:12px}.showcase-card .play{width:60px;height:60px;flex-shrink:0}.showcase-card .window-top{letter-spacing:0}.showcase-card .art-number{font-size:9px;bottom:12px}.invoice-art{background:#ebe5da}.chart-panel{width:68%;padding:18px;background:#faf9f4;border:1px solid #c3bba7;border-radius:7px;transform:rotate(-5deg)}.chart-panel>span{font-size:12px;color:#665f4d}.chart-bars{height:82px;display:flex;align-items:flex-end;gap:10px;padding:14px 5px 0;border-bottom:1px solid #c8cbb8}.chart-bars i{background:#98ad79;flex:1;height:50%;border-radius:3px 3px 0 0}.chart-bars i:nth-child(2){height:85%}.chart-bars i:nth-child(3){height:65%}.chart-bars i:nth-child(4){height:95%;background:#566d3c}.chart-bars i:nth-child(5){height:75%}.chart-key{font-size:8px;margin-top:12px;color:#77705d}.receipt-art{position:absolute;right:8%;bottom:39px;width:82px;padding:14px 10px;background:#f8f6ee;border:1px solid #b9b4a0;transform:rotate(9deg);display:grid;gap:9px;box-shadow:4px 5px 0 #bbb39e50}.receipt-art b,.receipt-art span{font-size:8px;font-weight:400;color:#6b6856}.receipt-art i{height:3px;background:#d0d2bf}.pr-art{background:#dde5df}.code-panel{width:81%;background:#344638;color:#e5ecd9;padding:16px;border-radius:6px;transform:rotate(-3deg);box-shadow:8px 9px 0 #c2cebf;font:9px monospace}.code-title{padding-bottom:14px;color:#b6c5a4;border-bottom:1px solid #62725d}.code-title span{float:right}.code-line{color:#d7ee77;margin-top:14px}.code-muted{color:#c5c9bb;margin-top:10px}.generate-chip{background:#d7ee77;color:#344638;padding:9px 12px;margin-top:16px;border-radius:3px;text-align:center}.community-art{background:#e4e9df}.city-art{display:flex;align-items:flex-end;gap:13px;height:130px;width:65%;transform:translateY(-12px)}.city-art i{flex:1;height:80%;border:1px solid #9ba98a;border-radius:4px 4px 0 0;background-color:#c7d2b9;background-image:repeating-linear-gradient(0deg,transparent 0 19px,#e6eddf 19px 24px)}.city-art i:nth-child(2){height:100%;background-color:#acbd9a}.city-art i:nth-child(3){height:66%}.notice-art{position:absolute;bottom:41px;left:12%;right:12%;display:flex;align-items:center;gap:13px;padding:14px;background:#fafbf5;border:1px solid #aebaa2;border-radius:6px;transform:rotate(-4deg);box-shadow:6px 6px 0 #bbc9b580}.notice-art>span{font-size:27px;color:#648248}.notice-art b{font-size:12px}.notice-art small{display:block;font-size:9px;margin-top:6px;color:#67765d}.translation-art{background:#e7e3ec}.chat-bubble{position:absolute;width:55%;border:1px solid #afa8b8;border-radius:12px;padding:16px 20px;box-shadow:5px 6px 0 #bfb4ca40}.chat-bubble small{font-size:8px;letter-spacing:1px;display:block;margin-bottom:10px;color:#706578}.chat-bubble b{font-size:22px}.bubble-vn{background:#fbf9fc;top:29px;left:10%;transform:rotate(-5deg);border-bottom-left-radius:0}.bubble-zh{background:#e0e9c9;right:10%;bottom:35px;transform:rotate(4deg);border-bottom-right-radius:0}.translate-arrow{position:absolute;top:98px;right:13%;font-size:29px;color:#7d6e8c}.media-art{background:#eee8d7}.media-shelf{width:82%;padding:20px 14px;background:#fbfaf3;border:1px solid #c7bda2;border-radius:10px;transform:rotate(-4deg);box-shadow:8px 8px 0 #d8cfb6}.media-shelf>span{font-size:12px;font-weight:600}.media-tiles{display:flex;gap:8px;margin-top:16px}.media-tiles>div{flex:1;text-align:center;background:#e4ebc8;border-radius:7px;padding:13px 0;font-size:27px;color:#6e8049}.media-tiles>div:nth-child(2){background:#ecdcc9;color:#9d7754}.media-tiles>div:nth-child(3){background:#dce4ec;color:#668198}.media-tiles small{display:block;font-size:9px;margin-top:8px}.media-play{position:absolute;bottom:23px;right:17px;border-radius:50%;width:42px;height:42px;background:#596e40;color:#fff;font-size:26px;display:grid;place-items:center}.contact-label:hover{color:var(--green)}@media(max-width:700px){.showcase-card .project-art{height:250px}.showcase-grid{row-gap:20px}.showcase-card{padding-top:0}.contact-label{gap:12px}}