:root{--tg-bg: #ffffff;--tg-text: #111111;--tg-hint: #6b7280;--tg-button: #2ea6ff;--tg-button-text: #ffffff;--tg-secondary-bg: #f3f4f6;--radius: 14px;--pad: 14px}html,body{height:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Arial,sans-serif;background:var(--tg-bg);color:var(--tg-text)}.page{min-height:100%}.header{padding:calc(env(safe-area-inset-top) + var(--pad)) var(--pad) var(--pad) var(--pad);position:sticky;top:0;background:color-mix(in srgb,var(--tg-bg) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--tg-hint) 20%,transparent);z-index:10}.title{font-size:20px;font-weight:800;line-height:1.2}.subtitle{margin-top:6px;font-size:13px;line-height:1.4;color:var(--tg-hint)}.search{width:100%;box-sizing:border-box;padding:12px;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--tg-hint) 22%,transparent);background:var(--tg-secondary-bg);color:var(--tg-text);outline:none}.searchRow{margin-top:12px;display:flex;gap:10px;align-items:center}.searchRow .search{margin-top:0;flex:1}.genderSelect{box-sizing:border-box;padding:12px;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--tg-hint) 22%,transparent);background:var(--tg-secondary-bg);color:var(--tg-text);outline:none;font-weight:800;min-width:76px}.content{padding:var(--pad)}.collection{margin-bottom:18px}.collectionHeader{margin-bottom:10px}.collectionTitle{font-weight:800;font-size:16px}.collectionDesc{margin-top:4px;color:var(--tg-hint);font-size:13px;line-height:1.4}.carousel{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}.carouselSlider{position:relative;overflow:hidden}.carouselTrack{display:flex;gap:10px;transition:transform .22s ease;will-change:transform;padding-bottom:8px}.carouselBtn{position:absolute;top:50%;transform:translateY(-50%);border:0;width:36px;height:36px;border-radius:999px;background:color-mix(in srgb,var(--tg-bg) 85%,transparent);color:var(--tg-text);font-size:22px;font-weight:900;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px #0000001f}.carouselBtn.left{left:8px}.carouselBtn.right{right:8px}.card{scroll-snap-align:start;width:240px;min-width:240px;border-radius:var(--radius);background:var(--tg-secondary-bg);border:1px solid color-mix(in srgb,var(--tg-hint) 18%,transparent);text-decoration:none;color:inherit;overflow:hidden}.cardImg{width:100%;height:150px;object-fit:cover;display:block}.cardImgPlaceholder{width:100%;height:150px;background:color-mix(in srgb,var(--tg-hint) 12%,transparent)}.cardBody{padding:12px}.cardTitle{font-weight:800;font-size:14px}.cardDesc{margin-top:6px;color:var(--tg-hint);font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.back{display:inline-block;margin-bottom:10px;color:var(--tg-hint);text-decoration:none;font-weight:700}.badge{margin-top:8px;display:inline-block;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--tg-hint) 14%,transparent);color:var(--tg-text);font-size:12px;font-weight:700}.detailDesc{font-size:14px;line-height:1.5;white-space:pre-wrap}.detailDesc.afterExamples{margin-top:14px}.sectionTitle{margin-top:14px;font-weight:900;font-size:14px}.sectionSubtitle{margin-top:6px;color:var(--tg-hint);font-size:12.5px;line-height:1.4}.referenceBox,.examplesBox{margin-top:14px}.referenceImg{margin-top:10px;width:100%;display:block;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--tg-hint) 18%,transparent);background:var(--tg-secondary-bg);aspect-ratio:4 / 5;object-fit:cover}.referenceHint{margin-top:10px;color:var(--tg-hint);font-size:12.5px;line-height:1.4}.referenceList{margin:8px 0 0 18px;padding:0}.exampleCarousel{margin-top:10px;position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--tg-hint) 18%,transparent);background:var(--tg-secondary-bg)}.exampleTrack{display:flex;transition:transform .22s ease;will-change:transform}.exampleSlide{width:100%;min-width:100%;aspect-ratio:4 / 5;position:relative}.exampleImg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.exampleBtn{position:absolute;top:50%;transform:translateY(-50%);border:0;width:38px;height:38px;border-radius:999px;background:color-mix(in srgb,var(--tg-bg) 85%,transparent);color:var(--tg-text);font-size:22px;font-weight:900;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px #0000001f}.exampleBtn.left{left:10px}.exampleBtn.right{right:10px}.exampleDots{margin-top:10px;display:flex;justify-content:center;gap:8px}.exampleDot{width:7px;height:7px;border-radius:999px;border:0;padding:0;background:color-mix(in srgb,var(--tg-hint) 35%,transparent)}.exampleDot.active{background:var(--tg-button)}.gallery{margin-top:12px;display:grid;gap:10px}.galleryImg{width:100%;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--tg-hint) 18%,transparent);background:var(--tg-secondary-bg)}.primaryBtn{margin-top:14px;width:100%;border:0;border-radius:14px;padding:14px 12px;background:var(--tg-button);color:var(--tg-button-text);font-size:15px;font-weight:900}.hint{margin-top:10px;color:var(--tg-hint);font-size:12.5px;line-height:1.4}.error{padding:12px;border-radius:var(--radius);background:color-mix(in srgb,#ef4444 12%,var(--tg-secondary-bg));border:1px solid color-mix(in srgb,#ef4444 25%,transparent);margin-bottom:12px}
