/* =========================================================
   Mobile Intro Site (single page)
   - Dark / minimal / smooth interactions
   - No framework, no build step
   ========================================================= */

:root{
  --bg: #0b0e14;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.09);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.64);
  --faint: rgba(255,255,255,.40);
  --line: rgba(255,255,255,.12);
  --accent: #69b3ff;
  --accent2: #a59bff;
  --good: #57e39d;

  --radius: 18px;
  --radius2: 26px;
  --shadow: 0 16px 40px rgba(0,0,0,.35);
  --shadow2: 0 24px 60px rgba(0,0,0,.5);

  --container: 560px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --ease: cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Pretendard Variable, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

a{color:inherit}
b{font-weight:720}
::selection{background: rgba(105,179,255,.25)}

.container{
  width:min(var(--container), calc(100% - 32px));
  margin:0 auto;
}

.section{
  padding: 96px 0;
  position:relative;
}
.section.hero{
  padding-top: calc(92px + var(--safe-top));
  padding-bottom: 72px;
}

.section__head{
  margin-bottom: 22px;
}
.section__subhead{
  margin-top: 30px;
  margin-bottom: 14px;
}

.eyebrow{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before{
  content:"";
  width: 14px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 10px;
}

.h2{
  margin: 10px 0 10px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.h3{
  margin: 0 0 6px;
  font-size: 18px;
  line-height:1.2;
  letter-spacing: -.01em;
}
.lead{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.muted{color:var(--muted)}
.link{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(105,179,255,.35);
}
.link:active{opacity:.75}

/* Background layers */
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
.bg__grid{
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity:.14;
  mask-image: radial-gradient(ellipse at 50% 15%, black 20%, transparent 70%);
}
.bg__noise{
  position:absolute;
  inset:0;
  opacity:.28;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.06) 0 2px, transparent 2px 100%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.04) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 40% 70%, rgba(255,255,255,.03) 0 1px, transparent 1px 100%);
  background-size: 180px 180px, 140px 140px, 120px 120px;
  filter: blur(.1px);
  mix-blend-mode: overlay;
}
.bg__blob{
  position:absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  filter: blur(50px);
  opacity: .55;
}
.bg__blob--a{
  left: -160px;
  top: -110px;
  background: radial-gradient(circle at 30% 30%, rgba(105,179,255,.55), transparent 60%);
}
.bg__blob--b{
  right: -200px;
  bottom: -160px;
  background: radial-gradient(circle at 40% 40%, rgba(165,155,255,.50), transparent 60%);
}

/* Topbar */
.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  padding-top: var(--safe-top);
  z-index: 30;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.topbar > *{
  pointer-events:auto;
}
.topbar::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(11,14,20,.92), rgba(11,14,20,.20));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index:-1;
}
.topbar .container{
  width:min(var(--container), calc(100% - 20px));
}

.brand{
  position:absolute;
  left: 10px;
  top: calc(10px + var(--safe-top));
  display:flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
  padding: 10px 10px;
  border-radius: 14px;
}
.brand:active{transform: translateY(1px)}
.brand__mark{
  width: 40px;
  height: 40px;
  display:grid;
  place-items:center;
  font-weight:800;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}
.brand__text{display:flex; flex-direction:column; line-height:1}
.brand__title{font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);}
.brand__sub{font-size: 12px; margin-top: 3px; color: rgba(255,255,255,.82);}

.iconbtn{
  position:absolute;
  right: 10px;
  top: calc(10px + var(--safe-top));
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  display:grid;
  place-items:center;
  padding:0;
  color:inherit;
}
.iconbtn:active{transform: translateY(1px); opacity:.9}
.iconbtn__bars{
  width: 18px; height: 12px;
  display:block;
  position:relative;
}
.iconbtn__bars::before,
.iconbtn__bars::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius: 2px;
  background: rgba(255,255,255,.86);
}
.iconbtn__bars::before{top:0}
.iconbtn__bars::after{bottom:0}
.iconbtn__x{
  width: 16px; height: 16px;
  display:block;
  position:relative;
}
.iconbtn__x::before,
.iconbtn__x::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.86);
}
.iconbtn__x::before{transform: rotate(45deg)}
.iconbtn__x::after{transform: rotate(-45deg)}

/* Menu */
.menu{
  position:fixed;
  inset:0;
  z-index: 60;
  display:none;
}
.menu.is-open{display:block}
.menu::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.menu__panel{
  position:absolute;
  left: 10px;
  right: 10px;
  top: calc(12px + var(--safe-top));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(11,14,20,.92);
  box-shadow: var(--shadow2);
  padding: 14px;
}
.menu__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}
.menu__title{
  font-weight:800;
  letter-spacing: -.02em;
}
.menu__link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-decoration:none;
  padding: 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  margin-top: 10px;
}
.menu__link::after{
  content:"↗";
  color: var(--faint);
}
.menu__link:active{
  transform: translateY(1px);
  background: rgba(255,255,255,.06);
}
.menu__meta{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Hero */
.hero__kicker{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero__title{
  margin: 10px 0 10px;
  letter-spacing: -.04em;
}
.hero__titleTop{
  display:block;
  font-size: 28px;
  color: rgba(255,255,255,.86);
}
.hero__titleMain{
  display:block;
  font-size: 34px;
  line-height: 1.03;
  background: linear-gradient(90deg, rgba(105,179,255,1), rgba(165,155,255,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 860;
}
.hero__titleBottom{
  display:block;
  font-size: 22px;
  color: rgba(255,255,255,.86);
  margin-top: 6px;
}
.hero__desc{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.hero__cta{
  display:flex;
  gap:10px;
  margin-top: 18px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  text-decoration:none;
  font-weight: 720;
  letter-spacing: -.01em;
  white-space:nowrap;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background: linear-gradient(90deg, rgba(105,179,255,.95), rgba(165,155,255,.95));
  color: rgba(11,14,20,.98);
  border: none;
}
.btn--ghost{
  background: rgba(255,255,255,.05);
}
.hero__card{
  margin-top: 22px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.hero__cardMedia{
  height: 170px;
  background:
    linear-gradient(180deg, rgba(11,14,20,.10), rgba(11,14,20,.85)),
    url("../assets/hero.webp") center/cover no-repeat;
}
.hero__cardContent{
  padding: 14px 14px 16px;
}
.hero__cardTitle{
  font-weight: 820;
  letter-spacing: -.02em;
}
.hero__cardSub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.scrollhint{
  margin-top: 18px;
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--faint);
  user-select:none;
}
.scrollhint__dot{
  width: 22px;
  height: 36px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.18);
  position:relative;
}
.scrollhint__dot::after{
  content:"";
  position:absolute;
  left:0; right:0;
  margin:auto;
  top: 8px;
  width: 4px; height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.65);
  animation: scrollDot 1.6s var(--ease) infinite;
}
.scrollhint__label{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
@keyframes scrollDot{
  0%{transform: translateY(0); opacity:.65}
  60%{transform: translateY(12px); opacity:.35}
  100%{transform: translateY(0); opacity:.65}
}

/* Grids */
.grid2{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}
@media (min-width: 720px){
  .grid2{grid-template-columns: 1fr 1fr}
  .hero__titleTop{font-size: 32px}
  .hero__titleMain{font-size: 44px}
  .hero__titleBottom{font-size: 26px}
}

/* Cards */
.card{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 16px;
  box-shadow: var(--shadow);
}
.card__title{
  font-weight: 860;
  letter-spacing: -.02em;
}
.card__body{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.list--ordered{padding-left: 20px}
.list li{margin: 6px 0}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top: 12px}
.chip{
  display:inline-flex;
  align-items:center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  font-size: 12px;
}

/* Stats */
.stats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.stat{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 14px;
  box-shadow: var(--shadow);
}
.stat__value{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height:1;
  background: linear-gradient(90deg, rgba(105,179,255,1), rgba(165,155,255,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.86);
  font-weight: 760;
}
.stat__desc{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.callout{
  margin-top: 14px;
  border-radius: var(--radius2);
  border: 1px solid rgba(105,179,255,.25);
  background: linear-gradient(180deg, rgba(105,179,255,.10), rgba(255,255,255,.03));
  padding: 16px;
}
.callout__title{font-weight: 860; letter-spacing: -.02em}
.callout__body{margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.7}

/* Case tabs/panel */
.caseTabs{
  display:flex;
  gap: 8px;
  overflow:auto;
  padding-bottom: 4px;
  scrollbar-width:none;
}
.caseTabs::-webkit-scrollbar{display:none}
.caseTab{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.84);
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 720;
  letter-spacing: -.01em;
  white-space:nowrap;
}
.caseTab:active{transform: translateY(1px)}
.caseTab.is-active{
  border-color: rgba(105,179,255,.40);
  background: rgba(105,179,255,.12);
  color: rgba(255,255,255,.92);
}
.casePanel{
  margin-top: 12px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.caseCard{
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.caseCard__title{
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: 18px;
}
.caseCard__body{
  margin:0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.caseCard__meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.pill{
  display:inline-flex;
  align-items:center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.80);
  font-size: 12px;
}
.caseCard__thumb{
  height: 150px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  position:relative;
}
.caseCard__thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(11,14,20,.02), rgba(11,14,20,.88));
}
.caseCard__thumb.is-welstory{background: url("../assets/welstory.webp") center/cover no-repeat}
.caseCard__thumb.is-robot{background: url("../assets/robot.webp") center/cover no-repeat}
.caseCard__thumb.is-process{background: url("../assets/process.webp") center/cover no-repeat}
.hint{
  margin-top: 10px;
  color: var(--faint);
  font-size: 12px;
}

/* Horizontal capabilities scroll */
.hScroll{
  display:flex;
  gap: 12px;
  overflow:auto;
  padding: 4px 2px 8px;
  margin-top: 14px;
  scrollbar-width:none;
}
.hScroll::-webkit-scrollbar{display:none}
.capCard{
  min-width: 240px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 14px;
  box-shadow: var(--shadow);
}
.capCard__icon{font-size: 20px}
.capCard__title{
  margin-top: 10px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.capCard__body{
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

/* Media */
.mediaRow{
  margin-top: 14px;
  display:grid;
  gap: 12px;
}
.media{
  height: 180px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.media--a{
  background:
    linear-gradient(180deg, rgba(11,14,20,.08), rgba(11,14,20,.88)),
    url("../assets/areas.webp") center/cover no-repeat;
}
.media--b{
  background:
    linear-gradient(180deg, rgba(11,14,20,.08), rgba(11,14,20,.88)),
    url("../assets/method.webp") center/cover no-repeat;
}
@media (min-width: 720px){
  .mediaRow{grid-template-columns: 1fr 1fr}
  .media{height: 240px}
}

/* Timeline */
.timeline{
  margin-top: 16px;
  position:relative;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.timeline__rail{
  position:absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  height: 1px;
  background: rgba(255,255,255,.10);
}
.timeline__items{
  display:flex;
  gap: 10px;
  padding: 16px;
  overflow:auto;
  scroll-snap-type: x mandatory;
  scrollbar-width:none;
}
.timeline__items::-webkit-scrollbar{display:none}
.step{
  min-width: 150px;
  scroll-snap-align: start;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 12px;
  box-shadow: var(--shadow);
  position:relative;
}
.step::before{
  content:"";
  position:absolute;
  left: 14px;
  top: -6px;
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: rgba(105,179,255,.9);
  box-shadow: 0 0 0 4px rgba(105,179,255,.15);
}
.step__kicker{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.step__title{
  margin-top: 8px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.step__desc{
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.note{
  margin-top: 12px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 16px;
  box-shadow: var(--shadow);
}
.note__title{font-weight: 900}
.note__body{margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.7}

/* Filters + accordion */
.filters{
  display:flex;
  gap: 8px;
  overflow:auto;
  padding-bottom: 4px;
  scrollbar-width:none;
}
.filters::-webkit-scrollbar{display:none}
.fbtn{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.84);
  font-weight: 720;
  white-space:nowrap;
}
.fbtn:active{transform: translateY(1px)}
.fbtn.is-active{
  border-color: rgba(105,179,255,.40);
  background: rgba(105,179,255,.12);
}
.accordion{margin-top: 12px; display:flex; flex-direction:column; gap:10px}
details{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
summary::-webkit-details-marker{display:none}
.sum__year{
  min-width: 54px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  display:grid;
  place-items:center;
  font-size: 12px;
  color: rgba(255,255,255,.80);
  margin-top: 2px;
}
.sum__title{
  font-weight: 880;
  letter-spacing: -.02em;
}
.sum__sub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.detailsBody{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

/* Gallery */
.gallery{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.gallery__item{
  height: 130px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  background-size: cover;
  background-position:center;
  overflow:hidden;
  position:relative;
}
.gallery__item::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(11,14,20,.00), rgba(11,14,20,.70));
}
.gallery__item--welstory{background-image: url("../assets/welstory.webp")}
.gallery__item--robot{background-image: url("../assets/robot.webp")}
.gallery__item--tractor{background-image: url("../assets/tractor.webp")}
.gallery__item--coldchain{background-image: url("../assets/coldchain.webp")}
.gallery__item--vision{background-image: url("../assets/vision_ai.webp")}
.gallery__item:active{transform: translateY(1px); opacity:.92}
@media (min-width: 720px){
  .gallery{grid-template-columns: repeat(3, 1fr)}
  .gallery__item{height: 160px}
}

/* Footer */
.footer{
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:space-between;
  gap: 12px;
  color: var(--faint);
  font-size: 12px;
  padding-bottom: calc(20px + var(--safe-bottom));
}

/* Floating quick nav (dots) */
.quicknav{
  position:fixed;
  right: 10px;
  bottom: calc(16px + var(--safe-bottom));
  display:flex;
  flex-direction:column;
  gap: 10px;
  z-index: 25;
}
.quicknav__btn{
  width: 10px;
  height: 10px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  padding:0;
}
.quicknav__btn.is-active{
  background: rgba(105,179,255,.85);
  border-color: rgba(105,179,255,.95);
  box-shadow: 0 0 0 5px rgba(105,179,255,.15);
}
.quicknav__btn:active{transform: scale(.95)}

/* Bottom sheet */
.sheet{
  position:fixed;
  inset:0;
  z-index: 80;
  display:none;
}
.sheet.is-open{display:block}
.sheet__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sheet__panel{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: calc(10px + var(--safe-bottom));
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,14,20,.95);
  box-shadow: var(--shadow2);
  overflow:hidden;
  transform: translateY(14px);
  animation: sheetIn .22s var(--ease) forwards;
}
@keyframes sheetIn{
  to{transform: translateY(0)}
}
.sheet__grab{
  height: 18px;
  position:relative;
}
.sheet__grab::before{
  content:"";
  position:absolute;
  left:0; right:0; top: 8px;
  margin:auto;
  width: 44px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.18);
}
.sheet__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 0 14px 10px;
}
.sheet__title{
  font-weight: 900;
  letter-spacing: -.02em;
}
.sheet__body{
  padding: 0 14px 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.sheet__body img{
  width:100%;
  height:auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  margin: 10px 0;
}

/* Reveal animation */
.reveal{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .scrollhint__dot::after{animation:none}
  .reveal{transition:none}
  .sheet__panel{animation:none; transform:none}
}