/* Ice Geometry: visual surfaces only, preserves the T6 layout. */
html:root { color-scheme:light; color:#192b4b; background:#f3f6fc; }
html body { color:#192b4b; background:radial-gradient(ellipse at 85% 0%,#e8e4ff80,transparent 38%),#f3f6fc; }
html body .top { background:#ffffffed; border-color:#dce4f1; box-shadow:0 2px 14px #233a6c08; }
html body .side { background:#f9fbff; border-color:#dce4f1; }
html body .side small { color:#62718a; }
html body .side button, html body .side .side-route { color:#425473; }
html body .side button:hover, html body .side button.on, html body .side .side-route:hover, html body .side .side-route.on { color:#354fa9; background:#e8edff; box-shadow:inset 3px 0 #6575e8; }
html body .side em { background:#e6ebf7; color:#536484; }
html body .search input { color:#263957; background:#f1f4fa; border-color:#d9e1ef; }
html body .search input::placeholder { color:#75829a; }
html body .search input:focus { border-color:#398fcd; box-shadow:0 0 0 3px #398fcd16; }
html body .navbtn, html body .top .language-trigger { color:#364968; background:#edf1fa; border:1px solid #dce4f1; }
html body .navbtn:hover, html body .top .language-trigger:hover { background:#e2e9fa; }
html body .top .language-picker[open] .language-trigger { color:#344967; background:#e4eafb; border-color:#9aaddd; box-shadow:0 0 0 3px #7088d51a; }
html body .top .language-picker[open] .language-trigger:hover { background:#dce5fb; }
html body .language-check { color:#5267c4; }
html body .language-picker:after { color:#526384; }
html body .language-menu, html body .suggest { background:#fff; border-color:#d8e1f0; box-shadow:0 12px 28px #20375c18; }
html body .language-menu a, html body .suggest button { color:#344967; }
html body .language-menu a:hover, html body .language-menu a[aria-current="true"], html body .suggest button:hover, html body .suggest button.active { background:#eaf0ff; color:#4455ad; }
html body .geometry-intro { background:linear-gradient(110deg,#e6f6fd 0%,#f3f6ff 55%,#ede8ff 100%); border-color:#d4def0; box-shadow:inset 0 1px 0 #fff; }
html body .geometry-intro:after { border-color:#7d86ca38; }
html body .geometry-intro h1, html body .geometry-intro h2 { color:#1b3154; }
html body .geometry-mark { color:#2079a1; background:#d9f0fa; border-color:#98cce2; }
html body .geometry-kicker { color:#23789a; }
html body .geometry-subtitle { color:#526680; }
html body .geometry-browse { color:#fff; border-color:#5d75c0; background:linear-gradient(110deg,#277ea4,#645eb7); }
html body .geometry-browse span { color:#e1f5ff; }
html body .geometry-browse:hover, html body .geometry-browse:focus-visible { background:linear-gradient(110deg,#216989,#524e9f); outline-color:#5c79c2; }
html body .tile { background:#fff; border-color:#dce4f0; box-shadow:0 3px 12px #213d6510; color:#243755; }
html body .tile .meta { color:#61728c; }
html body .tile:hover, html body .tile:focus-visible { border-color:#6f94dc; box-shadow:0 10px 25px #314e7a20; }
html body .picks .tile .name, html body .tile .hover { color:#fff; }
html body .picks .tile .meta { color:#d3dced; }
html body .tile .heart { background:#172944cf; color:#fff; }
html body .tile .heart.saved { color:#ff9ec4; }
html body .section h2 span { color:#6371bf; }
html body .section-kicker, html body .crumb { color:#5f6caa; }
html body .heading select { background:#fff; color:#344967; border-color:#d7dfec; }
html body .arrow { background:#ffffffed; color:#465981; border-color:#d6dfed; box-shadow:0 3px 14px #21385918; }
html body .arrow:hover { background:#e8efff; }
html body .tools { background:#eaf0fa; color:#263957; }
html body .tools button { background:#fff; color:#3b4f74; border:1px solid #d1ddee; }
html body .tools button:hover { background:#dde8fb; }
html body .play { background:linear-gradient(110deg,#267da7,#645ab7); color:#fff; }
html body .play:hover { background:linear-gradient(110deg,#216e92,#554c9e); }
html body .detail-head p, html body .detail-section div, html body .detail-empty { color:#53657d; }
html body .detail-tag { background:#eceafd; color:#6152a4; border-color:#d6d0f1; }
html body .detail-copy, html body .panel, html body .empty { background:#fff; border-color:#dce4f0; color:#52647d; }
html body .detail-section { border-color:#e2e9f3; }
html body .detail-section h2, html body .panel h2, html body .panel h3 { color:#243755; }
html body .detail-copy a, html body .panel a { color:#5265b2; text-decoration:underline; text-underline-offset:3px; }
html body .main p[style*="color:#a7a9c0"] { color:#5e6f89 !important; }
html body .hover-preview { background:#fff; color:#243755; border-color:#d8e2f2; box-shadow:0 15px 35px #223e6526; }
html body .hover-preview-info { color:#334a70; }
html body .foot { color:#60718d; border-color:#d6dfed; }
html body :focus-visible { outline-color:#507ccb; }

/* Ice Geometry depth: clear navigation, quiet geometry, restrained motion. */
html body .side { background:linear-gradient(180deg,#eaf0fb,#eef3fc 55%,#e7eef9); border-right:1px solid #c8d5eb; box-shadow:4px 0 18px #2945770a; }
html body .side small { color:#50648c; font-weight:750; letter-spacing:1.6px; }
html body .side .side-route, html body .side button { color:#2d4267; font-weight:600; transition:background .18s ease,color .18s ease,box-shadow .18s ease; }
html body .side .side-route:hover, html body .side button:hover { color:#324cac; background:#dce6fa; box-shadow:inset 3px 0 #7791d5; }
html body .side .side-route.on, html body .side button.on { color:#fff; background:linear-gradient(105deg,#326d9f,#645db1); box-shadow:inset 3px 0 #b9e6ff,0 4px 12px #3f5b9d25; }
html body .side .side-route em { color:#485e83; background:#d6e0f2; font-weight:650; }
html body .side .side-route.on em { color:#fff; background:#ffffff29; }
html body .main { position:relative; isolation:isolate; }
html body .main::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(#6079ab08 1px,transparent 1px),linear-gradient(90deg,#6079ab08 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(#000,transparent 1100px); }
html body .geometry-intro { box-shadow:0 5px 20px #38559409,inset 0 1px 0 #fff; background:radial-gradient(ellipse at 10% 0%,#cceffa80,transparent 55%),linear-gradient(110deg,#e6f6fd,#f3f6ff 55%,#ede8ff); }
html body .geometry-intro::before { content:''; position:absolute; width:210px; height:210px; right:26%; top:-120px; border-radius:50%; background:radial-gradient(circle,#80bce929,transparent 68%); pointer-events:none; animation:gl-orbit 16s ease-in-out infinite alternate; }
html body .geometry-intro::after { border-color:#7383ce42; animation:gl-outline 12s ease-in-out infinite alternate; }
html body .geometry-intro>div, html body .geometry-browse { position:relative; z-index:1; }
html body .geometry-mark { box-shadow:0 5px 15px #3e9fc915,inset 0 1px 0 #ffffffa0; }
html body .geometry-mark { animation:gl-float 7s ease-in-out infinite; }
html body .geometry-browse, html body .navbtn, html body .theme-card { transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
html body .geometry-browse:hover { transform:translateY(-2px); box-shadow:0 6px 16px #4656ac28; }
html body .theme-card { box-shadow:0 4px 10px #29466a14,inset 0 1px 0 #ffffff28; }
html body .theme-card:hover, html body .theme-card:focus-visible { transform:translateY(-3px); box-shadow:0 10px 20px #29466a25; }
html body .section h2 { letter-spacing:-.3px; }
html body .section h2 span { display:inline-block; transition:transform .2s ease; }
html body .section h2:hover span { transform:translateX(3px); }
@keyframes gl-orbit { from{transform:translate3d(-20px,0,0)} to{transform:translate3d(40px,35px,0)} }
@keyframes gl-outline { from{transform:translate3d(0,0,0) rotate(45deg)} to{transform:translate3d(20px,16px,0) rotate(55deg)} }
@keyframes gl-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@media (hover:none) { html body .theme-card:hover,html body .geometry-browse:hover {transform:none;} }
@media (prefers-reduced-motion:reduce) { html body .geometry-intro::before,html body .geometry-intro::after,html body .geometry-mark {animation:none;} html body .geometry-browse,html body .navbtn,html body .theme-card,html body .side .side-route,html body .section h2 span {transition:none;} html body .theme-card:hover,html body .geometry-browse:hover {transform:none;} }
/* Keep icon, label, and count in distinct columns at every sidebar width. */
html body .side .side-route { justify-content:flex-start; gap:10px; min-height:38px; padding:8px 10px; }
html body .side .side-icon { display:inline-flex; flex:0 0 18px; width:18px; align-items:center; justify-content:center; font-size:15px; line-height:1; }
html body .side .side-label { display:block; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
html body .side .side-route em { flex:0 0 auto; margin-left:auto; }
html body .side small { display:block; padding:8px 10px 5px; }
html body .collapsed .side .side-route { justify-content:center; gap:0; padding-inline:0; }
html body .collapsed .side .side-label,html body .collapsed .side .side-route em { display:none; }
html body .collapsed .side small { display:none; }
@media(min-width:561px) and (max-width:900px) {
 html body .side .side-route { justify-content:center; gap:0; padding-inline:0; }
 html body .side .side-label,html body .side .side-route em { display:none; }
 html body .side small { display:none; }
}

/* A small illustrated hero and an actionable control finder replace the long intro panel. */
html body .geometry-intro .geometry-copy { min-width:0; }
html body .geometry-hero-art { position:absolute; z-index:0; width:250px; height:auto; right:158px; top:50%; transform:translateY(-50%); opacity:.88; pointer-events:none; }
html body .control-finder { display:grid; grid-template-columns:minmax(230px,.8fr) minmax(0,2fr); align-items:center; gap:14px 24px; margin:16px 0 26px; padding:15px 18px; border:1px solid #d8e2f1; border-radius:14px; background:linear-gradient(115deg,#ffffffdf,#f5f7ffed); box-shadow:0 5px 18px #3855940b,inset 0 1px 0 #fff; }
html body .control-finder-copy .geometry-kicker { margin:0 0 4px; font-size:9px; letter-spacing:1.3px; }
html body .control-finder-copy h2 { margin:0; color:#21385f; font-size:19px; line-height:1.25; }
html body .control-finder-copy p:last-child { margin:4px 0 0; color:#61718c; font-size:12px; line-height:1.45; }
html body .control-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
html body .control-option { display:flex; min-width:0; min-height:52px; align-items:center; gap:8px; padding:8px 10px; border:1px solid #dbe4f2; border-radius:11px; background:#fff; color:#344b70; font:inherit; font-size:12px; font-weight:650; text-align:left; cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; }
html body .control-option:hover,html body .control-option:focus-visible { transform:translateY(-2px); border-color:#83a3dc; box-shadow:0 6px 15px #42639c1c; }
html body .control-option[aria-pressed="true"] { border-color:#6d8acb; background:linear-gradient(110deg,#e8f7fb,#f0edff); color:#304a91; box-shadow:inset 0 0 0 1px #aabce8; }
html body .control-option-icon { display:inline-flex; flex:0 0 30px; width:30px; height:30px; align-items:center; justify-content:center; border-radius:9px; background:#e9f1fc; color:#5574bd; font-size:17px; }
html body .control-option-arrow { margin-left:auto; color:#7485b8; font-size:18px; }
html body .control-results { grid-column:1/-1; padding-top:12px; border-top:1px solid #e0e7f2; }
html body .control-results h3 { margin:0 0 10px; color:#2b4267; font-size:14px; }
html body .control-results-grid { display:grid; grid-template-columns:minmax(190px,230px); gap:10px; }
html body .control-results-grid .tile { display:grid; grid-template-columns:106px minmax(0,1fr); grid-template-rows:96px; width:100%; min-width:0; margin:0; border-radius:10px; }
html body .control-results-grid .art { grid-column:1; grid-row:1; height:96px; }
html body .control-results-grid .tile .name { grid-column:2; grid-row:1; align-self:center; padding:10px 12px; }
@media(max-width:1100px) { html body .geometry-hero-art { width:205px; right:145px; opacity:.72; } html body .control-finder { grid-template-columns:1fr; gap:12px; } }
@media(max-width:900px) { html body .geometry-hero-art { display:none; } }
@media(max-width:560px) { html body .control-finder { margin:12px 0 22px; padding:13px; gap:11px; } html body .control-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } html body .control-option { min-height:48px; padding:7px; gap:6px; font-size:11px; } html body .control-option-icon { flex-basis:27px; width:27px; height:27px; } }
@media(prefers-reduced-motion:reduce) { html body .control-option { transition:none; } html body .control-option:hover,html body .control-option:focus-visible { transform:none; } }
/* Tablet QA: keep header actions compact and make the category rail discoverable. */
@media (min-width:561px) and (max-width:1024px) {
  html body .top { gap:10px; padding-inline:12px; }
  html body .brand { font-size:17px; }
  html body .search { width:min(340px,34vw); }
  html body .top .navbtn, html body .top .language-trigger { white-space:nowrap; word-break:keep-all; flex:0 0 auto; padding:9px 10px; font-size:12px; line-height:1.2; }
}
html body .theme-strip { position:relative; scroll-snap-type:x proximity; overscroll-behavior-inline:contain; padding-right:42px; }
html body .theme-strip::after { content:""; position:sticky; right:0; flex:0 0 22px; align-self:stretch; margin-left:-22px; pointer-events:none; background:linear-gradient(90deg,transparent,#f3f6fc); }
html body .theme-card { scroll-snap-align:start; }
@media (min-width:561px) and (max-width:900px) {
  html body .theme-strip { padding-bottom:21px; }
  html body .theme-strip::before { content:"← 左右滑动浏览分类"; position:absolute; right:8px; bottom:1px; z-index:2; color:#5b6d91; font-size:10px; line-height:16px; pointer-events:none; }
}

html:lang(en) body .theme-strip::before { content:"← Swipe to browse categories"; }