/* =====================================================================
   РАМКИ БРАУЗЕРОВ
   ===================================================================== */
.frame[data-chrome="ns"] { border-radius: 0; background: #c0c0c0; box-shadow: 0 40px 120px -30px rgba(0,0,0,.8), inset 0 0 0 2px #dfdfdf, inset -2px -2px 0 2px #404040; font: 12px/1.2 "MS Sans Serif", Tahoma, Geneva, sans-serif; color: #000; }
.ns-title { height: 22px; display: flex; align-items: center; gap: 4px; padding: 0 3px 0 4px; margin: 3px 3px 0; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: 700; font-size: 12px; }
.ns-ico { width: 14px; height: 14px; background: #fff; box-shadow: inset 0 0 0 2px #000080; }
.ns-ttl { flex: 1; white-space: nowrap; overflow: hidden; }
.ns-wb { width: 16px; height: 14px; background: #c0c0c0; color: #000; font-size: 10px; line-height: 12px; text-align: center; box-shadow: inset -1px -1px #404040, inset 1px 1px #fff; }
.ns-menu { padding: 3px 8px; display: flex; gap: 12px; }
.ns-bar { display: flex; align-items: stretch; border-top: 1px solid #808080; border-bottom: 1px solid #fff; box-shadow: 0 1px #808080; margin: 0 3px; }
.ns-tools { flex: 1; display: flex; gap: 2px; padding: 3px; }
.ns-btn { width: 56px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding-bottom: 3px; font-size: 11px; box-shadow: inset -1px -1px #404040, inset 1px 1px #fff, inset -2px -2px #808080; }
.ns-i { width: 20px; height: 18px; background: #008080; clip-path: polygon(0 50%, 60% 0, 60% 30%, 100% 30%, 100% 70%, 60% 70%, 60% 100%); }
.ns-i1 { transform: scaleX(-1); }
.ns-i2 { background: #804000; clip-path: polygon(50% 0, 100% 45%, 85% 45%, 85% 100%, 15% 100%, 15% 45%, 0 45%); }
.ns-i3 { background: #008000; clip-path: circle(45%); }
.ns-i4 { background: linear-gradient(#0080ff 55%, #008000 55%); clip-path: none; box-shadow: inset 0 0 0 1px #000; }
.ns-i5 { background: #ffff80; clip-path: none; box-shadow: inset 0 0 0 1px #000; }
.ns-i6 { background: #fff; clip-path: none; box-shadow: inset 0 0 0 1px #000, inset 0 -6px #808080; }
.ns-i7 { background: #000080; clip-path: circle(40% at 40% 40%); }
.ns-i8 { background: #c00000; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.ns-throb { position: relative; width: 58px; margin: 3px; background: #000080; overflow: hidden; box-shadow: inset 1px 1px #404040, inset -1px -1px #fff; display: grid; place-items: center; }
.ns-throb b { font: 700 38px/1 "Times New Roman", serif; color: #fff; text-shadow: 2px 2px #000; position: relative; z-index: 1; }
.ns-throb i { position: absolute; width: 3px; height: 3px; background: #fff; border-radius: 50%; box-shadow: -6px -3px 0 -1px #aaf, -12px -6px 0 -1px #66a; opacity: 0; }
.is-loading .ns-throb i { animation: meteor 1s linear infinite; }
.ns-throb i:nth-child(2) { animation-delay: .33s !important; top: 10px; }
.ns-throb i:nth-child(3) { animation-delay: .66s !important; top: 30px; }
.ns-throb i:nth-child(4) { top: 20px; }
@keyframes meteor { from { left: -10px; opacity: 1; transform: translateY(-10px); } to { left: 70px; opacity: 1; transform: translateY(20px); } }
.ns-addr { display: flex; align-items: center; gap: 6px; padding: 4px 8px 3px; }
.ns-url { flex: 1; height: 21px; padding: 2px 5px; background: #fff; box-shadow: inset 1px 1px #404040, inset -1px -1px #fff, inset 2px 2px #808080; font: 13px/17px "Courier New", monospace; }
.ns-links { display: flex; gap: 3px; padding: 2px 8px 4px; }
.ns-links span { padding: 2px 8px; font-size: 11px; box-shadow: inset -1px -1px #404040, inset 1px 1px #fff; }
.ns-status { height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 4px; margin: 0 3px 3px; font-size: 11px; box-shadow: inset 1px 1px #808080, inset -1px -1px #fff; }
.ns-key { width: 18px; height: 10px; background: linear-gradient(90deg, #808000 0 60%, transparent 60%), #c0c0c0; border-radius: 4px 0 0 4px; }
.ns-stext { flex: 1; white-space: nowrap; overflow: hidden; }
.ns-prog { width: 150px; height: 14px; box-shadow: inset 1px 1px #808080, inset -1px -1px #fff; padding: 2px; }
.ns-prog i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px); }
.is-mob[data-chrome="ns"] .ns-menu, .is-mob[data-chrome="ns"] .ns-links, .is-mob[data-chrome="ns"] .ns-prog { display: none; }
.is-mob[data-chrome="ns"] .ns-btn { width: 36px; font-size: 0; }
.is-mob[data-chrome="ns"] .ns-btn:nth-child(n+5) { display: none; }
.is-mob[data-chrome="ns"] .ns-throb b { font-size: 28px; }

.frame[data-chrome="xp"] { border-radius: 8px 8px 0 0; background: #dfe8f5; font: 12px/1.2 Tahoma, Verdana, sans-serif; color: #000; }
.xp-title { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; color: #fff; font-weight: 700; text-shadow: 1px 1px #0a246a; background: linear-gradient(#3d95ff, #0a5fd8 45%, #0048c8 55%, #1e6ee6); }
.xp-ico { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #3cb2ff 40%, #0050a0); }
.xp-wb { margin-left: auto; display: flex; gap: 2px; }
.xp-wb i { width: 22px; height: 21px; border-radius: 3px; border: 1px solid #fff; background: linear-gradient(#5fa0ff, #2060e0); display: grid; place-items: center; font-style: normal; font-size: 11px; }
.xp-wb i.x { background: linear-gradient(#f08070, #c83c1c); }
.xp-bar { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: linear-gradient(#f4f8fd, #d7e3f3); border-bottom: 1px solid #a8bcd8; }
.xp-back, .xp-fwd { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #bfe0ff, #2a7ae2 60%, #1650b0); box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px #fff; position: relative; }
.xp-fwd { width: 24px; height: 24px; opacity: .6; }
.xp-back::after, .xp-fwd::after { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border: solid #fff; border-width: 0 0 3px 3px; transform: translateX(2px) rotate(45deg); }
.xp-fwd::after { transform: translateX(-2px) rotate(-135deg); width: 7px; height: 7px; }
.xp-addr { flex: 1; height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 6px; background: #fff; border: 1px solid #7f9db9; font-size: 12px; }
.xp-fav { width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(#77d46a, #2f9a24); flex: none; }
.xp-go { margin-left: auto; width: 16px; height: 16px; border-radius: 3px; background: linear-gradient(#8fe06f, #3aa51c); }
.xp-search { width: 190px; height: 24px; border: 1px solid #7f9db9; background: #fff; display: flex; align-items: center; padding: 0 6px; color: #888; }
.xp-search span::before { content: "Я "; color: #e00; font-weight: 700; }
.xp-tabs { display: flex; gap: 2px; padding: 4px 8px 0; background: linear-gradient(#d7e3f3, #c4d5ec); }
.xp-tab { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 14px; border-radius: 6px 6px 0 0; border: 1px solid #99b0cf; border-bottom: 0; background: linear-gradient(#fdfeff, #e3ecf8); font-size: 11px; }
.xp-new { padding: 0 9px; color: #567; background: transparent; }
.xp-status { height: 22px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-size: 11px; background: linear-gradient(#f0f4fa, #d4dfee); border-top: 1px solid #a8bcd8; }
.xp-zone::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; vertical-align: -2px; background: radial-gradient(circle at 35% 35%, #bfe8ff, #3070c0); }
.is-mob[data-chrome="xp"] .xp-search, .is-mob[data-chrome="xp"] .xp-tabs { display: none; }

.frame[data-chrome="ch"] { border-radius: 6px; background: #fff; font: 13px/1.2 "Open Sans", Arial, sans-serif; color: #333; }
.ch-tabs { height: 36px; display: flex; align-items: flex-end; gap: 4px; padding: 0 0 0 12px; background: #c8d1dd; }
.ch-tab { position: relative; display: flex; align-items: center; gap: 8px; height: 30px; width: 250px; padding: 0 12px; background: #f2f2f2; font-size: 12px; white-space: nowrap; overflow: hidden; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%); }
.ch-fav { width: 14px; height: 14px; background: #1de9b6; border-radius: 2px; flex: none; }
.ch-x { margin-left: auto; color: #888; }
.ch-newtab { width: 26px; height: 16px; margin-bottom: 6px; background: #dde3ea; transform: skewX(20deg); border-radius: 2px; }
.ch-wb { margin-left: auto; display: flex; align-self: flex-start; }
.ch-wb i { width: 44px; height: 22px; display: grid; place-items: center; font-style: normal; color: #444; }
.ch-bar { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #f2f2f2; border-bottom: 1px solid #ccc; }
.ch-nav { color: #777; font-size: 16px; }
.ch-omni { flex: 1; height: 28px; display: flex; align-items: center; padding: 0 10px; background: #fff; border: 1px solid #bbb; border-radius: 2px; font-size: 14px; }
.ch-star { margin-left: auto; color: #888; }
.ch-menu { font-size: 18px; color: #666; }
.is-mob[data-chrome="ch"] .ch-tab { width: 200px; }
.is-mob[data-chrome="ch"] .ch-wb, .is-mob[data-chrome="ch"] .ch-nav:nth-child(-n+2) { display: none; }

.frame[data-chrome="mac"] { border-radius: 14px; background: #fff; font: 13px/1.2 "Manrope", system-ui, sans-serif; }
.mac-bar { height: 50px; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: #f6f4fb; border-bottom: 1px solid #e6e1f2; }
.mac-lights { display: flex; gap: 8px; }
.mac-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.mac-lights i:nth-child(2) { background: #febc2e; } .mac-lights i:nth-child(3) { background: #28c840; }
.mac-nav { color: #aaa; font-size: 20px; letter-spacing: 6px; }
.mac-addr { flex: 0 1 420px; margin: 0 auto; height: 30px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; background: #ebe7f4; color: #444; font-size: 13px; }
.mac-lock { width: 9px; height: 8px; border-radius: 2px; background: #777; position: relative; margin-top: 3px; }
.mac-lock::before { content: ""; position: absolute; left: 1.5px; top: -5px; width: 6px; height: 6px; border: 1.5px solid #777; border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; }
.mac-act { width: 60px; }
.is-mob[data-chrome="mac"] .mac-nav, .is-mob[data-chrome="mac"] .mac-act { display: none; }

.frame[data-chrome="glass"] { border-radius: 18px; background: #0c0b0d; box-shadow: 0 40px 120px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1); }
.gl-bar { height: 42px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: rgba(28, 26, 30, .9); border-bottom: 1px solid rgba(255,255,255,.07); font: 12px "Manrope", system-ui, sans-serif; color: #bbb; }
.gl-addr { margin: 0 auto; display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 99px; background: rgba(255,255,255,.06); }
.gl-dot { width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.gl-live { color: #777; }
.gl-live::before { content: "· "; }
.gl-ai { color: #ff8a3d; font-size: 14px; }
.is-mob[data-chrome="glass"] .gl-live { display: none; }

.frame[data-chrome="none"] { background: transparent; box-shadow: none; border-radius: 0; }

/* =====================================================================
   1996
   ===================================================================== */
.e96 {
  background-color: #2b1a10;
  background-image:
    radial-gradient(ellipse 5px 8px at 10px 12px, #5a3a22 60%, transparent 62%),
    radial-gradient(ellipse 5px 8px at 34px 36px, #4a2e1a 60%, transparent 62%),
    radial-gradient(ellipse 4px 7px at 30px 8px, #3d2616 60%, transparent 62%);
  background-size: 44px 44px;
  font: 16px/1.25 "Times New Roman", Times, serif;
  color: #000;
  overflow: hidden;
}
.e96-page { width: 780px; margin: 10px auto 0; }
.e96-main { width: 100%; table-layout: fixed; border-collapse: collapse; background: #fffbe6; border: 3px outset #c8a878; }
.e96-main td { vertical-align: top; }
.e96-head { padding: 8px 10px 4px; text-align: center; background: #ffe9a8; border-bottom: 2px ridge #c8a878; position: relative; }
.e96-wordart {
  display: inline-block; margin: 0;
  font: italic 900 44px/1 "Arial Black", Impact, sans-serif;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #ff0000, #ff8c00 25%, #ffe600 45%, #2bd92b 60%, #0070ff 80%, #9b00ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: perspective(300px) rotateX(18deg) skewX(-8deg);
  filter: drop-shadow(3px 3px 0 #5a2d0c);
}
.e96-cup { position: absolute; left: 22px; top: 12px; width: 44px; height: 44px; }
.e96-cup::before { content: ""; position: absolute; left: 6px; bottom: 2px; width: 28px; height: 22px; background: #fff; border: 2px solid #000; border-radius: 0 0 10px 10px; box-shadow: inset 0 5px #6b3d17; }
.e96-cup::after { content: ""; position: absolute; left: 32px; bottom: 9px; width: 8px; height: 9px; border: 3px solid #000; border-left: 0; border-radius: 0 6px 6px 0; }
.e96-cup i { position: absolute; bottom: 26px; width: 3px; height: 9px; background: #999; animation: steam96 .6s steps(2) infinite; }
.e96-cup i:nth-child(1) { left: 13px; } .e96-cup i:nth-child(2) { left: 20px; animation-delay: .3s; } .e96-cup i:nth-child(3) { left: 27px; }
@keyframes steam96 { 50% { transform: translate(2px, -4px); } }
.e96-new { position: absolute; right: 26px; top: 20px; font: 700 20px/1 "Arial Black", sans-serif; color: #ff0000; background: #ffff00; padding: 2px 5px; border: 2px solid #ff0000; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
.e96-marquee { position: relative; height: 26px; overflow: hidden; white-space: nowrap; background: #000080; color: #ffff00; font: 700 15px/24px "Courier New", monospace; border-bottom: 2px ridge #c8a878; }
.e96-marquee span { position: absolute; left: 0; top: 0; display: inline-block; padding-left: 100%; animation: marquee 18s steps(260) infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }
.e96-nav { width: 190px; padding: 10px; background: #ffe9a8; border-right: 2px ridge #c8a878; }
.e96-navbox { display: flex; flex-direction: column; gap: 5px; font-size: 15px; }
.e96-navbox b { font-size: 13px; color: #800000; }
.e96 a { color: #0000ee; text-decoration: underline; cursor: pointer; }
.e96 a.v { color: #551a8b; }
.e96-navbox a::before { content: "● "; color: #c00000; font-size: 10px; text-decoration: none; display: inline-block; }
.e96-counter { margin-top: 18px; font-size: 13px; text-align: center; }
.e96-counter span { display: inline-block; margin-top: 4px; padding: 2px 4px; background: #000; color: #39ff14; font: 700 18px/1 "Courier New", monospace; letter-spacing: 3px; border: 2px inset #999; }
.e96-best { margin-top: 18px; font-size: 12px; text-align: center; color: #333; padding: 6px; border: 1px dashed #800000; }
.e96-content { padding: 10px 16px 12px; }
.e96-content h2 { margin: 0 0 6px; font: 700 22px/1.15 "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; color: #c00000; text-align: center; }
.e96-content p { margin: 0 0 10px; font-size: 16px; }
.e96-row { display: flex; gap: 16px; align-items: flex-start; }
.e96-menu { border-collapse: separate; background: #fff; font-size: 15px; flex: 1; }
.e96-menu th { background: #c0c0c0; }
.e96-photo { text-align: center; font-size: 11px; }
.e96-photo canvas { display: block; width: 192px; height: 144px; image-rendering: pixelated; border: 2px solid #000; background: #808080; margin-bottom: 3px; }
.e96-uc { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 6px; background: #ffff00; border: 2px solid #000; font: 700 15px/1 Arial, sans-serif; justify-content: center; }
.e96-stripe { width: 70px; height: 20px; background: repeating-linear-gradient(-45deg, #000 0 8px, #ffcc00 8px 16px); animation: stripe .5s steps(2) infinite; }
@keyframes stripe { to { background-position: 11px 0; } }
.e96-foot { color: #ffe9a8; font-size: 12px; text-align: center; padding: 4px 0; }
.e96-foot hr { border: 0; border-top: 2px groove #c8a878; margin: 6px 0; }
.e96-foot a { color: #9fc5ff; }
/* эффекты входа */
.e96.crt { animation: crtOn .55s ease-out both; }
@keyframes crtOn {
  0% { transform: scale(1, .004); filter: brightness(8); }
  45% { transform: scale(1, .004); filter: brightness(4); }
  70% { transform: scale(1, 1.05); filter: brightness(2); }
  100% { transform: none; filter: none; }
}
.e96 .e96-page { clip-path: inset(0 0 var(--load, 0%) 0); }
.is-mob .e96-page { width: auto; margin: 8px; }
.is-mob .e96-wordart { font-size: 26px; }
.is-mob .e96-cup, .is-mob .e96-new { transform: scale(.7); transform-origin: top; }
.is-mob .e96-cup { left: 2px; } .is-mob .e96-new { right: 2px; top: 34px; }
.is-mob .e96-main { table-layout: auto; }
.is-mob .e96-main col { width: auto !important; }
.is-mob .e96-main > tbody > tr:nth-child(3) { display: flex; flex-direction: column-reverse; }
.is-mob .e96-photo canvas { width: 144px; height: 108px; }
.is-mob .e96-nav { width: auto; border-right: 0; border-top: 2px ridge #c8a878; display: flex; gap: 10px; }
.is-mob .e96-navbox { font-size: 13px; }
.is-mob .e96-counter, .is-mob .e96-best { margin-top: 0; }
.is-mob .e96-row { flex-direction: column; }
.is-mob .e96-menu { width: 100%; }
.is-mob .e96-content h2 { font-size: 19px; }

/* =====================================================================
   2007
   ===================================================================== */
.e07 {
  background: repeating-linear-gradient(-45deg, #e9f1e2 0 6px, #f4f9ef 6px 12px);
  font: 13px/1.45 Verdana, Tahoma, sans-serif;
  color: #333;
}
.e07-wrap { width: 960px; margin: 14px auto 0; background: #fff; border-radius: 12px 12px 0 0; box-shadow: 0 0 22px rgba(40, 90, 20, .25); overflow: hidden; }
.e07-head { position: relative; height: 104px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(#5fbf3a, #3a9a1c 50%, #2d8512 50%, #3f9e22); }
.e07-head::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.08)); pointer-events: none; }
.e07-logo { position: relative; z-index: 1; }
.e07-logo-t { font: italic 700 46px/1 "Trebuchet MS", Arial, sans-serif; color: #fff; letter-spacing: -2px; text-shadow: 0 2px 3px rgba(0,0,0,.35); position: relative; display: inline-block; }
.e07-logo-t::after { content: attr(data-text); position: absolute; left: 0; top: 100%; transform: scaleY(-1); opacity: .28; -webkit-mask-image: linear-gradient(transparent 40%, #000); mask-image: linear-gradient(transparent 40%, #000); }
.e07-beta { position: absolute; right: -54px; top: -10px; padding: 2px 7px; background: linear-gradient(#ff8a00, #e04e00); color: #fff; font: 700 11px/1.3 Verdana, sans-serif; border-radius: 4px; transform: rotate(12deg); box-shadow: 0 2px 3px rgba(0,0,0,.3); border: 1px solid #fff; }
.e07-nav { position: relative; z-index: 1; display: flex; gap: 6px; }
.e07-nav a { padding: 8px 16px; border-radius: 16px; color: #fff; font-weight: 700; font-size: 13px; background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.35); }
.e07-nav a.on { background: linear-gradient(#fff, #e3f4d8); color: #2d8512; }
.e07-body { display: flex; gap: 22px; padding: 20px 22px 12px; }
.e07-main { flex: 1; position: relative; }
.e07-burst { position: absolute; right: 6px; top: -8px; width: 92px; height: 92px; display: grid; place-items: center; background: #ffd400; clip-path: polygon(50% 0, 61% 17%, 79% 9%, 79% 29%, 98% 32%, 86% 49%, 98% 66%, 79% 70%, 79% 90%, 61% 82%, 50% 100%, 39% 82%, 21% 90%, 21% 70%, 2% 66%, 14% 49%, 2% 32%, 21% 29%, 21% 9%, 39% 17%); animation: spin 14s linear infinite; }
.e07-burst span { font: 700 14px/1 Verdana, sans-serif; color: #c00; transform: rotate(-12deg); animation: spin 14s linear infinite reverse; }
.e07-h1 { margin: 0 0 8px; font: 700 30px/1.15 "Trebuchet MS", Arial, sans-serif; color: #2d6a12; letter-spacing: -1px; padding: 2px 4px; border-radius: 4px; }
.e07-h1 span { color: #ff7a00; }
.e07-p { margin: 0 0 14px; max-width: 470px; }
.e07-btn { position: relative; display: inline-block; padding: 12px 30px; border-radius: 24px; color: #fff; font: 700 16px/1 "Trebuchet MS", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,.3); background: linear-gradient(#ffb03a, #ff7a00 50%, #f06400 50%, #ff8f1f); border: 1px solid #c85a00; box-shadow: 0 3px 6px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.6); cursor: pointer; overflow: hidden; }
.e07-btn::before { content: ""; position: absolute; left: 6px; right: 6px; top: 2px; height: 45%; border-radius: 20px 20px 50% 50% / 20px 20px 10px 10px; background: linear-gradient(rgba(255,255,255,.65), rgba(255,255,255,.1)); }
.e07-btn span { position: relative; }
.e07-btn:hover { filter: brightness(1.08); }
.e07-products { display: flex; gap: 22px; margin-top: 22px; }
.e07-prod { width: 150px; text-align: center; }
.e07-shot { width: 150px; height: 118px; border-radius: 8px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); -webkit-box-reflect: below 3px linear-gradient(transparent 60%, rgba(255,255,255,.35)); }
.e07-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.e07-prod b { display: block; margin-top: 50px; font: 700 14px "Trebuchet MS", sans-serif; color: #2d6a12; }
.e07-prod span { font-weight: 700; color: #ff7a00; }
.e07-side { width: 230px; display: flex; flex-direction: column; gap: 10px; }
.e07-box { border: 1px solid #c9dfb9; border-radius: 8px; background: linear-gradient(#fff, #f3f9ee); padding: 10px 12px; }
.e07-box-h { font: 700 13px "Trebuchet MS", sans-serif; color: #2d8512; margin: -10px -12px 8px; padding: 6px 12px; border-radius: 8px 8px 0 0; background: linear-gradient(#e9f6df, #d3ecc2); border-bottom: 1px solid #c9dfb9; }
.e07-tags { line-height: 1.5; }
.e07-tags a { color: #2266cc; text-decoration: none; cursor: pointer; }
.e07-tags a:hover { background: #2266cc; color: #fff; }
.e07-rss { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: linear-gradient(#fff4e6, #ffe2bf); border: 1px solid #f5b56c; color: #b35900; font-weight: 700; cursor: pointer; }
.e07-rss-i { width: 22px; height: 22px; border-radius: 5px; background: radial-gradient(circle at 25% 75%, #fff 2.5px, transparent 3px), radial-gradient(circle at 20% 80%, transparent 7px, #fff 7.5px, #fff 9.5px, transparent 10px), radial-gradient(circle at 20% 80%, transparent 12px, #fff 12.5px, #fff 14.5px, transparent 15px), linear-gradient(#ffa237, #e56a00); }
.e07-lj { display: flex; align-items: center; gap: 8px; }
.e07-lj-i { width: 20px; height: 20px; border-radius: 50%; background: #1a5aa6; box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px #1a5aa6; flex: none; }
.e07-start { font-size: 11px; color: #2266cc; text-decoration: underline; text-align: center; }
.e07-foot { display: flex; align-items: center; gap: 16px; padding: 8px 22px 10px; border-top: 1px solid #e3eedb; font-size: 11px; color: #888; }
.e07-badges { display: flex; gap: 4px; }
.e07-badges span { display: flex; width: 80px; height: 15px; font: 9px/13px Verdana, sans-serif; border: 1px solid #555; color: #fff; }
.e07-badges b { background: #fff; color: #333; padding: 0 3px; }
.e07-badges span { background: #555; } .e07-badges .b2 { background: #2c6fbb; } .e07-badges .b3 { background: #f60; } .e07-badges .b4 { background: #3a9a1c; }
.e07-badges span b + * { padding-left: 3px; }
/* вход: аякс-крутилка и жёлтая подсветка */
.e07-spin { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(255,255,255,.85); font: 12px Verdana, sans-serif; color: #555; }
.e07-spin i { display: block; width: 32px; height: 32px; margin: 0 auto 8px; border-radius: 50%; background: conic-gradient(#3a9a1c, transparent); -webkit-mask: radial-gradient(circle, transparent 9px, #000 10px); mask: radial-gradient(circle, transparent 9px, #000 10px); animation: spin .8s steps(8) infinite; }
.yft { animation: yft 2s ease-out; }
@keyframes yft { 0%, 20% { background: #ffff99; } 100% { background: transparent; } }
.appear { animation: appear .8s linear both; }
@keyframes appear { from { opacity: 0; } }
.is-mob .e07-wrap { width: auto; margin: 0; border-radius: 0; }
.is-mob .e07-head { height: auto; padding: 16px; flex-direction: column; align-items: flex-start; gap: 12px; }
.is-mob .e07-nav a:nth-child(n+4) { display: none; }
.is-mob .e07-body { flex-direction: column; padding: 16px; }
.is-mob .e07-burst { width: 70px; height: 70px; top: -40px; }
.is-mob .e07-h1 { font-size: 24px; }
.is-mob .e07-products { gap: 10px; }
.is-mob .e07-prod, .is-mob .e07-shot { width: 110px; } .is-mob .e07-shot { height: 90px; }
.is-mob .e07-prod b { margin-top: 40px; }
.is-mob .e07-side { width: auto; flex-direction: row; flex-wrap: wrap; }
.is-mob .e07-side > :first-child, .is-mob .e07-start { display: none; }
.is-mob .e07-foot { flex-direction: column; align-items: flex-start; gap: 6px; }

/* =====================================================================
   2013
   ===================================================================== */
.e13 { display: flex; flex-direction: column; background: #fff; font-family: "Open Sans", Arial, sans-serif; color: #fff; }
.e13-hero { position: relative; flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.e13-bg { position: absolute; inset: -30px; background: center / cover; transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.04); transition: transform .4s ease-out; }
.e13-bg::after { content: ""; position: absolute; inset: 0; background: rgba(20, 30, 38, .55); }
.e13-nav { position: relative; display: flex; align-items: center; gap: 30px; padding: 22px 40px; }
.e13-logo { display: flex; align-items: center; gap: 10px; font-weight: 300; font-size: 22px; letter-spacing: .35em; }
.e13-mark { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #1de9b6; position: relative; }
.e13-mark::after { content: ""; position: absolute; inset: 5px; border-radius: 50% 0; background: #1de9b6; transform: rotate(45deg); }
.e13-links { margin-left: auto; display: flex; gap: 30px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.e13-links a { opacity: .85; }
.e13-burger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.e13-burger i { width: 24px; height: 2px; background: #fff; }
.e13-center { position: relative; margin: auto; text-align: center; padding-bottom: 30px; }
.e13-pre { margin: 0; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: #1de9b6; }
.e13-h1 { margin: 12px 0; font-weight: 300; font-size: 60px; line-height: 1.05; letter-spacing: -.01em; }
.e13-sub { margin: 0 0 28px; font-size: 16px; opacity: .85; }
.e13-ghost { display: inline-block; padding: 14px 34px; border: 2px solid #fff; color: #fff; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s; }
.e13-ghost:hover { background: #fff; color: #222; }
.e13-down { position: absolute; left: 50%; bottom: 16px; width: 16px; height: 16px; margin-left: -8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); animation: bounce13 1.6s ease-in-out infinite; }
@keyframes bounce13 { 50% { translate: 0 8px; } }
.e13-tiles { display: grid; grid-template-columns: repeat(3, 1fr); height: 210px; }
.e13-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.e13-tile.t1 { background: #1abc9c; } .e13-tile.t2 { background: #e67e22; } .e13-tile.t3 { background: #9b59b6; }
.e13-ico { position: relative; width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; margin-bottom: 14px; }
.e13-ico svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.e13-tile .e13-ico { box-shadow:
  4px 4px 0 rgba(0,0,0,.1), 8px 8px 0 rgba(0,0,0,.09), 12px 12px 0 rgba(0,0,0,.08), 16px 16px 0 rgba(0,0,0,.07), 20px 20px 0 rgba(0,0,0,.06), 24px 24px 0 rgba(0,0,0,.05), 28px 28px 0 rgba(0,0,0,.04), 32px 32px 0 rgba(0,0,0,.03), 36px 36px 0 rgba(0,0,0,.02); }
.e13-tile b { font-weight: 600; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
.e13-tile p { margin: 6px 0 0; font-size: 13px; opacity: .85; font-weight: 300; }
.flip-in { animation: flipIn .7s cubic-bezier(.2,.8,.2,1) both; transform-origin: 0 50%; }
@keyframes flipIn { from { transform: perspective(700px) rotateY(80deg); opacity: 0; } }
.fade-up { animation: fadeUp .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } }
.is-mob .e13-nav { padding: 18px 20px; }
.is-mob .e13-links { display: none; }
.is-mob .e13-burger { margin-left: auto; }
.is-mob .e13-h1 { font-size: 38px; padding: 0 16px; }
.is-mob .e13-sub { padding: 0 24px; font-size: 14px; }
.is-mob .e13-tiles { grid-template-columns: 1fr; height: auto; }
.is-mob .e13-tile { flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; padding: 14px 20px; }
.is-mob .e13-ico { width: 48px; height: 48px; margin: 0; flex: none; }
.is-mob .e13-ico svg { width: 26px; height: 26px; }
.is-mob .e13-tile p { display: none; }

/* =====================================================================
   2019
   ===================================================================== */
.e19 { background: #f7f3ff; font-family: "Manrope", system-ui, sans-serif; color: #241c52; overflow: hidden; }
.e19-blob { position: absolute; }
.e19-blob.b1 { width: 620px; right: -120px; top: -120px; fill: #e9defd; animation: blobby 12s ease-in-out infinite alternate; }
.e19-blob.b2 { width: 380px; left: -140px; bottom: -160px; fill: #ffe3ef; animation: blobby 14s ease-in-out infinite alternate-reverse; }
@keyframes blobby { to { transform: rotate(40deg) scale(1.1); } }
.e19-nav { position: relative; display: flex; align-items: center; gap: 30px; padding: 22px 48px; font-weight: 600; font-size: 15px; }
.e19-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 24px; letter-spacing: -.03em; }
.e19-logo-i { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, #b18cff, #ff7eb6); box-shadow: 0 6px 14px -4px #b18cff; }
.e19-links { display: flex; gap: 26px; margin-left: 20px; color: #5b5485; }
.e19-toggle { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #5b5485; cursor: pointer; }
.e19-sw { width: 50px; height: 28px; border-radius: 99px; background: #efe9fb; box-shadow: inset 4px 4px 8px #d6cdea, inset -4px -4px 8px #fff; position: relative; }
.e19-sw i { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #f7f3ff; box-shadow: 3px 3px 6px #cfc4e6, -2px -2px 5px #fff; transition: transform .4s var(--spring); }
.e19-toggle.on .e19-sw i { transform: translateX(22px); background: #241c52; }
.e19-login { padding: 10px 22px; border-radius: 99px; background: #fff; box-shadow: 0 6px 20px -8px rgba(80, 40, 160, .35); }
.e19-hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; padding: 10px 48px 0 64px; }
.e19-pill { display: inline-block; padding: 6px 14px; border-radius: 99px; background: #fff; font-size: 13px; font-weight: 600; color: #7a55e0; box-shadow: 0 6px 20px -10px rgba(80,40,160,.5); }
.e19-h1 { margin: 18px 0 14px; font-weight: 800; font-size: 54px; line-height: 1.02; letter-spacing: -.035em; }
.e19-h1 span { background: linear-gradient(90deg, #7a55e0, #ff5ea0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.e19-p { margin: 0 0 26px; font-size: 17px; line-height: 1.55; color: #5b5485; max-width: 440px; }
.e19-ctas { display: flex; gap: 16px; align-items: center; }
.e19-cta { padding: 17px 30px; border-radius: 16px; color: #fff; font-weight: 700; font-size: 16px; background: linear-gradient(135deg, #8f63ff, #ff5ea0); box-shadow: 0 16px 34px -10px rgba(210, 80, 190, .75); cursor: pointer; transition: transform .25s var(--spring), box-shadow .25s; }
.e19-cta:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -10px rgba(210, 80, 190, .85); }
.e19-play { display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.e19-play i { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 8px 20px -8px rgba(80,40,160,.5); position: relative; }
.e19-play i::after { content: ""; position: absolute; left: 17px; top: 14px; border: 8px solid transparent; border-left: 12px solid #7a55e0; border-right: 0; }
.e19-stores { display: flex; gap: 10px; margin-top: 26px; }
.e19-stores span { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: #241c52; color: #fff; font-size: 13px; font-weight: 700; }
.e19-stores b { width: 16px; height: 16px; border-radius: 4px; background: #fff; }
.e19-stores b.g { background: linear-gradient(135deg, #3ddc84 50%, #ffd166 50%); clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 0; }
.e19-art { position: relative; }
.e19-ill { width: 100%; max-width: 500px; overflow: visible; }
.e19-person { transform-origin: 185px 350px; animation: sway 4s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(-2deg); } }
.e19-bigcup { animation: float19 3.2s ease-in-out infinite; }
@keyframes float19 { 50% { transform: translateY(-10px); } }
.e19-steam { stroke-dasharray: 30; animation: steam19 2s linear infinite; }
@keyframes steam19 { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
.e19-plant { transform-origin: 344px 340px; animation: sway 5s ease-in-out infinite; }
.e19-cookie { position: absolute; left: 24px; bottom: 22px; display: flex; align-items: center; gap: 14px; width: 470px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -18px rgba(60, 30, 130, .45); font-size: 13px; color: #5b5485; }
.e19-cookie p { margin: 0; flex: 1; }
.e19-cookie a { padding: 9px 18px; border-radius: 10px; background: #241c52; color: #fff; font-weight: 700; cursor: pointer; }
.e19-cookie-i { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 30% 35%, #6b3d17 3px, transparent 3.5px), radial-gradient(circle at 65% 60%, #6b3d17 3px, transparent 3.5px), radial-gradient(circle at 40% 70%, #6b3d17 2.5px, transparent 3px), #e7b877; flex: none; }
.e19-cookie.gone { animation: slideAway .5s var(--ease) forwards; }
@keyframes slideAway { to { transform: translateY(140%); opacity: 0; } }
.e19-chat { position: absolute; right: 26px; bottom: 22px; display: flex; align-items: flex-end; gap: 12px; }
.e19-bubble { padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: #fff; box-shadow: 0 20px 40px -18px rgba(60, 30, 130, .45); font-size: 14px; max-width: 220px; }
.e19-bubble b { display: block; font-size: 12px; color: #7a55e0; margin-bottom: 2px; }
.e19-fab { position: relative; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #8f63ff, #ff5ea0); box-shadow: 0 12px 26px -8px rgba(210, 80, 190, .7); flex: none; }
.e19-fab::before { content: ""; position: absolute; inset: 17px 15px 19px; border-radius: 8px 8px 8px 2px; background: #fff; }
.e19-fab i { position: absolute; top: -2px; right: -2px; width: 20px; height: 20px; border-radius: 50%; background: #ff3b5c; color: #fff; font: 700 11px/20px "Manrope", sans-serif; text-align: center; font-style: normal; border: 2px solid #f7f3ff; }
.pop-in { animation: popIn19 .6s var(--spring) both; }
@keyframes popIn19 { from { opacity: 0; transform: scale(.6) translateY(20px); } }
.is-mob .e19-nav { padding: 18px 20px; gap: 12px; }
.is-mob .e19-links, .is-mob .e19-toggle { display: none; }
.is-mob .e19-login { margin-left: auto; }
.is-mob .e19-hero { grid-template-columns: 1fr; padding: 0 20px; gap: 0; }
.is-mob .e19-art { order: -1; height: 190px; display: flex; justify-content: center; }
.is-mob .e19-ill { width: auto; height: 190px; }
.is-mob .e19-h1 { font-size: 34px; margin: 12px 0 10px; }
.is-mob .e19-p { font-size: 15px; margin-bottom: 18px; }
.is-mob .e19-play span, .is-mob .e19-stores { display: none; }
.is-mob .e19-cta { padding: 14px 20px; font-size: 14px; }
.is-mob .e19-cookie { left: 12px; right: 12px; width: auto; bottom: 12px; font-size: 12px; }
.is-mob .e19-chat { bottom: 110px; right: 12px; }
.is-mob .e19-bubble { display: none; }

/* =====================================================================
   2026
   ===================================================================== */
.e26 {
  --o: #ff8a3d;
  background: #0c0b0d;
  font-family: "Manrope", system-ui, sans-serif;
  color: #f4efe9;
  padding: 0 22px 22px;
  display: flex; flex-direction: column;
}
.e26::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; z-index: 5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
.e26-nav { display: flex; align-items: center; gap: 28px; height: 64px; flex: none; }
.e26-logo { font: 800 24px/1 "Manrope", sans-serif; letter-spacing: -.05em; }
.e26-logo i { color: var(--o); font-style: normal; }
.e26-links { display: flex; gap: 22px; color: #9a948d; font-size: 14px; font-weight: 600; }
.e26-order { margin-left: auto; padding: 10px 20px; border-radius: 99px; background: #f4efe9; color: #0c0b0d; font-weight: 800; font-size: 14px; cursor: pointer; transition: transform .2s var(--spring); }
.e26-order:hover { transform: scale(1.05); }
.e26-grid { flex: 1; min-height: 0; display: grid; gap: 12px; grid-template-columns: 1.25fr 1.25fr 1fr 1fr; grid-template-rows: 1fr 1fr .78fr; }
.e26-card {
  position: relative; overflow: hidden;
  border-radius: 22px;
  background: #18161a;
  padding: 18px;
  isolation: isolate;
}
.e26-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 138, 61, .16), transparent 70%); }
.e26-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 170, 110, .7), rgba(255,255,255,.06) 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.e26-card:hover::before { opacity: 1; }
.e26-hero { grid-column: 1 / 3; grid-row: 1 / 3; padding: 0; display: flex; align-items: flex-end; }
.e26-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.06); transition: transform 1.4s var(--ease); }
.e26-hero:hover img { transform: scale(1.1); }
.e26-hero::before { opacity: 1; background: linear-gradient(transparent 30%, rgba(8,7,9,.9)); z-index: -1; }
.e26-hero-copy { padding: 28px; }
.e26-h1 { margin: 0 0 10px; font: 400 76px/.92 "Instrument Serif", Georgia, serif; letter-spacing: -.02em; }
.e26-h1 span, .e26-h1 em { display: inline-block; }
.e26-h1 em { color: var(--o); }
.e26-hero-copy p { margin: 0 0 18px; color: #c9c2ba; font-size: 16px; }
.e26-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 99px; background: var(--o); color: #1a0e05; font-weight: 800; cursor: pointer; transition: transform .25s var(--spring), gap .25s; }
.e26-btn:hover { gap: 16px; }
.e26-k { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9a948d; }
.e26-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: live 1.8s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.e26-big { font: 800 64px/1 "Manrope", sans-serif; letter-spacing: -.06em; margin-top: 10px; transition: opacity .3s; }
.e26-sub { font-size: 13px; color: #9a948d; margin-top: 4px; }
.e26-sub b { color: #f4efe9; }
.e26-spark { position: absolute; left: 18px; right: 18px; bottom: 16px; height: 40px; display: flex; align-items: flex-end; gap: 4px; }
.e26-bar { flex: 1; border-radius: 3px; background: linear-gradient(#ff8a3d, #ff8a3d55); height: calc(20% + var(--h, 30) * 1%); transition: height .8s var(--spring); }
.e26-ask { grid-column: 4; grid-row: 1; background: linear-gradient(160deg, #221a14, #18161a 60%); }
.e26-input { margin-top: 16px; min-height: 46px; padding: 12px 14px; border-radius: 14px; background: #0c0b0d; border: 1px solid #2c2a2e; font-size: 14px; }
.e26-caret { display: inline-block; width: 2px; height: 16px; background: var(--o); vertical-align: -3px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
.e26-answer { margin-top: 10px; font-size: 13px; line-height: 1.45; color: #d8d1c9; min-height: 38px; }
.e26-answer b { color: var(--o); }
.e26-loyal { grid-column: 3; grid-row: 2; }
.e26-ring { position: absolute; right: 16px; top: 44px; width: 86px; height: 86px; transform: rotate(-90deg); }
.e26-ring circle { fill: none; stroke: #2c2a2e; stroke-width: 9; }
.e26-ring .e26-ring-f { stroke: var(--o); stroke-linecap: round; stroke-dasharray: 251; stroke-dashoffset: 251; transition: stroke-dashoffset 1.6s var(--ease) .3s; }
.e26.ready .e26-ring-f { stroke-dashoffset: 75; }
.e26-ring-t { margin-top: 14px; font-size: 16px; color: #9a948d; }
.e26-ring-t b { font: 800 42px/1 "Manrope", sans-serif; color: #f4efe9; letter-spacing: -.05em; }
.e26-loyal .e26-sub { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.e26-map { grid-column: 4; grid-row: 2; background: #1d1a17; }
.e26-streets { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #332e29; stroke-width: 6; z-index: -1; }
.e26-pin { position: absolute; left: 55%; top: 48%; width: 18px; height: 18px; border-radius: 50%; background: var(--o); box-shadow: 0 0 0 6px rgba(255,138,61,.25), 0 0 30px var(--o); animation: pinBob 2s ease-in-out infinite; }
@keyframes pinBob { 50% { transform: translateY(-5px); } }
.e26-map .e26-sub { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.e26-live { grid-column: 3; grid-row: 1; }
.e26-menu { grid-column: 1 / 3; grid-row: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; }
.e26-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; background: #0f0e10; transition: background .25s, transform .25s var(--spring); cursor: pointer; }
.e26-item:hover { background: #221f23; transform: translateY(-2px); }
.e26-item img { width: 62px; height: 62px; border-radius: 12px; object-fit: cover; }
.e26-item b { display: block; font-size: 15px; }
.e26-item span { font-size: 13px; color: #9a948d; }
.e26-item i { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: #2c2a2e; display: grid; place-items: center; font-style: normal; font-weight: 700; }
.e26-rev { grid-column: 3 / 5; grid-row: 3; }
.e26-quotes { height: 34px; overflow: hidden; margin-top: 10px; }
.e26-quotes > div { animation: quotes 10s cubic-bezier(.7, 0, .3, 1) infinite; }
.e26-quotes p { margin: 0; height: 34px; font: italic 400 26px/34px "Instrument Serif", Georgia, serif; }
@keyframes quotes { 0%, 28% { transform: translateY(0); } 33%, 61% { transform: translateY(-34px); } 66%, 94% { transform: translateY(-68px); } 100% { transform: translateY(-102px); } }
.blur-in { animation: blurIn .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes blurIn { from { opacity: 0; filter: blur(12px); transform: translateY(16px); } }
.rise { animation: rise .8s cubic-bezier(.2, .9, .25, 1.1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.is-mob .e26 { padding: 0 12px 12px; }
.is-mob .e26-links { display: none; }
.is-mob .e26-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1.5fr .9fr .9fr .75fr; gap: 10px; }
.is-mob .e26-hero { grid-column: 1 / 3; grid-row: 1; }
.is-mob .e26-h1 { font-size: 48px; }
.is-mob .e26-hero-copy { padding: 18px; }
.is-mob .e26-live { grid-column: 1; grid-row: 2; }
.is-mob .e26-ask { grid-column: 2; grid-row: 2; }
.is-mob .e26-loyal { grid-column: 1; grid-row: 3; }
.is-mob .e26-map { grid-column: 2; grid-row: 3; }
.is-mob .e26-menu { grid-column: 1 / 3; grid-row: 4; grid-template-columns: 1fr 1fr; }
.is-mob .e26-menu .e26-item:nth-child(3) { display: none; }
.is-mob .e26-item img { width: 44px; height: 44px; }
.is-mob .e26-item i { display: none; }
.is-mob .e26-rev { display: none; }
.is-mob .e26-big { font-size: 44px; }
.is-mob .e26-spark { height: 24px; }
.is-mob .e26-ring { width: 56px; height: 56px; top: 40px; right: 12px; }
.is-mob .e26-ask .e26-answer { display: none; }
.is-mob .e26-card { padding: 14px; }
.is-mob .e26-loyal .e26-sub, .is-mob .e26-map .e26-sub { font-size: 11px; left: 14px; bottom: 12px; }

/* =====================================================================
   2040
   ===================================================================== */
.e40 { background: #03020a; color: #e8fbff; font-family: "Unbounded", system-ui, sans-serif; perspective: 1200px; }
.e40-neb { position: absolute; inset: -20%; background:
  radial-gradient(30% 40% at 30% 40%, rgba(124, 247, 255, .18), transparent 70%),
  radial-gradient(35% 45% at 70% 60%, rgba(167, 139, 255, .22), transparent 70%),
  radial-gradient(25% 30% at 55% 25%, rgba(255, 106, 213, .14), transparent 70%);
  animation: neb 18s ease-in-out infinite alternate; }
@keyframes neb { to { transform: rotate(12deg) scale(1.15); } }
.e40::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 3px, rgba(124, 247, 255, .025) 3px 4px); }
.e40-cup { position: absolute; left: 50%; top: 46%; width: 560px; height: 560px; transform: translate(-50%, -50%); }
[data-depth] { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.e40-top { position: absolute; left: 36px; right: 36px; top: 26px; display: flex; align-items: center; gap: 24px; font-size: 11px; letter-spacing: .08em; }
.e40-logo { font-weight: 300; font-size: 22px; letter-spacing: .5em; text-transform: lowercase; text-shadow: 0 0 20px #7cf7ff; }
.e40-link { display: flex; align-items: center; gap: 8px; color: #8fd8e0; }
.e40-link i { width: 7px; height: 7px; border-radius: 50%; background: #7cf7ff; box-shadow: 0 0 10px #7cf7ff; animation: live40 1.4s ease-in-out infinite; }
@keyframes live40 { 50% { opacity: .3; } }
.e40-built { margin-left: auto; color: #8a86b8; }
.e40-built b { color: #e8fbff; font-weight: 500; }
.e40-panel {
  position: absolute;
  padding: 18px 20px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(124, 247, 255, .08), rgba(167, 139, 255, .06));
  border: 1px solid rgba(124, 247, 255, .22);
  box-shadow: 0 0 40px -10px rgba(124, 247, 255, .35), inset 0 0 30px rgba(124, 247, 255, .05);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.e40-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(transparent 45%, rgba(124, 247, 255, .12) 50%, transparent 55%); background-size: 100% 300%; animation: scan 5s linear infinite; pointer-events: none; }
@keyframes scan { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
.e40-k { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #7cf7ff; }
.e40-note { font: 12px/1.4 "Manrope", sans-serif; color: #a9a4d6; margin-top: 8px; }
.e40-panel { transform: rotateY(var(--rot, 0deg)); }
.e40-taste { left: 50px; top: 120px; width: 250px; --rot: 16deg; }
.e40-radar { width: 210px; height: 210px; overflow: visible; display: block; margin: 6px auto 0; }
.e40-radar .e40-grid polygon { fill: none; stroke: rgba(124, 247, 255, .18); }
.e40-shape { fill: rgba(255, 106, 213, .25); stroke: #ff6ad5; stroke-width: 2; filter: drop-shadow(0 0 6px #ff6ad5); transform-origin: 100px 100px; animation: radarIn 1.4s cubic-bezier(.2, .9, .3, 1.2) both .4s; }
@keyframes radarIn { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
.e40-radar text { fill: #a9a4d6; font: 9px "Manrope", sans-serif; text-anchor: middle; }
.e40-origin { right: 50px; top: 110px; width: 260px; --rot: -16deg; }
.e40-origin ol { list-style: none; margin: 14px 0 0; padding: 0 0 0 16px; border-left: 1px dashed rgba(124, 247, 255, .4); display: flex; flex-direction: column; gap: 14px; }
.e40-origin li { position: relative; }
.e40-origin li::before { content: ""; position: absolute; left: -21px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #03020a; border: 2px solid #7cf7ff; }
.e40-origin li:last-child::before { background: #7cf7ff; box-shadow: 0 0 12px #7cf7ff; }
.e40-origin b { display: block; font-weight: 500; font-size: 13px; }
.e40-origin span { font: 12px "Manrope", sans-serif; color: #a9a4d6; }
.e40-eta { right: 110px; top: 380px; display: flex; align-items: center; gap: 14px; padding: 14px 18px; --rot: -10deg; }
.e40-eta svg { width: 50px; height: 50px; transform: rotate(-90deg); }
.e40-eta circle { fill: none; stroke: rgba(124, 247, 255, .15); stroke-width: 4; }
.e40-eta .e40-eta-f { stroke: #7cf7ff; stroke-dasharray: 151; stroke-dashoffset: var(--eta, 0); stroke-linecap: round; filter: drop-shadow(0 0 4px #7cf7ff); transition: stroke-dashoffset 1s linear; }
.e40-eta b { display: block; font-weight: 500; font-size: 20px; }
.e40-eta span { font: 11px "Manrope", sans-serif; color: #a9a4d6; }
.e40-assist { position: absolute; left: 50%; bottom: 58px; width: 560px; margin-left: -280px; text-align: center; }
.e40-wave { height: 36px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.e40-w { width: 3px; border-radius: 3px; background: linear-gradient(#7cf7ff, #ff6ad5); height: 4px; transition: height .12s; }
.e40-say { min-height: 56px; margin: 14px 0 16px; font: 300 21px/1.35 "Unbounded", sans-serif; letter-spacing: -.01em; }
.e40-say::after { content: ""; display: inline-block; width: 10px; height: 20px; margin-left: 4px; vertical-align: -3px; background: #7cf7ff; box-shadow: 0 0 10px #7cf7ff; animation: blink 1s steps(1) infinite; }
.e40-chips { display: flex; justify-content: center; gap: 10px; }
.e40-chips button { padding: 11px 20px; border-radius: 99px; border: 1px solid rgba(124, 247, 255, .4); background: rgba(124, 247, 255, .08); color: #e8fbff; font: 400 13px "Unbounded", sans-serif; cursor: pointer; transition: background .2s, transform .2s var(--spring), box-shadow .2s; }
.e40-chips button:hover { background: rgba(124, 247, 255, .2); box-shadow: 0 0 20px rgba(124, 247, 255, .4); transform: translateY(-2px); }
.e40-chips button.on { background: #7cf7ff; color: #03020a; }
.e40-hint { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 30px; font: 11px "Manrope", sans-serif; color: #6d68a0; }
.materialize { animation: materialize 1.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes materialize { 0% { opacity: 0; filter: blur(10px) brightness(3); clip-path: inset(0 0 100% 0); } 60% { opacity: 1; filter: blur(0) brightness(1.6); } 100% { clip-path: inset(0 0 0 0); filter: none; } }
.is-mob .e40-top { left: 18px; right: 18px; top: 18px; flex-wrap: wrap; gap: 8px 16px; }
.is-mob .e40-logo { font-size: 16px; }
.is-mob .e40-built { margin-left: 0; width: 100%; }
.is-mob .e40-cup { width: 380px; height: 380px; top: 36%; }
.is-mob .e40-taste, .is-mob .e40-origin { display: none; }
.is-mob .e40-eta { right: 16px; top: 100px; padding: 10px 12px; }
.is-mob .e40-eta svg { width: 36px; height: 36px; }
.is-mob .e40-eta b { font-size: 16px; }
.is-mob .e40-eta span { display: none; }
.is-mob .e40-assist { width: auto; left: 16px; right: 16px; margin: 0; bottom: 50px; }
.is-mob .e40-say { font-size: 16px; }
.is-mob .e40-chips button { padding: 10px 14px; font-size: 11px; }
.is-mob .e40-hint { flex-direction: column; align-items: center; gap: 4px; bottom: 10px; }

/* в линзе всё неподвижно и без входных эффектов */
.lens-inner .era *, .lens-inner .era { animation: none !important; }
.lens-inner .e96-page { clip-path: none; }