/* R3: improved source-derived UI skins. Subcomponents remain live text/avatars/icons/buttons. */
/*
 Cecekan Firstfold R1 — approved composition is 941 x 1672 illustration px.
 This is a scoped, editable live DOM implementation, not a screenshot overlay.
 The hero-scene is a source-derived photographic/illustrative matte. See LIMITATIONS.md.
 Never revise visual decisions during integration; no backend changes here.
*/
.cck-fold-host { width: 100%; max-width: 430px; margin-inline: auto; isolation: isolate; }
.cck-fold-frame { position: relative; width: 100%; overflow: hidden; }
.cck-firstfold { position: absolute; left: 0; top: 0; width: 941px; height: 1672px; transform-origin: left top; overflow: hidden; color: #3e3030; background: #fcf7f1; font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
.cck-firstfold * { box-sizing: border-box; }
.cck-firstfold button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cck-firstfold img { user-select: none; -webkit-user-drag: none; }
.cck-firstfold .cck-ambience { position: absolute; inset: 0; height: 1672px; width: 941px; object-fit: cover; pointer-events: none; }
.cck-firstfold .cck-ambience-wash { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(255,255,255,0) 0%, rgba(255,253,250,0) 23%,rgba(255,249,239,0) 48%,rgba(255,249,241,.17) 83%,rgba(255,251,247,.18) 100%); pointer-events: none; }
.cck-firstfold .cck-font-title { font-family: "Noto Serif CJK SC", "Songti SC", "STSong", "SimSun", serif; }
.cck-firstfold .cck-font-body { font-family: "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei",sans-serif; }
.cck-firstfold .cck-logo-combined { position: absolute; z-index: 15; top: 30px; left: 55px; width: 222px; height: 78px; object-fit: contain; object-position: left center; }
.cck-firstfold .cck-logo-fallback { position:absolute; z-index:14; display:flex; gap:9px; align-items:center; left:56px; top:36px; height:65px; }
.cck-firstfold .cck-logo-fallback img { width:60px; height:62px; object-fit:contain; }
.cck-firstfold .cck-logo-fallback span { font:900 49px/1.1 "Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif; color:#262426; letter-spacing:-4px; }
.cck-firstfold .cck-eyebrow { position:absolute; z-index:9; left:58px; top:123px; height:38px; font-size:27px; line-height:38px; letter-spacing:.2px; color:#955246; font-weight:450; white-space:nowrap; }
.cck-firstfold .cck-swoosh { position:absolute; z-index:3; top:149px; left:0; width:941px; height:180px; overflow:visible; pointer-events:none; }
.cck-firstfold .cck-heading { position:absolute; z-index:10; top:171px; left:56px; width:846px; height:129px; padding:0; margin:0; color:#760918; font-weight:700; font-size:95.5px; line-height:1.35; letter-spacing:-3.5px; white-space:nowrap; }
.cck-firstfold .cck-origin { position:absolute; z-index:8; left:122px; top:313px; height:48px; color:#72564a; font:400 31.5px/48px "Noto Serif CJK SC","Songti SC","STSong",serif; white-space:nowrap; letter-spacing:2.2px; }
.cck-firstfold .cck-origin-lead { position:absolute;z-index:8;top:344px;left:60px;width:51px;height:1.5px;background:#96735d; }
.cck-firstfold .cck-hero-plate { position:absolute; z-index:4; top:370px; left:0; width:941px; height:486px; pointer-events:none; }
.cck-firstfold .cck-anatomy-label { position:absolute;z-index:7;color:#623a2b; font:700 23px/1.25 "Noto Serif CJK SC","Songti SC",serif; white-space:nowrap; }
.cck-firstfold .cck-l-upper { left:29px;top:497px; }
.cck-firstfold .cck-l-middle { left:29px;top:597px; }
.cck-firstfold .cck-l-lower { left:27px;top:697px; }
.cck-firstfold .cck-l-root { left:313px;top:476px; }
.cck-firstfold .cck-l-eye { left:293px;top:539px; }
.cck-firstfold .cck-l-nose { left:300px;top:638px; }
.cck-firstfold .cck-panel { position:absolute; z-index:20; top:842px; left:24px; width:881px; height:532px; border-radius:35px; overflow:hidden; border:0; background: url("./assets/firstfold-skin-panel-shell-with-unchanged-card-background-7ffd330399c83394.webp") 0 0 / 881px 543px no-repeat; box-shadow:none; -webkit-backdrop-filter:blur(17px) saturate(1.03); backdrop-filter:blur(17px) saturate(1.03); }
.cck-firstfold .cck-panel-title { margin:0;position:absolute;left:0;top:24px;width:100%;height:67px;display:flex;justify-content:center;align-items:center; font-size:44px; font-weight:700;letter-spacing:1px;color:#690b17;white-space:nowrap; }
.cck-firstfold .cck-panel-orn { position:absolute;top:56px;width:153px;height:1.5px; background:linear-gradient(90deg,transparent,#ce9759);opacity:.83; }
.cck-firstfold .cck-panel-orn.left {left:132px;} .cck-firstfold .cck-panel-orn.right{right:132px;transform:rotate(180deg);}
.cck-firstfold .cck-panel-orn img { position:absolute;right:-7px;top:-8px;width:16px;height:16px; }
.cck-firstfold .cck-card { position:absolute;top:101px;height:340px;border-radius:21px; padding:0; display:flex; flex-direction:column; align-items:center; appearance:none; border:1.3px solid #fff9f5; color:#aa0b31; background:linear-gradient(155deg,rgba(255,255,255,.87),rgba(255,252,249,.69)); box-shadow:0 5px 15px rgba(126,70,63,.024); text-align:center; overflow:hidden; }
.cck-firstfold .cck-card:hover {filter:brightness(1.015);} .cck-firstfold .cck-card:focus-visible {outline:5px solid #dba65a;outline-offset:-6px;}
.cck-firstfold .cck-card.is-solo {left:25px;width:279px; background: url("./assets/firstfold-skin-card-solo-fb45e5cd19233eed.webp") center / 100% 100% no-repeat; border:0; box-shadow:none; color:#fff; }
.cck-firstfold .cck-card.is-pair {left:318px;width:270px;background:url("./assets/firstfold-skin-card-pair-76e2323e9d919a66.webp") center / 100% 100% no-repeat;border:0;box-shadow:none;} .cck-firstfold .cck-card.is-separate {left:597px;width:266px;background:url("./assets/firstfold-skin-card-separate-1711084cf04f7f20.webp") center / 100% 100% no-repeat;border:0;box-shadow:none;}
.cck-firstfold .cck-card .cck-card-icon { position:absolute;top:13px;right:12px;width:48px;height:48px;object-fit:contain; }
.cck-firstfold .cck-card.is-pair .cck-card-icon{top:20px;right:12px;width:47px;height:47px;}
.cck-firstfold .cck-card.is-separate .cck-card-icon{top:17px;right:13px;width:47px;height:47px;}
.cck-firstfold .cck-card-portrait { position:absolute;left:50%;top:30px;transform:translateX(-50%);width:174px;height:174px;object-fit:contain;border-radius:50%; }
.cck-firstfold .cck-card.is-pair .cck-card-portrait {width:178px;height:178px;top:27px;}
.cck-firstfold .cck-card-duo {position:absolute;top:54px;left:11px;width:245px;height:140px;}
.cck-firstfold .cck-card-duo img { position:absolute;object-fit:contain; width:138px;height:138px; border-radius:50%; }
.cck-firstfold .cck-card-duo img:first-child {left:0;top:0;} .cck-firstfold .cck-card-duo img:last-child {left:111px;top:0;}
.cck-firstfold .cck-card-name { position:absolute;top:197px;width:100%;left:0; font:700 31px/46px "Noto Serif CJK SC","Songti SC","STSong",serif; color:#a90a2a; letter-spacing:-.6px;white-space:nowrap; }
.cck-firstfold .cck-card.is-solo .cck-card-name {color:#fff;}
.cck-firstfold .cck-card-rule {position:absolute;top:249px;left:50%;transform:translateX(-50%);width:52px;height:1px;background:rgba(219,157,116,.51);}
.cck-firstfold .cck-card.is-solo .cck-card-rule {background:rgba(255,244,226,.42);}
.cck-firstfold .cck-card-detail { position:absolute;left:5px;right:5px;top:261px;font:400 25.3px/1.43 "Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif;color:#535b66;letter-spacing:0;white-space:nowrap; }
.cck-firstfold .cck-card.is-solo .cck-card-detail {color:#fff9f4;}
.cck-firstfold .cck-help {position:absolute;left:46px;right:33px;top:464px;height:57px;display:flex;align-items:center;gap:15px; font:400 20.4px/1.35 "Noto Sans CJK SC","PingFang SC",sans-serif;color:#63676d; white-space:nowrap;letter-spacing:-.5px; }
.cck-firstfold .cck-help img {height:41px;width:38px;flex:none; }
.cck-firstfold .cck-benefits { position:absolute;z-index:12;left:41px;top:1428px;width:850px;height:150px;display:grid;grid-template-columns:302px 306px 242px;column-gap:0; }
.cck-firstfold .cck-benefit { display:flex;align-items:flex-start;position:relative;padding-top:6px; }
.cck-firstfold .cck-benefit:not(:last-child)::after {content:"";position:absolute;right:23px;top:0px;height:103px;width:1.5px;background:rgba(206,110,111,.39);}
.cck-firstfold .cck-benefit-icon { flex:none;width:87px;height:87px;margin-top:2px;margin-right:14px;background:#fae5e4;border-radius:50%;display:flex;align-items:center;justify-content:center; }
.cck-firstfold .cck-benefit-icon img {width:53px;height:56px;object-fit:contain;}
.cck-firstfold .cck-benefit-copy {padding:0; min-width:0; }
.cck-firstfold .cck-benefit-h {font:700 25.5px/1.42 "Noto Serif CJK SC","Songti SC",serif;letter-spacing:0;color:#ab4053;white-space:nowrap; }
.cck-firstfold .cck-benefit-p {font:400 21px/1.55 "Noto Sans CJK SC","PingFang SC",sans-serif;white-space:nowrap;color:#6e737a; margin-top:3px;letter-spacing:0; }
.cck-firstfold .cck-only-sr {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}

.cck-firstfold .cck-logo-fallback { display:none; }

/* Avoid doubled lines: exact reference ornaments live inside the source-derived shell. */
.cck-firstfold .cck-panel-orn{display:none}
/* Fine optical correction against 941px design ink bounds. */
.cck-firstfold .cck-panel-title {top:35px}
.cck-firstfold .cck-card-name {top:207px}
.cck-firstfold .cck-card-detail {top:267px}

/* Chrome 941px measured glyph optical alignment, independent of QA script. */
.cck-firstfold .cck-heading{font-size:100px;top:174px;letter-spacing:-1px;}
.cck-firstfold .cck-eyebrow{font-size:27px;top:119px;}
.cck-firstfold .cck-origin{font-size:33px;top:321px;}
.cck-firstfold .cck-panel-title{font-size:48px;top:37px;}
.cck-firstfold .cck-card-name{font-size:30px;top:213px;}

/* Preserve the existing geometry before the module hydrates the server-rendered firstfold. */
.cck-fold-frame{height:calc(1485px * var(--cck-fold-scale,.4144527099))}
.cck-firstfold{transform:scale(var(--cck-fold-scale,.4144527099))}
