:root{--paper:#faf9f6;--ink:#302d2e;--muted:#777170;--pink:#e98cab;--rose:#f4b7ca;--line:#dedbd7;--serif:Georgia,'Times New Roman','Songti SC',SimSun,serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'Microsoft YaHei',sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #b23b68;outline-offset:6px}button{border:0;background:none}a{color:inherit;text-decoration:none}header{height:104px;margin:0 6.5% 0 9.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-family:var(--serif);font-size:45px;letter-spacing:-3px;font-weight:bold}.wordmark span{color:var(--pink);font-size:32px;display:inline-block;margin-left:8px;vertical-align:top;padding-top:5px}.header-note{font-size:10px;letter-spacing:2px;color:var(--muted)}.text-button{font-size:12px;padding:12px 0}.text-button span{margin-left:20px;font-size:18px}.bookmarks{position:fixed;left:0;top:210px;z-index:5;display:flex;flex-direction:column;gap:13px;align-items:flex-start}.bookmark{display:flex;align-items:center;gap:17px;width:49px;height:65px;background:#eeece7;border-radius:0 3px 3px 0;overflow:hidden;white-space:nowrap;padding:0 16px 0 11px;transition:width .25s,background .25s;box-shadow:1px 2px 4px #3d252309}.bookmark:after{content:'';position:absolute;left:10px;width:3px;height:15px;background:#302d2e20}.bookmark span{font-size:10px;writing-mode:vertical-rl;margin-left:11px;letter-spacing:1px}.bookmark b{font-size:12px;font-weight:400}.bookmark.active{background:var(--rose)}.bookmark:hover,.bookmark:focus-visible{width:141px;background:var(--rose)}main{max-width:1380px;margin:0 auto;padding:0 6.5% 0 9.5%}.intro{padding-top:48px}.eyebrow{display:flex;gap:9px;align-items:center;font-size:10px;letter-spacing:1.7px}.dot{width:6px;height:6px;border-radius:50%;background:var(--pink)}.intro-line{display:flex;justify-content:space-between;align-items:center;margin-top:22px;margin-bottom:39px}h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.2vw,64px);line-height:1.28;letter-spacing:2px;margin:0}.pink-word{position:relative;white-space:nowrap;z-index:0}.pink-word:after{content:'';height:15px;background:#f4b7ca80;position:absolute;left:2px;right:3px;bottom:5px;z-index:-1;transform:rotate(-2deg)}.intro-side{padding:0 28px 0 18px}.hand-note{font:italic 21px var(--serif);color:#ae5876}.intro-side p{font-size:12px;line-height:1.9;color:#6c6566;margin:13px 0}.instruction{font-size:10px;color:#756e6e;letter-spacing:1px}.instruction span{font-size:18px;color:#b25b7b;margin-right:7px}.library-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;margin-bottom:28px}.library-heading i{font-size:10px;font-style:normal;color:var(--muted);letter-spacing:0;margin-left:8px}.shelf-row{height:302px;display:flex;align-items:flex-end;justify-content:center;gap:18px;padding:0 35px 13px;position:relative;background:linear-gradient(0deg,#ece9e45c,transparent 70px)}.shelf-row:after{content:'';height:13px;position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#fff,#e7e4df);box-shadow:0 10px 16px #2d242519;border-top:1px solid #fff;border-bottom:1px solid #dbd7d2}.shelf-label{display:flex;justify-content:space-between;padding:19px 1px 0;color:var(--muted);font-size:9px;letter-spacing:1.5px}.shelf-label>span:last-child{letter-spacing:2px}.second{height:281px;margin-top:17px}.book{position:relative;height:var(--height);width:var(--width);flex:0 0 var(--width);background:var(--book);color:var(--text,#353034);border-radius:2px 5px 3px 1px;box-shadow:inset 4px 0 4px #ffffff35,inset 7px 0 2px #00000008,inset -3px 0 3px #00000013,5px 2px 7px #302d2e16;transform:rotate(var(--lean,0deg));transform-origin:bottom center;padding:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;z-index:1;text-align:left}.book:before{content:'';position:absolute;left:8px;top:0;bottom:0;border-left:1px solid #ffffff30}.book:hover,.book:focus-visible{transform:translateY(-19px) rotate(0);box-shadow:inset 4px 0 4px #ffffff35,10px 15px 18px #302d2e25;z-index:3}.spine-inner{height:100%;display:flex;align-items:center;flex-direction:column;padding:19px 10px}.book-number{font-size:9px;letter-spacing:1.2px}.spine-title{writing-mode:vertical-rl;font-family:var(--serif);font-size:23px;letter-spacing:.8px;margin:auto;line-height:1}.spine-subtitle{font-size:8px;letter-spacing:.6px;writing-mode:vertical-rl;margin:auto 0 15px}.spine-brand{font-family:var(--serif);font-size:16px}.face{padding:21px 21px 17px;display:flex;flex-direction:column}.face:after{content:'';position:absolute;top:4px;bottom:4px;right:-6px;width:6px;background:repeating-linear-gradient(0deg,#e1ddd5 0 1px,#f8f5ed 1px 3px);z-index:-1;transform:skewY(-28deg)}.cover-meta{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px}.cover-name{font:38px/.95 var(--serif);letter-spacing:-1.8px;margin:18px 0 0;z-index:1}.cover-sub{font-size:8px;margin-top:8px;letter-spacing:1.2px}.cover-art{flex:1;position:relative;min-height:80px;display:grid;place-items:center}.cover-footer{font-size:8px;letter-spacing:1.4px;display:flex;justify-content:space-between}.art{width:100%;height:100%;position:relative;overflow:hidden;display:grid;place-items:center;background:var(--art-bg,#f1dce2);min-height:100px}.cover-art .art{background:none;overflow:visible;min-height:0}.orb{width:57%;aspect-ratio:1;border-radius:50%;background:linear-gradient(130deg,#ffeaef,#d87898);box-shadow:12px 16px 25px #9b47662b;position:relative}.orb:after{content:'';position:absolute;width:57%;height:57%;border-radius:50%;background:#f0bdce;top:22%;left:22%;box-shadow:inset 7px 8px 14px #a6537540,inset -4px -4px 10px #fff9}.loop{height:76%;width:41%;background:linear-gradient(90deg,#cb728e,#f7b8c8 49%,#ac536d);border-radius:60px;transform:rotate(32deg);box-shadow:10px 12px 20px #84526b22}.loop:after{content:'';position:absolute;inset:12% 27%;border-radius:60px;background:var(--art-bg,#f4d9e3);box-shadow:inset 5px 1px 9px #91576d40}.petal{width:43%;height:65%;border-radius:90% 5% 90% 5%;background:#b6c5b0;box-shadow:12px 10px 0 #546e54;transform:rotate(-20deg)}.grid-art{width:66%;aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;transform:rotate(-8deg)}.grid-art i{background:#f5a8c1;border-radius:50%}.grid-art i:nth-child(2n){background:#664b60;border-radius:4px}.waves{width:76%;height:65%;position:relative}.waves i{position:absolute;border:2px solid #f4d8e3;width:90%;height:90%;border-radius:50%;transform:rotate(-30deg)}.waves i:nth-child(2){transform:rotate(30deg)}.waves i:nth-child(3){transform:rotate(90deg)}.arch{height:77%;width:55%;border-radius:100px 100px 4px 4px;background:#c27898;box-shadow:14px 9px 0 #f8c8d8;position:relative}.arch:after{content:'';position:absolute;bottom:0;left:25%;width:50%;height:74%;border-radius:100px 100px 0 0;background:var(--art-bg,#ece4df)}.bookend{height:131px;width:83px;border:1px solid #bfbab4;border-radius:65px 65px 0 0;background:linear-gradient(110deg,#eeece7,#fdfcf9 60%,#e6e3dd);margin-left:auto;margin-right:26px;position:relative;box-shadow:6px 1px 10px #302d2e12}.bookend:after{content:'j.';font:italic 55px var(--serif);position:absolute;bottom:12px;left:23px;color:#c6a3b1}.flat-stack{width:190px;align-self:flex-end;flex-shrink:0;margin:0 9px 0 auto;transform:rotate(-3deg);padding-bottom:0}.flat-book{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-size:10px;letter-spacing:1px;box-shadow:2px 4px 7px #302d2e18;border-radius:2px;background:#f1cbd9}.flat-book:nth-child(2){height:23px;background:repeating-linear-gradient(#e8e3dc 0 1px,#fcf9f3 1px 3px);border-block:4px solid #d4cbc0;margin:1px -7px}.flat-book:nth-child(3){background:#61525b;color:#fff;height:31px;margin:0 2px}.shelf-note{position:absolute;right:50px;top:42px;font:italic 17px/1.4 var(--serif);color:#9f8c93;transform:rotate(-6deg)}footer{padding:34px 0 28px;margin-top:26px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:9px;letter-spacing:1px}footer .text-button{font-size:11px;color:var(--ink)}.preview{position:fixed;width:288px;border-radius:8px;box-shadow:0 18px 65px #40313824;background:#fff;z-index:15;pointer-events:none;opacity:0;transform:translateY(9px);transition:opacity .18s,transform .18s;overflow:hidden;border:1px solid #eee6e8}.preview.visible{opacity:1;transform:translateY(0)}#preview-art{height:155px}.preview-copy{padding:18px 21px}.preview-copy>span{font-size:8px;letter-spacing:1.5px;color:#8b5269}.preview h2{font:26px var(--serif);margin:9px 0}.preview p{font-size:11px;color:#6f676c;line-height:1.7;margin:0}.preview-bottom{border-top:1px solid #eee6e8;padding-top:13px;margin-top:15px;display:flex;justify-content:space-between;font-size:8px;color:#8a7a81}.preview-bottom b{color:#8d4962;font-weight:400}dialog{border:1px solid #e4dadd;width:min(1010px,93vw);max-height:91dvh;padding:0;background:var(--paper);color:var(--ink);box-shadow:0 24px 100px #302d2e35;border-radius:10px}dialog::backdrop{background:#30272e63;backdrop-filter:blur(8px)}body.reading{overflow:hidden}.reader-toolbar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#faf9f6f5;backdrop-filter:blur(10px);padding:12px 28px;border-bottom:1px solid var(--line);z-index:2;font-size:9px;letter-spacing:1px}.close-button{padding:7px 0 7px 14px;display:flex;align-items:center;gap:20px;font-size:11px}.close-button span{font-size:28px;font-weight:200;line-height:1}.project-head{padding:45px 7% 34px}.project-kicker{font-size:10px;letter-spacing:1.8px;color:#96566f}.project-head h2{font:clamp(37px,5vw,65px)/1.03 var(--serif);letter-spacing:-2px;margin:19px 0}.project-head .subtitle{font-size:14px;color:#76656d;line-height:1.8}.demo-label{display:inline-block;border:1px solid #d6b8c4;padding:7px 10px;font-size:10px;color:#895368}.project-hero{height:310px;margin:0 7%;display:grid;grid-template-columns:1fr 1fr;gap:2px}.project-hero .art{min-height:0}.hero-text{padding:35px;background:#f4e5eb;display:flex;flex-direction:column;justify-content:space-between}.hero-text .big-number{font:75px var(--serif);color:#c28b9f}.hero-text p{font:italic 23px/1.3 var(--serif);margin:0}.case-meta{display:grid;grid-template-columns:repeat(3,1fr);margin:28px 7%;border-bottom:1px solid var(--line);padding-bottom:25px;gap:20px}.case-meta dt{font-size:9px;color:#86717a;margin-bottom:9px}.case-meta dd{margin:0;font-size:11px}.case-section{padding:25px 7%;display:grid;grid-template-columns:1fr 2.5fr;gap:30px}.case-section h3{font-size:13px;font-weight:400;margin:0;color:#a1647c}.case-section h4{font:22px var(--serif);margin:0 0 13px}.case-section p{font-size:12px;line-height:1.9;color:#72686d;margin:0}.process{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.process>div{background:#f0ede9;padding:19px 15px;min-height:140px}.process span{font:24px var(--serif);color:#b37b92}.process h5{font-size:11px;font-weight:400;margin:13px 0 7px}.process p{font-size:10px}.reader-bottom{border-top:1px solid var(--line);margin:35px 7% 0;padding:22px 0;display:flex;justify-content:space-between}.next-project,.back-shelf{font-size:11px;padding:10px 0}.next-project{color:#91435f}.panel-content{padding:45px 8% 60px}.panel-content h2{font:clamp(36px,5vw,58px) var(--serif);letter-spacing:-1px;margin:16px 0 28px}.panel-content .lead{font-size:18px;line-height:1.8}.panel-content p{line-height:1.9;color:#74666d;max-width:540px;font-size:12px}.about-monogram{float:right;width:140px;height:180px;background:#f0bfd0;display:grid;place-items:center;font:italic 100px var(--serif);border-radius:80px 80px 0 0;margin:0 0 20px 30px}.tags{display:flex;gap:9px;flex-wrap:wrap;margin:25px 0}.tags span{border:1px solid #ddd2d6;padding:9px 12px;font-size:10px}.contact-placeholder{padding:23px;background:#f2e3e9;margin-top:25px;font-size:13px}.index-list{display:flex;flex-direction:column}.index-item{padding:19px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:40px 1fr auto;align-items:center;text-align:left;gap:10px}.index-item small{font-size:10px;color:#957080}.index-item b{font:23px var(--serif);font-weight:400}.index-item span{font-size:11px;color:#7d6871}.index-item:hover b{color:#bd6384}.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:25px}.filter-bar button{font-size:11px;border:1px solid #ded1d6;border-radius:20px;padding:10px 16px}.filter-bar button.selected{background:#efbfd0;border-color:#efbfd0}.skip{position:fixed;top:-60px;left:20px;z-index:50;background:#fff;padding:15px}.skip:focus{top:10px}
@media(min-width:1500px){header{max-width:1160px;margin-inline:auto}.shelf-row{gap:25px;height:330px}.second{height:290px}}
@media(max-width:1050px){.shelf-row{gap:14px;padding-inline:20px}.book{--scale:.86;width:calc(var(--width)*var(--scale));flex-basis:calc(var(--width)*var(--scale));height:calc(var(--height)*var(--scale))}.face{padding:18px 15px}.cover-name{font-size:32px}.spine-title{font-size:21px}.bookend{margin-right:0;width:65px}.bookend:after{left:17px}.flat-stack{width:150px;margin-left:4px}.intro-side{padding-right:0}.shelf-row{height:275px}.second{height:245px}.shelf-note{right:24px;font-size:15px}}
@media(max-width:760px){header{height:80px;margin:0 6%}.header-note{display:none}.wordmark{font-size:38px}.wordmark span{font-size:26px}.bookmarks{position:relative;top:auto;left:auto;margin:0 6%;flex-direction:row;gap:8px;z-index:4}.bookmark{width:auto!important;flex:1;height:52px;padding:0 10px;gap:7px;justify-content:center;border-radius:0 0 3px 3px}.bookmark:after{display:none}.bookmark span{writing-mode:initial;margin:0;font-size:8px;color:#685c62}.bookmark b{font-size:10px}main{padding:0 6%}.intro{padding-top:33px}.eyebrow{font-size:8px;letter-spacing:1.1px}.intro-line{margin-top:19px;margin-bottom:31px;align-items:flex-start;gap:18px}h1{font-size:36px;letter-spacing:0}.intro-side{padding:3px 0 0}.hand-note{font-size:14px}.intro-side p{font-size:10px;line-height:1.8;margin-block:10px}.instruction{font-size:8px;letter-spacing:0}.instruction span{font-size:12px}.library-heading{font-size:8px;margin-bottom:20px}.library-heading i{font-size:8px}.shelf-row{height:239px;gap:12px;padding:0 15px 12px;justify-content:center}.book{--scale:.7}.cover-name{font-size:28px}.face{padding:15px 13px 12px}.cover-meta,.cover-sub,.cover-footer{font-size:6px;letter-spacing:.5px}.spine-inner{padding:13px 7px}.spine-title{font-size:19px}.spine-subtitle{display:none}.spine-brand{font-size:13px}.bookend{display:none}.flat-stack{display:none}.shelf-label{font-size:7px;letter-spacing:.7px;padding-top:15px}.shelf-label>span:last-child{letter-spacing:0}.second{height:225px;margin-top:18px}.shelf-note{display:none}footer{flex-wrap:wrap;gap:10px;margin-top:23px;padding-top:20px;font-size:8px}footer .text-button{font-size:9px}footer>span:nth-child(2){display:none}.project-hero{height:240px;margin-inline:6%}.hero-text{padding:22px}.hero-text .big-number{font-size:50px}.hero-text p{font-size:17px}.project-head{padding:30px 6%}.project-head h2{letter-spacing:-1px}.case-meta{margin-inline:6%;gap:10px}.case-meta dd{font-size:9px;line-height:1.7}.case-section{padding:21px 6%;grid-template-columns:1fr;gap:15px}.process{gap:7px}.process>div{padding:13px 10px}.reader-toolbar{padding-inline:18px}.panel-content{padding:30px 7% 40px}.about-monogram{width:90px;height:120px;font-size:68px;margin-left:15px}.panel-content .lead{font-size:15px}.index-item{grid-template-columns:25px 1fr auto}.index-item b{font-size:20px}.index-item span{font-size:9px}.preview{display:none}}
@media(max-width:380px){.intro-line{display:block}.intro-side{margin-top:20px}.intro-side p{display:none}.instruction{margin-top:8px}.book{--scale:.61}.shelf-row{height:212px;gap:10px}.second{height:200px}.bookmark{padding:0 5px}.bookmark b{font-size:9px}}
@media(min-width:761px){.bookmark{height:84px;flex-direction:column;justify-content:center;padding:8px;gap:7px}.bookmark:after{display:none}.bookmark span{writing-mode:initial;margin:0;font-size:8px;letter-spacing:.5px}.bookmark b{writing-mode:vertical-rl;font-size:10px;letter-spacing:2px}.bookmark:hover,.bookmark:focus-visible{flex-direction:row;gap:16px}.bookmark:hover b,.bookmark:focus-visible b{writing-mode:initial}.bookend{margin-left:34px;margin-right:0}.flat-stack{margin-left:30px;margin-right:0}.shelf-note{right:12%;top:32px}}
.cover-art{min-height:0}.touch-hint{display:none}.instruction .desktop-hint{font:inherit;color:inherit;margin:0}
@media(max-width:760px){.intro-line{display:block}.intro-side{display:grid;grid-template-columns:1fr 1.1fr;gap:8px 15px;margin-top:23px;align-items:start}.intro-side p{margin:0}.instruction{grid-column:1 / -1;margin:0}.instruction .desktop-hint{display:none}.instruction .touch-hint{display:inline;font:inherit;color:inherit;margin:0}.cover-name{margin-top:12px}.cover-sub{margin-top:6px}.cover-art{min-height:0}.spine-inner .book-number{font-size:7px}.intro-side .hand-note{line-height:1.4}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}