:root{color:#55341f;background:#f6ecd8;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#f6ecd8}body{background-color:#f6ecd8;background-image:radial-gradient(circle at 15% 10%,#ffffff59,#0000 33%),radial-gradient(#5c3a1f0b .6px,#0000 .75px),repeating-radial-gradient(at 48% 20%,#6e4d2b06 0 .5px,#0000 .7px 8px),linear-gradient(108deg,#ffffff1c,#0000 42%,#976e4006);background-size:auto,7px 7px,17px 17px,auto;min-width:320px;margin:0}button,a{font:inherit}button{cursor:pointer}img,video{max-width:100%;display:block}.page-shell{background:linear-gradient(90deg,#ffffff21,#0000 15% 84%,#a3743f06);width:min(100%,480px);min-height:100vh;margin:0 auto;position:relative;overflow:hidden}.portfolio-header{min-height:245px;padding:max(31px, env(safe-area-inset-top)) 20px 15px;position:relative}.portfolio-header h1{color:#55341f;letter-spacing:.025em;max-width:8em;margin:47px 0 17px;font-family:STKaiti,KaiTi,楷体,serif;font-size:clamp(38px,11vw,46px);font-weight:700;line-height:1.14}.torn-banner,.paper-torn{clip-path:polygon(0 7%,6% 2%,13% 6%,21% 1%,31% 5%,42% 2%,53% 6%,64% 1%,74% 5%,85% 2%,100% 6%,98% 92%,91% 97%,80% 94%,70% 99%,58% 95%,47% 98%,35% 94%,23% 99%,11% 95%,2% 98%)}.torn-banner{color:#65411e;letter-spacing:.04em;background:#e9d49c;margin:0;padding:10px 18px;font-family:STKaiti,KaiTi,楷体,serif;font-size:17px;display:inline-block;transform:rotate(-1deg);box-shadow:0 2px 3px #462d1414}.header-doodle{pointer-events:none;width:43px;position:absolute}.header-doodle .rough-doodle{width:100%;height:100%}.header-doodle.crown{top:22px;left:26px;transform:rotate(-8deg)}.header-doodle.star{width:27px;top:99px;right:27px;transform:rotate(12deg)}.header-doodle.heart{width:30px;bottom:17px;right:46px;transform:rotate(-10deg)}.header-doodle.underline{width:87px;bottom:1px;left:15px;transform:rotate(-3deg)}.rough-doodle{width:30px;height:30px;display:block;overflow:visible}.rough-draw path{animation:.6s ease-out forwards rough-line}.rough-draw path+path{animation-delay:.12s}.scrap-project{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center;gap:17px;padding:47px 20px 0;display:grid;position:relative}.scrap-project.reverse{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);padding-top:70px}.scrap-project.reverse .project-copy{order:2}.project-copy{z-index:1;position:relative}.project-meta{align-items:center;gap:8px;margin:0 0 10px;display:flex}.project-meta small{color:#78543b;letter-spacing:.06em;font-size:11px;font-weight:700}.number-note{color:#fffaf0;clip-path:polygon(4% 5%,95% 0,100% 92%,8% 100%);place-items:center;width:33px;height:37px;font-family:STKaiti,KaiTi,楷体,serif;font-size:25px;line-height:1;display:grid;transform:rotate(-5deg);box-shadow:0 2px 3px #462d141a}.note-coral{background:#d9653b}.note-sage{background:#89946a}.note-yellow{background:#d5a43e}.project-copy h2{color:#4d301d;letter-spacing:.02em;word-break:keep-all;background:#e9d49c;max-width:calc(100% + 10px);margin:0 0 13px -4px;padding:7px 12px 8px;font-family:STKaiti,KaiTi,楷体,serif;font-size:clamp(27px,7.6vw,32px);line-height:1.25;display:inline-block;box-shadow:0 2px 3px #462d1414}.project-description{color:#634b38;margin:0;font-family:STKaiti,KaiTi,楷体,serif;font-size:15px;line-height:1.88}.hand-link{color:#5d351f;background:0 0;border:0;align-items:center;gap:7px;min-height:43px;margin-top:12px;padding:0;font-family:STKaiti,KaiTi,楷体,serif;font-size:16px;font-weight:700;text-decoration:none;display:inline-flex}.hand-link span{color:#d9653b;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:21px;transition:transform .12s}.hand-link:active span{transform:translate(4px)}.project-doodle{pointer-events:none;width:35px;height:35px;position:absolute}.project-doodle.arrow{bottom:-29px;right:-7px}.project-doodle.star-two{width:25px;top:-29px;right:-12px}.connector{z-index:0;pointer-events:none;width:74px;height:74px;position:absolute}.connector-one{bottom:-59px;right:12px;transform:rotate(24deg)}.connector-two{bottom:-56px;left:17px;transform:rotate(-13deg)}.polaroid,.video-polaroid{transform:rotate(var(--rotation));clip-path:polygon(0 1%,25% .4%,49.5% 1.1%,75% .3%,100% 1%,99.5% 37%,100% 70%,99.2% 100%,73% 99.3%,50% 100%,24% 99.4%,0 100%,.6% 68%,0 36%);background:#fffdf8;border:1px solid #57371c1a;padding:8px 8px 16px;text-decoration:none;display:block;position:relative;box-shadow:0 10px 22px #462d1421,1px 2px 1px #462d140f}.polaroid:after{content:"";z-index:1;opacity:.68;clip-path:polygon(3% 0,98% 5%,96% 93%,8% 100%,0 88%);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);width:68px;height:21px;position:absolute;top:-11px;right:13px;transform:rotate(-8deg)}.tape-yellow:after{background:#d5a43ea6}.tape-coral:after{background:#dfa892a8;width:60px;right:18px;transform:rotate(7deg)}.tape-sage:after{background:#89946a94;width:76px;right:10px;transform:rotate(-5deg)}.polaroid img,.polaroid .image-placeholder{aspect-ratio:1.2;object-fit:cover;border-radius:2px;width:100%}.image-placeholder{color:#9b866d;background:#e9dfcd;place-items:center;font-size:12px;display:grid}.video-polaroid{box-shadow:none;clip-path:none;background:0 0;padding:0}.video-polaroid .polaroid{transform:none}.video-polaroid video{aspect-ratio:1.2;object-fit:cover;background:#e9dfcd;width:100%;box-shadow:0 10px 22px #462d1421}.play-doodle{z-index:2;color:#55341f;background:#fffdf8c7;border:2px solid #fff;border-radius:50%;width:46px;height:46px;margin:auto;font-size:15px;position:absolute;inset:0;box-shadow:0 2px 8px #462d1426}.play-doodle:active{transform:scale(.95)}.final-project{clip-path:polygon(0 2%,5% 0,14% 2%,23% 0,34% 2%,47% 0,60% 2%,73% 0,84% 2%,100% 0,98% 96%,91% 100%,80% 97%,68% 100%,56% 97%,44% 100%,31% 97%,18% 100%,7% 96%,0 98%);background:#e9d49c;margin:82px 14px 0;padding:35px 16px 29px;position:relative;box-shadow:0 14px 28px #462d141f}.final-copy h2{margin-bottom:12px}.final-visual{z-index:1;margin-top:25px;position:relative}.final-visual .polaroid{box-shadow:0 12px 23px #462d1424}.final-visual .polaroid img,.final-visual .polaroid .image-placeholder{aspect-ratio:1.08}.final-visual video{aspect-ratio:1.08;object-fit:cover;background:#e9dfcd;width:100%}.final-sticker{z-index:3;color:#fffaf0;clip-path:polygon(50% 0,60% 8%,73% 4%,81% 16%,95% 19%,94% 34%,100% 45%,92% 55%,96% 70%,82% 77%,78% 92%,63% 91%,52% 100%,41% 92%,26% 96%,20% 82%,5% 78%,8% 63%,0 52%,8% 41%,4% 27%,18% 20%,22% 6%,37% 9%);text-align:center;background:#d9653b;place-items:center;width:67px;height:67px;font-family:STKaiti,KaiTi,楷体,serif;font-size:15px;font-weight:700;line-height:1.04;display:grid;position:absolute;top:16px;right:10px;transform:rotate(8deg)}.final-circle{z-index:2;pointer-events:none;width:57px;height:57px;position:absolute;top:109px;left:8px;transform:rotate(-12deg)}.feature-list{grid-template-columns:1fr 1fr;gap:11px 5px;margin:25px 0 5px;padding:0;list-style:none;display:grid}.feature-list li{color:#594126;align-items:center;gap:5px;font-family:STKaiti,KaiTi,楷体,serif;font-size:14px;display:flex}.feature-list .rough-doodle{flex:none;width:17px;height:17px}.final-link{margin-top:10px}.teacher-section{grid-template-columns:100px 1fr;align-items:start;gap:10px;margin:77px 18px 0;display:grid}.teacher-tag{color:#684624;writing-mode:vertical-rl;letter-spacing:.12em;clip-path:polygon(4% 0,100% 4%,96% 97%,7% 100%);background:#d9bf91;min-height:145px;padding:51px 12px 16px;font-family:STKaiti,KaiTi,楷体,serif;font-size:23px;font-weight:700;transform:rotate(-2deg);box-shadow:0 4px 7px #462d1414}.note-paper{color:#493a2f;clip-path:polygon(1% 0,98% 1%,100% 98%,81% 99%,58% 98%,35% 100%,0 98%);background-color:#f8f1e3;background-image:repeating-linear-gradient(#0000 0 29px,#50413214 30px,#0000 31px);min-height:260px;padding:36px 16px 28px 29px;position:relative;transform:rotate(1deg);box-shadow:0 10px 18px #462d141a}.note-paper:before{content:"";background:#f4e8d2;border-radius:50%;width:12px;height:12px;position:absolute;top:18px;left:7px;box-shadow:0 29px #f4e8d2,0 58px #f4e8d2,0 87px #f4e8d2,0 116px #f4e8d2,0 145px #f4e8d2,0 174px #f4e8d2}.note-tape{clip-path:polygon(4% 0,98% 4%,95% 96%,7% 100%);background:#89946a8f;width:76px;height:21px;position:absolute;top:-11px;left:43%;transform:rotate(-5deg)}.note-paper blockquote{letter-spacing:.02em;margin:0;font-family:STKaiti,KaiTi,楷体,serif;font-size:15px;line-height:1.92}.note-paper footer{color:#6e5b4c;margin-top:15px;font-family:STKaiti,KaiTi,楷体,serif;font-size:13px}.note-smile{width:43px;height:43px;position:absolute;bottom:10px;right:11px;transform:rotate(-10deg)}.note-heart{width:24px;height:24px;position:absolute;bottom:6px;right:53px;transform:rotate(12deg)}.ending{padding:73px 20px max(32px, env(safe-area-inset-bottom));color:#563720;text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:11px;font-family:STKaiti,KaiTi,楷体,serif;display:flex}.ending .rough-doodle{width:22px;height:22px}.ending p{letter-spacing:.08em;margin:0;font-size:22px}.ending small{color:#8b725d;width:100%;margin-top:5px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:11px}.reveal{opacity:0;transform:translateY(16px)}.reveal.is-visible .polaroid:after{animation:.42s ease-out .1s both tape-in}.reveal.is-visible{opacity:1;transform:translateY(0)}@media (width>=390px){.portfolio-header,.scrap-project,.ending{padding-left:22px;padding-right:22px}.teacher-section{margin-left:22px;margin-right:22px}.final-project{margin-left:17px;margin-right:17px}.portfolio-header{min-height:234px}}@media (width>=430px){.portfolio-header,.scrap-project,.ending{padding-left:26px;padding-right:26px}.teacher-section{margin-left:26px;margin-right:26px}.scrap-project{gap:21px}.final-project{margin-left:20px;margin-right:20px;padding-left:20px;padding-right:20px}}@keyframes tape-in{0%{opacity:0;transform:rotate(-8deg)scaleX(.85)}to{opacity:.68;transform:rotate(-8deg)scaleX(1)}}@keyframes rough-line{to{stroke-dashoffset:0}}@media (hover:hover){.hand-link:hover{color:#d9653b}.hand-link:hover span{transform:translate(4px)}.polaroid[href]:hover{transform:rotate(var(--rotation)) translateY(-2px)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none}.rough-draw path{animation:none;stroke-dashoffset:0!important}.reveal.is-visible .polaroid:after{animation:none}}.portfolio-header{isolation:isolate}.hero-bg-portrait{z-index:0;width:59%;height:274px;top:var(--portrait-top,128px);pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.135;filter:saturate(.65)brightness(1.12)contrast(.92);position:absolute;right:-8px;overflow:hidden;-webkit-mask-image:radial-gradient(at 61% 36%,#000 24%,#000000c2 46%,#0000 76%);mask-image:radial-gradient(at 61% 36%,#000 24%,#000000c2 46%,#0000 76%)}.hero-bg-portrait img{object-fit:cover;object-position:center top;width:100%;height:100%;display:block}.portfolio-header h1,.torn-banner{z-index:1;position:relative}.header-doodle{z-index:2}@media (width<=390px){.hero-bg-portrait{opacity:.135;width:72%;height:270px;right:-38px;-webkit-mask-image:radial-gradient(at 61% 36%,#000 30%,#000000d1 58%,#0000 92%);mask-image:radial-gradient(at 61% 36%,#000 30%,#000000d1 58%,#0000 92%)}}@media (width>=430px){.hero-bg-portrait{opacity:.15;width:61%;height:287px;right:-5px}}body{overflow-x:hidden}.page-shell{overflow:clip visible}.video-poster{width:100%;text-align:inherit;background:0 0;border:0;padding:0;display:block;position:relative}.video-polaroid video{aspect-ratio:16/9;object-fit:contain;background:#000}.play-doodle{color:#55341f;background:#fffaf0eb;border:2px solid #ffffffd9;place-items:center;width:64px;height:64px;font-size:18px;display:grid}.video-poster:active .play-doodle{transform:scale(.95)}@media (width<=480px){.portfolio-header{min-height:220px;padding-inline:20px}.portfolio-header h1{word-break:keep-all;overflow-wrap:break-word;max-width:100%;font-size:clamp(38px,10vw,46px);line-height:1.12}.scrap-project,.scrap-project.reverse{padding:88px 20px 0;display:block}.scrap-project.reverse .project-copy{order:initial}.project-copy,.project-copy>*,.final-copy,.final-copy>*{min-width:0;max-width:100%}.project-copy h2,.final-copy h2{white-space:normal;word-break:keep-all;overflow-wrap:break-word;max-width:100%;font-size:clamp(28px,8vw,32px);line-height:1.18}.project-description{letter-spacing:.01em;max-width:100%;font-size:clamp(15px,4vw,17px);line-height:1.85}.scrap-project>.polaroid,.scrap-project>.video-polaroid{box-sizing:border-box;width:calc(100% - 28px);max-width:calc(100% - 28px);margin-top:31px}.scrap-project:not(.reverse)>.polaroid{margin-left:auto;margin-right:0}.scrap-project.reverse>.video-polaroid{margin-left:0;margin-right:auto}.scrap-project .video-poster{width:100%}.scrap-project .polaroid{box-sizing:border-box}.connector-one{bottom:-63px;right:18px}.connector-two{bottom:-63px;left:16px}.final-project{margin-top:110px}.teacher-section{grid-template-columns:88px minmax(0,1fr)}.teacher-tag,.note-paper{min-width:0}}.final-status{color:#78543b;margin:14px 0 0;font-family:STKaiti,KaiTi,楷体,serif;font-size:14px}.final-image-trigger{cursor:pointer;background:0 0;border:0;width:100%;padding:0;display:block}body.portfolio-loading{overflow:hidden}.portfolio-app{opacity:0;transition:opacity .5s}.portfolio-app.is-ready{opacity:1}.loading-screen{width:100%;height:100dvh;padding:env(safe-area-inset-top) 22px calc(24px + env(safe-area-inset-bottom));z-index:9999;isolation:isolate;color:#55341f;background-color:#f6ecd8;background-image:radial-gradient(circle at 15% 10%,#ffffff59,#0000 33%),radial-gradient(#5c3a1f0b .6px,#0000 .75px),repeating-radial-gradient(at 48% 20%,#6e4d2b06 0 .5px,#0000 .7px 8px),linear-gradient(108deg,#ffffff1c,#0000 42%,#976e4006);background-size:auto,7px 7px,17px 17px,auto;place-items:center;transition:opacity .52s,transform .52s;display:grid;position:fixed;inset:0;overflow:hidden}.loading-screen.is-leaving{opacity:0;pointer-events:none;transform:scale(1.015)}.loading-paper-stack{z-index:2;width:min(100vw - 64px,420px);transition:opacity .4s,transform .4s;position:relative}.loading-paper-stack:before{content:"";z-index:-1;clip-path:polygon(1% 3%,8% 1%,17% 3%,29% 1%,40% 3%,53% 1%,65% 3%,78% 1%,91% 3%,99% 1%,98% 95%,90% 98%,78% 96%,65% 99%,52% 96%,40% 99%,27% 96%,14% 99%,2% 96%);background:#eadabf;position:absolute;inset:0;transform:translate(8px,7px)rotate(1deg);box-shadow:0 8px 20px #5032190f}.loading-paper{color:#55341f;text-align:center;clip-path:polygon(1% 3%,8% 1%,17% 3%,29% 1%,40% 3%,53% 1%,65% 3%,78% 1%,91% 3%,99% 1%,98% 95%,90% 98%,78% 96%,65% 99%,52% 96%,40% 99%,27% 96%,14% 99%,2% 96%);background:#fff9ed;width:100%;padding:46px 30px 40px;transition:opacity .4s,transform .4s;position:relative;box-shadow:0 12px 30px #5032191a}.loading-screen.is-leaving .loading-paper-stack{opacity:0;transform:translateY(-8px)}.loading-paper h1{margin:0;font-family:STKaiti,KaiTi,楷体,serif;font-size:clamp(28px,7vw,36px);font-weight:600;line-height:1.3}.loading-paper>p{color:#55341fb8;margin:13px 0 0;font-family:STKaiti,KaiTi,楷体,serif;font-size:16px;line-height:1.7}.loading-tape{z-index:3;clip-path:polygon(4% 3%,98% 0,95% 94%,7% 100%,0 87%);pointer-events:none;width:72px;height:24px;position:absolute}.loading-tape-yellow{background:#dfbe7085;top:4px;left:-17px;transform:rotate(-10deg)}.loading-tape-pink{background:#dc967d7a;bottom:5px;right:-18px;transform:rotate(12deg)}.loading-wave{opacity:.72;justify-content:center;align-items:center;gap:2px;height:27px;margin:8px auto 0;display:flex}.loading-wave .rough-doodle{width:44px;height:20px}.loading-wave .rough-doodle:nth-child(2){width:18px;height:18px}.loading-dots{justify-content:center;align-items:center;gap:12px;height:24px;margin-top:22px;display:flex}.loading-dots span{background:#d9653b;border-radius:48% 52% 45% 55%;width:13px;height:13px;animation:1.2s ease-in-out infinite loading-dot;display:block}.loading-dots span:nth-child(2){background:#d9b968;border-radius:54% 46% 51% 49%;animation-delay:.15s}.loading-dots span:nth-child(3){background:#6a4933;border-radius:45% 55% 48% 52%;animation-delay:.3s}.loading-footer{z-index:2;bottom:calc(24px + env(safe-area-inset-bottom));white-space:nowrap;flex-direction:column;align-items:center;display:flex;position:absolute;left:50%;transform:translate(-50%)}.loading-footer:before{content:"";background:#55341f38;width:116px;height:1px;margin-bottom:8px;transform:rotate(-1deg)}.loading-footer .rough-doodle{width:18px;height:18px;margin-bottom:4px}.loading-footer p{margin:0;font-family:STKaiti,KaiTi,楷体,serif;font-size:18px}.loading-footer p span{color:#d9653b;font-weight:700}.loading-doodle{z-index:1;pointer-events:none;position:absolute}.loading-crown{width:43px;height:43px;top:calc(13% + env(safe-area-inset-top));left:11%;transform:rotate(-9deg)}.loading-star{width:29px;height:29px;top:19%;right:11%;transform:rotate(11deg)}.loading-left-heart{width:26px;height:26px;bottom:17%;left:8%;transform:rotate(-8deg)}.loading-corner-wave{width:61px;height:42px;bottom:13%;right:6%;transform:rotate(-18deg)}@keyframes loading-dot{0%,60%,to{opacity:.45;transform:translateY(0)}30%{opacity:1;transform:translateY(-7px)}}@media (width<=374px){.loading-paper-stack{width:calc(100vw - 44px)}.loading-paper{padding:40px 22px 35px}.loading-paper>p{font-size:15px}.loading-footer p{font-size:17px}}@media (prefers-reduced-motion:reduce){.portfolio-app,.loading-screen,.loading-paper-stack,.loading-paper{transition-duration:.01ms}.loading-screen.is-leaving,.loading-screen.is-leaving .loading-paper-stack{transform:none}.loading-dots span{opacity:.75;animation:none}}