:root {
  color-scheme: light;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-synthesis: none;
  --page:#f8f7f5; --surface:#fff; --ink:#17262d; --muted:#646b70;
  --line:#e4e2e0; --accent:#843e36; --rose:#a84b60; --rose-bg:#fbe8ee;
  --teal:#286f79; --teal-bg:#e4f0f2; --amber:#8b5535; --amber-bg:#f9ecdf;
  --green:#2e6450; --green-bg:#e5f0e9; --violet:#67518b; --violet-bg:#eee9f8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--page);color:var(--ink);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{cursor:pointer;color:inherit;background:none;border:0}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #95564b;outline-offset:4px}
svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:inherit}
::selection{background:#f2ced9;color:#30232a}
.skip{position:fixed;top:-90px;left:16px;z-index:100;background:var(--surface);padding:12px 20px;border-radius:8px}
.skip:focus{top:12px}
.topbar{height:72px;border-bottom:1px solid var(--line);background:color-mix(in srgb,#fff 94%,transparent);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}
.header-inner{height:100%;width:calc(100% - 96px);max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:13px;font-weight:720;font-size:24px;letter-spacing:-.6px}
.brand img{width:32px;height:32px}
.nav{display:flex;align-items:center;gap:28px;height:100%}
.nav a{height:100%;display:flex;align-items:center;padding:0 3px;font-size:14px;position:relative;color:var(--muted)}
.nav a.active{color:var(--accent);font-weight:600}
.nav a.active:after{content:"";height:2px;position:absolute;bottom:10px;left:3px;right:3px;background:var(--accent);border-radius:1px}
.nav a:hover{color:var(--accent)}
.wrap{width:calc(100% - 96px);max-width:1280px;margin:auto;padding-bottom:28px}
.intro{padding:36px 0 28px}
.intro h1{font-size:clamp(32px,3.5vw,46px);font-weight:700;line-height:1.3;letter-spacing:-.045em}
.intro p{margin-top:9px;font-size:16px;line-height:1.8;color:var(--muted)}
.featured{margin-bottom:32px}
.featured>h2{font-size:23px;font-weight:650;margin-bottom:19px;letter-spacing:-.025em}
.featured-grid{display:grid;grid-template-columns:1fr;gap:18px}
.featured-grid.has-navi{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}
.navi-feature{position:relative;min-height:354px;border:1px solid #ebdce0;border-radius:20px;background:linear-gradient(142deg,#fffbfc 3%,#fae9ef 58%,#fffafa);box-shadow:0 5px 18px #3c253607;isolation:isolate;display:flex;align-items:center}
.navi-feature:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,transparent 45%,#ffffff4d 45%,#ffffff40 61%,transparent 61%);z-index:-1}
.navi-copy{padding:30px 36px;position:relative;z-index:2;max-width:56%}
.feature-tag{font-size:12px;font-weight:500;line-height:1.4;padding:4px 9px;display:inline-flex;border-radius:7px;white-space:nowrap}
.rose{color:var(--rose);background:var(--rose-bg)}
.teal{color:var(--teal);background:var(--teal-bg)}
.amber{color:var(--amber);background:var(--amber-bg)}
.green{color:var(--green);background:var(--green-bg)}
.violet{color:var(--violet);background:var(--violet-bg)}
.blue{color:#3b5f8f;background:#e6edf8}
.neutral{color:#52616a;background:#edf0f2}
.navi-copy h3{font-size:clamp(26px,2.5vw,34px);font-weight:700;line-height:1.3;letter-spacing:-.035em;margin-top:18px}
.navi-copy p{font-size:16px;line-height:1.8;color:#76525d;margin-top:12px}
.navi-details{font-size:14px;color:#76525d;display:block;margin-top:8px;white-space:nowrap}
.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;background:#292c2b;color:#fff;min-height:46px;padding:10px 24px;font-size:14px;font-weight:500;transition:background .2s,transform .2s,box-shadow .2s}
.primary-button svg{width:18px;height:18px}
.navi-copy .primary-button{margin-top:32px}
.navi-feature:hover .primary-button{background:#424440;box-shadow:0 5px 12px #27252515}
.navi-portrait{position:absolute;width:45%;right:18px;bottom:22px;height:calc(100% + 28px);display:flex;align-items:flex-end;justify-content:center;pointer-events:none;z-index:1}
.navi-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 5px #71414d12);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.navi-feature:hover .navi-portrait img{transform:translateY(-4px)}
.navi-spark{position:absolute;color:#dda55e;pointer-events:none;font-size:26px;line-height:1;z-index:0}
.spark-one{right:26px;top:31px}
.spark-two{right:14px;bottom:42px;font-size:18px;opacity:.7}
.secondary-features{display:grid;gap:16px;grid-template-columns:1fr}
.secondary-feature{position:relative;min-height:169px;border:1px solid var(--line);border-radius:18px;padding:21px 22px;overflow:hidden;box-shadow:0 4px 12px #35373805}
.lab-feature{display:flex;align-items:center;background:linear-gradient(125deg,#f7fcfc,#edf5f6)}
.game-feature{background:linear-gradient(130deg,#fffcf6,#faf2e7)}
.secondary-copy{position:relative;z-index:2;max-width:61%;min-width:0}
.secondary-copy h3{font-size:21px;line-height:1.35;font-weight:650;letter-spacing:-.03em;margin:10px 0 3px}
.secondary-copy>p{font-size:14px;color:var(--muted);line-height:1.6;white-space:nowrap}
.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:7px 13px;background:var(--surface);border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:500;line-height:1.5;white-space:nowrap;box-shadow:0 2px 5px #26313804;transition:background .2s,border-color .2s,transform .2s}
.secondary-button svg{width:16px;height:16px}
.secondary-button:hover{background:#f4f4f1;border-color:#cac5c2}
.lab-feature .secondary-button{margin-top:15px}
.graph-preview{width:38%;max-width:168px;position:absolute;right:17px;top:50%;transform:translateY(-50%);border-radius:12px;overflow:hidden;box-shadow:0 2px 6px #1b35431a}
.graph-preview>svg{width:100%;height:auto;stroke:none}
.playing-cards{width:37%;max-width:168px;position:absolute;right:6px;top:4px;pointer-events:none}
.playing-cards>svg{width:100%;height:auto;stroke:none}
.game-feature .secondary-copy{max-width:100%}
.game-feature .secondary-copy h3,.game-feature .secondary-copy>p{max-width:63%}
.game-links{display:flex;gap:9px;margin-top:15px;position:relative;z-index:2}
.game-links .secondary-button{flex:1;padding:7px 10px;font-size:13px;min-width:0}
.game-suit{font-family:Georgia,serif;color:#2b5d48;font-size:19px;line-height:1}
.game-suit.diamond{color:#a55347}
.directory{border-top:1px solid #d7d4d2;padding-top:22px;scroll-margin-top:94px}
.directory-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px}
.directory-heading h2{font-size:23px;font-weight:650;line-height:1.4;letter-spacing:-.025em}
.directory-actions{display:flex;align-items:center;gap:14px}
.resource-count{font-size:13px;color:var(--muted);white-space:nowrap}
.view-toggle{display:flex;gap:2px;border:1px solid var(--line);padding:3px;border-radius:9px;background:#ffffff80}
.view-toggle button{width:31px;height:29px;display:grid;place-items:center;border-radius:6px;color:var(--muted)}
.view-toggle svg{width:16px;height:16px}
.view-toggle button[aria-pressed=true]{color:var(--ink);background:#ecebe8}
.directory-tools{display:flex;align-items:center;gap:22px;justify-content:space-between;margin-bottom:17px;min-width:0}
.search-wrap{display:flex;align-items:center;gap:9px;flex:1;max-width:580px;min-width:180px;height:44px;padding:0 13px;border:1px solid var(--line);background:var(--surface);border-radius:10px;color:#767e83}
.search-wrap svg{width:18px;height:18px;flex-shrink:0}
.search-wrap input{width:100%;min-width:0;max-width:100%;height:100%;border:0;outline:none;background:none;font-size:14px;color:var(--ink)}
.search-wrap input::placeholder{color:#737a7e}
.search-wrap:focus-within{border-color:#a77870;box-shadow:0 0 0 2px #a7787010}
.filters{display:flex;gap:8px;align-items:center;flex-shrink:0;max-width:100%;min-width:0;overflow-x:auto;padding:4px 2px;scrollbar-width:none}
.filter{border:1px solid var(--line);border-radius:999px;min-height:40px;padding:7px 13px;font-size:13px;line-height:1.5;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;background:#fff7;color:#626a6e;transition:background .2s,border-color .2s,color .2s}
.filter>span{font-size:12px}
.filter.active{background:#292c2b;border-color:#292c2b;color:#fff}
.filter:hover:not(.active){background:#f1ebe8;border-color:#d7cfc9}
.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.resource-card{display:flex;align-items:center;gap:15px;min-width:0;min-height:92px;padding:16px 20px;border:1px solid var(--line);border-radius:13px;background:#ffffffd9;transition:border-color .2s,box-shadow .2s,transform .2s}
.resource-card:hover{border-color:#cabdb9;box-shadow:0 4px 12px #36303507;transform:translateY(-1px)}
.resource-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;flex-shrink:0}
.resource-icon svg{width:24px;height:24px;stroke-width:1.7}
.resource-icon .suit{font-size:29px;line-height:1;font-family:Georgia,serif}
.resource-copy{display:flex;flex-direction:column;min-width:0;flex:1;gap:3px}
.resource-copy strong{font-size:16px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.resource-description{font-size:14px;line-height:1.6;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resource-category{font-size:12px;line-height:1.4;padding:4px 9px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.resource-arrow{width:17px;height:17px;color:#758087;flex-shrink:0;margin-left:2px}
.resource-grid.list{grid-template-columns:1fr}
.resource-grid.list .resource-card{min-height:80px}
.resource-grid.list .resource-copy{flex-direction:row;gap:30px;align-items:center}
.resource-grid.list .resource-copy strong{width:220px;flex-shrink:0}
.resource-grid.list .resource-description{flex:1}
.empty{grid-column:1/-1;padding:40px 20px;border:1px dashed #d2ccc8;border-radius:14px;text-align:center;background:#fff8}
.empty strong{font-size:17px;font-weight:600}
.empty p{font-size:14px;color:var(--muted);margin:9px 0 20px}
.footer{display:flex;align-items:center;gap:18px;margin-top:27px;font-size:13px;color:#697174;min-height:25px}
.footer-line{height:1px;flex:1;background:var(--line)}
.loading{padding:80px 24px;text-align:center;color:var(--muted)}
.error-state{padding:70px 24px;text-align:center}
.error-state h1{font-size:28px}
.error-state p{margin:12px 0 25px;font-size:16px;color:var(--muted)}
@media(min-width:1680px){.intro{padding-top:42px}.navi-feature{min-height:376px}.secondary-feature{min-height:180px}.navi-copy h3{font-size:36px}.navi-portrait{right:30px}.resource-card{min-height:96px}}
@media(max-width:1180px){.header-inner,.wrap{width:calc(100% - 64px)}.featured-grid.has-navi{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}.navi-copy{padding:25px;max-width:58%}.navi-copy h3{font-size:29px}.navi-copy p{font-size:15px;max-width:250px}.navi-portrait{width:44%;right:6px;bottom:28px;height:calc(100% + 3px)}.secondary-feature{padding:18px}.secondary-copy h3{font-size:19px}.secondary-copy>p{font-size:13px}.graph-preview{right:13px;width:36%}.game-links{gap:6px}.game-links .secondary-button{padding:7px 8px;font-size:12px;gap:5px}.directory-tools{gap:14px}.filter{padding:7px 11px}.resource-card{gap:12px;padding:15px}.resource-category{padding:4px 7px}}
@media(max-width:900px){.featured-grid.has-navi{grid-template-columns:1fr}.navi-feature{min-height:295px}.navi-copy{padding:30px;max-width:60%}.navi-copy h3{font-size:32px}.navi-copy p{max-width:none}.navi-portrait{height:calc(100% + 24px);width:38%;right:50px;bottom:16px}.secondary-features{grid-template-columns:1fr 1fr;gap:14px}.secondary-feature{min-height:169px}.secondary-copy h3{font-size:19px}.graph-preview{width:35%;right:10px}.secondary-copy{max-width:66%}.playing-cards{right:1px;width:36%;top:12px}.game-links .secondary-button{padding:7px 9px;font-size:12px}.directory-tools{flex-wrap:wrap;gap:10px}.search-wrap{max-width:none;flex-basis:100%}.filters{flex-shrink:1}.resource-card{gap:10px;padding:14px}.resource-copy strong{font-size:15px}.resource-description{font-size:13px}.resource-icon{width:41px;height:41px}.resource-category{font-size:11px}.resource-grid.list .resource-copy{flex-direction:column;align-items:flex-start;gap:3px}.resource-grid.list .resource-copy strong{width:auto;flex-shrink:1}}
@media(max-width:620px){
  html{scroll-padding-top:82px}
  .topbar{height:64px}
  .header-inner,.wrap{width:calc(100% - 32px)}
  .brand{font-size:21px;gap:10px}.brand img{width:29px;height:29px}
  .nav{gap:22px}.nav a{font-size:14px;padding:0 1px}.nav a.active:after{bottom:9px}
  .intro{padding:24px 0 22px}.intro h1{font-size:30px;letter-spacing:-.045em}.intro p{font-size:14px;margin-top:7px;line-height:1.7}
  .featured{margin-bottom:24px}.featured>h2{display:none}
  .featured-grid.has-navi{gap:12px}
  .navi-feature{min-height:222px;border-radius:16px;overflow:hidden}
  .navi-copy{padding:20px 17px;max-width:62%}
  .feature-tag{font-size:12px;padding:3px 8px;border-radius:6px}
  .navi-copy h3{font-size:23px;line-height:1.35;margin-top:13px;white-space:nowrap;letter-spacing:-.045em}
  .navi-copy p{font-size:13px;line-height:1.65;margin-top:7px;max-width:170px}
  .navi-details{font-size:12px;margin-top:6px}
  .navi-copy .primary-button{min-height:40px;padding:7px 17px;font-size:13px;margin-top:17px;gap:9px}
  .navi-portrait{width:44%;right:3px;bottom:10px;height:calc(100% - 16px)}
  .navi-spark{display:none}
  .secondary-features{grid-template-columns:1fr;gap:12px}
  .secondary-feature{border-radius:15px;padding:17px;min-height:133px}
  .secondary-copy{max-width:62%}
  .secondary-copy h3{font-size:20px;line-height:1.3;margin-top:7px}
  .secondary-copy>p{font-size:13px}
  .secondary-button{min-height:36px;padding:6px 12px;font-size:12px;gap:7px}
  .lab-feature .secondary-button{margin-top:11px}
  .graph-preview{width:38%;right:13px;max-width:150px;border-radius:9px}
  .game-feature{min-height:141px}
  .playing-cards{width:36%;right:4px;top:3px}
  .game-feature .secondary-copy h3,.game-feature .secondary-copy>p{max-width:64%}
  .game-links{margin-top:12px;gap:9px}
  .game-links .secondary-button{font-size:12px;min-height:37px;gap:7px;padding:6px 10px}
  .game-suit{font-size:18px}
  .directory{padding-top:20px;scroll-margin-top:80px}
  .directory-heading{margin-bottom:10px}.directory-heading h2{font-size:22px}
  .directory-actions{gap:8px}.resource-count{font-size:12px}
  .view-toggle{padding:2px;border-radius:7px}.view-toggle button{width:27px;height:28px}
  .view-toggle svg{width:15px;height:15px}
  .directory-tools{gap:9px;margin-bottom:11px}
  .search-wrap{height:42px;padding:0 11px;border-radius:9px}
  .search-wrap input{font-size:13px}
  .filters{gap:6px;padding:4px 2px}
  .filter{font-size:12px;min-height:36px;padding:6px 10px;gap:5px}
  .filter>span{font-size:11px}
  .resource-grid{grid-template-columns:1fr;gap:9px}
  .resource-card{min-height:83px;gap:11px;padding:12px;border-radius:11px}
  .resource-icon{width:39px;height:39px;border-radius:10px}
  .resource-icon svg{width:21px;height:21px}
  .resource-icon .suit{font-size:25px}
  .resource-copy strong{font-size:15px;line-height:1.45}
  .resource-description{font-size:12.5px;line-height:1.6}
  .resource-category{font-size:11px;padding:4px 7px}
  .resource-arrow{width:15px;height:15px;margin-left:0}
  .resource-grid.list .resource-card{min-height:78px}
  .footer{font-size:12px;margin-top:23px;gap:12px}
  .empty{padding:32px 15px}
}
@media(max-width:620px){
  .navi-copy p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .navi-copy .primary-button{display:flex;width:max-content}
  .navi-portrait{width:49%;right:3px}
  .navi-portrait img{object-position:center center}
  .secondary-feature{padding-top:13px;padding-bottom:13px}
  .secondary-copy>.feature-tag{display:flex;width:max-content}
  .lab-feature .secondary-button{display:flex;width:max-content;margin-top:9px}
  .secondary-copy h3{margin-top:5px}
}
@media(max-width:360px){.nav{gap:15px}.header-inner,.wrap{width:calc(100% - 28px)}.navi-copy{padding:18px 14px}.navi-copy h3{font-size:21px}.navi-copy p{max-width:158px;font-size:12.5px}.navi-portrait{width:46%;right:0}.secondary-feature{padding:13px 15px}.resource-card{gap:9px;padding:11px}.resource-copy strong{font-size:14px}.resource-description{font-size:12px}.resource-category{font-size:10px;padding:4px 6px}.resource-icon{width:36px;height:36px}.filter{padding:6px 9px;gap:4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
.food-feature{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:30px;position:relative;overflow:hidden;margin-bottom:20px;min-height:290px;padding:30px 38px;border:1px solid #dce5d8;border-radius:20px;background:linear-gradient(118deg,#f9fcf6,#edf4e7 72%,#e5eedc);box-shadow:0 5px 18px #25423506;isolation:isolate}.food-feature-copy{align-self:center;position:relative;z-index:2}.food-feature-copy h3{font-size:clamp(28px,3vw,38px);font-weight:680;letter-spacing:-.04em;line-height:1.35;margin-top:12px;color:#264936}.food-feature-copy p{font-size:15px;color:#62765a;line-height:1.8;margin-top:9px;max-width:380px}.food-feature-meta{display:block;font-size:12px;color:#86937b;margin-top:9px}.food-feature-copy .primary-button{margin-top:22px;background:#285d44;min-height:46px}.food-feature:hover .primary-button{background:#1c4934}.food-feature-photos{position:relative;min-height:230px;align-self:stretch}.food-feature-photos img{position:absolute;object-fit:cover;border:5px solid #fffffff2;box-shadow:0 10px 25px #3b4d3020;border-radius:18px}.food-main-photo{height:235px;width:68%;left:3%;top:3%;transform:rotate(-6deg)}.food-side-photo{height:145px;width:47%;right:0;top:-8px;transform:rotate(7deg)}.food-small-photo{height:120px;width:41%;right:0;bottom:-10px;transform:rotate(-3deg)}
@media(max-width:900px){.food-feature{padding:25px;gap:20px;min-height:280px}.food-feature-photos{min-height:220px}.food-main-photo{height:210px;width:80%;left:-6%}.food-side-photo{height:130px;width:53%;right:-5%}.food-small-photo{height:105px;width:48%;right:-7%;bottom:0}.food-feature-copy p{font-size:14px}}
@media(max-width:600px){.food-feature{grid-template-columns:1fr;gap:24px;padding:25px 23px}.food-feature-copy{max-width:100%}.food-feature-copy h3{font-size:31px}.food-feature-copy p{max-width:100%;font-size:14px}.food-feature-photos{min-height:205px;width:100%;max-width:360px;margin:0 auto}.food-main-photo{height:195px;width:66%;left:2%;top:0}.food-side-photo{height:120px;width:44%;right:0;top:0}.food-small-photo{height:105px;width:41%;right:1%;bottom:0}.food-feature-copy .primary-button{margin-top:18px}}
