@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600&family=ZCOOL+KuaiLe&display=swap";
:root{--paper:#f1f1ef;--paper-shade:#e4e5e3;--ink:#282824;--muted:#66655f;--accent:#b64338;--gutter:clamp(22px, 4.2vw, 64px);--content-width:42rem;--font-body:"Noto Sans SC", "Microsoft YaHei UI", sans-serif;--font-hand:"ZCOOL KuaiLe", cursive;--ease-out:cubic-bezier(.22, 1, .36, 1);--time-press:.14s;--time-hover:.19s}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--paper)}body{color:var(--ink);background:var(--paper);font-family:var(--font-body);font-synthesis:none;-webkit-font-smoothing:antialiased;margin:0;font-size:17px;line-height:1.72}::selection{color:var(--paper);background:var(--ink)}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}p,h1,h2,h3,figure{margin:0}svg{display:block}.motion-root{min-height:100svh}.portfolio-shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;min-height:100svh;display:grid}.sketch-stage{background:var(--paper-shade);height:100svh;min-height:620px;color:var(--ink);position:sticky;top:0;overflow:hidden}.stage-top,.stage-bottom{z-index:3;justify-content:space-between;align-items:center;display:flex;position:absolute;left:clamp(22px,4vw,56px);right:clamp(22px,4vw,56px)}.stage-top{top:clamp(20px,3vw,40px)}.stage-signature,.site-brand{font-family:var(--font-hand);font-size:25px;line-height:1}.stage-signature{transition:color var(--time-hover) ease, transform var(--time-hover) var(--ease-out);transform:rotate(-5deg)}.stage-signature:hover{color:var(--accent);transform:rotate(-8deg)scale(1.04)}.stage-caption,.stage-bottom{color:var(--muted);font-size:14px}.character-figure{place-items:center;margin:0;display:grid;position:absolute;inset:9% 8%}.character-art{z-index:1;object-fit:contain;object-position:center;will-change:transform;width:min(100%,610px);height:100%;position:relative}.stage-drawing{z-index:2;width:100%;height:100%;color:var(--ink);pointer-events:none;position:absolute;inset:0;overflow:visible}.stage-drawing path{fill:none;stroke:currentColor;stroke-width:1.3px;stroke-linecap:round;stroke-linejoin:round}.stage-drawing .stage-outline{opacity:.32}.stage-drawing .stage-accent{fill:none;stroke:var(--accent);stroke-width:1.8px;opacity:.82}.stage-drawing .stage-spark{stroke:var(--accent);stroke-width:1.6px}.stage-drawing .stage-ground{stroke-width:1.15px;opacity:.42}.figure-caption{z-index:3;color:var(--muted);font-family:var(--font-hand);text-align:center;font-size:17px;position:absolute;bottom:2%;left:0;right:0;transform:rotate(-1deg)}.stage-bottom{bottom:clamp(18px,3vw,38px)}.stage-bottom svg{width:24px;height:24px;fill:var(--accent)}.reading-column{background:var(--paper);min-width:0}.site-nav{z-index:4;padding:clamp(20px, 3vw, 40px) var(--gutter) 0;justify-content:space-between;align-items:center;gap:24px;display:flex;position:relative}.site-brand{transition:color var(--time-hover) ease, transform var(--time-hover) var(--ease-out);padding:4px;display:inline-block;transform:rotate(-4deg)}.site-brand:hover{color:var(--accent);transform:rotate(-8deg)}.nav-links{align-items:center;gap:clamp(16px,2.8vw,38px);display:flex}.nav-link{align-items:center;min-height:36px;font-size:15px;display:inline-flex;position:relative}.nav-scribble{opacity:0;transform-origin:0;width:calc(100% + 6px);height:7px;transition:opacity var(--time-hover) ease, transform var(--time-hover) var(--ease-out);position:absolute;bottom:-1px;left:-3px;right:-3px;overflow:visible;transform:scaleX(.4)rotate(-1deg)}.nav-scribble path{fill:none;stroke:var(--accent);stroke-width:1.7px;stroke-linecap:round}.nav-link:hover .nav-scribble,.nav-link:focus-visible .nav-scribble{opacity:1;transform:scaleX(1)rotate(-1deg)}.content-width{width:min(100% - (var(--gutter) * 2), var(--content-width));margin-inline:auto}.hero-section{flex-direction:column;justify-content:center;align-items:flex-start;min-height:min(100svh - 76px,880px);padding-block:clamp(64px,9vw,128px) clamp(80px,12vw,160px);display:flex}.hero-title{letter-spacing:-.045em;text-wrap:balance;max-width:13ch;font-size:clamp(36px,4vw,52px);font-weight:500;line-height:1.18}.hero-lead{max-width:34ch;color:var(--muted);text-wrap:pretty;margin-top:26px;font-size:17px;line-height:1.9}.hero-doodle{width:min(58%,240px);height:22px;color:var(--accent);margin-top:8px;overflow:visible}.hero-doodle path{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round}.hero-actions{align-items:center;gap:30px;margin-top:32px;display:flex}.spark-wrap{display:inline-block;overflow:visible}.sketch-button{min-height:46px;color:var(--ink);isolation:isolate;align-items:center;gap:16px;padding:9px 15px;font-size:15px;font-weight:500;display:inline-flex;position:relative}.button-arrow,.contact-link svg,.back-to-top svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px;transition:transform var(--time-press) var(--ease-out), color var(--time-hover) ease}.button-outline{z-index:-1;width:calc(100% + 4px);height:100%;color:var(--ink);pointer-events:none;position:absolute;inset:0 -2px;overflow:visible}.button-outline path{fill:none;stroke:currentColor;stroke-width:1.45px;stroke-linecap:round;stroke-linejoin:round;transition:color var(--time-hover) ease, transform var(--time-hover) var(--ease-out);transform-box:fill-box;transform-origin:50%}.sketch-button:hover .button-outline,.sketch-button:focus-visible .button-outline{color:var(--accent)}.sketch-button:hover .button-outline path,.sketch-button:focus-visible .button-outline path{transform:rotate(-1deg)scale(1.025)}.sketch-button:hover .button-arrow,.sketch-button:focus-visible .button-arrow{color:var(--accent);transform:translate(3px)}.sketch-button:active .button-arrow{transform:translate(1px)}.quiet-link{color:var(--muted);transition:color var(--time-hover) ease, gap var(--time-hover) var(--ease-out);align-items:center;gap:9px;font-size:14px;display:inline-flex}.quiet-link:hover{color:var(--ink);gap:13px}.content-section{padding-block:clamp(76px,10vw,132px)}.section-title{letter-spacing:-.04em;text-wrap:balance;max-width:13ch;font-size:36px;font-weight:500;line-height:1.33}.about-copy>p,.contact-copy>p{max-width:39ch;color:var(--muted);margin-top:22px;font-size:17px;line-height:1.9}.pencil-note{place-items:center;width:min(100%,300px);min-height:86px;margin-top:38px;margin-left:8px;display:grid;position:relative;transform:rotate(-1deg)}.pencil-note svg{width:100%;height:100%;color:var(--accent);pointer-events:none;position:absolute;inset:0;overflow:visible}.pencil-note path{fill:none;stroke:currentColor;stroke-width:1.35px;stroke-linecap:round;stroke-linejoin:round}.pencil-note p{color:var(--ink);font-family:var(--font-hand);padding:18px;font-size:20px;line-height:1.25;position:relative}.practice-section{background:var(--paper-shade)}.section-intro{color:var(--muted);margin-top:16px;font-size:16px}.practice-list{flex-direction:column;margin-top:32px;display:flex}.practice-item{grid-template-columns:52px minmax(0,1fr) 20px;align-items:center;gap:17px;padding-block:20px;display:grid}.practice-doodle{width:52px;height:52px;color:var(--ink);place-items:center;display:grid}.practice-doodle svg{fill:none;stroke:currentColor;stroke-width:1.55px;stroke-linecap:round;stroke-linejoin:round;width:48px;height:48px;transition:transform var(--time-hover) var(--ease-out), color var(--time-hover) ease;overflow:visible}.practice-item:hover .practice-doodle svg{color:var(--accent);transform:rotate(-5deg)scale(1.06)}.practice-doodle .icon-accent{stroke:var(--accent);stroke-width:1.8px}.practice-doodle .icon-accent-fill{fill:var(--accent);stroke:none}.practice-text h3{font-size:19px;font-weight:500;line-height:1.4}.practice-text p{color:var(--muted);margin-top:3px;font-size:15px;line-height:1.75}.practice-mark{color:var(--accent);font-family:var(--font-hand);opacity:0;transition:opacity var(--time-hover) ease, transform var(--time-hover) var(--ease-out);font-size:17px;transform:translate(-3px,3px)rotate(-8deg)}.practice-item:hover .practice-mark{opacity:1;transform:none}.contact-section{padding-bottom:clamp(70px,8vw,106px)}.contact-doodle{width:84px;height:62px;color:var(--ink);margin-bottom:25px;overflow:visible}.contact-doodle path{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}.contact-doodle .contact-heart{stroke:var(--accent);stroke-width:1.8px}.contact-link{color:var(--ink);transition:color var(--time-hover) ease;align-items:center;gap:12px;margin-top:29px;padding-bottom:5px;font-size:16px;display:inline-flex}.contact-link svg,.contact-link:hover{color:var(--accent)}.contact-link:hover svg{transform:translate(3px)}.site-footer{padding-block:24px 32px}.footer-note{width:fit-content;color:var(--ink);font-family:var(--font-hand);font-size:23px;transform:rotate(-2deg)}.footer-bottom{color:var(--muted);justify-content:space-between;align-items:center;gap:18px;margin-top:35px;padding-top:16px;font-size:13px;display:flex}.back-to-top{transition:color var(--time-hover) ease;align-items:center;gap:7px;display:inline-flex}.back-to-top svg{width:16px;height:16px}.back-to-top:hover{color:var(--accent)}.back-to-top:hover svg{transform:translateY(-3px)}@media (max-width:820px){:root{--gutter:clamp(20px, 5.5vw, 34px)}.portfolio-shell{flex-direction:column;display:flex}.sketch-stage{flex:none;height:min(58svh,500px);min-height:350px;position:relative;top:auto}.character-figure{inset:10% 8% 8%}.character-art{width:min(100%,500px)}.stage-caption,.stage-bottom{font-size:13px}.stage-bottom{bottom:16px}.site-nav{padding-top:22px}.hero-section{min-height:auto;padding-block:82px 96px}.hero-title{font-size:36px}.content-width{width:min(100% - (var(--gutter) * 2), 38rem)}.content-section{padding-block:86px}.contact-section{padding-bottom:66px}}@media (max-width:440px){body{font-size:16px}.stage-top,.stage-bottom{left:20px;right:20px}.stage-top{top:18px}.stage-bottom{font-size:12px;bottom:13px}.sketch-stage{height:52svh;min-height:330px}.character-figure{inset:10% 6% 8%}.figure-caption{font-size:15px;bottom:1%}.nav-links{gap:15px}.nav-link{font-size:14px}.hero-section{padding-block:70px 82px}.hero-title{font-size:36px}.hero-lead{margin-top:19px;font-size:17px}.hero-actions{gap:22px;margin-top:26px}.practice-item{grid-template-columns:44px minmax(0,1fr) 12px;gap:12px;padding-block:17px}.practice-doodle{width:44px;height:44px}.practice-doodle svg{width:42px;height:42px}.practice-text p{font-size:14px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.character-art{will-change:auto}}.stage-caption,.figure-caption,.stage-bottom span{display:none}.stage-bottom{justify-content:center;width:28px;left:auto;right:clamp(22px,4vw,56px)}.character-art{width:auto;max-width:88%;height:88%}@media (max-width:820px){.character-art{max-width:90%;height:88%}.stage-bottom{width:28px;left:auto;right:20px}}@media (max-width:440px){.character-art{max-width:92%;height:86%}.stage-bottom{width:28px;left:auto;right:20px}}.stage-signature,.site-brand{font-size:21px}.nav-link,.sketch-button,.quiet-link{font-size:15px}.hero-title{font-size:clamp(36px,4vw,52px)}.section-title{font-size:36px}.pencil-note p,.footer-note{font-size:20px}.practice-text h3,.practice-text p{font-size:17px}.footer-bottom{font-size:14px}@media (max-width:440px){.nav-link{font-size:14px}.hero-title{font-size:36px}}.sketch-button{background:var(--paper-shade)}.character-figure{inset:5% 3% 4%}.character-art{max-width:96%;height:92%}@media (max-width:820px){.character-figure{inset:5% 4% 4%}.character-art{max-width:96%;height:90%}}