:root { --header-height: 86px; }
body { padding-top: var(--header-height); }
.site-header { position: fixed; inset: 0 0 auto; max-width: none; width: 100%; height: var(--header-height); padding: 0 max(32px,calc((100vw - 1192px)/2)); background: #faf7eff5; backdrop-filter: blur(14px); border-bottom: 1px solid #2e493f0a; z-index: 10; }
.site-header nav a[aria-current="page"] { border-bottom: 1px solid var(--green); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.home { height: 100svh; overflow: hidden; }
.home #main { position: relative; height: calc(100svh - var(--header-height)); overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-y: contain; }
.home #main::-webkit-scrollbar { display: none; }
.home #main > section { scroll-snap-align: start; scroll-snap-stop: always; min-height: calc(100svh - var(--header-height)); padding-top: 36px; padding-bottom: 36px; overflow: visible; }
.home .hero { gap: 20px; }
.home .hero-art { width: clamp(195px,30svh,285px); padding: 10px; }
.home .chapter-inner { max-width: 1040px; }
.home .rule-art { max-width: min(340px,45svh); }
.home .closing { justify-content: center; gap: 22px; }
.home .closing .site-footer { width: min(100%,1120px); margin-top: 40px; padding-top: 25px; padding-bottom: 0; text-align: left; }
.chapter-navigation { position: fixed; right: 25px; top: 50%; z-index: 6; display: grid; gap: 14px; }
.chapter-navigation button { width: 30px; height: 30px; border: 0; background: transparent; display: grid; place-items: center; padding: 0; }
.chapter-navigation button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7c8a7166; transition: transform .3s,background .3s; }
.chapter-navigation button[aria-current="step"]::before { background: var(--ink); transform: scale(1.65); }
#chapter-position { position: fixed; bottom: 22px; right: 26px; z-index: 5; font-size: 10px; color: var(--muted); letter-spacing: .13em; }
.collection-page { width: min(100% - 80px,1200px); margin: 0 auto; padding: 28px 0 36px; }
.collection-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.collection-heading .eyebrow { margin-bottom: 7px; font-size: 10px; }
.collection-heading h1 { font-size: 36px; margin: 0; }
.collection-heading .lead { font-size: 13px; margin: 0; }
.collection-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; height: min(710px,calc(100svh - var(--header-height) - 162px)); min-height: 460px; }
.preview-column { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.studio-preview { position: relative; min-height: 0; flex: 1; border-radius: 28px; overflow: hidden; background: #eee9d8; isolation: isolate; display: flex; flex-direction: column; align-items: center; padding: 26px 24px 22px; }
.preview-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.studio-preview::after { content:""; position:absolute; inset:0; background:#faf7ef19; z-index:-1; pointer-events:none; }
.preview-profile { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 330px; flex-shrink: 0; }
.profile-art { position: relative; width: 76px; height: 76px; flex: 0 0 76px; }
.profile-art .avatar { position: absolute; inset: 11.5%; width: 77%; height: 77%; object-fit: contain; border-radius: 50%; background:#fff9e8; }
.profile-art .frame { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.preview-profile-copy { padding: 8px 13px; border-radius: 12px; background: #fffcf4e0; line-height: 1.5; }
.preview-profile-copy strong { font-size: 14px; font-weight: 500; display: block; }
.preview-profile-copy span { font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.preview-board-space { display:grid; place-items:center; flex:1; min-height:0; width:100%; padding:14px 0 6px; }
.preview-board { position: relative; width: min(100%,var(--preview-board-width,320px)); aspect-ratio: 1190/1380; }
.preview-board-art { position:absolute; max-width:none; object-fit:fill; pointer-events:none; }
.preview-board .puzzle-grid { position:absolute; left:7.9832%; top:13.7681%; width:84.0336%; gap:1px; border-radius:3px; }
.preview-board .cell { min-height:0; }
.preview-board.plain-fallback::before { content:""; position:absolute; inset:3%; border-radius:14px; background:var(--white); border:1px solid var(--line); }
.preview-caption { font-size: 10px; margin:0; color:#405443; background:#fffcf4de; border-radius:20px; padding:4px 12px; text-align:center; }
.preview-meta { display:flex; flex-shrink:0; justify-content:space-between; align-items:center; gap:12px; }
#combination-label { font-size:11px; color:var(--muted); line-height:1.7; margin:0; flex:1; }
.reset-combination { flex-shrink:0; padding:6px 0; background:none; border:0; border-bottom:1px solid var(--line); font-size:12px; }
.catalog-column { display:flex; flex-direction:column; min-height:0; min-width:0; }
.collection-tabs { display:flex; border-bottom:1px solid var(--line); flex-shrink:0; }
.collection-tabs button { flex:1; border:0; border-bottom:2px solid transparent; background:transparent; padding:13px 2px; font-size:13px; white-space:nowrap; }
.collection-tabs button[aria-selected="true"] { border-color:var(--ink); font-weight:600; }
.tab-count { font-size:10px; margin-left:4px; opacity:.6; }
.catalog-heading { display:flex; justify-content:space-between; align-items:center; padding:17px 0 12px; font-size:11px; color:var(--muted); }
#catalog-status { font-size:12px; margin:0; color:var(--muted); }
#catalog-status:not(:empty) { margin:12px 0; }
#catalog-retry { align-self:flex-start; padding:6px 14px; border:1px solid var(--line); background:var(--white); border-radius:20px; font-size:12px; margin-bottom:10px; }
.collection-panel { overflow:auto; overscroll-behavior:contain; min-height:0; flex:1; scrollbar-width:thin; scrollbar-color:#bac4b0 transparent; padding:3px 10px 12px 3px; }
.collection-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 13px; }
.cosmetic-card { display:flex; flex-direction:column; align-items:center; gap:9px; position:relative; min-width:0; border:1px solid transparent; border-radius:17px; background:transparent; padding:10px 7px; }
.cosmetic-card:hover { background:#f0eee4; }
.cosmetic-card[aria-pressed="true"] { border-color:#849779; background:#eff1e6; }
.cosmetic-art { display:grid; place-items:center; width:100%; aspect-ratio:1; overflow:hidden; border-radius:10px; background:#f1eee4; }
.cosmetic-art img { width:82%; height:82%; object-fit:contain; }
.cosmetic-art.background img { width:100%; height:100%; object-fit:cover; }
.cosmetic-art.board img { width:95%; height:95%; }
.cosmetic-name { font-size:11px; line-height:1.5; text-align:center; overflow-wrap:anywhere; }
.cosmetic-check { display:none; position:absolute; top:7px; right:7px; width:18px; height:18px; line-height:18px; border-radius:50%; font-size:11px; background:var(--green); color:white; }
.cosmetic-card[aria-pressed="true"] .cosmetic-check { display:block; }
.missing-art { font-size:10px; color:var(--muted); }
.selected-item { border-top:1px solid var(--line); padding:15px 0 0; margin-top:12px; min-height:74px; }
.selected-item h2 { font-family:inherit; font-size:15px; font-weight:500; letter-spacing:0; margin:0 0 5px; }
.selected-item p { margin:0; font-size:12px; color:var(--muted); line-height:1.7; }
#category-empty { padding:40px 0; font-size:13px; text-align:center; color:var(--muted); }
@media(max-width:900px){
 .home .split { gap:36px; }
 .collection-page { width:calc(100% - 40px); }
 .collection-workspace { gap:24px; }
 .collection-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .collection-heading .lead { max-width:210px; }
 .studio-preview { padding:18px 14px; }
}
@media(max-width:640px){
 :root { --header-height:70px; }
 .site-header { padding:0 24px; }
 .site-header nav { top:var(--header-height); }
 .home #main > section { padding:26px 28px; }
 .home .hero { gap:18px; }
 .home .hero-art { width:min(240px,28svh); }
 .home .hero-copy h1 { font-size:clamp(29px,7vw,38px); }
 .home .hero-copy .eyebrow { font-size:9px; margin-bottom:16px; }
 .home .split { gap:28px; }
 .home .rule-art { width:min(180px,27svh); }
 .home .rule-list { gap:13px; }
 .home .rule-list h3 { font-size:15px; }
 .home .rule-list p { font-size:12px; }
 .home .rule-art .art-caption { display:none; }
 .home h2 { font-size:30px; margin-bottom:18px; }
 .home .section-copy .lead { font-size:14px; margin-bottom:22px; }
 .home .journey-list { gap:20px; }
 .home .journey-list article { padding-bottom:17px; }
 .home .journey-list h3 { font-size:20px; margin-bottom:8px; }
 .home .journey-list p { font-size:12px; }
 .home .closing .site-footer { padding:22px 0 0; gap:16px; margin-top:25px; }
 .chapter-navigation { right:5px; gap:5px; }
 .chapter-navigation button { width:20px; height:24px; }
 #chapter-position { bottom:10px; right:12px; font-size:9px; }
 .collection-page { width:calc(100% - 32px); padding:16px 0 20px; }
 .collection-heading { margin-bottom:14px; align-items:center; }
 .collection-heading h1 { font-size:27px; }
 .collection-heading .eyebrow { font-size:8px; margin-bottom:3px; }
 .collection-heading .lead { font-size:10px; max-width:150px; text-align:right; }
 .collection-workspace { height:calc(100svh - var(--header-height) - 98px); min-height:440px; grid-template-columns:1fr; grid-template-rows:45% 1fr; gap:14px; }
 .preview-column { gap:7px; }
 .studio-preview { border-radius:20px; padding:12px; flex-direction:row; justify-content:center; gap:16px; }
 .preview-profile { position:absolute; left:12px; top:12px; display:block; width:auto; max-width:80px; }
 .profile-art { width:62px; height:62px; }
 .preview-profile-copy { margin-top:6px; padding:5px 7px; text-align:center; }
 .preview-profile-copy strong { font-size:10px; }
 .preview-profile-copy span { font-size:7px; }
 .preview-board-space { height:100%; width:58%; flex:0 1 auto; padding:0; margin-left:38px; }
 .preview-board { width:min(100%,var(--preview-board-width,180px)); }
 .preview-caption { display:none; }
 #combination-label { font-size:9px; line-height:1.4; max-height:27px; overflow:hidden; }
 .reset-combination { font-size:10px; padding:3px 0; }
 .collection-tabs button { font-size:12px; padding:9px 0; }
 .tab-count { font-size:9px; margin-left:2px; }
 .catalog-heading { padding:8px 0; font-size:10px; }
 .collection-items { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 .cosmetic-card { border-radius:12px; padding:6px; gap:5px; }
 .cosmetic-name { font-size:10px; }
 .selected-item { display:none; }
 .collection-panel { padding-right:5px; }
}
@media(max-height:650px) and (min-width:641px){ .home .hero { gap:8px; } .home .hero-copy h1 { font-size:36px; } .home .hero-copy .eyebrow { margin-bottom:8px; } .home .hero-art { width:175px; } .home .scroll-cue { margin-top:0; } .home .chapter-inner h2 { font-size:36px; } }
@media(prefers-reduced-motion:reduce){ .home #main { scroll-behavior:auto; } .chapter-navigation button::before { transition:none; } }
@media(max-width:640px) and (max-height:680px){
 .home #main > section { padding:18px 26px; }
 .home .hero { gap:10px; }
 .home .hero-art { width:25svh; }
 .home .hero-copy h1 { font-size:29px; margin-bottom:9px; }
 .home .hero-copy .eyebrow { margin-bottom:10px; }
 .home .hero-copy .lead { font-size:12px; margin-bottom:12px; }
 .home .pill { min-height:40px; padding:8px 20px; font-size:12px; }
 .home .scroll-cue { margin-top:0; }
 .home .rule-art { display:none; }
 .home .rule-chapter .split { display:block; }
 .home .journey-chapter .eyebrow { margin-bottom:14px; }
 .home .journey-chapter h2 { font-size:26px; }
 .home .journey-chapter .lead { font-size:12px; margin-bottom:12px; }
 .home .journey-chapter .split { gap:16px; }
 .home .journey-list { gap:12px; }
 .home .journey-list article { padding-bottom:12px; }
 .home .journey-list h3 { font-size:17px; margin-bottom:4px; }
 .home .journey-list p { font-size:11px; }
 .home .closing { gap:14px; }
 .home .closing > img { width:42px; height:42px; }
 .home .closing h2 { font-size:24px; }
 .home .closing .site-footer { margin-top:8px; }
}

/* Portrait preview: the screen keeps a 9:19.5 ratio on every viewport. */
.preview-device-space { display:grid; place-items:center; flex:1; min-height:0; width:100%; padding:7px; }
.studio-preview {
 --phone-scale:1;
 width:var(--phone-width,270px); height:auto; aspect-ratio:9 / 19.5; flex:none;
 padding:calc(44px * var(--phone-scale)) calc(20px * var(--phone-scale)) calc(30px * var(--phone-scale));
 border-radius:calc(38px * var(--phone-scale));
 outline:5px solid #e9e8df;
 box-shadow:0 14px 32px #30483c12,0 0 0 6px #d6dbcf;
 flex-direction:column; justify-content:flex-start; gap:0;
}
.studio-preview::before { content:""; position:absolute; z-index:1; top:2%; left:44%; width:12%; height:3px; border-radius:4px; background:#3d52462b; }
.preview-profile { position:static; display:flex; width:100%; max-width:none; gap:calc(14px * var(--phone-scale)); }
.profile-art { width:calc(76px * var(--phone-scale)); height:calc(76px * var(--phone-scale)); flex:0 0 calc(76px * var(--phone-scale)); }
.preview-profile-copy { margin:0; padding:calc(8px * var(--phone-scale)) calc(13px * var(--phone-scale)); border-radius:calc(12px * var(--phone-scale)); text-align:left; }
.preview-profile-copy strong { font-size:calc(14px * var(--phone-scale)); }
.preview-profile-copy span { font-size:calc(10px * var(--phone-scale)); }
.preview-board-space { height:auto; width:100%; flex:1; margin:0; padding:calc(20px * var(--phone-scale)) 0; }
.preview-board { width:min(100%,var(--preview-board-width,240px)); }
.preview-caption { display:block; font-size:calc(11px * var(--phone-scale)); padding:calc(5px * var(--phone-scale)) calc(12px * var(--phone-scale)); }
.preview-meta { width:min(100%,400px); margin-inline:auto; }
@media(max-width:640px){
 .collection-workspace { grid-template-rows:65% minmax(0,1fr); min-height:520px; }
 .preview-column { gap:10px; }
 .preview-meta { width:100%; }
 .collection-tabs button { padding-top:6px; padding-bottom:7px; }
 .catalog-heading { padding:6px 0; }
}

/* Package state is confined to links containing a published package ID. */
.package-preview[hidden], .collection-tabs[hidden], .package-actions button[hidden] { display:none; }
.package-preview { border:1px solid var(--line); border-radius:18px; padding:18px 20px; margin-bottom:14px; background:#f3f1e6; }
.package-preview .eyebrow { font-size:9px; margin:0 0 7px; }
.package-preview h2 { font-family:inherit; font-weight:500; line-height:1.4; font-size:21px; margin:0 0 8px; letter-spacing:-.03em; }
.package-preview p:not(.eyebrow) { font-size:12px; color:var(--muted); margin:0 0 13px; line-height:1.6; }
.package-actions { display:flex; flex-wrap:wrap; gap:9px 16px; }
.package-actions button { background:transparent; border:0; border-bottom:1px solid #74856d80; color:var(--green); padding:5px 0; font-size:12px; min-height:32px; }
.package-actions button:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
@media(max-width:640px){
 .package-entry .collection-workspace { height:auto; min-height:0; grid-template-rows:min(58svh,490px) auto; }
 .package-entry .catalog-column { min-height:330px; }
 .package-entry .collection-panel { max-height:360px; min-height:180px; flex:auto; }
 .package-preview { padding:15px 17px; margin-bottom:8px; }
 .package-preview h2 { font-size:19px; }
 .package-actions button { min-height:40px; }
}