:root{--paper:#f5f4ee;--ink:#182823;--muted:#67716b;--line:#d8ded4;--accent:#daed99;--white:#fff;--radius:18px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #548020;outline-offset:5px}.skip{position:fixed;left:16px;top:-70px;z-index:10;background:var(--ink);color:white;padding:10px 16px}.skip:focus{top:10px}.wrap{width:min(1240px,calc(100% - 64px));margin:auto}.header{display:flex;align-items:center;justify-content:space-between;padding:25px 0;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;gap:13px;align-items:center}.brand-mark{font-weight:800;font-size:27px;letter-spacing:-1px;line-height:1}.brand-label{font-size:12px;line-height:1.5;border-left:1px solid #adb7ac;padding-left:15px}.edition{font-family:monospace;font-size:12px;color:var(--muted);letter-spacing:.08em}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:42px 0 32px}.eyebrow{font-family:monospace;font-size:11px;letter-spacing:.14em;margin:0 0 13px;color:var(--muted)}h1{font-size:clamp(30px,4.2vw,51px);line-height:1.18;letter-spacing:-.05em;margin:0 0 15px;font-weight:750}.intro p:last-child{margin:0;font-size:14px;color:var(--muted)}.overview-stats{display:flex;gap:26px;flex-shrink:0}.stat strong{font-size:32px;line-height:1;font-weight:650;letter-spacing:-.05em}.stat small{display:block;font-size:11px;margin-top:10px;color:var(--muted)}.catalog-heading{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:19px 0 17px;gap:20px}.catalog-heading h2{font-size:14px;font-weight:600;margin:0}.catalog-heading p{font-size:12px;color:var(--muted);margin:0}.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}.project{grid-column:span 2;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}.project:nth-child(4),.project:nth-child(5){grid-column:span 3}.project:hover{transform:translateY(-3px);box-shadow:0 12px 30px #213d3010}.cover{height:210px;display:block;position:relative;overflow:hidden;background:#e9eee6;border-bottom:1px solid var(--line)}.cover img{height:100%;width:100%;object-fit:cover;object-position:50% 25%;transition:transform .6s}.cover:hover img{transform:scale(1.025)}.project:nth-child(1) .cover img{object-position:50% 12%}.project:nth-child(4) .cover img{object-position:50% 28%}.cover-label{position:absolute;bottom:13px;left:15px;background:#fffffff2;border:1px solid #ffffff90;padding:5px 10px;border-radius:5px;font-size:11px;font-weight:600}.project-body{padding:23px 23px 21px;flex:1;display:flex;flex-direction:column}.meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);margin-bottom:12px}.case-number{font-family:monospace;letter-spacing:.06em}.time{background:var(--accent);padding:3px 9px;border-radius:4px;color:#30431d;font-size:11px;font-weight:650}.project h3{font-size:23px;line-height:1.35;letter-spacing:-.025em;margin:0 0 8px}.project-description{font-size:13px;color:var(--muted);margin:0 0 15px;min-height:43px}.tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}.tag{font-size:10px;border:1px solid var(--line);border-radius:4px;padding:2px 7px;color:#536055}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:41px;padding:8px 14px;border:1px solid var(--line);border-radius:6px;font-size:12px;font-weight:600;background:white}.button.primary{color:white;background:var(--ink);border-color:var(--ink)}.button:hover{background:#edf2e7}.button.primary:hover{background:#344b3f}.button span{font-size:15px}.small-link{font-size:11px;color:var(--muted);text-decoration:underline;text-underline-offset:4px;margin-top:12px;align-self:flex-start}.note{font-size:11px;color:var(--muted);padding:22px 0 30px;border-bottom:1px solid var(--line);margin:0}.footer{display:flex;justify-content:space-between;padding:22px 0 30px;font-size:11px;color:var(--muted)}.compare-header{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:21px 0}.back{font-size:12px}.compare-title h1{font-size:30px;margin:0 0 7px}.compare-title p{font-size:13px;color:var(--muted);margin:0}.compare-title{padding:18px 0 22px}.compare-tools{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:18px}.compare-tools p{font-size:12px;color:var(--muted);margin:0}.segmented{display:flex;gap:4px;background:#e8ece2;padding:4px;border-radius:8px}.segmented button{border:0;background:transparent;padding:7px 15px;border-radius:5px;font-size:12px}.segmented button[aria-pressed=true]{background:var(--ink);color:white}.panes{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pane{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:white;min-width:0}.pane-top{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px 17px;border-bottom:1px solid var(--line)}.pane-top h2{font-size:14px;margin:0}.pane-top small{font-size:10px;color:var(--muted);display:block;margin-top:2px}.pane-top a{font-size:11px;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}.pane iframe{border:0;width:100%;height:66vh;min-height:440px;display:block;background:white}.pane-note{font-size:11px;padding:10px 16px;background:#f0f3e8;margin:0;color:#56644d}.external-preview{min-height:440px;height:66vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px;text-align:center;background:#edf0e8}.external-preview strong{font-size:32px;letter-spacing:-.03em}.external-preview p{font-size:13px;color:var(--muted);max-width:270px;margin:13px 0 24px}.external-preview .overline{font-size:11px;letter-spacing:.12em;font-family:monospace}.panes[data-view=a] .pane:nth-child(2),.panes[data-view=b] .pane:first-child{display:none}.panes[data-view=a],.panes[data-view=b]{grid-template-columns:1fr}.panes[data-view=a] iframe,.panes[data-view=b] iframe{height:72vh}.compare-page .wrap{width:min(1600px,calc(100% - 48px))}.compare-footer{font-size:11px;color:var(--muted);padding:20px 0 28px}.demo-return{position:fixed;bottom:14px;left:14px;z-index:2147483647;background:#182823;color:white;font:12px/1.5 sans-serif;padding:10px 16px;border-radius:7px;box-shadow:0 3px 20px #0003;text-decoration:none}@media(min-width:1600px){.cover{height:235px}}@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project,.project:nth-child(4),.project:nth-child(5){grid-column:span 1}.project:last-child{grid-column:span 2}.overview-stats{gap:18px}.stat strong{font-size:25px}.intro{align-items:flex-start}.cover{height:200px}.panes{grid-template-columns:1fr}.pane iframe{height:65vh}}@media(max-width:600px){.wrap,.compare-page .wrap{width:calc(100% - 32px)}.header{padding:20px 0}.edition{font-size:10px}.brand-label{font-size:10px}.intro{display:block;padding:30px 0 25px}.intro h1{font-size:36px}.overview-stats{margin-top:24px;gap:36px}.stat strong{font-size:26px}.stat small{margin-top:5px}.catalog-heading p{display:none}.grid{display:block}.project{margin-bottom:20px}.cover{height:225px}.project-body{padding:21px}.project-description{min-height:0}.footer{gap:20px}.compare-header{align-items:flex-start}.compare-title h1{font-size:26px}.compare-tools{align-items:flex-start;flex-direction:column}.segmented{width:100%}.segmented button{flex:1}.pane-top{padding:12px}.pane iframe{min-height:420px}.external-preview{min-height:300px;height:auto}.compare-title{padding-top:0}.note{padding-top:4px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

.compare-tools[hidden]{display:none}