:root{
  --ink:#1d120d;
  --deep:#28130d;
  --brown:#6f3f22;
  --cream:#f2dfbb;
  --paper:#ead0a4;
  --paper-2:#f7e7c8;
  --amber:#e9a02d;
  --rust:#9f4f2f;
  --olive:#727146;
  --red:#6d1e23;
  --shadow:0 24px 60px rgba(22,10,4,.34);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;color:var(--ink);background:#c79e72;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;max-width:100%}
::selection{background:var(--amber);color:var(--ink)}

.noise{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.08;mix-blend-mode:multiply;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='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.cursor-orbit{position:fixed;width:26px;height:26px;border:2px solid rgba(242,223,187,.6);border-radius:50%;z-index:101;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .18s ease,height .18s ease,opacity .18s ease}

.topbar{position:fixed;z-index:90;top:0;left:0;width:100%;padding:24px 34px;display:flex;align-items:center;justify-content:space-between;color:var(--paper-2);mix-blend-mode:difference;pointer-events:none}
.topbar a{pointer-events:auto}
.mini-brand{display:flex;gap:10px;align-items:center;font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:14px}
.paw-dot{font-size:16px}
.scribble-nav{display:flex;gap:20px;font-weight:900;font-size:12px;letter-spacing:.12em}
.scribble-nav a{position:relative;padding-bottom:6px}
.scribble-nav a:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:currentColor;transform:scaleX(.2) rotate(-2deg);transform-origin:left;transition:transform .2s ease}
.scribble-nav a:hover:after{transform:scaleX(1) rotate(-2deg)}

.scene{position:relative;min-height:100vh;overflow:hidden}
.hero{height:100vh;min-height:760px;background:#3b1f16;color:var(--paper-2);isolation:isolate}
.hero-bg{position:absolute;inset:-7%;background-image:linear-gradient(rgba(38,15,8,.52),rgba(38,15,8,.72)),url('../assets/background/room-wide.jpg');background-size:cover;background-position:center;filter:saturate(.82) contrast(1.06);z-index:-3;transform:scale(1.08)}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 51% 48%,rgba(245,190,102,.22),transparent 31%),linear-gradient(90deg,rgba(20,9,5,.55),transparent 35%,transparent 66%,rgba(20,9,5,.42));z-index:-2}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:-40px;height:110px;background:var(--paper);clip-path:polygon(0 34%,5% 49%,10% 40%,16% 57%,23% 43%,29% 55%,35% 38%,42% 60%,49% 45%,55% 58%,62% 37%,69% 52%,76% 41%,84% 56%,91% 40%,100% 54%,100% 100%,0 100%);z-index:20}

.hero-title-wrap{position:absolute;inset:12.8% 4% auto 4%;text-align:center;z-index:1}
.hero-kicker{font-size:13px;font-weight:900;letter-spacing:.24em;margin-bottom:2vh;color:#f5cb91}
.hero-title{margin:0;text-transform:uppercase;font-family:Impact,'Arial Black',sans-serif;font-size:clamp(130px,15.8vw,305px);line-height:.78;letter-spacing:-.045em;color:#e9a02d;text-shadow:0 6px 0 #5c2f1e,0 18px 32px rgba(0,0,0,.24);transform:rotate(-1.2deg);white-space:nowrap}
.hero-cat-stage{position:absolute;left:50%;top:50%;width:min(44vw,790px);height:min(71vh,760px);transform:translate(-50%,-45%);z-index:4;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.paper-halo{position:absolute;width:78%;height:70%;left:11%;top:16%;background:var(--paper);clip-path:polygon(5% 12%,21% 5%,42% 8%,61% 3%,81% 8%,95% 22%,92% 44%,98% 63%,88% 84%,68% 91%,48% 98%,28% 91%,9% 84%,2% 63%,7% 45%,2% 27%);transform:rotate(2deg);box-shadow:var(--shadow);opacity:.94}
.hero-cat{position:relative;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 28px 22px rgba(25,8,2,.43));animation:catIdle 4.8s ease-in-out infinite;transform-origin:50% 80%}
.hero-caption{position:absolute;right:-4%;bottom:10%;background:#f3dfb7;color:var(--ink);padding:13px 17px 12px;font-family:'Courier New',monospace;font-weight:900;line-height:1.05;letter-spacing:.04em;box-shadow:0 12px 24px rgba(0,0,0,.25);transform:rotate(7deg);font-size:16px}
.hero-caption:before{content:"";position:absolute;width:64px;height:18px;top:-10px;left:36px;background:rgba(204,154,86,.82);transform:rotate(-4deg)}

.field-note{position:absolute;z-index:6;font-family:'Courier New',monospace;font-weight:900;line-height:1.1;letter-spacing:.02em;color:#f2ddbe;font-size:clamp(13px,1.05vw,18px)}
.note-a{left:6%;top:31%;transform:rotate(-5deg)}
.note-b{right:5.2%;top:34%;text-align:right;transform:rotate(3deg)}
.note-c{left:8%;bottom:22%;transform:rotate(4deg);color:#e6b871}
.field-note:after{content:"";display:block;width:74%;height:3px;background:currentColor;margin-top:9px;transform:rotate(-2deg);opacity:.75}

.hero-bottom{position:absolute;left:4.2%;right:4.2%;bottom:8.6%;z-index:30;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.ticker-stamp{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(32px,3.8vw,76px);letter-spacing:.01em;text-transform:uppercase;color:var(--paper-2);transform:rotate(-2deg);text-shadow:4px 4px 0 #562718}
.ca-ribbon{position:relative;width:min(790px,56vw);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;background:var(--paper-2);padding:9px 9px 9px 14px;color:var(--ink);border:3px solid var(--ink);box-shadow:8px 9px 0 rgba(27,13,8,.6);transform:rotate(1deg)}
.ca-label{font-weight:1000;font-size:15px;border-right:2px solid var(--ink);padding-right:10px}
.ca-value{font-family:'Courier New',monospace;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.copy-ca{border:2px solid var(--ink);background:var(--amber);color:var(--ink);padding:10px 16px;font-weight:1000;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:.12s transform,.12s box-shadow,.12s background}
.copy-ca:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);background:#f0b54c}
.copy-ca:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.copy-feedback{position:absolute;right:12px;top:-30px;background:var(--ink);color:var(--paper-2);padding:5px 8px;font-weight:900;font-size:11px;letter-spacing:.08em;opacity:0;transform:translateY(8px) rotate(-2deg);transition:.18s ease}
.copy-feedback.show{opacity:1;transform:translateY(0) rotate(-2deg)}
.scroll-cue{position:absolute;left:50%;bottom:2.8%;z-index:31;transform:translateX(-50%);font-size:10px;font-weight:900;letter-spacing:.18em;color:var(--ink)}

.marquee{position:relative;z-index:30;width:100vw;overflow:hidden;background:var(--paper);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);transform:rotate(-.35deg);margin-top:-5px}
.marquee-track{display:flex;width:max-content;white-space:nowrap;animation:marqueeMove 28s linear infinite;will-change:transform}
.marquee-set{display:flex;align-items:center;flex-shrink:0;gap:28px;padding:13px 14px;font-family:Impact,'Arial Black',sans-serif;font-size:24px;letter-spacing:.05em;text-transform:uppercase}
.marquee-set b{font-size:19px;color:var(--rust)}

.portrait-section{background:#e7ca9f;min-height:1080px;padding:125px 6vw 110px;display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:5vw}
.portrait-section:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(59,31,22,.15) 1px,transparent 1px);background-size:16px 16px;opacity:.38;pointer-events:none}
.section-index{display:inline-block;font-size:12px;font-weight:1000;letter-spacing:.18em;padding-bottom:8px;border-bottom:3px solid var(--ink);margin-bottom:26px}
.section-index.light{color:var(--paper-2);border-color:var(--paper-2)}
.portrait-copy{position:relative;z-index:2;align-self:center;max-width:680px}
.portrait-copy h2,.rules-title h2,.window-copy h2,.final-top h2{font-family:Impact,'Arial Black',sans-serif;text-transform:uppercase;letter-spacing:-.025em;line-height:.86;margin:0}
.portrait-copy h2{font-size:clamp(72px,7.8vw,148px)}
.portrait-copy p{max-width:560px;font-family:Georgia,serif;font-size:21px;line-height:1.55;margin:32px 0 0}
.tiny-rule{margin-top:30px;background:var(--rust);color:var(--paper-2);display:inline-block;padding:10px 12px;font-size:12px;font-weight:1000;letter-spacing:.08em;transform:rotate(-1.5deg)}
.portrait-stack{position:relative;min-height:760px;display:flex;justify-content:center;align-items:center}
.portrait-frame{position:absolute;width:min(41vw,700px);aspect-ratio:1/1;background:#d3ab77;border:12px solid var(--paper-2);box-shadow:var(--shadow)}
.frame-back{transform:translate(-34px,18px) rotate(-7deg);background:#774324;border-color:#c59560}
.frame-main{overflow:hidden;transform:rotate(3deg);clip-path:polygon(3% 2%,98% 5%,96% 97%,5% 94%)}
.frame-main img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.frame-main:hover img{transform:scale(1.045) rotate(-1deg)}
.portrait-label{position:absolute;right:1%;bottom:12%;background:var(--paper-2);border:3px solid var(--ink);padding:14px 18px;font-family:'Courier New',monospace;font-weight:900;transform:rotate(-7deg);box-shadow:6px 7px 0 rgba(29,18,13,.45)}
.paw-trail{position:absolute;left:3%;top:18%;font-size:20px;letter-spacing:16px;transform:rotate(-29deg);color:var(--rust)}
.vertical-word{position:absolute;right:-26px;top:50%;transform:translateY(-50%) rotate(90deg);font-family:Impact,'Arial Black',sans-serif;font-size:84px;letter-spacing:.08em;color:rgba(111,63,34,.16)}

.rules-section{min-height:1080px;background:#703b26;color:var(--paper-2);padding:110px 6vw;display:grid;grid-template-columns:.8fr 1.25fr;gap:4vw;align-items:start}
.rules-section:before{content:"";position:absolute;left:-7vw;top:-4vh;width:36vw;height:36vw;border:6px solid rgba(242,223,187,.16);border-radius:50%;box-shadow:0 0 0 38px rgba(242,223,187,.06),0 0 0 74px rgba(242,223,187,.035)}
.rules-title{position:relative;z-index:6;padding-top:6vh}
.rules-title .section-index{border-color:var(--paper-2)}
.rules-title h2{font-size:clamp(76px,8.1vw,154px)}
.paper-cloud{position:relative;z-index:8;min-height:700px;margin-top:3vh}
.paper-card{position:absolute;width:min(33vw,520px);padding:26px 30px;background:var(--paper-2);color:var(--ink);font-family:'Courier New',monospace;font-size:clamp(17px,1.4vw,25px);line-height:1.25;box-shadow:12px 14px 0 rgba(32,14,7,.35);clip-path:polygon(1% 5%,97% 0,100% 94%,4% 100%)}
.paper-card:before{content:"";position:absolute;top:-7px;left:44%;width:82px;height:23px;background:rgba(202,151,91,.85);transform:rotate(3deg)}
.card-no{display:block;font-family:Impact,'Arial Black',sans-serif;font-size:38px;color:var(--rust);margin-bottom:12px}
.card-1{top:0;left:4%;transform:rotate(-4deg)}
.card-2{top:23%;right:0;transform:rotate(5deg)}
.card-3{top:49%;left:9%;transform:rotate(2deg)}
.card-4{top:70%;right:2%;transform:rotate(-5deg)}
.rules-cat{position:absolute;left:18%;bottom:-10%;width:min(35vw,640px);filter:drop-shadow(0 22px 20px rgba(26,10,5,.36));opacity:.94;transform:rotate(-4deg)}
.corner-whisper{position:absolute;right:2vw;bottom:3vh;font-family:'Courier New',monospace;font-weight:900;font-size:12px;letter-spacing:.08em;transform:rotate(-2deg);opacity:.76}

.window-section{min-height:100vh;color:var(--paper-2);display:grid;grid-template-columns:1fr .8fr;align-items:center;padding:0 7vw;isolation:isolate}
.window-bg{position:absolute;inset:-6%;z-index:-3;background-image:url('../assets/background/room-wide.jpg');background-size:cover;background-position:center;filter:blur(2px) saturate(.68) brightness(.48);transform:scale(1.08)}
.window-vignette{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(18,7,4,.8),rgba(18,7,4,.3) 56%,rgba(18,7,4,.64)),radial-gradient(circle at 70% 50%,rgba(228,162,78,.14),transparent 30%)}
.window-copy{max-width:940px;position:relative;z-index:4}
.window-copy h2{font-size:clamp(76px,8.5vw,166px);text-shadow:0 10px 30px rgba(0,0,0,.24)}
.window-copy p{font-family:Georgia,serif;font-size:20px;max-width:610px;line-height:1.55;margin-top:28px;color:#eadfcf}
.window-sticker{justify-self:end;width:min(31vw,520px);background:var(--paper-2);padding:18px 18px 66px;transform:rotate(5deg);box-shadow:var(--shadow);position:relative}
.window-sticker img{aspect-ratio:1/1;object-fit:cover;filter:contrast(1.02) saturate(.92)}
.sticker-text{position:absolute;bottom:18px;left:22px;color:var(--ink);font-family:'Courier New',monospace;font-weight:900;font-size:23px;letter-spacing:.07em}
.window-sticker:after{content:"";position:absolute;top:-11px;left:38%;width:108px;height:28px;background:rgba(197,142,76,.74);transform:rotate(-3deg)}

.final-section{min-height:1120px;background:#e9cfaa;padding:100px 6vw 0;color:var(--ink);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr auto;gap:30px 4vw;align-items:start}
.final-section:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 61%,rgba(111,63,34,.08) 61% 64%,transparent 64% 100%),radial-gradient(rgba(54,30,20,.1) 1.2px,transparent 1.2px);background-size:auto,18px 18px;pointer-events:none}
.final-top{position:relative;z-index:4}
.final-top h2{font-size:clamp(90px,10.5vw,200px);color:var(--rust)}
.community-scraps{position:relative;z-index:8;display:flex;flex-direction:column;gap:16px;align-self:center;margin-top:54px}
.scrap-link{display:grid;grid-template-columns:1fr auto;align-items:center;width:min(40vw,690px);padding:20px 24px;background:var(--paper-2);border:3px solid var(--ink);box-shadow:7px 8px 0 var(--ink);font-weight:1000;transition:.16s transform,.16s box-shadow,.16s background}
.scrap-link span{font-family:Impact,'Arial Black',sans-serif;font-size:34px;letter-spacing:.035em}
.scrap-link small{font-size:10px;letter-spacing:.12em}
.scrap-link:nth-child(1){transform:rotate(-2deg)}
.scrap-link:nth-child(2){transform:translateX(32px) rotate(1.5deg);background:#d8b172}
.scrap-link:nth-child(3){transform:translateX(-18px) rotate(-1deg);background:#bd7a4e;color:#21130e}
.scrap-link:hover{transform:translate(5px,-4px) rotate(0);box-shadow:12px 14px 0 var(--ink);background:#f5e2bf}
.scrap-link:active{transform:translate(8px,6px);box-shadow:2px 2px 0 var(--ink)}
.final-ca{grid-column:1 / 2;position:relative;z-index:9;margin-top:18px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);padding:14px 0}
.final-ca-label{font-weight:1000;font-size:12px;letter-spacing:.11em}
.final-ca code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Courier New',monospace;font-weight:700}
.final-ca button{border:0;border-left:3px solid var(--ink);background:transparent;padding:12px 0 12px 18px;font-weight:1000;cursor:pointer}
.final-ca button:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.final-cat-wrap{grid-column:2;grid-row:2 / 4;align-self:end;justify-self:end;width:min(47vw,790px);height:650px;position:relative;z-index:3;display:flex;align-items:flex-end}
.final-cat-wrap:before{content:"";position:absolute;left:8%;right:3%;bottom:3%;height:62%;background:#6f3f22;border-radius:48% 52% 14% 18% / 48% 45% 18% 16%;transform:rotate(3deg);opacity:.18}
.final-cat-wrap img{position:relative;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 24px 19px rgba(38,17,7,.3));animation:catIdle 5.5s ease-in-out infinite reverse}
.footer-line{grid-column:1 / -1;position:relative;z-index:20;background:var(--ink);color:var(--paper-2);min-height:76px;margin:0 -6vw;display:flex;justify-content:space-between;align-items:center;padding:0 6vw;font-family:Impact,'Arial Black',sans-serif;font-size:22px;letter-spacing:.055em;text-transform:uppercase}

.reveal{opacity:0;transform:translateY(32px);transition:opacity .72s ease,transform .72s cubic-bezier(.2,.75,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}

@keyframes catIdle{0%,100%{transform:translateY(0) rotate(-.35deg) scale(1)}50%{transform:translateY(-9px) rotate(.35deg) scale(1.005)}}
@keyframes marqueeMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:1500px){
  .hero-cat-stage{width:min(46vw,680px);height:min(69vh,650px)}
  .hero-bottom{bottom:9.5%}
  .field-note{font-size:13px}
  .portrait-section,.rules-section{min-height:930px}
  .portrait-stack{min-height:630px}
  .paper-cloud{min-height:620px}
  .final-section{min-height:980px}
  .final-cat-wrap{height:570px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}