:root{--paper:#eeece4;--red:#e66359;--bg:#191919}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--paper);font-family:Arial,"Microsoft YaHei",sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;height:76px;padding:0 5%;background:#191919ed;backdrop-filter:blur(14px);border-bottom:1px solid #ffffff25}header>a{font-size:20px;letter-spacing:2px}small{font-size:10px;color:#aaa;margin-left:15px}nav{display:flex;gap:30px;font-size:12px}nav a:hover{color:var(--red)}#progress{position:fixed;top:0;height:3px;background:var(--red);z-index:20}.hero{position:relative;padding:30px 5%;min-height:calc(100svh - 76px);overflow:hidden}.eyebrow{position:relative;z-index:2;color:var(--red);font-size:10px;letter-spacing:3px;display:flex;justify-content:space-between}.eyebrow span{color:#aaa}.cover{position:absolute;right:-5%;top:10%;width:68%;opacity:.7;transform:rotate(-5deg);mask-image:linear-gradient(90deg,transparent,#000 30%);animation:float 9s ease-in-out infinite}.hero-copy{position:relative;padding:10vh 0 7vh;animation:enter 1.2s both}.hero-copy p{color:#bbb;font-size:13px;letter-spacing:4px}h1{font-size:clamp(70px,8.6vw,140px);font-weight:400;letter-spacing:-5px;line-height:1;margin:35px 0}h1 em{font-family:Georgia,serif;font-weight:400}.hero-bottom{position:relative;border-top:1px solid #ffffff35;padding-top:25px;display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px}.hero-bottom a{color:var(--red)}.about{padding:90px 6%;background:var(--paper);color:#262521}.label{font-size:11px;letter-spacing:3px;color:var(--red);margin-bottom:35px}.about-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:7%;align-items:center}h2{font-size:clamp(38px,4.3vw,68px);font-weight:400;letter-spacing:-2px;line-height:1.25;margin:0 0 25px}h2 span{color:var(--red)}.about p{font-size:14px;line-height:1.9;max-width:430px;color:#65625c}.tags{margin-top:30px;font-size:11px;color:#706b62;line-height:2}.image{border:0;background:none;padding:0;width:100%;display:block;overflow:hidden}.image img{display:block;width:100%;transition:transform .7s}.image:hover img{transform:scale(1.025)}.about .image{transform:rotate(2deg);box-shadow:0 20px 40px #0002}.works{padding:90px 6% 20px}.section-head{display:flex;justify-content:space-between;align-items:end}.section-head p{font-size:12px;color:#aaa;margin-bottom:32px}.filters{display:flex;gap:28px;border-bottom:1px solid #ffffff35;margin:10px 0 45px}.filters button{background:none;border:0;border-bottom:2px solid transparent;padding:18px 0;font-size:12px;color:#aaa}.filters .active{color:var(--paper);border-color:var(--red)}.project{margin-bottom:65px}.project-cover{position:relative}.hint{position:absolute;bottom:22px;right:22px;background:#19191990;border:1px solid #ffffff70;padding:10px 18px;font-size:11px;border-radius:30px;pointer-events:none}.meta{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:1px solid #ffffff25}.meta h3{margin:0;font-size:25px;font-weight:400}.meta span{font-size:11px;color:#aaa;letter-spacing:1px}summary{list-style:none;cursor:pointer;font-size:12px;color:#aaa;padding:22px 0;display:flex;justify-content:space-between}summary::-webkit-details-marker{display:none}summary span{font-size:20px;color:var(--red)}details[open] summary span{transform:rotate(45deg)}.pages{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-bottom:15px}.pages .image:last-child:nth-child(odd){grid-column:1/-1;width:75%;justify-self:center}.closing{padding:90px 6% 100px;position:relative;background:var(--paper);color:#262521;overflow:hidden}.closing h2{font-size:clamp(45px,6vw,95px);position:relative;z-index:1}.closing>a{display:inline-block;padding:16px 0;border-bottom:1px solid #888;font-size:13px;position:relative;z-index:1}.star{position:absolute;right:8%;top:25px;font-size:330px;color:#d7d4ca;line-height:1;animation:spin 60s linear infinite}footer{padding:30px 6%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:#aaa}.reveal{opacity:0;transform:translateY(25px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}[hidden]{display:none!important}dialog{width:min(96vw,1800px);max-height:96vh;padding:0;border:1px solid #555;background:#191919;color:white}dialog::backdrop{background:#000d;backdrop-filter:blur(10px)}dialog img{display:block;width:100%}.dialogbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;position:sticky;top:0;background:#191919ed;font-size:12px}.dialogbar button{background:none;border:1px solid #666;padding:8px 15px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:4px}@keyframes enter{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes float{50%{transform:rotate(-3deg) translateY(-12px)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:700px){header{height:64px}header>a{font-size:16px}small{display:none}nav{gap:17px;font-size:11px}.hero{min-height:710px}.eyebrow{font-size:8px;letter-spacing:1px}.cover{width:130%;right:-25%;top:18%}.hero-copy{padding:17vh 0 11vh}.hero-copy p{font-size:11px;letter-spacing:2px}h1{font-size:64px;letter-spacing:-3px}.hero-bottom{font-size:10px;letter-spacing:0}.about,.works{padding:60px 5%}.about-grid{grid-template-columns:1fr;gap:30px}.about .image{transform:none}.section-head{display:block}.section-head p{margin:0 0 20px}.filters{gap:20px}.filters button{font-size:10px}.meta{gap:12px}.meta h3{font-size:20px}.meta span{font-size:9px;max-width:140px;text-align:right;line-height:1.6}.pages{grid-template-columns:1fr;gap:12px}.pages .image:last-child:nth-child(odd){width:100%}.hint{bottom:12px;right:12px;padding:8px 12px;font-size:10px}.closing{padding:60px 5%}.star{right:-65px;top:70px;font-size:280px}footer{font-size:9px}footer span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* Portfolio-first revision */
.hero{min-height:0;padding:24px 5% 28px}.portfolio-cover{display:block;width:100%;margin:24px auto 0;overflow:hidden}.portfolio-cover img{display:block;width:100%;height:auto;max-height:76vh;object-fit:contain}.hero-bottom{margin-top:22px}.about-grid{grid-template-columns:1fr 1fr;gap:6%;align-items:start}.about .image{transform:none;margin-top:10px}.software{margin-top:28px;padding:22px 0 0;border-top:1px solid #bdb9af}.software h3{font-size:11px;letter-spacing:2px;font-weight:400;margin:0 0 20px}.software>img{width:min(100%,390px);height:auto;display:block;image-rendering:auto}.software .tool-names{font-size:11px;color:#6c675d;line-height:1.9}.software p{font-size:12px;margin:18px 0 8px}.project-assets{display:grid;gap:30px;padding-top:22px}.asset-page h4{font-size:14px;font-weight:400;margin:0 0 14px}.asset-page h4 span{color:var(--red);font-size:10px;letter-spacing:2px;margin-right:12px}.asset-page .image{border:1px solid #ffffff18}.film-slot{margin-top:25px;padding:22px 25px;border:1px solid #ffffff24;background:#202020}.film-slot-label{font-size:11px;color:var(--red);letter-spacing:2px}.film-slot p{font-size:15px;margin:14px 0 8px}.film-slot small{font-size:11px;color:#aaa}.film-player{width:100%;display:block;background:#000;aspect-ratio:16/9;object-fit:contain;margin:24px 0}.video-note{font-size:11px;color:#aaa}@media(max-width:700px){.hero{min-height:0;padding-top:20px}.portfolio-cover{margin-top:24px;width:calc(100% + 10vw);margin-left:-5vw}.portfolio-cover img{max-height:none}.about-grid{grid-template-columns:1fr}.software>img{width:100%;max-width:370px}.project-assets{gap:23px}.film-slot{padding:18px}.asset-page h4{font-size:12px}}

.cinema{position:relative;isolation:isolate;overflow:hidden;margin:26px -2vw 34px;padding:55px 5%;background:#171717;border-radius:4px}.cinema:before{content:"";position:absolute;inset:-45px;z-index:-2;background-image:var(--film-bg);background-size:cover;background-position:center;filter:blur(30px);transform:scale(1.15);opacity:.7}.cinema:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#08080850,#080808b0)}.cinema-inner{max-width:1100px;margin:auto}.cinema .film-player{margin:0;border-radius:3px;box-shadow:0 22px 65px #0009}.cinema .video-note{margin:18px 0 0;color:#ddd;text-align:center;font-size:11px;letter-spacing:1px}@media(max-width:700px){.cinema{padding:30px 12px;margin-left:-3vw;margin-right:-3vw}.cinema .video-note{font-size:10px;line-height:1.7}}
