/* V2 阅读区与实验室覆盖层。V2.6 移除了旧 Hero / Opening 重复规则。 */
:root{--ink:#39414d;--muted:#626571;--cream:#fcf9f7;--pink:#f1d5e0;--mint:#dfece3;--blue:#e4ebf3;--green:#79536a;--line:#e3dadd;--berry:#99546f}
html{scroll-padding-top:100px;scroll-behavior:auto}
body{background:#fcf9f7;isolation:isolate}
main{overflow:clip}
.js-only{display:none}
.js-ready .js-only{display:inline-flex}
[hidden]{display:none!important}
.dream-air{position:absolute;inset:0 0 auto;height:1300px;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 83% 25%,#f0ccdce0,transparent 60%),radial-gradient(ellipse at 4% 56%,#edcbd76b,transparent 45%);opacity:.95;transition:opacity 2.4s}
#receipt-sundae{display:none}
.header{height:78px;background:#fcf7f8ed;border-color:#e8d8df;padding-inline:5%;gap:25px}
.brand{display:inline-flex;align-items:center;font-size:23px;letter-spacing:-.8px;gap:9px}
.brand img{width:31px;height:38px}
.brand-dot{color:#9c7186}
nav{gap:27px}
nav a{position:relative;font-size:14px;white-space:nowrap}
nav a.active::after{content:"";width:4px;height:4px;border-radius:100%;position:absolute;bottom:1px;left:50%;background:var(--berry)}
nav .header-resume{border:1px solid #c9aebb;border-radius:4px;padding:7px 15px;background:#fff9fc;color:#754a61}
.nav-contact{border:0;padding:7px 0}
.button{border-radius:5px;padding:12px 20px;gap:20px;min-height:49px;font-size:14px}
.primary{background:#79536a;box-shadow:0 7px 14px #79536a12}
.resume-hero{border:1px solid #bea2b1;background:#fff9f8;box-shadow:4px 5px 0 #e5ccd780;font-size:13px}
.flavor-strip{position:relative;z-index:2;margin:0 0 0;background:#fbf5f4;border-block:1px solid #e4cdd7;padding:19px 5%;color:#9d7b8b;box-shadow:0 -15px 35px #fff7}
.flavor-strip span{font-size:11px;letter-spacing:1.8px}
.flavor-strip span:nth-child(2),.flavor-strip span:nth-child(3){letter-spacing:2px;color:#8e737f}
.about{position:relative;padding-top:100px;padding-bottom:100px}
.about::before{content:"";position:absolute;pointer-events:none;width:480px;height:440px;border:12px solid #fff9ef;border-left:2px solid #eee1e8;border-radius:49% 70% 42% 70%;left:-330px;top:-70px;transform:rotate(-35deg);box-shadow:8px 12px 25px #c5a1b630;z-index:-1}
.about::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:330px;height:480px;right:-230px;bottom:-200px;background:radial-gradient(ellipse,#e4b1c633,transparent 68%);transform:rotate(20deg)}
.about-letter{border-left:1px solid #d5b8c7;padding-left:32px}
.about-letter h3{font-size:28px;color:#655165}
.about-letter p{font-size:16px;color:var(--muted)}
.signature{color:#a17a8f}
.education{background:#fffaf6;border:1px solid #e4d9d9;border-radius:4px;box-shadow:7px 10px 0 #f0e4e94d;transform:rotate(1deg)}
.fact-pair article{background:none;border-top:1px solid #dcc8d2;border-radius:0;padding:24px 7px}
.fact-pair article+article{background:none}
.section-heading .eyebrow{color:#9b788c;letter-spacing:1.6px}
.section-heading h2{font-size:clamp(27px,2.8vw,38px)}
.section-heading .handwritten{font-size:20px;color:#b38da0}
.section-side{font-size:11px;letter-spacing:1.5px;line-height:1.8;color:#998390;text-align:right}
.section-heading h2+p{font-size:16px}
.source{color:#79717a}
.mini-label{color:#887181}
#experience{border-top:1px solid #e1d7db;position:relative}
.experience{grid-template-columns:165px 1fr 190px;gap:25px;padding:33px 0}
.experience h3{font-size:19px}
.experience h4{font-size:21px;font-weight:500;margin:13px 0;color:#6e5266}
.experience .role{color:#857483}
.experience .role+p{font-size:16px}
.experience h4+p{font-size:16px;color:var(--muted)}
.experience .text-link{font-size:13px;margin-top:10px;border-color:#cbb6c0}
.experience:nth-child(-n+2){border-left:2px solid #d8aabb;padding-left:22px}
.type{background:#f2e2e8}
.type.pink{background:#f0d8e4}
.type.blue{background:#e8edf4}
.exp-result{border-color:#d8c4cf}
.exp-result strong{color:#927089}
.exp-result small,.exp-result a{color:#7e7680;font-size:12px}
.exp-result p{font-size:14px}
.date{color:#7a7580}
.works-section{background:#fbfaf8;border-color:#e6dce1;position:relative}
.works-section>.section{padding-top:74px}
.featured{border-radius:9px;background:#fffefa;border:1px solid #dddde0;grid-template-columns:1.04fr 1fr}
.featured-visual{background:#e8ece5}
.featured-visual h3{color:#46574f}
.featured-copy{padding:32px}
.featured-copy>h3{font-size:25px}
.featured-copy .tags span{font-size:11px}
.featured-copy p.source{font-size:12px}
.method-list b{font-size:16px}
.method-list p{font-size:15px}
.method-list li>span{font-size:18px;color:#90a18f}
.visual-top span+span{font-size:18px}
.stat-trio span{font-size:12px}
.case-card{border-radius:8px;box-shadow:none}
.case-card:hover{transform:translateY(-3px)}
.card-cover{height:280px}
.personal-cover{background:#f2e1e8}
.training-cover{background:#e5ebf2}
.card-body{padding:28px}
.card-body h3{font-size:23px}
.receipt-row{font-size:13px}
.card-body .mini-label{font-size:12px}
.design-grid .art-button{border-radius:7px;background:#efe9e5}
.design-grid figcaption>span{font-size:11px}
.design-grid h3{font-size:19px}
.design-grid figcaption p{font-size:13px}
.data-feature{border-radius:8px;background:#f1f3ed}
.tool-grid article{border-radius:6px}
.tool-grid p{font-size:15px}
.text-link{color:#71576a;border-color:#c2a8b8;min-height:40px}
.button:hover{box-shadow:0 10px 20px #79536a21}
.art-button{padding:18px}
.case-dialog-source{padding-top:16px;border-top:1px solid var(--line)}
dialog{border-radius:9px;background:#fffcf9}
dialog h3{font-size:20px;line-height:1.6}
dialog p{font-size:16px;line-height:1.95}
.dialog-close{background:#f0e3e9;color:#75576b}
#dialog-content section{margin-top:25px}
#dialog-content .source{font-size:12px}
#dialog-content img{max-width:100%}
.skills-section{position:relative;background:#f8e9ef;border-block:1px solid #e8ceda;isolation:isolate}
.skills-section::before{content:"";position:absolute;left:-12%;right:-6%;top:-60px;height:160px;border-top:4px solid #fffaf0;border-radius:50%;transform:rotate(-4deg);pointer-events:none;box-shadow:0 -10px 25px #e3b8cb30;z-index:-1}
.skills-section::after{content:"";position:absolute;right:-100px;top:20%;width:330px;height:420px;border:1px solid #fdf7ec;border-right:22px solid #fff5ec99;border-radius:50% 20% 50% 70%;transform:rotate(20deg);pointer-events:none;z-index:-1}
.skills-section>.section{padding-top:75px}
.skills-layout{grid-template-columns:1fr 1.08fr;gap:60px}
.lab-stamp{font:italic 16px Georgia,serif;color:#a67790;border:1px solid #cbabc0;border-radius:50%;width:85px;height:85px;display:grid;place-content:center;text-align:center;line-height:1.1;transform:rotate(12deg)}
.sundae-stage{position:relative;align-self:start;border-radius:48% 48% 12px 12px;background:radial-gradient(ellipse at 40% 32%,#fffcf6,#f3dbe740 65%);border:1px solid #fff8ee;box-shadow:inset 0 0 40px #fff5,10px 25px 70px #c59aac1f;min-width:0;padding:5px 5px 20px}
.lab-number{position:absolute;left:29px;top:28px;font-size:11px;letter-spacing:1px;color:#a17f91}
#sundae{display:block;width:100%;max-width:425px;height:auto;margin:0 auto;overflow:visible}
.ingredient{opacity:0;transform:translateY(-40px);transition:opacity .4s,transform .65s cubic-bezier(.19,.7,.3,1);transform-box:fill-box;transform-origin:center}
.ingredient.added{opacity:1;transform:translateY(0)}
.lab-clerk{display:flex;align-items:center;gap:10px;margin:-7px 20px 0}
.lab-clerk img{width:70px;height:auto;transform:rotate(-5deg)}
.lab-clerk p{font-size:13px;line-height:1.7;color:#926c82}
.skill-menu{padding-top:18px}
.skill{padding:20px 12px;gap:17px;border-bottom:1px solid #dbc4d0;transition:background .25s;border-radius:4px}
.skill:hover{background:#fff7f799}
.skill b{font-size:17px}
.skill b em{font-size:9px;letter-spacing:1.5px;font-style:normal;font-weight:400;color:#aa8599;margin-left:12px}
.skill small{font-size:13px;color:#716573;margin-top:7px}
.skill .ingredient-dot{width:21px;height:21px;border-radius:50%;box-shadow:inset 2px 2px 4px #fff8,1px 3px 4px #8263771c;flex-shrink:0}
.ingredient-dot.content{background:#e6a8b8}
.ingredient-dot.design{background:#b5c3e1}
.ingredient-dot.data{background:#9ecab6}
.ingredient-dot.team{background:#e8d4b9}
.skill .plus{border-color:#c7abbc;color:#966a82}
.skill[aria-pressed=true]{background:#fff7f3b0}
.skill[aria-pressed=true] .plus{background:#95627f;border-color:#95627f}
.sundae-output{position:relative;margin-top:24px;background:#fffdf5;border:0;border-radius:1px;padding:25px 26px;box-shadow:3px 6px 16px #9c798b16;min-height:160px;border-bottom:1px dashed #d2bfca}
.sundae-output::before{content:"";position:absolute;left:0;right:0;top:-4px;height:5px;background:linear-gradient(135deg,transparent 50%,#fffdf5 50%) 0 0/10px 10px}
.sundae-output>.mini-label{font-size:10px;letter-spacing:2px;margin:0 0 10px;color:#a48898}
.sundae-output b{font-size:20px;color:#7d536c}
.sundae-output p{font-size:15px;line-height:1.8}
.reset-skills{font-size:13px}
.skill-menu>.source{font-size:12px}
.closing{gap:36px;padding-top:95px}
.resume-box,.contact-box{background:#fffdf8;border-radius:2px;padding:36px;border:1px solid #ddcbd5;box-shadow:5px 8px 0 #f1e2e8;position:relative}
.resume-box{transform:rotate(-1deg);border-top:5px solid #d0aabd}
.resume-box::after{content:"";position:absolute;top:63%;left:0;right:0;border-top:1px dashed #d6c3cc;z-index:0;pointer-events:none}
.resume-box>*{position:relative;z-index:1}
.resume-box .button{margin-top:7px;background:#79536a}
.contact-box{background:#f8f0f3;box-shadow:none;border-top:5px solid #dedce8}
.closing h2{font-size:31px}
.contact-envelope{font:italic 13px Georgia,serif;right:25px;top:22px;color:#a18194}
.contact-placeholder{border-radius:1px;background:#fff9fc;color:#846b7d}
footer{flex-wrap:wrap;border-top-color:#e3ccd8}
footer p{font-size:13px}
.sound-control{width:100%;display:flex;gap:16px;align-items:center;border-top:1px solid #e9dce2;padding-top:16px}
.sound-control button{font-size:10px;letter-spacing:1px;background:none;border:1px solid #d8c3cf;border-radius:3px;padding:7px 12px;min-height:38px}
.sound-control span{font-size:11px;color:#947f8d}
.dream-mode .dream-air{filter:saturate(1.18)}
.dream-mode #sound-toggle::after{content:"▂▅▃";font-size:11px;margin-left:8px}
.reveal-enter{animation-duration:.5s}
.works-section .reveal-enter{animation:none}
@media(max-width:1100px){nav{gap:18px}
.header{padding-inline:4%}
.button{padding:11px 15px}
.experience{grid-template-columns:135px 1fr 155px;gap:20px}
.skills-layout{gap:30px}
.skill b em{margin-left:7px}}
@media(max-width:850px) and (min-width:761px){.header{gap:12px}
.brand{font-size:19px}
nav{gap:12px}
nav a{font-size:12px}
.desktop-break{display:none}
.experience{grid-template-columns:125px 1fr}
.exp-result{grid-column:2;border:0;padding:10px 0;display:flex;gap:16px;align-items:center}
.exp-result strong{font-size:27px}}
@media(max-width:760px){html{scroll-padding-top:105px}
.header{min-height:99px;height:auto;gap:3px;padding:8px 14px}
.brand{font-size:20px;gap:6px}
.brand img{width:25px;height:30px}
nav{gap:0;justify-content:space-between}
nav a{font-size:11px;min-height:37px;padding:4px 3px}
nav .header-resume{padding:4px 8px;min-height:33px}
.nav-contact{padding:4px 3px}
.desktop-break{display:none}
.button{min-height:46px;font-size:12px;padding:10px 14px;gap:15px}
.resume-hero{font-size:11px}
.flavor-strip{padding:14px 18px;gap:12px}
.flavor-strip span{font-size:8px;letter-spacing:1px}
.flavor-strip span:nth-child(3){display:none}
.flavor-strip span:last-child{display:block}
.dream-air{height:1500px;background:radial-gradient(ellipse at 90% 45%,#edc2d3ba,transparent 65%),radial-gradient(ellipse at 10% 2%,#f5dfe7,transparent 50%)}
.section{padding:55px 23px}
.about::before{width:300px;height:280px;left:-265px;top:-25px;border-width:7px}
.about::after{display:none}
.about-letter{padding-left:20px}
.about-letter h3{font-size:25px}
.section-heading h2{font-size:27px;line-height:1.4}
.section-heading .eyebrow{font-size:9px;letter-spacing:1px}
.section-heading h2+p{font-size:14px}
.section-side{display:none}
.experience{grid-template-columns:1fr;gap:15px}
.experience:nth-child(-n+2){padding-left:14px}
.experience h4{font-size:20px}
.experience h3{font-size:17px}
.experience h4+p{font-size:16px}
.exp-result{padding:11px 13px;background:#f4e9ee;gap:12px}
.exp-result p{font-size:12px}
.exp-result small{font-size:11px}
.exp-result strong{font-size:28px}
.featured{grid-template-columns:1fr}
.featured-copy{padding:24px}
.featured-visual{padding:24px 23px 0}
.featured-visual h3{font-size:25px}
.stat-trio b{font-size:27px}
.stat-trio span{font-size:10px}
.method-list p{font-size:15px}
.card-body h3{font-size:21px}
.card-cover{padding:25px;height:275px}
.card-body{padding:25px}
.art-button{height:340px;padding:20px 35px}
.data-feature{padding:24px}
.tool-grid p{font-size:15px}
.skills-section>.section{padding-top:55px}
.skills-layout{grid-template-columns:1fr;gap:20px}
.lab-stamp{width:65px;height:65px;font-size:12px;flex-shrink:0;display:none}
.sundae-stage{max-width:380px;width:100%;margin:auto;padding-bottom:15px}
#sundae{width:85%;max-width:340px}
.lab-number{font-size:10px;top:25px;left:20px}
.lab-clerk{margin:-5px 20px 0;gap:8px}
.lab-clerk img{width:55px}
.lab-clerk p{font-size:12px}
.skill-menu{padding-top:5px}
.skill{padding:17px 8px;gap:14px}
.skill b{font-size:16px}
.skill b em{font-size:8px;margin-left:9px}
.skill small{font-size:12px}
.sundae-output b{font-size:19px}
.sundae-output p{font-size:15px}
.skills-section::before{left:-20%;right:-20%;top:-28px;height:90px}
.skills-section::after{display:none}
.closing{gap:24px;padding-top:55px}
.resume-box,.contact-box{padding:28px}
.closing h2{font-size:29px}
.closing .button{font-size:12px}
.contact-envelope{font-size:10px;top:20px;right:15px}
footer{gap:14px}
footer p{order:0;font-size:11px}
.sound-control{gap:12px}
.sound-control span{font-size:10px;line-height:1.7}
.sound-control button{flex-shrink:0}
dialog{padding:28px 22px}
dialog h2{font-size:25px;line-height:1.45}
dialog h3{font-size:18px}
dialog p{font-size:16px}}
@media(max-width:760px){#receipt-sundae{display:block;float:right;width:100px;height:105px;margin:-12px -12px 5px 8px}
.sundae-output{display:flow-root}
.sundae-output #sundae-text{clear:both}}
@media(max-width:360px){.button{padding:10px 11px;font-size:11px;gap:8px}
.resume-hero{font-size:10px}
.section{padding-inline:19px}
.skill small{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.ingredient{transform:none}}
.narrative-bridge{position:relative;z-index:3;max-width:980px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:center;gap:15px;color:#8e7985;background:#fffaf7;border:1px solid #e5d5dd;box-shadow:7px 9px 0 #f0e2e8;font-size:12px;transform:rotate(-.35deg)}
.narrative-bridge strong{font-weight:550;color:#78586b}
.narrative-bridge i{height:1px;min-width:40px;flex:1;background:linear-gradient(90deg,#dcc5d0,#b5cdbd);position:relative}
.narrative-bridge i::after{content:"";position:absolute;right:-1px;top:-2px;width:5px;height:5px;border-radius:50%;background:#9dbda9}
.recipe-bridge{margin-top:-1px;margin-bottom:-1px;border-style:dashed;box-shadow:none;background:#fdf9f6}
.lab-bridge{margin-top:42px;margin-bottom:-28px;background:#f5e7ed;border-color:#e4c5d3;transform:rotate(.25deg)}
.lab-bridge>span{padding:5px 9px;background:#fff9f5;border:1px solid #e2ccd6}
.lab-bridge i{max-width:80px}
.dream-awake.world-experience .dream-air{opacity:.82}
.dream-awake.world-works .dream-air{opacity:.72}
.dream-awake.world-skills .dream-air{opacity:1}
.dream-awake.world-skills .skills-section{box-shadow:inset 0 20px 70px #dda9c12c}
.dream-mode .dream-air{animation:air-breathe 10s ease-in-out infinite}
.dream-mode .skills-section{filter:saturate(1.06)}
@keyframes air-breathe{50%{opacity:.76;transform:scale(1.015)}}
@media(max-width:760px){.narrative-bridge{margin-inline:18px;padding:13px 15px;gap:8px;font-size:10px;overflow:hidden}
.narrative-bridge i{min-width:17px}
.narrative-bridge span{white-space:nowrap}
.narrative-bridge span:first-child:last-child{white-space:normal}
.recipe-bridge span:nth-of-type(2){display:none}
.lab-bridge{margin-top:25px;margin-bottom:-18px;flex-wrap:wrap}
.lab-bridge i{display:none}
.lab-bridge strong{flex-basis:100%;text-align:center}}
@media(max-width:360px){.narrative-bridge{margin-inline:10px;font-size:9px}
.narrative-bridge i{display:none}
.narrative-bridge span:nth-of-type(2){display:none}}
.experience{position:relative;isolation:isolate;transition:background .65s,box-shadow .65s,transform .65s,padding .65s}
.experience::after{content:"";position:absolute;z-index:-1;inset:7px -14px;border:1px solid transparent;background:linear-gradient(105deg,#fffaf700,#f8e8ee00);clip-path:polygon(0 0,97% 0,100% 13%,100% 100%,3% 100%,0 87%);transition:background .7s,border-color .7s,box-shadow .7s}
.experience .exp-result{position:relative;transition:background .55s,padding .55s,border-color .55s}
.experience .exp-result::before{content:attr(data-flavor);display:block;font:8px Georgia,serif;letter-spacing:1.4px;color:#a27d91;opacity:0;transform:translateY(5px);transition:opacity .45s,transform .45s}
.experience.dream-transformed::after{background:linear-gradient(105deg,#fffdf9d9,#f7e6ed83);border-color:#ead6df;box-shadow:8px 11px 28px #8e637916}
.experience.dream-transformed .exp-result{background:#fffaf6c7;padding:15px 18px;border-left-color:#c999ae}
.experience.dream-transformed .exp-result::before{opacity:1;transform:none}
.experience.dream-transformed:nth-child(2)::after{background:linear-gradient(105deg,#fffdf9d9,#eaf0f4a3)}
.experience.dream-transformed:nth-child(3)::after{background:linear-gradient(105deg,#fffdf9d9,#edf2eaa3)}
.experience.dream-transformed:nth-child(4)::after{background:linear-gradient(105deg,#fffdf9d9,#e9eef3a3)}
.featured{position:relative;transition:transform .7s,box-shadow .7s}
.featured::before{content:"TONGSAMA’S MENU / 01";position:absolute;right:5%;top:-21px;z-index:3;padding:5px 13px;background:#fffaf6;border:1px solid #dfccd5;color:#916f7f;font-size:8px;letter-spacing:1.3px;opacity:0;transform:translateY(9px) rotate(2deg);transition:opacity .45s,transform .55s}
.featured.menu-awake{box-shadow:14px 18px 45px #745a6818;transform:translateY(-3px)}
.featured.menu-awake::before{opacity:1;transform:translateY(0) rotate(2deg)}
.data-feature{position:relative;transition:box-shadow .7s,background .7s}
.data-feature::before{content:"SWEETNESS / SIGNAL LEVEL";position:absolute;right:31px;top:22px;font-size:8px;letter-spacing:1.5px;color:#91a39b;opacity:0;transition:opacity .45s}
.data-numbers>div{position:relative;padding-bottom:10px}
.data-numbers>div::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:#a4c6b5;box-shadow:0 0 8px #a4c6b5;transition:width .8s cubic-bezier(.16,.75,.2,1)}
.data-numbers>div:nth-child(1)::after{--level:72%}
.data-numbers>div:nth-child(2)::after{--level:91%;background:#bd88a0}
.data-numbers>div:nth-child(3)::after{--level:88%;background:#9faed0}
.data-feature.sweetness-awake{background:linear-gradient(115deg,#f1f4ee,#f7e9ef 88%);box-shadow:10px 14px 34px #76616c12}
.data-feature.sweetness-awake::before{opacity:1}
.data-feature.sweetness-awake .data-numbers>div::after{width:var(--level)}
.narrative-bridge{transition:transform .65s,box-shadow .65s,background .65s}
.narrative-bridge.dream-transformed{transform:rotate(-.35deg) translateY(-3px);box-shadow:8px 13px 30px #8c66791c;background:#fff7f8}
.lab-bridge.dream-transformed{transform:rotate(.25deg) translateY(-3px)}
@media(max-width:760px){.experience::after{inset:5px -7px}
.experience.dream-transformed .exp-result{padding:12px 14px}
.featured::before{right:15px}
.data-feature::before{display:none}}
@media(prefers-reduced-motion:reduce){.experience::after,.featured::before,.data-feature::before{transition:none}
.experience.dream-transformed::after{background:#fffaf7;border-color:#ead6df}
.data-numbers>div::after{width:var(--level)}}

/* V2.6 P0 — one paper, a person, and a small opening in its surface.
   All initial content is readable without JS. Only data-opening opts into motion. */
.hero{display:block;max-width:1320px;min-height:0;margin:0 auto;padding:48px 48px 64px;background:none}
.hero-paper{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:55px;padding:28px 48px 30px;background:#fffdfa;border:1px solid #e7dfe0;box-shadow:0 22px 65px #56414d0a;isolation:isolate}
.hero-paper::after{content:"";position:absolute;inset:42% -20px -15px 48%;background:radial-gradient(ellipse at 70% 55%,#efbfd47a,transparent 68%);z-index:-1;pointer-events:none;opacity:.8;transition:opacity 1.4s}
.portfolio-meta{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;padding-bottom:19px;border-bottom:1px solid #e8dfe2;color:#83757f;font-size:12px;letter-spacing:1.4px}
.portfolio-meta span:last-child{letter-spacing:.2px}
.hero-copy{grid-column:1;grid-row:2;padding:40px 0 12px;z-index:2;align-self:start}
.hero .hello{margin:0 0 12px;font-size:21px;font-weight:400;color:#76636e;min-height:38px}
.hero .personal-signature{font-family:inherit;font-size:17px;color:#896577;white-space:nowrap}
.hero h1{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-weight:600;font-size:clamp(42px,4.8vw,65px);letter-spacing:1px;line-height:1.3}
.hero h1 .name-note{display:block;margin-top:8px;font:italic 22px Georgia,serif;letter-spacing:.5px;color:#9c7c8c}
.hero .profession{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:24px;font-size:19px;color:#5f4a5a;font-weight:500}
.profession span{font-size:12px;color:#847783;align-self:center;font-weight:400}
.personal-thought{margin-top:24px;font-size:19px;line-height:1.9;color:#55535d;letter-spacing:.2px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start;margin-top:29px}
.hero .button{font-size:14px;min-height:48px;padding:11px 21px;border-radius:4px;gap:8px}
.hero .resume-hero{background:#75556a;color:white;border:1px solid #75556a;box-shadow:none}
.work-hero{border:1px solid #cbbbc4;background:#fffdfa}
.resume-consideration{font-size:12px;color:#806575;margin:10px 0 0}
.personal-photo{grid-column:2;grid-row:2;justify-self:end;align-self:start;width:165px;margin:28px 8px 0 0;padding:8px 8px 10px;background:#fffefb;border:1px solid #e4dcda;box-shadow:4px 8px 16px #67516012;transform:rotate(5deg);z-index:3}
.personal-photo .portrait{position:relative;inset:auto;width:100%;height:154px;border-radius:0;background:linear-gradient(155deg,#f6ebec,#e9eaf0 65%,#e1e9e3);box-shadow:none;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column}
.personal-photo .portrait strong{font:16px/1.8 "Microsoft YaHei",sans-serif;color:#847480;margin:10px 0 0}
.photo-caption{font-size:10px;letter-spacing:1.2px;color:#7e7280}
.personal-photo figcaption{font:italic 11px/1.7 Georgia,serif;text-align:center;padding-top:8px;color:#89727e}
.personal-photo .portrait img{width:100%;height:100%;object-fit:cover}
.hero .world{grid-column:2;grid-row:2/4;align-self:end;width:300px;height:338px;aspect-ratio:auto;min-width:0;margin:208px -20px -12px 0;display:block;position:relative;justify-self:end;isolation:isolate;z-index:4}
.world::after{content:"";position:absolute;left:-42px;right:-30px;bottom:25px;height:1px;background:linear-gradient(90deg,transparent,#c5a6b7,transparent);transform:rotate(-3deg);pointer-events:none;box-shadow:0 12px 20px #cd9ab5}
.opening-caption{height:88px;padding:0 12px;display:none;color:#6e5969}
.js-ready .opening-caption{display:block}
.opening-index{font-size:9px;letter-spacing:1.5px;color:#8c7d88;display:block;margin-bottom:5px}
.opening-caption p{font-size:14px;line-height:1.6;max-width:270px;min-height:44px}
.opening-progress{height:2px;width:70px;background:#e9dfe4;margin-top:8px;overflow:hidden}
.opening-progress i{display:block;height:100%;width:100%;background:#ad8a9c;transform-origin:left;transition:transform .5s}
.portal-aperture{position:relative;width:100%;height:220px;border:1px solid #ddccd5;background:#eddee6;perspective:900px;box-shadow:inset 0 0 25px #7f59652b,7px 10px 24px #6b435c12;isolation:isolate}
.portal-room{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 75%,#f6e7e8,#e6dce9);box-shadow:inset 0 0 24px #9871862e}
.portal-room .machine-art{position:absolute;width:240px;max-width:none;height:240px;left:50%;bottom:-48px;transform:translateX(-50%);object-fit:contain;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse,black 40%,#000c 59%,transparent 72%)}
.shop-sign{position:absolute;top:14px;left:12px;right:12px;text-align:center;font:italic 15px/1.3 Georgia,serif;color:#795971;z-index:1}
.shop-sign em{font-size:22px;font-weight:400}
.machine-status{position:absolute;right:12px;bottom:10px;font-size:8px;letter-spacing:1px;color:#73586d}
.portal-shutters{position:absolute;inset:0;pointer-events:none;display:none;transform-style:preserve-3d;z-index:3}
.portal-shutters>span{position:absolute;top:0;bottom:0;width:50%;background:#fcfaf7;backface-visibility:hidden;transition:transform 1.05s cubic-bezier(.22,.65,.25,1);box-shadow:0 0 1px #cabcc2}
.shutter-left{left:0;transform-origin:left;transform:rotateY(-112deg)}
.shutter-right{right:0;transform-origin:right;transform:rotateY(112deg)}
.portal-shutters i{position:absolute;top:20%;left:20%;right:20%;height:50%;border-block:1px solid #e5dce0;background:repeating-linear-gradient(0deg,transparent 0 12px,#e8e2e5 12px 13px)}
.portal-aperture::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 48%,#f6b9d4 50%,transparent 52%);box-shadow:0 0 30px #e6b1cd70;opacity:0;transition:opacity .7s;z-index:4}
.discovery-window{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;align-items:center;justify-content:center;gap:9px;min-height:44px;font-size:12px;padding:10px 13px;background:#fffcf7;border:1px solid #dbccd3;border-radius:2px;z-index:5}
.window-light{width:5px;height:5px;border-radius:50%;background:#b8a6b0;transition:box-shadow .5s,background .5s}
.clerk-home{position:absolute;bottom:34px;left:-24px;display:flex;align-items:flex-end;gap:8px;z-index:6;transition:transform .7s,opacity .7s}
.cat-help{background:transparent;padding:0;min-width:60px;min-height:60px}
.cat-help img{width:65px;height:auto}
.cat-help:hover{transform:rotate(-5deg)}
.clerk-home p{font-size:12px;color:#7a6070;background:#fffaf5e8;padding:3px 9px;margin-bottom:2px}
.opening-tools{display:flex;justify-content:flex-end;align-items:center;padding:6px 0;min-height:42px}
.opening-skip,.machine-start{position:static;background:none;border:0;border-bottom:1px solid #cbb4c1;min-height:40px;padding:5px 3px;font-size:12px;color:#705968}
.hero-proof{grid-column:1;grid-row:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:520px;margin:28px 0 0;padding:20px 0 0;border-top:1px solid #e1d5db;align-self:start}
.hero-proof a{padding:0;border:0;min-width:0}
.hero-proof a::after,.hero-proof span::before{content:none}
.hero-proof b{display:block;font:30px/1.3 Georgia,serif;color:#755b70}
.hero-proof span{display:block;font-size:12px;line-height:1.7;margin-top:5px;color:#6d6570}
.hero-footnote{grid-column:1/-1;margin:23px 0 0;font-size:12px;color:#837782;display:flex;gap:24px}
.hero .scroll-note{position:static;margin:22px 0 0;display:flex;justify-content:center;gap:16px;transform:none;font-size:12px;letter-spacing:1px;color:#847481}
.hero .scroll-note span{font-size:16px}
/* Enabled only once listeners are installed; no overlay and no scroll locking. */
body[data-opening] .portal-shutters{display:block}
body[data-opening="preparing"] .portal-shutters>span,body[data-opening="pause"] .portal-shutters>span{transform:rotateY(0)}
body[data-opening="discovery"] .shutter-left{transform:rotateY(-5deg)}
body[data-opening="discovery"] .shutter-right{transform:rotateY(5deg)}
body[data-opening="preparing"] .dream-air,body[data-opening="pause"] .dream-air{opacity:.04}
body[data-opening="preparing"] .hero-paper::after,body[data-opening="pause"] .hero-paper::after{opacity:0}
body[data-opening="discovery"] .dream-air{opacity:.3}
body[data-opening="discovery"] .portal-aperture::after{opacity:1}
body[data-opening="discovery"] .window-light{background:#d890b1;box-shadow:0 0 12px 4px #f0b6d1}
body[data-opening="preparing"] .personal-signature,body[data-opening="pause"] .personal-signature,body[data-opening="discovery"] .personal-signature{visibility:hidden}
body[data-opening="preparing"] .clerk-home,body[data-opening="pause"] .clerk-home,body[data-opening="discovery"] .clerk-home{opacity:0;visibility:hidden;transform:translateY(20px)}
body[data-opening="preparing"] .opening-progress i{transform:scaleX(.35)}
body[data-opening="pause"] .opening-progress i{transform:scaleX(.86)}
body[data-opening="complete"] .opening-progress{visibility:hidden}
body[data-opening="complete"] .opening-index{color:#a48b9a}
/* Fail-open visual safety: even an interrupted timer cannot indefinitely cover the portal. */
body[data-opening="preparing"] .portal-shutters,body[data-opening="pause"] .portal-shutters,body[data-opening="discovery"] .portal-shutters{animation:opening-fail-open 8s step-end forwards}
@keyframes opening-fail-open{to{visibility:hidden}}
footer>p{line-height:1.9}.footer-signature{display:block;margin-top:8px;color:#876176}
@media(min-width:1500px){.hero{padding-top:64px;padding-bottom:72px}.hero-paper{padding:34px 60px 38px;grid-template-columns:minmax(0,1fr) 340px}.hero .world{width:320px}.hero-copy{padding-top:45px}}
@media(max-width:1050px){.hero{padding:30px 30px 48px;min-height:0}.hero-paper{padding:24px 28px;grid-template-columns:minmax(0,1fr) 225px;gap:0 25px}.hero h1{font-size:46px;letter-spacing:0}.hero .world{width:235px;margin-right:-8px;margin-top:210px;height:313px}.portal-aperture{height:195px}.personal-photo{width:140px;margin-right:0}.personal-photo .portrait{height:130px}.personal-thought{font-size:17px}.hero-proof{gap:12px}.hero-proof span{font-size:11px}.hero .profession{gap:3px;font-size:17px}.profession span{width:100%}.hero .button{padding-inline:14px;font-size:13px}.clerk-home{left:-12px}.opening-caption p{font-size:13px}}
@media(max-width:760px){
 .header{padding:8px 12px;gap:3px;min-height:98px}.header nav{gap:0;justify-content:space-between}.header nav a{font-size:11px;min-height:40px}.header nav .header-resume{padding:4px 8px}
 .hero{padding:20px 16px 35px}.hero-paper{display:grid;grid-template-columns:minmax(0,1fr);padding:20px;gap:0}
 .portfolio-meta{font-size:10px;letter-spacing:.6px;padding-bottom:14px}.portfolio-meta span:last-child{display:none}
 .hero-copy{grid-column:1;grid-row:2;padding:21px 0 0;text-align:left}.hero .hello{font-size:17px;min-height:28px;margin:0 0 5px}.hero .personal-signature{font-size:14px}
 .hero h1{font-size:39px;line-height:1.3;letter-spacing:0}.hero h1 .name-note{display:none}
 .hero .profession{font-size:16px;gap:2px;margin-top:12px}.profession span{font-size:11px}
 .personal-thought{font-size:16px;line-height:1.9;margin-top:18px}.hero .actions{margin-top:20px;gap:8px}.hero .button{font-size:13px;padding:10px 13px;min-height:46px}.resume-consideration{font-size:11px}
 .personal-photo{grid-column:1;grid-row:5;justify-self:end;align-self:start;width:105px;margin:32px 0 0;transform:rotate(6deg)}.personal-photo .portrait{height:112px}.personal-photo .portrait strong{font-size:12px}.photo-caption{font-size:8px}.personal-photo figcaption{font-size:9px}
 .hero-proof{grid-column:1;grid-row:3;margin-top:23px;padding-top:15px;gap:10px;max-width:none}.hero-proof b{font-size:26px}.hero-proof span{font-size:11px;line-height:1.6}
 .hero-footnote{grid-column:1;grid-row:4;font-size:10px;gap:10px;flex-wrap:wrap;margin-top:15px}
 .hero .world{grid-column:1;grid-row:5;justify-self:start;width:calc(100% - 22px);height:335px;margin:28px 0 0;padding-top:0;align-self:start;z-index:2}
 .opening-caption{width:calc(100% - 85px);height:125px;padding:0;display:none}.js-ready .opening-caption{display:block}.opening-index{font-size:8px;letter-spacing:.8px}.opening-caption p{font-size:13px;min-height:63px;line-height:1.7}
 .portal-aperture{height:175px;width:100%}.portal-room .machine-art{width:205px;height:205px;bottom:-40px}.shop-sign{top:10px;font-size:12px}.shop-sign em{font-size:18px}.clerk-home{bottom:32px;left:-13px}.cat-help img{width:56px}.clerk-home p{font-size:11px}.world::after{left:-10px;right:-15px;bottom:20px}.hero-paper::after{inset:58% -10px -10px 0}
 .hero .scroll-note{font-size:11px;margin-top:20px}.opening-tools{padding:0;min-height:36px}.opening-skip,.machine-start{font-size:11px;min-height:36px}.hero .world:not(:has(.opening-caption)){margin-top:0}
}
@media(max-width:360px){.hero{padding-inline:10px}.hero-paper{padding:17px}.hero h1{font-size:36px}.hero .button{font-size:12px;padding-inline:11px}.hero-proof{gap:7px}.hero-proof b{font-size:23px}.hero-proof span{font-size:10px}.personal-thought{font-size:15px}.personal-photo{width:92px}.opening-caption{width:calc(100% - 75px)}.clerk-home p{font-size:10px}}
@media(prefers-reduced-motion:reduce){.portal-shutters{display:none!important}.hero-paper::after{opacity:.8!important}.personal-signature{visibility:visible!important}.clerk-home{visibility:visible!important;opacity:1!important;transform:none!important}.dream-air{opacity:.95!important}.opening-progress{display:none}.opening-tools .opening-skip{display:none}}
/* Mobile can wait for the window without playing its story below the fold. */
body[data-opening="waiting"] .portal-shutters>span{transform:rotateY(0)}
body[data-opening="waiting"] .clerk-home{opacity:0;visibility:hidden}
body[data-opening="waiting"] .personal-signature{visibility:hidden}
body[data-opening="waiting"] .dream-air{opacity:.04}
body[data-opening="waiting"] .hero-paper::after{opacity:0}
body[data-opening="waiting"] .opening-progress i{transform:scaleX(.1)}
.hero h1 .name-note{color:#9c7c8c;white-space:normal;font-weight:400}
/* Keep the machine behind its sign rather than letting the image cover the label. */
.portal-room .machine-art{width:205px;height:205px;bottom:-31px}
@media(max-width:1050px){.portal-room .machine-art{width:180px;height:180px;bottom:-35px}}
@media(max-width:760px){.portal-room .machine-art{width:155px;height:155px;bottom:-29px}}
@media(max-width:760px){.personal-photo{margin-top:8px}.personal-photo .portrait{height:100px}.personal-photo figcaption{display:none}}

/* V2.6 P1 — the idea in About becomes a quiet event instead of another decorated card. */
.worldline-moment{--worldline-cross:0;--worldline-light:0;position:relative;margin:74px 0 8px;padding:0 3%;overflow:visible}
.worldline-moment::before{content:"";position:absolute;inset:20% 26%;background:radial-gradient(ellipse,#e7b7ce42,transparent 66%);filter:blur(20px);opacity:var(--worldline-light);pointer-events:none}
.worldline-moment svg{display:block;width:100%;height:auto;overflow:visible}
.worldline{fill:none;stroke:#c8b8c2;stroke-width:1.3;vector-effect:non-scaling-stroke;transition:stroke .7s,filter .7s;transform-box:view-box;transform-origin:center}
.worldline-a{transform:translateY(calc(var(--worldline-cross) * 30px)) rotate(calc(var(--worldline-cross) * 5.8deg));stroke:#c9a8b8}
.worldline-b{transform:translateY(calc(var(--worldline-cross) * -30px)) rotate(calc(var(--worldline-cross) * -5.8deg));stroke:#aebfb5}
.worldline-ring{fill:none;stroke:#d5a8bd;stroke-width:1;opacity:calc(var(--worldline-light) * .65);transform-origin:450px 95px;transform:scale(calc(.45 + var(--worldline-light) * .55));filter:drop-shadow(0 0 7px #e4aaca)}
.worldline-star{fill:#a6748d;opacity:var(--worldline-light);transform-origin:450px 95px;transform:scale(calc(.35 + var(--worldline-light) * .65));filter:drop-shadow(0 0 8px #df9fc0)}
.worldlines-met .worldline{stroke:#aa8e9e;filter:drop-shadow(0 0 4px #e5c2d3)}
.worldline-moment figcaption{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin-top:-5px;color:#94848d;font-size:10px;letter-spacing:.5px}
.worldline-moment figcaption strong{font-weight:500;color:#755b6c;font-size:14px;letter-spacing:.2px;text-align:center}
.worldline-moment figcaption span:last-child{text-align:right}

/* A deliberately quieter case: honest reflection sits below the two headline projects. */
.reflection-case{display:grid;grid-template-columns:145px minmax(0,1fr);gap:38px;align-items:center;margin:52px 0 0;padding:30px 38px;border-block:1px solid #decfd6;background:linear-gradient(100deg,#fffdfa 0 58%,#f8edf2 100%);position:relative}
.reflection-case::after{content:"";position:absolute;right:-26px;top:-18px;width:90px;height:90px;border:1px solid #d8c4ce;border-radius:50%;opacity:.45;box-shadow:0 0 35px #e5bacd42;pointer-events:none}
.reflection-mark{min-height:118px;border:1px solid #cdbac3;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#f9f4f4;transform:rotate(-2deg);box-shadow:7px 9px 0 #efe3e8;color:#79606e}
.reflection-mark span{font:italic 15px Georgia,serif;letter-spacing:2px}.reflection-mark b{font:35px/1.3 Georgia,serif;font-weight:400}.reflection-mark small{font-size:9px;letter-spacing:1px}
.reflection-case h3{font-size:clamp(22px,2.5vw,34px);font-weight:500;line-height:1.45;margin:8px 0 10px}.reflection-case p{max-width:760px;line-height:1.85;color:#625d65}.reflection-case .text-link{margin-top:12px}

/* Human details stay optional and one opens at a time. */
.human-stories{margin:46px 0 34px;border-top:1px solid #d7c3cd;padding-top:21px}
.human-stories>.mini-label{margin-bottom:12px;color:#8d6e7f}
.human-stories details{border-bottom:1px solid #e7dce1;background:#fffdfa}
.human-stories summary{list-style:none;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:17px 4px;cursor:pointer;font-size:15px;font-weight:500;color:#5e4c58;line-height:1.6;transition:color .25s,padding .25s}
.human-stories summary::-webkit-details-marker{display:none}.human-stories summary::after{content:"＋";grid-column:3;font-weight:300;color:#a67b90}.human-stories details[open] summary::after{content:"−"}.human-stories summary:hover{color:#9b637d;padding-left:8px}.human-stories summary span{font:11px Georgia,serif;color:#ad8799}
.human-story-copy{padding:2px 48px 20px;color:#5e5a62}.human-story-copy p{margin:0 0 11px;line-height:1.9}.human-story-copy small{display:inline-block;margin-top:3px;padding:4px 8px;background:#f6e9ef;color:#88697a;font-size:9px;letter-spacing:.7px}

/* The three values are different units; a full rule avoids implying a false shared scale. */
.data-numbers>div::after,.data-feature.sweetness-awake .data-numbers>div::after{width:100%;opacity:.24;box-shadow:none}

@media(max-width:760px){
 .worldline-moment{margin:50px -4px 0;padding:0}.worldline-moment figcaption{grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}.worldline-moment figcaption strong{grid-column:1/-1;grid-row:1;font-size:13px}.worldline-moment figcaption span{font-size:9px}.worldline-moment svg{min-height:112px}
 .reflection-case{grid-template-columns:82px minmax(0,1fr);gap:18px;margin-top:30px;padding:25px 5px 25px 0;background:linear-gradient(100deg,#fffdfa 0 72%,#f7e9f0 100%)}.reflection-mark{min-height:104px}.reflection-mark b{font-size:28px}.reflection-case h3{font-size:20px}.reflection-case p{font-size:13px;line-height:1.8}.reflection-case::after{display:none}
 .human-stories{margin-top:34px}.human-stories summary{grid-template-columns:27px 1fr auto;font-size:13px;padding-block:15px}.human-story-copy{padding:0 16px 17px 37px}.human-story-copy p{font-size:13px}
}
@media(max-width:360px){.reflection-case{grid-template-columns:1fr;padding:22px 0}.reflection-mark{width:92px;min-height:78px}.worldline-moment figcaption span{display:none}}
@media(prefers-reduced-motion:reduce){.worldline-moment{--worldline-cross:1!important;--worldline-light:1!important}.worldline,.worldline-ring,.worldline-star{transition:none!important}.human-stories summary{transition:none}}

/* V2.6 P2 — one resident with three jobs: open the window, hand off to Works, help at the Lab. */
.brand img{filter:drop-shadow(0 3px 5px #c997ac20);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.brand:hover img{transform:translateY(-2px) rotate(-3deg)}
.recipe-bridge{position:relative;overflow:visible}
.js-ready .cat-relay{display:none}
.js-ready body.cat-relay-ready .cat-relay{display:inline-flex}
.cat-relay{position:absolute;right:28px;bottom:-61px;z-index:5;align-items:flex-end;gap:8px;padding:0;background:transparent;color:#755c6b;text-align:left;opacity:0;transform:translateY(9px);animation:cat-relay-enter .7s .15s forwards}
.cat-relay img{width:43px;height:auto;transform:translateY(4px)}
.cat-relay span{max-width:235px;padding:7px 10px;border:1px solid #dfcdd6;background:#fffaf6e8;box-shadow:5px 7px 16px #73566a0d;font-size:10px;line-height:1.6}
.cat-relay:hover img{transform:translateY(1px) rotate(-4deg)}
@keyframes cat-relay-enter{to{opacity:1;transform:none}}

/* The end keeps the same window alive rather than opening a second ending scene. */
.footer-loop{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 14px 9px 38px;border-left:1px solid #dfcbd5;overflow:hidden;min-width:155px}
.footer-loop small{font-size:10px;color:#8c7884}.footer-loop a{font-size:10px;letter-spacing:1px;color:#715665;border-bottom:1px solid #c8aebc;min-height:30px;display:flex;align-items:center}
.footer-tail{position:absolute;left:-16px;bottom:-29px;width:52px;height:64px;border:2px solid #aa8495;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(-28deg) translateY(18px);opacity:.15;transition:transform 1.2s cubic-bezier(.2,.75,.2,1),opacity 1s}
.footer-tail::after{content:"";position:absolute;width:24px;height:18px;right:-5px;top:-7px;border-top:2px solid #aa8495;border-radius:50%;transform:rotate(28deg)}
.journey-complete .footer-tail{transform:rotate(-28deg) translateY(0);opacity:.75}
.journey-complete .footer-loop{background:linear-gradient(90deg,#f9edf267,transparent)}
body.journey-complete .machine-status{color:#96687e}

@media(max-width:760px){
 .js-ready body.cat-relay-ready .cat-relay{display:flex}
 .recipe-bridge{overflow:visible;margin-bottom:58px}
 .cat-relay{right:2px;bottom:-50px}.cat-relay img{width:37px}.cat-relay span{max-width:210px;font-size:9px;padding:5px 8px}
 .footer-loop{order:2;margin-left:auto}.sound-control{order:4}footer>p{order:3}
}
@media(max-width:360px){.cat-relay span{max-width:180px}.footer-loop{margin-left:0}}
@media(prefers-reduced-motion:reduce){.brand img,.footer-tail{transition:none!important}.cat-relay{animation:none!important;opacity:1;transform:none}.journey-complete .footer-tail{transform:rotate(-28deg)}}

/* V2.6 P2 polish — factual signals, a discoverable reward, and one calmer Dream Mode. */
/* These three values use different units. Each mark describes its own structure instead of pretending they share a percentage scale. */
.data-numbers>div::after,.data-feature.sweetness-awake .data-numbers>div::after{display:none}
.data-numbers>div{min-width:92px;padding-bottom:0}
.data-numbers>div>span:not(.metric-categories):not(.metric-score):not(.metric-rank){min-height:21px}
.metric-categories,.metric-score,.metric-rank{position:relative;width:86px;height:17px;margin-top:9px;color:inherit}
.metric-categories{display:grid!important;grid-template-columns:repeat(9,1fr);gap:3px;align-items:end}
.metric-categories i{display:block;height:7px;border:1px solid #91ae9f;background:#dce9df;transform:translateY(3px);opacity:.32;transition:transform .45s,opacity .45s,background .45s}
.sweetness-awake .metric-categories i{transform:none;opacity:1;background:#bad5c6}
.sweetness-awake .metric-categories i:nth-child(3n+2){transition-delay:.08s}.sweetness-awake .metric-categories i:nth-child(3n){transition-delay:.16s}
.metric-score{display:flex!important;flex-direction:column;justify-content:center;gap:3px;padding:2px 0}
.metric-score i{display:block;height:1px;background:#bf93a7;opacity:.55}.metric-score i:nth-child(1){width:100%}.metric-score i:nth-child(2){width:68%}.metric-score i:nth-child(3){width:82%}
.metric-score::after{content:"119";position:absolute;right:-2px;top:-1px;padding:0 3px;background:#f2e8ec;color:#956d80;font:8px/13px Georgia,serif;transform:rotate(-2deg)}
.metric-rank{display:block!important;background:repeating-linear-gradient(90deg,#a9b7c7 0 1px,transparent 1px calc(4%));border-bottom:1px solid #c9d0da;opacity:.75}
.metric-rank i{position:absolute;left:8.33%;bottom:-3px;width:5px;height:20px;border-radius:4px;background:#879db8;box-shadow:0 0 0 3px #edf0f4,0 0 10px #98aac0;transform:translateX(-50%)}

.secret-menu-trigger{min-height:31px;margin-top:3px;padding:0;background:transparent;border-bottom:1px dotted #bc93a6;color:#8e6579;font-size:9px;letter-spacing:1.4px;text-align:left}
.secret-menu-trigger[hidden],.secret-menu-note[hidden]{display:none}
.secret-menu-ready .secret-menu-trigger{animation:secret-arrive .7s cubic-bezier(.2,.7,.2,1) both}
.secret-menu-note{width:min(230px,65vw);margin-top:8px;padding:11px 12px;border:1px solid #dfc9d4;background:#fffaf7;box-shadow:6px 8px 18px #6d52600e;transform:rotate(-.5deg)}
.secret-menu-note span{display:block;font-size:7px;letter-spacing:1.4px;color:#a37a8e}
.secret-menu-note p{margin-top:5px;font-size:10px;line-height:1.7;color:#665a62}
@keyframes secret-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

#sound-toggle{display:inline-flex;align-items:center;gap:8px}
.dream-mode #sound-toggle::after{content:none}
.dream-visualizer{display:inline-flex!important;align-items:center;justify-content:center;gap:2px;width:15px;height:12px}
.dream-visualizer i{display:block;width:2px;height:4px;border-radius:2px;background:currentColor;opacity:.45;transform-origin:center}
.dream-mode .dream-visualizer i{animation:dream-visualize 1.25s ease-in-out infinite}.dream-mode .dream-visualizer i:nth-child(2){animation-delay:-.38s}.dream-mode .dream-visualizer i:nth-child(3){animation-delay:-.72s}
@keyframes dream-visualize{0%,100%{transform:scaleY(.55);opacity:.45}50%{transform:scaleY(2.1);opacity:.9}}

/* The open window breathes very slowly; Dream Mode strengthens existing light instead of adding more objects. */
.dream-awake .portal-room{animation:portal-room-breathe 14s ease-in-out infinite}
.dream-mode .portal-room{box-shadow:inset 0 0 28px #8e698238,0 0 30px #e5aac644}
.dream-mode .worldline-star{filter:drop-shadow(0 0 13px #dc8fb8);fill:#98637d}
.dream-mode .skills-section{box-shadow:inset 0 22px 90px #dda9c13b;filter:saturate(1.07)}
.dream-mode .footer-tail{filter:drop-shadow(0 0 5px #cb8eaa)}
@keyframes portal-room-breathe{0%,100%{filter:saturate(1);box-shadow:inset 0 0 24px #9871862e}50%{filter:saturate(1.07);box-shadow:inset 0 0 31px #9871863d}}

@media(max-width:760px){
 .data-numbers{gap:14px}.data-numbers>div{min-width:0;flex:1}.metric-categories,.metric-score,.metric-rank{width:min(72px,100%)}
 .secret-menu-note{width:min(215px,76vw)}
}
@media(max-width:360px){.data-numbers{gap:9px}.metric-categories{gap:2px}.metric-score::after{font-size:7px}.secret-menu-note{width:210px}}
@media(prefers-reduced-motion:reduce){
 .metric-categories i,.secret-menu-ready .secret-menu-trigger,.dream-visualizer i,.dream-awake .portal-room{animation:none!important;transition:none!important}
 .metric-categories i{transform:none;opacity:1}.dream-mode .dream-visualizer i{transform:scaleY(1)}
}

/* Portfolio access and a wider selection from the original 24-page file. */
.portfolio-hero{border:1px solid #cbbbc4;background:#fffdfa;color:#6f5364}
.work-route{display:inline-block;margin-left:4px;color:#75556a;border-bottom:1px solid #c8aebc}
.portfolio-ticket{min-width:245px;padding:13px 16px;border:1px solid #ddcbd5;background:#fffaf7;box-shadow:5px 7px 0 #f0e2e8;transform:rotate(1deg)}
.portfolio-ticket span{display:block;font-size:10px;letter-spacing:1.2px;color:#987688;margin-bottom:5px}
.portfolio-ticket a{display:inline-flex;align-items:center;min-height:34px;font-size:14px;color:#654d5c;border-bottom:1px solid #b894a5}
.archive-case{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);gap:38px;align-items:center;margin-top:28px;padding:30px;background:#fffdfa;border:1px solid #dfd6d8;box-shadow:9px 12px 0 #eadfe4}
.archive-case-image{min-width:0;padding:12px;background:#edf0f2;border:1px solid #d9dfe2;overflow:hidden}
.archive-case-image img{width:100%;height:265px;object-fit:cover;object-position:top;transition:transform .4s}
.archive-case-image:hover img{transform:scale(1.025)}
.archive-case h3{font-size:clamp(22px,2.4vw,31px);font-weight:500;line-height:1.45;margin:8px 0 13px}
.archive-case p{font-size:15px;line-height:1.85;color:#625d65}
.archive-stats{display:flex;gap:30px;margin:17px 0 5px;padding-top:14px;border-top:1px solid #e5dadd}
.archive-stats span{font-size:12px;color:#7b6e76}.archive-stats b{display:block;font:26px/1.2 Georgia,serif;color:#77576a}
.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.tool-grid article>img{height:260px}
.document-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:7px}
.document-links .portfolio-link{border:1px solid #c9b4bf;background:#fffaf7;color:#705566}

@media(max-width:760px){
 .hero .portfolio-hero{width:100%}.work-route{margin:5px 0 0}
 .section-heading:has(.portfolio-ticket){align-items:flex-start;flex-direction:column}.portfolio-ticket{min-width:0;width:100%;transform:rotate(.4deg)}
 .archive-case{grid-template-columns:1fr;gap:20px;padding:20px;margin-top:22px}.archive-case-image img{height:230px}.archive-case h3{font-size:22px}.archive-case p{font-size:14px}.archive-stats{gap:22px}
 .tool-grid{grid-template-columns:1fr}.tool-grid article>img{height:240px}
 .document-links{flex-direction:column;align-items:stretch}.document-links .button{width:100%}
}
@media(max-width:360px){.archive-case{padding:15px}.archive-case-image img{height:205px}.portfolio-ticket a{font-size:13px}}

/* Internship-ready finishing pass: the Hero no longer reserves space for a second portrait. */
.hero .world{align-self:center;margin:42px -12px 0 0}
.resume-consideration{margin-top:12px}
.resume-consideration .work-route{margin-left:0}
.contact-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.contact-actions .contact-primary{background:#79536a;color:#fff;border:1px solid #79536a}
.contact-actions .text-link{font-size:13px}

/* Compact, user-triggered player. No audio starts until the inner play button is pressed. */
.music-player{position:fixed;right:18px;bottom:18px;z-index:18;color:#604d59}
.music-reveal{width:58px;height:58px;padding:5px;display:grid;place-items:center;background:#fffaf7e8;border:1px solid #d8c3cf;border-radius:50%;box-shadow:0 8px 24px #543b491c;backdrop-filter:blur(12px);transition:transform .25s,opacity .2s,box-shadow .25s}
.music-reveal:hover{transform:translateY(-2px);box-shadow:0 11px 28px #543b4926}
.record-disc{grid-area:1/1;width:34px;height:34px;border-radius:50%;background:repeating-radial-gradient(circle,#735467 0 2px,#947386 2px 3px,#735467 3px 5px);display:grid;place-items:center}
.record-disc i{width:9px;height:9px;border-radius:50%;background:#edcad9;border:2px solid #fff4f7}
.music-reveal-label{grid-area:1/1;align-self:end;margin-bottom:-12px;padding:0 3px;background:#fffaf7;font-size:9px;letter-spacing:.5px;color:#846778}
.music-player.is-playing .record-disc{animation:record-turn 5s linear infinite}.music-player.is-playing .music-reveal{box-shadow:0 0 0 4px #f2dce6,0 9px 28px #8a5d7428}
@keyframes record-turn{to{transform:rotate(360deg)}}
.music-player.panel-open .music-reveal{opacity:0;pointer-events:none}
.music-panel[hidden]{display:none}
.music-panel{position:absolute;right:0;bottom:0;width:min(320px,calc(100vw - 28px));min-height:148px;padding:20px 18px 16px;background:#fffaf7f2;border:1px solid #d8c3cf;box-shadow:0 16px 42px #47333e26;backdrop-filter:blur(16px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end}
.music-panel>div{padding-right:16px}.music-panel strong{display:block;margin:6px 0 4px;font-size:16px;font-weight:500}.music-panel #sound-note{display:block;font-size:12px;line-height:1.6;color:#81717a}
.music-kicker{display:block;font-size:9px;letter-spacing:1.1px;color:#9a7487}
.music-close{position:absolute;right:7px;top:6px;width:38px;height:38px;background:transparent;color:#806775;font-size:22px;line-height:1}
.music-panel #sound-toggle{min-width:76px;min-height:44px;padding:8px 11px;justify-content:center;border:1px solid #bfa4b2;background:#795b6d;color:#fff;font-size:12px}
.music-panel .dream-visualizer i{background:#fff}

@media(max-width:1050px) and (min-width:761px){.hero .world{margin-top:45px;margin-right:-8px}}
@media(max-width:760px){
 .hero .world{margin:28px 0 0;align-self:start}
 .contact-actions{align-items:stretch;flex-direction:column;gap:8px}.contact-actions .button,.contact-actions .text-link{width:100%;justify-content:center;text-align:center}
 .music-player{right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}.music-reveal{width:52px;height:52px}.record-disc{width:30px;height:30px}.music-panel{width:min(300px,calc(100vw - 24px));padding:18px 15px 14px;gap:12px}.music-panel>div{padding-right:10px}.music-panel #sound-toggle{min-width:70px}
}
@media(prefers-reduced-motion:reduce){.music-reveal,.record-disc{animation:none!important;transition:none!important}}

/* Final polish: widen mobile navigation hit areas without changing its structure. */
@media(max-width:760px){
 .header nav a{min-width:40px;justify-content:center}
}

/* Final polish: keep the open player clear of Hero proof at 390/768 widths. */
@media(min-width:361px) and (max-width:1050px){
 body.world-home .music-player.panel-open{top:110px;bottom:auto}
 body.world-home .music-player.panel-open .music-panel{top:0;bottom:auto}
}

/* Local title-font test: display headings only; body copy and controls keep their existing fonts. */
.hero h1,.section-heading h2,.about-letter h3,.education h3,.experience h3,.featured-visual h3,.featured-copy>h3,.card-body h3,.archive-case h3,.reflection-case h3,.design-grid h3,.data-feature h3,.tool-grid h3,.skills-layout h2,.closing h2{
 font-family:"Tongsama Title Serif","Noto Serif SC","Songti SC","STSong",Georgia,serif;
 font-weight:500;
}

/* AI-built projects (2026-10) */
.project-cover{position:relative;padding:0!important;overflow:hidden;background:#efe7ea}
.project-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.case-card:hover .project-cover img{transform:scale(1.03)}
.project-cover .mini-label{position:absolute;left:16px;top:16px;background:rgba(255,253,250,.92);padding:6px 12px;border-radius:999px;color:var(--ink)}
.ai-points{display:flex;flex-direction:column;gap:7px;margin:14px 0 18px}
.ai-points span{position:relative;padding-left:16px;font-size:14px;line-height:1.6;color:var(--muted)}
.ai-points span::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:#d9a0b6}
.ai-uvl{margin-top:28px}
.ai-uvl .reflection-mark span{letter-spacing:.08em}
.ai-links{display:flex;flex-wrap:wrap;gap:6px 22px}
@media(max-width:760px){nav a[href="#skills"]{display:none}}

/* 2026-10-12 结构与层次微调 */
.ai-band{position:relative;background:linear-gradient(180deg,#fbf5f8 0,#f7eef4 18%,#f7eef4 82%,#fbf5f8 100%);border-block:1px solid #eedfe7}
.ai-band>.section{padding-top:74px}
.ai-band .case-card,.ai-band .featured,.ai-band .reflection-case{background:#fffdfb}
.worldline-moment{margin-top:34px}
.worldline-moment svg{max-width:720px;margin:0 auto}
.more-tools{margin-top:28px;border:1px solid #e6dce1;border-radius:8px;background:#fffdfb}
.more-tools>summary{cursor:pointer;list-style:none;padding:18px 24px;font-size:15px;color:#6f5a68;display:flex;align-items:center;justify-content:space-between}
.more-tools>summary::-webkit-details-marker{display:none}
.more-tools>summary::after{content:"+";font-size:22px;line-height:1;color:#a3879a}
.more-tools[open]>summary::after{content:"−"}
.more-tools[open]>summary{border-bottom:1px solid #eee3e8}
.more-tools>.tool-grid{margin:0;padding:24px}
@media(max-width:760px){.more-tools>summary{padding:15px 16px;font-size:14px}.more-tools>.tool-grid{padding:14px}.ai-band>.section{padding-top:52px}}

/* 2026-10-12 口味系统：草莓=内容 蓝色=表达 薄荷=数据 奶油=执行 */
:root{--f-straw:#e9a2bd;--f-blue:#9fbbe0;--f-mint:#91c8a8;--f-cream:#e8cc98;--f-swirl:conic-gradient(var(--f-straw) 0 25%,var(--f-blue) 0 50%,var(--f-mint) 0 75%,var(--f-cream) 0)}
.flv{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:inset -1px -2px 0 #0000000f,inset 2px 2px 0 #ffffff80;vertical-align:-1px}
.flv.straw{--c:var(--f-straw)}.flv.blue{--c:var(--f-blue)}.flv.mint{--c:var(--f-mint)}.flv.cream{--c:var(--f-cream)}.flv.swirl{background:var(--f-swirl)}
.section-heading .eyebrow::before{content:"";display:inline-block;width:11px;height:11px;margin-right:9px;border-radius:50%;vertical-align:-1px;background:var(--scoop,var(--f-cream));box-shadow:inset -1px -2px 0 #0000000f,inset 2px 2px 0 #ffffff80}
#about{--scoop:var(--f-cream)}#experience{--scoop:var(--f-straw)}#ai-projects{--scoop:var(--f-swirl)}#works{--scoop:var(--f-straw)}#design{--scoop:var(--f-blue)}#data{--scoop:var(--f-mint)}#skills{--scoop:var(--f-swirl)}
.flavor-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:12.5px;color:#7a6873;margin:0}
.flavor-tags span{display:inline-flex;align-items:center;gap:6px}
.flavor-tags{margin-top:12px;gap:6px 12px}
.ai-band .section-heading .eyebrow{color:#9b6f87}

.ai-tags{margin:10px 0 12px}
.ai-tags span{font-size:11px;background:#fffdfb}
/* 颜文字始终显示，避免首屏出现“Hi，我是”后空白 */
.hero .personal-signature{visibility:visible!important}