:root{
    --glass: rgba(255,255,255,.145);
    --glass-border: rgba(255,255,255,.28);
    --text: rgba(255,255,255,.96);
    --muted: rgba(255,255,255,.68);
    --shadow: 0 16px 44px rgba(0,0,0,.18);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101511;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue",Arial,sans-serif}
  body{overscroll-behavior:none;touch-action:none}
  button{font:inherit;color:inherit}
  #app{position:fixed;inset:0;width:100vw;height:100dvh;overflow:hidden;background:#101511;isolation:isolate}
  #viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab}
  #viewport.dragging{cursor:grabbing}
  #track{height:100%;display:flex;will-change:transform;transform:translate3d(0,0,0)}
  .farm-slide{position:relative;flex:0 0 100vw;height:100%;overflow:hidden;background:#111}
  .farm-media{position:absolute;inset:-12px;overflow:hidden;background:#111}
  .farm-media picture{position:absolute;inset:0;display:block;width:100%;height:100%}
  .farm-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.01);will-change:transform,filter;backface-visibility:hidden}
  .farm-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.00) 35%,rgba(0,0,0,.08) 58%,rgba(5,10,7,.48) 100%);will-change:opacity}
  .farm-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 43%,transparent 0 38%,rgba(0,0,0,.03) 64%,rgba(0,0,0,.23) 118%)}

  .hotspot{touch-action:manipulation;position:absolute;width:78px;height:78px;margin:-39px 0 0 -39px;border:0;background:transparent;padding:0;display:grid;place-items:center;z-index:5;cursor:pointer;will-change:opacity,transform;outline:none}
  .hotspot::before,.hotspot::after{content:"";position:absolute;border-radius:50%;inset:18px;border:1px solid rgba(255,255,255,.88);box-shadow:0 0 26px rgba(255,255,255,.12)}
  .hotspot::after{inset:9px;border-color:rgba(255,255,255,.46);animation:pulse 2.25s cubic-bezier(.2,.7,.2,1) infinite}
  .hotspot .dot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 16px rgba(255,255,255,.85)}
  .hotspot .label{position:absolute;top:66px;white-space:nowrap;font-size:9px;letter-spacing:.22em;font-weight:600;color:rgba(255,255,255,.78);text-shadow:0 1px 10px rgba(0,0,0,.35)}
  @keyframes pulse{0%{transform:scale(.74);opacity:.05}35%{opacity:.68}100%{transform:scale(1.48);opacity:0}}

  #uiLayer{position:absolute;inset:0;pointer-events:none;z-index:8}
  .farm-ui{position:absolute;inset:0;pointer-events:none;will-change:opacity,transform}
  .farm-copy{position:absolute;left:max(22px,calc(env(safe-area-inset-left) + 18px));right:22px;bottom:calc(env(safe-area-inset-bottom) + 228px);text-shadow:0 2px 20px rgba(0,0,0,.28)}
  .farm-kicker{font-size:10px;letter-spacing:.24em;font-weight:600;color:rgba(255,255,255,.62);margin-bottom:6px;text-transform:uppercase}
  .farm-name{font-family:Georgia,"Songti SC",serif;font-size:clamp(27px,7vw,38px);font-weight:400;letter-spacing:.035em;line-height:1.06}
  .farm-sub{font-size:11px;letter-spacing:.10em;color:rgba(255,255,255,.66);margin-top:7px}
  .product-grid{position:absolute;left:max(18px,calc(env(safe-area-inset-left) + 14px));right:max(18px,calc(env(safe-area-inset-right) + 14px));bottom:calc(env(safe-area-inset-bottom) + 20px);display:grid;grid-template-columns:1fr 1fr;gap:9px;max-width:520px;margin:0 auto}
  .product-card{height:92px;border-radius:13px;border:1px solid rgba(255,255,255,.30);background:linear-gradient(135deg,rgba(255,255,255,.29),rgba(255,255,255,.17));box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);display:flex;align-items:center;gap:16px;padding:12px 14px;overflow:hidden;will-change:opacity,transform}
  .product-icon{width:44px;height:44px;flex:0 0 44px;color:rgba(255,255,255,.96);opacity:.98}
  .product-icon svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
  .product-text{min-width:0}
  .product-cn{font-size:14px;font-weight:520;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .product-en{font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.59);margin-top:5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  #fullscreenBtn{position:absolute;z-index:30;right:max(15px,calc(env(safe-area-inset-right) + 12px));top:max(14px,calc(env(safe-area-inset-top) + 10px));width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(10,14,11,.18);backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);display:grid;place-items:center;box-shadow:0 9px 28px rgba(0,0,0,.10);cursor:pointer}
  #fullscreenBtn svg{width:18px;height:18px;fill:none;stroke:white;stroke-width:1.5;stroke-linecap:round;opacity:.88}
  #fullscreenBtn:active{transform:scale(.94)}

  #dragHint{position:absolute;z-index:20;top:max(22px,calc(env(safe-area-inset-top) + 18px));left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.20em;color:rgba(255,255,255,.68);padding:8px 11px;border-radius:999px;background:rgba(8,12,9,.12);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);pointer-events:none;transition:opacity .7s ease;white-space:nowrap}
  #dragHint.hide{opacity:0}

  #transitionVeil{position:absolute;inset:0;z-index:12;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,251,241,.03),rgba(245,238,220,.25));opacity:0;will-change:opacity}

  #toast{position:absolute;z-index:60;left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);transform:translate(-50%,20px);max-width:82vw;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.20);background:rgba(15,19,16,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:11px;line-height:1.45;color:rgba(255,255,255,.88);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;text-align:center}
  #toast.show{opacity:1;transform:translate(-50%,0)}

  #welcome{position:absolute;inset:0;z-index:50;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;background:#f7f4ed;overflow:hidden;will-change:opacity}
  #welcome.active{visibility:visible;pointer-events:auto}
  .welcome-bg,.welcome-wash{display:none}
  .welcome-content{position:relative;z-index:2;text-align:center;padding:28px;width:min(90vw,520px);transform:translateY(12px);opacity:0;color:#1f281f}
  .welcome-kicker{font-size:10px;letter-spacing:.32em;color:rgba(31,40,31,.48);margin-bottom:14px}
  .welcome-title{font-family:Georgia,"Songti SC",serif;font-size:clamp(34px,9vw,54px);font-weight:400;line-height:1.15;letter-spacing:.035em;color:#1f281f}
  .welcome-sub{margin-top:13px;font-size:11px;letter-spacing:.14em;color:rgba(31,40,31,.52)}
  #backBtn{position:absolute;z-index:3;left:max(15px,calc(env(safe-area-inset-left) + 12px));top:max(14px,calc(env(safe-area-inset-top) + 10px));height:42px;padding:0 14px;border-radius:12px;border:1px solid rgba(31,40,31,.12);background:rgba(255,255,255,.50);color:#263026;backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);font-size:11px;letter-spacing:.08em;cursor:pointer}

  #app.entering #fullscreenBtn,#app.entering #dragHint{opacity:0;pointer-events:none}
  #app.entering .farm-ui{pointer-events:none}

  @media (min-width:760px){
    #app{max-width:520px;left:50%;transform:translateX(-50%);box-shadow:0 0 80px rgba(0,0,0,.35)}
    .farm-slide{flex-basis:min(100vw,520px)}
    #track{width:auto}
  }
  @media (prefers-reduced-motion:reduce){.hotspot::after{animation-duration:4s}}

  [hidden]{display:none!important}
  .farm-media{contain:paint}
  .farm-slide,.farm-media,.farm-media picture,.farm-media img{user-select:none;-webkit-user-select:none}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .product-card{background:rgba(58,68,57,.72)}
    #fullscreenBtn,#dragHint,#toast,#backBtn{background:rgba(30,38,31,.78)}
  }
  @media (display-mode:standalone){#fullscreenBtn{display:none}}