/* =========================================================================
   Emberline — demo restaurant site
   Warm bone paper, charcoal ink, ember accent. Deliberately nothing like
   carterlong.net: this has to look like a different studio built it.
   ========================================================================= */

:root{
  --bone:#f4efe4;
  --bone-2:#ebe3d4;
  --bone-3:#ddd1bd;
  --char:#171310;      /* near-black, warm */
  --char-2:#241d18;
  --ink:#2b231d;
  --ash:#6d6053;       /* secondary text, 4.9:1 on --bone */
  --ember:#bf4319;
  --ember-lit:#e8763a;
  --gold:#a8802f;
  --line:#d8ccb8;
  --line-dark:#3a2f27;

  --wrap:1200px;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:Karla,system-ui,-apple-system,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;

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

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.04;letter-spacing:-.005em}
p{margin:0 0 1.1rem}
p:last-child{margin-bottom:0}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}
[hidden]{display:none !important}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.6rem}
.wrap.narrow{max-width:820px}
.section{padding:6rem 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;background:var(--ember);color:#fff;padding:.7rem 1.1rem;z-index:100}
.skip:focus{left:0;top:0}

.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.ember{color:var(--ember)}

/* ---------- cross-document view transitions ----------
   The whole site is two pages. Rather than a white flash between them, the
   browser cross-fades and lifts the content, and the wordmark stays put
   because it carries its own transition name. Browsers without support
   navigate normally and lose nothing. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .26s ease both}
::view-transition-new(root){animation:vt-in .40s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
/* Header only. The footer carries .brand too, and a view-transition-name has
   to be unique among rendered elements: two of them and the browser abandons
   the transition altogether. */
.site-header .brand{view-transition-name:brand}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(244,239,228,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:1.6rem;min-height:74px}
.brand{font-family:var(--serif);font-size:1.6rem;text-decoration:none;letter-spacing:-.01em;margin-right:auto;
  display:flex;align-items:center;gap:.6rem}
/* The mark. Anchored at its base so the flicker pivots like a real flame
   rather than wobbling around its centre. */
.flame{width:23px;height:23px;flex:0 0 auto;transform-origin:50% 88%;
  animation:flicker 3.6s ease-in-out infinite}
@keyframes flicker{
  0%,100%{transform:scale(1,1) rotate(0deg);opacity:1}
  28%{transform:scale(1.05,.96) rotate(-1.6deg);opacity:.93}
  54%{transform:scale(.96,1.06) rotate(1.4deg);opacity:1}
  76%{transform:scale(1.03,.99) rotate(-.5deg);opacity:.96}
}
.site-footer .flame{width:20px;height:20px}
.nav{display:flex;gap:1.7rem;align-items:center}
.nav a:not(.btn){text-decoration:none;color:var(--ash);font-size:15px;position:relative;padding:.2rem 0}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ember);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav a:not(.btn):hover{color:var(--ink)}
.nav a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
/* :not(.btn) again. The Reserve link carries aria-current on its own page, and
   without this it repaints the pill's label dark-on-dark. */
.nav a:not(.btn)[aria-current=page]{color:var(--ink)}
.nav a:not(.btn)[aria-current=page]::after{transform:scaleX(1)}

/* status pill: computed against opening hours, so it's never stale */
.status{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ash);display:flex;align-items:center;gap:.45rem;white-space:nowrap}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--ash)}
.status.open{color:#2f7d4c}
.status.open .dot{background:#2f7d4c}

.btn{display:inline-block;text-decoration:none;font-family:var(--sans);font-weight:600;font-size:14.5px;
  letter-spacing:.01em;padding:.72rem 1.4rem;border-radius:999px;border:1px solid var(--char);
  background:var(--char);color:var(--bone);transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.btn:hover{background:var(--ember);border-color:var(--ember);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--char)}
.btn.ghost:hover{background:var(--char);color:var(--bone);border-color:var(--char)}
.btn.light{background:var(--bone);color:var(--char);border-color:var(--bone)}
.btn.light:hover{background:var(--ember);border-color:var(--ember);color:#fff}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.btn.block{display:block;width:100%;text-align:center}
.actions{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--char);color:var(--bone);overflow:clip}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.62;
  /* Scroll-driven: the photo drifts and dims as you leave. No JS, and
     browsers without scroll timelines simply show a still image. */
  animation:hero-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
@keyframes hero-drift{
  from{transform:scale(1.12) translateY(-2%)}
  to{transform:scale(1) translateY(4%)}
}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,19,16,.62),rgba(23,19,16,.35) 40%,rgba(23,19,16,.92))}
.hero .wrap{position:relative;z-index:2;padding-top:8rem;padding-bottom:5rem;min-height:82vh;
  display:flex;flex-direction:column;justify-content:flex-end}
.hero h1{font-size:clamp(3.2rem,9vw,7.5rem);line-height:.94;max-width:12ch}
.hero h1 em{font-style:italic;color:var(--ember-lit)}
.hero .kicker{margin-bottom:1.6rem;color:#d9c9ae}
.hero p.lede{max-width:44ch;font-size:19px;color:#ddd0bd;margin:1.8rem 0 0}
.hero .actions{margin-top:2.4rem}

/* type-in rule under the hero */
.rule-row{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.6rem;
  border-top:1px solid rgba(244,239,228,.22);color:#c9bba6}
.rule-row div{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.rule-row b{display:block;font-family:var(--serif);font-size:1.5rem;letter-spacing:0;
  text-transform:none;color:var(--bone);font-weight:400;margin-top:.3rem}

/* ---------- section heads ---------- */
.sechead{margin-bottom:3rem}
.sechead .kicker{color:var(--ember);margin-bottom:1rem}
.sechead h2{font-size:clamp(2.4rem,5.4vw,4rem);max-width:16ch}
.sechead p{max-width:56ch;color:var(--ash);margin-top:1.2rem;font-size:18px}

/* Reveal on scroll.
   This was a CSS scroll-driven animation, which was wrong: a `view()` timeline
   on a page that cannot scroll never advances, so on a tall viewport whole
   sections sat at opacity 0 forever. Gated on .js instead, which only gets set
   once site.js confirms it loaded, so the resting state is always visible. */
.js .rise{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rise.in{opacity:1;transform:none}

/* ---------- story ---------- */
.story{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center}
.story .prose p{color:var(--ash);font-size:18px}
.story .prose p:first-child{font-size:21px;color:var(--ink)}
.story figure{margin:0;position:relative}
.story figure img{border-radius:3px}
.story figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ash);margin-top:.9rem}

/* ---------- menu ---------- */
.menu-band{background:var(--char);color:var(--bone)}
.menu-band .sechead h2{color:var(--bone)}
.menu-band .sechead p{color:#b6a893}
.menu-band .sechead .kicker{color:var(--ember-lit)}

.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.6rem}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line-dark);
  background:transparent;color:#b6a893;transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--ember-lit);color:var(--bone)}
.chip[aria-pressed=true]{background:var(--ember);border-color:var(--ember);color:#fff}

.course{margin-bottom:3.5rem}
.course > h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ember-lit);padding-bottom:.9rem;border-bottom:1px solid var(--line-dark);margin-bottom:.4rem}
.course.is-empty{display:none}

.course-list{list-style:none;padding:0;margin:0}
.dish{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  column-gap:1.15rem;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.07)}
.dish-actions{display:flex;align-items:center;gap:1.1rem}
.thumb{width:66px;height:66px;border-radius:4px;object-fit:cover;background:#241d18;
  transition:transform .4s var(--ease)}
.dish:hover .thumb{transform:scale(1.07)}
.dish-open{background:none;border:0;padding:.15rem 0;text-align:left;color:inherit;
  display:block;width:100%;transition:transform .3s var(--ease)}
.dish-open:hover{transform:translateX(4px)}
.dish-name{font-family:var(--serif);font-size:1.4rem;line-height:1.15;display:block}
.dish-blurb{display:block;color:#a3947f;font-size:14.5px;margin-top:.1rem}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-dark);border-radius:3px;padding:.1rem .32rem;color:#9c8d78;
  vertical-align:middle;margin-left:.45rem}
.price{font-family:var(--mono);font-size:15px;color:var(--bone);white-space:nowrap}

.add{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:.5rem .85rem;border-radius:999px;border:1px solid var(--line-dark);
  background:transparent;color:#b6a893;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.add:hover{background:var(--ember);border-color:var(--ember);color:#fff;transform:translateY(-2px)}
.add[data-added=true]{background:var(--ember);border-color:var(--ember);color:#fff}
.dish-note{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:#7d7061;white-space:nowrap}

/* Tap to open. grid-template-rows 0fr -> 1fr animates to auto height with no
   JS measuring and no fixed max-height guess. */
.dish-detail{grid-column:1/-1;display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease)}
.dish[data-open=true] .dish-detail{grid-template-rows:1fr}
.dish-detail > div{overflow:hidden}
.dish-detail .inner{display:flex;gap:1.6rem;padding:1rem 0 .6rem;align-items:flex-start}
.dish-detail img{width:220px;aspect-ratio:4/3;object-fit:cover;border-radius:3px;flex:0 0 auto}
.dish-detail p{color:#b6a893;font-size:15.5px;margin:0;max-width:52ch}

/* The hover-peek: a photo that trails the cursor across the menu. Desktop
   pointers only; touch and keyboard use the tap-to-open panel above. */
.peek{position:fixed;top:0;left:0;width:250px;aspect-ratio:4/3;pointer-events:none;z-index:60;
  opacity:0;transform:translate3d(-9999px,-9999px,0);transition:opacity .22s ease;
  border-radius:4px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.peek.on{opacity:1}
.peek img{width:100%;height:100%;object-fit:cover}
@media (hover:none),(pointer:coarse){.peek{display:none}}

/* ---------- cart ---------- */
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:.6rem .95rem;color:var(--ink);transition:border-color .2s,background .2s}
.cart-btn:hover{border-color:var(--char)}
.cart-btn .count{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--ember);color:#fff;font-size:11px;line-height:1}
.cart-btn[data-empty=true]{display:none}

.cart-backdrop{position:fixed;inset:0;background:rgba(23,19,16,.55);z-index:89;
  opacity:0;pointer-events:none;transition:opacity .32s ease}
.cart-backdrop[data-open=true]{opacity:1;pointer-events:auto}

/* Kept in the DOM so it can slide rather than appear. visibility, delayed
   until the slide finishes, keeps it out of the tab order when closed; JS also
   sets inert, so this is belt and braces. */
.cart-panel{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:90;
  background:var(--bone);color:var(--ink);display:flex;flex-direction:column;
  transform:translateX(101%);visibility:hidden;
  transition:transform .4s var(--ease),visibility 0s linear .4s;
  box-shadow:-24px 0 70px rgba(23,19,16,.35)}
.cart-panel[data-open=true]{transform:none;visibility:visible;
  transition:transform .4s var(--ease),visibility 0s}
.cart-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.4rem 1.6rem;border-bottom:1px solid var(--line)}
.cart-head h2{font-size:1.7rem}
.cart-close{background:none;border:0;font-size:26px;line-height:1;color:var(--ash);padding:.2rem .4rem}
.cart-close:hover{color:var(--ember)}
.cart-body{flex:1;overflow-y:auto;padding:0 1.6rem}
.cart-foot{padding:1.4rem 1.6rem;border-top:1px solid var(--line);background:var(--bone-2)}
.cart-empty{padding:2.5rem 0;color:var(--ash)}

.cart-line{display:grid;grid-template-columns:52px 1fr auto;gap:.95rem;align-items:center;
  padding:.95rem 0;border-bottom:1px solid var(--line)}
.cart-line img{width:52px;height:52px;border-radius:4px;object-fit:cover}
.cart-line .nm{display:block;font-family:var(--serif);font-size:1.12rem;line-height:1.2}
.cart-line .ea{display:block;font-family:var(--mono);font-size:11px;color:var(--ash);margin-top:.15rem}
.cart-line .line-total{font-family:var(--mono);font-size:14px;white-space:nowrap}
.qty{display:inline-flex;align-items:center;gap:.15rem;margin-top:.35rem}
.qty button{width:26px;height:26px;border:1px solid var(--line);background:transparent;
  border-radius:4px;color:var(--ink);font-size:15px;line-height:1;display:grid;place-items:center}
.qty button:hover{border-color:var(--char);background:var(--bone-2)}
.qty output{font-family:var(--mono);font-size:13px;min-width:26px;text-align:center}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:13px;margin-bottom:1rem}
.cart-total b{font-family:var(--serif);font-size:1.6rem;font-weight:400}

/* Announcements for screen readers when the cart changes. */
.sr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery figure{margin:0;overflow:hidden;border-radius:3px}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;
  transition:transform .7s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figure:nth-child(2){margin-top:2.5rem}

/* ---------- find us ---------- */
.find{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.hours{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13.5px}
.hours th,.hours td{padding:.7rem 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.hours td:last-child{text-align:right;color:var(--ash)}
.hours tr[data-today=true] th,.hours tr[data-today=true] td{color:var(--ember);font-weight:500}

/* ---------- reservation stepper ---------- */
.steps{display:flex;gap:.5rem;margin-bottom:2.6rem;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase}
.step{flex:1;padding-top:.8rem;border-top:2px solid var(--line);color:var(--ash);transition:color .3s,border-color .3s}
.step[data-state=active]{border-color:var(--ember);color:var(--ember)}
.step[data-state=done]{border-color:var(--char);color:var(--char)}

/* Visible by default so that with JavaScript off the three steps read as one
   ordinary form with native date, party, and time controls. The stepper is
   what JS adds on top, not what makes the page work. */
.panel{display:block}
.panel + .panel{margin-top:2.5rem}
.panel[data-active=false]{display:none}
.panel[data-active]{margin-top:0}
.panel h2{font-size:2rem;margin-bottom:.5rem}
.panel > p.sub{color:var(--ash);margin-bottom:2rem}

.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.6rem}
.choice{padding:.85rem .5rem;border:1px solid var(--line);border-radius:4px;background:transparent;
  text-align:center;font-family:var(--mono);font-size:13.5px;transition:all .2s var(--ease)}
.choice:hover:not([disabled]){border-color:var(--char);transform:translateY(-2px)}
.choice[aria-pressed=true]{background:var(--char);border-color:var(--char);color:var(--bone)}
.choice[disabled]{opacity:.32;cursor:not-allowed;text-decoration:line-through}
.choice small{display:block;font-size:9.5px;letter-spacing:.08em;color:var(--ash);margin-top:.2rem}
.choice[aria-pressed=true] small{color:#b6a893}

.slots-status{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ash);margin-bottom:1rem}

.field{margin-bottom:1.2rem}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ash);margin-bottom:.45rem}
.field input,.field textarea,.field select{width:100%;font:400 16px/1.5 var(--sans);color:var(--ink);
  background:var(--bone);border:1px solid var(--line);border-radius:4px;padding:.75rem .9rem;
  transition:border-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ember);outline:none}
.field textarea{min-height:90px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.hp-wrap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.summary{background:var(--bone-2);border:1px solid var(--line);border-radius:4px;padding:1.4rem 1.6rem;margin-bottom:1.8rem}
.summary dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.5rem}
.summary dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.summary dd{margin:0;font-family:var(--serif);font-size:1.15rem}

.notice{border:1px solid var(--line);border-left:2px solid var(--ember);background:var(--bone-2);
  padding:1rem 1.2rem;border-radius:0 4px 4px 0;font-size:15.5px;margin-bottom:1.5rem}
.notice.ok{border-left-color:#2f7d4c}
.notice.err{border-left-color:#b3261e}

/* ---------- sparks ----------
   Embers thrown from the point you press a button. One fixed layer holds them
   all so nothing inside the page layout gets touched. */
.spark-layer{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.spark{position:absolute;top:0;left:0;border-radius:50%;will-change:transform,opacity}

/* ---------- footer ---------- */
.site-footer{background:var(--char);color:#b6a893;padding:4rem 0 2.5rem;font-size:15px}
.site-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem}
.site-footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#7d7061;margin:0 0 1rem;font-weight:400}
.site-footer a{color:#b6a893;text-decoration:none}
.site-footer a:hover{color:var(--ember-lit)}
.site-footer .brand{color:var(--bone);font-size:1.5rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.5rem}
.site-footer .base{border-top:1px solid var(--line-dark);padding-top:1.6rem;
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7d7061}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav .label{display:none}
  .story,.find,.site-footer .cols{grid-template-columns:1fr;gap:2.5rem}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery figure:nth-child(3){display:none}
  .section{padding:4rem 0}
  .hero .wrap{padding-top:5rem;min-height:74vh}
  .field-row{grid-template-columns:1fr}
  .status{display:none}
}
@media (max-width:760px){
  /* Thumbnail and text keep the top row; price and Add drop to their own row
     right-aligned, so a long dish name never gets squeezed into a sliver. */
  .dish{grid-template-columns:auto 1fr;row-gap:.7rem}
  .dish-actions{grid-column:1/-1;justify-content:flex-end}
}

@media (max-width:620px){
  body{font-size:16.5px}
  .dish-name{font-size:1.2rem}
  .thumb{width:56px;height:56px}
  .dish .price{padding-left:calc(56px + 1.15rem)}
  .dish-detail .inner{flex-direction:column}
  .dish-detail img{width:100%;max-width:280px}
  .rule-row{gap:1.5rem}
  .nav{gap:1.1rem}
  .site-header .wrap{min-height:64px}
  .cart-panel{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rise{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .peek,.spark-layer{display:none}
  .flame{animation:none}
}