@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');
:root{--ink:#161918;--paper:#f4f5f1;--muted:#616660;--lime:#d5f26c;--line:#d4d8d0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Manrope','Noto Sans TC',sans-serif;font-size:1rem;line-height:1.7}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #82a313;outline-offset:6px}p,h1,h2,h3{margin:0}.header{padding:1.65rem 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:2rem}.brand{display:flex;gap:.7rem;align-items:center;font-weight:800;font-size:1.08rem;letter-spacing:.07em;line-height:1.05}.brand-sub{display:block;font-size:.72rem;letter-spacing:.32em;margin-top:.3rem}.brand-mark{width:2.7rem;height:2.7rem;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:2rem;border-radius:7px;letter-spacing:0}.header nav{display:flex;gap:2.1rem;font-size:.875rem;font-weight:600}.header nav a:hover,footer a:hover{color:#6b850a}.hero{padding:3rem 5% 1.2rem;min-height:640px;display:flex;flex-direction:column}.hero-top{display:flex;justify-content:space-between;gap:1rem}.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.14em}.small-meta{font-size:.875rem;color:var(--muted)}h1{font-size:clamp(2.75rem,6vw,6.15rem);font-weight:800;line-height:1.32;letter-spacing:-.06em;margin:3.8rem 0 2.2rem}.accent-word{background:var(--lime);padding:0 .08em;box-decoration-break:clone}.hero-bottom{display:flex;align-items:end;justify-content:space-between;gap:2rem;padding-bottom:4rem}.hero-bottom p{font-size:1.12rem;color:var(--muted);line-height:1.9}.button{background:var(--ink);color:white;padding:1rem 1.8rem;border-radius:3px;font-size:.94rem;font-weight:600;white-space:nowrap}.button:hover{background:#353c30}.hero-rule{margin-top:auto;border-top:1px solid var(--line);padding-top:1rem;display:flex;justify-content:space-between;font-size:.75rem;letter-spacing:.12em;color:var(--muted)}.section{padding:6rem 5%;scroll-margin-top:1rem}.intro,.approach{display:grid;grid-template-columns:1fr 2fr;gap:3rem;border-top:1px solid var(--line)}h2{font-size:clamp(1.8rem,3.4vw,3.15rem);letter-spacing:-.04em;line-height:1.5;font-weight:700}.body-copy{max-width:44rem;margin-top:1.8rem;color:var(--muted);line-height:2}.practice{background:var(--ink);color:var(--paper)}.section-heading{display:flex;justify-content:space-between;align-items:start;gap:3rem;margin-bottom:3.5rem}.practice .eyebrow{color:var(--lime)}.practice-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #424740}.practice-card{padding:2.6rem 2.5rem 1rem 0;display:flex;gap:2rem}.practice-card+article{border-left:1px solid #424740;padding-left:2.5rem;padding-right:0}.card-index{color:var(--lime);font-size:.85rem}.english-label{font-size:.76rem;letter-spacing:.1em;color:#a4aba1}h3{font-size:1.5rem;margin:.7rem 0 1.2rem;font-weight:600}.practice-card p:not(.english-label){color:#bac0b6;max-width:31rem;line-height:1.9}.tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem;font-size:.8rem;color:#d0d6ca}.tags span{border:1px solid #50564c;border-radius:3px;padding:.3rem .8rem}.steps{margin-top:2.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.steps article{border-top:1px solid var(--line);padding-top:1rem}.steps span{font-size:.95rem;font-weight:700}.steps p{margin-top:.8rem;color:var(--muted);line-height:1.9}.contact{background:var(--lime)}.contact h2{margin:1.5rem 0;font-size:clamp(2rem,4vw,4rem)}.contact>p:not(.eyebrow){color:#485032}.email{display:inline-block;margin-top:2rem;font-size:clamp(1.05rem,3vw,2.35rem);font-weight:600;letter-spacing:-.04em;border-bottom:2px solid var(--ink);overflow-wrap:anywhere}.email:hover{color:#4b6011}.contact-bottom{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid #9daf66;margin-top:4rem;padding-top:1rem;font-size:.75rem;letter-spacing:.1em}footer{display:flex;justify-content:space-between;gap:1rem;padding:1.6rem 5%;font-size:.8rem;color:var(--muted)}@media(min-width:1600px){.header,.hero,.section,footer{padding-left:max(5%,calc((100vw - 1440px)/2));padding-right:max(5%,calc((100vw - 1440px)/2))}}@media(max-width:760px){.header{padding:1.3rem 6%;gap:1rem}.brand{font-size:.95rem}.brand-mark{width:2.2rem;height:2.2rem;font-size:1.6rem}.header nav{gap:1rem;font-size:.8rem}.hero{padding:2rem 6% 1.2rem;min-height:570px}.hero-top .small-meta{display:none}h1{margin:3rem 0 2rem;font-size:clamp(2.3rem,7.8vw,3.8rem)}.hero-bottom{align-items:start;flex-direction:column;padding-bottom:2.8rem}.hero-bottom p{font-size:1rem}.hero-rule{font-size:.75rem;gap:1rem;flex-wrap:wrap}.section{padding:3.5rem 6%}.intro,.approach{grid-template-columns:1fr;gap:1.8rem}.section-heading{display:block;margin-bottom:2rem}.section-heading h2{margin-top:1.5rem}.practice-grid{grid-template-columns:1fr}.practice-card,.practice-card+article{padding:2rem 0;border-left:0;gap:1.3rem}.practice-card+article{border-top:1px solid #424740}.steps{grid-template-columns:1fr;gap:1.7rem}.contact-bottom{flex-direction:column;gap:.5rem;margin-top:3rem}.contact h2{font-size:2.4rem}.email{font-size:clamp(.95rem,4.4vw,1.7rem)}.eyebrow{font-size:.75rem;letter-spacing:.1em}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.concept{margin:0;position:relative;background:#111;color:white;overflow:hidden}.concept img{display:block;width:100%;height:auto;max-height:760px;object-fit:cover;object-position:center}.concept figcaption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:5%;gap:1.7rem;pointer-events:none}.concept strong{font-size:clamp(1.7rem,3.3vw,3.2rem);line-height:1.55;font-weight:600;letter-spacing:-.04em}.concept .eyebrow{color:var(--lime)}.concept-note{font-size:.8rem;color:#a5aaa3;margin-top:1rem}@media(max-width:760px){.concept img{height:500px;width:100%;object-fit:cover;object-position:72% center}.concept figcaption{position:relative;background:#111;padding:2rem 6%;gap:1rem}.concept strong{font-size:1.8rem}.concept-note{margin-top:0}}

/* Visual studio layout */
.hero{min-height:0;padding-top:2.4rem}.hero-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:2.5rem;align-items:center;padding:2.7rem 0 3.5rem}.hero-copy h1{font-size:clamp(2.5rem,4.7vw,5rem);margin:0 0 1.6rem;line-height:1.4}.hero-description{font-size:1.04rem;color:var(--muted);line-height:1.9;margin-bottom:2rem}.hero-copy .button{display:inline-block}.hero-art{margin:0;position:relative;overflow:hidden;border-radius:4px;background:#111;aspect-ratio:1/1.1}.hero-art img{width:100%;height:100%;display:block;object-fit:cover;object-position:74% center}.hero-art figcaption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));padding:3rem 1.4rem 1.2rem;display:flex;justify-content:space-between;gap:.7rem;color:#cbd1c7;font-size:.75rem;letter-spacing:.07em}.intro{padding-top:5rem;padding-bottom:5rem}.visual-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.visual-card{border:1px solid #41483c;border-radius:4px;overflow:hidden;background:#1e231e}.visual-card figure{margin:0;position:relative;aspect-ratio:3/2;overflow:hidden;background:#131713}.visual-card img{width:100%;height:100%;display:block;object-fit:cover}.visual-card figcaption{position:absolute;bottom:0;right:0;color:#e7ebe2;background:rgba(0,0,0,.64);padding:.45rem .85rem;font-size:.75rem;backdrop-filter:blur(8px)}.visual-card-body{padding:2rem}.card-title-line{display:flex;align-items:center;gap:1rem}.visual-card h3{font-size:clamp(1.2rem,1.8vw,1.65rem);line-height:1.6}.visual-card-body>p{color:#bac0b6;line-height:1.9}.visual-note{font-size:.875rem;color:#a9b19f;margin-top:1.6rem}.section-heading h2{font-size:clamp(1.8rem,3vw,2.9rem)}@media(max-width:900px){.hero-layout{gap:1.5rem}.hero-copy h1{font-size:clamp(2.2rem,4.4vw,3.7rem)}.hero-art figcaption{flex-direction:column;gap:.2rem}.visual-card-body{padding:1.5rem}}@media(max-width:760px){.hero-layout{grid-template-columns:1fr;padding:2rem 0 2.5rem;gap:2rem}.hero-copy h1{font-size:clamp(2.3rem,7.8vw,3.8rem)}.hero-art{aspect-ratio:5/4}.hero-art img{object-position:72% 45%}.hero-art figcaption{flex-direction:row;font-size:.75rem}.visual-grid{grid-template-columns:1fr;gap:2rem}.visual-card h3{font-size:1.35rem}.intro{padding:3.5rem 6%}.hero-description{font-size:1rem}}