:root{--sage:#9ca78d;--sage-deep:#69745f;--paper:#ede7d8;--ink:#171914;--red:#bd5740;--mint:#b8d8d0;--px:0;--py:0}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ink)}body{margin:0;color:var(--ink);background:var(--sage);font-family:Arial,Helvetica,sans-serif}button,a,input{font:inherit;color:inherit}button{border:0}.paper-noise{position:fixed;z-index:300;inset:-50%;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");animation:grain .2s steps(2) infinite}.cursor-dot{position:fixed;z-index:301;left:calc((var(--px) + .5)*100%);top:calc((var(--py) + .5)*100%);width:8px;height:8px;border:1px solid #fff;border-radius:50%;pointer-events:none;mix-blend-mode:difference;transform:translate(-50%,-50%)}.loader{position:fixed;z-index:500;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;color:var(--paper);background:var(--sage-deep);transition:.7s cubic-bezier(.7,0,.2,1)}.loader b{font-size:120px;line-height:.8;text-shadow:6px 6px 0 var(--ink)}.loader span{font:10px monospace;letter-spacing:.2em}.ready .loader{translate:0 -105%;pointer-events:none}.nav{position:fixed;z-index:100;left:18px;right:18px;top:16px;height:68px;padding:0 12px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border:2px solid var(--ink);background:#e7e1d3e6;box-shadow:5px 5px 0 #171914;backdrop-filter:blur(12px)}.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:12px;font-weight:900;letter-spacing:-.03em}.logo>b{width:44px;height:44px;display:grid;place-items:center;border-radius:14px 18px 14px 15px;color:var(--ink);background:linear-gradient(145deg,#fff,#a9b6a4);box-shadow:inset 3px 3px 5px #fff,inset -4px -5px 7px #4f5c4e;font-size:30px}.logo small{display:block;margin-top:3px;font:7px monospace;letter-spacing:.13em}.nav nav{display:flex;gap:28px}.nav nav a{font:8px monospace;text-decoration:none;letter-spacing:.13em}.nav-tools{display:flex;justify-content:flex-end;gap:7px}.nav-tools>*{padding:11px 13px;border:1px solid var(--ink);background:transparent;text-decoration:none;font:7px monospace;letter-spacing:.1em;cursor:pointer}.nav-tools a{color:var(--paper);background:var(--ink)}
.hero{position:relative;height:100svh;min-height:720px;overflow:hidden;background:var(--sage)}.hero-art{position:absolute;inset:0;background:url('./chillpons-world.png') center/cover no-repeat;transform:translate3d(calc(var(--px)*-12px),calc(var(--py)*-8px),0) scale(1.035);transition:filter .7s}.hero-wash{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 47%,#9ca78d18 60%,#9ca78d99 100%),linear-gradient(0deg,#77826e66,transparent 35%)}.noise-field{position:absolute;inset:0;mix-blend-mode:multiply;transition:opacity .4s}.noise-field i{position:absolute;height:2px;background:#171914;animation:jitter calc(.25s + var(--i)*.015s) steps(2) infinite}.edition{position:absolute;left:34px;top:114px;font:7px/1.6 monospace;letter-spacing:.13em}.hero-copy{position:absolute;z-index:3;right:5vw;top:19%;width:48%;}.eyebrow{display:inline-block;padding:9px 12px;border:1px solid var(--ink);background:#d9d4c5;font:8px monospace;letter-spacing:.13em}.hero h1{margin:28px 0 22px;font-size:clamp(74px,10.6vw,174px);line-height:.66;letter-spacing:-.09em;text-transform:uppercase}.hero h1 em{display:inline-block;color:var(--paper);font-family:Georgia,serif;font-weight:400;text-shadow:4px 5px 0 var(--ink);transform:rotate(-3deg)}.hero-copy>p{margin-left:54%;font:9px/1.55 monospace;letter-spacing:.12em}.calm-control{position:absolute;z-index:4;right:5vw;bottom:5vh;width:43%;display:grid;grid-template-columns:1fr 1.05fr;border:2px solid var(--ink);background:#e7e1d3;box-shadow:7px 7px 0 var(--ink)}.calm-control>div{padding:18px 22px;display:grid;grid-template-columns:1fr auto;border-right:1px solid var(--ink)}.calm-control span,.calm-control small{font:7px monospace;letter-spacing:.12em}.calm-control b{grid-row:1/3;grid-column:2;font-size:40px}.calm-control small{align-self:end;color:#686d62}.calm-control button{position:relative;overflow:hidden;cursor:pointer;background:var(--red);font:9px monospace;font-weight:700;letter-spacing:.12em}.calm-control button i{position:absolute;width:90px;height:90px;left:50%;top:50%;translate:-50% -50%;border:1px solid #fff8;border-radius:50%;transition:.2s}.calm-control button:active{background:var(--ink);color:var(--paper)}.scroll-note{position:absolute;left:34px;bottom:28px;padding-bottom:8px;border-bottom:1px solid;text-decoration:none;font:8px monospace;letter-spacing:.13em}.tape{overflow:hidden;border-block:2px solid var(--ink);background:var(--red);transform:rotate(-.45deg);transform-origin:center}.tape div{width:max-content;padding:13px 0;animation:ticker 30s linear infinite;font:9px monospace;letter-spacing:.16em;white-space:nowrap}
.section-label{display:flex;gap:18px;align-items:center}.section-label b{width:46px;height:46px;display:grid;place-items:center;border:1px solid;border-radius:50%;font:10px monospace}.section-label span{font:7px/1.6 monospace;letter-spacing:.13em}.story{position:relative;min-height:1420px;padding:110px 6vw 150px;overflow:hidden;background-color:var(--paper);background-image:linear-gradient(#1719140b 1px,transparent 1px),linear-gradient(90deg,#1719140b 1px,transparent 1px);background-size:32px 32px}.story-head,.road-title{margin:110px 0 60px;display:grid;grid-template-columns:.68fr 1.32fr;align-items:end;gap:40px}.story-head>p,.road-title>p{font:8px/1.6 monospace;letter-spacing:.12em}.story h2,.road-title h2,.pocket-title h2{margin:0;font-size:clamp(68px,10vw,154px);line-height:.7;letter-spacing:-.08em}.story h2 em,.road-title h2 em,.pocket-title h2 em{color:var(--red);font-family:Georgia,serif;font-weight:400}.story-player{position:relative;display:grid;grid-template-columns:1fr 1.15fr;border:2px solid var(--ink);background:#d8d2c4;box-shadow:12px 13px 0 var(--ink)}.story-player figure{position:relative;min-height:660px;margin:0;padding:45px;background:#747e6b}.story-player figure img{width:100%;height:560px;object-fit:cover;border:8px solid #f4efe3;filter:saturate(.85) contrast(1.03);box-shadow:4px 5px 0 var(--ink);transform:rotate(-1.5deg)}.story-player figcaption{margin-top:20px;color:#e8e1d4;font:7px monospace;letter-spacing:.12em}.pin{position:absolute;width:23px;height:23px;border:1px solid;border-radius:50%;background:var(--red);box-shadow:2px 2px 0 var(--ink)}.pin.one{left:48px;top:42px}.pin.two{right:45px;bottom:95px}.story-player article{padding:60px 55px;animation:cardin .45s both}.track-top{display:flex;justify-content:space-between;border-bottom:1px solid;padding-bottom:16px;font:7px monospace;letter-spacing:.12em}.story-player article>small{display:block;margin-top:65px;color:#6a6d63;font:8px monospace;letter-spacing:.13em}.story-player article h3{max-width:520px;margin:18px 0 25px;font-size:clamp(38px,4.8vw,70px);line-height:.88;letter-spacing:-.06em}.story-player article p{max-width:590px;font:12px/1.75 monospace}.transport{margin-top:55px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}.transport button{width:48px;height:48px;cursor:pointer;border:1px solid;background:transparent}.transport span{height:4px;background:#b2ac9f}.transport span i{display:block;height:100%;background:var(--red);transition:.4s}.track-list{grid-column:1/3;display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid}.track-list button{min-height:78px;padding:15px;display:flex;gap:10px;align-items:center;border-right:1px solid;background:transparent;text-align:left;font:7px/1.4 monospace;cursor:pointer}.track-list button:last-child{border:0}.track-list button span{font-size:16px}.track-list button.active,.track-list button:hover{color:var(--paper);background:var(--ink)}.doodle{position:absolute;color:#7b856f;font:110px Georgia,serif;opacity:.18}.d1{right:5%;top:6%;rotate:15deg}.d2{left:2%;top:47%;rotate:-20deg}.d3{right:2%;bottom:7%}
.pockets{position:relative;min-height:1350px;padding:105px 6vw;overflow:hidden;color:var(--paper);background:#1d211b}.section-label.light{color:#e8e2d4}.pocket-title{margin:95px 0 0;display:grid;grid-template-columns:1.6fr .4fr;align-items:end}.pocket-title p{font:9px/1.6 monospace;color:#aeb6a5}.pocket-title h2 em{color:var(--mint)}.pocket-stage{position:relative;width:min(1100px,100%);height:740px;margin:60px auto 0;border:1px solid #e5dfd040;border-radius:50%;background:radial-gradient(circle at 50% 47%,#8c9a8155,transparent 26%),repeating-radial-gradient(ellipse at center,#ffffff0b 0 1px,transparent 1px 44px)}.pocket-figure{position:absolute;left:50%;top:47%;translate:-50% -50%;display:grid;justify-items:center}.glass-p{width:185px;height:205px;display:grid;place-items:center;border-radius:44% 55% 47% 50%;color:#263024;background:radial-gradient(circle at 28% 20%,#fff,#b8c6b2 48%,#64715e);box-shadow:inset 10px 10px 20px #fff,inset -13px -15px 24px #3d4739,0 0 55px #dff3d951;font-size:140px;font-weight:900;animation:breathe 4s ease-in-out infinite}.pocket-figure span{margin-top:22px;text-align:center;font:7px/1.5 monospace;letter-spacing:.13em}.pocket-item{position:absolute;width:128px;height:128px;display:grid;place-items:center;border:1px solid #e9e1d066;border-radius:50%;color:var(--paper);background:#282e26;box-shadow:8px 8px 0 #080a08;cursor:pointer;transition:.4s}.pocket-item b{font:52px Georgia,serif}.pocket-item span{position:absolute;left:12px;top:10px;font:7px monospace}.pocket-item small{position:absolute;bottom:-29px;font:7px monospace;letter-spacing:.12em}.pocket-item:hover{translate:0 -12px;rotate:-5deg;background:var(--red)}.pocket-item.found{color:var(--ink);background:var(--mint);box-shadow:0 0 0 8px #b8d8d01b,8px 8px 0 #080a08}.p1{left:7%;top:14%}.p2{right:8%;top:12%}.p3{right:1%;bottom:14%}.p4{left:8%;bottom:8%}.p5{left:47%;bottom:-4%}.pocket-counter{position:absolute;left:50%;top:0;translate:-50% -50%;padding:13px 20px;display:flex;gap:13px;align-items:center;color:var(--ink);border:1px solid;background:var(--paper);box-shadow:4px 4px 0 var(--red)}.pocket-counter b{font-size:25px}.pocket-counter span{font:7px monospace;letter-spacing:.1em}.pocket-note{position:absolute;z-index:4;right:22%;bottom:8%;width:310px;padding:28px;color:var(--ink);border:2px solid;background:var(--paper);box-shadow:8px 8px 0 var(--red);animation:cardin .35s both}.pocket-note button{position:absolute;right:12px;top:8px;background:none;font-size:22px;cursor:pointer}.pocket-note>span{font:7px monospace;letter-spacing:.13em}.pocket-note>b{display:block;float:left;margin:22px 22px 18px 0;font:65px Georgia,serif}.pocket-note h3{margin:24px 0 8px;font-size:28px}.pocket-note p{font:10px/1.6 monospace}.pocket-cloud{position:absolute;color:#e5dfd010;font-size:250px}.pc1{right:-5%;top:5%}.pc2{left:-4%;bottom:0}.complete .glass-p{animation:glow 1.6s ease-in-out infinite alternate}
.roadmap{position:relative;min-height:1450px;padding:110px 6vw 160px;overflow:hidden;background:var(--sage)}.road-title{margin-bottom:15px}.road-title h2 em{color:var(--paper);text-shadow:3px 4px 0 var(--ink)}.record-map{position:relative;width:min(1080px,100%);height:790px;margin:40px auto 0}.record{position:absolute;left:50%;top:47%;width:560px;height:560px;translate:-50% -50%;border:3px solid;border-radius:50%;background:repeating-radial-gradient(circle,#1c1f1a 0 3px,#31362d 4px 6px);box-shadow:18px 22px 0 #596252,0 30px 70px #28302555;transition:rotate 1s cubic-bezier(.16,1,.3,1)}.record:after{content:"";position:absolute;inset:8%;border:1px solid #d8d2c454;border-radius:50%}.record-label{position:absolute;z-index:2;left:50%;top:50%;width:185px;height:185px;translate:-50% -50%;display:grid;place-content:center;text-align:center;border:2px solid;border-radius:50%;background:var(--red);font:9px monospace;letter-spacing:.15em}.record-label b{font-size:85px;line-height:.8}.record-label small{font-size:7px}.record>i{position:absolute;left:25%;top:47%;width:50%;height:5px;transform-origin:100% 50%;background:linear-gradient(90deg,var(--paper) 0 8px,transparent 8px)}.road-node{position:absolute;z-index:4;width:150px;text-align:left;background:transparent;cursor:pointer}.road-node span{width:48px;height:48px;display:grid;place-items:center;border:1px solid;border-radius:50%;background:var(--sage);box-shadow:4px 4px 0 var(--ink);font:9px monospace;transition:.3s}.road-node b{display:block;margin-top:8px;font:8px monospace;letter-spacing:.11em}.road-node.active span,.road-node:hover span{color:var(--paper);background:var(--red);transform:scale(1.18)}.rn1{left:4%;top:20%}.rn2{right:4%;top:15%}.rn3{right:1%;bottom:19%}.rn4{left:10%;bottom:8%}.rn5{left:47%;bottom:-1%}.record-map article{position:absolute;z-index:5;right:2%;bottom:3%;width:390px;min-height:260px;padding:28px;border:2px solid;background:var(--paper);box-shadow:9px 9px 0 var(--ink);animation:cardin .45s both}.record-map article>span,.record-map article>small{font:7px monospace;letter-spacing:.12em}.record-map article h3{margin:35px 0 12px;font-size:42px;line-height:.9;letter-spacing:-.05em}.record-map article p{font:10px/1.65 monospace}.record-map article>small{display:block;margin-top:26px;padding-top:13px;border-top:1px solid}
.message-room{position:relative;min-height:980px;overflow:hidden;background:#7d8975}.room-art{position:absolute;inset:-3%;background:linear-gradient(90deg,#1d211bd9 0 35%,transparent 67%),url('./chillpons-world.png') center/cover no-repeat;filter:saturate(.72) brightness(.73);transform:translate3d(calc(var(--px)*8px),calc(var(--py)*6px),0) scale(1.08)}.message-card{position:absolute;z-index:2;left:7vw;top:20%;width:min(540px,86%);padding:44px;color:var(--paper);border:1px solid #ede7d87d;background:#1c201bd9;box-shadow:14px 15px 0 #bd5740;backdrop-filter:blur(10px)}.message-card>span{font:7px monospace;letter-spacing:.13em}.message-card h2{margin:34px 0 17px;font-size:clamp(42px,5vw,73px);line-height:.78;letter-spacing:-.06em}.message-card p{font:9px/1.6 monospace;color:#aeb6a8}.message-card label{margin-top:42px;display:flex;border-bottom:1px solid}.message-card input{width:100%;padding:16px 0;color:var(--paper);border:0;outline:0;background:transparent;font:10px monospace}.message-card label span{padding-top:18px;font:7px monospace}.message-card>button{width:100%;margin-top:18px;padding:16px;cursor:pointer;background:var(--mint);font:8px monospace;letter-spacing:.13em}.message-card>button:disabled{opacity:.3}.room-caption{position:absolute;right:3vw;bottom:3vw;color:var(--paper);text-align:right;font:7px/1.6 monospace;letter-spacing:.13em}footer{min-height:900px;padding:55px 5vw 30px;color:var(--paper);background:#171914}.footer-top,.footer-base{display:flex;justify-content:space-between;font:7px monospace;letter-spacing:.12em}.footer-top button{color:var(--paper);background:none;cursor:pointer}.footer-word{margin:105px 0 80px}.footer-word>*{display:block;font-size:clamp(90px,15.8vw,245px);line-height:.58;letter-spacing:-.095em}.footer-word span{font:9px monospace;letter-spacing:.13em}.footer-word b{color:var(--mint)}.footer-word em{padding-left:27%;color:transparent;font-family:Georgia,serif;font-weight:400;-webkit-text-stroke:2px var(--paper)}.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:12px}.footer-links a{min-height:120px;padding:24px;display:grid;grid-template-columns:1fr auto;align-content:center;color:var(--paper);border:1px solid #ede7d85e;text-decoration:none;transition:.3s}.footer-links a:last-child{color:var(--ink);background:var(--red)}.footer-links small{font:7px monospace;letter-spacing:.12em}.footer-links b{margin-top:10px;font-size:28px}.footer-links span{grid-column:2;grid-row:1/3;font-size:34px}.footer-links a:hover{translate:0 -8px;background:var(--sage-deep)}.footer-base{margin-top:55px;padding-top:20px;border-top:1px solid #ede7d835;color:#969c92}
.night{--sage:#525c4f;--paper:#d9d4c9}.night .hero-art,.night .room-art{filter:brightness(.62) saturate(.72)}.night .hero-copy,.night .edition,.night .scroll-note{color:var(--paper)}.reveal{opacity:0;transform:translateY(38px);transition:opacity .8s,transform .8s cubic-bezier(.16,1,.3,1)}.reveal.seen{opacity:1;transform:none}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}}@keyframes jitter{50%{translate:9px -4px;opacity:.3}}@keyframes ticker{to{transform:translateX(-50%)}}@keyframes cardin{from{opacity:0;transform:translateY(15px) rotate(1deg)}}@keyframes breathe{50%{transform:scale(.95) rotate(2deg);border-radius:55% 45% 53% 47%}}@keyframes glow{to{box-shadow:inset 10px 10px 20px #fff,inset -13px -15px 24px #3d4739,0 0 90px #dff3d9b3}}
@media(max-width:900px){.nav{grid-template-columns:1fr auto}.nav nav{display:none}.hero-copy{width:56%;right:3vw}.story-head,.road-title{grid-template-columns:1fr}.story-player{grid-template-columns:1fr}.story-player figure{min-height:500px}.story-player figure img{height:430px}.track-list{grid-column:auto}.track-list{grid-template-columns:1fr}.pocket-title{grid-template-columns:1fr}.pocket-title p{max-width:320px}.record{width:470px;height:470px}.footer-links{grid-template-columns:1fr}}
@media(max-width:640px){.cursor-dot{display:none}.nav{left:10px;right:10px;top:8px;height:58px}.logo span,.nav-tools button{display:none}.nav-tools>*{padding:9px}.hero{min-height:780px}.hero-art{background-position:37% center}.hero-wash{background:#75806e4d}.hero-copy{left:18px;right:18px;top:18%;width:auto}.hero h1{font-size:20vw}.hero-copy>p{margin-left:0}.edition{display:none}.calm-control{left:18px;right:18px;bottom:60px;width:auto;grid-template-columns:1fr}.calm-control>div{border-right:0;border-bottom:1px solid}.calm-control button{min-height:62px}.scroll-note{left:18px;bottom:20px}.story,.pockets,.roadmap{padding-inline:18px}.story{min-height:1550px}.story h2,.road-title h2,.pocket-title h2{font-size:19vw}.story-head,.road-title{margin-top:70px}.story-player figure{padding:22px;min-height:410px}.story-player figure img{height:345px}.story-player article{padding:38px 22px}.story-player article>small{margin-top:40px}.track-list button{min-height:51px}.pockets{min-height:1260px}.pocket-stage{height:760px;border-radius:42%}.glass-p{width:135px;height:155px;font-size:100px}.pocket-item{width:94px;height:94px}.pocket-item b{font-size:38px}.p1{left:0;top:15%}.p2{right:0;top:13%}.p3{right:0;bottom:16%}.p4{left:0;bottom:12%}.p5{left:38%;bottom:0}.pocket-note{right:10px;left:10px;bottom:22%;width:auto}.roadmap{min-height:1330px}.record-map{height:780px}.record{width:310px;height:310px}.record-label{width:120px;height:120px}.record-label b{font-size:56px}.road-node{width:90px}.road-node b{font-size:6px}.rn1{left:0}.rn2{right:0}.rn3{right:0;bottom:31%}.rn4{left:0;bottom:26%}.rn5{left:40%;bottom:18%}.record-map article{left:0;right:0;bottom:-4%;width:auto}.message-room{min-height:800px}.message-card{left:18px;top:18%;padding:30px}.footer-word{margin-top:90px}.footer-word>*{font-size:20vw}.footer-links a{min-height:100px}.footer-links b{font-size:21px}.footer-base{flex-direction:column;gap:7px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}