/* Cat Nest — a playable world, presented as an independent creative project. */
html:has(.cn-page) { background:#f5f1e7; scroll-behavior:smooth; scroll-padding-top:78px; }
.cn-page { --cn-paper:#f5f1e7; --cn-ink:#28372e; --cn-muted:#60695d; --cn-orange:#b1512d; --cn-line:#d7d7c6; background:var(--cn-paper); color:var(--cn-ink); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; line-height:1.65; }
.cn-page * { box-sizing:border-box; }
.cn-page img { display:block; max-width:100%; height:auto; }
.cn-page figure,.cn-page p,.cn-page h1,.cn-page h2,.cn-page h3,.cn-page h4 { margin:0; }
.cn-page h2 { font-size:clamp(30px,3.6vw,56px); font-weight:600; line-height:1.35; letter-spacing:-.045em; text-wrap:balance; }
.cn-page h3 { line-height:1.4; font-weight:600; }
.cn-page a { text-underline-offset:5px; }
.cn-page a:focus-visible,.cn-page button:focus-visible,.cn-page summary:focus-visible { outline:2px solid var(--cn-orange); outline-offset:5px; }
.cn-page [hidden] { display:none; }
.cn-page .skip-link { background:var(--cn-ink); color:white; }
.cn-header { display:flex; justify-content:space-between; align-items:center; padding:24px clamp(20px,4.5vw,80px); gap:20px; background:var(--cn-paper); border-bottom:1px solid var(--cn-line); }
.cn-wordmark { display:flex; flex-direction:column; font-size:15px; font-weight:700; letter-spacing:.06em; line-height:1.4; text-decoration:none; }
.cn-wordmark span { margin-top:2px; font-size:8px; font-weight:400; letter-spacing:.17em; }
.cn-header nav { display:flex; gap:32px; font-size:12px; }
.cn-header nav a { display:flex; align-items:center; min-height:44px; text-decoration:none; }
.cn-section { padding:100px clamp(24px,7.5vw,140px); }
.cn-eyebrow { font-size:11px; font-weight:600; letter-spacing:.15em; line-height:1.6; }
.cn-hero { position:relative; display:grid; grid-template-columns:.95fr 1.05fr; padding:72px clamp(24px,7.5vw,140px) 0; min-height:min(850px,calc(100svh - 90px)); overflow:hidden; background:radial-gradient(ellipse at 86% 44%,#e7d7b9 0,transparent 56%),var(--cn-paper); }
.cn-hero-copy { position:relative; z-index:2; padding-bottom:80px; }
.cn-live-dot { display:inline-block; margin-right:7px; width:6px; height:6px; border-radius:50%; background:#879868; vertical-align:2px; }
.cn-hero h1 { margin:22px 0; font-size:clamp(76px,10.5vw,170px); font-weight:500; line-height:.83; letter-spacing:-.075em; }
.cn-hero h1 em { font-family:Georgia,"Times New Roman",serif; font-weight:400; color:var(--cn-orange); }
.cn-hero-names { margin-top:30px!important; font-size:clamp(20px,2.1vw,32px); font-weight:600; letter-spacing:-.04em; }
.cn-hero-names span { margin:0 5px; color:#8b8e78; font-weight:400; }
.cn-hero-description { margin-top:16px!important; color:var(--cn-muted); font-size:clamp(14px,1.25vw,18px); line-height:1.9; }
.cn-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:30px; }
.cn-button { display:inline-flex; min-height:50px; align-items:center; justify-content:space-between; gap:26px; padding:14px 22px; text-decoration:none; font-size:13px; border:1px solid transparent; border-radius:3px; transition:background .2s,transform .2s; }
.cn-button:hover { transform:translateY(-2px); }
.cn-button--dark { color:#fffaf1; background:var(--cn-ink); }
.cn-button--dark:hover { background:#445342; }
.cn-button--orange { color:#fffaf1; background:var(--cn-orange); }
.cn-button--orange:hover { background:#8d3f23; }
.cn-hero-play { gap:12px; }
.cn-hero-play .cn-button { gap:12px; padding-inline:18px; font-size:14px; font-weight:600; }
.cn-page .cn-hero-demo { margin-top:12px; font-size:11px; color:var(--cn-muted); }
.cn-hero-more { display:flex; flex-wrap:wrap; gap:24px; margin-top:10px; }
.cn-text-link { min-height:44px; display:inline-flex; align-items:center; font-size:12px; }
.cn-hero-art { position:relative; min-width:0; min-height:580px; }
.cn-device { position:absolute; width:53%; max-width:305px; border:6px solid #fff9ed; border-radius:25px; background:#fff9ed; box-shadow:0 25px 65px #59432626; }
.cn-device img { width:100%; border-radius:19px; }
.cn-device figcaption { position:absolute; bottom:-32px; white-space:nowrap; font-size:10px; letter-spacing:.05em; color:var(--cn-muted); }
.cn-device--nest { top:65px; left:0; transform:rotate(-8deg); z-index:1; }
.cn-device--restaurant { top:5px; right:-9%; transform:rotate(7deg); }
.cn-device--restaurant figcaption { right:0; }
.cn-orbit { position:absolute; width:118%; aspect-ratio:1; left:-6%; top:25px; border:1px solid #b3b69d; border-radius:50%; transform:rotate(-18deg); }
.cn-orbit span { position:absolute; top:6%; left:5%; font-size:9px; letter-spacing:.2em; background:var(--cn-paper); padding:0 12px; transform:rotate(-20deg); }
.cn-art-note { position:absolute; bottom:28px; left:22%; font-size:12px; color:#677059; transform:rotate(-5deg); }
.cn-art-note span { margin-right:7px; color:var(--cn-orange); font-size:23px; }
.cn-hero-footer { position:relative; z-index:3; grid-column:1/-1; display:flex; justify-content:space-between; gap:24px; padding:20px 0; border-top:1px solid var(--cn-line); font-size:9px; letter-spacing:.08em; }
.cn-chapters { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:0 clamp(24px,7.5vw,140px); min-height:64px; border-top:1px solid var(--cn-line); border-bottom:1px solid var(--cn-line); background:#f5f1e7f5; }
.cn-chapters a { min-height:54px; display:flex; align-items:center; font-size:11px; white-space:nowrap; text-decoration:none; }
.cn-chapters a:hover { color:var(--cn-orange); }
.cn-intro { background:#eeeee3; }
.cn-intro-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:8vw; margin-top:30px; }
.cn-intro-grid p { color:var(--cn-muted); font-size:14px; }
.cn-intro-grid p+p { margin-top:18px; }
.cn-page .cn-lead { font-size:clamp(17px,1.6vw,23px); line-height:1.8; color:var(--cn-ink); }
.cn-numbers { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin:68px 0 0; padding-top:30px; border-top:1px solid var(--cn-line); }
.cn-numbers dt { font-size:clamp(44px,5.1vw,78px); font-weight:400; line-height:1.2; letter-spacing:-.065em; }
.cn-numbers dt span { margin-left:8px; font-size:12px; }
.cn-numbers dd { margin:10px 0 0; font-size:11px; color:var(--cn-muted); }
.cn-nest { display:grid; grid-template-columns:1.07fr 1fr; gap:8vw; align-items:start; padding-top:120px; padding-bottom:120px; }
.cn-nest-visual { padding-top:65px; }
.cn-editorial-art { width:100%; aspect-ratio:1; object-fit:cover; border-radius:50% 50% 3px 3px; }
.cn-image-caption { display:flex; justify-content:space-between; gap:15px; margin-top:16px; font-size:9px; letter-spacing:.07em; }
.cn-memory-art { width:72%; margin-top:64px; margin-left:auto; border:8px solid #fffaf0; transform:rotate(5deg); box-shadow:0 10px 25px #45372113; }
.cn-nest-copy h2 { margin-top:20px; }
.cn-nest-copy>.cn-lead { margin-top:25px; }
.cn-feature-lines { list-style:none; counter-reset:cn-feature; margin:32px 0 0; padding:0; }
.cn-feature-lines li { position:relative; counter-increment:cn-feature; border-top:1px solid var(--cn-line); padding:23px 0 23px 32px; }
.cn-feature-lines li::before { content:counter(cn-feature,decimal-leading-zero); position:absolute; left:0; top:26px; color:var(--cn-orange); font-size:10px; }
.cn-feature-lines h3 { font-size:17px; }
.cn-feature-lines p { margin-top:10px; font-size:13px; line-height:1.9; color:var(--cn-muted); }
.cn-restaurant { background:#e5e8db; }
.cn-section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:8vw; }
.cn-section-heading h2 { margin-top:20px; }
.cn-section-heading>p { max-width:320px; padding-bottom:5px; color:var(--cn-muted); font-size:13px; line-height:1.9; }
.cn-order-flow { list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin:48px 0; padding:24px 0; border-top:1px solid #c7ccba; border-bottom:1px solid #c7ccba; }
.cn-order-flow li { position:relative; font-size:13px; }
.cn-order-flow li:not(:last-child)::after { content:'→'; position:absolute; right:0; color:#7c8871; }
.cn-order-flow li span { display:block; color:#819075; font-size:9px; margin-bottom:6px; }
.cn-gallery { background:#f9f6ec; border-radius:6px; overflow:hidden; }
.cn-gallery-tabs { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--cn-line); }
.cn-gallery-tabs button { cursor:pointer; border:0; border-right:1px solid var(--cn-line); padding:19px 10px; color:var(--cn-muted); background:transparent; font-size:12px; transition:background .2s; }
.cn-gallery-tabs button:last-child { border-right:0; }
.cn-gallery-tabs button[aria-selected=true] { background:var(--cn-ink); color:#fff7e6; }
.cn-gallery-tabs button:hover:not([aria-selected=true]) { background:#eeeee3; }
.cn-gallery-panel { display:grid; grid-template-columns:1fr 1fr; min-height:580px; }
.cn-gallery-screen { display:flex; justify-content:center; align-items:center; padding:40px; background:#d5d9c5; }
.cn-gallery-screen img { width:auto; max-height:500px; max-width:100%; border:5px solid #fcf9ee; border-radius:12px; box-shadow:0 16px 40px #29332c1c; }
.cn-gallery-copy { display:flex; flex-direction:column; justify-content:center; padding:45px; }
.cn-panel-number { color:#768168; font-size:9px; letter-spacing:.13em; }
.cn-gallery-copy h3 { margin-top:24px; font-size:clamp(25px,2.8vw,42px); line-height:1.4; letter-spacing:-.035em; }
.cn-gallery-copy p { margin-top:20px; font-size:13px; line-height:1.95; color:var(--cn-muted); }
.cn-inline-note { display:flex; flex-direction:column; gap:5px; margin-top:28px; border-top:1px solid var(--cn-line); padding-top:20px; font-size:12px; }
.cn-inline-note strong { color:var(--cn-orange); font-weight:500; }
.cn-inline-note span { font-size:11px; color:var(--cn-muted); }
.cn-quality { display:flex; gap:8px; margin-top:22px; }
.cn-quality span { display:flex; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid #c5cdb0; background:#e7ebd8; border-radius:50%; font-family:Georgia,serif; }
.cn-quality span:nth-child(2) { background:#d1ece8; border-color:#a1c7c3; }
.cn-quality span:nth-child(3) { background:#f9e5ae; border-color:#d8c083; }
.cn-quality span:nth-child(4) { background:#f8dbca; border-color:#dbb39c; }
.cn-quality span:nth-child(5) { background:#e9daf0; border-color:#c5a9d0; }
.cn-decor-art { position:relative; height:580px; overflow:hidden; background:#ead7bf; }
.cn-decor-art img { width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.cn-decor-art>span { position:absolute; bottom:15px; left:18px; font-size:10px; background:#fff5e2e8; padding:6px 12px; }
.cn-restaurant-details { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:55px; }
.cn-restaurant-details article { border-top:1px solid #c7ccba; padding-top:22px; }
.cn-restaurant-details article>span { font-size:9px; letter-spacing:.12em; color:#66765d; }
.cn-restaurant-details h3 { margin-top:12px; font-size:20px; }
.cn-restaurant-details p { margin-top:15px; font-size:12px; line-height:1.95; color:var(--cn-muted); }
.cn-connection { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:center; }
.cn-connection h2 { margin-top:20px; }
.cn-connection p:not(.cn-eyebrow) { margin-top:24px; max-width:500px; font-size:14px; color:var(--cn-muted); }
.cn-loop { display:grid; grid-template-columns:1fr 35px 1fr; align-items:center; text-align:center; }
.cn-loop-home,.cn-loop-restaurant { padding:28px 15px; border:1px solid #c8ccb8; border-radius:90px; font-size:20px; }
.cn-loop-home { background:#ece7d7; }
.cn-loop-restaurant { background:#e0e8d5; }
.cn-loop small { display:block; font-size:10px; margin-top:10px; color:var(--cn-muted); }
.cn-loop-arrow { color:#899477; }
.cn-loop-reward { grid-column:1/-1; border:1px solid #c8ccb8; border-top:0; border-radius:0 0 110px 110px; margin:0 35px; padding:0 0 26px; }
.cn-loop-reward img { width:86px; margin:5px auto 0; }
.cn-loop-reward span { font-size:11px; }
.cn-loop-reward i { margin-left:10px; font-size:20px; }
.cn-making { background:#1d302a; color:#f7f0db; }
.cn-making .cn-section-heading>p { color:#b5c0ae; }
.cn-making-statement { max-width:870px; font-size:clamp(20px,2.15vw,32px); line-height:1.85; margin-top:55px!important; color:#aebdac; }
.cn-making-statement strong { color:#f8edcd; font-weight:400; }
.cn-process { list-style:none; margin:60px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.cn-process li { border-top:1px solid #55634e; padding-top:20px; }
.cn-process li>span { color:#cbb485; font-size:9px; letter-spacing:.1em; }
.cn-process h3 { font-size:18px; margin-top:16px; }
.cn-process p { margin-top:14px; color:#b5c0ae; font-size:12px; line-height:1.95; }
.cn-engineering-heading { display:grid; grid-template-columns:1fr 2fr; gap:30px; margin-top:100px; align-items:start; }
.cn-engineering-heading .cn-eyebrow { padding-top:8px; color:#cbb485; }
.cn-engineering-heading h3 { font-size:clamp(27px,3.2vw,46px); line-height:1.45; letter-spacing:-.04em; }
.cn-engineering { margin-top:30px; }
.cn-engineering article { display:grid; grid-template-columns:1fr 2fr; gap:30px; padding:30px 0; border-top:1px solid #55634e; }
.cn-engineering article>span { color:#8b9d86; font-size:14px; }
.cn-engineering article>div { display:grid; grid-template-columns:.9fr 1.1fr; gap:30px; }
.cn-engineering h4 { font-size:17px; font-weight:500; line-height:1.7; }
.cn-engineering p { font-size:12px; color:#b5c0ae; line-height:1.95; }
.cn-tech { display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:30px; align-items:start; border-top:1px solid #55634e; padding-top:30px; margin-top:30px; font-size:10px; color:#b5c0ae; }
.cn-tech>span:first-child { letter-spacing:.1em; color:#cbb485; }
.cn-tech p { line-height:2; }
.cn-feature-index details { border-top:1px solid var(--cn-line); }
.cn-feature-index details:first-of-type { margin-top:45px; }
.cn-feature-index details:last-child { border-bottom:1px solid var(--cn-line); }
.cn-feature-index summary { display:flex; align-items:center; gap:24px; padding:24px 0; cursor:pointer; list-style:none; font-size:19px; }
.cn-feature-index summary::-webkit-details-marker { display:none; }
.cn-feature-index summary>span { color:#869079; font-size:10px; }
.cn-feature-index summary>i { margin-left:auto; font-size:24px; font-style:normal; font-weight:300; transition:transform .2s; }
.cn-feature-index details[open] summary>i { transform:rotate(45deg); }
.cn-feature-index details>div { display:flex; align-items:start; gap:40px; padding:0 40px 30px; }
.cn-feature-index details p { max-width:850px; font-size:14px; color:var(--cn-muted); line-height:1.95; }
.cn-feature-index details img { width:150px; border-radius:6px; }
.cn-experience { display:grid; grid-template-columns:1.4fr 1fr; gap:8vw; background:#9f4c30; color:#fff4dc; }
.cn-experience h2 { margin-top:24px; font-size:clamp(43px,5.1vw,76px); }
.cn-experience-copy>p:not(.cn-eyebrow) { margin-top:24px; font-size:14px; line-height:1.95; }
.cn-button--cream { background:#fff0cf; color:#523c26; }
.cn-button--cream:hover { background:#fff8e8; }
.cn-button--outline { border-color:#eeb896; color:#fff4dc; }
.cn-button--outline:hover { background:#8e442b; }
.cn-experience .cn-actions { gap:12px; }
.cn-page .cn-demo-note { max-width:490px; font-size:11px!important; color:#ffe2c6; }
.cn-contact { align-self:center; border-left:1px solid #e29a74; padding-left:50px; }
.cn-contact>img { width:100px; margin-bottom:16px; }
.cn-contact>span { font-size:9px; letter-spacing:.1em; }
.cn-contact h3 { margin-top:12px; font-size:28px; font-weight:400; letter-spacing:-.03em; }
.cn-contact>p { margin-top:16px; font-size:12px; }
.cn-wechat { margin-top:26px; }
.cn-wechat>span { display:block; color:#ffe2c6; font-size:11px; }
.cn-wechat strong { display:block; font-size:clamp(25px,2.7vw,40px); font-weight:400; line-height:1.65; letter-spacing:-.03em; overflow-wrap:anywhere; }
.cn-copy { display:block; min-height:44px; margin-top:7px; border:0; border-bottom:1px solid #ecc3a3; padding:7px 0; background:transparent; color:inherit; font-size:11px; cursor:pointer; }
.cn-page .cn-copy-status { min-height:2em; font-size:10px; }
.cn-footer { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; padding:30px clamp(24px,4.5vw,80px); background:#19251f; color:#d9dfcc; font-size:11px; }
.cn-footer>a { text-decoration:none; white-space:nowrap; min-height:44px; display:flex; align-items:center; }
.cn-footer p { max-width:650px; text-align:center; }
.cn-footer p span { display:block; margin-top:6px; font-size:9px; color:#9eaf9a; }
@media(min-width:1500px) { .cn-hero-art { min-height:660px; } .cn-device { max-width:340px; } }
@media(max-width:1100px) { .cn-section { padding:80px 5vw; } .cn-hero { padding:60px 5vw 0; } .cn-hero-art { min-height:550px; } .cn-device { width:58%; } .cn-device--nest { left:-1%; top:80px; } .cn-device--restaurant { right:-2%; top:20px; } .cn-art-note { bottom:25px; left:12%; } .cn-gallery-copy { padding:30px; } .cn-gallery-screen { padding:28px; } .cn-process { grid-template-columns:1fr 1fr; gap:35px; } .cn-tech { grid-template-columns:.7fr 1.4fr 1fr; } .cn-chapters { padding-inline:5vw; } .cn-contact { padding-left:30px; } }
@media(max-width:760px) { html:has(.cn-page) { scroll-padding-top:65px; } .cn-header { padding:15px 22px; } .cn-header nav { gap:20px; font-size:11px; } .cn-wordmark { font-size:12px; } .cn-wordmark span { font-size:6px; } .cn-section { padding:65px 24px; } .cn-hero { padding:44px 24px 0; grid-template-columns:1fr; min-height:0; } .cn-hero-copy { padding-bottom:16px; } .cn-hero h1 { font-size:clamp(95px,20vw,150px); margin-top:25px; } .cn-hero-names { margin-top:24px!important; font-size:23px; } .cn-hero-description { font-size:14px; } .cn-hero-art { width:min(100%,460px); min-height:520px; margin:18px auto 0; } .cn-device { width:53%; } .cn-device--nest { left:3%; top:45px; } .cn-device--restaurant { right:2%; top:3px; } .cn-orbit { width:106%; left:-3%; top:16px; } .cn-art-note { bottom:14px; left:19%; } .cn-hero-footer { font-size:8px; flex-direction:column; gap:7px; padding:16px 0; } .cn-chapters { min-height:56px; padding:0 24px; gap:26px; justify-content:flex-start; overflow:auto; scrollbar-width:thin; } .cn-chapters a { font-size:10px; min-height:52px; } .cn-intro-grid { grid-template-columns:1fr; gap:28px; } .cn-numbers { grid-template-columns:1fr 1fr; margin-top:40px; gap:25px; } .cn-numbers dt { font-size:52px; } .cn-numbers dd { font-size:10px; } .cn-nest { grid-template-columns:1fr; gap:38px; } .cn-nest-copy { grid-row:1; } .cn-nest-visual { padding-top:0; display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:15px; } .cn-editorial-art { grid-row:1; } .cn-image-caption { grid-column:1/-1; margin-top:0; font-size:8px; } .cn-memory-art { grid-row:1; width:100%; margin:0; border-width:5px; } .cn-section-heading { display:block; } .cn-section-heading>p { margin-top:24px; max-width:none; } .cn-order-flow { gap:8px; margin:30px 0; padding:18px 0; } .cn-order-flow li { font-size:10px; } .cn-order-flow li:not(:last-child)::after { display:none; } .cn-gallery-panel { grid-template-columns:1fr; min-height:0; } .cn-gallery-screen { padding:28px; } .cn-gallery-screen img { max-height:450px; } .cn-gallery-copy { padding:30px 26px 38px; } .cn-gallery-copy h3 { font-size:30px; margin-top:16px; } .cn-gallery-copy p { font-size:13px; } .cn-decor-art { height:450px; } .cn-decor-art img { object-position:50% 35%; } .cn-gallery-tabs button { font-size:11px; padding:16px 5px; } .cn-restaurant-details { grid-template-columns:1fr; gap:26px; margin-top:36px; } .cn-restaurant-details p { font-size:13px; } .cn-connection { grid-template-columns:1fr; gap:35px; } .cn-loop { max-width:440px; width:100%; margin:auto; } .cn-loop-home,.cn-loop-restaurant { font-size:17px; } .cn-making-statement { margin-top:35px!important; font-size:21px; } .cn-process { grid-template-columns:1fr; margin-top:35px; gap:24px; } .cn-process h3 { margin-top:9px; } .cn-process p { font-size:13px; } .cn-engineering-heading { grid-template-columns:1fr; margin-top:60px; gap:20px; } .cn-engineering article { grid-template-columns:28px 1fr; gap:10px; padding:24px 0; } .cn-engineering article>div { grid-template-columns:1fr; gap:12px; } .cn-engineering p { font-size:13px; } .cn-tech { grid-template-columns:1fr; gap:18px; } .cn-tech>span:last-child { border-top:1px solid #55634e; padding-top:20px; } .cn-feature-index summary { font-size:16px; gap:15px; } .cn-feature-index details>div { flex-direction:column; padding:0 0 25px 28px; gap:20px; } .cn-feature-index details p { font-size:13px; } .cn-experience { grid-template-columns:1fr; gap:40px; } .cn-contact { border-left:0; border-top:1px solid #e29a74; padding:32px 0 0; } .cn-contact>img { width:80px; } .cn-wechat strong { font-size:36px; } .cn-footer { flex-wrap:wrap; padding:22px 24px; gap:12px; } .cn-footer p { order:3; width:100%; text-align:left; } }
@media(max-width:760px) { .cn-experience h2 { font-size:36px; } .cn-chapters { scrollbar-width:none; } .cn-chapters::-webkit-scrollbar { display:none; } }
@media(max-width:390px) { .cn-hero-art { min-height:430px; } .cn-hero-names { font-size:21px; } .cn-actions { gap:16px; } .cn-button { padding:13px 17px; gap:18px; } .cn-hero .cn-eyebrow { font-size:9px; } .cn-order-flow li { font-size:9px; } }
/* Feature artwork stays square to the page and uses the complete game assets. */
.cn-research-visual { flex-direction:column; gap:20px; }
.cn-page .cn-research-visual img { width:100%; max-height:none; height:auto; transform:none; object-fit:contain; }
.cn-research-visual figcaption { font-size:10px; color:var(--cn-muted); letter-spacing:.06em; text-align:center; }
.cn-team-visual { display:flex; align-items:center; padding:38px 24px; background:#d5d9c5; }
.cn-team-board { width:100%; padding:28px 15px 20px; background:radial-gradient(ellipse at 50% 10%,#fffaf0 0,transparent 65%),#f1eedf; border:1px solid #bdc5aa; border-radius:160px 160px 12px 12px; box-shadow:0 14px 30px #29332c12; text-align:center; }
.cn-team-kicker { padding-top:10px; color:#738265; font-size:8px; letter-spacing:.15em; }
.cn-team-board h4 { margin-top:8px; font-size:24px; font-weight:500; letter-spacing:.12em; }
.cn-team-lineup { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; gap:25px 8px; margin:25px 0 0; padding:0; }
.cn-team-lineup li { min-width:0; }
.cn-team-portrait { position:relative; width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.cn-team-portrait::before { content:""; position:absolute; inset:16% 8% 4%; border-radius:50%; background:#e2e5d3; }
.cn-team-lineup li:nth-child(2n) .cn-team-portrait::before { background:#f3dfc3; }
.cn-team-lineup li:nth-child(3n) .cn-team-portrait::before { background:#e7deda; }
.cn-team-portrait img { position:relative; width:100%; height:auto; filter:drop-shadow(0 4px 2px #3b36221c); }
.cn-team-lineup strong { display:block; margin-top:5px; font-size:15px; font-weight:600; }
.cn-team-lineup li>span { display:block; margin-top:3px; font-size:10px; color:var(--cn-muted); }
.cn-page .cn-team-footer { margin-top:25px; padding-top:16px; border-top:1px solid var(--cn-line); font-size:10px; color:var(--cn-muted); }
.cn-decor-gallery { background:#d5d9c5; padding:24px; min-width:0; }
.cn-decor-preview { max-width:340px; margin-inline:auto!important; }
.cn-decor-stage { position:relative; aspect-ratio:940/1672; overflow:hidden; border-radius:8px; box-shadow:0 10px 25px #29332c1c; }
.cn-page .cn-decor-background { display:block; width:100%; height:100%; object-fit:contain; }
.cn-page .cn-scene-character { position:absolute; left:var(--x); top:var(--y); width:var(--w); height:auto; transform:translate(-50%,-85%); filter:drop-shadow(0 2px 1px #44342225); }
.cn-page .cn-scene-dish { position:absolute; left:var(--x); top:var(--y); width:8%; height:auto; transform:translate(-50%,-65%); }
.cn-decor-preview figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; padding-top:12px; font-size:9px; color:var(--cn-muted); }
.cn-decor-preview figcaption strong { font-weight:500; color:var(--cn-ink); }
.cn-scene-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:20px; }
.cn-scene-picker button { min-height:44px; padding:7px 3px; border:1px solid #b5bea4; border-radius:3px; background:#eceee0; color:var(--cn-ink); font-size:10px; line-height:1.4; cursor:pointer; }
.cn-scene-picker button[aria-pressed=true] { background:var(--cn-ink); color:#fff5df; border-color:var(--cn-ink); }
.cn-scene-hint { margin-top:12px!important; text-align:center; color:var(--cn-muted); font-size:9px; }
@media(max-width:760px) { .cn-team-visual { padding:28px; } .cn-team-board { max-width:430px; margin:auto; } .cn-team-lineup { gap:22px 10px; } .cn-decor-gallery { padding:24px; } .cn-decor-preview { max-width:300px; } .cn-scene-picker { max-width:430px; margin-inline:auto; } .cn-team-board h4 { font-size:22px; } }
@media(prefers-reduced-motion:reduce) { html:has(.cn-page) { scroll-behavior:auto; } .cn-page * { transition:none!important; } }