:root{--pink:#ef6eac;--blue:#142ab5;--ink:#292039;--paper:#fff9eb;--soft:#f9c7da;--hand:"KaiTi","STKaiti","Kaiti SC",Georgia,serif}
:root{--round:"YouYuan","幼圆","Yuanti SC","Hiragino Maru Gothic ProN","Microsoft YaHei",sans-serif}
@font-face{font-family:"CrayonDisplay";src:url('assets/fonts/ZCOOLKuaiLe-Regular.ttf') format('truetype');font-style:normal;font-weight:400 900;font-display:swap}
@font-face{font-family:"LooseHand";src:url('assets/fonts/MaShanZheng-Regular.ttf') format('truetype');font-style:normal;font-weight:400 900;font-display:swap}
h1,h2,h3,h4,.about-lead,.big-outline{font-family:"CrayonDisplay",var(--round)!important;font-weight:900!important;-webkit-text-stroke:.6px currentColor;mask-image:url('assets/crayon-grain.svg');mask-mode:luminance;mask-size:160px 160px;mask-repeat:repeat}
h1,h2,h3,.about-lead{font-family:"CrayonDisplay",var(--round)!important;color:var(--blue);font-weight:900!important;letter-spacing:-.035em!important}h4{color:var(--blue)}.hero h1{line-height:1.28}.miya-feature h3,footer h2{color:var(--paper)}
body{background-color:var(--paper);background-image:radial-gradient(#29203912 .6px,transparent .7px);background-size:5px 5px}
header{height:82px;background:var(--paper);border-bottom:2px dashed var(--blue)}
.brand,nav a,.contact-nav{font-family:var(--hand)}.brand{font-size:1.25rem;transform:rotate(-3deg)}nav a{font-size:1.08rem}.contact-nav{background:var(--blue);border-color:var(--blue);border-radius:48% 42% 46% 38%;transform:rotate(4deg)}
.hero{background-color:var(--pink);background-image:repeating-linear-gradient(0deg,transparent 0 30px,#fff9eb1c 30px 31px);padding-top:62px;min-height:650px;border-bottom:3px solid var(--blue);isolation:isolate}
.hero-copy{position:relative;z-index:3}.hero .eyebrow{letter-spacing:.06em;transform:rotate(-2deg);color:var(--blue)}
h1,h2,h3,.about-lead{font-family:var(--hand);font-weight:900;letter-spacing:-.045em}h1{font-size:clamp(3.5rem,6.3vw,6.4rem);line-height:1.24;transform:rotate(-3deg);margin:24px 0 34px}h1 span{background:var(--paper);padding:0 .08em;box-decoration-break:clone;box-shadow:0 7px 0 var(--blue)}
.hero .intro{padding-left:5px}.hero-small{font-family:var(--hand);font-size:1rem;letter-spacing:0;transform:rotate(-2deg)}
.button{border-radius:6px 16px 5px 12px;box-shadow:4px 5px 0 var(--blue);border-color:var(--blue);font-family:var(--hand);font-size:1.1rem;transform:rotate(-2deg)}.button:hover{transform:rotate(1deg) translate(2px,2px)}.dark{background:var(--blue);box-shadow:4px 5px 0 var(--pink)}
.apple-stage{margin:30px 0 0;border:3px dashed var(--blue);border-radius:47% 40% 45% 37%;transform:rotate(5deg);background:#fff9eb38;max-height:480px}.apple-button{width:55%;max-width:285px;transform:rotate(-8deg)}.apple-button img{filter:drop-shadow(8px 12px 0 #29203918)}.big-outline{font-family:var(--hand);font-size:6.5rem;top:-45px;left:-18px;color:var(--blue);-webkit-text-stroke:0;transform:rotate(-17deg);opacity:1;z-index:3}.apple-caption{font-family:var(--hand);font-size:1.1rem;border:2px solid var(--blue);border-radius:4px 8px 3px 9px;bottom:-12px;right:12%;box-shadow:5px 5px var(--blue)}.sticker{top:-20px;right:-16px;border:2px solid var(--blue);border-radius:7px 14px 4px 12px;background:var(--paper);color:var(--blue);transform:rotate(10deg);font:900 1.2rem/1.1 var(--hand);box-shadow:4px 5px var(--blue)}.apple-skills span{font-family:var(--hand);border-radius:4px 12px 3px 8px}
.ticker{width:calc(100% - 4px);margin-inline:2px;padding:15px 0;border-color:var(--blue);transform:rotate(-1deg);position:relative;z-index:5}.ticker div{font-family:var(--hand);font-size:1.25rem;letter-spacing:.05em}
.section{padding:80px 7%}.section>.eyebrow{color:var(--blue);margin-bottom:18px}h2{position:relative;font-size:clamp(2.6rem,4vw,4.5rem);transform:rotate(-2deg);display:inline-block;border-bottom:5px solid var(--pink);padding-bottom:8px}h3{line-height:1.3}h4{font-family:var(--hand);font-size:1.35rem}
#about{background:repeating-linear-gradient(0deg,transparent 0 29px,#142ab508 29px 30px)}#about h2::after{content:'HELLO, I’M SIQING';display:block;position:absolute;left:calc(100% + 35px);top:36px;white-space:nowrap;font:700 .85rem Arial;letter-spacing:.08em;color:var(--blue);transform:rotate(6deg)}
.about-layout{grid-template-columns:.65fr 1.4fr;gap:70px;margin-top:45px}.portrait{border:12px solid var(--paper);box-shadow:8px 9px 0 var(--soft);border-radius:3px 8px 6px 4px;transform:rotate(-5deg);margin:15px 8px}.portrait img{max-height:420px;object-position:50% 30%}.portrait span{font-family:var(--hand);background:var(--paper);font-size:1rem;text-align:center;padding:15px 0 5px}.about-lead{font-size:2rem;color:var(--blue);transform:rotate(1deg)}.skills span{background:var(--soft);border:1.5px solid var(--blue);border-radius:5px 9px 3px 8px;transform:rotate(-2deg)}.skills span:nth-child(even){transform:rotate(3deg);background:#e4e8ff}.experience{display:grid;grid-template-columns:1fr 1fr;gap:25px}.experience article{background:var(--paper);border:2px dashed var(--blue);border-radius:7px 16px 8px 4px;padding:20px;margin-top:6px}.experience article:nth-child(2){transform:rotate(1deg);background:#ffe7ef}.experience p{font-size:.92rem}
#cases{border-top:2px dashed var(--blue)}.section-heading{gap:35px}.section-heading h2{margin-right:20px}.section-heading p{font-family:var(--hand);font-size:1.2rem;color:var(--blue)}.miya-feature{border-color:var(--blue);border-radius:12px 30px 9px 22px;box-shadow:9px 11px var(--soft);position:relative;padding:42px}.miya-feature h3{font-size:3.9rem;transform:rotate(-3deg);color:var(--paper)}.miya-feature .eyebrow{color:var(--soft)}.miya-feature .button{background:var(--paper);color:var(--blue);box-shadow:4px 5px var(--pink)}.miya-proof img{border:10px solid var(--paper);box-shadow:5px 8px #080f62;border-radius:3px}.metric strong{font-family:var(--hand);font-size:4rem;color:var(--paper)}
.miya-deep{background:var(--paper);border:2px dashed var(--blue);border-radius:6px 15px 9px 5px;padding:30px;margin-top:44px}.case-tablist{border-bottom:2px dashed var(--blue)}.case-tablist button{font-family:var(--hand);font-size:1.15rem;border-color:var(--blue);border-radius:8px 15px 4px 10px;transform:rotate(-2deg)}.case-tablist button:nth-child(2){transform:rotate(2deg)}.case-tablist button[aria-selected=true]{box-shadow:3px 4px var(--blue)}.stat-strip strong{font-family:var(--hand);font-size:2.8rem}.stat-strip>div{border-left:3px solid var(--pink);padding-left:16px}.strategy-grid>div{padding:18px;background:#ffe7ef;border-radius:6px 14px 8px 5px}.strategy-grid>div:nth-child(2){background:#e8ebff}.step-no{font-family:var(--hand)}.song-list{border-radius:8px 4px 13px 5px}
.evidence{background:var(--paper);border:2px solid #c7bfd1;box-shadow:3px 4px #2920390e;border-radius:4px 8px 2px 5px;transition:transform .2s,box-shadow .2s}.evidence:nth-child(odd){transform:rotate(-1deg)}.evidence:nth-child(even){transform:rotate(1deg)}.evidence:hover{transform:rotate(0) translateY(-4px);box-shadow:4px 5px var(--blue)}.evidence span{font-family:var(--hand);font-size:1rem}.evidence img{background:#fff}
.account-grid{gap:40px}.account-card{border:2px solid var(--blue);border-radius:7px 17px 4px 10px;background:var(--paper);box-shadow:5px 6px var(--soft)}.account-card:nth-child(even){background:#ffe7ef;border-radius:16px 6px 14px 7px}.account-cover{border-bottom:2px solid var(--blue)}.account-number{font-family:var(--hand);transform:rotate(9deg);color:var(--paper);background:var(--blue);font-size:2.6rem;padding:0 12px;border-radius:5px 10px 4px 8px}.account-body h3{font-size:2.2rem}.account-stat strong{font-family:var(--hand);font-size:3rem}.text-link{display:inline-block;padding:5px 13px;background:#e4e8ff;border:1px dashed var(--blue);border-radius:3px 8px 5px 7px;text-decoration:none;font-family:var(--hand);font-size:1.15rem}.account-card:nth-child(even) .text-link{background:var(--paper)}details{border-top:2px dashed var(--blue)}summary{font-family:var(--hand);font-size:1.2rem}.workflow{border:2px dashed var(--blue);border-radius:9px 20px 6px 12px;background:var(--soft);padding:35px}.workflow h3{font-size:2.3rem}.workflow-buttons button,.work-filters button{font-family:var(--hand);font-size:1.08rem;border-color:var(--blue);border-radius:7px 15px 5px 12px}.workflow-buttons button:nth-child(even),.work-filters button:nth-child(even){transform:rotate(2deg)}
#works{background-color:var(--pink);background-image:radial-gradient(#fff9eb55 .7px,transparent .8px);background-size:5px 5px;border:0;border-top:2px dashed var(--blue);border-bottom:2px dashed var(--blue)}#works h2{border-color:var(--blue)}.work-grid{gap:48px 40px}.work-card{padding:18px 18px 24px;background:var(--paper);border:2px solid var(--blue);border-radius:6px 13px 5px 10px;box-shadow:6px 7px #b837743d}.work-card:nth-child(even){background:#ffe6ef}.work-image{height:290px;border:0;background:#fff;box-shadow:0 0 0 1px #29203915;transform:rotate(-1deg);margin-bottom:26px}.work-card:nth-child(even) .work-image{transform:rotate(1deg)}.work-image span{border:1.5px dashed var(--blue);font-family:var(--hand);font-size:1rem;border-radius:6px 3px 7px 4px}.work-card h3{font-size:2.1rem}.work-card>p:not(.eyebrow){min-height:100px}.work-filters button.active{box-shadow:3px 4px var(--paper)}
footer{background:var(--blue);color:var(--paper);border-top:2px dashed var(--paper)}footer>p:first-child{font-family:var(--hand);transform:rotate(-2deg)}footer h2{border-color:var(--pink)}.copy-contact{border-radius:6px 12px 4px 8px;font-family:var(--hand);font-size:1.05rem;color:var(--paper);border-color:var(--paper)}
dialog{border:3px solid var(--blue);border-radius:6px 14px 5px 10px}.lightbox-top button,.lightbox-controls button{border-color:var(--blue);border-radius:5px 10px 3px 8px}:focus-visible{outline-color:var(--blue)}.miya-feature :focus-visible,footer :focus-visible{outline-color:var(--paper)}
@media(max-width:1000px){.experience{grid-template-columns:1fr;gap:18px}.about-layout{gap:40px}.miya-feature h3{font-size:3.2rem}.metric strong{font-size:3rem}#about h2::after{left:0;top:100%;font-size:.7rem}}
@media(max-width:760px){header{height:75px}.brand{font-size:1.1rem}nav{gap:12px}nav a{font-size:.95rem}.hero{padding:32px 6% 40px;grid-template-columns:1fr}.hero .eyebrow{font-size:.7rem}h1{font-size:3.4rem;line-height:1.25;margin:20px 0 30px}.intro{font-size:.95rem}.hero-small{margin-top:27px}.apple-stage{height:340px;margin:45px 10px 10px}.apple-button{width:54%;max-width:190px}.big-outline{font-size:4.6rem;top:-35px;left:0}.sticker{right:-8px;font-size:.9rem;padding:15px}.apple-caption{font-size:1rem;padding:6px 14px;right:8%;bottom:-7px}.apple-skills span{padding:8px 11px;font-size:.9rem}.apple-skills span:nth-child(2){right:-2%}.section{padding:55px 6%}h2{font-size:2.75rem}.about-layout{grid-template-columns:1fr;gap:35px;margin-top:35px}.portrait{width:66%;margin:20px auto}.portrait img{max-height:320px}.about-lead{font-size:1.75rem}.experience{grid-template-columns:1fr}.section-heading p{font-size:1.1rem}.miya-feature{padding:26px;gap:27px}.miya-feature h3{font-size:3rem}.miya-proof img{border-width:7px}.metric strong{font-size:2.7rem}.miya-deep{padding:18px}.case-tablist button{padding:9px 11px;font-size:1rem}.stat-strip strong{font-size:2.5rem}.stat-strip>div{display:block}.evidence span{font-size:.9rem}.account-grid{gap:28px}.account-body{padding:24px}.account-body h3{font-size:2rem}.workflow{padding:26px}.workflow h3{font-size:2.2rem}.workflow-buttons button{font-size:.95rem}.work-image{height:230px}.work-card h3{font-size:1.9rem}.work-card>p:not(.eyebrow){min-height:0}.work-filters{gap:9px}.work-filters button{font-size:.95rem}.work-card .button{font-size:.9rem;padding:10px 12px}.work-grid{gap:30px}.work-card{padding:13px 13px 22px}footer img{opacity:.6}footer h2{font-size:2.7rem}}
@media(max-width:380px){nav{gap:8px}nav a{font-size:.84rem}.brand{font-size:1rem}h1{font-size:2.8rem}.apple-stage{height:290px}.apple-button{max-width:155px}.big-outline{font-size:4rem}.sticker{font-size:.75rem}.section h2{font-size:2.4rem}.miya-feature h3{font-size:2.6rem}.about-lead{font-size:1.6rem}.work-image{height:210px}.work-filters button{font-size:.85rem}}
/* Interactive labels use uneven contours, like cut-out paper stickers. */
.button,.contact-nav,.copy-contact,.text-link,.case-tablist button,.workflow-buttons button,.work-filters button,.lightbox-top button,.lightbox-controls button{position:relative;isolation:isolate;border:2px solid var(--blue);border-radius:43% 57% 48% 52% / 59% 43% 57% 41%;padding:15px 28px;box-shadow:3px 5px 0 #142ab524;transform:rotate(-3deg);transition:transform .2s,box-shadow .2s}
.button::after,.contact-nav::after,.copy-contact::after,.text-link::after,.case-tablist button::after,.workflow-buttons button::after,.work-filters button::after,.lightbox-top button::after,.lightbox-controls button::after{content:'';position:absolute;inset:5px;border:1px dashed currentColor;border-radius:48% 52% 43% 57% / 44% 58% 42% 56%;opacity:.6;pointer-events:none}
.button:hover,.contact-nav:hover,.copy-contact:hover,.text-link:hover,.case-tablist button:hover,.workflow-buttons button:hover,.work-filters button:hover,.lightbox-top button:hover,.lightbox-controls button:hover{transform:rotate(3deg) translateY(-3px);box-shadow:5px 7px 0 #142ab52b}
.button:active,.contact-nav:active,.copy-contact:active,.text-link:active,.case-tablist button:active,.workflow-buttons button:active,.work-filters button:active{transform:rotate(-1deg) translateY(2px);box-shadow:1px 2px 0 #142ab524}
.hero .button{min-height:86px;padding:22px 42px;border-radius:40% 60% 43% 57% / 54% 40% 60% 46%;font-family:var(--round);font-size:1.25rem;box-shadow:5px 7px 0 var(--paper);transform:rotate(-5deg)}.hero .button:hover{transform:rotate(3deg) translateY(-3px)}.hero .button::after{inset:8px;border-width:2px}
.contact-nav{padding:12px 27px;border-color:var(--blue)}.copy-contact{border-color:var(--paper)}.text-link{padding:13px 23px;font-family:var(--round);font-size:1rem}.case-tablist button,.work-filters button,.workflow-buttons button{padding:13px 23px}.case-tablist button:nth-child(2),.work-filters button:nth-child(even),.workflow-buttons button:nth-child(even){border-radius:56% 44% 57% 43% / 44% 57% 43% 56%;transform:rotate(3deg)}.case-tablist button[aria-selected=true],.work-filters button.active{box-shadow:4px 5px 0 #142ab530}.lightbox-top button,.lightbox-controls button{padding:11px 22px}nav a{position:relative;padding:8px 16px;border:1px dashed var(--blue);border-radius:47% 53% 44% 56% / 53% 44% 56% 47%;transform:rotate(-3deg);background:#f9c7da88;transition:transform .2s}nav a:nth-child(2){transform:rotate(3deg);background:#e4e8ff}nav a:hover{transform:rotate(0) scale(1.05)}
summary{margin-top:17px;padding:9px 16px;border:2px dashed var(--blue);border-radius:25px 45px 30px 38px;background:#e4e8ff;transform:rotate(-1deg)}.evidence,.work-image{border-radius:8px 17px 5px 13px}.work-image span{border-radius:43% 57% 48% 52% / 59% 43% 57% 41%;padding:10px 20px;border-style:dashed;transform:rotate(-4deg)}
@media(max-width:760px){nav{gap:8px}nav a{padding:7px 10px;font-size:.85rem}.hero .button{min-height:78px;padding:20px 38px;font-size:1.15rem}.work-card .button{padding:14px 22px}.work-filters button,.workflow-buttons button{padding:13px 17px;font-size:.9rem}.case-tablist button{padding:13px 15px;font-size:.95rem}.lightbox-top button,.lightbox-controls button{padding:10px 15px}}
@media(max-width:380px){nav{gap:5px}nav a{padding:6px 8px;font-size:.72rem}.case-tablist button{padding:12px 13px;font-size:.85rem}.work-filters button{font-size:.82rem}}
.map-link{position:absolute;display:flex;align-items:center;justify-content:center;width:190px;height:160px;pointer-events:auto;text-decoration:none;filter:drop-shadow(4px 6px 0 #142ab529);transition:transform .25s;z-index:6}.nav-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.shape-fill{stroke:var(--blue);stroke-width:2.5;stroke-linejoin:round}.shape-sketch{fill:none;stroke:var(--blue);stroke-width:1.2;stroke-dasharray:5 4;opacity:.6}.map-link b{position:relative;font:900 1.4rem "CrayonDisplay",var(--round);color:var(--blue);-webkit-text-stroke:.4px currentColor;transform:rotate(-4deg)}.map-star{left:-10%;top:4%;transform:rotate(-12deg)}.map-star .shape-fill{fill:#ffdf7e}.map-fruit{right:-9%;top:24%;transform:rotate(12deg)}.map-fruit .shape-fill{fill:#f8a1c7}.map-cloud{left:23%;bottom:-3%;transform:rotate(-7deg)}.map-cloud .shape-fill{fill:var(--blue)}.map-cloud .shape-sketch{stroke:var(--paper)}.map-cloud b{color:var(--paper)}.map-link:hover{transform:rotate(0) scale(1.09)}.map-link:active{transform:rotate(0) scale(.97)}.map-link:focus-visible{outline:3px dashed var(--blue);outline-offset:3px;border-radius:35%}.navigation-open .apple-caption{bottom:-50px;right:15%}.apple-caption{font-family:"CrayonDisplay",var(--round)}.navigation-open .apple-button{opacity:.82}
@media(max-width:760px){.map-link{width:133px;height:112px}.map-link b{font-size:1.02rem}.map-star{left:-5%;top:3%}.map-fruit{right:-5%;top:33%}.map-cloud{left:26%;bottom:-1%}.navigation-open .apple-caption{bottom:-38px;right:7%;font-size:.9rem}.hero:has(.navigation-open){padding-bottom:65px}}
@media(max-width:380px){.map-link{width:116px;height:98px}.map-link b{font-size:.9rem}}
h1,h2,h3,h4,.about-lead{font-family:"LooseHand",var(--hand)!important;letter-spacing:.015em!important;font-weight:700!important;-webkit-text-stroke:.3px currentColor;mask-image:none}.hero h1{line-height:1.25}.big-outline{mask-image:none}.hand-letter{display:inline-block;transform:rotate(var(--letter-turn,0deg)) translateY(var(--letter-shift,0px));transform-origin:50% 70%}.hero h1 .hand-letter{letter-spacing:.02em}h1>span:not(.hand-letter){box-shadow:0 5px 0 var(--blue)}
.hero h1 .hand-letter{background:none;box-shadow:none;padding:0;color:inherit}
footer .footer-slogan{display:block;border-bottom:0;max-width:calc(100% - 230px);transform:rotate(-2deg);margin:28px 0 44px;position:relative;z-index:1}footer .slogan-top{display:block;font-size:clamp(3.8rem,6vw,6.5rem);line-height:1.15;color:var(--pink);margin-bottom:24px}footer .slogan-rest{display:block;font-size:clamp(1.8rem,2.6vw,2.7rem);line-height:1.6}footer .slogan-gift{display:block;font-size:clamp(2.3rem,3.4vw,3.8rem);line-height:1.5;color:var(--paper);margin-top:12px}footer .slogan-gift::after{content:'';display:block;width:260px;max-width:65%;height:4px;background:var(--pink);transform:rotate(-2deg);margin-top:12px}footer>a[href^="tel:"]{white-space:nowrap;display:inline-block;position:relative;z-index:2;font-size:clamp(1.5rem,2.5vw,2rem);letter-spacing:.025em}footer img{width:210px;right:5%;top:auto;bottom:65px}
@media(max-width:760px){footer{padding:60px 6% 35px}footer .footer-slogan{max-width:100%;margin-bottom:36px}footer .slogan-top{font-size:4rem;margin-bottom:20px}footer .slogan-rest{font-size:1.55rem;line-height:1.6}footer .slogan-prefix,footer .slogan-price{display:block}footer .slogan-gift{font-size:2.1rem}footer img{width:125px;bottom:28px;right:-12px;opacity:.45}footer>a[href^="tel:"]{font-size:1.6rem}}
h1{-webkit-text-stroke:1.5px currentColor}h2{-webkit-text-stroke:1.1px currentColor}h3,.about-lead{-webkit-text-stroke:.95px currentColor}h4{-webkit-text-stroke:.6px currentColor}#about h2::after{-webkit-text-stroke:0}footer .slogan-top{-webkit-text-stroke:1.3px currentColor}footer .slogan-rest{-webkit-text-stroke:.7px currentColor}.map-link b{-webkit-text-stroke:.65px currentColor}
/* A softer palette keeps the scrapbook bright while preserving readable ink. */
:root{--pink:#edb6cf;--blue:#4e6598;--ink:#45516a;--paper:#fffaf4;--soft:#f3d6e3;--wash-blue:#becde7}
.ticker{background:var(--wash-blue);color:var(--blue)}.hero{background-image:repeating-linear-gradient(0deg,transparent 0 30px,#fffaf42b 30px 31px)}.apple-stage{background:#fffaf43d}.miya-feature{background:var(--wash-blue);color:var(--ink)}.miya-feature h3,.miya-feature .eyebrow,.metric strong{color:var(--blue)}.miya-proof img{box-shadow:5px 8px #4e659826}.miya-feature :focus-visible{outline-color:var(--blue)}.account-card:nth-child(even),.experience article:nth-child(2){background:#fae9f1}.strategy-grid>div{background:#fae9f1}.strategy-grid>div:nth-child(2){background:#e8edf6}.skills span:nth-child(even),.text-link,summary{background:#e6ecf6}.map-star .shape-fill{fill:#f1dea7}.map-fruit .shape-fill{fill:#e9bfd4}.map-cloud .shape-fill{fill:var(--wash-blue)}.map-cloud .shape-sketch{stroke:var(--blue)}.map-cloud b{color:var(--blue)}.map-link{filter:drop-shadow(4px 6px 0 #4e659824)}
footer{background:var(--wash-blue);color:var(--blue);border-color:var(--blue)}footer h2,footer .slogan-gift,footer small{color:var(--blue)}footer .slogan-top{color:#a85f82}footer .slogan-gift::after{background:#bc7c9d}.copy-contact{color:var(--blue);border-color:var(--blue)}.copy-feedback{color:var(--blue)}footer :focus-visible{outline-color:var(--blue)}.work-card:nth-child(even){background:#fae9f1}.button,.contact-nav,.copy-contact,.text-link,.case-tablist button,.workflow-buttons button,.work-filters button,.lightbox-top button,.lightbox-controls button{box-shadow:3px 5px 0 #4e659824}.hero .button{box-shadow:5px 7px 0 var(--paper)}
.workflow-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.workflow-buttons .process-shape{height:116px;width:100%;padding:0;border:0;background:transparent;border-radius:0;box-shadow:none;position:relative;filter:drop-shadow(3px 4px 0 #4e659820)}.workflow-buttons .process-shape::after{display:none}.process-shape svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.process-shape .shape-fill{fill:#f1dea7}.process-shape:nth-child(2) .shape-fill{fill:#e9bfd4}.process-shape:nth-child(3) .shape-fill{fill:var(--wash-blue)}.process-shape:nth-child(4) .shape-fill{fill:#cddcc9}.process-label{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;color:var(--blue);font-family:"LooseHand",var(--hand);line-height:1.2;transform:rotate(-3deg)}.process-label small{font:700 .8rem Arial;letter-spacing:.08em;margin-bottom:5px}.process-label b{font-size:1.35rem;-webkit-text-stroke:.4px currentColor}.workflow-buttons .process-shape.active{background:transparent;box-shadow:none}.process-shape.active .shape-fill{fill:var(--blue)}.process-shape.active .shape-sketch{stroke:var(--paper)}.process-shape.active .process-label{color:var(--paper)}.workflow-buttons .process-shape:hover{box-shadow:none;transform:rotate(1deg) scale(1.07)}.workflow-buttons .process-shape:focus-visible{border-radius:35%;outline:3px dashed var(--blue);outline-offset:3px}
@media(max-width:760px){.workflow-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}.workflow-buttons .process-shape{height:112px}.process-label b{font-size:1.25rem}}
.publication-card .work-image{height:440px;background:#e8edf6}.publication-card .work-image img{object-fit:contain}.publication-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:22px 0 14px;padding:17px 12px;background:#e6ecf6;border:1px dashed var(--blue);border-radius:8px 15px 5px 10px}.publication-stats div{text-align:center}.publication-stats dt{font-size:.8rem}.publication-stats dd{margin:5px 0 0;font:700 1.45rem var(--round);color:var(--blue)}.publication-card .source-note{min-height:0!important;margin:15px 0 24px;font-size:.8rem}
@media(max-width:760px){.publication-card .work-image{height:430px}.publication-stats{gap:5px;padding:14px 8px}.publication-stats dd{font-size:1.3rem}}
.work-image .view-sticker{width:126px;height:82px;display:flex;align-items:center;justify-content:center;bottom:12px;right:12px;padding:0;background:transparent;border:0;border-radius:0;transform:rotate(-8deg);filter:drop-shadow(3px 4px 0 #4e65982b);transition:transform .25s;pointer-events:none}.view-sticker svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.view-sticker .shape-fill{fill:#f1dea7;stroke:var(--blue);stroke-width:2.5}.view-sticker b{position:relative;font:900 1.08rem "CrayonDisplay",var(--round);color:var(--blue);-webkit-text-stroke:.3px currentColor;transform:rotate(-2deg)}.work-card:nth-child(even) .view-sticker .shape-fill{fill:#e9bfd4}.work-image:hover .view-sticker{transform:rotate(4deg) scale(1.07)}.work-image:active .view-sticker{transform:rotate(-2deg) scale(.95)}
@media(max-width:760px){.work-image .view-sticker{width:116px;height:76px;right:8px;bottom:10px}.view-sticker b{font-size:1rem}}
.footer-doodles{position:absolute;inset:0;pointer-events:none;overflow:hidden}.footer-doodle{position:absolute;width:160px;height:160px;background-image:url('assets/footer-stickers.png');background-size:300% 200%;background-repeat:no-repeat;opacity:.94}.doodle-star{background-position:0 0;right:7%;top:25px;transform:rotate(15deg);width:135px;height:135px}.doodle-apple{background-position:50% 0;right:4%;bottom:32px;width:190px;height:190px;transform:rotate(-12deg)}.doodle-flower{background-position:100% 0;right:16%;top:190px;transform:rotate(-12deg);width:145px;height:145px}.doodle-heart{background-position:0 100%;right:5%;top:360px;transform:rotate(12deg);width:125px;height:125px}.doodle-bow{background-position:50% 100%;right:25%;bottom:40px;transform:rotate(16deg);width:125px;height:125px}.doodle-orbit{background-position:100% 100%;right:-2%;top:155px;width:170px;height:170px;transform:rotate(-15deg)}footer>img{display:none}footer>p,footer>a,footer>.copy-contact,footer>.copy-feedback,footer>small{position:relative;z-index:2}footer .footer-slogan{max-width:calc(100% - 320px)}footer>p:first-of-type{display:inline-block;padding:6px 15px;border:1px dashed var(--blue);border-radius:12px 5px 15px 8px;background:#fffaf47a}
@media(max-width:1000px) and (min-width:761px){footer .footer-slogan{max-width:calc(100% - 220px)}.doodle-flower{right:8%;top:225px}.doodle-orbit{right:-5%}.doodle-bow{right:24%}}
@media(max-width:760px){footer .footer-slogan{max-width:100%}.doodle-star{width:90px;height:90px;top:270px;right:-14px;transform:rotate(15deg)}.doodle-flower{width:100px;height:100px;top:25px;right:8px;transform:rotate(-12deg)}.doodle-heart{width:95px;height:95px;top:390px;right:0;transform:rotate(12deg)}.doodle-bow{width:90px;height:90px;bottom:14px;right:135px}.doodle-apple{width:125px;height:125px;bottom:8px;right:-8px}.doodle-orbit{width:110px;height:110px;top:170px;right:-40px;opacity:.7}}
@media(max-width:380px){.doodle-star{width:72px;height:72px;top:270px;right:-22px}.doodle-orbit{right:-55px}.doodle-heart{width:78px;height:78px;right:-13px;top:407px}.doodle-bow{right:108px;width:80px;height:80px}.doodle-apple{width:105px;height:105px;right:-10px}}
.miya-folder{border:0;margin:36px 0 58px}.miya-folder>summary{margin:0;padding:20px 28px;background:var(--soft);border:2px dashed var(--blue);border-radius:20px 44px 25px 38px;transform:rotate(-.6deg);box-shadow:5px 6px #4e659818;gap:20px}.miya-folder-label{display:block;font:900 1.6rem "LooseHand",var(--hand);color:var(--blue)}.miya-folder-label small{display:block;font:400 .85rem "Microsoft YaHei",sans-serif;color:var(--ink);margin-top:9px;letter-spacing:.04em}.miya-folder>summary>b{font-size:2rem;border:1px dashed var(--blue);border-radius:45% 55% 42% 58%;padding:7px 10px;background:var(--paper)}.miya-folder[open]>summary{background:#e6ecf6}.miya-folder .miya-deep{margin:23px 0 0}.miya-evidence-folder{border:0;margin:15px 0 20px}.miya-evidence-folder>summary{margin-top:0;padding:12px 18px;border-radius:18px 28px 21px 26px;background:var(--soft);transform:none;font-size:1.05rem}.miya-evidence-folder .evidence-gallery{margin-top:23px}.miya-evidence-folder .data-note{padding:12px 5px 0}.miya-folder .source-note{margin-top:24px}.miya-folder:not([open])>.miya-deep{display:none}
@media(max-width:760px){.miya-folder{margin:30px 0 42px}.miya-folder>summary{padding:18px 21px}.miya-folder-label{font-size:1.35rem}.miya-folder-label small{font-size:.75rem;letter-spacing:0}.miya-folder .miya-deep{padding:20px 17px}.miya-evidence-folder>summary{font-size:1rem;padding:10px 15px}}
footer{isolation:isolate;background-color:#c3cee3;background-image:radial-gradient(ellipse at 4% 18%,#fffaf451,transparent 55%),radial-gradient(ellipse at 96% 70%,#f3d6e332,transparent 46%),linear-gradient(105deg,#fffaf414,transparent 27%,#4e659805 73%,#fffaf419)}footer::before{content:'';position:absolute;inset:0;background:url('assets/paper-fibers.svg') repeat;background-size:360px 360px;mix-blend-mode:multiply;opacity:.55;pointer-events:none;z-index:0}footer::after{content:'';position:absolute;inset:12px;border:1px solid #fffaf44f;border-radius:3px 7px 4px 6px;box-shadow:inset 0 0 32px #fffaf429,0 0 15px #4e65980b;pointer-events:none;z-index:0}.footer-doodles{z-index:1}footer .footer-slogan{z-index:2}
@media(max-width:760px){footer::after{inset:9px;border-color:#fffaf455}footer::before{opacity:.6;background-size:290px 290px}}
.work-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;width:min(660px,100%);margin:32px 0 42px;align-items:center}.work-filters .filter-shape{position:relative;isolation:isolate;width:100%;height:138px;border:0;background:transparent;border-radius:0;padding:0;box-shadow:none;transform:rotate(-4deg);filter:drop-shadow(3px 5px 0 #4e659820)}.work-filters .filter-shape:nth-child(even){transform:rotate(4deg)}.filter-shape::after{display:none}.filter-shape svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.filter-shape .shape-fill{fill:#f1dea7}.filter-shape:nth-child(2) .shape-fill{fill:#e9bfd4}.filter-shape:nth-child(3) .shape-fill{fill:var(--wash-blue)}.filter-shape:nth-child(4) .shape-fill{fill:#cddcc9}.work-filters .filter-label{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;gap:5px;color:var(--blue);font-family:"LooseHand",var(--hand)}.filter-label b{font-size:1.4rem;line-height:1.05;-webkit-text-stroke:.5px currentColor}.filter-label small{font:700 .75rem var(--round);line-height:1;letter-spacing:.03em}.work-filters .filter-shape.active{background:transparent;box-shadow:none}.filter-shape.active .shape-fill{fill:var(--blue)}.filter-shape.active .shape-sketch{stroke:var(--paper)}.filter-shape.active .filter-label{color:var(--paper)}.work-filters .filter-shape:hover{transform:rotate(0) translateY(-3px);box-shadow:none}.work-filters .filter-shape:active{transform:rotate(0) scale(.96)}.work-filters .filter-shape:focus-visible{outline:3px dashed var(--blue);outline-offset:3px;border-radius:35%}
@media(max-width:760px){.work-filters{gap:7px;width:100%;margin:28px 0 35px}.work-filters .filter-shape{height:96px}.filter-label b{font-size:1.03rem;line-height:1.08}.filter-label small{font-size:.63rem}.work-filters .filter-label{gap:4px}}
@media(max-width:380px){.work-filters{gap:4px}.work-filters .filter-shape{height:87px}.filter-label b{font-size:.92rem}.filter-label small{font-size:.58rem}.work-filters .filter-label{gap:3px}}
.work-filters .filter-shape{display:flex;align-items:center;justify-content:center}.work-filters .filter-label{width:100%;gap:0}.filter-label small{position:absolute;top:-16px;right:9%;width:23px;height:23px;border:1px solid var(--blue);border-radius:45% 55% 42% 58%;background:var(--paper);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:.78rem}.filter-label b{font-family:"CrayonDisplay",var(--round);-webkit-text-stroke:.3px currentColor}
@media(max-width:760px){.filter-label b{font-size:.95rem;line-height:1.18}.filter-label small{top:-15px;right:0;width:18px;height:18px;font-size:.63rem}.filter-label{transform:translateY(4px)}}
@media(max-width:380px){.filter-label b{font-size:.84rem}.filter-label small{width:17px;height:17px;font-size:.58rem;top:-13px}}
.miya-feature .miya-folder{grid-column:1/-1;margin:0;border-top:2px dashed var(--blue);padding-top:0}.miya-feature .miya-folder>summary{margin-top:17px;padding:9px 16px;border:2px dashed var(--blue);border-radius:25px 45px 30px 38px;background:#e6ecf6;transform:rotate(-1deg);box-shadow:none;font-family:var(--hand);font-size:1.2rem;font-weight:800}.miya-feature .miya-folder>summary>b{font-size:1.7rem;border:0;border-radius:0;background:transparent;padding:0}.miya-feature .miya-folder .miya-deep{margin-top:24px;color:var(--ink)}.miya-feature .miya-folder p{max-width:none}.miya-feature{margin-bottom:58px}
@media(max-width:760px){.miya-feature{margin-bottom:40px}.miya-feature .miya-folder>summary{padding:9px 16px;font-size:1.2rem}.miya-feature .miya-folder .miya-deep{padding:20px 15px}}
.work-filters{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;width:min(560px,100%)}.filter-shape[data-filter="ai"] .shape-fill{fill:#e9bfd4}.filter-shape[data-filter="video"] .shape-fill{fill:var(--wash-blue)}.filter-shape[data-filter="design"] .shape-fill{fill:#cddcc9}.filter-shape.active .shape-fill{fill:var(--blue)}
@media(max-width:760px){.work-filters{width:100%;gap:14px}.work-filters .filter-shape{height:112px}.filter-label b{font-size:1.12rem}.filter-label small{right:5%;top:-17px;width:20px;height:20px;font-size:.7rem}}
@media(max-width:380px){.work-filters{gap:10px}.work-filters .filter-shape{height:100px}.filter-label b{font-size:1rem}.filter-label small{right:0;top:-16px;width:19px;height:19px;font-size:.65rem}}
@font-face{font-family:"EnglishHand";src:url('assets/fonts/Caveat.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap}
footer>p:first-of-type{font:700 clamp(2rem,3.5vw,3.8rem)/1 "EnglishHand",cursive;letter-spacing:.015em;-webkit-text-stroke:.35px currentColor;display:inline-block;border:0;border-radius:0;background:transparent;padding:0 4px;transform:rotate(-12deg);transform-origin:left center;margin:26px 0 42px;color:var(--blue)}footer>p:first-of-type::after{content:'';position:absolute;left:4px;right:-5px;bottom:-9px;border-top:3px solid #bc7c9d;border-radius:50%;transform:rotate(2deg);opacity:.85}
@media(max-width:760px){footer>p:first-of-type{font-size:2.15rem;margin:24px 0 40px;transform:rotate(-12deg)}footer>p:first-of-type::after{border-top-width:2px;bottom:-7px}}
header{gap:32px}header .name-stamp-trigger{border:0;background:transparent;text-align:left;padding:0;flex:0 0 auto;cursor:pointer;color:var(--blue)}.brand .brand-letters{display:inline-flex;font-size:inherit;line-height:1.2;letter-spacing:-.03em}.brand .brand-letter{display:inline-block;font-size:inherit;line-height:inherit;letter-spacing:0}.name-stamp-trigger:hover{color:#a85f82}.is-stamping .brand-letter{animation:name-hop .55s ease both;animation-delay:var(--letter-delay)}@keyframes name-hop{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-5px) rotate(-7deg)}70%{transform:translateY(1px) rotate(4deg)}}
.reading-track{position:relative;height:58px;flex:1;max-width:500px;min-width:75px;margin-inline:auto}.reading-line{position:absolute;left:22px;right:22px;top:22px;height:4px;border-top:2px dashed #4e659862}.reading-ink{display:block;position:absolute;top:-2px;left:0;height:4px;width:0;background:#bc7c9d;border-radius:50%;transform:rotate(-.4deg)}.reading-apple{position:absolute;left:0;top:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;transform:rotate(var(--apple-tilt,0deg));border-radius:45% 55% 42% 58%;transition:transform .2s;text-decoration:none}.reading-apple img{height:39px;width:auto;filter:drop-shadow(2px 3px 0 #4e659817)}.reading-apple:hover{transform:rotate(-10deg) scale(1.12);background:#f3d6e366}.reading-hint{position:absolute;top:46px;left:0;right:0;text-align:center;font:.72rem/1 "Microsoft YaHei",sans-serif;letter-spacing:.04em;color:var(--blue)}
.greeting-stamp{position:absolute;top:calc(100% + 12px);left:4.4%;width:310px;max-width:calc(100vw - 32px);padding:25px 29px 27px;background:#f8e5ee;color:var(--blue);border:3px solid var(--blue);border-radius:31px 19px 35px 23px;box-shadow:6px 7px 0 #4e659826;transform:rotate(-5deg);z-index:40;animation:stamp-arrive .38s ease-out both}.greeting-stamp::before{content:'';position:absolute;inset:7px;border:1.5px dashed #4e65987a;border-radius:24px 14px 29px 17px;pointer-events:none}.stamp-salute{display:block;font:700 2.4rem/1.05 "EnglishHand","LooseHand",var(--hand);color:#a85f82;transform:rotate(-3deg);-webkit-text-stroke:.35px currentColor}.stamp-message{display:block;font:700 1.7rem/1.2 "LooseHand",var(--hand);margin-top:12px;-webkit-text-stroke:.55px currentColor;transform:rotate(1deg)}@keyframes stamp-arrive{0%{opacity:0;transform:rotate(-12deg) scale(1.17) translateY(-8px)}65%{opacity:1;transform:rotate(-3deg) scale(.98)}100%{opacity:1;transform:rotate(-5deg) scale(1)}}
@media(max-width:760px){header{gap:20px}.reading-track{max-width:none}.greeting-stamp{left:16px;width:285px;padding:23px 26px}.stamp-salute{font-size:2.2rem}.stamp-message{font-size:1.58rem}.reading-hint{font-size:.65rem}}
@media(max-width:380px){header{gap:15px}.reading-hint{font-size:.6rem}.greeting-stamp{width:270px}.stamp-message{font-size:1.48rem}}
/* Reuse the illustrated stickers as softly printed motifs on pastel paper. */
body{background-color:#f9ede4}.section{position:relative;isolation:isolate}.section::before{content:'';position:absolute;inset:0;z-index:-1;background-image:url('assets/footer-stickers.png');background-repeat:repeat;background-size:600px 400px;background-position:20px 35px;opacity:.15;pointer-events:none}#about{background-color:#f7eadf}#cases{background-color:#f2eaf0}#works::before{background-size:530px 353px;background-position:100px 50px;opacity:.14}.account-card{background-color:#fbf2df}.account-card:nth-child(even){background-color:#f7e6ed}.miya-folder .miya-deep{background-color:#fbf2e6}.work-card{background-color:#fbf2e4}.work-card:nth-child(even){background-color:#f7e7ee}.experience article{background-color:#fbf1e3}.portrait{border-color:#fbf1e3}.portrait span{background-color:#fbf1e3}
@media(max-width:760px){.section::before{background-size:430px 287px;background-position:22px 35px;opacity:.16}#works::before{background-size:420px 280px;opacity:.13}}
/* A soft paper gradient and handwritten signature connect the header to the notebook. */
header{background:linear-gradient(112deg,#f9e5ed 0%,#f3e6ef 44%,#dfe9f6 100%);border-bottom-color:#788ab0;box-shadow:0 3px 12px #4e65980b}
header .name-stamp-trigger{font-family:"EnglishHand",cursive;font-weight:700;font-size:1.75rem;line-height:1.05;letter-spacing:.015em;transform:none}
header .brand-letters{font-family:"EnglishHand",cursive;line-height:1.05;letter-spacing:.02em;transform:rotate(-3deg);transform-origin:left center;-webkit-text-stroke:.2px currentColor}
header .brand-letter:nth-child(3n+1){transform:rotate(-3deg)}
header .brand-letter:nth-child(3n+2){transform:rotate(2deg) translateY(-1px)}
header .name-stamp-trigger>span:last-child{font:700 1.05rem/1.3 "LooseHand",var(--hand);letter-spacing:.12em;margin-top:5px;transform:rotate(-3deg);-webkit-text-stroke:.2px currentColor}
.reading-line{border-top-color:#7e8db66b}.reading-ink{background:linear-gradient(90deg,#be81a0,#8499bf)}
@media(max-width:380px){header .name-stamp-trigger{font-size:1.65rem}header .name-stamp-trigger>span:last-child{font-size:1rem}}
/* The existing crayon flower blooms into a small thank-you note. */
.flower-secret{position:absolute;right:16%;top:190px;width:145px;height:145px;z-index:5}
.flower-secret-button{display:block;width:100%;height:100%;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;transform:rotate(-12deg);transition:transform .25s;touch-action:manipulation}
.flower-secret-button:hover:not([aria-disabled="true"]){transform:rotate(-5deg) scale(1.08)}
.flower-secret-button:focus-visible{outline:2px dashed var(--blue);outline-offset:2px}
.flower-secret-button[aria-disabled="true"]{cursor:default}
.flower-art{position:absolute;inset:0;display:block;pointer-events:none;transform-origin:50% 65%;filter:drop-shadow(3px 5px 0 #4e65982b) drop-shadow(0 7px 6px #4e659826)}
.flower-secret:not(.has-bloomed):not(.is-blooming) .flower-art{animation:flower-gentle-sway 3.6s ease-in-out infinite}
.flower-secret-button:hover .flower-art{animation-play-state:paused}
@keyframes flower-gentle-sway{0%,100%{transform:rotate(-3deg) translateY(0)}35%{transform:rotate(4deg) translateY(-2px)}70%{transform:rotate(-2deg) translateY(-1px)}}
.flower-petal,.flower-center{position:absolute;inset:0;display:block;background:url('assets/footer-stickers.png') 100% 0/300% 200% no-repeat;transform-origin:50% 59%}
.petal-1{clip-path:polygon(50% 59%,10% 0,60% 0)}
.petal-2{clip-path:polygon(50% 59%,60% 0,100% 0,100% 55%)}
.petal-3{clip-path:polygon(50% 59%,100% 55%,100% 100%,74% 100%)}
.petal-4{clip-path:polygon(50% 59%,74% 100%,35% 100%)}
.petal-5{clip-path:polygon(50% 59%,35% 100%,0 100%,0 73%)}
.petal-6{clip-path:polygon(50% 59%,0 73%,0 0,10% 0)}
.flower-center{clip-path:circle(14% at 50% 59%)}
.is-blooming .flower-petal{animation:flower-unfold .5s cubic-bezier(.2,.8,.2,1.2) var(--petal-delay) both}
.is-blooming .flower-center{animation:flower-center-pop .65s ease both}
@keyframes flower-unfold{0%{transform:scale(.12);opacity:0}70%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes flower-center-pop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.flower-secret-note{position:absolute;top:calc(100% - 2px);right:-18px;width:245px;padding:25px 30px 23px 25px;background:#fff2ce;color:var(--blue);border:2px solid #8596b7;border-radius:4px 15px 7px 12px;box-shadow:5px 7px 0 #4e659824;transform:rotate(3deg);animation:flower-note-arrive .3s ease-out both}
.flower-secret-note::before{content:'';position:absolute;width:58px;height:20px;top:-11px;left:calc(50% - 29px);background:#eab6cfb3;border-inline:1px dashed #bc7c9d8c;transform:rotate(-7deg);pointer-events:none}
.flower-secret-note p{margin:0;font:700 1.7rem/1.35 "LooseHand",var(--hand);letter-spacing:.025em;-webkit-text-stroke:.2px currentColor}
.flower-note-close{position:absolute;top:5px;right:6px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px dashed #8596b7;border-radius:45% 55% 42% 58%;background:#f3d6e380;color:var(--blue);font:400 1.4rem/1 Arial;cursor:pointer}
@keyframes flower-note-arrive{from{opacity:0;transform:translateY(8px) rotate(-2deg) scale(.94)}to{opacity:1;transform:translateY(0) rotate(3deg) scale(1)}}
@media(max-width:1000px) and (min-width:761px){.flower-secret{right:8%;top:225px}}
@media(max-width:760px){.flower-secret{right:8px;top:25px;width:100px;height:100px}.flower-secret-note{right:8px;top:calc(100% + 3px);width:220px;padding:23px 27px 21px 22px}.flower-secret-note p{font-size:1.55rem}}
@media(prefers-reduced-motion:reduce){.flower-secret-button{transition:none}.is-blooming .flower-petal,.is-blooming .flower-center,.flower-secret-note,.flower-secret:not(.has-bloomed):not(.is-blooming) .flower-art{animation:none}}
/* Both sides of the portrait remain part of a single keyboard-accessible photo card. */
#about .portrait{border:0;background:none;box-shadow:none;perspective:1200px}
.portrait-flip-card{display:block;width:100%;padding:0;border:0;background:none;text-align:left;color:var(--blue);cursor:pointer;touch-action:manipulation}
.portrait-flip-card:focus-visible{outline:3px dashed var(--blue);outline-offset:12px}
.portrait-flip-inner{display:block;position:relative;width:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.25,.7,.2,1)}
.portrait-flip-card.is-flipped .portrait-flip-inner{transform:rotateY(180deg)}
#about .portrait .portrait-front{display:block;position:relative;padding:0;border:8px solid #fbf1e3;box-shadow:12px 12px var(--soft);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fbf1e3}
.portrait-flip-card .portrait-front img{display:block;width:100%;max-height:550px;object-fit:cover}
#about .portrait .portrait-caption{display:block;padding:15px 12px 13px;background:#fbf1e3;font:700 1rem/1.3 "LooseHand",var(--hand);color:var(--blue)}
#about .portrait .portrait-flip-hint{display:block;background:none;padding:6px 0 0;font:400 .85rem/1.3 "LooseHand",var(--hand);color:#98677f}
#about .portrait .portrait-back{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:15px;padding:26px;border:8px solid #fbf1e3;box-shadow:12px 12px var(--soft);background-color:#f5dce7;background-image:repeating-linear-gradient(0deg,transparent 0 30px,#4e65980d 30px 31px),url('assets/paper-fibers.svg');background-size:auto,300px 300px;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
#about .portrait .portrait-back::before{content:'';position:absolute;right:-20px;bottom:20px;width:115px;height:115px;background:url('assets/footer-stickers.png') 0 100%/300% 200% no-repeat;opacity:.3;pointer-events:none}
#about .portrait .portrait-back span{display:block;position:relative;padding:0;background:none;color:var(--blue)}
#about .portrait .portrait-back-hello{font:700 clamp(1.8rem,3vw,2.8rem)/1 "EnglishHand",cursive;transform:rotate(-7deg);color:#a85f82}
#about .portrait .portrait-back-name{font:700 clamp(1.6rem,2.5vw,2.4rem)/1.2 "LooseHand",var(--hand);-webkit-text-stroke:.3px currentColor}
#about .portrait .portrait-back-copy{font:400 clamp(1rem,1.4vw,1.35rem)/1.65 "LooseHand",var(--hand)}
#about .portrait .portrait-back-signature{font:700 2rem/1 "EnglishHand",cursive;align-self:flex-end;transform:rotate(-8deg);color:#a85f82}
#about .portrait .portrait-return-hint{font:400 .85rem/1.3 "LooseHand",var(--hand);margin-top:5px}
@media(max-width:760px){.portrait-flip-card .portrait-front img{max-height:320px}#about .portrait .portrait-back{padding:20px;gap:13px}#about .portrait .portrait-back-copy{font-size:1.02rem}#about .portrait .portrait-caption{padding:12px 8px}#about .portrait .portrait-back-name{font-size:1.7rem}}
@media(max-width:380px){#about .portrait{width:76%}#about .portrait .portrait-back{padding:16px;gap:10px}}
@media(prefers-reduced-motion:reduce){.portrait-flip-inner{transition:none}}
.reading-slider{position:absolute;left:0;top:0;z-index:3;display:block;width:100%;height:44px;margin:0;padding:0;border:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:grab;touch-action:none;outline:none}
.reading-slider::-webkit-slider-runnable-track{height:4px;background:transparent;border:0}
.reading-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:44px;height:44px;margin-top:-20px;border:0;border-radius:50%;background:transparent}
.reading-slider::-moz-range-track{height:4px;background:transparent;border:0}
.reading-slider::-moz-range-thumb{width:44px;height:44px;border:0;border-radius:50%;background:transparent}
.reading-track .reading-apple{pointer-events:none}
.reading-track:focus-within{outline:2px dashed #788ab0;outline-offset:3px;border-radius:7px 12px 8px 10px}
.reading-track.is-scrubbing .reading-slider{cursor:grabbing}
.reading-track:hover .reading-apple,.reading-track.is-scrubbing .reading-apple{transform:rotate(var(--apple-tilt,0deg)) scale(1.08)}
:is(.account-card,.miya-feature) .account-description{position:relative;margin:23px 0 27px;padding:17px 20px 18px 22px;max-width:36rem;border-left:3px solid #bb81a0;border-radius:3px 12px 7px 4px;background:linear-gradient(110deg,#fffaf4d6,#fffaf466);box-shadow:2px 3px 0 #4e65980b;font-size:1.03rem;line-height:1.85;letter-spacing:.025em;text-wrap:pretty;color:#4e6598}
:is(.account-card,.miya-feature) .account-description::after{content:'';position:absolute;left:21px;bottom:8px;width:44px;border-top:2px solid #e5b3ca80;transform:rotate(-3deg);border-radius:50%;pointer-events:none}
@media(max-width:760px){:is(.account-card,.miya-feature) .account-description{padding:15px 16px 17px 18px;font-size:1rem;line-height:1.85;letter-spacing:.015em;text-wrap:balance}:is(.account-card,.miya-feature) .account-description::after{left:18px}}
.account-copy-line{display:block;text-wrap:balance}.account-copy-line .music-phrase{white-space:nowrap}
#about .portrait .portrait-back::before{display:none}
#about .portrait .portrait-back .portrait-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:108px;margin-top:2px}
#about .portrait .portrait-bottom .portrait-back-signature{align-self:center;transform:rotate(-8deg);margin-left:4px}
#about .portrait .portrait-alien{position:static;display:block;width:95px;height:116px;max-height:none;object-fit:contain;opacity:.9;transform:rotate(8deg);flex:0 0 auto;pointer-events:none}
@media(max-width:760px){#about .portrait .portrait-back .portrait-bottom{min-height:96px;gap:15px}#about .portrait .portrait-alien{width:82px;height:100px}}
@media(max-width:380px){#about .portrait .portrait-back .portrait-bottom{min-height:84px;gap:12px}#about .portrait .portrait-alien{width:70px;height:86px}}