@charset "UTF-8";
:root{--paper:#f7f3e7;--ink:#503c29;--muted:#8c806b;--gold:#c49955;--green:#456f65;--line:#ddceb1;--serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#eaeade;color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",sans-serif;background-image:radial-gradient(ellipse at 0 5%,#e2e8dd,transparent 55%),radial-gradient(ellipse at 100% 90%,#d9e4df,transparent 45%)}button,a{-webkit-tap-highlight-color:transparent}button,input,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible{outline:3px solid #337c74;outline-offset:4px}button{border:none}p{line-height:1.8}.shell{max-width:1240px;min-height:100vh;margin:auto;display:grid;grid-template-columns:1fr 460px;gap:90px;padding:35px 50px 40px}.editorial{padding:16px 0 0;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:13px;font-family:var(--serif);font-size:24px;letter-spacing:3px}.brand-mark{width:45px;height:45px;border:1px solid var(--gold);display:grid;place-items:center;font-size:26px;transform:rotate(-5deg);border-radius:5px 15px 5px 15px}.brand small{display:block;font-family:sans-serif;letter-spacing:2px;font-size:9px;margin-top:5px;color:var(--muted)}.eyebrow{font-size:10px;color:var(--green);letter-spacing:3px;margin-top:68px}h1{font-family:var(--serif);font-size:clamp(34px,3.8vw,50px);font-weight:500;line-height:1.5;letter-spacing:3px;margin:16px 0 18px}h1 em{font-style:normal;color:var(--green)}.lead{font-size:13px;color:var(--muted);line-height:2.1;margin:0}.chapters{margin-top:25px;border-top:1px solid #c9cdbd}.chapter{display:flex;align-items:center;gap:15px;padding:10px 0;border-bottom:1px solid #d4d6c8;font-size:12px;color:var(--muted)}.chapter span{font-size:10px;color:var(--gold);font-family:Georgia,serif}.chapter.active{color:var(--green)}.chapter.active:after{content:'●';font-size:7px;margin-left:auto}.desktop-actions{display:flex;gap:24px;margin:26px 0;font-size:11px;color:var(--green)}.desktop-actions span{margin-left:10px}.colophon{margin-top:auto;font-size:10px;color:var(--muted);letter-spacing:2px;border-top:1px solid #c9cdbd;padding-top:15px}.colophon span{float:right}.phone-wrap{width:460px}.device-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:var(--muted);padding:5px 3px 14px}#app{position:relative;overflow:hidden;min-height:765px;outline:none;background:var(--paper);box-shadow:0 15px 70px #344c3620;border:1px solid #ece4d1;border-radius:22px}.story{background:#faf6e8;position:relative}.poster{position:relative;line-height:0;overflow:hidden}.poster>img{width:100%;display:block}.poster.dark{background:#33484b}.story-bar{position:absolute;top:12px;left:15px;right:15px;z-index:4;display:flex;justify-content:space-between;align-items:center;font-size:10px;line-height:1.4}.story-bar span,.story-bar a{background:#fffcf2e8;padding:7px 10px;border-radius:15px;box-shadow:0 2px 10px #00000006}.hotspot{position:absolute;z-index:2;border:1px solid #dec083a0;background:#fff9e924;box-shadow:0 0 0 4px #eec76c15;border-radius:9px;transition:.3s;line-height:1.5;min-width:25px;min-height:25px}.hotspot:after{content:'+';position:absolute;right:-7px;top:-8px;border-radius:50%;width:21px;height:21px;display:grid;place-items:center;background:var(--green);color:white;font-size:15px;box-shadow:0 0 0 3px #fff9e8a0}.hotspot:hover,.hotspot:focus-visible{background:#fff2c333;border-color:#d5aa55;box-shadow:0 0 25px #ffe8a8}.hotspot.character{border:none;background:transparent;box-shadow:none}.hotspot.character:after{right:8px;top:auto;bottom:8px;content:'聊';font-size:10px;width:26px;height:26px}.story-dock{padding:16px 22px 17px;background:var(--paper);border-top:1px solid var(--line);line-height:1.5}.story-dock h2{font-family:var(--serif);font-size:18px;font-weight:500;margin:0 0 8px}.story-dock .hint{font-size:11px;color:var(--muted);margin:0 0 13px}.pager{display:flex;align-items:center;justify-content:space-between;gap:8px}.dots{display:flex;gap:7px}.dot{width:6px;height:6px;min-width:6px;border-radius:50%;padding:0;background:#d9d2bf}.dot.selected{background:var(--green);width:18px;border-radius:8px}.round-button{background:transparent;font-size:19px;width:28px;height:28px;color:var(--muted)}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:8px;background:var(--green);color:#fff;box-shadow:0 3px 10px #3d655c16;font-size:13px}.button.gold{background:linear-gradient(120deg,#dab772,#b98a43);color:#fff}.button.light{background:#ece9db;color:var(--ink);box-shadow:none}.button.full{width:100%}.page{padding:22px 20px 96px;min-height:765px;background:radial-gradient(circle at 100% 0,#efe2bd80,transparent 35%),var(--paper);animation:appear .3s ease}.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.page-head small{font-size:9px;letter-spacing:2px;color:var(--gold)}.page-head h2{font-family:var(--serif);font-weight:500;font-size:26px;margin:7px 0 3px;letter-spacing:2px}.page-head p{font-size:11px;color:var(--muted);margin:0}.icon-button{border:1px solid var(--line);background:#ffffff50;width:35px;height:35px;display:grid;place-items:center;border-radius:50%;font-size:17px}.nav{position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;align-items:center;padding:10px 8px max(10px,env(safe-area-inset-bottom));background:#faf7eef5;border-top:1px solid var(--line);backdrop-filter:blur(12px)}.nav a{display:flex;flex:1;flex-direction:column;align-items:center;gap:5px;font-size:10px;color:#9b9584}.nav a.active{color:var(--green);font-weight:bold}.nav svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6}.home-banner{height:153px;border-radius:14px;position:relative;overflow:hidden;background:#d6ded0}.home-banner img{width:100%;height:100%;object-fit:cover}.home-banner div{position:absolute;inset:0;padding:22px;background:linear-gradient(90deg,#f7f0d9ec,#f7f0d930)}.home-banner h3{font-family:var(--serif);font-size:23px;margin:0 0 9px;font-weight:500}.home-banner p{font-size:11px;max-width:230px;margin:0}.section-head{display:flex;justify-content:space-between;align-items:baseline;margin:24px 0 12px}.section-head h3{font-family:var(--serif);font-size:18px;font-weight:500;margin:0}.section-head small{font-size:10px;color:var(--muted)}.quick-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.quick-link{padding:15px;background:#eee8d6;border:1px solid #e1d4b7;border-radius:10px;display:flex;justify-content:space-between;align-items:center}.quick-link strong{font-size:13px;font-weight:500}.quick-link small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.place-card{margin-bottom:14px;border:1px solid var(--line);border-radius:13px;background:#fffdf6;padding:12px;box-shadow:0 4px 14px #644e3110}.place-row{display:grid;grid-template-columns:115px 1fr;gap:12px}.place-cover{position:relative;height:110px;overflow:hidden;border-radius:9px}.place-cover img{width:100%;height:100%;object-fit:cover}.badge-label{position:absolute;left:0;top:0;background:#dbd8cc;padding:5px 8px;font-size:9px;border-radius:0 0 9px 0}.checked .badge-label{background:#d7ad65;color:#fff}.place-info h3{font-size:14px;line-height:1.6;margin:0 0 3px;font-family:var(--serif)}.stars{color:#d5d0c3;font-size:13px;letter-spacing:2px}.checked .stars{color:var(--gold)}.place-info p{font-size:10px;color:var(--muted);margin:4px 0}.place-info .button{font-size:10px;padding:7px 11px;float:right}.previews{display:flex;gap:8px;margin-top:11px}.preview{flex:1;min-width:0;padding:0;background:transparent;text-align:center}.preview img{width:100%;height:64px;object-fit:cover;border-radius:7px;border:1px solid #e1d3b5}.preview span{display:block;font-size:9px;color:var(--muted);margin-top:3px}.detail-hero{width:100%;height:240px;object-fit:cover;border-radius:13px}.detail p{font-size:13px}.tag{font-size:10px;color:var(--green);background:#e6ede1;padding:5px 8px;border-radius:4px;display:inline-block}.look-list{padding:0;list-style:none}.look-list li{font-size:12px;padding:12px 0;border-bottom:1px solid #e6deca;line-height:1.8}.check-done{background:#ede4cc;border:1px solid #d9b56d;padding:13px;border-radius:8px;color:#9c763a;text-align:center;font-size:12px}.filters{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px 0 13px;white-space:nowrap}.filter{padding:8px 12px;border:1px solid var(--line);border-radius:20px;font-size:11px;background:#fffdf7}.filter.selected{background:var(--green);border-color:var(--green);color:white}.products{display:grid;grid-template-columns:1fr 1fr;gap:12px}.product{position:relative;border:1px solid var(--line);background:#fffdf6;border-radius:12px;overflow:hidden;transition:transform .2s,box-shadow .2s;animation:appear .4s ease both}.product:hover{transform:translateY(-3px);box-shadow:0 7px 15px #604d3017}.product-open{padding:0;text-align:left;background:transparent;width:100%;display:block}.product img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}.product-copy{padding:12px}.product h3{font-family:var(--serif);font-size:13px;line-height:1.6;margin:0 0 5px}.product p{font-size:10px;color:var(--muted);margin:0}.product .tag{font-size:8px;margin-top:9px}.heart{position:absolute;right:7px;top:7px;background:#fffdf4e6;width:29px;height:29px;border-radius:50%;color:#967955;font-size:20px}.heart.loved{color:#bb8b3c}.empty{text-align:center;border:1px dashed var(--line);padding:26px 18px;border-radius:10px;font-size:12px;color:var(--muted)}.empty a{display:block;color:var(--green);margin-top:12px}.page-note{font-size:10px;color:var(--muted);line-height:1.7;padding-top:18px}.profile{display:flex;gap:13px;align-items:center;padding:18px 16px;background:#ebe8d6;border:1px solid var(--line);border-radius:13px}.profile img{width:62px;height:62px;object-fit:cover;border-radius:50%;border:2px solid #c5a76b}.profile h3{font-family:var(--serif);font-size:18px;font-weight:500;margin:0 0 5px}.profile p{font-size:10px;color:var(--muted);margin:0}.stats{display:flex;margin:14px 0;border-bottom:1px solid var(--line);padding-bottom:15px}.stats div{flex:1;text-align:center}.stats strong{display:block;font-family:Georgia,serif;color:var(--green);font-size:25px;font-weight:500}.stats small{font-size:10px;color:var(--muted)}.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.badge{padding:0;background:transparent}.medal{width:58px;height:58px;border:3px double #cfcbbc;border-radius:50%;display:grid;place-items:center;font-size:22px;color:#ada79a;background:#e2dfd3;margin:auto}.badge.checked .medal{background:radial-gradient(circle,#f9e8b9,#d6b567);border-color:#a58746;color:#816322;box-shadow:0 2px 10px #bb974c25}.badge span{font-size:9px;display:block;line-height:1.6;margin-top:7px}.works{display:grid;grid-template-columns:1fr 1fr;gap:10px}.work{padding:0;background:#fffdf7;border:1px solid var(--line);border-radius:9px;overflow:hidden}.work img{width:100%;height:140px;object-fit:cover}.work span{display:block;padding:8px;font-size:10px}.steps{display:flex;align-items:center;justify-content:space-between;margin:8px 0 20px;gap:5px}.step{background:transparent;padding:0;flex:1;min-width:0;text-align:center}.step b{display:grid;place-items:center;margin:0 auto 6px;width:27px;height:27px;border:1px solid var(--line);border-radius:50%;font-family:Georgia,serif;font-size:13px;font-weight:normal;background:#fcfaf1}.step span{font-size:9px;white-space:nowrap}.step.current b{background:var(--green);color:white;border-color:var(--green)}.step.done b{background:#dfc89b;color:#5f4a29;border-color:#dfc89b}.workbench{height:320px;position:relative;overflow:hidden;background:#e7dbc0;border:1px solid var(--line);border-radius:15px;display:grid;place-items:center}.workbench img{width:100%;height:100%;object-fit:cover;transition:filter 1s,transform 1s;opacity:.55;filter:saturate(.55)}.workbench.completed img{opacity:1;filter:none;transform:scale(1.015)}.stage-label{position:absolute;top:12px;left:12px;font-size:10px;padding:6px 9px;background:#fbf8eceb;border-radius:20px}.stage-hint{position:absolute;bottom:14px;left:14px;right:14px;padding:12px 14px;background:#fbf8eae6;border:1px solid #e1cc9b;border-radius:9px;font-size:11px;text-align:center;line-height:1.7;backdrop-filter:blur(5px)}.tool{position:absolute;pointer-events:none;opacity:0}.tool.hammer{width:105px;height:120px;left:53%;top:17%;transform:rotate(-25deg);transform-origin:80% 90%}.hammer:before{content:'';position:absolute;width:23px;height:100px;top:20px;left:40px;background:linear-gradient(90deg,#96622d,#dbac6c,#8f602c);border-radius:4px}.hammer:after{content:'';position:absolute;width:87px;height:40px;background:linear-gradient(#d6ae71,#8d592e);border:2px solid #805529;border-radius:5px}.workbench.animating .hammer{opacity:1;animation:hammer .55s ease-in-out 5}.tool.scissors{left:20%;top:45%;color:#816237;font-size:65px}.workbench.animating .scissors{opacity:1;animation:cut 2.6s ease-in-out}.tool.needle{width:110px;height:60px;left:35%;top:45%;border-top:2px dashed #ffe6b0;border-radius:50%}.tool.needle:after{content:'';position:absolute;width:50px;height:3px;background:#eee;right:-20px;top:-3px;transform:rotate(-35deg)}.workbench.animating .needle{opacity:1;animation:stitch 2.6s linear}.workbench.animating[data-stage="0"] img{animation:float-in 2.6s ease}.workbench.animating[data-stage="1"] img{animation:dry 2.6s ease}.workbench.animating[data-stage="4"] img{animation:glow 2.6s ease}.craft-caption{padding:20px 2px 14px}.craft-caption small{font-size:9px;letter-spacing:2px;color:var(--gold)}.craft-caption h3{font-family:var(--serif);font-size:24px;font-weight:500;margin:8px 0}.craft-caption p{font-size:12px;color:var(--muted);margin:0 0 12px}.craft-actions{display:flex;gap:8px}.craft-actions .button:first-child{flex:1}.result-ribbon{text-align:center;color:var(--green);font-size:12px;line-height:1.8;margin:16px 0}.drum-glow{animation:glow 1.5s ease}.quote-hold{position:absolute;bottom:7%;left:5%;width:90%;height:14%;background:transparent;border:none;box-shadow:none}.quote-hold:after{content:'长按这里';font-size:9px;width:auto;border-radius:10px;padding:2px 8px;top:auto;bottom:-10px;right:8px}
dialog{border:1px solid #d6bd87;border-radius:16px;padding:30px 25px 25px;background:var(--paper);color:var(--ink);width:min(440px,calc(100vw - 32px));max-height:85dvh;overflow:auto;box-shadow:0 24px 80px #0003}dialog::backdrop{background:#122b2ac9;backdrop-filter:blur(5px)}.modal-close{position:absolute;top:9px;right:12px;width:30px;height:30px;background:#eee7d6;border-radius:50%;font-size:21px;z-index:3}dialog h2{font-family:var(--serif);font-size:23px;font-weight:500;margin:6px 20px 16px 0;line-height:1.5}dialog p{font-size:13px;line-height:1.9;margin:8px 0}dialog .modal-kicker{font-size:10px;color:var(--gold);letter-spacing:2px}dialog img{width:100%;max-height:57dvh;object-fit:contain;border-radius:9px;margin:10px 0}.gallery-controls{display:flex;align-items:center;justify-content:space-between;margin:10px 0}.gallery-controls button{background:#e9e1cb;padding:9px 15px;border-radius:7px}.gallery-controls span{font-size:10px;color:var(--muted)}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);z-index:99;background:#355c51f5;color:#fff;border-radius:10px;padding:13px 20px;max-width:calc(100vw - 35px);width:max-content;font-size:12px;line-height:1.6;box-shadow:0 8px 25px #0002;opacity:0;pointer-events:none;transition:.25s}#toast.show{opacity:1;transform:translate(-50%,0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes hammer{0%,100%{transform:rotate(-35deg) translateY(-18px)}55%{transform:rotate(4deg) translateY(42px)}}@keyframes cut{0%{transform:translate(0,0) rotate(-20deg)}50%{transform:translate(145px,-25px) rotate(20deg)}100%{transform:translate(95px,80px)}}@keyframes stitch{from{transform:translate(-65px,-50px) rotate(0)}to{transform:translate(50px,55px) rotate(180deg)}}@keyframes float-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes dry{from{filter:brightness(.65) saturate(.7)}to{filter:brightness(1.15) saturate(.8)}}@keyframes glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35);box-shadow:0 0 40px #ffe09c}}
@media(min-width:1000px){.phone-wrap{position:relative}#app{max-height:none}.story .poster{max-height:610px}.story .poster>img{object-fit:contain;max-height:610px;background:#fbf8ed}.story{min-height:765px}.story-dock{min-height:154px}.story .poster:has(img[src*="story-3"]){max-height:650px}.story .poster:has(img[src*="story-3"])>img{max-height:650px;width:100%;object-fit:fill}.page{min-height:765px}}@media(max-width:1050px){.shell{gap:35px;padding:25px 30px}.editorial h1{font-size:35px}.eyebrow{margin-top:45px}}@media(max-width:780px){body{background:var(--paper)}.shell{display:block;padding:0;min-height:100dvh}.editorial,.device-label{display:none}.phone-wrap{width:100%;max-width:500px;margin:0 auto}#app{border:0;border-radius:0;min-height:100dvh;box-shadow:none}.story{min-height:100dvh}.story .poster{width:100%}.story-dock{padding-bottom:calc(17px + env(safe-area-inset-bottom))}.page{min-height:100dvh}.nav{position:fixed;max-width:500px;margin:0 auto}.workbench{height:clamp(260px,78vw,370px)}.page-head h2{font-size:25px}#toast{bottom:85px}.story-bar{top:max(12px,env(safe-area-inset-top))}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Smooth interaction: only transform and opacity animate on large surfaces. */
html{scroll-behavior:auto}
[hidden]{display:none!important}
.poster{touch-action:none;aspect-ratio:3/4;transition:transform .16s ease-out,opacity .16s ease-out}
.poster:has(img[src*="story-3-"]){aspect-ratio:50/89}
.poster>img{height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none}
.poster.dragging{transition:none;will-change:transform,opacity}
.loading-next .poster{opacity:.92}
.nav,.stage-hint,dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
.nav{background:#faf7ee}.stage-hint{background:#fbf8ea}dialog::backdrop{background:#122b2abd}
.page,.product{animation:none}
.product{transition:transform .15s ease-out;contain:layout style}
.product:hover{box-shadow:none}
.hotspot{transition:background-color .16s,border-color .16s}
.hotspot:hover{box-shadow:none}
.workbench img{filter:none;opacity:.62;transition:opacity .3s ease-out,transform .3s ease-out}
.workbench.completed img{opacity:1;filter:none}
.workbench.animating .hammer{animation:hammer .34s ease-in-out 5;will-change:transform}
.workbench.animating .scissors{animation:cut 1.7s ease-in-out;will-change:transform}
.workbench.animating .needle{animation:stitch 1.7s linear;will-change:transform}
.workbench.animating[data-stage="0"] img{animation:float-in 1.7s ease}
.workbench.animating[data-stage="1"] img{animation:air-dry 1.7s ease}
.workbench.animating[data-stage="4"] img{animation:finish-art 1.7s ease}
.drum-glow{animation:none}
.drum-glow::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at 50% 55%,#ffe6a470,transparent 70%);opacity:0;animation:soft-light 1.2s ease}
dialog[open]{animation:modal-in .16s ease-out}dialog img[data-swipe="gallery"]{touch-action:pan-y;aspect-ratio:1/1}
@keyframes air-dry{from{opacity:.35;transform:translate3d(-5px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes finish-art{from{opacity:.45;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes soft-light{0%,100%{opacity:0}50%{opacity:1}}
@keyframes modal-in{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(min-width:1000px){.poster:has(img[src*="story-3-"]){max-height:650px}.poster:has(img[src*="story-3-"])>img{max-height:650px}}
@media(prefers-reduced-motion:reduce){dialog[open],.drum-glow::before{animation:none}.poster,.workbench img{transition:none}}